/* ==========================================================================
   Lëtzebuergesch Exam Prep — Apple-native styling
   --------------------------------------------------------------------------
   Chosen design: "Focused Editorial" (Apple Journal / Fitness language) with
   tinted rating buttons borrowed from the Native Grouped option.

   Principles this encodes:
     - No cards on the lesson screen. Whitespace separates; the question owns
       the screen. Chrome earns its place or is removed.
     - One accent (systemBlue) for anything actionable; everything else is a
       layered label grey.
     - Type carries the hierarchy, not boxes and borders.

   All values come from tokens.css. Nothing is hardcoded here that belongs
   there, so dark mode and motion preferences are handled in one place.

   Responsive: mobile-first full-bleed. From 700px up the app becomes a
   centred window on a grouped-grey page, the way a Mac app sits on a desktop —
   the SAME design, not a separate desktop layout.
   ========================================================================== */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* `display: flex` on buttons outranks the UA's [hidden] rule, which would
   silently leave hidden elements visible. Make the attribute authoritative. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-elevated);
  color: var(--label);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; color: inherit; }

#app {
  display: flex;
  flex-direction: column;
  /* A bounded height, not min-height: the screens scroll their own inner areas
     (.landing, .list, .lesson-body) and pin their footers. With min-height the
     whole page grew instead and pushed the CTA below the fold. */
  height: 100vh;
  height: 100dvh;
  background: var(--bg-elevated);
  position: relative;
}

/* ---------- sample-content banner ------------------------------------ */
.sample-banner {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--fill-quaternary);
  color: var(--label-secondary);
  font-size: var(--t-caption);
  letter-spacing: var(--tr-caption);
  line-height: var(--lh-caption);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--gutter);
  border-bottom: 0.5px solid var(--separator);
}
.sample-banner span { flex: 1; text-align: center; }
.banner-dismiss {
  appearance: none; border: none; background: none; cursor: pointer;
  flex: none; width: 28px; height: 28px; border-radius: var(--r-capsule);
  display: flex; align-items: center; justify-content: center;
  color: var(--label-tertiary);
  transition: background var(--dur-fast) var(--ease-standard);
}
.banner-dismiss:hover { background: var(--fill-tertiary); color: var(--label-secondary); }
.banner-dismiss .icon { width: 13px; height: 13px; }

/* ---------- screens --------------------------------------------------- */
.screen { display: none; flex: 1; flex-direction: column; min-height: 0; }
.screen.active { display: flex; }

/* ---------- icons ----------------------------------------------------- */
/* Inline SVG sprite, not emoji: emoji render differently on every platform and
   carry the wrong tone for a system-native interface. */
.icon { width: 1em; height: 1em; flex: none; display: block; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- navigation bar ------------------------------------------- */
.nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--gutter);
}
.nav .spacer { flex: 1; }

.back {
  appearance: none;
  border: none;
  background: none;
  padding: var(--s-2);
  margin-left: calc(var(--s-2) * -1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--label);
  cursor: pointer;
  min-width: var(--tap);
  min-height: var(--tap);
  border-radius: var(--r-capsule);
  transition: background var(--dur-fast) var(--ease-standard);
}
.back:hover { background: var(--fill-quaternary); }
.back .icon { width: 20px; height: 20px; }

.count {
  font-size: var(--t-footnote);
  letter-spacing: var(--tr-footnote);
  color: var(--label-tertiary);
  font-variant-numeric: tabular-nums;   /* digits stop jittering as they change */
}

/* ---------- titles ---------------------------------------------------- */
.large-title {
  font-size: var(--t-large-title);
  line-height: var(--lh-large-title);
  letter-spacing: var(--tr-large-title);
  font-weight: var(--w-bold);
  margin: 0;
}
.title-block { padding: var(--s-2) var(--gutter) var(--s-4); }
.title-block p {
  margin: var(--s-1) 0 0;
  color: var(--label-secondary);
  font-size: var(--t-subhead);
  line-height: var(--lh-subhead);
}
.caption {
  font-size: var(--t-caption);
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--label-tertiary);
  font-weight: var(--w-semibold);
}

/* ---------- list rows (home actions, topics, stats) ------------------- */
/* Plain rows with hairlines, no card wrapper — the editorial direction. The
   separator is inset to the text column, as iOS insets it past the icon. */
.list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.row {
  appearance: none;
  border: none;
  background: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 60px;
  padding: var(--s-3) var(--gutter);
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-fast) var(--ease-standard);
}
.row:hover { background: var(--fill-quaternary); }
.row:active { background: var(--fill-tertiary); }
.row + .row::before {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: 0;
  top: 0;
  height: 0.5px;
  background: var(--separator);
}
.row .lead { width: 26px; color: var(--blue); display: flex; justify-content: center; }
.row .lead .icon { width: 21px; height: 21px; }
.row .txt { flex: 1; min-width: 0; }
.row .label {
  display: block;
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-body);
}
.row .sub {
  display: block;
  font-size: var(--t-footnote);
  line-height: var(--lh-footnote);
  color: var(--label-secondary);
  margin-top: 1px;
}
.row .chev { color: var(--label-tertiary); display: flex; }
.row .chev .icon { width: 14px; height: 14px; }

/* Primary action: filled accent capsule. The one place colour fills a shape. */
.row.primary {
  margin: var(--s-2) var(--gutter) var(--s-4);
  width: auto;
  background: var(--blue);
  color: #fff;
  border-radius: var(--r-panel);
  min-height: 62px;
  transition: transform var(--dur-fast) var(--ease-spring),
              filter var(--dur-fast) var(--ease-standard);
}
.row.primary::before { display: none; }
.row.primary:hover { background: var(--blue); filter: brightness(1.06); }
.row.primary:active { transform: scale(0.985); }
.row.primary .lead { color: rgba(255,255,255,0.92); }
.row.primary .sub { color: rgba(255,255,255,0.82); }
.row.primary .chev { color: rgba(255,255,255,0.7); }

