/**
 * Схема рук и блок управления занятием.
 *
 * Разметка — resources/views/components/finger-hint.blade.php и
 * components/typing-controls.blade.php, поведение — public/js/finger-hint.js,
 * typing-sound.js и typing-controls.js.
 *
 * ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ
 * Сначала эти правила лежали в typing-practice.css — и оказалось, что тот
 * подключён не везде: на уроке кабинета, гостевом уроке и тренажёре его нет.
 * Схема рук там осталась без стилей (невидимые элементы), а метка «Shift
 * другой рукой» — без opacity: 0 и потому висела на экране всегда.
 *
 * Теперь файл подключают сами партиалы через @once: компонент не может
 * оказаться на странице без своих стилей, и повторить эту ошибку нельзя.
 */

/* ======================================================================
   ПОДСКАЗКА О ПАЛЬЦЕ — СХЕМА РУК

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

   Пальцы разной высоты не для красоты: по силуэту руки палец узнаётся
   мгновенно, а по одинаковым столбикам его пришлось бы отсчитывать.

   Цвета те же, что у зон на клавиатуре: подсказка и раскраска клавиш
   говорят одно и то же.
   ====================================================================== */

.fh {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 26px;
    /* Место держится всегда: палец меняется по нескольку раз в секунду, и без
       фиксированной высоты клавиатура прыгала бы на каждом символе. */
    min-height: 46px;
    margin-top: 14px;
    position: relative;
}

.fh-hand {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.fh-f {
    display: block;
    width: 9px;
    border-radius: 5px 5px 3px 3px;
    background: #e2e8f0;
    transition: background .12s linear, transform .12s ease, box-shadow .12s ease;
}

[data-theme="dark"] .fh-f { background: #334155; }

/* Силуэт ладони */
.fh-pinky  { height: 16px; }
.fh-ring   { height: 24px; }
.fh-middle { height: 28px; }
.fh-index  { height: 22px; }

/* Большой стоит ниже и лежит поперёк — как на руке */
.fh-thumb {
    height: 9px;
    width: 16px;
    border-radius: 5px;
    margin-bottom: 2px;
}

.fh-left .fh-thumb  { margin-left: 5px; }
.fh-right .fh-thumb { margin-right: 5px; }

/* Горящий палец. Цвета — те же, что у зон на клавиатуре. */
.fh-f.is-on { transform: translateY(-3px); }

.fh-pinky.is-on  { background: #86efac; box-shadow: 0 0 0 3px rgba(134, 239, 172, .28); }
.fh-ring.is-on   { background: #67e8f9; box-shadow: 0 0 0 3px rgba(103, 232, 249, .28); }
.fh-middle.is-on { background: #f9a8d4; box-shadow: 0 0 0 3px rgba(249, 168, 212, .28); }
.fh-index.is-on  { background: #fdba74; box-shadow: 0 0 0 3px rgba(253, 186, 116, .28); }
.fh-thumb.is-on  { background: #cbd5e1; box-shadow: 0 0 0 3px rgba(203, 213, 225, .3); }

/* Метка Shift: только на заглавных */
.fh-shift {
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    font-size: 11px;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s linear;
}

[data-theme="dark"] .fh-shift { background: #1e293b; color: #cbd5e1; }

.fh.is-shift .fh-shift { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .fh-f { transition: none; }
    .fh-f.is-on { transform: none; }
}

/* ======================================================================
   УПРАВЛЕНИЕ ЗАНЯТИЕМ: ЗВУК И КЛАВИАТУРА

   Страницы набора и без того плотные. Кнопки лежат в углу и в покое едва
   заметны — проявляются при наведении, фокусе и на сенсорных устройствах,
   где наведения не бывает.
   ====================================================================== */

.tc {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tc-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, .35);
    background: rgba(255, 255, 255, .7);
    color: #64748b;
    cursor: pointer;
    opacity: .38;
    backdrop-filter: blur(6px);
    transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}

.tc-btn svg { width: 19px; height: 19px; }

.tc:hover .tc-btn,
.tc-btn:hover,
.tc-btn:focus-visible {
    opacity: 1;
    color: #2563eb;
    border-color: rgba(37, 99, 235, .45);
}

.tc-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

[data-theme="dark"] .tc-btn {
    border-color: rgba(148, 163, 184, .25);
    background: rgba(30, 41, 59, .7);
    color: #94a3b8;
}

[data-theme="dark"] .tc:hover .tc-btn,
[data-theme="dark"] .tc-btn:hover,
[data-theme="dark"] .tc-btn:focus-visible { color: #60a5fa; }

/* Наведения на телефоне не бывает: там кнопки должны быть видны сразу. */
@media (pointer: coarse) {
    .tc-btn { opacity: .75; }
}

/* Клавиатура скрыта. Схема рук остаётся: без клавиатуры она и есть
   единственная подсказка о пальце. */
.cw-keyboard-hidden #keyboard,
.cw-keyboard-hidden .typing-keyboard { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .tc-btn { transition: none; }
}

/*
 * Кнопка клавиатуры не нужна там, где клавиатуры и так нет.
 *
 * На сенсорных устройствах экранная клавиатура тренажёра не показывается
 * вовсе — её место занимает системная. Кнопка «скрыть клавиатуру» там ничего
 * не скрывает и только занимает угол, который на телефоне и без того тесный.
 */
@media (pointer: coarse) {
    .tc [data-cw-keyboard-toggle] { display: none; }
}

/*
 * Своя копия sr-only.
 *
 * Класс приходит из Tailwind, но эти партиалы включаются на страницах, где
 * сборка может оказаться не той — а без него подпись для скринридеров стала
 * бы видимым текстом на экране. Компонент должен быть самодостаточным: ровно
 * на этом он уже один раз и сломался.
 */
.fh-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}