/* Панель акцентов — СТРУКТУРА и раскладка. Цвета/радиусы/тени приходят из скина (css/skin-*.css).
   Разметка перенесена из макета владельца (.tmp/accent_maket/accent-panel-azure-01-origin.html)
   один в один по геометрии; переименованы только классы.

   ПОЧЕМУ ПРЕФИКС .sk: в макете классы назывались .btn, .col, .group, .key, .switch — все пять
   заняты Bootstrap 5, на котором стоит сайт. Без префикса бутстраповские правила перебивают
   макет (та же ловушка, что была с .vr у voice_recorder). Здесь всё под .sk__*. */

.sk {
    --sk-key-w: 38px;
    --sk-key-h: 36px;
    --sk-cap-w: 56px;
    --sk-cap-h: 56px;
    --sk-gap-row: 7px;
    --sk-gap-rows: 10px;
    --sk-deck-gap: 22px;
    --sk-col-gap: 24px;
    --sk-area-min-h: 420px;
    /* подсказки «как набрать здесь» крупнее остальных кодов шпаргалки (13.5/12.5 px) — это
       главная колонка таблицы */
    --sk-sheet-how-size: 15px;
    --sk-sheet-glyph-size: 20px;
    --sk-sheet-copy: 20px;
    --sk-sheet-copy-inset: 3px;
    font-family: var(--sk-font-ui);
    color: var(--sk-text);
}

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

/* Одна колонка: правая (список других панелей) убрана решением владельца 2026-08-06 —
   соседей по категории показывает общий блок «See also» под инструментом.
   Ширину инструмент НЕ задаёт сам: её держит движок по `layout.width` из манифеста, и в ту же
   колонку он ставит тексты под панелью. Свой max-width здесь разъезжался с ними (владелец
   2026-08-06: «расползается ширина инструмента и текста описания»). */
.sk__wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sk-col-gap);
    align-items: start;
}

.sk__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ---------- Верхний ряд: форматирование, отмена, Clear / Copy all ---------- */
.sk__toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.sk__group {
    display: flex;
    gap: 4px;
    padding: 5px;
    border-radius: var(--sk-r);
    background: var(--sk-well-bg);
    border: 1px solid var(--sk-border);
}

.sk__group--push {
    margin-left: auto;
    background: none;
    border: 0;
    padding: 0;
}

.sk__key,
.sk__btn {
    border: 1px solid var(--sk-key-border);
    border-radius: var(--sk-r-sm);
    background: var(--sk-key-bg);
    color: var(--sk-key-text);
    box-shadow: var(--sk-key-shadow);
    font-family: inherit;
    cursor: pointer;
    transition: transform 60ms ease, background 90ms ease;
}

.sk__key:hover,
.sk__btn:hover {
    background: var(--sk-key-hover-bg);
    color: var(--sk-key-hover-text);
    border-color: var(--sk-key-hover-border);
}

.sk__key:active,
.sk__btn:active,
.sk__key.is-down,
.sk__btn.is-down {
    transform: translateY(2px);
    box-shadow: var(--sk-key-shadow-active);
}

.sk__key {
    width: var(--sk-key-w);
    height: var(--sk-key-h);
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 600;
    /* Клавиша узкая (36 px): надпись из двух знаков («x» с индексом) без этого переносится, и
       цифра уезжает под букву второй строкой. */
    white-space: nowrap;
}

/* Надписи кнопок «x²» и «x₂» набраны РАЗМЕТКОЙ (см. index.php: готовые знаки ² ₂ зависели от
   системного шрифта). Отсюда две поправки. Первая: надпись обёрнута в один `.sk__key-label` —
   клавиша это grid, и `<sup>` в ней становился ОТДЕЛЬНЫМ грид-элементом, то есть цифра вставала
   второй строкой под буквой. Вторая: браузерные умолчания для sup/sub здесь не годятся —
   поднятая строка ломает центрирование, поэтому индекс смещается своим `top`/`bottom` при
   нулевой высоте строки. */
.sk__key-label { white-space: nowrap; }

.sk__key sup,
.sk__key sub {
    position: relative;
    font-size: .68em;
    line-height: 0;
    vertical-align: baseline;
}

.sk__key sup { top: -.4em; }
.sk__key sub { bottom: -.25em; }

.sk__key svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.sk__key--redo svg { transform: scaleX(-1); }

.sk__btn {
    height: 46px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 500;
}

.sk__btn--primary {
    border-color: var(--sk-accent-border);
    background: var(--sk-accent-bg);
    color: var(--sk-accent-text);
    box-shadow: var(--sk-accent-shadow);
    font-weight: 600;
}

.sk__btn--primary:hover {
    background: var(--sk-accent-bg-hover);
    color: var(--sk-accent-text);
    border-color: var(--sk-accent-border);
}

/* Кнопка, которой сейчас нечего делать («Copy all» при пустом поле — решение владельца 2026-08-09).
   ВЫГЛЯДИТ КАК ОБЫЧНАЯ КНОПКА РЯДОМ («Clear») — те же токены клавиши, а не приглушённая синяя
   (уточнение владельца 2026-08-09). Синева у неё значит «это главное действие»; пока действия нет,
   и выделять его нечем. Гасим при этом и подсветку наведения, и вдавливание, и указатель —
   иначе кнопка выглядит живой и человек жмёт её впустую. */
.sk__btn:disabled,
.sk__btn:disabled:hover,
.sk__btn--primary:disabled,
.sk__btn--primary:disabled:hover {
    cursor: default;
    background: var(--sk-key-bg);
    color: var(--sk-key-text);
    border-color: var(--sk-key-border);
    box-shadow: var(--sk-key-shadow);
    font-weight: 500;                 /* как у «Clear»: у активной «Copy all» шрифт жирнее */
}

.sk__btn:disabled:active,
.sk__btn:disabled.is-down {
    transform: none;
    box-shadow: var(--sk-key-shadow);
}

/* ---------- Дека: ряды символов ----------
   Подсказок в деке больше нет (кнопку Help владелец снял 2026-08-10), поэтому и правил их
   размещения здесь не осталось. Перенос `wrap-reverse` сохранён: единственный элемент деки —
   ряды клавиш, и на его поведение он не влияет, зато не требует переписывать раскладку, если
   в деку когда-нибудь вернётся второй блок. */
.sk__deck {
    display: flex;
    gap: var(--sk-deck-gap);
    align-items: flex-start;
    flex-wrap: wrap-reverse;
    align-content: flex-end;
    padding: var(--sk-deck-pad);
    border: 1px solid var(--sk-deck-border);
    border-radius: var(--sk-r);
    background: var(--sk-deck-bg);
    /* Точка отсчёта для всплывашки вариантов: без неё она считает координаты от body
       и уезжает в шапку страницы (поймано владельцем 2026-08-06). */
    position: relative;
}

.sk__rows {
    display: flex;
    flex-direction: column;
    gap: var(--sk-gap-rows);
}

/* ---------- Порядок блоков деки — ИЗ КОНФИГА (секция `deck` в config.php породы) ----------
   Атрибуты печатает index.php, здесь только следствия. Зашивать место подсказки в стилях нельзя:
   один правленый отступ уже ломал фундаментальный порядок панели (2026-08-09).

   hints_overflow=bottom — подсказка при нехватке места падает ВНИЗ (обычный wrap). По умолчанию
   так НЕ делаем: под клавишами идёт поле ввода, и между ними ничего стоять не должно. */
/* hints=top — подсказка ВСЕГДА над клавишами, даже когда справа есть место. */
.sk__row {
    display: flex;
    gap: var(--sk-gap-row);
    flex-wrap: wrap;
}

/* Клавиша-символ языка */
.sk__cap {
    position: relative;
    min-width: var(--sk-cap-w);
    height: var(--sk-cap-h);
    padding: 0 10px;
    display: grid;
    place-items: center;
    font-family: inherit;
    font-size: 23px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--sk-cap-border);
    border-radius: var(--sk-r-key);
    background: var(--sk-cap-bg);
    color: var(--sk-cap-text);
    box-shadow: var(--sk-cap-shadow);
    transition: transform 60ms ease, background 90ms ease;
    /* палец не должен выделять текст клавиши при долгом нажатии */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.sk__cap:hover {
    background: var(--sk-cap-hover-bg);
    color: var(--sk-cap-hover-text);
    border-color: var(--sk-cap-hover-border);
}

.sk__cap:active,
.sk__cap.is-down {
    transform: translateY(3px);
    box-shadow: var(--sk-cap-shadow-active);
}

/* Уголок: заглавная форма символа — подсказка, что Shift+клик её и даст */
.sk__cap-alt {
    position: absolute;
    top: 4px;
    left: 6px;
    font-family: var(--sk-font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--sk-corner);
    pointer-events: none;
}

/* Клавиша-знак препинания: уже и ниже, без уголка */
.sk__cap--punct {
    min-width: 44px;
    width: auto;
    height: 44px;
    font-size: 17px;
    font-weight: 500;
    color: var(--sk-punct-text);
}

/* Уголок «у этой клавиши есть варианты» — подсказка про долгое нажатие */
.sk__cap[data-variants]::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    border: 3px solid transparent;
    border-right-color: var(--sk-corner);
    border-bottom-color: var(--sk-corner);
    opacity: .75;
}

/* ---------- Ссылка на полную раскладку — правый верхний угол панели ---------- */
.sk__full {
    position: absolute;
    top: var(--sk-deck-pad);
    right: var(--sk-deck-pad);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--sk-key-border);
    border-radius: var(--sk-r-sm);
    background: var(--sk-key-bg);
    box-shadow: var(--sk-key-shadow);
    color: var(--sk-key-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.sk__full:hover {
    background: var(--sk-key-hover-bg);
    border-color: var(--sk-key-hover-border);
    color: var(--sk-key-hover-text);
    text-decoration: none;
}

.sk__full svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }

/* Иконка следует за назначением кнопки: панель открыта — ведём на клавиатуру (иконка клавиатуры),
   клавиатура открыта — возвращаем на панель (иконка панели: горстка клавиш над полем ввода).
   Одна и та же клавиатура в обе стороны сбивала: по ней не видно, куда именно ведёт кнопка
   (владелец 2026-08-07). Переключает CSS — JS про иконки не знает. */
.sk__full-i--panel { display: none; }
/* ЗАЖИМА ВЫСОТЫ ЗДЕСЬ БОЛЬШЕ НЕТ. В акцентном движке стояло `max-height: 40rem` (640 px) —
   открытое состояние анимации выехавшей полной раскладки. Фичу при форке убрали, а правило
   осталось и резало КАЖДУЮ панель выше 640 px: у эмодзи содержимое (1190 px) вылезало из синей
   подложки наружу поверх поля ввода. Замер 2026-08-10: scrollHeight 1190 при clientHeight 705.
   Ни один автотест этого не видел — проверялся только ГОРИЗОНТАЛЬНЫЙ вылет. */
.sk__rows,
/* Панель ужимается до полоски: слева отмена/возврат, справа кнопка «назад», синева обнимает их
   одинаковым отступом со всех сторон (владелец 2026-08-06: пустая синева выглядела глупо). */
.sk__deck { transition: padding 240ms ease, gap 240ms ease; }

/* Поле панели на время работы клавиатурой убирается: текст переезжает в её textarea, и держать
   на экране два одинаковых поля незачем. */
.sk__editor {
    transition: max-height 300ms ease, opacity 220ms ease, margin 300ms ease;
    max-height: 80rem;
}

