/* Fonts are self-hosted (static/fonts, SIL OFL, licenses alongside); variable files, one per script.
   Golos Text sets everything; Shantell Sans only the "glossjar" wordmark, so its file holds just those letters
   (pyftsubset --text=glossjar); add letters there if the wordmark ever changes.
   Romanian stress marks are a combining acute (U+0301) after the vowel: the latin file draws it, so its range
   lists it (Chrome composes í, á itself, but ấ î́ need it). Not in latin-ext: Golos hides ė's dot under it.
   ponytail: so ắ (fắră) still takes a fallback font; a Romanian-only face if a learner notices. */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/golos-text-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/golos-text-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/golos-text-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/golos-text-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0301, 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: 'Shantell Sans';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url(fonts/shantell-sans-glossjar.woff2) format('woff2');
}

/* Station signage: white ground, navy ink, signal yellow for the next action, the word on a pale lavender sign.
   Dark mode is the night board: the same layout, soft grey text, the word in warm yellow, never pure white.
   The two dark blocks below must stay identical: one follows the device, the other the theme button (data-theme). */
:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #EFF2F5;
  --ink: #0B2545;
  --muted: #4A5E78;
  --line: #D6DCE3;
  --input-line: #B6C1CD;
  --accent: #FFCC00;
  --accent-hover: #F2BC00;
  --accent-ink: #0B2545;
  --link: #0B5CAD;
  --logo: #5B3FD9;
  --sign: #EEEAFF;
  --sign-ink: #1E1650;
  --sign-muted: #58507E;
  --sign-line: #D9D2FA;
  --sign-time: #5B3FD9;
  --say: #5B3FD9;
  --error-bg: #FDECEE;
  --error-ink: #8A0E22;
  --ok-bg: #E7F5EE;
  --ok-ink: #135C38;
  /* Gender: the base colour for dots, -ink for text (the article on the sign and the board). Plural-only is amber,
     so it stands apart from the lavender sign. */
  --der: #2F6FD6; --die: #D9473A; --das: #1E8A5A; --pl: #C77A1A;
  --der-ink: #1F5FC4; --die-ink: #B83427; --das-ink: #16744A; --pl-ink: #A3560B;
  --r: 10px;
  --r-big: 14px;
  --font: 'Golos Text', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12151A; --surface: #1C1F2A; --ink: #ECEBF2; --muted: #A9A7BA; --line: #2A313A; --input-line: #3A424D;
    --accent: #E6BC3C; --accent-hover: #F0C850; --accent-ink: #14171C; --link: #E6BC3C; --logo: #B3A4FF;
    --sign: #262140; --sign-ink: #F1EEFF; --sign-muted: #ADA9C9; --sign-line: #39325C; --sign-time: #E6BC3C; --say: #B3A4FF;
    --error-bg: #2A1716; --error-ink: #F4B7B0; --ok-bg: #12261C; --ok-ink: #A3E3C2;
    --der: #8DBBFF; --die: #FF9C8F; --das: #6FD9A8; --pl: #F5B35C;
    --der-ink: #8DBBFF; --die-ink: #FF9C8F; --das-ink: #6FD9A8; --pl-ink: #F5B35C;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12151A; --surface: #1C1F2A; --ink: #ECEBF2; --muted: #A9A7BA; --line: #2A313A; --input-line: #3A424D;
  --accent: #E6BC3C; --accent-hover: #F0C850; --accent-ink: #14171C; --link: #E6BC3C; --logo: #B3A4FF;
  --sign: #262140; --sign-ink: #F1EEFF; --sign-muted: #ADA9C9; --sign-line: #39325C; --sign-time: #E6BC3C; --say: #B3A4FF;
  --error-bg: #2A1716; --error-ink: #F4B7B0; --ok-bg: #12261C; --ok-ink: #A3E3C2;
  --der: #8DBBFF; --die: #FF9C8F; --das: #6FD9A8; --pl: #F5B35C;
    --der-ink: #8DBBFF; --die-ink: #FF9C8F; --das-ink: #6FD9A8; --pl-ink: #F5B35C;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  overflow-wrap: break-word;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
}

