/* BRAND KIT V3 (October 2026): the colour and type names in this file are the JOBS, not the hues —
   cream = paper #F6F2EA, ink = Fjord Ink #12263A, burgundy = terracotta #A44723, petrol = Øresund
   #3F6E71 (both for data only), the main action = ink (raised navy on hover); Bricolage, Newsreader and
   Fraunces all read Space Grotesk now (upright); figures in tables Plex Mono, large ones Space Grotesk; square
   (app/theme.css). The v3 additions are at the end of the file. */
/* ============================================================
   fantacalcio — skin for the live fantasy-football lab (see app/theme.css).
   One light theme, four colours with their usual jobs:
     cream page, surface panels and player cards · ink text and frame ·
     burgundy the brand voice (eyebrows, losses, forwards, the Live tag) ·
     petrol the selected state and the calm sections (my row, the chosen
     league, the fantasy-points bars, wins).
   Mapping of the app's own variables:
     --bg cream · --surface surface · --ink ink · --muted soft ink · --line hairline
     --accent petrol · --me petrol-soft with ink text (my row = the selected state)
     roles on the line-up chips: P ink · D petrol · C burgundy-soft with burgundy text · A burgundy
       (the letter is always on the chip, so colour never carries the role alone)
     results: round tags, W petrol fill · L burgundy fill · D hollow, ink letter
       inside an edge (the letter is always visible)
     --display / --body Bricolage Grotesque; Newsreader for the small secondary lines.
   Shapes and type come from the COMPONENTS block in brand.css:
     league switch = two choices (multi-line buttons, --rr-radius-sm), the chosen one petrol
     team name = the page's h1 style · panel titles = h2 · eyebrows, fact captions,
     table headers and line-up column heads = the label style · results and Live = tags
     panels --rr-radius with a hairline; a match you open inside one, --rr-radius-sm
   The app's prefers-color-scheme and [data-theme=dark] blocks lose to
   :root:root:root below, so there is nothing for them to switch to.
============================================================ */

/* ---------- 1. variables, once ---------- */
:root:root:root{
  --bg:var(--t-bg);
  --surface:var(--t-surface);
  --ink:var(--t-ink);
  --muted:var(--t-ink-2);
  --line:var(--t-line);
  --accent:var(--t-petrol);
  --me:var(--t-petrol-soft);
  --me-ink:var(--t-ink);
  --role-p:var(--t-ink);
  --role-d:var(--t-petrol);
  --role-c:var(--t-burgundy-soft);
  --role-a:var(--t-burgundy);
  --win:var(--t-petrol);
  --draw:transparent;
  --loss:var(--t-burgundy);
  --display:var(--t-sans);
  --body:var(--t-sans);
  color-scheme:light;
}

/* ---------- 2. type ---------- */
.wrap > header{padding-top:14px}
body{background:var(--t-bg);color:var(--t-ink);font:16px/1.5 var(--t-sans);letter-spacing:-.005em}
h1,h2,h3{font-family:var(--t-sans);font-weight:500}
/* eyebrows: the label style, in the brand's warm voice */
.eyebrow{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase;color:var(--t-ink)}
/* reading text: Newsreader for the quiet lines */
.hero .sub,.key,.round-key,footer,.panel h3 small{font-family:var(--t-read);letter-spacing:0;color:var(--t-ink-2)}
.hero .sub{font-size:17px;line-height:1.4;margin-top:10px}
.key{font-size:14.5px;line-height:1.45}
.round-key{font-size:14.5px;line-height:1.45}
footer{font-size:14.5px;padding-top:16px;border-top:2px solid var(--t-ink)}
footer:empty{display:none}
.panel h3 small{font-size:15px;font-weight:400}

/* ---------- 3. league switch: two choices (a button with two lines), the chosen one petrol ---------- */
.switch button{background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius-sm);padding:12px 18px;transition:background .15s,border-color .15s,color .15s}
.switch button:hover{border-color:var(--t-ink)}
.switch .lg{font:500 13px/1.3 var(--t-sans);letter-spacing:0;color:var(--t-ink-2)}
.switch .tm{font:500 22px/1.1 var(--t-sans);letter-spacing:-.025em;color:var(--t-ink)}
.switch button[aria-selected="true"],.switch button[aria-selected="true"]:hover{background:var(--t-select);border-color:var(--t-select);box-shadow:none}
.switch button[aria-selected="true"] .lg,.switch button[aria-selected="true"] .tm{color:var(--t-cream)}
.switch button:focus-visible{outline:3px solid var(--t-ink);outline-offset:2px}

/* ---------- 4. hero: the team name is the page's statement (h1 style), the facts in heavy Bricolage ---------- */
.hero{padding-block:14px 4px;border-bottom:2px solid var(--t-ink);padding-bottom:20px}
.hero .eyebrow{margin-bottom:10px}
.hero h2{font:var(--rr-h1);letter-spacing:var(--rr-h1-ls);color:var(--t-ink);overflow-wrap:anywhere}
.facts{gap:10px 30px}
.fact b{font:500 40px/1 var(--t-sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--t-ink)}
.fact b sup{font-size:20px;color:var(--t-ink)}
.fact span{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase;color:var(--t-ink-2)}
/* results: round tags, the letter always visible; W petrol, L burgundy, D hollow */
.form{gap:5px}
.r{width:auto;min-width:var(--rr-tag);height:var(--rr-tag);padding:0;border-radius:var(--rr-pill);font:var(--rr-tag-font);letter-spacing:var(--rr-tag-ls);text-transform:uppercase;color:var(--t-cream)}
.r.W{background:var(--t-petrol)}
.r.L{background:var(--t-burgundy)}
.r.D{background:var(--t-surface);color:var(--t-ink);border:var(--rr-hair)}