/* Сама клавиатура: выезжает снизу */
.sk__kb {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height 320ms ease, opacity 240ms ease, transform 240ms ease;
}

.sk__kb.is-open {
    max-height: 60rem;
    opacity: 1;
    transform: none;
}

/* Когда выезд закончился, ограничение снимается совсем: при `overflow: hidden` нижний ряд клавиш
   обрезался — у стрелок ↑/↓ они стоят стопкой, и у «вниз» пропадала граница (замечание владельца). */
.sk__kb.is-done {
    overflow: visible;
    max-height: none;
}

.sk__kb[hidden] { display: none; }

/* Поле клавиатуры: движок умеет печатать только в textarea, поэтому на время работы с раскладкой
   текст живёт здесь, а на возврате уезжает обратно в поле панели. */
.sk__kb-out {
    display: block;
    width: 100%;
    min-height: 260px;
    margin-bottom: 12px;
    padding: 16px 18px;
    border: var(--sk-editor-frame-w) solid var(--sk-editor-frame);
    border-radius: var(--sk-r);
    background: var(--sk-panel-bg);
    color: var(--sk-text);
    font: inherit;
    font-size: 17px;
    line-height: 1.6;
    resize: vertical;
}

.sk__kb-out:focus { outline: none; }

/* Клавиатура сидит на такой же синей подложке, как панель, — иначе выглядит голой (владелец) */
.sk__kb .kb {
    padding: var(--sk-deck-pad);
    border: 1px solid var(--sk-deck-border);
    border-radius: var(--sk-r);
    background: var(--sk-deck-bg);
}

/* Вид клавиатуры — токенами её же движка, но в палитре нашего скина: свой скин клавиатуры
   не подключаем, иначе на странице оказались бы две разные темы. */
.sk__kb .kb {
    --kb-font: var(--sk-font-ui);
    --kb-key-bg: var(--sk-cap-bg);
    --kb-key-fg: var(--sk-cap-text);
    --kb-key-border: var(--sk-cap-border);
    --kb-key-shadow: var(--sk-cap-shadow);
    --kb-special-bg: var(--sk-well-bg);
    --kb-special-fg: var(--sk-text);
    /* Нажатие клавиши раскладки — ТЕМНЕЕ покоя. Здесь стояла подсветка наведения панели
       (`--sk-key-hover-bg`, градиент от БЕЛОГО): верх клавиши под пальцем становился светлее
       покоя, а средняя яркость падала всего на 3,2 % при 9,7 % у эталона — нажатия было не видно
       (владелец 2026-08-07). На телефоне это единственный признак: капелька-превью над клавишей
       есть, а вдавливание движок на мобильной грани не рисует. */
    --kb-press-bg: var(--sk-kb-press-bg);
    --kb-radius: var(--sk-r-key);
    --kb-pop-bg: var(--sk-panel-bg);
    --kb-corner-fg: var(--sk-corner);
    --kb-hint-fg: var(--sk-dim);
    --kb-active-indicator: var(--sk-accent-bg);
    --kb-lock-indicator: var(--sk-accent-bg);
}

/* Панель ОДНИМ ПОТОКОМ (партия B): символы идут подряд — сначала буквы, потом знаки, — а строки
   режет перенос СНИЗУ ВВЕРХ. Так буквы всегда оказываются в строке, ближней к полю, а типографика
   уходит выше и остаётся продолжением того же набора, а не отдельной полосой (владелец 2026-08-09:
   «буквы сразу над полем, остальное повыше, но тоже как продолжение ряда»). Тот же приём, что
   на мобильной грани у всех панелей. */
.sk__row--flow {
    flex-wrap: wrap-reverse;
    align-content: flex-end;
}

/* Место под кнопку «Full keyboard» держит ВСЯ ДЕКА, а не только ряды.
   Кнопка висит в правом верхнем углу поверх содержимого, и раньше отступ под неё получали одни
   ряды — а подсказка нет, поэтому кнопка ложилась прямо на строку «Shift+button for upper case»
   (владелец 2026-08-09: «огромное количество клавиатур с налезанием»). Резерв на самой деке
   закрывает зону кнопки для ВСЕГО её содержимого сразу, и ширина рядов при этом не меняется
   ни на пиксель — вычет ровно тот же, что был у них раньше. */
.sk__deck { padding-right: calc(var(--sk-deck-pad) + var(--sk-full-reserve, 0px)); }

/* ---------- Кнопки-модификаторы ----------
   Знак вешается на уже набранную букву. Кнопка узкая, как у знака препинания: это не буква,
   и в ряду она не должна спорить с буквами по весу. На ней пунктирный кружок со знаком (◌̂)
   и номер клавиши в углу — тем же приёмом, каким уголок клавиши показывает верхний регистр. */
.sk__mod {
    position: relative;
    min-width: 38px;
    height: var(--sk-cap-h);
    padding: 0 8px;
    display: grid;
    place-items: center;
    font-family: inherit;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--sk-cap-border);
    border-radius: var(--sk-r-key);
    background: var(--sk-cap-bg);
    color: var(--sk-cap-text);
    box-shadow: var(--sk-cap-shadow);
    transition: transform 60ms ease, background 90ms ease;
    -webkit-user-select: none;
    user-select: none;
}

.sk__mod:hover {
    background: var(--sk-cap-hover-bg);
    border-color: var(--sk-cap-hover-border);
}

.sk__mod:active,
.sk__mod.is-down {
    transform: translateY(3px);
    box-shadow: var(--sk-cap-shadow-active);
}

/* Пунктирный кружок сам по себе бледнее знака: главное здесь — знак, кружок лишь показывает,
   что знаку нужна буква-хозяин. */
.sk__mod-glyph { opacity: .85; }

/* Сам значок — ВЕКТОР, а не символы (формы — `data/mark_glyphs.json` движка). Текстовая запись
   «U+25CC + комбинирующий знак» держалась на СИСТЕМНОМ шрифте: ни кружка, ни половины знаков в
   наших сабсетах нет (замер `ap_font_probe.js`), и на телефоне владельца вместо кружка стоял
   пустой квадрат-тофу (2026-08-10). Вектор наследует цвет и кегль кнопки, поэтому в вёрстке
   ведёт себя как прежний текст. */
.sk__mark {
    display: block;
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Кружок — тоньше и бледнее знака: главное на кнопке знак, кружок лишь показывает, что знаку
   нужна буква-хозяин (та же мысль, что и в типографской записи ◌̂). */
.sk__mark-ring {
    stroke-width: 1.6;
    opacity: .55;
}

.sk__mod-num {
    position: absolute;
    top: 3px;
    left: 5px;
    font-family: var(--sk-font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--sk-corner);
}

/* ---------- Всплывашка вариантов (долгое нажатие) ---------- */
.sk__variants {
    position: absolute;
    z-index: 20;
    display: flex;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--sk-cap-border);
    border-radius: var(--sk-r);
    background: var(--sk-panel-bg);
    box-shadow: var(--sk-panel-shadow);
}

.sk__variants[hidden] { display: none; }

.sk__variant {
    min-width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font: inherit;
    font-size: 21px;
    cursor: pointer;
    border: 1px solid var(--sk-cap-border);
    border-radius: var(--sk-r-key);
    background: var(--sk-cap-bg);
    color: var(--sk-cap-text);
}

.sk__variant:hover,
.sk__variant.is-active {
    background: var(--sk-accent-bg);
    color: var(--sk-accent-text);
    border-color: var(--sk-accent-border);
}

/* ---------- Подсказки справа от деки ---------- */
.sk__chip {
    padding: 3px 7px;
    border: 1px solid var(--sk-key-border);
    border-radius: var(--sk-r-sm);
    background: var(--sk-key-bg);
    box-shadow: var(--sk-key-shadow);
    color: var(--sk-key-text);
}

/* Подсказка, а НЕ клавиша: без объёмной тени, тонкой рамкой — как у эталона. Прежний вид повторял
   клавишу панели, и «Shift» читался как ещё одна кнопка, на которую можно нажать. */
.sk__chip--flat {
    box-shadow: none;
    border-color: var(--sk-chip-flat-border);
    background: var(--sk-chip-flat-bg);
    color: var(--sk-chip-flat-text);
    font-weight: 500;
}

/* Замок регистра: заметный чип, появляется только когда Caps Lock включён */
.sk__chip--caps {
    box-shadow: none;
    border-color: var(--sk-accent-border);
    background: var(--sk-accent-bg);
    color: var(--sk-accent-text);
    font-weight: 600;
}

.sk__chip.is-on { background: var(--sk-accent-bg); color: var(--sk-accent-text); border-color: var(--sk-accent-border); }

/* Помощь: кликается вся строка, текст подчёркнут — видно, что это ссылка, а не подпись */
/* ---------- Поле ввода ---------- */
.sk__editor {
    border: var(--sk-editor-frame-w) solid var(--sk-editor-frame);
    border-radius: var(--sk-r);
    background: var(--sk-panel-bg);
    box-shadow: var(--sk-panel-shadow);
    overflow: hidden;
}

.sk__area {
    min-height: var(--sk-area-min-h);
    padding: 26px 28px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--sk-text);
    caret-color: var(--sk-caret);
    overflow-wrap: break-word;
}

.sk__area:focus { outline: none; }

/* МОНОШИРИННОЕ ПОЛЕ (2026-08-11, табулатура). Результат, который держится на выравнивании
   столбиком, в пропорциональном шрифте разъезжается: шесть строк табулатуры перестают быть
   сеткой ладов. `pre-wrap` нужен по той же причине — без него подряд идущие пробелы схлопнутся
   и сетка съедет, даже если шрифт моноширинный. Включается настройкой `input.mono`. */
.sk__area--mono {
    font-family: var(--sk-font-mono);
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-wrap;
    tab-size: 4;
}

.sk__area:empty::before {
    content: attr(data-ph);
    opacity: .45;
}

.sk__foot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px 10px 28px;
    border-top: 1px solid var(--sk-border);
    background: var(--sk-footer-bg);
    font-family: var(--sk-font-mono);
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sk-dim);
    flex-wrap: wrap;
}

.sk__ghost {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 0;
    border-radius: var(--sk-r-sm);
    background: none;
    cursor: pointer;
    font: inherit;
    color: var(--sk-dim);
}

.sk__ghost--push { margin-left: auto; }
.sk__ghost:hover { background: var(--sk-well-bg); color: var(--sk-text); }

/* Подпись тумблера: название сверху, горячая клавиша мелким серым под ним */
.sk__ghost-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.sk__ghost-hint {
    font-size: 9.5px;
    letter-spacing: .03em;
    text-transform: none;
    opacity: .62;
}

.sk__switch {
    width: 30px;
    height: 16px;
    padding: 2px;
    border-radius: 8px;
    display: flex;
    background: var(--sk-switch-off);
    transition: background 150ms ease;
    flex: 0 0 auto;
}

.sk__switch-knob {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sk-switch-knob);
}

.sk__ghost[aria-pressed="true"] .sk__switch {
    background: var(--sk-switch-on);
    justify-content: flex-end;
}

/* ---------- Справка по сочетаниям ---------- */
/* Крестик: второй способ закрыть справку, очевидный (первый — повторное нажатие на «Help»). */
/* ---------- Шпаргалка кодов ---------- */
.sk__sheet {
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r);
    background: var(--sk-panel-bg);
    overflow: hidden;
    /* без min-width:0 широкая таблица растягивает flex-колонку, и страница едет вбок на телефоне
       (поймано замером на 390 и 760 px) */
    min-width: 0;
    max-width: 100%;
}

