/* Showcase leaderboard and run page (board/leaderboard.js). Lives in showcase/board/, which the showcase refresh never
   writes. Uses only the Home Cloud shell tokens (--bg --surf --surf2 --text --muted --line --accent --accent-text
   --btn-bg --btn-text --r --gut --max --mono), so light and dark come from the shell. No colour literals. */
.lb { --lb-mono: var(--mono, "Geist Mono", ui-monospace, monospace); min-width: 0; }
.lb.lb-top { max-width: var(--max); margin: 0 auto; padding: 120px var(--gut) 0; }
.lb[aria-busy="true"] { min-height: 60vh; }
.lb a { color: var(--accent-text); }
.lb .btn { color: var(--btn-text); }
.lb .btn.ghost { color: var(--text); }
.lb-mono { font-family: var(--lb-mono); font-size: 12.5px; color: var(--muted); }
.lb-err, .lb-empty { color: var(--muted); padding: 2rem 0; }

/* hero */
.lb-hero { margin: 0 0 2.2rem; }
.lb-crumbs { color: var(--muted); font-size: 14px; margin: 0 0 1.4rem; }
.lb-eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--lb-mono); font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.lb-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--muted); flex: none; }
.lb-hero h1, .lb-hero h2 { font-size: clamp(36px, 6.5vw, 76px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 1.2rem; overflow-wrap: anywhere; }
.lb-hero-sm h2 { font-size: clamp(30px, 4.6vw, 52px); }
.lb-hero h1 span, .lb-hero h2 span { color: var(--accent-text); }
.lb-hero h1.lb-runh1 { font-size: clamp(30px, 4.8vw, 56px); }
.lb-sub { color: var(--muted); font-size: clamp(16px, 1.5vw, 19px); max-width: 44rem; line-height: 1.55; margin: 0 0 1.2rem; }
.lb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--lb-mono); font-size: 13px; color: var(--muted); }
.lb-meta i { width: 1px; height: 16px; background: var(--line); }
.lb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2rem 0 0; }
.lb-chips span { font-family: var(--lb-mono); font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; overflow-wrap: anywhere; }
.lb-chips .lb-steer { color: var(--accent-text); }

/* filters: pill groups */
.lb-filters { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; margin: 0 0 2.4rem; }
.lb-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; }
.lb-label { font-family: var(--lb-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lb-pills { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surf); max-width: 100%; }
.lb-pills a, .lb-pills button { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 15px; border-radius: 999px; border: 0; background: none;
  color: var(--text); font: inherit; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.lb-pills small { font-family: var(--lb-mono); font-size: 11.5px; color: var(--muted); }
.lb-pills a:not([aria-current="page"]):hover, .lb-pills button:not([aria-pressed="true"]):hover { background: var(--surf2); }
.lb-pills [aria-current="page"], .lb-pills [aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-text); }
.lb-pills [aria-current="page"] small, .lb-pills [aria-pressed="true"] small { color: inherit; opacity: .75; }
.lb-pills :focus-visible, .lb-table th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* top pick */
.lb-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 52px); align-items: center;
  padding: clamp(18px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--r); background: var(--surf); margin: 0 0 2.4rem; }
.lb-pick-shot { display: block; border-radius: calc(var(--r) * .6); overflow: hidden; background: var(--surf2); aspect-ratio: 16 / 9; }
.lb-pick-shot img, .lb-pick-shot .lb-noshot { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-pick h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; margin: 0 0 .4rem; overflow-wrap: anywhere; }
.lb-pick p { color: var(--muted); line-height: 1.6; }
.lb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px 22px; margin: 1.2rem 0; }
.lb-stats dt { font-family: var(--lb-mono); font-size: 24px; font-weight: 600; color: var(--text); }
.lb-stats dd { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.lb-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.2rem 0 0; }

