/* Owner: B (Frontend). Aven design system, shared by index.html (Direction A), signs.html (Direction B) and stt_test.html.
   Built on the structure of Project V7 (Kursolog) and University App (AZMİU):
     1. tokens: --kd-* (the same names as both projects) + --av-* (Aven, like --az-* there), light and dark
        (:root[data-theme="dark"], set before the first paint by the inline script in each page's <head>)
     2. fonts and base   3. shell: top bar, header, footer   4. components: buttons, cards, fields, alerts
     5. Direction A   6. Direction B   7. STT test page   8. phone, landscape phone, tablet, laptop/projector
     9. motion, contrast
   Users: deaf signers and the hearing people they talk to, at a service desk, on a laptop or a phone at arm's length.
   Not tiring: no pure white page and no pure black text, one brand colour (the logo's purple) used sparingly,
   status shown with tinted colours + an icon + text instead of big solid blocks that flash on every sign,
   large type, a calm dark theme, little motion and none with "reduce motion". */

/* ==================== 1. TOKENS ==================== */
:root {
  /* shared design tokens (--kd-*): neutrals carry a little of the brand hue, as in Project V7 */
  --kd-ink: #211B2E;
  --kd-body: #4F4860;
  --kd-muted: #6B6380;
  --kd-nav: #453E55;
  --kd-line: #E7E3F0;
  --kd-line-soft: #DAD4E8;
  --kd-primary: #5B2BA6;
  --kd-primary-strong: #4A2188;
  --kd-primary-ink: #5B2BA6;
  --kd-deep: #241432;
  --kd-tint: #F4F1FA;
  --kd-tint-strong: #EAE3F8;
  --kd-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --kd-sans: "Onest", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  /* Aven tokens (--av-*): surfaces, status triples (colour / tint / ink, as in University App) */
  --av-bg: #F6F5FA;
  --av-surface: #FFFFFF;
  --av-raised: #FFFFFF;
  --av-surface-soft: #F3F1F8;
  --av-on-tint: #3D1C70;
  --av-ok: #0E9F6E;
  --av-ok-tint: #DDF5EA;
  --av-ok-ink: #046C4E;
  --av-warn: #D97706;
  --av-warn-tint: #FDF1D8;
  --av-warn-ink: #8A4B08;
  --av-bad: #D92D20;
  --av-bad-tint: #FDE8E7;
  --av-bad-ink: #B42318;
  --av-shadow-soft: 0 1px 2px rgb(36 20 50 / 5%);
  --av-shadow: 0 10px 28px rgb(36 20 50 / 8%);
  --av-topbar-bg: #241432;
  --av-topbar-text: rgb(255 255 255 / 88%);
  --av-stage-bg: #100D16;
  --av-mark-bg: linear-gradient(140deg, #7A45D0 0%, #5B2BA6 55%, #44207A 100%);

  --motion-fast: 120ms;
  --motion-base: 180ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --page-max: 1240px;
  --gutter: 24px;

  /* status icons for the pill (CSS masks: the pill's text is written by app.js, so no markup can go inside) */
  --ic-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 15V5.5a1.5 1.5 0 0 1 3 0V12M11 11.5V4a1.5 1.5 0 0 1 3 0v7.5M14 11.5V6a1.5 1.5 0 0 1 3 0v6.5M17 12.5V9a1.5 1.5 0 0 1 3 0v5.5a7.5 7.5 0 0 1-7.5 7.5H12a6.5 6.5 0 0 1-5-2.4l-3.2-4a1.7 1.7 0 0 1 2.6-2.2L8 15'/%3E%3C/svg%3E");
  --ic-loader: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E");
  --ic-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='black'/%3E%3C/svg%3E");
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ic-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.3a2.5 2.5 0 0 1 4.8.9c0 1.6-2.4 2.2-2.4 3.8M12 17.2h.01'/%3E%3C/svg%3E");
  --ic-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8 2.6 19.8h18.8zM12 10v4.4M12 17h.01'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* Dark: plum-tinted greys instead of black, off-white text (less halation), lighter purple for text on dark */
:root[data-theme="dark"] {
  --kd-ink: #ECE8F4;
  --kd-body: #C3BCD3;
  --kd-muted: #A79FBA;
  --kd-nav: #D3CCE2;
  --kd-line: rgb(255 255 255 / 9%);
  --kd-line-soft: rgb(255 255 255 / 15%);
  --kd-primary: #7B4FD6;
  --kd-primary-strong: #6A3FC4;
  --kd-primary-ink: #C1ADF5;
  --kd-tint: rgb(255 255 255 / 5%);
  --kd-tint-strong: rgb(123 79 214 / 24%);

  --av-bg: #121019;
  --av-surface: #1B1824;
  --av-raised: #26222F;
  --av-surface-soft: #17141F;
  --av-on-tint: #DCD0FA;
  --av-ok: #34D399;
  --av-ok-tint: rgb(52 211 153 / 14%);
  --av-ok-ink: #7EE2B8;
  --av-warn: #F5A524;
  --av-warn-tint: rgb(245 165 36 / 14%);
  --av-warn-ink: #FCCB6E;
  --av-bad: #F87171;
  --av-bad-tint: rgb(248 113 113 / 14%);
  --av-bad-ink: #FCA5A5;
  --av-shadow-soft: 0 1px 2px rgb(0 0 0 / 30%);
  --av-shadow: 0 10px 28px rgb(0 0 0 / 35%);
  --av-topbar-bg: #0B0911;
  --av-topbar-text: rgb(255 255 255 / 80%);
  --av-stage-bg: #08070B;
  --av-mark-bg: linear-gradient(140deg, #8A5BE0 0%, #6A3FC4 55%, #4E2694 100%);

  color-scheme: dark;
}

/* High contrast (ui.js, "Aa" panel): darker text and lines, stronger status inks, 2 px borders below */
:root[data-contrast="high"] {
  --kd-ink: #120E1A;
  --kd-body: #211B2E;
  --kd-muted: #362F44;
  --kd-nav: #211B2E;
  --kd-line: #6B6380;
  --kd-line-soft: #4F4860;
  --kd-primary: #4A2188;
  --kd-primary-strong: #3A1A6C;
  --kd-primary-ink: #3D1C70;
  --av-bg: #FFFFFF;
  --av-surface-soft: #F1EEF7;
  --av-ok-ink: #03543B;
  --av-warn-ink: #6B3A05;
  --av-bad-ink: #8F1C13;
}

:root[data-theme="dark"][data-contrast="high"] {
  --kd-ink: #FFFFFF;
  --kd-body: #F1ECFA;
  --kd-muted: #DCD4EA;
  --kd-nav: #FFFFFF;
  --kd-line: rgb(255 255 255 / 45%);
  --kd-line-soft: rgb(255 255 255 / 62%);
  --kd-primary: #6A3FC4;
  --kd-primary-strong: #5B33AE;
  --kd-primary-ink: #DCCFFF;
  --av-bg: #08070B;
  --av-surface: #121019;
  --av-raised: #1E1A28;
  --av-surface-soft: #100D16;
  --av-ok-ink: #A7F3D0;
  --av-warn-ink: #FDE68A;
  --av-bad-ink: #FECACA;
}

/* ==================== 2. FONTS AND BASE ==================== */
/* Archivo (headings) and Onest (text): the University App's Azerbaijani subsets, where Ə ə and İ ı are the fonts'
   own glyphs. SIL Open Font License 1.1, see fonts/OFL.txt. Other Latin letters fall back to the system font. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/archivo-az.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+011E-011F, U+0130-0131, U+0152-0153, U+015E-015F, U+018F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BC, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/onest-az.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+011E-011F, U+0130-0131, U+0152-0153, U+015E-015F, U+018F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BC, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }

/* Author display rules (.btn, .card...) must not undo the hidden attribute that app.js and signs.js toggle */
[hidden] { display: none !important; }

/* Text size (ui.js, "Aa" panel): every size is in rem, so one factor scales the whole page */
:root { --text-scale: 1; }
:root[data-text="1"] { --text-scale: 1.12; }
:root[data-text="2"] { --text-scale: 1.25; }

html {
  font-size: calc(106.25% * var(--text-scale));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--av-bg);
  color: var(--kd-ink);
  font-family: var(--kd-sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--kd-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p, ol, ul { margin: 0; }

a {
  color: var(--kd-primary-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { text-decoration-thickness: 2px; }

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

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--kd-primary) 55%, transparent);
  outline-offset: 2px;
}

main:focus { outline: none; }

::selection { background: color-mix(in srgb, var(--kd-primary) 24%, transparent); }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* app.js writes "ok" / "bad" / "note bad" into className; these keep their meaning on any element */
.ok { color: var(--av-ok-ink); }
.bad { color: var(--av-bad-ink); }

.note { font-size: 0.9rem; line-height: 1.5; color: var(--kd-muted); }
.note.bad { color: var(--av-bad-ink); font-weight: 600; }
.note:empty, .status:empty { display: none; }

/* ==================== 3. SHELL ==================== */
.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--kd-primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top var(--motion-fast) var(--ease-standard);
}

.skip:focus { top: 10px; }

/* Disclaimer: the University App's thin top bar. Not sticky and never amber: amber is kept for "Əmin deyiləm". */
.topbar {
  background: var(--av-topbar-bg);
  color: var(--av-topbar-text);
  font-size: 0.86rem;
  line-height: 1.45;
}

.topbar-inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 9px var(--gutter);
}

.topbar .ic { margin-top: 0.12em; color: #CDB8FF; }
.topbar b { color: #fff; font-weight: 700; }

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--av-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kd-line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--page-max);
  min-height: 68px;
  margin: 0 auto;
  padding: 10px var(--gutter);
}

/* Logo: a tile with the brand mark (web/assets/brand/azsl-communication-bridge-v4.png redrawn as SVG) + name + slogan */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  border-radius: var(--radius-md);
  color: var(--kd-ink);
  text-decoration: none;
}

