/* RallyPoint League App v2 — "Floodlight" (approved 20 Oct 2026).
   Near-black, one electric lime, Archivo condensed display + Inter text.
   Layout rules from the design rounds: grid/flex children get min-width:0, tables holding
   names use table-layout:fixed, names fit via the ladder (never clipped, never "…"),
   components adapt to their CONTAINER (container queries), pill rows scroll by touch. */
:root{--bg:#0A0C0F;--s1:#13161B;--s2:#1B1F26;--s3:#232831;--line:#262B33;--tx:#F3F4F6;--mu:#8B929C;--mu2:#5B626C;
  --li:#C8F03C;--li2:rgba(200,240,60,.12);--lo:#FF5C4D;--amber:#F0A53C;--gold:#E9C45A;--silver:#C7CDD6;--bronze:#CD8C55;--blue:#64B5F6;--pad:18px;--navh:72px;
  --safe-b:env(safe-area-inset-bottom,0px);
  /* theme roles (light values below): accent text vs accent fill, ink on the accent, tints as rgb */
  --li-tx:#C8F03C;--on-li:#0A0C0F;--on-li-mu:#2a3310;--on-li-mu2:#3b4a12;--li-dim:#7d9a2a;
  --li-rgb:200,240,60;--lo-rgb:255,92,77;--amber-rgb:240,165,60;--blue-rgb:100,181,246;--bg-rgb:10,12,15;
  --s0:#101317;--s4:#2B3038;--hover:#161A20;--self:#0d0f12;--padbar:#141820;--key:#262B34;--amber-bg:#1d1912;
  --chart-grid:#20242B;--chart-axis:#3A404A;--chart-tx:#6B727C}
/* LIGHT (Ryan, 25 Oct): white, black and the Rally Point green. Fills use the brand green #01AA29
   with black text on them; green TEXT is a deeper shade of it so small type stays readable on white. */
:root[data-theme="light"]{--bg:#FFFFFF;--s1:#F4F5F7;--s2:#EBEDF0;--s3:#E1E4E8;--line:#E2E5E9;--tx:#0A0C0F;--mu:#5E6670;--mu2:#8A919B;
  --li:#01AA29;--li2:rgba(1,170,41,.10);--li-tx:#007A23;--on-li:#0A0C0F;--on-li-mu:#0B3D18;--on-li-mu2:#0B3D18;--li-dim:#86D39A;
  --lo:#D33A2C;--amber:#B5660A;--gold:#B8891A;--silver:#7A8591;--bronze:#A35F28;--blue:#1A6FBF;
  --li-rgb:1,170,41;--lo-rgb:211,58,44;--amber-rgb:214,128,20;--blue-rgb:26,111,191;--bg-rgb:255,255,255;
  --s0:#F0F2F4;--s4:#DADDE2;--hover:#F2F4F6;--self:#E9ECEF;--padbar:#F7F8F9;--key:#E6E9EC;--amber-bg:#FFF4E5;
  --chart-grid:#ECEEF1;--chart-axis:#C9CDD3;--chart-tx:#7A818B}
:root[data-theme="light"] .lockup{filter:invert(1)} /* the white logo, in black */
:root[data-theme="light"] :is(.next-card,.pcard,.cta,.btn.primary) :is(.mu,.mu2){color:var(--on-li-mu)} /* muted text on a green fill */
*{box-sizing:border-box;margin:0;padding:0}
/* app feel on phones: the page never drags sideways (iOS pans to any hidden overflow, so clip it
   rather than hide it — clip makes no scroll area) and doesn't bounce left/right */
html{-webkit-text-size-adjust:100%;background:var(--bg);overflow-x:clip;overscroll-behavior-x:none}
body{background:var(--bg);color:var(--tx);font:400 15px/1.4 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:clip;overscroll-behavior-x:none}
body.has-sheet{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-transform:inherit;letter-spacing:inherit}
a{color:inherit;text-decoration:none}
div,span,td,th,p,b,a,li,label,button{min-width:0}
img{max-width:100%}
:focus-visible{outline:2px solid var(--li);outline-offset:2px}

/* type */
.d{font-family:'Archivo',sans-serif;font-stretch:62%;font-weight:800;text-transform:uppercase;letter-spacing:.005em;line-height:.9}
.dx{font-family:'Archivo',sans-serif;font-stretch:115%;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:10px;line-height:1.2}
.mu{color:var(--mu)} .mu2{color:var(--mu2)} .li{color:var(--li-tx)} .lo{color:var(--lo)} .amber{color:var(--amber)}
.nw{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* name ladder (ui.js) */
/* Ryan's rule: never one stray word on a last line. Short text (names, labels, buttons) is balanced;
   running copy is "pretty" (Chrome keeps the last line from being one word) */
body{text-wrap:balance}
p,.note,.explain,.sheet-p,.empty,.faq .a,.faq .a *{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.fit{display:block;max-width:100%;overflow:hidden;white-space:nowrap}
.fit .l1,.fit .l2{display:block}
.fit .l2{color:var(--mu)}
.fit.fit-wrap{white-space:normal;overflow:visible}

/* app shell: phone = one column + bottom nav; wide = rail + content */
#app{container:app/inline-size;min-height:100vh;overflow-x:clip;max-width:100%}
.shell{min-height:100vh;padding-bottom:calc(var(--navh) + var(--safe-b) + 24px)}
.shell.nonav{padding-bottom:calc(32px + var(--safe-b))}
.main{width:100%;max-width:640px;margin:0 auto;container:main/inline-size}
.rail{display:none}
.nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--navh) + var(--safe-b));padding-bottom:var(--safe-b);background:rgba(var(--bg-rgb),.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;z-index:30}
.nav a{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--mu2);flex:1 1 0;padding:8px 0}
.nav a svg{width:23px;height:23px}
.nav a span{font-family:'Archivo';font-stretch:110%;font-weight:700;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.nav a.on{color:var(--li-tx)}
@container app (max-width:359px){.nav a span{letter-spacing:.06em;font-size:9px}}
@container app (min-width:1000px){
  .shell{display:grid;grid-template-columns:232px minmax(0,1fr);padding-bottom:0}
  .shell.nonav{display:block}
  .shell.nonav .main{max-width:760px}
  .shell>.main{grid-column:2}
  .shell.nonav>.main{grid-column:auto}
  .rail{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:28px 18px 20px;border-right:1px solid var(--line);gap:6px}
  /* desktop/tablet rail: the logo fills the same width as the menu pills (phone header unchanged) */
  .rail .lockup{margin:4px 0 30px;width:100%;height:auto;align-self:stretch}
  .rail a{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:12px;color:var(--mu);border:1px solid transparent}
  .rail a svg{width:20px;height:20px;flex:none}
  .rail a span{font-family:'Archivo';font-stretch:115%;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
  .rail a.on{color:var(--li-tx);background:var(--s1);border-color:var(--line)}
  .rail .rail-league{margin-top:auto;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--s1)}
  .rail .rail-league .d{font-size:22px;margin:6px 0 4px}
  .nav{display:none}
  .main{max-width:1240px;padding:0 24px 40px}
  .top .lockup{display:none}
}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--pad) 0;min-height:52px}
.top .grow{flex:1}
.ib.quiet{background:none;border-color:transparent;color:var(--mu)} .ib.quiet:hover{color:var(--tx)} .ib.quiet svg{width:19px;height:19px}
.lockup{display:block;height:24px;width:auto;max-width:none;flex:none;align-self:flex-start;object-fit:contain}
.top .lockup{align-self:center}
.ib{width:40px;height:40px;border-radius:12px;background:var(--s1);border:1px solid var(--line);display:grid;place-items:center;color:var(--tx);flex:none}
.ib svg{width:18px;height:18px}
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 11px;background:var(--s2);color:var(--mu);white-space:nowrap}
.tag.lime{background:var(--li2);color:var(--li-tx);border:1px solid rgba(var(--li-rgb),.35)}
.tag.org{background:var(--lo);color:var(--on-li)}
.tag.dash{border:1px dashed var(--li);background:none;color:var(--li-tx)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--li);box-shadow:0 0 0 3px rgba(var(--li-rgb),.22);flex:none}
.hero{padding:18px var(--pad) 4px}
.hero .eyebrow{color:var(--li-tx);margin-bottom:12px}
.hero h1{font-size:clamp(46px,15cqi,64px)}
.hero h1 em{font-style:normal;color:var(--li-tx)}
.hero .fit{line-height:.92}
.hero .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
@container app (min-width:1000px){
  .hero{padding:34px 0 8px}
  .hero h1{font-size:76px}
  .top{padding:20px 0 0;min-height:0}
  .hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:7px;padding:6px 9px;background:var(--s2);color:var(--mu);white-space:nowrap}
.chip b{color:var(--li-tx);font-weight:700}