/* Mobile first. The desktop layout is at the bottom (min-width: 900px). */

.page {
  max-width: 1120px;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
main { flex: 1; display: flex; flex-direction: column; padding: 24px 20px 32px; }
.foot { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 20px; padding: 16px 0 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot a { color: inherit; }

a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

/* Top bar. Phones: logo, languages and the theme button on the first row, page links on a row below.
   Desktop: one row. */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.top form { margin: 0; }
.logo { margin-right: auto; height: 56px; display: inline-flex; align-items: center; gap: 6px; font-family: 'Shantell Sans', var(--font); font-size: 22px; font-weight: 800; color: var(--logo); text-decoration: none; }
.langs { display: flex; gap: 2px; }
.langs a { padding: 4px 7px; border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.langs a:hover { color: var(--ink); }
.langs [aria-current] { color: var(--ink); background: var(--surface); }
.theme { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--muted); cursor: pointer; }
.theme[hidden] { display: none; }
.theme:hover { color: var(--ink); background: var(--surface); }
.theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Shows the theme you'd switch to: a moon in light mode, a sun in dark. */
.theme .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: inline; }
  :root:not([data-theme="light"]) .theme .moon { display: none; }
}
:root[data-theme="dark"] .theme .sun { display: inline; }
:root[data-theme="dark"] .theme .moon { display: none; }
/* 320px phones: keep logo, languages and the theme button on one row. */
@media (max-width: 359px) {
  .top { gap: 0 2px; padding: 0 16px; }
  .logo { font-size: 19px; }
  .langs a { padding: 4px 4px; }
  .theme { width: 34px; }
}
.nav { flex-basis: 100%; min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; border-top: 1px solid var(--line); font-size: 16px; }
.nav a, .nav .link { color: var(--muted); font-weight: 500; text-decoration: none; }
.nav a:hover, .nav .link:hover { color: var(--ink); }
.nav [aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px var(--accent); }
.nav .login { margin-left: auto; padding: 7px 16px; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.nav .login:hover { color: var(--accent-ink); background: var(--accent-hover); }
.nav .login[aria-current="page"] { box-shadow: none; }

.link {
  font: inherit;
  font-weight: 600;
  color: var(--link);
  background: none;
  border: 0;
  padding: 12px 0;
  cursor: pointer;
}

h1 { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: 20px; line-height: 1.25; }
.hero { display: flex; flex-direction: column; gap: 12px; }
.lead { margin: 0; color: var(--muted); max-width: 42ch; }
.hero .hint { margin: 0; font-size: 15px; color: var(--muted); overflow-wrap: anywhere; }
.note { margin: 12px 0 0; font-size: 15px; color: var(--muted); }

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 8px 20px;
  border: 0;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--accent-hover); }
.button.secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.button.secondary:hover { background: var(--line); }

/* Home, logged out: hero, the departures board, the buttons; then the steps and a closing call to action. */
.home { display: flex; flex-direction: column; gap: 24px; }
.home .actions { display: flex; flex-direction: column; gap: 8px; }
.home .actions .note { margin: 4px 0 0; text-align: center; }

/* The departures board: words and when each comes back. study.js adds .live and rolls it every few seconds: the top
   word gets a ✓ (.done), the rows slide up one (.rolling), and the word moves to the back of the queue. */
