/* =============================================================================
   CazzyFooty stylesheet

   Design concept: a floodlit evening astro pitch.
     - Deep pitch green is the brand ground. Dark green panels (header, hero,
       footer, stat tiles) frame lighter content, the way a lit pitch sits in a
       dark ground.
     - Chalk white is structural: borders and dividers are pitch line markings.
     - High-vis bib yellow is the action colour and nothing else. It is the
       colour of our actual kit, and because it is reserved for the one thing
       we want clicked, it always reads as "do this".

   Constraints this file works within:
     - CSP is `style-src 'self'`, so there are NO inline style attributes
       anywhere in the templates. Anything dynamic uses <progress> or a class.
     - No external fonts or images. Every decorative element (mown stripes,
       centre circle, floodlight glow, the ball mark) is CSS or inline SVG.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Pitch greens, dark to light */
  --pitch-900: #06251a;
  --pitch-800: #0a3927;
  --pitch-700: #0d4b32;
  --pitch-600: #11623f;
  --pitch-500: #16794e;   /* primary */
  --pitch-400: #1f9a63;
  --pitch-300: #45bb85;

  /* High-vis bib yellow - actions and highlights only */
  --bib:       #d7f22e;
  --bib-hover: #c3dd1c;
  --on-bib:    #08281a;   /* text that sits on yellow */

  /* Neutrals */
  --chalk:       #fbfcf8;
  --surface:     #ffffff;
  --surface-2:   #f2f5ed;
  --line:        #dee4d6;
  --line-strong: #c3ccb6;

  --ink:     #0c1710;
  --ink-2:   #4a564d;
  --ink-3:   #6d786f;
  --on-dark:     #eef4ec;
  --on-dark-2:   #a9bdb0;
  --line-dark:   #1d3527;

  /* Card / status colours */
  --card-red:    #c3322a;
  --card-red-bg: #fdf1f0;
  --amber:       #9a6b00;
  --ok:          #11623f;
  --ok-bg:       #e9f5ee;

  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --shadow-sm: 0 1px 2px rgb(6 37 26 / 6%);
  --shadow:    0 2px 4px rgb(6 37 26 / 5%), 0 8px 24px rgb(6 37 26 / 6%);
  --shadow-lg: 0 12px 40px rgb(6 37 26 / 14%);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pitch-500: #229c65;
    --pitch-400: #2fb574;
    --pitch-300: #58cd92;

    --chalk:       #070f0b;
    --surface:     #0f1a14;
    --surface-2:   #16241c;
    --line:        #1f3226;
    --line-strong: #33503e;

    --ink:   #e9f1ea;
    --ink-2: #9aad9f;
    --ink-3: #7d8f83;

    --card-red:    #f2857c;
    --card-red-bg: #2a1412;
    --amber:       #e0b45a;
    --ok:          #45bb85;
    --ok-bg:       #10281c;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow:    0 2px 4px rgb(0 0 0 / 35%), 0 8px 24px rgb(0 0 0 / 30%);
    --shadow-lg: 0 12px 40px rgb(0 0 0 / 45%);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--chalk);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

/* Headings are heavy and tightly tracked - the sports-brand register, without
   needing a downloaded display face. */
h1, h2, h3, h4 {
  margin: 0 0 0.5rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }
p  { margin: 0 0 1rem; }

a { color: var(--pitch-500); text-underline-offset: 2px; }
a:hover { color: var(--pitch-400); }

code {
  font-family: var(--font-num);
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 0.1em 0.4em;
  border-radius: 5px;
}

.wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.wrap.narrow { width: min(470px, 100% - 2.5rem); }
.section { padding-block: clamp(2rem, 5vw, 4rem); }
.section-tight { padding-block: clamp(1.25rem, 3vw, 2rem); }

.muted { color: var(--ink-2); }
.small { font-size: 0.875rem; }
.optional { color: var(--ink-3); font-weight: 400; font-size: 0.85em; }