/* segmented control */
.seg{margin:18px var(--pad) 12px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--s1);border:1px solid var(--line);border-radius:12px;padding:3px}
.seg a,.seg button{text-align:center;padding:10px 4px;border-radius:9px;color:var(--mu);white-space:nowrap}
.seg .on{background:var(--tx);color:var(--bg)}
.seg.limeon .on{background:var(--li)}
/* wide screens: tabs and toggles span the content they control (Ryan, 24 Oct) */
@container app (min-width:1000px){.seg{margin:18px 0 14px}.dgrid .seg{margin:0 0 14px}}

/* touch-scroll pill rows: no scrollbar, last pill peeks, row fades at the edge */
.pills{position:relative;margin:0 0 12px}
.pills .track{display:flex;gap:7px;overflow-x:auto;padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding:0 var(--pad)}
.pills .track::-webkit-scrollbar{display:none}
.pills .track>*{flex:none;scroll-snap-align:start;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--mu);white-space:nowrap}
.pills .track>.on{border-color:var(--li-tx);color:var(--li-tx)}
.pills .track:after{content:'';flex:none;width:30px}
.pills:after{content:'';position:absolute;right:0;top:0;bottom:0;width:48px;background:linear-gradient(90deg,rgba(var(--bg-rgb),0),var(--bg));pointer-events:none}
@container app (min-width:1000px){.pills .track{padding:0}.pills:after{display:none}}

/* blocks */
.wrap{padding:0 var(--pad)}
@container app (min-width:1000px){.wrap{padding:0}}
.card{background:var(--s1);border:1px solid var(--line);border-radius:16px}
.pad16{padding:16px}
.lbl{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:26px var(--pad) 12px}
.lbl .d{font-size:24px}
.lbl .dx{color:var(--mu);text-align:right;white-space:nowrap}
@container app (min-width:1000px){.lbl{margin:28px 0 12px}}
.note{font-size:13px;color:var(--mu);line-height:1.5}
.note b{color:var(--tx);font-weight:600}
.empty{margin:28px var(--pad);padding:28px 20px;text-align:center;border:1px dashed var(--line);border-radius:16px;color:var(--mu)}
.empty .d{font-size:26px;color:var(--tx);margin-bottom:8px}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 16px;font-weight:600;font-size:14px;white-space:nowrap;border:1px solid var(--line);background:var(--s1);color:var(--tx)}
.btn.primary{background:var(--li);color:var(--on-li);border-color:var(--li-tx)}
.btn.danger{background:rgba(var(--lo-rgb),.12);color:var(--lo);border-color:rgba(var(--lo-rgb),.4)}
.btn.ghost{background:none}
.btn.block{display:flex;width:100%}
.btn.small{padding:8px 11px;font-size:13px;border-radius:10px}
.btn svg{width:16px;height:16px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.cta{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:var(--li);color:var(--on-li);border-radius:18px;padding:20px 22px}
.cta .d{font-size:26px;line-height:1}
.cta svg{width:24px;height:24px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.textlink{color:var(--mu);text-decoration:underline;text-underline-offset:3px}

/* forms */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field>span{font-family:'Archivo';font-stretch:115%;font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.inp{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 14px;color:var(--tx);font-size:16px}
.inp:focus{border-color:var(--li-tx);outline:none}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mu) 50%),linear-gradient(135deg,var(--mu) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--s1)}
.check input{width:20px;height:20px;accent-color:var(--li-tx);flex:none}
.check .fit{flex:1}

/* toasts + sheets */
#toasts{position:fixed;left:0;right:0;top:12px;z-index:90;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 12px}
.toast{max-width:460px;width:100%;background:var(--s2);border:1px solid var(--line);border-left:4px solid var(--li);border-radius:12px;padding:12px 14px;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.45);transition:opacity .25s,transform .25s}
.toast.warning{border-left-color:var(--amber)} .toast.error{border-left-color:var(--lo)} .toast.info{border-left-color:var(--blue)}
.toast.out{opacity:0;transform:translateY(-8px)}
.sheet-wrap{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .18s}
.sheet-wrap.in{opacity:1} .sheet-wrap.out{opacity:0}
.sheet{container:sheet/inline-size;width:100%;max-width:560px;max-height:88vh;overflow:auto;background:var(--s1);border:1px solid var(--line);border-radius:22px 22px 0 0;padding:20px var(--pad) calc(18px + var(--safe-b))}
.sheet.wide{max-width:720px}
.sheet .eyebrow{color:var(--li-tx);margin-bottom:10px}
.sheet-title{font-size:32px;margin-bottom:14px}
.sheet-body{margin-bottom:18px}
.sheet-p{color:var(--mu);line-height:1.55}
.sheet-p b,.sheet-p strong{color:var(--tx)}
.sheet-actions{display:flex;gap:10px;flex-wrap:wrap}
.sheet-actions .btn{flex:1 1 140px;white-space:normal;text-align:center}
@media (min-width:700px){.sheet-wrap{align-items:center}.sheet{border-radius:22px;padding-bottom:20px}}

/* status pill */
#sync{position:fixed;right:12px;bottom:calc(var(--navh) + var(--safe-b) + 10px);z-index:40;font-size:12px;padding:6px 10px;border-radius:999px;background:var(--s2);border:1px solid var(--line);color:var(--mu)}
#sync:empty{display:none}
#sync b{font-weight:600} #sync span{display:block;font-size:11.5px;opacity:.8;margin-top:2px}
#sync.err{color:var(--lo);border-color:rgba(var(--lo-rgb),.4)}
/* offline = safe but not sent yet: a calm full-width notice, not an error */
.pin-pending{margin-top:14px;padding:10px 14px;border-radius:14px;color:var(--amber);border:1px solid rgba(var(--amber-rgb),.45);background:var(--amber-bg);font-size:14px;line-height:1.35}.pin-pending b{display:block}
#sync.off{left:12px;border-radius:14px;padding:10px 14px;color:var(--amber);border-color:rgba(var(--amber-rgb),.45);background:var(--amber-bg);line-height:1.3;text-wrap:balance}
@container app (min-width:1000px){#sync.off{left:auto;max-width:420px}}
@container app (min-width:1000px){#sync{bottom:14px}}
.mode-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px var(--pad) 0;padding:9px 12px;border-radius:12px;background:rgba(var(--lo-rgb),.08);border:1px solid rgba(var(--lo-rgb),.3)}
.mode-strip .dx{color:var(--lo)}
.mode-strip .back{display:inline-flex;align-items:center;gap:4px;color:var(--tx)}
.mode-strip .back svg{width:14px;height:14px}
@container main (max-width:360px){.mode-strip .org-lbl{display:none}}
@container app (min-width:1000px){.mode-strip{margin:16px 0 0}}

/* ─── TABLE (A1 / A6 / D1) ─── */
.grp{margin:0 var(--pad) 10px;border:1px solid var(--line);border-radius:16px;background:var(--s1);overflow:hidden}
.grp-h{display:flex;justify-content:space-between;gap:10px;padding:10px 14px 9px;color:var(--mu2);border-bottom:1px solid var(--line);background:var(--s0)}
.grp-h b{color:var(--li-tx);font-weight:700;text-align:right}
.trow{container:trow/inline-size;display:block;color:inherit}
.trow+.trow{border-top:1px dashed var(--line)}
.trow-in{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:13px 14px}
.trow .rk{font-size:40px;text-align:center}
.trow.lead .rk{color:var(--li-tx)}
.trow .nm{font-weight:600;font-size:16px;line-height:1.3}
.fm{display:flex;gap:3px;align-items:flex-end;height:22px}
table.big .fm{justify-content:center}
.fm i{display:block;width:5px;border-radius:1.5px;background:var(--li)}
.fm i.W{height:20px} .fm i.L{height:6px;background:var(--s4)}
.trow .wl{text-align:right}
.trow .wl .d{font-size:30px;white-space:nowrap}
.trow .wl .d span{color:var(--mu2);margin:0 1px}
.trow .pc{font-size:12px;color:var(--mu);font-weight:600;margin-top:3px;white-space:nowrap}
.trow.out .rk,.trow.out .nm{color:var(--mu2)}
@container trow (max-width:330px){.trow .fm{display:none}.trow-in{grid-template-columns:34px minmax(0,1fr) auto}.trow .rk{font-size:34px}}
.sec-h{margin:18px var(--pad) 8px;color:var(--amber)}
.sec-h.red{color:var(--lo)}
@container app (min-width:1000px){.grp,.sec-h{margin-left:0;margin-right:0}}

/* form view: weekly results grid */
.formgrid{container:fg/inline-size;margin:0 var(--pad);border:1px solid var(--line);border-radius:16px;background:var(--s1);overflow:hidden}
.formgrid .fr{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px}
.formgrid .fr+.fr{border-top:1px solid var(--line)}
.formgrid .fr .d{font-size:24px;text-align:center}
/* weeks in rows of 4 (8 weeks = 4 over 4), each tile that week's W–L */
.wk-tiles{display:grid;grid-template-columns:repeat(4,34px);gap:4px}
.wk-tiles span{height:24px;border-radius:6px;display:grid;place-items:center;font-family:'Archivo';font-stretch:62%;font-weight:800;font-size:14px;letter-spacing:.01em;background:var(--s2);color:var(--mu)}
.wk-head{display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;margin:0 var(--pad) 8px;color:var(--mu2)}.wk-head span{white-space:nowrap}
@container app (min-width:1000px){.wk-tiles{grid-template-columns:repeat(8,34px)}.wk-head{margin:0 0 8px}}
/* narrowest phones: the weeks run full width under the name, 8 across */
@container fg (max-width:300px){.formgrid .fr{grid-template-columns:26px minmax(0,1fr);row-gap:8px}.formgrid .wk-tiles{grid-column:2;grid-template-columns:repeat(8,minmax(0,1fr))}}
.wk-tiles .w{background:rgba(var(--li-rgb),.18);color:var(--li-tx)} .wk-tiles .l{background:var(--s4);color:var(--mu)} .wk-tiles .a,.wk-tiles .n{background:none;border:1px dashed var(--line);color:var(--mu2)}
@container app (min-width:1000px){.formgrid{margin:0}}

/* stats view (A10): team pinned, numbers swipe */
.stats-wrap{margin:0 var(--pad);border:1px solid var(--line);border-radius:16px;background:var(--s1);overflow:hidden;position:relative}
.stats-scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stats-scroll::-webkit-scrollbar{display:none}
table.st{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%}
table.st th,table.st td{padding:12px 8px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line)}
table.st th{font-family:'Archivo';font-stretch:115%;font-weight:700;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu2);background:var(--s0)}
table.st td{font-size:15px;font-weight:600}
table.st th:first-child,table.st td:first-child{padding-left:16px}
table.st th:last-child,table.st td:last-child{padding-right:16px}
table.st .pin{position:sticky;left:0;z-index:1;background:var(--s1);text-align:left;border-right:1px solid var(--line);width:150px}
table.st th.pin{background:var(--s0)}
table.st .pin .cell{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:center}
table.st .pin .d{font-size:24px;text-align:center}
table.st tr.lead .pin .d{color:var(--li-tx)}
table.st tr.div td{color:var(--amber);font-family:'Archivo';font-stretch:115%;font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:9px 14px;background:var(--s0)}
table.st tr.div.red td{color:var(--lo)}
table.st tr.out td{color:var(--mu2)}
table.st tr:last-child td{border-bottom:0}
table.st .col{width:58px} table.st .col.w{width:70px} table.st .col.n{width:48px}
.th-i{display:inline-flex;align-items:center;gap:6px}
/* table headers never wrap; the (i) sits before the label so the label lines up with the numbers */
table.big th,table.st th{white-space:nowrap}
/* stat columns: numbers and their headings share one centre line (Ryan, 24 Oct) */
table.big th:not(.l):not(.rkh),table.big td:not(.l):not(.rk){text-align:center}
table.st th:not(.pin),table.st td:not(.pin){text-align:center}
th .th-i{justify-content:center}
.th-i svg{width:13px;height:13px}
.swipe-hint{display:flex;justify-content:space-between;margin:10px var(--pad) 0;color:var(--mu)}
.swipe-hint b{color:var(--li-tx)}
.explain{margin:16px var(--pad) 0;padding:16px;border:1px solid var(--line);border-radius:16px;font-size:14px;color:var(--mu);line-height:1.55}
.explain b{color:var(--tx);font-weight:600}
@container app (min-width:1000px){.stats-wrap,.explain{margin-left:0;margin-right:0}.swipe-hint{display:none}}

