/* Español con amigos — design tokens and shared components.
   Direction: the author's old grammar pages (archive/*.html) — navy hero with amber accent,
   paper background, teal / coral / purple for categories. Playfair Display for display, Noto Sans for text.
   Tokens live only here; vocab.css and grammar.css use them. */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --bg: #f5f0e8;          /* paper background */
  --surface: #fffdf8;     /* paper sheet: cards, panels */
  --surface-2: #ece5d8;
  --ink: #1a1510;
  --ink-soft: #6b6258;
  --heading: var(--navy);     /* titles on paper */
  --em: var(--blue);      /* highlighted form inside text */
  --ending: var(--coral-hi);  /* verb ending in conjugation cards: a hue apart from the navy stem */
  --link: var(--em);
  --line: #d8cfc0;
  --line-strong: #8e8373;
  --accent: var(--navy);      /* primary actions, chosen level */
  --accent-ink: var(--white);
  --accent-soft: var(--blue-soft);
  --accent-stripe: var(--amber);
  --accent-hi: var(--amber);     /* level code on the chosen tile */
  --sun: var(--amber);         /* amber, fills only */
  --sun-soft: var(--amber-soft);
  --sun-ink: var(--navy);
  --ok: #0b6b5d;          /* teal, darkened for text on --ok-soft */
  --ok-soft: var(--teal-soft);
  --bad: #b83838;         /* coral */
  --bad-soft: var(--coral-soft);
  --focus: #1f5fd1;
  --tg: #229ed9;

  /* navy hero band (site header, topic hero, tab strip) */
  --hero-bg: var(--navy);
  --hero-on-accent: var(--navy);         /* text on amber inside the band */
  --hero-tint: rgb(255 255 255 / 0.05);  /* selected tab */
  --hero-line: rgb(255 255 255 / 0.28);  /* outlines of controls on navy */
  --hero-stripe: rgb(255 255 255 / 0.03);
  --hero-ink: var(--white);
  --hero-soft: rgb(255 255 255 / 0.66);
  --hero-faint: rgb(255 255 255 / 0.12);
  --hero-accent: var(--amber);
  --hero-focus: var(--amber);

  --tg-on: var(--white);

  /* base colours the tokens above refer to */
  --navy: #0d2b4e;
  --white: #ffffff;

  /* category palette: strong line/fill, soft background, text on soft, text on strong */
  --blue: #1a4f8a;   --blue-soft: #d6e8fa;   --blue-ink: var(--navy);   --blue-on: var(--white);
  --amber: #e8a020;  --amber-soft: #fef3da;  --amber-ink: #7a4800;  --amber-on: #3d2400;
  --teal: #0e7a6a;   --teal-soft: #d4f0eb;   --teal-ink: #063d34;   --teal-on: var(--white);
  --coral: #c94040;  --coral-soft: #fae5e5;  --coral-ink: #6b1a1a;  --coral-on: var(--white);
  --purple: #7a4fa0; --purple-soft: #ede2f5; --purple-ink: #3e2657; --purple-on: var(--white);
  /* highlighted words on --surface (examples, endings): vivid, a hue apart from --ink, ≥ 4.5:1 */
  --blue-hi: #1f64b8; --amber-hi: #9e5c00; --teal-hi: var(--teal); --coral-hi: var(--coral); --purple-hi: var(--purple);

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* type scale, ratio 1.25 on a 16px base */
  --step--1: 0.8125rem;   /* 13 */
  --step-0: 1rem;         /* 16 */
  --step-1: 1.25rem;      /* 20 */
  --step-2: 1.5625rem;    /* 25 */
  --step-3: 1.953rem;     /* 31 */
  --step-4: 2.441rem;     /* 39 */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;

  --radius-s: 8px;        /* badges inside cards, inputs */
  --radius-m: 10px;       /* buttons, options */
  --radius-l: 14px;       /* cards, panels, hero, tab strip */
  --radius-pill: 999px;

  --shadow-lift: 0 1px 0 var(--line), 0 8px 20px -12px rgb(13 43 78 / 0.35);
  --wrap: 60rem;
  /* paper texture on the page background: fine grain + large soft mottling (SVG noise, tiles seamlessly) */
  --paper-grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25 0 0 0 0 .2 0 0 0 0 .14 .55 0 0 0 -.2'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --paper-mottle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='640'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .25 .45 0 0 0 -.17'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  --gutter: clamp(1rem, 4vw, 1.5rem);
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1726;
    --surface: #12233a;
    --surface-2: #1b304c;
    --ink: #f1eadc;
    --ink-soft: #b9b0a0;
    --heading: #f3e6cc;
    --em: #8cbcf0;
    --link: var(--em);
    --line: #2a4060;
    --line-strong: #6a809f;
    --accent: var(--amber);
    --accent-ink: var(--navy);
    --accent-soft: var(--amber-soft);
    --accent-stripe: var(--navy);
    --accent-hi: var(--navy);
    --sun: var(--amber);
    --sun-soft: var(--amber-soft);
    --sun-ink: var(--navy);
    --ok: #5cc9b5;
    --ok-soft: var(--teal-soft);
    --bad: #f08a8a;
    --bad-soft: var(--coral-soft);
    --focus: #8fb6ff;
    --hero-bg: #07111f;
    --hero-faint: rgb(255 255 255 / 0.1);
    --blue: #7fb2ec;   --blue-soft: #16304f;   --blue-ink: #cfe3fa;   --blue-on: var(--bg);
    --amber: #e8a020;  --amber-soft: #3a2c10;  --amber-ink: #f6cd7a;  --amber-on: #1f1300;
    --teal: #4cc3ae;   --teal-soft: #0f3530;   --teal-ink: #bdebe2;   --teal-on: var(--bg);
    --coral: #ee8080;  --coral-soft: #43201f;  --coral-ink: #f8c9c9;  --coral-on: var(--bg);
    --purple: #b48fd8; --purple-soft: #2e2140; --purple-ink: #e3d2f3; --purple-on: var(--bg);
  --blue-hi: var(--blue); --amber-hi: var(--amber); --teal-hi: var(--teal); --coral-hi: var(--coral); --purple-hi: var(--purple);
    --shadow-lift: 0 1px 0 var(--line), 0 8px 22px -12px rgb(0 0 0 / 0.7);
    --paper-grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 .3 0 0 0 -.12'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
    --paper-mottle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='640'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 .02 0 0 0 0 .06 .7 0 0 0 -.25'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1726;
  --surface: #12233a;
  --surface-2: #1b304c;
  --ink: #f1eadc;
  --ink-soft: #b9b0a0;
  --heading: #f3e6cc;
  --em: #8cbcf0;
  --link: var(--em);
  --line: #2a4060;
  --line-strong: #6a809f;
  --accent: var(--amber);
  --accent-ink: var(--navy);
  --accent-soft: var(--amber-soft);
  --accent-stripe: var(--navy);
  --accent-hi: var(--navy);
  --sun: var(--amber);
  --sun-soft: var(--amber-soft);
  --sun-ink: var(--navy);
  --ok: #5cc9b5;
  --ok-soft: var(--teal-soft);
  --bad: #f08a8a;
  --bad-soft: var(--coral-soft);
  --focus: #8fb6ff;
  --hero-bg: #07111f;
  --hero-faint: rgb(255 255 255 / 0.1);
  --blue: #7fb2ec;   --blue-soft: #16304f;   --blue-ink: #cfe3fa;   --blue-on: var(--bg);
  --amber: #e8a020;  --amber-soft: #3a2c10;  --amber-ink: #f6cd7a;  --amber-on: #1f1300;
  --teal: #4cc3ae;   --teal-soft: #0f3530;   --teal-ink: #bdebe2;   --teal-on: var(--bg);
  --coral: #ee8080;  --coral-soft: #43201f;  --coral-ink: #f8c9c9;  --coral-on: var(--bg);
  --purple: #b48fd8; --purple-soft: #2e2140; --purple-ink: #e3d2f3; --purple-on: var(--bg);
  --blue-hi: var(--blue); --amber-hi: var(--amber); --teal-hi: var(--teal); --coral-hi: var(--coral); --purple-hi: var(--purple);
  --shadow-lift: 0 1px 0 var(--line), 0 8px 22px -12px rgb(0 0 0 / 0.7);
  --paper-grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 .3 0 0 0 -.12'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --paper-mottle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='640'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 .02 0 0 0 0 .06 .7 0 0 0 -.25'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
}

