/* The Known Good — site stylesheet
 *
 * OWNED BY THE LEAD. Template writers consume this; they must not restyle it.
 *
 * Every rule down to the "DERIVED" banner is transcribed VERBATIM from the
 * locked mockups (`mockup/index.html` and `mockup/model-page.html`), which are
 * the visual contract. Where the two mockups differ, the superset is used and
 * the difference is noted inline. Nothing here was redesigned.
 *
 * Token values are DESIGN-LOCK.md §2. `--acw` and `--chipbg` are additional
 * tokens present in both mockups.
 */

/* ---------------------------------------------------------------- tokens */
/* Modal scrim. Needs separate values per theme: .46 of a near-black over the
   light page reads as a dim, but the same wash over the dark page (--bg #0B1A2E)
   is barely perceptible, so the drawer would float with nothing visually behind
   it. The dark value is darker and more opaque to buy back that separation. */
:root{--scrim:rgba(8,16,30,.46);--bg:#fff;--bg2:#f7f9fc;--panel:#fff;--panel2:#f1f4f9;--bd:#e4e7ec;--bds:#cfd5de;
 --tx:#0d1420;--tx2:#525e6d;--tx3:#8c96a3;--ac:#1082FE;--acw:#e9f2ff;--navy:#073170;
 --co:#d8492a;--vi:#6d5ce0;--gr:#159a5f;--am:#eab308;--chipbg:#fff}
html[data-theme="dark"]{--scrim:rgba(0,0,0,.66);--bg:#0B1A2E;--bg2:#0e2038;--panel:#132542;--panel2:#0f1d33;--bd:#20304a;--bds:#2c3d5a;
 --tx:#e8eef7;--tx2:#a1b1c7;--tx3:#6f8199;--ac:#3b8cf6;--acw:#132a4a;--navy:#8fb8f0;
 --co:#ff6a4d;--vi:#9085e9;--gr:#34d399;--am:#f5c518;--chipbg:#f2f5f9}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1260px;margin:0 auto;padding:0 22px}

/* ---------------------------------------------------------------- header */
header{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--bd)}
.hrow{display:flex;align-items:center;gap:14px;padding:9px 0}
.lk{display:flex;align-items:center;gap:9px;text-decoration:none}.lk img{height:27px;display:block}
.wm{font-family:"Avenir Next","Futura",-apple-system,sans-serif;font-size:16.5px;letter-spacing:-.015em;white-space:nowrap}
.wm .the{font-weight:400;color:var(--tx3)}.wm .kg{font-weight:600;color:var(--navy)}
nav.top{display:flex;gap:4px;margin-left:6px;background:var(--panel2);border-radius:22px;padding:4px}
nav.top a{color:var(--tx2);text-decoration:none;font-size:12.5px;padding:5px 11px;border-radius:18px}
nav.top a:hover,nav.top a.on{background:var(--panel);color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.seg{display:inline-flex;border:1px solid var(--bd);border-radius:20px;overflow:hidden}
.seg button{background:transparent;border:0;padding:6px 8px;cursor:pointer;color:var(--tx3);display:flex}
.seg button.on{background:var(--panel2);color:var(--tx)}.seg svg{width:14px;height:14px}

/* ---------------------------------------------------------------- primitives */
.pill{font-size:11px;color:var(--tx2);background:var(--panel2);border:1px solid var(--bd);border-radius:20px;padding:3px 10px}
.card{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:14px 16px}
h1{font-size:36px;font-weight:600;margin:0 0 8px;letter-spacing:-.6px;line-height:1.12}
/* model-page.html uses a smaller H1; carried on a page class so one stylesheet
   serves both mockups without changing either value. */
.page-model h1{font-size:31px;margin:8px 0 12px;letter-spacing:-.5px;line-height:1.15}
.lede{font-size:16px;color:var(--tx2);max-width:640px;margin:0 0 18px}
.btn{font-size:13px;border-radius:8px;padding:9px 16px;text-decoration:none;display:inline-block}
.btn-p{background:var(--ac);color:#fff}.btn-g{border:1px solid var(--bds);color:var(--tx)}
/* The mockup's Subscribe control is an <a>, which cannot submit a form. A real
   <button> needs these three to render identically. Same box, same type. */
button.btn{border:0;cursor:pointer;font-family:inherit;line-height:normal}
/* Links inside data tables. The mockup only ever styles links inline; this is
   the same --ac treatment, hoisted so templates stop repeating it. */
td a{color:var(--ac);text-decoration:none}
td a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- hero announcements */
.ann{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 4px}
.ann a{border:1px solid var(--bd);border-radius:12px;padding:13px 15px;text-decoration:none;color:inherit;background:var(--panel)}
.ann a:hover{border-color:var(--ac)}
.ann .k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ac);font-weight:600}
.ann .t{font-size:14.5px;font-weight:600;margin:3px 0 2px}
.ann .d{font-size:11.5px;color:var(--tx3);line-height:1.45}

/* ---------------------------------------------------------------- chart cards */
.hl-t{font-size:13px;font-weight:600;color:var(--tx2);padding-bottom:7px;border-bottom:1px solid var(--bd);margin:32px 0 14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.chartbox{padding:14px 14px 6px}
.ctitle{font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px;margin:0 0 3px}
.sq{width:11px;height:11px;border-radius:3px;display:inline-block;flex-shrink:0}
.csub{font-size:11px;color:var(--tx3);margin:0 0 8px}

/* ---------------------------------------------------------------- bars */
.bars{display:flex;align-items:flex-end;gap:4px;height:150px;border-bottom:1px solid var(--bd);position:relative;padding-top:6px}
.bars .gl{position:absolute;left:0;right:0;border-top:1px dashed var(--bd);opacity:.65}
/* Degenerate series: the container is KEPT so a tab switch can re-enter it (the
   JS re-queries .bars and bails if it is gone), but it must not keep the fixed
   height, flex layout or baseline rule of a real chart. */
.bars.flat{height:auto!important;display:block;border-bottom:0;padding-top:0}
.bcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative;min-width:0}
.bar{width:100%;max-width:26px;border-radius:3px 3px 0 0;display:flex;justify-content:center;padding-top:5px}
.bar.me{outline:2px solid var(--tx);outline-offset:1px}
.bval{font-size:10px;font-weight:600;color:#fff}.bval.out{color:var(--tx);position:absolute;top:-14px}
.axis{display:flex;gap:4px;padding-top:7px}
.acol{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.alogo{width:18px;height:18px;border-radius:4px;background:var(--chipbg);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;padding:2px;text-decoration:none;font-size:8px;font-weight:700;color:#5a6675}
.alogo img{width:100%;height:100%;object-fit:contain}
.bulb{font-size:9px;color:var(--tx3);height:11px;line-height:11px}
.lblbox{height:84px;position:relative;width:100%}
.lbl{position:absolute;top:3px;right:50%;transform:rotate(-58deg);transform-origin:100% 0;white-space:nowrap;font-size:8.5px;line-height:1.15;color:var(--tx2);text-align:right;text-decoration:none}
.lbl.me{color:var(--tx);font-weight:700}.lbl:hover{color:var(--ac);text-decoration:underline}

/* ---------------------------------------------------------------- promo row */
.promo{display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr;gap:14px;margin:22px 0 8px}
.pcard{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:16px;display:flex;flex-direction:column;min-height:180px;text-decoration:none;color:inherit;position:relative}
.pcard:hover{border-color:var(--ac)}
.pc-h{font-size:19px;font-weight:500;line-height:1.25;letter-spacing:-.2px;padding-right:36px}
.pc-d{font-size:11.5px;color:var(--tx3);margin-top:auto;line-height:1.45}
.arrow{position:absolute;top:15px;right:15px;width:26px;height:26px;border-radius:7px;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.chg{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:13px 15px;max-height:180px;overflow:auto}
.chg-i{padding:6px 0 6px 12px;border-left:2px solid var(--bd);margin-left:3px}
.chg-i .m{font-size:9.5px;color:var(--tx3)}
.chg-i .n{font-size:12px;display:flex;align-items:center;gap:6px}
.chg-i .n img{width:13px;height:13px;object-fit:contain}

/* ---------------------------------------------------------------- detail layout
   The border-top here IS the horizontal rule of DESIGN-LOCK §3 item 5. The left
   nav exists only inside this grid and must never appear above it. */
.layout{display:grid;grid-template-columns:212px 1fr;gap:32px;padding:26px 0 0;border-top:1px solid var(--bd);margin-top:26px}
.snav{position:sticky;top:60px;align-self:start;max-height:calc(100vh - 80px);overflow:auto;padding-right:6px}
.nv{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--tx3);text-decoration:none;padding:5px 4px;border-radius:6px;line-height:1.32}
.nv .d{width:8px;height:8px;border-radius:2px;background:var(--bds);flex-shrink:0;margin-top:4px}
.nv:hover{color:var(--tx2)}
.nv.on{color:var(--tx);font-weight:600}.nv.on .d{background:var(--tx)}
.sec{scroll-margin-top:70px;margin-bottom:44px}
.sech{font-size:22px;font-weight:600;margin:0 0 4px;display:flex;align-items:center;gap:10px;letter-spacing:-.3px}
.sub{font-size:13px;color:var(--tx2);margin:0 0 14px}

/* ---------------------------------------------------------------- tabs + controls */
.tabs{display:flex;gap:4px;background:var(--panel2);border-radius:9px;padding:4px;margin-bottom:12px;flex-wrap:wrap}
.tab{font-size:12px;padding:6px 13px;border-radius:6px;color:var(--tx2);cursor:pointer}
.tab.on{background:var(--panel);color:var(--tx);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.07)}
.ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.sel{font-size:11.5px;border:1px solid var(--bds);border-radius:7px;padding:5px 11px;color:var(--tx2);background:var(--panel);display:flex;align-items:center;gap:7px}
.ico{width:27px;height:27px;border:1px solid var(--bd);border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--tx3);font-size:12px}
.addm{font-size:11.5px;color:var(--tx2);display:flex;align-items:center;gap:6px}
.addm .p{width:19px;height:19px;border-radius:50%;border:1px solid var(--bds);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--tx3)}
.legend{display:flex;gap:14px;font-size:11px;color:var(--tx2);margin:8px 0 2px;flex-wrap:wrap}
.wmk{font-size:10px;color:var(--tx3);text-align:right;padding:4px 2px 0}
.mnote{background:var(--bg2);border:1px solid var(--bd);border-radius:10px;padding:12px 14px;margin-top:12px;font-size:11.5px;color:var(--tx2);line-height:1.55}
.mnote b{color:var(--tx)}

/* ---------------------------------------------------------------- trend chart */
.tlegend{display:flex;flex-wrap:wrap;gap:5px 15px;margin:8px 0 12px}
.tl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx);cursor:pointer;user-select:none}
.tl .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.tl:hover{color:var(--ac)}
.tl.off{opacity:.3}.tl.off .dot{background:var(--tx3)!important}
.tl.hot{color:var(--ac);font-weight:600}
#TREND{position:relative}
#TREND .ser{transition:opacity .12s}
#TREND svg.dim .ser{opacity:.10}
#TREND svg.dim .ser.hot{opacity:1}
#TREND .ser.hot path.vis{stroke-width:2.6}
#TREND .hit{cursor:pointer}
.ttip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--bds);border-radius:9px;
 padding:9px 12px;font-size:11.5px;box-shadow:0 6px 20px rgba(0,0,0,.16);opacity:0;transition:opacity .1s;z-index:6;white-space:nowrap}
.ttip .dt{color:var(--tx3);font-size:10.5px}
.ttip .md{font-weight:600;margin:3px 0 5px;font-size:12.5px}
.ttip .cr{display:flex;align-items:center;gap:7px;color:var(--tx2)}
.ttip .cr b{margin-left:auto;color:var(--tx);padding-left:18px}

/* ---------------------------------------------------------------- field notes strip
   DESIGN-LOCK §7.10: must stop animating under prefers-reduced-motion and fall
   back to manual scroll. */
.strip{overflow:hidden;position:relative;padding:2px 0 6px}
.strip:before,.strip:after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.strip:before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.strip:after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.track{display:flex;gap:14px;width:max-content;animation:sc 52s linear infinite}
.strip:hover .track{animation-play-state:paused}
@keyframes sc{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.track{animation:none}.strip{overflow-x:auto}}
.bcard{width:252px;flex-shrink:0;background:var(--panel);border:1px solid var(--bd);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit}
.bcard:hover{border-color:var(--ac)}
.bcard .th{height:104px;background:linear-gradient(135deg,var(--navy),var(--ac))}
.bcard .bd{padding:11px 13px}
.bcard h4{font-size:13px;font-weight:600;margin:0 0 5px;line-height:1.35}
.bcard span{font-size:10.5px;color:var(--tx3)}