/* desktop table (D1) */
.dgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.dside{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
@container main (min-width:1150px){.dgrid{grid-template-columns:minmax(0,1fr) 320px;gap:24px}.dside{display:flex;flex-direction:column}}
table.big{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;background:var(--s1);border:1px solid var(--line);border-radius:16px;overflow:hidden}
table.big th{font-family:'Archivo';font-stretch:115%;font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu2);padding:14px 8px;text-align:right;border-bottom:1px solid var(--line)}
table.big td{padding:11px 8px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line)}
table.big tr:last-child td{border-bottom:0}
/* outer columns sit in from the card's edge, not on it (Ryan, 24 Oct) */
table.big th:first-child,table.big td:first-child{padding-left:20px}
table.big th:last-child,table.big td:last-child{padding-right:20px}
table.big .c-pos{width:76px} table.big .c-wk{width:70px} table.big .c-n{width:40px} table.big .c-win{width:96px}
table.big .c-buch{width:88px} table.big .c-for{width:50px} table.big .c-agst{width:54px} table.big .c-diff{width:56px} table.big .c-form{width:100px}
/* a narrower table (iPad landscape, small laptops): tighter inset so names keep their room */
.tcol{container:tcol/inline-size;min-width:0}
@container tcol (max-width:900px){
  table.big th:first-child,table.big td:first-child{padding-left:12px}
  table.big th:last-child,table.big td:last-child{padding-right:14px}
  table.big .c-pos{width:56px} table.big .c-wk{width:58px} table.big .c-form{width:84px} table.big .c-win{width:90px} table.big .c-buch{width:82px} table.big .c-n{width:36px}
}
table.big th.rkh{text-align:center}
table.big th.l,table.big td.l{text-align:left}
table.big td.rk{font-size:32px;text-align:center}
table.big tr.lead td.rk{color:var(--li-tx)}
table.big td .d{font-size:26px}
table.big tr{cursor:pointer}
table.big tr:hover td{background:var(--hover)}
table.big tr.div td{color:var(--amber);font-family:'Archivo';font-stretch:115%;font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-align:left;cursor:default;background:var(--s0)}
table.big tr.div.red td{color:var(--lo)}
table.big .pairtag{color:var(--li-tx);white-space:nowrap}
.next-card{background:var(--li);color:var(--on-li);border-radius:20px;padding:18px 20px}
.next-card .dx{color:var(--on-li-mu)}
.next-card .d{font-size:30px;margin:8px 0 12px}
.next-card .nl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid rgba(var(--bg-rgb),.15);font-weight:600}
.hl3 .note>span:last-child{display:block;margin-top:2px}
.next-card .nl .x2{background:var(--on-li);color:var(--li);border-radius:5px;padding:3px 6px;font-size:10px;font-weight:700}
.hl3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.hl3 .card{padding:18px}
.hl3 .d{font-size:42px;margin:10px 0 8px}
.hl3 .d em{font-style:normal;color:var(--li-tx)}

/* ─── TONIGHT (A2 / A7 / A8) ─── */
.me{display:inline-flex;max-width:100%;align-items:center;gap:10px;border:1px solid var(--line);background:var(--s1);border-radius:999px;padding:6px 6px 6px 14px;color:var(--tx)}
.me .who{min-width:0;flex:1}
.chg{background:var(--s2);color:var(--li-tx);border-radius:999px;padding:8px 11px;flex:none}
.when{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;color:var(--mu);font-size:14px;font-weight:500;align-items:center}
.when b{color:var(--tx);font-weight:600}
.when svg{width:16px;height:16px}
.pcard{container:pcard/inline-size;margin:20px var(--pad) 0;border-radius:22px;background:var(--li);color:var(--on-li);padding:18px;position:relative;overflow:hidden}
.pcard .dx{color:var(--on-li-mu2)}
.pcard .big{font-size:52px;margin:10px 0 10px}
.pcard .big .fit{line-height:.92}
.pcard p{font-weight:500;font-size:15px;line-height:1.4;max-width:34ch}
.pcard .kp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.pcard .kp div{background:rgba(var(--bg-rgb),.08);border-radius:12px;padding:10px 12px}
.pcard .kp .d{font-size:28px;margin-top:6px}
.pcard .court{position:absolute;right:-50px;top:10px;width:170px;height:200px;border:2px solid rgba(var(--bg-rgb),.12);border-radius:10px;transform:rotate(-20deg);pointer-events:none}
.pcard .court:after{content:'';position:absolute;left:50%;top:0;bottom:0;border-left:2px solid rgba(var(--bg-rgb),.12)}
@container pcard (max-width:300px){.pcard .big{font-size:38px}.pcard .kp .d{font-size:22px}}
@container app (min-width:1000px){.pcard{margin:20px 0 0}}
.g{container:grow/inline-size;margin:0 var(--pad) 8px;border-radius:14px;background:var(--s1);border:1px solid var(--line)}
.g-in{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px 12px 10px}
.g.rv{border-color:rgba(var(--li-rgb),.45);background:linear-gradient(90deg,rgba(var(--li-rgb),.09),var(--s1) 60%)}
.g.done{opacity:.9}
.g .gr{text-align:center;border-right:1px solid var(--line);padding-right:10px}
.g .gr .dx{font-size:8.5px;color:var(--mu2)}
.g .gr .d{font-size:34px;margin-top:3px}
.g.rv .gr .d{color:var(--li-tx)}
.g .on{font-weight:600;font-size:16px}
.g .os{font-size:13px;color:var(--mu);margin-top:3px}
/* narrow phones: "4th" and "won 11, lost 12" on lines of their own, never "4th ·" left hanging */
@media (max-width:360px){.g .os .os-sep{display:none}.g .os .os-rec{display:block}}
.g .rt{text-align:right}
.rival{background:var(--li);color:var(--on-li);border-radius:5px;padding:4px 7px 3px;white-space:nowrap}
.res{font-size:26px;white-space:nowrap}
.res.W{color:var(--li-tx)}
@container grow (max-width:340px){.g .rv-w{display:none}.g-in{grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding-right:12px}.g .gr{padding-right:8px}}
@container grow (max-width:300px){.g-in{grid-template-columns:46px minmax(0,1fr) auto;gap:10px}.g .gr .d{font-size:28px}}
@container app (min-width:1000px){.g{margin-left:0;margin-right:0}}
.tn-cols{display:block}
@container app (min-width:1000px){.tn-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}}

