/* ═══════════════════════════════════════════════════════════════════════
   ЭКРАН «КАБИНЕТ» · доводка поверх системы

   Подключается ТРЕТЬИМ: /system.css → /cabinet.css → этот файл.
   Своих токенов почти не заводит — берёт системные. Здесь лежит только то,
   что относится к состояниям этого экрана: чек-лист, ступень, урок,
   бесплатные уроки, шторка шага, проверка Mac, запись занятия.

   Правила, которые тут соблюдаются буквально:
   · ОДИН плотный объект на экран. Плотный — карточка ближайшей встречи
     (.next). Всё остальное на экране обязано быть стеклом, строкой или
     тихой поверхностью, иначе верх страницы превращается в спор главных;
   · перечисление = СТРОКИ с волосяной линией, а не стопка плашек;
   · цвет говорит о состоянии: зелёный — сделано, синий — вы здесь,
     серый — сказать нечего;
   · иконки только SVG currentColor. Эмодзи и глифов-иконок нет;
   · на полях ввода обводки нет никогда — светится рамка короба;
   · display в классе СИЛЬНЕЕ [hidden]. Всё, чему тут задан display,
     повторено парой [hidden]{display:none} в конце файла.
   ═══════════════════════════════════════════════════════════════════════ */

/* Ссылка в тексте. Системный --blue на светлом стекле даёт 4.0 — ниже нормы
   для мелкого текста, поэтому у ссылок свой, более тёмный синий. В ночи
   роль переворачивается: там нужен светлее фона, а не темнее. */