.logo-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--av-mark-bg);
  color: #fff;
  box-shadow: 0 6px 16px rgb(91 43 166 / 24%);
}

.logo-mark svg { width: 23px; height: 23px; fill: currentColor; }

.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text b { font-family: var(--kd-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; }
.logo-text small { margin-top: 2px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; color: var(--kd-muted); }

/* The two directions as a segmented switch (University App's .az-nav): the current page is a raised segment */
.modes {
  display: flex;
  gap: 4px;
  margin-inline: auto;
  padding: 4px;
  border: 1px solid var(--kd-line);
  border-radius: 16px;
  background: var(--av-surface-soft);
}

.modes a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  color: var(--kd-nav);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-base), color var(--motion-base), box-shadow var(--motion-base);
}

.modes a:hover { color: var(--kd-primary-ink); }

.modes a[aria-current="page"] {
  background: var(--av-raised);
  color: var(--kd-primary-ink);
  box-shadow: var(--av-shadow-soft), 0 0 0 1px var(--kd-line-soft);
}

.modes .ic { width: 1.25em; height: 1.25em; }

/* Header tools: language, display settings ("Aa") and theme, round 44 px buttons as in University App */
.header-tools { display: flex; align-items: center; gap: 8px; flex: none; }

.tool-btn,
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  flex: none;
  padding: 0 12px;
  border: 1px solid var(--kd-line-soft);
  border-radius: 999px;
  background: var(--av-raised);
  color: var(--kd-ink);
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-base), border-color var(--motion-base);
}