/* who are you (A9) */
.pick{display:flex;flex-direction:column;gap:8px;margin:20px var(--pad) 0}
.pick button{container:pickrow/inline-size;display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:14px;background:var(--s1);border:1px solid var(--line)}
.pick button .nm{font-weight:600;font-size:16px;line-height:1.35}
.pick .ring{width:26px;height:26px;border-radius:50%;border:2px solid var(--mu2);display:grid;place-items:center;color:var(--on-li)}
.pick .ring svg{width:15px;height:15px;display:none}
.pick button.on{border-color:var(--li-tx);background:linear-gradient(90deg,rgba(var(--li-rgb),.1),var(--s1) 70%)}
.pick button.on .ring{background:var(--li);border-color:var(--li-tx)}
.pick button.on .ring svg{display:block}
.pick-foot{margin:22px var(--pad) 0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@container app (min-width:1000px){.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0 0}/* wide: the two choices sit on the same two columns as the teams above */
.pick-foot{margin:22px 0 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* ─── FIXTURES ─── */
.wknav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px var(--pad) 0}
.wknav .d{font-size:34px;text-align:center}
.wknav .ib:disabled{opacity:.3}
.wkmeta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px var(--pad) 0}
@container app (min-width:1000px){.wknav,.wkmeta{margin-left:0;margin-right:0}}
.banner{margin:14px var(--pad) 0;border-radius:14px;padding:12px 14px;border:1px solid rgba(var(--amber-rgb),.4);background:rgba(var(--amber-rgb),.08)}
.banner .dx{color:var(--amber);margin-bottom:8px}
.banner .bl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;font-size:14px}
.banner .bl+.bl{border-top:1px solid rgba(var(--amber-rgb),.2)}
.banner.blue{border-color:rgba(var(--blue-rgb),.4);background:rgba(var(--blue-rgb),.08)}
.banner.blue .dx{color:var(--blue)}
@container app (min-width:1000px){.banner{margin-left:0;margin-right:0}}
.wchips{display:flex;flex-wrap:wrap;gap:6px;margin:12px var(--pad) 0}
.wchips .chip b{color:var(--tx)}
@container app (min-width:1000px){.wchips{margin-left:0;margin-right:0}}
.pairs-panel{container:pp/inline-size;margin:12px var(--pad) 0;padding:12px 14px;border-radius:14px;background:var(--s1);border:1px solid var(--line)}
.pairs-panel .dx{color:var(--mu);margin-bottom:10px}
.pairs-list{display:flex;flex-direction:column;gap:6px}
.pairs-list>div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:center;font-size:14px}
.pairs-list>div b{color:var(--li-tx);font-family:'Archivo';font-stretch:115%;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
@container app (min-width:1000px){.pairs-panel{margin-left:0;margin-right:0}}
/* wide screens: the pairs flow down two columns (1st–4th left, 5th–8th right), still in table order */
@container pp (min-width:640px){.pairs-list{display:grid;grid-auto-flow:column;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows),auto);gap:6px 28px}}
.fx{container:fx/inline-size;margin:0 var(--pad) 8px;border-radius:14px;background:var(--s1);border:1px solid var(--line)}
.fx-in{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px 11px 10px}
.fx .n{font-size:24px;text-align:center;color:var(--mu)}
.fx .t{display:flex;flex-direction:column;gap:5px;font-size:15px;font-weight:500}
.fx .t>div{display:flex;align-items:center;gap:8px;min-width:0}
.fx .t>div .fit{flex:1}
.fx .t .w{font-weight:700}
.fx .t .lz{color:var(--mu)}
.fx .sc{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.fx .sc .d{font-size:24px;line-height:1;min-width:26px;text-align:right}
.fx .sc .w{color:var(--li-tx)}
.fx.mine{border-color:rgba(var(--li-rgb),.45)}
.fx.pp{border-style:dashed;border-color:rgba(var(--amber-rgb),.5)}
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:4px 7px 3px;white-space:nowrap;font-family:'Archivo';font-stretch:115%;font-weight:700;font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.badge.amber{background:rgba(var(--amber-rgb),.14);color:var(--amber)}
.badge.lime{background:var(--li);color:var(--on-li)}
.badge.blue{background:rgba(var(--blue-rgb),.14);color:var(--blue)}
.badge.red{background:rgba(var(--lo-rgb),.14);color:var(--lo)}
.fx-sub{padding:0 14px 10px 62px;display:flex;flex-wrap:wrap;gap:6px}
@container fx (max-width:300px){.fx-in{grid-template-columns:30px minmax(0,1fr) auto;gap:9px}.fx-sub{padding-left:14px}}
@container app (min-width:1000px){.fx{margin-left:0;margin-right:0}.fxgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}}
.att{display:flex;flex-wrap:wrap;gap:6px;margin:0 var(--pad)}
.att>*{border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13px;background:var(--s1);max-width:100%}
.att .subchip{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline;border-radius:14px}
.att .abs{border-color:rgba(var(--lo-rgb),.45);color:var(--lo);text-decoration:line-through}
.att .wd{border-color:rgba(var(--amber-rgb),.4);color:var(--amber)}
@container app (min-width:1000px){.att{margin:0}}
.grid-card{margin:0 var(--pad);padding:12px;overflow-x:auto;scrollbar-width:none}
.grid-card::-webkit-scrollbar{display:none}
table.mg{border-collapse:separate;border-spacing:3px;margin:0 auto}
table.mg td,table.mg th{width:30px;height:30px;text-align:center;font-size:12px;font-weight:700;border-radius:6px}
table.mg th{color:var(--mu2);font-weight:600}
table.mg .self{background:var(--self)}
table.mg .W{background:rgba(var(--li-rgb),.2);color:var(--li-tx)}
table.mg .L{background:var(--s4);color:var(--mu)}
table.mg .p{background:var(--s2);color:var(--mu2)}
.mg-key{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 12px;margin:10px var(--pad) 0;font-size:13px;color:var(--mu)}
.mg-key b{color:var(--tx);margin-right:6px}
@container app (min-width:1000px){.grid-card,.mg-key{margin-left:0;margin-right:0}}
.sum{margin:0 var(--pad)}
@container app (min-width:1000px){.sum{margin:0}}

