/*
 * Тренажёр — база оформления. Задача vschk-platform--768, блок 1030.
 *
 * Палитра НЕЙТРАЛЬНАЯ и временная. Продукт продаётся под брендом
 * Института психотерапии, фирменный стиль с ним ещё не выбран, и секции
 * brand: у psy-trainer в projects.yml поэтому нет — в отличие от всех
 * остальных продуктов платформы. Угадывать чужой бренд заранее хуже,
 * чем поставить честную заглушку: переписывать придётся в обоих случаях,
 * но заглушка не создаёт ложного ощущения, что решение принято.
 *
 * Всё держится на переменных: смена палитры — правка блока :root,
 * а не разметки.
 */

:root {
    color-scheme: light dark;

    --ground:   #ffffff;
    --surface:  #f4f4f2;
    --ink:      #16181d;
    --muted:    #61656e;
    --line:     #e2e3e0;
    --accent:   #2f5d50;

    --step:     8px;
    --radius:   10px;
    --measure:  68ch;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
}

/* Тёмная тема идёт и по системной настройке, и по явному выбору
   в переключателе — иначе выбор человека проигрывает системе. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ground:  #14161a;
        --surface: #1c1f25;
        --ink:     #e8e9ea;
        --muted:   #9aa0a8;
        --line:    #2b2f36;
        --accent:  #7fb3a3;
    }
}

:root[data-theme="dark"] {
    --ground:  #14161a;
    --surface: #1c1f25;
    --ink:     #e8e9ea;
    --muted:   #9aa0a8;
    --line:    #2b2f36;
    --accent:  #7fb3a3;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font: 16px/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--step) * 2);
    padding: calc(var(--step) * 2) calc(var(--step) * 3);
    border-bottom: 1px solid var(--line);
}

.top__brand {
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
}

.page {
    max-width: var(--measure);
    margin: 0 auto;
    padding: calc(var(--step) * 5) calc(var(--step) * 3);
}

h1 {
    margin: 0 0 calc(var(--step) * 2);
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.lead {
    margin: 0 0 calc(var(--step) * 2);
    color: var(--muted);
}

.foot {
    padding: calc(var(--step) * 3);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

/* Широкое содержимое — таблицы кейсов и деревьев из серий 2000-4000 —
   прокручивается внутри себя. Горизонтальной прокрутки у страницы
   быть не должно ни при каком размере окна. */
.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────────────────────────────────────────────────
   Кабинет Института. Задача vschk-platform--768, блок 2030.

   Классы придуманы здесь, а не взяты у донора: okn/src/admin_primitives.php
   оказалась демо-страницей с выдуманными числами, а не библиотекой. Значит
   эти имена становятся соглашением для блоков 2040, 3030 и 4030.
   ───────────────────────────────────────────────────────────────────── */

/* Три ширины полосы. Не украшение: у страниц разные задачи чтения.
   Текст читают колонкой, карточку просматривают, таблицу сканируют глазами
   по строке — и обрезанная колонка в ней означает потерянные данные. */
.page--mid  { max-width: 96ch; }
.page--wide { max-width: 100%; padding-left: calc(var(--step) * 4); padding-right: calc(var(--step) * 4); }

.head-row {
    display: flex;
    align-items: baseline;
    gap: calc(var(--step) * 2);
    margin-bottom: calc(var(--step) * 3);
}

