/* ==========================================================================
   Design tokens
   Light is the base palette; dark overrides only the colour tokens, both for
   the explicit toggle ([data-theme]) and for the system preference.
   ========================================================================== */

/*
  Four selectable palettes, each with its own light + dark pair, following the
  same "bare :root, media query, explicit [data-theme]" pattern for every one.
  Sprout lives on the bare :root so a visitor with JavaScript disabled (and so
  no [data-palette] attribute ever gets set) still gets a complete, correct
  palette rather than an unstyled page.
*/

:root {
  /* Sprout — green and white, the default */
  --paper: #f7faf5;
  --surface: #ffffff;
  --surface-sunken: #eaf3e7;
  --border: #dbe8d6;
  --border-strong: #bdd6b6;
  --ink: #1c2b1e;
  --ink-soft: #4c5c4a;
  --muted: #75816f;
  --accent: #3fa34d;
  --accent-soft: #e3f3e1;
  --accent-ink: #256b34;
  --focus: #2f6fb5;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --shell: 62rem;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgb(27 26 23 / 6%), 0 8px 24px rgb(27 26 23 / 6%);
  --ring: 0 0 0 3px rgb(47 111 181 / 35%);

  /*
    CEFR level colours: a fixed traffic-light-style ramp, deliberately the
    same across every palette above (semantic colour, not brand colour).
    Light blue rather than plain white for A1 -- white would vanish against
    the paper background as a badge. Purple rather than black for C2 -- black
    would vanish against a dark-mode background instead.
  */
  --level-a1-bg: #e3f0fa; --level-a1-ink: #1c5c85;
  --level-a2-bg: #e2f3e5; --level-a2-ink: #2f7d4a;
  --level-b1-bg: #faf1cf; --level-b1-ink: #8a6d12;
  --level-b2-bg: #fbe6d2; --level-b2-ink: #a85a1d;
  --level-c1-bg: #fbdfdd; --level-c1-ink: #a3352b;
  --level-c2-bg: #ecdff5; --level-c2-ink: #6b3894;

  /*
    Right/wrong quiz feedback: fixed semantic colours, the same across every
    palette above, for the same reason the CEFR ramp is fixed above -- this
    is feedback colour, not brand colour.
  */
  --good: #1f8a4c;
  --good-soft: #e3f5e8;
  --bad: #c23b3b;
  --bad-soft: #fbe4e2;

  /*
    Word-fingerprint chart axis hues: fixed categorical identity colours
    (this axis is always this colour), independent of the palette above.
  */
  --ling-register: #2a78d6;
  --ling-era: #eb6834;
  --ling-frequency: #1baf7a;
  --ling-domain: #eda100;

  /*
    Meaning-fingerprint chart axis hues: lighter tints of the word-fingerprint
    hues above (register/era/frequency/domain, in that order), so the two
    charts read as a matched pair rather than unrelated palettes -- told
    apart by shade, not by a whole new colour family.
  */
  --meaning-category: #8ebbec;
  --meaning-concreteness: #f4a87f;
  --meaning-animacy: #7fd6b0;
  --meaning-countability: #f4c65c;
  --meaning-scope: #c3b2ea;

  /*
    Noun gender: der/die/das, fixed across every palette (grammatical colour,
    not brand colour) -- same reasoning as the CEFR ramp above. The -bg tokens
    sit behind the word wherever it appears (headword, example sentences); the
    -ink tokens are used only for the small bold gender badge, never for the
    highlighted word itself, which stays plain body text colour.
  */
  --noun-der-bg: #dceefc; --noun-der-ink: #1a5a96;
  --noun-die-bg: #fbdfe2; --noun-die-ink: #a1324a;
  --noun-das-bg: #fff3c4; --noun-das-ink: #8a6d12;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10160f;
    --surface: #182015;
    --surface-sunken: #1e281a;
    --border: #2a3524;
    --border-strong: #3c4a33;
    --ink: #eef3ea;
    --ink-soft: #b7c2b2;
    --muted: #8a9484;
    --accent: #6cc47c;
    --accent-soft: #203524;
    --accent-ink: #a7e0b3;
    --focus: #6aa9e9;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 28px rgb(0 0 0 / 35%);
    --ring: 0 0 0 3px rgb(106 169 233 / 40%);

    --level-a1-bg: #1c2f3d; --level-a1-ink: #7ec2ea;
    --level-a2-bg: #1c3324; --level-a2-ink: #6fcf8e;
    --level-b1-bg: #362c14; --level-b1-ink: #e0c05a;
    --level-b2-bg: #3a2515; --level-b2-ink: #f0a262;
    --level-c1-bg: #3a1e1c; --level-c1-ink: #ee8a7d;
    --level-c2-bg: #2c1f38; --level-c2-ink: #c9a0e8;

    --good: #5cc484;
    --good-soft: #1d3324;
    --bad: #e08585;
    --bad-soft: #3a2020;

    --ling-register: #3987e5;
    --ling-era: #d95926;
    --ling-frequency: #199e70;
    --ling-domain: #c98500;

    --meaning-category: #a4c9f2;
    --meaning-concreteness: #f0a67e;
    --meaning-animacy: #7fd0ae;
    --meaning-countability: #eeb958;
    --meaning-scope: #cbb8f0;

    --noun-der-bg: #1c2f3d; --noun-der-ink: #7ec2ea;
    --noun-die-bg: #3a1e1c; --noun-die-ink: #ee8a7d;
    --noun-das-bg: #362c14; --noun-das-ink: #e0c05a;
  }
}

