/* =========================================================================
   style.css — оформление дашборда основателя.

   ТРИ ПЛОСКОСТИ. Весь экран собран из трёх поверхностей, и больше никаких:

     1. ТЁМНЫЙ САЙДБАР  #1C1B19 — где я нахожусь;
     2. БЕЛЫЙ КОНТЕНТ   #FFFFFF — что показано;
     3. ОРАНЖЕВЫЙ       #E2600E — ровно две вещи: активный пункт сайдбара
        и главное число дашборда. Больше нигде. Ни кнопок, ни ссылок, ни
        подчёркиваний: как только оранжевым покрашено третье место, он
        перестаёт значить «здесь» и «главное».

   СОСТОЯНИЕ — не оранжевое и никогда не спорит с ним: критично #C43D2E,
   под угрозой #BA7517, в норме #3B6D11. Плюс форма: у каждого состояния
   своя точка, и без цвета строка читается так же.

   ДВА ВЕСА, 400 и 500. Файл шрифта переменный, но диапазон в @font-face
   обрезан до `400 500` — ничего тяжелее в этой вёрстке взять просто
   неоткуда, даже случайно.

   КОНТРАСТ. Всё, что мельче 16px, даёт не меньше 4,5 к своему фону.
   Три цвета задания этого не давали, и они затемнены — их прежние
   значения и новые расписаны в REDESIGN-2.md.

   Сначала телефон, потом всё остальное: Бакнур смотрит с телефона.
   Базовые правила написаны для узкого экрана, @media только расширяет.
   ========================================================================= */

/* --- Шрифт ---------------------------------------------------------------
   Inter, свой, из репозитория. Ни одного запроса наружу. Три подмножества:
   latin (STU-0102, IELTS, MIT), cyrillic и cyrillic-ext — казахские
   ә ғ қ ң ө ұ ү һ і живут в двух последних (ұ — в cyrillic, U+04B1).

   Файл один на оба веса: он переменный по оси wght. Диапазон объявлен
   `400 500` — это и есть техническая гарантия правила «два веса». */