/* ---------------------------------------------------------------- model page */
.crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--tx2);padding-top:24px;flex-wrap:wrap}
.biglogo{width:34px;height:34px;border-radius:8px;background:var(--chipbg);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;padding:5px}
.biglogo img{width:100%;height:100%;object-fit:contain}
/* Lettered fallback inside the large chip, matching .alogo's treatment. */
.biglogo span{font-size:12px;font-weight:700;color:#5a6675}
.sumgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:20px 0}
/* Was an inline style on two templates, which no media query could override.
   Declared here so the 700px rule can actually reach it. */
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:14px}
.sc{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:13px 14px}
.sc-h{font-size:12.5px;font-weight:600;color:var(--tx2);margin-bottom:7px}
.rank{font-size:10.5px;color:var(--tx3);background:var(--panel2);border-radius:12px;padding:2px 8px;display:inline-block;margin-bottom:6px}
.sc-v{font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1.08}
.sc-u{font-size:10.5px;color:var(--tx3);line-height:1.35;margin-top:3px}
.units{display:flex;gap:3px;margin-top:9px}
.u{height:4px;flex:1;border-radius:2px;background:var(--panel2)}.u.f{background:var(--ac)}
.prose{font-size:13.5px;color:var(--tx2);line-height:1.65;margin:6px 0 0}
.prose b{color:var(--tx);font-weight:600}
.mrow{display:flex;align-items:center;gap:8px;margin:9px 0;font-size:11.5px;color:var(--tx2)}
.trk{flex:1;height:8px;border-radius:4px;background:var(--panel2);position:relative}