:root[data-theme="dark"] {
  --paper: #10160f;
  --surface: #182015;
  --surface-sunken: #1e281a;
  --border: #2a3524;
  --border-strong: #3c4a33;
  --ink: #eef3ea;
  --ink-soft: #b7c2b2;
  --muted: #8a9484;
  --accent: #6cc47c;
  --accent-soft: #203524;
  --accent-ink: #a7e0b3;
  --focus: #6aa9e9;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 28px rgb(0 0 0 / 35%);
  --ring: 0 0 0 3px rgb(106 169 233 / 40%);

  --level-a1-bg: #1c2f3d; --level-a1-ink: #7ec2ea;
  --level-a2-bg: #1c3324; --level-a2-ink: #6fcf8e;
  --level-b1-bg: #362c14; --level-b1-ink: #e0c05a;
  --level-b2-bg: #3a2515; --level-b2-ink: #f0a262;
  --level-c1-bg: #3a1e1c; --level-c1-ink: #ee8a7d;
  --level-c2-bg: #2c1f38; --level-c2-ink: #c9a0e8;

  --good: #5cc484;
  --good-soft: #1d3324;
  --bad: #e08585;
  --bad-soft: #3a2020;

  --ling-register: #3987e5;
  --ling-era: #d95926;
  --ling-frequency: #199e70;
  --ling-domain: #c98500;

  --meaning-category: #a4c9f2;
  --meaning-concreteness: #f0a67e;
  --meaning-animacy: #7fd0ae;
  --meaning-countability: #eeb958;
  --meaning-scope: #cbb8f0;

  --noun-der-bg: #1c2f3d; --noun-der-ink: #7ec2ea;
  --noun-die-bg: #3a1e1c; --noun-die-ink: #ee8a7d;
  --noun-das-bg: #362c14; --noun-das-ink: #e0c05a;
}

/* Reef — teal and coral */
:root[data-palette="reef"] {
  --paper: #f4faf9;
  --surface: #ffffff;
  --surface-sunken: #e4f2f0;
  --border: #d3e9e6;
  --border-strong: #aed8d2;
  --ink: #12302c;
  --ink-soft: #456260;
  --muted: #6f8b88;
  --accent: #1c8c7d;
  --accent-soft: #dcf1ec;
  --accent-ink: #0f6357;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="reef"]:not([data-theme="light"]) {
    --paper: #0c1918;
    --surface: #12211f;
    --surface-sunken: #172a27;
    --border: #213e3a;
    --border-strong: #2f544e;
    --ink: #e7f3f1;
    --ink-soft: #a9c1bd;
    --muted: #7fa19c;
    --accent: #4fd6c0;
    --accent-soft: #16332f;
    --accent-ink: #95e6d7;
  }
}
:root[data-palette="reef"][data-theme="dark"] {
  --paper: #0c1918;
  --surface: #12211f;
  --surface-sunken: #172a27;
  --border: #213e3a;
  --border-strong: #2f544e;
  --ink: #e7f3f1;
  --ink-soft: #a9c1bd;
  --muted: #7fa19c;
  --accent: #4fd6c0;
  --accent-soft: #16332f;
  --accent-ink: #95e6d7;
}

/* Ink & Paper — navy on cream, a scholarly mood */
:root[data-palette="ink"] {
  --paper: #f7f4ea;
  --surface: #ffffff;
  --surface-sunken: #efe9d8;
  --border: #e0d8c0;
  --border-strong: #c7bb9a;
  --ink: #22252b;
  --ink-soft: #585c66;
  --muted: #7c765f;
  --accent: #2c4a72;
  --accent-soft: #e2e8f0;
  --accent-ink: #1c3650;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="ink"]:not([data-theme="light"]) {
    --paper: #14161b;
    --surface: #1b1e25;
    --surface-sunken: #22262e;
    --border: #31363f;
    --border-strong: #454b57;
    --ink: #e9e8e1;
    --ink-soft: #b3b1a6;
    --muted: #8d8974;
    --accent: #7ea3cc;
    --accent-soft: #202b3a;
    --accent-ink: #b8d1e8;
  }
}
:root[data-palette="ink"][data-theme="dark"] {
  --paper: #14161b;
  --surface: #1b1e25;
  --surface-sunken: #22262e;
  --border: #31363f;
  --border-strong: #454b57;
  --ink: #e9e8e1;
  --ink-soft: #b3b1a6;
  --muted: #8d8974;
  --accent: #7ea3cc;
  --accent-soft: #202b3a;
  --accent-ink: #b8d1e8;
}

/* Plum & Gold — a jewel-tone option */
:root[data-palette="plum"] {
  --paper: #f8f5f7;
  --surface: #ffffff;
  --surface-sunken: #f0e6ee;
  --border: #e3d3de;
  --border-strong: #cbadc0;
  --ink: #2a1f2a;
  --ink-soft: #5e4f5c;
  --muted: #83728a;
  --accent: #6c2f5e;
  --accent-soft: #f0e0ec;
  --accent-ink: #4a1f40;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="plum"]:not([data-theme="light"]) {
    --paper: #160f16;
    --surface: #201720;
    --surface-sunken: #281d28;
    --border: #392a38;
    --border-strong: #4d3a4c;
    --ink: #f0e6ee;
    --ink-soft: #c2aec0;
    --muted: #94829a;
    --accent: #b565a0;
    --accent-soft: #2e1f2c;
    --accent-ink: #e8c4dd;
  }
}
:root[data-palette="plum"][data-theme="dark"] {
  --paper: #160f16;
  --surface: #201720;
  --surface-sunken: #281d28;
  --border: #392a38;
  --border-strong: #4d3a4c;
  --ink: #f0e6ee;
  --ink-soft: #c2aec0;
  --muted: #94829a;
  --accent: #b565a0;
  --accent-soft: #2e1f2c;
  --accent-ink: #e8c4dd;
}

/* ============================================================== Base */

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

/* The `hidden` attribute and `display: none|flex|block|...` have equal CSS
   specificity, so whichever rule comes later in authored source wins -- any
   component class that sets its own `display` (`.nav-link`, `.pair-card`,
   `.insights-tab`, ...) was silently defeating `el.hidden = true` set from
   JS (applyAudience()'s pair/locale filtering, among others). This single
   high-specificity rule makes `hidden` always win, everywhere, rather than
   chasing down every component style that happens to set `display`. */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 {
  line-height: 1.2;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--accent-ink);
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-color: currentColor;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-sunken);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