@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 400 500;
    font-display: swap;
    src: url("/static/fonts/inter-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
                   U+FE2E-FE2F;
}
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 400 500;
    font-display: swap;
    src: url("/static/fonts/inter-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 400 500;
    font-display: swap;
    src: url("/static/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Цвет ---------------------------------------------------------------- */

:root {
    /* 1. Сайдбар */
    --side-bg:    #1C1B19;
    --side-sunk:  #26241F;  /* вложенный блок: список разговоров */
    --side-line:  #35332F;
    --side-ink:   #C9C7C2;  /* обычный пункт, 10,19 к фону сайдбара */
    --side-icon:  #8C8A85;  /* значок и тихая подпись, 4,99 к #1C1B19 */
    /* Тот же тихий цвет, но для текста НА вложенном блоке #26241F: там
       #8C8A85 даёт 4,49 — ровно на сотую мимо порога. */
    --side-icon-2: #96938E; /* 5,07 к #26241F */
    --side-bar:   #4A4741;  /* полоса прокрутки внутри сайдбара */

    /* 2. Оранжевый. Два места на весь дашборд, и оба перечислены в шапке
          файла. Текст на заливке тёмный, а не белый: белый даёт 3,55 при
          требовании 4,5, тёмный — 4,80. */
    --brand:      #E2600E;
    --brand-ink:  #1C1B19;

    /* 3. Контент */
    --panel:     #FFFFFF;  /* лист содержимого */
    --paper:     #F5F4F1;  /* страница вокруг листа */
    --line:      #E5E3DE;  /* обводка карточки */
    --calm:      #F7F6F3;  /* спокойная полоса, утопленные блоки */
    --warm:      #FFF8F3;  /* критичная карточка */
    --warm-line: #F5D5BC;

    --ink:   #1C1B19;  /* основной,        17,21 к белому */
    --ink-2: #5F5E5A;  /* второстепенный,   6,49 */
    --ink-3: #716F6B;  /* приглушённый,     5,01 (в задании #8C8A85 — 3,45) */

    /* 4. Состояния. У «под угрозой» два токена: заданный #BA7517 даёт на
          белом 3,72 — этого хватает числу в 28px, но не подписи в 12px.
          Мелкий текст берёт затемнённый близнец. */
    --bad:      #C43D2E;  --bad-bg:  #FBEDEB;
    --warn:     #BA7517;  --warn-bg: #FAF2E3;
    --warn-ink: #9D6313;
    --ok:       #3B6D11;  --ok-bg:   #EDF3E7;
    --none:     #716F6B;  --none-bg: #F1F0ED;

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

    --r:    10px;  /* карточка */
    --r-sm: 6px;   /* пункт сайдбара, чип, мелкое */
    --pad:  14px;  /* поле страницы на телефоне */
    --side: 172px; /* ширина сайдбара на большом экране */
}

/* Тёмная тема. Не отдельный язык, а тот же: сайдбар остаётся сайдбаром,
   белый лист становится тёмным листом, оранжевый — те же два места. */
@media (prefers-color-scheme: dark) {
    :root {
        --panel:     #1B1A17;
        --paper:     #131210;
        --line:      #302E2A;
        --calm:      #201E1B;
        --warm:      #2A1D14;
        --warm-line: #4B3423;

        --ink:   #EDEBE6;
        --ink-2: #ADAAA4;
        --ink-3: #97948E;

        --brand:     #F07C2B;
        --brand-ink: #1C1B19;

        --bad:      #EE8D80;  --bad-bg:  #33201C;
        --warn:     #D9A557;  --warn-bg: #2E2517;
        --warn-ink: #D9A557;
        --ok:       #8FBF63;  --ok-bg:   #1F2A18;
        --none:     #97948E;  --none-bg: #24221F;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    /* Ни одна страница не должна ехать вбок — ни на каком экране. */
    overflow-x: hidden;
}

body {
    font: 400 15px/1.5 var(--font);
    color: var(--ink);
    background: var(--paper);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

/* Ссылка не оранжевая: оранжевый занят. Отличается подчёркиванием. */
a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink-3); }

/* Правило «два веса» касается и разметки: <b> и <strong> в готовых текстах
   просят 700, а в этой вёрстке тяжелее 500 нет ничего. Файл шрифта такого
   начертания и не содержит — но пусть об этом говорит стиль, а не случай. */
b, strong, th { font-weight: 500; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 80;
    background: var(--brand); color: var(--brand-ink);
    padding: 10px 16px; font: 500 14px/1.2 var(--font); text-decoration: none;
}
.skip:focus { left: 0; }

/* --- Типографика ---------------------------------------------------------
   Заголовок страницы 20px/500 — это не лендинг. Сентенс-кейс везде, кроме
   короткой метки даты. Ничего тяжелее 500. */

h1 { font: 500 20px/1.25 var(--font); margin: 0; letter-spacing: -.01em; }
h2 { font: 500 15px/1.3 var(--font); margin: 0; }
h3 { font: 500 14px/1.3 var(--font); margin: 20px 0 8px; }

.muted { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 4px 0 0; }
.dim   { color: var(--ink-3); font-size: 12px; line-height: 1.45; }

/* Метка даты — единственное место с прописными на всём дашборде. */
.stamp {
    font: 500 11px/1.3 var(--font);
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-3); margin: 0;
}
/* Надзаголовок — сентенс-кейс: прописными набрана только дата. */
.eyebrow {
    font: 400 12px/1.3 var(--font); color: var(--ink-3); margin: 0 0 4px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* Подзаголовок раздела — сентенс-кейс, не прописные: это заголовок, а не
   метка. */
.sub {
    font: 500 13px/1.3 var(--font); color: var(--ink-2);
    margin: 18px 0 8px; letter-spacing: 0;
}

/* --- Значки --------------------------------------------------------------
   Свой набор из /static/icons.svg. Ни иконочного шрифта, ни CDN. Цвет
   берётся у текста, толщина линии одна на все. */

.ico {
    width: 15px; height: 15px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
}
.ico--18 { width: 18px; height: 18px; }

/* ==========================================================================
   САЙДБАР
   Тёмная полоса 172px. Сверху знак школы, ниже разделы, внизу тихое.
   На телефоне выезжает по кнопке поверх содержимого, с затемнением.
   ========================================================================== */

.side {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: min(78vw, 260px);
    background: var(--side-bg);
    display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .18s ease-out, visibility .18s;
}
.side.is-open { transform: none; visibility: visible; }

.side__head {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 12px 10px;
}

/* Знак школы: оранжевый квадрат 20×20, скругление 5px, и слово. */
.brand {
    display: inline-flex; align-items: center; gap: 8px;
    color: #FFFFFF; text-decoration: none;
    font: 500 14px/1.2 var(--font);
    min-width: 0;
}
.brand__mark {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px;
    background: var(--brand);
}
/* Хвост «· общая картина» в 172 точки не влезает и ничего не добавляет:
   человек и так знает, куда вошёл. */
.brand__tail { display: none; }

.side__close {
    margin-left: auto; background: none; border: 0; color: var(--side-icon);
    display: flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px; padding: 0; cursor: pointer;
}

.nav { display: flex; flex-direction: column; padding: 4px 8px 20px; gap: 1px; }

.nav__item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; min-height: 34px;
    color: var(--side-ink); text-decoration: none;
    font: 400 13px/1.3 var(--font);
    border-radius: var(--r-sm);
}
.nav__item .ico { color: var(--side-icon); }
.nav__item:hover { background: var(--side-sunk); color: #FFFFFF; }
.nav__item:hover .ico { color: var(--side-ink); }

/* Единственное оранжевое место сайдбара. Текст тёмный: см. --brand-ink. */
.nav__item.is-active {
    background: var(--brand); color: var(--brand-ink); font-weight: 500;
}
.nav__item.is-active .ico { color: var(--brand-ink); }
.nav__item.is-active:hover { background: var(--brand); color: var(--brand-ink); }

.nav__count { margin-left: auto; color: var(--side-icon); font-size: 12px; }
.nav__item.is-active .nav__count { color: var(--brand-ink); opacity: .75; }

/* Раскрытие — обычный <details>: работает и без сценариев. */
.nav__group { border-radius: var(--r-sm); }
.nav__summary { cursor: pointer; list-style: none; }
.nav__summary::-webkit-details-marker { display: none; }
.nav__chev {
    margin-left: auto; width: 13px; height: 13px;
    transform: rotate(90deg); transition: transform .15s ease-out;
}
.nav__group[open] > .nav__summary .nav__chev { transform: rotate(-90deg); }
.nav__summary .nav__count + .nav__chev { margin-left: 4px; }

.nav__sub { display: flex; flex-direction: column; padding: 2px 0 6px 8px; gap: 1px; }
.nav__link {
    display: block; padding: 6px 8px; min-height: 30px;
    color: var(--side-icon); text-decoration: none;
    font: 400 12px/1.35 var(--font);
    border-radius: var(--r-sm);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav__link:hover { background: var(--side-sunk); color: var(--side-ink); }
.nav__link.is-active { background: var(--side-sunk); color: #FFFFFF; }
.nav__owner { color: var(--side-icon); }
.nav__link.is-active .nav__owner { opacity: .7; }

.nav__rule { height: 1px; background: var(--side-line); margin: 10px 9px; }

/* --- Разговоры в сайдбаре -------------------------------------------------
   Раздел «Ассистент» раскрывается списком последних разговоров. Поля ввода
   здесь нет и не будет: спрашивают на странице ассистента, а сайдбар только
   переключает разговор. */

.talks-mini {
    max-height: 200px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--side-sunk); border-radius: var(--r-sm);
    padding: 4px; margin: 2px 0 6px 8px;
    display: flex; flex-direction: column; gap: 1px;
    /* Тонкая тёмная полоса прокрутки, в цвет сайдбара. */
    scrollbar-width: thin;
    scrollbar-color: var(--side-bar) transparent;
}
.talks-mini::-webkit-scrollbar { width: 6px; }
.talks-mini::-webkit-scrollbar-track { background: transparent; }
.talks-mini::-webkit-scrollbar-thumb {
    background: var(--side-bar); border-radius: 3px;
}

.talks-mini__new {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 8px; min-height: 30px; border-radius: var(--r-sm);
    color: var(--side-ink); text-decoration: none;
    font: 400 12px/1.3 var(--font);
}
.talks-mini__new:hover { background: var(--side-bg); color: #FFFFFF; }
.talks-mini__new .ico { width: 12px; height: 12px; color: var(--side-icon); }

.talks-mini__item {
    display: block; padding: 6px 8px; min-height: 30px; border-radius: var(--r-sm);
    color: var(--side-icon-2); text-decoration: none;
    font: 400 12px/1.35 var(--font);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.talks-mini__item:hover { background: var(--side-bg); color: var(--side-ink); }
.talks-mini__item.is-active { background: var(--side-bg); color: #FFFFFF; }
.talks-mini__empty {
    padding: 6px 8px; margin: 0; color: var(--side-icon-2);
    font: 400 12px/1.35 var(--font);
}

.scrim {
    position: fixed; inset: 0; z-index: 50; background: #14130F99;
    border: 0; padding: 0;
}
.scrim[hidden] { display: none; }

/* ==========================================================================
   ШАПКА ТЕЛЕФОНА
   Только кнопка разделов и знак школы. Кнопки «Спросить» здесь больше нет:
   ассистент — раздел сайдбара, а не элемент, висящий в пустой полосе.
   ========================================================================== */

.top {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: 6px var(--pad);
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 6px;
}

.burger {
    background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px; margin-left: -8px; flex: 0 0 auto;
}

.brand--top { color: var(--ink); }
.brand--top .brand__tail { display: none; }

/* ==========================================================================
   ПОЛОТНО
   ========================================================================== */

.page {
    background: var(--panel);
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
}

main { padding: 16px var(--pad) 0; max-width: 1040px; width: 100%; margin: 0 auto; flex: 1 1 auto; }

.toasts { padding: 12px var(--pad) 0; max-width: 1040px; margin: 0 auto; width: 100%; }
.toast {
    margin: 0 0 8px; padding: 9px 12px; border-radius: var(--r-sm);
    font-size: 13px; border: .5px solid;
}
.toast--ok  { background: var(--ok-bg);  color: var(--ok);  border-color: var(--ok-bg); }
.toast--err { background: var(--bad-bg); color: var(--bad); border-color: var(--warm-line); }

.foot {
    padding: 28px var(--pad) 26px; text-align: center;
    color: var(--ink-3); font-size: 11px;
}
.foot__note { margin: 20px 0 0; color: var(--ink-3); font-size: 11px; line-height: 1.5; }

/* Шапка обычной страницы. Вертикальной линии-акцента перед заголовком нет:
   приём из старых шаблонов, который ничего не сообщает. */
.head { margin-bottom: 16px; }
.head__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
    margin: 6px 0 0;
}
.back {
    display: inline-flex; align-items: center; gap: 5px;
    text-decoration: none; color: var(--ink-3); font-size: 12px;
}
.back:hover { color: var(--ink-2); }
.eyebrow .back { color: var(--ink-3); }

.card {
    background: var(--panel);
    border: .5px solid var(--line);
    border-radius: var(--r);
    padding: 14px;
    margin-bottom: 10px;
}
.card__head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding-bottom: 10px; border-bottom: .5px solid var(--line); margin-bottom: 12px;
}
.owner { color: var(--ink-3); font-size: 12px; }
.card__link { margin-left: auto; font-size: 12px; color: var(--ink-2); }

/* Утопленный блок: «данных пока нет», подсказки, пояснения. */
.empty {
    background: var(--calm); border-radius: var(--r-sm); padding: 11px 12px;
    color: var(--ink-2); margin: 8px 0; font-size: 13px; line-height: 1.5;
}
.empty strong { color: var(--ink); font-weight: 500; }
.missing { margin-top: 12px; }

/* ==========================================================================
   ДАШБОРД
   Шапка словами, сетка направлений в два столбца, спокойные — полосой.
   ========================================================================== */

.dash__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 16px;
}
.dash__title { min-width: 0; }
.dash__verdict {
    font: 500 20px/1.25 var(--font); margin: 5px 0 0; letter-spacing: -.01em;
    text-wrap: balance;
}
.dash__note { margin: 6px 0 0; color: var(--ink-3); font-size: 11px; line-height: 1.45; max-width: 52ch; }

/* Счёт справа — подпись к заголовку, а не главный элемент: 26px против
   28px у числа в карточке. Второе из двух оранжевых мест на дашборде. */
.dash__score {
    margin: 0; flex: 0 0 auto; display: flex; align-items: baseline; gap: 1px;
    line-height: 1;
}
.dash__score-now { font: 500 26px/1 var(--font); color: var(--brand); letter-spacing: -.02em; }
.dash__score-all { font: 400 15px/1 var(--font); color: var(--ink-3); }

/* --- Карточки направлений ------------------------------------------------ */

.dirs {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 9px;
}
.dirs__item { min-width: 0; }

.dir {
    display: flex; flex-direction: column; gap: 7px;
    padding: 12px; border-radius: var(--r);
    background: var(--panel); border: .5px solid var(--line);
    text-decoration: none; color: var(--ink);
    height: 100%;
}
.dir:hover { border-color: var(--ink-3); }
.dir--bad { background: var(--warm); border-color: var(--warm-line); }
.dir--bad:hover { border-color: var(--bad); }

.dir__name {
    display: flex; align-items: center; gap: 7px; margin: 0;
    font: 500 13px/1.3 var(--font); min-width: 0;
}
.dir__name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dir__value { display: flex; align-items: baseline; gap: 7px; margin: 0; min-width: 0; }
.dir__num { font: 500 28px/1 var(--font); letter-spacing: -.02em; }
.dir__cap { font-size: 12px; color: var(--ink-2); line-height: 1.3; min-width: 0; }

.dir--bad  .dir__num { color: var(--bad); }
.dir--warn .dir__num { color: var(--warn); }
.dir--ok   .dir__num { color: var(--ok); }
.dir--none .dir__num { color: var(--ink-3); font-size: 22px; }

/* Полоска: доля от общего, чтобы был виден масштаб, а не только цифра.
   Рисуется ТОЛЬКО когда у числа есть честный знаменатель из тех же
   данных — иначе полоски нет вовсе, а не «на глаз». */
/* Полоска стоит НАД строкой контекста, а не сразу под числом: прижатая к
   числу, она читается как подчёркивание подписи, а не как шкала. */
.dir__bar {
    height: 3px; border-radius: 2px; background: var(--line);
    overflow: hidden; margin: auto 0 4px;
}
.dir--bad .dir__bar { background: var(--warm-line); }
.dir__bar span { display: block; height: 100%; border-radius: 2px; background: var(--ink-3); }
.dir--bad  .dir__bar span { background: var(--bad); }
.dir--warn .dir__bar span { background: var(--warn); }
.dir--ok   .dir__bar span { background: var(--ok); }

.dir__foot {
    margin: auto 0 0; padding-top: 1px;
    font-size: 11px; line-height: 1.35; color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Спокойные направления ------------------------------------------------
   Одна полоса на строку, вдвое ниже карточки: у них нет новостей, и места
   они занимать не должны. */

.calm-list { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.calm-row {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: var(--r-sm);
    background: var(--calm); text-decoration: none; color: var(--ink);
    font-size: 12px; min-height: 36px;
}
.calm-row:hover { background: var(--none-bg); }
.calm-row__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calm-row__owner { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calm-row__state { margin-left: auto; color: var(--ink-3); flex: 0 0 auto; font-size: 11px; }

/* ==========================================================================
   СОСТОЯНИЕ: точка, слово, цвет. Читается и без цвета — форма разная.
   ========================================================================== */

.dot {
    flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
    background: var(--none); display: inline-block;
}
.dot--bad  { background: var(--bad); border-radius: 1px; }   /* квадрат */
.dot--warn { background: var(--warn); }
.dot--ok   { background: var(--ok); }
.dot--none { background: var(--none); opacity: .55; }

.state {
    display: inline-flex; align-items: center; gap: 6px;
    font: 400 12px/1.3 var(--font); white-space: nowrap; color: var(--ink-2);
}
.state::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--none); flex: 0 0 auto;
}
.state--bad  { color: var(--bad); }      .state--bad::before  { background: var(--bad); border-radius: 1px; }
.state--warn { color: var(--warn-ink); } .state--warn::before { background: var(--warn); }
.state--ok   { color: var(--ok); }       .state--ok::before   { background: var(--ok); }
.state--none { color: var(--ink-3); }    .state--none::before { background: var(--none); opacity: .55; }

.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 999px;
    font: 400 12px/1.6 var(--font); white-space: nowrap;
    background: var(--none-bg); color: var(--ink-2);
}
.chip::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto; opacity: .8;
}
.chip--done, .chip--ok, .chip--on_track, .chip--ahead {
    background: var(--ok-bg); color: var(--ok);
}
.chip--behind, .chip--at_risk, .chip--warn {
    background: var(--warn-bg); color: var(--warn-ink);
}
.chip--behind::before, .chip--at_risk::before, .chip--warn::before { border-radius: 50%; }
.chip--missed, .chip--failing, .chip--bad {
    background: var(--bad-bg); color: var(--bad);
}
.chip--missed::before, .chip--failing::before, .chip--bad::before { border-radius: 1px; }
/* «Пока ноль» и «нет данных» — это не «критично», это «показывать нечего». */
.chip--zero, .chip--no_data, .chip--unknown, .chip--none {
    background: var(--none-bg); color: var(--ink-2);
}
.chip--zero::before, .chip--no_data::before,
.chip--unknown::before, .chip--none::before { opacity: .5; }

/* ==========================================================================
   СТРАНИЦА НАПРАВЛЕНИЯ
   ========================================================================== */

.attention { list-style: none; padding: 0; margin: 4px 0 0; }
.attention__item {
    padding: 9px 12px; border-radius: var(--r-sm); margin-bottom: 5px;
    font-size: 13px; line-height: 1.45; background: var(--calm);
    color: var(--ink-2); overflow-wrap: anywhere;
    display: flex; gap: 9px; align-items: baseline;
}
.attention__item::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
    background: var(--none); position: relative; top: -1px;
}
.attention__item--bad {
    background: var(--warm); color: var(--ink);
}
.attention__item--bad::before { background: var(--bad); border-radius: 1px; }
.attention__item--warn { background: var(--warn-bg); color: var(--ink); }
.attention__item--warn::before { background: var(--warn); }

/* Плитки чисел: справка, а не главное. Ноль всегда тихий — зелёный ноль
   врёт, красный пугает попусту. */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile {
    background: var(--panel); border: .5px solid var(--line);
    border-radius: var(--r-sm); padding: 10px 12px;
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.tile__value { font: 500 22px/1.1 var(--font); letter-spacing: -.02em; }
.tile__label { font: 400 12px/1.3 var(--font); color: var(--ink-2); }
.tile__hint { font-size: 11px; line-height: 1.35; color: var(--ink-3); }
.tile--ok   .tile__value { color: var(--ok); }
.tile--warn .tile__value { color: var(--warn); }
.tile--bad  .tile__value { color: var(--bad); }
.tile--bad  { background: var(--warm); border-color: var(--warm-line); }
.tile--zero .tile__value { color: var(--ink-3); }

/* Светофор «учёба против спорта» — на карточке ученика. */
.light {
    display: flex; gap: 9px; align-items: flex-start;
    padding: 11px 12px; border-radius: var(--r-sm); margin-bottom: 10px;
    background: var(--calm); font-size: 13px;
}
.light strong { font-weight: 500; }
.light__dot { width: 8px; height: 8px; margin-top: 6px; flex: 0 0 auto; background: var(--none); border-radius: 50%; }
.light--green { background: var(--ok-bg); }   .light--green .light__dot { background: var(--ok); }
.light--yellow { background: var(--warn-bg); }
.light--yellow .light__dot { background: var(--warn); border-radius: 50%; }
.light--red { background: var(--warm); }      .light--red .light__dot { background: var(--bad); border-radius: 1px; }
.light--grey .light__dot { background: var(--none); opacity: .55; }
.light__why { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--ink-2); }

/* Пары «подпись — значение». */
.facts { display: grid; grid-template-columns: 1fr; gap: 0; margin: 8px 0 0; }
.facts > div {
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
    padding: 7px 0; border-bottom: .5px solid var(--line);
}
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--ink-3); font-size: 12px; flex: 0 0 auto; }
.facts dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }

/* --- Свёрнутый раздел ---------------------------------------------------- */

.fold { border-top: .5px solid var(--line); margin-top: 10px; }
.fold > summary {
    cursor: pointer; list-style: none; padding: 10px 2px;
    display: flex; align-items: center; gap: 8px; min-height: 40px;
    font: 500 13px/1.3 var(--font); color: var(--ink);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
    content: ""; margin-left: auto; width: 13px; height: 13px; flex: 0 0 auto;
    background: currentColor; opacity: .45;
    -webkit-mask: var(--chev) center / contain no-repeat;
            mask: var(--chev) center / contain no-repeat;
    transform: rotate(90deg); transition: transform .15s ease-out;
}
.fold[open] > summary::after { transform: rotate(-90deg); }
.fold > summary .dim { font-weight: 400; }
.fold__body { padding-bottom: 10px; }

/* Стрелка раскрытия — тот же контур, что в наборе значков, но как маска:
   в ::after нельзя вставить <use>. Data-URI, а не запрос наружу. */
:root {
    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5.5 7 6.5-7 6.5'/%3E%3C/svg%3E");
}

.fold--flat { border-top: 0; margin-top: 0; }
.fold--flat > summary { min-height: 36px; color: var(--ink-2); font-weight: 400; font-size: 12px; }