/* ---------------------------------------------------------------- tables */
table{width:100%;border-collapse:collapse}
th{font-size:11px;font-weight:600;color:var(--tx3);text-align:left;padding:8px;border-bottom:1px solid var(--bd)}
td{padding:9px 8px;border-bottom:1px solid var(--bd);font-size:12.5px}
td.r,th.r{text-align:right}

/* ---------------------------------------------------------------- footer */
footer{display:flex;flex-wrap:wrap;gap:26px;font-size:12px;color:var(--tx2);padding:20px 0 46px;border-top:1px solid var(--bd);margin-top:24px}
footer a{color:var(--tx2);text-decoration:none}
footer a:hover{color:var(--ac)}

/* ---------------------------------------------------------------- responsive */
@media(max-width:1000px){
 .layout{grid-template-columns:1fr}.snav{display:none}
 .g3,.promo,.ann{grid-template-columns:1fr}
 .sumgrid{grid-template-columns:1fr 1fr}
}

/* ======================================================================== *
 * DERIVED — the mockups do not draw these pages (leaderboard, models index,
 * providers, evaluations, arenas, trends, data, static pages). The rules below
 * add only LAYOUT for them and are built strictly from the primitives above:
 * no new colours, no new type scale, no component library. Anything visual
 * reuses .card / .pill / table / .sel / .tabs.
 * ======================================================================== */