main.shell {
  flex: 1;
  padding-block: 2.5rem 4rem;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  padding: 0.6rem 1rem;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

/* ============================================================ Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.wordmark-mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}

:root[data-theme="dark"] .wordmark-mark,
:root:not([data-theme="light"]) .wordmark-mark {
  color: #15161a;
}

.site-nav {
  display: flex;
  gap: 0.25rem;
  margin-right: auto;
  flex-wrap: wrap;
}

.nav-link {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.nav-link:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

.nav-link-flag {
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.05em;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.icon-toggle {
  display: grid;
  place-items: center;
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.icon-toggle:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}

.icon-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-icon {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: inset -0.3rem -0.3rem 0 0 var(--surface);
}

:root[data-theme="dark"] .theme-icon,
:root:not([data-theme="light"]) .theme-icon {
  box-shadow: none;
}

/* Pictures toggle: a diagonal "off" slash grows across the icon when hidden. */
.images-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.4px;
  height: 0;
  background: currentColor;
  transform: rotate(45deg);
  transition: height 0.12s ease;
}

.images-toggle[aria-pressed="false"] .images-icon {
  opacity: 0.4;
}

.images-toggle[aria-pressed="false"]::after {
  height: 1.7rem;
}

/* Colour palette picker */
.palette-picker {
  position: relative;
}

.palette-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 60;
  min-width: 10.5rem;
  padding: 0.35rem;
  display: grid;
  gap: 0.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.palette-menu[hidden] {
  display: none;
}

.palette-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.palette-option:hover {
  background: var(--surface-sunken);
}

.palette-option[aria-checked="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

.palette-swatch {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  flex: none;
  border: 1px solid rgb(0 0 0 / 12%);
}

/* ============================================================ Search */

.search {
  position: relative;
  margin: 0;
}

.search-compact {
  flex: 1 1 14rem;
  max-width: 20rem;
}

.search-hero {
  margin-block: 1.75rem 1rem;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.3rem 0.4rem 0.3rem 0.85rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.search-field:focus-within {
  border-color: var(--focus);
  box-shadow: var(--ring);
}

.search-hero .search-field {
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  box-shadow: var(--shadow);
}

.search-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  padding: 0.35rem 0;
}

.search-hero .search-input {
  font-size: 1.15rem;
}

.search-input:focus {
  outline: none;
}

.search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

.search-submit {
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  padding: 0.4rem 1rem;
  cursor: pointer;
}

:root[data-theme="dark"] .search-submit,
:root:not([data-theme="light"]) .search-submit {
  color: #15161a;
}

.search-compact .search-submit {
  display: none;
}

.search-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  max-height: min(24rem, 60vh);
  overflow-y: auto;
}

.search-results[hidden] {
  display: none;
}

.result {
  display: flex;
  align-items: center;
  border-radius: var(--radius);
}

.result > a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}

/* A small save star beside each suggestion -- same save mechanism as the
   big save-toggle star on an entry page (wireSaveToggle() in app.js is
   reused verbatim), just sized to sit inline without growing the row:
   outlined by default, a hover fill previews what "saved" looks like, a
   click makes that fill permanent (aria-pressed="true"). */
.result-save {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.3rem;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 999px;
}