.sk__sheet-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sk-border);
    background: var(--sk-footer-bg);
    flex-wrap: wrap;
}

.sk__sheet-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.sk__sheet-search {
    margin-left: auto;
    min-width: 180px;
    padding: 6px 10px;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-sm);
    background: var(--sk-panel-bg);
    color: var(--sk-text);
    font: inherit;
    font-size: 13px;
}

/* Таблица кодов на узком экране не ломает страницу, а прокручивается внутри своей рамки */
.sk__sheet-scroll {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Ширины колонок задаём МЫ, а не длина содержимого: иначе имя символа забирало треть таблицы,
   а остальное жалось в кучу (владелец 2026-08-07: «всё жмётся в кучу… колонки должны быть
   равномерно распределены»). Отсюда `table-layout: fixed` + ширины ниже и нижняя граница: при
   сжатии колонки не схлопываются, а таблица уезжает в свой горизонтальный скролл. */
.sk__table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13.5px;
}

/* Колонка символа — в пикселях, а не в процентах: её содержимое (глиф + кнопка копирования)
   не сжимается, и на узких экранах доля в процентах оказывалась меньше него (замер 760 px,
   2026-08-07). Последней колонке (имя) ширина не задана — ей достаётся остаток. */
.sk__table th:nth-child(1), .sk__table td:nth-child(1) { width: 76px; }
.sk__table th:nth-child(2), .sk__table td:nth-child(2) { width: 36%; }
.sk__table th:nth-child(3), .sk__table td:nth-child(3) { width: 15%; }

/* ЧЕТЫРЁХКОЛОНОЧНАЯ ШПАРГАЛКА (2026-08-11) — у инструментов, показывающих способ ввода.
   Имя ужимается, чтобы место досталось колонке кода: «Ctrl+Shift+U 2192» и «=UNICHAR(9650)»
   длиннее любого имени символа, и при прежних ширинах они распирали таблицу на 360 px
   (замер приёмки: 374 в коробке 326). */
.sk__table--how th:nth-child(2), .sk__table--how td:nth-child(2) { width: 30%; }
.sk__table--how th:nth-child(3), .sk__table--how td:nth-child(3) { width: 30%; }
.sk__table--how th:nth-child(4), .sk__table--how td:nth-child(4) { width: 15%; }

/* На телефоне четвёртая колонка съедает ширину не содержимым, а ОТСТУПАМИ: 12 px слева и справа
   у каждой ячейки — это 96 px из 328 доступных, плюс 76 px фиксированной колонки символа.
   Замер приёмки: таблица 374 в коробке 328. Поэтому на узком экране у четырёхколоночной
   шпаргалки отступы и колонка символа ужимаются, а код набирается мельче. */
@media (max-width: 560px) {
    .sk__table--how th,
    .sk__table--how td { padding: 6px 5px; }
    .sk__table--how th:nth-child(1), .sk__table--how td:nth-child(1) { width: 42px; }
    .sk__table--how td.sk__td-how code { font-size: 10.5px; }
    .sk__table--how .sk__sheet-ch { font-size: 17px; }
}

.sk__table th,
.sk__table td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--sk-border);
    text-align: left;
    white-space: nowrap;
}

/* Колонки разделены линией: без неё столбцы сливались в сплошное поле знаков
   (владелец 2026-08-07: «границ колонок нет, всё сливается в глазах»). */
.sk__table th + th,
.sk__table td + td {
    border-left: 1px solid var(--sk-border);
}

/* Имя символа переносится — это текст, а не код и не сочетание клавиш. */
.sk__table td.sk__sheet-name { white-space: normal; }

/* КОЛОНКА СПОСОБА ВВОДА (2026-08-11) — только у инструментов, объявивших `sheet.how`.
   Моноширинная: в ней стоят коды и сочетания, а не текст, и в пропорциональном шрифте
   «Alt+0169» и «Alt+0176» перестают выравниваться друг под другом. */
.sk__table td.sk__td-how {
    white-space: normal;
}

.sk__table td.sk__td-how code {
    font-family: var(--sk-font-mono);
    font-size: 12.5px;
    /* Перенос разрешён — но внутри самого кода стоят НЕРАЗРЫВНЫЕ пробелы (их подставляет PHP),
       поэтому строка рвётся только по разделителю «·» между двумя способами. С `nowrap`
       колонка не помещалась на 360 px и распирала шпаргалку (замер приёмки: 399 в коробке 326). */
    white-space: normal;
}

.sk__how-none {
    opacity: .45;
}

/* КОЛОНКА СИМВОЛА ПЕРЕНОСИТСЯ ТОЖЕ (2026-08-11). Клавиша породы умеет печатать не знак, а целую
   СТРОКУ («✓ In stock — ships today»), и в шпаргалке такая строка с `nowrap` не помещалась в свои
   76 px: при `table-layout: fixed` она не сжимается, а распирает таблицу — на 360 px та вылезала
   за подложку и обрезалась `overflow: hidden`, унося вправо часть строки. Поймано приёмкой на
   узкой ширине, глазами на широком экране не видно вовсе. */
.sk__table td:nth-child(1) {
    white-space: normal;
    overflow-wrap: anywhere;
}

.sk__table th {
    font-family: var(--sk-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sk-dim);
    font-weight: 500;
    white-space: normal;
}

/* Колонка сочетаний — по ЛЕВОМУ краю, но с общим увеличенным отступом: центрирование давало разной
   длины строкам разное начало, и глаз не находил, откуда читать (владелец 2026-08-07: «выровняй по
   левой стороне, но сделай у всех одинаковый отступ слева, чтобы не сливалось»). Отступ один и тот
   же у заголовка и у ячеек — они должны стоять по одной линии. */
.sk__table th.sk__sheet-how,
.sk__table td.sk__sheet-how {
    text-align: left;
    padding-left: 26px;
}

/* Заголовок колонки символов — по центру, над самими символами (владелец 2026-08-07) */
.sk__table th:nth-child(1) { text-align: center; }

/* Символ и кнопка копирования — в одной ячейке: человеку нужен именно этот символ, и «Copy»
   должен быть рядом с ним, а не в конце длинной строки (владелец 2026-08-06).
   Флекс живёт на ВНУТРЕННЕЙ обёртке: `display:flex` прямо на td выбивает ячейку из табличной
   раскладки — три кодовые колонки от этого сложились друг под другом (замер 2026-08-07). */
.sk__cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Колонки способов — ГЛАВНЫЕ в шпаргалке: за ними сюда и приходят («how to type ñ»). Выделены
   размером и цветом сочетаний; подложка была убрана 2026-08-07 по решению владельца — вместе
   с цветным текстом она перегружала таблицу. */
.sk__table td.sk__sheet-how code {
    font-size: var(--sk-sheet-how-size);
    font-weight: 500;
    color: var(--sk-sheet-how-color);
}

/* «or» между способами — служебное слово, а не часть сочетания: светлее, тоньше и мельче самих
   сочетаний, чтобы читалось как разделитель (владелец 2026-08-07). */
.sk__or {
    color: var(--sk-sheet-or);
    font-weight: 400;
    font-size: .8em;
}

/* Стилей кодовых ячеек (.sk__sheet-code, .sk__copy--mini) здесь больше нет: колонки кодов убраны
   из шпаргалки 2026-08-07 — см. чейнджлог движка. */

/* Сам символ — крупнее и цветом панели: это то, за чем в строку и смотрят (владелец 2026-08-07). */
.sk__sheet-glyph {
    display: inline-block;
    font-size: var(--sk-sheet-glyph-size);
    color: var(--sk-sheet-glyph);
}

/* В колонке символа центрируется ТОЛЬКО символ, а кнопка копирования висит справа от него и не
   участвует в центрировании (владелец 2026-08-07). Поэтому здесь не флекс: во флексе центр считался
   бы по паре «символ + кнопка», и буквы стояли бы вразнобой относительно заголовка колонки.
   Кнопка выровнена по НИЖНЕЙ границе символа — так она читается как его спутник, а не как
   самостоятельный элемент строки. */
.sk__sheet-char .sk__cell {
    display: block;
    text-align: center;
    /* font-size: 0 гасит ПРОБЕЛ между символом и кнопкой: они инлайновые, а в разметке стоят на
       разных строках — этот перенос давал лишние 3,5 px, которых нет ни в одном отступе (замер
       2026-08-07). Свой размер шрифта есть у обоих потомков. */
    font-size: 0;
}

/* Кнопка копирования — в ПРАВОМ ВЕРХНЕМ УГЛУ ячейки (владелец 2026-08-07). Она вынута из потока,
   поэтому символ центрируется сам по себе, без распорок и подгонок: центр ячейки = центр символа. */
.sk__sheet-char { position: relative; }

.sk__sheet-char .sk__copy {
    position: absolute;
    top: var(--sk-sheet-copy-inset);
    left: var(--sk-sheet-copy-inset);
}

.sk__table code {
    font-family: var(--sk-font-mono);
    font-size: 12.5px;
    color: var(--sk-text);
}

/* Копирование — иконкой: подпись «Copy» в каждой строке была шумом (владелец 2026-08-06).
   Обрамления НЕТ (владелец 2026-08-07: «иконка слишком большая и оттесняет символ, должна быть
   поменьше, поближе и без обрамления») — рамка делала из служебной иконки вторую по весу фигуру
   в строке и спорила с самим символом. Подложка появляется только под курсором. */
.sk__copy {
    display: grid;
    place-items: center;
    width: var(--sk-sheet-copy);
    height: var(--sk-sheet-copy);
    padding: 0;
    border: 0;
    border-radius: var(--sk-r-sm);
    background: none;
    /* тон светлее текста: кнопка служебная и не должна спорить с символом (владелец 2026-08-07) */
    color: var(--sk-sheet-copy-color);
    cursor: pointer;
    flex: 0 0 auto;
}

.sk__copy:hover { background: var(--sk-well-bg); color: var(--sk-text); }
.sk__copy svg { width: 14px; height: 14px; fill: currentColor; grid-area: 1 / 1; }
.sk__copy-ok { display: none; }

/* Скопировано: галочка вместо страниц — короткий и понятный отклик без смены ширины. Без рамки
   и заливки отклик даёт цвет: галочка становится синей, как сам символ. */
.sk__copy.is-done { color: var(--sk-sheet-how-color); }
.sk__copy.is-done .sk__copy-i { display: none; }
.sk__copy.is-done .sk__copy-ok { display: block; }
.sk__row-hidden { display: none; }

/* ---------- Заметки о языке ---------- */
.sk__notes {
    font-size: 14px;
    line-height: 1.65;
}

.sk__notes h2 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
}

.sk__notes p { margin: 0 0 8px; }

/* Экранным читалкам — да, глазам — нет */
.sk__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Узкий экран ----------
   Правая колонка уходит наверх и ложится в строку; дека и поле сжимаются. Панель символов на
   телефоне прилипает над системной клавиатурой — этим занимается JS (visualViewport), см. .is-docked. */
@media (max-width: 991.98px) {
    .sk__wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    /* Кнопка полной раскладки уходит из угла в поток: при узкой панели она наезжала на клавиши
       верхнего ряда (поймано скрином 390 px). Встаёт последней строкой деки. */
    .sk__full {
        position: static;
        align-self: flex-start;
        margin-top: 2px;
    }
}