/* current-page state for a .pill used as a route switcher */
.pill.on{color:var(--tx);border-color:var(--ac);font-weight:600}

/* wide tables must scroll inside their own container, never the page body */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tblwrap table{min-width:760px}
/* A focusable scroll container needs a visible focus ring, or keyboard users
   cannot tell what they are about to scroll. */
.tblwrap:focus-visible,.cscroll:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
/* Prose tables are NOT data tables. The 760px floor above exists for wide
   leaderboard-style tables; applied to the Privacy Policy's two-column purpose
   table it forced a scrollbar at every viewport. It stays a real <table> for
   accessibility -- it just sizes to its content and scrolls only if it must. */
.page-legal .tblwrap table{min-width:0}
/* Key/value and at-a-glance tables are narrow by nature. They still need a
   scroll container (a long model name can exceed 360px), but forcing the
   760px data-table floor on them would make every one of them scroll at
   every viewport. */
.tblwrap.fit table{min-width:0}

/* sortable table headers reuse the existing th treatment */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--tx2)}
th.sortable .ind{color:var(--tx3);font-size:9px;padding-left:3px}
tr.hi td{background:var(--acw)}

/* index/listing grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mcard{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:13px 14px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px}
.mcard:hover{border-color:var(--ac)}
.mcard .mh{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.mcard .mm{font-size:11px;color:var(--tx3)}

/* filter row: same visual language as .ctrl */
.filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.filter input[type=search],.filter input[type=text],.filter select{
 font-size:12px;border:1px solid var(--bds);border-radius:7px;padding:6px 11px;
 color:var(--tx);background:var(--panel);font-family:inherit}
.filter input[type=search]{min-width:230px}
input[type=email]{padding:9px 12px;border:1px solid var(--bds);border-radius:8px;background:var(--panel);color:var(--tx);font-size:13px;font-family:inherit}

/* recommender weight sliders */
.wrow{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:12px;color:var(--tx2)}
.wrow label{width:110px}
.wrow input[type=range]{flex:1;accent-color:var(--ac)}
.wrow output{width:44px;text-align:right;color:var(--tx);font-weight:600}

/* Legal documents. The sticky left nav links to heading ids, and the sticky
   header would otherwise cover the target — .sec carries scroll-margin-top for
   the same reason, but these headings are plain h2/h3 inside .copy. */
.page-legal .copy h2,.page-legal .copy h3{scroll-margin-top:70px}
.page-legal .copy table{margin:12px 0}
.page-legal .copy li{margin:4px 0}

/* prose pages (methodology, attribution, about) */
.copy{max-width:760px}
.copy h2{font-size:19px;font-weight:600;margin:26px 0 8px;letter-spacing:-.2px}
.copy h3{font-size:15px;font-weight:600;margin:18px 0 6px}
.copy p,.copy li{font-size:13.5px;color:var(--tx2);line-height:1.65}
.copy a{color:var(--ac);text-decoration:none;overflow-wrap:anywhere}
.copy a:hover{text-decoration:underline}
/* Long URLs inside inline <code> were the actual cause of legal-page overflow:
   code does not wrap at arbitrary points, so a single URL pushed the document
   wider than the viewport. `anywhere` also lets the line box shrink, which
   break-word alone does not do. Content is never shortened to fit. */
.copy code{overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--panel2);border-radius:4px;padding:1px 5px}

/* skip link for keyboard users */
.skip{position:absolute;left:-9999px}
.skip:focus{left:22px;top:8px;z-index:60;background:var(--panel);border:1px solid var(--ac);
 border-radius:8px;padding:8px 12px;font-size:13px;color:var(--tx)}

@media(max-width:1000px){.grid2,.grid4{grid-template-columns:1fr}}

