/* FreshContext benchmarks: the browsable pages (models, suites, run log, methodology,
   experiments, guide, card, data). Loaded after site.css on every /benchmarks/ page.

   Phone first: the base rules are the phone. min-width 761px, 1081px and 1281px add back.
   Type comes from the site tokens; nothing here is set below --fs-label. */

[hidden] { display: none !important; }
.mono { font-family: var(--mono); }

/* ── sub navigation ──────────────────────────────────────────────────────── */
/* phone: one row that scrolls inside itself, current item brought into view by bench.js */
.b-subnav { border-bottom: 1px solid var(--rule-2); background: var(--ground); }
.b-subnav .wrap { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; padding-right: 0; }
.b-subnav .wrap > .label { display: none; flex: none; }
.b-subnav ul { list-style: none; margin: 0; padding: 0 var(--gutter) 0 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.b-subnav ul::-webkit-scrollbar { display: none; }
.b-subnav li { flex: none; }
.b-subnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; border: 1px solid var(--rule-2); white-space: nowrap;
  font-stretch: 116%; font-weight: 650; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--bone-2); }
.b-subnav a:hover { color: var(--bone); border-color: var(--bone-2); }
.b-subnav a[aria-current="page"] { color: var(--signal); border-color: var(--signal); }

/* ── page head ───────────────────────────────────────────────────────────── */
.b-title { font-stretch: 110%; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: .92;
  font-size: clamp(32px, 7.4vw, 78px); overflow-wrap: anywhere; margin: 20px 0 22px; }
.b-pagehead .lede { max-width: 56ch; }
.b-side { gap: 18px; }
.b-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.b-counts > div { padding: 12px 14px 14px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-width: 0; }
.b-counts dt { margin-bottom: 6px; font-stretch: 100%; letter-spacing: .06em; }
.b-counts dd { margin: 0; font-stretch: 110%; font-weight: 850; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.05; overflow-wrap: anywhere; }
.b-counts dd small, .b-counts .b-small { font-size: var(--fs-ui); font-weight: 600; font-stretch: 100%; line-height: 1.35; display: inline-block; }
.b-counts dd .mono { font-weight: 500; }
.b-counts dd a { text-decoration-thickness: 1px; }
.b-foot { margin: 0; font-size: var(--fs-meta); }
.b-links { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin: 0; }

/* ── zones ───────────────────────────────────────────────────────────────── */
.b-body { padding: 26px 0 44px; }
.b-intro { color: var(--bone-2); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 68ch; margin: 0 0 18px; }
.b-intro b { color: var(--bone); }
.b-h2 { font-stretch: 110%; font-weight: 850; text-transform: uppercase; font-size: clamp(20px, 2vw, 28px); line-height: 1.05; margin: 0 0 12px; }
.b-h3 { font-stretch: 112%; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.15; margin: 36px 0 10px; }
.b-vnote { color: var(--bone-2); font-size: var(--fs-ui); line-height: 1.55; max-width: 66ch; margin: 0 0 16px; }

/* ── chips ───────────────────────────────────────────────────────────────── */
.b-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.b-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 9px; border: 1px solid var(--rule-2);
  font-stretch: 112%; font-weight: 650; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase;
  color: var(--bone-2); white-space: nowrap; line-height: 1.2; }
.b-chip.is-data { font-family: var(--mono); font-stretch: 100%; font-weight: 500; letter-spacing: 0; text-transform: none; }
.b-chip.is-prod, .b-chip.is-sig { color: var(--signal); border-color: rgba(200, 255, 61, .55); }
.b-chip.is-out { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 1px; }
.b-chip.is-warn { border-style: dashed; color: var(--bone); }
.b-chip.is-seat { border-color: var(--bone-2); color: var(--bone); }
.b-chip.is-dim { color: var(--dim); border-color: var(--rule); }

/* ── the 95% interval: a track with quarter ticks, a hatched band, the point ── */
.b-ci { position: relative; display: block; height: 24px; min-width: 120px;
  background: linear-gradient(var(--rule-2), var(--rule-2)) 0 50% / 100% 1px no-repeat,
              linear-gradient(90deg, var(--rule-2) 1px, transparent 1px) 0 50% / 25% 10px repeat-x; }
.b-ci::after { content: ""; position: absolute; right: 0; top: 7px; height: 10px; width: 1px; background: var(--rule-2); }
.b-ci.is-empty { background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat; }
.b-ci-band { position: absolute; top: 6px; bottom: 6px; left: var(--lo); width: calc(var(--hi) - var(--lo)); min-width: 2px;
  border: 1px solid var(--bone-2); background: repeating-linear-gradient(135deg, rgba(239, 237, 227, .34) 0 1px, transparent 1px 5px); }