.result-save .save-icon {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.result-save:hover {
  color: var(--accent-ink);
}

.result-save:hover .save-icon {
  fill: var(--accent);
  stroke: var(--accent);
}

.result-save[aria-pressed="true"] {
  color: var(--accent-ink);
}

.result-save[aria-pressed="true"] .save-icon {
  fill: var(--accent);
  stroke: var(--accent);
}

.result[aria-selected="true"] > a,
.result > a:hover {
  background: var(--surface-sunken);
}

.result-term {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

.result-pair {
  align-self: center;
  justify-self: end;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  grid-column: 2;
  grid-row: 1;
}

.result-gloss {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result mark {
  background: var(--accent-soft);
  color: inherit;
  border-radius: 3px;
  padding: 0 0.1em;
}

.search-empty {
  padding: 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* The full search page reuses the result markup, laid out as a static list. */
.search-page-results {
  margin-top: 1.5rem;
}

.search-page-results .search-results {
  position: static;
  box-shadow: none;
  border: 0;
  padding: 0;
  max-height: none;
  background: none;
}

.search-page-results .result {
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.search-page-results .result > a {
  padding-block: 0.85rem;
}

/* ============================================================== Home */

/*
  Homepage hero mascot: an optional image slot, empty (renders nothing)
  until `heroImage` is set in site.config.json. --hero-mascot-size is the
  on-page display size in CSS pixels -- export the source art at 2x that
  (320x320) as a transparent WebP so it reads crisply on retina screens,
  matching the 224x224 convention already used for media/mascot/*.webp.
  Kept in sync with HERO_MASCOT_SIZE in src/lib/render.js.
*/
:root {
  --hero-mascot-size: 160px;
}

.hero {
  padding-block: 2rem 1rem;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.hero-copy {
  text-align: center;
  flex: 1 1 28rem;
  max-width: 34rem;
}

.hero-mascot {
  flex: none;
  width: var(--hero-mascot-size);
  height: var(--hero-mascot-size);
  object-fit: contain;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.9rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.hero-lede {
  color: var(--ink-soft);
  max-width: 34rem;
  margin-inline: auto;
}

.hero .search {
  max-width: 34rem;
  margin-inline: auto;
}

.hero-hint {
  font-size: 0.85rem;
  color: var(--muted);
}

.section {
  margin-top: 3rem;
}

.section-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.section-lede {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: -0.6rem;
  margin-bottom: 1.25rem;
}

.audience-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
}

.audience-picker-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.audience-picker-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.audience-picker-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.audience-picker-flag {
  font-size: 1.3rem;
}

.footer-locale-switch {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.wotd {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.wotd-label {
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.35rem;
}

.wotd-term {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.wotd-term:hover {
  color: var(--accent-ink);
}

.wotd-meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.wotd-gloss {
  margin-top: 0.6rem;
  color: var(--ink-soft);
}

/*
  "What makes this dictionary different" feature cards: 3 columns x 2 rows
  on desktop (see the media queries below for narrower viewports). Each
  card's preview box has a fixed minimum height so all six line up evenly
  regardless of which preview is tallest. --feature-preview-size is that
  box's side length, used directly by the chart preview to scale the real
  fingerprint/meaning SVG down to fit (see the `svg` rule below) rather
  than a separate image; a future custom icon or mascot drawing dropped
  into a preview box should be exported square at 2x this size (240x240)
  as a transparent WebP.
*/
:root {
  --feature-preview-size: 120px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 60rem) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 34rem) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.feature-card-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0;
}

.feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0;
}

.feature-card > p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
}

.feature-card-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-ink);
}

.feature-preview {
  margin-top: auto;
  padding-top: 1rem;
  min-height: var(--feature-preview-size);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--border);
}

.feature-preview-term {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0;
}

.feature-preview-gloss {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.15rem 0 0.6rem;
}

.feature-preview-example {
  font-size: 0.85rem;
  font-style: italic;
  margin: 0;
}

.feature-preview-example span {
  display: block;
  font-style: normal;
  color: var(--ink-soft);
  margin-top: 0.2rem;
}

.feature-preview-question {
  font-size: 0.9rem;
  margin: 0 0 0.6rem;
}

.feature-preview-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.feature-preview-options li {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}

.feature-preview-options li.is-correct {
  border-color: var(--good);
  background: var(--good-soft);
  color: var(--good);
  font-weight: 600;
}

.feature-preview-chart {
  align-items: center;
}

.feature-preview-chart .fingerprint {
  width: var(--feature-preview-size);
  margin-inline: auto;
}

.feature-preview-chart .fingerprint svg {
  width: var(--feature-preview-size);
  height: var(--feature-preview-size);
}

.feature-preview-chart .fingerprint-label {
  display: none;
}

.feature-preview-gender-word {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0;
}

.feature-preview-gender-example {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.6rem 0 0;
}

.feature-preview-gender-example span {
  color: var(--ink-soft);
}

.feature-preview-synonym-term {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
}

.feature-preview-synonym-contrast {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0;
}

.feature-preview-compound-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.feature-preview-compound-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.3rem;
}

.feature-preview-compound-part {
  font-family: var(--font-display);
  font-weight: 600;
}

.feature-preview-compound-gloss {
  color: var(--muted);
}

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

.pair-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.pair-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.pair-card-codes {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.pair-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  margin-block: 0.35rem 0.4rem;
}

.pair-card p {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.pair-card-count {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--accent-ink);
}

/* ======================================================== Entry lists */

.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-item + .entry-item {
  border-top: 1px solid var(--border);
}

.entry-item > a {
  display: grid;
  grid-template-columns: minmax(6rem, auto) auto 1fr;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  padding: 0.7rem 0.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}

.entry-item > a:hover {
  background: var(--surface-sunken);
}

.entry-item-term {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.entry-item-pos {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted);
}

.entry-item-gloss {
  color: var(--ink-soft);
  font-size: 0.925rem;
}

@media (max-width: 34rem) {
  .entry-item > a {
    grid-template-columns: 1fr auto;
  }

  .entry-item-gloss {
    grid-column: 1 / -1;
  }

  .quiz-results-row {
    grid-template-columns: 1fr auto;
  }

  .quiz-results-term {
    grid-column: 1 / -1;
  }
}

/* ========================================================= Page heads */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.825rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  overflow-wrap: anywhere;
}

.breadcrumb a {
  color: var(--ink-soft);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}

.page-head {
  margin-bottom: 2rem;
}

.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
  /* A title can contain one very long unbroken word (a German compound, e.g.
     the blog's "Donaudampfschifffahrtsgesellschaftskapitän") -- without this,
     it overflows its container instead of wrapping, forcing horizontal
     scroll on narrow screens. */
  overflow-wrap: anywhere;
}

.page-lede {
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

.page-count {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

.letter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.75rem 0;
  border-block: 1px solid var(--border);
  margin-bottom: 2rem;
}

.letter-chip {
  display: grid;
  place-items: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding-inline: 0.4rem;
  border-radius: 7px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.letter-chip:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.letter-chip.is-current {
  background: var(--accent);
  color: var(--surface);
}

.letter-section {
  margin-bottom: 2.5rem;
  scroll-margin-top: 5rem;
}

.letter-heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent);
  border-bottom: 2px solid var(--accent-soft);
  padding-bottom: 0.3rem;
  margin-bottom: 0.5rem;
}

/* The pair landing page links to one page per letter instead of listing
   every entry itself -- see renderPairIndex()'s docstring in render.js. */
.letter-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.6rem;
}

.letter-card > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.9rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}

.letter-card > a:hover {
  background: var(--surface-sunken);
  border-color: var(--accent-soft);
}

.letter-card-letter {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--accent);
}

.letter-card-count {
  font-size: 0.75rem;
  color: var(--muted);
}

.empty {
  color: var(--muted);
  padding: 2rem 0;
}

/* ============================================================= Entry */

.entry {
  max-width: 44rem;
}

.entry-head {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.headword-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.headword {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.save-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.save-toggle:hover {
  border-color: var(--border-strong);
  color: var(--ink-soft);
}

.save-toggle .save-icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.save-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--accent-ink);
}

.save-toggle[aria-pressed="true"] .save-icon {
  fill: var(--accent);
  stroke: var(--accent);
}

.my-words-icon {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.my-words-list {
  margin-top: 1.5rem;
  display: grid;
  gap: 0;
}

.my-words-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0.25rem;
  border-bottom: 1px solid var(--border);
}

.my-words-item a {
  text-decoration: none;
  color: inherit;
}

.my-words-item .entry-item-term {
  display: block;
}