.fold--card {
    background: var(--panel); border: .5px solid var(--line);
    border-radius: var(--r); border-top: .5px solid var(--line);
    margin: 0 0 10px; padding: 0 14px;
}

/* ==========================================================================
   КНОПКИ И ПОЛЯ
   Кнопка не оранжевая: оранжевый занят активным пунктом и главным числом.
   Действие обозначено формой и обводкой, а не цветом.
   ========================================================================== */

button, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px; cursor: pointer;
    background: var(--ink); color: var(--panel); border: .5px solid var(--ink);
    font: 500 13px/1.2 var(--font); text-decoration: none;
    min-height: 38px;
}
button:hover, .btn:hover { opacity: .88; }

.btn--ghost, button.btn--ghost {
    background: var(--panel); color: var(--ink); border-color: var(--line);
}
.btn--ghost:hover, button.btn--ghost:hover { border-color: var(--ink-3); opacity: 1; }

.btn--quiet, button.btn--quiet {
    background: transparent; color: var(--ink-2); border-color: var(--line);
    font-weight: 400; font-size: 12px; min-height: 32px; padding: 5px 10px;
}
.btn--quiet:hover { color: var(--ink); border-color: var(--ink-3); opacity: 1; }

input, select, textarea {
    font-family: var(--font);
    color: var(--ink); background: var(--panel);
    border: .5px solid var(--line); border-radius: 8px;
    padding: 8px 10px; font-size: 16px;  /* 16px — иначе iOS увеличит страницу */
}
input:focus, select:focus, textarea:focus { border-color: var(--ink-3); }