/* topic rows carry a progress meter instead of a subtitle chevron */
.row .meter {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: var(--t-caption);
  letter-spacing: var(--tr-caption);
  color: var(--label-tertiary);
  font-variant-numeric: tabular-nums;
}
.track {
  height: 4px;
  border-radius: 2px;
  background: var(--label-quaternary);
  overflow: hidden;
  flex: none;
}
.track > i {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: width var(--dur-base) var(--ease-standard);
}
.row .meter .track { flex: 1; }
/* These are spans (inside a button, where block-level children are invalid), so
   they need an explicit display or the two titles run together on one line. */
.row .lb { display: block; font-size: var(--t-body); font-weight: var(--w-semibold); letter-spacing: -0.1px; }
.row .ru { display: block; font-size: var(--t-footnote); color: var(--label-secondary); margin-top: 1px; }

/* ---------- lesson screen -------------------------------------------- */
/* Segment ticks rather than one continuous bar: they show total length as well
   as position, which a bar cannot. */
.segs { display: flex; gap: 2px; padding: 0 var(--gutter) var(--s-1); flex: none; max-width: 200px; }
.segs i {
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: var(--label-quaternary);
  transition: background var(--dur-base) var(--ease-standard);
}
.segs i.done { background: var(--blue); }

.lesson-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Extra bottom padding pushes the optical centre upward. True centring left a
     void above the question that a reviewer mistook for content not loading. */
  padding: var(--s-4) var(--gutter) 18vh;
  overflow-y: auto;
}
.topic-name { margin-bottom: var(--s-3); }

.question {
  font-size: clamp(28px, 8.5vw, 36px);
  line-height: 1.16;
  letter-spacing: -0.7px;
  font-weight: var(--w-bold);
  margin: 0;
  text-wrap: balance;   /* avoids a single orphaned word on the last line */
}

.reveal { margin-top: var(--s-6); }
.reveal .body {
  font-size: var(--t-title2);
  line-height: var(--lh-title2);
  letter-spacing: var(--tr-title2);
  color: var(--label-secondary);
  margin-top: var(--s-1);
}
.reveal.answer .body { color: var(--label); font-style: italic; }

.tools { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-8); padding: 0 var(--s-2); }
.tool {
  appearance: none;
  border: none;
  background: none;
  padding: var(--s-2) 0;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-subhead);
  font-weight: var(--w-medium);
  color: var(--blue);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.tool .icon { width: 17px; height: 17px; }
.tool:hover { opacity: 0.65; }
.tool[aria-pressed="true"] { color: var(--label); }
.tool.secondary { color: var(--label-secondary); }
.tool:disabled { color: var(--label-tertiary); cursor: default; }
/* Audible-only feedback is invisible on a silenced phone, so mark it visually. */
.tool.playing { color: var(--blue); }
.tool.playing .icon { animation: pulse 1s var(--ease-standard) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .tool.playing .icon { animation: none; }
}

.audio-note {
  font-size: var(--t-caption);
  letter-spacing: var(--tr-caption);
  color: var(--label-tertiary);
  margin-top: var(--s-2);
}

/* ---------- brand wordmark ------------------------------------------- */
/* "Lux" in ink, "Fro" in the accent: one word, two tones. Fro is
   Luxembourgish for "question", which is what the whole app is. */
.wordmark {
  font-weight: var(--w-bold);
  letter-spacing: -0.6px;
  color: var(--label);
  margin: 0;
}
.wordmark span { color: var(--blue); }
.hero-wordmark {
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 var(--s-3);
}

/* ---------- landing page (step 1) ------------------------------------- */
/* Scrollable, so the hero and the key-functionality section read as one
   marketing page rather than two wizard steps. The CTA sticks to the bottom so
   it is reachable without scrolling back. */
.landing { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--gutter) var(--s-6); }

.hero { padding: var(--s-6) 0 var(--s-8); }
/* The painted flag carries its own ragged edge, so it needs no border or radius —
   the negative margin pulls the transparent bleed back so it optically aligns
   with the text below. */
/* Landing hero: big LuxFro wordmark with the mark on its right. The mark
   animates from a red question mark (Fro = question) into a tricolour tick
   (passed). Resting state is the finished tick, so no-animation devices show it. */
