/* Word Tour
   Layout: one centred column (max 1080px) of stacked panels; games open as a full-screen layer.
   Type: text you read is 18px and never under 15px; what you learn (the word, the answers) is much larger.
   Calm: one thing per screen may shout (the yellow action). Cards and inputs have a thin line and a soft
   shadow, never a black outline or a hard drop shadow; --shadow-up lifts the card you are working on.
   Palette: cycling jerseys. --yellow is the main action colour and follows the race of the list
   (Tour yellow, Giro pink, Vuelta red ...: see applyColors in app.js); --brand stays Word Tour yellow.
   Green = right, red (polka dots) = wrong. */

/* ---------- Fonts: on our own server ----------
   Barlow, Barlow Condensed and Caveat are in fonts/ (SIL Open Font License, see fonts/LICENSE.txt). Never load
   a font, or anything else, from another site: a visitor's browser would hand over its IP address to get it.
   A browser only fetches the files it needs: latin-ext is for letters like ā, ő and ł.
   The Caveat file holds just the letters of "la maison", the handwritten note on the landing page: another
   word there needs another file. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700i-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800i-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/caveat-700-la-maison.woff2") format("woff2"); }

:root {
  --bg: #F1F2EE;
  --surface: #FFFFFF;
  --surface-2: #E6E8E2;
  --ink: #15171A;
  --ink-2: #565C63;
  --line: #D3D6CF;
  --edge: #15171A;
  --yellow: #FFD31A;
  --on-yellow: #15171A;
  --brand: #FFD31A;
  --on-brand: #15171A;
  --green: #0A8F49;
  --green-bg: #DCF2E4;
  --on-green: #FFFFFF;
  --red: #D3242A;
  --red-bg: #FBE2E0;
  --on-red: #FFFFFF;
  --amber: #9A5A00;
  --amber-bg: #FFF0D1;
  --focus: #1F5BD8;
  --line-2: #BCC0B7;
  --shadow: 0 1px 2px rgba(20, 22, 26, .05), 0 4px 16px rgba(20, 22, 26, .06);
  --shadow-up: 0 2px 6px rgba(20, 22, 26, .06), 0 16px 40px rgba(20, 22, 26, .12);
  --green-text: #077A3D;

  /* Progress charts. Knowledge colours checked with the dataviz palette validator (light + dark). */
  --viz-grid: #E3E5DF;
  --viz-axis: #BFC3BB;
  --viz-wash: rgba(255, 211, 26, .38);
  --k-known: #0A8F49;
  --k-learned: #E0A100;
  --k-hard: #D3242A;
  --k-todo: #E6E8E2;

  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 16px;
  color-scheme: light;
}

/* Dark: when the device asks for it, or when you chose it yourself in Settings (data-theme on <html>, set
   before the first paint by the small script in <head>). Every dark rule therefore exists twice: once for
   the device, unless you chose light, and once for your own choice. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111315;
    --surface: #1A1D20;
    --surface-2: #262A2E;
    --ink: #EEF0EA;
    --ink-2: #A3A9AF;
    --line: #33383D;
    --edge: #000000;
    --green: #39C27B;
    --green-bg: #13301F;
    --on-green: #0B1A12;
    --red: #FF6259;
    --red-bg: #3A1716;
    --on-red: #2A0B0A;
    --amber: #FFB547;
    --amber-bg: #3A2A0E;
    --focus: #8DB4FF;
    --line-2: #4A5057;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
    --shadow-up: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .45);
    --green-text: #39C27B;
    --viz-grid: #2B2F34;
    --viz-axis: #454B52;
    --viz-wash: rgba(255, 211, 26, .16);
    --k-known: #147A43;
    --k-learned: #B88700;
    --k-hard: #C9353B;
    --k-todo: #30353B;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111315;
  --surface: #1A1D20;
  --surface-2: #262A2E;
  --ink: #EEF0EA;
  --ink-2: #A3A9AF;
  --line: #33383D;
  --edge: #000000;
  --green: #39C27B;
  --green-bg: #13301F;
  --on-green: #0B1A12;
  --red: #FF6259;
  --red-bg: #3A1716;
  --on-red: #2A0B0A;
  --amber: #FFB547;
  --amber-bg: #3A2A0E;
  --focus: #8DB4FF;
  --line-2: #4A5057;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
  --shadow-up: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .45);
  --green-text: #39C27B;
  --viz-grid: #2B2F34;
  --viz-axis: #454B52;
  --viz-wash: rgba(255, 211, 26, .16);
  --k-known: #147A43;
  --k-learned: #B88700;
  --k-hard: #C9353B;
  --k-todo: #30353B;
  color-scheme: dark;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
/* touch-action: no zooming in the app. Two thumbs on the answer buttons count as a pinch, and a zoomed page
   pushes its right side off the screen. Scrolling stays. (The viewport tag says the same.) */
html { -webkit-text-size-adjust: 100%; touch-action: pan-x pan-y; }
/* Every :hover style sits inside (hover: hover): on a touch screen a hover sticks to whatever lands under your
   finger next, so the answer you tapped looked half chosen on the next question. */
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a { color: inherit; }
p { margin: 0 0 10px; }
code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); font: .92em ui-monospace, SFMono-Regular, Menlo, monospace; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.flag-icon {
  width: 32px;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(21, 23, 26, .14), 0 1px 2px rgba(21, 23, 26, .08);
  flex-shrink: 0;
}

