/* ---------------------------------------------------------------------------
   footbo.in

   A floodlit scoreboard: a dark ground, one green accent taken from the mark,
   and figures set brighter than the labels around them so numbers read as the
   lit part of the panel.

   Green is an accent, never a wash. It appears on the mark, the current nav
   item, primary actions, a chosen outcome, an open league, your own standings
   row, and focus rings. Everything else is the neutral scale.

   Two themes. Dark is the default; the choice is applied server-side via
   data-theme on <html>, so no page flashes the wrong one.
   --------------------------------------------------------------------------- */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #04130c;   /* the dot colour from the mark */
  --surface:     #0a2018;
  --surface-2:   #102c21;
  --rule:        #1b3b2c;
  --ink:         #e9f4ee;
  --muted:       #86a596;

  --brand:       #18c172;
  --brand-dim:   #14a862;
  --on-brand:    #04130c;
  --brand-soft:  #0d2b1e;

  --danger:      #ff6a5a;
  --danger-rule: #5a231d;
  --danger-bg:   #23100c;
  --danger-ink:  #ffb4aa;

  /* Outcome codes. Warm, neutral, cool -- home, draw, away. Kept clear of
     brand green so the accent means one thing, and clear of danger red so an
     away win never looks like an error. The digit is always shown; colour is
     reinforcement, not the signal. */
  --c1:      #e8a13a;
  --c1-bg:   #2a1e0b;
  --c0:      #9aa8a0;
  --c0-bg:   #1a231e;
  --c2:      #a98bdd;
  --c2-bg:   #1e1830;

  --amend:     #e8724c;
  --amend-bg:  #2b1710;
  --on-amend:  #04130c;
}
/* Blue: the calmest of the three, and the furthest from every outcome colour. */
[data-theme="blue"] {
  color-scheme: dark;

  /* A whole palette, not a green page with blue buttons. The background, the
     cards, the borders and the text are all tinted -- that is what makes a
     theme feel like one rather than a recoloured button. */
  --bg:          #050e1a;
  --surface:     #0b1729;
  --surface-2:   #112036;
  --rule:        #1d3050;
  --ink:         #e8eef8;
  --muted:       #8ea3c0;

  --brand:       #4aa3f0;
  --brand-dim:   #3a8bd4;
  --on-brand:    #050e1a;
  --brand-soft:  #0d2036;

  --danger:      #ff6a5a;
  --danger-rule: #5a231d;
  --danger-bg:   #23100c;
  --danger-ink:  #ffb4aa;

  /* The outcome codes shift with the page so they sit on it rather than on top
     of it, but they keep their order and their character: warm, neutral, cool.
     A 1 is recognisably a 1 in every theme. */
  --c1:      #f0a94a;
  --c1-bg:   #2b1f0d;
  --c0:      #9aa8bc;
  --c0-bg:   #1a2233;
  --c2:      #b08ce8;
  --c2-bg:   #221a38;

  --amend:     #e8724c;
  --amend-bg:  #2b150e;
  --on-amend:  #050e1a;
}

/* Teal: near the original green but cooler, for anyone who wants a change without a jolt. */
[data-theme="teal"] {
  color-scheme: dark;

  /* Between the green and the blue: a deep sea page rather than a forest one,
     for anyone who wants a change without a jolt. */
  --bg:          #04141a;
  --surface:     #082027;
  --surface-2:   #0e2c34;
  --rule:        #17414b;
  --ink:         #e6f3f5;
  --muted:       #85a8ae;

  --brand:       #2ec5c0;
  --brand-dim:   #26a8a4;
  --on-brand:    #04141a;
  --brand-soft:  #072b2c;

  --danger:      #ff6a5a;
  --danger-rule: #5a231d;
  --danger-bg:   #23100c;
  --danger-ink:  #ffb4aa;

  --c1:      #eda63f;
  --c1-bg:   #2a1e0c;
  --c0:      #95a9ad;
  --c0-bg:   #18242a;
  --c2:      #a98bdd;
  --c2-bg:   #1f1a33;

  --amend:     #e8724c;
  --amend-bg:  #2a150f;
  --on-amend:  #04141a;
}