/* ---------- Телефон: компоновка по макету владельца (2026-08-07) ----------
   Буквы языка — НАД полем ввода, поле — внутри той же синей деки, второстепенный ряд (пунктуация,
   валюта) — ПОД полем, кнопка «Full keyboard» — в правом нижнем углу. Порядок узлов переставляет JS
   (класс `.is-phone` на корне), здесь — только вид. Всё, что относится к физической клавиатуре
   (подсказки про Alt и Shift, тумблер сочетаний, шпаргалка сочетаний), на телефоне скрыто:
   там нет клавиатуры, и рассказывать про Alt нечего. */
@media (max-width: 700px) {
    .sk {
        /* клавиши мельче десктопных: все символы теперь над полем, и ряды не должны съедать экран
           (владелец 2026-08-07, дважды: «сделай кнопочки поменьше, крупноваты») */
        --sk-cap-w: 32px;
        --sk-cap-h: 32px;
        --sk-area-min-h: 200px;
        --sk-deck-gap: 10px;
    }
    .sk__deck { flex-direction: column; }
    /* Форматирование на телефоне не показываем: у typeit на мобильной грани его тоже нет,
       а место нужно клавишам (замерено на spanish.typeit.org 390×844, 2026-08-06). */
    .sk__group--format { display: none; }
    .sk__btn { height: 40px; padding: 0 12px; }
    /* пальцем в кнопку 20 px не попасть — на телефоне копирование крупнее */
    .sk__copy { width: 30px; height: 30px; }
}

/* На телефоне дека идёт ВО ВСЮ ШИРИНУ экрана: боковые поля страницы съедали место, которого клавишам
   и так не хватает, и панель выглядела зажатой (владелец 2026-08-07: «а отступы можно убрать справа
   и слева? зачем они на мобайле?»). Выпускаем деку за поля колонки и снимаем боковые скругления. */
.sk.is-phone .sk__deck {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

/* Свёрнутый блок шпаргалки на телефоне: заголовок-«ушко» виден и кликается, содержимое открывается
   по желанию. На десктопе «ушка» нет вовсе — там блок всегда развёрнут и живёт под панелью. */
.sk__sheet-sum { display: none; }

.sk.is-phone .sk__sheet-sum {
    display: block;
    padding: 12px 16px;
    background: var(--sk-footer-bg);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.sk.is-phone .sk__sheet-sum::-webkit-details-marker { display: none; }

/* Внутренний заголовок таблицы на телефоне не нужен: его роль играет само «ушко» details,
   и два одинаковых заголовка подряд читались как ошибка (владелец 2026-08-07). Поиск остаётся. */
.sk.is-phone .sk__sheet-title { display: none; }

.sk.is-phone .sk__sheet-sum::after {
    content: "▾";
    float: right;
    opacity: .55;
}

.sk.is-phone .sk__sheet[open] .sk__sheet-sum::after { content: "▴"; }

/* Дека на телефоне обнимает всё: ряды, поле и кнопку раскладки.
   `flex-wrap: nowrap` обязателен: у деки перенос включён с десктопа, и в колонке он пытался
   разложить содержимое в НЕСКОЛЬКО колонок — из-за этого обёртка клавиатуры получала на 22 px
   меньше своей высоты, и нижний ряд клавиш уходил под кнопку возврата (замер 390 px, 2026-08-07). */
.sk.is-phone .sk__deck {
    gap: var(--sk-deck-gap);
    align-items: stretch;
    flex-wrap: nowrap;
}

/* Раскладка на телефоне — КАК У ЭТАЛОНА typeit (владелец 2026-08-07: «порядок и строковое
   расположение как тут»): символы идут слева направо в порядке данных языка, строки переносятся
   СНИЗУ ВВЕРХ (`wrap-reverse`), поэтому буквы стоят в строке, ближней к полю, а знаки и хвост —
   выше. У эталона панель под полем и порядок строк обратный — у нас панель НАД полем, и
   `wrap-reverse` даёт ту же последовательность чтения. */
.sk.is-phone .sk__row {
    flex-wrap: wrap-reverse;
    justify-content: flex-start;
    gap: 4px;
}

/* Управленческая строка телефона: Shift, отмена/возврат, Clear и Copy all — отдельной полосой
   НАВЕРХУ деки, над символьными рядами (владелец 2026-08-07). Кнопки те же самые, что в шапке
   на десктопе, — их переносит JS, поэтому сама шапка на телефоне пустеет и скрывается. */
.sk.is-phone .sk__toolbar { display: none; }

/* Строка держится в ОДНУ линию: с переносом Clear и Copy all уезжали вниз и полоса переставала
   читаться как управление (владелец 2026-08-07, замер 390 px). Поэтому nowrap, компактные кнопки
   и минимальные зазоры — всё пятеро умещаются на самом узком телефоне. */
.sk__ctl {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.sk__ctl .sk__group {
    background: none;
    border: 0;
    padding: 0;
    gap: 4px;
    flex-wrap: nowrap;
}

/* Clear и Copy all — всегда у правого края строки, в том числе при открытой раскладке: там
   десктопное правило обнуляет отступы групп, и они прилипали к Shift (замер 390 px, 2026-08-07). */
.sk.is-phone .sk__ctl .sk__group--push { margin-left: auto; }

/* Кнопки строки АДАПТИВНЫ: отступы и кегль тянутся от ширины экрана, а сами кнопки могут ужиматься
   (`min-width: 0` + разрешённый shrink). На узком телефоне полоса сжимается, но остаётся одной
   строкой — съезжать вниз ей нельзя (владелец 2026-08-07: «съезжать не должно, делай адаптивными»). */
.sk.is-phone .sk__ctl .sk__btn {
    height: 32px;
    padding: 0 clamp(5px, 2.2vw, 12px);
    font-size: clamp(11px, 3vw, 13px);
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}

.sk.is-phone .sk__ctl .sk__key {
    width: clamp(26px, 8vw, 32px);
    height: 32px;
    flex: 0 0 auto;
}

.sk.is-phone .sk__ctl .sk__key svg { width: 14px; height: 14px; }

/* Клавиша Shift — только на телефоне: на десктопе её роль играют Shift+клик и физическая клавиша.
   В управленческой строке она с подписью, чтобы не гадать по стрелке. */
.sk__cap--shift { display: none; }

.sk.is-phone .sk__cap--shift {
    display: flex;
    align-items: center;
    gap: 4px;
    width: auto;
    min-width: 0;
    height: 32px;
    padding: 0 clamp(5px, 2.2vw, 10px);
    flex: 0 1 auto;
}

.sk__cap--shift svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }

.sk__cap-label {
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

/* Включённый регистр видно по самой клавише — как на мобильных клавиатурах */
.sk__cap--shift.is-on {
    background: var(--sk-accent-bg);
    border-color: var(--sk-accent-border);
    color: var(--sk-accent-text);
}

/* Уголок с заглавной формой на телефоне НЕ показываем: там регистр даёт клавиша Shift, а не
   Shift+клик, и подсказка только сорит (владелец 2026-08-07). Уголок в акцентной панели остаётся
   означать одно: «у клавиши есть варианты по долгому нажатию» (`[data-variants]::after`). */
.sk.is-phone .sk__cap-alt { display: none; }

/* На телефоне ВСЕ символьные клавиши одного размера — и буквы, и знаки: ширина по содержимому
   ставила их вразнобой, и ряды не читались колонками (владелец 2026-08-07). Клавиша Shift сюда
   не входит — она в управленческой строке и живёт по своим правилам. */
.sk.is-phone .sk__cap:not(.sk__cap--shift) {
    width: var(--sk-cap-w);
    min-width: var(--sk-cap-w);
    height: var(--sk-cap-h);
    padding: 0;
    flex: 0 0 auto;
    font-size: 16px;
}

/* Кнопки-модификаторы на телефоне — той же ширины, что клавиши символов, иначе они не влезают:
   у вьетнамской панели их девять, и при десктопной ширине ряд оказывался шире экрана — дека
   разъезжалась, а кнопка «Full keyboard» уходила за правый край (замер 390×844, 2026-08-09). */
.sk.is-phone .sk__mod {
    width: var(--sk-cap-w);
    min-width: var(--sk-cap-w);
    height: var(--sk-cap-h);
    padding: 0;
    flex: 0 0 auto;
    font-size: 16px;
}

/* Номер клавиши на телефоне не нужен: цифровых клавиш там нет, а уголок съедает место у знака. */
.sk.is-phone .sk__mod-num { display: none; }

/* Поле ввода внутри деки — белым по синему, как в макете */
.sk.is-phone .sk__editor {
    margin: 0;
    max-height: none;
    opacity: 1;
}

/* На телефоне поле панели при открытой раскладке ОСТАЁТСЯ и не меняет размера (владелец 2026-08-07:
   «его размеры не должны меняться, просто снизу должна появляться клавиатура»). Печатает движок
   по-прежнему в свою textarea, но её на телефоне не видно: текст зеркалится в поле панели. */
/* Пока открыта полная раскладка, акцентов сверху нет вовсе (владелец 2026-08-07): на телефоне они
   не нужны — раскладка языка и так несёт все буквы, а место на экране дороже. */
/* Телефон: на время работы раскладкой textarea движка встаёт ВНУТРЬ рамки поля панели и выглядит
   как то же самое поле — рамка, футер и счётчик остаются на месте, меняется только сам «лист».
   Так каретка настоящая: видна, мигает, переставляется тапом, и ввод идёт именно в неё
   (владелец 2026-08-07). Прежняя схема — спрятанная textarea плюс нарисованная каретка — была
   ошибкой: курсор стоял намертво в конце. */
.sk.is-phone .sk__editor > .sk__kb-out {
    flex: 1 1 auto;
    width: 100%;
    min-height: var(--sk-area-min-h);
    margin: 0;
    padding: 16px 18px;
    border: 0;
    border-radius: 0;
    background: var(--sk-panel-bg);
    color: var(--sk-text);
    font: inherit;
    font-size: 17px;
    line-height: 1.6;
    caret-color: var(--sk-caret);
    resize: none;
}

.sk.is-phone .sk__editor > .sk__kb-out:focus { outline: none; }
.sk.is-phone .sk__area[hidden] { display: none; }

/* Раскладка на телефоне разворачивается ВО ВСЮ ШИРИНУ деки, без вложенных рамок: у неё была своя
   синяя подложка с рамкой поверх синей деки, и клавиатура сидела в «матрёшке» из обводок
   (владелец 2026-08-07: «должна открываться как в оригинале — на всю ширину окна»). */
.sk.is-phone .sk__kb {
    margin-left: calc(-1 * var(--sk-deck-pad));
    margin-right: calc(-1 * var(--sk-deck-pad));
    /* обёртка не сжимается: её высоту задаёт клавиатура, а не остаток места в деке */
    flex: none;
}

.sk.is-phone .sk__kb .kb {
    /* косметический воздух по краям: без него крайние клавиши упирались в границы экрана
       (владелец 2026-08-07) */
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background: none;
}

/* Своей каретки здесь НЕТ и быть не должно: поле остаётся редактируемым, каретка родная —
   видна, мигает и переставляется тапом. Системную клавиатуру гасит `inputmode="none"`, как
   в движке клавиатур. Нарисованная каретка стояла бы намертво в конце строки (ошибка 2026-08-07). */

/* На телефоне панель НЕ схлопывается в полоску: раскладка встаёт на место нижнего ряда, а буквы
   языка и кнопка возврата остаются на своих местах. Поэтому десктопное «полоской в строку»
   (flex-direction: row у деки) здесь отменяется. */
/* Кнопка «Full keyboard» — в правом нижнем углу деки */
.sk.is-phone .sk__full {
    position: static;
    align-self: flex-end;
    margin: 0;
}

/* ---------- Тач: вдавленность даёт ТОЛЬКО класс, а не :active ----------
   На тач-устройствах браузер держит `:active` до следующего касания в другом месте, поэтому клавиша
   оставалась вдавленной после обычного тапа и особенно после долгого нажатия (владелец 2026-08-07:
   «клавиши залипают в зажатом состоянии, даже при однократном нажатии»; то же было у отмены/возврата).
   Здесь `:active` обесточен, а состояние `.is-down` ставит и СНИМАЕТ движок — в том числе глобальной
   страховкой на отпускание указателя. */
@media (hover: none) {
    .sk__key:active:not(.is-down),
    .sk__btn:active:not(.is-down) {
        transform: none;
        box-shadow: var(--sk-key-shadow);
    }

    .sk__cap:active:not(.is-down) {
        transform: none;
        box-shadow: var(--sk-cap-shadow);
    }

    /* и подсветки наведения на тач-экране быть не должно — она тоже «залипает» после тапа */
    .sk__key:hover,
    .sk__btn:hover:not(.sk__btn--primary) {
        background: var(--sk-key-bg);
        color: var(--sk-key-text);
        border-color: var(--sk-key-border);
    }

    .sk__cap:hover {
        background: var(--sk-cap-bg);
        color: var(--sk-cap-text);
        border-color: var(--sk-cap-border);
    }
}

/* Панель прилипла над системной клавиатурой телефона */
.sk__deck.is-docked {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    border-radius: 0;
    box-shadow: var(--sk-panel-shadow);
}

/* ============================================================================
   ГРУППЫ СИМВОЛОВ — добавлено при форке движка под категорию «Специализированные
   клавиатуры» (2026-08-10).

   Зачем: у знаков нет алфавитного порядка, и человек ищет их ПО СМЫСЛУ («Bullets»,
   «Checkboxes», «Diameters»), а не по ряду. У акцентных панелей ряды безымянные —
   там порядок задаёт эталон и алфавит языка, а здесь заголовок группы и есть
   навигация по панели.
   ============================================================================ */

.sk__grp {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Заголовок группы — подпись интерфейса, а не заголовок документа: внутри рабочей
   области тегов h1–h6 быть не должно (правило `_common.md`). */
.sk__grp-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--sk-corner);
    user-select: none;
}

/* Клавиша, печатающая СТРОКУ, а не один знак (готовый разделитель, пара скобок).
   Ширина по содержимому, кегль мельче: длинная конструкция иначе не читается. */
.sk__cap--wide {
    min-width: 0;
    width: auto;
    max-width: 100%;
    padding: 0 14px;
    font-size: 17px;
    /* `pre-wrap`, а не `pre` (2026-08-11). Клавиша породы печатает и целые ФРАЗЫ — «📍 Hybrid —
       3 days in the office», «🌱 Please consider the environment before printing this email».
       С `pre` такая клавиша не переносилась и распирала деку: на 360 px дека уезжала за подложку
       (замер приёмки — 553 px в коробке 326). Перенос включается только когда места не хватает,
       поэтому на широком экране ничего не меняется, а сами пробелы внутри строки сохраняются. */
    white-space: pre-wrap;
    text-align: center;
    line-height: 1.25;
    /* ВЫСОТА РАСТЁТ ПО СОДЕРЖИМОМУ. У обычной клавиши высота жёсткая (`--sk-cap-h`) — сетка
       держится на ней. Но перенесённая на две строки фраза в жёсткую высоту не помещается:
       замер приёмки на 360 px показал клавишу 46 px в ряду высотой 199 при содержимом 204.
       Поэтому у широкой клавиши высота становится минимальной, а ряд подстраивается. */
    height: auto;
    min-height: var(--sk-cap-h);
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Клавиша с ПОДПИСЬЮ вместо знака — для символов, которых не видно (пробелы нулевой
   ширины, неразрывный пробел). Показывать там сам символ бессмысленно: кнопка выглядела
   бы пустой, и человек решил бы, что она сломана. */
.sk__cap--labelled {
    font-family: var(--sk-font-mono);
    font-size: 12px;
    letter-spacing: .3px;
}

/* ДИАКРИТИКА НА НАРИСОВАННОМ КРУЖКЕ (2026-08-11, панели МФА).
   Комбинирующий знак не имеет своей ширины и садится на соседний символ — на клавише он выглядел
   бы съехавшим мазком. Принято показывать его на пунктирном кружке ◌, но этот символ (U+25CC) в
   наши шрифты не входит: замер sk_font_probe.js показал, что его рисует системный Arial, а на
   телефоне без такого шрифта вышел бы квадрат. Поэтому кружок — СВОЯ ГРАФИКА (рамка на ::before),
   а знак садится на неразрывный пробел, который движок подставляет носителем. Размер кружка
   считается от размера клавиши: зашитых чисел в породе нет, размер двигает ползунок. */
.sk__cap--mark .sk__cap-ch,
.sk__sheet-ch--mark {
    position: relative;
    display: inline-block;
}

.sk__cap--mark .sk__cap-ch::before,
.sk__sheet-ch--mark::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: .62em;
    height: .62em;
    margin: -.31em 0 0 -.31em;
    border: 1px dotted currentColor;
    border-radius: 50%;
    opacity: .55;
    pointer-events: none;
}

/* Знак забрали в буфер (Alt+клик или правый клик) — короткая подсветка вместо всплывашки:
   человек и так смотрит на клавишу, которую нажал. */
.sk__cap.is-copied {
    background: var(--sk-cap-hover-bg);
    border-color: var(--sk-accent, var(--sk-cap-hover-border));
    color: var(--sk-cap-hover-text);
}

/* Подсказка «Help» на своей строке (дека переносит её ВВЕРХ — между клавишами и полем ввода
   ничего стоять не должно) прижимается ВПРАВО: слева от неё стоят заголовки групп, и одинокая
   ссылка в левом верхнем углу читалась как заголовок первой группы. */
/* ============================================================================
   КОНСТРУКТОР (2026-08-10). Блок сборки над декой: поля, живой предпросмотр,
   кнопка вставки. Нужен там, где набором кнопок не обойтись — дробей, индексов,
   оценок и полос прогресса бесконечно много.
   ============================================================================ */

.sk__builder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    padding: 12px 14px;
    border: 1px solid var(--sk-cap-border);
    border-radius: var(--sk-r-key);
    background: var(--sk-cap-bg);
}

.sk__b-fields { display: flex; flex-wrap: wrap; gap: 10px 14px; }

.sk__b-field { display: flex; flex-direction: column; gap: 3px; }

.sk__b-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--sk-corner);
}