/* table */
.lb-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surf); -webkit-overflow-scrolling: touch; }
.lb-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 15px; }
.lb-cap { caption-side: top; text-align: left; padding: 18px 20px 4px; font-family: var(--lb-mono); font-size: 12.5px; color: var(--muted); }
.lb-table th { text-align: left; vertical-align: bottom; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.lb-table th button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-family: var(--lb-mono); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: left; display: flex; flex-direction: column; gap: 3px; }
.lb-table th small { letter-spacing: 0; text-transform: none; font-size: 11.5px; opacity: .8; }
.lb-table th[aria-sort] button { color: var(--text); }
.lb-table th.lb-plain { font-family: var(--lb-mono); font-size: 11.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lb-table th.lb-plain span, .lb-table th.lb-plain small { display: block; }
.lb-table th.lb-plain small { margin-top: 3px; }
.lb-table th[aria-sort]::after { content: none; }
.lb-table td { padding: 16px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lb-table tbody tr:last-child td { border-bottom: 0; }
.lb-table tbody tr { cursor: pointer; transition: background-color .15s; }
.lb-table tbody tr:hover { background: var(--surf2); }
.lb-table td > .lb-mono, .lb-table td > span.lb-mono { display: block; margin-top: 3px; }
.lb-rank span { display: inline-grid; place-items: center; min-width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--lb-mono); font-size: 14px; }
.lb-rank span.on { border-color: var(--accent); color: var(--accent-text); }
.lb-agent { font-family: var(--lb-mono); font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.lb-setup { min-width: 220px; max-width: 320px; }
.lb-setup > a { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.lb-setup > a:hover { color: var(--accent-text); }
.lb-badge { display: inline-block; margin-left: 7px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 6px; font-style: normal;
  font-family: var(--lb-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); vertical-align: 2px; }
.lb-badge.lb-steer { color: var(--muted); }
.lb-score { white-space: nowrap; }
.lb-score b { font-family: var(--lb-mono); font-size: 24px; font-weight: 600; color: var(--accent-text); }
.lb-score small, .lb-check small { font-family: var(--lb-mono); color: var(--muted); font-size: 12px; }
.lb-shot { min-width: 168px; }
.lb-shot img, .lb-shot .lb-noshot { display: block; max-width: none; width: 144px; height: 81px; object-fit: cover; border-radius: 8px; background: var(--surf2); }
.lb-check b, .lb-num b { font-family: var(--lb-mono); font-size: 18px; font-weight: 600; }
.lb-num { min-width: 120px; }

/* run page */
.lb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--line); gap: 1px; }
.lb-tile { background: var(--surf); padding: 20px 22px; min-width: 0; }
.lb-tile span { display: block; font-family: var(--lb-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.lb-tile b { font-family: var(--lb-mono); font-size: clamp(26px, 3.2vw, 36px); font-weight: 600; overflow-wrap: anywhere; }
.lb-tile small { font-size: 13px; color: var(--muted); font-weight: 400; }
.lb-note { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 1rem 0 .4rem; }
.lb-how { margin: .6rem 0 0; }
.lb-how summary { cursor: pointer; color: var(--accent-text); }
.lb-how p { color: var(--muted); max-width: 46rem; }
.lb-ver { margin: .5rem 0 0; }
.lb-ver ul { margin: .3rem 0 0; padding-left: 1.2rem; color: var(--muted); max-width: 46rem; }
.lb-how pre { overflow-x: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surf); }
.lb-how code, .lb-checks code { font-family: var(--lb-mono); font-size: 12.5px; }
.lb-sec { margin: 3.2rem 0 0; }
.lb-sec h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; margin: 0 0 1rem; }
.lb-poster { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--surf2); aspect-ratio: 16 / 9; max-width: 960px; }
.lb-poster img, .lb-poster .lb-noshot { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.lb-media figure { margin: 0; }
.lb-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--surf2); display: block; }
.lb-media figcaption { font-family: var(--lb-mono); font-size: 12px; color: var(--muted); margin-top: 6px; }
.lb-checks { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surf); }
.lb-checks li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.lb-checks li:last-child { border-bottom: 0; }
.lb-checks b { font-weight: 500; }
.lb-mark { font-family: var(--lb-mono); font-size: 12.5px; }
.lb-checks .ok .lb-mark { color: var(--accent-text); }
.lb-checks .part .lb-mark { color: var(--warn, var(--muted)); }
.lb-checks .no .lb-mark { color: var(--err, var(--muted)); }
.lb-checks details { grid-column: 2 / -1; }
.lb-checks summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.lb-checks details code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); padding: 8px 0 0; }
.lb-kv { border-collapse: collapse; width: 100%; max-width: 720px; font-size: 15px; }
.lb-kv th { text-align: left; font-weight: 400; color: var(--muted); padding: 9px 16px 9px 0; border-bottom: 1px solid var(--line); width: 40%; text-transform: capitalize; }
.lb-kv td { padding: 9px 0; border-bottom: 1px solid var(--line); font-family: var(--lb-mono); font-size: 13.5px; overflow-wrap: anywhere; }
.lb-steers { padding-left: 1.2rem; }
.lb-steers li { margin: 0 0 1rem; }
.lb-steers p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.lb-chain { display: block; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .lb-pick { grid-template-columns: minmax(0, 1fr); }
  .lb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-pills { border-radius: 18px; }
  .lb-tile { padding: 16px; }
  .lb-shot { min-width: 136px; }
  .lb-shot img, .lb-shot .lb-noshot { width: 112px; height: 63px; }
  .lb-setup { min-width: 180px; }
}
@media (prefers-reduced-motion: reduce) { .lb-table tbody tr { transition: none; } }