/* ==========================================================================
   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: 4px; padding: 0 var(--gutter) var(--s-2); flex: none; }
.segs i {
  flex: 1;
  height: 3px;
  border-radius: 1.5px;
  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-6); margin-top: var(--s-8); }
.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. */
.hero-flag {
  display: block;
  width: 168px;
  height: auto;
  margin: 0 0 var(--s-4) -10px;
}
@media (min-width: 700px) { .hero-flag { width: 200px; } }
.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; }

@media (min-width: 900px) {
  body { background: var(--bg-elevated); }
  #app {
    /* undo the 700px window framing — the sidebar shell takes over */
    max-width: none;
    margin: 0;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    grid-template-rows: 100dvh;
    transition: grid-template-columns .34s cubic-bezier(.4, 0, .2, 1);
  }
  #app.side-closed { grid-template-columns: 0 minmax(0, 1fr); }

  #sidebar {
    display: flex; flex-direction: column;
    min-width: 0; overflow: hidden;
    background: var(--bg-secondary);
    border-right: 1px solid var(--separator);
  }
  #app.side-closed #sidebar { border-right-color: transparent; }

  /* Fixed inner width so the content does not reflow while the column animates */
  .side-head, .side-scroll { width: 288px; flex: none; }
  .side-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px 10px;
  }
  .side-brand { font-weight: 600; font-size: var(--t-subhead); }
  .side-toggle {
    width: 30px; height: 30px; border: 0; border-radius: 8px; padding: 0;
    background: var(--fill-tertiary); color: var(--label);
    display: grid; place-items: center; cursor: pointer; flex: none;
  }
  .side-scroll { flex: 1; overflow-y: auto; padding: 0 12px 20px; }
  .side-stats { display: grid; gap: 8px; margin-bottom: 18px; }
  .side-stat {
    background: var(--bg-elevated); border: 1px solid var(--separator);
    border-radius: 12px; padding: 11px 13px;
  }
  .side-stat b { display: block; font-size: var(--t-title2); letter-spacing: -.3px; }
  .side-stat span { font-size: var(--t-caption); color: var(--label-secondary); }
  .side-label {
    font-size: var(--t-caption); letter-spacing: .5px; text-transform: uppercase;
    color: var(--label-tertiary); font-weight: 600; margin: 0 0 8px 4px;
  }
  .side-list { display: flex; flex-direction: column; gap: 2px; }

  /* A sidebar topic is a compact row, not the full card used on the topics screen */
  .side-list .topic-row {
    display: flex; align-items: center; gap: 9px;
    width: 100%; text-align: left; border: 0; background: none;
    padding: 8px 10px; border-radius: 9px; cursor: pointer;
    font-size: var(--t-subhead); color: var(--label);
  }
  .side-list .topic-row:hover { background: var(--fill-quaternary); }
  .side-list .topic-row.on {
    background: var(--bg-elevated); font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
  }
  .side-list .topic-row .n { margin-left: auto; font-size: var(--t-caption); color: var(--label-tertiary); }
  .side-list .topic-row .side-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* The screens column scrolls on its own so the sidebar stays put */
  #screens { min-width: 0; overflow: hidden; display: flex; flex-direction: column; }

  /* With context in the sidebar, the desktop "phone window" framing is dropped */
  body { background: var(--bg-elevated); }
}


/* 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; }
.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); }
}