/* «T001 — Factory A» — то, чего нет у модели B (fa.js).

   Всё остальное берётся из cube.css (.cbx-*): тот же каркас, тот же выбор, те же
   плашки «Верно / Не совсем», та же кнопка звука и микрофона. Здесь только
   ввод плитками, разбор типичных ошибок правила, подсказка ступенями и плашка
   разбора Cullen. Правила те же: рабочий экран светлый, три роли текста (6.9),
   кнопки по содержимому (6.10), цели касания не меньше 44px, единицы — rem.
   Цвета — общие токены, в тёмной теме переключаются сами. */

/* Подсказка ступенью: строка «Подсказка: …» и то, что она открыла. */
.fax-hint { margin-top: 0.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; }
.fax-hint .cbx-snote { margin: 0; }
.fax-hint .cbx-example { align-self: stretch; }

/* Слово или фраза задания на произношение — контент экрана. */
.fax-prompt { margin-bottom: 0.75rem; }
.fax-word { margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 500; line-height: 1.4; color: var(--ink); }

/* Типичные ошибки правила: «неверно — верно — почему». */
.fax-errs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.fax-errs li { padding: 0.75rem 0.875rem; border-radius: var(--rad-md); background: var(--surface-2); }
.fax-wrong, .fax-right { margin: 0; display: flex; gap: 0.5rem; font-size: 1.125rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.fax-wrong { color: var(--danger-text); }
.fax-wrong span, .fax-right span { flex: none; width: 1rem; text-align: center; font-size: 0.9375rem; font-weight: 700; }
.fax-right { margin-top: 0.25rem; color: var(--green-ink); }
.fax-errs .cbx-snote { margin-top: 0.375rem; }

/* Плитки: собранная строка сверху, оставшиеся — снизу. Плитка — кнопка,
   не меньше 44px по высоте; нажатая (уже стоит в строке) — тональная. */
.fax-tileline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 3.5rem; margin: 0 0 0.75rem;
                padding: 0.5rem; border-radius: var(--rad-md); border: 0.0625rem dashed var(--line); background: var(--surface); }
.fax-tileline .cbx-snote { margin: 0 0.25rem; }
.fax-tiles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.25rem; min-height: 2.75rem; }
.fax-tile { min-height: 2.75rem; min-width: 2.75rem; padding: 0.5rem 1rem; border-radius: var(--rad-md); cursor: pointer;
            border: 0.0625rem solid var(--line); background: var(--surface); color: var(--ink);
            font: inherit; font-size: 1.125rem; font-weight: 500; }
.fax-tile:hover:not(:disabled) { border-color: var(--primary-line); background: var(--primary-soft); }
.fax-tile.on { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-ink); }
.fax-tile:disabled { cursor: default; opacity: .7; }
.fax-tile:focus-visible { outline: none; box-shadow: 0 0 0 0.1875rem var(--primary-soft); border-color: var(--primary); }

/* Разбор Cullen: его слова — контент экрана, плашка отделена подложкой. */
.fax-debrief { padding: 1rem 1.125rem; border-radius: var(--rad-lg); background: var(--surface); border: 0.0625rem solid var(--line); }
.fax-debrief .cbx-text { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.5; }

/* «Реплика 1/2» в hear_distinguish: кнопка выбора остаётся кнопкой, не растягиваясь. */
.fax .cbx-mini { flex: none; min-height: 2.75rem; padding: 0 1rem; }

/* Кнопка звука внутри ответа — по центру, как все кнопки (6.10). */
.fax .cbx-play { display: flex; margin: 0.625rem auto 0; }
.fax .cbx-foot .cbx-play { margin: 0; }

/* hear_distinguish: верная реплика отмечена после ответа, промах — тоже. */
.fax .cbx-row.fax-key { background: var(--green-soft); }
.fax .cbx-row.fax-miss { background: var(--danger-soft); }