/*
 * Russian keyboard — скин по макету (десктоп + мобайл). Переопределяет токены общего движка
 * (--kb-*) и оформляет обвязку инструмента (панель, поле, счётчик, легенда). Один движок —
 * этот скин один из возможных; другой инструмент на том же движке может нести свой.
 * Значения — токенами, без магических чисел по месту. Шрифт тела инструмента — системный sans
 * (по макету); сайтовую типографику (H1 сверху, шапка, меню) скин не трогает.
 */

.rkbd {
    --r-accent: #2f6fed;
    --r-accent-soft: #e9f0ff;
    --r-ink: #1c2430;
    --r-muted: #838c99;
    --r-line: #e5e8ef;
    --r-key-line: #e2e6ee;
    --r-special: #eef1f6;
    --r-surface: #fff;
    --r-radius: 12px;
    /* Цвет «снимка» при копировании. Отдельным токеном, а не акцентом: у тёплого скина акцент —
       приглушённый коричневый, и вспышка им читается как пятно, а не как схваченный кадр. */
    --r-shot: #2f6fed;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--r-ink);
    max-width: 960px;
    margin-inline: auto;
    position: relative;   /* якорь для всплывашки над панелью */
}

/* ─────────── Панель управления ─────────── */
.rkbd__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
/* Copy/Send/«⋯» отжаты вправо: margin-left:auto у первой из них (десктоп). На мобайле снимается. */
.rkbd__push { margin-left: auto; }

/* Что живёт только в десктопной панели (звук, выбор темы) — на десктопе показано как есть, на
   мобайле media-запрос его прячет (display:none): их роль там берут пункты меню «⋯». Здесь маркер
   без своего display, чтобы не ломать естественную раскладку кнопки/выпадашки. */
/* Пункты меню «⋯», нужные только на мобайле (звук, тема). На десктопе тех же настроек хватает в
   панели, в меню они лишние — прячем. Селекторы КОМПАУНДНЫЕ (два класса), чтобы перебить базовые
   .rkbd__moreitem/.rkbd__moregroup с их display; media-запрос мобайла их показывает обратно. */
.rkbd__moreitem.rkbd__more--mobile,
.rkbd__moregroup.rkbd__more--mobile,
.rkbd__moresep.rkbd__more--mobile { display: none; }

.rkbd__lang,
.rkbd__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--r-line);
    border-radius: 10px;
    background: var(--r-surface);
    color: var(--r-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .12s, border-color .12s, color .12s;
}
@media (hover: hover) {
    .rkbd__lang:hover,
    .rkbd__btn:hover { background: #f6f8fb; }
}

/* Гасим bootstrap/браузерное обрамление фокуса (глобальное правило сайта). */
.rkbd__lang:focus, .rkbd__lang:focus-visible,
.rkbd__btn:focus, .rkbd__btn:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: var(--r-line);
}

.rkbd__lang .bi { color: var(--r-muted); font-size: 12px; }

/* Выбор языка: код языка + выпадающий список. Флагов нет — язык не равен стране (у английского
   флага не может быть в принципе), да и рисовать их на сотни языков нечем. */
.rkbd__langbox,
.rkbd__formbox,
.rkbd__skinbox { position: relative; }
.rkbd__lang[data-unavail] { opacity: .55; cursor: default; }
.rkbd__lang[data-unavail] .bi { display: none; }

