/* design/css/tokens.css */
/* umky design tokens — the only place with literal colours, fonts, sizes, spacing, radii, layers and durations.
   Everything else uses var(--…); scripts/style-lint.mjs enforces it. The law: docs/design-system.md.
   One value — one token: a literal value is written once; another role with the same value aliases it with var(). */

/* ---------- fonts: self-hosted (CSP font-src 'self'), latin + cyrillic, only the faces in use ---------- */
/* Nunito Sans — the whole interface and lesson text: 400, 500, 600 (labels, wordmark), 400 italic (slanted, not cursive) */
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/nunito-sans-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/nunito-sans-latin-400-normal.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: 'Nunito Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/nunito-sans-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/nunito-sans-latin-500-normal.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: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/nunito-sans-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/nunito-sans-latin-600-normal.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: 'Nunito Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/nunito-sans-cyrillic-400-italic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/nunito-sans-latin-400-italic.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; }
/* Source Serif 4 — only H1/H2 of marketing pages (.display); never in the product interface or lesson text */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/source-serif-4-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/source-serif-4-latin-500-normal.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; }
/* metric-matched fallback while the web font loads (CLS ≤ 0.1): Arial scaled to Nunito Sans (fontTools, 15.10.2026) */
@font-face { font-family: 'Nunito Sans fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica'); size-adjust: 102.74%; ascent-override: 98.4%; descent-override: 34.36%; line-gap-override: 0%; }

:root {
  /* ---------- colour: roles (contrast — docs/design-system.md §3) ---------- */
  --bg: #FAF7F2;              /* холст: тёплая бумага, фон страницы */
  --surface: #FFFFFF;         /* лист: задание, карточка, поле ввода */
  --surface-2: #F3F0E9;       /* поле: колонка полей урока, вторая поверхность, наведение */
  --ink: #14242F;             /* чернила: текст, ссылки, фокус, «засчитано учителем», полоса показанного задания */
  --ink-2: #4C5A64;           /* вторичный текст: 6.65:1 на холсте */
  --border: #76828B;          /* граница контролов: 3.94:1 на листе (WCAG 1.4.11) */
  --line: #DCD6CB;            /* разделитель: только структура, никогда не единственный признак */
  --accent: #EDB345;          /* действие: ТОЛЬКО главная кнопка экрана и маркер показанного задания */
  --accent-hover: #E0A12E;    /* действие, наведение: подпись 7.03:1 */
  --accent-edge: #976712;     /* граница действия, линия полей, подчёркивание ссылок: 4.92:1 на листе */
  --accent-ink: var(--ink);   /* подпись на действии: тёмная, 8.42:1 */
  --margin-line: var(--accent-edge);
  --ok: #025448;              /* верно: + галочка + слово «Верно» + сплошная граница 2px */
  --ok-soft: #DFF6F0;         /* подложка «верно»: только вместе с границей */
  --bad: #C14802;             /* неверно (киноварь) и удаление: + крестик + слово; 5.01:1 на листе */
  --bad-soft: #FFF2ED;        /* подложка «неверно»: только вместе с подчёркиванием и границей */
  --warn-soft: #F8E4D4;       /* внимание: плашка + «!» + текст */
  --warn: #754B10;            /* внимание: значок и текст на плашке, 6.15:1 */
  --focus: var(--ink);        /* кольцо фокуса 2px + зазор 2px; на тёмном переопределяется на --on-dark */
  --show: var(--ink);         /* полоса показанного задания на полях */
  --show-marker: var(--accent);   /* маркер под показанным заданием */
  --ok-manual: var(--ink);    /* засчитано учителем: инициал на полях, чернилами, не зелёным */
  --selection: var(--warn-soft);
  --video-bg: #191F23;        /* панель видео: белый текст 16.65:1 */
  --on-dark: var(--surface);  /* текст и значки на тёмном */
  --on-dark-2: #B9C1C7;       /* вторичный текст на тёмном: 9.13:1 */
  --teacher-only: var(--ink); /* полоса «С ОТВЕТАМИ — не показывайте экран» */
  --overlay: rgb(20 36 47 / 0.45);  /* затемнение под модальным окном: чернила 45% */

  /* ---------- type ---------- */
  --font-ui: 'Nunito Sans', 'Nunito Sans fallback', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-small: 14px;           /* подписи, метки, счётчики — не для сплошного текста */
  --fs-body: 16px;            /* интерфейс: кнопки, поля, текст экранов */
  --fs-lesson: 18px;          /* текст задания и ответ ученика (17px на телефоне) */
  --fs-h3: 20px;              /* заголовок задания, карточки, панели */
  --fs-h2: 24px;              /* заголовок раздела, модального окна */
  --fs-h1: 28px;              /* заголовок экрана (24px на телефоне) */
  --fs-display: 40px;         /* H1 маркетинговых страниц (Source Serif 4), крупная цифра итога (32px на телефоне) */
  --lh-tight: 1.25;           /* заголовки */
  --lh-text: 1.5;             /* интерфейс */
  --lh-lesson: 1.6;           /* текст урока */
  --fw-regular: 400;
  --fw-medium: 500;           /* заголовки */
  --fw-label: 600;            /* кнопки, метки, словесный знак */

  /* ---------- spacing: 4/8/12/16/24/32/48/64, --s-N = N × 4px ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---------- shape and lines ---------- */
  --r-sm: 4px;                /* контролы: кнопки, поля, метки */
  --r: 6px;                   /* листы: карточки, задания, модальные окна */
  --r-round: 50%;             /* круглые значки статуса и инициалы */
  --r-track: 12px;            /* дорожка переключателя — единственное «пилюльное» скругление */
  --bw: 1px;                  /* линия: граница контрола, разделитель */
  --bw-strong: 2px;           /* состояние: верно/неверно, фокус, линия полей, выбранное */
  --bw-marker: 3px;           /* маркер показанного задания, полоса на полях */
  --focus-gap: 2px;
  --underline-offset: 3px;   /* подчёркивание ссылок и действий в тексте */

  /* ---------- sizes ---------- */
  --tap: 44px;                /* минимальная цель касания */
  --tap-lg: 52px;             /* крупная кнопка: вход, ответ на телефоне */
  --icon: 20px;
  --icon-sm: 16px;
  --status-icon: 24px;        /* круглый значок верно/неверно */
  --content: 760px;           /* ширина текста урока */
  --page: 1040px;             /* ширина страниц кабинета */
  --narrow: 400px;            /* карточка входа */
  --side: 232px;              /* боковая панель кабинета */
  --room-side: 340px;         /* правая колонка комнаты: видео и слова */
  --margin-col: 48px;         /* колонка полей урока (4px на телефоне) */
  --modal: 560px;
  --col-min: 220px;           /* минимальная ширина текстовой колонки: меню, плашка, заголовок рядом с кнопками */
  --col-wide: 280px;          /* широкая колонка: поиск, название урока в шапке комнаты */
  --card-min: 240px;          /* карточка урока в сетке */
  --type-min: 170px;          /* кнопка типа задания */
  --vocab-col: 140px;         /* колонка слова и перевода */
  --media-h: 540px;           /* высота картинки задания */
  --video-float: 200px;       /* плавающее видео на узком экране */
  --list-h: 260px;            /* прокручиваемый список слов урока */
  --result-w: 640px;          /* итоги урока */
  --toast-w: 440px;
  --modal-wide: 720px;
  --logo-h: 32px;

  /* ---------- motion: minimal ---------- */
  --dur-fast: 150ms;          /* нажатие, наведение */
  --dur: 250ms;               /* модальное окно, панель */
  --dur-slow: 400ms;          /* прокрутка к показанному заданию */
  --dur-spin: 800ms;          /* крутилка загрузки */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- layers ---------- */
  --z-bar: 40;
  --z-video: 45;
  --z-tabbar: 50;
  --z-menu: 60;
  --z-modal: 100;
  --z-toast: 200;
  --z-zoom: 300;
}