/* ---------- 5. panels ---------- */
.panel{background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius);padding:20px}
.panel h3{font:var(--rr-h2);letter-spacing:var(--rr-h2-ls);color:var(--t-ink);text-transform:none}

/* ---------- 6. standings: my row in the selected-state tint ---------- */
th{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase;color:var(--t-ink-2);border-bottom:2px solid var(--t-ink)}
td{border-bottom:1px solid var(--t-line)}
td.pos{font:500 17px var(--t-sans);color:var(--t-ink-2)}
tr:first-child td.pos{color:var(--t-ink)}
td.team{font-weight:500;letter-spacing:-.01em}
td.pts{font:500 19px var(--t-sans);letter-spacing:-.02em}
.bar i{background:var(--t-line-2)}
.bar i::after{background:var(--t-petrol)}
tr.me td{background:var(--t-sunken);color:var(--t-ink)}
tr.me td.pos{color:var(--t-ink)}
tr.me td.team{font-weight:500}
tr.me td:first-child{box-shadow:inset 4px 0 0 var(--t-petrol)}
tr.me .bar i{background:var(--t-surface)}
tr.me .bar i::after{background:var(--t-petrol)}

/* ---------- 7. the round: the score, the two line-ups, the other matches ---------- */
.round{display:grid;gap:4px}
.round-head h3{margin:0}
/* Live: a burgundy tag with a beating dot (the word is always there) */
.live{height:var(--rr-tag);padding:0 10px;border-radius:var(--rr-pill);background:var(--t-burgundy);color:var(--t-cream);font:var(--rr-tag-font);letter-spacing:var(--rr-tag-ls)}
.score{border-block:1px solid var(--t-line);border-top:1px solid var(--t-ink)}
.score .tm{font:500 20px/1.1 var(--t-sans);letter-spacing:-.02em}
.score .tot{font:500 32px/1 var(--t-sans);letter-spacing:-.04em}
.score .goals{font:500 42px/1 var(--t-sans);letter-spacing:-.04em}
.score .goals small{font:400 14px/1.3 var(--t-read);color:var(--t-ink-2)}
.score .me .tm{text-decoration-color:var(--t-petrol)}
.xi h4,.others h4{font:var(--rr-h3);letter-spacing:var(--rr-h3-ls);text-transform:none;color:var(--t-ink)}
.xi h4 small{font:400 14px/1.3 var(--t-read);color:var(--t-ink-2)}
.xi .cols-h,.xi .sub-h{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);color:var(--t-ink-2)}
.xi .cols-h{border-bottom:2px solid var(--t-ink)}
.xi li{border-bottom:1px solid var(--t-line)}
.xi .nm{font:500 15px/1.2 var(--t-sans);letter-spacing:-.01em}
.xi .ev{font:400 13.5px/1.3 var(--t-read);color:var(--t-ink-2)}
.xi .v{font:400 15px var(--t-read);color:var(--t-ink-2)}
.xi .fv{font:500 17px var(--t-sans);letter-spacing:-.02em;color:var(--t-ink)}
/* role chips: round markers with the letter on them */
.xi .ro{font:500 11px/1 var(--t-sans);letter-spacing:0;color:var(--t-cream)}
.xi .ro.P{background:var(--t-ink)}
.xi .ro.D{background:var(--t-petrol)}
.xi .ro.C{background:var(--t-burgundy-soft);color:var(--t-ink);box-shadow:inset 0 0 0 1.5px var(--t-burgundy)}
.xi .ro.A{background:var(--t-burgundy)}
.others details{border:var(--rr-hair);border-radius:var(--rr-radius-sm);background:var(--t-surface)}
.others summary{font:500 15px/1.25 var(--t-sans)}
.others summary b{font-weight:500}
.others summary .mid{font:500 17px var(--t-sans)}
.others summary:focus-visible{outline:3px solid var(--t-petrol);outline-offset:2px;border-radius:0}
.others details[open] summary{border-bottom:1px solid var(--t-line)}

/* ---------- 8. the line the page shows while the data loads, or if it cannot ---------- */
.wait,.rr-wait{font:400 18px/1.5 var(--t-read);color:var(--t-ink-2);padding:28px 4px;margin:0}

@media (max-width:480px){
  .switch .tm{font-size:20px}
  .fact b{font-size:34px}
  .panel{padding:16px 14px}
  .score .tm{font-size:16px}
  .score .tot{font-size:26px}
  .score .goals{font-size:32px}
}

/* the site's bar runs edge to edge at the top (labs.js margin: 16 bleeds it past the body's padding) */
body{padding-block-start:0}
.rr-bar{margin-bottom:20px}

/* ---------- v3 (brand kit, October 2026): figures in Plex Mono, square role marks, controls in 500 ---------- */
td.pos,td.pts,.xi .fv,.others summary .mid{font-family:var(--t-mono);font-weight:500;letter-spacing:-.02em}
.xi .ro{font-family:var(--t-mono);font-weight:500}
.xi .ro.C{box-shadow:inset 0 0 0 1px var(--t-burgundy)}
button{font-weight:500}
.panel{border-top-width:1px}
/* the Live tag as on the home page: navy, a terracotta square for the signal */
.live{display:inline-flex;align-items:center;gap:8px;background:var(--t-ink);color:var(--t-cream)}
.live::before{content:"";width:6px;height:6px;background:var(--t-signal)}
/* table numbers and match totals in Plex Mono, like every other lab's tables */
:root:root:root #leagues td:not(.team),:root:root:root #leagues summary b,:root:root:root #leagues summary .mid,:root:root:root .xi .v,:root:root:root .xi .fv{font-family:var(--rr-mono);font-variant-numeric:tabular-nums}