/* ---------- 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);
  /* paper, not a flat fill: grain, mottling and a soft light falling from the top */
  background-image:
    var(--paper-grain),
    var(--paper-mottle),
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--surface) 70%, transparent), transparent 70%),
    radial-gradient(140% 90% at 50% 100%, color-mix(in srgb, var(--surface-2) 60%, transparent), transparent 65%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-variant-numeric: lining-nums; /* Playfair defaults to old-style figures: B1 should not read as B₁ */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
[role="list"] { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: from-font; }
::selection { background: var(--sun); color: var(--sun-ink); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
/* Taps: no double-tap zoom delay; a soft, intentional highlight instead of the default grey. */
a, button, label, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--sun) 22%, transparent);
}
.es { font-feature-settings: normal; }
.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;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--sun);
  color: var(--sun-ink);
  border-radius: var(--radius-m);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

/* navy band with the faint diagonal hatching of the old pages */
.site-header, .hero {
  position: relative;
  background-color: var(--hero-bg);
  background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 18px, var(--hero-stripe) 18px, var(--hero-stripe) 20px);
  color: var(--hero-ink);
}
.site-header :focus-visible, .hero :focus-visible, .tabs :focus-visible { outline-color: var(--hero-focus); }

/* ---------- header ---------- */
.site-header { padding-block: var(--space-4) var(--space-5); }
.site-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  text-decoration: none;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-m);
  background: var(--hero-accent);
  color: var(--hero-on-accent);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  padding-bottom: 0.15em;
  transform: rotate(-6deg);
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.5rem);
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.brand__accent { color: var(--hero-accent); }
.site-controls { display: flex; align-items: center; gap: var(--space-2); }
.tagline {
  margin-top: var(--space-2);
  color: var(--hero-soft);
  font-size: 0.9375rem;
  font-weight: 300;
  max-width: 60ch;
}