@media (max-width: 600px) {
  :root {
    --fs-lesson: 17px;
    --fs-h1: 24px;
    --fs-display: 32px;
    --margin-col: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}

/* design/css/tokens-site.css */
/* umky.ru site layer. Proposal for tokens.css: NEW roles only, product tokens stay as they are in css/tokens.css.
   1) site sizes (marketing page); 2) --on-fill; 3) the dark theme (решение Стаса Q68: тёмная сразу), on the same role names.
   Dark values: contrast checked by qa/contrast.py (WCAG 2.2). */

 /* metric-matched fallback for Source Serif 4 (Georgia scaled by fontTools measurement of the cyrillic face, 15.10.2026): CLS 0 while the serif loads */
@font-face { font-family: 'Source Serif 4 fallback'; src: local('Georgia'); size-adjust: 106.65%; ascent-override: 97.1%; descent-override: 31.4%; line-gap-override: 0%; }

 /* Russian text: Arial scaled to the cyrillic Nunito Sans (measured on the page's sentences: real/Arial = 1.013), so lines wrap the same before and after the font loads */
@font-face { font-family: 'Nunito Sans fallback ru'; src: local('Arial'), local('ArialMT'), local('Helvetica'); size-adjust: 101.3%; ascent-override: 99.8%; descent-override: 34.85%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  --font-ui: 'Nunito Sans', 'Nunito Sans fallback ru', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Source Serif 4', 'Source Serif 4 fallback', Georgia, 'Times New Roman', serif;
  --on-fill: var(--on-dark);        /* значок/буква на сплошной заливке (круг «верно», «неверно», инициал): белое на светлой теме, тёмное на тёмной */
  --logo-sheet: var(--surface);     /* лист знака */
  --logo-u: var(--ink);             /* «u» знака */
  --page-wide: 1200px;              /* ширина контейнера сайта */
  --rail: 56px;                     /* колонка полей страницы (на телефоне 4px, как --margin-col) */
  --fs-hero: 42px;                  /* H1 главной (Source Serif 4) */
  --fs-h2-site: 32px;               /* H2 блоков главной */
  --fs-lead: 20px;                  /* подзаголовок первого экрана */
  --fs-text: 18px;                  /* абзац маркетинга */
  --space-tight: 48px;              /* ритм секций, единая шкала: плотная */
  --space-normal: 64px;             /* обычная */
  --space-loose: 72px;              /* свободная (правило Стаса: секции 48-72px, дыра больше 80px = дефект) */
  --hero-top: 40px;                 /* верх первого экрана */
  --measure: 62ch;                  /* мера абзаца */
  --stage-w: 640px;                 /* сцена первого экрана */
  --header-h: 72px;
  --icon-size: 24px;                /* иконка пункта (меню, шаги, списки) */
  --icon-stroke: 1.75;              /* толщина линии иконок: единая, под штрих Nunito Sans */
  --icon-stagger: 70ms;             /* сдвиг отрисовки между линиями иконки */
  --dur-icon: 400ms;                /* отрисовка линии иконки при появлении */
  --dd-w: 440px;                    /* ширина выпадающего меню */
  --label-col: 168px;               /* колонка пометок на полях в тексте */
  --gap-col: var(--s-8);            /* промежуток между колонками сетки */
  --grid-2: repeat(2, minmax(0, 1fr));      /* единая сетка: блоки берут колонки только отсюда */
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-split: minmax(0, 1fr) minmax(0, 1.25fr);   /* первый экран: текст и сцена */
  --grid-5-7: minmax(0, 5fr) minmax(0, 7fr);
  --grid-7-5: minmax(0, 7fr) minmax(0, 5fr);
  --grid-aside: minmax(0, 4fr) minmax(0, 7fr);      /* заголовок слева, содержание справа */
  --grid-1: minmax(0, 1fr);                         /* одна колонка */
  --grid-label: var(--label-col) minmax(0, 1fr);    /* пометка на полях и текст */
  --grid-ledger: minmax(0, 5fr) minmax(0, 4fr);     /* ведомость: строка и действие */
  --grid-ledger-status: minmax(0, 5fr) var(--stat-w) minmax(0, 4fr);  /* ведомость со статусом */
  --grid-avatar: auto minmax(0, 1fr);               /* портрет и текст */
  --measure-quote: 32ch;            /* фраза кейса */
  --measure-close: 28ch;            /* фраза призыва */
  --lh-hero: 1.1;                   /* межстрочный H1 главной */
  --lh-quote: 1.3;                  /* фраза кейса */
  --dur-flash: 600ms;               /* однократная подсветка нового ответа у учителя (ТЗ 4.11: ≤600 мс) */
  --delay-tick: 60ms;               /* галочка «верно» стартует после круга */
  --measure-hero: 460px;            /* ширина текста первого экрана в px: ch зависит от шрифта и даёт сдвиг при подмене */
  --measure-hero-wide: 600px;       /* то же на узком экране, где первый экран в одну колонку */
  --measure-hero-none: 720px;       /* первый экран без сцены: текст шире */
  --measure-wide: 40ch;             /* ширина заголовка секции */
  --r-device: 20px;                 /* рамка телефона в сценах: единственное исключение из --r (документировано) */
  --phone-w: 208px;                 /* телефон ученика в сцене */
  --phone-h: 440px;
  --gap-h: 32px;                    /* пропуск-вставка в миниатюрах сцен (в уроке — --tap) */
  --stat-w: 168px;                  /* колонка статуса в ведомости */
}
/* the one place of the breakpoints of the grid: wide blocks fold into one column at 1100, 3-column ones at 900 */
@media (max-width: 1100px) { :root { --fs-hero: 38px; --grid-split: minmax(0, 1fr); --grid-5-7: minmax(0, 1fr); --grid-7-5: minmax(0, 1fr); --grid-aside: minmax(0, 1fr); } }
@media (max-width: 900px) { :root { --grid-ledger: minmax(0, 1fr); --grid-ledger-status: minmax(0, 1fr); --grid-2: minmax(0, 1fr); --grid-3: minmax(0, 1fr); --grid-4: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { :root { --grid-avatar: minmax(0, 1fr); --grid-4: minmax(0, 1fr); --grid-label: minmax(0, 1fr); --gap-col: var(--s-4); } }
@media (max-width: 600px) {
  :root {
    --rail: 4px;
    --fs-hero: 30px;
    --fs-h2-site: 26px;
    --fs-lead: 18px;
    --fs-text: 17px;
    --space-tight: 32px;
    --space-normal: 40px;
    --space-loose: 48px;
    --hero-top: 24px;
    --header-h: 64px;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0E171D;              /* холст: чернила, ушедшие в ночь; не чистый чёрный */
  --surface: #16232B;         /* лист */
  --surface-2: #1D2E38;       /* поле */
  --ink: #F1EDE3;             /* текст: тёплая бумага */
  --ink-2: #A9B5BD;
  --border: #7D8C96;
  --line: #2A3B46;
  --accent: #EDB345;          /* охра та же: на тёмном она ещё контрастнее */
  --accent-hover: #F6C766;
  --accent-edge: #D9A23E;     /* подчёркивание ссылок, линия полей: ≥3:1 к холсту и полю */
  --accent-ink: #14242F;      /* подпись на охре остаётся тёмной */
  --ok: #66D4B6;
  --ok-soft: #12352E;
  --bad: #FF9566;
  --bad-soft: #3A2119;
  --warn-soft: #3A2D18;
  --warn: #F2C77E;
  --video-bg: #080E12;
  --on-dark: var(--ink);
  --on-dark-2: var(--ink-2);
  --on-fill: var(--bg);
  --teacher-only: var(--surface-2);
  --overlay: rgb(8 14 18 / 0.7);
  --logo-sheet: #FFFFFF;      /* знак остаётся белым листом в обеих темах */
  --logo-u: #14242F;
}
@media (max-width: 380px) { :root { --fs-hero: 28px; } }

/* design/css/base.css */
/* Base: element defaults on tokens. No component styles here. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-text); font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); font-weight: var(--fw-medium); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
b, strong { font-weight: var(--fw-label); }
p { margin: 0 0 var(--s-3); }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-edge); text-underline-offset: var(--underline-offset); }
a:hover { text-decoration-thickness: var(--bw-strong); }
button, input, textarea, select { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
img, video { max-width: 100%; display: block; }
/* focus ring: 2px ink + 2px gap of whatever is behind — visible on the ochre button, on white and on the canvas */
:focus-visible { outline: var(--bw-strong) solid var(--focus); outline-offset: var(--focus-gap); }
::selection { background: var(--selection); color: var(--ink); }
/* marketing H1/H2 only (landing): the one place for Source Serif 4 */
.display { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-display); line-height: var(--lh-tight); }

/* utilities (layout only, no colour) */
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-small); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row.wrap { flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: var(--s-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* design/css/components.css */
/* Components of ui/kit.tsx. A component is the only way to draw its element; screens never restyle it locally.
   States everywhere: hover, focus-visible (global ring, base.css), active, disabled, loading, error. */

/* ---------- Icon ---------- */
.ic { flex: none; width: var(--icon); height: var(--icon); }
.ic-sm { width: var(--icon-sm); height: var(--icon-sm); }

/* ---------- Button: primary (ochre — only the main action of a screen) / secondary / ghost / danger ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-4); border-radius: var(--r-sm);
  border: var(--bw) solid var(--ink); background: var(--surface); color: var(--ink);
  font-size: var(--fs-body); font-weight: var(--fw-label); line-height: var(--lh-tight);
  cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent-edge); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { border-color: var(--bad); color: var(--bad); }
.btn-danger:hover { background: var(--bad-soft); }
.btn[aria-pressed='true'] { background: var(--surface-2); box-shadow: inset 0 0 0 var(--bw) var(--ink); }
.btn:disabled, .btn[aria-disabled='true'] {
  background: var(--surface-2); border-color: var(--line); color: var(--ink-2); cursor: not-allowed; transform: none;
}
.btn-ghost:disabled { background: transparent; border-color: transparent; }
.btn[aria-busy='true'] { cursor: progress; }
.btn-lg { min-height: var(--tap-lg); padding: 0 var(--s-6); }
.btn-block { width: 100%; }
.btn-icon { padding: 0; width: var(--tap); }
.btn-start { justify-content: flex-start; }

/* ---------- Field / Input / Textarea ---------- */
.field { display: grid; gap: var(--s-2); }
.field-label { font-weight: var(--fw-label); }
.field-hint { font-size: var(--fs-small); color: var(--ink-2); white-space: pre-line; }
.field-error { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--bad); font-weight: var(--fw-label); }
.input, .textarea {
  width: 100%; min-height: var(--tap); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  border: var(--bw) solid var(--border); background: var(--surface); color: var(--ink); font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-2); }
.input:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus, .textarea:focus { border-color: var(--ink); }
.input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--bad); box-shadow: inset 0 0 0 var(--bw) var(--bad); }
.input:disabled, .textarea:disabled, .input[readonly], .textarea[readonly] { background: var(--surface-2); border-color: var(--line); }
.textarea { min-height: calc(var(--tap) * 2.5); resize: vertical; line-height: var(--lh-text); }
.textarea-code { font-family: var(--font-mono); }
.check { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--tap); cursor: pointer; }
.check input { width: var(--icon); height: var(--icon); margin: 0; accent-color: var(--ink); }

/* ---------- Toggle (switch): label + track, the whole row is the target ---------- */
.toggle {
  display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: 0 var(--s-2);
  border: 0; background: none; cursor: pointer; font-size: var(--fs-small); font-weight: var(--fw-label); color: var(--ink);
}
.toggle-track {
  position: relative; flex: none; width: calc(var(--s-8) + var(--s-2)); height: var(--s-6); border-radius: var(--r-track);
  border: var(--bw-strong) solid var(--border); background: var(--surface);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.toggle-track::after {
  content: ''; position: absolute; top: var(--bw-strong); left: var(--bw-strong); width: var(--s-4); height: var(--s-4);
  border-radius: var(--r-round); background: var(--border); transition: transform var(--dur-fast) var(--ease-out);
}
.toggle[aria-checked='true'] .toggle-track { background: var(--ink); border-color: var(--ink); }
.toggle[aria-checked='true'] .toggle-track::after { background: var(--on-dark); transform: translateX(var(--s-4)); }
.toggle:disabled { cursor: not-allowed; color: var(--ink-2); }

/* ---------- Card (лист) ---------- */
.card { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); }
.card-pad { padding: var(--s-6); }
@media (max-width: 600px) { .card-pad { padding: var(--s-4); } }
.card-link { position: relative; transition: border-color var(--dur-fast) var(--ease-out); }
.card-link:hover { border-color: var(--border); }
.card-link:focus-within { border-color: var(--ink); }
/* the real link of a clickable card stretches over it; other controls inside sit above it */
.card-cover { color: inherit; text-decoration: none; }
.card-cover::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card-cover:focus-visible { outline: none; }
.card-link:has(.card-cover:focus-visible) { outline: var(--bw-strong) solid var(--focus); outline-offset: var(--focus-gap); }
.card-link .btn { position: relative; z-index: 2; }

/* ---------- Badge: only meaningful labels (catalog, subscription, homework, duration) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--s-6); padding: 0 var(--s-2); border-radius: var(--r-sm);
  font-size: var(--fs-small); font-weight: var(--fw-label); line-height: var(--lh-tight); white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- AnswerStatus: colour + icon + word, the same in every screen ---------- */
.status { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-label); line-height: var(--lh-tight); }
.status-ok { color: var(--ok); }
.status-bad { color: var(--bad); }
.status-manual { color: var(--ok-manual); }
.status-input, .status-shown { color: var(--ink-2); font-weight: var(--fw-regular); }
.status-detail { color: var(--ink-2); font-weight: var(--fw-regular); font-size: var(--fs-small); }
.status-ic { flex: none; width: var(--status-icon); height: var(--status-icon); }
.status-ic circle { fill: currentColor; }
.status-ic path { fill: none; stroke: var(--on-dark); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.status-compact .status-ic { width: var(--icon); height: var(--icon); }

/* ---------- InitialBadge: teacher's initial on the margin («засчитано учителем») and people ---------- */
.initial {
  display: inline-grid; place-items: center; flex: none; width: var(--s-8); height: var(--s-8); border-radius: var(--r-round);
  background: var(--ok-manual); color: var(--on-dark); font-size: var(--fs-small); font-weight: var(--fw-label); line-height: 1;
}
.initial-outline { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 var(--bw-strong) var(--ink); }

/* ---------- ConnectionStatus: an ink line + a word (solid — есть, dashes — слабая, broken — нет) ---------- */
.conn { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--ink); white-space: nowrap; }
.conn-line { flex: none; width: var(--s-6); height: var(--bw-strong); background: currentColor; }
.conn-weak .conn-line { background: repeating-linear-gradient(90deg, currentColor 0 var(--s-1), transparent var(--s-1) calc(var(--s-1) + var(--s-1) - 1px)); }
.conn-offline .conn-line { background: repeating-linear-gradient(90deg, currentColor 0 var(--s-2), transparent var(--s-2) var(--s-4)); }
.conn-on-dark { color: var(--on-dark); }

/* ---------- Notice: attention plate («!» + text), neutral info, dark teacher-only bar ---------- */
.notice {
  display: flex; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-radius: var(--r);
  background: var(--warn-soft); color: var(--ink);
}
.notice-ic { flex: none; width: var(--status-icon); height: var(--status-icon); color: var(--warn); }
.notice-ic circle { fill: none; stroke: currentColor; stroke-width: 2; }
.notice-ic path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.notice-body { flex: 1; min-width: min(100%, var(--col-min)); }
.notice-body b { display: block; }
.notice-acts { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.notice-info { background: var(--surface-2); }
.notice-dark { background: var(--teacher-only); color: var(--on-dark); --focus: var(--on-dark); }
.notice + .notice { margin-top: var(--s-3); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--s-1); border-bottom: var(--bw) solid var(--line); overflow-x: auto; }
.tab {
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-3); border: 0; background: none; cursor: pointer; white-space: nowrap;
  font-weight: var(--fw-label); color: var(--ink-2); box-shadow: inset 0 calc(-1 * var(--bw-strong)) 0 transparent;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected='true'] { color: var(--ink); box-shadow: inset 0 calc(-1 * var(--bw-strong)) 0 var(--ink); }