/* ======================================================================== *
 * 9. RESPONSIVE — 360px floor
 *
 * The reference screenshots are an iPhone 16 Pro Max at 440px CSS px, one of
 * the WIDEST phones sold. Anything that overflows there overflows worse on
 * every smaller device, so the floor targeted here is 360px.
 *
 * The rule: nothing may cause horizontal PAGE scroll. Wide content scrolls
 * inside its own container. Measured, not eyeballed -- documentElement
 * .scrollWidth must equal .clientWidth on every page type at 360/390/440.
 *
 * Before this block, all 45 page x viewport combinations overflowed, every
 * page reporting a constant scrollWidth of 872px: the header pill strip is
 * flex-nowrap and simply did not fit, so the widest element set the page
 * width regardless of viewport.
 * ======================================================================== */

/* ---------------------------------------------------------------- nav drawer */
.burger{display:none;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;
  background:transparent;border:1px solid var(--bd);border-radius:9px;cursor:pointer;color:var(--tx2);padding:0}
.burger:hover{color:var(--tx);border-color:var(--bds)}
.burger svg{width:17px;height:17px}
.dov{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;
  transition:opacity .2s ease;z-index:50}
.dov.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(80vw,310px);z-index:60;background:var(--bg);
  border-right:1px solid var(--bd);transform:translateX(-100%);transition:transform .2s ease;
  overflow-y:auto;padding:12px 14px 22px;visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--bd)}
.drawer .dclose{background:transparent;border:1px solid var(--bd);border-radius:9px;width:32px;height:32px;
  cursor:pointer;color:var(--tx2);display:flex;align-items:center;justify-content:center;padding:0}
.drawer .dclose:hover{color:var(--tx);border-color:var(--bds)}
.drawer .dclose svg{width:15px;height:15px}
.drawer nav{display:flex;flex-direction:column;gap:2px}
.drawer nav a{color:var(--tx2);text-decoration:none;font-size:14px;padding:9px 10px;border-radius:9px}
.drawer nav a:hover{background:var(--panel2);color:var(--tx)}
.drawer nav a.on{background:var(--panel);color:var(--tx);font-weight:600}
.drawer .dmeta{margin-top:14px;padding-top:12px;border-top:1px solid var(--bd)}
body.navlock{overflow:hidden}

/* ------------------------------------------------- chart horizontal scroller */
/* Bars keep their width and the -58deg labels keep their geometry; the CHART
   scrolls inside this box instead of the page. .bars and .axis must live in ONE
   scroller or the labels desync from the bars they name. Bar count is never
   reduced: a leaderboard showing 12 of 22 models on a phone is a different
   claim from one showing all 22. */
/* overflow-x:auto makes this a scroll container in BOTH axes -- per CSS Overflow 3,
   overflow-y:visible computes to auto once overflow-x is not visible. .bval.out sits
   at top:-14px (DESIGN-LOCK §4: a bar under ~19% moves its value ABOVE the bar), which
   put it 8px above the container's content edge, where a scroll container clips it.
   8 of 15px of every out-of-bar value was cut off, at 1400px exactly as at 360px.
   The padding buys that headroom back; the negative margin keeps surrounding layout
   where it was. Do not remove one without the other. */
.cscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-top:18px;margin-top:-18px}
.cinner{min-width:100%}

@media(max-width:900px){
  nav.top{display:none}
  .burger{display:inline-flex}
  /* The "Updated" pill moves into the drawer rather than being dropped -- it is
     the freshness signal and removing it would change what the page claims. */
  .hrow>.pill{display:none}
  .hrow{gap:9px}
  .wrap{padding:0 14px}
  /* Give every bar a fixed footprint so the series keeps its shape and scrolls. */
  .cinner{min-width:max-content}
  .bcol,.acol{flex:0 0 30px;min-width:30px}
  .bars .gl{left:0;right:0}
}

@media(max-width:700px){
  h1{font-size:27px;letter-spacing:-.3px}
  .page-model h1{font-size:24px}
  .sumgrid{gap:10px}
}