.search { position: relative; display: flex; gap: 6px; margin-bottom: 10px; }
.search input { flex: 1 1 auto; min-width: 0; }
.search button { flex: 0 0 auto; }
.search--page { margin-bottom: 12px; }

.suggest {
    position: absolute; top: 100%; left: 0; right: 0; margin: 5px 0 0;
    padding: 0; list-style: none; background: var(--panel); color: var(--ink);
    border: .5px solid var(--line);
    border-radius: 8px; box-shadow: 0 10px 30px #1c1b1914; overflow: hidden; z-index: 40;
}
.suggest li a {
    display: block; padding: 9px 12px; text-decoration: none; color: var(--ink);
    border-bottom: .5px solid var(--line); font-size: 13px;
}
.suggest li:last-child a { border-bottom: 0; }
.suggest li a:hover, .suggest li a:focus { background: var(--calm); }
.suggest small { color: var(--ink-3); }

.filters {
    background: var(--panel); border: .5px solid var(--line); border-radius: var(--r);
    padding: 12px; margin-bottom: 10px;
    display: grid; grid-template-columns: 1fr; gap: 9px;
}
.filters label {
    display: flex; flex-direction: column; gap: 4px;
    font: 400 11px/1.3 var(--font); color: var(--ink-3);
}
.filters input, .filters select { max-width: 100%; }
.filters__buttons { display: flex; gap: 8px; align-items: end; }

