:root{
  --bg:#070a14; --panel:#0f1525; --panel2:#141c30; --line:#1f2942;
  --ink:#e8ecf6; --dim:#7d89a8; --faint:#4a5675;
  --purple:#b14bff; --green:#27e08a; --amber:#ffb02e; --red:#ff3b5c; --blue:#3aa0ff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* every chart canvas handles its own drag-to-pan; pan-y keeps the page's vertical
   scroll working over them on touch instead of the browser fighting our JS for the
   gesture (default touch-action would let the browser try to pan/zoom the canvas). */
canvas{touch-action:pan-y}
body{background:var(--bg);color:var(--ink);font-family:"JetBrains Mono",monospace;font-size:13px;
  display:grid;grid-template-rows:auto 1fr;height:100vh;overflow:hidden}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:0}
h1,h2,h3,.dsp{font-family:"Saira Condensed",sans-serif;letter-spacing:.04em;margin:0}

/* header timing strip */
header{display:flex;align-items:stretch;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0c1322,#070a14)}
.brand{display:flex;align-items:center;gap:14px;padding:0 20px;border-right:1px solid var(--line)}
.brand .dot{width:12px;height:12px;background:var(--red);box-shadow:0 0 14px var(--red);transform:skewX(-12deg)}
.brand b{font-family:"Saira Condensed";font-weight:700;font-size:22px;letter-spacing:.12em;text-transform:uppercase}
.brand span{color:var(--dim);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.stat{display:flex;flex-direction:column;justify-content:center;padding:6px 22px;border-right:1px solid var(--line);min-width:96px}
.stat .k{font-family:"Saira Condensed";font-weight:700;font-size:26px;line-height:1}
.stat .l{color:var(--faint);font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin-top:3px}
.stat.p .k{color:var(--purple)} .stat.g .k{color:var(--green)} .stat.a .k{color:var(--amber)} .stat.b .k{color:var(--blue)}
/* transparent on desktop — .stat stays a direct flex item of header, unchanged
   layout. Mobile below turns this into its own grid instead. */
.stats{display:contents}

main{display:grid;grid-template-columns:188px 1fr;overflow:hidden}
nav{border-right:1px solid var(--line);background:var(--panel);padding:14px 0;display:flex;flex-direction:column;gap:2px}
nav button{all:unset;cursor:pointer;padding:10px 20px;color:var(--dim);font-family:"Saira Condensed";
  font-weight:600;font-size:16px;letter-spacing:.08em;text-transform:uppercase;border-left:3px solid transparent;display:flex;gap:10px;align-items:center}
nav button:hover{color:var(--ink);background:#0c1322}
nav button.on{color:var(--ink);border-left-color:var(--purple);background:#0c1322}
nav .num{margin-left:auto;font-family:"JetBrains Mono";font-size:11px;color:var(--faint)}
nav .sep{height:1px;background:var(--line);margin:10px 16px}
nav button.locked{opacity:.4}
nav button .lock{margin-left:6px;font-size:11px}

/* member-gate auth widget + locked-tab banner */
.auth{display:flex;align-items:center;gap:12px;padding:0 20px}
.btn{background:var(--purple);color:#fff;border:0;cursor:pointer;padding:8px 16px;
  font-family:"Saira Condensed";font-weight:700;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.15)}
.btn.out{background:var(--panel2);color:var(--dim)}
.auth .who{color:var(--dim);font-size:11.5px}
.gate{max-width:480px;margin:60px auto;text-align:center;background:var(--panel);
  border:1px solid var(--line);border-top:2px solid var(--purple);padding:34px 30px}
.gate h2{font-family:"Saira Condensed";font-size:22px;margin-bottom:10px;color:var(--ink)}
.gate p{color:var(--dim);line-height:1.6;margin-bottom:20px}

.view{overflow:auto;padding:22px 26px}
.view.solo{position:fixed;inset:0;z-index:40;background:var(--bg)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
select,input[type=text]{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  font-family:"JetBrains Mono";font-size:12px;padding:7px 10px;outline:none}
input[type=text]{min-width:240px} select:focus,input:focus{border-color:var(--purple)}
.pill{font-size:11px;color:var(--dim);padding:7px 4px}
.toolbar button{background:var(--purple);color:#fff;border:0;cursor:pointer;padding:8px 18px;
  font-family:"Saira Condensed";font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.toolbar button:hover{filter:brightness(1.15)}
.subnav{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line)}
.subnav button{all:unset;cursor:pointer;padding:9px 16px;color:var(--dim);font-family:"Saira Condensed";
  font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav button:hover{color:var(--ink)}
.subnav button.on{color:var(--ink);border-bottom-color:var(--purple)}
.subnav button.hide{display:none}
.subnav button.gated{cursor:not-allowed;opacity:.35}
.subnav button.gated:hover{color:var(--dim)}
.subnav-sep{width:1px;background:var(--line);margin:6px 10px;align-self:stretch;flex:none}
.xlink{color:var(--faint);font-size:11px;font-weight:400;letter-spacing:0;text-decoration:none;white-space:nowrap;opacity:.7;transition:opacity .15s}
.xlink:hover{opacity:1;color:var(--purple);text-decoration:underline}

/* sector status dot */
.sdot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.s-verified{background:var(--green);box-shadow:0 0 8px var(--green)}
.s-single_source{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.s-disputed{background:var(--red);box-shadow:0 0 8px var(--red)}
.s-unverified{background:var(--faint)}

.row{display:grid;grid-template-columns:14px 1fr auto;gap:14px;align-items:center;padding:11px 14px;
  border:1px solid var(--line);border-left:0;border-right:0;border-top:0;background:var(--panel)}
.row:hover{background:var(--panel2)}
.row:nth-child(even){background:#0c1322}.row:nth-child(even):hover{background:var(--panel2)}
.claim{line-height:1.45}
.meta{color:var(--faint);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;margin-top:3px}
.meta b{color:var(--dim);font-weight:500}
.conf{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:104px}
.conf .v{font-family:"Saira Condensed";font-weight:700;font-size:17px}
.bar{width:96px;height:4px;background:var(--line)}.bar i{display:block;height:100%}

/* cards grid for patterns / domains */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--line);padding:15px 16px}
.card .cat{font-family:"Saira Condensed";font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.card .txt{margin:10px 0;line-height:1.5}
.card .ft{display:flex;justify-content:space-between;color:var(--faint);font-size:11px;border-top:1px solid var(--line);padding-top:9px;margin-top:4px}
.tag{display:inline-block;background:var(--panel2);border:1px solid var(--line);color:var(--dim);
  padding:2px 7px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.star{color:var(--purple);font-weight:700}

/* overview */
.ovgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.dombar{display:flex;align-items:center;gap:10px;margin:7px 0}
.dombar .lab{width:170px;color:var(--dim);font-size:11px;text-align:right;text-transform:uppercase;letter-spacing:.06em}
.dombar .track{flex:1;height:13px;background:var(--line)}.dombar .track i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--purple))}
.dombar .n{width:42px;color:var(--ink);font-weight:700;font-family:"Saira Condensed";font-size:15px}
.panel{background:var(--panel);border:1px solid var(--line);padding:16px 18px}
.panel h3{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--panel2);border:1px solid var(--line);padding:6px 11px;display:flex;gap:8px;align-items:center}
/* driver-selection chip — team colour arrives per-chip via --c (a real hex, not a
   CSS var: team colours aren't part of the 12-var theme). off = outline, on = filled.
   Used by driverChips() everywhere a driver picker appears (Analysis filter,
   Telemetry quick-pick, long-run grid). */
.chip.drv{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.04em;
  padding:4px 9px;cursor:pointer;border:1px solid var(--c,var(--line));background:transparent;
  color:var(--ink);opacity:.55}
.chip.drv.on{background:var(--c,var(--line));color:#0a0e18;opacity:1}
.chip.drv:hover{opacity:1}
/* Analysis driver filter: nothing picked yet = every chip reads bright (it's not
   filtering anything), not just the ones with .on */
.chips.all .chip.drv{opacity:1}
.chip b{font-family:"Saira Condensed";font-size:16px}

/* docs */
.docwrap{display:grid;grid-template-columns:300px 1fr;gap:0;height:100%}
.doclist{border-right:1px solid var(--line);overflow:auto;padding-right:6px}
.docgroup{font-family:"Saira Condensed";font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple);font-size:12px;padding:12px 6px 6px;position:sticky;top:0;background:var(--bg)}
.docitem{padding:6px 10px;color:var(--dim);cursor:pointer;border-left:2px solid transparent;font-size:11.5px;word-break:break-all}
.docitem:hover{color:var(--ink);background:var(--panel)}
.docitem.on{color:var(--ink);border-left-color:var(--purple);background:var(--panel)}
.docview{overflow:auto;padding:6px 30px 60px}
.md{max-width:820px;line-height:1.65}
.md h1,.md h2,.md h3{font-family:"Saira Condensed";margin:1.3em 0 .5em;letter-spacing:.02em}
.md h1{font-size:30px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:.2em}
.md h2{font-size:22px;color:var(--purple)} .md h3{font-size:17px;color:var(--blue)}
.md code{background:var(--panel2);padding:1px 5px;color:var(--green)}
.md pre{background:var(--panel);border:1px solid var(--line);padding:14px;overflow:auto}
.md table{border-collapse:collapse;width:100%;margin:1em 0}
.md th,.md td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.md th{background:var(--panel2);font-family:"Saira Condensed";letter-spacing:.08em;text-transform:uppercase}
.md a{color:var(--blue)} .md blockquote{border-left:3px solid var(--purple);margin:1em 0;padding-left:14px;color:var(--dim)}
.empty{color:var(--faint);text-align:center;padding:60px;font-size:13.5px}
.loading{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--dim);padding:50px;font-size:12px}
.spin{width:18px;height:18px;flex:none;border:2px solid var(--line);border-top-color:var(--purple);border-radius:50%;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* Every stats table in Telemetry/Analysis shares one base — .tbl — with a .cmp
   modifier for the one table that wants a full cell grid + a colour-swatch input
   in its header (the sector/speed-trap comparison; formerly its own .sect class).
   Everything else (formerly .dist) is the plain row-separator look.
   The modifier used to be called .grid, which silently inherited the cards
   `.grid{display:grid}` rule above and broke the table into detached thead/tbody
   boxes — never name a table modifier after a layout class. */
.tbl{border-collapse:collapse;font:12px "JetBrains Mono",monospace;white-space:nowrap;min-width:100%}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:5px 12px;text-align:right}
.tbl th{font-family:"Saira Condensed";letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--dim)}
.tbl tbody tr:hover{background:var(--panel2)}
.tbl .d{color:var(--dim);font-size:12px}

/* The table sizes to its own content — `display:table` and `min-width:0` undo
   the two rules it would otherwise inherit (.grid's display:grid, .tbl's
   min-width:100%), and the wrapper scrolls it instead of the page when the
   viewport is narrower than the metric labels. */
.cmpwrap{overflow-x:auto;margin:0 0 14px}
.tbl.cmp{display:table;width:auto;min-width:0;max-width:100%;margin:0;
  background:var(--panel);border:1px solid var(--line)}
.tbl.cmp th,.tbl.cmp td{border:1px solid var(--line);padding:5px 14px}
.tbl.cmp td:first-child,.tbl.cmp th:first-child{text-align:left;color:var(--dim);text-transform:uppercase;font-size:10.5px;letter-spacing:.08em}
.tbl.cmp th{letter-spacing:.1em;font-size:13.5px}
.tbl.cmp th input.csw{width:13px;height:13px;padding:0;margin-right:7px;vertical-align:-1px;
  border:1px solid var(--line);background:none;cursor:pointer}
.tbl.cmp th input.csw::-webkit-color-swatch-wrapper{padding:0} .tbl.cmp th input.csw::-webkit-color-swatch{border:0}

/* lap-time grid (long-run pace matrix) */
.lgwrap{overflow:auto;max-height:76vh;border:1px solid var(--line);margin-bottom:16px;background:var(--panel)}
.lapgrid{border-collapse:collapse;font:13.5px "JetBrains Mono",monospace;white-space:nowrap}
.lapgrid td,.lapgrid th{border:1px solid var(--line);padding:4px 10px;text-align:center;min-width:76px;font-variant-numeric:tabular-nums}
.lapgrid thead th{position:sticky;top:0;z-index:2;font-family:"Saira Condensed";font-size:16px;letter-spacing:.04em;padding:6px 10px}
.lapgrid .lp{position:sticky;left:0;background:var(--panel2);color:var(--faint);text-align:center;z-index:1;min-width:40px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}
.lapgrid thead .lp{z-index:3}
/* tyre = thin sub-label strip hugging the driver header (hierarchy: name > compound > laps) */
.lapgrid tr.tyre td{padding:1px 8px;font-size:10.5px;letter-spacing:.1em;border-top:none;border-bottom:2px solid var(--line)}
.lapgrid tr.sum td{font-weight:700;font-size:16px;line-height:1.3}
.lapgrid tr.sum{border-top:2px solid var(--line)}

/* telemetry + analysis: one panel shell, one ghost button, one type scale
   (10.5 / 12 / 13.5 / 16 / 22 — nothing in those two views sits off it) */
.pnl{background:var(--panel);border:1px solid var(--line);padding:14px 16px 12px;
  margin-bottom:14px;position:relative}
.pnl.wide{}   /* legacy hook — panels are no longer width-capped, so this is a no-op */
.pnl>h4{font-family:"Saira Condensed";font-weight:700;font-size:22px;letter-spacing:.06em;margin:0 0 10px;padding-right:86px}

/* ── panel grid ────────────────────────────────────────────────────────────
   Panels used to stack one per row under a 1500px cap, which on a wide monitor
   left a dead column on the right AND made a tab of four 22-row bar charts four
   separate scrolls. Now each section is a grid that takes as many columns as the
   window can hold. The per-panel host divs are `display:contents` (.flow) so the
   real grid items are the `.pnl` boxes themselves however deeply they're nested —
   render functions keep appending into their own host and know nothing about this.
   560px is the floor at which a 22-driver bar chart with a name and a time column
   is still readable; below that the grid drops to one column on its own. */
.pgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(560px,1fr));align-items:start}
.flow{display:contents}
.pgrid .pnl{margin-bottom:0;min-width:0}
/* Panels wide enough to deserve the whole row (dense tables, the track map, the
   race trace) plus the non-panel things that land in the grid — control bars,
   empty/loading states — which are always full-bleed.
   Descendant, not child: `>` matches the DOM tree, and a .flow host is
   display:contents — its children are grid ITEMS but not DOM children of the
   grid, so `.pgrid>.ctlbar` never matches them. grid-column on something that
   isn't a grid item (a .ctlbar nested inside a panel) is simply ignored, so the
   looser selector is safe. */