/* segmented control (RU / EN) — lives on the navy header */
.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--hero-line);
  border-radius: var(--radius-pill);
  background: var(--hero-faint);
}
.segmented__btn {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--hero-soft);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.segmented__btn[aria-pressed="true"] { background: var(--hero-accent); color: var(--hero-on-accent); }
.segmented__btn[aria-pressed="false"]:hover { color: var(--hero-ink); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--tap) + 8px);
  min-width: var(--tap);
  padding: 0 var(--space-4);
  border: 1px solid var(--hero-line);
  border-radius: var(--radius-pill);
  background: var(--hero-faint);
  color: var(--hero-ink);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  justify-content: center;
}
.theme-toggle:hover { border-color: var(--hero-accent); }
.theme-toggle__icon { font-size: 1.125rem; line-height: 1; color: var(--hero-accent); }

/* ---------- main ---------- */
.site-main { flex: 1; padding-block: var(--space-6) var(--space-7); }
.site-main:focus { outline: none; }
.noscript {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--sun);
  border-radius: var(--radius-l);
  background: var(--surface);
  max-width: 62ch;
}

/* screen header, used by every topic screen */
.screen-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.screen-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.5rem);
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--heading);
}
.screen-lead { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.55; max-width: 56ch; }
.backlink {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.backlink:hover { color: var(--heading); text-decoration: underline; }

/* ---------- level screen: the staircase ---------- */
.level-hero {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.level-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: clamp(4px, 1.2vw, 12px);
  padding-bottom: 14px; /* room for the pointer under the active tile */
}
.level-tile {
  --h-min: 3.5rem;
  --h-step: 0.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: var(--tap);
  height: calc(var(--h-min) + var(--step, 0) * var(--h-step));
  padding: var(--space-2);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-l) var(--radius-l) var(--radius-s) var(--radius-s);
  background: var(--surface);
  color: var(--heading);
  text-align: start;
  text-decoration: none;
  transition: transform 160ms ease;
}
.level-tile:hover { transform: translateY(-2px); }
.level-tile__code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.0625rem, 0.75rem + 1.6vw, 1.875rem);
  line-height: 1;
}
.level-tile__name {
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-soft);
}
.level-tile[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 -5px 0 var(--accent-stripe);
}
.level-tile[aria-current="page"] .level-tile__code { color: var(--accent-hi); }
.level-tile[aria-current="page"] .level-tile__name { color: inherit; opacity: 0.85; }
.level-tile[aria-current="page"]::after {
  /* pointer: marks the chosen step without relying on colour */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 10px solid var(--heading);
  transform: translateX(-50%);
}
@media (max-width: 559px) {
  .level-tile { align-items: center; justify-content: flex-end; padding: var(--space-2) 2px; }
  .level-tile__name { display: none; }
}
@media (min-width: 560px) {
  .level-tile { --h-min: 5.25rem; --h-step: 0.875rem; padding: var(--space-3); }
}
@media (min-width: 900px) {
  .level-tile { --h-min: 6rem; --h-step: 1.125rem; }
}

