/* Benchmark details share the index's identity components, type scale and rules.
   Benchmark-specific metrics, sorting, caveats and chart interactions stay intact. */
.detail-frame { width:100%;min-width:0;container-type:inline-size; }
.detail-page { --detail-row-height:46px; }
.detail-page .board-table { border:1px solid var(--fw-surface-elevated,#EEEEF2);border-radius:20px;overflow-x:auto; }
.detail-page .board-head .bh { padding:0;margin:0;min-height:18px;white-space:normal; }
.detail-page .board-row > :first-child .num { font:400 12px/18px 'Inter',sans-serif!important; }
.detail-page .board-head, .detail-page .board-row { display:grid;align-items:center;column-gap:10px;padding:0 16px;min-width:940px; }
.detail-page .board-head { min-height:40px;padding-top:11px;padding-bottom:11px;background:#FBFBFC;border:0;font:500 12px/18px 'Inter',sans-serif;color:var(--fw-ink-secondary,#6E6E7F); }
.detail-page .board-head > *, .detail-page .board-head .bh { min-width:0;font:500 12px/18px 'Inter',sans-serif!important;color:var(--fw-ink-secondary,#6E6E7F)!important; }
.detail-page .board-row { min-height:var(--detail-row-height);border-bottom:1px solid var(--fw-surface-elevated,#EEEEF2);background:#fff;font-variant-numeric:tabular-nums; }
.detail-page .board-row > * { min-width:0; }
.detail-page .board-row > :first-child { position:relative;justify-content:center;text-align:center!important;font:400 12px/18px 'Inter',sans-serif!important;color:var(--fw-ink-secondary,#6E6E7F)!important; }
.detail-rank-note { position:absolute;right:calc(100% + 2px);font:400 9px/1 'Inter',sans-serif; }
.detail-page .board-row > .num, .detail-page .board-row .score-cell > .num { font:500 12px/18px 'Inter',sans-serif!important; }
.detail-page .board-row > .num, .detail-page .board-row > .score-cell { align-self:stretch;display:flex;align-items:center; }
.detail-page .board-row > .score-cell { gap:4px; }
.detail-page .board-row .score-ci { font:400 12px/18px 'Inter',sans-serif; }
.detail-page .board-row > [data-best="true"] { background:rgb(247 243 255 / 70%);color:#18181B!important;box-shadow:5px 0 rgb(247 243 255 / 70%),-5px 0 rgb(247 243 255 / 70%); }
.detail-page .board-row > [data-best="true"] > .num { color:#18181B!important; }
.detail-model-cell { display:flex;align-items:center;gap:4px;min-width:0; }
.detail-model-copy { min-width:0;flex:1; }
.detail-page .model-link-group { max-width:100%;vertical-align:middle; }
.detail-page .mx-model-name, .detail-page .mx-model-link { display:block;min-width:0;font:500 14px/20px 'Inter',sans-serif;letter-spacing:0;color:#18181B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.detail-page .mx-model-link { color:var(--fw-brand,#6720FF);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:2px;text-decoration-thickness:1px; }
.detail-page .mx-model-link:hover { color:var(--fw-brand-hover,#501CBE); }
.detail-provider { min-width:0;font:500 12px/18px 'Inter',sans-serif;color:var(--fw-ink-secondary,#6E6E7F); }
.detail-provider > span { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.detail-configuration { min-width:0;font:500 12px/18px 'Inter',sans-serif;color:var(--fw-ink-secondary,#6E6E7F); }
.detail-configuration > span { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
/* Model cells hold a name and nothing else. Configuration and coverage, which used to
   be small print beneath the name, are columns of their own. */

/* A column heading is a term of art, and the methodology page is a scroll away. Hovering
   or tabbing to any metric control gives the one sentence that says what the number
   counts, in the same card the leaderboard help icon uses. Empty tips render nothing. */
[data-metric-tip]:not([data-metric-tip=""]) { position:relative; }
[data-metric-tip]:not([data-metric-tip=""])::after {
  content:attr(data-metric-tip);
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;
  box-sizing:border-box;width:250px;max-width:70vw;padding:10px 12px;
  border:1px solid var(--fw-surface-elevated,#EEEEF2);border-radius:10px;
  background:#FFFFFF;color:#181D27;
  font:400 12px/1.45 'Inter',sans-serif;letter-spacing:-.06px;
  text-align:left;text-transform:none;white-space:normal;
  box-shadow:0 4px 20px rgba(24,24,27,.06),0 2px 3px rgba(24,24,27,.02);
  opacity:0;visibility:hidden;transform:translateY(2px);
  transition:opacity 160ms ease,transform 160ms ease,visibility 0s 160ms;
  pointer-events:none;
}
[data-metric-tip]:not([data-metric-tip=""]):hover::after,
[data-metric-tip]:not([data-metric-tip=""]):focus-visible::after {
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity 160ms ease,transform 160ms ease,visibility 0s;
}
/* The last columns sit against the right edge of a table that clips horizontally, so
   their tip hangs from the right rather than pushing phantom scroll width. */
.board-head > *:nth-last-child(-n+3) [data-metric-tip]::after { left:auto;right:0; }
@media(prefers-reduced-motion:reduce) {
  [data-metric-tip]::after { transition:none; }
}
/* Tooltips are portaled outside horizontally scrolling tables, including row one. */
.detail-page .model-link-tooltip { display:none; }
.model-link-tooltip.detail-model-tooltip { position:fixed;z-index:1000;bottom:auto;opacity:1;visibility:visible;transform:none;pointer-events:none;max-width:calc(100vw - 24px);transition:opacity 180ms ease; }
.detail-model-tooltip[data-placement="below"] .tooltip-pointer { top:-6px;bottom:auto;transform:rotate(180deg); }
.detail-page .pareto-panel { box-sizing:border-box;width:100cqw;margin-block:40px 0;margin-inline:calc(50% - 50cqw);border:0;border-block:1px solid var(--fw-surface-elevated,#EEEEF2);border-radius:0;padding:56px 28px 64px;display:flex;flex-direction:column;align-items:center;gap:16px;background:#FFFFFF; }
.graph-content { display:grid;grid-template-columns:minmax(0,1fr) 424px;align-items:center;gap:20px;width:100%;max-width:1214px; }
.graph-visual { min-width:0;padding-bottom:12.6px;border-radius:20px;background:#FBFBFC;opacity:1;transform:none;animation:chart-enter 1100ms cubic-bezier(.22,.61,.36,1) 80ms backwards; }
.graph-axis-label { font:400 12px/1.45 'Inter',sans-serif;letter-spacing:-.06px;color:var(--fw-ink-secondary,#6E6E7F); }
.graph-x-title { text-align:center; }
@keyframes chart-enter { from { opacity:.6;transform:translateY(6px); } to { opacity:1;transform:none; } }
.detail-page .graph-visual .plot { border:0;border-radius:16px;background:transparent; }
.detail-page .graph-visual .plot:not(.line):not(.cube) { width:100%;max-width:100%;height:auto;aspect-ratio:694 / 484;min-height:360px;max-height:484px; }
.detail-page .pareto-aside { min-width:0;border:0;border-radius:0;padding:0;background:#fff; }
.detail-page .pareto-aside > div:not(.detail-chart-list) { padding-inline:20px; }
/* Remove the gap between the table wrapper and the legend/notes beneath it
   (the legend blocks carry inline margin-top that must be overridden). */
.detail-page .pareto-aside > div:not(.detail-chart-list) { margin-top:0!important; }
/* The legend/notes get bottom padding matching their top padding (12–13px). */
.detail-page .pareto-aside > div:not(.detail-chart-list) { padding-bottom:13px; }
.detail-page .pareto-aside .detail-chart-list { max-height:413px;border-radius:0; }
/* Height hugs the rows it actually has; no reserved scrollbar gutter, so no
   empty strip inside the wrapper's bottom edge. */
.detail-page .pareto-aside .detail-chart-list:has(.detail-chart-row:last-child) { height:fit-content; }
.detail-page .pareto-aside .detail-chart-head { background:#FBFBFC;border-radius:8px; }
.detail-chart-list { max-height:460px;overflow:auto;overscroll-behavior:contain; }
.detail-chart-head { position:sticky;top:0;z-index:2; }
/* Metric columns share whatever the 424px aside has left after the model column,
   capped at 116px — wide enough for one-line headers like "Score (Pass rate)" while
   three-metric (3-D) views shrink the columns instead of overflowing the panel. */
.detail-chart-head, .detail-chart-row { display:grid;grid-template-columns:minmax(120px,1fr) repeat(var(--detail-metrics),minmax(0,116px));align-items:center;gap:6px;padding:0 16px; }
.detail-chart-head { min-height:40px;padding-top:11px;padding-bottom:11px;background:#FBFBFC;border-radius:8px;font:500 12px/18px 'Inter',sans-serif;color:var(--fw-ink-secondary,#6E6E7F); }
.detail-chart-head > span { min-width:0;overflow-wrap:anywhere; }
.detail-chart-row { min-height:46px;border-bottom:1px solid var(--fw-surface-elevated,#EEEEF2);transition:background-color 280ms cubic-bezier(.22,.61,.36,1); }
.detail-chart-row:last-child { border-bottom-color:transparent; }
.detail-chart-value { font:500 12px/18px 'Inter',sans-serif;color:var(--fw-ink-secondary,#6E6E7F);font-variant-numeric:tabular-nums;white-space:nowrap; }
.detail-chart-row:focus-visible { outline:2px solid var(--fw-brand,#6720FF);outline-offset:-2px;border-radius:4px; }
@media(max-width:1100px) {
  .graph-content { grid-template-columns:minmax(0,1fr);gap:24px; }
  .detail-page .pareto-aside { border:0!important;padding:0!important; }
}
@media(max-width:640px) {
  .detail-chart-head, .detail-chart-row { column-gap:8px;padding-left:12px;padding-right:12px;grid-template-columns:minmax(110px,1fr) repeat(var(--detail-metrics),116px); }
  .detail-chart-list { overflow-x:auto; }
  .detail-chart-head, .detail-chart-row { min-width:calc(134px + var(--detail-metrics) * 124px); }
}
@media(prefers-reduced-motion:reduce) { .detail-chart-row, .detail-model-tooltip { transition:none; } }
.detail-sort-heading { display:flex;align-items:center;min-width:0; }
.detail-page .detail-sort-heading .bh { width:100%; }

/* Figma detail introduction, scope tabs, and in-card export toolbar.
   The name and blurb stay in the same column as the models table. */
.detail-page .detail-hero { width:100%;padding-bottom:0;border:0; }
.detail-title { min-height:59px;margin:0;font:550 44px/1.06 'Inter',sans-serif;letter-spacing:-1.76px;color:var(--fw-ink,#18181B);text-wrap:pretty; }
.detail-page .detail-lede { max-width:100%;margin:0;padding-top:16px;font:400 12px/1.45 'Inter',sans-serif;letter-spacing:-.06px;color:var(--fw-ink-secondary,#6E6E7F);text-wrap:pretty; }
.detail-page .detail-actions { padding-top:12px;row-gap:8px;font:400 12px/1.45 'Inter',sans-serif;letter-spacing:-.06px;text-transform:none; }
.detail-page .detail-meta-link { gap:2px;font-weight:500;color:var(--fw-brand,#6720FF);text-decoration:underline;text-underline-offset:2px; }
.detail-page .detail-meta-link:hover { color:var(--fw-brand-hover,#501CBE); }
.detail-meta-arrow { display:inline-flex;align-items:center;justify-content:center;flex:none;width:12.444px;height:12.444px;padding-top:1.5px; }
.detail-meta-arrow img { display:block;width:8.43px;height:8.43px; }
.detail-chart-title { margin:0;font:600 24px/1.25 'Inter',sans-serif;letter-spacing:-.24px;color:var(--fw-ink,#18181B); }
.chart-scope-tabs { display:flex;gap:16px;padding-top:16px;border-bottom:1px solid var(--fw-border,#E4E4EB); }
.chart-scope-tab { position:relative;appearance:none;padding:8px 0 12px;border:0;background:transparent;font:600 14px/1.45 'Inter',sans-serif;color:var(--fw-ink-secondary,#6E6E7F);white-space:nowrap;cursor:pointer; }
.chart-scope-tab::after { content:"";position:absolute;height:3px;bottom:-1px;left:0;right:0;border-radius:9999px;background:#323439;opacity:0;transition:opacity 180ms ease; }
.chart-scope-tab[aria-selected="true"] { color:var(--fw-ink,#18181B); }
.chart-scope-tab[aria-selected="true"]::after { opacity:1; }
.chart-scope-tab:focus-visible { outline:2px solid var(--fw-brand,#6720FF);outline-offset:3px;border-radius:4px; }
.detail-page .dim-picker { padding:16px 0;margin:0; }
.chart-dimension-group { display:flex;flex-wrap:wrap;gap:6px; }
.detail-page .dim-btn { height:28px;padding:0 12px;border:1px solid var(--fw-border,#E4E4EB);border-radius:999px;background:#fff;font:550 12px/1 'Inter',sans-serif;color:var(--fw-ink-secondary,#6E6E7F); }
.detail-page .dim-btn.on { border-color:transparent;background:#F8F4FF;color:var(--fw-brand,#6720FF); }
.detail-page .dim-btn:hover:not(:disabled):not(.on) { background:var(--fw-surface-muted,#F7F7F8); }
.detail-scope-note { max-width:800px;margin:0 0 40px;font:400 12px/1.45 'Inter',sans-serif;letter-spacing:-.06px;color:var(--fw-ink-secondary,#6E6E7F); }
.detail-page .graph-brand { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;width:100%;max-width:1214px;padding-bottom:0;border:0; }
.graph-brand-copy { display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 300px; }
.graph-brand-copy img { display:block;flex:none;width:22px;height:11px;object-fit:contain; }
.graph-brand-copy > span { min-width:0;line-height:1.45; }
.detail-page .graph-export-actions { display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-left:auto;text-transform:none;letter-spacing:0; }
.detail-page .graph-export-btn { height:32px;padding:0 14px;white-space:nowrap; }
@media(max-width:640px) {
  .detail-title { min-height:0;font-size:32px;line-height:1.15;letter-spacing:-1.28px; }
  .detail-chart-title { font-size:22px; }
  .detail-page .graph-export-actions { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .chart-scope-tab::after { transition:none; } }

/* Figma 2143:124671: quiet text breadcrumbs, not a separate back button. */
.detail-breadcrumbs { padding-block:24px; }
.detail-breadcrumbs ol { display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none; }
.detail-breadcrumbs li { display:flex;align-items:center;gap:4px;min-width:0;max-width:100%; }
.detail-crumb-link { display:inline-flex;align-items:center;gap:4px;min-width:0;padding:0;border:0;background:none;border-radius:0;font:600 14px/1.45 'Inter',sans-serif;letter-spacing:-.28px;color:var(--fw-gray-600,#8E8E9F);text-decoration:none;white-space:nowrap; }
.detail-crumb-link:hover { color:var(--fw-ink-secondary,#6E6E7F); }
.detail-crumb-link:focus-visible { outline:2px solid var(--fw-brand,#6720FF);outline-offset:3px;border-radius:2px; }
.breadcrumb-back { display:block;flex:none;width:14px;height:14px; }
.breadcrumb-divider { position:relative;display:block;flex:none;width:7px;height:14px; }
.breadcrumb-divider img { position:absolute;top:-.75px;left:-.75px;display:block;width:8.5px;height:15.5px; }
.detail-crumb-current { min-width:0;font:600 14px/20px 'Inter',sans-serif;letter-spacing:-.14px;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
@media(max-width:640px) { .detail-crumb-link { white-space:normal;overflow-wrap:anywhere; } }

/* Figma 2143:125150: keep live benchmark sort options, not the sample video chapters. */
.models-toolbar { display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;margin-bottom:16px; }
.models-heading { display:flex;flex-direction:column;justify-content:center;flex:1 1 240px;min-width:0; }
.models-title { margin:0;font:600 18px/1.45 'Inter',sans-serif;letter-spacing:-.09px;color:#000; }
.models-summary { font:400 12px/1.45 'Inter',sans-serif;letter-spacing:-.06px;color:var(--fw-ink-secondary,#6E6E7F); }
.models-controls { display:flex;align-items:flex-start;justify-content:flex-end;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%; }
.models-controls .rank-controls { order:1;min-width:0;max-width:100%;padding:0;gap:0; }
.models-controls .control-group { max-width:100%;gap:0; }
.models-controls .control-label { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.models-controls .segmented { display:flex;align-items:center;flex-wrap:nowrap;gap:0;min-width:0;max-width:100%;height:36px;padding:4px;border-radius:9999px;background:#F7F7F8;overflow-x:auto;overflow-y:hidden;overscroll-behavior-y:none;touch-action:pan-x;scrollbar-width:none; }
.models-controls .segmented::-webkit-scrollbar { display:none; }
.models-controls .seg-btn { flex:none;gap:7px;height:28px;padding:0 14px;border-radius:9999px;background:transparent;color:var(--fw-ink-secondary,#6E6E7F);font:500 12px/17.4px 'Inter',sans-serif;letter-spacing:-.06px;transition:background-color 180ms ease,color 180ms ease,box-shadow 180ms ease; }
.models-controls .seg-btn.on { background:#FFFFFF;color:var(--fw-ink,#18181B);box-shadow:0 2px 4px rgba(24,24,27,.03); }
.models-controls .seg-btn:hover:not(.on) { color:var(--fw-ink,#18181B);background:rgba(24,24,27,.025); }
.models-controls .seg-btn:focus-visible { outline:2px solid var(--fw-brand,#6720FF);outline-offset:1px; }
.models-controls .detail-toggle { order:0;flex:none;height:36px; }
@media(max-width:700px) {
  .models-heading { flex-basis:100%; }
  .models-controls { width:100%;justify-content:flex-start; }
}
@media(prefers-reduced-motion:reduce) { .models-controls .seg-btn { transition:none; } }

/* The graph-side result list is a compact companion table; main tables keep their 14px model names. */
.pareto-aside .detail-chart-head { font:500 11px/17px 'Inter',sans-serif; }
.pareto-aside .detail-model-copy .mx-model-name, .pareto-aside .detail-model-copy .mx-model-link { font:500 12px/18px 'Inter',sans-serif; }
.pareto-aside .detail-chart-value { font:500 11px/17px 'Inter',sans-serif; }

/* Supplied 14px chevrons share the same actual sort direction in both controls. */
.detail-page .detail-sort-icon { display:block;flex:none;width:14px;height:14px;padding:0;object-fit:contain; }

/* Preserve full-bleed gutters on phones despite the original inline-chart rules. */
@media(max-width:640px) {
  .detail-page .pareto-panel.pareto-chart { padding:32px 24px!important; }
  .detail-page .graph-visual .plot:not(.line):not(.cube) { min-height:320px;max-height:420px; }
}
@media(prefers-reduced-motion:reduce), print {
  .graph-visual { animation:none;opacity:1;transform:none; }
}