[data-theme="light"] {
  color-scheme: light;

  --bg:          #f1f5f2;
  --surface:     #ffffff;
  --surface-2:   #e9f0eb;
  --rule:        #d2ded6;
  --ink:         #0a1f16;
  --muted:       #526d5d;

  /* Darker than the mark's green: the mark sits on white here, and this has
     to carry text and button fills at a readable contrast. */
  --brand:       #0b7a46;
  --brand-dim:   #096139;
  --on-brand:    #ffffff;
  --brand-soft:  #e3f2ea;

  --danger:      #b3261e;
  --danger-rule: #e8c4c1;
  --danger-bg:   #fdf3f2;
  --danger-ink:  #8c1d17;

  --c1:      #8a5606;
  --c1-bg:   #fbf1e0;
  --c0:      #4f6259;
  --c0-bg:   #eef1ef;
  --c2:      #5b3fa0;
  --c2-bg:   #f0ecfa;

  --amend:     #a8341a;
  --amend-bg:  #fbe9e4;
  --on-amend:  #ffffff;
}

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius: 4px;
}

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

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  /* 16px floor stops iOS zooming when an input takes focus. */
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Figures: monospace, aligned in columns, and a touch brighter than the
   labels beside them -- the lit digits on the board. */
.num, .mono, time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
  color: var(--ink);
}

.lede { color: var(--muted); }

/* Saved credentials must not repaint fields white. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--ink);
}

/* --- top bar ------------------------------------------------------------- */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.brand:hover { text-decoration: none; }
.brand-mark { display: block; width: 26px; height: 26px; }

.brand-name {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.01em;
}

.topnav {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}

.nav-group {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  flex-wrap: wrap;
}

.nav-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--rule);
  flex: none;
}

.topnav a {
  text-decoration: none;
  color: var(--muted);
  font-size: .875rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.topnav a:hover {
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}

.topnav a.active {
  color: var(--brand);
  font-weight: 600;
  background: var(--brand-soft);
}

.account { display: flex; align-items: center; gap: var(--space-3); }

.app-clock {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
  /* Fixed width so the ticking seconds never shift what sits beside it. */
  min-width: 10.5ch;
  text-align: right;
}

/* --- account menu --------------------------------------------------------
   One control instead of several. A native <details>, so it opens, closes and
   is keyboard reachable with no script; menu.js only adds Escape and
   click-away. */

.account-menu { position: relative; }

.account-menu > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  white-space: nowrap;
}

.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary::marker { content: ""; }
.account-menu > summary:hover { background: var(--surface-2); }
.account-menu > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.account-menu[open] > summary { background: var(--surface-2); border-color: var(--rule); }

.account-name {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
  flex: none;
}

.account-menu[open] .caret {
  border-top: none;
  border-bottom: 5px solid var(--brand);
}

.account-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 14rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
}

.account-role {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px dashed var(--rule);
  margin-bottom: 2px;
}

.account-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  font-size: .875rem;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.account-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.account-item[aria-current="page"] { font-weight: 600; color: var(--brand); }
.account-panel form { display: contents; }
.account-sep { border-top: 1px dashed var(--rule); margin: 2px 0; }

/* --- layout -------------------------------------------------------------- */

.shell {
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

.page-head { margin-bottom: var(--space-5); }
.page-head p { color: var(--muted); font-size: .9375rem; margin: var(--space-1) 0 0; }

/* --- cards --------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
}

.card.narrow { max-width: 26rem; }

.card-head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px dashed var(--rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.eyebrow {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
}

.count-warn { color: var(--danger); font-weight: 600; }

.card-body { padding: var(--space-4); }
.card-body.flush { padding: 0; }

.card-foot {
  padding: var(--space-3) var(--space-4);
  border-top: 1px dashed var(--rule);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.card-danger { border-color: var(--danger-rule); }
.card-reveal { border-color: var(--brand); }

.reveal-value {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  letter-spacing: .06em;
  color: var(--brand);
  padding: var(--space-4);
  background: var(--brand-soft);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  word-break: break-all;
}

/* --- dashboard hub ------------------------------------------------------- */

.hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.hub-heading {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.hub-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
}

.hub-card:hover { border-color: var(--brand); text-decoration: none; }
.hub-card-flagged { border-left: 3px solid var(--brand); }
.hub-card .hub-note { flex: 1; }

.hub-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--brand);
}

.hub-note { font-size: .8125rem; color: var(--muted); }

.hub-go {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--rule);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--brand);
}

.hub-go::after { content: " \2192"; }

/* --- toolbar: filter chips and search ------------------------------------ */

.toolbar {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: .8125rem;
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover { border-color: var(--brand); color: var(--ink); text-decoration: none; }

.chip-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
}

.chip-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  opacity: .75;
}