.hero-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--s-4); }
.hero-wordmark { font-size: clamp(42px, 13vw, 76px); line-height: 1; margin: 0; letter-spacing: -1px; }
.hero-mark { width: clamp(56px, 15vw, 88px); height: auto; overflow: visible; flex: none; }
.hero-mark .tick { stroke-dasharray: 130; stroke-dashoffset: 0; }
.hero-mark .qmark { opacity: 0; }
.hero-mark.anim .qmark { animation: q-out 1.7s ease-in-out 0s backwards; }
.hero-mark.anim .tick { animation: mark-draw 1.9s cubic-bezier(.22,1,.36,1) 1.1s backwards; }
@keyframes q-out {
  0% { opacity: 1; transform: scale(1); }
  45% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(.62); }
}
@keyframes mark-draw { from { stroke-dashoffset: 130; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-mark.anim .qmark, .hero-mark.anim .tick { animation: none; }
}
/* "Что внутри" section label — highlighted in the app blue. */
#l-features-label { color: var(--blue); font-weight: var(--w-semibold); }
.hero-title {
  font-size: clamp(30px, 8.5vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.8px;
  font-weight: var(--w-bold);
  margin: 0;
  text-wrap: balance;
}
.hero-lead {
  margin: var(--s-4) 0 0;
  font-size: var(--t-title2);
  line-height: var(--lh-title2);
  letter-spacing: var(--tr-title2);
  color: var(--label-secondary);
}
.hero-ru {
  margin: var(--s-3) 0 0;
  font-size: var(--t-subhead);
  line-height: var(--lh-subhead);
  color: var(--blue);
  font-weight: var(--w-medium);
}

.section { padding-top: var(--s-6); }
.section > .caption { display: block; margin-bottom: var(--s-3); }

.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.feature-grid li { display: flex; align-items: flex-start; gap: var(--s-4); }
.feature-grid .lead { color: var(--blue); display: flex; padding-top: 2px; flex: none; }
.feature-grid .icon { width: 20px; height: 20px; }
.feature-grid .ft { font-size: var(--t-body); font-weight: var(--w-medium); display: block; }
.feature-grid .fd {
  font-size: var(--t-footnote); line-height: var(--lh-footnote);
  color: var(--label-secondary); display: block; margin-top: 1px;
}

/* Hairline appears only when the list has scrolled under it. */
.sticky-cta { border-top: 0.5px solid var(--separator); background: var(--bg-elevated); }

.btn-filled.block, .btn-plain.block { max-width: none; display: block; }
.btn-plain.block { margin-top: var(--s-2); }
.btn-filled:disabled, .btn-plain:disabled {
  background: var(--fill-tertiary); color: var(--label-tertiary); cursor: default;
}
.btn-filled:disabled:hover { filter: none; }

/* ---------- auth step (step 2) --------------------------------------- */
.segmented.wide { display: flex; margin: 0 var(--gutter) var(--s-4); }
.segmented.wide .seg { flex: 1; min-height: 34px; }

.field input:disabled { color: var(--label-tertiary); }
/* An account cannot be stored safely without a backend, so the fields are
   present but inert — and the notice says so rather than leaving it a mystery. */
.notice {
  color: var(--orange);
  background: var(--orange-tint);
  border-radius: var(--r-row);
  padding: var(--s-3);
  margin: var(--s-4) var(--gutter) 0;
}

/* ---------- form fields ---------------------------------------------- */
.field {
  display: block;
  padding: var(--s-3) var(--gutter);
  position: relative;
}
.field + .field::before {
  content: ""; position: absolute; left: var(--gutter); right: 0; top: 0;
  height: 0.5px; background: var(--separator);
}
.field-label {
  display: block;
  font-size: var(--t-footnote);
  color: var(--label-secondary);
  margin-bottom: var(--s-1);
}
.field input {
  appearance: none;
  width: 100%;
  min-height: var(--tap);
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font);
  font-size: var(--t-title2);
  letter-spacing: var(--tr-title2);
  color: var(--label);
}
.field input::placeholder { color: var(--label-tertiary); }
.field-note {
  padding: var(--s-4) var(--gutter) 0;
  margin: 0;
  font-size: var(--t-footnote);
  line-height: var(--lh-footnote);
  color: var(--label-tertiary);
}
.field-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); min-height: var(--tap);
}
.field-row .field-label { margin-bottom: 0; }
/* A greeting, not a label — uppercase tracking made it shout. */
#home-greeting {
  text-transform: none;
  letter-spacing: var(--tr-subhead);
  font-size: var(--t-subhead);
  font-weight: var(--w-regular);
  color: var(--label-secondary);
  display: block;
  margin-bottom: 2px;
}
.countdown {
  margin: var(--s-2) 0 0;
  font-size: var(--t-subhead);
  color: var(--blue);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---------- audio bar: caption + speed ------------------------------- */
.audio-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-2);
  flex-wrap: wrap;
}
.segmented.tiny { padding: 2px; border-radius: 8px; }
.segmented.tiny .seg {
  min-height: 26px;
  padding: 0 var(--s-2);
  font-size: var(--t-caption);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

/* ---------- answer with its own playback ----------------------------- */
.answer-row { display: flex; align-items: flex-start; gap: var(--s-3); }
.answer-row .body { flex: 1; }
.answer-play {
  appearance: none; border: none; background: var(--fill-tertiary);
  cursor: pointer; flex: none;
  width: 36px; height: 36px; border-radius: var(--r-capsule);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue); margin-top: 2px;
  transition: background var(--dur-fast) var(--ease-standard);
}
.answer-play:hover { background: var(--fill-quaternary); }
.answer-play .icon { width: 16px; height: 16px; }
.answer-play.playing .icon { animation: pulse 1s var(--ease-standard) infinite; }