/* ---------- Modal (bottom sheet on phones) ---------- */
.modal-back {
  position: fixed; inset: 0; z-index: var(--z-modal); background: var(--overlay);
  display: flex; align-items: flex-start; justify-content: center; padding: var(--s-12) var(--s-4) var(--s-4); overflow-y: auto;
  animation: fade var(--dur) var(--ease-out);
}
.modal {
  width: 100%; max-width: var(--modal); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r);
  animation: rise var(--dur) var(--ease-out);
}
.modal-wide { max-width: var(--modal-wide); }
.modal-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4) 0 var(--s-6); }
.modal-head h2 { flex: 1; font-size: var(--fs-h3); }
.modal-body { padding: var(--s-4) var(--s-6) var(--s-6); }
.modal-foot { display: flex; gap: var(--s-3); justify-content: flex-end; padding: 0 var(--s-6) var(--s-6); flex-wrap: wrap; }
@media (max-width: 600px) {
  .modal-back { padding: 0; align-items: flex-end; }
  .modal { border-radius: var(--r) var(--r) 0 0; max-height: 94vh; overflow-y: auto; }
  .modal-head { padding-left: var(--s-4); }
  .modal-body { padding: var(--s-3) var(--s-4) var(--s-4); }
  .modal-foot { padding: 0 var(--s-4) var(--s-4); }
  .modal-foot .btn { flex: 1; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(var(--s-2)); } }

/* ---------- Toast ---------- */
.toasts {
  position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%); z-index: var(--z-toast);
  display: grid; gap: var(--s-2); width: min(var(--toast-w), calc(100vw - var(--s-8)));
}
.toast {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); min-height: var(--tap);
  border-radius: var(--r); background: var(--ink); color: var(--on-dark); --focus: var(--on-dark);
  animation: rise var(--dur-fast) var(--ease-out);
}
.toast-bad { background: var(--bad-soft); color: var(--ink); box-shadow: inset 0 0 0 var(--bw-strong) var(--bad); --focus: var(--ink); }
.toast-bad .status-ic { color: var(--bad); }
.toast-act {
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-3); border: 0; background: none; color: inherit; cursor: pointer;
  font-weight: var(--fw-label); text-decoration: underline; text-underline-offset: var(--underline-offset);
}

/* ---------- Spinner, Loading, Empty ---------- */
.spinner {
  display: inline-block; flex: none; width: var(--icon); height: var(--icon); border-radius: var(--r-round);
  border: var(--bw-strong) solid var(--line); border-top-color: var(--ink); animation: spin var(--dur-spin) linear infinite;
}
.spinner-sm { width: var(--icon-sm); height: var(--icon-sm); }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-12) var(--s-4); color: var(--ink-2); }
.empty { text-align: center; padding: var(--s-12) var(--s-4); color: var(--ink-2); }
.empty h3 { color: var(--ink); margin-bottom: var(--s-2); }
.empty-acts { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-top: var(--s-4); }

/* ---------- CopyLink ---------- */
.copy-link {
  display: flex; align-items: center; gap: var(--s-2); min-width: 0; padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  border: var(--bw) solid var(--border); border-radius: var(--r-sm); background: var(--surface-2);
}
.copy-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink); }

/* ---------- Menu ---------- */
.menu { position: relative; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + var(--s-1)); z-index: var(--z-menu); min-width: var(--col-min); padding: var(--s-1);
  background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r);
}
.menu-item {
  display: flex; width: 100%; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: 0 var(--s-3);
  border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; text-align: left;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item-danger { color: var(--bad); }

/* ---------- Logo (temporary build, scripts/make-logo.py) ---------- */
.logo { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.logo svg { display: block; height: var(--logo-h); width: auto; }
.logo-sheet { fill: var(--surface); }
.logo-edge { fill: none; stroke: var(--border); stroke-width: 2; }
.logo-margin { fill: var(--accent); }
.logo-rule { fill: var(--margin-line); }
.logo-ink { fill: var(--ink); }
.logo-on-dark .logo-ink.logo-word { fill: var(--on-dark); }

/* ---------- MarginColumn (колонка полей) ---------- */
.margin {
  flex: none; width: var(--margin-col); display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding: var(--s-6) 0; background: var(--surface-2); border-right: var(--bw-strong) solid var(--margin-line);
}
.margin-shown { box-shadow: inset calc(-1 * var(--bw-marker)) 0 0 var(--show); }
.margin-num { font-size: var(--fs-small); font-weight: var(--fw-label); color: var(--ink-2); }
.margin-marks { display: grid; gap: var(--s-2); justify-items: center; }
@media (max-width: 600px) { .margin { padding: 0; } .margin-num, .margin-marks { display: none; } }

/* ---------- RadioGroup ---------- */
.radios { display: grid; gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
.radios legend { padding: 0; margin-bottom: var(--s-1); }
.check input[type='radio'] { width: var(--icon); height: var(--icon); margin: 0; accent-color: var(--ink); }

/* design/css/blocks.css */
/* Lesson blocks as the student sees them — identical in the editor preview, the live lesson, the offline copy.
   The sheet: white, the notebook margin down the left (колонка полей + линия полей), tasks are rows.
   Answer states on every answer surface (gap, option, pair, sentence line):
     ok  — 2px solid --ok border + --ok-soft + ✓ icon (+ word in the task score)
     bad — 1px --bad border + 2px --bad underline of the answer + --bad-soft + ✕ icon; never struck through in the lesson */
.lesson { max-width: var(--content); margin: 0 auto; }
.lesson-sheet {
  border: var(--bw) solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: var(--s-6);
  /* the margin runs the full height, also between rows (insert buttons, editing forms) */
  background: linear-gradient(90deg, var(--surface-2) 0 var(--margin-col), var(--margin-line) var(--margin-col) calc(var(--margin-col) + var(--bw-strong)), var(--surface) calc(var(--margin-col) + var(--bw-strong)));
}
.blk { display: flex; align-items: stretch; scroll-margin-top: calc(var(--tap) * 2); }
.blk + .blk, .lesson-sheet > * + .blk { border-top: var(--bw) solid var(--line); }
.blk-main { flex: 1; min-width: 0; padding: var(--s-6); background: var(--surface); }
.blk-head { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.blk-head:empty { display: none; }
.blk-head > .grow { flex: 1 1 var(--col-min); }
.blk-num { display: none; font-size: var(--fs-small); font-weight: var(--fw-label); color: var(--ink-2); padding-top: var(--s-1); }
.blk-title { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-tight); }
/* the shown task: ink stripe on the margin (MarginColumn) + the ochre marker under its title */
.blk-shown .blk-title { text-decoration: underline var(--bw-marker) var(--show-marker); text-underline-offset: var(--s-1); }
.blk-shown-label { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--s-1); }
.blk-hint { color: var(--ink-2); margin-top: var(--s-1); }
.blk-body { font-size: var(--fs-lesson); line-height: var(--lh-lesson); }
@media (max-width: 600px) {
  .blk-main { padding: var(--s-4); }
  .blk-num { display: block; }
}

/* text */
.md h1, .md h2, .md h3 { margin: var(--s-4) 0 var(--s-2); }
.md h1 { font-size: var(--fs-h2); } .md h2 { font-size: var(--fs-h3); } .md h3 { font-size: var(--fs-lesson); font-weight: var(--fw-label); }
.md ul, .md ol { padding-left: var(--s-6); margin: 0 0 var(--s-3); }
.md li { margin: var(--s-1) 0; }
.md p:last-child { margin-bottom: 0; }
.md blockquote { margin: var(--s-3) 0; padding: var(--s-1) var(--s-4); border-left: var(--bw-strong) solid var(--border); color: var(--ink-2); }
.md em, .md i { font-style: italic; }   /* Nunito Sans italic is slanted: и т п stay и т п, not u m n */

/* vocab */
.vocab { display: grid; }
.vocab-row { display: grid; grid-template-columns: minmax(var(--vocab-col), 1fr) minmax(var(--vocab-col), 1fr); gap: var(--s-1) var(--s-4); padding: var(--s-2) 0; border-bottom: var(--bw) solid var(--line); }
.vocab-row:last-child { border-bottom: 0; }
.vocab-w { display: flex; align-items: center; gap: var(--s-1); font-weight: var(--fw-label); }
.vocab-w .btn { margin-left: calc(-1 * var(--s-3)); }
.vocab-t { color: var(--ink-2); align-self: center; }
.vocab-ex { grid-column: 1 / -1; color: var(--ink-2); font-style: italic; font-size: var(--fs-body); }
@media (max-width: 600px) { .vocab-row { grid-template-columns: 1fr; } }

/* word chips: bank, order, match pool */
.word {
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-4); border-radius: var(--r-sm); border: var(--bw) solid var(--border); background: var(--surface);
  font-size: var(--fs-lesson); color: var(--ink); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.word:hover { border-color: var(--ink); }
.word:active { transform: translateY(1px); }
.word:disabled { cursor: default; color: var(--ink-2); background: var(--surface-2); border-color: var(--line); transform: none; }

/* gaps */
.gaps-text { white-space: pre-wrap; }
.gap {
  display: inline-block; vertical-align: middle; min-width: 4ch; min-height: var(--tap); padding: 0 var(--s-2); margin: var(--s-1) 0;
  border: var(--bw) solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  font-size: inherit; line-height: var(--lh-lesson); font-weight: var(--fw-label); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.gap:hover { border-color: var(--ink-2); }
.gap:focus { border-color: var(--ink); }
.gap.is-ok { border: var(--bw-strong) solid var(--ok); background: var(--ok-soft); }
.gap.is-bad { border-color: var(--bad); background: var(--bad-soft); text-decoration: underline var(--bw-strong) var(--bad); text-underline-offset: var(--underline-offset); }
.gap[readonly] { cursor: default; }
.gaps-text .status { vertical-align: middle; margin-left: var(--s-1); }
.bank { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); padding: var(--s-3); background: var(--surface-2); border-radius: var(--r); }

/* choice */
.q { padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--line); }
.q:first-child { padding-top: 0; }
.q:last-child { border-bottom: 0; padding-bottom: 0; }
.q-text { margin-bottom: var(--s-2); }
.q-n { color: var(--ink-2); font-weight: var(--fw-label); margin-right: var(--s-2); }
.q-filled { font-weight: var(--fw-label); }
.opts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.opt {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); min-width: var(--tap); padding: var(--s-1) var(--s-4); border-radius: var(--r-sm);
  border: var(--bw) solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; font-size: var(--fs-lesson); text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.opt:hover { border-color: var(--ink); }
.opt:disabled { cursor: default; color: var(--ink-2); }
.opt.is-ok { border: var(--bw-strong) solid var(--ok); background: var(--ok-soft); color: var(--ink); }
.opt.is-bad { border-color: var(--bad); background: var(--bad-soft); color: var(--ink); }
.opt.is-bad .opt-text { text-decoration: underline var(--bw-strong) var(--bad); text-underline-offset: var(--underline-offset); }
.opt.is-key { border: var(--bw-strong) dashed var(--ink-2); }

/* match */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }
.match-rows { display: grid; gap: var(--s-2); }
.match-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-1) var(--s-3); align-items: center; width: 100%; min-height: var(--tap);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); border: var(--bw) solid var(--border); background: var(--surface);
  color: var(--ink); text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out);
}
.match-row:hover { border-color: var(--ink); }
.match-row:disabled { cursor: default; }
.match-row .letter { color: var(--ink-2); font-weight: var(--fw-label); font-size: var(--fs-small); }
.match-row .status { grid-column: 3; grid-row: 1; }
.match-row.is-sel { border: var(--bw-strong) solid var(--ink); }
.match-slot { grid-column: 2 / -1; font-weight: var(--fw-label); min-height: var(--s-6); }
.match-slot.free { color: var(--ink-2); font-weight: var(--fw-regular); font-size: var(--fs-body); }
.match-row.is-ok { border: var(--bw-strong) solid var(--ok); background: var(--ok-soft); }
.match-row.is-bad { border-color: var(--bad); background: var(--bad-soft); }
.match-row.is-bad .match-slot { text-decoration: underline var(--bw-strong) var(--bad); text-underline-offset: var(--underline-offset); }
.match-pool { display: flex; flex-wrap: wrap; gap: var(--s-2); align-content: flex-start; position: sticky; top: calc(var(--tap) * 2); }
.match-pool .word { text-align: left; height: auto; padding: var(--s-2) var(--s-4); line-height: var(--lh-tight); }
@media (max-width: 700px) { .match { grid-template-columns: 1fr; } .match-pool { position: static; } }