.board { overflow: hidden; border-radius: var(--r-big); background: var(--sign); color: var(--sign-ink); font-variant-numeric: tabular-nums; }
.board-h { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 18px 12px; border-bottom: 1px solid var(--sign-line); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sign-muted); }
.board-h::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sign-time); }
.board ol { margin: 0; padding: 0; list-style: none; }
.board li { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; }
.board li + li { border-top: 1px solid var(--sign-line); }
.board li:nth-child(n+5) { display: none; } /* without JS: the first four stand still */
.board .w { min-width: 0; font-size: 20px; font-weight: 700; line-height: 1.2; }
.board .w small { display: block; font-size: 13px; font-weight: 400; color: var(--sign-muted); }
.board .when { flex: none; padding: 4px 10px; border-radius: 7px; background: color-mix(in srgb, var(--sign-time) 12%, transparent); color: var(--sign-time); font-size: 14px; font-weight: 700; white-space: nowrap; }
.board li:first-child .when { background: var(--sign-time); color: var(--sign); }
.board.live ol { height: 256px; overflow: hidden; mask-image: linear-gradient(#000 78%, rgba(0, 0, 0, 0.35)); }
.board.live li:nth-child(n+5) { display: flex; }
.board .when:empty { visibility: hidden; }
.board li.done { background: color-mix(in srgb, var(--das) 18%, var(--sign)); }
.board li.done .when { background: var(--das); color: var(--sign); }
.board ol.rolling li { transform: translateY(-64px); transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.3, 1); }
.board ol.rolling li:first-child { opacity: 0; transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.35s; }
@media (prefers-reduced-motion: no-preference) {
  .board.live .board-h::before { animation: live 2s ease-out infinite; }
}
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sign-time) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }

.steps { margin-top: 56px; }
.steps h2, .cta h2 { margin: 0 0 16px; font-size: 26px; line-height: 1.15; }
.steps ol { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; align-content: start; grid-template-columns: 34px 1fr; column-gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.steps li:first-child { border-top: 1px solid var(--line); }
.steps li::before { content: counter(step); grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--surface); font-weight: 700; }
.steps h3 { margin: 4px 0 2px; font-size: 18px; }
.steps p { margin: 0; color: var(--muted); }
.cta { margin-top: 40px; padding: 28px 20px; border-radius: var(--r-big); background: var(--sign); color: var(--sign-ink); text-align: center; }
.cta .button { max-width: 380px; margin: 0 auto; }

/* Done screens (study, guest lesson). */
.done .button { max-width: 360px; }
.done h2 { margin: 8px 0 0; }

/* Form pages: one column. */
.narrow { width: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }

/* Study page: the word on a lavender sign with the speaker at its end; the answer opens below, where the reveal
   button was, so nothing moves. On phones the rating buttons sit at the bottom (thumb reach). */