/* ---------- flashcards ------------------------------------------------ */
.card-face {
  appearance: none; border: none; cursor: pointer;
  flex: 1; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3); padding: var(--s-8) var(--gutter);
  background: none; text-align: center; font-family: var(--font);
}
.card-word {
  font-size: clamp(30px, 9vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.7px;
  font-weight: var(--w-bold);
  color: var(--label);
}
.card-back { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.card-trans {
  font-size: var(--t-title2); line-height: var(--lh-title2);
  color: var(--label); font-weight: var(--w-medium);
}
.card-src {
  font-size: var(--t-subhead); color: var(--label-secondary);
  font-style: italic; padding-top: var(--s-3);
  border-top: 0.5px solid var(--separator);
}
.card-src-ru { font-size: var(--t-footnote); color: var(--label-tertiary); }
.card-hint { font-size: var(--t-footnote); color: var(--label-tertiary); margin-top: var(--s-4); }

/* ---------- word list rows ------------------------------------------- */
.word-row .lb { display: block; font-size: var(--t-body); font-weight: var(--w-semibold); }
.word-row .ru { display: block; font-size: var(--t-footnote); color: var(--label-secondary); }
.word-del {
  appearance: none; border: none; background: none; cursor: pointer;
  color: var(--label-tertiary); width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center; border-radius: var(--r-capsule);
}
.word-del:hover { background: var(--fill-tertiary); color: var(--red); }
.word-del .icon { width: 13px; height: 13px; }

/* ---------- bottom sheet (add a word) -------------------------------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.28);
  z-index: 40; animation: fade var(--dur-fast) var(--ease-standard);
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-width: 620px; margin: 0 auto;
  background: var(--bg-elevated);
  border-radius: var(--r-glass) var(--r-glass) 0 0;
  padding: var(--s-4) var(--gutter) var(--s-8);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  max-height: 78dvh; overflow-y: auto;
  animation: slide-up var(--dur-base) var(--ease-spring);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.sheet-hint {
  margin: var(--s-2) 0 var(--s-4);
  font-size: var(--t-footnote); line-height: var(--lh-footnote);
  color: var(--label-secondary);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { transform: translateY(12%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-backdrop { animation: none; }
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  appearance: none; cursor: pointer;
  border: 1px solid var(--separator-opaque);
  background: var(--bg-elevated);
  border-radius: var(--r-capsule);
  min-height: 38px; padding: 0 var(--s-4);
  font-family: var(--font); font-size: var(--t-subhead);
  color: var(--label);
  transition: background var(--dur-fast) var(--ease-standard);
}
.chip:hover { background: var(--fill-quaternary); }
.chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip.saved { border-style: dashed; color: var(--label-tertiary); }

.sheet-form { margin-top: var(--s-4); }
.chosen { font-size: var(--t-title2); font-weight: var(--w-semibold); margin-bottom: var(--s-2); }
.sheet-form .field { padding-left: 0; padding-right: 0; }
.sheet-form .field::before { display: none; }

/* An unchecked machine translation must never look like a verified one. */
.auto-tag {
  font-style: normal;
  font-size: var(--t-caption);
  letter-spacing: var(--tr-caption);
  color: var(--orange);
  background: var(--orange-tint);
  border-radius: 5px;
  padding: 1px 5px;
  white-space: nowrap;
}
.auto-note {
  margin: calc(var(--s-2) * -1) 0 var(--s-3);
  font-size: var(--t-footnote);
  line-height: var(--lh-footnote);
  color: var(--orange);
}

/* ---------- footer / ratings ----------------------------------------- */
.foot { flex: none; padding: var(--s-4) var(--gutter) var(--s-8); }
/* A sentence, not a label — uppercase + tracking made it shout across two lines. */
.rate-prompt {
  text-align: center;
  margin-bottom: var(--s-3);
  display: block;
  text-transform: none;
  letter-spacing: var(--tr-footnote);
  font-size: var(--t-footnote);
  font-weight: var(--w-regular);
  color: var(--label-secondary);
}

.rates { display: flex; gap: var(--s-2); }
/* Borrowed from the Native Grouped option: tinted fills read instantly, where
   three identical outlines force you to read all three labels. */
.rate {
  appearance: none;
  border: none;
  flex: 1;
  min-height: 52px;
  border-radius: var(--r-card);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--t-subhead);
  font-weight: var(--w-semibold);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              filter var(--dur-fast) var(--ease-standard);
}
.rate .icon { width: 16px; height: 16px; }
.rate:hover { filter: brightness(0.97); }
.rate:active { transform: scale(0.97); }
.rate.easy   { background: var(--green-tint);  color: #248A3D; }
.rate.medium { background: var(--orange-tint); color: #B25000; }
.rate.hard   { background: var(--red-tint);    color: #C2261B; }

@media (prefers-color-scheme: dark) {
  .rate.easy   { color: var(--green); }
  .rate.medium { color: var(--orange); }
  .rate.hard   { color: var(--red); }
}

/* ---------- done screen ---------------------------------------------- */
.done {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-8) var(--gutter);
  gap: var(--s-2);
}
.done .ring {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--green-tint); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
}
.done .ring .icon { width: 38px; height: 38px; }
.done h2 {
  font-size: var(--t-title1); line-height: var(--lh-title1);
  letter-spacing: var(--tr-title1); font-weight: var(--w-bold); margin: 0;
}
.done p { color: var(--label-secondary); margin: 0 0 var(--s-6); font-size: var(--t-subhead); }

.btn-filled, .btn-plain {
  appearance: none; border: none; cursor: pointer;
  width: 100%; max-width: 340px; min-height: 52px;
  border-radius: var(--r-panel);
  font-size: var(--t-headline); font-weight: var(--w-semibold);
  letter-spacing: var(--tr-headline);
  transition: transform var(--dur-fast) var(--ease-spring),
              filter var(--dur-fast) var(--ease-standard);
}
.btn-filled { background: var(--blue); color: #fff; }
.btn-filled:hover { filter: brightness(1.06); }
.btn-filled:active { transform: scale(0.985); }
.btn-plain { background: none; color: var(--blue); }
.btn-plain:hover { opacity: 0.65; }

/* ---------- progress screen ------------------------------------------ */
.stats { padding: 0 0 var(--s-4); }
.stat {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-4) var(--gutter); position: relative;
}
.stat + .stat::before {
  content: ""; position: absolute; left: var(--gutter); right: 0; top: 0;
  height: 0.5px; background: var(--separator);
}
.stat .n {
  font-size: var(--t-title1); line-height: 1;
  letter-spacing: var(--tr-title1); font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}
.stat .k { font-size: var(--t-subhead); color: var(--label-secondary); text-align: right; }
.stat.block { display: block; }
.stat.block .k { text-align: left; }

.split { display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  margin-top: var(--s-3); background: var(--label-quaternary); gap: 2px; }
.split > i { display: block; height: 100%; }
.split .e { background: var(--green); }
.split .m { background: var(--orange); }
.split .h { background: var(--red); }
.legend { display: flex; gap: var(--s-4); margin-top: var(--s-2);
  font-size: var(--t-footnote); color: var(--label-secondary); flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend b { font-weight: var(--w-semibold); color: var(--label);
  font-variant-numeric: tabular-nums; }
.legend .dot { width: 8px; height: 8px; border-radius: 50%; }
.legend .dot.e { background: var(--green); }
.legend .dot.m { background: var(--orange); }
.legend .dot.h { background: var(--red); }

.section-label { padding: var(--s-6) var(--gutter) var(--s-2); display: block; }
.empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: var(--s-12) var(--gutter);
  color: var(--label-secondary); font-size: var(--t-subhead);
}

/* ---------- segmented control (language) ----------------------------- */
.foot-tools { flex: none; padding: var(--s-4) var(--gutter) var(--s-8); text-align: center; }
.foot-tools .caption { display: block; margin-bottom: var(--s-2); }
.segmented {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--fill-tertiary); border-radius: 9px;
}
.seg {
  appearance: none; border: none; background: none; cursor: pointer;
  min-height: 30px; padding: 0 var(--s-4); border-radius: 7px;
  font-size: var(--t-footnote); font-weight: var(--w-medium);
  color: var(--label); transition: background var(--dur-fast) var(--ease-standard);
}
.seg[aria-pressed="true"] {
  background: var(--bg-elevated);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.04);
  font-weight: var(--w-semibold);
}

/* ---------- focus visibility ----------------------------------------- */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

/* ==========================================================================
   Desktop / web — the same design, presented as a Mac window
   --------------------------------------------------------------------------
   Not a separate layout: identical type, colour and spacing, lifted onto a
   grouped-grey page and capped to a reading column. A language question set at
   36px across 1400px would be unreadable; the column is the whole adaptation.
   ========================================================================== */