/* order */
.ord { padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--line); }
.ord:last-child { border-bottom: 0; }
.ord-line {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; min-height: var(--tap-lg); padding: var(--s-1) var(--s-2); margin-bottom: var(--s-2);
  border: var(--bw) dashed var(--border); border-radius: var(--r-sm); background: var(--surface-2);
}
.ord-line.is-ok { border: var(--bw-strong) solid var(--ok); background: var(--ok-soft); }
.ord-line.is-bad { border-style: solid; border-color: var(--bad); background: var(--bad-soft); }
.ord-line.is-bad .word { text-decoration: underline var(--bw-strong) var(--bad); text-underline-offset: var(--underline-offset); }
.ord-pool { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ord-n { color: var(--ink-2); font-weight: var(--fw-label); margin: 0 var(--s-1); }

/* the correct answer for the teacher (not a verdict) */
.solution { margin-left: var(--s-2); font-size: var(--fs-body); font-weight: var(--fw-label); color: var(--ink-2); }
.solution::before { content: '→ '; }
.ord .solution { display: block; margin: 0; }

/* writing */
.writing-prompt { margin-bottom: var(--s-3); }
.writing .textarea { min-height: calc(var(--tap) * 4); font-size: var(--fs-lesson); line-height: var(--lh-lesson); }
.writing-bar { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); flex-wrap: wrap; }

/* discuss */
.discuss { margin: 0; padding-left: var(--s-6); }
.discuss li { padding: var(--s-1) 0; }

/* media */
.media-img { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.media img { border-radius: var(--r); width: 100%; height: auto; max-height: var(--media-h); object-fit: cover; }
.media audio { width: 100%; }
.media video { width: 100%; border-radius: var(--r); background: var(--video-bg); }
.media .frame { position: relative; padding-top: 56.25%; border-radius: var(--r); overflow: hidden; background: var(--video-bg); }
.media .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media .caption { margin-top: var(--s-2); color: var(--ink-2); }
.media-wait { min-height: calc(var(--tap) * 3); display: grid; place-items: center; border-radius: var(--r); background: var(--surface-2); color: var(--ink-2); }
.zoom {
  position: fixed; inset: 0; z-index: var(--z-zoom); display: grid; place-items: center; padding: var(--s-4); border: 0;
  background: var(--video-bg); cursor: zoom-out; --focus: var(--on-dark);
}
.zoom img { max-height: 92vh; width: auto; border-radius: var(--r-sm); }

/* design/css/live.css */
/* The live lesson: room bar, lesson column, video and words on the right (one column under 1100px). */
.room { min-height: 100vh; display: flex; flex-direction: column; }
.room-bar {
  position: sticky; top: 0; z-index: var(--z-bar); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-2) var(--s-6); background: var(--bg); border-bottom: var(--bw) solid var(--line);
}
.room-bar .logo svg { height: var(--logo-h); }
.room-bar > .grow { flex: 1 1 var(--col-wide); }
.room-title { font-weight: var(--fw-label); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-who { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-small); color: var(--ink-2); }
.room-acts { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.room-body { flex: 1; display: grid; grid-template-columns: 1fr var(--room-side); gap: var(--s-6); padding: var(--s-6); align-items: start; }
.room-side { position: sticky; top: calc(var(--tap) * 2); display: grid; gap: var(--s-4); }
.room-main { min-width: 0; }
.room-main .notice, .room-main .invite, .room-pick { margin-bottom: var(--s-4); }
.room-pick { display: grid; gap: var(--s-2); }
@media (max-width: 1100px) {
  /* one DOM position for the video at every width (moving it would remount the panel and drop the call) */
  .room-body { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-4); }
  .room-side { display: contents; }
  .room-side > .video { order: -1; margin-bottom: var(--s-4); }
  .room-main { order: 0; }
  .room-side > .words-panel { order: 1; margin-top: var(--s-4); }
}
@media (max-width: 600px) { .room-bar { padding: var(--s-2) var(--s-4); } }
.invite { display: grid; gap: var(--s-3); }

/* video panel: dark stage, white text; the focus ring turns white on it */
.video { overflow: hidden; }
.video-stage {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center;
  background: var(--video-bg); color: var(--on-dark); --focus: var(--on-dark);
}
.video-stage video.remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-stage video.self {
  position: absolute; right: var(--s-2); bottom: var(--s-2); z-index: 2; width: 30%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-sm); border: var(--bw-strong) solid var(--on-dark); transform: scaleX(-1); background: var(--video-bg);
}
.video-stage video.self.screen { transform: none; }
.video-msg { position: relative; z-index: 1; display: grid; gap: var(--s-3); justify-items: center; padding: var(--s-6); font-size: var(--fs-body); }
.video-err { font-size: var(--fs-small); color: var(--on-dark-2); }
.video-ctrl { display: flex; gap: var(--s-2); justify-content: center; padding: var(--s-2); }
@media (max-width: 1100px) {
  .room-side > .video:not(.floating) .video-stage { aspect-ratio: auto; }
  .room-side > .video:not(.floating) .video-msg { padding: var(--s-4); display: flex; align-items: center; flex-wrap: wrap; justify-content: center; }
  .video.floating { position: fixed; right: var(--s-3); top: calc(var(--tap) + var(--s-6)); width: var(--video-float); z-index: var(--z-video); border-color: var(--border); }
  .video.floating .video-ctrl { padding: var(--s-1); gap: var(--s-1); flex-wrap: wrap; }
}

/* lesson words */
.words-panel h3 { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); font-size: var(--fs-body); font-weight: var(--fw-label); }
.words-panel form { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-2); margin-bottom: var(--s-3); }
.wp-list { display: grid; max-height: var(--list-h); overflow-y: auto; }
.wp-item { display: flex; align-items: center; gap: var(--s-2); border-bottom: var(--bw) solid var(--line); }
.wp-item:last-child { border-bottom: 0; }
.wp-item .grow { overflow-wrap: anywhere; }

/* after the lesson */
.ended { max-width: var(--result-w); margin: 0 auto; padding: var(--s-12) var(--s-4); }
.summary-score { font-size: var(--fs-display); font-weight: var(--fw-medium); line-height: 1; }
.result { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: var(--bw) solid var(--line); }
.result-head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.mistake { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-2) 0; border-bottom: var(--bw) solid var(--line); }
.mistake:last-child { border-bottom: 0; }
.mistake-ctx { flex-basis: 100%; font-size: var(--fs-small); color: var(--ink-2); }
/* in results (not in the live lesson) the wrong answer is struck through */
.mistake s { color: var(--bad); text-decoration-thickness: var(--bw-strong); }
.mistake b { color: var(--ok); }
.result-head .section-title { margin: 0; }

/* design/css/layout.css */
/* Page layout of umky.ru: the ONLY place with the vertical rhythm of sections, the grid, the type scale of the page and the shell
   (demo bar, rail, header, footer, mobile bar, menu). Blocks (blocks-lib.css) never set their own outer spacing, colours or font sizes.
   Law: docs 01-block-library.md. Tokens: tokens.css (product) + tokens-site.css (site). */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html { scroll-padding-top: var(--s-4); }
body { background: var(--bg); color: var(--ink); }
.skip { position: absolute; left: var(--s-2); top: calc(-1 * var(--s-16)); z-index: var(--z-toast); padding: var(--s-2) var(--s-4); background: var(--surface); border: var(--bw-strong) solid var(--ink); border-radius: var(--r-sm); }
.skip:focus { top: var(--s-2); }
[hidden] { display: none !important; }

/* ---------- placeholders of the prototype ---------- */
html.hl-replace [data-replace] { outline: var(--bw-strong) dashed var(--warn); outline-offset: var(--s-1); background: var(--warn-soft); }

/* ---------- demo bar (not part of the site) ---------- */
.showbar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-1) var(--s-4); background: var(--surface-2); border-bottom: var(--bw) solid var(--line); font-size: var(--fs-small); color: var(--ink-2); }
.showbar-t { margin: 0; flex: 1 1 var(--col-wide); }
.showbar-pages { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
.showbar-pages a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); }
.showbar-pages a[aria-current='page'] { font-weight: var(--fw-label); }
.clean .showbar { display: none; }
.seg { display: inline-flex; border: var(--bw) solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.seg-b { min-height: var(--tap); padding: 0 var(--s-4); border: 0; background: var(--surface); color: var(--ink); cursor: pointer; font-weight: var(--fw-label); transition: background-color var(--dur-fast) var(--ease-out); }
.seg-b + .seg-b { border-left: var(--bw) solid var(--border); }
.seg-b:hover { background: var(--surface-2); }
.seg-b[aria-pressed='true'] { background: var(--ink); color: var(--on-fill); }

/* ---------- page sheet: the notebook margin down the left edge ---------- */
.sheet { position: relative; padding-left: var(--rail); }
.rail { position: absolute; top: 0; bottom: 0; left: 0; width: var(--rail); background: var(--surface-2); border-right: var(--bw-strong) solid var(--margin-line); pointer-events: none; }
/* the ink stripe of the "shown" block follows the section being read (IntersectionObserver, transform) */
.rail-stripe { position: absolute; right: 0; top: 0; width: var(--bw-marker); height: 1px; background: var(--show); transform-origin: top; transform: translateY(var(--ry, 0px)) scaleY(var(--rh, 0)); transition: transform var(--dur-slow) var(--ease-out); }
.wrap { max-width: var(--page-wide); margin-inline: auto; padding-inline: var(--s-8); }
@media (max-width: 900px) { .wrap { padding-inline: var(--s-6); } }
@media (max-width: 600px) { .wrap { padding-inline: var(--s-4); } }

/* ---------- header, crumbs, footer ---------- */
.site-head { background: var(--bg); position: relative; z-index: var(--z-bar); }
.head-in { display: flex; align-items: center; gap: var(--s-6); min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.logo svg { display: block; height: var(--logo-h); width: auto; }
.logo-sheet { fill: var(--logo-sheet); }
.logo-ink:not(.logo-word) { fill: var(--logo-u); }
.nav { flex: 1; }
.nav ul, .site-foot ul, .menu-in ul { list-style: none; margin: 0; padding: 0; }
.nav ul { display: flex; gap: var(--s-6); }
.nav a, .site-foot a:not(.logo) { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); text-decoration: none; font-weight: var(--fw-medium); }
.nav a:hover, .site-foot a:not(.logo):hover { text-decoration: underline; text-decoration-color: var(--accent-edge); text-decoration-thickness: var(--bw-strong); text-underline-offset: var(--underline-offset); }
.nav a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--accent-edge); text-decoration-thickness: var(--bw-strong); text-underline-offset: var(--underline-offset); }
.head-act { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.nav + .head-act { margin-left: 0; }
.menu-btn { display: none; }
html:not(.js) .head-in { flex-wrap: wrap; }
@media (max-width: 1100px) {
  .js .nav, .js .login { display: none !important; }
  .js .menu-btn { display: inline-flex; }
  .head-act { margin-left: auto; }
  .head-in { gap: var(--s-3); }
}
@media (max-width: 600px) { .theme-btn { display: none; } }
.crumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: var(--s-2) 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.crumbs li + li::before { content: '/'; margin: 0 var(--s-2); color: var(--border); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink-2); }
.site-foot { background: var(--surface-2); padding-block: var(--space-normal); }
.foot-in { display: grid; gap: var(--s-6); }
.foot-cols { display: grid; grid-template-columns: var(--grid-3); gap: var(--s-6) var(--gap-col); }
.foot-title { margin: 0 0 var(--s-2); font-weight: var(--fw-label); }
.site-foot ul { display: grid; gap: 0; }
.owner { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- THE RHYTHM: one scale of section spacing (48 / 64 / 72, phones 32 / 40 / 48); blocks never set it ---------- */
.sec { --section-y: var(--space-normal); padding-block: var(--section-y); }
.sec[data-space='tight'] { --section-y: var(--space-tight); }
.sec[data-space='loose'] { --section-y: var(--space-loose); }
.sec[data-join] { padding-top: 0; }
.sec:has(+ .sec[data-join]) { padding-bottom: var(--s-6); }          /* a joined section continues the previous one: 24px */
.sec[data-block='hero'] { padding-top: var(--hero-top); }              /* first screen: height by content, never 100vh */
.crumbs + .page .sec[data-block='hero']:first-child { padding-top: var(--s-6); }
.sec[data-layout='column'] .wrap > * { max-width: var(--content); }    /* column: text measure on the page grid */
.sec[data-layout='bleed'] { background: var(--surface-2); }            /* bleed: the field band to the screen edges (same theme, tonal) */

/* ---------- THE TYPE SCALE of the page (blocks only choose a role, never a size) ---------- */
h1.display { font-size: var(--fs-hero); line-height: var(--lh-hero); margin: 0 0 var(--s-4); text-wrap: pretty; }
h2.display { font-size: var(--fs-h2-site); line-height: var(--lh-tight); margin: 0 0 var(--s-3); max-width: var(--measure-wide); text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-text); color: var(--ink-2); margin: 0 0 var(--s-6); max-width: var(--measure-hero); }
.txt { font-size: var(--fs-text); line-height: var(--lh-lesson); max-width: var(--measure); margin: 0 0 var(--s-3); }
.txt-s, .note, .hint { font-size: var(--fs-body); line-height: var(--lh-text); color: var(--ink-2); max-width: var(--measure); margin: 0 0 var(--s-3); }
.note { max-width: var(--measure-hero); margin: var(--s-4) 0 0; }
.note + .note { margin-top: var(--s-1); }
.hint { font-size: var(--fs-small); }
.txt a, .txt-s a, .note a { color: var(--ink); }
.term { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-tight); }
.value { margin: 0; font-size: var(--fs-display); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.close-t { margin: 0 0 var(--s-4); font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: var(--lh-tight); max-width: var(--measure-close); text-wrap: balance; }
.links { margin: var(--s-3) 0 0; font-weight: var(--fw-medium); }
.links a { display: inline-flex; align-items: center; min-height: var(--tap); }
.cta-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.cta-line { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 600px) { .cta-row .btn { flex: 1 1 100%; } }
.sec-head { margin-bottom: var(--s-6); }
.sec-head .txt:last-child { margin-bottom: 0; }
/* status words: line + word, the same in the ledger and the table */
.stat { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-label); }
.stat-line { flex: none; width: var(--s-6); height: var(--bw-strong); background: currentColor; align-self: center; }
.stat-check .stat-line { background: repeating-linear-gradient(90deg, currentColor 0 var(--s-1), transparent var(--s-1) calc(var(--s-2) - 1px)); }
.stat-work .stat-line { background: repeating-linear-gradient(90deg, currentColor 0 var(--s-2), transparent var(--s-2) var(--s-4)); }
.stat-no .stat-line { background: repeating-linear-gradient(90deg, currentColor 0 var(--bw-strong), transparent var(--bw-strong) var(--s-1)); }
.stat-ok { color: var(--ok); }
.stat-no { color: var(--ink-2); }