.theme-toggle { width: 44px; padding: 0; }
.tool-btn::-webkit-details-marker { display: none; }
.tool-btn:hover,
.theme-toggle:hover { background: var(--kd-tint); border-color: color-mix(in srgb, var(--kd-primary) 45%, var(--kd-line-soft)); }
.tool-btn .ic,
.theme-toggle .ic { width: 20px; height: 20px; }
.tool-btn .aa { font-family: var(--kd-display); font-size: 1.05rem; letter-spacing: 0; }
.theme-toggle .i-sun,
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }

/* Display settings panel under the "Aa" button: text size and contrast */
.prefs { position: relative; }
.prefs[open] > .tool-btn { background: var(--kd-tint-strong); border-color: color-mix(in srgb, var(--kd-primary) 55%, transparent); color: var(--av-on-tint); }

.prefs-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 12px;
  width: min(280px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--kd-line);
  border-radius: var(--radius-lg);
  background: var(--av-surface);
  color: var(--kd-ink);
  box-shadow: var(--av-shadow);
}

.prefs-title { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kd-muted); }

.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--kd-line);
  border-radius: 12px;
  background: var(--av-surface-soft);
}

.seg button {
  flex: 1 1 0;
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--kd-nav);
  font-family: var(--kd-display);
  font-weight: 700;
  cursor: pointer;
}

.seg button:nth-child(1) { font-size: 0.9rem; }
.seg button:nth-child(2) { font-size: 1.05rem; }
.seg button:nth-child(3) { font-size: 1.2rem; }
.seg button[aria-pressed="true"] { background: var(--av-raised); color: var(--kd-primary-ink); box-shadow: var(--av-shadow-soft), 0 0 0 1px var(--kd-line-soft); }

.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
}

.switch input {
  appearance: none;
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--kd-line-soft);
  cursor: pointer;
  transition: background-color var(--motion-base);
}

.switch input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
  transition: transform var(--motion-base) var(--ease-standard);
}

.switch input:checked { background: var(--kd-primary); }
.switch input:checked::before { transform: translateX(20px); }

.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px var(--gutter) 40px;
}

.footer {
  border-top: 1px solid var(--kd-line);
  background: var(--av-surface-soft);
  color: var(--kd-body);
  font-size: 0.88rem;
}

.footer-inner {
  display: grid;
  gap: 14px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 20px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
}

.footer a { font-weight: 600; }
.credit { max-width: 90ch; line-height: 1.6; }