.level-intro { display: grid; gap: var(--space-3); max-width: 46rem; }
.level-intro__cando { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.level-progress { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.level-progress__text { color: var(--ink-soft); font-size: 0.875rem; }

.meter {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  max-width: 28rem;
}
.meter__fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--ok);
}

/* ---------- sections & topic cards ---------- */
.topic-section + .topic-section { margin-top: var(--space-6); }
.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  color: var(--heading);
}
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.section-title__count {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--hero-accent);
  background: var(--hero-bg);
  min-width: 1.6rem;
  padding: 0.15em 0.6em;
  border-radius: var(--radius-pill);
  text-align: center;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
}
.topic-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "meta meta";
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-top: 3px solid var(--c, var(--sun));
  border-radius: var(--radius-l);
  background: var(--surface);
  text-decoration: none;
}
.topic-card:hover { box-shadow: var(--shadow-lift); }
.topic-card__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-m);
  background: var(--c-soft, var(--sun-soft));
  color: var(--c-hi, var(--sun-ink));
  font-size: 1.375rem;
  line-height: 1;
}
.topic-card__icon .icon { width: 1.625rem; height: 1.625rem; }
.topic-card__title { grid-area: title; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--heading); }
.topic-card__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: var(--space-2); }

.topic-list { display: grid; gap: var(--space-3); }
.topic-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  text-decoration: none;
}
.topic-row:hover { box-shadow: var(--shadow-lift); }
.topic-row__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--hero-bg);
  color: var(--hero-accent);
  font-size: 0.8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.topic-row__text { display: grid; gap: 2px; flex: 1 1 16rem; min-width: 0; }
.topic-row__title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.3; color: var(--heading); }
.topic-row__summary { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.5; }
.topic-row__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-self: center; }

