/*
 * The site's look, laid over Bootstrap. Loaded after bootstrap.min.css on every page.
 * Values come from docs/design/DESIGN.md (light theme). Plain CSS: Bootstrap reads
 * its colours and fonts from the --bs-* variables set here, so no build step is needed.
 * The shared pieces (cards, buttons, pills, touch) are set here (PRED-129); each page's
 * own pieces sit under its heading below. Dark mode comes with PRED-161.
 */

/* Design tokens */

:root {
  --bg: #F1F4F1;
  --surface: #FFFFFF;
  --surface-2: #F5F7F4;
  --surface-3: #EBEFEA;
  --ink: #0F1A14;
  --muted: #5B6862;
  --faint: #8A968F;
  --line: rgba(15, 26, 20, .08);
  --line-2: rgba(15, 26, 20, .14);
  --accent: #0A7A50;
  --accent-soft: #E0F2E9;
  --amber: #9A5B00;
  --amber-soft: #FFF1D6;
  --red: #B93636;
  --red-soft: #FBE4E1;
  --blue: #1463AE;
  --blue-soft: #E2EEFA;
  --gold: #C99A12;
  --silver: #8E98A3;
  --bronze: #AD6A34;

  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  /* Codes, links and keys people copy: one fixed style everywhere (PRED-373) */
  --code-font: 500 15px/1.4 var(--body);

  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 10px;
  --r-xs: 6px;

  --sh-1: 0 1px 2px rgba(15, 26, 20, .05), 0 1px 1px rgba(15, 26, 20, .03);
  --sh-2: 0 2px 4px rgba(15, 26, 20, .04), 0 12px 28px -8px rgba(15, 26, 20, .12);
  --alt: rgba(15, 26, 20, .025);
  --gold-ink: #8A6A0C;

  /* Outcome colours, strongest for an exact score */
  --pt-e: #03351F;
  --pt-g: #0E7048;
  --pt-r: #3C9C6F;
  --pt-w: #8FC0A8;

  /* Design rule: the gap between tables or cards placed side by side on desktop */
  --table-gap: 56px;

  /* The header: see-through page colour, white buttons */
  --hdr-bg: rgba(241, 244, 241, .85);
  --hdr-line: var(--line);
  --hdr-chip: var(--surface);
}

/* Bootstrap, told to use the tokens */

:root {
  --bs-body-font-family: var(--body);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--faint);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-3);
  --bs-border-color: var(--line-2);
  --bs-border-color-translucent: var(--line);
  --bs-heading-color: var(--ink);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 10, 122, 80;
  --bs-link-hover-color: #075A3B;
  --bs-link-hover-color-rgb: 7, 90, 59;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 10, 122, 80;
  --bs-success: var(--accent);
  --bs-success-rgb: 10, 122, 80;
  --bs-danger: var(--red);
  --bs-danger-rgb: 185, 54, 54;
  --bs-warning: var(--amber);
  --bs-warning-rgb: 154, 91, 0;
  --bs-info: var(--blue);
  --bs-info-rgb: 20, 99, 174;
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-focus-ring-color: rgba(10, 122, 80, .25);
}

/* Text: Barlow for reading, Barlow Condensed for titles and numbers */

body {
  font-variant-numeric: tabular-nums;
}

/* No grey flash when a phone screen is tapped */
html {
  -webkit-tap-highlight-color: transparent;
}

b,
strong {
  font-weight: 600;
}

h1, h2, h3, h4, h5, h6,
.display {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .05em;
}

h1 { font-weight: 300; }
h2, h3 { font-weight: 400; }
h4, h5 { font-weight: 500; }
h6 { font-weight: 600; }

/* Buttons: the main action is site green */

.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: #075A3B;
  --bs-btn-hover-border-color: #075A3B;
  --bs-btn-active-bg: #064A31;
  --bs-btn-active-border-color: #064A31;
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 10, 122, 80;
  --bs-btn-font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: #075A3B;
  --bs-btn-active-border-color: #075A3B;
  --bs-btn-disabled-color: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 10, 122, 80;
  --bs-btn-font-weight: 600;
}

.btn {
  --bs-btn-padding-y: .625rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-border-radius: var(--r-md);
  min-height: 44px;
  transition: transform .18s, color .18s, background-color .18s, border-color .18s, box-shadow .18s;
}

/* Small buttons stay small, with a 44px tap area round them */
.btn-sm {
  --bs-btn-padding-y: .3125rem;
  --bs-btn-padding-x: .75rem;
  --bs-btn-border-radius: var(--r-sm);
  position: relative;
  min-height: 0;
}
.btn-sm::before {
  content: "";
  position: absolute;
  inset: -7px 0;
}

/* Other small controls keep their look too, with a tap area of at least 44px round them (PRED-160) */
.me-btn, .hdr-btn, .seg a, .chip, .more, .still-pill { position: relative; }
.me-btn::after, .hdr-btn::after, .gban-chip::after, .seg a::after, .chip::after, .more::after, .still-pill::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
a.site-brand { display: inline-flex; align-items: center; gap: 9px; padding-block: 6px; }
/* The club name opens the club menu; its chevron turns while the menu is open */
.club-btn { display: inline-flex; align-items: center; gap: 9px; padding: 4px 10px 4px 2px; border: 0; border-radius: 999px; background: none; }
.club-btn .bi { font-size: 15px; opacity: .7; transition: transform .2s; }
.club-btn[aria-expanded="true"] .bi { transform: rotate(180deg); }
@media (hover: hover) { .club-btn:hover { background: var(--hdr-chip); } }
.brand-logo { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
/* Flare's own logo, signed out or in no club (v44) */
.flare-logo { width: 34px; height: 34px; flex: none; }

/* Boxes to type in or choose from are at least 44px tall, easy to tap */
.form-control,
.form-select { min-height: 44px; }

/* Buttons shrink a little when pressed, and lift on a mouse hover */
.btn:active { transform: scale(.97); }
@media (hover: hover) {
  .btn:not(:disabled, .disabled, .btn-link):hover { transform: translateY(-1px); }
}

/* A button that can't be pressed yet is calm grey, not faded colour */
.btn:disabled,
.btn.disabled {
  --bs-btn-disabled-bg: var(--surface-3);
  --bs-btn-disabled-border-color: var(--surface-3);
  --bs-btn-disabled-color: var(--faint);
  --bs-btn-disabled-opacity: 1;
}

/* Cards: white on the grey page, with soft corners and shadow */
.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: var(--r-lg);
  --bs-card-inner-border-radius: calc(var(--r-lg) - 1px);
  box-shadow: var(--sh-1);
}

/* HTMX: a loading sign shows only while its request runs (htmx's own inline styles are off) */

.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Header: stays at the top of the screen, the page showing faintly through it */

.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-line);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.site-brand {
  font: 500 21px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink);
  text-decoration: none;
}

/* Signed-out pages (Sign in, Join a club) sit in one narrow centred column */

.page-narrow {
  max-width: 560px;
  margin-inline: auto;
}
/* Club Admin pages with lists in columns, such as Members, use the full width (v42) */
.page-wide { max-width: 1200px; margin-inline: auto; }

.page-sub {
  color: var(--muted);
  margin-bottom: 1rem;
}

.card-heading {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--muted);
}

/* Form errors: a red box and a short red line under it */

.form-control[aria-invalid="true"] {
  border-color: var(--red);
}