.b-ci-pt { position: absolute; top: 1px; bottom: 1px; left: calc(var(--v) - 1.5px); width: 3px; background: var(--bone); }
.b-ci.is-best .b-ci-band { border-color: var(--signal); background: repeating-linear-gradient(135deg, rgba(200, 255, 61, .42) 0 1px, transparent 1px 5px); }
.b-ci.is-best .b-ci-pt { background: var(--signal); }
.b-cinum { display: block; font-family: var(--mono); font-size: var(--fs-meta); color: var(--dim); margin-top: 4px; }
.b-note { display: block; font-family: var(--mono); font-size: var(--fs-label); color: var(--bone-2); margin-top: 2px; }
.b-axis { display: none; }

/* ── result tables: stacked records on a phone, tables on a desk ─────────── */
.b-tablebox { border-top: 1px solid var(--rule-2); }
table.b-runs, table.b-log { width: 100%; border-collapse: collapse; }
table.b-runs thead, table.b-log thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
table.b-runs tbody, table.b-log tbody { display: block; }
table.b-runs tr, table.b-log tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
table.b-runs td, table.b-log td { display: block; padding: 0; min-width: 0; }
.b-runs .c-name, .b-log .c-name { flex: 1 1 55%; font-size: var(--fs-ui); font-weight: 650; overflow-wrap: anywhere; }
.b-runs .c-name a, .b-log .c-name a, .b-log .c-model a { color: var(--bone); text-decoration-color: var(--rule-2); }
.b-runs .c-name a:hover, .b-log a:hover { color: var(--signal); }
.b-runs .c-name .b-chip { margin-left: 8px; vertical-align: 2px; }
.b-runs .c-score, .b-log .c-score { flex: 0 0 auto; margin-left: auto; }
.b-runs .c-ci { flex: 1 1 100%; }
.b-runs .c-n, .b-runs .c-rt, .b-runs .c-date, .b-log .c-rt, .b-log .c-cov { flex: 0 0 auto; font-family: var(--mono); font-size: var(--fs-meta); color: var(--bone-2); }
.b-runs .c-date, .b-log .c-date { color: var(--dim); font-family: var(--mono); font-size: var(--fs-meta); }
.b-log .c-date { flex: 1 1 auto; }
.b-log .c-name { flex: 1 1 100%; order: 2; }
.b-log .c-model { flex: 1 1 100%; order: 3; font-family: var(--mono); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.b-log .c-rt { order: 4; } .b-log .c-cov { order: 5; }
.b-log .c-ids { order: 6; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 2px 14px; font-family: var(--mono); font-size: var(--fs-label); color: var(--dim); }
.b-log tr.is-flag .c-score .b-score { color: var(--dim); }
.b-id { display: block; font-family: var(--mono); font-size: var(--fs-meta); font-weight: 400; color: var(--dim); margin-top: 2px; }
.b-prof { font-family: var(--mono); font-size: var(--fs-meta); color: var(--dim); margin-left: 8px; }
.b-k { font-stretch: 112%; font-family: var(--sans); font-weight: 600; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.b-score { font-stretch: 110%; font-weight: 850; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--bone); white-space: nowrap; }
tr.is-best .b-score { color: var(--signal); }

/* ── filters ─────────────────────────────────────────────────────────────── */
.b-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding: 16px; margin: 0 0 20px;
  border: 1px solid var(--rule-2); background: var(--field); }