.rkbd__langmenu,
.rkbd__formmenu,
.rkbd__skinmenu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    min-width: 100%;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--r-line);
    border-radius: 10px;
    background: var(--r-surface);
    box-shadow: 0 8px 22px rgba(0,0,0,.14);
}
.rkbd__langitem,
.rkbd__formitem,
.rkbd__skinitem {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--r-ink);
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}
@media (hover: hover) {
    .rkbd__langitem:hover,
    .rkbd__formitem:hover,
    .rkbd__skinitem:hover { background: #f6f8fb; }
}
.rkbd__langitem[aria-selected="true"],
.rkbd__formitem[aria-selected="true"],
.rkbd__skinitem[aria-selected="true"] { background: var(--r-accent-soft, #eef4ff); font-weight: 600; }
.rkbd__langitem .rkbd__code,
.rkbd__formitem .rkbd__code { min-width: 26px; }
/* Форма знака (традиционная/упрощённая) — то же оформление, что у выбора языка: это такое же
   состояние ввода, и человек узнаёт его по знакомому виду. Коробка скрыта, пока раскладка форм
   не объявила (см. index.php), поэтому на остальных клавиатурах ничего не появляется. */
.rkbd__form .rkbd__code { font-weight: 600; }
.rkbd__form .bi { color: var(--r-muted); font-size: 12px; }

.rkbd__btn .bi { font-size: 16px; color: #59616e; }

/* Включённый звук синим НЕ заливаем (владелец, 2026-07-17: «вся кнопка горит»). Состояние показывает
   сам тумблер справа — этого достаточно. Синей заливки («Paste») в панели больше нет вовсе: Paste
   уехал в выпадашку «+» и стал обычным пунктом меню (владелец, 2026-07-21). */

/* Кнопка-иконка («+»): квадратная, без подписи. */
.rkbd__btn--icon {
    width: 42px;
    padding: 0;
    justify-content: center;
}
.rkbd__btn--icon .bi { font-size: 17px; }

/* Действия над текстом, пока текста нет: бледные и ненажимаемые. Человек видит их с первой секунды
   и понимает, что они появятся, как только он начнёт печатать (владелец, 2026-07-21). */
.rkbd__btn[data-off] {
    opacity: .42;
    cursor: default;
    pointer-events: none;
}

/* ─────────── Выпадашка «+»: редкие действия ─────────── */
.rkbd__morebox { position: relative; }
.rkbd__moremenu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;                 /* кнопка крайняя справа — меню растёт внутрь, а не за край окна */
    z-index: 20;
    min-width: 210px;
    padding: 4px;
    border: 1px solid var(--r-line);
    border-radius: 10px;
    background: var(--r-surface);
    box-shadow: 0 8px 22px rgba(0,0,0,.14);
}
.rkbd__moreitem {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--r-ink);
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
@media (hover: hover) {
    .rkbd__moreitem:hover { background: #f6f8fb; }
}
.rkbd__moreitem:focus, .rkbd__moreitem:focus-visible { outline: none; box-shadow: none; }
.rkbd__moreitem .bi { font-size: 16px; color: #59616e; }
/* Заголовок группы «Save as…» — это подпись, а не пункт: не кликается и мельче. */
.rkbd__moregroup {
    margin-top: 4px;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--r-line);
    color: var(--r-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ─────────── Всплывашка «Скопировано» ─────────── */
.rkbd__toast {
    position: absolute;
    /* Всплывашка стоит НАД панелью, в просвете между подводкой и кнопками, и лишь слегка их
       накрывает: висеть по центру панели она не должна — на секунду прятала бы кнопку, в которую
       человек в этот момент целится. Элемент абсолютный, поэтому вылет вверх ничего не двигает. */
    top: -22px;
    left: 50%;
    z-index: 40;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(28, 36, 48, .94);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -4px);
    transition: opacity .22s, transform .22s;
    box-shadow: 0 8px 20px rgba(20, 26, 36, .22);
}
.rkbd__toast[data-show] { opacity: 1; transform: translate(-50%, 2px); }

/* Звук — тумблер. Один и тот же вид у кнопки в панели (десктоп, .rkbd__sound) и у пункта-зеркала
   в меню «⋯» (мобайл, .rkbd__moresound). Базовые размеры и «выкл» — на общем классе .rkbd__switch. */
.rkbd__switch {
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: #cfd5df;
    position: relative;
    transition: background-color .15s;
    flex: 0 0 auto;
}
.rkbd__switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.rkbd__sound[aria-pressed="true"] .rkbd__switch,
.rkbd__moresound[aria-checked="true"] .rkbd__switch { background: var(--r-accent); }
.rkbd__sound[aria-pressed="true"] .rkbd__switch::after,
.rkbd__moresound[aria-checked="true"] .rkbd__switch::after { transform: translateX(14px); }
/* В пункте меню тумблер прижат к правому краю строки, подпись — слева. */
.rkbd__moresound .rkbd__switch { margin-left: auto; }
/* Активная тема в меню «⋯»: акцентная подпись и галочка справа. */
.rkbd__moreskin[aria-checked="true"] { color: var(--r-accent); font-weight: 600; }
.rkbd__moreskin[aria-checked="true"]::after { content: "\2713"; margin-left: auto; font-weight: 700; }
/* Тонкий разделитель между настройками (звук/тема) и действиями в меню «⋯» на мобайле. */
.rkbd__moresep { height: 1px; margin: 4px 6px; background: var(--r-line); }

/* Отчёт о копировании — НА САМОЙ КНОПКЕ (владелец, 2026-07-21): подпись меняется на «Copied!»,
   держится, затем ПРОЗРАЧНЕЕТ, и на её месте так же плавно проявляется прежнее «Copy».
   Ширину подписи JS фиксирует по более длинному из двух слов — иначе кнопка дёргалась бы,
   растаскивая соседей по панели. */
.rkbd__btn[data-flash] { color: var(--r-accent); }
.rkbd__btn[data-flash] .bi { color: var(--r-accent); }
.rkbd__btn span { transition: opacity .26s; }
.rkbd__btn[data-fade] span { opacity: 0; }
/* Кнопка слоя, которого нет в keyman-файле (напр. Symbols у раскладки без numeric): гасим. */
.rkbd__btn[data-unavail] { opacity: .4; pointer-events: none; }

/* ─────────── Поле ввода ─────────── */
.rkbd__field { position: relative; margin-bottom: 16px; }
/* Поле РАСТЁТ под текст, а не заводит полосу прокрутки: человек должен видеть всё, что набрал
   (владелец, 2026-07-21). Высоту считает JS по содержимому; `resize` убран — тянуть за уголок
   теперь нечего и незачем, поле и так всегда по размеру текста. `overflow: hidden` держит поле
   без полосы в момент пересчёта. */
.rkbd__area {
    width: 100%;
    min-height: 120px;
    resize: none;
    overflow: hidden;
    /* Правый паддинг увеличен под кнопку-корзинку в правом верхнем углу: текст не должен под неё
       заезжать (владелец, 2026-07-24). Корзинка — .rkbd__clear (32px, отступ 8px справа). */
    padding: 16px 46px 30px 18px;
    border: 1px solid var(--r-key-line);
    border-radius: var(--r-radius);
    background: var(--r-surface);
    color: var(--r-ink);
    font-family: inherit;
    font-size: 20px;
    line-height: 1.5;
}
.rkbd__area::placeholder { color: #aab1bd; }

/* Очистка поля — маленькая корзинка в правом верхнем углу поля (владелец, 2026-07-24). Видна, только
   когда есть текст (data-need-text гасит её на пустом поле); z-index держит её над textarea. */
.rkbd__clear {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--r-muted);
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
.rkbd__clear .bi { font-size: 16px; }
@media (hover: hover) {
    .rkbd__clear:hover { background: #eef1f6; color: var(--r-ink); }
}
.rkbd__clear:focus, .rkbd__clear:focus-visible { outline: none; box-shadow: none; }
/* Пустое поле — стирать нечего: корзинки нет вовсе (её ставит JS по длине текста). */
.rkbd__clear[data-off] { display: none; }
.rkbd__area:focus, .rkbd__area:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: #cfe0ff;
}
/* Счётчик уходит ЛЕВЕЕ полосы прокрутки: её ширину меряет JS и кладёт в --rkbd-sbw (у разных
   систем и браузеров она разная, числом не обойтись). Без этого при появлении полосы счётчик
   налезал на неё и на уголок-ручку изменения размера — цифры обрезались. */
.rkbd__count {
    position: absolute;
    right: calc(14px + var(--rkbd-sbw, 0px));
    bottom: 10px;
    font-size: 13px;
    color: var(--r-muted);
    pointer-events: none;
}

/* «Снимок» поля при копировании: короткая вспышка на ВСЮ рабочую область. Говорит, что в буфер
   ушёл ВЕСЬ текст, а не выделенный кусок — иначе человек, выделивший пару слов, уверен, что
   скопировались только они (владелец, 2026-07-21). */
.rkbd__flash {
    position: absolute;
    inset: 0;
    border-radius: var(--r-radius);
    background: var(--r-shot);
    opacity: 0;
    pointer-events: none;
}
/* Заливка держится ЕДВА заметной: на кремовом корпусе плотная заливка читается как грязное пятно,
   а не как вспышка. Работает не она, а расходящаяся РАМКА КАДРА — и обе гаснут одной прозрачностью,
   поэтому кольцо не нужно красить отдельно. */
.rkbd__field[data-shot] .rkbd__flash { animation: rkbd-shot 420ms ease-out; }
@keyframes rkbd-shot {
    0%   { opacity: 0;  box-shadow: 0 0 0 0 var(--r-shot); }
    9%   { opacity: .2; box-shadow: 0 0 0 3px var(--r-shot); }
    100% { opacity: 0;  box-shadow: 0 0 0 10px var(--r-shot); }
}
/* «Затвор»: поле на миг поджимается и возвращается — это и даёт ощущение сделанного снимка. */
.rkbd__field[data-shot] { animation: rkbd-snap 420ms ease-out; }
@keyframes rkbd-snap {
    0%   { transform: scale(1); }
    9%   { transform: scale(.988); }
    100% { transform: scale(1); }
}
/* Кому анимации противопоказаны — снимка нет; подпись на кнопке всё равно отчитается. */
@media (prefers-reduced-motion: reduce) {
    .rkbd__field[data-shot],
    .rkbd__field[data-shot] .rkbd__flash { animation: none; }
}

/* ─────────── Клавиатура: токены движка под макет ─────────── */
.rkbd__kb .kb {
    --kb-gap: 8px;
    --kb-font: inherit;
    --kb-font-size: 20px;
    --kb-key-bg: #fff;
    --kb-key-fg: var(--r-ink);
    --kb-key-border: var(--r-key-line);
    --kb-key-shadow: 0 2px 0 rgba(23,35,58,.10);
    --kb-special-bg: var(--r-special);
    --kb-special-fg: #4a515c;
    --kb-press-bg: #e2e8f1;
    --kb-hint-fg: #b3b9c4;
    --kb-pop-bg: #fff;
    --kb-active-indicator: var(--r-accent);
    --kb-lock-indicator: var(--r-accent);      /* замок Caps — синим, акцентом светлого скина */
}
.rkbd__kb { margin-bottom: 18px; }
/* Размеры в пикселях задаются ТОЛЬКО десктопной грани: на тач-грани высоту клавиши и её радиус
   считает движок из ширины клавиатуры (см. `.kb[data-face="mobile"]` в css движка) — клавиша там
   узкая, и те же 10px радиуса превращали её в капсулу. Поставишь числа здесь — перебьёшь формулу:
   специфичность у селекторов равная, а этот файл подключается ниже. */
.rkbd__kb .kb[data-face="desktop"] { --kb-key-h: 52px; --kb-radius: 10px; }

/* ─────────── Легенда ─────────── */
.rkbd__legend {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 16px 4px 4px;
    border-top: 1px solid var(--r-line);
}
.rkbd__leg { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rkbd__leg-ic {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--r-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}
.rkbd__leg-ic[data-ic="type"]::before      { content: "Aa"; }
.rkbd__leg-ic[data-ic="capslock"]::before  { content: "⇪"; font-size: 17px; }
.rkbd__leg-ic[data-ic="123"]::before       { content: "123"; font-size: 11px; }
.rkbd__leg-ic[data-ic="backspace"]::before { content: "⌫"; font-size: 16px; }
.rkbd__leg-ic[data-ic="return"]::before    { content: "↵"; font-size: 17px; }
.rkbd__leg-body { display: flex; flex-direction: column; min-width: 0; }
.rkbd__leg-name { font-size: 13px; font-weight: 600; }
.rkbd__leg-desc { font-size: 12px; color: var(--r-muted); }

/* ─────────── Приватность ─────────── */
.rkbd__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 16px 0 0;
    color: var(--r-muted);
    font-size: 13px;
}
.rkbd__note .bi { color: #9aa6c0; }

/* ─────────── Печать ─────────── */
/* На экране листа нет; при печати от страницы остаётся только он. Прячем остальное через
   `visibility`, а не `display`: так правило работает на любой глубине вложенности и не разбирает
   вёрстку предков. Отдельное окно под печать не открываем — его гасят блокировщики. */
.rkbd__print { display: none; }

@media print {
    body * { visibility: hidden; }
    .rkbd__print, .rkbd__print * { visibility: visible; }
    /* Снимаем позиционирование инструмента, иначе лист встал бы относительно .rkbd — то есть
       где-то в середине страницы, а первая страница ушла бы пустой. */
    .rkbd { position: static; }
    .rkbd__print {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: #000;
        font-family: inherit;
        font-size: 13pt;
        line-height: 1.5;
        white-space: pre-wrap;    /* переносим длинные строки — <pre> сам этого не делает */
        overflow-wrap: break-word;
    }
}

/* ─────────── Мобайл ─────────── */
@media (max-width: 640px) {
    /* ПАНЕЛЬ УПРАВЛЕНИЯ — ПОД ПОЛЕ, между полем и клавиатурой (владелец, 2026-07-24). Инструмент
       делаем flex-колонкой и порядком раскладываем блоки: поле → панель → клавиатура → легенда →
       заметка. Тост позиционирован абсолютно и в потоке не участвует; печатный лист скрыт (display:none). */
    .rkbd { display: flex; flex-direction: column; }
    /* ПОЛЕ И ПАНЕЛЬ — ПОЧТИ ВО ВСЮ ШИРИНУ ЭКРАНА (владелец, 2026-07-24): выходим из колонки страницы
       «наизнанку» (как клавиатура ниже), но оставляем НЕБОЛЬШОЙ формальный отступ 8px от края экрана.
       Кнопки панели — дети .rkbd__bar, поэтому Copy начинается у левой границы поля, а язык·«⋯»
       (отжатые margin-left:auto) заканчиваются у правой — ровно по краям расширенного поля. */
    .rkbd__field  { order: 1; margin: 0 calc(50% - 50vw + 8px); }
    /* Панель — одной строкой (nowrap): четыре элемента не переносятся, а при нехватке ширины
       ужимаются по шрифту (clamp ниже), а не сваливаются на второй ряд (владелец, 2026-07-24). */
    /* Отступы панели сверху/снизу небольшие — панель компактно прижата между полем и клавиатурой
       (владелец, 2026-07-24: «некомпактно, разнесено»). */
    .rkbd__bar    { order: 2; margin: 7px calc(50% - 50vw + 8px); gap: 6px; flex-wrap: nowrap; position: relative; }
    .rkbd__kb     { order: 3; }
    .rkbd__legend { order: 4; }
    .rkbd__note   { order: 5; }

    /* Кнопки панели КОМПАКТНЫЕ: ниже ростом и мельче шрифтом, чем на десктопе (владелец, 2026-07-24).
       Кегль ТЯНЕТСЯ ПО ШИРИНЕ ЭКРАНА: на 360 — верхняя граница (12px), на совсем узких (320, и вплоть
       до ~280 у сложенного Galaxy Fold) уменьшается сам, чтобы Copy · Send · язык · «⋯» остались
       в одну строку с подписями. */
    .rkbd__lang, .rkbd__btn {
        height: 32px;
        padding: 0 9px;
        font-size: clamp(9px, 3.3vw, 12px);
        gap: 4px;
    }
    .rkbd__btn .bi { font-size: 14px; }

    /* В панели под полем — только Copy · Send · язык · «⋯», ровно в этом порядке (владелец). Звук и
       тему отсюда убрали (они теперь в меню «⋯»), поэтому раскладываем оставшееся order'ом. */
    .rkbd__bar-only { display: none; }          /* звук-кнопка и выпадашка темы — не в мобильной панели */
    .rkbd__push { margin-left: 0; }             /* снять десктопное отжатие Copy вправо */
    #rkbd-copy     { order: 1; }
    #rkbd-send     { order: 2; }
    /* Copy·Send — по ЛЕВОМУ краю, язык·«⋯» — по ПРАВОМУ (владелец, 2026-07-24). margin-left:auto
       у первого из правой пары (язык) съедает всю свободную ширину и отжимает язык+«⋯» вправо. */
    .rkbd__langbox { order: 3; margin-left: auto; }
    .rkbd__formbox { order: 3; }
    .rkbd__morebox { order: 4; }

    /* Мобильные пункты меню «⋯»: звук (пункт-тумблер) и выбор темы. */
    .rkbd__moreitem.rkbd__more--mobile { display: flex; }
    .rkbd__moregroup.rkbd__more--mobile,
    .rkbd__moresep.rkbd__more--mobile { display: block; }
    /* Меню «⋯» якорим к ПРАВОМУ КРАЮ ПАНЕЛИ, а не самой кнопки: панель растянута во всю ширину
       (flex-колонка, align stretch), поэтому right:0 у неё = правый край экрана — меню при любой
       ширине остаётся на экране и не режется. Для этого morebox делаем static (убираем как точку
       отсчёта), а панель — relative (см. выше). Высокое меню прокручивается внутри. */
    .rkbd__morebox { position: static; }
    .rkbd__moremenu {
        top: calc(100% + 4px);
        right: 0;
        left: auto;
        max-height: 62vh;
        overflow-y: auto;
    }

    /* Copy и Send на мобайле — С ПОДПИСЯМИ, как на десктопе (владелец, 2026-07-24): две кнопки с
       текстом, затем выпадашка языка и «⋯». Прежнее «панель без слов» (2026-07-22) отменено — тогда
       кнопок в панели было шесть и с подписями они не влезали; теперь их четыре и панель под полем. */
    .rkbd__lang, .rkbd__btn { position: relative; }

    /* КЛАВИАТУРА ВО ВСЮ ШИРИНУ ЭКРАНА (владелец, 2026-07-22: «без декоративных отступов по бокам,
       максимум полезного места»). Инструмент сидит в колонке страницы с полями — выходим из неё
       наизнанку: сдвигаем края ровно на расстояние от края колонки до края окна. Скругление и
       боковые поля корпуса на мобайле не нужны — каждый пиксель уходит клавишам. */
    .rkbd__kb {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 4px;
        padding-right: 4px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    .rkbd__area { font-size: 18px; min-height: 108px; }
    .rkbd__legend { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .rkbd__kb .kb { --kb-gap: 5px; }
}
@media (max-width: 400px) {
    .rkbd__legend { display: none; }   /* легенда — вспомогательная, на узком не мешаем клавиатуре */

    /* Узкий телефон (≤400): дополнительно ужимаем поля и зазор — вместе с clamp по шрифту это держит
       Copy · Send · язык · «⋯» в одну строку вплоть до ~280 (сложенный Galaxy Fold). */
    .rkbd__bar { gap: 5px; }
    .rkbd__lang, .rkbd__btn { padding: 0 8px; }
    .rkbd__lang { gap: 4px; }
}