.study { flex: 1; gap: 16px; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 28px; }
.card-top .hint { margin: 0; font-size: 15px; color: var(--muted); }
.rated { align-self: flex-start; margin: 0; padding: 4px 12px; border-radius: 8px; background: var(--ok-bg); color: var(--ok-ink); font-size: 14px; font-weight: 600; }
.card { flex: 1; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.word-wrap { display: flex; align-items: stretch; min-height: 88px; overflow: hidden; border-radius: var(--r-big); background: var(--sign); color: var(--sign-ink); }
.word { flex: 1; min-width: 0; align-self: center; margin: 14px 18px; text-align: center; font-size: min(46px, 11vw); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: break-word; }
/* The article sits with its word, in the gender colour; Lithuanian and Romanian nouns (no article) get a dot in it
   (neuter n in das's green). */
.art { margin-right: 0.05em; font-size: 0.6em; font-weight: 700; letter-spacing: 0; }
.der .art { color: var(--der-ink); }
.die .art { color: var(--die-ink); }
.das .art { color: var(--das-ink); }
.plural-only .art { color: var(--pl-ink); }
.word:is(.m, .f, .n)::before, .board :is(.m, .f, .n) [lang]::before { content: ""; display: inline-block; width: 0.3em; height: 0.3em; margin: 0 0.3em 0.12em 0; border-radius: 50%; vertical-align: middle; background: var(--der-ink); }
.word.f::before, .board .f [lang]::before { background: var(--die-ink); }
.word.n::before, .board .n [lang]::before { background: var(--das-ink); }
/* With a speaker at the end, the same space on the left keeps the word centred on the sign. */
.word-wrap:has(.say) .word { margin-left: 74px; }
.say { flex: 0 0 60px; display: grid; place-items: center; border-left: 1px solid var(--sign-line); color: var(--say); }
.say:hover, .say.playing { background: var(--sign-line); }
.say svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.say .cone { fill: currentColor; }
/* The answer: the plural and any grammar right under the word, then the translation in its own box. In the plural,
   the umlaut and ending, what the learner must memorise, are in the accent colour (like a dictionary's ¨-er). */
.plural { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 8px; margin: 8px 0 0; }
.plural-label { font-size: 15px; color: var(--muted); }
.plural-form { font-size: 22px; font-weight: 600; overflow-wrap: anywhere; }
.plural-form b { font-weight: 800; color: var(--link); }
.pos { margin: 0; font-size: 15px; color: var(--muted); }
.answer > summary { list-style: none; }
.answer > summary::-webkit-details-marker { display: none; }
.answer[open] > summary { display: none; }
.translation { display: flex; align-items: center; justify-content: center; min-height: 72px; margin: 0; padding: 14px 16px; border-radius: var(--r-big); background: var(--surface); font-size: 30px; font-weight: 700; line-height: 1.2; }
/* The plural and grammar come first, under the word; the translation's box closes the answer. */
.answer .translation { margin-top: 16px; }
.answer > summary + * { margin-top: 0; }

/* A determiner's forms (der, die, das, die) and a guest's collected words: chips with a dot in the gender colour;
   on the card the form shown as the word is outlined. */
.forms { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.gender-form { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 8px; background: var(--surface); font-size: 18px; font-weight: 700; line-height: 1.25; }
.gender-form small { font-size: 13px; font-weight: 400; color: var(--muted); }
.gender-form:is(.der, .die, .das, .pl, .m, .f, .n)::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; align-self: center; background: var(--der); }
.gender-form:is(.die, .f)::before { background: var(--die); }
.gender-form:is(.das, .n)::before { background: var(--das); }
.gender-form.pl::before { background: var(--pl); }
.gender-form[aria-current] { box-shadow: inset 0 0 0 2px var(--ink); }
.jar .gender-form { font-size: 16px; }
/* On the card the forms share one row: the label goes under each word, the dot above it. */
.answer .forms { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.answer .gender-form { flex-direction: column; align-items: center; gap: 0; padding: 2px 4px; border-radius: 0; background: none; }
/* Unlike the rating buttons: no boxes, the word in its gender colour, thin dividers, the card's own form underlined. */
.answer .gender-form + .gender-form { border-left: 1px solid var(--line); }
.answer .gender-form::before { display: none; }
.answer .gender-form.der > span { color: var(--der-ink); }
.answer .gender-form.die > span { color: var(--die-ink); }
.answer .gender-form.das > span { color: var(--das-ink); }
.answer .gender-form.pl > span { color: var(--pl-ink); }
.answer .gender-form[aria-current] { box-shadow: none; }
.answer .gender-form[aria-current] > span { text-decoration: underline 3px; text-underline-offset: 5px; }
.answer .gender-form small { font-size: 12px; }
.forms.jar { margin: 0; justify-content: flex-start; }

/* Lithuanian and Romanian grammar under the answer: gender (and Lithuanian declension) as chips, a verb's or adjective's forms as rows,
   a noun's case table. */
.grammar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0 0; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--muted); }
.tag:is(.m, .f, .n)::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--der); }
.tag.f::before { background: var(--die); }
.tag.n::before { background: var(--das); }
/* A verb's, adjective's or adverb's forms as "label · form" rows, the way a dictionary lists them.
   The rows share one label column (subgrid), as wide as the longest label, so a long Russian label stays on one line. */
