/* Night Watch — Grok Fantasy. MOBILE FIRST: the base rules ARE the iPhone
 * layout; every media query widens it. Written that way deliberately, because
 * Mike reads this on a phone far more than on a desktop. */

*,*::before,*::after{box-sizing:border-box}

html,body{
  /* clip, not hidden: `hidden` on html kills position:sticky in Safari. */
  overflow-x:clip;
  margin:0;
}
html{
  background:var(--field);
  -webkit-text-size-adjust:100%;      /* iOS rotates to landscape and inflates text without this */
  scroll-behavior:smooth;
}
body{
  background:var(--field);
  color:var(--ink-2);
  font:400 var(--t-body)/1.58 var(--f-body);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;  /* kills the grey flash on every tap */
  touch-action:manipulation;                /* kills the 300ms double-tap zoom delay */
  /* The notch and the home indicator. Without these the chrome sits under the
   * status bar and the bottom rail under the gesture bar on every modern iPhone. */
  padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}

/* ⛔ 16px MINIMUM on anything focusable. Mobile Safari force-zooms the whole
 *    page when you focus an input under 16px, and it never zooms back out.
 *    This one line is the difference between "beautiful" and "broken" on an iPhone. */
input,select,textarea,button{font-size:max(16px,1rem)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:var(--s2);z-index:99;background:var(--field-2);
  border:1px solid var(--gold-mid);padding:var(--s2) var(--s3);color:var(--ink-1)}
:focus-visible{outline:2px solid var(--gold-core);outline-offset:3px;border-radius:2px}

/* ── Move 6: micro type doing real work ──────────────────────────────────── */
.mono{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--ink-3)}
.telemetry{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);padding:var(--s3) 0}
.telemetry span{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--ink-3)}
.telemetry b{color:var(--ink-2);font-weight:400;white-space:nowrap}

/* ── Move 2: the gradient phrase. ONE per view. ──────────────────────────── */
.lift{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* ── Move 7: the hairline that cuts, carrying two facts ──────────────────── */
.cut{border-top:1px solid var(--rule);display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--s1) var(--s3);padding-top:var(--s2);flex-wrap:wrap}
.cut > *{min-width:0}

/* ── Move 5: NO nav bar. Edge-aligned chrome; a sheet on the phone. ──────── */
.chrome{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:var(--s2);
  padding:calc(var(--s2) + env(safe-area-inset-top)) var(--gut) var(--s2);
  background:color-mix(in srgb,var(--field) 88%,transparent);
  backdrop-filter:saturate(1.2) blur(14px);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid var(--rule-2);
}
.mark{font-family:var(--f-display);font-weight:200;font-size:var(--t-h3);
  letter-spacing:-.02em;color:var(--ink-1);white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.mark em{font-style:normal;color:var(--ink-4)}
.vr{width:1px;align-self:stretch;background:var(--rule);margin-inline:var(--s1)}
.chrome .spacer{flex:1 1 auto;min-width:0}
#clock{flex:0 0 auto;white-space:nowrap}
@media (max-width:440px){#clock{display:none}}   /* never let it wrap to two lines */

/* Sport switch. Radio-driven: works with JavaScript OFF (move 5's requirement). */
.switch{display:flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden;flex:0 0 auto}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch label{
  display:flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 clamp(12px,3.4vw,20px);cursor:pointer;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--ink-3);
  transition:color .18s ease,background .18s ease;
}
.switch input:checked + label{color:var(--field);background:var(--gold-core);font-weight:500}
.switch input:focus-visible + label{outline:2px solid var(--gold-core);outline-offset:-3px}

/* The one gradient-stroke pill. border-box gradient = move 2 on a CTA. */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  min-height:var(--tap);padding:0 var(--s3);border-radius:999px;cursor:pointer;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--ink-1);
  border:1px solid transparent;
  background:
    linear-gradient(var(--field),var(--field)) padding-box,
    var(--accent-grad) border-box;
  transition:color .2s ease,transform .2s ease;
}
.pill:hover{color:var(--gold-pale)}
.pill:active{transform:translateY(1px)}
.pill[disabled]{opacity:.45;cursor:default}
.pill--solid{background:var(--accent-grad);color:#120D02;font-weight:600;border:0}

/* ── Move 3: the fold. Enormous light type, hard-left, NEVER centred. ────── */
.fold{
  display:grid;grid-template-rows:1fr auto auto;
  /* 100dvh, not 100vh. Mobile Safari's 100vh includes the toolbar it then
   * overlays, so a 100vh fold is always ~90px too tall and the cut rule sits
   * permanently off-screen. dvh is the fix. */
  /* Phone: a fold that eats the whole viewport just hides the controls. Capped,
   * so the first ledger row is always within one short scroll. */
  min-height:clamp(400px,62dvh,560px);
  padding-block:var(--s4) var(--s3);
  position:relative;
}
.fold__in{align-self:end;max-width:22ch;padding-bottom:var(--s4)}
@media (min-width:760px){
  .fold{min-height:calc(100dvh - 150px)}
  .fold__in{align-self:center;padding-bottom:0}
}
.eyebrow{display:block;font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--gold-mid);
  margin-bottom:var(--s3)}