/* ─── TEAMS + PROFILE (A12, D4) ─── */
.tlist{display:flex;flex-direction:column;gap:8px;margin:0 var(--pad)}
.tlist a{container:tl/inline-size;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--s1);border:1px solid var(--line)}
.tlist .d{font-size:28px;text-align:center}
.tlist .nm{font-weight:600;font-size:16px;line-height:1.3}
.tlist .meta{text-align:right;color:var(--mu);font-size:13px;white-space:nowrap}
@container app (min-width:1000px){.tlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}}
.ph{padding:16px var(--pad) 0}
.ph .acts{display:flex;align-items:center;gap:8px}
.ph .eyebrow{color:var(--li-tx);margin:16px 0 10px}
.ph h1{font-size:clamp(36px,11.5cqi,52px)}
.ph .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ph .chips .chip:first-child{color:var(--li-tx)}
@container app (min-width:1000px){.ph{padding:20px 0 0}.ph h1{font-size:64px}}
.tabs4{margin:16px var(--pad) 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--s1);border:1px solid var(--line);border-radius:12px;padding:3px}
.tabs4 a{text-align:center;padding:10px 2px;border-radius:9px;color:var(--mu);white-space:nowrap}
.tabs4 a.on{background:var(--li);color:var(--on-li)}
@container app (max-width:359px){.tabs4 a.dx{letter-spacing:.06em}}
@container app (min-width:1000px){.tabs4{margin:18px 0 0}}
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:18px var(--pad) 0;border:1px solid var(--line);border-radius:16px;background:var(--s1);overflow:hidden}
.kpi>div{padding:14px 6px;text-align:center;border-left:1px solid var(--line);border-top:1px solid var(--line);margin:-1px 0 0 -1px}
.kpi .d{font-size:32px}
.kpi .dx{font-size:9px;color:var(--mu);margin-top:8px}
@container app (min-width:1000px){.kpi{margin:18px 0 0;grid-template-columns:repeat(6,minmax(0,1fr))}}
.chart-card{margin:0 var(--pad);padding:14px 10px 10px;background:var(--s1);border:1px solid var(--line);border-radius:16px}
.chart-card .legend{display:flex;gap:16px;flex-wrap:wrap;margin:8px 8px 2px;font-size:13px;color:var(--mu)}
.chart-card .legend i{display:inline-block;width:16px;height:4px;border-radius:2px;background:var(--li);vertical-align:middle;margin-right:6px}
.chart-card .legend i.bar{height:10px;width:10px;background:var(--s4)}
.chart-card .cap{font-size:13px;color:var(--mu);margin:10px 8px 2px}
.chart-card .cap b{color:var(--tx)}
@container app (min-width:1000px){.chart-card{margin:0}}
.hl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 var(--pad)}
.hl .card{padding:14px}
.hl .dx{color:var(--mu)}
.hl .d{font-size:32px;margin:10px 0 8px}
.hl .d.li{color:var(--li-tx)}
.hl p{font-size:13px;color:var(--mu);line-height:1.4}
@container app (min-width:1000px){.hl{margin:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
/* Hub insights (25 Oct): profile radar, form, nights, chemistry, rivals, margins, journey, ratings, milestones.
   hx- prefix throughout (short names like .g / .pills are already taken). */
.hx-grid{display:grid}
@container app (min-width:1000px){.hx-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;align-items:start}.hx-grid>.full{grid-column:1/-1}} /* 14px = every card grid's gap, so columns line up */
.hx-fmt{margin-top:18px} .hx-fmt a{display:grid;place-items:center}
.hx-box{margin:0 var(--pad);padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--s1)}
@container app (min-width:1000px){.hx-box{margin:0}}
.hx-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-end} .hx-r{text-align:right}
.hx-big{font-size:56px;color:var(--li-tx)} .hx-big.hx-w{color:var(--tx)} .hx-sub{color:var(--mu);font-size:14px;margin-top:6px}
.hx-form{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin-top:14px}
.hx-form i{display:grid;place-items:center;height:44px;border-radius:9px;background:var(--s3);color:var(--mu);font:700 13px/1 'Archivo';font-stretch:115%;font-style:normal}
.hx-form i.W{background:var(--li);color:var(--on-li)}
.hx-trio-w{container:hxtrio/inline-size}
.hx-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 var(--pad)}
/* narrow: one row per card — label and detail left, the number right (three across is too tight) */
@container hxtrio (max-width:520px){.hx-trio{grid-template-columns:1fr;gap:8px}.hx-trio .card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
  .hx-trio .card>.d{grid-column:2;grid-row:1/span 3;margin:0;text-align:right}
  .hx-riv .card>.hx-rn{grid-column:1;grid-row:auto;text-align:left;font-size:22px;margin-top:4px}.hx-riv .card>.hx-rec{grid-column:2;grid-row:1/span 3;margin:0}}
@container app (min-width:1000px){.hx-trio{margin:0}}
.hx-trio .card{padding:14px 12px;container-type:inline-size} .hx-trio .d{font-size:34px;margin-top:6px} .hx-trio p{font-size:12.5px;color:var(--mu);margin-top:6px;line-height:1.35}
.hx-riv .card>.hx-rn{font-size:min(26px,17cqi);line-height:1} .hx-riv .card>.hx-rec{font-size:22px;line-height:1;margin-top:8px}
.pl-hub{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-found{display:flex;gap:10px;align-items:flex-start} .hx-found>i{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:-1px;border-radius:50%;background:var(--li);color:var(--on-li)} .hx-found>i svg{width:14px;height:14px}
.hx-notfound{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:2px 0 12px;padding:14px;border-radius:14px;border:1px solid rgba(var(--amber-rgb),.45);background:var(--amber-bg);font-size:14px;line-height:1.45}
.hx-notfound b{color:var(--amber)} .hx-notfound span{color:var(--tx)}
.hx-code{font-size:30px;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.hx-links{display:flex;justify-content:space-between;gap:12px;margin-top:14px} .hx-dev{margin-top:14px;color:var(--amber)}
.hx-riv button.card{text-align:left;width:100%;color:inherit;font:inherit;cursor:pointer}
/* every game v a rival (sheet) */
.hx-rgk{display:flex;align-items:center;gap:14px;margin-bottom:14px} .hx-rgk .d{font-size:44px;white-space:nowrap;flex:none}
.hx-rgl{display:flex;flex-direction:column;gap:6px}
.hx-rg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--s2)}
.hx-rg .dx{white-space:nowrap} .hx-rg-who{font-size:14px} .hx-rg b{font-size:22px} .hx-rg.won b{color:var(--li-tx)} .hx-rg.lost b{color:var(--lo)}
@container sheet (max-width:420px){.hx-rg{grid-template-columns:minmax(0,1fr) auto}.hx-rg .hx-rg-who{grid-column:1}.hx-rg b{grid-row:1/span 2;grid-column:2}}
.hx-chem{display:flex;flex-direction:column;gap:14px}
.hx-chem>*{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;color:inherit}
.hx-chem .nm{font-weight:600;font-size:16px} .hx-chem .pc{font-size:28px;color:var(--li-tx)}
.hx-chem .track{grid-column:1/-1;height:8px;border-radius:4px;background:var(--s3);overflow:hidden} .hx-chem .track b{display:block;height:100%;background:var(--li);border-radius:4px}
.hx-chem .meta{grid-column:1/-1;font-size:13px;color:var(--mu)}
.hx-mg{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);gap:8px 10px;align-items:center}
.hx-mg .hx-l,.hx-mg .hx-rb{height:22px;display:flex;align-items:center} .hx-mg .hx-l{justify-content:flex-end} .hx-hd.hx-l{height:auto}
.hx-mg b{height:100%;border-radius:5px;display:flex;align-items:center;padding:0 7px;font:700 12px/1 'Archivo';font-stretch:115%;min-width:24px}
.hx-mg .hx-l b{background:var(--s4);color:var(--mu)} .hx-mg .hx-rb b{background:var(--li);color:var(--on-li);justify-content:flex-end}
.hx-c{text-align:center;font-size:12px;color:var(--mu)} .hx-hd{font-size:9px;color:var(--mu2)}
.hx-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hx-pills span{padding:8px 11px;border-radius:10px;background:var(--s2);font-size:13px;color:var(--mu)} .hx-pills b{color:var(--tx);font-weight:700}
.hx-legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:10px;font-size:12.5px;color:var(--mu)}
.hx-gold{color:var(--gold)} .hx-silver{color:var(--silver)} .hx-bronze{color:var(--bronze)}
.hx-rf+.hx-rf{margin-top:16px} .hx-rh{margin:0 0 8px}
.hx-rrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.hx-rss .card{padding:14px} .hx-rss .d{font-size:38px;color:var(--li-tx);margin-top:6px}
.hx-rss p{font-size:12.5px;color:var(--mu);margin-top:6px} .hx-rss p b{font-weight:700} .hx-rss .hx-pk{color:var(--mu2);margin-top:3px}
@container app (min-width:1000px){.hx-rf{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center}.hx-rh{margin:0}.hx-rrow{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
.hx-prof{display:grid;gap:18px;container:hxprof/inline-size}
.hx-plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;align-content:center}
.hx-plist>div{display:flex;flex-direction:column;gap:3px} .hx-plist b{font-size:15px} .hx-plist .note{font-size:12.5px}
.hx-key{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12.5px} .hx-key i{display:inline-block;flex:none;width:22px;border-top:2px dashed var(--mu2)}
@container app (min-width:1000px){.hx-prof{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:28px}}
@container hxprof (max-width:330px){.hx-plist{grid-template-columns:1fr}}
.hx-track{height:10px;border-radius:5px;background:var(--s3);overflow:hidden;margin-top:12px} .hx-track b{display:block;height:100%;background:var(--li)}
.hx-ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:16px}
.hx-ach div{padding:12px;border-radius:12px;background:var(--s2);font-size:13px;color:var(--mu)} .hx-ach b{display:block;color:var(--tx);font-size:14px;margin-bottom:3px}
.hx-ach .got{background:rgba(var(--li-rgb),.12)} .hx-ach .got b{color:var(--li-tx)} .hx-ach div:not(.got){opacity:.55}
/* Hub finishes: league wins / seconds / thirds as gold, silver and bronze numbers */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 var(--pad);border:1px solid var(--line);border-radius:16px;background:var(--s1);overflow:hidden}
.podium>div{padding:14px 6px 12px;text-align:center;border-left:1px solid var(--line)} .podium>div:first-child{border-left:0}
.podium .d{font-size:40px;line-height:1;color:var(--mu2)} .podium .dx{font-size:9px;color:var(--mu);margin-top:8px} .podium p{font-size:12px;color:var(--mu2);margin-top:4px}
.podium .f1 .d{color:var(--gold)} .podium .f2 .d{color:var(--silver)} .podium .f3 .d{color:var(--bronze)}
@container app (min-width:1000px){.podium{margin:0}.podium .d{font-size:48px}}
/* Live rating card (Ryan 24 Oct: bigger and clearer) */
.rcard{container:rc/inline-size;margin:0 var(--pad);padding:18px;border:1px solid var(--line);border-radius:16px;background:radial-gradient(130% 150% at 0% 0%,rgba(var(--li-rgb),.10),transparent 55%),var(--s1)}
.rc-num{display:flex;align-items:center;gap:12px}
.rc-num .d{font-size:60px;line-height:.9;color:var(--li-tx)}
.rc-chip{font-family:'Archivo';font-stretch:115%;font-weight:700;font-size:12px;letter-spacing:.05em;padding:6px 10px;border-radius:999px;background:var(--s2);color:var(--mu);white-space:nowrap}
.rc-chip.up{background:var(--li);color:var(--on-li)} .rc-chip.down{background:rgba(var(--lo-rgb),.16);color:var(--lo)}
.rc-sub{display:flex;flex-direction:column;gap:2px;margin-top:12px;font-size:14px;color:var(--mu)} .rc-sub b{color:var(--tx);font-weight:600;font-size:16px}
.rc-side{margin-top:20px}
.rc-track{position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--s3),rgba(var(--li-rgb),.6))}
.rc-start{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;border-radius:1px;background:var(--mu2)}
.rc-dot{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--li);box-shadow:0 0 0 4px var(--s1)}
.rc-ends{display:flex;justify-content:space-between;margin-top:10px;color:var(--mu2);font-size:8.5px}
.rc-weeks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}
.rc-weeks>div{border-radius:12px;padding:10px 4px 8px;text-align:center;background:var(--s2)}
.rc-weeks .d{font-size:22px} .rc-weeks .dl{font-size:12px;font-weight:600;margin-top:2px;color:var(--mu)} .rc-weeks .dx{font-size:8.5px;color:var(--mu2);margin-top:4px}
.rc-weeks .up .dl{color:var(--li-tx)} .rc-weeks .down .dl{color:var(--lo)}
.rc-weeks .now{background:rgba(var(--li-rgb),.14)} .rc-weeks .now .d{color:var(--li-tx)} .rc-weeks .later{opacity:.45}
.rcard .cap{margin-top:14px;font-size:13px;color:var(--mu2)}
@container rc (min-width:620px){.rc-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:32px;align-items:center}.rc-side{margin-top:0}.rc-weeks{grid-template-columns:repeat(var(--n),minmax(0,1fr))}.rc-num .d{font-size:72px}}
@container app (min-width:1000px){.rcard{margin:0}}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 var(--pad);padding:12px;background:var(--s1);border:1px solid var(--line);border-radius:16px}
.tiles>div{border-radius:12px;padding:10px 4px 8px;text-align:center;background:var(--s2)}
.tiles .d{font-size:26px}
.tiles .dx{font-size:8.5px;color:var(--mu2);margin-top:6px}
.tiles .w{background:rgba(var(--li-rgb),.14)} .tiles .w .d{color:var(--li-tx)}
.tiles .a,.tiles .n{background:none;border:1px dashed var(--line)} .tiles .a .d,.tiles .n .d{color:var(--mu2)}
@container app (min-width:1000px){.tiles{margin:0;grid-template-columns:repeat(8,minmax(0,1fr))}}
.h2h{margin:0 var(--pad);border:1px solid var(--line);border-radius:16px;background:var(--s1);overflow:hidden}
.h2h-r{container:h2h/inline-size}
.h2h-r+.h2h-r{border-top:1px solid var(--line)}
.h2h-r>button{display:grid;grid-template-columns:minmax(0,1fr) minmax(44px,24%) 52px 14px;gap:12px;align-items:center;width:100%;text-align:left;padding:13px 14px}
.h2h-r .nm{font-weight:600;font-size:16px;line-height:1.3}
.h2h-r .sm{font-size:13px;color:var(--mu);margin-top:3px}
.bar{height:7px;border-radius:4px;background:var(--s4);overflow:hidden}
.bar i{display:block;height:100%;background:var(--li);border-radius:4px}
.h2h-r .rec{font-size:28px;text-align:right;white-space:nowrap}
.h2h-r .rec.up{color:var(--li-tx)}
.h2h-r .chev svg{width:14px;height:14px;color:var(--mu2);transition:transform .15s}
.h2h-r.open .chev svg{transform:rotate(180deg);color:var(--li-tx)}
.h2h-r .scores{display:none;padding:0 14px 14px}
.h2h-r.open .scores{display:block}
.h2h-r.open{background:var(--s2)}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sgrid a{display:block;text-align:center;padding:8px 2px;border-radius:8px;background:var(--s3);color:var(--mu);font-weight:600;font-size:14px}
.sgrid a.W{background:rgba(var(--li-rgb),.16);color:var(--li-tx)}
@container h2h (max-width:320px){.h2h-r>button{grid-template-columns:minmax(0,1fr) 56px 14px}.h2h-r .bar{display:none}}
@container app (min-width:1000px){.h2h{margin:0}}
.wkacc{margin:0 var(--pad);border:1px solid var(--line);border-radius:16px;background:var(--s1);overflow:hidden}
.wkacc .wa+.wa{border-top:1px solid var(--line)}
.wkacc .wa>button{display:grid;grid-template-columns:58px minmax(0,1fr) auto 16px;gap:10px;align-items:center;width:100%;text-align:left;padding:14px}
.wkacc .wa .d{font-size:24px}
.wkacc .wa .rec{font-size:24px;color:var(--li-tx)}
.wkacc .wa .rec.even{color:var(--tx)}
.wkacc .wa .rec.neg{color:var(--mu)}
.wkacc .wa .gl{display:none;padding:0 14px 10px}
.wkacc .wa.open .gl{display:block}
.wkacc .wa.open>button .chev svg{transform:rotate(180deg)}
.wkacc .gl>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.wkacc .gl .d{font-size:22px}
.wkacc .chev svg{width:14px;height:14px;color:var(--mu2)}
@container app (min-width:1000px){.wkacc{margin:0}}
.swapnote{margin:14px var(--pad) 0;padding:12px 14px;border-radius:14px;background:rgba(var(--blue-rgb),.08);border:1px solid rgba(var(--blue-rgb),.3);font-size:14px;line-height:1.5}
.swapnote .dx{color:var(--blue);margin-bottom:8px}
.swapnote p{margin-bottom:6px}
.swapnote .btn{margin-top:4px}
.swapnote.amber{background:rgba(var(--amber-rgb),.08);border-color:rgba(var(--amber-rgb),.3)}
.swapnote.amber .dx{color:var(--amber)}
@container app (min-width:1000px){.swapnote{margin:14px 0 0}}
.pgrid{display:block}
@container app (min-width:1000px){.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;align-items:start}}

