/* ====================================================================
   The Syndicate - "Ink on Paper"
   A retro-modern pools-coupon look. Three typographic layers:
     serif  (Libre Baskerville) - editorial: titles, team names, numerals
     sans   (Oswald)            - structure: labels, kickers, buttons, nav
     mono   (Space Grotesk)     - data: odds, dates, records, ticks/crosses (dot-free zero)
   Tokens are the single source of truth (see DESIGN_SYSTEM.md).
   ==================================================================== */
:root{
  --paper:#f1e6cd;          /* primary card surface */
  --paper-2:#f6edd3;        /* inset panels, inputs */
  --paper-3:#fbf4e0;        /* top of the ruled-slip gradient */
  --paper-edge:#e7d8b3;     /* group bands, chips, 2nd/3rd medals */
  --page-bg:#e3d4b2;        /* page behind the card */
  --card-border:#d8c39a;

  --ink:#241d14;            /* text, dark bands, primary fills */
  --ink-soft:#3a2d18;       /* strong mono numerals on paper */
  --muted:#6b5a3c;          /* secondary text / labels */
  /* --muted-2 is 3.33:1 on paper and 4.04:1 on ink, and --faint is 2.35:1 on paper,
     all under the 4.5:1 bar, so those combinations carry marks and never text.
     Text on paper takes --muted, and --faint clears the bar on ink at 5.71:1. */
  --muted-2:#8c7b58;        /* tertiary meta, marks rather than text */
  --faint:#a9956a;          /* placeholders, faint marks */
  --rule:#cdb98e;           /* borders, input strokes */
  --rule-soft:rgba(140,110,60,.16);

  --gold:#c9a24a;
  --gold-bright:#e6c463;    /* gold numerals on ink */
  --oxblood:#8c2b22;        /* brand red - CTA, kicker */
  --maroon-deep:#5c1610;    /* an early-kick-off pick, kept clearly off the brown ink fill */
  --lost:#a32018;           /* lost stamp + cross */
  --won:#2f6b3f;            /* won stamp + tick */
  --void:#b3a079;
  --card-yellow:#e0ad1c;    /* referee yellow, shared by the card glyphs */

  --serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --sans:"Oswald",system-ui,sans-serif;
  --mono:"Space Grotesk",ui-monospace,"SFMono-Regular",monospace;  /* clean dot-free zero, tabular figures */

  --shadow:0 14px 40px rgba(40,28,14,.18);
  --slip-shadow:inset 0 1px 0 #fffaf0,0 4px 10px rgba(40,28,14,.09);
}

*{box-sizing:border-box}
/* an author rule, so [hidden] beats element display rules like label{display:block} */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--page-bg);color:var(--ink);
  font-family:var(--serif);font-size:16px;line-height:1.5;
}
h1,h2,h3{line-height:1.1;margin:0;font-family:var(--serif);font-weight:700}
a{color:var(--oxblood)}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}

/* ---------- top bar (kept for routing, re-skinned to ink) ---------- */
.topbar{
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  padding:12px 22px;background:var(--ink);color:var(--paper);
  border-bottom:3px solid var(--gold);
}
.brand{
  font-family:var(--serif);font-weight:700;font-size:1.25rem;letter-spacing:.02em;
  color:var(--paper);text-decoration:none;line-height:1;
}
/* brand and nav share the left of the bar; the avatar sits to the right of them */
.topbar-left{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.topbar nav{display:flex;gap:.2rem;flex-wrap:wrap}
.topbar nav a{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:1px;font-size:.8rem;font-weight:500;
  color:var(--gold);text-decoration:none;padding:8px 12px;border-radius:6px;
}
.topbar nav a:hover{color:var(--paper);background:rgba(255,255,255,.08)}

/* ---------- account menu / corner login ---------- */
.login-corner{margin-left:auto}
.usermenu{margin-left:auto;position:relative}
/* two-tone avatar: a split circle, one colour + one initial per half. A clean
   system sans keeps the tiny initials legible (--sans is condensed). */
/* a fixed-width font so the two initials sit in equal cells: a wide W or M no longer
   unbalances the pair against a narrow J or I. Spline Sans Mono is humanist, not a
   terminal/monospace-code look. */
.av,.avatar{--av-font:"Spline Sans Mono",ui-monospace,monospace}
.av{display:inline-flex;width:30px;height:30px;border-radius:50%;overflow:hidden;vertical-align:middle;
  background:linear-gradient(90deg,var(--ca) 0 50%,var(--cb) 50% 100%);
  font-family:var(--av-font);font-weight:700;font-size:12px;line-height:1}
.av.sm{width:24px;height:24px;font-size:10px}
.av.lg{width:56px;height:56px;font-size:22px;border:1px solid var(--rule)}
/* colour picker: a wide swatch showing the hex inside, in an auto-contrasting colour,
   with the native picker overlaid. The label sits above with breathing room. */
.colour-row{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap;margin:0}
.colour-field{display:flex;flex-direction:column;gap:.55rem}
.colour-label{font-family:var(--sans);font-size:13px;color:var(--ink)}
.swatch{position:relative;display:flex;align-items:center;justify-content:center;
  width:9.5rem;height:2.6rem;border-radius:7px;border:1px solid var(--rule);cursor:pointer;overflow:hidden}
.swatch input[type=color]{position:absolute;inset:0;width:100%;height:100%;min-height:0;
  opacity:0;margin:0;padding:0;border:none;cursor:pointer}
.hexval{font-family:var(--mono);font-size:12px;color:var(--muted);text-transform:uppercase;font-variant-numeric:tabular-nums}
.swatch .hexval{font-size:14px;font-weight:700;letter-spacing:1px;color:inherit}
.saved-note{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--won)}
.saved-note.failed{color:var(--lost);text-transform:none;letter-spacing:0}
/* pull the two initials toward the middle: the left one sits at the right of its
   half, the right one at the left of its half, with a hair of gap at the seam */
/* the seam gap is in em so it scales with the avatar size: the small header/inline
   avatars and the large ones all keep the same spacing in proportion */
.av-h{flex:1;display:flex;align-items:center;justify-content:center}
.av-h:first-child{justify-content:flex-end;padding-right:.1em}
.av-h:last-child{justify-content:flex-start;padding-left:.1em}
.avatar{
  width:40px;height:40px;min-height:40px;border-radius:50%;border:1px solid var(--gold);overflow:hidden;
  background:linear-gradient(90deg,var(--ca) 0 50%,var(--cb) 50% 100%);
  font-family:var(--av-font);font-weight:700;font-size:.95rem;box-sizing:border-box;
  cursor:pointer;display:flex;align-items:stretch;padding:0;flex:none;
}
/* the header avatar sits at a larger font, so the same em gap plus the bigger
   monospace side-bearings read too wide. Tighten it to match the inline proportion */
