/**
 * Наборы клавиатуры — слой поверх готовой разметки.
 *
 * КЛАССЫ КЛАВИШ НЕ ТРОГАЮТСЯ
 * Цвет клавиши здесь несёт смысл: KeyboardService раздаёт зоны пальцев, а
 * annotateFingers() по ним же определяет палец и руку для подсказки и схемы
 * рук. Поэтому набор перекрывает цвет, а не меняет разметку.
 *
 * ПОЧЕМУ ЦЕЛИМСЯ В finger-*, А НЕ В bg-*
 * Первая попытка перекрывала утилиты Tailwind (bg-green-300 и соседние) — и
 * на уроке не сработала вовсе. Там цвет задают девять правил вида
 * `#keyboard .keyboard-key.finger-left-pinky { background: … !important }`,
 * встроенных в саму страницу, плюс их копии под [data-theme="dark"].
 * Идентификатор и !important перебивают любую утилиту.
 *
 * Отсюда форма селекторов: html[data-kb] #keyboard .keyboard-key.finger-*
 * даёт (1,3,1) против (1,3,0) у тёмной копии — выигрыш по специфичности, а не
 * по порядку подключения, который зависит от того, кто первым запушил стиль.
 *
 * Утилиты bg-* перекрываются тоже: на разминке, в словарях и заездах общий
 * партиал красит клавиши именно ими, без finger-правил.
 *
 * АТРИБУТ НА КОРНЕ
 * data-kb ставит сервер (layouts/page/template), поэтому клавиатура не мигает
 * чужим видом. Смена набора — смена одного атрибута, отсюда мгновенность.
 */

/* ---------------------------------------------------------------- доска */

