/* ==========================================================================
   GPTchatly — language practice pages (2026-09-28)
   The same world as index.html: warm paper ground, one lifted sheet, teal ink.
   This sheet adds a reading serif for the language being learned and red ink
   for corrections. UI text: Source Sans 3. Reading text: Literata.
   The page shell follows the languages hub: brand centred, tools top right,
   and on desktop one wide sheet with a vertical scroller over its right side.
   28b: section 15 adds the on-screen keyboards and the Speak button.
   28c: section 15 adds the Spanish keypad.
   28d: section 16 adds the security check before a first answer.
   28e: section 15 adds the French keypad.
   28f: section 15 adds the German keypad.
   28g: the sidebar becomes a column (earlier exchanges, then past lessons); section 17 adds past lessons.
   28h: six more tutors (Filipino, Italian, Hausa, Finnish, Swahili, Thai). Section 0 adds Thai and the
        Hausa hooked letters; section 8 wraps long compounds; section 15 adds the Italian, Finnish and
        Hausa keypads.
        Section 18 gives Thai room for its stacked vowels and tone marks, and lays out the Thai keypad.
   28i: small day-mode text reaches 4.5:1 (a deeper --ink-3; footer links in the deeper teal), and the
        keypad's space bar keeps its 14px label on phones.
   ========================================================================== */

/* 0. Fonts (self-hosted Latin, Cyrillic and Thai subsets, SIL Open Font License) */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/literata-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/literata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-sans-3-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Thai: a looped serif for the reading text (the loops help a learner tell letters apart) and the
   hub's Noto Sans Thai for the interface. Neither loads on a page without Thai text. */
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/noto-serif-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/noto-sans-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* Hausa: Literata and Source Sans 3 lack the hooked letters ɓ ɗ ƙ ƴ (and their capitals), so these
   eight glyphs come from SIL's Charis SIL (reading) and Andika (interface), drawn for African Latin
   letters: their hooks stay visible at reading size, where Noto's ƴ and Ƴ read as y and Y. */
@font-face {
  font-family: 'Charis SIL Hausa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/charis-sil-hausa.woff2') format('woff2');
  unicode-range: U+0181, U+018A, U+0198-0199, U+01B3-01B4, U+0253, U+0257;
}

@font-face {
  font-family: 'Andika Hausa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/andika-hausa.woff2') format('woff2');
  unicode-range: U+0181, U+018A, U+0198-0199, U+01B3-01B4, U+0253, U+0257;
}

@font-face {
  font-family: 'Andika Hausa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/andika-hausa-bold.woff2') format('woff2');
  unicode-range: U+0181, U+018A, U+0198-0199, U+01B3-01B4, U+0253, U+0257;
}

/* 1. Tokens ------------------------------------------------------------------ */
:root {
  --paper: #ebe5d9;
  --paper-deep: #e1dacb;
  --sheet: #faf8f2;
  --surface: #f3efe6;
  --surface-strong: #ffffff;

  --ink: #1b2027;
  --ink-2: #4d5764;
  --ink-3: #5a6471;

  --line: #ddd5c6;
  --line-strong: #c9c0af;

  --accent: #0f7665;
  --accent-hover: #0c6152;
  --accent-ink: #ffffff;
  --accent-tint: #e2efea;
  --accent-tint-2: #cbe3da;
  --accent-ring: rgba(15, 118, 101, 0.22);

  --correction: #b9432f;
  --correction-tint: #f6e3df;
  --warm-glow: rgba(214, 160, 60, 0.18);
  --flag-edge: rgba(27, 32, 39, 0.16);
  --sheet-highlight: rgba(255, 255, 255, 0.55);

  --shadow-sheet: 0 24px 48px -28px rgba(24, 28, 32, 0.32), 0 2px 6px -2px rgba(24, 28, 32, 0.08);
  --shadow-pop: 0 18px 40px -16px rgba(24, 28, 32, 0.35), 0 2px 8px -4px rgba(24, 28, 32, 0.12);
  --shadow-lift: 0 8px 18px -12px rgba(24, 28, 32, 0.4);

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --font-text: 'Source Sans 3', 'Andika Hausa', 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-read: 'Literata', 'Charis SIL Hausa', 'Noto Serif Thai', Georgia, 'Times New Roman', serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;
  --dur-slow: 520ms;

  --page-max: 1680px;
  --gutter: clamp(16px, 4vw, 64px);
  --rail-w: clamp(280px, 24vw, 340px);

  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  color-scheme: light;
}