.forms-line { display: grid; text-align: left; grid-template-columns: fit-content(60%) 1fr; margin: 16px 0 0; padding: 0; border-radius: var(--r-big); background: var(--surface); list-style: none; }
.forms-line li { display: grid; grid-column: 1 / -1; grid-template-columns: 9.5em 1fr; grid-template-columns: subgrid; /* fixed columns where subgrid is unknown */ align-items: baseline; gap: 16px; padding: 8px 16px; }
.forms-line li + li { border-top: 1px solid var(--line); }
.forms-line small { font-size: 13px; color: var(--muted); }
.forms-line span { font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.cases { margin: 16px 0 0; }
.cases summary { width: fit-content; margin: 0 auto; padding: 7px 16px; border-radius: var(--r); background: var(--surface); cursor: pointer; font-size: 15px; font-weight: 700; list-style: none; }
.cases summary::-webkit-details-marker { display: none; }
.cases summary::after { content: " ▾" / ""; } /* empty alt: screen readers already hear open/closed */
.cases[open] summary::after { content: " ▴" / ""; }
.cases table { width: 100%; margin-top: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--r-big); background: var(--surface); font-size: min(17px, 4.4vw); text-align: left; }
.cases th, .cases td { padding: 7px 10px; }
.cases td { overflow-wrap: anywhere; } /* a very long form breaks in its cell, never widens the page */
.cases tbody tr + tr > * { border-top: 1px solid var(--line); }
.cases tbody tr:first-child td { font-weight: 700; }
.cases thead th { padding-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; text-transform: uppercase; color: var(--muted); }
.cases tbody th { font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }

.rate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
/* Rating comes after seeing the answer: until then the buttons are dimmed and ignore clicks. */
.study:not(:has(.answer[open])) .rate .button { opacity: 0.4; pointer-events: none; }
.rate .button { flex-direction: column; gap: 1px; min-height: 64px; padding: 8px 2px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; }
.rate .button:hover { background: var(--line); }
.rate .button.pressed { background: var(--ink); color: var(--bg); }
.rate small { font-size: 12px; font-weight: 400; color: var(--muted); }
.rate .pressed small { color: inherit; }
.rate kbd { display: none; }
.rate-help { margin: 12px 0 0; text-align: center; font-size: 14px; line-height: 1.4; color: var(--muted); }
.audio-credit { font-size: 13px; }
.audio-credit a { color: inherit; }

