/* Leaderboard views (leaderboard/views.js): search, Mac x model grid,
   ?mac= and ?model= views. Uses the board's --lb-* tokens, so light and dark
   follow leaderboard.css. */

.lbx { padding-block: clamp(28px, 5vw, 48px); border-top: 1px solid var(--lb-hairline); scroll-margin-top: 80px; }
.lbx-title { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.01em; margin: 0 0 14px; color: var(--lb-ink); }

/* A view replaces the hero: the reader came for an answer, not the intro. */
body.lbx-focused .lb-hero, body.lbx-focused .lb-pulse { display: none; }
body.lbx-focused .lbx { border-top: 0; padding-top: 24px; }
body.lbx-focused .lbx-title { display: none; }

/* ---- Search ---- */
.lbx-search { position: relative; display: flex; align-items: center; gap: 10px; max-width: 640px;
  border: 1px solid var(--lb-hairline-strong); border-radius: 10px; background: var(--lb-raised);
  padding: 0 12px; color: var(--lb-ink-3); }
.lbx-search:focus-within { border-color: var(--lb-amber); box-shadow: 0 0 0 3px var(--lb-amber-tint); }
.lbx-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--lb-ink);
  font: 15px var(--lb-sans); padding: 12px 0; min-height: 44px; }
.lbx-results { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px;
  list-style: none; background: var(--lb-raised); border: 1px solid var(--lb-hairline-strong); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12); max-height: 340px; overflow-y: auto; }
.lbx-results li { display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: 7px; cursor: pointer; color: var(--lb-ink); min-width: 0; }
.lbx-results li:hover, .lbx-results li.is-active { background: var(--lb-hover); }
.lbx-opt-kind { font: 10px var(--lb-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--lb-ink-3); flex: 0 0 44px; }
.lbx-opt-label { font-weight: 600; overflow-wrap: anywhere; }
.lbx-opt-sub { font-size: 12px; color: var(--lb-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.lbx-view { margin-top: 18px; min-width: 0; }
.lbx-dim { color: var(--lb-ink-3); font-size: 13px; line-height: 1.5; }
.lbx-note { font-size: 12.5px; color: var(--lb-ink-3); margin: 6px 0 12px; }
.lbx-empty { color: var(--lb-ink-2); padding: 18px; border: 1px dashed var(--lb-hairline-strong); border-radius: var(--lb-radius); }

/* ---- Stats ---- */
.lbx-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--lb-ink-2); margin-bottom: 12px; }
.lbx-stat b { color: var(--lb-ink); font-variant-numeric: tabular-nums; }
.lbx-stat--latest { color: var(--lb-ink-3); }