/* Uppercase micro-label. Used for eyebrows, section kickers and stat captions. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pitch-500);
  margin: 0 0 0.85rem;
}
.kicker::before {
  content: "";
  width: 1.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--bib);
}
.kicker-on-dark { color: var(--bib); }

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--bib);
  color: var(--on-bib);
  font-weight: 700;
  padding: 0.65rem 1.1rem;
  border-radius: 0 0 var(--radius) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; top: 0; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--bib);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- pitch textures ------------------------------------------------------- */

/* Mown stripes. Alternating bands, exactly as a roller leaves them. */
.mown {
  background-image: repeating-linear-gradient(
    90deg,
    rgb(255 255 255 / 3.2%) 0 46px,
    transparent 46px 92px
  );
}

/* The white line markings on a dark panel: halfway line + centre circle,
   bled off to the right so it reads as a fragment of a real pitch. */
.markings {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.5;
}
.markings::before,
.markings::after {
  content: "";
  position: absolute;
  border: 2px solid rgb(255 255 255 / 16%);
}
.markings::before {                 /* centre circle */
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  right: -12rem;
  top: 50%;
  transform: translateY(-50%);
}
.markings::after {                  /* halfway line */
  width: 0;
  height: 200%;
  top: -50%;
  right: 3rem;
  border-width: 0 0 0 2px;
}

/* Warm floodlight wash from above. */
.floodlit {
  background-image:
    radial-gradient(60rem 26rem at 50% -8rem, rgb(255 252 214 / 13%), transparent 70%),
    radial-gradient(30rem 20rem at 8% 110%, rgb(34 155 101 / 22%), transparent 70%);
}

/* --- header --------------------------------------------------------------- */

.site-header {
  background: var(--pitch-900);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line-dark);
  position: sticky;
  top: 0;
  z-index: 30;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 66px;
  flex-wrap: wrap;
  padding-block: 0.55rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--on-dark);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.brand:hover { color: var(--on-dark); }