/* System state (models, camera fps, server): small pills; app.js replaces their className with ok / bad */
.sys { display: flex; flex-wrap: wrap; gap: 8px; }

.sys > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--kd-line);
  border-radius: 999px;
  background: var(--av-raised);
  color: var(--kd-body);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

.sys > span::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--kd-line-soft);
}

.sys > .ok { border-color: transparent; background: var(--av-ok-tint); color: var(--av-ok-ink); }
.sys > .ok::before { background: var(--av-ok); }
.sys > .bad { border-color: transparent; background: var(--av-bad-tint); color: var(--av-bad-ink); }
.sys > .bad::before { background: var(--av-bad); }

/* ==================== 4. COMPONENTS ==================== */
.btn {
  --spin: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--kd-primary);
  color: #fff;
  font-family: var(--kd-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-base), border-color var(--motion-base), color var(--motion-base), opacity var(--motion-base);
}

.btn .ic { width: 1.2em; height: 1.2em; }
.btn:hover:not(:disabled) { background: var(--kd-primary-strong); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }

.btn-ghost {
  --spin: var(--kd-primary-ink);
  background: var(--av-raised);
  color: var(--kd-ink);
  border-color: var(--kd-line-soft);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--kd-tint);
  border-color: color-mix(in srgb, var(--kd-primary) 45%, var(--kd-line-soft));
  color: var(--kd-primary-ink);
}

.btn-lg { min-height: 56px; padding: 0 24px; border-radius: 16px; font-size: 1.06rem; }
.btn-sm { min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 0.92rem; }
.btn-block { width: 100%; }

/* Touch feedback (University App, "Toxunuş"): ui.js adds a ripple at the press point; the button never shrinks */
.ripple-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.22;
  transform: scale(0);
  animation: av-ripple 0.55s var(--ease-standard) forwards;
}

/* Shine (University App, "Parıltı"): light passes once over a filled button under the mouse */
.btn-primary { overflow: hidden; isolation: isolate; }

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 28%) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled)::after { transform: translateX(120%); transition: transform 0.7s var(--ease-standard); }
}

/* Busy (ui.js): the label stays in place but hidden, so the width does not jump; a ring turns in the middle */
.btn.is-busy { color: transparent !important; cursor: progress; }
.btn.is-busy:disabled { opacity: 1; }
.btn.is-busy > * { visibility: hidden; }

.btn.is-busy::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2.5px solid color-mix(in srgb, var(--spin) 30%, transparent);
  border-top-color: var(--spin);
  border-radius: 50%;
  animation: av-spin 0.7s linear infinite;
}

.card {
  min-width: 0;
  border: 1px solid var(--kd-line);
  border-radius: var(--radius-xl);
  background: var(--av-surface);
  box-shadow: var(--av-shadow-soft);
}

.card-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--kd-line);
}

.card-h h2,
.card-h h1 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.08rem;
}

.card-h h2 .ic,
.card-h h1 .ic { color: var(--kd-primary-ink); }

.card-b { padding: 16px 18px 18px; }

/* Fields: 48 px high and at least 16 px text (iOS does not zoom in), soft focus ring */
input, select, textarea {
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--kd-line-soft);
  border-radius: var(--radius-md);
  background: var(--av-raised);
  color: var(--kd-ink);
  transition: border-color var(--motion-base), box-shadow var(--motion-base);
}

textarea {
  display: block;
  width: 100%;
  min-height: 128px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

input::placeholder,
textarea::placeholder { color: var(--kd-muted); opacity: 0.85; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--kd-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kd-primary) 18%, transparent);
}

select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A82A0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

.field-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-bottom: 10px;
  font-family: var(--kd-display);
  font-size: 1.08rem;
  font-weight: 700;
}

.hint { font-family: var(--kd-sans); font-size: 0.86rem; font-weight: 500; color: var(--kd-muted); }

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
}

.alert .ic { margin-top: 0.1em; }
.alert.warn { background: var(--av-warn-tint); color: var(--av-warn-ink); }

/* Short notes with an icon (privacy, sources) */
.aside-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--kd-muted);
}

.aside-note .ic { margin-top: 0.15em; color: var(--kd-primary-ink); }
.aside-note.private .ic { color: var(--av-ok); }

/* ==================== 5. DIRECTION A (index.html) ==================== */
.page-a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.side { display: grid; gap: 16px; min-width: 0; }

.cam-card { padding: 12px; }

/* Status pill: the one place to look while signing. Tinted, never a solid block, so it does not flash.
   A block, not flex: the icon is inline before the first word, so a long message wraps under it instead of
   leaving the icon alone on a line; align-content centres the lines inside the reserved height. */