h1,.display{
  font-family:var(--f-display);font-weight:200;   /* 200. At 400 it is a generic dark SaaS page. */
  font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);
  color:var(--ink-1);
  text-wrap:balance;
}
.lede{color:var(--ink-3);font-size:var(--t-body);max-width:46ch;margin-top:var(--s3)}

/* Move 4: photography MASKED into the field. Never a dark rectangle on top. */
.photo--fold{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 86% 6%, rgba(233,185,79,.16) 0%, rgba(201,162,63,.07) 34%, transparent 68%),
    radial-gradient(70% 60% at 4% 96%, rgba(111,211,154,.05) 0%, transparent 60%);
  opacity:1;
  /* Phone: the type sits ON the image, so the mask runs top-to-bottom. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.35) 48%,transparent 78%);
          mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.35) 48%,transparent 78%);
}

/* ── Density. One shift, deliberately. ─────────────────────────────────────── */
.band{padding-block:var(--s5);border-top:1px solid var(--rule-2)}
.band--tight{padding-block:var(--s4)}
.band__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
h2{font-family:var(--f-display);font-weight:200;font-size:var(--t-h2);
  line-height:1.06;letter-spacing:-.022em;color:var(--ink-1)}

/* ── THE LEDGER. The default list on this site. Never a card grid. ───────── */
.ledger{border-top:1px solid var(--rule)}
.entry{
  display:grid;gap:2px var(--s3);
  /* PHONE: two rows. Index + name on top, the mono stat line beneath.
   * ⛔ A 5-column grid squeezed into 320px is the single ugliest thing a
   *    data-dense board can do on a phone — names truncate to "P. Fishbu…"
   *    and the numbers collide. Reflowing is not a compromise, it is better. */
  grid-template-columns:2.6ch 1fr auto;
  align-items:baseline;
  padding:var(--s2) 0;
  border-bottom:1px solid var(--rule-2);
  min-height:var(--tap);
}
.entry__i{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.06em;
  color:var(--ink-4);font-variant-numeric:tabular-nums}
.entry__n{font-size:var(--t-small);color:var(--ink-1);font-weight:500;
  letter-spacing:-.008em;line-height:1.3;min-width:0}
.entry__n small{display:block;font-size:var(--t-micro);font-family:var(--f-mono);
  letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--ink-4);
  font-weight:400;margin-top:1px}