:root.night-mode {
  --paper: #0f141a;
  --paper-deep: #0a0e13;
  --sheet: #161d25;
  --surface: #1b242e;
  --surface-strong: #212c38;

  --ink: #e9eef5;
  --ink-2: #aab5c2;
  --ink-3: #8c98a6;

  --line: #2a3644;
  --line-strong: #394859;

  --accent: #3cb7a2;
  --accent-hover: #52c7b3;
  --accent-ink: #08201b;
  --accent-tint: #183a35;
  --accent-tint-2: #1f4d45;
  --accent-ring: rgba(60, 183, 162, 0.28);

  --correction: #e57f6c;
  --correction-tint: #3a2320;
  --warm-glow: rgba(120, 96, 200, 0.16);
  --flag-edge: rgba(255, 255, 255, 0.14);
  --sheet-highlight: rgba(255, 255, 255, 0.04);

  --shadow-sheet: 0 28px 56px -30px rgba(0, 0, 0, 0.7), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 22px 48px -18px rgba(0, 0, 0, 0.75), 0 2px 10px -4px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 10px 22px -12px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}

/* 2. Base ------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--accent);
  accent-color: var(--accent);
}

/* the ground is lit, not flat */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 6% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(55% 50% at 100% 100%, var(--warm-glow), transparent 70%);
}

::selection {
  background: var(--accent-tint-2);
  color: var(--ink);
}

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

h1,
h2,
p,
dl,
dd,
ol {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent);
  transition: text-decoration-color var(--dur-fast) ease;
}

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

button,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

img,
svg {
  display: block;
}

kbd {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-strong);
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

[hidden] {
  display: none !important;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

.strip__list,
#user-input,
.menu__panel {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.strip__list::-webkit-scrollbar,
#user-input::-webkit-scrollbar,
.menu__panel::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.strip__list::-webkit-scrollbar-thumb,
#user-input::-webkit-scrollbar-thumb,
.menu__panel::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* 3. Motion ----------------------------------------------------------------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ink-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes tick {
  from {
    opacity: 0;
    transform: translateY(0.35em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* 4. Controls --------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 14px -8px rgba(15, 118, 101, 0.7);
}

.button--primary:not(:disabled):hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 10px 20px -10px rgba(15, 118, 101, 0.8);
}

.button--primary:not(:disabled):active {
  transform: translateY(0);
}

.button--secondary {
  background: var(--surface-strong);
  border-color: var(--line);
  color: var(--ink);
}

.button--secondary:not(:disabled):hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.button--secondary[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-hover);
}

.button--ghost {
  background: transparent;
  color: var(--ink-2);
}

.button--ghost:not(:disabled):hover {
  background: var(--surface-strong);
  color: var(--ink);
}

.button--danger {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.button--danger:not(:disabled):hover {
  border-color: var(--ink);
  background: var(--surface-strong);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  color: var(--ink-2);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.icon-button:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.icon-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent);
}

.link-button:hover {
  text-decoration-color: currentColor;
}

/* a switch is a button that shows its state */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  transition: color var(--dur-fast) ease;
}

.switch:hover {
  color: var(--ink);
}

.switch__track {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background-color var(--dur-fast) ease;
}

.switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform var(--dur-fast) var(--ease-out);
}

.switch[aria-pressed='true'] {
  color: var(--accent-hover);
}

.switch[aria-pressed='true'] .switch__track {
  background: var(--accent);
}

.switch[aria-pressed='true'] .switch__track::after {
  transform: translateX(14px);
}

.select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.select select {
  appearance: none;
  min-height: 34px;
  padding: 4px 30px 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.select {
  position: relative;
}

.select::after {
  content: '';
  position: absolute;
  right: 10px;
  width: 14px;
  height: 14px;
  background: var(--ink-3);
  -webkit-mask: var(--i-chevron) center / contain no-repeat;
  mask: var(--i-chevron) center / contain no-repeat;
  pointer-events: none;
}

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

.select select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-strong);
  font-family: var(--font-read);
  font-size: 16px;
  color: var(--ink);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.chip:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  transform: translateY(-1px);
}

/* flags drawn in CSS, the same idiom as the languages hub */
.flag {
  position: relative;
  display: inline-block;
  flex: none;
  width: 24px;
  height: 16px;
  overflow: hidden;
  border-radius: 3px;
  background-size: 100% 100%;
  box-shadow: inset 0 0 0 1px var(--flag-edge);
}