.searchbar { display: flex; gap: var(--space-2); align-items: center; }

.select {
  font-family: inherit;
  font-size: 1rem;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  min-width: 16rem;
  max-width: 100%;
}

.select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.searchbar input {
  font-family: inherit;
  font-size: 1rem;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  min-width: 12rem;
}

.searchbar input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
}

/* --- tables -------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: .875rem; }

thead th {
  text-align: left;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--surface-2); }

.col-rank { width: 3rem; }
.col-figure { text-align: right; }
thead th.col-figure { text-align: right; }

/* Your own row is marked on a different channel from the top four: they get a
   filled background and a coloured bar, you get an outline. Two separate
   signals, so a row can carry both at once and still read as both -- being
   fourth and being you are different facts. */

.row-you td {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: transparent;
}

.row-you td:first-child {
  border-left: 2px solid var(--ink);
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.row-you td:last-child {
  border-right: 2px solid var(--ink);
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* When you are also in the top four, keep their fill and bar underneath the
   outline instead of letting one erase the other. */
.row-you.row-top td { background: var(--brand-soft); }
.row-you.row-top td:first-child {
  box-shadow: inset 3px 0 0 var(--brand);
  border-left-color: var(--ink);
}
.row-you.row-first td:first-child { box-shadow: inset 5px 0 0 var(--brand); }

/* --- tags ---------------------------------------------------------------- */

.tag {
  font-family: var(--font-mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 2px 6px;
  color: var(--muted);
  white-space: nowrap;
  display: inline-block;
}

.tag-strong { border-color: var(--brand); color: var(--brand); }
.tag-warn { border-color: var(--danger-rule); color: var(--danger); }

.event {
  font-family: var(--font-mono);
  font-size: .75rem;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 2px 6px;
  white-space: nowrap;
  color: var(--muted);
}

.event-warn { background: var(--danger-bg); color: var(--danger-ink); }

/* --- participation flag -------------------------------------------------- */

.flag {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.flag-yes { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.flag-no { color: var(--danger); border-color: var(--danger-rule); background: var(--danger-bg); }

/* --- buttons ------------------------------------------------------------- */

.btn {
  font-family: inherit;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0 var(--space-4);
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
}

.btn:hover { border-color: var(--brand); color: var(--ink); text-decoration: none; }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
}
.btn-primary:hover { background: var(--brand-dim); border-color: var(--brand-dim); color: var(--on-brand); }

.btn-danger { color: var(--danger); border-color: var(--danger-rule); background: var(--danger-bg); }
.btn-danger:hover { border-color: var(--danger); color: var(--danger); }

.btn-block { width: 100%; }
.btn-quiet { border-color: transparent; background: none; color: var(--muted); }
.btn-quiet:hover { border-color: var(--rule); color: var(--ink); }

.btn:disabled,
.btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; border-color: var(--rule); }
.btn:disabled:hover { border-color: var(--rule); background: var(--surface-2); }

/* Real gaps between actions, so a thumb cannot land on the destructive one. */
.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.btn-row form { display: contents; }

td.actions { white-space: nowrap; }

/* --- forms --------------------------------------------------------------- */

.field { margin-bottom: var(--space-4); }

.field .field-label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.field label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.field input {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-height: 44px;
}

.field input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
}

.field input[aria-invalid="true"] { border-color: var(--danger); }

.hint { font-size: .75rem; color: var(--muted); margin-top: var(--space-2); }
.field-error { font-size: .8125rem; color: var(--danger); margin-top: var(--space-2); }

.form-actions { margin-top: var(--space-5); }

/* --- match rows ---------------------------------------------------------- */

.match-grid-head,
.match-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr 1fr auto;
  gap: var(--space-3);
  align-items: center;
}

.match-grid-head {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-3);
}

.match-row { margin-bottom: var(--space-3); }
.match-col-number { color: var(--muted); }

.match-col-team input {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-height: 44px;
}

.match-col-team input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
}

.match-col-team input[aria-invalid="true"] { border-color: var(--danger); }
.match-col-error { grid-column: 2 / -1; }

.match-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--rule);
}

.match-actions .hint { margin-top: 0; }

/* --- picks: 1 / 0 / 2 ----------------------------------------------------
   The fixture is printed above the buttons, so a bare 1 is unambiguous
   without repeating the team names three times. */

.pick { padding: var(--space-4) 0; border-bottom: 1px dashed var(--rule); }
.pick:first-child { padding-top: 0; }
.pick:last-child { border-bottom: none; padding-bottom: 0; }
.pick-invalid { background: var(--danger-bg); }