/* Поля — на токенах породы; сброс фокус-ринга обеспечивает общий theme.css сайта. */
.sk__b-input {
    min-width: 72px;
    height: 34px;
    padding: 0 8px;
    font: inherit;
    font-size: 15px;
    color: var(--sk-cap-text);
    background: #fff;
    border: 1px solid var(--sk-cap-border);
    border-radius: 6px;
}

.sk__b-out {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Предпросмотр — то, что реально вставится. Моноширинный, чтобы полосы прогресса
   и разделители не «плыли» по ширине символа. */
.sk__b-preview {
    min-width: 120px;
    padding: 6px 10px;
    font-family: var(--sk-font-mono);
    font-size: 18px;
    line-height: 1.3;
    color: var(--sk-cap-text);
    background: #fff;
    border: 1px dashed var(--sk-cap-border);
    border-radius: 6px;
    white-space: pre;
    overflow-x: auto;
    max-width: 100%;
}

/* Предупреждение о непереведённых знаках. Молчать здесь нельзя: человек скопирует
   строку с обычной буквой вместо индекса и не заметит подмены. */
.sk__b-note {
    flex: 1 1 100%;
    margin: 0;
    font-size: 13px;
    color: var(--sk-punct-text);
}

@media (max-width: 620px) {
    .sk__b-out { margin-left: 0; width: 100%; }
    .sk__b-preview { flex: 1 1 auto; }
}

/* ---------- ШПАРГАЛКА: ширины под ТРИ колонки (2026-08-10) ----------
   От акцентного движка досталась таблица на пять колонок (символ, сочетание с Alt, сочетание
   с «=», имя, копирование) и `min-width: 900px` под них. У этой породы колонок три — символ,
   имя, копирование, — и старая ширина не давала таблице сжиматься: на 760 и 360 px её ОБРЕЗАЛО
   (у контейнера `overflow-x: hidden`), то есть колонка копирования просто исчезала с экрана.
   Замер: scrollWidth 900 при clientWidth 326. */
.sk__table {
    min-width: 0;
    table-layout: auto;
}

.sk__table th:nth-child(1), .sk__table td:nth-child(1) { width: 64px; }
.sk__table th:nth-child(2), .sk__table td:nth-child(2) { width: auto; }
.sk__table th:nth-child(3), .sk__table td:nth-child(3) { width: 52px; }

/* Длинное имя символа на узком экране переносится, а не растягивает таблицу. */
.sk__table td:nth-child(2) { white-space: normal; }

/* ЧЕТЫРЁХКОЛОНОЧНАЯ ШПАРГАЛКА НА УЗКОМ ЭКРАНЕ (2026-08-11, блок «Офис и платформы»).
   Правила выше рассчитаны на ТРИ колонки, и третья у них — кнопка копирования шириной 52 px.
   Там, где инструмент показывает способ ввода, третья колонка — это код, а кнопка становится
   четвёртой; без этих правил код зажимался в 52 px и распирал таблицу (замер приёмки: 374 в
   коробке 328). Отступы ужимаются здесь же: при четырёх колонках 12 px с каждой стороны — это
   96 px из 328 доступных, то есть почти треть ширины уходит в воздух. */
.sk__table--how th:nth-child(3), .sk__table--how td:nth-child(3) { width: auto; }
.sk__table--how th:nth-child(4), .sk__table--how td:nth-child(4) { width: 46px; }

.sk__table--how th,
.sk__table--how td { padding: 6px 5px; }

.sk__table--how td.sk__td-how code { font-size: 10.5px; }

@media (max-width: 480px) {
    .sk__table { font-size: 12.5px; }
    .sk__table th:nth-child(1), .sk__table td:nth-child(1) { width: 48px; }
    .sk__table--how th:nth-child(1), .sk__table--how td:nth-child(1) { width: 40px; }
}

/* Клавиша-ПАРА: два видимых знака (скобки 【】, сочетание ⌘C). Кегль остаётся крупным — это
   всё ещё символы, а не подпись, — но клавише нужен запас ширины и чуть больший межбуквенный
   просвет: в узкой клавише пара слипалась в одно пятно. Найдено скрином 2026-08-10; замер
   переполнения этого не ловил, потому что ничего никуда не вылезало. */
.sk__cap--pair {
    min-width: 68px;
    width: auto;
    padding: 0 12px;
    letter-spacing: .06em;
}

/* ============================================================================
   ДВА ВИДА ОДНОГО НАБОРА (2026-08-10, решение владельца «кому как удобнее»).

   board — КЛАВИАТУРА ПОД ПОЛЕМ: сверху поле, снизу клавиши, как у настоящей
           экранной клавиатуры. Вид по умолчанию.
   panel — ПАНЕЛЬ НАД ПОЛЕМ: символы прямо над строкой, как у акцентных панелей.

   Разметка у обеих граней ОДНА — меняется только порядок блоков и плотность
   клавиш. Поэтому переключение мгновенное и ничего не перерисовывается.
   ============================================================================ */

/* Порядок блоков колонки. Значения по умолчанию (панель) — как было. */
.sk__col > .sk__toolbar { order: 0; }
.sk__col > .sk__builder { order: 1; }
.sk__col > .sk__deck    { order: 2; }
.sk__col > .sk__editor  { order: 4; }

/* Клавиатура: поле поднимается НАД клавишами, дека уходит вниз. */
.sk[data-view="board"] .sk__col > .sk__editor { order: 2; }
.sk[data-view="board"] .sk__col > .sk__deck   { order: 4; }

/* В клавиатурном виде клавиши плотнее: их много, и ряды должны читаться как раскладка,
   а не как разрозненные кнопки. Управляющих клавиш (Shift и прочих) здесь нет вовсе —
   в раскладке только символы (требование владельца 2026-08-10). */
.sk[data-view="board"] {
    --sk-cap-w: 46px;
    --sk-cap-h: 46px;
    --sk-gap-row: 5px;
    --sk-gap-rows: 12px;
}

.sk[data-view="board"] .sk__cap { font-size: 20px; }
.sk[data-view="board"] .sk__cap--pair { min-width: 58px; }

/* Поле в клавиатурном виде ниже: основное место отдано клавишам. */
.sk[data-view="board"] .sk__area { min-height: 120px; }

/* ---------- переключатель вида ---------- */
.sk__view {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--sk-cap-border);
    border-radius: 8px;
    background: var(--sk-deck-bg, #fff);
}

.sk__view--push { margin-left: auto; }

.sk__view-b {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    font: inherit;
    font-size: 12.5px;
    line-height: 1;
    color: var(--sk-punct-text);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.sk__view-b svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }

.sk__view-b[aria-pressed="true"] {
    color: var(--sk-cap-text);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

/* На узком экране подписи прячем — остаются две иконки, смысл читается по ним. */
@media (max-width: 560px) {
    .sk__view-b span { display: none; }
    .sk__view-b { padding: 5px 8px; }
}


/* ============================================================================
   СПЛОШНОЙ МАССИВ КЛАВИШ (data-groups="flat", 2026-08-10).

   Решение владельца: «клавиши поменьше и сплошняком, без разделения на группы,
   но само разделение не удалять — чтобы можно было быстро вернуть».

   Поэтому РАЗМЕТКА ГРУПП ОСТАЁТСЯ В HTML ВСЕГДА. Здесь она только распускается:
   .sk__grp и .sk__row получают display: contents, то есть перестают быть
   коробками, и все клавиши становятся прямыми детьми переносящегося ряда —
   поток идёт сквозь границы групп, а не рвётся на них. Заголовки прячутся.

   Вернуть разбивку — одно значение в конфиге породы (deck.groups: 'visible').
   Данные групп при этом никуда не девались: поиск по шпаргалке как искал по
   названию группы, так и ищет.
   ============================================================================ */

.sk[data-groups="flat"] .sk__rows {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sk-gap-row);
}

.sk[data-groups="flat"] .sk__grp,
.sk[data-groups="flat"] .sk__row { display: contents; }

.sk[data-groups="flat"] .sk__grp-title { display: none; }

/* РАЗМЕР КЛАВИШИ — ОДНО ЧИСЛО, и его двигает человек (2026-08-10).
   Зашитых размеров здесь больше нет: всё считается от --sk-cap-size. Начальное значение
   печатает разметка из конфига (deck.cap_size), дальше его меняет ползунок в футере поля,
   и выбор запоминается в браузере. Кегль знака и зазор ряда — доли того же числа, поэтому
   сетка остаётся соразмерной на любом размере. */
.sk[data-groups="flat"],
.sk[data-groups="blocks"] {
    --sk-cap-size: 56px;
    --sk-cap-w: var(--sk-cap-size);
    --sk-cap-h: var(--sk-cap-size);
    --sk-gap-row: max(3px, calc(var(--sk-cap-size) * 0.09));
}

.sk[data-groups="flat"] .sk__cap,
.sk[data-groups="blocks"] .sk__cap {
    padding: 0 calc(var(--sk-cap-size) * 0.14);
    font-size: calc(var(--sk-cap-size) * 0.42);
    border-radius: max(5px, calc(var(--sk-cap-size) * 0.16));
}

.sk[data-groups="flat"] .sk__cap--pair,
.sk[data-groups="blocks"] .sk__cap--pair {
    min-width: calc(var(--sk-cap-size) * 1.35);
    font-size: calc(var(--sk-cap-size) * 0.36);
}

/* Длинные строки (готовые разделители, «line + •») в сплошном массиве занимают
   свою ширину по тексту — ужимать их нельзя, иначе конструкция не читается. */
.sk[data-groups="flat"] .sk__cap--wide,
.sk[data-groups="blocks"] .sk__cap--wide {
    padding: 0 calc(var(--sk-cap-size) * 0.22);
    font-size: calc(var(--sk-cap-size) * 0.32);
}

.sk[data-groups="flat"] .sk__cap--labelled,
.sk[data-groups="blocks"] .sk__cap--labelled { font-size: calc(var(--sk-cap-size) * 0.24); }

/* ПОТОЛКА РАЗМЕРА НА ТЕЛЕФОНЕ ЗДЕСЬ НЕТ, и это осознанно. Такое правило тут стояло, но было
   МЁРТВЫМ: ползунок пишет переменную инлайном на корень, а инлайн-стиль перебивает медиазапрос.
   Обещать в коде ограничение, которого он не накладывает, нельзя. Ограничение и не нужно:
   клавиши переносятся, и на 390 px даже при 72 px горизонтального скролла не появляется
   (замер 2026-08-10 по четырём самым большим наборам на краях диапазона 28…72). */


/* ============================================================================
   ГРУППЫ-БЛОКИ (data-groups="blocks", 2026-09-04).

   Третий режим деки — между «сплошняком» и «заголовок над каждой группой».
   Клавиши остаются такими же и такого же размера, как в сплошном массиве
   (сетка выше общая для обоих режимов), но группа получает СВОЮ подложку,
   и поток клавиш рвётся на её границе: группа никогда не разъезжается
   хвостом в соседнюю.

   Зачем: у больших наборов (полная МФА — 193 знака) сплошной массив читается
   как простыня, в которой знак ищут перебором. Разбивка на блоки и есть
   навигация: глаз цепляется за границу группы, а не за отдельную клавишу.

   Два признака группы приходят ИЗ ДАННЫХ панели, а не из стилей:
     `badge` — короткий знак-ориентир в кружке перед клавишами группы;
     `tone: dim` — приглушённый тон клавиш у служебных знаков (диакритика,
                   тоновые метки, надстрочные модификаторы), чтобы буквы
                   читались как главное, а служебное — как фон.
   Заголовки групп в этом режиме не показываются: у 44 групп они превратились
   бы в частокол подписей. Данные групп на месте, и шпаргалка под панелью
   по-прежнему ищет по названию группы.
   ============================================================================ */

/* ЕДИНАЯ КОЛОНОЧНАЯ СЕТКА (правка 04.09.2026, владелец: «выравнивание ублюдское,
   клавиатура рваная»).

   Первая версия ставила группы как коробки с полями и рамкой: у каждой коробки своя
   ширина, и клавиши соседних рядов переставали попадать друг под друга — дека
   рассыпалась на 44 разнокалиберных прямоугольника. Теперь ВСЕ клавиши деки стоят на
   ОДНОЙ сетке колонок, как на настоящей клавиатуре, а группа — это разметка поверх
   сетки, а не отдельная коробка со своими полями.

   Держится на арифметике, а не на подборе:
     шаг колонки        = клавиша + зазор между клавишами;
     ширина группы      = n * шаг − зазор  (у группы своих полей НЕТ: padding 0);
     ЗАЗОР МЕЖДУ ГРУППАМИ = клавиша + ДВА зазора = шаг + зазор.
   Отсюда начало каждой следующей группы = (n+1) * шаг — то есть ровно на границе
   колонки. Между группами получается ровно одна ПУСТАЯ клавишная ячейка: разделение
   видно с одного взгляда, и при этом ни одна клавиша с сетки не сходит.

   Подложка группы рисуется ПОЗАДИ (::before с отрицательным inset) и в поток не
   входит — иначе её поля снова сбили бы шаг. Зазор между рядами взят так, чтобы
   расстояние между подложками равнялось зазору между клавишами: по вертикали тот же
   ритм, что по горизонтали. */
.sk[data-groups="blocks"] {
    /* Кольцо подложки — ТОНКОЕ: 0.06 клавиши (было 0.09). Толстое светлое кольцо вокруг каждой
       группы сливалось с белыми клавишами и читалось как жирная рамка кнопки, а его дело —
       формально очертить группу (владелец 04.09.2026). */
    --sk-grp-pad: max(2px, calc(var(--sk-cap-w) * 0.06));
    --sk-grp-gap: calc(var(--sk-cap-w) + var(--sk-gap-row) * 2);
    --sk-grp-row-gap: calc(var(--sk-gap-row) + var(--sk-grp-pad) * 2);
}

.sk[data-groups="blocks"] .sk__rows {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--sk-grp-gap);
    row-gap: var(--sk-grp-row-gap);
}