/* ---------- menu (no sticky bottom bar on phones: the header keeps "Регистрация" in reach, each section ends with its own button) ---------- */
.menu-dlg { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--ink); }
.menu-dlg::backdrop { background: var(--overlay); }
.menu-in { display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); }
.menu-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); }
.menu-in { overflow-y: auto; }
.menu-nav ul { display: grid; gap: var(--s-1); }
.mm-link { display: flex; align-items: center; min-height: var(--tap-lg); font-size: var(--fs-h3); font-weight: var(--fw-medium); color: var(--ink); text-decoration: none; }
.mm-title { margin: var(--s-4) 0 var(--s-1); font-size: var(--fs-small); color: var(--ink-2); }
.menu-nav .mm-group ul { display: grid; gap: 0; }
.menu-cta { display: grid; gap: var(--s-3); padding-top: var(--s-4); padding-bottom: var(--s-2); }

/* ---------- dark theme: product rules that assumed white-on-fill ---------- */
.status-ic path { stroke: var(--on-fill); }
.initial { color: var(--on-fill); }
.toggle[aria-checked='true'] .toggle-track::after { background: var(--on-fill); }
:root[data-theme='dark'] .btn-primary { border-color: var(--accent-edge); }

@media (prefers-reduced-motion: reduce) { .rail-stripe { transition: none; } }

/* ---------- navigation: the "Функции" drop-down (no mega-menu: one list, icon + title + one line) ---------- */
.nav-dd { position: relative; }
.nav-dd__btn { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; font-weight: var(--fw-medium); font-size: var(--fs-body); }
.nav-dd__btn:hover { text-decoration: underline; text-decoration-color: var(--accent-edge); text-decoration-thickness: var(--bw-strong); text-underline-offset: var(--underline-offset); }
.nav-chev { transition: transform var(--dur) var(--ease-out); }
.nav-dd.open .nav-chev { transform: rotate(180deg); }
.nav-dd__panel { display: none; position: absolute; left: calc(-1 * var(--s-4)); top: 100%; z-index: var(--z-menu); width: var(--dd-w); padding: var(--s-2); background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r); }
.nav-dd.open .nav-dd__panel { display: block; }
html:not(.js) .nav-dd:focus-within .nav-dd__panel { display: block; }
.dd-list { display: grid; gap: 0; }
.dd-item, .nav .dd-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: center; min-height: var(--tap); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: var(--fw-regular); }
.dd-item .icon { grid-row: 1 / span 2; }
.dd-t { font-weight: var(--fw-label); line-height: var(--lh-tight); }
.dd-d { grid-column: 2; font-size: var(--fs-small); color: var(--ink-2); line-height: var(--lh-text); }
.dd-item:hover, .dd-item:focus-visible { background: var(--surface-2); }
.dd-item[aria-current='page'] .dd-t { text-decoration: underline; text-decoration-color: var(--accent-edge); text-decoration-thickness: var(--bw-strong); text-underline-offset: var(--underline-offset); }
.dd-all { display: flex; align-items: center; min-height: var(--tap); margin: var(--s-1) var(--s-3) 0; color: var(--ink); font-weight: var(--fw-medium); }
.nav .dd-all, .nav .nav-dd__panel a { font-weight: inherit; }
.nav .dd-list { display: grid; gap: 0; }
.nav .dd-item:hover { text-decoration: none; }

/* ---------- icons: one registry (Lucide, ISC), one stroke, tokens for colour; draw once on appearance, shift on hover ---------- */
.icon { display: inline-flex; flex: none; width: var(--icon-size); height: var(--icon-size); color: var(--ink); }
.icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.icon svg > :nth-child(2) { --k: 1; } .icon svg > :nth-child(3) { --k: 2; } .icon svg > :nth-child(4) { --k: 3; } .icon svg > :nth-child(n+5) { --k: 4; }
.icon[data-draw='0'] svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.icon[data-draw='1'] svg > * { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-icon) var(--ease-out) calc(var(--k, 0) * var(--icon-stagger)); }
a:hover > .icon svg, .dd-item:hover .icon svg, .b-ledger__row:hover .icon svg, .b-columns__item:hover .icon svg { transform: translateX(2px); color: var(--accent-edge); }
@media (prefers-reduced-motion: reduce) { .icon svg { transition: none; } .icon[data-draw] svg > * { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; } }
.menu-cta { position: sticky; bottom: 0; background: var(--bg); }

/* phones: the margin rail keeps only its edge; the moving ink stripe and the scene stripes would stack into noise */
@media (max-width: 600px) { .rail-stripe { display: none; } }

/* design/css/blocks-lib.css */
/* Block library: the inside of each block. Rules for this file (enforced by qa/lint-blocks.mjs and the product's style-lint):
   no outer margin or padding of the block root, no literal colours / font sizes / px except 0, 1px, 2px, only var(--...) tokens,
   columns only from the --grid-* tokens, vertical rhythm only from layout.css. Variants are data-attributes written by the template. */

/* ---------- hero ---------- */
.b-hero { display: grid; grid-template-columns: var(--grid-split); gap: var(--gap-col); align-items: start; }
.b-hero[data-visual='none'] { grid-template-columns: var(--grid-1); }
.b-hero[data-visual='none'] .b-hero__copy { max-width: var(--content); }
.b-hero[data-visual='none'] .lead, .b-hero[data-visual='none'] .note { max-width: var(--measure-hero-none); }
.b-hero__scene { min-width: 0; }
.b-hero .lead, .b-hero .note { max-width: var(--measure-hero); }
@media (max-width: 1100px) { .b-hero .lead, .b-hero .note { max-width: var(--measure-hero-wide); } }

/* ---------- text with scene ---------- */
.b-text[data-arrangement='beside'] { display: grid; grid-template-columns: var(--grid-5-7); gap: var(--gap-col); align-items: center; }
.b-text[data-arrangement='beside'][data-side='left'] .b-text__scenes { order: -1; }
.b-text[data-arrangement='below'] .b-text__scenes { margin-top: var(--s-6); }
.b-text[data-arrangement='below'][data-scenes='2'] .b-text__scenes { display: grid; grid-template-columns: var(--grid-7-5); gap: var(--gap-col); align-items: start; }
.b-text[data-arrangement='narrow'] .b-text__copy { max-width: var(--content); }
.b-text__copy > :last-child { margin-bottom: 0; }

/* ---------- columns and steps ---------- */
.b-columns__list { display: grid; grid-template-columns: var(--grid-3); gap: var(--gap-col); list-style: none; margin: 0; padding: 0; }
.b-columns[data-count='2'] .b-columns__list { grid-template-columns: var(--grid-2); }
.b-columns[data-count='4'] .b-columns__list { grid-template-columns: var(--grid-4); }
.b-columns__item { display: grid; align-content: start; gap: var(--s-2); counter-increment: step; }
.b-columns__item > .icon { margin-bottom: var(--s-1); }
.b-columns__item .body, .b-columns__item .links { margin: 0; line-height: var(--lh-text); }
.b-columns[data-emphasis='first'] .b-columns__item:first-child .body { font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: var(--lh-tight); text-wrap: balance; }
.b-columns[data-numbered] .b-columns__list { counter-reset: step; }
.b-columns[data-numbered] .term::before { content: counter(step) '. '; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.b-columns > .txt-s { margin-top: var(--s-4); }

/* ---------- table ---------- */
.b-table__scroll { position: relative; overflow-x: auto; }
.b-table table { width: 100%; border-collapse: collapse; }
.b-table th, .b-table td { padding: var(--s-3) var(--s-4) var(--s-3) 0; text-align: left; vertical-align: baseline; border-top: var(--bw) solid var(--line); font-size: var(--fs-body); line-height: var(--lh-text); }
.b-table thead th { font-weight: var(--fw-label); color: var(--ink-2); border-top: 0; border-bottom: var(--bw-strong) solid var(--ink); }
.b-table tbody th { font-weight: var(--fw-medium); max-width: var(--measure); }
.b-table tbody tr:last-child th, .b-table tbody tr:last-child td { border-bottom: var(--bw) solid var(--line); }
.b-table > .txt-s { margin-top: var(--s-3); }
.b-table .lbl { display: none; }
@media (max-width: 700px) {
  .b-table:not([data-grouped]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .b-table:not([data-grouped]) table, .b-table:not([data-grouped]) tbody, .b-table:not([data-grouped]) tr, .b-table:not([data-grouped]) th, .b-table:not([data-grouped]) td { display: block; }
  .b-table:not([data-grouped]) tr { padding: var(--s-3) 0; border-top: var(--bw) solid var(--line); }
  .b-table:not([data-grouped]) th, .b-table:not([data-grouped]) td { border: 0; padding: 0 0 var(--s-1); }
  .b-table:not([data-grouped]) .lbl { display: inline; color: var(--ink-2); }
  .b-table[data-cols='1'] .lbl { display: none; }
  /* a comparison by groups keeps its columns: it scrolls inside its own region, the first column stays in view */
  .b-table[data-grouped] table { min-width: calc(var(--s-16) * 9); }
  .b-table[data-grouped] tbody th[scope='row'] { position: sticky; left: 0; background: var(--bg); min-width: calc(var(--s-16) * 2.5); }
  .b-table[data-grouped] .lbl { display: none; }
}

/* ---------- lessons ---------- */
.b-lessons__shelf { display: grid; grid-template-columns: var(--grid-3); gap: var(--s-4); }
.b-lessons[data-count='2'] .b-lessons__shelf { grid-template-columns: var(--grid-2); }
.b-lessons__sheet.lesson-sheet { position: relative; margin: 0; }
.b-lessons__sheet .blk-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); min-height: calc(var(--s-16) * 3); }
.b-lessons__sheet .blk-title { font-size: var(--fs-h3); }
.b-lessons__sheet .meta { display: flex; gap: var(--s-4); margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.b-lessons__sheet .excerpt { margin: 0; flex: 1; font-size: var(--fs-lesson); line-height: var(--lh-lesson); }
.b-lessons__sheet .opt { cursor: default; }
.b-lessons__notes { display: grid; grid-template-columns: var(--grid-2); gap: var(--gap-col); margin-top: var(--s-4); }
.b-lessons__notes .txt-s { margin: 0; }
.lyasse { position: absolute; top: 0; right: var(--s-6); z-index: 1; width: var(--s-6); height: var(--s-12); background: var(--margin-line); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--s-2)), 0 100%); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .lyasse.pre { opacity: 0; transform: translateY(calc(-1 * var(--s-2))); }
@media (prefers-reduced-motion: reduce) { .js .lyasse.pre { opacity: 1; transform: none; } }
@media (max-width: 900px) { .b-lessons__sheet .blk-main { min-height: 0; } }

