/*
    Только то, что есть на экранах панели и чего нет у логгера.

    Поверхности, таблицы, поля, кнопки и сообщения — в components.css, общие с
    логгером. Каркас — в shell.css. Цвета — в tokens.css. Если что-то отсюда
    понадобится логгеру, оно переезжает в components.css, а не копируется.
*/

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 var(--font);
}

/* Экран входа: боковой навигации до входа нет и рисовать её незачем. */
main.plain { max-width: 460px; margin: 72px auto; padding: 0 22px; }
.signin { max-width: 380px; margin: 0 auto; }

/* ── Оператор в боковой ─────────────────────────────────────────────────── */

.who { font-weight: 600; color: var(--text); text-decoration: none; }
a.who:hover { color: var(--accent); }
/* Мы сейчас на экране самого оператора: в списке разделов такого пункта нет. */
a.who.here { color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }

.role {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
}
.role-administrator { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.role-operator { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.role-viewer { color: var(--muted); }

/*
    Метка риска операции: меняет ли она состояние сервера или только читает.

    Своя, а не .role-operator из боковой: пока метка риска бралась оттуда,
    перекрасив роль оператора, мы молча перекрасили бы метку риска на соседнем
    экране, и наоборот.
*/
.risk {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
/*
    Три степени, а не одна. Прежде обратимое, необратимое и широкое по охвату
    показывались одной жёлтой меткой «изменяет состояние» — то есть экран
    сообщал, что цена ошибки у них одинакова.

    Красный тут заслуженный и потому не обесценивается: он стоит только там, где
    починить нельзя. Широкое вдобавок носит подложку — цвет не единственный
    носитель смысла, и слово в метке говорит то же самое.
*/
.risk-state { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.risk-hard { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
/*
    ДВА ВЕРХНИХ УРОВНЯ РАЗВЕДЕНЫ НЕ ТОЛЬКО ЦВЕТОМ.

    У необратимого ЗАЛИВКА, у широкого — только рамка. Иначе «затрагивает
    многих» и «необратимое» на снимке экрана и на печати — одно и то же.

    Начертание тут не признак: соседние знаки наследуют 800, и поставленное
    было 600 сделало бы самое опасное самым бледным. Замерено в браузере
    04.09.2026 — ровно так и вышло, пока не убрали.

    До 04.09.2026 заливка была у обоих, потому что правило стояло в двух файлах
    и побеждал более поздний.
*/
.risk-wide {
    color: var(--danger-text);
    border-color: var(--danger-line);
}
.risk-irreversible {
    color: var(--danger-text);
    background: var(--danger-soft);
    border-color: var(--danger-line);
}
.risk-reversible { color: var(--warn); border-color: var(--warn); }
.risk-read { color: var(--muted); }

/*
    ОПАСНАЯ ФИШКА. Тег `op-chip` печатает класс из атрибута `look=`, и
    `look="chip danger"` стоит на переключателе каналов континентов
    (World.cshtml). Правила для него НЕ БЫЛО НИ ОДНОГО: ни `.chip.danger`, ни
    голого `.danger` — то есть опасное действие рисовалось обычной фишкой.

    Найдено итоговой проверкой аудита 04.09.2026. Сверка классов его не видела
    по устройству: она разбирает литеральные `class=` в разметке, а этот класс
    печатает тег-помощник из своего атрибута.
*/
.chip.danger {
    border-color: var(--danger-line);
    background: var(--danger-soft);
    color: var(--danger-text);
}

.inline { display: inline; margin: 0; }

/* ── Плитки со сводными числами ─────────────────────────────────────────── */

/*
    Прежнее minmax(230px, 1fr) растягивало ДВЕ плитки на пол-экрана каждую:
    число оказывалось в одном конце строки, а его подпись — в другом. Верхняя
    граница и прижим влево держат число рядом с подписью, сколько бы плиток ни
    было.
*/
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); justify-content: start; gap: 14px; }

.stat {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.stat .label {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--subtle);
}
.stat .value { font-size: 1.4rem; font-weight: 650; margin-top: 4px; font-variant-numeric: tabular-nums; }

/*
    Оговорка под числом: откуда оно и чему в нём верить («в базе: в игре — по
    записи, может устареть»). Без своего размера она набиралась основным
    пятнадцатым кеглем и спорила с самим числом.
*/
.stat .muted { margin-top: 4px; font-size: .68rem; line-height: 1.4; }

/* Шестнадцатеричные дампы не должны переноситься: перенесённый дамп нечитаем,
   и смещения перестают выстраиваться в столбец — а ради них его и открывают. */
pre.dump {
    font-family: var(--font-mono);
    font-size: .72rem;
    line-height: 1.35;
    margin: 4px 0 10px;
    padding: 10px 12px;
    background: var(--field);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-small);
    overflow-x: auto;
    white-space: pre;
}

a.primary-link { color: var(--accent); font-weight: 600; }