.avatar .av-h:first-child{padding-right:.03em}
.avatar .av-h:last-child{padding-left:.03em}
.usermenu-pop{
  position:absolute;right:0;top:48px;z-index:30;min-width:13rem;
  background:var(--paper);color:var(--ink);border:1px solid var(--card-border);
  border-radius:8px;box-shadow:var(--shadow);padding:.7rem;display:flex;flex-direction:column;gap:.6rem;
}
.usermenu-pop[hidden]{display:none}
.um-name{font-family:var(--serif);font-weight:700;font-size:.98rem}
.um-section{display:flex;flex-direction:column;gap:.35rem}
.um-label{font-family:var(--sans);font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:600}
.um-seg{display:inline-flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.um-seg button{flex:1;border:0;background:var(--paper-2);padding:.5rem .55rem;
  font-family:var(--sans);font-size:.78rem;font-weight:500;color:var(--muted);cursor:pointer}
.um-seg button.on{background:var(--ink);color:var(--paper)}
/* in-the-red strip under the topbar, shown on every page while a balance is negative */
.redbar{background:var(--lost);color:var(--paper);text-align:center;font-family:var(--sans);
  font-size:13px;letter-spacing:.3px;padding:9px 16px}
.redbar strong{font-family:var(--mono);font-weight:700}
.um-link{font-family:var(--sans);font-size:.85rem;text-decoration:none;color:var(--ink);padding:.2rem 0}
.um-link:hover{color:var(--oxblood)}
.um-logout{font-family:var(--sans);text-transform:uppercase;letter-spacing:1px;font-size:.78rem;font-weight:600;
  text-align:center;text-decoration:none;color:var(--oxblood);border-top:1px solid var(--rule);padding-top:.6rem}

/* ---------- the stage and the paper sheet ---------- */
main{display:flex;flex-direction:column;align-items:center;padding:28px 20px 56px;gap:0}
.sheet{
  width:100%;max-width:880px;background:var(--paper);border:1px solid var(--card-border);
  border-radius:8px;box-shadow:var(--shadow);overflow:hidden;color:var(--ink);margin-bottom:18px;
}
.sheet.home{max-width:840px}
.sheet.bet{max-width:760px}
.sheet.games{max-width:880px}
.sheet.stats{max-width:940px}
.pad{padding:22px 28px}
.pad-tight{padding:16px 28px}
.sort-lab{font-family:var(--sans);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-right:10px;vertical-align:middle}

/* ---------- masthead (every screen opens with this) ---------- */
.masthead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:24px 28px 18px;border-bottom:2px solid var(--ink);
}
.kicker{font-family:var(--sans);font-size:11px;letter-spacing:3px;color:var(--oxblood);
  font-weight:600;text-transform:uppercase}
.masthead .title{font-family:var(--serif);font-weight:700;font-size:clamp(24px,5.5vw,32px);
  line-height:1;margin-top:6px;color:var(--ink)}
.masthead .sub{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:10px;letter-spacing:.3px}
.masthead .meta{font-family:var(--mono);font-size:12px;text-align:right;line-height:1.5;color:var(--muted);white-space:pre-line}

/* ---------- ink hero band ---------- */
.hero{background:var(--ink);color:var(--paper);text-align:center;padding:30px 24px 26px}
.hero .label{font-family:var(--sans);font-size:12px;letter-spacing:4px;color:var(--gold);
  font-weight:500;text-transform:uppercase}
.hero .figure{font-family:var(--serif);font-weight:700;font-size:clamp(54px,11vw,80px);line-height:.95;margin-top:4px}
.hero-stats{display:flex;justify-content:center;margin-top:18px}
.hero-stat{padding:0 28px}
.hero-stat+.hero-stat{border-left:1px solid #4a3d28}
.hero-stat .v{font-family:var(--mono);font-weight:700;font-size:20px}
.hero-stat .v.neg{color:var(--gold-bright)}
.hero-stat .k{font-family:var(--sans);font-size:10px;letter-spacing:1.5px;color:var(--faint);
  text-transform:uppercase;margin-top:2px}
/* the member's discipline record under the two stats: a mirrored pair, each card
   tilted away from the centre so the row reads the same from either side */
.hero-cards{display:flex;justify-content:center;gap:1.4rem;margin-top:14px;
  font-family:var(--mono);font-weight:700;font-size:15px;color:var(--paper)}
.hero-card{display:inline-flex;align-items:center;gap:.4rem}
.hero-cards .refcard.r{transform:rotate(8deg)}

/* ---------- pick banner (ink block + CTA) ---------- */
.banner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin:6px 28px 22px;padding:14px 20px;background:var(--ink);color:var(--paper);border-radius:6px;
}
.banner .date{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--gold)}
.banner .head{font-family:var(--serif);font-weight:700;font-size:19px;margin-top:3px}
/* the pick banner keeps the change control inline top-right, never full-width below */
.banner.pick{flex-wrap:nowrap;align-items:center}
.banner.pick > div:first-child{flex:1;min-width:0}
.banner-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid var(--gold);border-radius:8px;color:var(--gold);
  text-decoration:none;font-size:18px;line-height:1}
.banner-icon:hover{background:rgba(255,255,255,.1)}

/* ---------- coupon slip (ruled paper) ---------- */
.slip{
  position:relative;background:linear-gradient(var(--paper-3),var(--paper-2));
  border:1px solid #e3d3a8;border-radius:8px;overflow:hidden;box-shadow:var(--slip-shadow);
}
.slip::before{content:"";position:absolute;inset:0;top:46px;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 51px,var(--rule-soft) 51px 52px)}
.slip.margin::after{content:"";position:absolute;left:50px;top:46px;bottom:0;width:1px;
  background:rgba(163,32,24,.18);pointer-events:none}
.slip-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:600;
  letter-spacing:1.5px;font-size:14px;text-transform:uppercase}
.slip-bar .meta{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:1px;color:var(--gold);text-transform:uppercase}
.slip-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:16px 18px;border-top:2px dashed var(--rule)}
.slip-foot .note{font-family:var(--sans);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.slip-foot .note b{font-family:var(--mono);color:var(--ink);font-weight:700;letter-spacing:0}

/* coupon legs (bet slip) */
.leg{position:relative;display:grid;grid-template-columns:26px 40px 1fr auto auto;align-items:center;
  gap:14px;padding:13px 18px;border-bottom:1px solid var(--rule-soft)}
.leg:last-child{border-bottom:0}
.leg-no{font-family:var(--mono);color:#b09a6c;font-size:13px}
.leg-pick{min-width:0}
.leg-team{font-family:var(--serif);font-weight:700;font-size:15px}
.leg-sub{font-family:var(--sans);font-size:12px;color:var(--muted-2)}
.leg-odds{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--faint);opacity:.7;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.leg-mark{justify-self:end;display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--mono);font-size:13px;color:var(--muted)}
.leg-mark .score{font-family:var(--mono);font-weight:700;font-size:22px;color:var(--ink);letter-spacing:1px;font-variant-numeric:tabular-nums}
.leg-mark .ko{font-size:13px;color:var(--muted)}

/* last-week coupon: a row of member chips with marks under each */
.chip-row{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:0;padding:16px 18px}
.chip-cell{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 12px}
.chip-cell+.chip-cell{border-left:1px solid #dcc99c}
.chip-stamp{margin-left:auto;padding-left:14px}

/* latest coupon: roomy with air around each pick on a normal screen... */
.chip-row.tight{flex-wrap:wrap;justify-content:flex-start;gap:10px 4px;padding:22px}
.chip-row.tight .chip-cell{padding:0 16px;gap:9px}
.chip-row.tight .chip-cell .av{width:36px;height:36px;font-size:14px}
.chip-row.tight .mark{font-size:22px}
.chip-row.tight .chip-stamp{margin-left:auto;padding-left:14px;display:flex;align-items:center}
/* ...and compact, on one centred line, on a phone (the screenshot look) */
@media(max-width:620px){
  /* wrap rather than clip: at 360px a full syndicate overflows the slip, which
     hides the end chips behind the slip's overflow:hidden (WCAG 1.4.10) */
  .chip-row.tight{flex-wrap:wrap;justify-content:center;gap:8px 0;padding:14px 8px}
  .chip-row.tight .chip-cell{padding:0 5px;gap:4px}
  .chip-row.tight .chip-cell .av{width:24px;height:24px;font-size:10px}
  .chip-row.tight .mark{font-size:16px}
  .chip-row.tight .chip-stamp{flex-basis:100%;margin:10px 0 0;padding:0;justify-content:center}
}

/* responsive coupon date: weekday drops first, then the whole date goes numeric */
.slip-bar .date-mid,.slip-bar .date-num{display:none}

/* ---------- result mark (tick / cross) ---------- */
.mark{font-family:var(--mono);font-weight:700;font-size:20px;line-height:1}
.mark.won{color:var(--won)}
.mark.lost{color:var(--lost)}
.mark.void{color:var(--faint)}

/* ---------- result stamp ---------- */
.stamp{display:inline-block;font-family:var(--sans);font-weight:700;letter-spacing:2px;font-size:17px;
  text-transform:uppercase;border:3px solid;border-radius:6px;padding:5px 16px;transform:rotate(-4deg);opacity:.9}
.stamp.won{color:var(--won);border-color:var(--won)}
.stamp.lost{color:var(--lost);border-color:var(--lost)}
.stamp.void{color:var(--faint);border-color:var(--faint)}
.stamp.placed{color:var(--ink);border-color:var(--ink);font-size:14px;padding:4px 12px;transform:rotate(-3deg)}
.cashtag{font-family:var(--sans);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  background:var(--gold);color:var(--ink);border-radius:3px;padding:2px 6px;margin-left:.3rem;vertical-align:middle}
label.check{display:flex;flex-direction:row;align-items:center;gap:.5rem;font-family:var(--sans)}
label.check input{width:auto;margin:0}

/* ---------- form pills (circular W/L/V) ---------- */
.pills{display:inline-flex;gap:5px;vertical-align:middle;flex-wrap:wrap}
.pill-r{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--sans);font-weight:700;font-size:13px;color:var(--paper)}
.pill-r.W{background:var(--won)}
.pill-r.L{background:var(--lost)}
/* the void pill takes ink, not paper: --paper on --void is 2.06:1 where its won
   and lost siblings clear the bar, and ink on --void is 6.52:1 */
.pill-r.V{background:var(--void);color:var(--ink)}
.pill-r.muted{background:var(--paper-edge);color:var(--muted)}
.pill-r.sm{width:18px;height:18px;font-size:10px}

/* ---------- stat tiles ---------- */
.tiles{display:grid;gap:12px}
.tiles.t2{grid-template-columns:1fr 1fr}
.tiles.t3{grid-template-columns:repeat(3,1fr)}
.tiles.t5{grid-template-columns:repeat(5,1fr)}
.tile{border:1px solid var(--rule);border-radius:6px;padding:14px 16px;background:var(--paper-2)}
.tile .num{font-family:var(--serif);font-weight:700;font-size:clamp(22px,4vw,30px);line-height:1;
  color:var(--ink);white-space:nowrap;display:block}
.tile .lab{display:block;margin-top:4px;font-family:var(--sans);font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted)}
.tile.feat{background:var(--ink);border-color:var(--gold)}
.tile.feat .num{color:var(--gold-bright)}
.tile.feat .lab{color:var(--gold)}
.tile.won .num,.tile.pos .num{color:var(--won)}
.tile.neg .num{color:var(--lost)}

/* ---------- buttons ---------- */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;cursor:pointer;text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;
  background:var(--oxblood);color:var(--paper);border:none;padding:14px 24px;border-radius:5px;
  min-height:44px;transition:filter .12s ease,transform .05s ease;
}
button:hover,.btn:hover{filter:brightness(1.08)}
button:active,.btn:active{transform:translateY(1px)}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost,button.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.sm,button.sm{padding:9px 16px;font-size:12px;min-height:0}
.login-corner{background:var(--gold);color:var(--ink)}

/* ---------- inputs / selects ---------- */
label{display:block;margin:.6rem 0;font-family:var(--sans);font-size:13px;letter-spacing:.3px;color:var(--muted)}
input,select,textarea{
  width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--paper-2);
  border:1px solid var(--rule);border-radius:6px;padding:11px 14px;margin-top:.2rem;
}
input[type=date],input[inputmode=numeric],input[inputmode=decimal],.mono input{font-family:var(--mono)}
/* masks the PINs typed on the manage page: a temporary one set on someone else's behalf
   and the admin's own, at the test-panel unlock. Neither should be offered to a password
   manager on a staff console that may be on a shared screen, so they are not password
   fields. A member's own PIN fields, on login and change-PIN, are type=password. */
.pin-mask{-webkit-text-security:disc}
/* off screen but still in the box tree, because a password manager skips a field
   removed by display:none or visibility:hidden */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
input::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(36,29,20,.12)}
.field{display:flex;flex-direction:column;gap:0}
.field label{margin:0 0 5px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.field input,.field select{margin-top:0}
.inline{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.inline input,.inline select{margin-top:0;width:auto}
.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:.7rem 0}
.row.spread{justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .9rem}
.grid2 .full,.grid2 button{grid-column:1/-1}
.grid2 button{justify-self:start;margin-top:.7rem}

/* ---------- search field (icon + input) ---------- */
.search{display:flex;align-items:center;gap:9px;border:1px solid var(--rule);background:var(--paper-2);
  border-radius:6px;padding:0 14px}
.search .ic{font-family:var(--mono);color:var(--faint);font-size:14px}
.search input{border:none;background:transparent;padding:11px 0;margin:0}
.search input:focus{box-shadow:none}

/* ---------- segmented control ---------- */
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:6px;overflow:hidden}
.seg button{font-family:var(--sans);font-weight:500;letter-spacing:1px;text-transform:uppercase;font-size:12px;
  padding:9px 20px;border:none;background:transparent;color:var(--ink);min-height:44px}