/* ---------- badges & chips ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.badge--score { background: var(--blue-soft); color: var(--blue-ink); }
.badge--done { background: var(--ok-soft); color: var(--ok); font-weight: 700; }

.chip {
  display: inline-flex;
  align-items: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0.6rem 1.2rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--heading);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease;
}
.btn:hover { border-color: var(--heading); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent-stripe); }
.btn--ok { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.btn--ghost { border-color: var(--line); background: transparent; }
.btn--small { padding: 0.35rem 0.8rem; font-size: 0.875rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.linkish {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.linkish:hover { color: var(--ink); }

/* ---------- tabs: the navy numbered strip of the old pages ---------- */
.tabs {
  display: flex;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-l);
  background: var(--hero-bg);
}
.tab {
  position: relative; /* keeps a visually hidden label inside the scrolling strip */
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: max-content; /* equal widths when they fit, never narrower than the label: labels do not run together */
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--hero-soft);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--hero-ink); }
.tab[aria-selected="true"] { color: var(--hero-accent); border-bottom-color: var(--hero-accent); background: var(--hero-tint); }
.tab:focus-visible { outline-offset: -3px; }
.tab__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--hero-faint);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.tab[aria-selected="true"] .tab__num { background: var(--hero-accent); color: var(--hero-on-accent); }
/* Very narrow screens: labels may wrap to two lines instead of pushing the strip wider. */
@media (max-width: 400px) {
  .tab { min-width: var(--tap); gap: 4px; padding-inline: 6px; white-space: normal; line-height: 1.2; text-align: center; font-size: 0.8125rem; }
}
/* the strip sits right under a topic hero, like on the old pages */
.hero + .tabs { border-radius: 0 0 var(--radius-l) var(--radius-l); }
.hero:has(+ .tabs) { border-end-start-radius: 0; border-end-end-radius: 0; }
/* Narrow phones with 4+ tabs: other tabs show only their number (the label stays for screen readers). */
@media (max-width: 559px) {
  .tabs:has(.tab:nth-child(4)) .tab:not([aria-selected="true"]) .tab__label { /* same set as .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;
  }
  .tabs:has(.tab:nth-child(4)) .tab { flex: 0 1 auto; padding-inline: var(--space-2); }
  .tabs:has(.tab:nth-child(4)) .tab[aria-selected="true"] { flex: 1 0 auto; }
}

/* ---------- topic hero (grammar) ---------- */
.hero {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-l);
  text-align: center; /* navy band and hatching: the shared .site-header, .hero rule */
  overflow: hidden;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.625rem, 1.1rem + 2.6vw, 2.25rem);
  line-height: 1.15;
}
.hero__title { overflow-wrap: anywhere; text-wrap: balance; }
/* the title gets focus only programmatically, after navigation: no ring on a non-interactive heading */
.hero__title:focus { outline: none; }
.hero__title b, .hero__accent { color: var(--hero-accent); font-weight: inherit; }
.hero__sub { color: var(--hero-soft); font-size: 0.9375rem; font-weight: 300; max-width: 52ch; }
.hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-1); }

/* ---------- panels, tables, examples (shared by topic screens) ---------- */
.panel {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.prose { max-width: 66ch; display: grid; gap: var(--space-3); line-height: 1.7; }
.prose b, .prose strong { font-weight: 700; color: var(--heading); }
.section-intro { color: var(--ink-soft); font-size: 0.9375rem; max-width: 62ch; }
.group-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-2);
  color: var(--c-ink, var(--heading));
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.group-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th, .table td { padding: var(--space-2) var(--space-3); text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th {
  background: var(--hero-bg);
  color: var(--hero-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 0;
}
.table thead th:first-child { color: var(--hero-accent); }
.table tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--bg) 60%, transparent); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody th { font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
/* phones: a 4-column table of verb forms fits the screen without scrolling inside */
@media (max-width: 559px) {
  .table { font-size: 0.875rem; }
  .table th, .table td { padding: var(--space-2) 6px; }
  .table thead th { font-size: 0.6875rem; letter-spacing: 0.01em; }
}
.example { display: grid; gap: 2px; padding-left: var(--space-3); border-left: 3px solid var(--sun); }
.example__es { font-weight: 600; }
.example__es b { color: var(--em); }
.example__tr { color: var(--ink-soft); font-size: 0.9375rem; }

/* ---------- grammar building blocks (old-page components) ---------- */
/* rule cards: two-up comparison cards; .c-blue is the filled navy card */
.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-4); }
.rule-card {
  --c: var(--blue); --c-soft: var(--blue-soft); --c-ink: var(--blue-ink); --c-on: var(--blue-on);
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1.5px solid var(--c);
  border-radius: var(--radius-l);
  background: var(--c-soft);
  color: var(--ink);
}
.rule-card__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink); }
.rule-card__title { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; line-height: 1.2; color: var(--c-ink); }
.rule-card__es {
  justify-self: start;
  padding: 0.2em 0.8em;
  border-radius: var(--radius-pill);
  background: var(--c);
  color: var(--c-on);
  font-size: 0.8125rem;
  font-weight: 700;
}
.rule-card__body { font-size: 0.9375rem; line-height: 1.6; color: var(--ink); }
.rule-card__body b, .rule-card__body strong { color: var(--c-ink); }
.rule-card.c-blue { background: var(--hero-bg); border-color: color-mix(in srgb, var(--blue) 45%, var(--hero-bg)); color: var(--hero-ink); }
.rule-card.c-blue .rule-card__label { color: var(--hero-soft); }
.rule-card.c-blue .rule-card__title { color: var(--hero-accent); }
.rule-card.c-blue .rule-card__es { background: var(--hero-faint); color: var(--hero-ink); }
.rule-card.c-blue .rule-card__body { color: var(--hero-soft); }
.rule-card.c-blue .rule-card__body b, .rule-card.c-blue .rule-card__body strong { color: var(--hero-ink); }