.filters--fold { padding: 0; }
.filters--fold > summary {
    cursor: pointer; list-style: none; padding: 10px 12px; min-height: 40px;
    display: flex; align-items: center; gap: 8px;
    font: 500 13px/1.3 var(--font);
}
.filters--fold > summary::-webkit-details-marker { display: none; }
.filters--fold > summary::after {
    content: ""; margin-left: auto; width: 13px; height: 13px; flex: 0 0 auto;
    background: currentColor; opacity: .45;
    -webkit-mask: var(--chev) center / contain no-repeat;
            mask: var(--chev) center / contain no-repeat;
    transform: rotate(90deg);
}
.filters--fold[open] > summary::after { transform: rotate(-90deg); }
.filters--fold form {
    display: grid; grid-template-columns: 1fr; gap: 9px;
    padding: 12px 12px 12px; border-top: .5px solid var(--line);
}

.chips { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.chips li {
    display: flex; align-items: center; gap: 3px; background: var(--calm);
    border-radius: 999px; padding: 3px 4px 3px 10px;
    font-size: 12px; color: var(--ink-2);
}
.chips a { text-decoration: none; padding: 0 5px; color: var(--ink-3); }

.toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 9px; flex-wrap: wrap;
}
.count { margin: 0; color: var(--ink-3); font-size: 12px; }