.seg button+button{border-left:1px solid var(--rule)}
.seg button.on{background:var(--ink);color:var(--paper);font-weight:600}

/* ---------- group label band ---------- */
.band{display:flex;align-items:center;gap:12px;padding:8px 28px;background:var(--paper-edge);
  border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border)}
.band .lab{font-family:var(--sans);font-weight:600;letter-spacing:2px;font-size:12px;text-transform:uppercase;color:var(--muted)}
.band .ln{flex:1;height:1px;background:var(--rule)}
.band .note{font-family:var(--mono);font-size:11px;color:var(--faint)}
.band[hidden]{display:none}

/* ---------- status pill ---------- */
.status{font-family:var(--sans);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;
  background:var(--paper-edge);border:1px solid var(--rule);color:var(--muted)}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted-2)}
.status.open::before{background:var(--won)}
.status.settled::before{background:var(--gold)}
.status.locked::before{background:var(--oxblood)}

/* ---------- date navigator (bet slip) ---------- */
.datenav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 28px}
.datenav .when{text-align:center}
.datenav .d{font-family:var(--serif);font-weight:700;font-size:21px}
.navbtn{width:38px;height:38px;flex:none;border:1px solid #c2ac7d;background:var(--paper-2);border-radius:50%;
  cursor:pointer;font-family:var(--mono);font-size:16px;color:var(--muted);display:grid;place-items:center;
  text-decoration:none;min-height:0;letter-spacing:0;text-transform:none;font-weight:400}
.navbtn:hover{border-color:var(--ink);filter:none}
.navbtn.off{opacity:.4;pointer-events:none}

/* ---------- badges (manage, medals) ---------- */
/* nowrap: a two-word badge that broke across lines left the pill behind only part of
   its text and overhung the cell at 360px */
