/* Cockpit web app, Pit wall direction. Part 1: layout mechanics. Part 2: Pit wall look. Part 3: sections. */
/* Layout mechanics shared by every direction. Looks live in each direction's own stylesheet. */
:root{
  --qb:#9647B8;--rb:#15997E;--wr:#E67E22;--te:#2980B9;
  --font:system-ui,sans-serif;--font-display:var(--font);--font-num:var(--font);
  --rail-w:184px;--insp-w:440px;--row-h:30px;--radius:4px;--gap:10px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:12px/1.35 var(--font);font-variant-numeric:tabular-nums;overflow:hidden}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:var(--font-display);margin:0}
.n{text-align:right}.dim{color:var(--dim)}.strong{font-weight:600}
.up{color:var(--up)}.down{color:var(--down)}
.of{color:var(--dim);font-size:.9em;margin-left:3px;font-weight:400}
.phone-only{display:none}

.mark{display:inline-flex;align-items:flex-end;gap:2px;height:22px}
.mark i{width:6px;border-radius:1.5px;display:block}
.mark .q{height:11px;background:var(--qb)}.mark .r{height:16px;background:var(--rb)}.mark .w{height:22px;background:var(--wr)}.mark .t{height:13px;background:var(--te)}
.brand{display:flex;align-items:center;gap:9px}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.01em}
.pos{display:inline-block;min-width:27px;text-align:center;font-size:10px;font-weight:700;color:#fff;border-radius:3px;padding:1px 3px;margin-right:6px;line-height:1.3}
.QB{background:var(--qb)}.RB{background:var(--rb)}.WR{background:var(--wr)}.TE{background:var(--te)}.FLEX{background:#6b7789}
.avail{font-size:9.5px;font-weight:600;margin-left:6px;padding:0 4px;border-radius:2px;border:1px solid var(--down);color:var(--down)}
.avail.questionable{border-color:var(--accent);color:var(--accent)}

/* app frame */
.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);height:100vh}
.rail{display:flex;flex-direction:column;min-height:0;overflow:auto}
.rail .brand{padding:16px 16px 14px}
.nav{display:flex;flex-direction:column}
.navlink{display:block;padding:8px 16px;color:var(--ink);text-decoration:none;cursor:pointer;line-height:1.3}
.navlink.later{color:var(--dim)}
.navlink.disabled{cursor:not-allowed;opacity:.65}
.navlink small{display:block;font-size:10px;color:var(--dim)}
.navgrp{padding:16px 16px 4px;color:var(--dim);font-size:10.5px}
.railfoot{margin-top:auto;padding:12px 16px;display:flex;flex-direction:column;gap:4px;font-size:10.5px;color:var(--muted)}
.fresh{display:flex;align-items:center;gap:6px;line-height:1.4}
.fresh.warn{color:var(--down)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--up);display:inline-block}
.themebtn{margin-top:8px;align-self:flex-start;background:none;border:1px solid var(--rule);color:var(--muted);border-radius:var(--radius);padding:3px 8px;font-size:10.5px}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.strip{display:flex;align-items:stretch;flex-shrink:0}
.metrics{display:flex;flex:1;min-width:0}
.metric{display:flex;flex-direction:column;justify-content:center;padding:9px 20px 9px 16px;min-width:0}
.mlabel{font-size:10.5px;color:var(--dim);white-space:nowrap;display:flex;align-items:center;gap:6px}
.mvalue{font-family:var(--font-num);font-size:20px;font-weight:700;line-height:1.15;white-space:nowrap}
.mof{font-size:12px;color:var(--dim);font-weight:400;margin-left:4px}
.msub{font-size:10.5px;color:var(--muted);white-space:nowrap}
.filters{display:flex;align-items:center;gap:10px;padding:0 14px}
.fl{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--dim)}
select,input.search{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);padding:4px 7px;font-size:11.5px;color:var(--ink)}
input.search{width:190px}
input.search::placeholder{color:var(--dim)}
.disclaimer{padding:5px 14px;font-size:10.5px;color:var(--muted);flex-shrink:0}
.tag{display:inline-block;font-size:9.5px;font-weight:600;line-height:1.3;padding:0 5px;border-radius:2px;border:1px solid var(--accent);color:var(--accent);vertical-align:middle;white-space:nowrap}
.tag.warn{border-color:var(--down);color:var(--down)}
.work{flex:1;display:grid;grid-template-columns:minmax(0,1fr) var(--insp-w);gap:var(--gap);padding:0 var(--gap) var(--gap);min-height:0}
.work.single{grid-template-columns:1fr}
.pane{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.scroll{overflow:auto;flex:1;min-height:0}
.lensbar{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.lenses{display:inline-flex;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.lens{border:0;background:transparent;padding:5px 12px;color:var(--muted);border-right:1px solid var(--rule)}
.lens:last-child{border-right:0}
.lens.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.seg button{border:0;background:transparent;padding:4px 9px;color:var(--muted);border-right:1px solid var(--rule)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--ink);color:var(--bg);font-weight:600}
.lensnote{margin-left:auto;color:var(--dim);font-size:10.5px;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--rule);background:var(--panel2);border-radius:12px;padding:2px 9px;margin:2px 4px 2px 0;cursor:pointer;font-size:11px;white-space:nowrap}
.chip b{color:var(--dim);font-weight:500;margin-left:2px}
.chip i{font-style:normal;color:var(--dim)}
.chip.on{background:var(--sel);border-color:var(--accent)}
.chip .pos{margin-right:2px}

/* tables */
table.grid{border-collapse:collapse;width:100%}
.grid th{position:sticky;top:0;z-index:1;background:var(--panel2);text-align:left;font-weight:600;font-size:10.5px;color:var(--muted);padding:7px 8px;border-bottom:1px solid var(--rule);white-space:nowrap;cursor:pointer;user-select:none}
.grid th.sorted{color:var(--ink)}
.grid th i{font-style:normal;font-size:8px;margin-left:4px}
.grid td{padding:0 8px;height:var(--row-h);border-bottom:1px solid var(--rule);white-space:nowrap;vertical-align:middle}
.grid tr.row{cursor:pointer}
.grid tr.row:hover td{background:var(--hover)}
.grid tr.sel td{background:var(--sel)}
.grid tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.grid tr.group td{height:24px;background:var(--panel2);color:var(--muted);font-size:10.5px;font-weight:600}
.grid tr.group em{font-style:normal;font-weight:400;color:var(--dim);margin-left:8px}
.grid td.withheld{color:var(--muted);text-align:left}
.grid td.chev{color:var(--dim);width:22px}
.bar{display:inline-block;width:56px;height:6px;background:var(--rule);vertical-align:middle;margin-right:8px;border-radius:1px;position:relative;overflow:hidden}
.bar::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--muted)}
.eid{font-weight:600;font-family:var(--font-num)}
.fav{font-style:normal;color:var(--accent);margin-right:4px}
.nick,.tourn{color:var(--dim);font-size:10.5px;margin-left:7px}
.adv.yes{color:var(--up);font-weight:600}.adv.no{color:var(--dim)}
.margin{font-family:var(--font-num);font-weight:600}
.pname{font-weight:500}

/* inspector */
.ihead{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.ihead h3{font-size:14px;display:flex;align-items:center}
.ihead .count{color:var(--dim);font-size:11px}
.linkbtn{background:none;border:0;color:var(--accent);padding:0;font-size:11.5px}
.ihead .linkbtn:not(.back){margin-left:auto}
.ihead .back{order:-1;width:100%;text-align:left;margin-bottom:2px}
.hint{padding:20px 16px;color:var(--muted);line-height:1.5}
.hint p{margin:0 0 10px}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px 12px;padding:10px 12px;border-bottom:1px solid var(--rule);background:var(--panel2)}
.kv div>span{display:block;color:var(--dim);font-size:10px;white-space:nowrap}
.kv div>b{font-size:13px;font-family:var(--font-num);white-space:nowrap}
.kv .tag{margin-left:4px}
.mates{padding:7px 12px;border-bottom:1px solid var(--rule)}
.mlbl{display:block;color:var(--dim);font-size:10px;margin-bottom:3px}
.sect{display:flex;align-items:baseline;gap:8px;padding:6px 12px;background:var(--panel2);font-weight:600;font-size:11px;color:var(--muted);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sect em{font-style:normal;font-weight:400;color:var(--dim)}
.grid.lineup td,.grid.pod td{height:26px}
.grid.lineup .slot{width:44px;color:var(--dim);font-size:10.5px;font-weight:600}
.grid.pod tr.me td{background:var(--sel);font-weight:600}
.grid.pod tr.cutline td{height:16px;padding:0;background:transparent;border-bottom:0;position:relative}
.grid.pod tr.cutline span{position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--down);font-size:0}
.grid.pod tr.cutline span::after{content:"cut · top 2 advance";position:absolute;right:8px;top:-8px;font-size:9.5px;color:var(--down);background:var(--panel);padding:0 4px}
.notice{margin:10px 12px;padding:10px 12px;border-radius:var(--radius);border:1px solid var(--rule);line-height:1.45;color:var(--muted)}
.notice.warn{border-color:var(--down)}
.notice b{color:var(--ink)}
.placeholder{padding:40px 48px;max-width:640px}
.placeholder h2{font-size:26px;margin:10px 0 12px}
.placeholder p{line-height:1.55;margin:0 0 10px;font-size:13px}