/* ---------- cases and reviews ---------- */
.b-cases__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-8); }
.b-cases__item { display: grid; grid-template-columns: var(--grid-label); gap: var(--s-6); }
.b-cases .who { display: grid; gap: var(--s-1); align-content: start; margin: 0; font-size: var(--fs-body); color: var(--ink); }
.b-cases .who span { color: var(--ink-2); font-size: var(--fs-small); }
.b-cases .quote { margin: 0 0 var(--s-3); max-width: var(--measure-quote); font-size: var(--fs-h2); line-height: var(--lh-quote); font-weight: var(--fw-medium); text-wrap: balance; }
.b-cases[data-kind='review'] .quote { font-size: var(--fs-h3); max-width: var(--measure); }
.b-cases__notes { display: grid; grid-template-columns: var(--grid-2); gap: var(--gap-col); margin-top: var(--s-4); }
.b-cases__notes .txt-s { margin: 0; }
@media (max-width: 600px) { .b-cases__item { gap: var(--s-2); } }

/* ---------- plans ---------- */
.b-plans__list { display: grid; grid-template-columns: var(--grid-2); gap: var(--gap-col); list-style: none; margin: 0 0 var(--s-4); padding: 0; max-width: calc(var(--page) - var(--s-12)); }
.b-plans[data-count='1'] .b-plans__list { grid-template-columns: var(--grid-1); max-width: var(--content); }
.b-plans[data-count='3'] .b-plans__list { grid-template-columns: var(--grid-3); max-width: none; }
.b-plans__item { padding: var(--s-6); background: var(--surface-2); border-radius: var(--r); }
.b-plans__item .value { margin: var(--s-2) 0; }
.b-plans__item .body { margin: 0; color: var(--ink-2); }
.per { font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--ink-2); }

/* ---------- ledger ---------- */
.b-ledger__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.b-ledger__row { display: grid; grid-template-columns: var(--grid-ledger); gap: var(--s-4); align-items: baseline; }
.b-ledger .main { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: start; }
.b-ledger .main .icon { grid-row: 1 / span 2; }
.b-ledger .main .txt-s { grid-column: 2; }
.b-ledger .main:not(:has(.icon)) { grid-template-columns: minmax(0, 1fr); }
.b-ledger .main:not(:has(.icon)) .txt-s { grid-column: 1; }
.b-ledger[data-status='on'] .b-ledger__row { grid-template-columns: var(--grid-ledger-status); }
.b-ledger .term { margin-bottom: var(--s-1); }
.b-ledger .txt-s { margin: 0; }
.b-ledger .act a { display: inline-flex; align-items: center; min-height: var(--tap); }
@media (max-width: 900px) { .b-ledger__row { gap: var(--s-1); } .b-ledger .act:empty { display: none; } }

/* ---------- faq ---------- */
.b-faq[data-arrangement='beside'] { display: grid; grid-template-columns: var(--grid-aside); gap: var(--s-12); align-items: start; }
.b-faq[data-arrangement='beside'] .b-faq__head { position: sticky; top: var(--s-6); }
@media (max-width: 1100px) { .b-faq[data-arrangement='beside'] { gap: var(--s-6); } .b-faq[data-arrangement='beside'] .b-faq__head { position: static; } }
.b-faq__aside { margin-top: var(--s-6); }
.b-faq[data-arrangement='stacked'] .faq { max-width: calc(var(--content) + var(--s-12)); }
.faq { display: grid; gap: var(--s-1); }
.q-item { border-radius: var(--r); }
.q-item.open { background: var(--surface-2); }
.q-item h3 { margin: 0; font-size: var(--fs-h3); }
.q-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--tap); padding: var(--s-4); border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-tight); }
.q-btn:hover { text-decoration: underline; text-decoration-color: var(--accent-edge); text-decoration-thickness: var(--bw-strong); text-underline-offset: var(--underline-offset); }
.q-btn .ic { flex: none; transition: transform var(--dur) var(--ease-out); }
.q-btn[aria-expanded='true'] .ic { transform: rotate(180deg); }
.q-panel { display: grid; grid-template-rows: 1fr; }
.q-panel > div { min-height: 0; overflow: hidden; }
.q-panel p { margin: 0 var(--s-4) var(--s-4); max-width: var(--measure); font-size: var(--fs-text); line-height: var(--lh-lesson); }
.js .q-panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur) var(--ease-out), visibility var(--dur); }
.js .q-item.open .q-panel { grid-template-rows: 1fr; visibility: visible; }

/* ---------- cta ---------- */
.b-cta > :last-child { margin-bottom: 0; }
.b-cta .cta-line { margin-top: 0; }
.b-cta .txt-s { margin-top: var(--s-3); }

/* ---------- team ---------- */
.b-team__row { display: grid; grid-template-columns: var(--grid-avatar); gap: var(--s-6); align-items: start; }
/* photo of a person, 64 px; no circles with initials */
.avatar { display: block; width: var(--s-16); height: var(--s-16); border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.b-team .name { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }
.b-team .cols { display: grid; grid-template-columns: var(--grid-1); gap: 0 var(--gap-col); }
.b-team[data-columns='2'] .cols { grid-template-columns: var(--grid-2); }
.b-team .cols .txt { max-width: none; }
@media (max-width: 600px) { .b-team__row { gap: var(--s-3); } }

/* ---------- status ---------- */
.b-status { display: grid; grid-template-columns: var(--grid-7-5); gap: var(--gap-col); align-items: start; }
.b-status .txt { margin: 0; }
.b-status__side .txt-s { margin-bottom: var(--s-2); }
.status-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-1); }
.status-line .hint { margin: 0; }
.how { margin-top: var(--s-2); }
.how summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; font-weight: var(--fw-medium); }

/* ---------- form ---------- */
.b-form__form { display: grid; gap: var(--s-4); max-width: var(--content); }
.b-form .field-label .opt-l { font-weight: var(--fw-regular); color: var(--ink-2); }
.b-form .field-error[hidden] { display: none; }
.b-form .consent { align-items: flex-start; }
.b-form .consent input { margin-top: var(--s-3); }
.b-form__act { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.b-form__act .field-hint { margin: 0; }
.b-form__done { max-width: var(--content); }
.b-form .btn[aria-disabled='true'] { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); cursor: not-allowed; }

/* ---------- plans: cumulative "what is included", add-ons, compact ---------- */
.b-plans__item { display: grid; align-content: start; gap: var(--s-1); }
.b-plans__item .value { margin: var(--s-1) 0 0; }
.b-plans .fine { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.b-plans__item .body { margin: var(--s-2) 0 0; }
.b-plans .incl { margin-top: var(--s-4); }
.b-plans .lead-in { margin: 0 0 var(--s-2); font-weight: var(--fw-label); }
.b-plans .incl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.b-plans .incl li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2); align-items: baseline; font-size: var(--fs-body); line-height: var(--lh-text); }
.b-plans .incl li .ic { color: var(--ok); transform: translateY(var(--s-1)); }
.b-plans__addons { margin-top: var(--s-8); padding: var(--s-6); background: var(--surface-2); border-radius: var(--r); }
.b-plans__addons > .term { margin-bottom: var(--s-2); }
.b-plans__addons .addon { display: grid; gap: var(--s-2); padding: var(--s-3) 0 0; max-width: var(--page); }
.addon__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-6); }
.addon .name { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-medium); }
.addon .value { margin: 0; font-size: var(--fs-h2); }
.addon .body { margin: 0; max-width: var(--measure); }
.addon .limits { margin: 0; padding-left: var(--s-6); display: grid; gap: var(--s-1); max-width: var(--measure); color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-text); }
.b-plans[data-compact] .b-plans__list { margin-bottom: var(--s-4); }

/* ---------- table: groups, marks, sub-captions ---------- */
.b-table thead th .sub { display: block; margin-top: var(--s-1); font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--ink-2); }
.b-table__group th { padding: var(--s-6) 0 var(--s-2); border-top: 0; font-size: var(--fs-h3); font-weight: var(--fw-medium); color: var(--ink); }
.b-table[data-grouped] tbody:not(:first-of-type) .b-table__group th { border-top: var(--bw) solid var(--line); }
.b-table .mark { display: inline-flex; align-items: center; vertical-align: middle; }
.b-table .mark-yes { color: var(--ok); }
.b-table .mark-none { color: var(--ink-2); }
.b-table .after { color: var(--ink-2); }
@media (max-width: 700px) { .b-table__group th { padding-top: var(--s-4); } }

.b-table__group .icon { display: inline-flex; vertical-align: middle; margin-right: var(--s-2); }

.sec[data-layout='bleed'] .b-table[data-grouped] tbody th[scope='row'] { background: var(--surface-2); }

/* design/css/scenes.css */
.scene { position: relative; margin: 0; }
.scene-mark { position: absolute; top: 50%; left: 0; width: 1px; height: 1px; pointer-events: none; }
.who { font-size: var(--fs-small); color: var(--ink-2); margin: 0 0 var(--s-2); }
.cap { font-size: var(--fs-small); color: var(--ink-2); margin: var(--s-3) 0 0; max-width: var(--measure); }
/* Scenes: live-component infographics. Layout of the scene itself only; the block that holds it places it. Tokens only. */

