/* W30 Phase A (Sage 10-10) · Brett picked Pixel's mockups A/B/C (02_Build\Websites\lab_niftiiq\W30_flow\). Clubhouse:
   Black #070D12 / Green #0B1A26 / Cream #E6F1F7 / Amber #3DD6F5; Oswald headings, JetBrains Mono numbers. */
:root{--w30-bg:#070D12;--w30-card:#0F1B24;--w30-line:#1F303C;--w30-cream:#E6F1F7;--w30-dim:#8CA3B3;--w30-amber:#3DD6F5;--w30-green:#0B1A26;--w30-ok:#76DAA8;--w30-bad:#e07a6a;--w30-mono:'JetBrains Mono',ui-monospace,monospace;--w30-cond:'Oswald','Arial Narrow',sans-serif}
.w30-card{background:var(--w30-card);border:1px solid var(--w30-line);border-radius:14px;padding:16px 18px;margin:0 0 14px;color:var(--w30-cream)}
.w30-k{font:500 11px/1.3 var(--w30-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--w30-dim)}
.w30-s{font:500 12.5px/1.35 var(--w30-mono);color:var(--w30-dim)}
.w30-h{font:600 17px/1.2 Sora,system-ui,sans-serif;margin:0;color:var(--w30-cream)}
.w30-h2{font:700 26px/1 var(--w30-cond);text-transform:uppercase;letter-spacing:.01em;margin:0;color:var(--w30-cream)}
.w30-ch{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.w30-yt{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--w30-amber);color:#070D12;font:600 11px/1.5 var(--w30-mono);text-transform:uppercase;letter-spacing:.05em;vertical-align:middle}
h1 .w30-yt{font-size:12px;margin-left:8px}
/* Why? */
.w30-why{margin:4px 0 0;font-size:13px;color:var(--w30-dim)}
.w30-why summary{cursor:pointer;display:inline-block;list-style:none;font:500 11.5px var(--w30-mono);color:var(--w30-amber);text-decoration:underline;text-underline-offset:3px;min-height:24px;padding:3px 0}
.w30-why summary::-webkit-details-marker{display:none}
.w30-why p{margin:4px 0 0;max-width:60ch;line-height:1.45}
/* Top card (C #2) */
.w30-top{display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:16px;align-items:start}
.w30-rank{display:grid;gap:4px}
.w30-big{font:700 54px/1 var(--w30-cond);color:var(--w30-cream)}
.w30-big small{font:500 22px var(--w30-mono);color:var(--w30-dim);margin-left:4px}
.w30-odds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.w30-odds>div{display:grid;justify-items:center}
.w30-ring{position:relative;display:grid;justify-items:center;gap:4px}
.w30-ring svg{display:block}
.w30-ring-bg{fill:none;stroke:#20313D;stroke-width:6}
.w30-ring-fg{fill:none;stroke:var(--w30-amber);stroke-width:6;stroke-linecap:round}
.w30-ring-n{position:absolute;top:0;left:0;right:0;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 21px/1 var(--w30-mono);color:var(--w30-cream)}
.w30-ring-n .w30-pc{display:flex;align-items:baseline}
.w30-ring-n small{font-size:12px;font-weight:500}
.w30-ring--clinched .w30-ring-bg{stroke:var(--w30-ok);stroke-width:3}.w30-ring--clinched .w30-ring-n{color:var(--w30-ok)}.w30-ring--clinched .w30-ring-n small,.w30-ring--out .w30-ring-n small{font:600 9.5px/1.2 var(--w30-mono);letter-spacing:.06em;text-transform:uppercase}
.w30-ring--out .w30-ring-bg{stroke:var(--w30-bad);stroke-width:3}.w30-ring--out .w30-ring-n{color:var(--w30-bad);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.w30-rl{font:600 13.5px Sora,system-ui,sans-serif;color:var(--w30-cream)}
/* Finish strip (C #3) */
.w30-tog{display:inline-flex;border:1px solid var(--w30-line);border-radius:9px;overflow:hidden}
.w30-tog button{all:unset;cursor:pointer;padding:7px 11px;font:500 12.5px Sora,system-ui,sans-serif;color:var(--w30-dim);min-height:20px}
.w30-tog button[aria-selected="true"]{background:var(--w30-cream);color:#070D12;font-weight:600}
.w30-tog button[disabled]{cursor:default}
.w30-fin{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin:6px 0 2px}
.w30-fcw{display:grid;gap:3px;justify-items:stretch;text-align:center;min-width:0}
.w30-flab{font:500 9.5px/1.2 var(--w30-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--w30-dim);min-height:12px}
.w30-fc{display:grid;place-items:center;height:46px;border-radius:8px;font:600 14px var(--w30-mono)}
.w30-fc.on{--a:.62;background:rgba(233,188,110,var(--a));color:#070D12}
.w30-fc.off{border:1px dashed #33424D;color:#546C7E;background:transparent}
.w30-fc.now{outline:2px solid var(--w30-cream);outline-offset:2px}
.w30-fc.cut{box-shadow:5px 0 0 -2px var(--w30-amber)}
.w30-fn{font:500 11.5px var(--w30-mono);color:var(--w30-dim)}
.w30-fkey{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 0;font:500 11.5px var(--w30-mono);color:var(--w30-dim)}
.w30-fkey span{display:inline-flex;align-items:center;gap:6px}
.w30-fk{display:inline-block;width:13px;height:10px;border-radius:3px}.w30-fk.off{border:1px dashed #33424D}.w30-fk.cutk{width:3px;background:var(--w30-amber)}
/* Next game + season line (C #4, #5) */
.w30-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.w30-next{display:grid;gap:8px;text-decoration:none!important}
.w30-nt{font:600 20px Sora,system-ui,sans-serif;color:var(--w30-cream)}
.w30-wb{display:flex;height:34px;border-radius:7px;overflow:hidden;font:700 13px var(--w30-mono)}
.w30-wb-me{display:flex;align-items:center;padding:0 10px;background:var(--w30-amber);color:#070D12;white-space:nowrap}
.w30-wb-op{flex:1;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;background:#2D5663;color:var(--w30-cream);white-space:nowrap}
.w30-chips{display:flex;flex-wrap:wrap;gap:6px}
.w30-chip{border:1px solid var(--w30-line);border-radius:999px;padding:4px 10px;font-size:12.5px;color:var(--w30-cream)}
.w30-nf{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--w30-cream)}
.w30-free{border:1px solid var(--w30-amber);color:var(--w30-amber);border-radius:5px;padding:1px 6px;font:500 10.5px var(--w30-mono);text-transform:uppercase}
.w30-go{margin-left:auto;color:var(--w30-amber);font-weight:600}
.w30-sv{width:100%;height:auto;display:block}
.w30-gl{stroke:#20313D;stroke-width:1;stroke-dasharray:3 3}
.w30-ax{font:500 9px var(--w30-mono);fill:var(--w30-dim)}
.w30-pl{fill:none;stroke:var(--w30-amber);stroke-width:2}
.w30-pd{fill:var(--w30-amber)}
.w30-lv{font:600 11px var(--w30-mono);fill:var(--w30-ok)}
.w30-foot{margin:2px 0 12px;font:500 13px Sora,system-ui,sans-serif;color:var(--w30-dim)}
/* Hub (B) */
.w30-hero{font:700 clamp(38px,7vw,64px)/.95 var(--w30-cond)!important;text-transform:uppercase;letter-spacing:.005em;margin:8px 0 12px!important}
.w30-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.w30-chiprow a{display:inline-flex;align-items:center;gap:6px;border:1px solid #303F49;border-radius:999px;padding:6px 12px;font:500 13.5px Sora,system-ui,sans-serif;color:var(--w30-cream);text-decoration:none!important;min-height:24px}
.w30-chiprow i{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid var(--w30-cream);border-radius:50%;font:600 11px var(--w30-mono)}
.w30-secH{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.w30-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.w30-g{flex:0 0 190px;scroll-snap-align:start;display:grid;gap:5px;align-content:start;background:var(--w30-card);border:1px solid var(--w30-line);border-radius:12px;padding:11px 12px;text-decoration:none!important;color:var(--w30-cream)}
.w30-g--miss{border-color:var(--w30-amber)}
.w30-gt{display:flex;justify-content:space-between;gap:8px;font:600 14.5px Sora,system-ui,sans-serif}.w30-gt b{font-family:var(--w30-mono)}
.w30-gt.w b{color:var(--w30-amber)}
.w30-tag{display:inline-block;justify-self:start;border:1px solid #303F49;border-radius:5px;padding:1px 7px;font:500 10.5px/1.5 var(--w30-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--w30-dim)}
.w30-tag--amber{border-color:var(--w30-amber);color:var(--w30-amber)}
.w30-tag--in{border-color:var(--w30-ok);color:var(--w30-ok)}.w30-tag--out{border-color:var(--w30-bad);color:var(--w30-bad)}
.w30-btn{justify-self:start;margin-top:4px;display:inline-block;background:var(--w30-cream);color:#070D12!important;border-radius:8px;padding:7px 11px;font:600 13px Sora,system-ui,sans-serif;text-decoration:none!important}
.w30-ctl{display:flex;flex-wrap:wrap;gap:16px;background:var(--w30-card);border:1px solid var(--w30-line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.w30-ctl>div{display:grid;gap:6px;justify-items:start}
.w30-legend{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 2px;font:500 11.5px var(--w30-mono);color:var(--w30-dim)}
.w30-legend span{display:inline-flex;align-items:center;gap:6px}
.w30-q{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid #3E505C;font:600 11px var(--w30-mono);color:var(--w30-cream);margin-right:8px;flex:0 0 auto}
.w30-br.in .w30-q,.w30-legend .w30-q{background:var(--w30-amber);border-color:var(--w30-amber);color:#070D12}
.w30-cutk{display:inline-block;width:18px;border-top:1px dashed var(--w30-amber)}
.w30-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr));gap:14px;margin-top:12px}
.w30-div{background:var(--w30-card);border:1px solid var(--w30-line);border-radius:14px;overflow:hidden}
.w30-divh{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--w30-line)}
.w30-divh b{font:600 16px Sora,system-ui,sans-serif;color:var(--w30-amber)}.w30-divh a{text-decoration:none!important}
.w30-divh .w30-k{margin-left:auto}
.w30-bh,.w30-br{display:grid;grid-template-columns:minmax(0,1fr) 46px 120px 72px;gap:8px;align-items:center;padding:0 14px}
.w30-bh{min-height:28px;font:500 10px var(--w30-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--w30-dim)}
.w30-br{min-height:46px;border-top:1px solid var(--w30-line);color:var(--w30-cream);text-decoration:none!important}
.w30-br.cut{border-bottom:1px dashed var(--w30-amber)}
.w30-br.me{box-shadow:inset 4px 0 0 var(--w30-amber);background:rgba(61,214,245,.06)}
.w30-bn{display:flex;align-items:center;min-width:0;font:600 14.5px Sora,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w30-bn .w30-yt{margin-left:6px;font-size:9.5px}
.w30-num{font:500 13px var(--w30-mono)}
.w30-bf{display:flex;align-items:center;gap:6px}
.w30-bo{text-align:right}
.w30-mb{display:inline-flex;gap:2px}
.w30-mb i{display:block;width:7px;height:14px;border-radius:2px;background:#1F303C}
.w30-mb i.on{--a:.62;background:rgba(233,188,110,var(--a))}
.w30-mb i.now{outline:1.5px solid var(--w30-cream);outline-offset:1px}
.w30-rg{font:500 11.5px var(--w30-mono);color:var(--w30-dim)}
.w30-pk{font:700 14px var(--w30-mono);color:var(--w30-cream)}
.w30-plus{margin:12px 0 0;font-size:13.5px;color:var(--w30-dim)}
@media (max-width:760px){
 .w30-ring-n{height:72px}
 .w30-top{grid-template-columns:1fr}.w30-two{grid-template-columns:1fr}
 .w30-big{font-size:46px}.w30-ring svg{width:72px;height:72px}.w30-ring-n{height:72px;font-size:18px}
 .w30-fc{height:38px;font-size:11.5px}.w30-fin{gap:4px}
 .w30-bh,.w30-br{grid-template-columns:minmax(0,1fr) 34px 52px 76px;gap:6px;padding:0 10px}
 .w30-legend{gap:6px 12px;font-size:11px}
 .w30-tag{font-size:9.5px;padding:1px 5px}
 .w30-mb{display:none}.w30-bh span:nth-child(3){visibility:visible}
}

/* ---- W30 Matrix (Sage 10-11): LIGHT default for the Phase A pieces (tokens re-pointed; dark = html[data-theme=dark] keeps the
        Clubhouse values above) + a compact team top card on phones so the finish matrix starts on the first screen ---- */
html.look-graphite:not([data-theme="dark"]){--w30-bg:#F2F5F8;--w30-card:#FFFFFF;--w30-line:rgba(12,26,36,.12);--w30-cream:#0C1A24;--w30-dim:#475B6A;--w30-ok:#12784A;--w30-bad:#B23A2B}
html.look-graphite:not([data-theme="dark"]) .w30-ring-bg, html.look-graphite:not([data-theme="dark"]) .w30-gl{stroke:rgba(12,26,36,.12)}
html.look-graphite:not([data-theme="dark"]) .w30-ring-fg{stroke:#0BA0CD}
html.look-graphite:not([data-theme="dark"]) .w30-tog button[aria-selected="true"], html.look-graphite:not([data-theme="dark"]) .w30-btn{color:#F6F9FB!important}
html.look-graphite:not([data-theme="dark"]) .w30-fc.off, html.look-graphite:not([data-theme="dark"]) .w30-fk.off{border-color:rgba(12,26,36,.24);color:#5E7383}
html.look-graphite:not([data-theme="dark"]) .w30-chiprow a, html.look-graphite:not([data-theme="dark"]) .w30-tag{border-color:rgba(12,26,36,.24)}
html.look-graphite:not([data-theme="dark"]) .w30-q{border-color:rgba(12,26,36,.24)}
html.look-graphite:not([data-theme="dark"]) .w30-br.me{background:rgba(61,214,245,.18)}
html.look-graphite:not([data-theme="dark"]) .w30-pl{stroke:#08799A}
html.look-graphite:not([data-theme="dark"]) .w30-pd{fill:#08799A}
@media (max-width:760px){
 .w30-top{grid-template-columns:auto 1fr;gap:10px;padding:12px 12px}
 .w30-top .w30-rank .w30-why{display:none}
 .w30-big{font-size:38px}.w30-big small{font-size:16px}
 .w30-odds{gap:4px}
 .w30-ring svg{width:54px;height:54px}.w30-ring-n{height:54px;font-size:14px}.w30-ring-n small{font-size:9px}
 .w30-ring--clinched .w30-ring-n small{display:none}
 .w30-rl{font-size:11px;line-height:1.2}
 .w30-odds .w30-why summary{font-size:10px}
}