.b-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.b-search, .b-formfoot { grid-column: 1 / -1; }
.b-field input, .b-field select { width: 100%; min-height: 46px; padding: 0 12px; margin: 0; background: var(--ground); color: var(--bone);
  border: 1px solid var(--rule-2); border-radius: 0; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.b-field select { padding-right: 34px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23efede3' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px; }
.b-field input::placeholder { color: var(--dim); }
.b-field input:focus, .b-field select:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
.b-formfoot { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.b-count { font-family: var(--mono); font-size: var(--fs-meta); color: var(--bone); }
button.textlink { background: none; border: 0; border-bottom: 1px solid var(--rule-2); color: var(--bone); cursor: pointer; padding: 6px 0 4px; font-family: inherit;
  font-stretch: 116%; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
button.textlink:hover { border-bottom-color: var(--signal); color: var(--signal); }
.b-moreb { margin: 22px 0 0; width: 100%; justify-content: center; background: none; cursor: pointer; font-family: inherit; }

/* ── model index ─────────────────────────────────────────────────────────── */
.b-mlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.b-mrow { padding: 18px 0 20px; border-bottom: 1px solid var(--rule); display: grid; gap: 10px; }
.b-mhead, .b-mbody { display: grid; gap: 8px; align-content: start; min-width: 0; }
.b-mlink { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; text-decoration: none; }
.b-mname { font-stretch: 108%; font-weight: 800; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.15; color: var(--bone); overflow-wrap: anywhere; }
.b-mname.is-id { font-family: var(--mono); font-stretch: 100%; font-weight: 600; font-size: var(--fs-ui); }
a:hover > .b-mname, .b-mlink:hover .b-mname { color: var(--signal); }
.b-facets { margin: 0; font-family: var(--mono); font-size: var(--fs-meta); color: var(--bone-2); line-height: 1.5; }
.b-why { margin: 0; color: var(--bone-2); font-size: var(--fs-ui); line-height: 1.55; max-width: 72ch; }
.b-meta { margin: 0; font-family: var(--mono); font-size: var(--fs-meta); color: var(--dim); line-height: 1.5; }
.b-jump { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 8px; }
.b-jump a { font-stretch: 116%; font-weight: 700; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--rule-2); padding: 8px 0 4px; }
.b-jump a:hover { border-bottom-color: var(--signal); color: var(--signal); }
.b-vector { scroll-margin-top: calc(var(--head) + 24px); }
.b-bucket { border-top: 1px solid var(--rule); padding: 12px 0 14px; }
.b-bucket h4 { margin: 0 0 6px; font-stretch: 116%; font-weight: 650; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.b-bucket .b-n { color: var(--dim); font-family: var(--mono); letter-spacing: 0; }
.b-bucket p { margin: 0; font-size: var(--fs-ui); line-height: 1.75; color: var(--dim); }
.b-bucket a { color: var(--bone-2); text-decoration-color: var(--rule-2); }
.b-bucket a:hover { color: var(--signal); }

/* ── a model ─────────────────────────────────────────────────────────────── */
.b-idline { color: var(--dim); font-size: var(--fs-meta); margin: 0 0 12px; overflow-wrap: anywhere; }
.b-facetrow { margin: 0 0 14px; }
.b-story { display: grid; gap: 26px; margin-top: 28px; }
.b-story p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--bone-2); margin: 0; max-width: 66ch; }
.b-lineage { font-size: var(--fs-ui) !important; }
.b-lineage a, .b-story a { color: var(--bone); }
.b-callout { margin: 22px 0 0; padding: 14px 16px; border: 1px dashed var(--rule-2); color: var(--bone-2); font-size: var(--fs-ui); line-height: 1.55; max-width: 78ch; }
.b-callout em { color: var(--bone); }
details.b-more { border-top: 1px solid var(--rule); margin-top: 24px; }
details.b-more > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 54px; }
details.b-more > summary::-webkit-details-marker { display: none; }
details.b-more > summary::after { content: "+"; font-family: var(--mono); font-size: 20px; color: var(--bone-2); }
details.b-more[open] > summary::after { content: "−"; }
details.b-more > summary:hover .label { color: var(--signal); }
details.b-more > summary .label { color: var(--bone); }
.b-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.b-cards > li { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 18px 16px 20px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.b-cards > li > a { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; text-decoration: none; }
.b-sid { display: block; width: 100%; font-family: var(--mono); font-size: var(--fs-meta); color: var(--dim); }
.b-suitecards > li.is-undoc { background: repeating-linear-gradient(135deg, rgba(239, 237, 227, .04) 0 1px, transparent 1px 7px); }
.b-flist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.b-flist a { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.b-flist a > span:nth-child(2) { font-weight: 650; font-size: var(--fs-ui); line-height: 1.4; color: var(--bone); }
.b-flist a:hover > span:nth-child(2) { color: var(--signal); }
.b-flist .b-chip { justify-self: start; }
.b-date { font-family: var(--mono); font-size: var(--fs-meta); color: var(--dim); }
.b-pn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); margin: 40px 0 56px; }
.b-pn > a, .b-pn > span { padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; min-width: 0; }
.b-pn .mid { grid-column: 1 / -1; order: 3; border-top: 1px solid var(--rule); align-items: center; justify-content: center; min-height: 54px; }
.b-pn .next { text-align: right; align-items: flex-end; }
.b-pn > :nth-child(3) { border-left: 1px solid var(--rule); }
.b-pn a > span:last-child:not(.label) { font-weight: 750; font-size: var(--fs-ui); line-height: 1.3; overflow-wrap: anywhere; }
.b-pn a:hover > span:last-child { color: var(--signal); }
.b-refs { margin: 10px 0 0 !important; font-size: var(--fs-ui); line-height: 1.6; }
.b-refs .label { margin-right: 6px; }
.b-refs a { color: var(--bone); text-decoration-color: var(--rule-2); }
.b-refs a:hover { color: var(--signal); }

/* ── suite ───────────────────────────────────────────────────────────────── */
.b-spec { margin: 0; display: grid; border-top: 1px solid var(--rule); }
.b-spec > div { padding: 14px 0 16px; border-bottom: 1px solid var(--rule); display: grid; gap: 6px; min-width: 0; }
.b-spec dd { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--bone-2); max-width: 72ch; overflow-wrap: anywhere; }
.b-spec dd.mono { font-size: var(--fs-meta); }
.b-spec code { font-family: var(--mono); color: var(--bone); }
.b-leader { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 16px; margin: 0 0 18px; border: 1px solid var(--rule-2); }
.b-leader a { font-weight: 750; font-size: var(--fs-ui); color: var(--bone); }
.b-leader .b-score { color: var(--signal); }
.b-leader .b-cinum { display: inline; margin: 0; }