/* Forms */
.form { display: flex; flex-direction: column; }
.form label { margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.form :where(input:not([type=checkbox]), select), .reminder select {
  height: 52px;
  margin-bottom: 18px;
  padding: 0 14px;
  border: 2px solid var(--input-line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.form :where(input:not([type=checkbox]), select):focus, .reminder select:focus { border-color: var(--ink); }
/* Browser autofill paints its own (yellow, olive in dark mode) fill; keep the field in the page's colours. */
.form input:autofill { -webkit-text-fill-color: var(--ink); box-shadow: inset 0 0 0 100px var(--bg); caret-color: var(--ink); }
.form .hint { margin: -12px 0 18px; font-size: 14px; color: var(--muted); }
.form .button { margin-top: 6px; }
.error {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--error-bg);
  color: var(--error-ink);
  font-weight: 600;
}
.form .rated { margin-bottom: 18px; }
.switch { margin: 0; color: var(--muted); }

/* About, privacy: a reading column; on desktop each section's heading sits in a left column next to its text.
   Privacy numbers its sections (§ 1, § 2…) the way German legal pages do. */
.prose { width: 100%; max-width: 980px; margin: 0 auto; display: grid; gap: 14px; }
.prose > * { min-width: 0; }
.prose h1 { margin-bottom: 4px; }
.prose .lead { max-width: 60ch; font-size: 19px; }
.prose h2 { margin: 28px 0 0; padding-top: 16px; border-top: 2px solid var(--ink); font-size: 20px; }
.prose p { margin: 0; max-width: 66ch; }
.legal { counter-reset: section; }
.legal h2 { counter-increment: section; }
.legal h2::before { content: "§ " counter(section); display: block; margin-bottom: 2px; font-size: 14px; font-weight: 700; color: var(--sign-time); }
.legal .updated { margin-top: 24px; font-size: 14px; color: var(--muted); }
/* About: the rating keys as a timetable, each with when the word comes back. */
.keys { margin: 4px 0; display: grid; border-top: 1px solid var(--line); }
.keys div { display: grid; grid-template-columns: 7.5em 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.keys dt { display: flex; align-items: center; gap: 8px; align-self: start; font-weight: 700; }
.keys kbd { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--surface); box-shadow: inset 0 -2px 0 var(--line); font: inherit; font-size: 13px; }
.keys dd { margin: 0; }
.keys .when { display: block; width: fit-content; margin-top: 6px; padding: 2px 9px; border-radius: 6px; background: var(--sign); color: var(--sign-time); font-size: 14px; font-weight: 700; }
/* The forgetting curve under "Why it works". */
.curve { width: 100%; max-width: 560px; height: auto; margin: 4px 0; padding: 14px; border-radius: var(--r-big); background: var(--sign); }
.curve path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.curve .axis { stroke: var(--sign-line); stroke-width: 2; }
.curve .lost { stroke: var(--sign-muted); stroke-width: 2; stroke-dasharray: 2 7; }
.curve .memory { stroke: var(--sign-ink); stroke-width: 3.5; }
.curve .review { fill: var(--sign-time); }
/* Where the words come from: credits in a quieter, smaller type. */
.colophon-h ~ p { font-size: 15px; color: var(--muted); }

/* Settings and progress. Bars are <progress> elements because the CSP forbids inline widths. */
.panel { padding: 18px; border-radius: var(--r-big); background: var(--surface); }
.panel .button.secondary { background: var(--bg); }
.settings h2, .stats h2 { margin: 0 0 12px; font-size: 20px; }
.limit-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.limit h2 { margin: 0; font-size: 17px; font-weight: 700; }
.presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0 0 18px; padding: 4px; border-radius: var(--r); background: var(--bg); }
.presets button { height: 44px; border: 0; border-radius: 7px; background: none; color: var(--ink); font: inherit; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.presets button:hover { background: var(--line); }
.presets [aria-pressed="true"], .presets [aria-pressed="true"]:hover { background: var(--ink); color: var(--bg); }
.custom { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; }
.custom label { grid-column: 1 / -1; font-size: 15px; font-weight: 400; color: var(--muted); }
.custom input, .custom select { min-width: 0; margin: 0; height: 50px; }
.custom .button { width: auto; min-height: 50px; padding: 8px 24px; font-size: 16px; }
.reminder .check { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-weight: 600; cursor: pointer; }
.reminder .check input { flex-shrink: 0; width: 22px; height: 22px; accent-color: var(--link); }
.reminder > form > label:not(.check) { font-size: 15px; font-weight: 400; color: var(--muted); }
.calendar { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.calendar-h { margin: 0; font-size: 16px; font-weight: 700; }
.calendar .note { margin-top: 4px; }
.calendar-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9em, 100%), 1fr)); gap: 8px; margin-top: 14px; }
.calendar .button, .vocab-actions .button { min-height: 46px; padding: 8px 14px; font-size: 16px; }
.calendar-buttons + .note { margin-top: 10px; font-size: 14px; }
.remind form .button { min-height: 50px; font-size: 17px; }
.remind > .note { margin: 0; }
.remind .link { padding: 0 4px; }

progress { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; appearance: none; overflow: hidden; background: var(--line); }
progress::-webkit-progress-bar { background: var(--line); }
progress::-webkit-progress-value { background: var(--ink); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--ink); border-radius: 999px; }