/* ПОДЛОЖКА ГРУППЫ — ЗАЛИВКА ПЛЮС КОЛЬЦО ТЕНИ, а не коробка с полями.
   Поля в потоке сбили бы шаг сетки, поэтому видимые поля даёт `box-shadow` с разгоном:
   первое кольцо — та же заливка наружу, второе — рамка в один пиксель поверх неё.
   Тень не входит ни в поток, ни в scrollWidth — в отличие от абсолютного ::before с отрицательным
   inset, на котором это было сделано сначала: приёмка категории читала торчащую подложку
   как вылет содержимого за коробку (замер 04.09.2026: 48 в коробке 44 у каждой группы). */
.sk[data-groups="blocks"] .sk__grp {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: max(6px, calc(var(--sk-cap-w) * 0.16));
    background: var(--sk-grp-bg);
    box-shadow:
        0 0 0 var(--sk-grp-pad) var(--sk-grp-bg),
        0 0 0 calc(var(--sk-grp-pad) + 1px) var(--sk-grp-border);
}

.sk[data-groups="blocks"] .sk__grp--dim {
    background: var(--sk-grp-dim-bg);
    box-shadow:
        0 0 0 var(--sk-grp-pad) var(--sk-grp-dim-bg),
        0 0 0 calc(var(--sk-grp-pad) + 1px) var(--sk-grp-dim-border);
}

.sk[data-groups="blocks"] .sk__row {
    align-items: center;
    gap: var(--sk-gap-row);
}

.sk[data-groups="blocks"] .sk__grp-title { display: none; }

/* КЛАВИША ЗАНИМАЕТ РОВНО СВОИ КОЛОНКИ. Обычная — одну, широкая (пара знаков или
   готовая связка вроде тоновой ˧˦˧) — ДВЕ вместе с зазором между ними. Прежние
   1.35 ширины у пары ломали шаг: всё, что стояло за такой клавишей, съезжало
   с колонок на дробную долю. */