/* hub placeholder (A14) */
.hubk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:18px var(--pad) 0;border:1px solid var(--line);border-radius:16px;background:var(--s1)}
.hubk>div{padding:14px 4px;text-align:center}
.hubk>div+div{border-left:1px solid var(--line)}
.hubk .d{font-size:30px}
.hubk .dx{font-size:8.5px;color:var(--mu);margin-top:7px}
.howto{margin:22px var(--pad) 0;padding:18px;border:1px dashed var(--line);border-radius:16px}
.howto .d{font-size:24px;margin-bottom:12px}
.howto ol{padding-left:18px;color:var(--mu);font-size:14px;line-height:1.55;display:flex;flex-direction:column;gap:10px}
.howto ol b{color:var(--tx)}
@container app (min-width:1000px){.hubk,.howto{margin-left:0;margin-right:0}}

/* FAQ */
.faq{margin:0 var(--pad);display:flex;flex-direction:column;gap:8px}
.faq details{background:var(--s1);border:1px solid var(--line);border-radius:14px}
.faq summary{list-style:none;padding:14px 16px;font-weight:600;display:grid;grid-template-columns:minmax(0,1fr) 16px;gap:10px;align-items:center;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:14px;height:14px;color:var(--mu2)}
.faq details[open] summary svg{transform:rotate(180deg);color:var(--li-tx)}
.faq .a{padding:0 16px 16px;color:var(--mu);line-height:1.6;font-size:14px}
.faq .a strong{color:var(--tx)}
.faq .a a{color:var(--li-tx);text-decoration:underline}
@container app (min-width:1000px){.faq{margin:0}}