.entry__k{
  /* the right-aligned cadence label */
  grid-column:3;grid-row:1;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--gold-mid);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.entry__d{
  grid-column:2 / -1;grid-row:2;
  display:flex;flex-wrap:wrap;gap:1px var(--s2);
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
.entry__d b{color:var(--ink-2);font-weight:400}
.entry--slot .entry__i{color:var(--gold-mid)}
@media (min-width:760px){
  /* Desktop earns the single line. Phone does not — see above. */
  .entry{grid-template-columns:2.6ch minmax(0,21ch) 1fr auto;align-items:baseline}
  .entry__d{grid-column:3;grid-row:1;justify-content:flex-start}
  .entry__k{grid-column:4;grid-row:1}
  .entry__n small{display:inline;margin-left:var(--s1)}
}

/* Lineup block */
.lineups{display:grid;gap:var(--s4)}
@media (min-width:900px){.lineups{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5)}}
@media (min-width:1100px){.entry{grid-template-columns:2.6ch minmax(0,24ch) 1fr auto}}
.lineup__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s2);flex-wrap:wrap;padding-bottom:var(--s2)}
.lineup__t{font-family:var(--f-display);font-weight:200;font-size:var(--t-h3);color:var(--ink-1)}
.lineup__m{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lineup__m b{color:var(--gold-core);font-weight:400}

/* The one warm counter-accent — refusal copy. Once per view. */
.note--exclusion{
  border-left:2px solid var(--warn);padding:var(--s2) 0 var(--s2) var(--s3);
  color:var(--ink-3);font-size:var(--t-small);max-width:62ch}
.note--exclusion b{color:var(--warn);font-weight:500}

/* Text CTA with a hairline arrow that lengthens */
.go{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap);
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--gold-core);cursor:pointer;background:none;border:0;padding:0}
.go i{display:block;width:26px;height:1px;background:currentColor;transition:width .24s ease}
.go:hover i{width:46px}

/* Field row (key, tour, slate) */
.fields{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
@media (min-width:620px){.fields{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}}
.field label{display:block;margin-bottom:var(--s1)}
.field input,.field select{
  width:100%;min-height:var(--tap);padding:0 var(--s2);
  background:var(--field-2);color:var(--ink-1);
  border:1px solid var(--rule);border-radius:3px;
  appearance:none;-webkit-appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
  linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--s4)}

/* States */
.msg{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--ink-3);padding:var(--s3) 0}
.msg--err{color:var(--warn)}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--live);
  margin-right:var(--s1);vertical-align:middle}
.skel{height:1px;background:var(--rule);position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;background:var(--accent-grad);
  transform:translateX(-100%);animation:sweep 1.25s ease-in-out infinite}
@keyframes sweep{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none;transform:none;opacity:.4}}

/* ── MOBILE ACTION RAIL. Native-feeling, and it clears the home indicator. ── */
.rail{
  position:sticky;bottom:0;z-index:30;
  display:flex;gap:var(--s2);align-items:center;
  padding:var(--s2) var(--gut);
  padding-bottom:calc(var(--s2) + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--field) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--rule);
}
.rail .pill{flex:1;white-space:nowrap;padding-inline:var(--s2)}
@media (max-width:519px){.rail__s{display:none}}
.rail__s{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
@media (min-width:760px){.rail{position:static;border-top:1px solid var(--rule-2);justify-content:flex-start}
  .rail .pill{flex:0 0 auto}}

footer{padding-block:var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  border-top:1px solid var(--rule-2);color:var(--ink-4)}
footer p{font-size:var(--t-micro);font-family:var(--f-mono);letter-spacing:.1em;
  text-transform:uppercase}

/* Motion: EXACTLY ONE primitive. transform + opacity. */
.rev{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

[hidden]{display:none !important}

/* ── Sport switch: radios live at body level so the panels are SIBLINGS and the
 *    whole switch works with JavaScript disabled (move 5's requirement). ──── */
.sp{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.panel{display:none}
#sp-golf:checked ~ main .panel--golf,
#sp-nba:checked  ~ main .panel--nba{display:block}
#sp-golf:checked ~ .chrome label[for="sp-golf"],
#sp-nba:checked  ~ .chrome label[for="sp-nba"]{color:var(--field);background:var(--gold-core);font-weight:500}
#sp-golf:focus-visible ~ .chrome label[for="sp-golf"],
#sp-nba:focus-visible  ~ .chrome label[for="sp-nba"]{outline:2px solid var(--gold-core);outline-offset:-3px}
/* Fold copy swaps with the sport, no script involved. */
#sp-golf:checked ~ main .only-nba,
#sp-nba:checked  ~ main .only-golf{display:none}

/* 320px is real: iPhone SE 1st gen and every Dynamic-Type-enlarged phone.
 * Tighten the switch so the chrome never wraps to two lines. */
@media (max-width:359px){
  .switch label{padding:0 10px}
  .mark{font-size:14px}
  .mark em{display:none}
}