.pgrid .pnl.full,.pgrid .ctlbar,.pgrid .empty,.pgrid .loading{grid-column:1/-1}
/* half-and-half: a panel that wants more than a column but not the whole row.
   Falls back to the full row once the grid is down to two columns or fewer. */
.pgrid .pnl.span2{grid-column:span 2}
@media (max-width:1300px){.pgrid .pnl.span2{grid-column:1/-1}}
/* One panel blown up to the whole grid — click its ⛶ button or press F. order:-1
   floats it to the top of the section so it isn't stranded mid-scroll.
   The title is plain text: it is not a maximize target, so it gets no
   zoom cursor and stays selectable. */
.pnl.focus{grid-column:1/-1;order:-1;border-color:var(--purple)}

/* ── sticky control bar ────────────────────────────────────────────────────
   Section tabs + session picker + conditions + driver filter pin to the top of
   the scrolling view. Negative margins cancel .view's padding so the bar is
   full-bleed and nothing shows through above it while panels scroll under.
   top matches the negative top margin on purpose: sticky parks the MARGIN box
   at `top`, so with top:0 the -22px margin left a 22px slot above the bar that
   scrolled content showed through. -22px puts the border box flush at 0. */
.stickybar{position:sticky;top:-22px;z-index:9;background:var(--bg);
  margin:-22px -26px 16px;padding:16px 26px 0;border-bottom:1px solid var(--line)}
