/* ─────────────────────────────────────────────────────────────────
   Guess the Stock Chart: shared styles for every page.

   Design tokens live here and only here. Page stylesheets use these
   custom properties and never a hard-coded color, so a dark theme can
   be added later by redefining the variables in one place.
   Text color rules (also in CLAUDE.md):
   - Body text, descriptions, instructions and paragraphs: var(--text).
   - var(--text-muted) only for timestamps, footnotes, axis labels and
     other metadata. Nothing lighter, and never opacity to fade text.
   - Green and red (--up / --down) only mean up/down or right/wrong,
     always with a sign, arrow, ✓/✗ or word as well.
   ───────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Surfaces and lines */
  --bg: #EEF2F8;              /* page background: a soft blue-gray, with the grid below */
  --bg-soft: #F5F7FB;         /* a touch lighter than --bg: the Chart Recorder's frame */
  --grid-line: rgba(37, 99, 235, 0.07); /* the faint 40px grid behind every page */
  --grid-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  --surface: #FFFFFF;         /* cards, panels */
  --surface-raised: #F1F3F6;  /* hover states, table header rows, input backgrounds */
  --border: #E3E6EB;          /* dividers and card edges */
  --border-strong: #8C95A3;   /* edges of form controls (3:1 on white, so the box is visible) */

  /* Brand band: header and footer */
  --brand-dark: #172554;      /* deep navy */
  --on-dark: #FFFFFF;         /* text on the band (14.7:1) */
  --on-dark-muted: #C7D2FE;   /* secondary text on the band (9.9:1) */
  --on-dark-accent: #93C5FD;  /* logo accent, current page, focus ring on the band (8.2:1) */
  --on-dark-hover: rgba(255, 255, 255, 0.10);

  /* Text */
  --text: #111827;            /* ALL body text */
  --text-muted: #5B6474;      /* timestamps, footnotes, axis labels, metadata only */

  /* Accent: links, buttons, focus, selected states */
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --on-accent: #FFFFFF;
  --accent-soft: #EEF3FE;     /* background of a selected item */

  /* Gains and losses (also right/wrong in games). Darker than the
     usual 700 steps so they clear 6:1 on every surface. */
  --up: #166534;
  --down: #991B1B;
  --up-soft: #ECFDF3;
  --down-soft: #FEF2F2;

  /* Chart series, validated as a set for color-vision deficiency on
     white (dataviz validate_palette.js, all pairs). Never green or red:
     those stay reserved for up/down. Text never uses these colors. */
  --series-1: var(--accent);
  --series-2: #D97706;
  --series-3: #0891B2;
  /* More lines (the Chart Recorder): validated adjacent-pair set of 10;
     every line there carries a direct label, as the 6–8 CVD band requires */
  --series-4: #C026D3;
  --series-5: #A16207;
  --series-6: #7C3AED;
  --series-7: #DB2777;
  --series-8: #0284C7;
  --series-9: #854D0E;
  --series-10: #4F46E5;
  --series-neutral: #8C95A3;  /* reference marks: frontier line, holdings dots */
  --series-1-band: rgba(37, 99, 235, 0.14);        /* outcome ranges around a series-1 line */
  --series-1-band-strong: rgba(37, 99, 235, 0.30);
  --chart-grid: var(--border);
  /* Sequential scale, light -> dark = less -> more (Multiplication Drill's
     weak-spot grid). One hue, never green or red. Steps 1-3 take --text
     (13.4 / 9.9 / 7.1:1); steps 4-5 take --on-seq-dark (5.4 / 9.9:1). */
  --seq-1: #CDE2FB;
  --seq-2: #9EC5F4;
  --seq-3: #6DA7EC;
  --seq-4: #256ABF;
  --seq-5: #104281;
  --on-seq-dark: #FFFFFF;

  /* Effects */
  --shadow: 0 1px 2px rgb(17 24 39 / 0.06), 0 4px 12px rgb(17 24 39 / 0.06);
  --shadow-raised: 0 8px 28px rgb(17 24 39 / 0.16);
  --overlay: rgb(17 24 39 / 0.45);

  /* Type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* subtitles, labels, metadata */
  --fs-large: clamp(32px, 2.4vw + 22px, 40px);
  --fs-medium: clamp(20px, 0.6vw + 17px, 24px);
  --fs-body: 16px;
  --fs-small: 14px;           /* muted metadata only; nothing smaller */
  --lh: 1.6;
  --prose: 65ch;

  /* Spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Shape */
  --radius-card: 8px;
  --radius-control: 6px;
  --target: 44px;             /* primary controls */
  --page-max: 1120px;
}

