/* ============================================================
   MONOLITH · CALM — shared design system
   The signed-off calm language as reusable components.
   Flat paper, one Archivo grotesque, air over rules, one focal
   number per screen, a single pine-green accent used sparingly.
   Mobile-first. Used by every Premier Draft screen.
   ============================================================ */
:root {
  --paper:   #efece4;
  --paper-2: #e6e2d8;
  --ink:     #16140f;
  --soft:    #5d574c;
  --faint:   #908a7d;
  --line:    rgba(22,20,15,0.14);
  --line-2:  rgba(22,20,15,0.30);
  --pine:    #1f5c3a;
  --oxide:   #9a3520;            /* negative / sell — quiet rust, not loud red */
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
img { display: block; }
a { color: inherit; }

/* ----- app frame (phone-first, max 440) ----- */
.app {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  padding: 0 22px 48px;
}

/* ----- top bar ----- */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  margin: 0 -22px;
  padding: 16px 22px 14px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line);
}
.bar .wm { font-weight: 900; font-size: 16px; letter-spacing: 0.01em; line-height: 1; color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bar .wm i { font-style: normal; color: var(--pine); }
.bar .gw {
  margin-left: auto;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--soft); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
a.gw:hover { color: var(--ink); }
.live-dot { width: 7px; height: 7px; background: var(--pine); display: inline-block;
  animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ----- hamburger + drawer ----- */
.ham {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 30px; height: 30px; padding: 6px; margin-left: -6px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.ham span { display: block; height: 2px; width: 100%; background: var(--ink);
  transition: transform .2s, opacity .2s; }
.ham[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ham[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ham[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.drawer {
  display: none; flex-direction: column;
  position: sticky; top: 51px; z-index: 39;
  margin: 0 -22px; border-bottom: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.drawer.open { display: flex; }
.drawer a {
  text-decoration: none; color: var(--ink);
  font-size: 15px; font-weight: 800; letter-spacing: 0.02em;
  padding: 15px 22px; border-top: 1px solid var(--line);
}
.drawer a:first-child { border-top: 0; }
.drawer a[aria-current="true"] { color: var(--pine); }

/* ----- page head / hero ----- */
.hero { padding: 34px 0 6px; }
.hero .ey { font-size: 10px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--soft); }
.hero .team { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; margin-top: 6px; }
.hero .team .badge { font-size: 17px; margin-right: 5px; vertical-align: -1px; }
.hero h1, .hero .big {
  font-weight: 900; letter-spacing: -0.05em; line-height: 0.82;
  font-variant-numeric: tabular-nums;
}
.hero .big { font-size: clamp(104px, 38vw, 160px); margin: 12px 0 0 -6px; }
/* Long hero values (3+ characters: player counts, triple-digit points)
   scale down fluidly instead of bursting off a phone screen. */
.hero .big.long { font-size: clamp(64px, 22vw, 118px); }
.hero .big .u { font-size: 24px; font-weight: 800; letter-spacing: 0.04em; color: var(--soft); margin-left: 12px; vertical-align: middle; }
.hero .big .ord { font-size: 0.42em; font-weight: 800; color: var(--soft); letter-spacing: 0; }
/* The LIVE pill sits after the PTS unit inside the giant number. Align both the
   unit and the pill to the number's middle so they read as a pair, and give the
   pill room from PTS (Gavriel's variant D). */
.hero .big .pill { margin-left: 14px; vertical-align: middle; }
.hero h1 { font-size: clamp(40px, 12vw, 60px); margin-top: 12px; }
.hero h1 em { font-style: normal; color: var(--pine); }
.hero .cap { font-size: 14px; color: var(--soft); margin-top: 14px; max-width: 34ch; line-height: 1.45; }
.hero .cap b { color: var(--ink); font-weight: 700; }
.hero .cap .arrow { color: var(--pine); font-weight: 700; }

/* ----- stat strip (no boxes) ----- */
.strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  margin-top: 26px;
}
.strip > div { padding: 18px 0; }
.strip > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.strip .l { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.strip .n { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; }
.strip .n small { font-size: 14px; font-weight: 700; color: var(--soft); }
.strip .n.neg { color: var(--oxide); }

/* ----- section header ----- */
.sec { display: flex; align-items: baseline; gap: 12px; margin: 40px 0 6px; }
.sec h2 { font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.sec .meta { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.sec a.meta { text-decoration: none; color: var(--soft); }
.sec a.meta:hover { color: var(--pine); }

/* ----- banner / callout ----- */
.banner { margin-top: 14px; border: 1px solid var(--line-2); padding: 18px 20px; }
.banner.ok { border-left: 3px solid var(--pine); }
/* Your-turn state: the action-needed accent (oxide), distinct from the calm
   pine of informational banners. */
.banner.turn { border-left: 3px solid var(--oxide); }
.banner.turn .k { color: var(--oxide); }
.banner .k { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pine); }
.banner .t { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-top: 6px; }
.banner .m { font-size: 12px; color: var(--soft); line-height: 1.5; margin-top: 8px; max-width: 46ch; }

/* ----- pills ----- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--soft); border: 1px solid var(--line-2); padding: 5px 9px; white-space: nowrap;
}
.pill.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill.pine { background: var(--pine); color: var(--paper); border-color: var(--pine); }
.pill.flag { color: var(--oxide); border-color: color-mix(in srgb, var(--oxide) 40%, var(--line-2)); }
/* In-play marker (Sprint 13.6). The .flag pattern's positive twin: pine text
   + pine-mixed border, with a small filled pine dot. Deliberately static —
   provisional numbers announce themselves as a state, not an alert. One
   class, reused on every surface that shows live-inclusive points. */
.pill.live { color: var(--pine); border-color: color-mix(in srgb, var(--pine) 40%, var(--line-2)); }
.pill.live::before { content: ""; width: 5px; height: 5px; background: var(--pine); flex: 0 0 auto; }

/* ----- buttons ----- */
.btn {
  appearance: none; cursor: pointer; font-family: var(--sans);
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 14px 18px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: opacity .15s, background .15s, color .15s; text-decoration: none;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-primary { background: var(--pine); border-color: var(--pine); color: var(--paper); }
.btn-primary:hover { opacity: 0.88; background: var(--pine); color: var(--paper); }
/* Inactive control: dimmed, no pointer, no hover lift. */
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--ink); }
.btn-primary:disabled, .btn-primary:disabled:hover {
  background: var(--pine); color: var(--paper); opacity: 0.4;
}
/* Failed-submission state: oxide red so it's clear nothing was saved. */
.btn.submit-failed, .btn.submit-failed:hover {
  background: var(--oxide); border-color: var(--oxide); color: var(--paper); opacity: 1;
}
/* Armed pick confirm (draft pools): first tap flips Pick → SURE, second submits. */
.btn-sure, .btn-sure:hover {
  background: var(--oxide); border-color: var(--oxide); color: var(--paper); opacity: 1;
}
.btn-block { width: 100%; }
.btn-sm { padding: 9px 13px; font-size: 10px; }
.btn-ghost { border-color: var(--line-2); color: var(--soft); }

/* Kit badge: a manager's chosen kit mark wherever their emoji badge would
   render. Em-sized so the same fragment scales with hero, shield and chip
   text; slight downshift keeps it optically centred beside text. */
.kitb { height: 1.15em; width: auto; display: inline-block; vertical-align: -0.18em; }

/* ----- player / standings rows ----- */
.list { margin-top: 4px; }
.row {
  display: grid; grid-template-columns: 24px 44px 1fr auto;
  align-items: center; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--line); cursor: pointer; position: relative;
}
.row:last-child { border-bottom: 0; }
.row .pos { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; color: var(--faint); }
.row.gk .pos, .row.cap .pos { color: var(--pine); }
.ph {
  /* No backing box: the cut-out floats on the page like the POTW photos
     (the paper-2 slab behind every list photo read as inconsistency). */
  width: 44px; height: 44px; object-fit: cover; object-position: top center;
  filter: grayscale(1) contrast(1.04);
}
.ph.mono {
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2);
  font-size: 13px; font-weight: 800; color: var(--soft); letter-spacing: 0.02em; filter: none;
}
.row .who { min-width: 0; }
.row .nm { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1;
  /* Wrap long player names onto a second line rather than truncating with an
     ellipsis (`.who` has min-width:0, so the value columns stay put). */
  white-space: normal; overflow-wrap: break-word; }
.row .nm .c { color: var(--pine); font-weight: 800; }
/* Injury marker (Fotmob availability). Quiet rust, trails the name; the
   expected return / status sits in the title/tooltip. */
.inj { color: var(--oxide); font-weight: 900; margin-left: 5px; cursor: help; }
/* Left-the-league marker. A quiet state pill, not an alert: the player is
   still owned and selectable, just no longer at an EPL club. Restyled
   (Sprint 13.6) to the system's negative-state vocabulary — the .pill.flag
   pattern at inline-row scale: oxide text, oxide-mixed border, no fill.
   Sits in the same family as the injury ✚ (oxide) and the LIVE pill
   (pine, same shape). */
.left-badge { display: inline-flex; align-items: center; margin-left: 6px;
  padding: 2px 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; white-space: nowrap; cursor: help;
  vertical-align: middle; color: var(--oxide);
  border: 1px solid color-mix(in srgb, var(--oxide) 40%, var(--line-2)); }
.row .sub { margin-top: 4px; display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--faint); font-weight: 500; }
/* ----- competitions ----- */
/* The UCL side swaps the pine accent for the electric blue (tuned darker
   than the UCL site's neon so text-weight uses hold contrast on paper). */
body[data-comp="ucl"] { --pine: #1156c8; }
.wm-mark { height: 27px; width: auto; }
.game-switch { gap: 8px; }
.game-switch .game-opt { display: inline-flex; align-items: center; gap: 7px;
  font: 800 12px/1 'Archivo', sans-serif; letter-spacing: 0.1em;
  text-decoration: none; color: var(--soft); padding: 8px 12px;
  border: 1px solid var(--line-2); }
.game-switch .game-opt img { height: 24px; width: auto; }
/* Each game's tab carries its own colour (literals, not --pine, which the
   body's data-comp swaps): pine for the EPL, electric blue for the UCL. */
.game-switch .game-opt.epl { color: #1f5c3a; border-color: #1f5c3a; }
.game-switch .game-opt.ucl { color: #1156c8; border-color: #1156c8; }
.game-switch .game-opt.epl[aria-current="true"] { background: #1f5c3a;
  color: var(--paper); }
.game-switch .game-opt.ucl[aria-current="true"] { background: #1156c8;
  color: var(--paper); }
/* Selected: the mark stays ink-black (no invert, which washed it out to a
   pale ghost on the colour fill) and gets a light hairline so it still reads
   against the dark background. Four 0.75px offset shadows draw a crisp outline. */
.game-switch .game-opt[aria-current="true"] img {
  filter: drop-shadow(0.75px 0 0 rgba(239,236,228,.9))
    drop-shadow(-0.75px 0 0 rgba(239,236,228,.9))
    drop-shadow(0 0.75px 0 rgba(239,236,228,.9))
    drop-shadow(0 -0.75px 0 rgba(239,236,228,.9)); }

/* ----- the Play Harambol UCL opt-in box ----- */
.ucl-optin { display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line-2); padding: 14px 16px; margin: 16px 0 4px; }
.ucl-optin label { display: inline-flex; align-items: center; gap: 11px;
  cursor: pointer; }
.ucl-optin input { width: 17px; height: 17px; margin: 0; flex: none;
  accent-color: #1156c8; cursor: pointer; }
.ucl-optin input:disabled { cursor: default; }
/* The label carries the top bar's wordmark treatment. */
.ucl-optin .uo-wm { display: inline-flex; align-items: center; gap: 6px;
  font: 900 15px/1 'Archivo', sans-serif; letter-spacing: .01em; }
.ucl-optin .uo-wm i { font-style: normal; color: #1156c8; }
.ucl-optin .uo-mark { height: 22px; width: auto; }
.ucl-optin .uo-in { display: flex; flex-wrap: wrap; gap: 8px; }
.ucl-optin .uo-who { display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); padding: 7px 11px;
  font: 700 11px/1 'Archivo', sans-serif; }
.ucl-optin .uo-who .uo-bdg { font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; }
.ucl-optin .uo-who.uo-count { border: 0; color: var(--faint);
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* ----- player stars (Sprint 17) ----- */
/* The star toggle on player rows and the player page; --pine keeps it the
   game's accent (blue on the UCL side). */
.star { background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 15px; line-height: 1; padding: 0 3px; color: var(--faint);
  vertical-align: -1px; }
.star.on { color: var(--pine); }
.star:hover { color: var(--pine); }
/* The list-row star column: a full-height tap target for thumbs. */
.rowstar { font-size: 17px; justify-self: stretch; align-self: stretch;
  padding: 0; min-height: 44px; }
/* The big stars: after the picture on the player page and in the register
   overlay, same position both places. */
.pf-star { font-size: 30px; padding: 4px 6px; align-self: center; }
.sheet-head .sh-id { display: flex; align-items: center; gap: 10px;
  margin-top: 2px; }
.sheet-head .sh-id .ph { width: 44px; height: 44px; }
.sheet-head .sh-id .ph.mono { display: grid; place-items: center;
  background: var(--paper-2); font: 800 13px/1 'Archivo'; color: var(--soft); }
.sheet-head .sh-nm { min-width: 0; }
.sh-star { font-size: 26px; padding: 2px 4px; flex: none; }
.stmk { color: var(--pine); margin-left: 5px; font-size: 12px; }
/* The filter chip's star carries the game's star colour (pine / blue). */
.chip-f.star-chip { font-size: 13px; line-height: 1; color: var(--pine);
  border-color: var(--pine); }
.chip-f.star-chip.on { background: var(--pine); border-color: var(--pine);
  color: var(--paper); }

.crest { width: 21px; height: 21px; object-fit: contain; flex-shrink: 0; }
.crest.mono { display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:21px; padding:0 5px; background:var(--ink); color:var(--paper);
  font-size:11px; font-weight:800; letter-spacing:0.04em; }
.row .val { text-align: right; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.row .val .u { font-size: 11px; font-weight: 600; color: var(--faint); margin-right: 1px; }
.row .val.zero { color: var(--faint); }
.row .val.neg { color: var(--oxide); }

/* bench / quieter variant */
.bench .row .ph, .ph.sm { width: 38px; height: 38px; }
.bench .row { grid-template-columns: 24px 38px 1fr auto; padding: 12px 0; }
.bench .row .nm { font-size: 15px; }

/* position group sub-head */
.grp { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint); margin: 22px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }

/* ----- standings table ----- */
.table { margin-top: 8px; }
.trow {
  display: grid; grid-template-columns: 22px 22px 1fr auto auto;
  align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.trow:last-child { border-bottom: 0; }
a.trow { color: inherit; text-decoration: none; }
a.trow:hover .tm .nm { color: var(--pine); }
.trow .rk { font-size: 13px; font-weight: 800; color: var(--faint); }
.trow .shield { font-size: 18px; line-height: 1; text-align: center; }
.trow .tm { min-width: 0; }
.trow .tm .nm { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15;
  /* Team names are user-chosen and can be long/expressive — wrap them onto a
     second line rather than truncating with an ellipsis. `.tm` has min-width:0
     so this never pushes the value columns off. */
  white-space: normal; overflow-wrap: break-word; }
.trow .tm .nm b { color: var(--pine); }
.trow .tm .mgr { font-size: 10px; color: var(--faint); font-weight: 500; margin-top: 2px;
  letter-spacing: 0.04em; text-transform: uppercase; }
.trow .val2 { font-size: 11px; font-weight: 700; color: var(--faint); width: 52px; text-align: right; }
.trow .pts { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; width: 42px; text-align: right; }
.trow .pts.neg { color: var(--oxide); }
.trow.you { background: color-mix(in srgb, var(--paper-2) 60%, transparent); margin: 0 -10px; padding: 13px 10px; }
.trow.you .rk { color: var(--pine); }

/* ----- block list (.lp-block) ----- */
.blocks { margin-top: 8px; }
.lp-block {
  /* Fixed state column so every row's pill and Pick link line up exactly. */
  display: grid; grid-template-columns: 64px 1fr 96px; gap: 14px; align-items: stretch;
  text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.lp-block:last-child { border-bottom: 0; }
.lp-when { border-right: 1px solid var(--line); padding-right: 14px; }
.lp-when .d { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; }
.lp-when .t { font-size: 12px; font-weight: 700; color: var(--soft); margin-top: 2px; }
.lp-when .g { font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.lp-fx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* One fixture as the shared "crest TEAM v TEAM crest" unit: equal team cells
   hugging a centred v, capped width so every row's v lines up. */
.lp-fx-row { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 10px;
  align-items: center; width: 100%;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.lp-fx-row .tm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lp-fx-row .tm.h { justify-content: flex-end; }
.lp-fx-row .tm.a { justify-content: flex-start; }
/* Fixed-width code boxes: the code's v-side edge and the crest both land at
   the same x on every row, so stacked fixtures read as columns. */
.lp-fx-row .tm b { font-weight: inherit; width: 36px; flex: none; }
.lp-fx-row .tm.h b { text-align: right; }
.lp-fx-row .tm.a b { text-align: left; }
.lp-fx-row em { font-style: normal; color: var(--faint); font-weight: 600; }
/* Bold date · time · lock line above a block's fixture listing (block editor). */
.lp-fx-when { font: 800 13px/1 'Archivo', sans-serif; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); text-align: center;
  margin: 2px 0 4px; }
.lp-fx-more { font-size: 10px; font-weight: 700; color: var(--faint); letter-spacing: 0.04em; }
.lp-state { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
/* Block-row pills fill the fixed state track (uniform boxes, centred
   text, wrapping when needed) and Pick aligns right beneath them. */
.lp-state .pill { white-space: normal; text-align: center; line-height: 1.4;
  justify-content: center; padding: 5px 6px; box-sizing: border-box; }
.lp-state .lp-go { text-align: right; }
/* Phones: a tighter date/time column and gaps; the state track stays fixed. */
@media (max-width: 599.98px) {
  .lp-block { grid-template-columns: 50px minmax(0, 1fr) 84px; gap: 9px; }
  .lp-when { padding-right: 9px; }
}
.lp-go { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.lp-block:hover .lp-go { color: var(--pine); }

/* ----- pick rows (block XI) ----- */
.pick {
  display: grid; grid-template-columns: 22px 40px 1fr auto; gap: 13px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line); cursor: pointer; position: relative;
}
.pick:last-child { border-bottom: 0; }
.pick input { appearance: none; width: 20px; height: 20px; border: 1.5px solid var(--line-2);
  cursor: pointer; flex-shrink: 0; display: grid; place-items: center; transition: .15s; }
.pick input:checked { background: var(--pine); border-color: var(--pine); }
.pick input:checked::after { content: ""; width: 6px; height: 10px; border: solid var(--paper);
  border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.pick .nm { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.pick .sub { margin-top: 3px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--faint); font-weight: 600; }
.pick .tag { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pine); border: 1px solid color-mix(in srgb, var(--pine) 35%, var(--line-2)); padding: 4px 7px; white-space: nowrap; }
.pick input:not(:checked) ~ * { opacity: 0.5; }

/* formation/submit bar */
.formrow {
  position: sticky; top: 51px; z-index: 30; margin: 14px -22px 0; padding: 12px 22px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px;
}
.formrow .field { display: flex; flex-direction: column; gap: 4px; }
.formrow .lbl { font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.formrow .fmchip { font-size: 17px; font-weight: 900; letter-spacing: 0.02em; }
.formrow .fmchip.ok { color: var(--pine); }
.formrow .fmchip.bad { color: var(--oxide); }
.formrow .count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--soft); letter-spacing: 0.06em; text-transform: uppercase; }
.formrow .count b { font-size: 15px; color: var(--ink); }

/* prev/next block nav */
.lp-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 22px; border: 1px solid var(--line-2); }
.lp-nav-link { text-decoration: none; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.lp-nav-link.prev { border-right: 1px solid var(--line); align-items: flex-start; }
.lp-nav-link.next { text-align: right; align-items: flex-end; }
.lp-nav-arrow { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.lp-nav-when { font-size: 12px; font-weight: 700; }

/* ----- filter chips ----- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chip-f {
  appearance: none; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; line-height: 1;
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--soft); border: 1px solid var(--line-2); background: transparent; padding: 9px 13px;
  font-family: var(--sans); transition: .15s;
}
.chip-f:hover { border-color: var(--ink); color: var(--ink); }
.chip-f.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Club crest filter (shared by the Players tabs and the Owners view): a single
   horizontal strip you swipe on touch and click-and-drag with a mouse (see the
   .clubchips drag handler in calm.js); the scrollbar is hidden, grab cursors
   are the affordance. */
.clubchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 10px; cursor: grab; }
.clubchips::-webkit-scrollbar { display: none; }
.clubchips.dragging { cursor: grabbing; user-select: none; }
.clubchips .chip-f { flex: 0 0 auto; }
/* Any chip row that scrolls sideways (the position filters) gets the same
   grab-and-drag treatment as the crest strip. */
.chips-x { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  cursor: grab; }
.chips-x::-webkit-scrollbar { display: none; }
.chips-x.dragging { cursor: grabbing; user-select: none; }
.chips-x .chip-f { flex: 0 0 auto; }
.chip-f.chip-crest { padding: 6px 10px; }
.chip-f.chip-crest .cc { display: block; width: 40px; height: 40px; object-fit: contain;
  /* Let the drag gesture own the pointer — no native image-drag ghost, and the
     click still lands on the chip anchor. */
  -webkit-user-drag: none; user-select: none; pointer-events: none; }
.chip-f.chip-crest .cc.mono { width: auto; height: auto; font-size: 15px; letter-spacing: 0; }

/* ----- search ----- */
.search { display: flex; align-items: center; gap: 10px; margin-top: 14px;
  border: 1px solid var(--line-2); padding: 0 14px; height: 46px; }
.search span { color: var(--faint); }
.search input { flex: 1; min-width: 0; appearance: none; border: 0; background: transparent;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); height: 100%; }
.search input:focus { outline: none; }
.search input::placeholder { color: var(--faint); }

/* ----- ledger ----- */
.ledger { width: 100%; border-collapse: collapse; margin-top: 10px; }
.ledger td { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger .lt { font-weight: 700; }
.ledger .lv { text-align: right; font-weight: 800; }
.ledger .lv.pos { color: var(--pine); }
.ledger .lv.neg { color: var(--oxide); }
.ledger tr.total td { border-top: 1px solid var(--line-2); padding-top: 12px; font-size: 14px; }
.ledger tr.total .lt { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }

/* RPS order */
.rps { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rps .slot { width: 40px; height: 40px; border: 1px solid var(--line-2); display: grid; place-items: center;
  font-size: 18px; position: relative; }
.rps .slot::after { content: attr(data-n); position: absolute; top: -7px; left: -1px; font-size: 8px;
  font-weight: 800; color: var(--faint); background: var(--paper); padding: 0 3px; }
.rps .slot.empty { color: var(--faint); border-style: dashed; }
.rps-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ----- player profile hero ----- */
.pf-hero { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.pf-photo { width: 96px; height: 96px; object-fit: cover; object-position: top center;
  filter: grayscale(1) contrast(1.04); flex-shrink: 0; }
.pf-photo.mono { display: grid; place-items: center; background: var(--paper-2);
  font-size: 30px; font-weight: 900; color: var(--soft); filter: none; }
.pf-id h1 { font-size: clamp(28px, 8vw, 40px); font-weight: 900; letter-spacing: -0.03em; line-height: 0.95; }
.pf-id .sub { display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
/* The owning manager, on its own line — team badge + name in the standard
   owner styling (pine, uppercase). */
.pf-owner { display: flex; align-items: center; gap: 6px; margin-top: 7px;
  font: 700 10px/1 'Archivo', system-ui, sans-serif; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pine); }
.pf-owner .bdg { font-size: 15px; line-height: 1; display: inline-flex; align-items: center; }
.pf-owner .pf-you { color: var(--faint); }
.pf-owner.pf-fa { color: var(--soft); }
.pf-row { display: grid; grid-template-columns: 16px 1fr auto auto auto; gap: 12px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line); }
.pf-row:last-child { border-bottom: 0; }
.pf-row .pf-nm { font-size: 15px; font-weight: 700; }
.pf-row .pf-nm .ha { color: var(--faint); font-weight: 600; }
.pf-row .pf-ev { font-size: 11px; color: var(--soft); margin-top: 2px; font-weight: 500; }
.pf-row .sc { font-size: 13px; font-weight: 700; color: var(--soft); }
.pf-row .gw { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; color: var(--faint); }
.pf-row .pt { font-size: 17px; font-weight: 800; color: var(--pine); width: 36px; text-align: right; }

/* ----- misc ----- */
.note { font-size: 11px; color: var(--faint); line-height: 1.6; margin-top: 20px; max-width: 52ch; }
.backlink { display: inline-block; margin-top: 24px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); text-decoration: none; }
.backlink:hover { color: var(--pine); }
.colophon { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line-2);
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.colophon b { color: var(--soft); font-weight: 800; }

/* ===== sort control (free-agents page + transfers picker) ===== */
.fa-sort { display: flex; align-items: center; gap: 10px; padding: 14px 0 4px; }
.fa-sort > label { font: 800 9px/1 'Archivo'; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint); flex: 0 0 auto; }
.fa-sort .sel { position: relative; flex: 1; }
.fa-sort select { appearance: none; -webkit-appearance: none; width: 100%; cursor: pointer;
  font: 800 12px/1 'Archivo'; color: var(--ink); background: transparent;
  border: 1px solid var(--line-2); padding: 10px 12px; border-radius: 0; }
.fa-sort .dir { appearance: none; cursor: pointer; font: 800 15px/1 'Archivo';
  color: var(--ink); background: transparent; border: 1px solid var(--line-2);
  padding: 8px 13px; flex: 0 0 auto; }
.pk-sort { padding: 10px 18px 4px; }

/* ===== wide stat columns (CS / Aga / G / A) =====
   Phone-first: hidden. Tablet/desktop: the app frame doubles and the extra
   stat columns appear in every table. A grid item set to display:none drops
   out of the grid entirely, so the mobile grid templates are untouched and
   only the wide templates below count the extra tracks. */
.x { display: none; }
.xs { text-align: right; font: 700 13px/1 'Archivo'; font-variant-numeric: tabular-nums;
  color: var(--soft); align-self: center; }
.xs.zero { color: var(--faint); }
.xs.na { color: var(--faint); }
/* Manual-adjustment marker: a quiet pine asterisk on any stat a correction or
   applied official ruling changed, so an adjusted number is never mistaken for
   the raw feed. The full note sits in the tooltip. */
.man { color: var(--pine); font-weight: 800; font-size: 0.7em; margin-left: 1px;
  cursor: help; }
.xh { text-align: right; font: 800 9px/1 'Archivo'; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint); }
.xh.l { text-align: left; }
/* Column-header abbreviations carry an explanatory title attribute; the
   help cursor is the only visual hint — no new styling, calm by design. */
.xh[title], .fa-head .h[title], .dr-head .h[title], .colhead span[title] {
  cursor: help; }

/* The wide layout (roomier .app + the full stat columns). Breakpoint at 600px,
   not 768: a phone in landscape reports a CSS width in the ~650-900 band while
   portrait tops out around 440, so 600 cleanly separates them. At 768 some
   phones crossed it in landscape and some did not — the "why is my table cut
   off in landscape on one phone but not another" report. 600 makes landscape
   widen consistently and never triggers in portrait. */
@media (min-width: 600px) {
  .app { max-width: 880px; padding: 0 32px 56px; }
  .bar, .drawer { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; }
  .x { display: block; }

  /* The `.app` qualifier lifts these above each page's inline base grid, which
     is injected after calm.css and would otherwise win on source order. */
  body[data-page="squad"] .app .row,
  body[data-page="squad"] .app .colhead {
    grid-template-columns: 40px 1fr 28px 28px 30px 30px 30px 30px 28px 38px; }
  body[data-page="squad"] .app .bench .row {
    grid-template-columns: 36px 1fr 28px 28px 30px 30px 30px 30px 28px 38px; }

  body[data-page="league"] .app .trow,
  body[data-page="league"] .app .lcolhead {
    grid-template-columns: 22px 22px 1fr 30px 30px 30px 30px 40px 48px; }
  body[data-comp="ucl"][data-page="league"] .app .trow,
  body[data-comp="ucl"][data-page="league"] .app .lcolhead {
    grid-template-columns: 22px 22px 1fr 34px 30px 30px 30px 30px 40px 48px; }
  body[data-page="league"] .app .thead { display: none; }

  /* Owners view: its own page (data-page="owners") and the Players → Owners
     tab (data-page="players") share the grid. */
  body[data-page="owners"] .app .row.ow,
  body[data-page="owners"] .app .owhead,
  body[data-page="players"] .app .row.ow,
  body[data-page="players"] .app .owhead {
    grid-template-columns: 38px 1fr 30px 30px 30px 30px 48px 46px; }

  /* Free-agents list: its own page and the Players → All / Free Agents tabs. */
  body[data-page="free-agents"] .app .fa-cols,
  body[data-page="players"] .app .fa-cols {
    grid-template-columns: 38px 26px 1fr 30px 30px 30px 30px 40px 36px 42px 34px; }
  body[data-comp="ucl"][data-page="free-agents"] .app .fa-cols,
  body[data-comp="ucl"][data-page="players"] .app .fa-cols {
    grid-template-columns: 38px 26px 1fr 30px 30px 30px 30px 40px 36px 42px 34px 40px; }

  body[data-page="transfers"] .app .sell,
  body[data-page="transfers"] .app .sellhead {
    grid-template-columns: 22px 38px 1fr 30px 30px 30px 30px 46px 52px; }
  body[data-page="transfers"] .app .sheet { max-width: 640px; }
  body[data-page="transfers"] .app .pk-row,
  body[data-page="transfers"] .app .pkhead {
    grid-template-columns: 36px 1fr 30px 30px 30px 30px 34px 60px; }
}

/* Players page on a phone: drop the Starts / Apps columns, leaving just 4-wk
   and Pts, so the name has room. The standalone free-agents page keeps them. */
@media (max-width: 599.98px) {
  body[data-page="players"] .fa-cols { grid-template-columns: 38px 26px 1fr 42px 34px; }
  body[data-comp="ucl"][data-page="players"] .fa-cols {
    grid-template-columns: 38px 26px 1fr 42px 34px 40px; }
  body[data-page="players"] .fa-head .sa,
  body[data-page="players"] .fa-row .sa { display: none; }
}

/* The wide-only column headers some tables grow at the breakpoint. */
.lcolhead, .owhead { display: none; }
@media (min-width: 600px) {
  .lcolhead, .owhead { display: grid; align-items: end; gap: 12px;
    padding: 0 0 6px; border-bottom: 1px solid var(--line); }
  .owhead { gap: 12px; margin-top: 4px; }
}

/* Frozen-quota explainer line: "Bought whilst registered at [crest] CLUB".
   Rendered under a player wherever a roster shows and his acquired club no
   longer matches his current one. Deliberately quieter than the main sub. */
.acq { display: flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: 10.5px; font-weight: 600; color: var(--faint);
  font-style: normal; }
.acq .crest, .acq img.crest { width: 20px; height: 20px; }
.pick .acq { margin-left: 0; }
.pm.acq { margin-top: 2px; }

/* The draft log's manager attribution, under the team name. */
.dlog-mgr { font-size: 10px; font-weight: 600; color: var(--faint); }

/* Waiver priority token: P1, P2… always bold, always electric blue,
   whatever page or game chrome it sits in. */
.pnum { font-weight: 900; color: #1156c8; }