.sk[data-groups="blocks"] .sk__cap {
    width: var(--sk-cap-w);
    min-width: var(--sk-cap-w);
}

.sk[data-groups="blocks"] .sk__cap--pair,
.sk[data-groups="blocks"] .sk__cap--wide {
    width: calc(var(--sk-cap-w) * 2 + var(--sk-gap-row));
    min-width: calc(var(--sk-cap-w) * 2 + var(--sk-gap-row));
    padding: 0;
}

/* ТОН — ТОЛЬКО У ПОДЛОЖКИ, КЛАВИШИ ВЕЗДЕ ОДНИ И ТЕ ЖЕ (правка 04.09.2026).
   Сначала у служебных групп затемнялись сами клавиши, как у эталона. На его плоских
   серых кнопках это читается как «другой раздел», а на наших — объёмных, с рамкой и
   тенью — как ВЫКЛЮЧЕННАЯ клавиша: владелец увидел на скрине «будто неактивные».
   Заливка клавиши в этой породе занята состоянием (нажатие, наведение), поэтому
   отличать ею разделы нельзя; отличает подложка группы. */

/* МЕТКА ГРУППЫ — плоская плашка со знаком-ориентиром, а не кнопка и не кружок
   (владелец 04.09.2026: «не кружками — это же не плагиат»). Занимает ровно ОДНУ
   колонку сетки: сама плашка уже клавиши, а поля по бокам добирают её до шага —
   поэтому знак стоит по центру своей ячейки, а не прижат к краю подложки, и ряд
   клавиш за ней начинается точно на границе колонки.
   Плоская, без тени и объёма: у клавиш они есть, и по ним видно, что нажимается,
   а что подпись. */
.sk__grp-badge {
    flex: 0 0 auto;
    /* НАД подложкой, а не под ней. Подложка группы — абсолютно позиционированный ::before,
       и он перекрывал бы обычный (непозиционированный) элемент: метка уходила под полупрозрачную
       плёнку и блёкла, а замер видел «клик перехватывает .sk__grp». Клавиши от этого не страдали:
       у них своё `position: relative`. */
    position: relative;
    display: grid;
    place-items: center;
    width: calc(var(--sk-cap-w) * 0.62);
    height: calc(var(--sk-cap-w) * 0.62);
    margin-inline: calc(var(--sk-cap-w) * 0.19);
    border-radius: max(4px, calc(var(--sk-cap-w) * 0.14));
    background: var(--sk-badge-bg);
    color: var(--sk-badge-text);
    font-size: calc(var(--sk-cap-w) * 0.34);
    font-weight: 600;
    line-height: 1;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

/* В сплошном массиве группы распущены (display: contents), и метка встала бы в
   ряд наравне с клавишами — там её не показываем. */
.sk[data-groups="flat"] .sk__grp-badge { display: none; }


/* ---------------------------------------------------------------------------
   ТЕЛЕФОН: ДЕКА ЕДЕТ ВБОК, А НЕ ВНИЗ (2026-09-04, решение владельца по эталону).

   На узком экране перенос по рядам превращает большой набор в простыню на сорок
   с лишним рядов: страница уезжает вниз, и человек листает клавиатуру вместо того,
   чтобы ею пользоваться. Эталон на телефоне делает иначе — клавиши идут СВЕРХУ ВНИЗ
   в шесть рядов, а вся дека прокручивается ВБОК; группы при этом видно по подложке.

   Механика: ряд групп перестаёт переноситься (`nowrap`), внутри группы клавиши текут
   колонкой с переносом при фиксированной высоте (`column wrap` + height), поэтому
   группа занимает столько колонок, сколько ей нужно, а прокрутку берёт на себя дека.
   Порядок чтения — как у эталона: вниз по группе, потом следующая группа правее.
   Высота — ШЕСТЬ рядов клавиш: столько же, сколько показывает эталон, и на 390 px
   дека остаётся заметно короче экрана.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    /* ПРОКРУЧИВАЕТСЯ САМ РЯД ГРУПП, а не дека. У деки свои поля (синяя рамка вокруг клавиш),
       и если прокрутку повесить на неё, поля уезжают вместе с содержимым. Вдобавок дека —
       флекс-контейнер, и ряд внутри неё ведёт себя как флекс-элемент: без `min-width: 0`
       он раздувается по содержимому, и прокрутки не возникает вовсе (замер 04.09.2026:
       ряд 1590 px в деке 356, прокрутка деки 356 = ширине, то есть её нет). */
    .sk[data-groups="blocks"] .sk__rows {
        flex-wrap: nowrap;
        align-items: flex-start;
        min-width: 0;
        max-width: 100%;
        /* `scroll`, а не `auto`: полоса стоит на месте ВСЕГДА, а не появляется в ответ на
           касание. Она здесь работает подписью «эту штуку двигают вбок» — без неё человек
           видит обрезанную клавиатуру и не догадывается, что за краем что-то есть
           (владелец 04.09.2026: «должна быть хорошо заметна и гореть по умолчанию»). */
        overflow-x: scroll;
        overscroll-behavior-x: contain;
        padding-bottom: max(4px, calc(var(--sk-cap-w) * 0.12));
    }

    /* Webkit рисует полосу поверх содержимого и прячет её до касания — задаём свою: высота
       фиксированная, дорожка светлая, бегунок тёмный. */
    .sk[data-groups="blocks"] .sk__rows::-webkit-scrollbar {
        height: max(9px, calc(var(--sk-cap-w) * 0.3));
        -webkit-appearance: none;
    }

    .sk[data-groups="blocks"] .sk__rows::-webkit-scrollbar-track {
        background: var(--sk-scroll-track);
        border-radius: 999px;
    }

    .sk[data-groups="blocks"] .sk__rows::-webkit-scrollbar-thumb {
        background: var(--sk-scroll-thumb);
        border-radius: 999px;
    }

    .sk[data-groups="blocks"] .sk__grp { flex: 0 0 auto; }

    .sk[data-groups="blocks"] .sk__row {
        display: flex;
        flex-flow: column wrap;
        align-content: flex-start;
        max-height: calc(var(--sk-cap-h) * 6 + var(--sk-gap-row) * 5);
    }

    /* СКУЧЕННОСТЬ. Клавиша на телефоне мельче той, что выбрана ползунком: иначе в шесть
       рядов влезает три группы, и «куча символов на экране» не получается. Ползунок
       по-прежнему работает — он двигает ту же величину, от которой считается всё
       остальное; ужимается только множитель. Медиазапрос перебивает ЗДЕСЬ потому, что
       ползунок пишет инлайном `--sk-cap-size`, а мы правим производные от неё. */
    .sk[data-groups="blocks"] {
        --sk-cap-w: calc(var(--sk-cap-size) * 0.6);
        --sk-cap-h: calc(var(--sk-cap-size) * 0.6);
        --sk-gap-row: max(2px, calc(var(--sk-cap-size) * 0.045));
        /* Пустая клавишная ячейка между группами — приём ШИРОКОГО экрана: там она держит
           общую сетку колонок. На телефоне сетка и так режется по группам, а место дорого,
           поэтому группы стоят вплотную и разделяет их подложка. */
        --sk-grp-pad: max(2px, calc(var(--sk-cap-w) * 0.07));
        --sk-grp-gap: calc(var(--sk-gap-row) * 2 + var(--sk-grp-pad) * 2);
    }

    /* КЛАВИША НА ТЕЛЕФОНЕ — ПЛОСКАЯ. Объём (рамка, скругление, тень) на клавише в 29 px
       съедает саму клавишу и добавляет между ними воздух, которого в плотной сетке нет.
       Плоская заливка заодно возвращает ТОН как признак раздела: у объёмной клавиши
       заливка занята состоянием и серая читается выключенной (см. правку 04.09.2026
       выше), у плоской — нет, ровно так и устроена мобильная грань эталона. */
    .sk[data-groups="blocks"] .sk__cap {
        padding: 0;
        font-size: calc(var(--sk-cap-size) * 0.29);
        border: 0;
        border-radius: max(3px, calc(var(--sk-cap-w) * 0.12));
        background: var(--sk-cap-flat-bg);
        box-shadow: none;
    }

    .sk[data-groups="blocks"] .sk__grp--dim .sk__cap { background: var(--sk-cap-flat-dim-bg); }

    .sk[data-groups="blocks"] .sk__cap:active,
    .sk[data-groups="blocks"] .sk__cap.is-down {
        transform: none;
        background: var(--sk-cap-flat-active-bg);
    }

    .sk[data-groups="blocks"] .sk__cap--pair,
    .sk[data-groups="blocks"] .sk__cap--wide { font-size: calc(var(--sk-cap-size) * 0.24); }

    /* Метка группы мельче: в плотной сетке она подпись, а не элемент ряда. */
    .sk[data-groups="blocks"] .sk__grp-badge {
        width: calc(var(--sk-cap-w) * 0.78);
        height: calc(var(--sk-cap-w) * 0.78);
        margin-inline: calc(var(--sk-cap-w) * 0.11);
        font-size: calc(var(--sk-cap-w) * 0.42);
    }
}


/* ---------- ползунок размера клавиш ---------- */
.sk__size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sk-punct-text);
}

.sk__size svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }

.sk__size input[type="range"] {
    width: 92px;
    accent-color: var(--sk-accent-bg, #3b5998);
    cursor: pointer;
}

.sk__size output {
    min-width: 34px;
    font-family: var(--sk-font-mono);
    font-size: 11.5px;
    text-align: right;
}

@media (max-width: 560px) {
    .sk__size input[type="range"] { width: 64px; }
    .sk__size output { display: none; }
}


/* Правил подсказок и справки здесь больше нет: кнопку Help убрал владелец 2026-08-10, и вместе
   с ней ушли `.sk__hints`, `.sk__hint*`, `.sk__help*` и раскладка по `data-hints`. Оставлять
   стили удалённой фичи нельзя — ровно такой хвост (`max-height: 40rem` от выехавшей раскладки)
   в тот же день резал панели выше 640 px и дошёл до владельца багом. */


/* ============================================================================
   ГРУППЫ С ЗАГОЛОВКАМИ НА ПОДЛОЖКАХ (data-groups="titled", 2026-09-04).

   Четвёртый режим деки. Берёт от режима блоков всё: ту же сетку от --sk-cap-size
   (ползунок размера живой, чего нет у старого `visible`), ту же подложку группы,
   тот же увеличенный зазор между группами и тот же приём «тон — только у подложки,
   клавиши везде одни и те же». Добавляет одно: ЗАГОЛОВОК группы.

   Когда он: групп немного (единицы, не десятки) и заголовок у каждой
   содержательный — «Vowels», «Consonants», «Stress, length and division».
   Тогда подпись и есть навигация по панели, и прятать её нечестно. Когда групп
   сорок и они называются по букве — заголовки превращаются в частокол, и там
   работает `blocks` с меткой-кружком.

   Отличие от `visible`: там группа — голая строка с подписью и БЕЗ подложки,
   а размер клавиши зашит в 56 px мимо ползунка. Старый режим не трогаем: на нём
   стоят три десятка панелей, и их вид менять никто не просил.
   ============================================================================ */

.sk[data-groups="titled"] {
    --sk-cap-size: 56px;
    --sk-cap-w: var(--sk-cap-size);
    --sk-cap-h: var(--sk-cap-size);
    --sk-gap-row: max(3px, calc(var(--sk-cap-size) * 0.09));
    --sk-grp-gap: max(10px, calc(var(--sk-cap-size) * 0.32));
    --sk-grp-pad: max(3px, calc(var(--sk-cap-size) * 0.08));
}

.sk[data-groups="titled"] .sk__cap {
    padding: 0 calc(var(--sk-cap-size) * 0.14);
    font-size: calc(var(--sk-cap-size) * 0.42);
    border-radius: max(5px, calc(var(--sk-cap-size) * 0.16));
}

.sk[data-groups="titled"] .sk__cap--pair {
    min-width: calc(var(--sk-cap-size) * 1.35);
    font-size: calc(var(--sk-cap-size) * 0.36);
}

.sk[data-groups="titled"] .sk__cap--wide {
    padding: 0 calc(var(--sk-cap-size) * 0.22);
    font-size: calc(var(--sk-cap-size) * 0.32);
}

.sk[data-groups="titled"] .sk__cap--labelled { font-size: calc(var(--sk-cap-size) * 0.24); }

/* Группы идут СТОЛБИКОМ, по одной в строке: заголовок относится ко всей группе, и группа
   рядом с группой на одной линии заставляла бы читать две подписи одновременно. */
/* Подложка группы ширины СВОИХ клавиш, а не общей: растянутые по самой длинной группе
   плашки оставляли у группы из четырёх знаков полполосы пустоты. */
.sk[data-groups="titled"] .sk__rows {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sk-grp-gap);
}