/* ── Chart Recorder theme (record.html only, <html data-theme="recorder">) ──
   The original dark look, kept for the videos: TikTok and Reels lay white
   caption text over the bottom of the frame, which needs a dark background.
   An exception to the rules above, on this one page: green is the accent
   and the first line color, as it was before the redesign. */
:root[data-theme="recorder"] {
  color-scheme: dark;

  --bg: #0F0F0F;
  --bg-soft: var(--bg);       /* the frame is the page background, grid included */
  --grid-line: rgba(255, 255, 255, 0.02);
  --surface: #1A1A1A;         /* control panel cards and buttons */
  --surface-raised: var(--bg); /* inputs inside a row, button hover */
  --border: #2A2A2A;
  --border-strong: rgba(255, 255, 255, 0.3); /* control edges, crop guide, zero line, filing marks */

  --text: #F0F0F0;
  --text-muted: #B8B8B8;      /* 9.8:1 on --bg */

  --accent: #00C805;
  --accent-hover: #00A804;
  --on-accent: var(--bg);     /* dark text on the green button (8.4:1) */

  /* The original line colors, in their original order */
  --series-1: #00C805;
  --series-2: #3B82F6;
  --series-3: #A855F7;
  --series-4: #F59E0B;
  --series-5: #EC4899;
  --series-6: #14B8A6;
  --series-7: #F43F5E;
  --series-8: #EAB308;
  --series-9: #06B6D4;
  --series-10: #84CC16;

  --font-display: 'Bebas Neue', Impact, sans-serif; /* the frame's title and countdown */
}

/* ── Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background-color: var(--bg); color: var(--text);
  background-image: var(--grid-image);
  background-size: 40px 40px;
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh); font-weight: 400;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1 { font-size: var(--fs-large); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-medium); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }
p, li, dd { max-width: var(--prose); }
ul, ol { padding-left: 1.4em; }
img, svg, canvas { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
strong, b { font-weight: 600; }
code { font-size: 0.95em; background: var(--surface-raised); border-radius: 4px; padding: 0 4px; }
table, .num, .tabular { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

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

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

.skip-link {
  position: absolute; left: var(--s2); top: -100px; z-index: 1000;
  background: var(--accent); color: var(--on-accent); padding: var(--s2) var(--s4);
  border-radius: 0 0 var(--radius-control) var(--radius-control); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--on-accent); }

/* Type helpers: exactly three levels plus muted metadata */
.t-large { font-size: var(--fs-large); font-weight: 700; line-height: 1.15; }
.t-medium { font-size: var(--fs-medium); font-weight: 600; line-height: 1.3; }
.t-body { font-size: var(--fs-body); font-weight: 400; }
.meta, .t-small { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-muted); }
.lead { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--text); max-width: var(--prose); }
/* Small monospace label above a page title, e.g. "DAILY GAME" */
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-hover); }
h1 .accent { color: var(--accent); }
/* Small labels over numbers and fields share the old monospace look */
.label, .hint-label, .stat-label, .es-label, .st-label, .g-score-label, .ref-label, .prompt-label, .tile .k, .dash-sub, .explain-sub {
  font-family: var(--font-mono); letter-spacing: 0.03em;
}
.label, .hint-label, .stat-label, .es-label, .st-label, .ref-label, .tile .k { text-transform: uppercase; }

/* Up / down values: color plus a sign or arrow, never color alone */
.up { color: var(--up); }
.down { color: var(--down); }

/* ── Layout ────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--s4); }
.page-main { flex: 1 0 auto; width: 100%; max-width: var(--page-max); margin: 0 auto; padding: var(--s6) var(--s4) var(--s7); display: flex; flex-direction: column; gap: var(--s5); }
.page-main.narrow { max-width: 760px; }
.page-head { display: flex; flex-direction: column; gap: var(--s2); }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow);
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4);
}
@media (max-width: 600px) { .card { padding: var(--s4); } .page-main { padding-top: var(--s5); } }

/* Game pages: a tighter top so the board starts on the first screen.
   On phones the subtitle gives way to the board; each game explains
   itself below the board too. */
.page-main.game { padding-top: var(--s5); gap: var(--s4); }
.page-main.game .page-head { gap: var(--s1); }
@media (max-width: 600px) {
  .page-main.game { padding-top: var(--s4); }
  .page-main.game .page-head .lead { display: none; }
}