.form-error {
  color: var(--red);
  font-size: .875rem;
  margin-top: .25rem;
}

/* "Available" or "Already taken" under the alias box on Join a club */
.alias-hint {
  font-size: .8125rem;
  font-weight: 500;
  margin-top: .25rem;
  min-height: 1em;
}
.alias-hint.ok { color: var(--accent); }
.alias-hint.bad { color: var(--red); }

/* Codes, keys and links people copy (share codes, authenticator keys, recovery codes):
   one fixed style everywhere, Barlow 500 at 15px, wrapping anywhere (DESIGN.md) */
.code-text {
  font: var(--code-font);
  overflow-wrap: anywhere;
}

/* The authenticator app's QR code, on a white square so phones can read it in dark mode */
.qr-code {
  width: 180px;
  height: 180px;
  background: #FFFFFF;
  padding: 8px;
  border-radius: 8px;
}

/* Avatars: a player's picture in a circle, or their initials when they have none (PRED-50) */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  display: inline-grid;
  place-items: center;
  font: 500 15px/1 var(--display);
  letter-spacing: .02em;
  flex: none;
  overflow: hidden;
}
.avatar.xl { width: 72px; height: 72px; font-size: 28px; }
.avatar.lg { width: 52px; height: 52px; font-size: 20px; }
/* A row with a tinted icon disc: a club in My clubs, a club in the club menu */
.club-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
.band + .club-row { border-top: 0; }
.club-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gr-kind { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pz-ico {
  width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none;
}
.pz-ico.k-gold { background: #FFF5D9; color: var(--gold-ink); }
.pz-ico.k-mint { background: var(--accent-soft); color: var(--accent); }
/* The club menu: a list of rows under the header's club name */
.club-menu { width: min(360px, calc(100vw - 16px)); padding: 0; background: var(--surface); overflow: clip; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.more-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px;
  background: none; border: 0; border-top: 1px solid var(--line); color: var(--ink); text-align: left;
  font-weight: 500; text-decoration: none;
}
.band + form .more-row, .band + .more-row { border-top: 0; }
.more-row .grow { flex: 1; display: flex; flex-direction: column; }
.more-row .grow span { font-size: 12px; font-weight: 400; color: var(--muted); }
.more-row[aria-current="true"] { background: var(--surface-2); }
@media (hover: hover) { .more-row:hover { background: var(--surface-2); } }
/* Members (PRED-414): one card, groups with a grey heading, and rows whose columns line up */
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.m-note { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.m-group {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 8px 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.m-group b { color: var(--ink); font-weight: 600; }
.mrow { display: grid; align-items: center; column-gap: 12px; row-gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.mrow.jr, .mrow.mm { grid-template-columns: 28px minmax(170px, 1.3fr) minmax(0, 1.2fr) 160px 104px 276px; }
.mrow.m-head { padding-block: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.m-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.m-who strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-who span, .m-email { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.m-email { font-size: 13px; }
.m-head .m-email { font-size: 11px; }
.m-contact { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.m-contact .bi { color: var(--muted); }
.m-status { min-width: 0; }
.m-act { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; }
.m-act .btn { white-space: nowrap; }
.m-confirm { flex-wrap: nowrap; white-space: nowrap; }
.m-gap { visibility: hidden; }
.m-list .mrow:nth-child(even) { background: var(--alt); }
.mrow.removing { background: var(--red-soft); }
.mrow.gone .avatar, .mrow.gone .m-who strong { opacity: .55; }
.mrow.gone .m-who strong { text-decoration: line-through; }
.m-remove { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted); }
@media (hover: hover) { .m-remove:hover { color: var(--red); background: var(--red-soft); } }
.admin-pill { background: var(--ink); color: var(--bg); }
@media (max-width: 1000px) {
  .mrow.mm { grid-template-columns: 28px minmax(0, 1fr) 150px 96px auto; }
  .mrow .m-email { display: none; }
  .mrow.jr { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .mrow.jr.m-head { display: none; }
  .mrow.jr .m-status { grid-column: 3; grid-row: 1; justify-self: end; }
  .mrow.jr .m-contact { grid-column: 2 / -1; grid-row: 2; white-space: normal; }
  .mrow.jr .m-act { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); justify-content: center; gap: 8px; }
  .mrow.jr .m-act .btn { width: 100%; }
}
@media (max-width: 700px) {
  .m-head { display: none; }
  .mrow.mm { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
  .mrow.mm .m-contact { grid-column: 2; grid-row: 2; white-space: normal; }
  .mrow.mm .m-status { grid-column: 3; grid-row: 1; }
  .mrow.mm .m-act { grid-column: 4; grid-row: 1; }
  .mrow.mm.removing .m-contact { display: none; }
  .mrow.mm.removing .m-act { grid-column: 2 / -1; grid-row: 2; }
}
/* Ways to join (PRED-415): each way with its mint icon; links and codes in a dashed box; on/off switches */
.way {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; align-items: center;
  margin: 0; padding: 14px 16px; border-top: 1px solid var(--line);
}
.band + .way { border-top: 0; }
.way .grow { display: contents; }
.way .grow > * { grid-column: 1 / -1; }
.way .grow > b { grid-column: 2; grid-row: 1; }
.way > .pz-ico { grid-row: 1; }
.way > .sw { grid-column: 3; grid-row: 1; }
.su-ref {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: 620px; padding: 10px 12px;
  background: var(--surface); border: 1px dashed var(--accent); border-radius: var(--r-md);
}
.su-ref code { flex: 1 1 200px; min-width: 0; font: var(--code-font); color: var(--ink); overflow-wrap: anywhere; text-align: center; }
.su-ref-v { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.su-ref .su-ref-v > * { flex: none; }
.su-ref-l { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.su-ref .btn { width: 118px; }
.su-ref form { margin: 0; }
@media (max-width: 640px) { .su-ref code, .su-ref-v { flex-basis: 100%; } }
.qr-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 620px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.invite-form { max-width: 620px; }
.justify-self-start { justify-self: start; }
.inv-list { display: flex; flex-direction: column; max-width: 620px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.inv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border-top: 1px solid var(--line); }
.inv-row:first-child { border-top: 0; }
.inv-row .grow { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; }
.inv-acts { display: flex; gap: 6px; }
.inv-acts form { margin: 0; }
.dom-in {
  display: flex; align-items: center; max-width: 300px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); overflow: hidden;
}
.dom-in b { padding: 0 10px; color: var(--muted); background: var(--surface-2); align-self: stretch; display: grid; place-items: center; }
.dom-in input { border: 0; border-radius: 0; }
.dom-in code { padding: 8px 10px; font: var(--code-font); overflow-wrap: anywhere; color: var(--ink); }
.way .btn-sm { justify-self: start; }
.way .form-control { background: var(--surface); }
/* An on/off switch */
.sw {
  width: 46px; height: 28px; border-radius: 14px; border: 0; background: var(--surface-3); position: relative; flex: none;
  transition: background .15s; box-shadow: inset 0 0 0 1px var(--line-2); display: inline-block;
}
.sw.on { background: var(--accent); }
.sw-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.sw.on .sw-knob { transform: translateX(18px); }
/* "You are joining" (PRED-416): the club in a green card, its crest, and who invited you */
.join-club {
  display: flex; flex-direction: row; gap: 14px; align-items: flex-start; padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface));
}
.join-club .brand-logo { width: 56px; height: 56px; }
.join-club .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.join-club strong { font: 500 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.jc-chip {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px; padding: 4px 10px;
  border-radius: 999px; background: var(--blue-soft); font-size: 13px;
}
.jc-chip .bi { color: var(--blue); }
.jc-chip.ok { background: var(--accent-soft); }
.jc-chip.ok .bi { color: var(--accent); }
.jc-not { margin-top: 6px; color: var(--muted); }
.jc-not form { margin: 0; }
/* A card's padded body under its header band */
.card-pad { padding: 16px 18px; }
/* Flare's own name, kept quiet, at the foot of the club menu and the Me page */
.by-flare {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 12px 16px;
  font-size: 12px; color: var(--muted); border-top: 1px solid var(--line);
}
.by-flare b { font: 400 15px/1 var(--display); letter-spacing: .1em; color: var(--ink); }
.by-flare b span { color: var(--accent); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Crop step: the chosen photo in a circle, with zoom controls under it */
.crop canvas {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--surface-3);
  box-shadow: 0 0 0 1px var(--line-2), 0 0 0 6px var(--surface-2);
  cursor: grab;
  touch-action: none;
}
.crop canvas:active { cursor: grabbing; }
.crop canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: 8px; }
.crop-zoom { width: 240px; }
.crop-zoom .form-range { --bs-secondary-bg: var(--line-2); min-height: 44px; }
.crop-zoom .form-range::-webkit-slider-thumb { background-color: var(--accent); }
.crop-zoom .form-range::-moz-range-thumb { background-color: var(--accent); }

/* Predict (PRED-372): one row per match, amber until predicted, green once predicted */
.day-head {
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-3);
}
.pred {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 14px 8px 12px;
  border-top: 1px solid var(--line);
}
.day-head + .pred { border-top: 0; }
.pred:has(.p-status.todo) {
  background: linear-gradient(90deg, var(--amber-soft), transparent 55%);
  box-shadow: inset 4px 0 0 var(--amber);
}
.pred:has(.p-status.done) { box-shadow: inset 4px 0 0 var(--accent); }
.p-time {
  font: 500 15px/1 var(--display);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.p-teams { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.teamline { display: flex; align-items: center; gap: 8px; font-weight: 500; min-height: 34px; }

/* A team's crest: its badge, or a shield in its kit colours (PRED-148) */
.crest { width: 26px; height: 26px; flex: none; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.crest.lg { width: 42px; height: 42px; }
.crest.sm { width: 18px; height: 18px; }
.crest text { font: 800 6.6px var(--display); }
img.crest { object-fit: contain; filter: none; }

/* A national team's flag (PRED-149) */
.flag { width: 27px; height: 18px; flex: none; display: block; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.flag.lg { width: 42px; height: 28px; }
.flag.sm { width: 21px; height: 14px; }
.p-steps { display: flex; flex-direction: column; gap: 2px; }

/* The - score + buttons */
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  display: grid;
  place-items: center;
}
@media (hover: hover) { .stepper button:hover { background: var(--surface-3); } }
.stepper button:active { transform: scale(.92); background: var(--surface-3); }
.stepper output {
  width: 26px;
  text-align: center;
  font: 400 24px/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.stepper output.empty { color: var(--muted); }
@media (pointer: coarse) {
  .stepper button { width: 40px; height: 40px; }
  .p-steps { gap: 4px; }
  .teamline { min-height: 42px; }
}

/* A change after kick-off: the buttons go and the row says why */
.p-status { display: none; }
.p-status.locked {
  display: block;
  grid-column: 1 / -1;
  margin: 0;
  color: var(--red);
  font-size: .875rem;
  font-weight: 500;
}
.pred:has(.p-status.locked) .stepper button { visibility: hidden; }

/* A postponed match (PRED-393): a grey pill in place of the buttons, and why */
.pred.is-off { box-shadow: inset 4px 0 0 var(--line-2); }
.pred.is-off .p-teams { color: var(--muted); }
.p-off { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .875rem; }
.o-p { --o: var(--line-2); }
.pw-off, .dm-off { grid-column: span 2; justify-self: center; }

/* Predict: the column headings under this week's summary (PRED-417) */
.fx-h {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; min-height: 28px; padding: 6px 14px 6px 12px;
  background: var(--surface-3); font: 600 11px/16px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.fx-h span:last-child { width: 106px; text-align: center; }
@media (pointer: coarse) { .fx-h span:last-child { width: 118px; } }

/* Predict: the heading where a later game week starts, so it doesn't read as this week's (PRED-405) */
.gw-head {
  padding: 40px 16px 12px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.gw-head h3 { margin: 0; font: 500 17px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }

/* "3 still to predict below": pinned at the bottom while empty matches are further down */
.still-to-predict {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 8px;
  pointer-events: none;
}
.still-to-predict:has(.still-pill[hidden]) { padding: 0; }
.still-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .3);
  animation: nudge 1.8s ease-in-out infinite;
}
.still-pill[hidden] { display: none; }
@keyframes nudge { 50% { transform: translateY(2px); } }

/* "Saved as you go" under the fixtures card, on the page's grey in dark text so it stands out
   (PRED-405): reads "Saved" for two seconds after each change */
.saved-line {
  display: grid;
  justify-items: center;
  margin: 0;
  padding: 6px 16px 14px;
}
.saved-note {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}
.saved-note .bi { color: var(--accent); }
.saved-note.flash { color: var(--accent); font-weight: 600; animation: saved-fade-out 2s forwards; }
.saved-note.flash + .quiet { animation: saved-fade-in 2s forwards; }
@keyframes saved-fade-out { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes saved-fade-in { 0%, 85% { opacity: 0; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .still-pill { animation: none; }
}

/* Results (PRED-66): Super Admin's lists of matches, a band on each card, and the round switch */
.card.flush { overflow: clip; }
.band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.band h2 { margin: 0; font: 500 18px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.band.amber { background: color-mix(in srgb, var(--amber-soft) 85%, var(--surface)); }
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pill.ok { background: var(--accent-soft); color: var(--accent); }
.pill.warn { background: var(--amber-soft); color: var(--amber); }
.pill.bad { background: var(--red-soft); color: var(--red); }
.pill.info { background: var(--blue-soft); color: var(--blue); }
.pill.plain { background: var(--surface-3); color: var(--muted); }
.count-dot {
  display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--red); color: #fff; font: 600 11px/20px var(--body); text-align: center;
}
.a-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.band + .a-row { border-top: 0; }
@media (hover: hover) { a.a-row:hover { background: var(--surface-2); } }
.a-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.task-ico {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--amber-soft); color: var(--amber);
}
.task-ico.plain { background: var(--surface-3); color: var(--muted); }
.res-nav {
  display: grid; grid-template-columns: 44px minmax(0, 320px) 44px; justify-content: center;
  align-items: center; gap: 10px; margin-bottom: 14px;
}
.res-step {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
}
/* The game week picker: a pill with the game week's name; the real list sits invisibly on top */
.res-pick {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0;
  padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 600 16px/1 var(--body); cursor: pointer;
}
.res-pick .bi { color: var(--muted); font-size: 14px; }
.res-pick select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.res-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A row's button that names where it goes, with a chevron; just the chevron on phones */
.a-go { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 132px; white-space: nowrap; }
.a-go .bi { color: var(--muted); }
@media (max-width: 520px) { .a-go { min-width: 0; } .a-go span { display: none; } }
/* A page's head: Back, then its icon, title and a line under it */
.set-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 500; padding: 4px 0; text-decoration: none; }
.set-title { display: flex; align-items: center; gap: 12px; }
.set-title .grow { flex: 1; min-width: 0; }
.set-title h1 { margin: 2px 0 0; font: 400 26px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.res-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.band + .res-row { border-top: 0; }
.res-row.open { background: color-mix(in srgb, var(--amber-soft) 35%, var(--surface)); }
.res-teams { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.res-when { font-size: 12px; color: var(--muted); }
.res-score { display: flex; flex-direction: column; align-items: flex-end; }
/* The score buttons line up with the two teams, under the kick-off line (PRED-159) */
.res-row > .p-steps { align-self: flex-end; }
.res-score b { font: 500 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.res-score small { font-size: 11px; color: var(--muted); }
.warn-t { color: var(--amber); }
.chase-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--amber);
}
/* The Save bar stays in view at the bottom while there are scores to save */
.save-bar-slot { display: contents; }
.set-bar {
  position: sticky; bottom: 8px; z-index: 5; margin-top: 14px; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: 0 6px 20px rgba(15, 26, 20, .12);
}
.set-bar .grow { flex: 1; }

/* Admin form fields laid out in a grid: label, box, then a short help line */
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 18px; padding: 14px 16px 16px; }
.fx { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fx.wide { grid-column: 1 / -1; }
.fx-lbl { float: none; margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.fx-help { display: block; font-size: 12px; color: var(--muted); }
.fx input[type="date"], .fx input[type="time"] { max-width: 220px; }
/* Two or more options as one switch, picked with radio buttons */
.fx-seg { align-self: flex-start; border-radius: var(--r-md); flex-wrap: wrap; }
.fx-seg label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 7px 14px; border-radius: var(--r-sm);
  font-weight: 500; font-size: 14px; color: var(--muted); cursor: pointer;
}
.fx-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fx-seg label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.fx-seg label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 1px; }
.gr-save { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px 16px; }

/* A match's details on the Results page (PRED-392): a grey panel under its row */
.res-more { border-top: 1px dashed var(--line-2); background: var(--surface-2); }
.res-more .fx-grid { padding-bottom: 10px; }
.res-more .form-control, .res-more .form-select { background-color: var(--surface); }
.res-more:has(input[value="off"]:checked) .if-on,
.res-more:not(:has(input[value="off"]:checked)) .if-off { display: none; }

/* The double points banker (PRED-70): a star under each match's time, and the line explaining it */
.p-time { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.banker-star {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 0; background: none; color: var(--faint);
}
.banker-star[aria-pressed="true"] { color: var(--gold); }
@media (hover: hover) { .banker-star:hover { color: var(--gold); } }
.banker-note { font-size: .875rem; color: var(--muted); }
.banker-note .bi { color: var(--gold); }
/* A refused banker tap: the row says why, and its score buttons stay */
.p-status.warn {
  display: block; grid-column: 1 / -1; margin: 0; color: var(--amber); font-size: .875rem; font-weight: 500;
}

/* Game tabs (PRED-134): Predict and Standings, until the full game header (PRED-132) */
.seg { display: inline-flex; background: var(--surface-3); border-radius: 999px; padding: 3px; gap: 2px; }
.seg a {
  padding: 7px 14px; border-radius: 999px; font-weight: 500; font-size: 14px;
  color: var(--muted); text-decoration: none; min-height: 36px; display: inline-flex; align-items: center;
}
.seg a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
@media (hover: hover) { .seg a:not([aria-current="page"]):hover { color: var(--ink); } }
.game-tabs { margin: 0 0 16px; }

/* Standings (PRED-134): your position strip, then My predictions and Overall side by side on desktop */
.tables { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
.mobile-tabs { display: flex; }
.pane[hidden] { display: none; }
@media (min-width: 900px) {
  .tables { grid-template-columns: minmax(320px, 400px) 1fr; column-gap: var(--table-gap); }
  .tables .span { grid-column: 1 / -1; }
  .mobile-tabs { display: none; }
  .pane[hidden] { display: flex !important; }
  .tables .pane > .pane-head { min-height: 60px; justify-content: center; }
  .tables .pane .pane-title { font-size: 26px; }
}

.me-strip {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "pos btns" "facts facts";
  align-items: center; gap: 12px 16px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.ms-pos { grid-area: pos; display: flex; flex-direction: column; gap: 4px; }
.ms-pos b { font: 300 36px/.9 var(--display); text-transform: uppercase; color: var(--gold-ink); }
.ms-pos span { color: var(--muted); font-weight: 500; font-size: 13px; }
.ms-facts {
  grid-area: facts; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface-2); border-radius: var(--r-md); padding: 10px 0;
}
/* How many facts the strip holds: a class, as the Content Security Policy blocks inline styles */
.ms-facts.n1 { grid-template-columns: 1fr; }
.ms-facts.n2 { grid-template-columns: repeat(2, 1fr); }
.ms-facts div { display: flex; flex-direction: column; align-items: center; gap: 3px; border-left: 1px solid var(--line-2); }
.ms-facts div:first-child { border-left: 0; }
.ms-facts b { font: 400 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.ms-facts span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 900px) {
  .me-strip { grid-template-columns: auto minmax(0, 460px) 1fr; grid-template-areas: "pos facts btns"; gap: 24px; }
}

/* A card's header: a soft glow of its colour (mint for overall, blue for history) */
.tbl-card { border-color: var(--line-2); box-shadow: var(--sh-2); --k: var(--faint); }
.all-card { --k: var(--accent); }
.hist-card { --k: var(--blue); }
.pane-head {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: radial-gradient(90% 180% at 0 0, color-mix(in srgb, var(--k) 18%, transparent), transparent 72%);
}
.pane-head .row1 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.pane-title { font: 400 20px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; margin: 0; white-space: nowrap; }
@media (max-width: 899px) { .tbl-card .pane-title { display: none; } }
.more { color: var(--accent); font-weight: 500; font-size: 14px; white-space: nowrap; text-decoration: none; }
.pw-sum { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; }
.pw-sum b { font: 400 26px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-sum span { font-size: 13px; color: var(--muted); }

/* Table rows: position, player, points */
.tbl { font-variant-numeric: tabular-nums; }
.tr {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 42px; align-items: center; gap: 6px;
  padding: 0 14px; min-height: 40px; border-top: 1px solid var(--line);
}
.tr.alt { background: var(--alt); }
.tr.me { background: var(--accent-soft); }
@media (hover: hover) { .tr:not(.th):hover { background: var(--surface-3); } }
.tr.th {
  min-height: 30px; border-top: 0; background: var(--surface-2); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.tr .pts { text-align: right; font: 400 17px/1 var(--display); }
.tr.th .pts { font: 600 11px/1 var(--body); color: var(--faint); }
.rank b { font: 500 16px/1 var(--display); }
.tr.me .rank b, .tr.me .pts { color: var(--accent); }
.player { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; }
.player .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr.me .player .t { font-weight: 600; }
.tbl .avatar { width: 24px; height: 24px; font-size: 10px; }
.tr.gap {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px;
  border-top: 1px dashed var(--line-2); color: var(--accent); font: 500 13px/1 var(--body); text-decoration: none;
}

/* My predictions: outcome counts, then one row per game week */
.o-e { --o: var(--pt-e); } .o-g { --o: var(--pt-g); } .o-r { --o: var(--pt-r); } .o-w { --o: var(--pt-w); }
.ps { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ps-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ps-cell {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border-radius: var(--r-sm); background: var(--surface-2);
}
.ps-cell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--o); }
.ps-cell.o-w::before { background: none; border-bottom: 1.5px dashed var(--o); }
.ps-cell b { font: 300 28px/1 var(--display); font-variant-numeric: tabular-nums; }
.ps-cell span { font-size: 11px; line-height: 1.25; color: var(--muted); text-wrap: balance; }
.ps-cell em { font-style: normal; font-weight: 600; color: var(--ink); }
.wk {
  display: grid; grid-template-columns: 48px 1fr 60px 16px; align-items: center; gap: 10px;
  padding: 9px 14px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.wk:first-child { border-top: 0; }
.wk:nth-of-type(even) { background: var(--alt); }
@media (hover: hover) { .wk:hover { background: var(--surface-3); } }
.wk.open { background: var(--surface-3); }
.wk-chev { color: var(--faint); transition: transform .2s; }
.wk.open .wk-chev { transform: rotate(180deg); }
.wk-hint { margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--line); }

/* Outcome colours on each week (PRED-147): a bar per match, and the week's matches when it is open */
.pips { display: flex; gap: 3px; max-width: 320px; }
.pips i { flex: 1; height: 8px; border-radius: 2px; background: var(--o); }
.pips i.o-w { background: none; box-shadow: inset 0 0 0 1.5px var(--o); }
.wk-detail { background: var(--surface); border-top: 1px solid var(--line); box-shadow: inset 0 3px 6px -4px rgba(0, 0, 0, .15); }
.dm {
  display: grid; grid-template-columns: minmax(0, 1fr) 46px 46px 32px; align-items: center; gap: 8px;
  padding: 7px 14px; border-top: 1px solid var(--line); font-size: 13px;
}
.dm-head { border-top: 0; padding: 6px 14px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.dm-head span:not(:first-child) { text-align: center; }
.dm-teams { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 500; }
.dm-teams > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-you {
  text-align: center; font: 500 16px/1 var(--display); padding: 5px 0; border-radius: var(--r-xs);
  border: 2px solid var(--o); background: color-mix(in srgb, var(--o) 16%, transparent);
}
.dm-act { text-align: center; font: 500 16px/1 var(--display); color: var(--muted); }
.dm-pts {
  justify-self: center; min-width: 26px; padding: 5px 6px; border-radius: var(--r-xs); text-align: center;
  font: 600 13px/1 var(--display); background: var(--o); color: #fff;
}
.dm.o-w .dm-pts { background: none; box-shadow: inset 0 0 0 1.5px var(--o); color: var(--muted); }
.wk-lbl { font: 500 15px/1 var(--display); letter-spacing: .04em; color: var(--muted); }
.wk-pts { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font: 400 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.wk-pts .bi { font-size: 12px; color: var(--gold); }
.empty-note { margin: 0; padding: 14px 16px; color: var(--muted); }

/* Overall table columns (PRED-136): Pld, Ex, GD, Res, Gls and vs actual from 640px wide */
.tr .opt { display: none; }
.tr .n { text-align: right; font-size: 14px; color: var(--muted); }
.tr.th .n { font: 600 11px/1 var(--body); color: var(--faint); }
@media (min-width: 640px) {
  .tr.wide { grid-template-columns: 52px minmax(0, 1fr) 60px repeat(5, 40px) 80px 44px; }
  .tr.wide .opt { display: block; }
}
.tbl-foot { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
@media (max-width: 639px) { .tbl-foot { display: none; } }

/* vs actual: green within 5, amber within 15, red beyond; the bar grows left (too few) or right (too many) */
.gg { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.gg-bar { position: relative; flex: none; width: 34px; height: 6px; border-radius: 3px; background: var(--surface-3); }
.gg-bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--faint); }
.gg-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--gg); }
.gg-bar i.under { right: 50%; }
.gg-bar i.over { left: 50%; }
.gg b { min-width: 28px; text-align: right; font: 500 15px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--gg); }
.gg-near { --gg: var(--accent); } .gg-mid { --gg: var(--amber); } .gg-far { --gg: var(--red); }
.gg-w0 { width: 0; } .gg-w1 { width: 5%; } .gg-w2 { width: 10%; } .gg-w3 { width: 15%; }
.gg-w4 { width: 20%; } .gg-w5 { width: 25%; } .gg-w6 { width: 30%; } .gg-w7 { width: 35%; }
.gg-w8 { width: 40%; } .gg-w9 { width: 45%; } .gg-w10 { width: 50%; }

/* Table style (PRED-145): movement beside the rank, form bars, and the gold line under the prize places */
.rank { display: flex; align-items: center; gap: 5px; }
.rank b { min-width: 18px; }
.mv { display: inline-flex; align-items: center; gap: 1px; font-size: 10px; font-weight: 600; line-height: 1; }
.mv i { font-size: 8px; line-height: 1; }
.mv.up { color: var(--accent); } .mv.down { color: var(--red); } .mv.same { color: var(--muted); }
.form { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.form i { width: 6px; border-radius: 2px; background: var(--accent); opacity: .35; }
.form i:last-child { opacity: 1; }
/* A form bar's height in steps, as the Content Security Policy blocks inline styles */
.fh0 { height: 3px; } .fh1 { height: 5px; } .fh2 { height: 7px; } .fh3 { height: 9px; }
.fh4 { height: 11px; } .fh5 { height: 12px; } .fh6 { height: 14px; } .fh7 { height: 16px; }
.fh8 { height: 18px; } .fh9 { height: 20px; } .fh10 { height: 22px; }
.zone { height: 0; border-top: 2px solid color-mix(in srgb, var(--gold) 70%, transparent); }

/* My stats (PRED-137): a button on the position strip opens the panel under it */
.ms-btns { grid-area: btns; justify-self: end; display: flex; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
  color: var(--muted); font-weight: 500; font-size: 13px; text-decoration: none;
}
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
@media (hover: hover) { .chip:not([aria-current="true"]):hover { border-color: var(--faint); color: var(--ink); } }
.ms-panel { padding: 16px; }

.mst { display: grid; gap: 18px; }
@media (min-width: 760px) {
  .mst { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 32px; }
  .mst-goals { grid-column: 1 / -1; }
}
.mst-l { display: block; font: 600 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.mst-h { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.mst-h b { font: 400 26px/1 var(--display); color: var(--ink); margin-right: 4px; }
.mst-h span { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 12px; }
.mst-bar { display: flex; gap: 2px; height: 26px; border-radius: 8px; overflow: hidden; }
.mst-bar i { display: grid; place-items: center; min-width: 18px; font: 500 13px/1 var(--display); font-style: normal; }
.mst-bar .o-e, .mst-key .o-e { background: var(--pt-e); color: #fff; }
.mst-bar .o-g, .mst-key .o-g { background: var(--pt-g); color: #fff; }
.mst-bar .o-r, .mst-key .o-r { background: var(--pt-r); color: #fff; }
.mst-bar .o-w, .mst-key .o-w { background: var(--pt-w); color: var(--ink); }
.mst-key { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.mst-key li { display: grid; grid-template-columns: 12px 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; }
.mst-key li > i { width: 12px; height: 12px; border-radius: 3px; }
.mst-key b { font: 500 17px/1 var(--display); text-align: right; }
.mst-key span { color: var(--faint); font-size: 12px; }
.mst-side { display: grid; gap: 16px; align-content: start; }
.mst-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.mst-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.mst-tile b { font: 400 22px/1.05 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mst-team { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mst-tile span { font-size: 12px; color: var(--muted); }
.mst-tile small { font-size: 11px; color: var(--faint); }
.mst-fbars { display: flex; align-items: flex-end; gap: 10px; height: 76px; }
.mst-fbars span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; width: 34px; }
.mst-fbars i { width: 100%; border-radius: 4px 4px 2px 2px; background: var(--pt-r); }
.mst-fbars i.best { background: var(--gold); }
.mst-fbars b { font: 500 13px/1 var(--display); }
.mst-fbars small { font-size: 10px; color: var(--faint); }
.mst-goals { padding-top: 14px; border-top: 1px solid var(--line); }
.mst-gl { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.mst-gl b { font: 400 22px/1 var(--display); color: var(--gg); }
.mst-gbar { position: relative; height: 6px; max-width: 420px; border-radius: 3px; background: var(--surface-3); }
.mst-gbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--gg, var(--accent)); }
.mst-gbar em { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); }

/* My stats sizes in steps, as the Content Security Policy blocks inline styles */
.fx0 { flex: 0 0 auto; } .fx1 { flex: 1; } .fx2 { flex: 2; } .fx3 { flex: 3; } .fx4 { flex: 4; }
.fx5 { flex: 5; } .fx6 { flex: 6; } .fx7 { flex: 7; } .fx8 { flex: 8; } .fx9 { flex: 9; }
.fx10 { flex: 10; } .fx11 { flex: 11; } .fx12 { flex: 12; } .fx13 { flex: 13; } .fx14 { flex: 14; }
.fx15 { flex: 15; } .fx16 { flex: 16; } .fx17 { flex: 17; } .fx18 { flex: 18; } .fx19 { flex: 19; } .fx20 { flex: 20; }
.mh0 { height: 4px; } .mh1 { height: 8px; } .mh2 { height: 12px; } .mh3 { height: 16px; } .mh4 { height: 20px; }
.mh5 { height: 24px; } .mh6 { height: 28px; } .mh7 { height: 32px; } .mh8 { height: 36px; } .mh9 { height: 40px; } .mh10 { height: 44px; }
.gw0 { width: 0%; } .gw1 { width: 5%; } .gw2 { width: 10%; } .gw3 { width: 15%; } .gw4 { width: 20%; }
.gw5 { width: 25%; } .gw6 { width: 30%; } .gw7 { width: 35%; } .gw8 { width: 40%; } .gw9 { width: 45%; }
.gw10 { width: 50%; } .gw11 { width: 55%; } .gw12 { width: 60%; } .gw13 { width: 65%; } .gw14 { width: 70%; }
.gw15 { width: 75%; } .gw16 { width: 80%; } .gw17 { width: 85%; } .gw18 { width: 90%; } .gw19 { width: 95%; }
.gw20 { width: 100%; }
.gl0 { left: 0%; } .gl1 { left: 5%; } .gl2 { left: 10%; } .gl3 { left: 15%; } .gl4 { left: 20%; }
.gl5 { left: 25%; } .gl6 { left: 30%; } .gl7 { left: 35%; } .gl8 { left: 40%; } .gl9 { left: 45%; }
.gl10 { left: 50%; } .gl11 { left: 55%; } .gl12 { left: 60%; } .gl13 { left: 65%; } .gl14 { left: 70%; }
.gl15 { left: 75%; } .gl16 { left: 80%; } .gl17 { left: 85%; } .gl18 { left: 90%; } .gl19 { left: 95%; }
.gl20 { left: 100%; }

/* Fixtures card (PRED-146): the game week stepper in its header, and a past week's rows */
.band.plain { background: var(--surface-2); }
.wk-nav { display: flex; align-items: center; gap: 6px; }
.gp-arr {
  position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none;
}
.gp-arr::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.gp-arr.off { opacity: .35; }
.wk-nav-lbl {
  display: flex; flex-direction: column; align-items: center; min-width: 64px;
  font: 500 18px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.wk-nav-lbl em { font: 600 10px/1.3 var(--body); font-style: normal; letter-spacing: .06em; color: var(--accent); }
.pw-sum span { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; }
.pw-sum em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 600; color: var(--gold-ink); }
.pw {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px 40px; align-items: center; gap: 8px;
  padding: 8px 14px 8px 16px; border-top: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--o);
}
.pw.o-w { box-shadow: inset 4px 0 0 var(--line-2); }
.pw-h {
  padding-block: 6px; box-shadow: none; background: var(--surface-3);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.pw-h span:nth-child(n+2) { text-align: center; }
.pw-sc { display: flex; flex-direction: column; gap: 2px; }
.pw-sc i { display: grid; place-items: center; min-height: 34px; font: 500 18px/1 var(--display); font-style: normal; font-variant-numeric: tabular-nums; }
.pw-sc:first-of-type i { color: var(--muted); }
.wr-pts {
  justify-self: center; min-width: 30px; padding: 6px 0; border-radius: var(--r-xs); text-align: center;
  font: 600 14px/1 var(--display); background: var(--o); color: #fff;
}
.wr-pts.o-w { background: none; box-shadow: inset 0 0 0 1.5px var(--o); color: var(--muted); }

/* Home (PRED-151, mockup concept F). Phones: one column. 900px and wider: the
   headline on its own row, then the tables and the to-do list side by side. */

.home-f { display: grid; gap: 26px; align-items: start; }
.home-f .full { grid-column: 1 / -1; }
@media (min-width: 900px) { .home-f { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--table-gap); } }
.h-mast { display: grid; gap: 6px; }
.h-eb { font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.h-title { font: 300 44px/.95 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0; text-wrap: balance; }
.h-title b { font-weight: 500; color: var(--accent); }
.h-mast p { margin: 0; font-size: 14px; color: var(--muted); }
@media (min-width: 900px) { .h-title { font-size: 60px; } }
.h-col { display: grid; gap: 10px; min-width: 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 28px; }
.sec-h { margin: 0; font: 500 18px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.more { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 500; font-size: 14px; white-space: nowrap; text-decoration: none; }
@media (hover: hover) { .more:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* Table neighbours */
.ladder {
  display: block; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  overflow: hidden; box-shadow: var(--sh-1); color: inherit; text-decoration: none;
}
.lr {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 34px; align-items: center; gap: 8px;
  padding: 9px 14px; border-top: 1px solid var(--line); font-size: 14px;
}
.lr:first-child { border-top: 0; }
.lr-pos { font: 500 19px/1 var(--display); }
.lr-pts { font: 500 18px/1 var(--display); }
.lr .mv { justify-self: end; }
.lr.me { background: linear-gradient(90deg, var(--accent-soft), transparent); box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.lr-target { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.lr-target > .bi { color: var(--gold); }
@media (hover: hover) { .ladder:hover { border-color: var(--line-2); } }

/* The to-do list: game badge, what to do, then one button */
.hacts { display: grid; }
.hact {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.hact .grow { display: flex; flex-direction: column; min-width: 0; }
.hact .grow b { font-weight: 600; font-size: 15px; line-height: 1.25; }
.hact.is-done .grow { opacity: .6; }
.hact.is-done b { text-decoration: line-through; text-decoration-color: var(--faint); }
.u-urgent { color: var(--red); font-weight: 600; }
.u-soon { color: var(--amber); font-weight: 600; }
.u-later { color: var(--ink); }
.day-free { margin: 4px 0 0; }

/* Your week (PRED-400): tear-off desk calendar pages, a coloured tab for each job due that day */
.desk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pg {
  display: flex; flex-direction: column; align-items: center; padding: 0 0 8px; border-radius: 10px; overflow: hidden;
  background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .15s;
  box-shadow: 0 1px 0 var(--line-2), 0 3px 0 -1px var(--surface), 0 4px 0 -1px var(--line-2);
}
.pg-m {
  position: relative; width: 100%; padding: 7px 0 4px; text-align: center; background: var(--surface-3); color: var(--muted);
  font: 600 9px/1 var(--bs-body-font-family); letter-spacing: .12em; text-transform: uppercase;
}
.pg-m::before, .pg-m::after { content: ""; position: absolute; top: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--bg); }
.pg-m::before { left: 26%; }
.pg-m::after { right: 26%; }
.pg b { margin-top: 5px; font: 400 26px/1 var(--display); }
.pg small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pg-tabs { display: flex; gap: 2px; height: 5px; margin-top: 5px; }
.pg-tabs i { width: 10px; height: 5px; border-radius: 2px; background: var(--muted); }
.pg-tabs .t-urgent { background: var(--red); }
.pg-tabs .t-soon { background: var(--amber); }
.pg-tabs .t-done { background: var(--accent); }
.pg.today .pg-m { background: var(--accent); color: #fff; }
.pg.kick .pg-m { background: var(--gold); color: #2A1D00; font-size: 8px; letter-spacing: .02em; }
.pg[aria-current] { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--accent), 0 10px 18px -10px rgba(10, 122, 80, .6); }
@media (hover: hover) { .pg:hover { transform: translateY(-2px); } }
@media (max-width: 360px) { .pg b { font-size: 21px; } .pg-m { font-size: 8px; } }
@media (min-width: 900px) { .pg b { font-size: 34px; } .pg small { font-size: 11px; } .pg-m { font-size: 10px; } }
/* System health (PRED-380, v43): a coloured row per connection; amber and red rows open their fix under them */
.hl-top { display: grid; gap: 12px; }
.hl-sum { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px; border-radius: var(--r-md); font-size: 13px; }
.hl-sum.ok { background: var(--accent-soft); }
.hl-sum.ok .bi { color: var(--accent); }
.hl-sum.warn { background: var(--amber-soft); }
.hl-sum.warn .bi { color: var(--amber); }
.hl-probs { display: grid; gap: 6px; }
.hl-prob { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.hl-links { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-row { flex-wrap: wrap; }
.hl-working .hl-ico { background: var(--accent-soft); color: var(--accent); }
.hl-late .hl-ico { background: var(--amber-soft); color: var(--amber); }
.hl-failed .hl-ico { background: var(--red-soft); color: var(--red); }
.hl-none .hl-ico { background: var(--surface-3); color: var(--muted); }
.hl-late { box-shadow: inset 4px 0 0 var(--amber); }
.hl-failed { box-shadow: inset 4px 0 0 var(--red); }
.hl-help {
  flex-basis: 100%; display: grid; gap: 6px; margin-left: 48px; padding: 10px 12px;
  border-radius: var(--r-md); background: var(--surface-2); font-size: 13px;
}
.hl-help p { margin: 0; }
.hl-help a { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; }
.day-h { margin: 6px 0 0; font: 500 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Game badges: one round badge per game type; the ring says what it needs from you */
.gbadge {
  --s: 36px; width: var(--s); height: var(--s); border-radius: 50%; padding: 2px; background: var(--ring);
  flex: none; display: inline-block;
}
.gbadge > span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--gt);
  color: #fff; border: 2px solid var(--bg); font-size: calc(var(--s) * .4);
}
.r-todo { --ring: conic-gradient(#F3B64B, #E07B22, #F3B64B); }
.r-done { --ring: var(--accent); }
.gbadge { position: relative; }
/* How many of this game type's games are waiting for you, on the badge's corner */
.gb-n {
  position: absolute; top: -5px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--amber); color: #fff; font: 600 10px/13px var(--body); font-style: normal; text-align: center;
  border: 2px solid var(--surface);
}
.gb-pred { --c1: #00D084; --c2: #03462B; --glow: #5CFFC0; }
.gbadge { --gt: radial-gradient(circle at 32% 26%, var(--glow) 0, var(--c1) 38%, var(--c2) 100%); }

/* Game page head (PRED-153): the banner pinned at the top, then the status card */

.gban-pin {
  position: sticky; top: 0; z-index: 6; margin: 0 0 12px; padding: 8px 0;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.gban { position: relative; height: 48px; color: #fff; }
.gban-bar {
  position: absolute; top: 0; bottom: 0; left: 24px; right: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 10px 0 34px; overflow: hidden; border-radius: 0 14px 14px 0;
  background: radial-gradient(70% 160% at 80% 0%, color-mix(in srgb, var(--glow) 85%, transparent) 0, transparent 55%),
    radial-gradient(60% 140% at 20% 120%, color-mix(in srgb, var(--c1) 70%, transparent), transparent 60%),
    linear-gradient(100deg, var(--c2), color-mix(in srgb, var(--c1) 80%, var(--c2)) 90%);
  box-shadow: 0 10px 20px -12px var(--c1);
}
.gban-bar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 60%);
}
@media (prefers-reduced-motion: no-preference) {
  .gban-bar::before { animation: gban-sheen 5s ease-in-out infinite; }
  @keyframes gban-sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
}
.gban-txt { position: relative; z-index: 1; flex: 1; min-width: 0; }
.gban-t {
  margin: 0; color: inherit; font: 500 20px/1 var(--display); text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}
.gban-s { margin: 3px 0 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Switch to the player's other predictor game (PRED-132) */
.gban-chip {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 9px;
  border-radius: 999px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  font: 600 11px/1 var(--body); white-space: nowrap; text-decoration: none;
}
@media (hover: hover) { .gban-chip:hover { background: rgba(0, 0, 0, .58); color: #fff; } }
.gban-logo {
  position: absolute; left: 0; top: 0; z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 21px; background: var(--gt);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .4), 0 0 16px -2px var(--c1);
}
.gban-logo.todo { box-shadow: 0 0 0 2px #F3B64B, 0 0 16px -2px var(--c1); }
.gban-logo .bi { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
/* How many predictor games are waiting for you, on the logo's corner */
.gban-logo .gb-n { top: -4px; right: -4px; border-color: var(--bg); }
.gban { --gt: radial-gradient(circle at 32% 26%, var(--glow) 0, var(--c1) 38%, var(--c2) 100%); }
@media (min-width: 768px) { .gban-t { font-size: 22px; } }

.scard {
  display: flex; align-items: center; gap: 12px; min-height: 76px; margin-bottom: 14px; padding: 12px 14px;
  border-radius: var(--r-lg); color: var(--ink);
  background: linear-gradient(100deg, color-mix(in srgb, var(--c1) 16%, var(--surface)), var(--surface) 75%);
  border: 1px solid color-mix(in srgb, var(--c1) 35%, transparent);
  --gc: color-mix(in srgb, var(--c1) 35%, var(--c2));
}
.sc-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sc-k { font: 600 10px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--gc); }
.sc-t { font: 500 21px/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.sc-m { font-size: 12px; color: var(--muted); }
.sc-prog {
  display: inline-block; width: 46px; height: 5px; border-radius: 3px; background: var(--surface-3);
  overflow: hidden; vertical-align: 1px; margin-right: 6px;
}
.sc-prog i { display: block; height: 100%; width: 0; background: var(--c1); }
.sc-prog.p1 i { width: 10%; } .sc-prog.p2 i { width: 20%; } .sc-prog.p3 i { width: 30%; } .sc-prog.p4 i { width: 40%; }
.sc-prog.p5 i { width: 50%; } .sc-prog.p6 i { width: 60%; } .sc-prog.p7 i { width: 70%; } .sc-prog.p8 i { width: 80%; }
.sc-prog.p9 i { width: 90%; } .sc-prog.p10 i { width: 100%; }
.sc-pill { flex: none; display: grid; gap: 2px; justify-items: center; padding: 7px 11px; border-radius: 12px; background: var(--c2); color: #fff; }
.sc-pill small { font: 600 9px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; opacity: .75; white-space: nowrap; }
.sc-pill b { font: 400 19px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.game-tabs a .bi { margin-right: 2px; }

/* Main menu (PRED-130): a top bar from 768px, a bottom tab bar on phones */

.topnav { display: none; gap: 2px; }
.topnav a {
  padding: 8px 14px; border-radius: 999px; font-weight: 500; color: var(--ink); opacity: .7;
  text-decoration: none; white-space: nowrap;
}
.topnav a[aria-current="page"] { opacity: 1; background: var(--hdr-chip); box-shadow: var(--sh-1); }
@media (hover: hover) { .topnav a:hover { opacity: 1; } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar-in { display: grid; max-width: 600px; margin: 0 auto; }
.tabbar-in.n1 { grid-template-columns: 1fr; } .tabbar-in.n2 { grid-template-columns: repeat(2, 1fr); }
.tabbar-in.n3 { grid-template-columns: repeat(3, 1fr); } .tabbar-in.n4 { grid-template-columns: repeat(4, 1fr); }
.tabbar-in.n5 { grid-template-columns: repeat(5, 1fr); }
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; padding: 7px 0 5px;
  font-size: 11px; font-weight: 500; color: var(--muted); text-decoration: none;
}
.tabbar a[aria-current="page"] { color: var(--accent); }
.tab-ico { position: relative; display: inline-flex; height: 40px; align-items: center; isolation: isolate; }
.tab-ico::before { content: ""; position: absolute; inset: -2px -12px; border-radius: 999px; z-index: -1; }
.tabbar a[aria-current="page"] .tab-ico::before { background: var(--accent-soft); }
.tabbar .gbadge { --s: 40px; }
.tabbar .gbadge > span { border-color: var(--surface); }
.tab-ring {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 19px;
  background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--muted);
}
.tabbar a[aria-current="page"] .tab-ring { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.r-quiet { --ring: var(--muted); }
/* The tab bar's height: anything pinned to the foot of a phone screen sits above it */
:root { --tab-h: calc(68px + env(safe-area-inset-bottom, 0px)); }
main.has-tabbar { padding-bottom: calc(var(--tab-h) + 32px); }
.has-tabbar .still-to-predict { bottom: var(--tab-h); }

@media (min-width: 768px) {
  .topnav { display: flex; margin-left: 16px; }
  .tabbar { display: none; }
  main.has-tabbar { padding-bottom: 48px; }
  .has-tabbar .still-to-predict { bottom: 0; }
}

/* The Club Admin shield and your avatar, at the top right */
.hdr-btn {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--hdr-chip); border: 1px solid var(--hdr-line); color: var(--ink); font-size: 17px; text-decoration: none;
}
.me-btn { padding: 0; border: 0; background: none; border-radius: 50%; }
/* Site Admin's globe has a blue ring while you are in it */
.site-btn[aria-current] { box-shadow: 0 0 0 2px var(--hdr-bg), 0 0 0 4px var(--blue); }
/* On the Me page your avatar has a green ring, so you can see where you are */
.me-btn[aria-current] .avatar { box-shadow: 0 0 0 2px var(--hdr-bg), 0 0 0 4px var(--accent); }
@media (max-width: 520px) { .site-brand { font-size: 19px; } }

/* The Me page: each setting with its button on the right */
.me-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }

/* Add matches on the Results page (PRED-395): one box per match, then the Commit bar */
.add-open { margin: 14px 0 0; }
.fx-card-add { margin-top: 14px; }
.fx-matches { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.fx-match {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line-2);
  border-radius: var(--r-md); background: var(--surface);
}
.fx-match-h { display: flex; align-items: center; gap: 10px; }
.fx-match-h b { flex: 1; font: 600 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fx-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: start; }
.fx-v { padding-top: 36px; font-weight: 600; color: var(--muted); }
.fx-team { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-tin {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--surface);
}
.fx-tin:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fx-mark { display: inline-flex; color: var(--muted); }
.fx-tin input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 10px 0;
  font-weight: 500; font-size: 15px; color: var(--ink);
}
.fx-sugs { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.fx-sugs:not(:has(.fx-sug)) { display: none; }
.fx-sug {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 0;
  border-top: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font-weight: 500; font-size: 14px; text-align: left;
}
.fx-sug:first-child { border-top: 0; }
.fx-sug.none { color: var(--muted); }
.fx-pick { display: flex; flex-direction: column; gap: 6px; }
.fx-pick-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-wk { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.res-step.sm { width: 32px; height: 32px; }
.fx-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.fx-days button, .fx-times button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px;
  padding: 4px 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); font: 600 15px/1.1 var(--body);
}
.fx-days small { font-size: 11px; font-weight: 500; color: var(--muted); }
.fx-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.fx-times button { min-height: 40px; }
.fx-days button[aria-pressed="true"], .fx-times button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.fx-days button[aria-pressed="true"] small { color: #fff; }
.fx-times select {
  min-height: 40px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); font: 600 15px/1 var(--body); text-align: center; text-align-last: center;
}
.fx-times select.on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (min-width: 641px) { .fx-times { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.fx-note { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--accent); }
.fx-note.bad { color: var(--amber); }
.fx-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px 16px; }
.fx-bar[hidden] { display: none; }
/* The competition's teams, the list Add matches suggests from */
.res-teams-card { margin-top: 14px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 12px; padding: 10px 16px 14px; }
.team-chip { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: 14px; font-weight: 500; }
@media (max-width: 640px) { .fx-teams { grid-template-columns: minmax(0, 1fr); } .fx-v { display: none; } }

/* The Results change log (PRED-394): one small row per change, Show all underneath */
.res-log { font-size: 13px; }
.a-more { display: flex; justify-content: center; width: 100%; padding: 12px 16px; border-top: 1px solid var(--line); }

/* Changing a saved score asks first (PRED-391): the Save bar becomes a check with an amber edge */
.res-confirm { flex-wrap: wrap; border-color: var(--amber); }
.res-confirm .grow { display: flex; flex-direction: column; gap: 3px; flex-basis: 100%; }
.res-confirm .btn { flex: 1 1 0; }