.stickybar>.subnav{margin-bottom:12px}
.stickybar>.toolbar{margin-bottom:8px}
.stickybar>.drvfold{margin:0 0 8px}
.stickybar>:last-child{margin-bottom:10px}

/* ── cross-panel driver highlight ──────────────────────────────────────────
   CLICK a driver in any panel and everyone else dims, everywhere, until you
   click them again or press Escape. It used to follow the pointer, which meant
   the screen was dimmed the whole time you were reading it. Done with ONE
   injected rule against [data-drv] rather than a class toggle per row, so a
   pick costs a single stylesheet write no matter how many panels are on screen.
   Canvases can't be dimmed by CSS — they register a redraw with hlCanvas(). */
.hlrow{transition:opacity .09s linear;cursor:pointer}
.pnl>.sub{color:var(--dim);font-size:12px;line-height:1.6;max-width:88ch;margin:-4px 0 12px}
/* race pace: fixed field-wide headline strip (fastest / most consistent / spread) */
.rp-summary{display:flex;flex-wrap:wrap;margin:0 0 14px;border:1px solid var(--line);background:var(--bg)}
.rp-summary>div{flex:1;min-width:150px;padding:10px 14px;border-left:1px solid var(--line)}
.rp-summary>div:first-child{border-left:0}
.rp-summary .l{color:var(--faint);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.rp-summary .v{font-family:"Saira Condensed";font-weight:700;font-size:19px}
.rp-summary .s{color:var(--dim);font-size:11px;margin-top:2px}
/* race pace table: delta-vs-fastest read as a number plus a proportional bar */
.rp-delta{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.rp-delta>span:first-child{width:56px}
.rp-delta .bar{width:60px;height:5px;background:var(--line);display:inline-block}
.rp-delta .bar>i{display:block;height:100%;background:var(--purple)}
.gbtn{background:var(--panel2);color:var(--dim);border:1px solid var(--line);cursor:pointer;
  font:12px "JetBrains Mono",monospace;padding:7px 10px}
.gbtn.cnr{position:absolute;right:10px;top:10px;z-index:3;padding:2px 7px}
/* the maximize (⛶ / ❐) button sits immediately left of the ⋯ overflow button */
.gbtn.cnr.cnr2{right:44px;font-size:13px;line-height:1}
.gbtn.cnr:hover{color:var(--ink);border-color:var(--purple)}
.pnl.focus>.gbtn.cnr2{color:var(--purple);border-color:var(--purple)}
/* anBox's single overflow menu — every panel export (PNG, TSV, …) registers a row
   here instead of stamping its own corner button, so a panel with several exports
   still shows one ⋯ in the corner. */
.pnlmenu{position:absolute;right:10px;top:34px;z-index:5;display:none;flex-direction:column;
  min-width:130px;background:var(--panel2);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.pnlmenu.on{display:flex}
.pnlmenu-item{all:unset;box-sizing:border-box;width:100%;cursor:pointer;padding:8px 12px;
  color:var(--dim);font:12px "JetBrains Mono",monospace;white-space:nowrap}
.pnlmenu-item:hover{color:var(--ink);background:var(--panel)}
/* built by innerHTML, so there is no <thead> to hang this on. --stick is the
   measured height of the pinned control bar (stickyBar()), so a header parks
   just under it rather than sliding behind it. */
.tbl tr:first-child th{position:sticky;top:var(--stick,0px);background:var(--panel);z-index:2}
/* A long table scrolls inside its panel instead of pushing everything below it
   off the screen. Its header then sticks to this box, not the page, so --stick
   (which offsets against the pinned control bar) must not apply.
   Same for ANY wrapper with overflow — even overflow-x only (.cmpwrap, .tblbox):
   it becomes the table's scrollport, and a top:--stick there pushed the header
   row bodily DOWN into the middle of the table, over the rows it labels. Every
   scrolling table wrapper must therefore carry one of these classes. */
.tallwrap{max-height:62vh;overflow:auto}
.tallwrap .tbl tr:first-child th,
.cmpwrap .tbl tr:first-child th,
.tblbox .tbl tr:first-child th{top:0}

/* Analysis's driver filter — collapsed by default so the picked-drivers chip wall
   isn't chrome you scroll past before the chart. The summary line is the whole
   point: it reads "8 of 20 shown" without opening anything. */
.drvfold{margin:2px 0 16px}
.drvfold summary{cursor:pointer;color:var(--dim);font-size:12px;padding:6px 2px;list-style:revert}
.drvfold summary b{color:var(--ink);font-weight:700}
.drvfold summary .cnt{color:var(--dim)}
.drvfold[open] summary{margin-bottom:4px}
.chipsrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:4px}

/* Panel control row — the "pick a compound / metric / min-laps" bar every
   Analysis panel puts above its chart, and its checkbox labels. Was ~15 near-
   identical style.cssText blocks; now one class + a descendant rule. */
.ctlbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.ctlbar label{display:flex;gap:5px;align-items:center;color:var(--dim);font-size:12px;cursor:pointer;white-space:nowrap}
/* gap bars — one row per driver. Approach B layout:
   [Rank] [Driver] [Raw Time/Value] [Track with bar + inline delta]
   Keeping the theme dark with subtle vertical reference grid lines,
   placing the delta directly at the bar tip for instant reading. */
.gbrow{display:grid;grid-template-columns:22px 38px 64px 1fr;gap:7px;align-items:center;padding:2.5px 0}
.gbrow .rk{color:var(--faint);font-size:12px;text-align:right}
.gbrow .nm{font-weight:700;font-size:12px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbrow .raw{font-size:12px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.gbrow .raw .u{color:var(--dim);font-size:10px;margin-left:2px}
.gbrow .tk{height:15px;background-color:#0d1424;background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px);background-size:25% 100%;border-radius:2px;position:relative;min-width:0}
.gbrow .tk i{display:block;height:100%;border-radius:2px}
.gbrow .tk .delta{position:absolute;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;color:var(--amber);white-space:nowrap;line-height:1}
.gbrow .tk .delta.lead{color:var(--faint);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.gbrow.lead .tk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--purple);border-radius:2px 0 0 2px}
/* Chart legend row — swatch + label, under a canvas */
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12px;color:var(--dim);align-items:center}
/* Small dim helper text under a panel title/table */
.note{color:var(--faint);font-size:12px;line-height:1.5;margin:-4px 0 12px}
/* Compact label:value pair — result rows, race-control rows, weekend overview */
.kv{display:flex;align-items:center;gap:8px;padding:2.5px 0;font-size:12px}

/* sector comparison table header ref badge & set ref button */
.ref-tag-btn{all:unset;cursor:pointer;font-family:"Saira Condensed";font-size:11px;padding:1px 5px;margin-left:6px;
  background:var(--panel2);border:1px solid var(--line);color:var(--dim);vertical-align:1px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ref-tag-btn:hover{color:var(--ink);border-color:var(--purple)}
.ref-tag{font-family:"Saira Condensed";font-size:11px;padding:1px 5px;margin-left:6px;background:var(--purple);color:#fff;vertical-align:1px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.cmp th .x-btn{all:unset;cursor:pointer;color:var(--faint);font-size:11px;padding:0 3px;margin-left:4px;vertical-align:1px}
.cmp th .x-btn:hover{color:var(--red)}

/* ── narrow screens ────────────────────────────────────────────────────────
   A sanity pass, not a mobile-first redesign. Members are the public face and
   arrive from a phone, so the job is: nothing off-screen, nothing unreadable,
   and the page never scrolls sideways — dense panels scroll inside themselves.
   Below 760px the 188px sidebar is half a phone, so the nav goes on top.
   The header's own breakpoint is wider (826px): brand + six stat tiles + auth
   don't fit a flex row below that even while the sidebar still has room, which
   tests/integration/test_layout_regression.py caught as a 761-825px sideways-overflow gap
   the 390px-only mobile pass never exercised. */
@media (max-width:826px){
  /* brand + auth share the top row; the six stat tiles drop below as a compact
     3x2 grid instead of a sideways-scrolling strip — nothing is ever off-screen. */
  header{flex-wrap:wrap}
  .brand{padding:0 12px;flex:none;order:1}
  .brand b{font-size:18px}
  .auth{padding:0 12px;flex:none;order:2;margin-left:auto!important}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;order:3;border-top:1px solid var(--line)}
  .stat{padding:6px 4px;min-width:0;flex:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line);align-items:center;text-align:center}
  .stat:nth-child(3n){border-right:0}
  .stat .k{font-size:18px}
  .stat .l{font-size:9px}
}
@media (max-width:760px){
  /* minmax(0,1fr), not 1fr: a plain fr track is minmax(auto,1fr) and a wide chart
     blows the column past the viewport, which is what makes the toolbar and
     header run off the right edge instead of wrapping */
  main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .view{min-width:0}
  nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);
    padding:0;gap:0;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav button{padding:11px 14px;border-left:0;border-bottom:3px solid transparent;white-space:nowrap;flex:none}
  nav button.on{border-left-color:transparent;border-bottom-color:var(--purple)}
  nav .num{margin-left:6px}
  nav .sep{display:none}

  .view{padding:14px 12px}
  /* one column, and the sticky bar would eat half a phone screen — let the
     chrome scroll away and give the panels the whole viewport */
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .stickybar{position:static;margin:0 0 12px;padding:0;border-bottom:0}
  .tbl tr:first-child th{top:0}   /* nothing is pinned here, so --stick doesn't apply */
  .pnl{padding:12px 12px 10px}
  .pnl>h4{font-size:18px}
  /* the corner export buttons are the one thing allowed to sit over a title */
  .pnl>h4{padding-right:76px}
  /* a wide table scrolls in its own box rather than widening the page. Scoped to
     table wrappers: a blanket overflow rule would clip the absolutely-positioned
     tooltips that live inside the canvas panels. (.grid and .ovgrid already
     collapse on their own — they are auto-fill minmax.) */
  .pnl>div:has(>table){overflow-x:auto}
  .docwrap{grid-template-columns:1fr;height:auto}
  .doclist{border-right:0;border-bottom:1px solid var(--line);max-height:38vh}
  input[type=text]{min-width:0;width:100%}
  .toolbar{gap:8px}
}

/* modal */
.modal{position:fixed;inset:0;background:rgba(3,6,14,.82);display:none;align-items:center;justify-content:center;z-index:50}
.modal.on{display:flex}
.sheet{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--purple);max-width:760px;width:90%;max-height:84vh;overflow:auto;padding:22px 26px}
.sheet pre{font-size:11.5px;line-height:1.55;color:var(--dim);white-space:pre-wrap;word-break:break-word}
.cnr-bars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;margin-top:16px}
.cnr-deg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.cnr-gbrow{display:grid;grid-template-columns:22px 38px 64px 1fr;gap:7px;align-items:center;padding:2.5px 0}
.cnr-gbrow.is-team{grid-template-columns:22px minmax(80px,110px) 64px 1fr}
.cnr-gbrow .rk{color:var(--faint);font-size:12px;text-align:right}
.cnr-gbrow .nm{font-weight:700;font-size:12px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnr-gbrow .raw{font-size:12px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.cnr-gbrow .raw .u{color:var(--dim);font-size:10px;margin-left:2px}
.cnr-gbrow .tk{height:15px;background-color:#0d1424;background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px);background-size:25% 100%;border-radius:2px;position:relative;min-width:0}
.cnr-gbrow .tk i{display:block;height:100%;border-radius:2px}
.cnr-gbrow .tk .delta{position:absolute;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;color:var(--amber);white-space:nowrap;line-height:1}
.cnr-gbrow .tk .delta.lead{color:var(--faint);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.cnr-gbrow.lead .tk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--purple);border-radius:2px 0 0 2px}