/* ---- Grid ---- */
.lbx-grid-wrap { overflow-x: auto; border: 1px solid var(--lb-hairline); border-radius: var(--lb-radius); background: var(--lb-raised); max-width: 100%; }
.lbx-grid-wrap:focus-visible { outline: 2px solid var(--lb-amber); outline-offset: 2px; }
.lbx-grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.lbx-grid th, .lbx-grid td { padding: 8px 10px; border-bottom: 1px solid var(--lb-hairline); text-align: center; white-space: nowrap; }
.lbx-grid tbody tr:last-child th, .lbx-grid tbody tr:last-child td { border-bottom: 0; }
.lbx-grid thead th { font: 11px var(--lb-mono); color: var(--lb-ink-3); vertical-align: bottom; background: var(--lb-rail); }
.lbx-col a { color: var(--lb-ink-2); text-decoration: none; display: inline-block; max-width: 132px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.lbx-col a:hover { color: var(--lb-ink); text-decoration: underline; }
.lbx-corner, .lbx-row { position: sticky; left: 0; z-index: 1; text-align: left !important; background: var(--lb-raised); }
.lbx-corner { background: var(--lb-rail) !important; z-index: 2; }
.lbx-row a { color: var(--lb-ink); text-decoration: none; font-weight: 600; }
.lbx-row a:hover { text-decoration: underline; }
.lbx-you { display: inline-block; margin-left: 6px; font: 9.5px var(--lb-mono); text-transform: uppercase; color: var(--lb-amber-deep); }
tr.is-mine th, tr.is-mine td { background: var(--lb-amber-tint); }
.lbx-c { font-variant-numeric: tabular-nums; }
.lbx-c-link { color: var(--lb-ink); text-decoration: none; font-weight: 600; }
.lbx-c-link:hover { text-decoration: underline; }
.lbx-c.is-single .lbx-c-link, .lbx-single-mark { text-decoration: underline dotted var(--lb-ink-3); text-underline-offset: 3px; font-weight: 500; }
.lbx-n { font-size: 9.5px; font-weight: 500; color: var(--lb-ink-3); margin-left: 2px; text-decoration: none; display: inline-block; }
.lbx-c.is-nofit { color: var(--lb-ink-3); }
.lbx-plus { width: 28px; height: 28px; border-radius: 7px; border: 1px dashed var(--lb-hairline-strong); background: transparent; color: var(--lb-ink-3); cursor: pointer; font: 600 15px var(--lb-sans); padding: 0; }
.lbx-plus:hover, .lbx-c.is-active .lbx-plus { border-color: var(--lb-amber); color: var(--lb-amber-deep); background: var(--lb-amber-tint); }
.lbx-plus:focus-visible { outline: 2px solid var(--lb-amber); outline-offset: 2px; }
.lbx-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--lb-ink-3); margin: 10px 0 0; }
.lbx-legend b { color: var(--lb-ink-2); }
.lbx-invite { margin-top: 14px; padding: 14px; border: 1px solid var(--lb-amber-line); background: var(--lb-amber-tint); border-radius: var(--lb-radius); }
.lbx-invite p { margin: 0 0 10px; color: var(--lb-ink-2); font-size: 14px; }
.lbx-more-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---- Breadcrumb ---- */
.lbx-crumb { font-size: 15px; color: var(--lb-ink-2); margin-bottom: 14px; overflow-wrap: anywhere; }
.lbx-crumb a { color: var(--lb-ink-3); text-decoration: none; }
.lbx-crumb a:hover { text-decoration: underline; }
.lbx-crumb > span:first-of-type { color: var(--lb-ink); font-weight: 700; font-size: 20px; }
.lbx-crumb-meta { color: var(--lb-ink-3); font-size: 13px; }
.lbx-repo { margin-top: -6px; overflow-wrap: anywhere; }

/* ---- ?mac= cards ---- */
.lbx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.lbx-card { border: 1px solid var(--lb-hairline); border-radius: var(--lb-radius); background: var(--lb-raised); padding: 16px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lbx-card--smart { border-top: 3px solid var(--lb-amber); }
.lbx-card--fast { border-top: 3px solid var(--lb-green); }
.lbx-card h3 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.lbx-card h3 a { color: var(--lb-ink); text-decoration: none; }
.lbx-card h3 a:hover { text-decoration: underline; }
.lbx-card p { margin: 0; }
.lbx-card-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.lbx-fact { display: flex; flex-direction: column; }
.lbx-fact b { font-size: 22px; color: var(--lb-ink); font-variant-numeric: tabular-nums; }
.lbx-fact span { font-size: 12px; color: var(--lb-ink-3); }
.lbx-fact.is-single b { text-decoration: underline dotted var(--lb-ink-3); text-underline-offset: 4px; }
.lbx-fact.is-missing b { color: var(--lb-ink-3); }
.lbx-bench summary { cursor: pointer; font-size: 13px; color: var(--lb-amber-deep); margin-bottom: 8px; }
.lbx-policy-note { margin: 10px 0 18px; }

/* ---- ?mac= table ---- */
.lbx-list { width: 100%; border-collapse: collapse; font-size: 14px; }
.lbx-list th { font: 11px var(--lb-mono); color: var(--lb-ink-3); text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--lb-hairline-strong); }
.lbx-list td { padding: 9px 6px; border-bottom: 1px solid var(--lb-hairline); overflow-wrap: anywhere; }
.lbx-list .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lbx-list td.is-single { text-decoration: underline dotted var(--lb-ink-3); text-underline-offset: 3px; }
.lbx-list a { color: var(--lb-ink); text-decoration: none; font-weight: 600; }
.lbx-list a:hover { text-decoration: underline; }
.lbx-tag { display: inline-block; margin-left: 8px; font: 10px var(--lb-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--lb-green-ink); background: var(--lb-green-tint); border: 1px solid var(--lb-green-line); border-radius: 999px; padding: 1px 7px; vertical-align: 1px; }
.lbx-tag--smart { color: var(--lb-amber-deep); background: var(--lb-amber-tint); border-color: var(--lb-amber-line); }