@media (min-width: 700px) {
  body { background: var(--bg-grouped); }

  #app {
    max-width: 620px;
    margin: var(--s-8) auto;
    height: min(820px, calc(100dvh - 64px));
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.06), 0 12px 40px rgba(0,0,0,0.10);
  }

  .sample-banner { border-radius: 0; }

  /* A touch more air once there is room for it. */
  .nav { padding: var(--s-3) var(--s-6); }
  .title-block { padding: var(--s-3) var(--s-6) var(--s-6); }
  .segs { padding: 0 var(--s-6) var(--s-3); }
  .lesson-body { padding: var(--s-6); }
  .foot, .foot-tools { padding: var(--s-4) var(--s-6) var(--s-8); }
  .row { padding: var(--s-3) var(--s-6); }
  .row + .row::before { left: var(--s-6); }
  .row.primary { margin: var(--s-2) var(--s-6) var(--s-4); }
  .stat { padding: var(--s-4) var(--s-6); }
  .stat + .stat::before { left: var(--s-6); }
  .section-label, .empty { padding-left: var(--s-6); padding-right: var(--s-6); }

  .question { font-size: 38px; letter-spacing: -0.8px; }

  /* Pointer users get a hover affordance; touch users never see it. */
  .rate { min-height: 56px; }
}

@media (min-width: 1000px) {
  #app { max-width: 680px; }
  .question { font-size: 40px; }
}


/* ── Locked topics ─────────────────────────────────────────────────────────
   A locked row stays legible and keeps its question count: the point is to show
   what is there, not to hide it. Only the affordance changes — dimmed text and
   a lock glyph, no pointer, no active state. */
.topic-row.locked { opacity: .52; cursor: default; }
.topic-row.locked:active { background: var(--bg-elevated); transform: none; }
.topic-row.locked .meter .track { opacity: .5; }
.topic-row.locked::after {
  content: "";
  width: 15px; height: 15px; margin-left: auto; flex: none;
  background: currentColor;
  -webkit-mask: var(--lock-mask) center / contain no-repeat;
          mask: var(--lock-mask) center / contain no-repeat;
  opacity: .6;
}
:root {
  /* padlock, drawn inline so it needs no extra request */
  --lock-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><rect x="4.5" y="10.5" width="15" height="10" rx="2.4"/><path d="M8 10.5V7.6a4 4 0 0 1 8 0v2.9"/></svg>');
}


/* Access key shown in settings — monospaced so the groups are easy to read out
   loud, which is how these get shared over a chat. */
.field-value {
  font: 500 15px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .4px;
  color: var(--label);
  margin-left: auto;
  -webkit-user-select: all; user-select: all;   /* one tap selects the whole key */
}


/* The screens column. #app used to be the direct parent of every screen; the
   sidebar made a wrapper necessary. These rules apply at ALL widths — omitting
   them clipped the phone layout, because the screens had no width to fill. */
#screens {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ══════════════════ DESKTOP SIDEBAR ══════════════════════════════════════
   Below 900px the sidebar does not exist and the app behaves exactly as it did
   on the phone. From 900px it becomes a two-column shell: context on the left,
   the question on the right. The question column keeps its comfortable measure
   rather than stretching — a 37px question spanning 1400px is harder to read,
   not easier, so the extra width buys context instead of line length. */
#sidebar { display: none; }

/* Sidebar removed — dead CSS block deleted. The ≥900px desktop layout is
   defined below (centered window, flex-column for scroll). */

/* Sidebar removed — everything lives on the main screen. Keep the centered
   "window" framing on wide screens instead of the two-column shell. */
@media (min-width: 900px) {
  body { background: var(--bg-grouped); }
  #sidebar { display: none; }
  #app {
    display: flex; flex-direction: column;
    max-width: 620px; margin: var(--s-8) auto;
    height: min(820px, calc(100dvh - 64px));
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.06), 0 12px 40px rgba(0,0,0,0.10);
  }
  /* #screens keeps its base flex column so inner lists (.list) scroll inside
     the fixed-height window instead of overflowing it. */
}
@media (min-width: 1000px) { #app { max-width: 680px; } }

/* ══════════════════ LANDING PAGE (lp-) ═══════════════════════════════════
   The landing is also the app's starting screen, but it is a marketing page,
   not an app screen — it must fill the browser, not sit in the 680px "Mac
   window" the app uses on desktop. So while it is the active screen, body gets
   .landing-active, which releases #app from that cap and lets the page scroll
   full-height. Every value below is a design token; the lp- prefix keeps this
   isolated from the app's own .hero / .wordmark / .section rules. */
body.landing-active { background: var(--bg-elevated); }
/* The landing must NOT use the app's fixed-height "window" model. On iOS Safari
   a flex:1 screen whose child relies on height:100% collapses (the height never
   resolves), which rendered the whole landing broken on iPad while it worked in
   desktop Chrome. So when the landing is active, every ancestor drops to natural
   height and the DOCUMENT scrolls — the normal, robust way a marketing page
   behaves. App screens (non-landing) keep their fixed-window behaviour. */
body.landing-active,
body.landing-active #app,
body.landing-active #screens,
body.landing-active #screen-landing.active {
  height: auto;
  min-height: 100dvh;
  max-width: none;
  overflow: visible;
}
body.landing-active { overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.landing-active #app {
  width: 100%; margin: 0; border-radius: 0; box-shadow: none;
}
.lp { height: auto; overflow: visible; }

.lp-wrap {
  max-width: 1120px; margin: 0 auto;
  padding: 0 clamp(var(--gutter), 4vw, var(--s-12));
}
.lp section, .lp .lp-sect, .lp .lp-band-grey, .lp .lp-final {
  padding: clamp(var(--s-12), 7vw, 96px) 0;
}
.lp-band-grey { background: var(--bg-grouped); }