.pick-fixture {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.pick-number { color: var(--muted); flex: none; min-width: 1.5rem; }
.pick-teams { font-size: .9375rem; }
.pick-versus { color: var(--muted); margin: 0 var(--space-2); }
.pick-worth { margin-left: auto; color: var(--muted); flex: none; }

.pick-options { display: flex; gap: var(--space-3); border: none; margin: 0; padding: 0; }
.pick-option { flex: 1 1 0; display: flex; }

/* An extra's options are words rather than single digits, so they stack. */
.pick-options-stack { flex-direction: column; gap: var(--space-2); }
.pick-options-stack .pick-option { flex: none; }

.pick-options-stack label {
  flex-direction: row;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.pick-options-stack .pick-code { font-family: var(--font-ui); font-size: .9375rem; }
.pick-options-stack .pick-label {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
  text-transform: none;
  letter-spacing: 0;
}

/* Hidden from sight, still focusable and still announced -- the label is the
   visible control. */
.pick-option input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pick-option label {
  flex: 1;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  padding: var(--space-2);
  text-align: center;
}

.pick-option label:hover { border-color: var(--brand); }

.pick-option input:checked + label {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.pick-option input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }
.pick-option input:disabled + label { cursor: not-allowed; opacity: .5; }
.pick-option input:disabled:checked + label { opacity: 1; }

.pick-code { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; line-height: 1; }
.pick-label { font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; }

.pick-chosen { display: inline-flex; align-items: center; gap: var(--space-2); font-size: .8125rem; }

.pick-chosen .pick-code {
  border: 1px solid var(--brand);
  color: var(--brand);
  border-radius: var(--radius);
  padding: 2px 6px;
  font-size: .75rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- numbered explainer -------------------------------------------------- */

.steps {
  margin: 0;
  padding-left: 1.25rem;
  font-size: .9375rem;
  color: var(--muted);
}

.steps li { margin-bottom: var(--space-3); }
.steps li:last-child { margin-bottom: 0; }
.steps strong { color: var(--brand); font-family: var(--font-mono); }

/* A hub card that is a figure rather than a link. */
.hub-card-plain { cursor: default; }
.hub-card-plain:hover { border-color: var(--rule); transform: none; }

/* --- league tabs on the standings page ----------------------------------- */

.league-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.league-tab {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.league-tab:hover { border-color: var(--brand); }

.league-tab-on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
}

/* --- theme picker: four swatches in the account menu --------------------- */

.account-label {
  display: block;
  padding: var(--space-2) var(--space-4) 0;
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.theme-picker {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-3);
}

.theme-swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--rule);
  border-radius: 50%;
  cursor: pointer;
}

.theme-swatch:hover { border-color: var(--ink); }

.theme-swatch-on {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--surface);
}

.theme-swatch:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* The swatch shows the theme it selects, not the one in use, so these are
   fixed rather than taken from the variables. */
