/* --------------------------------------------------------------------
   Benchmark comparison chart — shared stylesheet.
   Used by /benchmark/ and the front page. All rules that render the
   chart section (rail, chart panel, tab rail, vertical/horizontal
   bar variants, and the responsive tweaks for both) live here so the
   two pages can't drift.
-------------------------------------------------------------------- */

/* Full-bleed split: the section bg is light (right side). The dark
   left column paints its own bg AND extends it to the left viewport
   edge via a ::before, so the visual split lands exactly on the
   container's 33% column line. */
.bench-cmp { background:#F9FAFB; }

.bench-cmp__rail {
    position:relative;
    background:#0A0A0A;
}
.bench-cmp__rail::before {
    content:'';
    position:absolute;
    top:0; bottom:0; right:100%;
    width:100vw;
    background:#0A0A0A;
}
/* Below lg the rail stacks and nearly fills the container width, so
   the ::before extending only LEFT leaves the 16px container-padding
   gap on the RIGHT painted with the light section bg — the dark rail
   reads as ending 16px short. Mirror the extension on the right so
   the rail is full-bleed on mobile / tablet. Not applied at lg+ where
   the chart panel needs to sit on the light bg to the right of the
   rail. */
@media (max-width: 1023.98px) {
    .bench-cmp__rail::after {
        content:'';
        position:absolute;
        top:0; bottom:0; left:100%;
        width:100vw;
        background:#0A0A0A;
    }
}

/* Right column intentionally has no bg — the section bg carries. */
.bench-cmp__chart { background:transparent; }

/* Below lg the tab-rail stacks above the chart body. When a user taps
   a tab, chart.js scrolls the chart body into view — this margin
   clears a fixed navbar so the chart top isn't tucked under it. */
[data-bench-chart-body] { scroll-margin-top: 80px; }

/* Tab rail --------------------------------------------------------- */
.bench-tab .bench-tab__bar { transition:opacity .2s ease; }
.bench-tab.is-active .bench-tab__bar { opacity:1; }
.bench-tab.is-active .bench-tab__label { color:#fff; }
.bench-tab.is-active .bench-tab__desc { color:#D1D5DB; }
.bench-tab { transition:background-color .18s; }
.bench-tab:hover { background:rgba(255,255,255,.02); }

/* --- Vertical bar chart (Cost, Tokens) --------------------------- */
/* The chart fills whatever height its container gives it — plot,
   yAxis, cols, col and stack all cascade `height: 100%` down from
   .bench-vbar, and the chart-body's flex-1 gives it a definite
   height to resolve against. Bar heights and tick positions are
   percentages, so the whole chart is resolution-agnostic. */
.bench-vbar {
    width:100%;
    height:100%;
    display:flex; gap:28px; align-items:stretch;
}
.bench-vbar__yAxis {
    position:relative;
    width:60px; flex-shrink:0;
    height:100%;
}
.bench-vbar__tick {
    position:absolute; left:0; right:0;
    display:flex; align-items:center; justify-content:flex-end;
    transform:translateY(50%);
}
.bench-vbar__tickLabel {
    font-size:12.5px; color:#9CA3AF; padding-right:12px;
    font-variant-numeric:tabular-nums;
}
.bench-vbar__plot {
    position:relative; flex:1; min-width:0;
    display:flex; flex-direction:column;
    height:100%;
}
.bench-vbar__grid {
    position:absolute; inset:0;
    pointer-events:none;
}
.bench-vbar__gridLine {
    position:absolute; left:0; right:0; height:1px;
    background:#E5E7EB;
}
.bench-vbar__cols {
    position:relative;
    display:flex; align-items:flex-end; justify-content:space-around;
    gap:48px;
    height:100%;
    padding:0 24px;
}
/* Col is the positioning context. Its three children (stack, value,
   catLabel) are all absolutely positioned:
   - .bench-vbar__stack IS the visible bar. It sits at bottom:0 of col
     (= the 0-line) and grows upward from height:0 -> height:var(--bar-h)
     on tab-switch. Bottom-up animation, always anchored to the 0-line.
   - .bench-vbar__value floats 14px above the stack's top, so it
     rides the bar's top edge as it grows.
   - .bench-vbar__catLabel sits below col's bottom edge (below the
     0-line). */
.bench-vbar__col {
    position:relative;
    flex:1; max-width:220px;
    height:100%;
}
.bench-vbar__stack {
    position:absolute;
    left:50%; bottom:0;
    transform:translateX(-50%);
    width:100%; max-width:130px;
    height:0;
    border-radius:4px 4px 0 0;
    transition:height .85s cubic-bezier(.22,.75,.32,1);
}
.bench-vbar__stack.is-in { height:var(--bar-h, 0); }
.bench-vbar__value {
    position:absolute;
    left:50%; bottom:14px;
    transform:translateX(-50%);
    font-size:22px; font-weight:700;
    line-height:1;
    color:#0A0A0A;
    font-variant-numeric:tabular-nums;
    letter-spacing:-0.01em;
    white-space:nowrap;
    opacity:0;
    animation:bench-fadeIn .5s ease forwards;
    transition:bottom .85s cubic-bezier(.22,.75,.32,1);
}
.bench-vbar__col .bench-vbar__stack.is-in ~ .bench-vbar__value {
    bottom:calc(var(--bar-h, 0px) + 14px);
}
.bench-vbar__catLabel {
    position:absolute;
    left:0; right:0;
    top:100%; margin-top:18px;
    font-size:14px; font-weight:500; color:#0A0A0A;
    text-align:center;
    line-height:1.2;
}

/* --- Horizontal bar chart (Speed) -------------------------------- */
/* Fills the chart body's height and centers the plot + axis
   vertically, so with only 2 rows the chart doesn't sit at the top
   of a tall panel. Bars are chunky for weight. */
.bench-hbar {
    width:100%;
    height:100%;
    display:flex; flex-direction:column; justify-content:center;
}
.bench-hbar__plotWrap {
    position:relative;
    padding-left:120px;   /* room for row labels on the left */
}
.bench-hbar__gridOverlay {
    position:absolute; top:0; bottom:0; left:120px; right:0;
    pointer-events:none;
}
.bench-hbar__gridCol {
    position:absolute; top:0; bottom:0; width:1px;
    background:#E5E7EB;
}
.bench-hbar__rows {
    position:relative;
    display:flex; flex-direction:column;
    gap:56px;
    padding:16px 0;
}
.bench-hbar__row {
    position:relative;
    display:flex; align-items:center;
}
.bench-hbar__label {
    position:absolute; left:-120px; width:108px;
    font-size:15px; font-weight:600; color:#0A0A0A;
    text-align:right;
    line-height:1.3;
    padding-right:16px;
}
.bench-hbar__barLine {
    flex:1;
    display:flex; align-items:center; gap:14px;
    min-width:0;
}
.bench-hbar__bar {
    height:56px;
    width:0;
    border-radius:4px;
    transition:width .9s cubic-bezier(.22,.75,.32,1);
    min-width:4px;
    flex-shrink:0;
}
.bench-hbar__bar.is-in { width:var(--bar-w, 0); }
.bench-hbar__value {
    font-size:16px; font-weight:700;
    color:#0A0A0A;
    font-variant-numeric:tabular-nums;
    letter-spacing:-0.01em;
    white-space:nowrap;
    opacity:0;
    animation:bench-fadeIn .45s ease forwards;
}
.bench-hbar__axis {
    position:relative;
    margin-top:20px;
    margin-left:120px;
    height:22px;
    border-top:1px solid #E5E7EB;
}
.bench-hbar__tick {
    position:absolute; top:6px;
    transform:translateX(-50%);
}
.bench-hbar__tickLabel {
    font-size:12px; color:#9CA3AF;
    font-variant-numeric:tabular-nums;
}

@keyframes bench-fadeIn { to { opacity:1; } }

/* Responsive: on narrow viewports the rail stops being 33% and the
   chart takes the full row — the ::before still paints out to the
   left edge for the dark band, which now sits above the chart. */
@media (max-width: 1023px) {
    .bench-cmp__rail { padding-left:24px; padding-right:24px; }
    .bench-cmp__chart { padding-left:24px; padding-right:24px; }
    .bench-cmp__rail::before {
        /* On stacked layout the rail spans full width; extend the dark
           bg out on BOTH sides via a wider ::before centered behind. */
        left:-50vw; right:-50vw; width:auto;
    }
}
@media (max-width: 640px) {
    .bench-vbar { gap:16px; }
    .bench-vbar__yAxis { width:44px; }
    .bench-vbar__tickLabel { font-size:11.5px; padding-right:8px; }
    .bench-vbar__cols { gap:20px; padding:0 8px; }
    .bench-vbar__bar { max-width:80px; }
    .bench-vbar__value { font-size:18px; margin-bottom:10px; }
    .bench-vbar__catLabel { font-size:13px; margin-top:14px; }

    .bench-hbar__plotWrap { padding-left:88px; }
    .bench-hbar__gridOverlay { left:88px; }
    .bench-hbar__rows { gap:28px; }
    .bench-hbar__label { left:-88px; width:76px; font-size:13px; padding-right:10px; }
    .bench-hbar__bar { height:32px; }
    .bench-hbar__value { font-size:14px; }
    .bench-hbar__axis { margin-left:88px; }
}