.badge{display:inline-flex;align-items:center;gap:.3em;font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:20px;white-space:nowrap}
.badge.early{background:#ffe9d4;color:var(--oxblood)}
.badge.taken,.badge.open{background:var(--paper-edge);color:var(--muted)}
.badge.gold{background:var(--gold);color:var(--ink)}
.badge.silver{background:#cdd6df;color:#39424c}
.badge.bronze{background:#d8915a;color:#4a2a10}
.badge.spoon{background:#8a5a2b;color:#fff}
.badge.red{background:#fde0de;color:var(--lost)}

/* leaderboard medal emoji (1st/2nd/3rd, wooden spoon for last) */
.medal{font-size:15px;line-height:1;vertical-align:-1px}

/* leaderboard rank + streak chips */
.rank{font-family:var(--sans);font-weight:700;font-size:11px;border-radius:20px;padding:3px 8px;color:var(--ink)}
.rank.gold{background:var(--gold)}
.rank.stone{background:#cdbf9c}
.streak-b{font-family:var(--sans);font-size:11px;border:1px solid;border-radius:20px;padding:2px 9px;display:inline-block}
.streak-b.W{color:var(--won);border-color:var(--won)}
.streak-b.L{color:var(--lost);border-color:var(--lost)}

/* bet heatmap: github-style weekend squares that wrap onto multiple rows */
/* bet heatmap: one row per season, a year label then that season's squares */
.heatmap{display:flex;flex-direction:column;gap:8px}
.heat-row{display:flex;align-items:center;gap:12px}
.heat-yr{flex:none;width:3.2rem;text-align:right;font-family:var(--mono);font-size:11px;
  color:var(--muted);letter-spacing:.5px}
.heat-cells{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.hsq{flex:none;width:15px;height:15px;border-radius:3px;background:var(--paper-edge);cursor:pointer}
.hsq.won{background:var(--won)}
.hsq.lost{background:var(--lost)}
.hsq.void{background:var(--void)}
.hsq.cancelled{background:var(--muted-2)}
.hsq.future{background:transparent;border:1px solid var(--rule)}      /* not yet played */
.heat-cap{font-family:var(--sans);font-size:12px;color:var(--muted);min-height:1.1em;margin-top:.5rem}
/* a button that reads as a quiet text link, eg "All bets >" beside a panel heading */
.linkbtn{background:none;border:none;border-radius:0;padding:0;min-height:0;cursor:pointer;
  color:var(--oxblood);font-family:var(--sans);font-weight:600;font-size:11px;
  letter-spacing:1.5px;text-transform:uppercase;border-bottom:1px solid transparent}
.linkbtn:hover{filter:none;border-bottom-color:var(--oxblood)}
.linkbtn:active{transform:none}

/* previous-bets result chip */
.res{font-family:var(--sans);font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:600;
  padding:3px 8px;border-radius:4px;color:var(--paper);display:inline-block}
.res.won{background:var(--won)}
.res.lost{background:var(--lost)}
.res.void{background:var(--void)}

/* ---------- referee cards ---------- */
.refcard{display:inline-block;width:.8rem;height:1.1rem;border-radius:3px;vertical-align:-2px;
  transform:rotate(-8deg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.refcard.y{background:var(--card-yellow)}
.refcard.r{background:var(--lost)}
.bookings{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--mono);font-size:13px;color:var(--muted)}
.bookings .count{display:inline-flex;align-items:center;gap:.35rem}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin-right:2px}
.dot.y{background:var(--card-yellow)}
.dot.r{background:var(--lost)}
/* card buttons sit in their own far-right column */
td.cardcol{text-align:right;white-space:nowrap}
td.cardcol .cardpick{display:inline-flex;gap:.55rem}

/* Manage: the boxed masthead carries the tab menu; every tab pane is the same
   880px column so the content below is a consistent full width on all tabs */
.manage-head{margin-bottom:18px}
/* the observer's read-only wrapper: contributes nothing to layout but still disables
   every form control inside it, so the console reads as look-but-do-not-touch */
.ro-wrap{display:contents;border:0;margin:0;padding:0;min-width:0}
.tab-pane{width:100%;max-width:880px}
.masthead.with-tabs{gap:18px}
/* the manage tab menu: real page links, mirroring the main nav recoloured for the
   light masthead. Wraps on narrow screens. */
.mtabs{display:flex;gap:.2rem;flex-wrap:wrap;align-items:center}
.mtabs a{font-family:var(--sans);text-transform:uppercase;letter-spacing:1px;font-size:.8rem;font-weight:500;
  color:var(--muted);text-decoration:none;border-radius:6px;padding:8px 12px;cursor:pointer}
.mtabs a:hover{color:var(--ink);background:rgba(0,0,0,.05)}
.mtabs a.on{color:var(--paper);background:var(--ink)}
/* overview table: name left, the money and discipline columns centred */
th.center,td.center{text-align:center}
td.center .inline{justify-content:center}
/* roles: the account column carries two irreversible actions for an active member.
   They sit side by side and wrap once the column is too narrow for both, .85rem apart
   for the same reason as the money buttons: a thumb should not catch the wrong one.
   The flex box is an inner wrapper rather than the cell itself, so the cell keeps
   table-cell layout and its border and background still fill the row's height. */
.acct-actions{display:flex;flex-wrap:wrap;gap:.85rem;align-items:flex-start}
.sm.ghost:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
td.lb-name a{color:var(--ink);text-decoration:none;font-weight:700}
td.lb-name a:hover{color:var(--oxblood)}
/* overview: give the names room, keep the adjust control compact so both buttons
   stay on one line. The amount is whole pounds and rarely above £80, so a tiny box. */
.ovw td.lb-name{width:99%}
/* add and subtract are opposite money operations with no undo, so they sit .85rem
   apart: 44px centre to centre at 360px, where .3rem left them 35px and a thumb
   could catch the wrong one. The row already scrolls inside .tablewrap. */
.topup{flex-wrap:nowrap;gap:.85rem}
.topup input{width:2.2rem;text-align:center;padding-left:4px;padding-right:4px}
.topup button{padding:0;width:1.9rem;height:1.9rem;font-size:1.3rem;line-height:1;flex:none;
  display:inline-flex;align-items:center;justify-content:center}
/* subtract is the outlined twin of add, so the two differ by glyph and by weight
   rather than by colour alone */
.topup .subtract{border-width:2px}
/* the project's own focus ring, rather than the browser's default blue */
.topup button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* issue a card: a comment then a tilted card to click (yellow left, red right) */
.cardform{display:flex;align-items:center;gap:.4rem;margin-top:.4rem;flex-wrap:nowrap}
.cardcomment{width:11rem;margin:0;padding:6px 10px;font-size:13px}
.cardbtn{flex:none;width:1.05rem;height:1.4rem;border:none;border-radius:3px;cursor:pointer;padding:0;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .1s ease,filter .1s ease;min-height:0}
.cardbtn.y{background:var(--card-yellow);transform:rotate(-8deg)}
.cardbtn.r{background:var(--lost);transform:rotate(8deg)}
.cardbtn:hover{filter:brightness(1.08)}
.cardbtn.y:hover{transform:rotate(-8deg) translateY(-2px)}
.cardbtn.r:hover{transform:rotate(8deg) translateY(-2px)}
.cardbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* discipline column: counts on the left, clickable cards on the right, lined up */
.discipline{display:flex;align-items:center;gap:.8rem;white-space:nowrap}
.cardpick{display:inline-flex;gap:.4rem}

/* ---------- native dialog modals (card issue, create player) ---------- */
.modal{border:1px solid var(--card-border);border-radius:10px;background:var(--paper);color:var(--ink);
  box-shadow:var(--shadow);padding:0;max-width:26rem;width:calc(100% - 2rem)}
.modal.wide{max-width:40rem}

/* the player's last sign-in under their name: smaller and lighter than the name, but
   still real text, so it takes --muted (5.37:1) rather than the placeholder tone */
.last-seen{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:2px;font-weight:400}

/* ---------- manage: the next few rounds ---------- */
.upcoming{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column}
.up-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--rule-soft)}
.up-row:first-child{border-top:none}
.up-date{flex:0 0 5.5rem;font-family:var(--mono);font-size:13px;color:var(--muted)}
.up-name{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink);text-decoration:none}
a.up-name:hover{color:var(--oxblood)}
.up-note{margin-left:auto}
.up-tag{font-family:var(--sans);text-transform:uppercase;font-size:9px;letter-spacing:1.5px;font-weight:600;
  color:var(--paper);background:var(--oxblood);border-radius:3px;padding:2px 6px}

/* ---------- leagues admin: one form per row ---------- */
/* leagues admin: one tight row per competition, stacking to a small card on mobile */
.lg-rows{display:flex;flex-direction:column;gap:8px;margin:.7rem 0}
/* one full-width row per league: the name takes the slack, every control is fixed
   so the row never reflows as values change. A brief glow marks an auto-save. */
.lg-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0;width:100%;
  border-radius:6px;transition:box-shadow .3s ease}
.lg-row.saved{box-shadow:0 0 0 2px var(--won) inset}
.lg-row input{margin:0;padding:7px 10px;font-size:13px}
.lg-name{flex:1 1 8rem;min-width:6rem}
.lg-code{flex:0 0 6rem;width:6rem}
.lg-short{flex:0 0 3.4rem;width:3.4rem;text-transform:uppercase}
.lg-season{flex:0 0 4rem;width:4rem;text-align:center}     /* wide enough for "2026" */

/* single-button toggles: fixed width so League/Cup and On/Off never resize the row */
.tog{flex:none;font-family:var(--sans);text-transform:uppercase;font-size:11px;letter-spacing:1px;
  font-weight:600;line-height:1;padding:8px 0;text-align:center;border-radius:6px;cursor:pointer;
  border:1px solid var(--ink);background:transparent;color:var(--ink);min-height:0}
.tog:hover{filter:none}
.tog:active{transform:none}
.tog:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tog-onoff{width:3.6rem;border-color:transparent;color:var(--paper)}
.tog-onoff.off{background:var(--lost)}                      /* off by default, reddish */
.tog-onoff.on{background:var(--won)}                        /* on, green */

/* the trash sits at the right end of the row's controls */
.lg-del{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:1px solid var(--rule);border-radius:6px;
  background:var(--paper-2);color:var(--muted)}
.lg-del:hover{border-color:var(--lost);color:var(--lost);background:var(--paper-3);filter:none}
.lg-del .ic{display:block}

@media (max-width:560px){
  .lg-row{flex-direction:column;align-items:stretch;gap:7px;
    border:1px solid var(--rule);padding:11px;background:var(--paper-2)}
  .lg-name,.lg-code,.lg-short,.lg-season{flex:1 1 auto;width:auto}
  .lg-row .tog{align-self:flex-start}
  .lg-del{align-self:flex-end;width:40px;height:36px}
}
.modal::backdrop{background:rgba(36,29,20,.5)}
.modal-body{padding:22px 24px}
.modal-body h3{font-size:1.1rem;margin-bottom:.4rem}
.modal-x{background:none;border:none;color:var(--muted);font-size:1.5rem;line-height:1;
  padding:0 .2rem;cursor:pointer}
.modal-x:hover{color:var(--ink)}
.cm-show{text-align:center;margin:.2rem 0 .6rem}
.refcard.big{width:2.6rem;height:3.6rem;border-radius:6px;display:inline-block;
  box-shadow:0 2px 5px rgba(0,0,0,.25)}
.refcard.big.y{background:var(--card-yellow);transform:rotate(-6deg)}
.refcard.big.r{background:var(--lost);transform:rotate(6deg)}

/* ---------- bet-placed note on the paper slip (players) ---------- */
.placed-note{font-family:var(--sans);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  font-size:12px;color:var(--muted);background:var(--paper-2);border:1px dashed var(--rule);
  border-radius:5px;padding:11px 16px;text-align:center}

/* cancelled outcome (stamp + result chip + heatmap square) */
.stamp.cancelled{color:var(--muted-2);border-color:var(--muted-2)}
.res.cancelled{background:var(--muted-2)}

/* early cash-out toggle: off is neutral, on is green with a lit LED left of the text */
.cashout-toggle{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
  font-family:var(--sans);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;font-size:13px;
  background:var(--paper-2);color:var(--ink);border:1px solid var(--rule);border-radius:5px;
  padding:12px 20px;min-height:44px;transition:background .12s ease,border-color .12s ease}
.cashout-toggle .led{width:11px;height:11px;border-radius:50%;background:#8a8a72;
  box-shadow:inset 0 0 2px rgba(0,0,0,.45)}
.cashout-toggle.on{background:var(--won);color:var(--paper);border-color:var(--won)}
.cashout-toggle.on .led{background:#62ff8d;box-shadow:0 0 6px 1px #62ff8d,0 0 2px #fff}

/* ---------- warning strip (early kick-off) ---------- */
.warn{display:flex;gap:.55rem;align-items:flex-start;background:#fbeede;border:1px solid #e3c089;
  color:#6b3a10;border-radius:6px;padding:12px 14px;font-family:var(--sans);font-size:13px;margin:.8rem 0}
.warn.small{padding:8px 12px;font-size:12px}

/* ---------- cards (secondary panels: manage, login) ---------- */
.card{background:var(--paper);border:1px solid var(--card-border);border-radius:8px;box-shadow:var(--shadow);
  padding:20px 24px;margin-bottom:18px;width:100%;max-width:880px}
.card.narrow{max-width:400px;margin-top:6vh}
/* the auth card heading, one home for all five auth screens so the five copies of it
   cannot drift apart again */
.card.narrow h1{font-size:1.5rem;margin:.3rem 0 .6rem}
.card h2{font-size:1.2rem;margin-bottom:.6rem}
.card h3{font-size:1.05rem;margin-bottom:.5rem}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.9rem}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:6px 0;font-family:var(--sans)}
.kv .v{font-family:var(--mono);font-weight:700}
.divider{height:1px;background:var(--rule);margin:14px 0}
.scorein{display:flex;align-items:center;gap:.3rem;white-space:nowrap}
.scorein input{width:2.6rem;text-align:center;padding:.4rem}

/* ---------- flashes ---------- */
.flash{font-family:var(--sans);font-size:14px;padding:12px 16px;border-radius:6px;margin:0 0 14px;
  width:100%;max-width:900px;border:1px solid;
  /* a reset PIN and a new member's temporary PIN arrive as six digits inside a
     sentence here, to be read down a phone, so the figures are evenly spaced */
  font-variant-numeric:tabular-nums}
.flash.ok{background:#e7f0e2;border-color:#b5d0a8;color:#2f5d34}
.flash.error{background:#f7e2df;border-color:#e2a9a2;color:var(--oxblood)}
/* transient toast for the no-reload actions: same look, floated bottom-centre */
.flash.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,12px);z-index:60;
  width:auto;max-width:min(90vw,520px);margin:0;box-shadow:var(--shadow);opacity:0;
  transition:opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);pointer-events:none}
.flash.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.flash.toast{transition:opacity .2s linear}}

/* ---------- tables / leaderboard ---------- */
table{width:100%;border-collapse:collapse}
/* headers carry --muted, not --muted-2: at 10px uppercase the tertiary tone is
   3.33:1 on paper and fails AA, where --muted is 5.37:1 on every table surface */
th{font-family:var(--sans);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:8px 10px;border-bottom:2px solid var(--ink)}
td{padding:11px 10px;border-bottom:1px solid rgba(140,110,60,.18);font-family:var(--sans);font-size:13px;vertical-align:middle}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
td.ko-cell{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-name{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--ink)}
.pos{color:var(--won);font-weight:700}
.neg{color:var(--lost);font-weight:700}
tr.inred td{background:#f7e6df}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lb{min-width:560px}

/* ---------- games list ---------- */
.gm-controls{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:18px 28px 0}
/* the stats filter sits inside .pad-tight already, so it carries no padding of its
   own and lines up with the tiles below it */
.gm-controls.st{grid-template-columns:1.2fr 1fr 1fr auto;align-items:end;padding:0}
/* the select fills the whole control and the chevron is a click-through overlay,
   so clicking anywhere (the triangle included) opens the dropdown. margin:0 stops
   the .ctl label inheriting the .field label's 5px bottom margin. */
.gm-controls .ctl{position:relative;display:flex;align-items:center;margin:0;border:1px solid var(--rule);
  background:var(--paper-2);border-radius:6px;font-family:var(--sans);font-size:14px;color:var(--ink);white-space:nowrap}
.gm-controls .ctl .car{position:absolute;right:14px;color:var(--muted);pointer-events:none}
/* hide the native select arrow so the custom .car chevron is the only indicator */
.gm-controls select{appearance:none;-webkit-appearance:none;border:none;background:transparent;
  width:100%;margin:0;padding:11px 34px 11px 14px;cursor:pointer;font-family:var(--sans);font-size:14px;color:var(--ink)}
/* the ring goes on the wrapper, not the select: the select is border:none and
   background:transparent, so the shared input:focus rule has nothing to paint */
.gm-controls .ctl:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(36,29,20,.12)}
.gm-controls select:focus{box-shadow:none}
/* stats filter row: season, from, to and reset share one height and line up */
.gm-controls.st .ctl,.gm-controls.st input,.gm-controls.st #f-reset{height:46px}
.gm-controls.st #f-reset{min-height:46px;padding-top:0;padding-bottom:0}
.games{width:100%}
.gm-row{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:16px;padding:11px 28px;
  border-bottom:1px solid var(--rule-soft)}
.day-group[hidden]{display:none}
.gm-row.mine{background:rgba(201,162,74,.13)}
.gm-row.taken{opacity:.55}
.gm-row[hidden]{display:none}
.gm-meta{text-align:center}
.gm-meta .dt{font-family:var(--mono);font-size:11px;color:var(--muted-2);line-height:1.35}
/* an early kick-off is called out on the time itself, and again in the pick colour below */
.gm-row.early .gm-meta .dt .t{font-weight:700;color:var(--oxblood)}
.gm-meta .who{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:5px}
.gm-teams{display:grid;grid-template-columns:1fr 26px 1fr;align-items:center;gap:8px;margin:0}
.gm-v{text-align:center;font-family:var(--serif);font-style:italic;color:var(--faint);font-size:13px}
/* the competition chip sits under the date, colour coded by --lg from the row */
.lgtag{display:inline-block;max-width:100%;margin-top:4px;font-family:var(--sans);font-size:9px;
  letter-spacing:.5px;white-space:nowrap;color:var(--paper);background:var(--lg,var(--muted));
  border:1px solid var(--lg,var(--muted));border-radius:3px;padding:1px 6px;text-transform:uppercase}
.gm-note{font-family:var(--sans);font-size:11px;color:var(--muted-2)}
.teambtn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;
  border:1px solid var(--rule);background:var(--paper-2);border-radius:5px;padding:9px 12px;cursor:pointer;
  transition:all .12s;text-align:left;min-height:44px;text-transform:none;letter-spacing:0;font-weight:400}