.pill {
  --pill-ic: var(--ic-hand);
  display: block;
  align-content: center;
  min-height: 80px;
  padding: 10px 18px;
  border: 2px solid var(--kd-line);
  border-radius: var(--radius-lg);
  background: var(--av-surface-soft);
  color: var(--kd-ink);
  font-family: var(--kd-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  transition: background-color var(--motion-base), border-color var(--motion-base), color var(--motion-base);
}

.pill::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.42em;
  vertical-align: -0.17em;
  background: currentColor;
  -webkit-mask: var(--pill-ic) center / contain no-repeat;
  mask: var(--pill-ic) center / contain no-repeat;
}

.pill small {
  display: block;
  margin-top: 3px;
  font-family: var(--kd-sans);
  font-size: 0.7em;
  font-weight: 600;
  line-height: 1.35;
}

.pill.wait { --pill-ic: var(--ic-loader); color: var(--kd-body); }
.pill.wait::before { animation: av-spin 1.1s linear infinite; }
.pill.idle { --pill-ic: var(--ic-hand); }

.pill.signing {
  --pill-ic: var(--ic-dot);
  border-color: color-mix(in srgb, var(--kd-primary) 55%, transparent);
  background: var(--kd-tint-strong);
  color: var(--av-on-tint);
}

.pill.signing::before { width: 0.75em; height: 0.75em; vertical-align: 0; animation: av-pulse 1.2s ease-in-out infinite; }

.pill.ok {
  --pill-ic: var(--ic-check);
  border-color: var(--av-ok);
  background: var(--av-ok-tint);
  color: var(--av-ok-ink);
  font-size: 1.6rem;
  letter-spacing: 0.01em;
}

.pill.abstain {
  --pill-ic: var(--ic-help);
  border-color: var(--av-warn);
  background: var(--av-warn-tint);
  color: var(--av-warn-ink);
  font-size: 1.12rem;
}

.pill.offline {
  --pill-ic: var(--ic-alert);
  border-color: var(--av-bad);
  background: var(--av-bad-tint);
  color: var(--av-bad-ink);
  font-size: 1.12rem;
}

/* Camera: the box takes the camera's own aspect ratio (4:3 laptop, 3:4 phone held upright; 4:3 until the camera
   starts), capped in height. Video and landmark canvas both use object-fit: contain in the same box, so the drawn
   points stay on the body whatever the box shape. Only the preview is mirrored; MediaPipe reads the unmirrored video. */
.stage {
  position: relative;
  width: 100%;
  margin: 12px auto 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--av-stage-bg);
  transform: scaleX(-1);
}

.stage video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto 4 / 3;
  max-height: 60vh;
  max-height: 60svh;
  object-fit: contain;
}

.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.cam-card .aside-note { margin: 10px 4px 2px; }

/* Word buffer: an empty dashed tray with the three steps until the first word arrives */
.words {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 112px;
  padding: 14px;
  border: 1.5px dashed var(--kd-line-soft);
  border-radius: var(--radius-lg);
  background: var(--av-surface-soft);
}

.words:has(.word-chips:not(:empty)) { border-style: solid; border-color: var(--kd-line); background: var(--av-surface); }
.words:has(.word-chips:not(:empty)) .steps { display: none; }

.word-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
  counter-reset: word;
}

.word-chips:empty { display: none; }

