/* Слой «Сейчас разбираем» (FR-1, web/dist/focus.js). Подключается в index.html после стилей шагов:
   элемент рисуется теми же классами, что на экране шага (opt-btn, card-chip, inv-*, fc-*), здесь только
   слой и подсветка своего ответа. Свой ответ — синий школьный цвет, не зелёный: зелёный на разборе
   читается как «верно», а слой ничего не оценивает.

   Слои по z-index: шаг и его липкие доки (5), полоса сверху (10), рука (20), меню звонка (25),
   увеличенная картинка дела (28), СЛОЙ (29), оверлеи замка, связи и «только чтение» (30), тосты (40).
   Пока слой открыт, рука и меню звонка поднимаются на 30 — над слоем. Верх слоя ставит focus.js — там,
   где начинается экран шага: полоса сверху и видео звонка с кнопками микрофона остаются открыты.

   Замок «Слушаем ведущего» вместе со слоем (сверка после волны 2, TASK-7): ведущая останавливает детей
   и открывает элемент для разбора — слой должен быть виден, иначе focus_ack врал бы «открыто» у ребёнка,
   который смотрит на замок. Оверлей замка опускается под слой (28): шапку, видео и экран шага он
   закрывает как и был, ответы закрыты сервером; рука и меню звонка остаются под замком. Класс
   lesson-locked ставит student.js. Обрыв связи и «только чтение» (30) по-прежнему выше слоя. */
.focus-layer { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 29; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: linear-gradient(160deg, #f5f8ff 0%, #eef3ff 45%, #f3eefe 100%); }
html.focus-open { overflow: hidden; }
html.focus-open:not(.lesson-locked) .hand-btn, html.focus-open:not(.lesson-locked) .call-menu { z-index: 30; }
html.focus-open.lesson-locked #lock-overlay { z-index: 28; }

/* снизу место под кнопку руки: последний вариант не прячется под ней */
.focus-inner { max-width: 760px; margin: 0 auto; padding: 14px 16px 96px; }
.focus-head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.focus-title { background: #3450d2; color: #fff; border-radius: 999px; padding: 8px 22px; font-size: 20px;
  font-weight: 800; box-shadow: 0 4px 12px rgba(52,80,210,.25); }
.focus-saved { font-size: 15px; font-weight: 600; color: #4a5270; text-align: center; }
.focus-none { margin-top: 12px; padding: 10px 16px; border: 2px dashed #b9c4e8; border-radius: 14px;
  background: #fff; text-align: center; font-size: 18px; font-weight: 700; color: #4a5270; }

/* только чтение: без курсора-руки и без реакции на нажатие */
.focus-layer .focus-opt, .focus-layer .card-chip, .focus-layer .inv-thumb, .focus-layer .inv-new { cursor: default; }
.focus-layer .opt-btn:active { border-color: transparent; }
.focus-layer .inv-thumb img, .focus-layer .inv-new img { pointer-events: none; }

/* свой ответ */
.focus-layer .focus-mine, .focus-layer .opt-btn.focus-mine:active { border-color: #3450d2; background: #eef2ff;
  box-shadow: 0 0 0 3px rgba(52,80,210,.18); }
.focus-layer .focus-mine .mc-mark.on { background: #3450d2; border-color: #3450d2; }
.focus-layer .inv-opt.focus-mine { border-color: #3450d2; background: #eef2ff; }

/* sort: карточка крупно, под ней корзины */
.focus-card-wrap { display: flex; justify-content: center; margin-top: 16px; }
.focus-card-wrap .card-chip { font-size: 22px; padding: 18px 22px; max-width: 100%; text-align: center; }
.focus-card-wrap.focus-card-img .card-chip { width: min(100%, 260px); }
.focus-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.focus-bucket { min-height: 64px; display: flex; align-items: center; justify-content: center; padding: 12px;
  border: 3px dashed #b9c4e8; border-radius: 18px; background: #fafbff; font-size: 17px; font-weight: 700;
  color: #3450d2; text-align: center; }
.focus-bucket.focus-mine { border-style: solid; }

/* investigate: дело и плашки подряд, без закреплённого дока — слой прокручивается целиком */
.focus-case { margin-top: 14px; }
.focus-slots { margin-top: 14px; }

@media (max-width: 480px) {
  .focus-title { font-size: 18px; padding: 7px 16px; }
  .focus-card-wrap .card-chip { font-size: 19px; }
}