.teambtn .tn{min-width:0;overflow:hidden;text-overflow:ellipsis}
.teambtn:hover{border-color:var(--ink);filter:none;background:#efe3c2}
.teambtn .tn{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink)}
.teambtn .od{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--ink-soft)}
.teambtn .od.noprice{color:var(--faint);font-weight:400}
.teambtn.mine{background:var(--ink);border-color:var(--ink)}
.teambtn.mine .tn{color:var(--paper)}
.teambtn.mine .od{color:var(--gold-bright)}
.teambtn.taken,.teambtn:disabled{cursor:not-allowed;opacity:1}
.teambtn.taken-pick{background:var(--ink);border-color:var(--ink)}
.teambtn.taken-pick .tn{color:var(--paper)}
.teambtn.taken-pick .od{color:var(--paper-edge)}
.gm-row.early .teambtn.mine,.gm-row.early .teambtn.taken-pick{background:var(--maroon-deep);border-color:var(--maroon-deep)}
/* --- Sofascore-style live leg row (bet slip + dashboard live coupon) --- */
.sofa-leg{position:relative;display:grid;grid-template-columns:52px 1fr auto 54px;align-items:center;
  gap:10px;padding:9px 4px;border-bottom:1px solid var(--rule-soft)}
.sofa-leg:last-of-type{border-bottom:0}
.sofa-leg.clickable{cursor:pointer;border-radius:8px;transition:background .12s ease,box-shadow .12s ease}
.sofa-leg.clickable:hover{background:var(--paper-edge);box-shadow:inset 0 0 0 1px var(--rule)}
.sofa-leg.clickable:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.sf-time{text-align:center;font-family:var(--mono);line-height:1.3}
.sf-time .ko{font-size:12px;color:var(--muted)}
.sf-time .st{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.sf-time .st.ft{color:var(--muted-2)}
.sf-time .st.live{color:var(--oxblood)}
.sf-time .st.live .ap{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sf-time .st.live .ap{animation:none}}
.sf-teams{min-width:0;display:flex;flex-direction:column;gap:3px}
.sf-teams .tr{display:flex;align-items:center;gap:7px;min-width:0;font-family:var(--serif);
  font-size:14px;color:var(--muted)}
.sf-teams .tr.pick{color:var(--ink);font-weight:700}
.sf-teams .tn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-teams .od{font-family:var(--mono);font-size:11px;color:var(--faint);opacity:.8;flex:none}
.crest{width:18px;height:18px;object-fit:contain;flex:none}
.crest.none{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--paper-edge);color:var(--muted);font-family:var(--sans);
  font-size:10px;font-weight:700}