/* ------------------------------------------------------ mobile section nav */
/* Below 1000px .snav is display:none. On /privacy/ and /terms/ that sticky list
   is the ONLY way through a 12- and an 18-section document, so hiding it left
   those pages with no navigation at all on a phone. This is the equivalent. */
.jump{display:none;margin:14px 0 4px;border:1px solid var(--bd);border-radius:10px;background:var(--panel)}
.jump>summary{cursor:pointer;padding:10px 13px;font-size:13px;font-weight:600;color:var(--tx);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
.jump>summary::-webkit-details-marker{display:none}
.jump>summary:after{content:"";width:7px;height:7px;border-right:1.5px solid var(--tx3);
  border-bottom:1.5px solid var(--tx3);transform:rotate(45deg);transition:transform .15s ease;margin-bottom:3px}
.jump[open]>summary:after{transform:rotate(-135deg);margin-bottom:-2px}
.jump>summary:focus-visible{outline:2px solid var(--ac);outline-offset:-2px;border-radius:10px}
.jump nav{display:flex;flex-direction:column;padding:2px 8px 10px}
.jump nav a{color:var(--tx2);text-decoration:none;font-size:13px;padding:7px 9px;border-radius:8px}
.jump nav a:hover{background:var(--panel2);color:var(--tx)}

@media(max-width:1000px){
  .jump{display:block}
  /* A grid item's automatic minimum size is its MIN-CONTENT size, so `1fr` alone
     cannot shrink below the widest thing inside -- here the chart's max-content
     inner track. The column therefore floored at ~744px and every sibling, .jump
     included, inherited that width. minmax(0,1fr) plus min-width:0 is what
     actually lets the scroll containers do their job. */
  .layout{grid-template-columns:minmax(0,1fr)}
  .layout>*{min-width:0}
  /* Same trap, every other grid on the site: `1fr` is minmax(auto,1fr) and the
     auto floor is min-content, so one unwrappable flex row inside a card sets the
     whole column's width. Every grid gets minmax(0,1fr) and every grid child
     min-width:0, or the scroll containers below never get a chance to scroll. */
  .g3,.promo,.ann,.grid2,.grid4{grid-template-columns:minmax(0,1fr)}
  /* .sumgrid is the exception: the model page's five-metric row steps
     5 -> 2 -> 1, not 5 -> 1. Folding it into the single-column rule above
     silently deleted the 2-column step between 700px and 1000px. */
  .sumgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .g3>*,.promo>*,.ann>*,.grid2>*,.grid4>*,.sumgrid>*,.card{min-width:0}
  /* The chart title row and control row are flex with no wrap; on a phone they
     are the widest thing in the card and would otherwise set its min-content. */
  .ctitle,.cbar,.chead{flex-wrap:wrap}
  .ctitle{row-gap:4px}
  /* Selects and inputs must never set the page width. */
  select,input,textarea{max-width:100%}
  .sel,.ctrl{flex-wrap:wrap}
}

/* Motion: the drawer and the jump chevron are the only new transitions, and both
   must stop under prefers-reduced-motion -- the field-notes strip already does. */
@media(prefers-reduced-motion:reduce){
  .drawer,.dov,.jump>summary:after{transition:none}
}

/* Order matters: this must follow the max-width:1000px block above, or the
   2-column rule there wins at every width below 700px too and the final
   single-column step never happens. Both blocks match at 360px; the later one
   applies. Keeping it last is the whole reason it works. */
@media(max-width:700px){
  .sumgrid{grid-template-columns:minmax(0,1fr)}
  /* Two hardcoded 1.55fr/1fr grids (model page Summary + Technical specs, and the
     comparison-page equivalent) matched no responsive selector, so at 360px they
     stayed two columns of roughly 190px and 120px. They cause no PAGE overflow,
     which is exactly why the scrollWidth measurement never flagged them. */
  .split{grid-template-columns:minmax(0,1fr)}
}