.theme-swatch-dark  { background: #18c172; }
.theme-swatch-blue  { background: #4aa3f0; }
.theme-swatch-teal  { background: #2ec5c0; }
.theme-swatch-light { background: #f1f5f2; }

/* --- outcome codes ------------------------------------------------------- */

/* A framed chip rather than tinted text: on a game week page these sit in a
   column of their own and need to be findable at a glance, not read. */
.code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.75rem;
  padding: 0 var(--space-2);
  border: 2px solid currentColor;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
}

.code-1 { color: var(--c1); background: var(--c1-bg); }
.code-0 { color: var(--c0); background: var(--c0-bg); }
.code-2 { color: var(--c2); background: var(--c2-bg); }

/* The pick buttons carry the same colour, filled once chosen. */
.pick-option label.code-1 { color: var(--c1); }
.pick-option label.code-0 { color: var(--c0); }
.pick-option label.code-2 { color: var(--c2); }

.pick-option label.code-1:hover { border-color: var(--c1); }
.pick-option label.code-0:hover { border-color: var(--c0); }
.pick-option label.code-2:hover { border-color: var(--c2); }

.pick-option input:checked + label.code-1 {
  background: var(--c1); border-color: var(--c1); color: var(--bg);
}
.pick-option input:checked + label.code-0 {
  background: var(--c0); border-color: var(--c0); color: var(--bg);
}
.pick-option input:checked + label.code-2 {
  background: var(--c2); border-color: var(--c2); color: var(--bg);
}

.pick-clear label {
  border-style: dashed;
  color: var(--muted);
  font-size: .75rem;
}

.pick-clear input:checked + label { background: var(--surface-2); }

/* --- week chips: picking a range by clicking ----------------------------- */

.week-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.week-chip input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.week-chip label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
  cursor: pointer;
}

.week-chip label:hover { border-color: var(--brand); }

.week-chip input:checked + label {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
}

.week-chip input:focus-visible + label {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.week-chip input:disabled + label {
  opacity: .35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.js [data-fallback] { display: none; }

/* --- split layout: overall beside a comparison --------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

.compare-picker { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.compare-picker .select { min-width: 0; flex: 1 1 10rem; }

/* A whole card that folds: the head is the control. */
.card-collapse > summary {
  list-style: none;
  cursor: pointer;
}

.card-collapse > summary::-webkit-details-marker { display: none; }
.card-collapse > summary::marker { content: ""; }
.card-collapse > summary:hover { background: var(--surface-2); }

.card-collapse > summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.card-collapse > summary .caret { margin-left: auto; border-top-color: var(--muted); }

.card-collapse[open] > summary .caret {
  border-top: none;
  border-bottom: 5px solid var(--brand);
}

/* --- folds: a card that opens ------------------------------------------- */

.archive, .card-fold { overflow: hidden; }

.archive > summary,
.card-fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.archive > summary::-webkit-details-marker,
.card-fold > summary::-webkit-details-marker { display: none; }
.archive > summary::marker,
.card-fold > summary::marker { content: ""; }

.archive > summary:hover,
.card-fold > summary:hover { background: var(--surface-2); }

.archive > summary:focus-visible,
.card-fold > summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.card-fold > summary {
  padding: var(--space-3) var(--space-4);
  border-top: 1px dashed var(--rule);
  font-size: .8125rem;
  color: var(--muted);
}

.archive[open] > summary { border-bottom: 1px dashed var(--rule); }
.card-fold[open] > summary { color: var(--ink); }

.archive-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.archive-figures {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

.archive-points { color: var(--brand); font-weight: 600; }

.archive > summary .caret,
.card-fold > summary .caret { border-top-color: var(--muted); }

.archive[open] > summary .caret,
.card-fold[open] > summary .caret {
  border-top: none;
  border-bottom: 5px solid var(--brand);
}

/* A checkbox and its wording as one target, so the label is tappable and the
   pair never wraps apart. */
.check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  cursor: pointer;
}

.check input { width: 1.125rem; height: 1.125rem; flex: none; }

/* --- the rulebooks ------------------------------------------------------
   The words are the league's own and are reproduced exactly; everything here
   is presentation. A measure of around 68 characters keeps long Turkish
   sentences readable, and the whole thing inherits the theme, so the same
   document works on the light palette as well as the dark ones. */

.guide {
  max-width: 68ch;
  margin-top: var(--space-5);
}

.guide-title {
  margin: 0 0 var(--space-3);
  font-size: 1.5rem;
  line-height: 1.25;
}

.guide-lead {
  margin: 0 0 var(--space-6);
  color: var(--muted);
  line-height: 1.6;
}

.guide-section {
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  margin-bottom: var(--space-5);
}

.guide-section:first-of-type { border-top: none; padding-top: 0; }

.guide-heading {
  margin: 0 0 var(--space-3);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--brand);
}

.guide-text {
  margin: 0 0 var(--space-3);
  line-height: 1.65;
}

.guide-strong { font-weight: 700; color: var(--ink); }

.guide-list {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  line-height: 1.65;
}

.guide-list li { margin-bottom: var(--space-2); }
.guide-list li::marker { color: var(--brand); }

/* The worked example in the original is indented under its bullet. */
.guide-indent {
  margin: 0 0 var(--space-3) var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--rule);
}

.guide-indent .guide-text:last-child { margin-bottom: 0; }

.guide-table { width: 100%; }
.guide-table th[scope="row"] { font-weight: 600; }

/* --- game weeks: open, latest, and the rest -----------------------------
   A season runs to 38 weeks in each league, so listing every one of them
   buries the two things anyone actually came for: what is still open, and
   what just finished. The rest goes behind a disclosure. */

.section-title {
  margin: var(--space-6) 0 var(--space-3);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-title:first-of-type { margin-top: 0; }

.open-week { border-color: var(--brand); }

.open-week-body {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.open-week-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-wrap: wrap;
}

.past-weeks { margin-top: var(--space-6); }

.past-weeks-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.past-weeks-toggle::-webkit-details-marker { display: none; }
.past-weeks-toggle:hover { border-color: var(--brand); }
.past-weeks-toggle .caret { margin-left: auto; }
.past-weeks[open] .past-weeks-toggle { margin-bottom: var(--space-4); }

/* --- amending a bet -----------------------------------------------------
   Placing a bet and changing one already placed are different acts, so they
   do not share a button. This is a warm red of its own rather than the error
   red, which everywhere else in the app means something has gone wrong. */

.btn-small {
  min-height: 44px;
  padding: 0 var(--space-3);
  font-size: .875rem;
}

.btn-amend {
  border-color: var(--amend);
  background: var(--amend-bg);
  color: var(--amend);
  font-weight: 600;
}

.btn-amend:hover {
  border-color: var(--amend);
  background: var(--amend);
  color: var(--on-amend);
}

/* --- the payout that actually happened ----------------------------------
   Of the three payout columns only one was the result. It is framed in that
   outcome's colour so the eye finds it without reading across the row, and the
   other two are dimmed to say plainly that they did not occur. */

.paid {
  display: inline-block;
  padding: 2px 8px;
  border: 2px solid currentColor;
  border-radius: var(--radius);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.paid-1 { color: var(--c1); background: var(--c1-bg); }
.paid-0 { color: var(--c0); background: var(--c0-bg); }
.paid-2 { color: var(--c2); background: var(--c2-bg); }

/* What you actually took from the match. */
.earned {
  display: inline-block;
  padding: 2px 8px;
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- the top four -------------------------------------------------------
   Marked in every table except the jackpot ones, where the question is whether
   a threshold was met rather than who is ahead. */

/* The bar is drawn with an inset shadow rather than a ::before, because on
   narrow screens every cell uses ::before to print its own label and the two
   collided -- the rank cell lost its label and gained a floating bar. */

.row-top td { background: var(--brand-soft); }

.row-top .col-rank {
  font-weight: 700;
  color: var(--brand);
}

.row-top td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

/* First place a shade stronger than the rest of the four. */
.row-first .col-rank { font-size: 1rem; }
.row-first td:first-child { box-shadow: inset 5px 0 0 var(--brand); }

/* --- jackpot verdict ----------------------------------------------------
   Whether a count is a win depends on a threshold that is not in the number,
   so each row states its own standing rather than leaving it to be worked out. */

.verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  white-space: nowrap;
}

.verdict-won { color: var(--brand); background: var(--brand-soft); }
.verdict-out { color: var(--muted); background: var(--surface-2); }
.verdict-live { color: var(--c1); background: var(--c1-bg); }

.jackpot-count-won { color: var(--brand); font-weight: 700; }

.row-won td { background: var(--brand-soft); }

/* --- joker column -------------------------------------------------------- */

.joker-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  white-space: nowrap;
}

.joker-held { color: var(--brand); background: var(--brand-soft); }
.joker-used { color: var(--muted); background: var(--surface-2); }

/* --- match page: one block per outcome ----------------------------------- */

.versus {
  color: var(--muted);
  font-weight: 400;
  font-size: .75em;
  padding: 0 var(--space-2);
}

.result-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.result-label {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.result-code {
  font-size: 2.5rem;
  min-width: 3.5rem;
  height: 3.5rem;
  border-width: 2px;
}

.result-pending { color: var(--muted); font-size: 1rem; }

.outcome {
  border: 1px solid var(--rule);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.outcome-1 { border-left-color: var(--c1); }
.outcome-0 { border-left-color: var(--c0); }
.outcome-2 { border-left-color: var(--c2); }
.outcome-none { border-left-color: var(--rule); }

/* The winning block is lifted rather than recoloured, so the outcome colours
   keep meaning what they mean everywhere else. */
.outcome-won { border-color: var(--brand); border-left-color: var(--brand); }

.outcome-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px dashed var(--rule);
}

.outcome-team { font-weight: 600; font-size: .9375rem; }

.outcome-figures {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.outcome-pays { color: var(--brand); font-weight: 600; }

.outcome-names {
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.outcome-names li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .9375rem;
}

.name-1 { color: var(--c1); }
.name-0 { color: var(--c0); }
.name-2 { color: var(--c2); }
.name-won { font-weight: 600; }

.outcome-empty {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--muted);
  font-size: .875rem;
}

.option-correct { border-color: var(--brand) !important; }

/* --- joker ---------------------------------------------------------------
   A star beside a name: lit while the member still holds theirs, dimmed once
   it has been played. */

.joker-mark {
  color: var(--brand);
  font-size: .875rem;
  line-height: 1;
  vertical-align: baseline;
}

.joker-spent { color: var(--rule); }

.joker-row { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }

.joker-option input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.joker-option label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: .8125rem;
  cursor: pointer;
}

.joker-option label:hover { border-color: var(--brand); color: var(--ink); }

.joker-option input:checked + label {
  border-style: solid;
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

.joker-option input:focus-visible + label {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.joker-footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--rule);
}

.joker-footer .hint { margin-top: 0; }

/* --- notices and alerts --------------------------------------------------
   A notice states a condition of the page. An alert reports the outcome of
   something you just did. */

.notice {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: .875rem;
  color: var(--ink);
}

.notice-warn { border-left-color: var(--brand); }

.notice-danger {
  border-left-color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-rule);
  color: var(--danger-ink);
}

.notice-danger a { color: var(--danger-ink); text-decoration: underline; }

/* Saving a bet is the moment that matters most in this app, and the previous
   alert was a tinted strip that read as decoration. This one carries a mark,
   fills its background, and arrives with a brief movement so it is noticed
   without having to be read. */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border: 1px solid var(--brand);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--ink);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: .9375rem;
  font-weight: 500;
  animation: alert-in .28s ease-out;
}

