/*
 * Скин «Azure» — ОСНОВНОЙ скин virtual-keyboard.ru (включён по умолчанию).
 *
 * ОТКУДА ВЗЯТ. Из панелей акцентов toolster.net (`instruments/accents_panels/_accent_base/
 * css/skin-azure.css` — «Azure 01 Origin»): там этот же движок клавиатур уже выдвигается на синей
 * деке, и скин на него ложится один в один. Значения токенов перенесены оттуда как есть, без
 * подбора на глаз.
 *
 * ПОЧЕМУ СИНИЙ ЗДЕСЬ РОДНОЙ. У сайта клавиатура и до переезда сидела на синей подложке
 * (`#keyboard_wrapper { background-color: #6699FF }` старого инструмента) — ровно этот же цвет
 * стоит в accents_panels деке (`--ap-deck-bg: #6699ff`). То есть для посетителя и для поисковика
 * страница остаётся такой же синей, какой была: меняется движок под ней, а не вид.
 *
 * Остальные скины (Skeuo, Light, Dark) никуда не делись — они второстепенные и переключаются
 * кнопкой темы, как на toolster.
 *
 * Всё заперто под `.rkbd[data-skin="azure"]`, иначе задело бы соседние скины. Шрифт — системный:
 * вендорных Space Grotesk / IBM Plex Mono панелей сюда не тащим (лишние файлы ради заголовков).
 */

.rkbd[data-skin="azure"] {
    /* полотно инструмента */
    --a-ink: #0d1c3d;
    --a-dim: #1b3565;
    --a-line: rgba(12, 30, 66, .16);
    --a-well: #eef3ff;

    /* дека — синее поле под клавишами */
    --a-deck: #6699ff;
    --a-deck-border: #4d80ea;
    --a-deck-pad: 14px;
    /* Толщина синей окаёмки вокруг поля ввода (десктоп) — см. блок в конце файла. */
    --a-frame-w: 6px;

    /* клавиши */
    --a-cap-bg: #fafafa;
    --a-cap-border: #2a2a2a;
    --a-cap-text: #0a0a0a;
    --a-cap-shadow: 2px 2px 2px rgba(0, 0, 0, .6);
    --a-corner: #4a4a4a;
    --a-press: #dde3ee;

    /* Обвязка инструмента (панель, поле, счётчик, легенда) — токенами базового скина. */
    --r-accent: var(--a-ink);
    --r-accent-soft: var(--a-well);
    --r-ink: var(--a-ink);
    --r-muted: var(--a-dim);
    --r-line: var(--a-line);
    --r-key-line: var(--a-line);
    --r-special: var(--a-well);
    --r-surface: #fff;
    --r-radius: 6px;
    --r-shot: var(--a-deck);
}

/* Клавиатура сидит на синей деке — как в панелях акцентов и как на этом сайте до переезда. */
.rkbd[data-skin="azure"] .rkbd__kb {
    padding: var(--a-deck-pad);
    border: 1px solid var(--a-deck-border);
    border-radius: var(--r-radius);
    background: var(--a-deck);
}

/* Вид самих клавиш — токенами движка, в палитре скина. */
.rkbd[data-skin="azure"] .rkbd__kb .kb {
    --kb-key-bg: var(--a-cap-bg);
    --kb-key-fg: var(--a-cap-text);
    --kb-key-border: var(--a-cap-border);
    --kb-key-shadow: var(--a-cap-shadow);
    --kb-special-bg: var(--a-well);
    --kb-special-fg: var(--a-ink);
    /* Нажатие ТЕМНЕЕ покоя: на телефоне движок не рисует вдавливание, и цвет остаётся
       единственным признаком нажатия (замер панелей акцентов — минус 9,4 % яркости). */
    --kb-press-bg: var(--a-press);
    --kb-corner-fg: var(--a-corner);
    --kb-hint-fg: var(--a-dim);
    --kb-pop-bg: #fff;
    --kb-active-indicator: var(--a-ink);
    --kb-lock-indicator: var(--a-ink);
}

/* Радиус клавиш у деки мельче базового: клавиша с крупным скруглением на синем читается каплей. */
.rkbd[data-skin="azure"] .rkbd__kb .kb[data-face="desktop"] { --kb-radius: 4px; }

/*
 * СИНЯЯ ОКАЁМКА ВОКРУГ ПОЛЯ ВВОДА (десктоп).
 *
 * В оригинале сайта поле и клавиатура сидели в ОДНОМ синем блоке (`#keyboard_wrapper`), и вокруг
 * белого поля шла широкая синяя рамка. Здесь у поля и деки разные блоки, поэтому рамку возвращаем
 * полем: белое поле в синей обводке — как было. Толщина МЕНЬШЕ оригинальной (владелец: «только
 * потоньше»): у панелей акцентов на такую рамку заложено 10px (`--ap-editor-frame-w`), здесь 6px.
 *
 * Только десктоп: на телефоне поле и так расширено во всю ширину экрана, и рамка там съедала бы
 * место под текст.
 */
@media (min-width: 721px) {
    /*
     * Поле и клавиатура — ОДИН синий блок, без белого шва между ними (владелец: «разрыв закрась»).
     * В оригинале они и были одним блоком, поэтому смыкаем: у поля снимаем нижний отступ и нижнюю
     * границу, скругление оставляем только сверху; у деки — только снизу. Между ними синий идёт
     * непрерывно, и стык не читается.
     */
    .rkbd[data-skin="azure"] .rkbd__field {
        margin-bottom: 0;
        padding: var(--a-frame-w);
        border: 1px solid var(--a-deck-border);
        border-bottom: 0;
        border-radius: var(--r-radius) var(--r-radius) 0 0;
        background: var(--a-deck);
    }
    .rkbd[data-skin="azure"] .rkbd__kb {
        border-top: 0;
        border-radius: 0 0 var(--r-radius) var(--r-radius);
        /* Сверху ровно столько же синего, сколько по бокам поля, — иначе шов виден отступом. */
        padding-top: var(--a-frame-w);
    }
    /* Внутри окаёмки поле остаётся белым; своя серая обводка ему больше не нужна. */
    .rkbd[data-skin="azure"] .rkbd__area { border-color: var(--a-deck-border); }
}

/* На телефоне дека разворачивается во всю ширину: вложенная рамка поверх синего давала «матрёшку»
   из обводок (тот же вывод, что в панелях акцентов). */
@media (max-width: 720px) {
    .rkbd[data-skin="azure"] .rkbd__kb {
        padding: 8px 6px;
        border: 0;
        border-radius: 0;
    }
}