/* ── the board ───────────────────────────────────────────────────────────── */
.b-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 56px; }
.b-two > div > .b-h3:first-child { margin-top: 8px; }
.b-bars { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 14px; }
.b-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.b-bk { font-size: var(--fs-ui); color: var(--bone); }
.b-bv { grid-column: 2; grid-row: 1; font-family: var(--mono); font-size: var(--fs-meta); color: var(--bone-2); text-align: right; white-space: nowrap; }
.b-track { grid-column: 1 / -1; display: block; height: 12px; border: 1px solid var(--rule-2); }
.b-track i { display: block; height: 100%; background: var(--bone-2); }
.b-track i.is-sunk { background: repeating-linear-gradient(135deg, var(--bone-2) 0 1px, transparent 1px 4px); }
table.b-heat { width: 100%; border-collapse: collapse; }
table.b-heat thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
table.b-heat tbody, table.b-heat tr { display: block; }
table.b-heat tr { padding: 14px 0 12px; border-bottom: 1px solid var(--rule); }
table.b-heat th[scope="row"] { display: block; text-align: left; font-weight: 800; font-size: var(--fs-ui); margin-bottom: 8px; }
table.b-heat td { display: grid; grid-template-columns: minmax(0, 9.5rem) 3.4rem minmax(0, 1fr); gap: 10px; align-items: center; padding: 3px 0; }
table.b-heat td::before { content: attr(data-label); font-family: var(--mono); font-size: var(--fs-label); color: var(--dim); overflow-wrap: anywhere; }
.b-hv { font-family: var(--mono); font-size: var(--fs-meta); text-align: right; color: var(--bone); }
.b-hb { display: block; height: 9px; border: 1px solid var(--rule); }
.b-hb i { display: block; height: 100%; background: var(--bone-2); }
td.is-absent .b-hv { color: var(--faint); }

/* ── long-form: methodology, guide, card ─────────────────────────────────── */
.b-doc { display: grid; gap: 28px; }
.b-toc { border: 1px solid var(--rule-2); padding: 14px 16px 12px; }
.b-toc ol { margin: 10px 0 0; padding-left: 1.4em; }
.b-toc li { font-size: var(--fs-ui); line-height: 1.4; margin: 6px 0; color: var(--dim); }
.b-toc a { color: var(--bone-2); text-decoration: none; }
.b-toc a:hover { color: var(--signal); }
.b-prose { max-width: 70ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--bone-2); min-width: 0; }
.b-prose h2 { font-stretch: 110%; font-weight: 850; text-transform: uppercase; font-size: clamp(21px, 2.1vw, 30px); line-height: 1.05; color: var(--bone);
  margin: 46px 0 14px; scroll-margin-top: calc(var(--head) + 24px); }