.my-words-item .entry-item-pair {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.5rem;
}

.my-words-remove {
  flex: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}

.my-words-remove:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}

/*
  My Words empty state: shown instead of the toolbar/type-cards/list when
  nothing is saved yet. --my-words-empty-star-size is the star glyph's font
  size; if it's ever swapped for a small drawn icon, export it square at
  roughly 4x this size (about 96x96) as a transparent WebP.
*/
:root {
  --my-words-empty-star-size: 1.6rem;
}

.my-words-empty {
  text-align: center;
  max-width: 28rem;
  margin: 2.5rem auto;
  padding: 2rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.my-words-empty-star {
  font-size: var(--my-words-empty-star-size);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.my-words-empty-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}

.my-words-empty p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0;
}

.my-words-empty-cta {
  display: inline-block;
  margin-top: 1.25rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.5rem 1.2rem;
  text-decoration: none;
}

:root[data-theme="dark"] .my-words-empty-cta,
:root:not([data-theme="light"]) .my-words-empty-cta {
  color: #15161a;
}

/* One "Choose your test" card per question type: a feature-card (see Home)
   plus a checkbox toggling whether that type is asked. */
.quiz-type-card {
  gap: 0.35rem;
}

.quiz-type-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.quiz-type-toggle input {
  flex: none;
}

.quiz-type-mock-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--surface-sunken);
}