:root{ --link:#0A63D8 }
:root[data-theme="dark"]{ --link:#8CC5FF }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --link:#8CC5FF }
}

/* ═══ 1. ПУТЬ ИЗ ЭТАПОВ ════════════════════════════════════════════════
   В светлой теме открытая поверхность выбранной плитки почти совпадала с
   тихой поверхностью соседних: «где я» приходилось искать. Разводим не
   цветом (он занят), а весом кромки и тенью. */
.stage{opacity:.82}
.stage[aria-selected="true"]{box-shadow:var(--inset-1),0 10px 24px -18px rgba(24,68,124,.55)}
:root[data-theme="dark"] .stage[aria-selected="true"]{box-shadow:var(--inset-1),0 12px 28px -20px rgba(0,0,0,.8)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .stage[aria-selected="true"]{box-shadow:var(--inset-1),0 12px 28px -20px rgba(0,0,0,.8)}
}
/* Дорожка кольца прогресса: --track на самой плитке не видно вовсе, и пустое
   кольцо читалось как сломанная иконка. Берём линию отметок — её видно. */
.ring .rbg{stroke:var(--tick-line)}

/* Экран урока и экран бесплатных уроков — отдельные экраны, а не вкладка
   этапа: рельса на них лишний контекст. Ровно тем же приёмом, что страница
   шага прячет рельсу в скрипте. */
.wrap:has(#msurok) .rail,
.wrap:has(#freescreen) .rail{display:none}

/* ═══ 2. ЧЕК-ЛИСТ ══════════════════════════════════════════════════════ */

/* Заблокированный шаг. Было opacity:.5 на всей строке — заголовок падал до
   ~1.9:1, и половина списка становилась нечитаемой. Состояние показываем
   тем же языком, что и всё будущее в системе: пунктир + тихая поверхность,
   а текст оставляем читаемым. */
.step.locked{opacity:1;border-style:dashed;border-color:var(--soon-line);background:var(--soon-bg)}
.step.locked .mid b{color:var(--ink2);font-weight:600}
.step.locked .mid i{color:var(--muted)}
.step.locked .cbx{border-style:dashed;border-color:var(--tick-line);background:transparent}
.step.locked .cbx svg{stroke:var(--taupe)}
.step.locked .go{color:var(--dim);opacity:.7}

/* Пройденный шаг: зачёркнутый заголовок и без того тише — глушить его ещё и
   рамкой не нужно, но и выделять нечем. Ровная тихая кромка. */
.step.done{border-color:var(--hair)}

/* Проверка Mac. Пройденная строка носила синюю «открытую» кромку и оказывалась
   единственной подсвеченной среди сделанных — это читалось как «здесь ещё
   что-то надо». Уравниваем с остальными. */
.macrow.done{border-color:var(--hair)}
.macrow .mid i .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:0}

/* Счётчик прогресса: знаменатель на --dim давал 2.9:1 — цифру приходилось
   угадывать. Он часть числа, а не украшение. */
.prog-top .n small{color:var(--taupe);font-weight:500}

/* ═══ 3. ЧЕК-ЛИСТ ПРОЙДЕН ══════════════════════════════════════════════
   Раньше это была вторая тёмная плашка на экране — над ней уже стоит
   карточка ближайшей встречи, и два «главных» объекта спорили друг с другом.
   Плотный на экране один; «подготовка пройдена» — открытая поверхность. */
.allready{border-color:var(--open-line);background:var(--open-bg);color:var(--ink);
  box-shadow:var(--pane-edge);padding:15px 17px;
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.allready b{color:var(--ink)}
.allready span{color:var(--ink2)}
.allready .allready-note{color:var(--muted)}
/* «Продолжить» — единственное действие карточки, значит акцент экрана. */
.allready > button{margin-top:var(--s3);min-height:46px;border-radius:var(--r-m);border:0;color:var(--accent-ink);
  background:var(--accent-bg);
  box-shadow:0 16px 34px -18px var(--accent-glow),inset 0 1px var(--accent-sheen);
  transition:transform var(--dur) var(--ease)}
.allready > button:hover{transform:translateY(-1px)}
.allready > button:active{transform:translateY(1px)}

/* ═══ 4. СПИСОК УРОКОВ — СТРОКИ, А НЕ СТОПКА ПЛАШЕК ════════════════════
   Уроки шли тремя чёрными плашками подряд: три равнозначных «главных»
   объекта в одной карточке. Порядок в системе показывают строкой с
   волосяной линией и отметкой состояния слева, а не рамкой вокруг каждой.
   Классы .msurow / .stepgo / .mst / .msv / .msuchat сохранены — их читает
   скрипт (повесьУроки, перерисуйГалочкиУроков). */
.msplan:has(.msurow),
.allready:has(.msurow){gap:0}
.msplan:has(.msurow) > b{margin-bottom:6px}
.msplan:has(.msurow) > span:not(.msnote){margin-bottom:6px}
.msplan:has(.msurow) > .msnote,
.allready:has(.msurow) > .allready-note{margin-top:11px}
.allready:has(.msurow) > b{margin-bottom:5px}
.allready:has(.msurow) > span:not(.allready-note){margin-bottom:7px}

/* Волосяная линия висит на РЯДЕ, а не на кнопке: на кнопке она обрывалась
   перед самолётиком и оставляла в разделителе дыру в полсотни пикселей. */
.msurow{align-items:center;gap:var(--s2);border-top:1px solid var(--hair)}
.msplan .stepgo,
.allready .stepgo,
#freescreen .stepgo{align-self:auto;margin:0;min-height:52px;padding:12px 2px;
  border:0;border-radius:0;background:transparent;
  color:var(--ink2);font-size:14.5px;font-weight:560;letter-spacing:-.015em;
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.msplan .stepgo:hover,
.allready .stepgo:hover,
#freescreen .stepgo:hover{background:transparent;color:var(--ink);transform:translateX(2px)}
.msplan .stepgo:disabled,
.allready .stepgo:disabled{background:transparent;color:var(--dim);transform:none;cursor:default}
.stepgo .mst{font-weight:inherit;color:inherit}
/* Отметка состояния уходит влево и есть всегда: пустой кружок — «ещё нет»,
   зелёный с галкой — «пройдено». Раньше кружок появлялся только у пройденных,
   и строки прыгали по ширине. */
.stepgo .msv{display:flex;order:-1;flex:none;width:22px;height:22px;
  border:1.6px solid var(--tick-line);background:var(--tick-bg)}
/* Кружок урока и кружок покупки — один размер: это одна и та же отметка. */
.buyrow .bx{width:22px;height:22px}
.stepgo .msv svg{opacity:0;stroke:var(--on-solid)}
.stepgo.passed .msv{background:var(--green);border-color:transparent}
.stepgo.passed .msv svg{opacity:1}
.stepgo.passed .mst{color:var(--taupe)}
/* Самолётик — тихая круглая кнопка рядом со строкой, а не вторая плашка. */
.msuchat{align-self:auto;width:38px;height:38px;margin:0;border-radius:50%}
.msuchat svg{width:16px;height:16px}
.allready .msuchat{margin:0;color:var(--btn-ink);border-color:var(--btn-line);
  background:var(--btn-bg);box-shadow:var(--inset-1)}

/* ═══ 5. ВОЗВРАТ НАЗАД ═════════════════════════════════════════════════
   Стрелка была текстовым знаком «←». Теперь это SVG, и кнопке нужен ряд. */
.msuback{display:inline-flex;align-items:center;gap:6px;min-height:38px}
.msuback svg{flex:none;width:15px;height:15px}
.msback{display:flex;align-items:center;justify-content:center;gap:7px}
.msback svg{flex:none;width:15px;height:15px}

/* ═══ 6. ЭКРАН УРОКА ═══════════════════════════════════════════════════ */
/* «Файлы к уроку» — такая же микро-метка раздела, как «Материалы» и
   «Что где искать» на занятии: один язык заголовков на весь кабинет. */
.ufiles > b{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--taupe);margin-bottom:2px}
.ufile .fn{color:var(--ink)}
/* Описание урока — это абзац, а не подпись: на --muted он читается на грани
   нормы, для тела текста в системе положен --ink2. */
.uabout{color:var(--ink2)}
.msnote{color:var(--muted)}
/* Пустая заметка («урок отправлен в чат») всё равно держала отступ снизу. */
.msnote:empty{display:none}

/* ═══ 7. ШТОРКА ШАГА ═══════════════════════════════════════════════════ */
/* ⚠️ Нумерация списков. Сброс системы гасит маркеры у всех ol/ul, а в теле
   шага decimal был возвращён только веткам инструкции — из-за этого шаги
   «Как проверить чип» шли без номеров, тремя абзацами подряд. */
.sh-body ol{margin:0 0 10px;padding-left:20px;list-style:decimal}
.sh-body ol li{margin-bottom:5px}
.sh-body ol li::marker{color:var(--taupe);font-weight:650}
/* Ссылка в тексте шага — своим синим (см. --link вверху файла). */
.sh-body a{color:var(--link);border-bottom-color:currentColor}
/* Кнопка отметки теперь с иконкой. */
.sh-btn svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ═══ 8. ПРОВЕРКА MAC ══════════════════════════════════════════════════ */
/* Переключатель языка: флаги-эмодзи убраны, остались подписи — как в
   сегментах системы. */
.lt{white-space:nowrap;padding:0 10px}

/* Ветка «подходит / не подойдут»: знаки ✓ и ✗ были текстом, теперь иконки. */
.sh-body .branch .bh{display:flex;align-items:center;gap:7px}
.sh-body .branch .bh svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Вердикт ИИ: эмодзи заменены иконкой, поэтому строке нужен ряд с колонкой
   под знак — иначе вторая строка текста уезжает под иконку. */
.verdict.on{display:flex;align-items:flex-start;gap:9px}
.verdict svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.verdict .vt{min-width:0}
/* Ожидание ответа: у спиннера свой отступ, иконки рядом нет. */
.verdict.wait .spin{margin-top:1px}

/* ═══ 9. ЗАПИСЬ ЗАНЯТИЯ ════════════════════════════════════════════════
   Подпись под плеером на 375px ломалась: «Запись занятия» в две строки,
   а пояснение занимало всю ширину. Даём подписи переноситься целиком. */
.rec-c{flex-wrap:wrap;row-gap:3px}
.rec-c span{flex:none;white-space:nowrap}
.rec-c i{flex:1 1 100%;color:var(--ink2)}
@media (min-width:520px){
  .rec-c i{flex:0 1 auto;text-align:right}
}

/* ═══ 10. ШИРОКИЙ ЭКРАН ════════════════════════════════════════════════
   На вебе .wrap раскрывается до 1320px ради плитки чек-листа. Экраны
   ступени, урока и бесплатных уроков — это статьи: во всю ширину монитора
   строка становится нечитаемой, а кнопки растягиваются на метр. */
@media (min-width:900px){
  #msstage,#msurok,#freescreen{max-width:860px;margin-left:auto;margin-right:auto}
  #msurok .ubtn,.msback{max-width:420px;margin-left:auto;margin-right:auto}
  .uabout,.udoc{max-width:70ch}
  /* Сбой загрузки. #list на вебе — сетка в две-три колонки, и сообщение об
     ошибке уезжало в первую ячейку, а кнопка «Обновить» — во вторую, рядом
     с ним. Это не два элемента списка, а одно сообщение на всю ширину. */
  #list .err,#list .msback{grid-column:1/-1}
  /* «Курс пройден» — одна фраза; во всю ширину монитора она не читается. */
  .closed{max-width:620px;margin-left:auto;margin-right:auto}
}

/* ═══ [hidden] · парные правила ════════════════════════════════════════
   display в авторском правиле сильнее браузерного [hidden]. Всё, чему этот
   файл задаёт display, обязано иметь пару — иначе скрытое скриптом остаётся
   на экране. Добавляешь display — добавляй строку сюда. */
.msuback[hidden],.msback[hidden],.verdict[hidden],.stepgo .msv[hidden]{display:none}