.sf-scores{font-family:var(--mono);font-weight:700;font-size:16px;text-align:center;line-height:1.3;
  font-variant-numeric:tabular-nums;color:var(--muted)}
.sf-scores.live div{color:var(--oxblood)}
.sf-scores.finished .win{color:var(--ink)}
.sf-scores.finished .lose{color:var(--muted-2)}
.sf-av{justify-self:end;display:flex;align-items:center;gap:6px}
/* the leg's status light. Bigger than the "live" dot beside the slip bar, because this is
   the thing the room reads across the coupon: dark before the off, red while the pick is
   not winning (a draw loses the acca), green in front, and blinking green on a one-goal
   lead late on, which is the captain's cue to weigh a cash-out. `leg_led` owns the rule
   and every state is in the row as words too, so neither colour nor blink is the only
   signal. Reduced motion swaps the blink for a ring, since the warning has to survive it. */
.sf-led{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none;
  background:#8a8a72;box-shadow:inset 0 0 0 1px rgba(40,28,14,.25)}
.sf-led.up{background:var(--won);box-shadow:0 0 5px 1px rgba(47,107,63,.5)}
.sf-led.down{background:var(--lost);box-shadow:0 0 5px 1px rgba(163,32,24,.45)}
.sf-led.nervy{background:var(--won);animation:ledblink 1s steps(1) infinite}
@keyframes ledblink{50%{opacity:.15}}
@media(prefers-reduced-motion:reduce){
  .sf-led.nervy{animation:none;outline:2px dotted var(--lost);outline-offset:2px}}
/* --- match-detail modal --- */
dialog.mm{border:1px solid var(--card-border);border-radius:14px;background:var(--paper);color:var(--ink);
  padding:0;max-width:420px;width:calc(100% - 32px);box-shadow:var(--shadow);overflow:hidden}
dialog.mm::backdrop{background:rgba(40,28,14,.45)}
dialog.mm[open]{animation:mm-in .16s cubic-bezier(.22,1,.36,1)}
@keyframes mm-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){dialog.mm[open]{animation:none}}
/* title bar: back / Close / next, Close dead-centred whatever width the arrows take */
.mm-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:6px 8px;
  background:var(--paper-2);border-bottom:1px solid var(--rule-soft)}
.mm-bar .mm-nav{font-family:var(--serif);font-size:22px;line-height:1;color:var(--muted);background:none;
  border:0;width:34px;height:34px;border-radius:8px;cursor:pointer;transition:background .12s ease,color .12s ease}
.mm-bar .mm-nav:first-child{justify-self:start}.mm-bar .mm-nav:last-child{justify-self:end}
.mm-bar .mm-nav:hover{background:var(--paper-edge);color:var(--ink)}
.mm-bar .mm-x{font-family:var(--sans);font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:none;border:0;padding:6px 12px;border-radius:8px;cursor:pointer;
  transition:color .12s ease}
.mm-bar .mm-x:hover{color:var(--oxblood)}
.mm-bar .mm-nav:focus-visible,.mm-bar .mm-x:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.mm-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--rule-soft);font-family:var(--serif)}
.mm-head .mm-t{font-weight:700}.mm-head .mm-t:last-child{text-align:right}
.mm-head .mm-s{font-family:var(--mono);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.mm-body{padding:12px 16px;display:flex;flex-direction:column;gap:9px;max-height:50vh;overflow:auto}
.mm-body .ev{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13px;color:var(--ink)}
.mm-body .ev.away{flex-direction:row-reverse;text-align:right}
.mm-body .ev.center{justify-content:center;text-align:center}
.mm-body .ev .m{font-family:var(--mono);color:var(--muted);min-width:34px;font-variant-numeric:tabular-nums;flex:none}
.mm-body .ev .ic{flex:none;display:inline-flex}
.mm-body .ev .evic{width:16px;height:16px;display:block}
.mm-body .ev .pl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-body .ev .pl .off{color:var(--muted-2);margin-left:7px}
.mm-body .ev .pl .tag{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-2);
  border:1px solid var(--rule);border-radius:4px;padding:0 3px;vertical-align:middle}