.word-chips li {
  counter-increment: word;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 6px 16px 6px 7px;
  border: 1px solid var(--kd-line-soft);
  border-radius: 999px;
  background: var(--av-raised);
  box-shadow: var(--av-shadow-soft);
  font-family: var(--kd-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.word-chips li::before {
  content: counter(word);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--kd-tint-strong);
  color: var(--av-on-tint);
  font-family: var(--kd-sans);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0;
}

/* The newest word: the one "Son sözü sil" removes */
.word-chips li:last-child { border-color: color-mix(in srgb, var(--kd-primary) 50%, var(--kd-line-soft)); }

.words > .note { font-size: 0.95rem; font-weight: 600; color: var(--kd-body); }
.words > .note.bad { color: var(--av-bad-ink); }

.steps {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--kd-body);
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: -1px;
  border: 1px solid var(--kd-line-soft);
  border-radius: 50%;
  background: var(--av-raised);
  color: var(--kd-primary-ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.actions .btn-primary { grid-column: 1 / -1; }

/* Composed sentence: the largest text on the page, glosses always under it */
.sentence {
  font-family: var(--kd-display);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.glosses { margin-top: 10px; font-size: 0.95rem; color: var(--kd-muted); }
.assumptions { margin-top: 8px; padding-left: 1.2rem; font-size: 0.92rem; color: var(--kd-muted); }
.assumptions:empty { display: none; }
.sentence-card .alert { margin-top: 12px; }

/* Read aloud on its own row, Big screen and Copy side by side under it (as the word buttons above) */
.speak-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.speak-row .btn { padding-inline: 12px; }
.speak-row .btn-primary,
.speak-row .note { grid-column: 1 / -1; }
.speak-row .note:empty { display: none; }

/* Record mode (team only), folded in the footer */
.record-box {
  border: 1px solid var(--kd-line);
  border-radius: var(--radius-lg);
  background: var(--av-surface);
}

.record-box > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-lg);
  color: var(--kd-nav);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.record-box > summary::-webkit-details-marker { display: none; }
.record-box > summary .chev { margin-left: auto; transition: transform var(--motion-base) var(--ease-standard); }
.record-box[open] > summary .chev { transform: rotate(180deg); }

.record {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
  min-width: 0;
  margin: 0;
  padding: 4px 16px 16px;
  border: 0;
}

.record label { display: grid; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--kd-nav); }
.record input:invalid { border-color: var(--av-bad); }
#rec-status { flex-basis: 100%; font-weight: 600; }
#rec-status:empty { display: none; }

.card-h-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.btn.is-copied { border-color: var(--av-ok); color: var(--av-ok-ink); }

/* Big screen (ui.js): the composed sentence fills the screen, to turn it towards the other person */
.bigscreen {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 40px 24px;
  border: 0;
  background: var(--av-surface);
  color: var(--kd-ink);
}

.bigscreen[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}

.bigscreen::backdrop { background: var(--av-surface); }

.bigscreen-text {
  max-width: 22ch;
  font-family: var(--kd-display);
  font-size: clamp(2.4rem, 7.5vw, 7.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.bigscreen-sub { max-width: 60ch; font-size: clamp(1rem, 2vw, 1.5rem); color: var(--kd-muted); }
.bigscreen-tools { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }
.bigscreen-body { display: grid; justify-items: center; gap: 28px; transition: transform var(--motion-base) var(--ease-standard); }
.bigscreen.is-flipped .bigscreen-body { transform: rotate(180deg); }
.bigscreen [data-bigscreen-flip][aria-pressed="true"] { background: var(--kd-tint-strong); color: var(--av-on-tint); }

/* Conversation history of this session (ui.js, sessionStorage) */
.history-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.history-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 2px 12px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--kd-line);
  border-radius: 14px;
  background: var(--av-surface-soft);
}

.history-time { padding-top: 0.2em; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kd-muted); }
.history-text { font-family: var(--kd-display); font-size: 1.05rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.history-glosses { grid-column: 2; font-size: 0.85rem; color: var(--kd-muted); overflow-wrap: anywhere; }
.history-list .tool-btn { grid-column: 3; grid-row: 1 / span 2; min-width: 40px; height: 40px; padding: 0; }

/* First visit: three short steps (ui.js) */
.onboard {
  width: min(560px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--kd-line);
  border-radius: 24px;
  background: var(--av-surface);
  color: var(--kd-ink);
  box-shadow: var(--av-shadow);
}

.onboard::backdrop { background: rgb(18 16 25 / 55%); }

.onboard-step {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 36px 28px 8px;
  text-align: center;
}

.onboard-ic {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: var(--kd-tint-strong);
  color: var(--kd-primary-ink);
}

.onboard-ic .ic { width: 38px; height: 38px; }
.onboard-step h2 { font-size: 1.4rem; }
.onboard-step p { max-width: 40ch; color: var(--kd-body); }

.onboard-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 22px;
}

.onboard-dots { display: flex; gap: 6px; }
.onboard-dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--kd-line-soft); transition: width var(--motion-base), background-color var(--motion-base); }
.onboard-dots span.on { width: 22px; background: var(--kd-primary); }
.onboard-buttons { display: flex; gap: 8px; margin-left: auto; }

/* ==================== 6. DIRECTION B (signs.html) ==================== */
.page-b {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* Example sentences: one tap fills the text and shows it (signs.js) */
.examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.examples-label { margin-right: 2px; font-size: 0.86rem; font-weight: 600; color: var(--kd-muted); }

.chip-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--kd-line-soft);
  border-radius: 999px;
  background: var(--av-raised);
  color: var(--kd-body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-base), border-color var(--motion-base), color var(--motion-base);
}

.chip-btn:hover {
  border-color: color-mix(in srgb, var(--kd-primary) 45%, var(--kd-line-soft));
  background: var(--kd-tint);
  color: var(--kd-primary-ink);
}

.input-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.input-actions .btn { flex: 1 1 150px; }

.page-b .status { margin-top: 12px; font-size: 0.92rem; font-weight: 600; color: var(--kd-body); }
.page-b .status.bad { color: var(--av-bad-ink); }
.input-card .aside-note { margin-top: 12px; }