.alert-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-size: .8125rem;
  line-height: 1;
}

.alert-text { flex: 1; min-width: 0; }

.alert-error {
  border-color: var(--danger);
  border-left-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger-ink);
}

.alert-error .alert-mark { background: var(--danger); color: var(--bg); }

@keyframes alert-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Movement is a preference, not a requirement. */
@media (prefers-reduced-motion: reduce) {
  .alert { animation: none; }
}

/* --- empty state ---------------------------------------------------------
   The six pips from the mark, for a page with nothing on it yet. */

.empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--muted);
  font-size: .875rem;
}

.empty::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rule);
  margin: 0 auto var(--space-5);
  transform: translateX(-8px);
  box-shadow:
     16px 0    0 0 var(--rule),
     0    14px 0 0 var(--rule),
     16px 14px 0 0 var(--rule),
     0    28px 0 0 var(--rule),
     16px 28px 0 0 var(--rule);
}

/* --- auth pages ---------------------------------------------------------- */

.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
}

.auth-card { width: 100%; max-width: 24rem; }

.auth-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.auth-mark img { width: 56px; height: 56px; display: block; }

.auth-mark span {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
}

.auth-foot { text-align: center; margin-top: var(--space-4); font-size: .875rem; color: var(--muted); }

/* --- pager --------------------------------------------------------------- */