.brand-ball { color: var(--bib); flex: none; }
.brand-name em { font-style: normal; color: var(--bib); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem 1.35rem;
  flex-wrap: wrap;
}
.site-nav > a:not(.btn) {
  color: var(--on-dark-2);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav > a:not(.btn):hover { color: var(--on-dark); }
.site-nav > a[aria-current="page"] { color: #fff; border-bottom-color: var(--bib); }

.inline-form { display: inline-flex; }

/* --- footer --------------------------------------------------------------- */

.site-footer {
  margin-top: 3rem;
  background: var(--pitch-900);
  color: var(--on-dark-2);
  /* A chalk touchline across the top edge. */
  border-top: 3px solid rgb(255 255 255 / 22%);
  padding-block: 2rem;
  font-size: 0.875rem;
}
.footer-inner { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer-inner p { margin: 0; }
.footer-brand { color: var(--on-dark); font-weight: 700; letter-spacing: -0.02em; }
.footer-note { max-width: 26rem; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 130ms ease, border-color 130ms ease,
              color 130ms ease, transform 130ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 0.42rem 0.9rem; font-size: 0.85rem; }
.btn-lg { padding: 0.85rem 1.7rem; font-size: 1.0125rem; }
.btn-block { width: 100%; }

/* Yellow is the single "do this" colour on the whole site. */
.btn-primary { background: var(--bib); color: var(--on-bib); }
.btn-primary:hover { background: var(--bib-hover); color: var(--on-bib); }

.btn-green { background: var(--pitch-500); color: #fff; }
.btn-green:hover { background: var(--pitch-600); color: #fff; }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--pitch-500); color: var(--pitch-500); }

.btn-ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

/* Variants for use on the dark green panels. */
.on-dark .btn-outline { color: #fff; border-color: rgb(255 255 255 / 35%); }
.on-dark .btn-outline:hover { border-color: #fff; background: rgb(255 255 255 / 8%); color: #fff; }
.on-dark .btn-ghost { color: var(--on-dark-2); }
.on-dark .btn-ghost:hover { background: rgb(255 255 255 / 8%); color: #fff; }

.btn-danger { background: var(--card-red); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); color: #fff; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  background: linear-gradient(165deg, var(--pitch-800), var(--pitch-900) 60%);
  color: var(--on-dark);
  overflow: hidden;
}
.hero-inner { position: relative; z-index: 1; padding-block: clamp(3rem, 9vw, 6rem); }
.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { color: #fff; max-width: 12ch; }
.hero h1 em { font-style: normal; color: var(--bib); }
.lede {
  font-size: clamp(1.02rem, 1.8vw, 1.2rem);
  color: var(--on-dark-2);
  max-width: 44ch;
}
.lede strong { color: #fff; font-weight: 600; }
.hero-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.75rem; }

.hero-facts {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 12%);
}
.hero-fact { display: grid; gap: 0.1rem; }
.hero-fact b {
  font-family: var(--font-num);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bib);
  font-variant-numeric: tabular-nums;
}
.hero-fact span { font-size: 0.78rem; color: var(--on-dark-2); }

/* The floating "next fixture" card in the hero. */
.hero-card {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 1rem;
}
.hero-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hero-card h3 { margin: 0; font-size: 1.25rem; }
.hero-card dl { margin: 0; display: grid; gap: 0.6rem; }
.hero-card dl > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.hero-card dt { color: var(--ink-2); }
.hero-card dd { margin: 0; font-weight: 700; text-align: right; }

/* --- matchday date tile --------------------------------------------------- */

.fixture-date {
  flex: none;
  width: 3.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--surface);
  line-height: 1.1;
}
.fixture-date .fd-day {
  display: block;
  background: var(--pitch-900);
  color: var(--bib);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0;
}
.fixture-date .fd-num {
  display: block;
  font-family: var(--font-num);
  font-size: 1.3rem;
  font-weight: 700;
  padding: 0.3rem 0 0.35rem;
  font-variant-numeric: tabular-nums;
}

/* --- cards, grids, callouts ----------------------------------------------- */

.grid { display: grid; gap: 1rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 0.35rem; }
.card p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }

/* "What you get" reads as a checklist: a title and a tick, no body copy. */
.card-check h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}
.card-check .tick {
  flex: none;
  color: var(--pitch-500);
}

.callout {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--pitch-700), var(--pitch-900));
  color: var(--on-dark);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.callout > * { position: relative; z-index: 1; }
.callout h2 { color: #fff; margin-top: 0; }
.callout p { margin: 0; color: var(--on-dark-2); max-width: 46ch; }
.callout p strong { color: var(--bib); font-weight: 700; }

/* --- page furniture ------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.page-head p { margin: 0; }

.section-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.section-head h2 { margin: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px dashed var(--line-strong);
  color: var(--ink-3);
  white-space: nowrap;
}

/* Scoreboard tiles: dark, monospaced, tabular. */
.scoreboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.score-tile {
  background: var(--pitch-900);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  color: var(--on-dark-2);
}
.score-tile b {
  display: block;
  font-family: var(--font-num);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--bib);
  font-variant-numeric: tabular-nums;
}
.score-tile span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}

/* --- fixture lists -------------------------------------------------------- */

.game-list { list-style: none; padding: 0; margin: 1.15rem 0 0; display: grid; gap: 0.85rem; }

.game-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.game-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }

/* The featured "your next game" card gets the dark pitch treatment. */
.game-card-feature {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--pitch-700), var(--pitch-900));
  border-color: transparent;
  color: var(--on-dark);
}
.game-card-feature > * { position: relative; z-index: 1; }
.game-card-feature h3 { color: #fff; }
.game-card-feature .game-meta { color: var(--on-dark-2); }
.game-card-feature .fixture-date { border-color: rgb(255 255 255 / 25%); background: rgb(255 255 255 / 10%); }
.game-card-feature .fixture-date .fd-num { color: #fff; }
.game-card-feature .game-price { color: var(--bib); }

.game-main { flex: 1 1 15rem; min-width: 0; }
.game-main h3 { margin: 0 0 0.2rem; }
.game-meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-2);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.game-meta .dot { opacity: 0.4; }
.game-side { display: flex; align-items: center; gap: 0.85rem; margin-left: auto; }
.game-price { font-family: var(--font-num); font-weight: 700; font-size: 1.05rem; }

/* Fill bar. <progress> instead of a div so no inline width style is needed. */
.fill {
  appearance: none;
  border: none;
  width: 100%;
  max-width: 11rem;
  height: 6px;
  margin-top: 0.55rem;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.fill::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
.fill::-webkit-progress-value { background: var(--pitch-500); border-radius: 999px; }
.fill::-moz-progress-bar { background: var(--pitch-500); border-radius: 999px; }
.game-card-feature .fill { background: rgb(255 255 255 / 18%); }
.game-card-feature .fill::-webkit-progress-bar { background: rgb(255 255 255 / 18%); }
.game-card-feature .fill::-webkit-progress-value { background: var(--bib); }
.game-card-feature .fill::-moz-progress-bar { background: var(--bib); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-bib { background: var(--bib); color: var(--on-bib); }

.empty {
  background: var(--surface);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 6vw, 3.25rem) 1.5rem;
  text-align: center;
}
.empty h1, .empty h2 { margin-bottom: 0.4rem; }
.empty p { color: var(--ink-2); max-width: 42ch; margin-inline: auto; }

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

.auth-shell { display: grid; place-items: center; padding-block: clamp(2rem, 6vw, 4rem); }
.auth-card {
  width: min(470px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: var(--shadow);
}
.auth-card h1 { font-size: clamp(1.6rem, 4vw, 2rem); margin-bottom: 0.3rem; }
.auth-card > .muted { margin-bottom: 1.5rem; }

.stack { display: grid; gap: 1.05rem; }
.field { display: grid; gap: 0.35rem; }
.field-row { display: grid; gap: 1.05rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

label { font-weight: 650; font-size: 0.9rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="time"], select {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  width: 100%;
  min-width: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:hover, select:hover { border-color: var(--ink-3); }
input:focus, select:focus { border-color: var(--pitch-500); }
input[aria-invalid="true"] { border-color: var(--card-red); }

.hint { margin: 0; font-size: 0.815rem; color: var(--ink-3); }
.field-error { margin: 0; font-size: 0.845rem; color: var(--card-red); font-weight: 600; }

.field-check { gap: 0; }
.check { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 400; cursor: pointer; font-size: 0.9375rem; }
.check input { margin-top: 0.28rem; accent-color: var(--pitch-500); flex: none; }

.fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  margin: 0;
  display: grid;
  gap: 0.8rem;
}
.fieldset legend {
  font-weight: 750;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  padding-inline: 0.45rem;
}

/* Selection chips. The <input> is visually hidden but still focusable, and the
   adjacent span carries the styling - `input:checked + span` works everywhere,
   which :has() on the label would not. */
.chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; cursor: pointer; }
.chip input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.chip-body {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 650;
  background: var(--surface);
  color: var(--ink-2);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.chip:hover .chip-body { border-color: var(--pitch-500); color: var(--ink); }
.chip input:checked + .chip-body {
  background: var(--pitch-500);
  border-color: var(--pitch-500);
  color: #fff;
}
.chip input:checked + .chip-body::before { content: "\2713"; font-weight: 900; }
.chip input:focus-visible + .chip-body { outline: 3px solid var(--bib); outline-offset: 2px; }

.form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.form-footnote { margin: 1.5rem 0 0; font-size: 0.9rem; color: var(--ink-2); text-align: center; }

.divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.6rem 0 1.15rem;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Social sign-in buttons. Google is live when the server has OAuth credentials
   (see lib/oauth.js); Facebook and Apple are still disabled. */
.sso { display: grid; gap: 0.6rem; }
.btn-sso {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  font-weight: 600;
  justify-content: flex-start;
  padding-left: 1.1rem;
}
.btn-sso svg { flex: none; }
.sso-note { text-align: center; margin: 0.85rem 0 0; }

/* --- settings ------------------------------------------------------------- */

.settings-layout {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 800px) { .settings-layout { grid-template-columns: 1fr; } }

.settings-nav {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: 0.15rem;
}
@media (max-width: 800px) {
  .settings-nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 0.4rem; padding-bottom: 0.5rem; }
}
.settings-nav a {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 3px solid transparent;
  white-space: nowrap;
}
.settings-nav a:hover { background: var(--surface-2); color: var(--ink); }
.settings-nav a.is-danger { color: var(--card-red); }

.panels { display: grid; gap: 1.15rem; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  scroll-margin-top: 5.5rem;
  box-shadow: var(--shadow-sm);
}
.panel > h2 { margin-top: 0; font-size: 1.2rem; }
.panel > .muted { margin-bottom: 1.35rem; font-size: 0.9375rem; }
.panel-attention { border-color: var(--card-red); box-shadow: 0 0 0 3px var(--card-red-bg); }
.panel-danger { border-color: color-mix(in srgb, var(--card-red) 40%, var(--line)); }
.panel-danger > h2 { color: var(--card-red); }

/* --- legal pages ---------------------------------------------------------- */
/* Long-form prose, which nothing else on the site is. Scoped to .legal so it
   cannot leak into the app pages. */

.legal { max-width: 46rem; }
.legal h2 {
  margin: 2.4rem 0 0.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 1.3rem;
  /* Anchored from the contents list, so keep the heading clear of the header. */
  scroll-margin-top: 1.5rem;
}
.legal .panel h2, .legal .legal-toc h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { margin: 1.5rem 0 0.5rem; font-size: 1.02rem; }
.legal p, .legal li { color: var(--ink-2); line-height: 1.65; }
.legal p { margin: 0 0 0.9rem; }
.legal ul, .legal ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.legal li { margin-bottom: 0.4rem; }
.legal .badge { vertical-align: middle; }

.legal-toc {
  margin: 2rem 0 0;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.legal-toc h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); }
.legal-toc ol { margin: 0.7rem 0 0; }
.legal-toc li { margin-bottom: 0.25rem; }

/* A table is the clearest way to show a lawful basis against a purpose, and the
   only table on the site - so it carries its own scroller rather than forcing
   the page to scroll sideways on a phone. */
.table-scroll { overflow-x: auto; margin: 0 0 1.2rem; }
.legal table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.9rem; }
.legal th, .legal td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--line);
}
.legal th { color: var(--ink); font-weight: 800; background: var(--surface-2); }
.legal td { color: var(--ink-2); }

/* "Confirm with Google" - what stands in for the password field on an account
   that has none. */
.confirm {
  padding: 0.85rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.confirm .form-actions { margin: 0.7rem 0 0; }
.confirmed {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ok);
}
.confirmed svg { flex: none; }

/* Sign-in methods: one row per way into the account. */
.identity-list {
  list-style: none;
  margin: 1.1rem 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.identity-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.identity-list strong { display: block; font-size: 0.95rem; }
/* Email addresses are the one thing here that can overflow a narrow phone. */
.identity-list .hint { margin-top: 0.15rem; overflow-wrap: anywhere; }

.account-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
}
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--pitch-900);
  color: var(--bib);
  font-size: 1.15rem;
  font-weight: 800;
}
.account-summary dl { margin: 0; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.account-summary dt {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.account-summary dd { margin: 0; font-weight: 650; font-size: 0.9375rem; }

/* --- flash ---------------------------------------------------------------- */

.flash {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 0.9375rem;
  font-weight: 600;
}
.flash-success { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.flash-error   { background: var(--card-red-bg); border-color: var(--card-red); color: var(--card-red); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Footer wordmark accent */
.footer-brand span { color: var(--bib); }