/* hero scene A1: teacher room + student phone, built from the product's own components */
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--phone-w); gap: var(--s-4); align-items: stretch; }
.stage-room { --margin-col: var(--s-8); display: flex; flex-direction: column; min-width: 0; border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--bg); overflow: hidden; }
.sr-top { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: var(--bw) solid var(--line); }
.sr-title { display: grid; gap: var(--s-1); flex: 1; min-width: 0; }
.sr-who { display: grid; font-size: var(--fs-small); color: var(--ink-2); }
.sr-who > span { grid-area: 1 / 1; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.st-wait { opacity: 0; transform: translateY(calc(-1 * var(--s-1))); }
.sr-link { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); font-size: var(--fs-small); border-bottom: var(--bw) solid var(--line); }
.sr-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-small); }
.sr-copy { display: inline-grid; }
.sr-copy > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); transition: opacity var(--dur-fast) var(--ease-out); }
.cp-b { opacity: 0; }
.sr-video { margin: var(--s-3) var(--s-3) 0; }
.sr-video .video-stage { aspect-ratio: auto; height: calc(var(--s-16) + var(--s-6)); display: grid; place-items: center; align-content: center; gap: var(--s-1); }
.sr-video .ic { color: var(--on-dark-2); }
.video-stage > span:not(.btn) { font-size: var(--fs-small); color: var(--on-dark-2); }
.video { border: var(--bw) solid var(--line); border-radius: var(--r); }
.vt-name, .vt-wait { transition: opacity var(--dur) var(--ease-out); }
.vt-wait { grid-area: auto; position: absolute; opacity: 0; }
.vt-name { color: var(--on-dark); }
.stage-room .lesson-sheet { margin: var(--s-3); border-radius: var(--r-sm); }
.stage-room .blk-main, .a4-box .blk-main { padding: var(--s-4); }
.stage-room .blk-title { font-size: var(--fs-body); font-weight: var(--fw-label); }
.stage-room .blk-body, .stage-phone .gaps-text { font-size: var(--fs-lesson); line-height: var(--lh-lesson); }
.stage-room .blk-head { margin-bottom: var(--s-2); }
span.gap { display: inline-flex; align-items: center; min-height: var(--gap-h); vertical-align: middle; }
.status-ic { vertical-align: middle; margin-left: var(--s-1); }
.st-ok { color: var(--ok); } .st-bad { color: var(--bad); }
.margin { position: relative; }
.shown-stripe { position: absolute; top: 0; bottom: 0; right: 0; width: var(--bw-marker); background: var(--show); transition: opacity var(--dur) var(--ease-out); }
.stage-room .mk { position: relative; display: inline-block; }
.stage-room .mk::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--s-1)); height: var(--bw-marker); background: var(--show-marker); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); }
.stage-phone { position: relative; width: var(--phone-w); min-height: var(--phone-h); border: var(--bw-strong) solid var(--ink); border-radius: var(--r-device); background: var(--surface); overflow: hidden; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.ph-screen { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity var(--dur) var(--ease-out); }
.ph-bar { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: var(--s-2) var(--s-4); border-bottom: var(--bw) solid var(--line); font-size: var(--fs-small); font-weight: var(--fw-label); }
.ph-logo svg { display: block; height: var(--s-6); width: auto; }
.ph-body { padding: var(--s-4); display: grid; gap: var(--s-3); align-content: start; }
.stage-phone .blk-title { font-weight: var(--fw-label); font-size: var(--fs-body); }
.stage-phone .mk { text-decoration: underline var(--bw-marker) var(--show-marker); text-underline-offset: var(--s-1); }
.ph-chat { opacity: 0; background: var(--surface-2); }
.ph-chat .ph-bar { background: var(--surface); }
.bubble { align-self: flex-start; display: grid; gap: var(--s-1); margin: var(--s-4); padding: var(--s-3); max-width: 80%; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); font-size: var(--fs-small); }
.bubble u { font-family: var(--font-mono); text-decoration-color: var(--accent-edge); text-underline-offset: var(--underline-offset); word-break: break-all; }
/* steps: no data-step = the final (static) composition; the sequencer arms data-step=0 and walks 0,1,2,3 */
.scene[data-step] .st-in, .scene[data-step] .vt-name { opacity: 0; }
.scene[data-step='3'] .st-in, .scene[data-step='3'] .vt-name { opacity: 1; }
.scene[data-step='0'] .st-wait, .scene[data-step='1'] .st-wait, .scene[data-step='2'] .st-wait { opacity: 1; transform: none; }
.scene[data-step='0'] .vt-wait, .scene[data-step='1'] .vt-wait, .scene[data-step='2'] .vt-wait { opacity: 1; position: static; }
.scene[data-step='1'] .cp-a, .scene[data-step='2'] .cp-a { opacity: 0; }
.scene[data-step='1'] .cp-b, .scene[data-step='2'] .cp-b { opacity: 1; }
.scene[data-step='1'] .sr-copy, .scene[data-step='2'] .sr-copy { background: var(--surface-2); }
.scene[data-step='0'] .stage-phone, .scene[data-step='1'] .stage-phone { opacity: 0; transform: translateY(var(--s-2)); }
.scene[data-step='2'] .ph-chat { opacity: 1; }
.scene[data-step='2'] .ph-lesson, .scene[data-step='1'] .ph-lesson, .scene[data-step='0'] .ph-lesson { opacity: 0; }
.scene[data-step='0'] .shown-stripe, .scene[data-step='1'] .shown-stripe, .scene[data-step='2'] .shown-stripe { opacity: 0; }
.scene[data-step='0'] .stage-room .mk::after, .scene[data-step='1'] .stage-room .mk::after, .scene[data-step='2'] .stage-room .mk::after { transform: scaleX(0); }
.scene[data-step='0'] .stage-room .blk-shown-label, .scene[data-step='1'] .stage-room .blk-shown-label, .scene[data-step='2'] .stage-room .blk-shown-label { visibility: hidden; }
@media (max-width: 600px) {
  .stage-grid { grid-template-columns: minmax(0, 1fr); }
  .stage-phone { width: var(--phone-w); min-height: calc(var(--phone-h) - var(--s-16)); justify-self: end; }
  .sr-top { flex-wrap: wrap; }
}

/* ---------- 2. lesson: live demos ---------- */
.a2-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-4); }
@media (max-width: 600px) { .a2-grid { grid-template-columns: minmax(0, 1fr); } }
.a2-phone { border: var(--bw-strong) solid var(--ink); border-radius: var(--r-device); background: var(--surface); padding: var(--s-4); }
.a2-q { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-lesson); line-height: var(--lh-lesson); }
.a2-in { width: 8ch; }
.a2-in.is-ok:focus, .a2-in.is-bad:focus { outline-offset: var(--focus-gap); }
.a2-vi { display: inline-grid; }
.a2-vi > svg { grid-area: 1 / 1; opacity: 0; margin: 0; }
.a2-q[data-v='ok'] .a2-vi .st-ok, .a2-q[data-v='bad'] .a2-vi .st-bad { opacity: 1; }
.a2-acts { margin-top: var(--s-3); }
.a2-sheet { margin: 0; }
.a2-mirror { position: relative; isolation: isolate; display: inline-block; min-width: 4ch; padding: 0 var(--s-1); font-weight: var(--fw-label); border-bottom: var(--bw-strong) solid var(--ink-2); }
.a2-mirror::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--warn-soft); opacity: 0; }
.a2-mirror.is-flash::before { animation: flash var(--dur-flash) var(--ease-out); }
@keyframes flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.a2-status { display: grid; margin-top: var(--s-3); min-height: var(--s-6); }
.stt { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(var(--s-1)); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); }
.a2-status:not([data-v]) .stt-input, .a2-status[data-v='input'] .stt-input, .a2-status[data-v='ok'] .stt-ok, .a2-status[data-v='bad'] .stt-bad { opacity: 1; visibility: visible; transform: none; }
.a2-status[data-v='bad'] .stt-bad .solution { margin-left: var(--s-2); }
.a2-status[data-v='ok'] .stt-ok .status-ic { animation: pop var(--dur) var(--ease-out); }
.a2-status[data-v='ok'] .stt-ok .ck, .a2-q[data-v='ok'] .a2-vi .ck, .mv-ck .ck { transform-box: fill-box; transform-origin: left center; }
.a2-status[data-v='ok'] .stt-ok .ck, .a2-q[data-v='ok'] .a2-vi .ck { animation: wipe var(--dur-fast) var(--ease-out) var(--delay-tick) both; }
.a2-q[data-v='ok'] .a2-vi .st-ok { animation: pop var(--dur) var(--ease-out); }
.a2-q[data-v='ok'] .a2-in { border: var(--bw-strong) solid var(--ok); background: var(--ok-soft); }
.a2-q[data-v='bad'] .a2-in { border-color: var(--bad); background: var(--bad-soft); text-decoration: underline var(--bw-strong) var(--bad); text-underline-offset: var(--underline-offset); }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } }
@keyframes wipe { from { transform: scaleX(0); } }
.a2-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); flex-wrap: wrap; margin-top: var(--s-3); }
.a2-foot .cap { margin: 0; flex: 1 1 var(--col-wide); }
.a2-foot .hint { margin: 0; flex: 1 1 100%; font-size: var(--fs-small); color: var(--ink-2); order: 3; }
.a6-capr { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
.a6-capr .cap { margin: 0; flex: 1 1 var(--col-wide); }
.a6-sheet { margin: 0; }
.a6-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-2); font-size: var(--fs-lesson); }
.a6-st { display: inline-grid; }
.a6-st > .status { grid-area: 1 / 1; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); }
.a6-key { margin: 0 0 var(--s-3); }
.a6-key .solution { margin-left: 0; }
.a6-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-top: var(--s-3); border-top: var(--bw) solid var(--line); }
.a6-score { position: relative; display: inline-grid; margin: 0; font-weight: var(--fw-label); font-variant-numeric: tabular-nums; }
.a6-score > span:not(.sr) { grid-area: 1 / 1; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); }
.a6-foot .btn { min-width: calc(var(--s-16) + var(--s-12)); }
.a6-mark { transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
/* a6: no data-acc = accepted (static final); data-acc=0 = not yet */
.scene-a6 .a6-gap { transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.scene-a6:not([data-acc='0']) .a6-gap.is-bad { border: var(--bw-strong) solid var(--ink); background: var(--surface); text-decoration: none; }
.scene-a6:not([data-acc='0']) .a6-bad, .scene-a6[data-acc='0'] .a6-ok { opacity: 0; visibility: hidden; transform: translateY(var(--s-1)); }
.scene-a6[data-acc='0'] .a6-mark { opacity: 0; transform: translateX(calc(-1 * var(--s-1))); }
.scene-a6[data-acc='0'] .sc-b, .scene-a6:not([data-acc='0']) .sc-a { opacity: 0; visibility: hidden; transform: translateY(var(--s-1)); }

/* ---------- 3. backup call (A4) ---------- */
.a4-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.a4-f { transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.a4-box { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--surface); min-height: calc(var(--s-16) * 3); }
.a4-vs { aspect-ratio: auto; display: grid; gap: var(--s-3); padding: var(--s-4); justify-items: center; text-align: center; }
.video-stage.a4-vs > span:first-child { font-size: var(--fs-body); color: var(--on-dark); }
.a4-btn { transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.scene[data-step='1'] .a4-btn { background: var(--surface-2); transform: translateY(1px); }
.a4-box .notice { padding: var(--s-3); }
.a4-box .notice-body { display: grid; gap: var(--s-2); }
.a4-ans { margin: 0; font-size: var(--fs-lesson); line-height: var(--lh-lesson); }
.a4-ans .gap { min-height: var(--gap-h); }
.a4-two { gap: var(--s-2); }
.a4-mini { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); padding-bottom: var(--s-2); border-bottom: var(--bw) solid var(--line); font-size: var(--fs-small); }
.a4-lbl { color: var(--ink-2); }
.a4-tm { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: var(--fw-label); font-size: var(--fs-body); }
.scene[data-step='0'] .a4-f2, .scene[data-step='0'] .a4-f3, .scene[data-step='1'] .a4-f3 { opacity: 0; transform: translateY(var(--s-2)); }
@media (max-width: 800px) { .a4-frames { grid-template-columns: minmax(0, 1fr); } .a4-box { min-height: 0; } }

/* ---------- 4. migration ---------- */
.mv-stage { display: grid; grid-template-columns: minmax(0, 5fr) var(--s-8) minmax(0, 6fr); align-items: center; }
.mv-doc { padding: var(--s-4); background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r-sm); }
.mv-tag { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-small); color: var(--ink-2); }
.mv-h { margin: var(--s-2) 0 var(--s-3); font-weight: var(--fw-label); }
.mv-lines { margin: 0; padding: 0; list-style: none; }
.mv-lines li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) 0; border-top: var(--bw) solid var(--line); font-size: var(--fs-small); }
.mv-ck { flex: none; width: var(--icon); height: var(--icon); color: var(--ok); transition: opacity var(--dur-fast) var(--ease-out); }
.mv-ck circle { fill: currentColor; }
.mv-ck path { fill: none; stroke: var(--on-fill); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mv-line { position: relative; height: var(--bw-strong); background: var(--line); margin: 0 var(--s-1); }
.mv-line i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); }
.mv-sheet { margin: 0; }
.mv-sheet .blk-main { padding: var(--s-3) var(--s-4); }
.mv-sheet .blk-title { font-size: var(--fs-body); font-weight: var(--fw-label); }
.mv-sheet .blk-body { font-size: var(--fs-body); }
.mv-key { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--ok); font-weight: var(--fw-label); }
.mv-audio { display: inline-flex; align-items: center; gap: var(--s-2); }
.mv-play { width: var(--s-6); height: var(--s-6); border-radius: var(--r-round); border: var(--bw-strong) solid var(--ink); }
.mv-bar { width: var(--s-12); height: var(--bw-strong); background: var(--border); }
.mv-l1 .mv-ck, .mv-l2 .mv-ck, .mv-l3 .mv-ck, .mv-sheet .blk { transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.scene[data-step='0'] .mv-ck, .scene[data-step='0'] .mv-r1, .scene[data-step='0'] .mv-r2, .scene[data-step='0'] .mv-r3,
.scene[data-step='1'] .mv-l2 .mv-ck, .scene[data-step='1'] .mv-l3 .mv-ck, .scene[data-step='1'] .mv-r2, .scene[data-step='1'] .mv-r3,
.scene[data-step='2'] .mv-l3 .mv-ck, .scene[data-step='2'] .mv-r3 { opacity: 0; }
.scene[data-step='0'] .mv-r1, .scene[data-step='0'] .mv-r2, .scene[data-step='0'] .mv-r3, .scene[data-step='1'] .mv-r2, .scene[data-step='1'] .mv-r3, .scene[data-step='2'] .mv-r3 { transform: translateY(var(--s-2)); }
.scene[data-step='0'] .mv-line i { transform: scaleX(0); }
.scene[data-step='0'] .mv-key, .scene[data-step='1'] .mv-key, .scene[data-step='2'] .mv-key { opacity: 0; }
@media (max-width: 600px) {
  .mv-stage { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .mv-line { width: var(--bw-strong); height: var(--s-6); margin: 0 auto; }
  .mv-line i { transform-origin: top; }
  .scene[data-step='0'] .mv-line i { transform: scaleY(0); }
}


/* the margin mark is the point of scene A6: it stays on phones (the product hides it there to save width) */
.scene-a6 { --margin-col: var(--s-12); }
@media (max-width: 600px) {
  .scene-a6 .margin { padding: var(--s-6) 0; }
  .scene-a6 .margin-marks, .scene-a6 .margin-num { display: grid; }
  .scene-a6 .blk-main { padding: var(--s-4); }
}

/* A1: before the student joins there are no answers yet; they appear at step 3 together with "Даша в уроке" */
.stage-room .gap { transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.stage-room .status-ic { transition: opacity var(--dur) var(--ease-out); }
.scene[data-step='0'] .stage-room .gap, .scene[data-step='1'] .stage-room .gap, .scene[data-step='2'] .stage-room .gap { color: transparent; border: var(--bw) solid var(--border); background: var(--surface); text-decoration-color: transparent; }
.scene[data-step='0'] .stage-room .status-ic, .scene[data-step='1'] .stage-room .status-ic, .scene[data-step='2'] .stage-room .status-ic { opacity: 0; }
.a2-sheet .blk-main, .a6-sheet .blk-main { padding: var(--s-4); }
@media (max-width: 600px) {
  .sr-link { flex-wrap: wrap; }
  .sr-link code { flex: 1 1 calc(100% - var(--s-8)); }
  .sr-copy { margin-left: auto; }
}

/* ---------- phones (< 768): ONE scene per block, no nested frames, nothing cropped ----------
   The first screen shows only the student's side ("the student opened the link and is in the lesson"): chat with the link, then the task.
   No video strip, no teacher room, one task, one marker. Frames of the other scenes lose their outline: separation by tone. */
@media (max-width: 767px) {
  .scene { max-width: 100%; }
  .stage-room { display: none; }
  .stage-grid { grid-template-columns: var(--grid-1); }
  .stage-phone { width: 100%; min-height: calc(var(--s-16) * 3.5); border: 0; border-radius: var(--r); background: var(--surface-2); }
  .scene[data-step='0'] .stage-phone, .scene[data-step='1'] .stage-phone { opacity: 1; transform: none; }
  .ph-chat { background: transparent; }
  .scene[data-step='0'] .ph-chat, .scene[data-step='1'] .ph-chat { opacity: 1; }
  .ph-bar, .ph-chat .ph-bar { border-bottom: 0; background: transparent; }
  .bubble { max-width: 100%; }
  .a2-phone { border: 0; background: var(--surface-2); }
  .a4-box { border: 0; background: var(--surface-2); }
  .scene .video, .mv-doc { border: 0; }
  .mv-doc { background: var(--surface-2); }
  .scene .lesson-sheet { border-color: transparent; }
  .a4-box .notice { background: var(--warn-soft); }
}

/* apps/web/src/styles/pages.css: legal pages (the same look as in the app) */
/* ---------- legal pages ---------- */
.legal { max-width: var(--page); margin: 0 auto; padding: 0 var(--s-6) var(--s-12); }
.legal-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--tap-lg); padding: var(--s-4) 0; }
.legal-bar-link { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-label); }
.legal-draft { margin-bottom: var(--s-6); }
.legal-index h1, .legal-main h1 { margin-bottom: var(--s-3); }
.legal-list { display: grid; gap: var(--s-3); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.legal-item { display: grid; gap: var(--s-1); }
.legal-item-title { font-weight: var(--fw-label); font-size: var(--fs-h3); line-height: var(--lh-tight); }
.legal-main { max-width: var(--content); }
.legal-meta { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; color: var(--ink-2); margin-bottom: var(--s-4); }
.legal-todo { margin: 0 0 var(--s-4); }
.legal-toc { margin-bottom: var(--s-8); padding: var(--s-4) var(--s-6); background: var(--surface-2); border-left: var(--bw-strong) solid var(--margin-line); border-radius: var(--r-sm); }
.legal-toc summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: var(--fw-label); }
.legal-toc ul { margin: var(--s-2) 0 0; padding: 0; list-style: none; columns: 2 var(--col-wide); column-gap: var(--s-8); }
.legal-toc li { break-inside: avoid; }
.legal-toc a { display: flex; align-items: center; min-height: var(--tap); }
.legal-text { line-height: var(--lh-lesson); }
.legal-text h2 { font-size: var(--fs-h2); margin: var(--s-8) 0 var(--s-3); scroll-margin-top: var(--s-4); }
.legal-text h3 { font-size: var(--fs-h3); margin: var(--s-6) 0 var(--s-2); scroll-margin-top: var(--s-4); }
.legal-text h4 { font-size: var(--fs-body); font-weight: var(--fw-label); margin: var(--s-4) 0 var(--s-2); }
.legal-text p, .legal-text ul, .legal-text ol { margin: 0 0 var(--s-3); }
.legal-text ul, .legal-text ol { padding-left: var(--s-6); }
.legal-text p:target { background: var(--surface-2); box-shadow: inset var(--bw-marker) 0 0 var(--margin-line); padding-left: var(--s-3); }
.legal-text hr { border: 0; border-top: var(--bw) solid var(--line); margin: var(--s-8) 0; }
.legal-text blockquote { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); background: var(--surface-2); border-left: var(--bw-strong) solid var(--border); border-radius: var(--r-sm); }
.legal-text blockquote p:last-child, .legal-text blockquote ol:last-child { margin-bottom: 0; }
.legal-text mark { background: var(--warn-soft); color: var(--warn); padding: 0 var(--s-1); border-radius: var(--r-sm); }
.legal-text code { font-family: var(--font-mono); font-size: var(--fs-small); }
.table-wrap { overflow-x: auto; margin: 0 0 var(--s-4); }
.legal-text table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: var(--lh-text); }
.legal-text th, .legal-text td { padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--line); text-align: left; vertical-align: top; }
.legal-text th { background: var(--surface-2); font-weight: var(--fw-label); }
.legal-form { margin-top: var(--s-12); scroll-margin-top: var(--s-4); }
.legal-form h2 { margin-bottom: var(--s-3); }
@media (max-width: 600px) { .legal { padding: 0 var(--s-4) var(--s-8); } .legal-toc { padding: var(--s-3) var(--s-4); } }
@media print {
  .legal-bar, .legal-meta .btn, .legal-toc, .legal-form, .site-footer { display: none; }
  .legal { max-width: none; padding: 0; }
  .legal-text mark { background: none; color: inherit; }
  .legal-text a { text-decoration: none; }
}
@page { margin: 16mm; }