.my-words-bulk-add {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.my-words-bulk-input {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.6rem 0.75rem;
  resize: vertical;
}

.my-words-bulk-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.my-words-bulk-result {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.my-words-bulk-count {
  margin: 0;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: var(--muted);
}

.my-words-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  text-align: center;
}

.quiz-start {
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
}

/* The main "Test (N)" call-to-action gets a bigger, centred, more prominent
   treatment than the plain .quiz-start it's still built from (shared with the
   bulk-add "Add words" button, which stays small) -- see .my-words-toolbar's
   column layout above, which centres this and the count-row/hint beneath it. */
.quiz-start--main {
  order: -1;
  font-size: 1.1rem;
  padding: 0.85rem 2.25rem;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}

.quiz-start--main:not(:disabled):hover {
  transform: translateY(-1px);
}

:root[data-theme="dark"] .quiz-start,
:root:not([data-theme="light"]) .quiz-start {
  color: #15161a;
}

.quiz-start:disabled {
  background: var(--surface-sunken);
  color: var(--muted);
  cursor: not-allowed;
}

.quiz-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.quiz-count-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.quiz-count-row input[type="number"] {
  width: 3.5rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.quiz-count-row input[type="number"]:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.save-toggle--full {
  animation: save-toggle-shake 0.4s;
  border-color: var(--bad);
}

@keyframes save-toggle-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* ---------------------------------------------------------------- quiz */

.quiz-dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(85vh, 42rem);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.quiz-dialog::backdrop {
  background: rgb(10 15 10 / 55%);
}

.quiz-close-bar {
  display: flex;
  justify-content: center;
  padding: 0.6rem 1.25rem 0;
}

.quiz-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.35rem 1.25rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.quiz-progress {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-family: var(--font-mono);
}

.quiz-close {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.quiz-close:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}

.quiz-body {
  padding: 1.25rem;
  overflow-y: auto;
}

.quiz-sentence {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0 0 0.5rem;
}

.quiz-blank {
  display: inline-block;
  min-width: 3.5rem;
  border-bottom: 2px solid var(--accent);
  color: var(--accent-ink);
  text-align: center;
  font-weight: 600;
}

.quiz-translation {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.quiz-options {
  display: grid;
  gap: 0.5rem;
}

.quiz-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
}

.quiz-option-mark {
  flex: none;
  font-weight: 700;
  color: var(--bad);
}

.quiz-option:hover:not(:disabled) {
  border-color: var(--border-strong);
}

.quiz-option:disabled {
  cursor: default;
}

.quiz-option--toggle.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.quiz-option--correct {
  border-color: var(--good);
  background: var(--good-soft);
  color: var(--good);
  font-weight: 600;
}

.quiz-option--wrong {
  border-color: var(--bad);
  background: var(--bad-soft);
  color: var(--bad);
}

.quiz-write-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.quiz-write-input {
  flex: 1 1 12rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.8rem;
}

.quiz-write-input:focus {
  outline: none;
  box-shadow: var(--ring);
}

.quiz-write-input:disabled {
  color: var(--ink-soft);
}

.quiz-submit {
  flex: none;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1rem;
  cursor: pointer;
}

:root[data-theme="dark"] .quiz-submit,
:root:not([data-theme="light"]) .quiz-submit {
  color: #15161a;
}

.quiz-feedback {
  margin: 0.9rem 0 0;
  font-weight: 600;
}

.quiz-feedback--good {
  color: var(--good);
}

.quiz-feedback--bad {
  color: var(--bad);
}

.quiz-continue,
.quiz-done {
  display: block;
  margin-top: 1.1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
}

:root[data-theme="dark"] .quiz-continue,
:root:not([data-theme="light"]) .quiz-continue,
:root[data-theme="dark"] .quiz-done,
:root:not([data-theme="light"]) .quiz-done {
  color: #15161a;
}

.quiz-score {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.quiz-results {
  display: grid;
  gap: 0.5rem;
}

.quiz-results-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.quiz-results-term {
  font-weight: 600;
}

.quiz-results-mark.is-good {
  color: var(--good);
}

.quiz-results-mark.is-bad {
  color: var(--bad);
}

.pronunciation {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

.pronunciation-audio {
  height: 2.25rem;
  margin-top: 0.5rem;
  max-width: 260px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.badge {
  font-size: 0.75rem;
  font-style: italic;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--ink-soft);
}

.badge-gender {
  font-style: normal;
  font-weight: 700;
  border-color: transparent;
}

.badge-gender[data-gender="der"] { background: var(--noun-der-bg); color: var(--noun-der-ink); }
.badge-gender[data-gender="die"] { background: var(--noun-die-bg); color: var(--noun-die-ink); }
.badge-gender[data-gender="das"] { background: var(--noun-das-bg); color: var(--noun-das-ink); }
.badge-gender[data-gender="el"] { background: var(--noun-der-bg); color: var(--noun-der-ink); }
.badge-gender[data-gender="la"] { background: var(--noun-die-bg); color: var(--noun-die-ink); }
.badge-gender[data-gender="o"] { background: var(--noun-der-bg); color: var(--noun-der-ink); }
.badge-gender[data-gender="a"] { background: var(--noun-die-bg); color: var(--noun-die-ink); }

/*
  Noun highlight: a coloured background behind the word itself (headword and
  example sentences), wherever nouns.js recognizes it from the gender table.
  The letters stay plain body-text colour -- colour lives in the background,
  not the ink, so highlighted words stay as readable as any other text.
*/
.noun-der, .noun-die, .noun-das {
  padding: 0.04em 0.22em;
  margin: 0 -0.22em;
  border-radius: 4px;
  color: var(--ink);
}

.noun-der { background: var(--noun-der-bg); }
.noun-die { background: var(--noun-die-bg); }
.noun-das { background: var(--noun-das-bg); }

/*
  Gender-pattern underline: coloured for the gender a word's ending/beginning
  usually PREDICTS, not necessarily its real gender (that's the background
  colour above) -- a mismatch is the visible signal that a word is an
  exception. The underline colour is the saturated "ink" tone, never the soft
  "bg" wash, and always fully opaque, so it reads as its own colour and never
  blends into the background highlight sitting behind it.
*/
.gender-underline {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-skip-ink: none;
}

.gender-underline-der { text-decoration-color: var(--noun-der-ink); }
.gender-underline-die { text-decoration-color: var(--noun-die-ink); }
.gender-underline-das { text-decoration-color: var(--noun-das-ink); }

.gender-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.gender-pattern-note {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--muted);
  max-width: 42rem;
}

.gender-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.gender-legend-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
}

.badge-level {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  border-color: transparent;
}

.badge-level[data-level="A1"] { background: var(--level-a1-bg); color: var(--level-a1-ink); }
.badge-level[data-level="A2"] { background: var(--level-a2-bg); color: var(--level-a2-ink); }
.badge-level[data-level="B1"] { background: var(--level-b1-bg); color: var(--level-b1-ink); }
.badge-level[data-level="B2"] { background: var(--level-b2-bg); color: var(--level-b2-ink); }
.badge-level[data-level="C1"] { background: var(--level-c1-bg); color: var(--level-c1-ink); }
.badge-level[data-level="C2"] { background: var(--level-c2-bg); color: var(--level-c2-ink); }

.entry-section {
  margin-bottom: 2.25rem;
}

.entry-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.word-row,
.meaning-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.word-row-main {
  flex: 1 1 auto;
  min-width: 0;
}

.senses {
  flex: 1 1 auto;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sense;
}

/* Word fingerprint: a small wind-rose chart beside the definition. */
.fingerprint {
  flex: none;
  width: 220px;
  margin: 0;
  text-align: center;
}

.fingerprint-track {
  fill: var(--surface-sunken);
}

.fingerprint-hub {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1;
}

.fingerprint-hub-label {
  font-size: 0.8rem;
  font-weight: 700;
  fill: var(--ink-soft);
}

.fingerprint-label {
  font-family: var(--font-body);
}

.fingerprint-label-axis {
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: var(--muted);
}

.fingerprint-label-value {
  font-size: 9px;
  font-weight: 600;
  fill: var(--ink-soft);
}

.fingerprint-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.6rem;
}

.fingerprint-fact {
  font-style: normal;
  font-size: 0.7rem;
}

@media (max-width: 34rem) {
  .word-row,
  .meaning-row {
    flex-direction: column;
    align-items: center;
  }
}

.sense + .sense {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.sense-head {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.sense-number {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 600;
  transform: translateY(0.15rem);
}

.sense-text {
  font-size: 1.15rem;
  color: var(--ink);
}

.sense-register,
.sense-note {
  margin-left: 2.25rem;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.sense-register {
  font-style: italic;
  color: var(--muted);
}

.examples {
  list-style: none;
  margin: 1rem 0 0 2.25rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.example {
  border-left: 2px solid var(--border-strong);
  padding-left: 0.9rem;
}

.example-source {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink);
}

.example-target {
  font-size: 0.925rem;
  color: var(--ink-soft);
}

.example-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}

.example-link:hover {
  color: var(--accent-ink);
  text-decoration-color: var(--accent-ink);
}

.example-note {
  font-size: 0.825rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 1rem;
  background: var(--surface-sunken);
  border-radius: var(--radius);
}

.form-row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.9rem;
}

.form-row dt {
  color: var(--muted);
  flex: none;
}

.form-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.chip-link:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.chips-antonyms .chip {
  border-style: dashed;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: var(--surface-sunken);
  color: var(--muted);
}

.sources {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.entry-updated {
  font-size: 0.8rem;
  color: var(--muted);
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.ad-slot {
  margin: 1.5rem 0 0;
  min-height: 1px;
  overflow: hidden;
}

.register-note {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------- compound breakdown */

.compound-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.compound-tree .compound-tree {
  margin-top: 0.6rem;
  margin-left: 1.4rem;
  padding-left: 1rem;
  border-left: 2px solid var(--border-strong);
}

.compound-tree > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
}

.compound-part {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--accent-ink);
}

.compound-gloss {
  color: var(--ink-soft);
  font-size: 0.925rem;
}

.compound-tree > li > .compound-tree { flex-basis: 100%; }

/* ----------------------------------------------------------- phrasal verbs */

.phrasal-verbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.phrasal-verb {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}

.phrasal-verb-head {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 0.3rem;
}

.phrasal-verb-head strong {
  color: var(--accent-ink);
}

.phrasal-verb-sense {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
}

.phrasal-verb-example {
  margin: 0;
}

.phrasal-verb-example-target {
  margin: 0.15rem 0 0;
  color: var(--ink-soft);
}

.phrasal-verb-note {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------- near synonyms */

.near-synonyms {
  display: grid;
  gap: 0.9rem;
}

.near-synonym {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

.near-synonym-lang {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin: 0 0 0.4rem;
}

.near-synonym-term {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.near-synonym-term a {
  color: var(--accent-ink);
  text-decoration: none;
}

.near-synonym-term a:hover {
  text-decoration: underline;
}

.near-synonym-contrast {
  margin-top: 0.3rem;
  font-size: 0.925rem;
  color: var(--ink-soft);
}

.near-synonyms-other-language {
  margin-top: 0.9rem;
}

.near-synonym-group-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.6rem;
}

.prose p + p {
  margin-top: 0.85rem;
}

/* -------------------------------------------------- /charts/ explainer */

.chart-guide {
  max-width: 42rem;
}

.chart-guide-section {
  margin-top: 2.5rem;
}

.chart-guide-section h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.chart-guide-section h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.chart-guide-section ul {
  margin: 0.75rem 0;
  padding-left: 1.25rem;
}

.chart-guide-section li + li {
  margin-top: 0.4rem;
}

.chart-compare-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.chart-compare-item {
  text-align: center;
}

.chart-compare-label {
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}

.chart-guide-closing {
  margin-top: 2.5rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------- /blog/ */

.blog-article {
  max-width: 42rem;
}

.blog-body {
  /* Same reasoning as .page-head h1 above -- a long German compound cited
     inline (in <em> or plain text) needs to break mid-word on a narrow
     screen instead of overflowing the line. */
  overflow-wrap: anywhere;
}

/* A blog-post preview card on the /blog/ index -- deliberately NOT a reuse
   of .entry-item (the dictionary word-list row grid: short headword + POS +
   gloss on one line, sized for that content). A stacked title/meta/summary
   layout reads like an ordinary blog list and reflows naturally at any
   width, including when the title contains one very long unbroken word. */
.blog-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-index-item + .blog-index-item {
  border-top: 1px solid var(--border);
}

.blog-index-item > a {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 0.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}

.blog-index-item > a:hover {
  background: var(--surface-sunken);
}

.blog-index-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog-index-item-meta .blog-tag-badge {
  margin-bottom: 0;
}

.blog-index-item-date {
  color: var(--muted);
  font-size: 0.8rem;
}

.blog-index-item-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.blog-index-item-summary {
  color: var(--ink-soft);
  font-size: 0.925rem;
  line-height: 1.5;
}

.blog-date {
  color: var(--muted);
  font-size: 0.9rem;
}

.blog-tag-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-bottom: 0.5rem;
}

.blog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
}

.blog-filter {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}

.blog-filter[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

:root[data-theme="dark"] .blog-filter[aria-pressed="true"],
:root:not([data-theme="light"]) .blog-filter[aria-pressed="true"] {
  color: #15161a;
}

.blog-save-hint {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

/* Every gender-coloured word in a blog article is also a real dictionary
   entry (see highlightAndLinkGerman()/highlightAndLinkRomance() in blog.js)
   -- double-click saves it to My Words, wireBlogArticle() in app.js. */
.blog-word {
  cursor: pointer;
}

/* English has no grammatical gender, so an en-es weekly-challenge article's
   saveable words carry this neutral tint instead of a der/die/das or el/la
   background -- same double-click-save mechanism (wireBlogArticle() in
   app.js only checks for the .blog-word class + data-save-* attributes, not
   a gender class), just no colour-by-gender since there's no gender to
   show. Hand-authored directly in the article JSON (see
   weekly-reading-challenge.md) rather than auto-highlighted, since there is
   no reliable "this is a noun" signal in English the way capitalisation
   (German) or a preceding determiner (Romance pairs) gives elsewhere. */
.blog-word-vocab {
  background: var(--surface-sunken);
  border-radius: 3px;
  padding: 0.05em 0.2em;
  margin: 0 -0.2em;
}

.blog-word--saved::after {
  content: " \2605";
  font-size: 0.75em;
  color: var(--accent-ink);
}

.blog-word--pulse {
  animation: blog-word-pulse 0.6s ease;
}

@keyframes blog-word-pulse {
  0% { box-shadow: 0 0 0 0 var(--accent); }
  100% { box-shadow: 0 0 0 6px transparent; }
}

.blog-word--full {
  animation: blog-word-shake 0.4s ease;
}

@keyframes blog-word-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.blog-body h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 2.25rem 0 0.75rem;
}

.blog-toggle-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 1.5rem;
}

.blog-toggle {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  padding: 0.45rem 1rem;
  cursor: pointer;
}

.blog-toggle:hover {
  border-color: var(--accent);
}

.blog-toggle[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

:root[data-theme="dark"] .blog-toggle[aria-pressed="true"],
:root:not([data-theme="light"]) .blog-toggle[aria-pressed="true"] {
  color: #15161a;
}

.gender-legend-box {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.advanced-word {
  font-weight: 700;
  border-bottom: 2px dotted var(--ink-soft);
  cursor: help;
}

/* Gender colouring/underline for the Spanish example words inside a blog
   article is always baked into the HTML (same highlightRomanceNouns() pass
   as every other Spanish example sentence on the site), but stays visually
   neutral until the "Show gender colours" toggle flips this attribute --
   see wireBlogArticle() in app.js. */
.blog-article[data-gender-legend="off"] .blog-body .noun-der,
.blog-article[data-gender-legend="off"] .blog-body .noun-die,
.blog-article[data-gender-legend="off"] .blog-body .noun-das,
.blog-article[data-gender-legend="off"] .blog-body .blog-word-vocab {
  background: none;
  padding: 0;
  margin: 0;
}

.blog-article[data-gender-legend="off"] .blog-body .gender-underline {
  text-decoration: none;
}

/* ======================================================= Insights page */

.insights-home {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
  margin-bottom: 1.5rem;
}

.insights-home svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.insights-home:hover {
  text-decoration: underline;
}

.insights-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 2.5rem;
}

.insights-tab {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.insights-tab:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}

.insights-tab[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.insights-panel + .insights-panel {
  margin-top: 1rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.insights-panel-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 1.25rem;
}

.insights-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

/* The My Words / quiz-results summaries always want exactly 3 columns per
   row (language, level, count -- and, for my-words-stats, one further row
   of the same 3 shape per dictionary the student studies), never the
   Insights page's auto-fit reflow, which could wrap them unevenly (e.g. 3
   then 2) once a 4th+ card is added. One column on narrow screens instead
   of shrinking 3 columns down to illegibility. */
.my-words-stats,
.quiz-summary-stats {
  grid-template-columns: repeat(3, 1fr);
}

/* Every row from the second one on (the per-dictionary breakdown) gets a
   visual break from the first "overall" row above it. */
.my-words-stats .insights-stat:nth-child(4) {
  margin-top: 0.5rem;
}
.my-words-stats .insights-stat:nth-child(n + 4) {
  border-top-width: 2px;
  border-top-color: var(--accent);
}

@media (max-width: 34rem) {
  .my-words-stats,
  .quiz-summary-stats {
    grid-template-columns: 1fr;
  }
  .my-words-stats .insights-stat:nth-child(4) {
    margin-top: 1.25rem;
  }
}

.insights-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  text-align: center;
}

.insights-stat-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0;
  color: var(--accent-ink);
}

.insights-stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0.2rem 0 0;
}

.insights-fingerprint-row {
  margin-bottom: 2rem;
}

.insights-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
}

.insights-chart-grid .entry-section {
  margin: 0;
}

/* ================================================= Images and charts */

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

.image-figure {
  margin: 0;
}

.image-figure img {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 100%;
}

:root[data-images="off"] .entry-section-images {
  display: none;
}

figcaption {
  font-size: 0.825rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

.credit {
  font-style: italic;
}

.chart {
  margin: 0;
}

.chart-body {
  display: grid;
  grid-template-columns: minmax(6rem, 12rem) 1fr;
  gap: 0.75rem;
  align-items: stretch;
}

.chart-labels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  font-size: 0.85rem;
}

.chart-labels li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  color: var(--ink-soft);
}

.chart-labels strong {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink);
}