.b-prose > h2:first-child { margin-top: 0; }
.b-prose h3 { font-stretch: 108%; font-weight: 800; font-size: clamp(18px, 1.5vw, 21px); color: var(--bone); margin: 30px 0 10px; }
.b-prose p, .b-prose ul, .b-prose ol { margin: 0 0 1em; }
.b-prose ul, .b-prose ol { padding-left: 1.3em; }
.b-prose li { margin-bottom: .5em; }
.b-prose strong, .b-prose b { color: var(--bone); font-weight: 650; }
.b-prose em { color: var(--bone); }
.b-prose a { color: var(--bone); text-decoration-color: var(--rule-2); }
.b-prose a:hover { color: var(--signal); }
.b-prose code { font-family: var(--mono); font-size: .86em; color: var(--bone); background: var(--plate); padding: .08em .3em; overflow-wrap: anywhere; }
.b-pre { margin: 0 0 1.2em; padding: 14px 16px; background: var(--field); border: 1px solid var(--rule-2); overflow-x: auto;
  font-family: var(--mono); font-size: var(--fs-label); line-height: 1.6; color: var(--bone); max-width: 100%; }
.b-pre code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; }
.b-pre.is-wrap, .b-pre.is-wrap code { white-space: pre-wrap; overflow-wrap: anywhere; }
.b-prose .b-tablebox { margin: 0 0 1.4em; }
table.b-rt { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); line-height: 1.45; }
table.b-rt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
table.b-rt tbody, table.b-rt tr { display: block; }
table.b-rt tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
table.b-rt td { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 12px; padding: 3px 0; color: var(--bone-2); overflow-wrap: anywhere; }
table.b-rt td::before { content: attr(data-label); font-stretch: 112%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding-top: 2px; }
table.b-rt.is-kv td { display: block; }
table.b-rt.is-kv td::before { content: none; }
table.b-rt.is-kv td:first-child { font-family: var(--mono); font-size: var(--fs-meta); color: var(--dim); }

