/* SSR SEO scaffold (breadcrumb, fallback, about, FAQ) for the interactive AUDIO
   leaderboard. Owned by the Next route (not regenerated with the intern bundle).
   Same app family as the video board, so it shares the class fixes below. *//* Clear the fixed site navbar (≈65px) so the breadcrumb isn't hidden behind it.
   The padding sits under the fixed navbar, so it adds no visible gap. */
#arena-root{padding-top:72px}

/* Full-width layout: the intern app caps content at 1060px; widen it to use the
   whole viewport (with comfortable side padding) so the board isn't a narrow column. */
#arena-root .page{max-width:1640px;padding-left:40px;padding-right:40px}
#arena-root .lb-breadcrumb{max-width:1640px;margin:0 auto;padding:10px 40px 0;font-size:13px}
#arena-root .lb-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0;margin:0}
#arena-root .lb-breadcrumb li{display:flex;align-items:center;gap:8px;color:var(--muted)}
#arena-root .lb-breadcrumb li+li::before{content:"/";color:var(--faint,#5e635c)}
#arena-root .lb-breadcrumb a{color:var(--muted);text-decoration:none}
#arena-root .lb-breadcrumb a:hover{color:var(--lime)}
#arena-root .lb-breadcrumb [aria-current]{color:var(--text)}

#arena-root .lb-fallback{max-width:1060px;margin:0 auto;padding:64px 20px;text-align:center}
#arena-root .lb-fallback h1{font-size:clamp(30px,5vw,52px);font-weight:800;color:var(--text);line-height:1.1;letter-spacing:-.02em}
#arena-root .lb-fallback h1 span{color:var(--lime)}
#arena-root .lb-fallback p{color:var(--muted);max-width:64ch;margin:16px auto 0;line-height:1.6}

#arena-root .lb-about{max-width:780px;margin:0 auto;padding:64px 20px 0;border-top:1px solid var(--line)}
#arena-root .lb-about h2{font-size:clamp(22px,3vw,30px);font-weight:800;margin:0 0 18px;color:var(--text)}
#arena-root .lb-about-lede{color:var(--text);font-size:1rem;line-height:1.65;margin:0 0 18px}
#arena-root .lb-about-points{margin:0 0 20px;padding-left:20px;color:var(--muted);line-height:1.6}
#arena-root .lb-about-points li{margin-bottom:8px}
#arena-root .lb-about-points strong{color:var(--text)}
#arena-root .lb-disclosure{font-size:.85rem;color:var(--faint,#5e635c);line-height:1.6;border-top:1px dashed var(--line);padding-top:16px;margin:0}
#arena-root .lb-disclosure strong{color:var(--muted)}

#arena-root .lb-faq{max-width:780px;margin:0 auto;padding:48px 20px 96px}
#arena-root .lb-faq h2{text-align:center;font-size:clamp(22px,3vw,30px);font-weight:800;margin:0 0 28px;color:var(--text)}
#arena-root .lb-faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
#arena-root .lb-faq details[open]{border-color:var(--lime-dim,var(--lime))}
#arena-root .lb-faq summary{padding:18px 22px;cursor:pointer;font-weight:600;color:var(--text);font-size:.98rem;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
#arena-root .lb-faq summary::-webkit-details-marker{display:none}
#arena-root .lb-faq summary::after{content:"+";color:var(--lime);font-size:20px;font-weight:400;line-height:1}
#arena-root .lb-faq details[open] summary::after{content:"–"}
#arena-root .lb-faq .a{padding:0 22px 20px;color:var(--muted);line-height:1.65;font-size:.92rem}

/* Model-detail drawer: start below the fixed site navbar (≈65px) so its close
   button and header aren't hidden behind / overlapping the nav. */
#arena-root .drawer-backdrop{top:72px}

/* Blind-vote: source images are only ~320px. On the full-width page the 2-up
   grid stretched them to ~800px (pixelated). Cap ONLY the image grid so each
   image shows near native resolution — the prompt text above stays full width. */