/* Listening: signs.js disables the mic button until speech recognition ends */
.btn-mic:disabled {
  opacity: 1;
  border-color: var(--av-bad);
  background: var(--av-bad-tint);
  color: var(--av-bad-ink);
  cursor: progress;
}

.btn-mic:disabled .ic { animation: av-pulse 1.2s ease-in-out infinite; }

/* Which words have a sign: a summary line and a folded list (signs.js fills both from /sign-vocab) */
.vocab {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--kd-line);
}

.vocab details > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  color: var(--kd-primary-ink);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.vocab details > summary::-webkit-details-marker { display: none; }
.vocab .chev { transition: transform var(--motion-base) var(--ease-standard); }
.vocab details[open] .chev { transform: rotate(180deg); }

#vocab-words {
  max-height: 240px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--kd-line);
  border-radius: var(--radius-md);
  background: var(--av-surface-soft);
  line-height: 1.7;
}

.player-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.speed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kd-body);
}

.speed select { min-height: 40px; padding-block: 6px; font-size: 0.95rem; }

/* AzSLD clips are 4:3; the player keeps that ratio and never grows taller than about half the screen */
.player {
  width: min(100%, calc(56vh * 4 / 3));
  width: min(100%, calc(56svh * 4 / 3));
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--av-stage-bg);
}

.player video { display: block; width: 100%; height: 100%; object-fit: contain; }

.subtitle {
  min-height: 1.3em;
  margin-top: 12px;
  font-family: var(--kd-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0;
  list-style: none;
}

.chips:empty { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 14px;
  border: 1px solid var(--kd-line-soft);
  border-radius: 999px;
  background: var(--av-raised);
  color: var(--kd-body);
  font-size: 0.92rem;
  font-weight: 700;
  transition: background-color var(--motion-base), border-color var(--motion-base), color var(--motion-base);
}

.chip.current { border-color: var(--kd-primary); background: var(--kd-primary); color: #fff; }
.chip.oov { border-color: color-mix(in srgb, var(--av-bad) 45%, transparent); background: var(--av-bad-tint); color: var(--av-bad-ink); }
.chip.missing { border-style: dashed; background: transparent; color: var(--kd-muted); }

.player-notes {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--kd-line);
}

/* ==================== 7. STT TEST PAGE (stt_test.html) ==================== */
.page-test { max-width: 900px; }
.page-test .card-b { display: grid; gap: 14px; }
.read-list { color: var(--kd-body); }

.test-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}

.test-controls label { display: grid; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--kd-nav); }
.test-state { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; color: var(--kd-body); }
.interim { min-height: 1.5em; color: var(--kd-muted); }
.error { min-height: 1.5em; color: var(--av-bad-ink); font-weight: 600; }
.table-wrap { overflow-x: auto; border: 1px solid var(--kd-line); border-radius: var(--radius-md); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table-wrap th, .table-wrap td { padding: 9px 12px; border-bottom: 1px solid var(--kd-line); text-align: left; }
.table-wrap th { background: var(--av-surface-soft); color: var(--kd-nav); font-weight: 700; }
.table-wrap tr:last-child td { border-bottom: 0; }

/* ==================== 8. SIZES ==================== */
/* Phone (University App's "mobil-sayt": a website, not an app). The header scrolls away so the camera gets the room;
   the two directions become a full-width switch under the logo. */
@media (max-width: 720px) {
  :root { --gutter: 16px; }

  .topbar { font-size: 0.82rem; }
  .topbar-inner { justify-content: flex-start; padding-block: 8px; }

  .header { position: static; }
  .header-inner { flex-wrap: wrap; gap: 10px 12px; min-height: 0; padding: 10px var(--gutter) 12px; }
  .logo-mark { width: 36px; height: 36px; border-radius: 11px; }
  .logo-mark svg { width: 21px; height: 21px; }
  .logo-text b { font-size: 1.2rem; }
  .header-tools { margin-left: auto; gap: 6px; }
  .modes { order: 3; flex-basis: 100%; margin: 0; }
  .modes a { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 8px; font-size: 0.9rem; }

  .page { padding-top: 14px; padding-bottom: 28px; }
  .card-h { padding: 12px 14px; }
  .card-b { padding: 14px; }
  .cam-card { padding: 10px; }

  .pill { min-height: 84px; padding: 10px 14px; font-size: 1.18rem; }
  .pill.ok { font-size: 1.42rem; }
  .pill.abstain, .pill.offline { font-size: 1.02rem; }

  .stage { margin-top: 10px; }
  .stage video { max-height: 56vh; max-height: 56svh; }

  .sentence { font-size: 1.45rem; }
  .subtitle { font-size: 1.5rem; }
  .player-tools { width: 100%; margin-left: 0; justify-content: space-between; }

  /* Example sentences: one swipeable row (University App's chip strip) instead of three lines */
  .examples {
    flex-wrap: nowrap;
    margin-inline: -14px;
    padding: 2px 14px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-padding-inline: 14px;
    scroll-snap-type: x proximity;
  }

  .examples::-webkit-scrollbar { display: none; }
  .examples > * { flex: none; scroll-snap-align: start; }
  .chip-btn { white-space: nowrap; }
}

/* Phones: the language button drops its globe so logo and the three header buttons share one row; with larger text
   two buttons no longer fit side by side, so they stack and labels may wrap instead of pushing the page sideways */
@media (max-width: 440px) {
  [data-lang-toggle] .ic { display: none; }
  :root[data-text] :is(.actions, .speak-row) { grid-template-columns: minmax(0, 1fr); }
  :root[data-text] .btn { white-space: normal; text-align: center; }
}

@media (max-width: 360px) {
  .modes .ic { display: none; }
  .actions { grid-template-columns: 1fr; }
}

/* Tablet held upright: one centred column */
@media (min-width: 721px) and (max-width: 959px) {
  .page { max-width: 820px; }
}

/* Phone held sideways: camera and words side by side, smaller chrome, header not sticky */
@media (orientation: landscape) and (max-height: 520px) {
  .topbar-inner { padding-block: 6px; }
  .header { position: static; }
  .header-inner { min-height: 0; padding-block: 8px; }
  .page { max-width: none; padding-top: 12px; }
  .page-a { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; }
  .page-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; }
  .pill { min-height: 60px; padding: 6px 12px; font-size: 1.05rem; }
  .pill.ok { font-size: 1.25rem; }
  .pill.abstain, .pill.offline { font-size: 0.95rem; }
  .stage video { max-height: 66vh; max-height: 66svh; }
  .player { width: min(100%, calc(62vh * 4 / 3)); width: min(100%, calc(62svh * 4 / 3)); }
}