/* type ladder — clamps up from the app's phone-scale tokens to a web scale */
.lp-h1 {
  margin: 0 0 var(--s-4);
  font-size: clamp(var(--t-large-title), 4.6vw, 54px);
  line-height: 1.08; font-weight: var(--w-bold); letter-spacing: -0.025em;
}
.lp-h2 {
  margin: 0 0 var(--s-4);
  font-size: clamp(var(--t-title1), 3vw, 38px);
  line-height: 1.14; font-weight: var(--w-bold); letter-spacing: -0.02em;
}
.lp-lead {
  margin: 0; max-width: 34em;
  font-size: clamp(var(--t-body), 1.45vw, 21px);
  line-height: 1.55; color: var(--label-secondary);
}
.lp-body {
  margin: 0 0 var(--s-4); max-width: 36em;
  font-size: clamp(var(--t-subhead), 1.15vw, 17px);
  line-height: 1.62; color: var(--label-secondary);
}
.lp-body:last-child { margin-bottom: 0; }
.lp-eyebrow {
  margin: 0 0 var(--s-3);
  font-size: var(--t-caption); font-weight: var(--w-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue);
}

/* top bar */
.lp-topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separator);
}
.lp-topbar-in { display: flex; align-items: center; gap: var(--s-4); min-height: 60px; }
.lp-wordmark {
  font-size: var(--t-title2); font-weight: var(--w-bold);
  letter-spacing: -0.02em; margin-right: auto;
}
.lp-wordmark i { font-style: normal; color: var(--blue); }
.lp-wordmark-sm { font-size: var(--t-headline); margin-right: 0; }
.lp-seg { flex: none; }

/* buttons */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--s-6);
  border: 0; border-radius: var(--r-capsule);
  background: var(--blue); color: #fff;
  font-family: var(--font); font-size: var(--t-headline);
  font-weight: var(--w-semibold); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.lp-btn-sm { min-height: 36px; font-size: var(--t-subhead); padding: 0 var(--s-4); }
.lp-ghost { background: var(--fill-tertiary); color: var(--label); }
.lp-onblue { background: #fff; color: var(--blue); }
.lp-onblue.lp-ghost {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
}
.lp-navlink {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: var(--t-subhead);
  font-weight: var(--w-medium); color: var(--blue); white-space: nowrap;
}
.lp-navlink:hover { text-decoration: underline; }
@media (max-width: 559px) {
  .lp-navlink { display: none; }
  /* The topbar Start button can't shrink (nowrap) and overflowed a phone; it is
     redundant here because the hero has its own Start button just below. */
  .lp-topbar #lp-nav-start { display: none; }
}
.lp-cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.lp-cta-row.lp-center { justify-content: center; }
.lp-cta-note { margin: var(--s-3) 0 0; font-size: var(--t-footnote); color: var(--label-tertiary); }

/* hero */
.lp-hero-in { display: grid; gap: clamp(var(--s-8), 4vw, 56px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .lp-hero-in { grid-template-columns: 1.2fr 0.8fr; } }

/* function widgets */
.lp-mosaic { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 559px) { .lp-mosaic { grid-template-columns: 1fr; } }
.lp-w {
  background: var(--bg-elevated); border-radius: var(--r-card);
  border: 1px solid var(--separator); box-shadow: var(--shadow-card);
  padding: var(--s-3) var(--s-4) var(--s-4); min-width: 0;
}
.lp-wl {
  margin: 0 0 var(--s-2);
  font-size: var(--t-caption); font-weight: var(--w-semibold);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--label-tertiary);
}
.lp-w-lb { margin: 0; font-size: var(--t-subhead); line-height: 1.35; font-weight: var(--w-semibold); overflow-wrap: break-word; }
.lp-w-ru { margin: 3px 0 0; font-size: var(--t-footnote); line-height: 1.4; color: var(--label-secondary); }
.lp-wrow-play { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--s-3); }
.lp-mini-play {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; border-radius: var(--r-capsule); background: var(--blue); color: #fff;
  padding: 7px var(--s-3); font-family: var(--font); font-size: var(--t-footnote);
  font-weight: var(--w-semibold); cursor: default;
}
.lp-mini-chip { border-radius: var(--r-capsule); background: var(--fill-tertiary); padding: 7px var(--s-2); font-size: var(--t-caption); color: var(--label-secondary); }
.lp-vrow { display: flex; align-items: center; gap: 6px; font-size: var(--t-footnote); font-weight: var(--w-semibold); line-height: 1.4; }
.lp-vpast { margin: 0 0 var(--s-2); font-size: var(--t-footnote); line-height: 1.4; color: var(--label-secondary); }
.lp-vpast:last-child { margin-bottom: 0; }
.lp-aux { flex: none; border-radius: var(--r-capsule); padding: 1px 7px; font-size: 10px; font-weight: var(--w-semibold); background: var(--fill-quaternary); color: var(--label-secondary); }
.lp-aux-sinn { background: var(--blue); color: #fff; }
.lp-spk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fill-tertiary); color: var(--label-secondary); margin-left: auto; flex: none; }
.lp-wordline { display: flex; align-items: center; gap: var(--s-2); }
.lp-tile { height: 54px; border-radius: var(--r-row); background: var(--fill-quaternary); display: grid; place-items: center; color: var(--label-tertiary); margin-bottom: var(--s-2); }
.lp-tile svg { width: 26px; height: 26px; }
.lp-pbar { margin-top: var(--s-2); }
.lp-pbar-t { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); font-size: var(--t-caption); color: var(--label-secondary); margin-bottom: 3px; }
.lp-pbar-t b { flex: none; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; color: var(--label); }
.lp-track { height: 6px; border-radius: var(--r-capsule); background: var(--fill-quaternary); overflow: hidden; }
.lp-track i { display: block; height: 100%; background: var(--blue); }
.lp-track i.lp-green { background: var(--green); }

/* two-column splits */
.lp-split { display: grid; gap: clamp(var(--s-6), 4vw, 56px); }
@media (min-width: 900px) { .lp-split { grid-template-columns: 1fr 1.15fr; } }
.lp-split .lp-h2 { margin-bottom: 0; }