/* ─── ORGANISER: enter results (A13 / D5) + live courtside (A4 / D2) ─── */
.prog{margin:16px var(--pad) 0}
.prog .top2{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.prog .d{font-size:34px}
.prog .d span{color:var(--mu2)}
.prog .barline{height:8px;border-radius:4px;background:var(--s2);margin-top:12px;overflow:hidden}
.prog .barline i{display:block;height:100%;background:var(--li)}
@container app (min-width:1000px){.prog{margin:16px 0 0}}
.ent{container:ent/inline-size;margin:0 var(--pad) 8px;border-radius:16px;background:var(--s1);border:1px solid var(--line)}
.ent-in{display:grid;grid-template-columns:44px minmax(0,1fr) 62px;gap:12px;align-items:center;padding:10px 12px 10px 10px}
.ent.cur{border-color:var(--li-tx)}
/* live courtside search (one list of every game, found by player or game number) */
.cs-find{margin-top:14px}
.cs-box{position:relative}
.cs-find .inp{width:100%;padding-left:42px;padding-right:44px;font-size:16px}   /* 16px: iPhone doesn't zoom in */
.cs-find .inp::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.cs-find .cs-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--mu);pointer-events:none;display:flex}
.cs-find .cs-ic svg{width:18px;height:18px}
.cs-find .cs-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:10px;border:0;background:none;color:var(--mu);font-size:22px;line-height:1;cursor:pointer}
.cs-find .cs-x:hover{color:var(--tx)}
.cs-list .ent[hidden],#cs-none[hidden]{display:none}
.ent.saved{opacity:.85}
.ent .n{font-size:22px;color:var(--mu);text-align:center}
.ent.cur .n{color:var(--li-tx)}
.ent .t{display:flex;flex-direction:column;gap:12px;font-weight:600;font-size:15px}
.ent .t .lz{color:var(--mu);font-weight:500}
.ent .boxes{display:flex;flex-direction:column;gap:8px}
.sbox{width:62px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;font-family:'Archivo';font-stretch:62%;font-weight:800;font-size:26px;color:var(--tx)}
.sbox.on{border-color:var(--li-tx);box-shadow:0 0 0 3px rgba(var(--li-rgb),.22)}
.sbox.w{color:var(--li-tx);border-color:rgba(var(--li-rgb),.4)}
.ent .meta{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px 66px}
@container ent (max-width:300px){.ent-in{grid-template-columns:34px minmax(0,1fr) 56px;gap:9px}.sbox{width:56px}.ent .meta{padding-left:12px}}
@container app (min-width:1000px){.ent{margin:0 0 8px}}
.padbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--padbar);border-top:1px solid var(--line);padding:10px 10px calc(10px + var(--safe-b))}
.padbar .ph2{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 8px 10px;font-size:14px;color:var(--mu)}
.padbar .ph2 b{color:var(--tx)}
.padbar .ph2 .who{flex:1;min-width:0;overflow-wrap:anywhere}
.pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-width:560px;margin:0 auto}
.pad button{height:54px;border-radius:12px;background:var(--key);font-size:24px;font-weight:500}
.pad button.go{background:var(--li);color:var(--on-li);font-size:16px;font-weight:700;letter-spacing:.06em}
.pad button.alt{font-size:15px;color:var(--mu)}
.pad button:active{filter:brightness(1.3)}
.has-pad .shell{padding-bottom:330px}
@container app (min-width:1000px){.padbar{display:none}.has-pad .shell{padding-bottom:0}}
.entgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@container main (min-width:1150px){.entgrid{grid-template-columns:minmax(0,1fr) 320px;gap:24px}}
.ent-d{display:none}
@container app (min-width:1000px){
  .ent-d{display:block}
  .ent-d.entgrid{display:grid}
  .ent-m{display:none}
  .dres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;background:var(--s1);border:1px solid var(--line);border-radius:16px;padding:12px}
  /* iPad landscape / small laptops: one game per row so both team names keep their full width */
  @container main (max-width:1149px){.dres{grid-template-columns:minmax(0,1fr)}}
  .drow{container:drow/inline-size;display:grid;grid-template-columns:26px minmax(0,1fr) 48px 48px minmax(0,1fr) 22px;gap:8px;align-items:center;padding:6px 6px;border-radius:10px;border:1px solid transparent}
  .drow.cur{border-color:var(--li-tx)}
  .drow .n{color:var(--mu2);font-family:'Archivo';font-stretch:62%;font-weight:800;font-size:20px;text-align:center}
  .drow .a{text-align:left;font-weight:600} .drow .b{text-align:right;font-weight:600}
  .drow .lz{color:var(--mu);font-weight:500}
  .drow input{width:48px;height:42px;border-radius:9px;border:1px solid var(--line);background:var(--bg);text-align:center;font-family:'Archivo';font-stretch:62%;font-weight:800;font-size:22px;color:var(--tx)}
  .drow input:focus{border-color:var(--li-tx);outline:none;box-shadow:0 0 0 3px rgba(var(--li-rgb),.22)}
  .drow input.w{color:var(--li-tx);border-color:rgba(var(--li-rgb),.4)}
  .drow .ok{width:20px;height:20px;border-radius:50%;background:rgba(var(--li-rgb),.18);color:var(--li-tx);display:grid;place-items:center}
  .drow .ok svg{width:12px;height:12px}
}
.side-card{padding:18px}
.side-card .d{font-size:28px}
.mini-t>div{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-weight:600}
.mini-t .d{font-size:20px}
.live-head{display:inline-flex;align-items:center;gap:8px}
.ticks{display:flex;gap:3px;margin-top:12px}
.ticks i{flex:1;height:26px;border-radius:4px;background:var(--s2)}
.ticks i.on{background:var(--li-dim)} .ticks i.cur{background:var(--li)}