/* Laptop and projector (1280x720): two columns, one step larger type. The camera gets the screen height minus the
   chrome above and below it (300 px), so the pill, the camera and its note fit on one screen also inside a browser
   window with toolbars (about 630 px high); the buttons sit in one row so the composed sentence stays in view. */
@media (min-width: 960px) {
  html { font-size: calc(112.5% * var(--text-scale)); }

  .topbar-inner { padding-block: 7px; }
  .page { padding-top: 16px; }
  .page-a { grid-template-columns: minmax(0, 1.3fr) minmax(340px, 1fr); gap: 24px; }
  .page-b { grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.2fr); gap: 24px; }

  .stage {
    width: min(100%, max(320px, calc((100vh - 300px) * 4 / 3)));
    width: min(100%, max(320px, calc((100svh - 300px) * 4 / 3)));
  }

  .stage video {
    max-height: max(240px, calc(100vh - 300px));
    max-height: max(240px, calc(100svh - 300px));
  }

  .pill { min-height: 74px; font-size: 1.4rem; }
  .pill.ok small { display: inline; margin: 0 0 0 0.6em; } /* wide enough: the confidence sits next to the word */
  .pill.ok { font-size: 1.7rem; }
  .pill.abstain, .pill.offline { font-size: 1.15rem; }

  .actions { display: flex; flex-wrap: wrap; }
  .actions .btn { min-height: 52px; padding-inline: 14px; }
  .actions .btn-primary { flex: 1 1 auto; }
  .sentence { font-size: 1.9rem; }
}

/* ==================== 9. MOTION AND CONTRAST ==================== */
@keyframes av-spin { to { transform: rotate(360deg); } }

@keyframes av-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

@keyframes av-ripple { to { transform: scale(1); opacity: 0; } }

/* Theme switch (ui.js): colours change over 0.3 s instead of a hard flash */
html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
  transition: background-color 0.3s var(--ease-standard), color 0.3s var(--ease-standard), border-color 0.3s var(--ease-standard) !important;
}

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

@media (prefers-contrast: more) {
  :root, :root[data-theme] { --kd-muted: var(--kd-body); --kd-line: var(--kd-line-soft); }
  .card, .btn-ghost, .modes, .pill { border-width: 2px; }
}

:root[data-contrast="high"] :is(.card, .btn-ghost, .modes, .pill, .word-chips li, .chip, .chip-btn, .tool-btn, .theme-toggle,
  .words, .record-box, .prefs-panel, .history-list li, input, select, textarea) { border-width: 2px; }
:root[data-contrast="high"] :focus-visible { outline: 3px solid var(--kd-primary-ink); outline-offset: 2px; }
:root[data-contrast="high"] .note,
:root[data-contrast="high"] .aside-note { color: var(--kd-body); }