.classes { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 0; margin: 0 0 12px; }
.classes a {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 5px 11px; border: .5px solid var(--line); border-radius: 999px;
    text-decoration: none; color: var(--ink-2); font-size: 13px;
    min-height: 32px; align-items: center;
}
.classes a:hover { border-color: var(--ink-3); color: var(--ink); }
.classes a.active { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.classes small { color: var(--ink-3); font-size: 11px; }
.classes a.active small { color: inherit; opacity: .7; }

.pager {
    display: flex; gap: 8px; align-items: center; justify-content: center;
    padding: 14px 0 4px; font-size: 13px; flex-wrap: wrap;
}
.pager a {
    text-decoration: none; border: .5px solid var(--line); border-radius: 8px;
    padding: 7px 14px; min-height: 36px; display: inline-flex; align-items: center;
    color: var(--ink-2);
}
.pager a:hover { border-color: var(--ink-3); color: var(--ink); }
.pager span { color: var(--ink-3); padding: 0 4px; }

.refresh { margin: 18px 0 0; }

/* ==========================================================================
   ТАБЛИЦЫ
   На широком экране это настоящая таблица. На телефоне строка становится
   карточкой: заголовок, два поля в строчку и «ещё» для остальных.
   ========================================================================== */

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th, .grid td { text-align: left; padding: 9px 10px; border-bottom: .5px solid var(--line); }
.grid th {
    color: var(--ink-3); font: 400 11px/1.3 var(--font);
    white-space: nowrap; background: var(--calm);
}
.grid thead th:first-child { border-top-left-radius: var(--r-sm); }
.grid thead th:last-child { border-top-right-radius: var(--r-sm); }
.grid th a { text-decoration: none; color: var(--ink-3); }
.grid th a.sorted { color: var(--ink); }
.grid td .dim { display: block; }
.grid tbody tr:hover { background: var(--calm); }
.grid tbody tr:last-child td { border-bottom: 0; }

.more__btn { display: none; }
.grid th.more, .grid td.more { display: none; }
.rows-more { display: none; margin: 10px 0 0; text-align: center; }

@media (max-width: 700px) {
    .grid, .grid thead, .grid tbody, .grid th, .grid td { display: block; }
    .grid thead { position: absolute; left: -9999px; }

    /* Строка — карточка из трёх ярусов. Порядок задаёт `order`, а не
       разметка: колонка с учеником в таблице может быть пятой, а в
       карточке она всегда сверху. */
    .grid tr {
        display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 2px;
        background: var(--panel); border: .5px solid var(--line); border-radius: var(--r-sm);
        padding: 9px 11px; margin-bottom: 5px;
    }
    .grid tbody tr:hover { background: var(--panel); }
    .grid td {
        border: 0; padding: 3px 0; display: flex; gap: 10px;
        justify-content: space-between; align-items: baseline;
        text-align: right; overflow-wrap: anywhere;
    }
    .grid td::before {
        content: attr(data-label);
        color: var(--ink-3); font-size: 11px; flex: 0 0 auto; text-align: left;
    }
    .scroll { overflow-x: visible; }

    .grid td.cell--title {
        order: 1; flex: 1 0 100%;
        display: block; text-align: left; font: 500 14px/1.35 var(--font);
        padding: 0;
    }
    .grid td.cell--title::before { content: none; }
    .grid td.cell--title a { text-decoration: none; }

    .grid td.cell--lead {
        order: 2; flex: 0 1 auto;
        display: block; text-align: left; padding: 0;
        font-size: 12px; color: var(--ink-2);
    }
    .grid td.cell--lead::before { content: none; }
    .grid td.cell--lead ~ td.cell--lead::before {
        content: "\00B7"; display: inline; color: var(--ink-3); margin: 0 .4em;
    }

    .js .grid td.cell--rest { display: none; }
    .js .grid tr.is-open td.cell--rest { order: 3; flex: 1 0 100%; display: flex; padding: 3px 0; }
    .js .more__btn {
        display: inline; padding: 0 3px; min-height: 0; min-width: 0;
        font: 400 12px/1.5 var(--font); background: none; border: 0;
        color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px;
    }
    .grid td.more { order: 2; flex: 0 0 auto; display: block; text-align: left; padding: 0; }
    .grid td.more::before {
        content: "\00B7"; display: inline; color: var(--ink-3); margin: 0 .4em; font-size: 12px;
    }
    .js .grid tr.is-open td.more { order: 4; flex: 1 0 100%; margin-top: 3px; }
    .js .grid tr.is-open td.more::before { content: none; }

    .js .grid--capped tbody tr:nth-child(n+21) { display: none; }
    .js .grid--capped.is-all tbody tr { display: flex; }
    .js .rows-more { display: block; }
    .js .rows-more.is-done { display: none; }
}

/* ==========================================================================
   УЧЕНИКИ
   ========================================================================== */

.people {
    list-style: none; padding: 0; margin: 0;
    background: var(--panel); border: .5px solid var(--line);
    border-radius: var(--r); overflow: hidden;
}
.people li + li { border-top: .5px solid var(--line); }
.people a {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    padding: 10px 14px; color: var(--ink); min-height: 42px;
}
.people a:hover { background: var(--calm); }
.people__name { font: 400 14px/1.35 var(--font); overflow-wrap: anywhere; }
.people__meta {
    color: var(--ink-3); font-size: 12px;
    margin-left: auto; flex: 0 0 auto; white-space: nowrap;
}

/* ==========================================================================
   АССИСТЕНТ
   Не виджет в углу, а страница: разговор занимает основную область, поле
   ввода закреплено внизу. Вопрос и ответ выровнены по-разному — это
   переписка, а не форма.
   ========================================================================== */

/* Страница ассистента занимает лист целиком: у разговора своя прокрутка,
   а поле ввода стоит внизу окна, а не внизу документа. */
.page--bare main { padding: 0; max-width: none; }

.talk {
    display: flex; flex-direction: column;
    /* Высота окна минус шапка телефона. На большом экране шапки нет —
       правило переопределено ниже. */
    height: calc(100dvh - 53px);
}
.talk__head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px var(--pad) 10px; border-bottom: .5px solid var(--line);
    flex: 0 0 auto;
}
.talk__title { margin: 0; font: 500 15px/1.3 var(--font); min-width: 0;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk__meta { margin-left: auto; color: var(--ink-3); font-size: 11px; flex: 0 0 auto; }

.talk__body {
    flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
    padding: 16px var(--pad) 8px;
    background: var(--paper);
}
.talk__inner { max-width: 720px; margin: 0 auto; }

/* Реплики. Вопрос прижат вправо и залит, ответ — слева и на белом листе. */
.turns { list-style: none; margin: 0; padding: 0; }
.turn { margin-bottom: 18px; }
.turn__ask {
    margin: 0 0 8px auto; max-width: 82%; width: fit-content;
    background: var(--ink); color: var(--panel);
    border-radius: 14px 14px 4px 14px; padding: 8px 12px;
    font-size: 14px; line-height: 1.45; overflow-wrap: anywhere;
}
.turn__answer {
    background: var(--panel); border: .5px solid var(--line);
    border-radius: 4px 14px 14px 14px; padding: 11px 13px;
    max-width: 94%; overflow-wrap: anywhere;
}
.turn__answer--unknown, .turn__answer--refused { border-color: var(--warn-bg); background: var(--warn-bg); }
.turn__answer--error, .turn__answer--limited,
.turn__answer--disabled { border-color: var(--warm-line); background: var(--warm); }
.turn__text { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.turn__source, .turn__at { margin: 6px 0 0; color: var(--ink-3); font-size: 11px; }
.turn__more { margin: 7px 0 0; font-size: 12px; color: var(--ink-2); }

.turn__table { width: 100%; border-collapse: collapse; margin-top: 9px; }
.turn__cell {
    display: block; padding: 6px 0; border-bottom: .5px solid var(--line);
    font-size: 13px; line-height: 1.4;
}
.turn__table tr:last-child .turn__cell { border-bottom: 0; }
.turn__cell .dim { display: block; }
.turn .chart-box { margin: 9px 0 0; }

.chart-box { margin: 10px 0; max-width: 100%; overflow: hidden; }
.chart-box .chart { display: block; width: 100%; height: auto; }

/* Пустой разговор: подсказки карточками, а не столбиком кнопок. */
.starter { max-width: 720px; margin: 0 auto; padding: 8px 0 0; }
.starter__title { margin: 0 0 4px; font: 500 17px/1.3 var(--font); }
.starter__note { margin: 0 0 16px; color: var(--ink-2); font-size: 13px; }
.hints {
    list-style: none; padding: 0; margin: 0 0 18px;
    display: grid; grid-template-columns: 1fr; gap: 8px;
}
.hints button, .hints .hint {
    display: block; width: 100%; text-align: left;
    background: var(--panel); color: var(--ink); border: .5px solid var(--line);
    border-radius: var(--r); padding: 11px 13px; min-height: 0;
    font: 400 13px/1.4 var(--font);
}
.hints button:hover, .hints .hint:hover { border-color: var(--ink-3); opacity: 1; }

/* Поле ввода закреплено внизу страницы: оно не уезжает вместе с прокруткой
   разговора. */
.talk__form {
    flex: 0 0 auto;
    padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    border-top: .5px solid var(--line); background: var(--panel);
}
.talk__form-inner { display: flex; gap: 8px; align-items: flex-end; max-width: 720px; margin: 0 auto; width: 100%; }
.talk__form textarea {
    flex: 1 1 auto; min-width: 0; resize: none; max-height: 40vh;
    line-height: 1.45; padding: 9px 12px; border-radius: 10px;
}
.talk__send {
    flex: 0 0 auto; width: 38px; height: 38px; padding: 0; min-height: 38px;
    border-radius: 10px;
}

/* Служебные разделы страницы ассистента: свёрнуты, под разговором. */
.talk__extra { max-width: 720px; margin: 20px auto 0; }

.skills {
    background: var(--panel); border: .5px solid var(--line);
    border-radius: var(--r-sm); padding: 0 12px; margin-bottom: 6px;
}
.skills summary {
    cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 7px;
    font: 500 13px/1.3 var(--font); padding: 9px 0; list-style: none;
}
.skills summary::-webkit-details-marker { display: none; }
.skills__list { list-style: none; padding: 0 0 10px; margin: 0; }
.skills__list li {
    display: flex; flex-direction: column; gap: 1px;
    padding: 7px 0; border-top: .5px solid var(--line); font-size: 12px;
}
.skills__title { font-size: 13px; }

/* Лента прошлых вопросов из всех разговоров сразу. */
.chatlog { list-style: none; padding: 0; margin: 0; }
.chatlog__item { margin-bottom: 14px; }
.chatlog__ask { margin: 0 0 5px; display: flex; justify-content: flex-end; }
.chatlog__ask button {
    background: var(--calm); color: var(--ink); border: 0;
    border-radius: 12px 12px 3px 12px; padding: 6px 10px; min-height: 0;
    font: 400 13px/1.4 var(--font); text-align: right; max-width: 85%;
}
.chatlog__answer {
    margin: 0; background: var(--panel); border: .5px solid var(--line);
    border-radius: 3px 12px 12px 12px; padding: 8px 11px;
    font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; max-width: 92%;
}
.chatlog__meta { margin: 4px 0 0; color: var(--ink-3); font-size: 11px; }

/* Полноразмерный ответ на /assistant/answer. */
.answer__asked {
    margin: 0 0 10px; padding-bottom: 10px; border-bottom: .5px solid var(--line);
    color: var(--ink-3); font-size: 12px;
}
.answer__asked b { color: var(--ink); font-weight: 400; }
.answer__text { margin: 0 0 10px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.answer__source { margin: 0 0 5px; color: var(--ink-3); font-size: 11px; }

/* Прошлые разговоры списком (запасной путь без сценариев). */
.talks { list-style: none; margin: 0; padding: 0; }
.talks li + li { border-top: .5px solid var(--line); }
.talks__item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    width: 100%; text-align: left; background: none; border: 0;
    padding: 10px 2px; min-height: 40px; color: var(--ink);
}
.talks__item:hover { background: var(--calm); opacity: 1; }
.talks__title { font-size: 13px; overflow-wrap: anywhere; }
.talks__meta { color: var(--ink-3); font-size: 11px; }

/* ==========================================================================
   ВХОД И СЛУЖЕБНЫЕ СТРАНИЦЫ
   ========================================================================== */

.auth {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh; padding: 20px;
    background: var(--paper);
}
.auth__card {
    width: 100%; max-width: 340px;
    background: var(--panel); border: .5px solid var(--line);
    border-radius: 14px; padding: 26px 24px 24px;
}
.auth__mark {
    width: 20px; height: 20px; border-radius: 5px; background: var(--brand);
    display: block; margin-bottom: 16px;
}
.auth__card h1 { font-size: 19px; margin: 6px 0 0; }
.auth__card form { display: flex; flex-direction: column; gap: 5px; margin-top: 20px; }
.auth__card label { font: 400 11px/1.3 var(--font); color: var(--ink-3); }
.auth__card input { width: 100%; }
.auth__card button { margin-top: 12px; width: 100%; }
.auth__err { color: var(--bad); font-size: 12px; margin: 5px 0 0; }

/* ==========================================================================
   ЭКРАН ПОШИРЕ
   ========================================================================== */

@media (min-width: 700px) {
    :root { --pad: 20px; }

    .dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Нечётная последняя карточка тянется на оба столбца: дыра в половину
       сетки — это и есть «пустой правый угол», на который жаловались. */
    .dirs__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
    /* На большом экране карточка дышит: на телефоне высота — дефицит,
       на компьютере — наоборот, лишнее пустое место внизу. */
    .dir { padding: 14px; min-height: 112px; }

    .tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .filters { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
    .filters--fold form { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
    .search--page { max-width: 480px; }
    .hints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash__verdict { font-size: 22px; }
}

/* --- Большой экран: сайдбар стоит всегда --------------------------------- */

@media (min-width: 1000px) {
    body { display: flex; align-items: flex-start; background: var(--side-bg); }

    .side {
        position: sticky; inset: auto; top: 0;
        flex: 0 0 var(--side); width: var(--side);
        height: 100vh; height: 100dvh;
        transform: none; visibility: visible; transition: none;
    }
    .side__close, .burger, .brand--top, .scrim { display: none !important; }

    /* Шапки на большом экране нет вовсе: в ней не осталось ничего, кроме
       кнопки разделов и знака школы, а оба стоят в сайдбаре. Пустая белая
       полоса сверху — ровно то, на что жаловались. */
    .top { display: none; }

    .page { flex: 1 1 auto; min-width: 0; }
    main { padding-top: 28px; }
    .dash__head { margin-bottom: 20px; }
    .dirs { gap: 10px; }
    .dir { min-height: 126px; }

    .talk { height: 100dvh; }
    .foot { padding: 34px var(--pad) 30px; }
}

/* Очень широкий экран. Строка текста не должна тянуться от края до края,
   поэтому лист содержимого упирается в свою ширину, а по краям видно
   страницу вокруг — тот самый #F5F4F1. */
@media (min-width: 1500px) {
    .page { background: var(--paper); align-items: center; }
    .page > main, .page > .toasts, .page > .top {
        background: var(--panel);
        max-width: 1180px;
    }
    .page > main { border-inline: .5px solid var(--line); padding-inline: 40px; }
    .page > .foot { max-width: 1180px; margin: 0 auto; width: 100%; }
    /* Разговор ассистента занимает лист целиком: у него своя прокрутка. */
    .page--bare > main { padding: 0; }
}