/* apps/site/src/styles/site.css */
/* umky.ru: the few things the block library has no rule for (tokens only; the style lint of the library checks this file too).
   Legal pages: the plate «редакция готовится» and the complaint note (as on the temporary site, apps/site-temp/site.css). */
.draft { margin: 0 0 var(--s-6); padding: var(--s-3) var(--s-4); background: var(--warn-soft); color: var(--warn); border-radius: var(--r-sm); }
.draft b { display: block; }
.legal-form { margin-top: var(--s-8); }
.legal-index .legal-list { margin-top: var(--s-6); }
/* cookie consent (src/components/Consent.astro, 09-ui-texts §15): a bottom bar, collapsed it takes at most a third of a phone
   screen; «Настроить по категориям» opens inside with its own scroll; two equal buttons, no pre-ticked boxes */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-toast); background: var(--surface); border-top: var(--bw) solid var(--line); padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom)); max-height: 33vh; overflow-y: auto; }
.consent:has(.consent-more[open]) { max-height: 70vh; }
.consent-in { display: grid; gap: var(--s-2); }
.consent-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.consent-t { font-size: var(--fs-body); font-weight: var(--fw-label); margin: 0; }
.consent-txt { margin: 0; max-width: var(--measure); }
.consent-more summary { display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent-edge); text-underline-offset: var(--underline-offset); }
.consent-cats { display: grid; gap: var(--s-2); padding-top: var(--s-2); }
.consent-act { margin: 0; }
.cookie-open { padding-inline: 0; min-height: var(--tap); }
/* pager of hubs (interim, buttons of the library): the current page is marked by the ink border */
.pager { padding-bottom: var(--space-normal); }
.pager [aria-current='page'] { border-color: var(--ink); }
/* breadcrumbs (Стас, 16.10.2026: «umky» sat lower than «/ Тарифы»): every item is one flex line of the same height, the link,
   the current item and the separator share the baseline */
.crumbs ol { align-items: center; }
.crumbs li { display: inline-flex; align-items: center; min-height: var(--tap); line-height: var(--lh-tight); }
.crumbs li > span, .crumbs a { line-height: var(--lh-tight); }
/* a long current item never wraps under the separator (390: «/» hung beside a two-line title): it takes the rest of the line
   and ends with an ellipsis; the full title is the H1 right below */
.crumbs li:last-child { flex: 1 1 0; min-width: 0; }
.crumbs li:last-child > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the current section in the header: a bar under the item, not an underline of the text (skip-ink broke it into dashes under ф/р);
   a drop-down with the current page inside gets the same bar; the current item in the drop-down — the field tone */
.nav a[aria-current='page'], .nav a[aria-current='page']:hover { text-decoration: none; position: relative; }
.nav a[aria-current='page']::after, .nav-dd:has(.dd-item[aria-current='page']) > .nav-dd__btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: var(--s-2); height: var(--bw-strong); background: var(--accent-edge); border-radius: var(--r-sm); }
.nav-dd:has(.dd-item[aria-current='page']) > .nav-dd__btn { position: relative; }
.dd-item[aria-current='page'] { background: var(--surface-2); }
.dd-item[aria-current='page'] .dd-t { text-decoration: none; }
/* signed in to app.umky.ru (src/scripts/account.js): the round icon with the first letter takes the place of «Войти» +
   «Регистрация» (the block keeps their width, the icon stands at its right edge — nothing in the header moves), its menu opens
   to the left from the right edge; the mobile menu shows the same items instead of the two buttons. Hidden until the answer. */
.acct, .menu-acct { display: none; }
.signed-in .acct { display: flex; justify-content: flex-end; }
.signed-in .menu-acct { display: grid; }
.signed-in .head-act .login, .signed-in .head-act .head-cta, .signed-in .menu-cta > a.btn { display: none !important; }
.acct-btn { justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--r-round); }
.acct-btn:hover { text-decoration: none; }
.acct-i { display: inline-grid; place-items: center; width: calc(var(--tap) - var(--s-2)); height: calc(var(--tap) - var(--s-2)); border: var(--bw) solid var(--border); border-radius: var(--r-round); background: var(--surface-2); color: var(--ink); font-weight: var(--fw-label); line-height: var(--lh-tight); }
.acct-btn:hover .acct-i, .acct.open .acct-i { border-color: var(--ink); }
.acct .nav-dd__panel { left: auto; right: 0; width: max-content; min-width: calc(var(--s-16) * 4); }
.acct .dd-item { grid-template-columns: auto minmax(0, 1fr); }
.acct .dd-list, .menu-acct { list-style: none; margin: 0; padding: 0; }
.menu-acct { padding-bottom: var(--s-2); border-bottom: var(--bw) solid var(--line); }