.session { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.session p { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.session-count { font-size: 15px; }
.session-count b { color: var(--ink); }
.session-split { font-size: 14px; }
.session progress { flex-basis: 100%; }

.today p { margin: 0; }
.today-label { color: var(--muted); }
.today .today-value { margin: 2px 0 12px; font-size: 32px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.today progress { height: 12px; background: var(--bg); }
.today progress::-webkit-progress-bar { background: var(--bg); }
.today .today-note { margin-top: 10px; font-size: 15px; color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 28px; }
.tiles div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 14px; border-radius: var(--r-big); background: var(--surface); }
.tiles dt { font-size: 13px; line-height: 1.3; color: var(--muted); }
.tiles dd { margin: 0; font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

.bars { margin: 0; padding: 6px 18px; }
.bars div { display: grid; grid-template-columns: 7em 1fr; align-items: center; gap: 12px; padding: 10px 0; }
.bars div + div { border-top: 1px solid var(--line); }
.bars dt { color: var(--muted); }
.bars dd { display: grid; grid-template-columns: 1fr 3ch; align-items: center; gap: 12px; margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.bars progress { background: var(--bg); }
.bars progress::-webkit-progress-bar { background: var(--bg); }
.bars .unrated progress::-webkit-progress-value { background: var(--muted); }
.bars .unrated progress::-moz-progress-bar { background: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .button, .say, .theme { transition: background-color 120ms; }
  .say.playing .wave1 { animation: wave 500ms ease-in-out infinite alternate; }
  .say.playing .wave2 { animation: wave 500ms 160ms ease-in-out infinite alternate; }
}
@keyframes wave { from { opacity: 0.2; } to { opacity: 1; } }

/* Word lists (/words, /saved), behind paidFeatures: the word left, translation right; on /saved an unsave button at the end. */
.vocab-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vocab { list-style: none; margin: 0; padding: 0; }
.vocab li { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.vocab li:last-child { border-bottom: 0; }
.vocab.with-action li { grid-template-columns: 1fr 1fr 44px; }
.vocab-de { font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.vocab-de small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.vocab-tr { color: var(--muted); overflow-wrap: anywhere; }
.bookmark { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.unsave { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--link); cursor: pointer; }
.unsave .bookmark, .save.on .bookmark { fill: currentColor; }
.unsave:hover { background: var(--surface); }
/* The save toggle sits above the sign, on its own row so long words never run under it. */
.save-form { align-self: flex-end; }
.save { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border: 0; border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.save .bookmark { width: 16px; height: 16px; }
.save.on { background: var(--ink); color: var(--bg); }

@media (min-width: 900px) {
  /* One row: logo, page links (log in pushed to their end), languages, theme. */
  .top { flex-wrap: nowrap; gap: 12px; padding: 0 48px; }
  .logo { height: 68px; margin-right: 0; font-size: 24px; }
  .nav { flex: 1; order: 1; margin-left: 24px; border-top: 0; }
  .langs { order: 2; }
  .theme { order: 3; }
  main { padding: 48px 48px 64px; }
  .foot { margin: 0 48px; }

  h1 { font-size: 56px; line-height: 1.04; }
  .lead { font-size: 20px; }

  /* Home: text and buttons on the left, the board on the right. */
  .home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "hero board" "actions board";
    grid-template-rows: auto 1fr;
    column-gap: 64px;
    row-gap: 32px;
  }
  .home .hero { grid-area: hero; }
  .home .board { grid-area: board; align-self: center; }
  .home .actions { grid-area: actions; max-width: 380px; }
  .home .actions .note { text-align: left; }
  .board .w { font-size: 24px; }
  .board li, .board-h { padding-inline: 22px; }
  .steps { margin-top: 96px; }
  .steps h2, .cta h2 { font-size: 36px; }
  .steps ol { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .steps li, .steps li:first-child { border-top: 2px solid var(--ink); border-bottom: 0; }
  .cta { margin-top: 56px; padding: 48px 40px; }

  .narrow h1 { font-size: 42px; }
  .narrow .word { font-size: 60px; }
  .narrow .plural-form { font-size: 26px; }
  .study { flex: 0 0 auto; max-width: 560px; }
  .card { flex: 0 0 auto; min-height: 300px; }
  .rate { gap: 8px; }
  .rate kbd { display: block; margin-top: 2px; font: inherit; font-size: 11px; color: var(--muted); }
  /* Headings left, text right: an h2 takes the left column, everything else the right one, so each section's
     heading lands next to its first paragraph (grid auto-placement). */
  .prose { grid-template-columns: 220px minmax(0, 1fr); column-gap: 56px; row-gap: 14px; }
  .prose > * { grid-column: 2; }
  .prose > h1, .prose > .lead { grid-column: 1 / -1; }
  .prose > h2 { grid-column: 1; margin-top: 28px; }
  .prose > h2 + * { margin-top: 28px; padding-top: 16px; border-top: 2px solid var(--ink); }
}