.mm-body .ev.k-var{color:var(--oxblood)}
.mm-body .ev.k-var .pl{font-size:12px;color:var(--muted);white-space:normal}
.mm-empty{font-family:var(--sans);font-size:13px;color:var(--muted-2);text-align:center;padding:10px 0}
/* live LED: a soft pulsing dot beside "Live" while scores are updating */
.live-led{display:inline-block;width:8px;height:8px;border-radius:50%;background:#62ff8d;
  vertical-align:middle;margin:0 2px;animation:ledpulse 1.8s ease-in-out infinite}
@keyframes ledpulse{0%,100%{opacity:1}50%{opacity:.2}}
@media(prefers-reduced-motion:reduce){.live-led{animation:none}}
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--rule)}
.tl-item{position:relative;padding:0 0 1rem 1rem}
.tl-item::before{content:"";position:absolute;left:-5px;top:5px;width:8px;height:8px;border-radius:50%;
  background:var(--ink)}
.tl-when{display:block;font-family:var(--sans);font-size:10px;letter-spacing:1px;color:var(--muted-2);
  text-transform:uppercase}
.tl-head{font-family:var(--serif);font-size:15px;color:var(--ink);display:flex;align-items:center;gap:.4rem}
.tl-note{font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:.2rem;display:flex;align-items:center;gap:.4rem}
.tag{font-family:var(--sans);font-size:9px;letter-spacing:1px;border-radius:3px;padding:2px 5px;white-space:nowrap}
.tag.you{background:var(--gold);color:var(--ink)}
.tag.who{background:var(--oxblood);color:var(--paper)}
.teampick{display:contents}

/* ---------- stats charts ---------- */
/* minmax(0,1fr): let tracks shrink below the canvas's intrinsic width, so the
   charts reflow back to full visibility when the window widens again */
/* stats lower half: leaderboard, previous bets and charts as one consistent panel stack */
.panels{display:flex;flex-direction:column;gap:18px}
.panel.wide{width:100%}
.panel.wide .tablewrap{margin-top:12px}
.panel.wide .heatmap{margin-top:14px}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.panel{border:1px solid var(--card-border);background:var(--paper-2);border-radius:8px;padding:18px 20px;min-width:0}
.panel h3{font-family:var(--serif);font-weight:700;font-size:16px}
.panel .sub{font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:2px;margin-bottom:10px}
.chartbox{position:relative;height:240px}
.empty{color:var(--muted);font-size:.9rem;padding:2rem 0;text-align:center}

/* ---------- odds format toggle (global setting) ---------- */
.frac{display:none}
body.odds-frac .dec{display:none}
body.odds-frac .frac{display:inline}

@media(prefers-reduced-motion:reduce){*{transition:none !important}}

/* ====================================================================
   Responsive - single breakpoint. The card runs edge-to-edge, grids
   collapse, the bet-slip odds drop to a second line, tables scroll.
   ==================================================================== */
@media(max-width:720px){
  main{padding:0 0 40px}
  .flash{margin:14px}
  .sheet{border-radius:0;border-left:none;border-right:none}
  .card{border-radius:0;border-left:none;border-right:none;margin-bottom:0;border-top:none}
  .charts{grid-template-columns:1fr}
  .tiles.t5,.tiles.t3{grid-template-columns:repeat(2,1fr)}
  .tiles.t5 .num{font-size:20px}
  .tiles.t5 .last-wide{display:none}                 /* hide Total winnings on mobile */
  .gm-controls,.gm-controls.st{grid-template-columns:1fr 1fr}
  .gm-controls .search{grid-column:1/-1}
  /* stats filter: Season next to Reset, From and To on the row below */
  .gm-controls.st .field:nth-of-type(1){order:1}
  .gm-controls.st #f-reset{order:2}
  .gm-controls.st .field:nth-of-type(2){order:3}
  .gm-controls.st .field:nth-of-type(3){order:4}
  .masthead{flex-direction:column;align-items:flex-start}
  .masthead .meta{text-align:left}
  /* collapsed bar: nav drops under the brand, left-aligned, the avatar centred beside both */
  .topbar-left{flex-direction:column;align-items:flex-start;gap:10px}
  .topbar nav a{white-space:nowrap}
  .topbar nav a:first-child{margin-left:-12px}       /* line the first link up under the brand */
}
@media(max-width:620px){
  .gm-row{grid-template-columns:1fr;gap:9px;padding:14px 18px}
  /* the meta column becomes one wrapping line rather than three stacked ones */
  .gm-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
  .gm-meta .lgtag,.gm-meta .who{margin-top:0}
  .gm-teams{grid-template-columns:1fr;gap:6px}
  .gm-v{display:none}
  .banner{flex-direction:column;align-items:stretch}
  .banner .btn{width:100%}
  .banner.pick{flex-direction:row;align-items:center;gap:10px}   /* keep the change icon inline */
  .banner.pick .btn{width:auto}
}
@media(max-width:560px){
  .tiles.t2{grid-template-columns:1fr}
  .leg{grid-template-columns:22px 34px 1fr auto;gap:10px;padding:12px 14px}
  .leg-odds{grid-column:3/5;grid-row:2;justify-self:start;margin-top:2px;text-align:left}
  .hero-stat{padding:0 18px}
  .chip-stamp{margin-left:0;flex-basis:100%;padding:14px 0 0;display:flex;justify-content:center}
  /* leaderboard fits a phone: drop everything after Streak, form pills become dots */
  .lb{min-width:0}
  .lb th:nth-child(n+5),.lb td:nth-child(n+5){display:none}
  /* the letter stays legible rather than going to font-size:0, which left the
     won, lost and void states signalled by fill colour alone (WCAG 1.4.1) */
  .pill-r.sm{width:13px;height:13px;font-size:8px}
  /* coupon date drops the weekday */
  .slip-bar .date-full{display:none}
  .slip-bar .date-mid{display:inline}
  /* avatar colours stack: avatar centred on top, the two pickers beneath it */
  .colour-row{flex-direction:column;align-items:center;gap:1.1rem;text-align:center}
  .colour-row .colour-field{width:100%;align-items:center}
  .colour-row .swatch{width:100%;max-width:18rem}
}
@media(max-width:430px){
  /* coupon date goes numeric */
  .slip-bar .date-mid{display:none}
  .slip-bar .date-num{display:inline}
}