/* rule box: a note with a coloured left edge */
.rule-box {
  --c: var(--blue); --c-ink: var(--blue-ink);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--c);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: var(--surface);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.rule-box b, .rule-box strong { color: var(--c-ink); }

/* trigger cards: numbered group + phrase pills + example */
.trigger-list { display: grid; gap: var(--space-3); }
.trigger-card { border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); overflow: hidden; }
.trigger-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4) var(--space-2); }
.trigger-card__num {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 1.625rem;
  height: 1.625rem;
  padding-inline: 4px;
  border-radius: var(--radius-pill);
  background: var(--hero-bg);
  color: var(--hero-accent);
  font-size: 0.78rem;
  font-weight: 800;
}
.trigger-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--heading); }
.trigger-card__sub { margin-left: auto; font-size: 0.8125rem; color: var(--ink-soft); text-align: end; }
.trigger-card__body { display: grid; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3); }
.trigger-card__ex { border-top: 1px dashed var(--line); padding-top: var(--space-2); font-size: 0.9375rem; }
.trigger-card__ex b { color: var(--c-hi, var(--coral-hi)); }
.phrase-list { display: flex; flex-wrap: wrap; gap: 6px; }
.phrase {
  padding: 0.25em 0.75em;
  border-radius: var(--radius-pill);
  background: var(--c-soft, var(--blue-soft));
  color: var(--c-ink, var(--blue-ink));
  font-size: 0.8125rem;
  font-weight: 600;
  font-style: italic;
}

/* marker boxes with tag pills; .c-blue is filled navy */
.kw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-3); }
.kw-box {
  --c: var(--line-strong); --c-soft: var(--surface); --c-ink: var(--heading); /* no colour: neutral paper box */
  padding: var(--space-4);
  border: 1.5px solid var(--c);
  border-radius: var(--radius-l);
  background: var(--c-soft);
}
.kw-box__title { margin-bottom: var(--space-2); color: var(--c-ink); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.kw-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-tag {
  padding: 0.25em 0.75em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c) 22%, transparent);
  color: var(--c-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  font-style: italic;
}
.kw-box.c-blue { background: var(--hero-bg); border-color: color-mix(in srgb, var(--blue) 45%, var(--hero-bg)); }
.kw-box.c-blue .kw-box__title { color: var(--hero-accent); }
.kw-box.c-blue .kw-tag { background: var(--hero-faint); color: var(--hero-ink); }