/* Width fills the column; height comes from the element's own height attribute,
   so the bars keep a fixed row height however wide the page is. */
.chart-svg {
  display: block;
  width: 100%;
}

.bar-track {
  fill: var(--surface-sunken);
}

.bar-value {
  fill: var(--accent);
}

/* ============================================================ Pager */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  max-width: 45%;
}

.pager-link:hover {
  border-color: var(--accent);
}

.pager-link span {
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.pager-link strong {
  font-family: var(--font-display);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pager-next {
  text-align: right;
  margin-left: auto;
}

/* ============================================================ Footer */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* =========================================================== Motion */

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

/* ------------------------------------------------ vulgar-word usage banner */
.usage-banner {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1.1rem;
  background: var(--bad-soft);
  border: 1px solid var(--bad);
  border-left-width: 5px;
  border-radius: var(--radius);
  color: var(--ink);
}

.usage-banner-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--bad);
  color: var(--surface);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
}

.usage-banner-title {
  margin: 0 0 0.15rem;
  font-weight: 700;
  color: var(--bad);
}

.usage-banner-text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------ homograph usage banner */
.usage-banner-homograph {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.usage-banner-homograph .usage-banner-icon {
  background: var(--accent);
}

.usage-banner-homograph .usage-banner-title {
  color: var(--accent-ink);
}

.usage-banner-homograph .usage-banner-text a {
  color: var(--accent-ink);
  font-weight: 600;
}

.homograph-number {
  font-size: 0.55em;
  font-weight: 700;
  margin-left: 0.1em;
  color: var(--accent-ink);
  vertical-align: super;
}


/* ================================================= Practice activities */

.entry-section-activities {
  display: grid;
  gap: 1.25rem;
}

.activity {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}

.activity-question {
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.activity-number {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.85rem;
}

.activity .fingerprint,
.quiz-body .fingerprint {
  margin: 0 auto 0.75rem;
}

.activity-image {
  display: block;
  width: 11rem;
  max-width: 100%;
  margin: 0 0 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.activity-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.activity-option {
  font: inherit;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: inherit;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}

.activity-option:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.activity-option.is-correct {
  background: var(--good-soft);
  border-color: var(--good);
  color: var(--good);
  font-weight: 600;
}

.activity-option.is-wrong {
  opacity: 0.55;
  text-decoration: line-through;
}

/* Chart-choice activity: each option is a rendered fingerprint chart, not a text pill. */
.activity-options--chart {
  align-items: stretch;
}

.activity-option--chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
}

.activity-option--chart .fingerprint {
  margin: 0;
  pointer-events: none;
}

.activity-option--chart.is-wrong {
  text-decoration: none;
  border-color: var(--bad);
  background: var(--bad-soft);
}

.activity-feedback {
  margin: 0.75rem 0 0;
  font-weight: 600;
}

.activity-feedback.is-correct {
  color: var(--good);
}

.activity-feedback.is-wrong {
  color: #b3402a;
}

.activity-explanation {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.925rem;
}

.activity-score {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--good-soft);
  color: var(--good);
  font-weight: 700;
  text-align: center;
}


/* Practice on phones */
.activity-question,
.activity-option {
  overflow-wrap: anywhere;
}

@media (max-width: 34rem) {
  .activity {
    padding: 0.9rem;
  }

  .activity-options {
    flex-direction: column;
  }

  .activity-option {
    width: 100%;
    min-height: 2.75rem;
    text-align: left;
  }

  .activity-option--chart {
    min-height: 0;
    text-align: center;
  }

  .activity-image {
    width: 8rem;
  }
}