/* ── experiments, files ──────────────────────────────────────────────────── */
.b-stack { display: grid; border-top: 1px solid var(--rule); }
.b-exp { padding: 22px 0 24px; border-bottom: 1px solid var(--rule); display: grid; gap: 12px; scroll-margin-top: calc(var(--head) + 24px); }
.b-exp header { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.b-q { margin: 0; color: var(--bone-2); font-size: var(--fs-ui); line-height: 1.5; max-width: 70ch; }
.b-q::before { content: "Q. "; font-family: var(--mono); color: var(--dim); }
.b-verdict { margin: 0; border-left: 2px solid var(--bone-2); padding-left: 14px; color: var(--bone); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 70ch; }
.b-exp .b-spec { border-top: 0; }
.b-exp .b-spec > div { padding: 8px 0; border-bottom: 0; }
.b-exp .b-spec dd { font-size: var(--fs-ui); }
.b-files > li > a { flex-direction: column; align-items: flex-start; gap: 4px; }
.b-files .b-mname { font-size: var(--fs-ui); font-weight: 650; }

/* ── tablet ──────────────────────────────────────────────────────────────── */
@media (min-width: 761px) {
  .b-body { padding: 36px 0 60px; }
  .b-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-flist a { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 18px; align-items: baseline; }
  .b-pn { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .b-pn .mid { grid-column: auto; order: 0; border-top: 0; border-left: 1px solid var(--rule); padding-left: 24px; padding-right: 24px; }
  .b-pn > :nth-child(3) { border-left: 1px solid var(--rule); }
  .b-spec > div { grid-template-columns: 9rem minmax(0, 1fr); gap: 24px; }
  .b-spec dt { padding-top: 5px; }
  .b-bars li { grid-template-columns: 13rem minmax(0, 1fr) 5.5rem; }
  .b-track { grid-column: 2; grid-row: 1; }
  .b-bv { grid-column: 3; }
  table.b-rt thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  table.b-rt tbody { display: table-row-group; }
  table.b-rt tr { display: table-row; padding: 0; }
  table.b-rt td, table.b-rt th { display: table-cell; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
  table.b-rt th { font-stretch: 116%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); border-bottom-color: var(--rule-2); }
  table.b-rt td::before { content: none; }
  table.b-rt.is-kv td:first-child { width: 34%; }
}

/* ── desk ────────────────────────────────────────────────────────────────── */
@media (min-width: 1081px) {
  .b-subnav .wrap { gap: 24px; padding-right: var(--gutter); }
  .b-subnav .wrap > .label { display: block; }
  .b-subnav ul { gap: 0; flex-wrap: wrap; overflow: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
  .b-subnav li + li a { margin-left: -1px; }
  .b-subnav a { min-height: 40px; padding: 0 11px; letter-spacing: .09em; }
  .b-subnav .wrap > .label { display: none; }
  .b-mrow { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; }
  .b-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .b-lineage { grid-column: 1 / -1; }
  .b-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .b-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .b-search { grid-column: span 2; }
  .b-formfoot { grid-column: 1 / -1; }
  .b-doc { grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
  .b-toc { position: sticky; top: calc(var(--head) + 32px); }

  table.b-runs thead, table.b-log thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  table.b-runs tbody, table.b-log tbody { display: table-row-group; }
  table.b-runs tr, table.b-log tr { display: table-row; padding: 0; }
  table.b-runs th, table.b-log th { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--rule-2); vertical-align: bottom;
    font-stretch: 116%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
  table.b-runs th.num, table.b-log th.num { text-align: right; }
  table.b-runs td, table.b-log td { display: table-cell; padding: 14px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
  table.b-runs tr:hover td, table.b-log tr:hover td { background: var(--plate); }
  .b-runs .c-score, .b-log .c-score { text-align: right; white-space: nowrap; }
  .b-runs .c-ci { width: 28%; min-width: 220px; }
  .b-runs .c-n { text-align: right; white-space: nowrap; }
  .b-runs .c-rt, .b-log .c-rt { white-space: nowrap; }
  .b-runs .c-rt .b-prof, .b-log .c-rt .b-prof { display: block; margin: 4px 0 0; }
  .b-runs .c-date, .b-log .c-date { white-space: nowrap; }
  .b-log .c-model { font-size: var(--fs-meta); }
  .b-log .c-ids { display: table-cell; }
  .b-log .c-ids span { display: block; }
  .b-k { display: none; }
  .b-score { font-size: 19px; }
  .b-axis { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0; text-transform: none; color: var(--dim); }
  .b-axis i { font-style: normal; }

  table.b-heat thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  table.b-heat tbody { display: table-row-group; }
  table.b-heat tr { display: table-row; padding: 0; }
  table.b-heat th, table.b-heat td { display: table-cell; padding: 10px 8px; border-bottom: 1px solid var(--rule); }
  table.b-heat th[scope="col"] { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; color: var(--dim); text-align: right; vertical-align: bottom; border-bottom-color: var(--rule-2); }
  table.b-heat th[scope="col"]:first-child { text-align: left; }
  table.b-heat th[scope="row"] { margin: 0; white-space: nowrap; padding-right: 16px; }
  table.b-heat td { text-align: right; background: rgba(239, 237, 227, calc(var(--pct, 0) * .0042)); border-left: 1px solid var(--ground); }
  table.b-heat td::before, table.b-heat .b-hb { display: none; }
  table.b-heat td.is-absent { background: none; }
}

/* ── wide ────────────────────────────────────────────────────────────────── */
@media (min-width: 1281px) {
  .b-subnav .wrap > .label { display: block; }
  .b-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-filters { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .b-search { grid-column: span 2; }
}

/* ── seats: who holds which verb (models index) ──────────────────────────── */
.b-seats { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.b-seat { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "v st" "s s" "m m"; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.b-sv { grid-area: v; font-stretch: 108%; font-weight: 900; text-transform: uppercase; font-size: 18px; line-height: 1.1; }
.b-sv small { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; color: var(--dim); margin-top: 4px; }
.b-ss { grid-area: s; font-size: var(--fs-meta); color: var(--bone); }
.b-sm { grid-area: m; color: var(--bone-2); font-size: var(--fs-ui); line-height: 1.45; }
.b-st { grid-area: st; font-stretch: 116%; font-weight: 700; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.b-seat.is-benched .b-st { color: var(--dim); }
.b-seat.is-benched .b-sv { color: transparent; -webkit-text-stroke: 1px var(--bone); }
.b-asof { font-family: var(--mono); font-size: var(--fs-meta); line-height: 1.6; color: var(--dim); margin: 14px 0 0; }
.b-divider { list-style: none; display: grid; gap: 6px; padding: 30px 0 14px; margin-top: 6px; border-top: 1px solid var(--rule-2); color: var(--bone-2); font-size: var(--fs-ui); }
.b-divider .label { color: var(--bone); }
@media (min-width: 761px) {
  .b-seat { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 2fr) 96px; grid-template-areas: "v s m st"; align-items: baseline; gap: 16px; }
}

/* ── the tabs stay in reach: they stick under the title strip ───────────── */
.b-subnav { position: sticky; top: calc(var(--frame) + var(--head)); z-index: 29; }
html:has(.b-subnav) { scroll-padding-top: calc(var(--head) + 100px); }
body:has(.b-subnav) .split .side { top: calc(var(--head) + 116px); }