/* phone */
.phonebar{display:none}
@media (max-width:760px){
  :root{--row-h:36px}
  body{overflow:auto}
  .phone-only{display:inline-block}
  .phonebar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:5}
  .phonebar .fresh{margin-left:auto;color:var(--dim);font-size:10.5px}
  .phonebar .themebtn{margin:0}
  .app{display:block;height:auto;padding-bottom:64px}
  .rail{position:fixed;left:0;right:0;bottom:0;height:56px;flex-direction:row;overflow:visible;z-index:6;border-top:1px solid var(--rule);background:var(--panel)}
  .rail .brand,.navgrp,.nav.later,.railfoot{display:none}
  .rail .nav{flex-direction:row;width:100%}
  .navlink{flex:1;text-align:center;font-size:10px;padding:10px 2px;display:flex;align-items:center;justify-content:center;line-height:1.2}
  .strip{flex-direction:column}
  .metrics{overflow-x:auto;padding:0 6px}
  .metric{padding:10px 12px;flex:0 0 auto}
  .filters{padding:0 14px 8px;gap:8px}
  .filters select{max-width:150px}
  .work{display:block;padding:0 12px}
  .pane.table-pane{border-radius:var(--radius)}
  .pane .scroll{overflow:auto;max-height:none}
  .lensnote{width:100%;margin-left:0}
  input.search{flex:1;min-width:0}
  .insp{position:fixed;left:0;right:0;bottom:0;top:12vh;z-index:7;transform:translateY(110%);transition:transform .25s ease;border-radius:12px 12px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.35)}
  body.insp-open .insp{transform:none}
  .grid.players th:nth-child(n+6),.grid.players td:nth-child(n+6){display:none}
  .grid.rosters.wide th:nth-child(n+6),.grid.rosters.wide td:nth-child(n+6){display:none}
  .grid.rosters.wide th:nth-child(8),.grid.rosters.wide td:nth-child(8){display:table-cell}
  .placeholder{padding:24px 16px}
}
@media (prefers-reduced-motion:reduce){.insp{transition:none}}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- Pit wall look ---------- */

/* Direction 4 · Pit wall. Motorsport timing-tower vernacular: a session header that says where we are in the
   round (week 1 of 14), position boxes, and sector colours on the gap to the cut. Black screen, cyan selection. */