/* ── Header and navigation ─────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--brand-dark); color: var(--on-dark); }
.site-header-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--s4); min-height: 64px; display: flex; align-items: center; gap: var(--s4); }
.site-logo { font-size: 18px; font-weight: 700; color: var(--on-dark); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; padding: var(--s2) 0; }
.site-logo span { color: var(--on-dark-accent); }
.site-logo:hover { color: var(--on-dark); }
.site-nav { display: flex; align-items: center; gap: var(--s4); margin-left: auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s1); }
.nav-item { position: relative; }
.nav-menu-btn {
  font: inherit; font-weight: 500; color: var(--on-dark); background: none; border: 0; border-radius: var(--radius-control);
  min-height: var(--target); padding: 0 var(--s3); display: inline-flex; align-items: center; gap: var(--s1); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.nav-menu-btn:hover { background: var(--on-dark-hover); }
.nav-menu-btn.is-current { box-shadow: inset 0 -2px 0 var(--on-dark-accent); border-radius: var(--radius-control) var(--radius-control) 0 0; }
.nav-caret { font-size: 14px; transition: transform 0.15s; }
.nav-menu-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-menu {
  list-style: none; margin: 0; padding: var(--s2); position: absolute; top: calc(100% + var(--s1)); left: 0; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-raised);
  display: none; z-index: 110;
}
.nav-menu-btn[aria-expanded="true"] + .nav-menu { display: block; }
.nav-menu li { max-width: none; }
.nav-menu a {
  display: flex; align-items: center; min-height: var(--target); padding: 0 var(--s3); border-radius: var(--radius-control);
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.nav-menu a:hover { background: var(--surface-raised); color: var(--text); }
.nav-menu a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-hover); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.nav-toggle {
  display: none; margin-left: auto; font: inherit; font-weight: 500; color: var(--on-dark); background: none;
  border: 1px solid var(--on-dark-muted); border-radius: var(--radius-control); min-height: var(--target); padding: 0 var(--s3);
  align-items: center; gap: var(--s2); cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }

/* On the navy band: light focus ring and a light outline button */
.site-logo:focus-visible, .nav-menu-btn:focus-visible, .nav-toggle:focus-visible, .site-header .nav-cta:focus-visible { outline-color: var(--on-dark-accent); }
.site-header .btn-outline { background: none; color: var(--on-dark); border-color: var(--on-dark-accent); }
.site-header .btn-outline:hover:not(:disabled) { background: var(--on-dark-hover); color: var(--on-dark); border-color: var(--on-dark); }

/* Without JavaScript the menus open on hover/focus and the phone menu stays expanded */
html:not(.js) .nav-item:hover > .nav-menu, html:not(.js) .nav-item:focus-within > .nav-menu { display: block; }

@media (max-width: 760px) {
  html:not(.js) .site-nav { display: flex; }
  html:not(.js) .nav-toggle { display: none; }
  .nav-toggle { display: inline-flex; }
  /* On phones the header scrolls away, so the home chart and the analyzer's
     back/next bar can stick to the top without hiding under it */
  .site-header { position: static; }
  .site-header-inner { flex-wrap: wrap; }
  .site-nav { display: none; width: 100%; margin: 0; padding: 0 0 var(--s4); flex-direction: column; align-items: stretch; gap: var(--s3); }
  .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: var(--s1); }
  .nav-menu-btn { width: 100%; justify-content: space-between; }
  .nav-menu-btn.is-current { box-shadow: none; }
  .nav-menu { position: static; box-shadow: none; border: 0; padding: 0 0 0 var(--s3); min-width: 0; background: none; }
  .nav-menu a { color: var(--on-dark); }
  .nav-menu a:hover { background: var(--on-dark-hover); color: var(--on-dark); }
  .nav-menu a[aria-current="page"] { background: var(--on-dark-hover); color: var(--on-dark); box-shadow: inset 3px 0 0 var(--on-dark-accent); }
  .nav-menu a:focus-visible { outline-color: var(--on-dark-accent); }
  .site-nav .nav-cta { align-self: flex-start; }
}

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer { margin-top: auto; background: var(--brand-dark); color: var(--on-dark); }
.site-footer :focus-visible { outline-color: var(--on-dark-accent); }
.site-footer-inner { max-width: var(--page-max); margin: 0 auto; padding: var(--s5) var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; justify-content: space-between; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; }
.footer-links a { color: var(--on-dark); display: inline-flex; align-items: center; min-height: 32px; }
.footer-links a:hover { color: var(--on-dark-accent); }
.footer-sep { color: var(--on-dark-muted); }
.footer-note { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--on-dark-muted); }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--target); padding: 0 var(--s4); border-radius: var(--radius-control); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); color: var(--on-accent); }
.btn-outline { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.btn-outline:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-raised); color: var(--text); }
.btn-small { min-height: 36px; padding: 0 var(--s3); }
.btn:disabled { cursor: not-allowed; background: var(--surface-raised); color: var(--text-muted); border-color: var(--border); }