.sk[data-groups="titled"] .sk__grp {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: max(4px, calc(var(--sk-cap-size) * 0.08));
    padding: var(--sk-grp-pad) calc(var(--sk-grp-pad) + 2px);
    border-radius: max(6px, calc(var(--sk-cap-size) * 0.2));
    background: var(--sk-grp-bg);
    border: 1px solid var(--sk-grp-border);
}

/* Служебная группа отличается ТОЛЬКО подложкой — см. правку 04.09.2026 в разделе блоков:
   затемнённая клавиша читается выключенной, поэтому тон живёт на подложке, а не на клавише. */
.sk[data-groups="titled"] .sk__grp--dim {
    background: var(--sk-grp-dim-bg);
    border-color: var(--sk-grp-dim-border);
}

.sk[data-groups="titled"] .sk__row {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sk-gap-row);
}

.sk[data-groups="titled"] .sk__grp-title {
    display: block;
    color: var(--sk-deck-dim);
}


/* ============================================================================
   ПЕРЕКЛЮЧАТЕЛЬ РАСКЛАДОК ГРУППИРОВКИ (2026-09-04).

   Появляется только у панели, у которой в данных больше одной раскладки
   (`arrangements` в panels/*.json). Стоит НАД клавишами, потому что относится
   к ним, а не к полю ввода: тумблеры поля (вид, размер, звук) живут в его футере
   и смешивать их с этим нельзя — это разные предметы настройки.

   Раскладки печатаются в разметке ВСЕ, показана та, что несёт класс
   `sk__rows--on`; переключение — перенос этого класса.

   КЛАСС, А НЕ АТРИБУТ `hidden`: Bootstrap объявляет `[hidden] { display: none
   !important }`, и медиазапрос его не перебивает — на телефоне из-за этого
   не показывалась мобильная раскладка (поймано 04.09.2026: правило есть,
   селектор совпадает, display остаётся none). Видимостью распоряжаются
   ТОЛЬКО стили.
   ============================================================================ */

.sk__deck--sets .sk__rows { display: none; }
.sk__deck--sets .sk__rows--on { display: flex; }

/* Дека — ряд с ОБРАТНЫМ переносом (`wrap-reverse`), и первый её элемент при переносе
   оказывается на нижней линии: переключатель, стоящий в разметке первым, уезжал под
   клавиши. Поэтому дека с переключателем перестраивается в столбик. Класс печатает
   разметка и только тогда, когда раскладок больше одной, — остальные панели категории
   остаются рядом с обратным переносом, как были. */
.sk__deck--sets {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.sk__sets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    border-radius: var(--sk-r-sm);
    background: var(--sk-grp-dim-bg);
    /* Ширина по содержимому: полоса во всю деку читалась бы шапкой раздела, а это тумблер. */
    align-self: flex-start;
    width: fit-content;
}

.sk__set-b {
    padding: 6px 12px;
    border: 0;
    border-radius: var(--sk-r-sm);
    background: transparent;
    color: var(--sk-deck-dim);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.sk__set-b:hover { background: var(--sk-grp-bg); }

.sk__set-b[aria-pressed="true"] {
    background: var(--sk-cap-bg);
    color: var(--sk-cap-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}


/* ============================================================================
   ПЛОТНАЯ СЕТКА НА ТЕЛЕФОНЕ (2026-09-04).

   Решение владельца: «оставь схему эту только на десктопе; на мобайле сделай
   компактно и скученно как в тайпит, расположение и выделение — как у него».

   Поэтому на узком экране с деки снимается ВСЁ, что нужно только большому
   экрану: переключатель раскладок, заголовки групп, подложки групп, зазоры,
   объём клавиши. Остаётся то, что эталон и делает: сплошная сетка плоских
   клавиш вплотную, где разделы различаются одним тоном заливки.

   Раскладка на телефоне ОДНА — помеченная в данных (`mobile` в arrangements),
   потому что группировка без заголовков и подложек всё равно не читается,
   а место на экране дороже выбора. У панели с единственной раскладкой ничего
   не меняется: она же и мобильная.

   ЗАМЕР ЭТАЛОНА (ipa.typeit.org на 390 px, 04.09.2026, проба
   C:\playwright_fringster\sk_ipa_mobile_probe.js → F:/tmp/sk_ipa_mobile.json):
   мобильная грань — ОТДЕЛЬНАЯ разметка (`div.tiny-screen`, десктопная
   `.big-screen` там `display: none`), 37 клавиш ровно 40×35 px, кегль 17,
   поля и скругления нулевые, зазоров между клавишами нет, девять колонок в
   контейнере 370 px. Тон: обычная клавиша #F0F0F0, служебная #D8D8D8 (класс
   `darker` — у него ровно те же группы, что у нас помечены `tone: dim`).
   Числа ниже — оттуда, а не подобраны на глаз.

   ПОЧЕМУ РАЗМЕР ЗАДАН НАПРЯМУЮ, А НЕ ЧЕРЕЗ --sk-cap-size: ползунок пишет эту
   переменную ИНЛАЙНОМ на корень, а инлайн-стиль перебивает медиазапрос —
   на этом уже умирало правило потолка размера (см. комментарий выше по файлу).
   Здесь задаются сами width/height, и ползунок телефонную сетку не ломает.
   ============================================================================ */

@media (max-width: 560px) {

    /* Ширина клавиши считается от ЧИСЛА КОЛОНОК, а не задана в пикселях: у эталона на 390 px
       выходит девять колонок по 40 px в контейнере 370, а наша дека уже (у неё своя подложка
       и поля), и те же 40 px дали бы восемь колонок и полосу пустоты справа. Колонка от ширины
       держит и плотность эталона, и ровный край на любом телефоне. Высота и кегль — прямо
       из замера. */
    .sk {
        --sk-cap-phone-cols: 9;
        --sk-cap-phone-max: 40px;
        --sk-cap-phone-h: 35px;
        --sk-cap-phone-size: 17px;
        /* ЗАЗОР МЕЖДУ КЛАВИШАМИ — самый маленький, какой ещё ВИДНО (владелец 04.09.2026:
           «пусть мельчайшее расстояние с каждой стороны, но видимое глазу»). У эталона его нет
           вовсе, клавиши слиты в сплошное полотно; здесь между ними проступает синее поле деки,
           и каждая клавиша читается отдельной кнопкой, а не ячейкой таблицы. Два пикселя, а не
           один: на телефоне с DPR 2 и 3 однопиксельный зазор округляется в ноль на части клавиш
           и полотно снова слипается местами. */
        --sk-cap-phone-gap: 2px;
    }

    /* Переключатель раскладок — принадлежность большого экрана. */
    .sk__sets { display: none; }

    /* Видна ровно одна раскладка — помеченная в данных мобильной, независимо от того, что
       человек выбрал на большом экране: селектор той же силы, что и у `--on`, но стоит
       позже, поэтому побеждает он. */
    .sk__deck--sets .sk__rows--on { display: none; }
    .sk__deck--sets .sk__rows[data-mobile="1"] { display: flex; }

    /* Группы распускаются: их коробки перестают существовать, и все клавиши становятся
       прямыми детьми переносящегося ряда — поток идёт сквозь границы групп, как в эталоне. */
    /* ШИРИНА РЯДА — ВО ВСЮ ДЕКУ, и это обязательно: у деки с переключателем
       `align-items: flex-start`, ряд от неё ужимался по содержимому, а ширина клавиши считается
       процентом ОТ РЯДА — получалась круговая зависимость, и сетка вставала уже деки
       (замер 04.09.2026: ряд 312 в деке 342). */
    .sk[data-groups="titled"] .sk__rows {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        width: 100%;
        gap: var(--sk-cap-phone-gap);
    }

    .sk[data-groups="titled"] .sk__grp,
    .sk[data-groups="titled"] .sk__row { display: contents; }

    .sk[data-groups="titled"] .sk__grp-title { display: none; }

    /* Плоская клавиша: ни рамки, ни тени, ни объёма. Объём здесь не нужен — клавиши и так стоят
       сеткой, — а мешает: он занимает заливку, которой различаются разделы. Скругление и зазор
       МИНИМАЛЬНЫЕ, но ненулевые: клавиша обязана читаться отдельной кнопкой. */
    .sk[data-groups="titled"] .sk__cap {
        /* Ширина считается ЗА ВЫЧЕТОМ зазоров: девять клавиш и восемь промежутков между ними
           обязаны уложиться в ряд ровно, иначе последняя колонка переносится и сетка рвётся. */
        width: min(
            var(--sk-cap-phone-max),
            calc((100% - (var(--sk-cap-phone-cols) - 1) * var(--sk-cap-phone-gap)) / var(--sk-cap-phone-cols))
        );
        min-width: 0;
        height: var(--sk-cap-phone-h);
        padding: 0;
        border: 0;
        border-radius: var(--sk-cap-phone-gap);
        box-shadow: none;
        background: var(--sk-cap-flat-bg);
        font-size: var(--sk-cap-phone-size);
    }

    /* Служебные знаки (ударение и долгота, модификаторы и границы, типографика) — тем же
       тоном, что у эталона. Группы уже распущены, поэтому тон вешается на клавишу,
       а группа остаётся только признаком в разметке. */
    .sk[data-groups="titled"] .sk__grp--dim .sk__cap { background: var(--sk-cap-flat-dim-bg); }

    /* Нажатие: клавиша не «продавливается» (тени нет, продавливать нечего) — темнеет.
       Обратная связь обязана быть: без неё на телефоне непонятно, попал палец или нет. */
    .sk[data-groups="titled"] .sk__cap:active,
    .sk[data-groups="titled"] .sk__cap.is-down {
        transform: none;
        background: var(--sk-cap-flat-active-bg);
    }

    /* Кружок под диакритику трогать не надо: он задан в `em` и уезжает вместе с кеглем. */

    /* Поля деки съедали бы десятую колонку: у эталона сетка идёт почти во всю ширину. */
    .sk[data-groups="titled"] .sk__deck,
    .sk[data-groups="titled"] .sk__deck--sets { padding: var(--sk-deck-pad) 8px; }
}