:root{
  --font:"Titillium Web","Segoe UI",system-ui,sans-serif;--font-display:"Titillium Web",sans-serif;--font-num:"Titillium Web",sans-serif;
  --bg:#0B0C0F;--panel:#131519;--panel2:#1A1D23;--rule:#272B33;--ink:#F4F5F7;--muted:#A2A8B3;--dim:#6F7682;
  --accent:#00D1FF;--accent-ink:#00222B;--up:#27E07D;--down:#FF5252;--sel:rgba(0,209,255,.12);--hover:rgba(255,255,255,.035);
  --s-purple:#B34DFF;--s-green:#27E07D;--s-yellow:#FFE44D;--s-grey:#3A3F48;
  --radius:2px;--row-h:28px;--rail-w:176px;--insp-w:450px;
}
:root[data-theme=light]{
  --bg:#E4E6EA;--panel:#FAFAFB;--panel2:#EEF0F3;--rule:#C9CED6;--ink:#121418;--muted:#4E5661;--dim:#7B8290;
  --accent:#007FA3;--accent-ink:#fff;--up:#128A4E;--down:#C7342C;--sel:rgba(0,127,163,.12);--hover:rgba(0,0,0,.03);
  --s-purple:#8A2BE2;--s-green:#1DB865;--s-yellow:#E6C500;--s-grey:#C3C8D0;
}
body{font-size:12px}
.rail{background:var(--bg);border-right:1px solid var(--rule)}
.rail .brand{padding:14px 16px 12px}
.wordmark{text-transform:uppercase;letter-spacing:.12em;font-size:15px}
.navlink{text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:600;padding:8px 16px 8px 22px;position:relative}
.navlink.on{color:var(--ink)}
.navlink.on::before{content:"";position:absolute;left:12px;top:9px;bottom:9px;width:3px;background:var(--accent)}
.navgrp{text-transform:uppercase;letter-spacing:.12em;font-size:9.5px}
.railfoot{border-top:1px solid var(--rule);text-transform:uppercase;letter-spacing:.05em;font-size:9.5px}
.strip{background:#000;color:#fff;border-bottom:1px solid var(--rule);height:58px;align-items:center;padding-left:0}
:root[data-theme=light] .strip{background:#1A1D23}
.session{display:flex;flex-direction:column;justify-content:center;padding:0 18px;border-right:1px solid #2A2E36;height:100%;min-width:220px}
.session .rd{font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.1em;line-height:1.2}
.session .rd b{color:var(--accent)}
.session .segs{display:flex;gap:2px;margin-top:5px}
.session .segs i{flex:1;height:5px;background:#2A2E36;border-radius:1px}
.session .segs i.done{background:var(--accent)}
.session .segs i.now{background:#fff}
.session .wk{font-size:9.5px;color:#9AA0AB;text-transform:uppercase;letter-spacing:.1em;margin-top:3px}
.metrics{gap:0}
.metric{padding:0 20px;border-right:1px solid #2A2E36;height:100%;justify-content:center}
.mlabel{color:#9AA0AB;text-transform:uppercase;letter-spacing:.1em;font-size:9.5px}
.mvalue{font-size:21px;font-weight:700;color:#fff}
.mof{color:#9AA0AB}
.msub{color:#7C838E;font-size:10px}
.metric.up .mvalue{color:var(--s-green)}.metric.down .mvalue{color:var(--down)}
.filters{color:#fff}
.fl span{color:#9AA0AB;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px}
.strip select{background:#1A1D23;color:#fff;border-color:#2A2E36}
.disclaimer{font-size:10.5px}
.lensbar{background:var(--panel)}
.lens{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;font-weight:600;padding:5px 12px}
.seg button{text-transform:uppercase;font-weight:600;font-size:10.5px}
.grid th{text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;font-weight:600;background:var(--panel)}
.grid td.n{font-weight:600}
.grid.rosters td:nth-child(3){font-weight:700}
.posbox{display:inline-block;min-width:26px;text-align:center;background:#fff;color:#000;font-weight:700;border-radius:2px;padding:0 4px;font-size:12px}
:root[data-theme=light] .posbox{background:#121418;color:#fff}
.posbox.adv{background:var(--s-green);color:#052}
.sector{display:inline-block;min-width:56px;text-align:right;padding:1px 7px;border-radius:2px;font-weight:700;background:var(--s-grey);color:#fff}
.sector.green{background:var(--s-green);color:#052e1a}
.sector.yellow{background:var(--s-yellow);color:#3d3300}
.sector.purple{background:var(--s-purple);color:#fff}
.sector.red{background:var(--down);color:#fff}
.grid.narrow .sector{min-width:48px}
.grid tr.group td{background:var(--panel2);text-transform:uppercase;letter-spacing:.1em;font-size:9.5px;font-weight:700;color:var(--ink)}
.grid tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.bar::after{background:var(--accent)}
.adv.yes{color:var(--s-green)}
.eid{font-weight:700}
.chip{border-radius:2px;text-transform:uppercase;font-size:10px;letter-spacing:.04em}
.chip .pname{text-transform:none}
.insp .ihead{background:var(--panel)}
.ihead h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.kv div>span,.sect,.mlbl{text-transform:uppercase;letter-spacing:.1em;font-size:9px}
.kv div>b{font-size:14px;font-weight:700}
.grid.pod td:first-child{width:36px}
.grid.pod tr.me td{background:var(--sel);color:var(--accent);font-weight:700}
.grid.pod tr.cutline span{border-top:2px solid var(--s-yellow)}
.grid.pod tr.cutline span::after{content:"CUT · TOP 2 ADVANCE";color:var(--s-yellow);letter-spacing:.1em;font-weight:700}
.legend{display:flex;gap:12px;align-items:center;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.placeholder h2{text-transform:uppercase;letter-spacing:.06em}
@media (max-width:760px){.strip{height:auto;flex-direction:column;align-items:stretch}.session{padding:8px 14px;border-right:0;border-bottom:1px solid #2A2E36;min-width:0}.metric{height:auto;padding:8px 14px}.filters{padding:6px 14px 8px}}

/* ---------- sections ---------- */
.page{flex:1;min-height:0;overflow:auto;padding:0 var(--gap) var(--gap)}
.page-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:14px 4px 10px}
.page-head h2{font-size:20px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.page-head p{margin:0;color:var(--muted);max-width:70ch}
.page-head .ctl{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.cols-lineup{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--gap)}
.pane.static{overflow:visible}
.pane .phead{display:flex;align-items:baseline;gap:10px;padding:9px 12px;border-bottom:1px solid var(--rule);text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;font-weight:700}
.pane .phead em{font-style:normal;font-weight:400;color:var(--dim);text-transform:none;letter-spacing:0;font-size:11px}
.pane .phead .r{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400;color:var(--dim);font-size:11px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap);margin-bottom:var(--gap)}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);padding:10px 14px}
.card .l{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:9.5px;color:var(--dim);white-space:nowrap}
.card .v{display:block;font-size:22px;font-weight:700;line-height:1.2;margin:2px 0}
.card .v .of{font-size:12px}
.card .s{display:block;font-size:10.5px;color:var(--muted)}
.card.up .v{color:var(--s-green)}.card.down .v{color:var(--down)}
.card.na .v{color:var(--dim)}
.why{color:var(--dim);font-size:10.5px}
.slot{width:44px;color:var(--dim);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.grid.lineup2 td{height:34px}
.grid.lineup2 .why{display:block;line-height:1.2}
.skip{color:var(--s-yellow);font-size:10.5px}
.note{padding:10px 12px;color:var(--muted);line-height:1.5;border-top:1px solid var(--rule)}
.note b{color:var(--ink)}
.presets{display:inline-flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.presets button{border:0;background:transparent;padding:4px 11px;color:var(--muted);border-right:1px solid var(--rule);text-transform:uppercase;font-weight:600;font-size:10.5px;letter-spacing:.06em}
.presets button:last-child{border-right:0}
.presets button.on{background:var(--accent);color:var(--accent-ink)}
.btn{border:1px solid var(--rule);background:var(--panel2);color:var(--ink);border-radius:2px;padding:5px 12px;text-transform:uppercase;font-weight:600;font-size:10.5px;letter-spacing:.06em}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{background:transparent}
/* charts */
.chart{padding:12px 14px 8px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--font);fill:var(--muted);font-size:10px}
.chart .axis{stroke:var(--rule);stroke-width:1}
.chart .gridline{stroke:var(--rule);stroke-width:1;stroke-dasharray:2 3}
.chart .cbar{fill:var(--accent)}
.chart .cbar.ghost{fill:none;stroke:var(--rule);stroke-dasharray:3 3}
.chart .cbar.cut{fill:var(--s-green)}
.chart .cbar.out{fill:var(--s-grey)}
.chart .baseline{stroke:var(--s-yellow);stroke-width:2;stroke-dasharray:6 4}
.chart .lbl{fill:var(--ink);font-weight:600}
.chart .lbl.y{fill:var(--s-yellow)}
.chart .hit{fill:transparent}
.chart .hit:hover+.cbar,.chart .cbar:hover{opacity:.8}
.tip{position:fixed;pointer-events:none;background:var(--ink);color:var(--bg);padding:4px 8px;border-radius:2px;font-size:11px;font-weight:600;z-index:20;transform:translate(-50%,-130%);white-space:nowrap}
.legend2{display:flex;gap:14px;padding:0 14px 10px;font-size:10.5px;color:var(--dim)}
.legend2 i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.legend2 i.ghost{border:1px dashed var(--rule)}
/* stacks */
.stack{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.stack .plus{color:var(--dim);margin:0 2px}
.stack .team{margin-left:6px;color:var(--dim);font-size:10.5px}
.flag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:0 5px;border-radius:2px;background:var(--s-purple);color:#fff;margin-left:6px}
/* reserved */
.reserved{max-width:980px}
.reserved .ghost{opacity:.55}
.reserved .needs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap);margin-top:var(--gap)}
.reserved .needs .card .v{font-size:13px;font-weight:600;color:var(--ink);white-space:normal;line-height:1.4}
.accounts .grid td{height:36px}
.pill{display:inline-block;border:1px solid var(--rule);border-radius:10px;padding:1px 8px;font-size:10.5px;color:var(--muted)}
.pill.ok{border-color:var(--s-green);color:var(--s-green)}
.pill.soon{border-color:var(--s-purple);color:var(--s-purple)}
.more{padding:8px 0}
.more a{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;font-size:13px}
.more a small{color:var(--dim)}
.more a.disabled{color:var(--dim)}
@media (max-width:1100px){.cols2,.cols3,.cols-lineup{grid-template-columns:1fr}}
@media (max-width:760px){.page{padding:0 12px 12px}.page-head h2{font-size:17px}.page-head .ctl{margin-left:0}.cards{grid-template-columns:1fr 1fr}.nav.later{display:none}}
.navlink.more{display:none}
@media (max-width:760px){.navlink.more{display:flex}.rail .nav .navlink:not(.ph){display:none}}
.lbl-ph{display:none}
@media (max-width:760px){.navlink .lbl-full{display:none}.navlink .lbl-ph{display:inline}.navlink{font-size:10.5px}}
/* diverging exposure bar around the 1-of-12 baseline */
.xcell{white-space:nowrap}
.xbar{display:inline-block;position:relative;width:72px;height:8px;vertical-align:middle;margin-right:8px;background:var(--panel2);border-radius:1px}
.xbar .mid{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--muted)}
.xbar .fill{position:absolute;top:1px;bottom:1px;border-radius:1px}
.xbar .fill.over{left:50%;background:var(--s-green)}
.xbar .fill.under{right:50%;background:var(--down)}
.xval{font-weight:600;display:inline-block;min-width:44px;text-align:right}
.xval.over{color:var(--s-green)}.xval.under{color:var(--down)}
.kv .xval{min-width:0}
.pbar{display:inline-block;width:70px;height:8px;background:var(--panel2);vertical-align:middle;margin-right:8px;border-radius:1px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--accent)}
.navlink.disabled{cursor:pointer;opacity:.75}
@media (max-width:760px){.grid.players th:nth-child(5),.grid.players td:nth-child(5){display:table-cell}}

/* ---------- round 3 ---------- */
/* Tables grow to their content and scroll inside the pane instead of squeezing columns into each other. */
table.grid{width:max-content;min-width:100%}
.grid th.c,.grid td.c{text-align:center}
.grid th.n i{margin-left:3px}
.grid th .tag{margin-left:3px;font-size:8.5px}
body.insp-entry{--insp-w:560px}
.tm{display:inline-block;min-width:34px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:2px;background:var(--tc);color:var(--tt);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);vertical-align:middle;line-height:1.4}
:root[data-theme=light] .tm{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
/* cut margin shades: two hues, a grey middle */
.mg{display:inline-block;min-width:52px;text-align:right;padding:1px 7px;border-radius:2px;font-weight:700}
.mg.g3{background:#1DB865;color:#052e1a}.mg.g2{background:rgba(29,184,101,.55);color:#dfffe9}.mg.g1{background:rgba(29,184,101,.25);color:#8fe7b5}
.mg.n0{background:rgba(160,168,180,.18);color:var(--muted)}
.mg.r1{background:rgba(255,82,82,.22);color:#ffb0b0}.mg.r2{background:rgba(255,82,82,.5);color:#ffe3e3}.mg.r3{background:#E03C3C;color:#fff}
:root[data-theme=light] .mg.g2{color:#0a4a2a}:root[data-theme=light] .mg.g1{color:#0f6b3d}:root[data-theme=light] .mg.r1{color:#8a1f1f}:root[data-theme=light] .mg.r2{color:#5c0d0d}
.legend .mg{min-width:0;padding:0;width:12px;height:12px;display:inline-block;vertical-align:-2px;margin-right:3px}
.legend em{font-style:normal;color:var(--dim)}
.legend span{white-space:nowrap}
/* mini balance and health in rows */
.bal{display:inline-flex;gap:2px;height:16px;align-items:center;position:relative;padding:0 2px}
.bal::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule)}
.bal i{display:block;width:7px;height:14px;position:relative;background:transparent}
.bal i::after{content:"";position:absolute;left:0;right:0;background:currentColor;top:var(--t);height:var(--h)}
.bal i.QB{color:var(--qb)}.bal i.RB{color:var(--rb)}.bal i.WR{color:var(--wr)}.bal i.TE{color:var(--te)}
.hbar{display:inline-block;width:44px;height:6px;background:rgba(255,82,82,.45);vertical-align:middle;margin-right:6px;border-radius:1px;overflow:hidden}
.hbar i{display:block;height:100%;background:var(--s-green)}
/* inspector sections */
.scroll.wide .kv{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.stages{padding:6px 12px 8px;display:grid;gap:4px}
.stage{display:grid;grid-template-columns:56px 120px 48px 1fr;align-items:center;gap:8px}
.stage .l{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:10px}
.stage b{text-align:right}
.balance{padding:6px 12px 8px}
.brow{display:grid;grid-template-columns:30px 26px 1fr 96px 82px;align-items:center;gap:8px;height:26px}
.brow .cnt{color:var(--dim);font-size:10.5px}
.brow .segs{position:relative;height:9px;background:repeating-linear-gradient(90deg,var(--panel2) 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);border-radius:1px}
.brow .segs .mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:var(--ink);margin-left:-1px}
.brow .segs .fill{position:absolute;top:0;bottom:0}
.brow .segs .fill.over{background:var(--s-green)}
.brow .segs .fill.under{background:var(--down)}
.brow .val{text-align:right;font-weight:700;line-height:1.1}
.brow .val small{display:block;font-size:8.5px;letter-spacing:.08em;font-weight:700}
.brow .cap{text-align:right;font-size:10.5px}
.brow .cap small{color:var(--dim)}
.cols2.tight{gap:0;padding:0 6px}
.chart.small{padding:6px 8px}
.chart .ct{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.chart .dot{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.chart .ghostaxis{stroke:var(--rule);stroke-dasharray:3 3}
.chart text.ghost{fill:var(--rule)}
.squad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 12px}
.squad .colh{display:flex;align-items:center;gap:4px;margin-bottom:4px}
.squad .cnt{color:var(--dim);font-size:10.5px}
.sq{display:flex;align-items:center;gap:4px;padding:3px 5px;margin-bottom:3px;background:var(--panel2);border-radius:2px;font-size:11px;white-space:nowrap;overflow:hidden}
.sq .nm{flex:1;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.sq.st .nm{font-weight:700;color:var(--ink)}
.sq.hl{box-shadow:inset 0 0 0 1px var(--accent)}
.sq .tm{min-width:0;padding:0 4px;font-size:9px}
.sq .pt{color:var(--dim);font-size:10px;min-width:26px;text-align:right}
.sq .avail{margin-left:0;padding:0 3px}
.stacklist{padding:6px 12px}
.stacklist .stack{padding:3px 0}
/* stack hub */
.hub{padding:10px 12px}
.hubqb{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--panel2);border-radius:2px;margin-bottom:8px;font-size:13px}
.hubrow{display:grid;grid-template-columns:190px 1fr 64px 64px 56px 64px;align-items:center;gap:8px;height:30px;border-bottom:1px solid var(--rule)}
.hubrow.none{opacity:.6}
.hubrow .n{text-align:right;font-weight:700;line-height:1.05}
.hubrow .n small{display:block;font-size:9px;color:var(--dim);font-weight:400;letter-spacing:.04em}
.hubrow .both{color:var(--s-green)}
.hubrow .rconly{color:var(--muted)}
.sbar{display:flex;height:10px;background:var(--panel2);border-radius:1px;overflow:hidden}
.sbar i{display:block;height:100%}
.sbar .both{background:var(--s-green)}
.sbar .rconly{background:var(--s-grey);margin-left:2px}
.themebtn.on{border-color:var(--accent);color:var(--accent)}
@media (max-width:1100px){.hubrow{grid-template-columns:150px 1fr 56px 56px 48px 56px}}
@media (max-width:760px){.squad{grid-template-columns:1fr 1fr}.hubrow{grid-template-columns:1fr 60px 50px 50px;height:auto;padding:4px 0}.hubrow .sbar,.hubrow .dim{display:none}.brow{grid-template-columns:30px 26px 1fr 80px}.brow .cap{display:none}}

/* strip never overlaps: metrics keep their width and scroll if the screen is narrow */
.metrics{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.metric{flex:0 0 auto}
.session{flex:0 0 auto}
.filters{flex:0 0 auto}
/* inspector width follows what it is showing */
body:not(.insp-open) .work{grid-template-columns:minmax(0,1fr) 260px}
body.insp-open .work{grid-template-columns:minmax(0,1fr) 440px}
body.insp-entry .work{grid-template-columns:minmax(0,1fr) 560px}
@media (max-width:1500px){body.insp-open .work{grid-template-columns:minmax(0,1fr) 400px}body.insp-entry .work{grid-template-columns:minmax(0,1fr) 500px}.grid td{padding:0 6px}.grid th{padding:7px 6px}}
@media (max-width:760px){body:not(.insp-open) .work,body.insp-open .work,body.insp-entry .work{display:block}}
@media (max-width:1500px){.metric{padding:0 12px}.msub{display:none}.session{min-width:0;padding:0 12px}.mvalue{font-size:18px}}
.squad{grid-template-columns:repeat(4,minmax(0,1fr))}
.insp table.grid{width:100%}
.insp .scroll{overflow-x:hidden}
.stacklist .stack{gap:6px;padding:4px 0;border-bottom:1px solid var(--rule)}
.hubrow{grid-template-columns:150px minmax(80px,1fr) 52px 52px 46px 52px;gap:6px}
@media (max-width:1100px){.hubrow{grid-template-columns:130px minmax(60px,1fr) 48px 48px 40px 48px}}
.cols-lineup.stackspage{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}

/* alignment: headers sit over the numbers, not over the suffix */
.grid th.n i{margin:0 3px 0 0}
.frac .of{display:inline-block;width:30px;text-align:left;margin-left:3px}
.grid th.frac{padding-right:39px}
.kv div>span{white-space:normal;line-height:1.3}
.kv .tag{display:inline-block}
/* five-step balance in position colours */
.bal{gap:3px;height:16px;align-items:flex-end}
.bal::before{display:none}
.bal i{width:6px;height:15px;background:var(--panel2);border-radius:1px;position:relative;overflow:hidden}
.bal i::after{content:"";position:absolute;left:0;right:0;bottom:0;top:auto;height:var(--h);background:currentColor}
.five{display:flex;gap:3px;height:12px}
.five i{flex:1;background:var(--panel2);border-radius:1px}
.five.QB i.on{background:var(--qb)}.five.RB i.on{background:var(--rb)}.five.WR i.on{background:var(--wr)}.five.TE i.on{background:var(--te)}
.brow{grid-template-columns:30px 26px 1fr 110px 82px}
.brow .val{text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.brow .val small{text-transform:none;letter-spacing:0;color:var(--dim);font-weight:400;font-size:10px}
.fivekey{display:grid;grid-template-columns:repeat(5,1fr);margin:2px 0 0 64px;width:calc(100% - 64px - 8px - 110px - 8px - 82px);font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.fivekey span{text-align:center}
/* squad chips wear the position colour; bench is the tint */
.sq{color:#fff;background:var(--pc)}
.sq.QB{--pc:var(--qb)}.sq.RB{--pc:var(--rb)}.sq.WR{--pc:var(--wr)}.sq.TE{--pc:var(--te)}
.sq .nm{color:#fff;font-weight:600}
.sq:not(.st){background:color-mix(in srgb,var(--pc) 22%,var(--panel2))}
.sq:not(.st) .nm{color:var(--ink);font-weight:500}
.sq .pt{color:rgba(255,255,255,.85)}
.sq:not(.st) .pt{color:var(--dim)}
.sq .tm{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.sq.hl{box-shadow:inset 0 0 0 2px #fff}
@media (max-width:760px){.brow{grid-template-columns:30px 26px 1fr 100px}.fivekey{width:calc(100% - 64px - 8px - 100px)}}

.squad{grid-template-columns:repeat(3,minmax(0,1fr))}
.squad .gap{height:8px}
.fivekey{font-size:8px;letter-spacing:.02em}
.grid td.c .of{margin-left:2px}
@media (max-width:760px){.squad{grid-template-columns:1fr 1fr}}
/* numeric headers were losing to .grid th{text-align:left}; state it at the same specificity, later */
.grid th.n{text-align:right}
.grid th.c{text-align:center}
.grid th:not(.n):not(.c){text-align:left}

/* ---------- web app: theme follows the system until chosen; gate card ---------- */
:root{color-scheme:dark}
:root[data-theme=light]{color-scheme:light}
@media (prefers-color-scheme:light){
  :root:not([data-theme=dark]){
    --bg:#E4E6EA;--panel:#FAFAFB;--panel2:#EEF0F3;--rule:#C9CED6;--ink:#121418;--muted:#4E5661;--dim:#7B8290;
    --accent:#007FA3;--accent-ink:#fff;--up:#128A4E;--down:#C7342C;--sel:rgba(0,127,163,.12);--hover:rgba(0,0,0,.03);
    --s-purple:#8A2BE2;--s-green:#1DB865;--s-yellow:#E6C500;--s-grey:#C3C8D0;color-scheme:light}
  :root:not([data-theme=dark]) .strip{background:#1A1D23}
  :root:not([data-theme=dark]) .posbox{background:#121418;color:#fff}
  :root:not([data-theme=dark]) .tm{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
}
select option{background:var(--panel);color:var(--ink)}
body{overflow:auto}
body:has(#root:not(:empty)){overflow:hidden}
.gate{display:grid;place-items:center;min-height:100vh;padding:24px;background:var(--bg)}
.gate[hidden]{display:none}
.gate .card{width:100%;max-width:400px;text-align:center;background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:32px 26px}
.gate h1{font-size:20px;margin:12px 0 6px;letter-spacing:.04em;text-transform:uppercase}
.gate .sub{margin:0 0 18px;color:var(--muted);font-size:13.5px}
.gate button{width:100%;font:600 14px/1 var(--font);padding:13px 16px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;text-transform:uppercase;letter-spacing:.06em}
.gate button[data-act=signout],.gate button[onclick]{width:auto;display:inline-block;background:transparent;color:var(--muted);border-color:var(--rule);padding:8px 12px;font-size:11px}
.gate .msg{margin:14px 0 0;font-size:13px}
.gate .msg.bad{color:var(--down)}
.gate .fine{margin:18px 0 0;font-size:11.5px;color:var(--dim);line-height:1.5}
.tm.none{background:var(--panel2);color:var(--dim)}
.kv small.why{display:block;font-size:10px;color:var(--dim);white-space:normal;line-height:1.3}
.rd small{font-size:9px;color:var(--s-yellow);letter-spacing:.1em;vertical-align:middle}
.dot.bad{background:var(--down)}
.chart .dot.partial{fill:var(--panel);stroke:var(--accent)}

/* numbers centred (Jacob, 2026-09-19) */
.grid th.n,.grid td.n{text-align:center}
.frac .of{width:auto}
.grid th.frac{padding-right:8px}
/* team logos */
.tm{background:none;box-shadow:none;padding:0;min-width:0;display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:10px;letter-spacing:.04em}
.tlogo{width:18px;height:18px;object-fit:contain;vertical-align:middle}
.sq .tm{gap:2px}.sq .tlogo{width:14px;height:14px}.sq .tabbr{display:none}
.hubqb .tm,.stack .tm{gap:3px}
:root[data-theme=light] .tm{box-shadow:none}
/* balance: five cells the score pours across, par tick, position colour at partial opacity */
.seg5{display:flex;gap:3px;height:9px;position:relative}
.seg5 i{flex:1;border-radius:3px;background:var(--panel2);position:relative;overflow:hidden}
.seg5 i b{position:absolute;left:0;top:0;bottom:0;background:var(--sc);opacity:.85}
.seg5 u{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:var(--ink);margin-left:-1px;opacity:.7}
.seg5.QB{--sc:var(--qb)}.seg5.RB{--sc:var(--rb)}.seg5.WR{--sc:var(--wr)}.seg5.TE{--sc:var(--te)}
.brow .val{font-size:15px;letter-spacing:0}
.fivekey{grid-template-columns:repeat(5,1fr) 0;position:relative}
.fivekey span{text-align:left}
.fivekey .end{position:absolute;right:0;top:0}
.seg5.QB,.seg5.RB,.seg5.WR,.seg5.TE{background:none}
.bal i.QB,.bal i.RB,.bal i.WR,.bal i.TE{background:var(--panel2)}