.lbx-open { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.lbx-open h3 { margin: 0; font-size: 15px; color: var(--lb-ink-2); }
.lbx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lbx-chip { font-size: 12.5px; padding: 5px 10px; border: 1px dashed var(--lb-hairline-strong); border-radius: 999px; color: var(--lb-ink-2); text-decoration: none; }
.lbx-chip:hover { border-color: var(--lb-amber); color: var(--lb-amber-deep); }

/* ---- ?model= bars ---- */
.lbx-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lbx-bars li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 6px; }
.lbx-bars li.is-mine { background: var(--lb-amber-tint); }
.lbx-bar-label { color: var(--lb-ink); text-decoration: none; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbx-bar-label:hover { text-decoration: underline; }
.lbx-bar-track { height: 10px; background: var(--lb-rail); border-radius: 5px; overflow: hidden; }
.lbx-bar { display: block; height: 100%; background: var(--lb-amber); border-radius: 5px; }
.lbx-bars li.is-single .lbx-bar { background: repeating-linear-gradient(90deg, var(--lb-amber) 0 6px, var(--lb-amber-line) 6px 9px); }
.lbx-bar-value { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13.5px; color: var(--lb-ink); white-space: nowrap; }
.lbx-bar-value small { font-weight: 400; color: var(--lb-ink-3); }
.lbx-serve { margin-top: 16px; max-width: 640px; }

@media (max-width: 560px) {
  .lbx-bars li { grid-template-columns: minmax(0, 1fr) auto; }
  .lbx-bar-track { grid-column: 1 / -1; grid-row: 2; }
  .lbx-grid th, .lbx-grid td { padding: 7px 7px; }
  .lbx-col a { max-width: 96px; }
}
@media (max-width: 560px) {
  .lbx-list th.num { white-space: normal; }
  .lbx-list th, .lbx-list td { padding-inline: 4px; }
  .lbx-tag { margin-left: 4px; }
}
@media (max-width: 420px) {
  .lbx-list { table-layout: fixed; }
  .lbx-list th { white-space: normal; overflow-wrap: anywhere; }
  .lbx-list th.num:nth-child(2) { width: 64px; }
  .lbx-list th.num:nth-child(3) { width: 84px; }
  .lbx-list .lbx-tag { display: table; margin: 3px 0 0; }
}

/* ---- ?run= ---- */
.lbx-run { max-width: 760px; border-top: 3px solid var(--lb-amber); }
.lbx-run-head h3 a { color: var(--lb-ink); }
.lbx-fact--big b { font-size: 34px; }
.lbx-run-story { color: var(--lb-ink-2); font-size: 14.5px; }
.lbx-subhead { font-size: 15px; color: var(--lb-ink-2); margin: 24px 0 10px; }
.lbx-bars li.is-run { outline: 2px solid var(--lb-amber); outline-offset: -1px; }
.lbx-share { margin-top: 22px; padding: 14px; border: 1px solid var(--lb-hairline); border-radius: var(--lb-radius); background: var(--lb-raised); }
.lbx-share p { margin: 0 0 10px; color: var(--lb-ink-2); overflow-wrap: anywhere; }
.lbx-share-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Old benchmark (bench --submit) values, folded in where v2 has none ---- */
.lbx-old { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; font: 9.5px/16px var(--lb-mono); color: var(--lb-ink-3); background: var(--lb-rail); border: 1px solid var(--lb-hairline-strong); white-space: nowrap; vertical-align: 1px; }
.lbx-c.is-legacy .lbx-c-link { color: var(--lb-ink-2); font-weight: 500; }
.lbx-c.is-legacy .lbx-old { display: block; width: max-content; margin: 2px auto 0; }
.lbx-bars li.is-legacy .lbx-bar { background: var(--lb-hairline-strong); }
.lbx-stat--legacy { color: var(--lb-ink-3); }
.lb-hero-grid--single { grid-template-columns: minmax(0, 1fr) !important; }