html[data-kb="classic"] #keyboard,
html[data-kb="classic"] .typing-keyboard { background: linear-gradient(180deg, #E2E2DC, #CFCFC8) !important; }
html[data-kb="mech"] #keyboard,
html[data-kb="mech"] .typing-keyboard { background: linear-gradient(180deg, #2B3038, #1E2228) !important; }
html[data-kb="glam"] #keyboard,
html[data-kb="glam"] .typing-keyboard { background: linear-gradient(125deg, #FFD9EC, #EBD8FF 46%, #CFE9FF) !important; }
html[data-kb="cyber"] #keyboard,
html[data-kb="cyber"] .typing-keyboard {
    background-color: #0B0713 !important;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px) !important;
}
html[data-kb="hack"] #keyboard,
html[data-kb="hack"] .typing-keyboard {
    background-color: #04060A !important;
    background-image: repeating-linear-gradient(0deg, rgba(0,255,120,.055) 0 1px, transparent 1px 3px) !important;
}
html[data-kb="glass"] #keyboard,
html[data-kb="glass"] .typing-keyboard { background: linear-gradient(160deg, #DCE8F2, #B9CCDD 55%, #CDDAE6) !important; }

/* Декоративные пятна и картинка рук на уроке спорят с тёмными наборами. */
html[data-kb="mech"] #keyboard > .absolute,
html[data-kb="cyber"] #keyboard > .absolute,
html[data-kb="hack"] #keyboard > .absolute { display: none !important; }

/* --------------------------------------------------------- цвета набора */

/*
 * Палитра набора отвязана от корня страницы.
 *
 * html[data-kb="…"] одевает настоящую клавиатуру занятия. Но те же цвета
 * нужны миниатюрам в разделе «Коллекция», а там на одной странице стоят
 * сразу все наборы — корень не может быть семи видов одновременно. Поэтому
 * каждый набор отзывается и на [data-kb-palette="…"]: миниатюра объявляет
 * палитру на себе и берёт те же переменные.
 *
 * Дублировать значения в стилях раздела было бы хуже: цвет набора правился
 * бы в двух местах, и рано или поздно миниатюра разошлась бы с клавиатурой.
 */

html[data-kb="school"],
[data-kb-palette="school"] {
    --kb-cap: #FFFFFF; --kb-ink: #334155; --kb-edge: #CBD5E1; --kb-r: 8px;
    --z-pinky: #86EFAC; --z-ring: #67E8F9; --z-middle: #F9A8D4; --z-index: #FDBA74; --z-thumb: #CBD5E1;
}
html[data-kb="classic"],
[data-kb-palette="classic"] {
    --kb-cap: #F6F6F3; --kb-ink: #55554F; --kb-edge: #CFCFC8; --kb-r: 4px;
    --z-pinky: #E3EFE2; --z-ring: #DEEAEF; --z-middle: #F0E2E7; --z-index: #F2E6D6; --z-thumb: #E8E8E2;
}
html[data-kb="mech"],
[data-kb-palette="mech"] {
    --kb-cap: #39404A; --kb-ink: #E8ECF3; --kb-edge: #12161B; --kb-r: 5px;
    --z-pinky: #3E5A4A; --z-ring: #35525A; --z-middle: #563E4C; --z-index: #5A4630; --z-thumb: #2F3640;
}
html[data-kb="glam"],
[data-kb-palette="glam"] {
    --kb-cap: #FFFFFF; --kb-ink: #8A4E77; --kb-edge: #E6A5CB; --kb-r: 13px;
    --z-pinky: #CFF3FA; --z-ring: #DCE4FF; --z-middle: #FFD7EC; --z-index: #FFE6F3; --z-thumb: #F6E8FF;
}
html[data-kb="cyber"],
[data-kb-palette="cyber"] {
    --kb-cap: #141024; --kb-ink: #F1E8FF; --kb-edge: #04020A; --kb-r: 3px;
    --z-pinky: #06312B; --z-ring: #052B3A; --z-middle: #35082A; --z-index: #3A2A05; --z-thumb: #100C1E;
}
html[data-kb="hack"],
[data-kb-palette="hack"] {
    --kb-cap: #080C10; --kb-ink: #57F49B; --kb-edge: #12331F; --kb-r: 2px;
    --z-pinky: #0C2418; --z-ring: #0A2020; --z-middle: #14301A; --z-index: #1B3312; --z-thumb: #070E0A;
}
html[data-kb="glass"],
[data-kb-palette="glass"] {
    --kb-cap: rgba(255,255,255,.55); --kb-ink: #2B3C4D; --kb-edge: rgba(255,255,255,.75); --kb-r: 10px;
    --z-pinky: #CFEDE3; --z-ring: #CFE3F0; --z-middle: #EBD7EA; --z-index: #F0E2CC; --z-thumb: #DCE8F2;
}

/* ------------------------------------------------------------- клавиша

   ПОЧЕМУ ВЕЗДЕ :not(.active):not(.error):not(.is-hit):not(.is-wrong)
   Урок отвечает на нажатие классом .active (синяя вспышка) и на промах
   классом .error (красная). Оба правила весят (0,2,0) — меньше любого
   селектора набора, а у нас ещё и !important. Без этой оговорки набор
   съедал обе вспышки: клавиатура переставала отзываться на удар, и
   ошибка ничем себя не выдавала.

   На разминке, в словарях и заездах те же две вспышки называются иначе —
   .is-hit и .is-wrong. Сами по себе они весят (0,3,0) и набор образца
   (0,2,1) обходили без посторонней помощи. Но стоило добавить оговорку
   про .active/.error, как наш селектор потяжелел до (0,4,1) и начал
   съедать уже их. Поэтому в цепочке все четыре имени: список состояний
   обязан быть полным, иначе починка одной страницы ломает соседнюю.

   Мораль на будущее: добавляя сюда :not(), проверяйте не только ту
   страницу, ради которой добавляете.
*/

html[data-kb] #keyboard .keyboard-key:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .typing-keyboard .keyboard-key:not(.active):not(.error):not(.is-hit):not(.is-wrong) {
    background: var(--kb-cap) !important;
    background-image: none !important;
    color: var(--kb-ink) !important;
    border-color: var(--kb-edge) !important;
    border-radius: var(--kb-r) !important;
}

/* Подпись внутри клавиши: на уроке ей задан свой цвет с !important.
   Вспышки красят и подпись тоже — их пропускаем так же. */
html[data-kb] #keyboard .keyboard-key:not(.active):not(.error):not(.is-hit):not(.is-wrong) span,
html[data-kb] .typing-keyboard .keyboard-key:not(.active):not(.error):not(.is-hit):not(.is-wrong) span { color: inherit !important; }

/* ---------------------------------------------------------- зоны пальцев

   Девять классов урока и пять утилит общего партиала ведут к одним и тем же
   пяти зонам. Перечисляем оба источника, чтобы набор работал везде. */

html[data-kb] #keyboard .keyboard-key.finger-left-pinky:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] #keyboard .keyboard-key.finger-right-pinky:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .typing-keyboard .keyboard-key.finger-left-pinky:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .typing-keyboard .keyboard-key.finger-right-pinky:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .keyboard-key.bg-green-300:not(.active):not(.error):not(.is-hit):not(.is-wrong) { background: var(--z-pinky) !important; }

html[data-kb] #keyboard .keyboard-key.finger-left-ring:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] #keyboard .keyboard-key.finger-right-ring:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .typing-keyboard .keyboard-key.finger-left-ring:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .typing-keyboard .keyboard-key.finger-right-ring:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .keyboard-key.bg-cyan-300:not(.active):not(.error):not(.is-hit):not(.is-wrong) { background: var(--z-ring) !important; }

html[data-kb] #keyboard .keyboard-key.finger-left-middle:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] #keyboard .keyboard-key.finger-right-middle:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .typing-keyboard .keyboard-key.finger-left-middle:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .typing-keyboard .keyboard-key.finger-right-middle:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .keyboard-key.bg-pink-300:not(.active):not(.error):not(.is-hit):not(.is-wrong) { background: var(--z-middle) !important; }

html[data-kb] #keyboard .keyboard-key.finger-left-index:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] #keyboard .keyboard-key.finger-right-index:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .typing-keyboard .keyboard-key.finger-left-index:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .typing-keyboard .keyboard-key.finger-right-index:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .keyboard-key.bg-orange-300:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .keyboard-key.bg-orange-200:not(.active):not(.error):not(.is-hit):not(.is-wrong) { background: var(--z-index) !important; }

html[data-kb] #keyboard .keyboard-key.finger-thumbs:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .typing-keyboard .keyboard-key.finger-thumbs:not(.active):not(.error):not(.is-hit):not(.is-wrong),
html[data-kb] .keyboard-key.bg-slate-300:not(.active):not(.error):not(.is-hit):not(.is-wrong) { background: var(--z-thumb) !important; }

/* Нижний ряд-заглушка не должен светиться белым на тёмных наборах. */
html[data-kb="mech"] .keyboard-key.bg-white,
html[data-kb="cyber"] .keyboard-key.bg-white,
html[data-kb="hack"] .keyboard-key.bg-white { background: rgba(255,255,255,.06) !important; }

/* --------------------------------------------------------- куда тянуться

   Подсветка следующей клавиши обязана остаться заметной на любом наборе:
   без неё клавиатура перестаёт вести палец. */

html[data-kb] .keyboard-key.is-next,
html[data-kb] #keyboard .keyboard-key.current-key-active {
    outline: 3px solid #FFB020 !important;
    outline-offset: 2px;
    z-index: 2;
}
html[data-kb="hack"] .keyboard-key.is-next,
html[data-kb="hack"] #keyboard .keyboard-key.current-key-active { outline-color: #57F49B !important; }
html[data-kb="cyber"] .keyboard-key.is-next,
html[data-kb="cyber"] #keyboard .keyboard-key.current-key-active { outline-color: #FF2E97 !important; }