.count {
    color: var(--muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.back { margin-left: auto; font-size: 14px; }

/* ── Таблица списка ──────────────────────────────────────────── */

.grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.grid th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 calc(var(--step) * 2) var(--step) 0;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.grid td {
    padding: calc(var(--step) * 1.5) calc(var(--step) * 2) calc(var(--step) * 1.5) 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.grid tr.off td { opacity: 0.45; }

.grid .num     { font-variant-numeric: tabular-nums; }
.grid .nowrap  { white-space: nowrap; }
.grid .wide    { min-width: 28ch; color: var(--muted); }

.code {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.code:hover { text-decoration: underline; }

/* ── Слои карточки ───────────────────────────────────────────── */

.layer {
    margin: calc(var(--step) * 5) 0;
    padding-top: calc(var(--step) * 2);
    border-top: 2px solid var(--line);
}

.layer h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
}

/* Слой автора и скрытый слой видны только Институту. Подпись стоит
   на каждом таком слое, а не один раз вверху: страницу читают кусками,
   и «студенту не виден» должно быть рядом с полями, а не над ними. */
.layer-note {
    margin: 2px 0 calc(var(--step) * 2);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Поверхность — то единственное, что студент увидит. Отмечена цветом,
   чтобы методолог видела границу без чтения подписей. */
.layer--open { border-top-color: var(--accent); }
.layer--open .layer-note { color: var(--accent); }

.flds { margin: 0; display: flex; flex-direction: column; gap: calc(var(--step) * 2); }

.fld dt {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--muted);
    margin-bottom: 2px;
}

.fld dd { margin: 0; max-width: 78ch; }

.tag {
    display: inline-block;
    font-size: 13px;
    padding: 1px 8px;
    margin: 0 4px 4px 0;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
    white-space: nowrap;
}

/* Исходная ячейка книги. Показывается рядом с разобранными метками,
   потому что разбор огрубляет: у SH-01 «уход в фантазию» в справочнике
   Мак-Вильямс отсутствует, и без исходника этого не увидеть. */
.src {
    margin-top: calc(var(--step) * 0.75);
    font-size: 13px;
    color: var(--muted);
}

.cond {
    margin-top: calc(var(--step) * 0.75);
    padding-left: calc(var(--step) * 1.5);
    border-left: 2px solid var(--line);
    font-size: 14px;
    color: var(--muted);
}

.cond--bad { border-left-color: var(--accent); }

/* ── Навигация и справочники. Блок 2040 ──────────────────────── */

.top__nav { display: flex; gap: calc(var(--step) * 3); margin-left: calc(var(--step) * 2); }
.top__nav a { font-size: 15px; text-decoration: none; color: var(--muted); }
.top__nav a:hover { color: var(--ink); }

.warn {
    padding: calc(var(--step) * 1.5) calc(var(--step) * 2);
    border-left: 2px solid var(--accent);
    background: var(--surface);
    margin: 0 0 calc(var(--step) * 3);
}

.vals { list-style: none; margin: 0 0 calc(var(--step) * 2); padding: 0; }

.val {
    display: flex;
    align-items: center;
    gap: calc(var(--step) * 1.5);
    padding: calc(var(--step) * 1.25) 0;
    border-bottom: 1px solid var(--line);
}

/* Выключенное значение приглушено, но остаётся на месте и читается.
   Спрятать его значило бы соврать: оно продолжает стоять в кейсах,
   которые на него уже ссылаются. */
.val--off .val__title { opacity: 0.45; text-decoration: line-through; }

.val__title { flex: 1; }

/* Счётчик ссылок. Стоит до кнопки намеренно: цена выключения читается
   раньше, чем рука доходит до действия. */
.val__used {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0 7px;
}

.val__act { margin: 0; }

.val__act button,
.addrow button {
    font: inherit;
    font-size: 13px;
    padding: 3px 10px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
}

.val__act button:hover,
.addrow button:hover { color: var(--ink); border-color: var(--line-strong, var(--muted)); }

.addrow {
    display: flex;
    gap: var(--step);
    margin-top: calc(var(--step) * 2);
}

.addrow input {
    font: inherit;
    font-size: 15px;
    flex: 1;
    max-width: 42ch;
    padding: 5px 10px;
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.addrow input:focus,
.val__act button:focus-visible,
.addrow button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ── Подраздельная навигация. Блок 2060 ───────────────────────────────
 *
 * Уровень ниже .top__nav: там разделы кабинета, здесь подразделы одного
 * раздела. Общий элемент — эти же правила достанутся репликам (блок 3030)
 * и дереву (4030), поэтому ничего специфичного для справочников тут нет.
 *
 * Полоса прокручивается по горизонтали: шесть названий справочников
 * не помещаются в узкое окно, а перенос на вторую строку читается как
 * два разных ряда вкладок.
 */

.subnav {
    display: flex;
    gap: calc(var(--step) * 3);
    margin: 0 0 calc(var(--step) * 3);
    padding: 0 0 calc(var(--step) * 1.5);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: thin;
}

.subnav__item {
    flex: 0 0 auto;
    font-size: 15px;
    text-decoration: none;
    color: var(--muted);
    padding-bottom: calc(var(--step) * 1.5);
    margin-bottom: calc(var(--step) * -1.5 - 1px);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.subnav__item:hover { color: var(--ink); }

.subnav__item--on {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

.subnav__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Вход и выход. Блок 2050 ──────────────────────────────────────────
 *
 * Экран входа — единственная страница продукта без навигации: до входа
 * ходить некуда. Карточка узкая и по центру, потому что на ней ровно
 * одно поле, и растянутая на всю полосу форма выглядела бы как обрубок
 * настоящей страницы.
 */

.signin {
    max-width: 34ch;
    margin: calc(var(--step) * 10) auto 0;
    text-align: center;
}

.signin h1 { margin: 0 0 calc(var(--step) * 1.5); }

.signin__note {
    margin: 0 0 calc(var(--step) * 3);
    color: var(--muted);
}

.signin__form { display: flex; gap: var(--step); }

.signin__form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: calc(var(--step) * 1.25) calc(var(--step) * 1.5);
    font: inherit;
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.signin__form button,
.top__out button {
    padding: calc(var(--step) * 1.25) calc(var(--step) * 2);
    font: inherit;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.signin__form button:hover,
.top__out button:hover { color: var(--ink); }

.signin__form input:focus,
.signin__form button:focus-visible,
.top__out button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Выход прижат к переключателю темы, а не к навигации: это действие,
   а не раздел. */
.top__out { margin-left: auto; }
.top__out button { padding: calc(var(--step) * 0.75) calc(var(--step) * 1.5); font-size: 14px; }

/* ── Банк реплик. Блок 3030 ───────────────────────────────────────────
 *
 * Четыре цвета книги Института. Это не украшение и не статус: цвет —
 * содержание методики. Зелёный продвигает, жёлтый тратит ход, красный
 * уводит или ранит, фиолетовый — ловушка: звучит профессионально
 * и убедительно, а работает хуже всего.
 *
 * Фиолетовый намеренно НЕ похож на красный. Ловушка и вред — разные вещи:
 * на красное студент не клюёт, на фиолетовое клюёт именно потому, что оно
 * похоже на то, как говорят в кино. Если методолог перепутает их на экране,
 * она перепутает и при разборе со студентом.
 */

.rep {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--step) * 1.5);
    padding: calc(var(--step) * 1.5) 0;
    border-bottom: 1px solid var(--line);
}

.rep:last-child { border-bottom: none; }

.rep--off { opacity: 0.45; }

.rep__body { flex: 1 1 auto; min-width: 0; }

.rep__text { line-height: 1.45; }

.rep__why {
    margin-top: calc(var(--step) * 0.5);
    font-size: 14px;
    color: var(--muted);
    line-height: 1.4;
}

.ev {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 2px calc(var(--step) * 1.25);
    font-size: 12px;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid currentColor;
}

.ev--advances { color: #2f7a4f; }
.ev--neutral  { color: #8a7320; }
.ev--harms    { color: #a34437; }
.ev--trap     { color: #6f4aa8; }
.ev--none     { color: var(--muted); }

/* На тёмном фоне те же четыре тона светлее: иначе зелёный и фиолетовый
   сливаются с подложкой, а различать их методолог обязана с одного взгляда. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ev--advances { color: #6fbf8f; }
    :root:not([data-theme="light"]) .ev--neutral  { color: #d0b45c; }
    :root:not([data-theme="light"]) .ev--harms    { color: #e08a7e; }
    :root:not([data-theme="light"]) .ev--trap     { color: #b394e8; }
}

:root[data-theme="dark"] .ev--advances { color: #6fbf8f; }
:root[data-theme="dark"] .ev--neutral  { color: #d0b45c; }
:root[data-theme="dark"] .ev--harms    { color: #e08a7e; }
:root[data-theme="dark"] .ev--trap     { color: #b394e8; }

/* ── Дерево сессии. Блок 4030 ─────────────────────────────────────────
 *
 * Единственная страница продукта в две колонки. Слева карта сессии целиком,
 * справа выбранный узел: место узла и его содержимое видны одновременно,
 * и одно не теряется при взгляде на другое.
 *
 * Список вертикальный, а не вкладками: пятнадцать заголовков вроде
 * «Штрафной: «мне подошёл бы КПТ»» в строку нечитаемы. Горизонтальный
 * .subnav остаётся у справочников и реплик, где названия короткие.
 */

.tree {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: calc(var(--step) * 4);
    align-items: start;
}

.tree__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: sticky;
    top: calc(var(--step) * 2);
}

.tree__node {
    display: flex;
    align-items: baseline;
    gap: var(--step);
    padding: calc(var(--step) * 1.25) calc(var(--step) * 1.5);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    color: var(--muted);
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.tree__node:hover { color: var(--ink); background: var(--surface); }

.tree__node--on {
    color: var(--ink);
    background: var(--surface);
    border-left-color: var(--accent);
    font-weight: 500;
}

.tree__title { flex: 1 1 auto; }

.tree__count {
    flex: 0 0 auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

/* Пустой узел подписан словом, а не отсутствием числа: ноль реплик
   и «счётчик не показан» на глаз неразличимы. */
.tree__count--empty { font-style: italic; opacity: 0.7; }

.tree__sep {
    margin: calc(var(--step) * 2) 0 var(--step);
    padding: 0 calc(var(--step) * 1.5);
    font-size: 12px;
    line-height: 1.35;
    color: var(--faint, var(--muted));
    border-top: 1px solid var(--line);
    padding-top: calc(var(--step) * 1.5);
}

.tree__node-view { min-width: 0; }

.tree__node-view h2 { margin: 0 0 calc(var(--step) * 2); }
.tree__node-view h3 { margin: 0 0 var(--step); font-size: 16px; }

/* Реплика клиентки — то единственное, что видит студент. Выделена
   вертикальной чертой, потому что это её голос, а не наш комментарий. */
.tree__client {
    margin: 0 0 calc(var(--step) * 2);
    padding-left: calc(var(--step) * 2);
    border-left: 2px solid var(--accent);
    line-height: 1.5;
}

.tree__note,
.tree__gate {
    margin: 0 0 calc(var(--step) * 1.5);
    font-size: 14px;
    color: var(--muted);
    line-height: 1.45;
}

.tree__gate { color: var(--ink); }

.tree__empty {
    margin: 0 0 calc(var(--step) * 3);
    padding: calc(var(--step) * 2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    line-height: 1.5;
}

.tree__trs {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--step) * 3);
    margin: 0 0 calc(var(--step) * 4);
    padding-bottom: calc(var(--step) * 2);
    border-bottom: 1px solid var(--line);
}

.tree__tr dt {
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}

.tree__tr dd { margin: 0; }

/* Цель, которая узлом не стала: показываем текстом книги без ссылки.
   Ссылка в никуда хуже честной строки. */
.tree__prose { color: var(--muted); font-style: italic; }

.rep__mech {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--step) * 2);
    margin-top: calc(var(--step) * 0.75);
    font-size: 13px;
    color: var(--muted);
}

.mech { white-space: nowrap; }
.mech--cond { white-space: normal; font-style: italic; }

@media (max-width: 760px) {
    .tree { grid-template-columns: 1fr; }
    .tree__list { position: static; }
}

/* Выпадающий список в строке добавления — тот же вид, что у поля и кнопки.
   Без этого правила он получает системный вид и ломает ряд по высоте. */
.addrow select {
    padding: calc(var(--step) * 1.25) calc(var(--step) * 1.5);
    font: inherit;
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.addrow select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}