/* example rows: Spanish | translation; <b> marks the form */
.ex-box { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); overflow: hidden; }
.ex-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.ex-row:last-child { border-bottom: 0; }
.ex-row--badged { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
.ex-row__badge {
  --c: var(--blue); --c-on: var(--blue-on);
  display: grid;
  place-items: center;
  padding: var(--space-2) 5px;
  writing-mode: vertical-lr;
  background: var(--c);
  color: var(--c-on);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ex-row__es { padding: var(--space-2) var(--space-4); border-right: 1px solid var(--line); font-weight: 500; }
.ex-row__es b { color: var(--c-hi, var(--blue-hi)); font-weight: 700; }
.ex-row__tr { padding: var(--space-2) var(--space-4); color: var(--ink-soft); font-size: 0.9375rem; }
@media (max-width: 559px) {
  .ex-row, .ex-row--badged { grid-template-columns: minmax(0, 1fr); }
  .ex-row__es { border-right: 0; padding-bottom: 0; }
  .ex-row__tr { padding-top: 2px; }
  .ex-row__badge { writing-mode: horizontal-tb; justify-self: start; padding: 2px var(--space-2); border-radius: 0 0 var(--radius-s) 0; }
}

/* mini tabs: pick a tense / mood inside a card; colour of the chosen tab from its .c-* class */
.mini-tabs { display: flex; border-block: 1px solid var(--line); }
.mini-tab {
  --c: var(--blue); --c-soft: var(--blue-soft); --c-ink: var(--blue-ink);
  flex: 1 1 0;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
}
.mini-tab:hover { color: var(--c-ink); }
.mini-tab[aria-selected="true"], .mini-tab[aria-pressed="true"] { color: var(--c-ink); background: var(--c-soft); border-bottom-color: var(--c); }
.mini-tab:focus-visible { outline-offset: -3px; }

/* conjugation cards */
.conj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); }
.conj-card { --c: var(--blue); --c-soft: var(--blue-soft); --c-ink: var(--blue-ink); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--radius-l); background: var(--surface); overflow: hidden; }
.conj-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-3) var(--space-4); }
.conj-card__verb { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--heading); }
.conj-card__tr { padding: 0.1em 0.65em; border-radius: var(--radius-pill); background: var(--c-soft); color: var(--c-ink); font-size: 0.78rem; font-weight: 600; }
.conj-forms { padding: var(--space-2) var(--space-4) var(--space-3); }
.form-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); font-size: 0.9375rem; }
.form-row:last-child { border-bottom: 0; }
.form-row__pron { color: var(--ink-soft); }
.form-row__word { font-weight: 700; color: var(--c-ink); text-align: end; }

/* cheat sheet / mnemonic */
.tip {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1.5px dashed var(--amber);
  border-radius: var(--radius-l);
  background: var(--amber-soft);
}
.tip__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--amber-ink);
}
.tip__title::before { content: '✦'; color: var(--amber); font-size: 0.9em; }
.tip__body { display: grid; gap: var(--space-2); font-size: 0.9375rem; line-height: 1.65; }
.tip__body b, .tip__body strong { color: var(--amber-ink); }

/* ---------- quiz options ---------- */
.options { display: grid; gap: var(--space-2); }
.option {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) 3rem var(--space-3) var(--space-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}
.option:hover:not([disabled]):not([aria-disabled="true"]) { border-color: var(--heading); box-shadow: inset 4px 0 0 var(--sun); }
.option[disabled], .option[aria-disabled="true"] { cursor: default; }
.option.is-correct { border-color: var(--ok); background: var(--ok-soft); color: var(--ink); }
.option.is-wrong { border-color: var(--bad); background: var(--bad-soft); color: var(--ink); }
.option.is-correct::after, .option.is-wrong::after {
  position: absolute;
  right: var(--space-4);
  font-weight: 700;
  font-size: 1.25rem;
}
.option.is-correct::after { content: '✓'; color: var(--ok); }
.option.is-wrong::after { content: '✗'; color: var(--bad); }
.feedback { padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius-m) var(--radius-m) 0; font-weight: 500; }
.feedback--ok { background: var(--ok-soft); color: var(--ink); box-shadow: inset 4px 0 0 var(--ok); }
.feedback--bad { background: var(--bad-soft); color: var(--ink); box-shadow: inset 4px 0 0 var(--bad); }

/* ---------- empty state & not found ---------- */
.empty {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--surface);
  max-width: 44rem;
}
.empty__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.3; color: var(--heading); }
.empty__text { color: var(--ink-soft); max-width: 56ch; }
.notfound { display: grid; justify-items: start; gap: var(--space-2); }