/* capability cards */
.lp-grid-caps { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-top: var(--s-8); }
@media (min-width: 640px) { .lp-grid-caps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .lp-grid-caps { grid-template-columns: repeat(3, 1fr); } }
.lp-cap { background: var(--bg-elevated); border-radius: var(--r-card); padding: var(--s-4); box-shadow: var(--shadow-card); border: 1px solid var(--separator); }
.lp-cap svg { width: 22px; height: 22px; margin-bottom: var(--s-3); display: block; }
.lp-cap h3 { margin: 0 0 var(--s-2); font-size: clamp(var(--t-headline), 1.4vw, 19px); font-weight: var(--w-semibold); line-height: 1.3; }
.lp-cap p { margin: 0; font-size: var(--t-subhead); line-height: 1.5; color: var(--label-secondary); }

/* steps */
.lp-grid-steps { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-top: var(--s-8); }
@media (min-width: 700px) { .lp-grid-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .lp-grid-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-step { background: var(--bg-secondary); border-radius: var(--r-card); padding: var(--s-6) var(--s-4) var(--s-4); position: relative; }
.lp-step b.lp-n { position: absolute; top: calc(-1 * var(--s-3)); left: var(--s-4); display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-capsule); background: var(--blue); color: #fff; font-size: var(--t-footnote); font-weight: var(--w-bold); }
.lp-step h3 { margin: 0 0 var(--s-2); font-size: clamp(var(--t-headline), 1.4vw, 19px); font-weight: var(--w-semibold); line-height: 1.3; }
.lp-step p { margin: 0; font-size: var(--t-subhead); line-height: 1.5; color: var(--label-secondary); }

/* use cases */
.lp-grid-uses { display: grid; gap: var(--s-3); margin-top: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .lp-grid-uses { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .lp-grid-uses { grid-template-columns: repeat(4, 1fr); } }
.lp-use { padding: var(--s-4); border-radius: var(--r-card); background: var(--bg-elevated); border: 1px solid var(--separator); font-size: var(--t-subhead); line-height: 1.45; }
.lp-pull { margin: clamp(var(--s-8), 5vw, 56px) auto 0; max-width: 30em; text-align: center; font-size: clamp(var(--t-title2), 2.1vw, 26px); line-height: 1.4; font-weight: var(--w-semibold); letter-spacing: -0.015em; }

/* final band */
.lp-final { background: var(--blue); color: #fff; text-align: center; }
.lp-final .lp-h2 { color: #fff; }
.lp-final p { margin: 0 auto; max-width: 32em; font-size: clamp(var(--t-body), 1.35vw, 19px); line-height: 1.55; color: rgba(255,255,255,.9); }

/* footer */
.lp-footer { background: var(--bg-grouped); padding: var(--s-12) 0; }
.lp-note { max-width: 46em; font-size: var(--t-footnote); line-height: 1.6; color: var(--label-secondary); }
.lp-note b { display: block; margin-bottom: var(--s-2); font-size: var(--t-caption); font-weight: var(--w-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label-tertiary); }
.lp-foot-rule { margin: var(--s-6) 0; height: 1px; background: var(--separator); }
.lp-foot-meta { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; font-size: var(--t-footnote); color: var(--label-tertiary); }

/* the green tick used in capability cards */
.lp-tick { width: 22px; height: 22px; }


/* Verb cards: the auxiliary is the thing being taught, so it gets a tag of its
   own rather than being buried in the Perfekt string. */
.verb-row { align-items: center; }
/* ARASAAC pictogram thumbnail; empty placeholder keeps text aligned for the
   ~5% abstract verbs with no picture. White pad + rounding softens the
   flat AAC symbol into the app's card style. */
.verb-picto {
  flex: none; width: 56px; height: 56px; margin-right: 12px;
  object-fit: contain; border-radius: 10px;
  background: #fff; padding: 4px;
  border: 1px solid var(--separator);
}
.verb-picto-empty { background: transparent; border: none; }
.picto-credit { margin-top: 18px; font-size: var(--t-caption); color: var(--label-tertiary); text-align: center; }
.verb-play {
  flex: none; width: 34px; height: 34px; margin-left: 8px;
  display: grid; place-items: center; cursor: pointer;
  border: none; border-radius: 50%; background: var(--fill-tertiary); color: var(--blue);
}
.verb-play .icon { width: 18px; height: 18px; }
.verb-play:active { opacity: .6; }
.verb-add {
  flex: none; width: 34px; height: 34px; margin-left: 6px;
  display: grid; place-items: center; cursor: pointer;
  border: none; border-radius: 50%; background: var(--fill-tertiary); color: var(--blue);
}
.verb-add .icon { width: 18px; height: 18px; }
.verb-add.added { background: rgba(52,199,89,.18); color: #1a7f37; }
.add-all-verbs { margin: 4px 0 14px; }

/* Write-your-own answer scratchpad on the lesson screen. */
.write-box {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 74px;
  font: 400 var(--t-body)/1.5 -apple-system, ui-rounded, system-ui, sans-serif;
  background: var(--bg-elevated); color: inherit;
  border: 1px solid var(--separator); border-radius: 10px;
  padding: 10px 12px; margin-top: 4px;
}
.write-box:focus { outline: none; border-color: var(--blue); }
.write-hint { display: block; margin-top: 6px; color: var(--label-tertiary); }
.side-open { display: none; }  /* base: hidden; shown only when collapsed on desktop */
.write-actions { display: flex; gap: 8px; margin-top: 8px; }
.mini-btn {
  font: 600 var(--t-caption)/1 -apple-system, ui-rounded, system-ui, sans-serif;
  color: #fff; background: var(--blue); border: none; cursor: pointer;
  border-radius: 8px; padding: 8px 12px;
}
.mini-btn.ghost { color: var(--blue); background: var(--fill-tertiary); }
.mini-btn:disabled { opacity: .55; cursor: default; }
.write-saved { align-self: center; font-size: var(--t-caption); font-weight: 600; color: #1a7f37; }
/* Manual add-word form in the Words screen. */
.add-word { margin: 4px 0 12px; }
.mini-btn.block { display: block; width: 100%; }
.add-word-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.aw-input {
  width: 100%; box-sizing: border-box;
  font: 400 var(--t-body)/1.4 -apple-system, ui-rounded, system-ui, sans-serif;
  background: var(--bg-elevated); color: inherit;
  border: 1px solid var(--separator); border-radius: 10px; padding: 10px 12px;
}
.aw-input:focus { outline: none; border-color: var(--blue); }
.write-result {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--fill-tertiary);
}
.write-result .body { margin: 4px 0 8px; font-size: var(--t-body); }
.write-result .caption { color: var(--label-tertiary); }
.answer-ru { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--separator);
  color: var(--label-secondary); font-size: var(--t-subhead); font-style: italic; }
#answer-translate { margin-top: 8px; }
.avg-score { display: block; margin-top: 6px; font-size: var(--t-caption); color: var(--label-secondary); }
.pic-lang-toggle { margin-bottom: 12px; }
@media (prefers-color-scheme: dark) {
  .verb-picto { background: rgba(255,255,255,0.92); }
}
.verb-perf {
  display: block;
  font: 500 var(--t-subhead)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--label-secondary);
  margin-top: 2px;
}
.aux-tag {
  flex: none; margin-left: auto;
  font-size: var(--t-caption); font-weight: var(--w-semibold);
  border-radius: 6px; padding: 3px 8px;
}
/* sinn is the small, error-prone group — it gets the colour that draws the eye */
.aux-sinn { background: var(--orange-tint); color: #8A5000; }
.aux-hunn { background: var(--fill-tertiary); color: var(--label-secondary); }

/* Present vs past bars on the progress screen */
.tense-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; }
.tense-label { font-size: var(--t-subhead); min-width: 96px; }
.tense-num { font-size: var(--t-caption); color: var(--label-secondary); min-width: 62px; text-align: right; }
.tense-row .track { flex: 1; }


/* Four speed steps instead of three: 0,8 / 0,9 / 1 / 1,1. Finer increments are
   what a learner actually wants — the jump from 0,75 to 1 was too coarse to find
   a comfortable pace. Four segments need a little less padding to stay on one
   line inside the settings row on a narrow phone. */
.segmented.tiny .seg { padding-inline: 9px; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) {
  .segmented.tiny .seg { padding-inline: 6px; font-size: var(--t-caption); }
}


/* ── Picture description ───────────────────────────────────────────────────
   The photo is the subject, so it gets the width and nothing competes with it.
   Model answers stay hidden until asked for: describing the scene yourself is
   the exercise, and a visible answer turns it into reading aloud. */
.pic-photo {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: cover;               /* scenes are mixed portrait and landscape */
  border-radius: 14px;
  background: var(--fill-quaternary);
  margin-bottom: var(--s-3);
}
.answer-block {
  background: var(--bg-secondary);
  border: 1px solid var(--separator);
  border-radius: 14px;
  padding: var(--s-4);
  margin-bottom: var(--s-3);
}
.answer-block .cap {
  font-size: var(--t-caption);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--label-tertiary);
  font-weight: var(--w-semibold);
  margin: 0 0 var(--s-2);
}
.answer-block .lb { font-size: var(--t-body); line-height: 1.55; margin: 0; }
.answer-block .ru {
  font-size: var(--t-subhead); line-height: 1.55;
  color: var(--label-secondary); margin: 0;
}
@media (min-width: 900px) { .pic-photo { max-height: 52vh; } }


/* ── Speed: one button, one slider ─────────────────────────────────────────
   A row of fixed steps could not hold the useful range. Below 1x is where a
   fast phrase becomes separable into words, and that is most of the value, so
   the range runs 0,5x to 1,5x on a slider instead. */
.speed-btn {
  font: inherit;
  font-size: var(--t-footnote);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;      /* width does not jitter as it changes */
  color: var(--blue);
  background: var(--fill-quaternary);
  border: 0;
  border-radius: 980px;
  padding: 5px 12px;
  min-width: 56px;
  cursor: pointer;
}
.speed-btn:hover { background: var(--fill-tertiary); }

.sheet-wrap { position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: flex-end; justify-content: center; }
.sheet-back { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.sheet {
  position: relative;
  width: 100%; max-width: 420px;
  background: var(--bg-elevated, var(--bg-primary));
  border-radius: 20px 20px 0 0;
  padding: var(--s-5) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px rgba(0,0,0,.18);
  animation: sheet-up .22s cubic-bezier(.32,.72,0,1);
}
@keyframes sheet-up { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }
@media (min-width: 900px) {
  .sheet-wrap { align-items: center; }
  .sheet { border-radius: 20px; max-height: calc(100dvh - 48px); overflow-y: auto;
    margin: 24px; }
}
.sheet-title {
  margin: 0 0 var(--s-2); text-align: center;
  font-size: var(--t-subhead); font-weight: var(--w-semibold);
}
.speed-value {
  margin: 0 0 var(--s-2); text-align: center;
  font-size: 34px; font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums; color: var(--blue);
}
#speed-range { width: 100%; accent-color: var(--blue); height: 28px; }
.speed-ends {
  display: flex; justify-content: space-between;
  font-size: var(--t-caption); color: var(--label-tertiary);
  margin-bottom: var(--s-4);
}
.speed-presets { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.speed-preset {
  flex: 1; font: inherit; font-size: var(--t-footnote); font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  padding: 9px 0; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--separator);
  background: var(--bg-secondary); color: var(--label-primary);
}
.speed-preset[aria-pressed="true"] {
  background: var(--blue); border-color: var(--blue); color: #fff;
}

/* ── Listen-only mode ──────────────────────────────────────────────────────
   The exam is spoken: the examiner asks aloud and nothing is written down. With
   the text on screen the ear never has to work, so listen-only hides it behind
   one tap — available, but not free. */
.question.veiled { visibility: hidden; }
.veil {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 0 0 var(--s-3);
  font: inherit; font-size: var(--t-footnote); font-weight: var(--w-semibold);
  color: var(--label-secondary);
  background: var(--fill-quaternary);
  border: 1px dashed var(--separator); border-radius: 12px;
  padding: var(--s-4) var(--s-3); cursor: pointer;
}
.veil:hover { background: var(--fill-tertiary); }
.veil .icon { width: 17px; height: 17px; }

.sheet-sub {
  margin: 0 0 var(--s-4); text-align: center;
  font-size: var(--t-footnote); color: var(--label-secondary); line-height: 1.4;
}
.sheet .row { margin-bottom: var(--s-2); }