/* ─── ORGANISER: setup + dashboard + new league (A5) ─── */
.set{margin:0 var(--pad)}
.set .card{padding:16px;margin-bottom:12px}
.set h3{font-size:22px;margin-bottom:12px}
@container app (min-width:1000px){.set{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 18px;align-items:start}}
.set .card{container:setcard/inline-size}
.trow-a{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
@container setcard (min-width:520px){.trow-a{grid-template-columns:minmax(0,1fr) auto}}
.trow-a .nm{font-weight:600;line-height:1.3}
.trow-a .acts{display:flex;gap:6px;flex-wrap:wrap}
@container setcard (min-width:520px){.trow-a .acts{justify-content:flex-end}}
.opt{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:12px;align-items:center;text-align:left;width:100%;padding:16px;border-radius:16px;background:var(--s1);border:1px solid var(--line);margin-bottom:10px}
.opt .d{font-size:28px;margin-bottom:8px}
.opt p{color:var(--mu);font-size:14px;line-height:1.45}
.opt.on{border-color:var(--li-tx);background:linear-gradient(90deg,rgba(var(--li-rgb),.08),var(--s1) 70%)}
.opt .ring{width:28px;height:28px;border-radius:50%;border:2px solid var(--mu2)}
.opt.on .ring{border:8px solid var(--li)}
.opt:disabled{opacity:.45}
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:16px var(--pad) 0}
.steps i{height:4px;border-radius:2px;background:var(--line)} .steps i.on{background:var(--li)}
@container app (min-width:1000px){.steps{margin:16px 0 0}}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--s1)}
.stepper{flex-wrap:wrap}
.stepper .dx{color:var(--mu);white-space:nowrap}
.stepper .d{font-size:36px;margin-top:6px}
.stepper .bt{display:flex;gap:6px}
.stepper .bt button{width:38px;height:38px;border-radius:10px;background:var(--s2);display:grid;place-items:center}
.stepper .bt svg{width:16px;height:16px}
.wiz{margin:0 var(--pad)}
@container app (min-width:1000px){.wiz{margin:0}}
.lg{container:lg/inline-size;display:block;padding:16px;border-radius:16px;background:var(--s1);border:1px solid var(--line);margin:0 var(--pad) 10px}
.lg .d{font-size:26px;margin:8px 0 8px}
.lg .row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lg .barline{height:5px;border-radius:3px;background:var(--s2);margin-top:12px;overflow:hidden}
.lg .barline i{display:block;height:100%;background:var(--li)}
.lg.dim{opacity:.6}
@container app (min-width:1000px){.lg{margin:0 0 10px}.lgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}}
/* archived / deleted: compact rows; actions sit beside the name, or under it on a narrow row */
.llist{display:flex;flex-direction:column;gap:8px;margin:0 var(--pad)}
.lrow{container:lrow/inline-size;padding:12px 14px;border-radius:14px;background:var(--s1);border:1px solid var(--line)}
.lrow .nm{font-weight:600;font-size:16px;line-height:1.3;text-wrap:balance}
.lrow .meta{color:var(--mu);font-size:13px;margin-top:3px;text-wrap:pretty}
.lr-b{display:flex;gap:6px;margin-top:10px}
@container lrow (min-width:460px){.lr-in{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}.lr-b{margin-top:0}}
@container app (min-width:1000px){.llist{margin:0}}
.dash-ctas{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.cta.alt{background:var(--s1);color:var(--tx);border:1px solid var(--line)}
/* two-line call to action: a short title + a plain-English line, so nothing wraps awkwardly */
.cta.two{text-align:left}
.cta .ct{display:flex;flex-direction:column;gap:6px;min-width:0}
.cta .cs{font-weight:600;font-size:14px;line-height:1.3;opacity:.75}
@container main (min-width:560px){.dash-ctas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container app (min-width:1000px){.dash-ctas{gap:0 14px}}
/* players across leagues */
.pl-check{display:flex;flex-direction:column;gap:10px;margin:0 var(--pad)}
.pl-pair{padding:16px}
.pl-pair .dx{margin-bottom:12px}
.pl-two{container:pltwo/inline-size;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@container main (min-width:520px){.pl-two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pl-name{font-weight:700;font-size:17px;margin-bottom:4px}
.pl-apps{display:flex;flex-direction:column;gap:8px}
.pl-apps>div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.pl-keys{display:flex;flex-direction:column;gap:6px}
@container app (min-width:1000px){.pl-check{margin:0}}
/* player hub */
.hub-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.hub-links .chip{color:var(--tx)}
.hub-links .chip svg{width:11px;height:11px}
.hub-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 var(--pad)}
.hub-chips .chip{display:inline-block;color:var(--tx);max-width:100%;white-space:normal;line-height:1.5} /* text, not flex: wraps between leagues, never inside one */
.hub-fmt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 var(--pad)}
.hub-fmt .card{padding:12px}
.hub-fmt .dx{color:var(--mu2)}
.hub-fmt .d{font-size:20px;margin-top:8px;color:var(--mu2)}
.hub-fmt .on .dx{color:var(--mu)} .hub-fmt .on .d{color:var(--li-tx)}
.hub-list{display:flex;flex-direction:column;gap:8px;margin:0 var(--pad)}
.hub-s{display:block;padding:14px 16px}
.hub-s-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.hub-with{font-weight:600;font-size:16px;margin:6px 0 4px}
.hub-rank{font-size:40px;text-align:right;white-space:nowrap}
.hub-rank .of,.hl .of{font-size:.5em;color:var(--mu2)}
@container app (min-width:1000px){.hl.hl4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hub-sub-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;color:var(--amber)}
@container app (min-width:1000px){.hub-chips,.hub-fmt,.hub-list{margin-left:0;margin-right:0}.hub-fmt{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.hub-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}}
.foot{margin:34px var(--pad) 0;color:var(--mu2);font-size:12px;display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center}
@container app (min-width:1000px){.foot{margin:34px 0 0}}

/* "Fancy playing in our next league?" (interest.js — live's bar, player view only) */
.ibar{position:fixed;left:12px;right:12px;bottom:calc(var(--navh) + var(--safe-b) + 12px);z-index:45;max-width:480px;margin:0 auto;max-height:calc(100dvh - var(--navh) - var(--safe-b) - 36px);overflow:auto;
  background:var(--s2);border:1px solid var(--line);border-left:4px solid var(--li);border-radius:16px;padding:14px 12px 14px 16px;box-shadow:0 14px 34px rgba(0,0,0,.35);
  opacity:0;transform:translateY(14px);transition:opacity .3s,transform .3s}
.ibar.show{opacity:1;transform:none}
.ibar-row{display:flex;align-items:flex-start;gap:8px}
.ibar-msg{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:2px}
.ibar-msg b{font-size:15px;font-weight:700;line-height:1.3} .ibar-msg span{font-size:13.5px;color:var(--mu);line-height:1.45}
.ibar-x{width:32px;height:32px;margin:-4px -2px 0 0}
.ibar-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ibar.open .ibar-acts{display:none}
.ibar-form{display:none;margin-top:14px} .ibar.open .ibar-form{display:block}
.ibar-form .field{margin-bottom:10px}
.ibar-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ibar-leagues{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ibar-leagues .check{padding:10px 12px;font-size:14px}
.ibar-err{min-height:18px;margin:8px 0 4px;font-size:13px;color:var(--lo)}
.ibar-form .note{font-size:12.5px}
.ibar-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
@media (max-width:359px){.ibar-leagues{grid-template-columns:1fr}}
@media (min-width:1000px){.ibar{left:auto;right:24px;bottom:24px;width:420px;max-height:calc(100dvh - 48px)}}

/* Player hub › Your leagues: the way out of the hub into each league (leagues under way big, the rest listed) */
.hx-now{display:grid;gap:8px;margin:0 var(--pad)}
.hx-now .cta .d{font-size:24px}
.hx-now+.hx-lgs{margin-top:8px}
.hx-lgs .nm{font-size:15px}
@container app (min-width:1000px){.hx-now,.hx-lgs{margin-left:0;margin-right:0}.hx-now{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.hx-lgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}}
.hx-now>:only-child{grid-column:1/-1} /* one league under way: full width */
@container tl (max-width:360px){.hx-lgs a{grid-template-columns:44px minmax(0,1fr);row-gap:2px}.hx-lgs .meta{grid-column:2;text-align:left;white-space:normal}.hx-lgs .d{grid-row:span 2}} /* narrow rows: the detail goes under the name */

/* Scoring form (rules.js) — the wizard's "How is it scored?" and Setup › League › Scoring */
.sc{display:flex;flex-direction:column;gap:8px}
.sc-h{font-family:'Archivo';font-stretch:115%;font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);margin:14px 0 2px}
.sc>.sc-h:first-child{margin-top:0}
.sc .opt .d{font-size:24px;margin-bottom:6px}
.sc .seg.sc-seg{margin:0}
.sc-other{margin:4px 0 0}
.sc-note{margin:2px 0 0}
.sc-rules{margin:10px 0 0} .sc-rules textarea{resize:vertical;min-height:72px;font-size:15px}
.sc-sum{display:flex;flex-direction:column;gap:4px;margin-top:6px;padding:14px;border-radius:14px;background:rgba(var(--li-rgb),.08);border:1px solid rgba(var(--li-rgb),.3)}
.sc-sum b{font-size:16px;line-height:1.35}
.rules-card{margin:0 var(--pad);padding:4px 16px;display:flex;flex-direction:column}
.rules-card>div{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--line)} .rules-card>div:last-child{border-bottom:0}
.rules-card b{font-size:16px;line-height:1.35;font-weight:600} .rules-card .note{margin:0}

/* Date picker (ui.js dateField / pickDate) */
.datef{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer}
.datef.datef-none span{color:var(--mu2)}
.datef svg{width:18px;height:18px;color:var(--mu);flex:none}
.datef:hover svg,.datef:focus-visible svg{color:var(--li-tx)}
.cal{user-select:none}
.cal-head{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;margin-bottom:10px}
.cal-m{text-align:center;font-size:24px}
.cal-w,.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-w span{text-align:center;font-size:10px;color:var(--mu);padding:4px 0}
.cal-d{height:44px;border-radius:12px;font-weight:600;font-size:15px;color:var(--tx);border:1px solid transparent}
.cal-d:hover{background:var(--s2)}
.cal-d.today{border-color:var(--li-tx)}
.cal-d.on{background:var(--li);color:var(--on-li);border-color:var(--li)}
.cal-pick{margin-top:12px;text-align:center;min-height:20px}
@container app (max-width:359px){.sc-seg button{letter-spacing:.05em;padding-left:2px;padding-right:2px}} /* "Serve to win" fits three across on 320px phones */

/* One clear way into your player hub (hubview.js hubButton) — Tonight, your team's page */
.hubbtn{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;gap:12px;align-items:center;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--s1);border:1px solid rgba(var(--li-rgb),.35)}
.hubbtn:hover{border-color:var(--li-tx)}
.hubbtn>i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--li);color:var(--on-li)} .hubbtn>i svg{width:18px;height:18px}
.hubbtn .hb-t{display:flex;flex-direction:column;gap:2px;min-width:0} .hubbtn b{font-size:15px;font-weight:700} .hubbtn .hb-t span{font-size:13px;color:var(--mu);line-height:1.35}
.hubbtn>svg{width:16px;height:16px;color:var(--mu)}

.padbar .ph2-go{flex:none;padding:8px 2px 8px 12px;margin:-8px 0} /* the pad header's Next/Save: a real button, a thumb-sized target */
.sheet:focus{outline:none} /* focused so Escape closes it — no ring */

/* Setup › Teams: My hub emails (dashboard sign-in only) — who has one, and the season list */
.em-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.em-head .btn svg{width:14px;height:14px}
.em-line{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:12px;color:var(--mu2)}
.em-line span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .em-line .has{color:var(--li-tx)} .em-line svg{width:12px;height:12px}
.em-list{display:flex;flex-direction:column;gap:8px}
.em-row{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:10px;align-items:center}
.em-row span{font-weight:600;font-size:14px;overflow-wrap:anywhere}
@container sheet (max-width:420px){.em-row{grid-template-columns:minmax(0,1fr)}.em-row{gap:4px}}
/* Dashboard › Players › All emails: name → email, searchable, tap to edit */
.em-all{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto}
.em-all-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px;align-items:center;text-align:left;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);color:var(--tx);cursor:pointer}
.em-all-row:hover{border-color:var(--li-tx)} .em-all-row b{font-weight:600;font-size:14px;overflow-wrap:anywhere} .em-all-row span{color:var(--mu);font-size:13px;overflow-wrap:anywhere}
@container sheet (max-width:420px){.em-all-row{grid-template-columns:minmax(0,1fr);gap:2px}}
.pl-hub{flex-wrap:wrap} .pl-hub>div:first-child{flex:1 1 220px;min-width:0} /* the two buttons drop under the text on narrow phones */

/* Password boxes with a show/hide eye (ui.js pwField) */
.pw{position:relative;display:block}
.pw .inp{padding-right:52px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:40px;display:grid;place-items:center;border-radius:10px;color:var(--mu);background:none;border:0;cursor:pointer}
.pw-eye:hover,.pw-eye[aria-pressed="true"]{color:var(--li-tx)} .pw-eye svg{width:20px;height:20px}
.pw-eye:focus-visible{outline:2px solid var(--li-tx);outline-offset:-2px}