/* ---------- Telegram link ---------- */
.tg-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: 0.4rem 1.1rem 0.4rem 0.4rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--heading);
  font-weight: 700;
  text-decoration: none;
}
.tg-link:hover { border-color: var(--tg); }
.tg-link__badge {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--tg);
  color: var(--tg-on);
  flex: none;
}
.tg-link__badge .icon { width: 1.25rem; height: 1.25rem; transform: translateX(-1px); }
.tg-link--large { padding-right: 1.5rem; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); }
.tg-link--large .tg-link__badge { width: 3rem; height: 3rem; }
.tg-link--large .tg-link__badge .icon { width: 1.6rem; height: 1.6rem; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-6);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
}
.footer-tg { display: grid; justify-items: start; gap: var(--space-3); }
.footer-tg__caption { color: var(--ink-soft); font-size: 0.9375rem; max-width: 36ch; }
.footer-meta { display: grid; justify-items: start; gap: 0; font-size: 0.875rem; color: var(--ink-soft); }
.footer-meta__catalog { color: var(--link); min-height: var(--tap); display: inline-flex; align-items: center; }
.footer-meta__by { min-height: var(--tap); display: flex; align-items: center; gap: 0.35em; }
/* verzo.pro: a plain text link, no button look */
.footer-meta__by a { color: var(--link); font-weight: 400; text-decoration: underline; min-height: var(--tap); display: inline-flex; align-items: center; }
.footer-meta__by a:hover { color: var(--heading); }
.footer-meta__note { color: var(--bad); font-weight: 500; }

.icon { width: 1.25em; height: 1.25em; }

/* ---------- motion ---------- */
/* Outline that draws itself on hover and keyboard focus (ui.outline): two lines from opposite corners meet.
   Each path has pathLength="1": dash offset 1 hides it, 0 draws it; leaving erases it faster than it drew. */
.outline-draw {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
}
.outline-draw path {
  stroke: var(--c, var(--heading));
  stroke-width: 2;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 260ms ease-in;
}
a:is(:hover, :focus-visible) > .outline-draw path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 640ms cubic-bezier(0.65, 0, 0.35, 1);
}
.level-tile[aria-current="page"] > .outline-draw { display: none; }

/* Scroll parallax: while the navy band leaves the screen, its hatching drifts slower than the page
   and the hero text lags behind and fades. Browsers without scroll-driven animations keep a still band. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header, .hero {
      view-timeline: --band block;
      animation: hatch-drift linear both;
      animation-timeline: --band;
      animation-range: exit;
    }
    .hero > * {
      animation: hero-lag linear both;
      animation-timeline: --band;
      animation-range: exit;
    }
  }
}
@keyframes hatch-drift { to { background-position: 0 var(--space-7); } }
@keyframes hero-lag { to { transform: translateY(var(--space-7)); opacity: 0.25; } }

/* Colour role for a component: add one of these next to its class; defined last so it beats component defaults (e.g. "rule-card c-amber").
   Components read --c (line/fill), --c-soft (background), --c-ink (text on soft), --c-on (text on --c). */
.c-blue   { --c: var(--blue);   --c-soft: var(--blue-soft);   --c-ink: var(--blue-ink);   --c-on: var(--blue-on); --c-hi: var(--blue-hi); }
.c-amber  { --c: var(--amber);  --c-soft: var(--amber-soft);  --c-ink: var(--amber-ink);  --c-on: var(--amber-on); --c-hi: var(--amber-hi); }
.c-teal   { --c: var(--teal);   --c-soft: var(--teal-soft);   --c-ink: var(--teal-ink);   --c-on: var(--teal-on); --c-hi: var(--teal-hi); }
.c-coral  { --c: var(--coral);  --c-soft: var(--coral-soft);  --c-ink: var(--coral-ink);  --c-on: var(--coral-on); --c-hi: var(--coral-hi); }
.c-purple { --c: var(--purple); --c-soft: var(--purple-soft); --c-ink: var(--purple-ink); --c-on: var(--purple-on); --c-hi: var(--purple-hi); }

@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;
  }
  .level-tile:hover { transform: none; }
}