.flag[data-flag='es'] { background: linear-gradient(#c60b1e 25%, #ffc400 25% 75%, #c60b1e 75%); }
.flag[data-flag='fr'] { background: linear-gradient(90deg, #0055a4 33.3%, #fff 33.3% 66.6%, #ef4135 66.6%); }
.flag[data-flag='de'] { background: linear-gradient(#111 33.3%, #dd0000 33.3% 66.6%, #ffce00 66.6%); }
.flag[data-flag='pt'] { background: linear-gradient(90deg, #046a38 40%, #da291c 40%); }
.flag[data-flag='it'] { background: linear-gradient(90deg, #009246 33.3%, #fff 33.3% 66.6%, #ce2b37 66.6%); }
.flag[data-flag='ha'] { background: linear-gradient(90deg, #008751 33.3%, #fff 33.3% 66.6%, #008751 66.6%); }
.flag[data-flag='fil'] { background: linear-gradient(#0038a8 50%, #ce1126 50%); }
.flag[data-flag='fil']::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(0 0, 46% 50%, 0 100%);
}
.flag[data-flag='fi'] {
  background:
    linear-gradient(#003580, #003580) 0 50% / 100% 26% no-repeat,
    linear-gradient(#003580, #003580) 30% 0 / 22% 100% no-repeat,
    #fff;
}
.flag[data-flag='ru'] { background: linear-gradient(#fff 33.3%, #0039a6 33.3% 66.6%, #d52b1e 66.6%); }
.flag[data-flag='sw'] { background: linear-gradient(#000 0 30%, #fff 30% 35%, #bb0000 35% 65%, #fff 65% 70%, #006600 70%); }
.flag[data-flag='th'] { background: linear-gradient(#a51931 0 16.7%, #f4f5f8 16.7% 33.3%, #2d2a4a 33.3% 66.7%, #f4f5f8 66.7% 83.3%, #a51931 83.3%); }
/* 28j: the English tutor for Spanish speakers (aprender/) teaches UK English */
.flag[data-flag='gb'] { background: #012169 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='none'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23t)' stroke='%23c8102e' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23c8102e' stroke-width='6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* 5. Top bar ---------------------------------------------------------------- */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 12px var(--gutter);
}

.brand {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

.brand__logo {
  width: 36px;
  height: 36px;
  flex: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand__subtitle {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.topbar__tools {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topnav {
  display: flex;
  align-items: center;
}

.menu {
  position: relative;
}

.menu__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.menu__button::-webkit-details-marker {
  display: none;
}

.menu__button:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.menu__button .icon {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  transition: transform var(--dur-fast) ease;
}

.menu[open] .menu__button .icon {
  transform: rotate(180deg);
}

.menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: 248px;
  max-height: min(70vh, 560px);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-strong);
  box-shadow: var(--shadow-pop);
  animation: pop var(--dur-fast) var(--ease-out);
}

.menu__panel a,
.menu__panel .menu__current {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.menu__panel a:hover {
  background: var(--accent-tint);
  color: var(--accent-hover);
}

.menu__current {
  color: var(--accent-hover);
  font-weight: 600;
}

.menu__current .icon {
  width: 16px;
  height: 16px;
  margin-left: auto;
}

.menu__panel hr {
  height: 1px;
  margin: 6px 4px;
  border: 0;
  background: var(--line);
}

/* 6. Page column ------------------------------------------------------------ */
.practice {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 24px;
}

.intro {
  padding: 20px 0 24px;
  text-align: center;
}

/* the H1 stays smaller than the tutor's question, the largest line on the page */
.intro h1 {
  font-family: var(--font-read);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.intro__lead {
  max-width: 60ch;
  margin: 10px auto 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* 7. Earlier exchanges strip ------------------------------------------------ */
.strip {
  margin: 0 calc(var(--gutter) * -1) 10px;
  padding: 0 var(--gutter);
}

.strip__label,
.starters__label {
  display: none;
}

.strip__list {
  display: flex;
  gap: 8px;
  padding: 4px 2px 10px;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
}

.strip__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 184px;
  flex: none;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-strong);
  color: var(--ink-2);
  text-align: left;
  scroll-snap-align: center;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.strip__card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.strip__card[aria-current] {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--ink);
}

.strip__card.is-new {
  animation: pop var(--dur-med) var(--ease-out);
}

.strip__number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.strip__card[aria-current] .strip__number {
  color: var(--accent-hover);
}

.strip__you {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 13px;
  line-height: 1.4;
}

.strip__tutor {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--font-read);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}

/* 8. Stage ------------------------------------------------------------------ */
.stage {
  position: relative;
  padding: 18px 24px 22px;
  border-radius: var(--r-lg);
  background: var(--sheet);
  box-shadow: var(--shadow-sheet), 0 1px 0 var(--sheet-highlight) inset;
  outline-offset: 4px;
}

.stage__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.stage__settings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.stage__hint {
  font-size: 13px;
  color: var(--ink-3);
}

.stage__empty {
  padding: 26px 0 8px;
}

.stage__hello {
  font-family: var(--font-read);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.stage__prompt {
  max-width: 52ch;
  margin-top: 14px;
  font-size: 17px;
  color: var(--ink-2);
  text-wrap: pretty;
}

.starters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.card {
  padding-top: 14px;
}

.card.is-new {
  animation: rise var(--dur-slow) var(--ease-out);
}

.card__you {
  margin-top: 8px;
  font-family: var(--font-read);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-2);
}

.card__you-label {
  margin-right: 8px;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: 0.15em;
}

.card__blocks {
  margin-top: 6px;
}

/* each line of the reply is a row: a hanging role label, the Russian, and its English
   support beside or beneath it. The label column is only as wide as the label, so
   unlabelled lines start at the left edge and every line of a labelled one shares an x. */
.block {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-areas: 'label ru' '. en';
  column-gap: 0;
  align-items: start;
  margin-top: 18px;
}

.block__label {
  grid-area: label;
  align-self: baseline;
  margin-right: 8px;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-3);
}

.block--correction .block__label {
  color: var(--correction);
}

.block--question .block__label {
  color: var(--accent-hover);
}

.block__ru {
  grid-area: ru;
  min-width: 0;
  align-self: baseline;
}

.block__en {
  grid-area: en;
  min-width: 0;
  margin-top: 6px;
  outline: none;
}

/* 28k: a line break inside one tagged section (the tutor's own, or a <br> it wrote) shows as a break, not a space */
.block .ru,
.block .en {
  white-space: pre-line;
}

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

.ru {
  font-family: var(--font-read);
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

.block--correction .ru {
  color: var(--correction);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in oklab, var(--correction) 45%, transparent);
}

.card.is-new .block--correction .ru {
  animation: ink-in var(--dur-slow) var(--ease-out) 120ms both;
}

.block--question .ru {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.en {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.en + .en {
  margin-top: 6px;
}

/* English waits behind a note until the reader asks for it */
.block:not(.is-revealed) .en {
  display: none;
}

.block.is-revealed .en {
  animation: rise var(--dur-med) var(--ease-out);
}

.block.is-revealed .block__reveal {
  display: none;
}

.block__reveal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) ease;
}

.block__reveal .icon {
  width: 16px;
  height: 16px;
}

.block__reveal:hover {
  color: var(--accent-hover);
  text-decoration-style: solid;
}

@media (min-width: 721px) {
  /* a fixed label column on every line, including the You line, so all the
     Russian shares one left edge; the English column is a fixed share of the
     block, so its hairline lines up from block to block */
  .block {
    grid-template-columns: 84px minmax(0, 1fr) 40%;
    grid-template-areas: 'label ru en';
  }

  .card__you {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: baseline;
  }

  .block__ru {
    padding-right: 24px;
  }

  .block__en {
    margin-top: 0;
    padding-left: 24px;
    border-left: 1px solid var(--line);
  }
}

/* Listen on the left, the exchange controls centred under the reply as on the
   languages hub, the way back to the latest on the right */
.card__actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 'listen nav latest';
  align-items: center;
  gap: 12px 16px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.card__listen {
  grid-area: listen;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-width: 0;
}

.card__audio {
  font-size: 13px;
  color: var(--ink-3);
}

.card__nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: 14px;
}

.card__index {
  min-width: 132px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

#stage-latest {
  grid-area: latest;
  justify-self: end;
}

#play-speech[data-playing='true'] .icon {
  color: var(--accent-hover);
}

/* the tutor writing: skeleton lines, not a spinner */
.thinking {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.thinking__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

.thinking__line {
  height: 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--surface) 0%, var(--paper-deep) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

.thinking__line--short {
  width: 55%;
}

/* long compounds (Finnish työttömyysturvajärjestelmä) wrap instead of widening the page on a phone */
.ru,
.card__you,
.strip__you,
.strip__tutor,
.lessons__snippet {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* 9. Composer --------------------------------------------------------------- */
.composer {
  margin-top: 12px;
  padding: 16px 24px 18px;
  border-radius: var(--r-lg);
  background: var(--sheet);
  box-shadow: var(--shadow-sheet), 0 1px 0 var(--sheet-highlight) inset;
}

.composer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 10px;
}

.composer__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.composer__label [lang='ru'] {
  letter-spacing: 0.04em;
}

.composer__tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

#user-input {
  display: block;
  width: 100%;
  min-height: 74px;
  max-height: 260px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-strong);
  font-family: var(--font-read);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  resize: vertical;
  field-sizing: content;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

#user-input::placeholder {
  color: var(--ink-3);
  font-family: var(--font-text);
  font-size: 16px;
}

#user-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

#user-input:read-only {
  background: var(--surface);
}

.composer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 10px;
}

.composer__hint {
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.composer__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.status {
  min-height: 1.5em;
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-2);
}

.status[data-state='error'] {
  color: var(--correction);
}

.status:empty {
  margin-top: 0;
  min-height: 0;
}

.help {
  position: relative;
}

.help__button {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-strong);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  list-style: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.help__button .icon {
  width: 15px;
  height: 15px;
}

.help__button::-webkit-details-marker {
  display: none;
}

.help__button:hover,
.help[open] .help__button {
  border-color: var(--accent);
  color: var(--accent-hover);
}

.help__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: min(300px, calc(100vw - 32px));
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-strong);
  box-shadow: var(--shadow-pop);
  font-size: 14px;
  color: var(--ink-2);
  animation: pop var(--dur-fast) var(--ease-out);
}

.help__panel p + p {
  margin-top: 8px;
}

.help__table {
  display: grid;
  grid-template-columns: repeat(2, auto 1fr);
  gap: 4px 10px;
  margin: 10px 0;
  align-items: center;
}

.help__table dt {
  justify-self: start;
}

.help__table dd {
  font-family: var(--font-read);
  font-size: 16px;
  color: var(--ink);
}

/* 10. Session footer -------------------------------------------------------- */
.session {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 0 8px;
  text-align: center;
}

.session__count {
  font-size: 14px;
  color: var(--ink-2);
}

.session__number {
  display: inline-block;
  min-width: 1.2em;
  font-family: var(--font-read);
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  vertical-align: -0.1em;
}

.session__number.is-ticking {
  animation: tick var(--dur-med) var(--ease-out);
}

.session__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 28k: when the two buttons wrap on a phone they stay centred under the count */
  gap: 6px;
}

.confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: 100%;
  max-width: 640px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  animation: pop var(--dur-fast) var(--ease-out);
}

.confirm p {
  flex: 1 1 100%;
  font-size: 14px;
  color: var(--ink);
}

.session__note {
  width: 100%;
  max-width: 70ch;
  margin-inline: auto;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* 11. Site footer ----------------------------------------------------------- */
.site-footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 40px var(--gutter) 44px;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

.site-footer p + p {
  margin-top: 6px;
}

/* the footer sits on the paper ground, where the accent teal is 4.41:1; the deeper teal is 5.9:1 */
.site-footer a,
.site-footer .link-button {
  color: var(--accent-hover);
}

/* 12. Consent --------------------------------------------------------------- */
.consent {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--sheet);
  box-shadow: var(--shadow-pop);
  animation: rise var(--dur-med) var(--ease-out);
}

.consent p {
  flex: 1 1 260px;
  font-size: 14px;
  color: var(--ink-2);
}

.consent__actions {
  display: flex;
  gap: 8px;
}

/* 13. Desktop: one wide sheet, the scroller over its right side ---------- */
@media (min-width: 1200px) {
  .intro {
    padding: 26px 0 26px;
  }

  .intro h1 {
    font-size: 29px;
  }

  .intro__lead {
    font-size: 18px;
  }

  .hero {
    position: relative;
    padding-right: calc(var(--rail-w) + 24px);
    border-radius: var(--r-lg);
    background: var(--sheet);
    box-shadow: var(--shadow-sheet), 0 1px 0 var(--sheet-highlight) inset;
  }

  .hero .stage,
  .hero .composer {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .hero .stage {
    padding: 28px 40px 26px;
  }

  /* the composer shares the sheet; a hairline inset like the stage bar's sets it off */
  .hero .composer {
    position: relative;
    margin-top: 0;
    padding: 22px 40px 30px;
  }

  .hero .composer::before {
    content: '';
    position: absolute;
    top: 0;
    right: 40px;
    left: 40px;
    height: 1px;
    background: var(--line);
  }

  /* the sidebar: earlier exchanges once the conversation starts, then past lessons */
  .hero .rail {
    position: absolute;
    top: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: var(--rail-w);
    pointer-events: none;
  }

  .hero .rail > * {
    pointer-events: auto;
  }

  /* the vertical scroller: earlier exchanges once the conversation starts */
  .hero .strip {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .strip__label,
  .starters__label {
    display: block;
    padding: 6px 2px 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ink-3);
  }

  .hero .strip__list {
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: 8px 6px 12px 2px;
    overflow: hidden auto;
    scroll-snap-type: y proximity;
    scroll-padding-block: 12px;
    -webkit-mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 24px), transparent);
  }

  .hero .strip__card {
    width: 100%;
    gap: 3px;
    padding: 11px 14px 12px;
    scroll-snap-align: start;
  }

  .hero .strip__card:hover {
    transform: none;
  }

  .hero .strip__tutor {
    font-size: 15px;
  }

  /* before the first message the same place holds the starter phrases */
  .starters {
    position: absolute;
    top: 24px;
    left: calc(100% + 0px);
    z-index: 2;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
    width: var(--rail-w);
    margin-top: 0;
  }

  .starters .chip {
    justify-content: flex-start;
    min-height: 56px;
    padding: 8px 16px;
    border-radius: var(--r-md);
    font-size: 19px;
    text-align: left;
  }

  .starters .chip:hover {
    transform: none;
  }
}

/* 14. Phones ---------------------------------------------------------------- */
@media (max-width: 720px) {
  .menu__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .intro {
    padding: 10px 0 18px;
  }

  .intro h1 {
    font-size: 23px;
  }

  .intro__lead {
    font-size: 15px;
  }

  .stage,
  .composer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .stage__hello {
    font-size: 44px;
  }

  .stage__prompt,
  .card__you {
    font-size: 16px;
  }

  .ru {
    font-size: 20px;
  }

  .block--question .ru {
    font-size: 25px;
  }

  .block__label {
    margin-right: 6px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .card__actions {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'listen latest' 'nav nav';
  }

  .card__nav {
    justify-self: center;
  }

  #user-input {
    font-size: 18px;
  }

  .composer__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .composer__actions {
    margin-left: 0;
  }

  .composer__actions .button {
    flex: 1;
  }

  .session {
    padding: 0 2px;
  }

  /* 28k: transparent buttons need less side padding, so the two session buttons fit on one line on a phone */
  .session__actions .button {
    padding-inline: 10px;
  }

  .consent {
    right: 8px;
    bottom: 8px;
    left: 8px;
  }

  .consent__actions {
    width: 100%;
  }

  .consent__actions .button {
    flex: 1;
  }
}

@media (max-width: 380px) {
  /* on the narrowest phones measure is scarce: the label runs into the first line
     and the English support takes the full width under it */
  .block {
    display: block;
  }

  .block__label {
    float: left;
    margin: 14px 6px 0 0;
  }

  .block__en {
    clear: both;
  }

  .brand__subtitle {
    display: none;
  }

  .stage__settings {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .thinking__line {
    animation: none;
    background: var(--paper-deep);
  }
}

@media print {
  body::before,
  .topbar,
  .strip,
  .starters,
  .composer,
  .session__actions,
  .confirm,
  .consent,
  .site-footer,
  .card__nav,
  .card__actions {
    display: none !important;
  }

  .stage,
  .hero {
    box-shadow: none;
  }
}

/* 15. On-screen keyboard and voice answers ----------------------------------- */
/* a composer tool that opens something shows whether it is open */
.tool-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  margin-left: 6px;
  padding: 3px 11px 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-strong);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.tool-button .icon {
  width: 17px;
  height: 17px;
}

.tool-button:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.tool-button[aria-expanded='true'] {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-hover);
}

/* the keys sit on a tray under the answer, keycaps in the kbd style */
.keyboard {
  margin-top: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  animation: pop var(--dur-fast) var(--ease-out);
}

/* Russian: 22 half-key columns, so letters take two and Shift, Backspace and the
   space bar can be one and a half or three keys wide. Portuguese, Spanish, French and German: one key a column. */
.keyboard__row {
  display: grid;
  grid-template-columns: repeat(22, minmax(0, 1fr));
  gap: 6px;
  max-width: 40rem;
  margin-inline: auto;
}

.keyboard__row + .keyboard__row {
  margin-top: 6px;
}

.keyboard[data-layout='pt'] .keyboard__row {
  grid-template-columns: repeat(14, minmax(0, 1fr));
}

.keyboard[data-layout='es'] .keyboard__row {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.keyboard[data-layout='fr'] .keyboard__row {
  grid-template-columns: repeat(16, minmax(0, 1fr));
}

/* German: six keys, as wide as the Spanish ones, centred */
.keyboard[data-layout='de'] .keyboard__row {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: 22rem;
}

/* Italian, Finnish and Hausa: one row of keys as wide as the German ones, centred */
.keyboard[data-layout='it'] .keyboard__row {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  max-width: 29.5rem;
}

.keyboard[data-layout='fi'] .keyboard__row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 18.25rem;
}

.keyboard[data-layout='ha'] .keyboard__row {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  max-width: 25.75rem;
}

.key {
  grid-column: span 2;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--surface-strong);
  box-shadow: 0 2px 0 var(--line-strong);
  font-family: var(--font-read);
  font-size: 19px;
  line-height: 1;
  color: var(--ink);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform 60ms ease, box-shadow 60ms ease;
}

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

.key:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--line-strong);
}

.key--mark,
.key--shift,
.key--backspace,
.key--space {
  font-family: var(--font-text);
  color: var(--ink-2);
}

.key--shift,
.key--backspace {
  grid-column: span 3;
}

.key--shift[aria-pressed='true'] .icon {
  fill: currentColor;
}

.key--space {
  grid-column: span 6;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.keyboard[data-layout='pt'] .key,
.keyboard[data-layout='es'] .key,
.keyboard[data-layout='fr'] .key,
.keyboard[data-layout='de'] .key,
.keyboard[data-layout='it'] .key,
.keyboard[data-layout='fi'] .key,
.keyboard[data-layout='ha'] .key {
  grid-column: span 1;
}

.key--shift[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: 0 2px 0 var(--accent);
  color: var(--accent-hover);
}

.voice {
  --level: 0;
}

.voice__time {
  min-width: 2.4em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

/* while recording, the ring grows with the voice so the learner sees the microphone hearing them */
.button.voice[data-state='recording'] {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-hover);
  box-shadow: 0 0 0 calc(2px + var(--level) * 6px) var(--accent-ring);
  transition: box-shadow 90ms linear, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.button.voice[data-state='working'] {
  cursor: progress;
}

.button.voice[data-state='working']:disabled {
  opacity: 0.75;
}

@media (max-width: 720px) {
  /* the tray reaches nearly to the sheet's edges, so eleven keys a row stay at
     least 24px apart on a 320px phone */
  .keyboard {
    margin-inline: -12px;
    padding: 6px;
  }

  .keyboard__row {
    gap: 4px;
  }

  .keyboard__row + .keyboard__row {
    margin-top: 5px;
  }

  .key {
    height: 42px;
    font-size: 18px;
  }

  .key--space {
    font-size: 14px;
  }

  .keyboard[data-layout='pt'] .keyboard__row {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  /* Spanish: six a row, Backspace filling the second row's spare column */
  .keyboard[data-layout='es'] .keyboard__row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .keyboard[data-layout='es'] .key--backspace {
    grid-column: span 2;
  }

  /* French: eight a row, Shift opening the first and Backspace closing the second */
  .keyboard[data-layout='fr'] .keyboard__row {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .composer__actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 380px) {
  /* beside the Latin → Cyrillic switch the keyboard tool keeps only its icon */
  .composer__tools:has(.switch) .tool-button__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .composer__tools:has(.switch) .tool-button {
    padding: 3px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button.voice[data-state='recording'] {
    box-shadow: 0 0 0 3px var(--accent-ring);
  }
}

/* 16. Security check (Cloudflare Turnstile) --------------------------------- */
/* Takes no room until Cloudflare asks for a click; then its box sits under the status line. */
.human-check__note {
  display: none;
}

.human-check[data-state='interactive'] {
  margin-top: 12px;
}

.human-check[data-state='interactive'] .human-check__note {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--ink-2);
}

/* 17. Past lessons ------------------------------------------------------------ */
/* Each visit is one lesson, kept in this browser. Past lessons follow the earlier exchanges in the
   sidebar from 1200px and sit in a strip under the session below it; one opens in a reading sheet
   that slides over the page from the right. */
.lessons__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lessons__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 4px 2px 10px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.lessons__list > li {
  flex: none;
  scroll-snap-align: start;
}

.lessons__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'when count' 'snippet snippet';
  align-items: baseline;
  gap: 3px 10px;
  width: 232px;
  height: 100%;
  padding: 10px 12px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-strong);
  color: var(--ink-2);
  text-align: left;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.lessons__card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.lessons__card.is-new {
  animation: pop var(--dur-med) var(--ease-out);
}

.lessons__when {
  grid-area: when;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.lessons__count {
  grid-area: count;
  font-size: 12px;
  white-space: nowrap;
  color: var(--ink-3);
}

.lessons__snippet {
  grid-area: snippet;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--font-read);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}

/* below 1200px: a strip under the session, centred while it fits */
.lessons--flow {
  margin: 30px calc(var(--gutter) * -1) 0;
  padding: 0 var(--gutter);
  text-align: center;
}

.lessons__note {
  max-width: 60ch;
  margin: 4px auto 10px;
  font-size: 13px;
  color: var(--ink-3);
  text-wrap: pretty;
}

.lessons--flow .lessons__list > :first-child {
  margin-left: auto;
}

.lessons--flow .lessons__list > :last-child {
  margin-right: auto;
}

.lessons--rail {
  display: none;
}

@media (min-width: 1200px) {
  .lessons--flow {
    display: none;
  }

  .lessons--rail {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    min-height: 0;
    max-height: 45%;
  }

  /* before the first message the starter phrases hold the top of the sidebar; past lessons follow them */
  .hero .strip[hidden] + .lessons--rail {
    max-height: none;
    margin-top: 296px;
  }

  .lessons--rail .lessons__label {
    padding: 6px 2px 4px;
  }

  .lessons--rail .lessons__list {
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: 8px 6px 12px 2px;
    overflow: hidden auto;
    scroll-snap-type: y proximity;
    scroll-padding-block: 12px;
    -webkit-mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 24px), transparent);
  }

  .lessons--rail .lessons__card {
    width: 100%;
  }

  .lessons--rail .lessons__card:hover {
    transform: none;
  }

  .lessons--rail .lessons__snippet {
    -webkit-line-clamp: 1;
  }
}

/* one past lesson, read in a sheet over the page's right side */
.lesson-view {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(760px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--sheet);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}

.lesson-view[open] {
  animation: sheet-in var(--dur-med) var(--ease-out);
}

.lesson-view::backdrop {
  background: rgba(15, 20, 26, 0.42);
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.lesson-view__sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.lesson-view__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px 14px;
}

.lesson-view__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lesson-view__title {
  margin-top: 6px;
  font-family: var(--font-read);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lesson-view__meta {
  margin-top: 4px;
  font-size: 14px;
  color: var(--ink-2);
}

.lesson-view__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 32px 14px;
  border-bottom: 1px solid var(--line);
}

.lesson-view__tools .confirm {
  max-width: none;
  margin-top: 6px;
  justify-content: flex-start;
  text-align: left;
}

.lesson-view__body {
  flex: 1;
  min-height: 0;
  padding: 0 32px 24px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.lesson-view__transcript {
  padding: 0;
  list-style: none;
}

.lesson-turn {
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--line);
}

.lesson-turn:last-child {
  border-bottom: 0;
}

.lesson-turn__number {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.lesson-view .card__you {
  margin-top: 4px;
  font-size: 16px;
}

.lesson-view .card__blocks {
  margin-top: 0;
}

/* a transcript reads down the page: each line's English, when shown, sits under it */
.lesson-view .block {
  grid-template-areas: 'label ru' '. en';
  margin-top: 10px;
}

.lesson-view .block__en {
  margin-top: 4px;
  padding-left: 0;
  border-left: 0;
}

.lesson-view .block:not(.is-revealed) .block__en {
  display: none;
}

.lesson-view .ru {
  font-size: 19px;
}

.lesson-view .block--question .ru {
  font-size: 21px;
  line-height: 1.35;
}

.lesson-view__note {
  padding: 12px 32px 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
}

@media (min-width: 721px) {
  .lesson-view .block {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .lesson-view .block__ru {
    padding-right: 0;
  }
}

@media (max-width: 720px) {
  .lesson-view {
    width: 100vw;
    border-left: 0;
  }

  .lesson-view__head {
    padding: 18px 16px 12px;
  }

  .lesson-view__title {
    font-size: 21px;
  }

  .lesson-view__tools {
    padding: 0 16px 12px;
  }

  .lesson-view__body {
    padding: 0 16px 20px;
  }

  .lesson-view__note {
    padding: 10px 16px 14px;
  }

  .lesson-view .ru {
    font-size: 18px;
  }

  .lesson-view .block--question .ru {
    font-size: 20px;
  }
}

@media print {
  .lessons {
    display: none !important;
  }
}

/* 18. Thai ------------------------------------------------------------------- */
/* Thai stacks vowels and tone marks up to two deep above its letters and hangs some below them. At the Latin
   line heights a question's marks reach the next line, and the clamped strip and lesson snippets, and the
   correction once it has inked in (its clip-path ends at its own box), cut them off; these heights keep
   every mark inside its line. Thai is never tracked, and it breaks between words by the browser's
   dictionary, which lang="th" selects. */
.ru:lang(th) {
  line-height: 1.65;
}

.block--question .ru:lang(th) {
  line-height: 1.55;
  letter-spacing: 0;
}

.strip__you:lang(th) {
  line-height: 1.7;
}

.strip__tutor:lang(th),
.lessons__snippet:lang(th) {
  line-height: 1.65;
}

.stage__hello:lang(th),
.composer__label :lang(th) {
  letter-spacing: 0;
}

/* The Thai keypad (js/virtual-keyboard.js): the whole script in two layers of five rows, eleven keys at
   most, so each layer keeps the tray's height and the bottom row never moves. Rows are centred, a key
   keeps its width in a shorter row, and keys stay at least 24px apart on a 320px phone. */
.keyboard[data-layout='th'] {
  --th-gap: 6px;
}

.keyboard[data-layout='th'] .keyboard__row {
  display: flex;
  justify-content: center;
  gap: var(--th-gap);
}

.keyboard[data-layout='th'] .key {
  flex: 0 0 calc((100% - 10 * var(--th-gap)) / 11);
}

.keyboard[data-layout='th'] .key--layer,
.keyboard[data-layout='th'] .key--backspace {
  flex-basis: calc((100% - 10 * var(--th-gap)) / 11 * 2 + var(--th-gap));
}

.keyboard[data-layout='th'] .key--space {
  flex: 1 1 0;
  letter-spacing: 0;
}

.keyboard[data-layout='th'] .key--layer {
  font-size: 17px;
  color: var(--ink-2);
}

/* vowels and tone marks are small beside a letter, so their layer prints them larger */
.keyboard[data-layout='th'] .keyboard__layer[data-layer='1'] .key[data-char] {
  font-size: 24px;
}

@media (max-width: 720px) {
  .keyboard[data-layout='th'] {
    --th-gap: 4px;
  }

  .keyboard[data-layout='th'] .keyboard__layer[data-layer='1'] .key[data-char] {
    font-size: 22px;
  }

  /* ◌ำ is the one label two glyphs wide; it stays inside its key on a 320px phone */
  .keyboard[data-layout='th'] .keyboard__layer[data-layer='1'] .key[data-char='\E33'] {
    font-size: 16px;
  }
}