#arena-root .av-grid{align-self:center;width:min(680px,100%)}

/* Value-frontier legend: moved out of the SVG (it overlapped the best-value
   dots) into a caption below the chart. */
#arena-root .cv-legend{margin-top:10px;text-align:center;font-size:12px;color:var(--muted)}
#arena-root .cv-legend .cv-dot{color:var(--lime);font-size:14px;vertical-align:middle}

/* Open/closed source filter — standalone buttons (reuse the app's .sb pill style). */
#arena-root .srcfilter{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
#arena-root .panel-head{flex-wrap:wrap;gap:10px}

/* Video toggle sits between the hero and the elevated podium; add a gap so the
   raised gold card (and its lime glow) doesn't collide with the toggle buttons. */
#arena-root .taskbar{margin-bottom:30px}

/* The arena-score footnote (.bench-note) lives in a padding-0, overflow-x:hidden
   panel, so its first character was clipped at the left edge. Pad it to match the
   panel content. */
#arena-root .bench-note{padding-left:20px;padding-right:20px}


/* Judges panel: distribute the short "Ensemble weight" bars to fill the column
   height so they don't leave dead space beside the taller agreement matrix
   (same fix as the image board). */
#arena-root .judge-wrap > .jp-col:first-child{display:flex;flex-direction:column;justify-content:space-between}

/* Ranking rows are now real crawlable <a> links (was a JS-only button). Suppress
   the default anchor underline; .row already sets color/grid/cursor. */
#arena-root a.row.arena{text-decoration:none}

/* Reviewer attribution link -> author page (E-E-A-T authorship). */
#arena-root .lb-disclosure a.lb-reviewer{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
#arena-root .lb-disclosure a.lb-reviewer:hover{color:var(--lime)}


/* Analytics band as an EXPLICIT grid (overrides the bundle's masonry, which
   balances by column height — but the scatter SVGs scale with viewport width
   while text panels don't, so the column bottoms go ragged at other screen
   sizes). Fixed rows can't rag: charts (Quality + Strength) form an
   equal-height half/half row, and the three text panels (Cost, Monthly,
   By-provider) an equal-height thirds row; align-items:stretch keeps every
   border in a row flush. */
#arena-root .is-video .analytics-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-count:auto;gap:18px;align-items:stretch}
#arena-root .is-video .analytics-grid>.panel{width:auto;margin:0}
#arena-root .is-video .analytics-grid>.span-2{grid-column:1/-1}
#arena-root .is-video .analytics-grid>.pnl-q,
#arena-root .is-video .analytics-grid>.pnl-s{grid-column:span 3}
#arena-root .is-video .analytics-grid>.pnl-c,
#arena-root .is-video .analytics-grid>.pnl-m,
#arena-root .is-video .analytics-grid>.pnl-p{grid-column:span 2}
@media (max-width:900px){
  #arena-root .is-video .analytics-grid{grid-template-columns:1fr}
  #arena-root .is-video .analytics-grid>.panel{grid-column:auto}
  #arena-root .is-video .analytics-grid>.span-2{grid-column:auto}
}

/* Per-judge radar: the chart column is 1fr, so on a full-width panel the SVG
   balloons (~900px tall at wide viewports). Cap the chart and center the
   chart+legend pair (same treatment as the 3D board's radar). */
@media (min-width:901px){
  /* Pair Elo-convergence + Per-judge radar as a half/half row so neither leaves
     horizontal dead space (a compact radar alone in a full-width panel always
     does). Each spans 3 of the 6 grid columns; methodology stays full-width. */
  #arena-root .is-video .analytics-grid>.pnl-elo,
  #arena-root .is-video .analytics-grid>.radar-panel{grid-column:span 3}
  #arena-root .radar-wrap{grid-template-columns:minmax(0,1fr) 240px;justify-content:center;align-items:center;gap:24px}
  #arena-root .radar-wrap .radar,#arena-root .radar-wrap>svg{max-width:100%}
}