.pager {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: .8125rem;
  color: var(--muted);
}

/* --- error page ---------------------------------------------------------- */

.error-page { text-align: center; }

/* --- mobile -------------------------------------------------------------- */

@media (max-width: 46rem) {
  /* Two rows, not four. Identity and account share the first; the sections
     run along the second and scroll sideways if they outgrow the width.
     Stacking each nav group on its own line pinned about a third of a phone
     screen under the header permanently -- this keeps every destination
     visible and one tap away while giving that space back. */
  .topbar-inner {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .brand { order: 1; min-width: 0; flex: 1 1 auto; }

  /* The clock is worth keeping on a phone -- it is what tells you how long is
     left before a deadline -- but at its desktop width it pushed the account
     menu off the row entirely. It keeps its place beside the name and is
     allowed to shrink, and the name gives way first. */
  .account {
    order: 2;
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    gap: var(--space-2);
  }

  .app-clock {
    min-width: 0;
    font-size: .6875rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topnav { order: 3; }

  .topnav {
    width: 100%;
    flex: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-2);
    padding-top: var(--space-1);
    border-top: 1px dashed var(--rule);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .topnav::-webkit-scrollbar { display: none; }

  /* Below about 380px there is no room for both on one line, so the clock
     takes the line under the brand rather than pushing anything off-screen. */
  @media (max-width: 24rem) {
    .topbar-inner { row-gap: var(--space-1); }
    .app-clock {
      order: 3;
      width: 100%;
      text-align: left;
      font-size: .75rem;
    }
    .account { flex-wrap: wrap; }
  }

  .nav-group { flex-wrap: nowrap; flex: none; }
  .topnav a { white-space: nowrap; }
  .nav-divider { flex: none; }

  .account-name { max-width: 5rem; }
  /* Anchored to the edge, so a long username cannot push it off-screen. */
  .account-panel { right: 0; left: auto; min-width: 13rem; }

  .shell { padding: var(--space-4) var(--space-3) var(--space-6); }

  .hub { grid-template-columns: 1fr; gap: var(--space-3); }
  .hub-figure { font-size: 2rem; }

  .split { grid-template-columns: 1fr; }
  .result-code { font-size: 2rem; min-width: 3rem; height: 3rem; }
  .outcome-figures { margin-left: 0; width: 100%; }
  .compare-picker { width: 100%; }
  .compare-picker .select { flex: 1 1 100%; }
  .archive-title { flex: 1; }
  .archive-figures { gap: var(--space-2); }

  .toolbar { gap: var(--space-3); }
  .chips { width: 100%; }
  .chip { flex: 1 1 auto; justify-content: center; }
  .searchbar { width: 100%; }
  .select {
  font-family: inherit;
  font-size: 1rem;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  min-width: 16rem;
  max-width: 100%;
}

.select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.searchbar input { flex: 1; min-width: 0; }

  /* Tables become stacked records. Each cell labels itself. */
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }

  tbody tr {
    border-bottom: 1px dashed var(--rule);
    padding: var(--space-3) var(--space-4);
  }
  tbody tr:nth-child(even) { background: transparent; }
  tbody tr:last-child { border-bottom: none; }

  tbody td {
    border: none;
    padding: var(--space-1) 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
  }

  tbody td::before {
    content: attr(data-label);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    flex: none;
  }

  td.actions { display: block; padding-top: var(--space-3); white-space: normal; }
  td.actions::before { content: none; }
  .btn-row .btn { flex: 1 1 8rem; }

  .col-figure, thead th.col-figure { text-align: left; }
  .col-rank { width: auto; }

  /* Stacked into cards, a row is one block, so the marks belong on the row
     rather than on each cell -- otherwise every line draws its own border. */
  .row-top td, .row-you td {
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .row-top {
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
    border-radius: var(--radius);
  }

  .row-first { box-shadow: inset 5px 0 0 var(--brand); }

  .row-you {
    border: 2px solid var(--ink);
    border-radius: var(--radius);
  }

  .row-you.row-top {
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
  }
  .app-clock { min-width: 0; }

  /* An open week stacks: the call to action goes full width so it is easy to
     hit with a thumb rather than being squeezed beside the deadline. */
  .open-week-body { flex-direction: column; align-items: stretch; }
  .open-week-meta { margin-left: 0; }
  .open-week-body .btn { width: 100%; justify-content: center; }

  .past-weeks-toggle { padding: 0 var(--space-3); }

  /* The rulebooks are already a single column; on a phone they just need the
     indent to stop eating the width. */
  .guide { max-width: none; }
  .guide-indent { margin-left: 0; padding-left: var(--space-3); }
  .guide-list { padding-left: var(--space-4); }
  .guide-title { font-size: 1.25rem; }
  .guide-heading { font-size: 1.0625rem; }

  /* The rewards table has a row label plus two figures, which fits across a
     phone; keeping it a real table beats stacking it into six lines. */
  .guide-table, .guide-table thead, .guide-table tbody,
  .guide-table tr, .guide-table th, .guide-table td { display: revert; }
  .guide-table thead { display: table-header-group; }
  .guide-table td::before, .guide-table th::before { content: none; }
  .guide-table th, .guide-table td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--rule);
  }
  .guide-table .num { text-align: right; }

  .match-grid-head { display: none; }

  .match-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    margin-bottom: 0;
    border-bottom: 1px dashed var(--rule);
  }

  .match-col-number {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .match-col-number::before { content: "Match "; }
  .match-col-action { display: flex; }
  .match-col-action .btn { flex: 1; }
  .match-col-error { grid-column: 1; }
  .match-actions { padding-top: var(--space-4); }
  .match-actions .btn { flex: 1 1 auto; }

  /* Points move under the fixture rather than off the right edge. */
  .pick-fixture { margin-bottom: var(--space-3); flex-wrap: wrap; }
  .pick-worth { margin-left: 0; width: 100%; padding-left: 1.5rem; }
  .pick-options { gap: var(--space-2); }
  .pick-option label { min-height: 52px; }
  .joker-option label { min-height: 44px; }
  .joker-footer { gap: var(--space-2); }

  .card-foot .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}