/* Segmented control: a group of toggle buttons with aria-pressed */
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; background: var(--surface); }
.seg > button {
  font: inherit; font-weight: 500; color: var(--text); background: none; border: 0; border-left: 1px solid var(--border);
  min-height: 40px; padding: 0 var(--s3); cursor: pointer;
}
.seg > button:first-child { border-left: 0; }
/* Not on the selected one: phones keep :hover after a tap, which would turn it gray under white text */
.seg > button:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--surface-raised); }
.seg > button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.seg > button:disabled { color: var(--text-muted); cursor: not-allowed; }
.seg > button:focus-visible { outline-offset: -3px; }

/* Neutral pills, e.g. difficulty with a dot indicator (●○○) */
.pill {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 28px; padding: 0 var(--s3);
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: var(--fs-small); font-weight: 500; white-space: nowrap;
}
.dots { letter-spacing: 2px; color: var(--text); }

/* ── Forms ─────────────────────────────────────────────────────── */
label { font-weight: 500; }
input[type=text], input[type=email], input[type=number], input[type=search], select, textarea {
  font: inherit; font-size: var(--fs-body); color: var(--text); background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-radius: var(--radius-control); min-height: var(--target); padding: var(--s2) var(--s3);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { background: var(--surface); }
input[type=checkbox], input[type=radio] { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field-error { color: var(--down); font-weight: 500; }

/* Messages: text says what kind, the color only supports it */
.msg { border-radius: var(--radius-control); padding: var(--s3) var(--s4); border: 1px solid var(--border); background: var(--surface-raised); color: var(--text); }
.msg.ok { background: var(--up-soft); border-color: var(--up); }
.msg.err { background: var(--down-soft); border-color: var(--down); }
.msg.warn { border-left: 4px solid var(--text-muted); }

/* ── Tables ────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { padding: var(--s2) var(--s3); text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data thead th { background: var(--surface-raised); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
table.data tbody tr:last-child > * { border-bottom: 0; }
table.data .num, table.data td.num, table.data th.num { text-align: right; white-space: nowrap; }

/* ── Info buttons (ⓘ) and their popover ───────────────────────── */
.info-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 2px; vertical-align: middle;
  font: inherit; font-size: 15px; line-height: 1; color: var(--accent); background: none; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
}
.info-btn:hover, .info-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-hover); }
.info-pop {
  position: fixed; z-index: 1000; max-width: min(340px, calc(100vw - 16px)); padding: var(--s3) var(--s4);
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised); font-size: var(--fs-body); font-weight: 400; line-height: 1.5; text-align: left; white-space: normal;
}
.info-pop strong { display: block; margin-bottom: var(--s1); }

/* ── Dialogs ───────────────────────────────────────────────────── */
dialog.modal {
  border: 1px solid var(--border); border-radius: var(--radius-card); padding: 0; width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); background: var(--surface); color: var(--text); box-shadow: var(--shadow-raised);
}
dialog.modal::backdrop { background: var(--overlay); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); }
.modal-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); overflow-y: auto; }
.icon-btn {
  font: inherit; font-size: 20px; line-height: 1; width: var(--target); height: var(--target); display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); background: none; border: 1px solid transparent; border-radius: var(--radius-control); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-raised); }

/* ── Disclosures ───────────────────────────────────────────────── */
details.disclosure > summary { cursor: pointer; font-weight: 600; color: var(--text); min-height: var(--target); display: flex; align-items: center; gap: var(--s2); list-style: none; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: '▸'; color: var(--text-muted); transition: transform 0.15s; display: inline-block; }
details.disclosure[open] > summary::before { transform: rotate(90deg); }

/* ── Cookie banner ─────────────────────────────────────────────── */
#cookieBanner {
  position: fixed; left: 50%; bottom: var(--s4); transform: translate(-50%, calc(100% + 32px)); z-index: 900;
  width: min(720px, calc(100vw - 2 * var(--s4))); background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-card); box-shadow: var(--shadow-raised);
  padding: var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
  visibility: hidden; transition: transform 0.25s ease, visibility 0.25s;
}
#cookieBanner.show { transform: translate(-50%, 0); visibility: visible; }
#cookieBanner > span { flex: 1 1 280px; }
.cookie-btns { display: flex; gap: var(--s2); }
.cookie-btn {
  font: inherit; font-weight: 600; min-height: var(--target); min-width: 104px; padding: 0 var(--s4); cursor: pointer;
  border-radius: var(--radius-control); border: 1px solid var(--accent); background: var(--surface); color: var(--accent);
}
.cookie-btn:hover { background: var(--accent-soft); color: var(--accent-hover); }
/* Reserve room so the banner never covers the end of the page */
body.has-cookie-banner { padding-bottom: var(--cookie-space, 160px); }

/* ── Motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}