.eyebrow { margin: 0 0 6px; font: 700 14px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow .flag-icon { width: 22px; height: 16px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.display { margin: 0; font: italic 800 clamp(44px, 9vw, 92px)/1.02 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.h1 { margin: 0; font: italic 800 clamp(34px, 6vw, 52px)/.95 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.h2 { margin: 0 0 8px; font: italic 800 clamp(26px, 4.4vw, 36px)/1 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.h3 { margin: 0 0 6px; font: 800 22px/1.1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.lede { max-width: 60ch; margin: 16px 0 0; font-size: 20px; color: var(--ink-2); }
.help { margin: 6px 0 0; font-size: 16px; color: var(--ink-2); }

.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 16px; padding-block: 28px 72px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.view-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }

/* ---------- Header ---------- */

.top { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); background: var(--bg); border-bottom: 1px solid var(--line); }
.top-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; max-width: 1080px; margin: 0 auto; padding: 10px 16px; }
.brand { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; font: italic 800 25px/1 var(--font-display); text-transform: uppercase; }
.brand-y { display: inline-block; padding: 3px 9px 2px; background: var(--brand); color: var(--on-brand); transform: skewX(-12deg); }
.brand-y > span { display: inline-block; transform: skewX(12deg); }
.nav { display: flex; flex: 1; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav button { flex: none; padding: 10px 12px 8px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ink-2); font: 700 16px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
@media (hover: hover) { .nav button:hover { color: var(--ink); } }
.nav button:focus-visible { outline-offset: -3px; }
.nav button[aria-current="page"] { color: var(--ink); border-bottom-color: var(--yellow); }
.tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; z-index: 5; }
.icon-btn { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .12s ease; }
.icon-btn svg { width: 22px; height: 22px; }
@media (hover: hover) { .icon-btn:hover { background: var(--surface-2); } }
.icon-btn:active { background: var(--surface-2); }
.dot { position: absolute; right: 4px; bottom: 5px; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: var(--ink-2); }
.dot-ok { background: var(--green); }
.dot-saving { background: var(--yellow); }
.dot-setup { background: var(--amber); }
.dot-error, .dot-offline { background: var(--red); }

.nav svg { display: none; }
@media (max-width: 640px) {
  .brand { font-size: 22px; }
  /* On a phone the four pages of a list sit in a bar at the bottom of the screen: always there, in reach of
     your thumb. The page you are on has its icon on the list's colour. */
  .nav {
    position: fixed; inset: auto 0 0; z-index: 30;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); overflow: visible;
    border-top: 1px solid var(--line); background: var(--bg);
  }
  .nav svg { display: block; box-sizing: content-box; width: 24px; height: 24px; padding: 4px 18px; border-radius: 999px; transition: background-color .15s ease; }
  .nav button {
    display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 58px; padding: 5px 2px 4px;
    border: 0; border-radius: 12px; font-size: 13.5px; letter-spacing: .03em; white-space: nowrap;
  }
  .nav button[aria-current="page"] { color: var(--ink); }
  .nav button[aria-current="page"] svg { background: var(--yellow); color: var(--on-yellow); }
  body:not(.is-home) { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body:not(.is-home) .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px;
  border: 1.5px solid var(--line-2); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  font: 700 17px/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  transition: transform .08s ease, border-color .12s ease, background-color .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .btn:hover:not(:disabled) { border-color: var(--ink); } }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; }
/* The one action of a screen: filled with the colour of the list, no outline. */
.btn-primary { border-color: transparent; background: var(--yellow); color: var(--on-yellow); }
.btn-dark { border-color: transparent; background: var(--on-yellow); color: var(--yellow); }
@media (hover: hover) { .btn-primary:hover:not(:disabled), .btn-dark:hover:not(:disabled), .btn-yes:hover:not(:disabled) { border-color: transparent; filter: brightness(.95); } }
.btn-ghost { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .btn-ghost:hover:not(:disabled) { border-color: transparent; background: var(--surface-2); } }
.btn-big { min-height: 58px; padding: 14px 28px; border-radius: 14px; font-size: 20px; }
.btn-yes { border-color: transparent; background: var(--green); color: var(--on-green); }
.btn-no { border-color: transparent; background: var(--red-bg); color: var(--red); }
@media (hover: hover) { .btn-no:hover:not(:disabled) { border-color: var(--red); } }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-sm, .btn-xs { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.btn-icon { width: 56px; padding: 0; }
.btn-icon svg { width: 22px; height: 22px; }
.link { padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* AI help: the line that leads to its explanation (Home, the route page), and the explanation itself. */
.steps + .ai-banner, .progress + .ai-banner { margin-top: 20px; }
.ai-banner { display: flex; align-items: center; gap: 4px; padding-right: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.ai-banner-main { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 64px; padding: 10px 6px 10px 14px; border: 0; border-radius: 16px; background: none; color: var(--ink); text-align: left; -webkit-tap-highlight-color: transparent; }
.ai-banner-icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.ai-banner-icon svg { width: 20px; height: 20px; }
.ai-banner-text { display: grid; flex: 1; gap: 1px; min-width: 0; }
.ai-banner-text b { font: 700 18px/1.25 var(--font-body); }
.ai-banner-text small { color: var(--ink-2); font-size: 15px; }
.ai-banner-main > svg { flex: none; width: 18px; height: 18px; color: var(--ink-2); }
.ai-banner .icon-btn { color: var(--ink-2); }
.ai-info { display: grid; gap: 14px; }
.ai-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ai-list li { display: flex; align-items: flex-start; gap: 12px; }
.ai-list li > svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--ink-2); }
.ai-list span { display: grid; gap: 1px; }
.ai-list b { font-size: 18px; }
.ai-list small { color: var(--ink-2); font-size: 16px; }
.ai-beta { margin: 6px 0 0; font-size: 17px; }
.ai-on { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--green-text); font-size: 18px; font-weight: 600; }
.ai-on svg { width: 20px; height: 20px; }
.ai-info .btn { width: 100%; }
.code-more { margin: 14px 0 0; color: var(--ink-2); font-size: 17px; }
.code-own { margin-top: 12px; color: var(--ink-2); font-size: 16px; }
.code-own summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
.code-own input { width: 100%; margin-bottom: 10px; }
.sync-form .btn-big { width: 100%; }

/* A short list of things to do or places to go: rows with an icon, in one box (a list's menu, Settings). */
.menu { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 14px; border: 0; background: var(--surface); color: var(--ink); text-align: left; text-decoration: none; font: 500 18px/1.25 var(--font-body); -webkit-tap-highlight-color: transparent; }
.menu-row + .menu-row { border-top: 1px solid var(--line); }
.menu-row > svg { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
.menu-row > span { flex: 1; min-width: 0; }
.menu-row > small { flex: none; color: var(--ink-2); font-size: 16px; font-variant-numeric: tabular-nums; }
.menu-row.is-bad, .menu-row.is-bad > svg { color: var(--red); }
.menu-row:active { background: var(--bg); }
@media (hover: hover) { .menu-row:hover { background: var(--bg); } }
.menu-row:focus-visible { outline-offset: -3px; }

.card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.notice p { flex: 1 1 260px; margin: 0; }
.notice-warn { border-color: var(--amber); background: var(--amber-bg); }
.pill { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px; background: var(--surface-2); color: var(--ink); white-space: nowrap; font: 700 14px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.pill-good { background: var(--green-bg); color: var(--green); }
.pill-warn { background: var(--amber-bg); color: var(--amber); }
.meter { display: grid; gap: 6px; width: 100%; margin: 10px 0 14px; }
.meter-bar { height: 8px; overflow: hidden; border-radius: 4px; background: var(--surface-2); }
.meter-bar i { display: block; height: 100%; border-radius: 4px; background: var(--yellow); }
.meter span { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip { display: inline-block; padding: 4px 9px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font: 700 14px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
/* The gender of a word, where the word itself doesn't show it: a small word in grey. Under a big word it has a
   line of its own, so the word stays centred; in running text it sits in brackets behind the word. */
.gender { display: inline; margin-left: .3em; padding: 0; vertical-align: baseline; border-radius: 0; background: none; color: var(--ink-2); font: 500 max(15px, .7em)/1.2 var(--font-body); letter-spacing: 0; text-transform: none; }
.gender::before { content: "("; }
.gender::after { content: ")"; }
.g-prompt .gender, .g-word .gender, .flash-word .gender, .mh-fr .gender { display: block; margin: 6px 0 0; font-size: max(16px, .34em); }
.g-prompt .gender::before, .g-prompt .gender::after, .g-word .gender::before, .g-word .gender::after, .flash-word .gender::before, .flash-word .gender::after, .mh-fr .gender::before, .mh-fr .gender::after { content: none; }
.speak { display: none; }
.has-voice .speak { display: inline-grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); transition: filter .12s ease; -webkit-tap-highlight-color: transparent; }
.speak svg { width: 24px; height: 24px; }
@media (hover: hover) { .speak:hover { filter: brightness(.94); } }
.speak:active { filter: brightness(.9); }

.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; margin: 0 0 16px; }
.field > span { font: 700 14px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
/* minmax(0, …): a date field has a width of its own on phones and would push the second column out of the card. */
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
input[type="text"], input[type="search"], input[type="date"], input[type="password"], select {
  width: 100%; min-width: 0; max-width: 100%; min-height: 50px; padding: 10px 14px;
  border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink);
}
input[type="date"] { -webkit-appearance: none; appearance: none; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; padding: 0; }
/* Two dates next to each other need room; on a very narrow screen they go under each other. */
@media (max-width: 400px) {
  .field-row:has(input[type="date"]) { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
input:focus, select:focus { border-color: var(--ink); }
.select-wrap select { width: auto; min-width: 210px; max-width: 100%; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; }
.check input { width: 22px; height: 22px; accent-color: var(--ink); }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.inline small { font-size: 16px; color: var(--ink-2); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset:disabled { opacity: .55; }

/* ---------- Route (home) ---------- */

.hero { padding-block: 12px 30px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.step { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 20px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.step > p { color: var(--ink-2); }
.step > .btn, .step > .row { margin-top: auto; }
.step-n { display: inline-grid; place-items: center; width: 42px; height: 34px; margin-bottom: 10px; background: var(--surface-2); color: var(--ink); font: italic 800 22px/1 var(--font-display); transform: skewX(-12deg); }
.step.is-now .step-n { background: var(--yellow); color: var(--on-yellow); }
.step.is-done .step-n { background: var(--green); color: var(--on-green); }
.step.is-later { opacity: .72; }
/* The step you may skip: quieter than the numbered ones. */
.step.is-opt { background: transparent; box-shadow: none; }
.done-plan { margin: 14px 0 0; color: var(--ink-2); font-size: 17px; }
.plan-auto { margin: -8px 0 16px; }
.plan-auto:empty { display: none; }
.step .step-note { font-size: 17px; color: var(--ink); }

.journey { display: grid; gap: 20px; }
.journey > .notice { margin: 0; }
.today { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 28px; padding: 26px; border-radius: 18px; background: var(--yellow); color: var(--on-yellow); box-shadow: var(--shadow); }
.today .eyebrow { color: var(--on-yellow); opacity: .78; }
.today-title { margin: 0 0 8px; font: italic 800 clamp(34px, 6vw, 58px)/.95 var(--font-display); text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.today-task { margin: 0; font-size: 19px; font-weight: 500; }
.today-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.today-words li { padding: 5px 12px; border-radius: 999px; background: rgba(21, 23, 26, .1); font-weight: 600; }
.today-go { display: grid; justify-items: end; gap: 10px; }
.today-note { max-width: 30ch; margin: 0; font-size: 16px; text-align: right; }
.play .today { margin-bottom: 20px; }
@media (max-width: 720px) {
  .today { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .today-go { justify-items: stretch; }
  .today-note { text-align: left; }
}

.profile-card { padding: 20px 20px 14px; }
.pc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.profile-wrap { margin-top: 8px; }
.profile { display: block; width: 100%; height: auto; overflow: visible; }
.pf-area { fill: var(--surface-2); }
.pf-done { fill: var(--yellow); }
.pf-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.pf-base { stroke: var(--ink); stroke-width: 2; }
.pf-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.pf-dot.is-done { fill: var(--ink); }
.pf-peak line { stroke: var(--ink-2); stroke-width: 1.5; }
.pf-peak text { fill: var(--ink-2); font: 700 17px var(--font-display); letter-spacing: .08em; text-anchor: middle; }
.pf-town { fill: var(--ink); font: 700 22px var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.pf-pole { stroke: var(--ink); stroke-width: 2.5; }
.pf-flag { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.pf-check { fill: var(--ink); }
.pf-bike { overflow: visible; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pf-bob { animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.pc-foot { margin: 6px 0 0; font-size: 16px; color: var(--ink-2); }
@media (max-width: 600px) {
  .pf-town.is-mid, .pf-peak text { display: none; }
  .pf-town { font-size: 36px; }
}

/* Progress: "Wat ken je al?" */
.progress { display: grid; gap: 12px; padding: 20px; }
.steps + .progress { margin-top: 20px; }
.pg-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }
.pg-head .eyebrow { margin-bottom: 2px; }
.pg-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-weight: 400; }
.pg-hero b { font: 800 54px/1 var(--font-display); }
.pg-hero span { font-size: 19px; color: var(--ink-2); }
.pg-delta { margin: 0 0 6px; font-weight: 700; color: var(--green-text); }
.pg-legend, .klegend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 16px; color: var(--ink-2); }
.klegend b { margin-left: 3px; color: var(--ink); font-variant-numeric: tabular-nums; }
.klegend .link { font-size: 16px; }
.key { display: inline-block; width: 18px; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--ink); }
.key-plan { border-top-style: dashed; border-top-color: var(--ink-2); }
.sw { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 3px; }
.pg-growth { position: relative; min-height: 210px; border-radius: 8px; touch-action: pan-y; }
.pg-growth:focus-visible { outline-offset: 4px; }
.viz { display: block; overflow: visible; }
.viz text { fill: var(--ink-2); font: 500 12px var(--font-body); font-variant-numeric: tabular-nums; }
.viz .viz-strong { fill: var(--ink); font-weight: 700; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-axis { stroke: var(--viz-axis); stroke-width: 1; }
.viz-area { fill: var(--viz-wash); }
.viz-plan { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: round; }
.viz-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.viz-dot-plan { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }
.viz-cross line { stroke: var(--ink-2); stroke-width: 1; }
.viz-hit { fill: transparent; cursor: crosshair; }
.pg-sub { margin: 12px 0 0; font: 800 18px/1.1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.kbar { display: flex; flex: 1; gap: 2px; min-width: 0; height: 10px; }
.kbar-big { height: 22px; }
.kseg { flex: 1 1 0; min-width: 3px; cursor: default; }
.kseg:last-child { border-radius: 0 4px 4px 0; }
.kseg:focus-visible { filter: brightness(1.12); }
@media (hover: hover) { .kseg:hover { filter: brightness(1.12); } }
.kseg:focus-visible { outline-offset: 2px; }
.k-known { background: var(--k-known); }
.k-learned { background: var(--k-learned); }
.k-hard { background: var(--k-hard); }
.k-todo { background: var(--k-todo); }
.krows { display: grid; gap: 9px; }
.krow { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 3em; align-items: center; gap: 10px; font-size: 16px; }
.kch { font-weight: 700; }
.kpct { text-align: right; font-variant-numeric: tabular-nums; }
.pg-table { margin-top: 6px; font-size: 16px; }
.pg-table summary { width: max-content; cursor: pointer; color: var(--ink-2); font-weight: 600; }
.tbl-wrap { overflow-x: auto; }
.viz-table { margin-top: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.viz-table caption { padding: 6px 0 4px; text-align: left; font-weight: 700; }
.viz-table th, .viz-table td { padding: 6px 28px 6px 0; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.viz-table th { color: var(--ink-2); font-weight: 600; }
.viz-tip { position: fixed; z-index: 90; display: grid; gap: 3px; max-width: 260px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: 13px; pointer-events: none; }
.tip-title { margin-bottom: 2px; color: var(--ink-2); font-size: 14px; }
.tip-row { display: flex; align-items: center; gap: 6px; }
.tip-row .key { width: 14px; margin-right: 2px; }
.tip-row b { font-size: 17px; font-variant-numeric: tabular-nums; }
.tip-row span { color: var(--ink-2); }

.jerseys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.jersey-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius); }
.jersey-card.is-earned { border-style: solid; background: var(--surface); }
.jersey { flex: none; width: 52px; height: 52px; }
.j-body { fill: var(--surface-2); }
.j-line { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 3 3; }
.jersey.is-earned .j-line { stroke: var(--edge); stroke-dasharray: none; }
.j-yellow.is-earned .j-body { fill: var(--yellow); }
.j-green.is-earned .j-body { fill: var(--green); }
.j-white.is-earned .j-body, .j-polka.is-earned .j-body { fill: #FFFFFF; }
.j-dot { fill: #D3242A; }
.jc-text { display: grid; gap: 2px; min-width: 0; }
.jc-text b { font: 800 19px/1.1 var(--font-display); text-transform: uppercase; }
.jc-text span { font-size: 15px; color: var(--ink-2); }
.jc-text em { color: var(--green); font: 700 14px/1.4 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.jc-text .meter { margin: 6px 0 0; }
@media (max-width: 860px) { .jerseys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .jerseys { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sort ---------- */

.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.seg button { min-height: 40px; padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 700 15px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
/* Under the card, small and quiet: the settings of this page (chapter, which side first) and the one link to
   sort a pile again. A tap on the link turns it into the piles to choose from, in the same spot. */
.sort-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; margin-top: 14px; color: var(--ink-2); font-size: 16px; }
.sort-tools select { width: auto; min-width: 0; min-height: 36px; padding: 4px 8px; border-width: 1px; background: transparent; color: var(--ink-2); font-size: 16px; }
.sort-tools .check { min-height: 36px; font-size: 16px; }
.sort-tools .check input { width: 20px; height: 20px; }
.sort-tools .link { min-height: 36px; color: var(--ink-2); font-weight: 400; }
.sort-again-btn { display: inline-flex; align-items: center; gap: 6px; }
/* "Wat leer je nu?": the button that names the chapters you chose, and the choice itself. */
.scope-btn { max-width: 100%; min-height: 40px; }
.scope-btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scope-btn svg { flex: none; width: 16px; height: 16px; }
.list-bar-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* A list with years: a block per year. The year itself (a tap takes the whole year) sits above its own chapters,
   so every year has its own choice. A dark edge without a fill means: part of this year. */
.scope-year { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.scope-year-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.scope-y { min-height: 44px; padding-inline: 18px; font-size: 17px; }
.scope-y[aria-pressed="mixed"] { border-color: var(--ink); color: var(--ink); }
.scope-year .scope-rows { margin: 10px 0 2px; }
.scope-rows { display: grid; gap: 8px; margin: 12px 0; }
.scope-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.scope-n { flex: none; width: 44px; height: 44px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); font: 800 20px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.scope-n[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.scope-row .chip-btn { min-width: 44px; min-height: 44px; }
.scope-row .chip-btn b { margin-left: 3px; font-variant-numeric: tabular-nums; opacity: .6; }
.scope-count { color: var(--ink-2); font-size: 16px; }
.scope-sum { margin: 0 0 12px; color: var(--ink-2); font-size: 17px; }
.sort-again-btn svg { width: 15px; height: 15px; }
.sort-piles { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.pile-btn { min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); font: 700 15px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
@media (hover: hover) { .pile-btn:hover { border-color: var(--ink); } }
.pile-btn b { margin-left: 3px; font-variant-numeric: tabular-nums; opacity: .6; }
.pile-x { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--ink-2); }
.pile-x svg { width: 16px; height: 16px; }
.sort-progress { margin-bottom: 22px; }
.chip-btn:disabled { opacity: .4; }
.chip-was { margin-right: auto; }
.chip-was.is-k { color: var(--green); }
.road { position: relative; height: 12px; margin: 34px 0 10px; border-radius: 6px; background: var(--surface-2); }
.road::after { content: ""; position: absolute; top: 5px; right: 8px; left: 8px; border-top: 2px dashed var(--line); }
.road-fill { position: absolute; inset: 0 auto 0 0; z-index: 1; border-radius: 6px; background: var(--yellow); transition: width .25s ease; }
.road-bike { position: absolute; bottom: 9px; left: clamp(20px, var(--p), calc(100% - 20px)); z-index: 2; width: 40px; height: 28px; transform: translateX(-50%); fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: left .25s ease; }
.counts { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 17px; color: var(--ink-2); }
.counts b { margin-right: 3px; color: var(--ink); font: 800 22px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.c-k b { color: var(--green); }
.c-l b { color: var(--red); }

/* A card that flies off (or is dragged) to the right would make the page wider for a moment. Android then
   re-fits the page and jumps to the top, so nothing in the app may stick out sideways. */
#main { overflow-x: clip; }
@supports not (overflow-x: clip) { .sort { overflow: hidden; } }
.sort-stage { display: grid; justify-items: center; align-content: start; gap: 20px; min-height: 420px; }
.deck { position: relative; width: min(520px, 100%); }
.ghost { position: absolute; inset: 0; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.ghost.g1 { opacity: .8; transform: translateY(8px) scale(.955); }
.ghost.g2 { opacity: .5; transform: translateY(16px) scale(.91); }
.flash {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px;
  min-height: 320px; padding: 16px 20px 0; overflow: hidden;
  border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-up);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  animation: card-in .18s ease both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(6px) scale(.985); } }
.flash.is-dragging { cursor: grabbing; }
.flash-top { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.flash-word { flex: 1; align-content: center; padding-block: 12px; font: 700 clamp(36px, 9.5vw, 58px)/1.08 var(--font-body); }
.flash-word.is-nl { font-weight: 600; }
.flash-reveal { min-height: 76px; margin-inline: -20px; padding: 14px 20px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink-2); text-align: center; font-size: 24px; transition: background-color .15s ease; }
.fr-hint { font: 500 17px/1.2 var(--font-body); }
.fr-answer { display: none; color: var(--ink); font-weight: 600; }
.flash.is-revealed .fr-hint { display: none; }
.flash.is-revealed .fr-answer { display: inline; }
.flash.is-revealed .flash-reveal { background: var(--surface-2); }
.lean { position: absolute; top: 22px; padding: 6px 12px; border: 3px solid; border-radius: 8px; opacity: 0; pointer-events: none; font: italic 800 26px/1 var(--font-display); text-transform: uppercase; transition: opacity .1s; }
.lean-yes { left: 18px; color: var(--green); transform: rotate(-12deg); }
.lean-no { right: 18px; color: var(--red); transform: rotate(12deg); }
.flash[data-lean="yes"] .lean-yes, .flash[data-lean="no"] .lean-no { opacity: 1; }
/* The two answers stay in reach at the bottom of the screen (on a phone: just above the tab bar), whatever
   you scrolled to. */
.sort-actions { position: sticky; bottom: var(--tabbar, 0px); z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; width: min(520px, 100%); padding-block: 10px; background: var(--bg); }
.sort-actions .btn-yes, .sort-actions .btn-no { flex: 1 1 0; min-width: 0; min-height: 60px; padding-inline: 10px; border-radius: 14px; font-size: 20px; white-space: nowrap; }
@media (max-width: 640px) {
  :root { --tabbar: calc(71px + env(safe-area-inset-bottom, 0px)); }
  /* A phone screen is for the card: less above it, and the settings of this page go under it. */
  .sort.wrap { display: flex; flex-direction: column; padding-top: 16px; }
  .sort .view-head { gap: 10px 12px; margin-bottom: 12px; }
  .sort .view-head .eyebrow { display: none; }
  .sort .view-head .h1 { font-size: 28px; }
  .sort-progress { margin-bottom: 14px; }
  .sort-stage { gap: 22px; min-height: 0; }
  .sort-stage .flash { min-height: 260px; }
  .sort-actions { gap: 8px; width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; }
  .sort-actions .btn-yes, .sort-actions .btn-no { font-size: 18px; letter-spacing: .04em; }
}
@media (max-width: 360px) {
  .sort-actions .btn-yes span, .sort-actions .btn-no span { display: none; }
}
/* A short screen (a small phone, or a browser with its bars): the whole card has to fit above the two answers. */
@media (max-width: 640px) and (max-height: 720px) {
  .sort .view-head { margin-bottom: 6px; }
  .sort .view-head .h1 { font-size: 24px; }
  .sort-progress { margin-bottom: 8px; }
  .sort-progress .road { margin-top: 26px; }
  .sort-stage { gap: 12px; }
  .sort-stage .flash { min-height: 0; padding-top: 10px; gap: 2px; }
  .flash-word { padding-block: 4px; font-size: clamp(30px, 9vw, 40px); }
  .flash-reveal { min-height: 58px; padding-block: 10px; font-size: 21px; }
  .sort-actions .btn-yes, .sort-actions .btn-no { min-height: 52px; }
}
.hint { margin-top: 18px; text-align: center; font-size: 16px; color: var(--ink-2); }
.keys { display: block; margin-top: 4px; }
/* The keyboard shortcuts are no use on a touch screen. */
@media (hover: none) { .keys { display: none; } }
@media (hover: none) { .keys { display: none; } }
.done-card { width: min(640px, 100%); }

.list-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.list-tools input[type="search"] { flex: 1 1 260px; width: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip-btn { padding: 8px 14px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 700 15px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.chip-btn[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.list-count { margin: 0 0 8px; font-size: 16px; color: var(--ink-2); }
.wl { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.wl-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 74px auto; align-items: center; gap: 4px 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.wl-row:last-child { border-bottom: 0; }
.wl-fr { font-weight: 600; overflow-wrap: anywhere; }
.wl-nl { display: flex; align-items: center; gap: 2px; color: var(--ink-2); }
.wl-nl span { min-width: 0; overflow-wrap: anywhere; }
.wl-nl .word-edit { margin: -10px 0; }
.wl-ch { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wl-set { display: inline-flex; overflow: hidden; border: 1.5px solid var(--line); border-radius: 8px; }
.wl-set button { padding: 8px 10px; border: 0; background: var(--surface); color: var(--ink-2); font: 700 14px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.wl-set button + button { border-left: 1.5px solid var(--line); }
.wl-set button[data-v="k"][aria-pressed="true"] { background: var(--green); color: var(--on-green); }
.wl-set button[data-v="l"][aria-pressed="true"] { background: var(--red); color: var(--on-red); }
.hard-dot { display: inline-block; width: 9px; height: 9px; vertical-align: middle; border-radius: 50%; background: var(--red); }
.empty { margin: 0; padding: 20px; color: var(--ink-2); }
.list-foot { margin-top: 20px; }
@media (max-width: 640px) {
  .wl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "fr set" "nl set"; }
  .wl-fr { grid-area: fr; }
  .wl-nl { grid-area: nl; font-size: 16px; }
  .wl-ch { display: none; }
  .wl-set { grid-area: set; }
}

/* ---------- Plan ---------- */

.plan-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); align-items: start; gap: 24px; }
@media (max-width: 960px) { .plan-grid { grid-template-columns: minmax(0, 1fr); } }
.settings { padding: 22px; }
.settings > .notice { margin-bottom: 18px; }
.stepper { display: inline-flex; align-items: center; overflow: hidden; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.stepper button { width: 48px; height: 48px; border: 0; background: var(--surface); font-size: 22px; font-weight: 700; }
@media (hover: hover) { .stepper button:hover:not(:disabled) { background: var(--surface-2); } }
.stepper button:disabled { opacity: .35; }
.stepper output { min-width: 44px; text-align: center; font: 800 24px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.wk { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 9px 0 8px; border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface); }
.wk b { font: 700 14px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.wk span { font: 800 19px/1 var(--font-display); }
.wk-l { border-color: var(--on-yellow); background: var(--yellow); color: var(--on-yellow); }
.wk-r { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.wk-x { border-style: dashed; border-color: var(--line); background: transparent; color: var(--ink-2); }
.orders { display: grid; gap: 8px; }
.order { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1.5px solid var(--line-2); border-radius: 12px; cursor: pointer; }
.order:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.order input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--ink); }
.order b { display: block; font: 800 18px/1.1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.order small { display: block; margin-top: 3px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.summary { margin-top: 4px; padding-top: 16px; border-top: 2px solid var(--ink); }
.sum-big { display: flex; align-items: baseline; gap: 10px; }
.sum-big b { font: italic 800 56px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.sum-big span { color: var(--ink-2); font: 700 16px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.sum-list { display: grid; gap: 4px; margin: 10px 0 14px; padding: 0; list-style: none; font-size: 17px; }
.sum-list b { font-variant-numeric: tabular-nums; }
.print-box { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.print-box .btn { width: 100%; }
.print-box .btn + .btn { margin-top: 10px; }
.print-box .help { margin-top: 10px; }
.preview { min-width: 0; overflow-x: auto; padding: 18px; border-radius: var(--radius); background: var(--surface-2); }
.preview-cap { margin: 0 0 12px; color: var(--ink-2); text-align: center; font: 700 14px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 640px) { .preview { padding: 12px; } }

/* ---------- Routebook (paper: same in light and dark, and what gets printed) ---------- */

.paper {
  --p-ink: #111111; --p-mute: #5C5C5C; --p-line: #C8C8C8; --p-yellow: #FFD31A;
  width: 100%; min-width: 600px; max-width: 210mm; margin: 0 auto; padding: 12mm 11mm 14mm;
  background: #FFFFFF; color: var(--p-ink);
  font: 400 10.5pt/1.3 var(--font-body);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 10px 30px rgba(0, 0, 0, .12);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rb-cover { margin-bottom: 7mm; }
.rb-top { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 2mm; border-bottom: 2.5pt solid var(--p-ink); }
.rb-brand { font: italic 800 19pt/1 var(--font-display); text-transform: uppercase; }
.rb-brand span { display: inline-block; padding: .6mm 2mm .2mm; background: var(--p-yellow); transform: skewX(-12deg); }
.rb-sub { font: 700 9pt/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.rb-title { margin: 5mm 0 1.5mm; font: italic 800 27pt/1 var(--font-display); text-transform: uppercase; }
.rb-meta { margin: 0 0 5mm; font-size: 9.5pt; color: var(--p-mute); }
.rb-cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 7mm; }
.rb-how { margin: 0; padding-left: 5mm; font-size: 9.3pt; }
.rb-how li { margin-bottom: 1.8mm; }
.rb-tip { margin: 2mm 0 0; font-size: 8.8pt; color: var(--p-mute); }
.cal { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 7.5pt; }
.cal th { padding: 0 0 1mm 1.1mm; border-bottom: 1pt solid var(--p-ink); text-align: left; font: 700 7.5pt/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.cal td { height: 9.5mm; padding: .8mm 1.1mm; vertical-align: top; border: .5pt solid var(--p-line); }
.cal .d { display: block; font-size: 6.5pt; color: var(--p-mute); }
.cal .t { display: block; margin-top: .4mm; font: 800 9pt/1 var(--font-display); }
.cal .out .d { color: #B5B5B5; }
.cal .is-review, .cal .is-sprint, .cal .is-extra { background: #EDEDED; }
.cal .is-review .t, .cal .is-sprint .t, .cal .is-extra .t { font-style: italic; }
.cal .is-test { background: var(--p-yellow); }
.cal .is-free .t { color: var(--p-mute); font-weight: 600; }
.rb-legend { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1.2pt solid var(--p-ink); color: var(--p-mute); font: 700 8pt/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.rb-legend > div { display: flex; justify-content: space-between; padding: 0 3mm 1.2mm; }
.rb-legend > div + div { border-left: 1pt dashed var(--p-mute); }
.rb-stage { display: grid; grid-template-columns: 1fr 1fr; break-inside: avoid; page-break-inside: avoid; }
.rb-cell { display: flex; align-items: center; gap: 2mm; min-width: 0; min-height: 6.3mm; padding: .6mm 3mm; border-bottom: .5pt solid var(--p-line); overflow-wrap: anywhere; }
.rb-cell.r { border-left: 1pt dashed var(--p-mute); }
.rb-head { align-items: flex-end; min-height: 9mm; padding-top: 2.8mm; border-bottom: 1pt solid var(--p-ink); }
.rb-tag { flex: none; padding: .7mm 1.8mm .4mm; background: var(--p-yellow); font: italic 800 10.5pt/1 var(--font-display); text-transform: uppercase; }
.rb-date { flex: none; font: 700 9pt/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.rb-town { min-width: 0; margin-left: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 8.5pt; color: var(--p-mute); }
.rb-check { flex: none; width: 3.8mm; height: 3.8mm; border: .9pt solid var(--p-ink); border-radius: .6mm; }
.rb-fr { font-size: 10.5pt; font-weight: 600; }
.rb-g { flex: none; color: var(--p-mute); font: 700 7.5pt/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.rb-ch { flex: none; margin-left: auto; font-size: 7pt; color: #9A9A9A; }
.rb-nl { font-size: 10.5pt; }
.rb-band .rb-tag { background: var(--p-ink); color: #FFFFFF; }
.rb-sprint .rb-tag { color: var(--p-yellow); }
.rb-finish .rb-tag { background: var(--p-yellow); color: var(--p-ink); }
.rb-note { min-height: 10mm; font-size: 9pt; }

#print { display: none; }

@media print {
  @page { size: A4 portrait; margin: 12mm 11mm 13mm; }
  html, body { background: #FFFFFF !important; }
  body > *:not(#print) { display: none !important; }
  #print { display: block !important; }
  #print .paper { min-width: 0; max-width: none; padding: 0; box-shadow: none; }
}

/* ---------- Practice ---------- */

.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; gap: 16px; }
.mode { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mode > p { color: var(--ink-2); }
.mode .field { width: 100%; margin-bottom: 10px; }
.mode-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; width: 100%; }
.mode-fields .field:first-child { grid-column: 1 / -1; }
.mode-polka { position: relative; overflow: hidden; padding-top: 46px; }
.mode-polka::before { content: ""; position: absolute; inset: 0 0 auto; height: 26px; border-bottom: 1px solid var(--line); background: #FFFFFF radial-gradient(circle, #D3242A 3.2px, transparent 3.7px) 0 0 / 13px 13px; }
.mode-zin { position: relative; overflow: hidden; padding-top: 46px; }
.mode-zin::before { content: ""; position: absolute; inset: 0 0 auto; height: 26px; border-bottom: 1px solid var(--line); background: var(--yellow) repeating-linear-gradient(transparent 0 5px, rgba(21, 23, 26, .28) 5px 6px); }
.mode-clm { position: relative; overflow: hidden; padding-top: 46px; }
.mode-clm::before { content: ""; position: absolute; inset: 0 0 auto; height: 26px; border-bottom: 1px solid var(--line); background: repeating-conic-gradient(#15171A 0 25%, #FFFFFF 0 50%) 0 0 / 13px 13px; }

/* ---------- Games ---------- */

.game { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-top: env(safe-area-inset-top, 0px); background: var(--bg); }
.g-top { display: flex; flex: none; align-items: center; gap: 10px; width: 100%; max-width: 760px; margin: 0 auto; padding: 10px 12px 8px; }
.g-title { display: grid; flex: 1; min-width: 0; }
.g-title b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: italic 800 21px/1.1 var(--font-display); text-transform: uppercase; }
.g-score { display: flex; flex: none; align-items: center; gap: 10px; }
.g-pts { white-space: nowrap; font-size: 16px; color: var(--ink-2); }
.g-pts b { display: inline-block; color: var(--ink); font: 800 24px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.g-pts.is-bump b { animation: bump .3s ease; }
.g-timer { min-width: 54px; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); text-align: center; font: 800 22px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.g-timer.is-low { background: var(--red); color: var(--on-red); }
.g-combo { padding: 6px 9px; border-radius: 8px; background: var(--yellow); color: var(--on-yellow); white-space: nowrap; font: italic 800 16px/1 var(--font-display); text-transform: uppercase; }
.g-progress { flex: none; width: calc(100% - 32px); max-width: 728px; height: 10px; margin: 0 auto; overflow: hidden; border-radius: 5px; background: var(--surface-2); }
.g-progress i { display: block; height: 100%; border-radius: 5px; background: var(--yellow); transition: width .35s cubic-bezier(.3, .7, .3, 1); }
.g-body { display: flex; flex: 1; flex-direction: column; gap: 18px; width: 100%; max-width: 640px; margin: 0 auto; padding: clamp(18px, 6vh, 64px) 16px 28px; }
.g-body > .speak { align-self: center; }
/* A new step comes in with a small move, so a tap is answered at once. */
.g-body > :not(.g-dock) { animation: step-in .2s ease both; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }
/* The bar at the bottom: "Verder", "Volgende", right or wrong on a card you turned. It is always there, also
   when what is above it is longer than the screen. */
.g-dock { position: sticky; bottom: 0; z-index: 3; flex-wrap: nowrap; margin: auto -16px -28px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); animation: dock-in .2s ease both; }
.g-dock .btn { flex: 1 1 0; min-width: 0; max-width: 440px; }
@keyframes dock-in { from { opacity: 0; transform: translateY(100%); } }
.g-card { position: relative; display: grid; justify-items: center; gap: 8px; padding: 28px 22px 26px; border: 0; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-up); color: var(--ink); text-align: center; }
.g-eyebrow { margin: 0; color: var(--ink-2); text-align: center; font: 700 14px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
/* A whole question instead of a word: about half the size of the big word, never smaller than normal text. */
/* The sentence from your book that a question is based on. */
.g-source { justify-self: stretch; text-align: left; }
.g-source .g-eyebrow { margin-bottom: 4px; text-align: left; }
.g-source .g-ex-fr { font-size: 18px; font-style: italic; color: var(--ink-2); }
.g-src { display: block; margin-top: 10px; font-size: 17px; font-style: italic; color: var(--ink-2); }
.fb-src { display: block; margin-top: 6px; font-size: 16px; font-style: italic; color: var(--ink-2); }
/* The third way in on the start page: questions from photos of your book. A slimmer row under the two big ones. */
.way-ask { width: 100%; min-height: 60px; margin-top: 10px; }
.way-ask .way-icon { width: 38px; height: 38px; }
.way-ask .way-text b { font-size: 19px; }
.long-text { display: inline-block; font-size: max(.48em, 17px); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.pv-n.is-open { color: var(--amber); }
.g-word { overflow-wrap: anywhere; font: 700 clamp(36px, 9.5vw, 58px)/1.1 var(--font-body); }
.g-word.is-nl { font-weight: 600; }
.g-trans { font-size: 26px; color: var(--ink-2); }
.g-meta { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
.g-tip { margin: 0; color: var(--ink-2); text-align: center; font-size: 17px; }
.g-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.g-big { margin: 0; text-align: center; font: italic 800 clamp(38px, 8vw, 64px)/.95 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.g-divider p { margin: 0; color: var(--ink-2); }
.g-q { margin: 0; color: var(--ink-2); text-align: center; font: 500 19px/1.35 var(--font-body); }
.g-q em, .g-q.is-retry { font-style: normal; color: var(--amber); }
.g-prompt { font: 700 clamp(34px, 9vw, 54px)/1.1 var(--font-body); }
.g-prompt.is-nl { font-weight: 600; }
/* Play is always directly left of what it reads. A word is centred, with play left of it and the lightbulb
   right: three columns, so the word stays in the middle whichever of the two buttons is there. A sentence is
   left-aligned (.say-row), with play in the same spot. */
.g-prompt, .say-word, .flash-word { display: grid; grid-template-columns: 44px minmax(0, auto) 44px; align-items: start; justify-content: center; gap: 10px; text-align: center; }
/* The two icons sit on the first line of the word, also when the word runs on or has its gender under it. */
.g-prompt > .speak, .say-word > .speak, .flash-word > .speak, .g-prompt > .hook-icon-btn { margin-top: calc(.55em - 22px); }
.g-prompt > .speak, .say-word > .speak, .flash-word > .speak { grid-column: 1; }
.g-prompt > span, .say-word > span, .flash-word > span { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.g-prompt > .hook-icon-btn { grid-column: 3; justify-self: center; }
.g-prompt .is-long, .g-word .is-long, .flash-word .is-long { font-size: .78em; }
.g-prompt .is-xlong, .g-word .is-xlong, .flash-word .is-xlong { font-size: .62em; }
.say-row { display: flex; align-items: flex-start; gap: 12px; justify-self: stretch; text-align: left; }
.say-text { display: grid; flex: 1; gap: 4px; min-width: 0; }
.say-row .speak { margin-top: -7px; }
.fb .say-row { margin-top: 8px; }
.fb .say-row .speak { background: var(--surface); }
.fb .say-row .fb-sen { flex: 1; min-width: 0; margin: 0; }
.g-new { gap: 6px; padding: 28px 20px 26px; }
.g-new .g-trans { margin: 0; }
.g-new .g-example { margin-top: 16px; }
.g-new .g-my-hook { margin-top: 16px; }

.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: 16px; background: var(--surface); text-align: left; font-size: 20px; font-weight: 600; line-height: 1.25; transition: border-color .12s, background-color .12s, transform .08s; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .opt:hover:not(:disabled) { border-color: var(--ink); } }
.opt:active:not(:disabled) { transform: scale(.98); }
.opt:disabled { cursor: default; color: var(--ink); }
.opt kbd { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--surface-2); color: var(--ink-2); font: 700 15px/1 var(--font-display); }
.opt span { min-width: 0; overflow-wrap: anywhere; }
/* A new question lands under the pointer that just pressed "Volgende": until the pointer moves, what is under
   it must not light up as if it were chosen. */
.game.no-hover .opt:hover:not(:disabled), .game.no-hover .m-tile:hover:not(:disabled) { border-color: var(--line-2); }
.game.no-hover .tok:hover { background: none; }
.opt.is-right { border-color: var(--green); background: var(--green-bg); box-shadow: inset 0 0 0 1px var(--green); }
.opt.is-right kbd { background: var(--green); color: var(--on-green); }
.opt.is-wrong { border-color: var(--red); background: var(--red-bg); box-shadow: inset 0 0 0 1px var(--red); animation: shake .32s; }
/* A first guess at a new word that missed: not red, it is not a mistake. */
.opt.is-miss { border-style: dashed; color: var(--ink-2); }
@media (max-width: 540px) { .opts { grid-template-columns: minmax(0, 1fr); } }
@media (hover: none) { .opt kbd { display: none; } }

.g-feedback { min-height: 0; scroll-margin-bottom: 110px; }
.fb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 16px; border-radius: 16px; animation: pop .22s ease; }
.fb-ok { background: var(--green-bg); }
.fb-bad { background: var(--red-bg); }
.fb-almost { background: var(--amber-bg); }
.fb-new { background: var(--surface-2); }
.fb-ex { font: italic 800 26px/1 var(--font-display); text-transform: uppercase; }
.fb-ok .fb-ex { color: var(--green); }
.fb-bad .fb-ex { color: var(--red); }
.fb-almost .fb-ex { color: var(--amber); }
.fb-gloss { font-size: 16px; color: var(--ink-2); }
.fb-detail { flex-basis: 100%; font-size: 20px; overflow-wrap: anywhere; }
/* After a mistake the feedback carries what helps you remember: your own mnemonic, and three ways to make one. */
.fb-mem { display: grid; flex-basis: 100%; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(128, 128, 128, .28); }
.fb-mem-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fb-mem-lab { grid-column: 1 / -1; color: var(--ink); font-size: 17px; font-weight: 600; }
/* A mistake is the moment to make a word stick, so here the three ways ask for attention: they hop in one after
   the other, and the first one waves a few times. (On a card the way into the memory helper stays quiet.) */
.fb-mem-btn { animation: mem-hop .5s cubic-bezier(.3, 1.7, .5, 1) both; }
.fb-mem-btn:nth-of-type(1) { animation-delay: .35s; }
.fb-mem-btn:nth-of-type(2) { animation-delay: .47s; }
.fb-mem-btn:nth-of-type(3) { animation-delay: .59s; }
@keyframes mem-hop { 0% { opacity: 0; transform: translateY(14px) scale(.7); } 60% { opacity: 1; transform: translateY(-4px) scale(1.06); } 100% { transform: none; } }
.fb-mem-btn:nth-of-type(1) svg { transform-origin: 50% 60%; animation: mem-wave 2.6s ease-in-out 1.2s 3; }
@keyframes mem-wave { 0%, 30%, 100% { transform: none; } 6% { transform: rotate(-18deg) scale(1.25); } 12% { transform: rotate(14deg) scale(1.25); } 18% { transform: rotate(-10deg) scale(1.1); } 24% { transform: rotate(6deg); } }
.fb-mem-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 16px/1 var(--font-body); -webkit-tap-highlight-color: transparent; }
.fb-mem-btn svg { width: 17px; height: 17px; flex: none; color: var(--ink-2); }
.fb-mem-btn:active { transform: scale(.97); }
@media (hover: hover) { .fb-mem-btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }

.match { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.m-col { display: grid; align-content: start; gap: 10px; }
.m-tile { min-height: 64px; padding: 10px 12px; overflow-wrap: anywhere; border: 1.5px solid var(--line-2); border-radius: 16px; background: var(--surface); font-size: 19px; font-weight: 600; line-height: 1.2; transition: background-color .15s, border-color .15s, opacity .3s, transform .08s; -webkit-tap-highlight-color: transparent; }
.m-tile.is-fr { font-weight: 700; }
.m-tile:active:not(:disabled) { transform: scale(.97); }
@media (hover: hover) { .m-tile:hover:not(:disabled) { border-color: var(--ink); } }
.m-tile.is-sel { border-color: var(--on-yellow); background: var(--yellow); color: var(--on-yellow); }
.m-tile.is-done { border-color: var(--green); background: var(--green-bg); opacity: .45; cursor: default; }
.m-tile.is-nope { border-color: var(--red); animation: shake .32s; }

.type-form { display: flex; gap: 10px; }
.type-in { flex: 1; min-width: 0; min-height: 60px; padding: 10px 16px; border: 1.5px solid var(--line-2); border-radius: 16px; background: var(--surface); color: var(--ink); font-size: 22px; }
.type-in:focus { border-color: var(--ink); outline: 0; box-shadow: 0 0 0 3px rgba(128, 128, 128, .22); }
.type-in:disabled { opacity: .7; }
.type-form .btn { min-height: 60px; border-radius: 16px; }
.accents { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.acc { width: 46px; height: 46px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); font-size: 21px; }
@media (hover: hover) { .acc:hover { border-color: var(--ink); } }

/* Sentences: find the word, fill the gap */
.g-sentence { text-align: center; overflow-wrap: anywhere; font: 600 clamp(22px, 5vw, 30px)/1.75 var(--font-body); }
.g-sentence mark, .g-ex-fr mark, .fb-sen mark { padding: 0 .12em; border-radius: 6px; background: var(--yellow); color: var(--on-yellow); }
.tok { display: inline; margin: 0; padding: .04em .14em; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .tok:hover { background: var(--surface-2); } }
.tok-miss { border-radius: 6px; background: var(--red-bg); box-shadow: inset 0 -3px 0 var(--red); }
.g-find { padding: 1px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink); letter-spacing: 0; text-transform: none; font: 700 19px/1.4 var(--font-body); }
.gap { display: inline-block; min-width: 3ch; padding: 0 .15em; border-bottom: 3px solid var(--ink); color: var(--ink-2); letter-spacing: .12em; }
.g-sen-nl { margin: 0; text-align: center; font-size: 19px; color: var(--ink-2); }
.fb-sen { display: inline-block; margin-top: 4px; }
.g-example { margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.g-ex-fr { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.35; }
.g-ex-nl { margin: 0; font-size: 17px; color: var(--ink-2); }

.g-flip { width: 100%; min-height: 300px; align-content: center; font: inherit; -webkit-tap-highlight-color: transparent; }
.g-back { display: none; }
.g-flip.is-flipped .g-back { display: block; animation: back-in .3s both; }
.g-flip.is-flipped .g-fliphint { display: none; }
.g-flip.is-flipped { animation: turn .3s ease; }
@keyframes turn { 50% { transform: perspective(900px) rotateX(86deg); } }
@keyframes back-in { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
.g-fliphint { margin-top: 10px; color: var(--ink-2); font: 500 17px/1.2 var(--font-body); }

.g-finish { align-items: center; text-align: center; }
.g-finish .g-dock { align-self: stretch; justify-content: center; }
.fin-sub { max-width: 46ch; margin: 0; font-size: 19px; color: var(--ink-2); }
.fin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.fin-stats div { display: grid; padding: 12px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fin-stats b { font: 800 30px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.fin-stats span { font-size: 15px; color: var(--ink-2); }
.fin-jersey { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); text-align: left; animation: pop .4s ease; }
.fin-jersey .jersey { width: 56px; height: 56px; }
.fin-jersey b { display: block; font: italic 800 20px/1.1 var(--font-display); text-transform: uppercase; }
.fin-jersey span { font-size: 16px; color: var(--ink-2); }
.fin-wrong { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; }
.fin-wrong .g-eyebrow { margin-bottom: 6px; text-align: left; }
.fin-wrong ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fin-wrong li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.fin-wrong li span { color: var(--ink-2); }
@media (max-width: 480px) { .fin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bump { 40% { color: var(--green); transform: scale(1.25); } }

/* ---------- Modal, toast, confetti ---------- */

/* The box is never taller than the part of the screen you can see (dvh: without the address bar), only its
   body scrolls, and the title with the close button stays at the top. */
.modal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
  height: 100vh; height: 100dvh; overscroll-behavior: contain; background: rgba(10, 12, 14, .55);
}
.modal-box {
  display: flex; flex-direction: column; width: 100%; max-width: 460px; max-height: 100%; min-height: 0; overflow: hidden;
  border-radius: 22px; background: var(--surface); box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  animation: pop .18s ease;
}
.modal-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 10px 10px 20px; }
.modal-head .icon-btn { flex: none; min-width: 44px; min-height: 44px; }
.modal-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 20px 22px; }
.modal-head .h3 { margin: 0; }
.modal-body > p { margin: 0 0 10px; }
.sync-form { margin-top: 12px; }
.sync-msg { min-height: 20px; font-size: 16px; color: var(--ink-2); }
.sync-msg.is-bad { color: var(--red); }
.sync-msg:empty { display: none; }
/* The first-letter hint under the answer box. */
.g-hint { margin: 12px 0 0; text-align: center; color: var(--ink); font: 600 24px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; overflow-wrap: anywhere; }
#g-dunno { gap: 10px; }
/* "New here, or a typing mistake?": a welcome, not an error. */
.sync-new { display: grid; gap: 10px; padding: 16px; border: 2px solid var(--ink); border-radius: 14px; background: var(--brand); color: var(--on-brand); }
.sync-new p { margin: 0; }
.sync-new-hi { font: italic 800 26px/1 var(--font-display); text-transform: uppercase; }
.sync-new .btn { border-color: var(--on-brand); }
.sync-new .btn-primary { background: var(--on-brand); color: var(--brand); }
.sync-new .btn:not(.btn-primary) { background: transparent; color: var(--on-brand); }
.sync-state { font-weight: 600; }
.sync-ok { color: var(--green); }
.sync-error, .sync-offline { color: var(--red); }

.toast {
  position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 50%; z-index: 70;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; max-width: calc(100% - 32px); padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: #15171A; color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translate(-50%, calc(100% + 40px));
  transition: transform .28s ease, opacity .28s ease, visibility 0s linear .28s;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: transform .28s ease, opacity .28s ease; }
.toast b { color: #FFD31A; font: italic 800 20px/1 var(--font-display); text-transform: uppercase; }
.toast span { font-size: 17px; }
#confetti { position: fixed; inset: 0; z-index: 80; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Geheugenhulp & Ezelsbruggetjes ---------- */

/* The way into the memory helper is the quietest thing on a card: the word, its meaning and its sentence come
   first. At the finish, next to a word you got wrong, it is a pill. */
.btn-hook { min-height: 44px; padding: 8px 10px; border: 0; background: none; color: var(--ink-2); font: 500 16px/1 var(--font-body); letter-spacing: 0; text-transform: none; text-decoration: none; }
.btn-hook svg { width: 16px; height: 16px; }
@media (hover: hover) { .btn-hook:hover:not(:disabled) { background: none; color: var(--ink); } }
/* Build the sentence: what it means (a sentence, so left-aligned), the line you fill, and the loose words. The
   word you are learning is the yellow one. */
.bz-nl { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.35; text-align: left; }
.bz-line { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 8px; min-height: 124px; padding: 12px; border-radius: 16px; background: var(--surface-2); transition: background-color .15s ease; }
.bz-line.is-ok { background: var(--green-bg); box-shadow: inset 0 0 0 2px var(--green); }
.bz-line.is-bad { animation: shake .32s; }
.bz-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bz-tile { min-height: 46px; padding: 8px 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); font: 600 19px/1.2 var(--font-body); transition: transform .08s ease; -webkit-tap-highlight-color: transparent; }
.bz-tile:active { transform: scale(.94); }
.bz-line .bz-tile { animation: zb-in .2s cubic-bezier(.3, 1.4, .5, 1); }
.bz-tile.is-target { border-color: transparent; background: var(--yellow); color: var(--on-yellow); }
.bz-tile.is-gone { display: inline-flex; align-items: center; visibility: hidden; }
.bz-slot { position: relative; flex: 1 1 54px; max-width: 120px; min-width: 54px; height: 46px; border-bottom: 3px solid var(--line-2); }
.bz-slot.is-target { border-bottom-color: var(--yellow); }
.bz-slot.is-target::before { content: ""; position: absolute; inset: 0; border-radius: 8px 8px 0 0; background: var(--yellow); opacity: .32; }
.bz-tile.is-off { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.bz-end { align-self: flex-end; padding-bottom: 6px; font: 700 22px/1 var(--font-body); }
/* The memory step in a game: the word, one line that says what to do with it, and the thing itself. */
.mem-head { display: grid; justify-items: center; gap: 4px; text-align: center; }
.mem-head b { overflow-wrap: anywhere; font: 700 clamp(30px, 8vw, 44px)/1.1 var(--font-body); }
.mem-head span { color: var(--ink-2); font-size: 22px; }
.mem-ico { display: grid; place-items: center; width: 96px; height: 96px; margin: 6px auto; border-radius: 50%; background: var(--amber-bg); color: var(--amber); animation: mem-hop .5s cubic-bezier(.3, 1.7, .5, 1) .15s both; }
.mem-ico svg { width: 44px; height: 44px; animation: mem-wave 2.6s ease-in-out .9s 2; }
.mem-hook { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
.mem-hook svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--amber); }
.mem-skip { min-height: 44px; color: var(--ink-2); font-size: 16px; font-weight: 500; }
/* After a missed guess the card of the word puts the memory helper forward, the way the logo puts its first
   word forward: a slanted block in the colour of the list behind the words. It is swiped in like a highlighter,
   and the lightbulb waves. */
.is-nudge .btn-hook { position: relative; isolation: isolate; padding: 9px 18px 8px; border-radius: 0; background: none; color: var(--on-yellow); font: italic 800 20px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; animation: mark-text .3s ease-out .5s both; }
.is-nudge .btn-hook::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yellow); transform: skewX(-12deg); transform-origin: 0 50%; animation: mark-in .3s ease-out .5s both; }
@keyframes mark-in { from { transform: skewX(-12deg) scaleX(0); } }
@keyframes mark-text { from { color: var(--ink-2); } }
.is-nudge .btn-hook svg { width: 18px; height: 18px; color: inherit; transform-origin: 50% 60%; animation: mem-wave 2.6s ease-in-out 1.2s 3; }
@media (hover: hover) { .is-nudge .btn-hook:hover:not(:disabled) { background: none; color: var(--on-yellow); filter: brightness(.96); } }
.is-missed .g-my-hook { animation: mem-hop .5s cubic-bezier(.3, 1.7, .5, 1) .45s both; }
.fin-wrong .btn { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 600 16px/1 var(--font-body); letter-spacing: 0; text-transform: none; text-decoration: none; }
.fin-wrong .btn svg { width: 17px; height: 17px; color: var(--ink-2); }

.hook-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; border: 0; background: transparent; color: var(--ink-2);
  cursor: pointer; vertical-align: middle; transition: background-color .15s ease, color .15s ease;
}
.hook-icon-btn svg.lucide { width: 22px; height: 22px; }
@media (hover: hover) { .hook-icon-btn:hover { background: var(--surface-2); color: var(--ink); } }
.hook-icon-btn.has-hook { color: var(--amber); }

.g-my-hook { display: flex; align-items: flex-start; gap: 10px; justify-self: stretch; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--amber-bg); color: var(--ink); text-align: left; font: 600 18px/1.35 var(--font-body); -webkit-tap-highlight-color: transparent; }
.g-my-hook svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--amber); }

.fb-hook { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; text-align: left; }
.fb-hook svg.lucide { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--ink-2); }

.fin-w-col { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.fin-w-hook { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; color: #8A6500; font-style: italic; }
.fin-w-hook svg.lucide { width: 12px; height: 12px; flex-shrink: 0; }
.fin-routeboek-tip {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px;
  border-radius: 14px; background: var(--surface-2); text-align: left;
}
.fin-rb-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--ink); flex-shrink: 0; }
.fin-rb-icon svg.lucide { width: 20px; height: 20px; }
.fin-rb-text { display: flex; flex-direction: column; font-size: 17px; }
.fin-rb-text span { color: var(--ink-2); font-size: 16px; }

/* The memory helper: the word, then three ways to make it stick. You choose one; it opens on its own. */
.memory-helper { display: grid; gap: 16px; }
.mh-word-header { text-align: center; }
.mh-fr { font-size: 30px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.mh-nl { margin-top: 4px; color: var(--ink-2); font-size: 20px; }
.mh-menu { display: grid; gap: 10px; }
.mh-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: left; transition: border-color .12s ease, transform .08s ease; -webkit-tap-highlight-color: transparent; }
.mh-opt:active { transform: scale(.985); }
@media (hover: hover) { .mh-opt:hover { border-color: var(--ink); } }
.mh-opt-icon { display: grid; flex: none; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); }
.mh-opt-icon svg { width: 22px; height: 22px; }
.mh-opt-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.mh-opt-text b { font: 700 19px/1.2 var(--font-body); }
.mh-opt-text small { display: -webkit-box; overflow: hidden; color: var(--ink-2); font-size: 16px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.mh-opt > svg { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
.mh-opt.is-done > svg { color: var(--green); }
.mh-panel { display: none; gap: 14px; }
.mh-panel.is-active { display: grid; }
.mh-form { display: grid; gap: 12px; }
.mh-q { font-size: 19px; font-weight: 600; line-height: 1.3; }
.mh-form textarea { min-height: 92px; }
@keyframes zb-in { from { opacity: 0; transform: translateY(-12px) rotate(-5deg); } }
.mh-tip { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--amber-bg); color: var(--ink); text-align: left; font-size: 17px; line-height: 1.35; }
.mh-tip svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--amber); }
.mh-intro { margin: 0; color: var(--ink-2); font-size: 18px; line-height: 1.45; }
.mh-panel > .btn { width: 100%; }
.mh-panel .btn.is-done { border-color: var(--green); background: var(--green-bg); color: var(--green-text); text-decoration: none; }
.mh-back { display: inline-flex; align-items: center; justify-self: center; gap: 4px; min-height: 44px; color: var(--ink-2); font-size: 17px; font-weight: 500; }
.mh-back svg { width: 16px; height: 16px; }

.g-tip svg.lucide { width: 17px; height: 17px; vertical-align: -3px; margin-right: 4px; }

/* Streak Badge in Header */
.streak-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 4px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.streak-badge svg.lucide {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
  color: #F97316;
  fill: #F97316;
  transition: transform .2s ease;
}
@media (hover: hover) {
  .streak-badge:hover { border-color: var(--line-2); }
}
.streak-badge.is-active {
  background: #FFF7ED;
  border-color: #FDBA74;
  color: #C2410C;
}
.streak-badge.is-active svg.lucide {
  color: #EA580C;
  fill: #EA580C;
}
.streak-badge.is-pending {
  border-color: #FED7AA;
  color: var(--ink);
}
.streak-badge.is-zero { color: var(--ink-2); }
.streak-badge.is-zero svg.lucide {
  color: var(--ink-2);
  fill: transparent;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .streak-badge.is-active {
    background: #431407;
    border-color: #EA580C;
    color: #FDBA74;
  }
  :root:not([data-theme="light"]) .streak-badge.is-active svg.lucide {
    color: #FB923C;
    fill: #FB923C;
  }
  :root:not([data-theme="light"]) .streak-badge.is-pending {
    border-color: #9A3412;
    background: var(--surface);
    color: var(--ink);
  }
  :root:not([data-theme="light"]) .streak-badge.is-zero {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink-2);
  }
  :root:not([data-theme="light"]) .streak-badge.is-zero svg.lucide {
    color: var(--ink-2);
    fill: transparent;
  }
}
:root[data-theme="dark"] .streak-badge.is-active {
  background: #431407;
  border-color: #EA580C;
  color: #FDBA74;
}
:root[data-theme="dark"] .streak-badge.is-active svg.lucide {
  color: #FB923C;
  fill: #FB923C;
}
:root[data-theme="dark"] .streak-badge.is-pending {
  border-color: #9A3412;
  background: var(--surface);
  color: var(--ink);
}
:root[data-theme="dark"] .streak-badge.is-zero {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink-2);
}
:root[data-theme="dark"] .streak-badge.is-zero svg.lucide {
  color: var(--ink-2);
  fill: transparent;
}

/* The streak box: the number, how today stands, and the button to your practice. */
.streak-modal { display: grid; justify-items: center; gap: 14px; text-align: center; }
.sm-hero { display: grid; justify-items: center; gap: 2px; padding-top: 2px; }
.sm-hero svg.lucide { width: 44px; height: 44px; color: #EA580C; fill: #EA580C; }
.sm-hero.is-zero svg.lucide { color: var(--ink-2); fill: none; }
.sm-count { font: 800 68px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.sm-label { color: var(--ink-2); font-size: 18px; }
.sm-msg { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 0; font-size: 18px; line-height: 1.4; }
.sm-msg.sm-done { color: var(--green-text); }
.sm-msg svg.lucide { flex: none; width: 20px; height: 20px; margin-top: 3px; stroke-width: 2.5; }
.sm-go { width: 100%; }
.sm-list, .sm-record { margin: -6px 0 0; color: var(--ink-2); font-size: 16px; }
.streak-modal .menu { width: 100%; margin-top: 6px; }

/* Finish Screen Streak Banner */
.fin-streak-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  margin: 8px auto;
  border-radius: 999px;
  background: #FFF7ED;
  border: 1.5px solid #FDBA74;
  color: #9A3412;
  font-size: 16px;
}
.fin-streak-badge svg.lucide {
  width: 18px;
  height: 18px;
  color: #EA580C;
  fill: #EA580C;
}

/* Unified Settings Modal */
.set-theme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.set-theme .chip-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding-inline: 6px; }
.set-theme svg { width: 16px; height: 16px; flex: none; }
.settings-modal { display: grid; gap: 24px; text-align: left; }
.set-section { display: grid; gap: 14px; }
.set-sec-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--ink-2); font: 700 15px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.set-sec-head svg.lucide { width: 18px; height: 18px; flex-shrink: 0; }
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.set-label { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.set-sub { margin-top: 2px; color: var(--ink-2); font-size: 16px; line-height: 1.4; }
/* What shows once a switch is on (the reminder): a few rows, each a name on the left and its control on the right. */
.set-subpanel { display: grid; gap: 14px; }
.set-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set-time { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; }
.set-time svg { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
.set-time span { flex: 1; min-width: 0; }
.set-time-input { flex: none; min-height: 44px; padding: 6px 10px; border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 600; }
.set-test { justify-self: start; min-height: 44px; color: var(--ink-2); font-size: 17px; font-weight: 500; }

.set-with-icon { display: flex; align-items: center; gap: 8px; }
.set-with-icon svg { flex: none; width: 18px; height: 18px; color: var(--ink-2); }
.set-opt { color: var(--ink-2); font-size: 15px; font-weight: 400; }
.set-key { display: grid; gap: 8px; padding-top: 4px; }
.set-key-row { display: flex; align-items: center; gap: 6px; }
.set-key-in { flex: 1; font: 16px ui-monospace, SFMono-Regular, Menlo, monospace; }
.set-ext { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.set-ext svg { width: 15px; height: 15px; }

/* Switch */
.switch { position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
  flex-shrink: 0; }
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider { position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--line-2);
  transition: .2s;
  border-radius: 32px; }
.slider:before { position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .2s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.switch input:checked + .slider { background-color: var(--green); }
.switch input:checked + .slider:before {
  transform: translateX(20px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Word Tour: header ---------- */

.no-lists .streak-badge, .is-home .nav { display: none; }
/* Settings are about your lists, so the gear only shows once you have one (html.has-lists is set before the first paint). */
html:not(.has-lists) #settings-btn { display: none; }
body:not(.is-home) .brand-y { background: var(--yellow); color: var(--on-yellow); }
/* The name of a list in the logo: as long as there is room, then smaller letters, then "…". */
#brand-word { max-width: min(34vw, 380px); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.brand.is-long { font-size: 21px; }
@media (max-width: 640px) {
  #brand-word { max-width: calc(100vw - 236px); }
  .brand.is-long { font-size: 20px; }
}
.chip:empty, .g-meta:empty, .mh-meta:empty { display: none; }

textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: 400 18px/1.45 var(--font-body); resize: vertical;
}
textarea:focus { border-color: var(--ink); outline: none; }

/* ---------- Word Tour: start page (a new list in any language) ---------- */

.start { display: grid; gap: 18px; max-width: 640px; padding-top: 22px; }
.start-title { margin: 0; font: italic 800 clamp(38px, 9vw, 64px)/.98 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.start-title span { display: inline-block; padding: 0 .16em; background: var(--yellow); color: var(--on-yellow); transform: skewX(-8deg); }

.langs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lang {
  display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 12px 4px 10px;
  border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--ink);
  transition: border-color .12s, background-color .12s, transform .08s; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .lang:hover { border-color: var(--ink); } }
.lang:active { transform: scale(.97); }
.lang.is-on { border-color: transparent; background: var(--yellow); color: var(--on-yellow); }
.lang-flag { display: flex; align-items: center; justify-content: center; height: 32px; font-size: 30px; line-height: 1.1; margin-bottom: 2px; }
.lang-flag .flag-icon { width: 36px; height: 27px; border-radius: 5px; }
.lang-name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 15px/1.1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.lang-custom { margin: 0; }

.ways { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
.way {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 80px; padding: 12px 14px;
  border: 1.5px solid var(--line-2); border-radius: 16px; background: var(--surface); color: var(--ink);
  text-align: left; cursor: pointer; transition: transform .08s ease, border-color .12s ease; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .way:hover { border-color: var(--ink); } }
.way:active { transform: scale(.985); }
.way:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.way-photo { border-color: transparent; background: var(--ink); color: var(--bg); }
.way-icon { display: grid; flex: none; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); color: var(--ink); }
.way-photo .way-icon { background: var(--yellow); color: var(--on-yellow); }
.way-icon svg { width: 24px; height: 24px; }
.way-text { display: grid; gap: 2px; min-width: 0; }
.way-text b { font: 800 20px/1.05 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.way-text small { font-size: 15px; opacity: .78; }
.pro { position: absolute; top: -9px; right: 12px; padding: 3px 8px 2px; border-radius: 999px; background: var(--yellow); color: var(--on-yellow); font: italic 800 14px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 0 2px var(--bg); }
.way.is-busy { cursor: progress; }
.way.is-busy .way-icon { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.88); } }
@media (max-width: 460px) {
  .ways { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .way { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 12px; }
  .way-icon { width: 40px; height: 40px; }
  .way-text b { font-size: 19px; }
}

.paste { margin: 0; }
.paste textarea { min-height: 150px; font-size: 18px; }
.d-preview { min-height: 24px; }
.d-preview .help { margin: 0; }
.pv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pv-n { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 4px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font: 800 16px/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.pv-n.is-ok { background: var(--green-bg); color: var(--green-text); }
.pv-n svg { width: 15px; height: 15px; }
.pv-ex { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); font-size: 17px; }
.pv-ex b { color: var(--ink); }
.pv-bad { margin: 8px 0 0; color: var(--amber); font-size: 16px; }
.pv-bad i { color: var(--ink-2); }

.start-go { display: flex; flex-wrap: wrap; gap: 10px; }
.start-go input { flex: 1 1 200px; width: auto; min-height: 56px; font-size: 18px; }
.start-go .btn-big { flex: 1 1 160px; }
.start-go #d-year { flex: 0 1 130px; }
.start-back { margin: 0; text-align: center; }

/* ---------- Word Tour: home (your languages) ---------- */

.home { display: grid; gap: 18px; max-width: 640px; padding-top: 22px; }
/* "Nieuwe lijst" sits next to the title: in sight however many lists there are. */
.home-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.home-add { min-height: 44px; padding: 8px 16px 8px 12px; font-size: 16px; }
.lcards { display: grid; gap: 12px; }
/* A card per list: a tap opens it. Renaming, adding words and deleting are behind the one "more" button. */
.lcard {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow);
  transition: border-color .12s ease;
}
@media (hover: hover) { .lcard:hover { border-color: var(--line-2); } }
.lcard-main {
  display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 16px 4px 16px 16px;
  border: 0; border-radius: 18px; background: none; color: var(--ink); text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.lcard-main:focus-visible { outline-offset: -3px; }
.lcard-more { margin: 10px 8px 0 0; color: var(--ink-2); }
.lcard-flag { display: flex; flex: none; align-items: center; justify-content: center; margin-top: 2px; font-size: 34px; line-height: 1; }
.lcard-flag .flag-icon { width: 40px; height: 30px; border-radius: 6px; }
.lcard-text { display: grid; flex: 1; min-width: 0; }
.lcard-text b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 21px/1.25 var(--font-body); }
.lcard-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); font-size: 16px; }
.lcard-bar { height: 6px; margin: 12px 0 8px; overflow: hidden; border-radius: 3px; background: var(--surface-2); }
.lcard-bar i { display: block; height: 100%; border-radius: 3px; background: var(--race, var(--brand)); }
.lcard-status { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 16px; font-weight: 500; }
.lcard-status svg { flex: none; width: 16px; height: 16px; stroke-width: 2.6; }
.lcard-status.is-done { color: var(--green-text); }
.start-into { margin-top: 8px; }
/* The buttons that go with a page title sit together on the right. */
.view-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.sort-add { min-height: 40px; }
@media (max-width: 640px) {
  .view-tools { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  .view-tools .sort-add { padding-inline: 10px; }
  .view-tools .seg button { padding-inline: 10px; }
}
.list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.list-bar .eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; }
.wrap > .list-bar { margin-bottom: 4px; }
.lcard.is-armed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; border: 1.5px solid var(--red); background: var(--red-bg); box-shadow: none; }
.lcard.is-armed p { margin: 0; }

.d-preview:empty { display: none; }

/* ---------- Word Tour: AI switch, detected language, own sentences ---------- */

.ai-row { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface); cursor: pointer; }
.ai-row.is-on { border-style: solid; border-color: var(--ink); }
.ai-text { display: grid; flex: 1; min-width: 0; }
.ai-text b { font: 800 19px/1.1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.ai-text small { color: var(--ink-2); font-size: 15px; }
.pro.pro-inline { position: static; display: inline-block; margin-left: 4px; vertical-align: .12em; box-shadow: none; }
.way-photo.is-off { border-color: var(--line-2); background: var(--surface); color: var(--ink); }
.way-photo.is-off .way-icon { background: var(--surface-2); color: var(--ink-2); }
.way-photo.is-off .way-text { opacity: .7; }
.field-label { margin: 0 0 8px; color: var(--ink-2); font: 700 14px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.d-langs:empty { display: none; }
.pv-lang { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 4px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 700 16px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
@media (hover: hover) { .pv-lang:hover { border-color: var(--ink); } }
.pv-lang .flag-icon { width: 20px; height: 15px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.pv-lang u { color: var(--ink-2); font: 600 15px/1 var(--font-body); letter-spacing: 0; text-transform: none; text-underline-offset: 2px; }
.pv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; }
.pv-try { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pv-try a { color: var(--ink-2); }
.pv-sample { padding: 2px 4px; border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; transition: transform .1s; display: inline-flex; align-items: center; justify-content: center; }
.pv-sample .flag-icon { width: 24px; height: 18px; border-radius: 3px; }
@media (hover: hover) { .pv-sample:hover { transform: scale(1.15); } }
.g-ex-nl:empty { display: none; }

/* ---------- Word Tour: landing page (static in index.html, shown until you have a list) ---------- */

.has-lists:not(.show-info) .lp { display: none; }
.lp { --yellow: var(--brand); --on-yellow: var(--on-brand); }
#main { scroll-margin-top: 64px; }

/* The banner is Word Tour yellow in light and dark, so everything on it keeps the light colours. */
.lp-hero, .lp-end { background: var(--brand); color: var(--ink); --ink: #15171A; --ink-2: #3D4248; --surface: #FFFFFF; --edge: #15171A; --green: #0A8F49; --focus: #1F3FA8; }
.lp-hero { overflow: hidden; }
.lp-copy { max-width: 1080px; margin: 0 auto; padding: 40px 16px 0; }
.lp-title { margin: 0; font: italic 800 clamp(42px, 11.4vw, 88px)/.96 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.lp-title span { display: inline-block; margin-top: .08em; padding: 0 .16em; background: var(--ink); color: var(--brand); transform: skewX(-8deg); }
.lp-lede { margin: 18px 0 24px; font-size: 21px; font-weight: 500; line-height: 1.4; }
.lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

/* The banner picture: a big list, cut into a small piece a day. Signs along a road (day 1, day 2, ... the test)
   and a rider. The test sign counts what is still to learn, from 433 down to 0.
   --x is where a pole stands; its flag flies to the right. A flag turns green just after the rider passes
   the pole, so the lp-on-* and lp-count times belong to the --x positions. Without animation (or with reduced motion) it is a still:
   day 1 done, 425 to go. */
@property --lp-n { syntax: "<integer>"; inherits: false; initial-value: 433; }
.lp-stage { position: relative; max-width: 1080px; height: calc(var(--ground) + 20px + var(--rider) * .93 + var(--sign-h)); margin: 46px auto 0; --rider: 108px; --ground: 18px; --sign: 94px; --sign-h: 44px; }
.lp-road { position: absolute; left: 50%; bottom: var(--ground); width: 100vw; height: 12px; margin-left: -50vw; background: var(--ink); }
.lp-road::after { content: ""; position: absolute; inset: 5px 0 auto; height: 2px; background: repeating-linear-gradient(90deg, var(--brand) 0 16px, transparent 16px 32px); }
.lp-sign { position: absolute; left: var(--x); top: 0; width: var(--sign); }
.lp-day-1 { --x: 5%; }
.lp-day-2 { --x: 32%; }
.lp-test { --x: 73%; }
.lp-dots { position: absolute; left: 65%; top: calc(var(--sign-h) / 2 - 3px); width: 36px; height: 6px; margin-left: -18px; background: radial-gradient(circle, var(--ink) 2.6px, transparent 3.2px) 0 0 / 12px 6px; }
/* Flags on poles, not plates: square, with a notch, no border or shadow, so they never look like the button. */
.lp-post { position: absolute; left: 0; top: 0; width: 3px; height: calc(var(--sign-h) + var(--rider) * .93 + 8px); background: var(--ink); }
.lp-face, .lp-back { display: grid; position: relative; align-content: center; justify-items: center; gap: 4px; height: var(--sign-h); margin-left: 3px; padding-right: 7px; background: #FFFFFF; white-space: nowrap; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%); }
.lp-face small, .lp-back small { font: 700 10.5px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.lp-face b, .lp-back b { font: 800 17px/1 var(--font-display); letter-spacing: .01em; }
.lp-back { position: absolute; inset: 0; background: var(--green); color: #FFFFFF; opacity: 0; transform-origin: 0 50%; }
.lp-back small { opacity: .85; }
.lp-test .lp-face { background: var(--ink); color: var(--brand); }
.lp-count { --lp-n: 425; counter-reset: lp-n var(--lp-n); font-variant-numeric: tabular-nums; animation: lp-count 12s infinite; }
.lp-count::after { content: counter(lp-n); }
.lp-track { position: absolute; inset: auto 0 calc(var(--ground) + 9px); height: 0; transform: translateX(27%); animation: lp-ride 12s infinite; }
.lp-rider { position: absolute; left: calc(var(--rider) / -2); bottom: 0; width: var(--rider); animation: lp-fade 12s infinite; }
.lp-rider img { display: block; width: 100%; height: auto; transform-origin: 50% 96%; }
.lp-ride { animation: lp-out 12s infinite, lp-bob .42s ease-in-out infinite alternate; }
.lp-win { position: absolute; inset: 0; opacity: 0; animation: lp-win 12s infinite; }
.lp-day-1 .lp-back { opacity: 1; animation: lp-on-1 12s infinite; }
.lp-day-2 .lp-back { animation: lp-on-2 12s infinite; }
.lp-test .lp-back { animation: lp-on-t 12s infinite; }
@keyframes lp-ride { 0% { transform: translateX(-14%); animation-timing-function: linear; } 60% { transform: translateX(78.5%); animation-timing-function: ease-out; } 68%, 100% { transform: translateX(84.5%); } }
@keyframes lp-fade { 0% { opacity: 0; } 3%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes lp-out { 0%, 67.9% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes lp-win { 0%, 67.9% { opacity: 0; transform: none; } 68% { opacity: 1; transform: none; } 71% { opacity: 1; transform: translateY(-9px) rotate(-3deg); } 74% { opacity: 1; transform: none; } 77% { opacity: 1; transform: translateY(-5px); } 80%, 100% { opacity: 1; transform: none; } }
@keyframes lp-bob { to { transform: translateY(-2px) rotate(-1.2deg); } }
@keyframes lp-on-1 { 0%, 15.4% { opacity: 0; transform: scaleX(.3); } 17%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes lp-on-2 { 0%, 32.9% { opacity: 0; transform: scaleX(.3); } 34.5%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes lp-on-t { 0%, 67% { opacity: 0; transform: scaleX(.3); } 68.5% { opacity: 1; transform: scaleX(1.08); } 71%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes lp-count { 0%, 15.4% { --lp-n: 433; } 17%, 32.9% { --lp-n: 425; } 34.5%, 37% { --lp-n: 417; animation-timing-function: linear; } 66%, 72% { --lp-n: 0; } 76%, 100% { --lp-n: 433; } }
@media (min-width: 720px) {
  .lp-copy { padding-top: 48px; text-align: center; }
  .lp-lede { margin: 22px 0 28px; font-size: 23px; }
  .lp-cta { justify-content: center; }
  .lp-lede br { display: none; }
  .lp-stage { margin-top: 52px; --rider: 172px; --ground: 22px; --sign: 164px; --sign-h: 62px; }
  .lp-post { width: 4px; }
  .lp-face, .lp-back { gap: 6px; margin-left: 4px; padding-right: 12px; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); }
  .lp-face small, .lp-back small { font-size: 12px; }
  .lp-face b, .lp-back b { font-size: 24px; }
  .lp-dots { left: 60%; width: 54px; height: 8px; margin-left: -27px; top: calc(var(--sign-h) / 2 - 4px); background-size: 18px 8px; background-image: radial-gradient(circle, var(--ink) 3.4px, transparent 4px); }
}

/* On a first visit the start box gets more air, between the banner and the rest of the page. */
/* ... as a white card, the one place on the page where you do something. */
.no-lists .start { gap: 20px; width: min(640px, calc(100% - 32px)); margin-block: clamp(40px, 6vw, 72px); padding: 28px 22px 26px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow), 0 18px 44px rgba(20, 22, 26, .08); }
.no-lists .start > .h1 { margin-bottom: 6px; }

/* Below the start box: how it works, languages, what's in it, questions. */
/* Each section is a full-width band with its own background and a lot of air: page colour, white, ink, page
   colour, white, then the yellow closing band and the dark footer. The content stays in the 1080px column. */
.lp-sec { padding: clamp(56px, 8vw, 104px) max(16px, calc((100% - 1080px) / 2)); text-align: center; }
.lp-sec > .h2 { margin-bottom: 36px; font-size: clamp(32px, 5.4vw, 50px); }
.lp-sec > .h2 + .lp-intro { margin-top: -24px; }
.lp-white { background: var(--surface); }
/* The ink band cuts in at an angle, like the slanted blocks in the logo. */
.lp-ink { position: relative; z-index: 1; background: var(--ink); color: var(--bg); }
.lp-ink::before, .lp-ink::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(18px, 3.4vw, 46px); background: var(--ink); }
.lp-ink::before { bottom: calc(100% - 1px); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.lp-ink::after { top: calc(100% - 1px); clip-path: polygon(0 0, 100% 0, 0 100%); }
.lp-ink + .lp-sec { padding-top: clamp(84px, 11vw, 150px); }
.lp-steps { text-align: left; }
.lp-steps .step > p { margin: 0; font-size: 18px; }
.lp-white .step { border: 0; border-radius: 18px; background: var(--bg); box-shadow: none; }
.lp-white .lp-shot { background: var(--surface); }
.lp-intro { max-width: 46ch; margin: 0 auto 36px; color: var(--ink-2); font-size: 21px; }
.lp-shot { display: grid; align-content: center; gap: 10px; width: 100%; min-height: 136px; margin-bottom: 18px; padding: 16px; border-radius: 10px; background: var(--bg); }
.lp-shot p { margin: 0; }
.lp-shot-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-paste { padding: 8px 11px; border: 2px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 15px; line-height: 1.45; }
.lp-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lp-week span { display: grid; justify-items: center; gap: 4px; padding: 8px 0 6px; border: 2px solid var(--on-yellow); border-radius: 9px; background: var(--yellow); color: var(--on-yellow); }
.lp-week small { font: 700 12px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.lp-week b { display: grid; place-items: center; height: 22px; font: italic 800 22px/1 var(--font-display); }
.lp-week b svg { width: 18px; height: 18px; }
.lp-week .is-rep { border-color: var(--line); background: var(--surface); color: var(--ink); }
.lp-week .is-test { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.lp-ask { color: var(--ink-2); font: 700 13px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.lp-answer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 13px; border: 2px solid var(--green); border-radius: 10px; background: var(--green-bg); font-size: 19px; font-weight: 600; }
.lp-answer i { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: var(--on-green); font-style: normal; font-weight: 700; }
/* Why: what doesn't stick next to what does. Two panels, three short lines each. */
.lp-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 860px; margin: 0 auto; text-align: left; }
.lp-vs > div { padding: 22px 22px 20px; border-radius: 18px; }
.lp-vs h3 { margin: 0 0 14px; font: 800 20px/1.1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.lp-vs ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 19px; font-weight: 500; line-height: 1.3; }
.lp-vs li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.lp-vs li::before { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 15px; font-weight: 700; line-height: 1; }
.lp-vs-no { background: var(--bg); color: var(--ink-2); }
.lp-vs-no li::before { content: "✕"; background: var(--surface-2); color: var(--ink-2); }
.lp-vs-yes { background: var(--brand); color: var(--on-brand); box-shadow: 0 4px 0 var(--edge); }
.lp-vs-yes li::before { content: "✓"; background: var(--on-brand); color: var(--brand); }
@media (max-width: 620px) { .lp-vs { grid-template-columns: minmax(0, 1fr); } }
/* What you get: six tools, each with a small picture of the real thing. */
.lp-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.lp-tools li { padding: 14px 14px 16px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.lp-tools h3 { margin: 14px 0 4px; font: 800 20px/1.1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.lp-tools p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.35; }
.lp-demo { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 92px; padding: 10px; overflow: hidden; border-radius: 12px; background: var(--bg); color: var(--ink); }
.lp-d-in { padding: 7px 14px; border: 2px solid var(--ink); border-radius: 10px; font-size: 17px; font-weight: 600; }
.lp-d-keys { display: flex; gap: 5px; }
.lp-d-keys i { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 7px; font-style: normal; font-size: 14px; }
.lp-d-hint { font: 600 clamp(15px, 4.4vw, 21px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; white-space: nowrap; }
/* A word written by hand, on a scrap of ruled paper. */
.lp-d-note { padding: 9px 18px 5px; border-radius: 3px; background: #FFFFFF repeating-linear-gradient(transparent 0 25px, #C6D2EC 25px 26px); box-shadow: 0 1px 2px rgba(20, 22, 26, .18), 0 6px 14px rgba(20, 22, 26, .10); color: #1F3FA8; font: 700 30px/1.1 "Caveat", "Bradley Hand", "Segoe Print", cursive; white-space: nowrap; transform: rotate(-4deg); }
.lp-d-sen { font-size: 15px; font-weight: 600; text-align: center; }
.lp-d-sen mark { padding: 0 .15em; border-radius: 5px; background: var(--brand); color: var(--on-brand); }
/* A tricky word: wrong once, then right twice in a row. */
.lp-d-word { padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--surface); font-size: 16px; font-weight: 600; }
.lp-d-tries { display: flex; gap: 6px; }
.lp-d-tries i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 700; line-height: 1; }
.lp-d-tries .is-no { background: var(--red); color: var(--on-red); }
.lp-d-tries .is-yes { background: var(--green); color: var(--on-green); }
.lp-d-week { display: flex; gap: 5px; }
.lp-d-week { gap: 4px; }
.lp-d-week i { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 700; }
.lp-d-week .is-done { border-color: var(--green); background: var(--green); color: var(--on-green); }
@media (min-width: 720px) { .lp-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .lp-tools li { padding: 18px 18px 22px; } .lp-demo { min-height: 110px; } }
/* AI help: three things it adds, the first (sentences) the widest, then how to get a code. */
.lp-tools-3 li:first-child { grid-column: 1 / -1; }
@media (min-width: 720px) { .lp-tools-3 li:first-child { grid-column: auto; } }
.lp-d-ico svg { display: block; width: 30px; height: 30px; }
.lp-demo .pv-n { white-space: nowrap; }
.lp-beta { display: grid; justify-items: center; gap: 14px; max-width: 44ch; margin: 36px auto 0; }
.lp-beta p { margin: 0; font-size: 19px; line-height: 1.4; }
/* Who makes it: one line. */
.lp-maker { padding-block: clamp(44px, 6vw, 72px); }
.lp-quote { max-width: 26ch; margin: 0 auto; font: italic 800 clamp(26px, 4.4vw, 40px)/1.05 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.lp-maker .lp-note { margin-top: 16px; opacity: 1; }
.lp-maker a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
/* Languages: a flag and a name, in a grid. No borders or backgrounds: nothing here can be tapped. */
.lp-flags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 8px; max-width: 520px; margin: 0 auto; padding: 0; list-style: none; }
.lp-flags li { display: grid; justify-items: center; gap: 8px; text-align: center; }
.lp-flags .flag-icon { display: block; width: 56px; height: 42px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(21, 23, 26, .12), var(--shadow); }
.lp-flags b { font: 700 16px/1.1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.lp-note { margin: 32px 0 0; opacity: .72; }
.lp-ink .flag-icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
@media (min-width: 720px) {
  .lp-flags { grid-template-columns: repeat(9, minmax(0, 1fr)); max-width: 940px; }
}
.lp-faq details { max-width: 760px; margin-inline: auto; text-align: left; border-bottom: 1px solid var(--line); }
.lp-faq details:first-of-type { border-top: 1px solid var(--line); }
.lp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px 13px; cursor: pointer; list-style: none; font: 800 20px/1.15 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; flex: none; width: 20px; text-align: center; font: 800 26px/1 var(--font-display); }
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq details p { margin: 0 2px 16px; color: var(--ink-2); }
.lp-end::before { content: ""; display: block; height: 14px; background: conic-gradient(#15171A 25%, #FFFFFF 0 50%, #15171A 0 75%, #FFFFFF 0) 0 0 / 14px 14px; }
.lp-end-in { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, auto); align-items: center; justify-content: center; gap: 12px 44px; max-width: 1080px; margin: 0 auto; padding: 56px 16px 64px; }
.lp-end img { display: block; width: 100%; height: auto; }
.lp-end p { margin: 10px 0 22px; font-size: 20px; font-weight: 500; }
/* The footer is dark in light and dark mode: it closes the page and carries who, what and privacy. */
.lp-foot { background: #15171A; color: #C9CDC6; font-size: 17px; }
.lp-foot-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px 40px; max-width: 1080px; margin: 0 auto; padding: 48px 16px 34px; }
.lp-mark { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; color: #FFFFFF; font: italic 800 24px/1 var(--font-display); text-transform: uppercase; }
.lp-mark .brand-y { background: var(--brand); color: var(--on-brand); }
.lp-foot-about p:last-child { max-width: 34ch; margin: 0; }
.lp-foot-col { display: grid; align-content: start; justify-items: start; gap: 10px; }
.lp-foot-col h2 { margin: 0 0 4px; color: #FFFFFF; font: 700 14px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.lp-foot a { color: inherit; text-decoration: none; }
@media (hover: hover) { .lp-foot a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } }
.lp-foot :focus-visible { outline-color: var(--brand); }
.lp-foot-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; max-width: 1080px; margin: 0 auto; padding: 20px 16px; border-top: 1px solid #33383D; list-style: none; color: #FFFFFF; font: 700 15px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.lp-foot-trust li::before { content: "✓"; margin-right: 6px; color: var(--brand); }
.lp-foot-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; max-width: 1080px; margin: 0 auto; padding: 0 16px calc(30px + env(safe-area-inset-bottom, 0px)); color: #8B9198; font-size: 15px; }
.lp-foot-legal p { margin: 0; }
/* The language switch: at the top on a first visit (where the gear comes later), and in the footer. */
.ui-switch { display: inline-flex; flex: none; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.ui-switch button { padding: 9px 12px 8px; border: 0; background: none; color: var(--ink-2); font: 700 14px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
@media (hover: hover) { .ui-switch button:hover { color: var(--ink); } }
.ui-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.has-lists .top .ui-switch, .has-lists .top-mine { display: none; }
.top-mine { min-height: 34px; border-width: 1.5px; white-space: nowrap; }
.lp-foot .ui-switch { border-color: #4A5057; background: none; }
.lp-foot .ui-switch button { color: #C9CDC6; }
@media (hover: hover) { .lp-foot .ui-switch button:hover { color: #FFFFFF; } }
.lp-foot .ui-switch button[aria-pressed="true"] { background: var(--brand); color: #15171A; }
.lp-sec > .h2 { scroll-margin-top: 76px; }
/* In another language the fixed texts stay out of sight until they are swapped (index.html, tekst.js). */
.ui-wait .top, .ui-wait .lp, .ui-wait .doc { visibility: hidden; }
@media (max-width: 620px) {
  .lp-foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 36px; }
  .lp-foot-about { grid-column: 1 / -1; }
}

/* A plain text page (privacy). */
.doc { max-width: 720px; margin: 0 auto; padding: 36px 16px 72px; }
.doc h1 { margin-bottom: 14px; }
.doc h2 { margin: 30px 0 8px; font: 800 22px/1.15 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.doc p, .doc li { color: var(--ink-2); font-size: 19px; }
.doc .doc-lede { color: var(--ink); font-size: 21px; font-weight: 500; }
.doc ul { margin: 0 0 10px; padding-left: 20px; }
.doc a { text-underline-offset: 3px; }
@media (max-width: 520px) {
  .lp-end-in { grid-template-columns: minmax(0, 1fr); padding-block: 32px 40px; }
  .lp-end img { width: 150px; }
}

/* Putting a word right. The pencil is quiet: on the card of a word, and behind its meaning in the list. */
.word-edit { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); opacity: .5; -webkit-tap-highlight-color: transparent; }
.word-edit svg { width: 18px; height: 18px; }
.word-edit:focus-visible { opacity: 1; }
.g-new .word-edit { position: absolute; top: 8px; right: 8px; }
@media (hover: hover) { .word-edit:hover { opacity: 1; background: var(--surface-2); } }
/* What AI help doubts: the word, and the two meanings to choose from. */
.dbt { margin: 4px 0 8px; }
.dbt-row { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.dbt-row b { overflow-wrap: anywhere; font: 700 21px/1.2 var(--font-body); }
.dbt-opts { display: grid; gap: 8px; }
.dbt-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; font: 600 18px/1.25 var(--font-body); -webkit-tap-highlight-color: transparent; }
.dbt-opt span { min-width: 0; overflow-wrap: anywhere; }
.dbt-opt small { flex: none; color: var(--ink-2); font: 500 15px/1.2 var(--font-body); }
@media (hover: hover) { .dbt-opt:hover { background: var(--surface-2); } }
.doubt-note { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin: 12px 0 0; padding: 10px 14px; border: 0; border-radius: var(--radius); background: var(--amber-bg); color: var(--ink); text-align: left; font: 600 18px/1.25 var(--font-body); -webkit-tap-highlight-color: transparent; }
.doubt-note span { flex: 1; min-width: 0; }
.doubt-note.is-quiet { background: var(--surface); box-shadow: var(--shadow); }
.doubt-note:disabled { opacity: .6; }
.doubt-note svg { flex: none; width: 20px; height: 20px; }

/* AI help: the yes it needs (how old are you, a parent for under 16) and the meter of the month. */
.consent-q { margin: 6px 0 0; font: 700 20px/1.25 var(--font-body); }
.consent-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-parent { margin: 0; font-size: 18px; line-height: 1.5; }
.consent-link { justify-self: center; color: var(--ink-2); font-size: 16px; }
.ai-meter { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.ai-meter-top { display: flex; align-items: baseline; gap: 8px; font-size: 18px; }
.ai-meter-top span { color: var(--ink-2); font-size: 16px; }
.ai-meter-bar { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--line-2); }
.ai-meter-bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.ai-meter.is-full .ai-meter-bar i { background: var(--red); }
.ai-meter small { color: var(--ink-2); font-size: 15px; line-height: 1.35; }
.set-section .ai-meter { margin-top: 12px; }

/* Logging in with a name that is in use: the lists saved under it, to say whether they are yours. */
.sync-lists { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.sync-lists li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .09); }
.sync-lists span { font-size: 16px; opacity: .8; }

/* The start page asks which side of your list you are learning, only when the words don't tell. */
.pv-ask { display: grid; gap: 8px; margin-top: 10px; }
.pv-ask > span { font: 600 18px/1.25 var(--font-body); }
.pv-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv-side { min-width: 0; min-height: 48px; padding: 10px 12px; overflow: hidden; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); white-space: nowrap; text-overflow: ellipsis; font: 600 18px/1.2 var(--font-body); -webkit-tap-highlight-color: transparent; }
.pv-side[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
@media (hover: hover) { .pv-side[aria-pressed="false"]:hover { background: var(--surface-2); } }

/* Settings: every setting one row (what it is, its control), in three plain groups. */
.settings-modal { gap: 16px; }
.set-card { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.set-card > * + * { border-top: 1px solid var(--line); }
.set-item { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px; }
.set-item > svg { flex: none; width: 22px; height: 22px; color: var(--ink-2); }
.set-item-text { display: grid; flex: 1; gap: 1px; min-width: 0; }
.set-item .set-label { overflow-wrap: anywhere; }
.set-item .set-sub { margin: 0; }
.set-item .set-sub .link { color: inherit; font: inherit; }
.set-card > .set-under { padding: 0 14px 14px; border-top: 0; }
.set-card > .set-under .ai-meter { margin: 0; }
.set-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ink-2); vertical-align: 1px; }
/* A small choice between two or three: the language, light or dark. */
.seg { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.seg button { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 700 15px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.seg svg { width: 18px; height: 18px; }
/* The login box: the form, and under it how to get a code. */
.login { display: grid; gap: 16px; }
.login > p { margin: 0; }
.login .sync-form .btn-big { width: 100%; }
.login-ask { display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: var(--surface-2); }
.login-ask b { font-size: 19px; }
.login-ask p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.45; }
.login-ask .btn { width: 100%; margin-top: 4px; }
.login-ask .btn:not(.btn-primary) { background: var(--surface); }

/* "Jouw lijsten": the bar at the bottom that takes you back to what Word Tour is. One thing to tap. Dark in both
   themes, like the strip that closes the landing page; the rider rides in, and leans into it when you press. */
.home:has(.home-bar) { padding-bottom: 124px; }
.home-bar { position: fixed; z-index: 25; right: 0; bottom: 0; left: 0; display: block; width: 100%; padding: 0 16px env(safe-area-inset-bottom, 0px); border: 0; background: #15171A; color: #FFFFFF; text-align: left; -webkit-tap-highlight-color: transparent; }
.home-bar-in { position: relative; display: flex; align-items: center; gap: 10px; max-width: 640px; min-height: 72px; margin: 0 auto; padding-left: 86px; }
.home-bar-rider { position: absolute; bottom: 8px; left: -6px; width: 84px; height: auto; pointer-events: none; animation: home-ride .9s cubic-bezier(.2, .9, .3, 1.15) .25s both; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes home-ride { from { opacity: 0; transform: translateX(-160px) rotate(-8deg); } to { opacity: 1; transform: none; } }
.home-bar:active .home-bar-rider { transform: translateX(10px) rotate(-7deg); }
.home-bar-main { display: grid; flex: 1; gap: 2px; min-width: 0; padding: 12px 0; }
.home-bar-main b { font: italic 800 21px/1.05 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.home-bar-main small { color: #C9CDC6; font-size: 15px; line-height: 1.3; }
.home-bar-in > svg.lucide { flex: none; width: 24px; height: 24px; color: var(--brand); transition: transform .2s ease; }
@media (hover: hover) { .home-bar:hover .home-bar-rider { transform: translateX(10px) rotate(-7deg); } .home-bar:hover .home-bar-in > svg.lucide { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .home-bar-rider { animation: none; transition: none; } .home-bar:active .home-bar-rider, .home-bar:hover .home-bar-rider { transform: none; } }

/* The start box on a first visit: free, no account, try it now. */
.start-try { display: grid; gap: 6px; }
.start-try .h1 { margin: 0; }
/* Highlighted the way the logo highlights its first word (a slanted block), not as a pill: it is not a button. */
.start-free { position: relative; isolation: isolate; justify-self: start; margin: 0 0 2px 4px; padding: 5px 12px 4px; color: var(--on-brand); font: italic 800 17px/1.1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.start-free::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--brand); transform: skewX(-12deg); }

/* Above a section of the landing page: whether it is the free part or the extra with AI. A quiet line, not a button. */
.lp-tag { margin: 0 0 10px; color: var(--ink-2); font: 700 15px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }