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

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

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

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

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

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

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

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

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

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

.ap__key:hover,
.ap__btn:hover {
    background: var(--ap-key-hover-bg);
    color: var(--ap-key-hover-text);
    border-color: var(--ap-key-hover-border);
}

.ap__key:active,
.ap__btn:active,
.ap__key.is-down,
.ap__btn.is-down {
    transform: translateY(2px);
    box-shadow: var(--ap-key-shadow-active);
}

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

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

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

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

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

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

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

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

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

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

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

/* ---------- Дека: ряды символов ----------
   Подсказки — колонкой СПРАВА от клавиш (владелец 2026-08-06: под буквами не нравится), выровнены
   по нижнему ряду.
   ПЕРЕНОС ИДЁТ ВВЕРХ (`wrap-reverse`): если подсказке не хватило места справа — она встаёт НАД
   клавишами, а не под ними. Под клавишами идёт поле ввода, и между клавишами и полем не должно
   стоять ничего: над полем всегда символы (владелец 2026-08-09, скрин французской панели, где
   подсказка оказалась внизу). Ширину клавиш этот перенос не трогает — ряды как были во всю деку,
   так и остались. */
.ap__deck {
    display: flex;
    gap: var(--ap-deck-gap);
    align-items: flex-start;
    /* Перенос вверх — значение `hints_overflow: top` из конфига породы (ниже есть правило и для
       `bottom`). Само место подсказки задаёт `data-hints`. */
    flex-wrap: wrap-reverse;
    align-content: flex-end;
    padding: var(--ap-deck-pad);
    border: 1px solid var(--ap-deck-border);
    border-radius: var(--ap-r);
    background: var(--ap-deck-bg);
    /* Точка отсчёта для всплывашки вариантов: без неё она считает координаты от body
       и уезжает в шапку страницы (поймано владельцем 2026-08-06). */
    position: relative;
}

.ap__rows {
    display: flex;
    flex-direction: column;
    gap: var(--ap-gap-rows);
}

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

   hints_overflow=bottom — подсказка при нехватке места падает ВНИЗ (обычный wrap). По умолчанию
   так НЕ делаем: под клавишами идёт поле ввода, и между ними ничего стоять не должно. */
.ap[data-hints-overflow="bottom"] .ap__deck {
    flex-wrap: wrap;
    align-content: flex-start;
}

/* hints=top — подсказка ВСЕГДА над клавишами, даже когда справа есть место. */
.ap[data-hints="top"] .ap__deck > .ap__hints { order: -1; flex-basis: 100%; }

.ap__row {
    display: flex;
    gap: var(--ap-gap-row);
    flex-wrap: wrap;
}

/* Клавиша-символ языка */
.ap__cap {
    position: relative;
    min-width: var(--ap-cap-w);
    height: var(--ap-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(--ap-cap-border);
    border-radius: var(--ap-r-key);
    background: var(--ap-cap-bg);
    color: var(--ap-cap-text);
    box-shadow: var(--ap-cap-shadow);
    transition: transform 60ms ease, background 90ms ease;
    /* палец не должен выделять текст клавиши при долгом нажатии */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

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

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

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

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

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

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

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

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

/* Иконка следует за назначением кнопки: панель открыта — ведём на клавиатуру (иконка клавиатуры),
   клавиатура открыта — возвращаем на панель (иконка панели: горстка клавиш над полем ввода).
   Одна и та же клавиатура в обе стороны сбивала: по ней не видно, куда именно ведёт кнопка
   (владелец 2026-08-07). Переключает CSS — JS про иконки не знает. */
.ap__full-i--panel { display: none; }
.ap.is-kb .ap__full-i--kb { display: none; }
.ap.is-kb .ap__full-i--panel { display: block; }

/* ---------- Режим «открыта полная клавиатура» ----------
   Панель сжимается до полоски с кнопкой: свои клавиши и форматирование не нужны, пока человек
   печатает настоящей раскладкой. Всё съезжает плавно — резкое переключение выглядит как сбой. */
.ap__rows,
.ap__hints,
.ap__group--format {
    transition: opacity 220ms ease, transform 220ms ease, max-height 280ms ease;
    max-height: 40rem;
}

.ap.is-kb .ap__rows,
.ap.is-kb .ap__hints,
.ap.is-kb .ap__group--format {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    overflow: hidden;
    pointer-events: none;
    margin: 0;
}

/* Панель ужимается до полоски: слева отмена/возврат, справа кнопка «назад», синева обнимает их
   одинаковым отступом со всех сторон (владелец 2026-08-06: пустая синева выглядела глупо). */
.ap__deck { transition: padding 240ms ease, gap 240ms ease; }

.ap.is-kb .ap__deck {
    padding: 8px;
    gap: 0;                       /* свёрнутые ряды и подсказки не должны добавлять зазоров */
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* Свёрнутое не должно занимать место ни по высоте, ни по ширине, ни рамкой */
.ap.is-kb .ap__rows,
.ap.is-kb .ap__hints {
    width: 0;
    padding: 0;
    border: 0;
    flex: 0 0 0;
}

/* Рамка поля — 10 px с каждой стороны: при свёрнутой высоте она оставалась белой полосой между
   панелью и клавиатурой (замер: щель 52 px вместо нуля). */
.ap.is-kb .ap__editor { border-width: 0; }
.ap.is-kb .ap__col { gap: 10px; }

.ap.is-kb .ap__full { position: static; margin-left: auto; }

/* Отмена/возврат переезжают в полоску (их переносит JS) — фон группы там не нужен, она и так на синем */
.ap.is-kb .ap__deck .ap__group {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    max-height: none;
    opacity: 1;
}

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

.ap.is-kb .ap__editor {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    pointer-events: none;
}

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

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

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

.ap__kb[hidden] { display: none; }

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

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

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

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

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

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

/* ---------- Кнопки-модификаторы ----------
   Знак вешается на уже набранную букву. Кнопка узкая, как у знака препинания: это не буква,
   и в ряду она не должна спорить с буквами по весу. На ней пунктирный кружок со знаком (◌̂)
   и номер клавиши в углу — тем же приёмом, каким уголок клавиши показывает верхний регистр. */
.ap__mod {
    position: relative;
    min-width: 38px;
    height: var(--ap-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(--ap-cap-border);
    border-radius: var(--ap-r-key);
    background: var(--ap-cap-bg);
    color: var(--ap-cap-text);
    box-shadow: var(--ap-cap-shadow);
    transition: transform 60ms ease, background 90ms ease;
    -webkit-user-select: none;
    user-select: none;
}

.ap__mod:hover {
    background: var(--ap-cap-hover-bg);
    border-color: var(--ap-cap-hover-border);
}

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

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

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

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

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

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

.ap__variants[hidden] { display: none; }

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

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

/* ---------- Подсказки справа от деки ---------- */
.ap__hints {
    display: flex;
    flex-direction: column;
    /* стоят на уровне нижнего ряда клавиш, а не у верхнего края панели (владелец 2026-08-06) */
    align-self: flex-end;
    gap: 7px;
    font-family: var(--ap-font-mono);
    /* мельче, чем было: это служебная подпись, а не часть клавиатуры (владелец 2026-08-06) */
    font-size: 9.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ap-deck-dim);
}

.ap__hint {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ap__chip {
    padding: 3px 7px;
    border: 1px solid var(--ap-key-border);
    border-radius: var(--ap-r-sm);
    background: var(--ap-key-bg);
    box-shadow: var(--ap-key-shadow);
    color: var(--ap-key-text);
}

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

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

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

/* Помощь: кликается вся строка, текст подчёркнут — видно, что это ссылка, а не подпись */
.ap__hint--btn {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
}

.ap__hint--btn svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }
.ap__hint-link { text-decoration: underline; text-underline-offset: 2px; }
.ap__hint--btn:hover .ap__hint-link { text-decoration: none; }
.ap__hint[hidden] { display: none; }

/* ---------- Поле ввода ---------- */
.ap__editor {
    border: var(--ap-editor-frame-w) solid var(--ap-editor-frame);
    border-radius: var(--ap-r);
    background: var(--ap-panel-bg);
    box-shadow: var(--ap-panel-shadow);
    overflow: hidden;
}

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

.ap__area:focus { outline: none; }

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

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

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

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

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

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

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

.ap__ghost[aria-pressed="true"] .ap__switch {
    background: var(--ap-switch-on);
    justify-content: flex-end;
}

/* ---------- Справка по сочетаниям ---------- */
.ap__help[hidden] { display: none; }

.ap__help {
    position: relative;
    /* справа место под крестик, чтобы длинная строка не подлезала под него */
    padding: 14px 46px 14px 16px;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-r);
    background: var(--ap-well-bg);
    font-size: 14px;
    line-height: 1.6;
}

/* Крестик: второй способ закрыть справку, очевидный (первый — повторное нажатие на «Help»). */
.ap__help-x {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--ap-r-sm);
    background: transparent;
    color: var(--ap-muted);
    cursor: pointer;
}

.ap__help-x svg { width: 14px; height: 14px; fill: currentColor; }
.ap__help-x:hover { background: var(--ap-key-bg); color: var(--ap-text); }

.ap__help ul { margin: 6px 0 0; padding-left: 18px; }
.ap__help li + li { margin-top: 3px; }
.ap__help p { margin: 8px 0 0; }
.ap__help kbd {
    padding: 1px 6px;
    border: 1px solid var(--ap-key-border);
    border-bottom-width: 2px;
    border-radius: var(--ap-r-sm);
    background: var(--ap-key-bg);
    color: var(--ap-key-text);
    font-family: var(--ap-font-mono);
    font-size: 12px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ap__sheet-char .ap__copy {
    position: absolute;
    top: var(--ap-sheet-copy-inset);
    left: var(--ap-sheet-copy-inset);
}

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

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

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

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

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

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

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

/* Экранным читалкам — да, глазам — нет */
.ap__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) {
    .ap__wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    /* Кнопка полной раскладки уходит из угла в поток: при узкой панели она наезжала на клавиши
       верхнего ряда (поймано скрином 390 px). Встаёт последней строкой деки. */
    .ap__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) {
    .ap {
        /* клавиши мельче десктопных: все символы теперь над полем, и ряды не должны съедать экран
           (владелец 2026-08-07, дважды: «сделай кнопочки поменьше, крупноваты») */
        --ap-cap-w: 32px;
        --ap-cap-h: 32px;
        --ap-area-min-h: 200px;
        --ap-deck-gap: 10px;
    }
    .ap__deck { flex-direction: column; }
    /* Форматирование на телефоне не показываем: у typeit на мобильной грани его тоже нет,
       а место нужно клавишам (замерено на spanish.typeit.org 390×844, 2026-08-06). */
    .ap__group--format { display: none; }
    .ap__btn { height: 40px; padding: 0 12px; }
    /* пальцем в кнопку 20 px не попасть — на телефоне копирование крупнее */
    .ap__copy { width: 30px; height: 30px; }
}

.ap.is-phone .ap__hints,
.ap.is-phone .ap__help,
.ap.is-phone .ap__rows,
.ap.is-phone #ap-shortcuts,
.ap.is-phone #ap-sound { display: none; }

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

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

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

.ap.is-phone .ap__sheet-sum::-webkit-details-marker { display: none; }

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

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

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

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

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

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

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

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

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

/* Кнопки строки АДАПТИВНЫ: отступы и кегль тянутся от ширины экрана, а сами кнопки могут ужиматься
   (`min-width: 0` + разрешённый shrink). На узком телефоне полоса сжимается, но остаётся одной
   строкой — съезжать вниз ей нельзя (владелец 2026-08-07: «съезжать не должно, делай адаптивными»). */
.ap.is-phone .ap__ctl .ap__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;
}

.ap.is-phone .ap__ctl .ap__key {
    width: clamp(26px, 8vw, 32px);
    height: 32px;
    flex: 0 0 auto;
}

.ap.is-phone .ap__ctl .ap__key svg { width: 14px; height: 14px; }

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

.ap.is-phone .ap__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;
}

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

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

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

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

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

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

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

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

/* На телефоне поле панели при открытой раскладке ОСТАЁТСЯ и не меняет размера (владелец 2026-08-07:
   «его размеры не должны меняться, просто снизу должна появляться клавиатура»). Печатает движок
   по-прежнему в свою textarea, но её на телефоне не видно: текст зеркалится в поле панели. */
.ap.is-phone.is-kb .ap__editor {
    max-height: none;
    opacity: 1;
    /* рамку тоже не снимаем: без неё поле теряло 20 px и «дёргалось» при открытии раскладки */
    border-width: var(--ap-editor-frame-w);
    overflow: visible;
    /* И события мыши/пальца полю нужны! Десктопное правило гасит их, потому что там поле на время
       раскладки схлопнуто; на телефоне оно рабочее, и без этого тап проходил СКВОЗЬ поле в деку —
       каретка не переставлялась и пропадала (замер `elementFromPoint` → `ap-deck`, 2026-08-07). */
    pointer-events: auto;
}

/* Пока открыта полная раскладка, акцентов сверху нет вовсе (владелец 2026-08-07): на телефоне они
   не нужны — раскладка языка и так несёт все буквы, а место на экране дороже. */
.ap.is-phone.is-kb .ap__deck > .ap__row { display: none; }

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

.ap.is-phone .ap__editor > .ap__kb-out:focus { outline: none; }
.ap.is-phone .ap__area[hidden] { display: none; }

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

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

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

/* На телефоне панель НЕ схлопывается в полоску: раскладка встаёт на место нижнего ряда, а буквы
   языка и кнопка возврата остаются на своих местах. Поэтому десктопное «полоской в строку»
   (flex-direction: row у деки) здесь отменяется. */
.ap.is-phone.is-kb .ap__deck {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--ap-deck-pad);
    gap: var(--ap-deck-gap);
}

/* Кнопка «Full keyboard» — в правом нижнем углу деки */
.ap.is-phone .ap__full {
    position: static;
    align-self: flex-end;
    margin: 0;
}

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

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

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

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

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