/* Компоненты интерфейса Mc.House (задача Э-1.7).
 *
 * Ни одного «сырого» значения: цвета, размеры текста, отступы, радиусы и тени
 * берутся переменными из tokens.css. Исключение одно и оно намеренное —
 * min-height: 44px у целей касания: 44 точки это правило доступности, а не
 * оформительский выбор, и тесты Э-1.4 и Э-1.7 проверяют его буквально.
 *
 * Вёрстка мобильная в первую очередь (Э-2): администратор точки работает
 * с телефона. Узкий экран описан в конце файла, в @media.
 */

/* ================================================================== */
/* 1. База                                                            */
/* ================================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--shrift);
    font-size: var(--razmer-osnovnoy);
    line-height: var(--mezhstrochnyy);
    color: var(--tekst);
    background: var(--fon-stranicy);
}

h1 {
    font-size: var(--razmer-zagolovok-ekrana);
    line-height: var(--mezhstrochnyy-zagolovok);
    font-weight: var(--ves-zhirnyy);
    margin: 0 0 var(--otstup-4);
}

h2 {
    font-size: var(--razmer-zagolovok-bloka);
    line-height: var(--mezhstrochnyy-zagolovok);
    font-weight: var(--ves-zhirnyy);
    margin: 0 0 var(--otstup-12);
}

h3 {
    font-size: var(--razmer-osnovnoy);
    font-weight: var(--ves-zhirnyy);
    margin: var(--otstup-16) 0 var(--otstup-8);
}

/* Флажки и переключатели браузер рисует сам, но цвет отметки задаём мы:
   иначе на экране появляется синий, которого нет в палитре. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--akcent);
    width: var(--otstup-16);
    height: var(--otstup-16);
    flex: none;
}

/* Собственная рамка набора переключателей: браузерная рамка fieldset выпадает
   из палитры и радиусов основы. */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Фокус виден всегда: с клавиатуры должно быть понятно, где ты находишься. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--akcent);
    outline-offset: 2px;
}

/* ================================================================== */
/* 2. Служебная страница каркаса (Э-1.1): проверка связи               */
/* ================================================================== */

.page {
    max-width: var(--shirina-kolonki-teksta);
    margin: 0 auto;
    padding: var(--otstup-24) var(--otstup-16) var(--otstup-48);
}

.subtitle {
    margin: 0 0 var(--otstup-24);
    color: var(--tekst-tihiy);
}

.status {
    background: var(--fon-karty);
    border: 1px solid var(--liniya);
    border-radius: var(--skruglenie);
    box-shadow: var(--ten-karty);
    padding: var(--otstup-16) var(--otstup-24);
}

.status h2 {
    margin: 0 0 var(--otstup-12);
}

.status ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.status li {
    padding: var(--otstup-8) 0;
    overflow-wrap: break-word;
}

.status li.ok {
    color: var(--uspeh);
}

.status li.fail {
    color: var(--oshibka);
}

.today {
    margin-top: var(--otstup-24);
    color: var(--tekst-tihiy);
}

/* ================================================================== */
/* 3. Компоненты эталона                                              */
/* ================================================================== */

/* --- 3.1 Кнопка: основная (одна на экран), второстепенная, опасная --- */

.knopka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--otstup-8);
    min-height: 44px;
    padding: var(--otstup-8) var(--otstup-16);
    border: 1px solid var(--liniya);
    border-radius: var(--skruglenie);
    background: var(--fon-karty);
    font: inherit;
    font-weight: var(--ves-zhirnyy);
    color: var(--tekst);
    text-decoration: none;
    cursor: pointer;
}

.knopka-osnovnaya {
    background: var(--akcent);
    border-color: var(--akcent);
    color: var(--akcent-tekst);
}

.knopka-vtorostepennaya {
    background: var(--fon-karty);
    color: var(--tekst);
}

.knopka-opasnaya {
    background: var(--fon-karty);
    border-color: var(--oshibka);
    color: var(--oshibka);
}

a.knopka:hover,
button.knopka:hover {
    border-color: var(--akcent);
}

.knopka[disabled] {
    cursor: not-allowed;
}

/* Кнопка макета: действие заработает на своём этапе, поэтому она приглушена
   и несёт номер этапа. Приглушение — цветом рамки и подписи, а не текста
   кнопки: название действия остаётся читаемым. */
.knopka-seraya[disabled] {
    background: var(--zalivka-tihaya);
    color: var(--tekst);
}

.stroka-deystviy {
    display: flex;
    flex-wrap: wrap;
    gap: var(--otstup-8);
    margin: var(--otstup-12) 0 0;
}

/* --- 3.2 Поле ввода: подпись сверху, подсказка снизу, ошибка с причиной --- */

.pole {
    display: flex;
    flex-direction: column;
    gap: var(--otstup-4);
    margin: 0 0 var(--otstup-16);
}

.pole-podpis {
    font-size: var(--razmer-podpis);
    font-weight: var(--ves-zhirnyy);
    color: var(--tekst-tihiy);
}

/* Значение поля, которое менять нельзя: своя роль в учётной записи (Э-2.3).
   Набрано как обычный текст — это значение, а не подпись и не подсказка. */
.pole-znachenie {
    margin: 0;
}

.pole-podskazka {
    font-size: var(--razmer-podpis);
    color: var(--tekst-tihiy);
    margin: 0;
}

.pole-vvod,
.pole-vybor,
.pole-tekst {
    font: inherit;
    font-size: var(--razmer-osnovnoy);
    display: block;
    width: 100%;
    min-height: 44px;
    padding: var(--otstup-8) var(--otstup-12);
    border: 1px solid var(--liniya);
    border-radius: var(--skruglenie);
    background: var(--fon-karty);
    color: var(--tekst);
}

.pole-tekst {
    line-height: var(--mezhstrochnyy);
    resize: vertical;
}

.pole-vvod::placeholder,
.pole-tekst::placeholder {
    color: var(--tekst-tihiy);
}

.pole-vvod:focus,
.pole-vybor:focus,
.pole-tekst:focus {
    border-color: var(--akcent);
}

/* Ошибка поля: рамка плюс текст причины — не один только цвет. */
.pole-s-oshibkoy .pole-vvod,
.pole-s-oshibkoy .pole-vybor,
.pole-s-oshibkoy .pole-tekst {
    border-color: var(--oshibka);
}

.pole-oshibka {
    display: flex;
    align-items: flex-start;
    gap: var(--otstup-8);
    font-size: var(--razmer-podpis);
    color: var(--oshibka);
    margin: 0;
}

/* Набор переключателей: та же рамка и радиус, что у поля. */
.nabor {
    border: 1px solid var(--liniya);
    border-radius: var(--skruglenie);
    padding: var(--otstup-12);
    margin: 0 0 var(--otstup-16);
}

.flazhok {
    display: flex;
    align-items: center;
    gap: var(--otstup-8);
    min-height: 44px;
    cursor: pointer;
}

/* --- 3.3 Карточка --- */

.kartochka {
    background: var(--fon-karty);
    border: 1px solid var(--liniya);
    border-radius: var(--skruglenie);
    box-shadow: var(--ten-karty);
    padding: var(--otstup-24);
}

.kartochka-shapka {
    display: flex;
    flex-wrap: wrap;
    gap: var(--otstup-12) var(--otstup-24);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--otstup-16);
}

.kartochka-shapka h1,
.kartochka-shapka h2 {
    margin: 0;
}

/* --- 3.4 Таблица: на телефоне строки становятся карточками --- */

.spisok {
    display: block;
}

.stroka-kriteriya,
.stroka-perekhoda,
.stroka-dolzhnosti {
    display: grid;
    gap: var(--otstup-8) var(--otstup-12);
    align-items: center;
    padding: var(--otstup-8);
    border-bottom: 1px solid var(--liniya);
    min-height: 44px;
}

.stroka-kriteriya {
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 2.4fr);
}

.stroka-perekhoda {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr);
}

.stroka-dolzhnosti {
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.6fr) minmax(0, 0.6fr) minmax(0, 0.9fr);
}

/* Строка вакансии собрана как карточка, а не как таблица: восемь колонок
   на ширине рабочей области сходились так, что заголовки налезали друг на
   друга, а слова рвались посреди («Пиццмей|кер»). */
.stroka-vakansii {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--otstup-8) var(--otstup-16);
    align-items: center;
    min-height: 44px;
    padding: var(--otstup-12) var(--otstup-8);
    border-bottom: 1px solid var(--liniya);
}

.vakansiya-glavnoe {
    display: flex;
    flex-direction: column;
    gap: var(--otstup-4);
    min-width: 0;
}

.vakansiya-verh {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--otstup-8) var(--otstup-12);
}

.vakansiya-otkliki,
.vakansiya-data {
    color: var(--tekst-tihiy);
    font-size: var(--razmer-podpis);
    white-space: nowrap;
}

.vakansiya-otkliki .fio {
    color: var(--tekst);
    font-size: var(--razmer-osnovnoy);
}

.zagolovki {
    font-size: var(--razmer-podpis);
    font-weight: var(--ves-zhirnyy);
    color: var(--tekst-tihiy);
}

.yacheyka {
    overflow-wrap: break-word;
}

/* --- 3.5 Значок статуса: цвет плюс буква или слово, никогда только цвет --- */

.znachok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--otstup-24);
    height: var(--otstup-24);
    border-radius: var(--skruglenie-krug);
    background: var(--tekst-tihiy);
    color: var(--akcent-tekst);
    font-size: var(--razmer-podpis);
    font-weight: var(--ves-zhirnyy);
}

.znachok-uspeh { background: var(--uspeh); }
.znachok-vnimanie { background: var(--vnimanie); }
.znachok-oshibka { background: var(--oshibka); }

/* Состояние критерия: значок с буквой плюс слово рядом (Р-6, Р-7). */
.sostoyanie {
    display: inline-flex;
    align-items: center;
    gap: var(--otstup-8);
}

/* --- 3.6 Плашка-уведомление: успех, внимание, ошибка --- */

.plashka {
    display: flex;
    align-items: flex-start;
    gap: var(--otstup-12);
    padding: var(--otstup-12) var(--otstup-16);
    border-radius: var(--skruglenie);
    background: var(--zalivka-tihaya);
    color: var(--tekst);
    margin: var(--otstup-12) 0 0;
}

.plashka-uspeh { background: var(--zalivka-uspeha); }
.plashka-vnimanie { background: var(--zalivka-vnimaniya); }
.plashka-oshibka { background: var(--zalivka-oshibki); }

.plashka-tekst {
    margin: 0;
}

/* --- 3.7 Окно подтверждения: вопрос называет объект --- */

.okno {
    max-width: var(--shirina-kolonki-teksta);
    background: var(--fon-karty);
    border: 1px solid var(--liniya);
    border-radius: var(--skruglenie);
    box-shadow: var(--ten-okna);
    padding: var(--otstup-24);
}

.okno-vopros {
    font-size: var(--razmer-zagolovok-bloka);
    line-height: var(--mezhstrochnyy-zagolovok);
    font-weight: var(--ves-zhirnyy);
    margin: 0 0 var(--otstup-8);
}

.okno-poyasnenie {
    margin: 0;
    color: var(--tekst-tihiy);
}

/* --- 3.8 Шапка и меню --- */

.shapka {
    background: var(--fon-karty);
    border-bottom: 1px solid var(--liniya);
}

.shapka-vnutri {
    max-width: var(--shirina-rabochey-oblasti);
    margin: 0 auto;
    padding: var(--otstup-8) var(--otstup-16);
    display: flex;
    flex-wrap: wrap;
    gap: var(--otstup-8) var(--otstup-16);
    align-items: center;
    justify-content: space-between;
}

.shapka-nazvanie {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--akcent);
    font-size: var(--razmer-zagolovok-bloka);
    font-weight: var(--ves-zhirnyy);
    text-decoration: none;
}

.shapka-sprava {
    display: flex;
    align-items: center;
    gap: var(--otstup-16);
}

.shapka-kto {
    color: var(--tekst-tihiy);
    font-size: var(--razmer-podpis);
}

.shapka-vyhod {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--tekst);
    text-decoration: underline;
}

/* Боковое меню слева на компьютере, лента вкладок на телефоне (см. @media). */
.menyu {
    display: flex;
    flex-direction: column;
    gap: var(--otstup-8);
}

.menyu-spisok {
    display: flex;
    flex-direction: column;
    gap: var(--otstup-8);
    list-style: none;
    margin: 0;
    padding: 0;
}

.menyu-punkt {
    display: flex;
    align-items: center;
    gap: var(--otstup-8);
    padding-left: var(--otstup-8);
    border-radius: var(--skruglenie);
}

.menyu-znachok {
    display: inline-flex;
    flex: none;
    color: var(--tekst-tihiy);
}

.menyu-ssylka {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--otstup-8);
    flex: 1;
    min-height: 44px;
    padding: var(--otstup-8);
    border-radius: var(--skruglenie);
    text-decoration: none;
    color: var(--tekst);
}

/* Подсветка при наведении — на пункте целиком и только на том, где человек
   сейчас не находится: у текущего раздела фон акцентный, и заменять его
   светлой заливкой значит оставить белую надпись на почти белом. */
.menyu-punkt:not(.menyu-punkt-tekuschiy):hover {
    background: var(--zalivka-akcenta-slabaya);
}

/* Текущий раздел — сплошная акцентная плашка с белым текстом, как выбранная
   таблетка и как вкладка на телефоне. Оранжевый текст по персиковой заливке
   давал контраст 3,98 при норме 4,5 — а это единственный элемент, который
   сообщает человеку, где он находится. Белое на акценте — 4,6. */
.menyu-punkt-tekuschiy {
    background: var(--akcent);
}

.menyu-punkt-tekuschiy .menyu-znachok,
.menyu-punkt-tekuschiy .menyu-ssylka {
    color: var(--akcent-tekst);
    font-weight: var(--ves-zhirnyy);
}

/* Раздел, которого ещё нет: приглушён и подписан номером этапа — заказчик
   видит полную карту системы и понимает, что появится дальше. */
.menyu-seryy {
    color: var(--tekst-tihiy);
    cursor: not-allowed;
}

.etap {
    font-size: var(--razmer-podpis);
    color: var(--tekst-tihiy);
    white-space: nowrap;
}

/* Переключатели «Все разделы» и «Фильтры» сделаны на скрытом флажке, а не на
   <details>: закрытый <details> браузер прячет так, что стилями это не
   отменить, и на широком экране меню исчезало бы вместе с картой системы. */
.tumbler {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.menyu-knopka {
    display: none;
}

.menyu-punkt-eschyo {
    display: none;
}

/* --- 3.9 Пустое состояние: объясняет, что делать --- */

.pusto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--otstup-8);
    padding: var(--otstup-32) var(--otstup-24);
    border: 1px dashed var(--liniya);
    border-radius: var(--skruglenie);
    background: var(--zalivka-akcenta-slabaya);
}

.pusto-zagolovok {
    font-size: var(--razmer-zagolovok-bloka);
    font-weight: var(--ves-zhirnyy);
    margin: 0;
}

.pusto-poyasnenie {
    margin: 0;
    color: var(--tekst-tihiy);
    max-width: var(--shirina-kolonki-teksta);
}

/* --- 3.10 Состояния экрана: загрузка, ошибка, нет прав --- */

.zagruzka {
    display: flex;
    flex-direction: column;
    gap: var(--otstup-8);
}

.zagruzka-poyasnenie {
    color: var(--tekst-tihiy);
    margin: 0;
}

/* Полоски-заглушки на месте будущих строк: человек видит, что данные едут,
   а не пустой белый экран. */
.zagruzka-stroka {
    display: block;
    height: var(--otstup-16);
    border-radius: var(--skruglenie);
    background: var(--zalivka-tihaya);
}

.zagruzka-stroka-korotkaya {
    width: 40%;
}

/* ================================================================== */
/* 4. Наши четыре компонента                                          */
/* ================================================================== */

/* --- 4.1 Фильтры-таблетки: Все / A / B / C / Не рассчитана --- */

.tabletki-gruppa {
    display: flex;
    flex-direction: column;
    gap: var(--otstup-8);
}

.tabletki {
    display: flex;
    flex-wrap: wrap;
    gap: var(--otstup-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tabletka {
    display: inline-flex;
    align-items: center;
    gap: var(--otstup-8);
    min-height: 44px;
    padding: var(--otstup-8) var(--otstup-16);
    border: 1px solid var(--liniya);
    border-radius: var(--skruglenie-krug);
    background: var(--fon-karty);
    color: var(--tekst);
    cursor: pointer;
}

/* Сам переключатель не показывается: его роль играет таблетка целиком. */
.tabletka input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tabletka:has(input:checked) {
    background: var(--akcent);
    border-color: var(--akcent);
    color: var(--akcent-tekst);
    font-weight: var(--ves-zhirnyy);
}

.tabletka:has(input:focus-visible) {
    outline: 2px solid var(--akcent);
    outline-offset: 2px;
}

/* --- 4.2 Значок оценки A / B / C --- */

.otsenka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--otstup-32);
    height: var(--otstup-32);
    border-radius: var(--skruglenie-krug);
    background: var(--tekst-tihiy);
    color: var(--akcent-tekst);
    font-weight: var(--ves-zhirnyy);
}

.otsenka-A { background: var(--uspeh); }
.otsenka-B { background: var(--vnimanie); }
.otsenka-C { background: var(--oshibka); }

.otsenka-bolshaya {
    width: var(--otstup-48);
    height: var(--otstup-48);
    font-size: var(--razmer-zagolovok-ekrana);
}

.otsenka-krupno {
    display: flex;
    align-items: center;
    gap: var(--otstup-12);
}

.otsenka-podpis {
    color: var(--tekst-tihiy);
}

/* --- 4.3 Ярлык состояния: этап кандидата, «своя / франшиза», «Открыта» --- */

.yarlyk {
    display: inline-flex;
    align-items: center;
    gap: var(--otstup-4);
    padding: var(--otstup-4) var(--otstup-12);
    border-radius: var(--skruglenie-krug);
    background: var(--zalivka-tihaya);
    color: var(--tekst);
    font-size: var(--razmer-podpis);
    white-space: nowrap;
}

.yarlyk-uspeh { background: var(--zalivka-uspeha); }
.yarlyk-vnimanie { background: var(--zalivka-vnimaniya); }
.yarlyk-oshibka { background: var(--zalivka-oshibki); }
.yarlyk-akcent { background: var(--zalivka-akcenta); }

/* --- 4.4 Полоса укомплектованности --- */

.ukomplektovannost {
    display: flex;
    flex-direction: column;
    gap: var(--otstup-4);
}

.ukomplektovannost-podpis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--otstup-8);
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--razmer-podpis);
    color: var(--tekst-tihiy);
}

.polosa {
    display: block;
    height: var(--otstup-8);
    border-radius: var(--skruglenie-krug);
    background: var(--zalivka-tihaya);
    overflow: hidden;
}

/* Ширина заполнения задаётся в разметке процентом: это данные точки, а не
   оформительское значение. Цвет уровня дублируется числом рядом с полосой. */
.polosa-zapolnenie {
    display: block;
    height: 100%;
    background: var(--uspeh);
}

.polosa-nekhvatka .polosa-zapolnenie {
    background: var(--vnimanie);
}

.polosa-silnaya-nekhvatka .polosa-zapolnenie {
    background: var(--oshibka);
}

/* ================================================================== */
/* 5. Экраны макета                                                   */
/* ================================================================== */

.plashka-maketa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--otstup-8);
    margin: 0;
    padding: var(--otstup-8) var(--otstup-16);
    background: var(--zalivka-vnimaniya);
    color: var(--tekst);
    text-align: center;
    font-size: var(--razmer-podpis);
}

.maket-telo {
    max-width: var(--shirina-rabochey-oblasti);
    margin: 0 auto;
    padding: var(--otstup-24) var(--otstup-16) var(--otstup-48);
    display: grid;
    grid-template-columns: var(--shirina-menyu) minmax(0, 1fr);
    gap: var(--otstup-24);
    align-items: start;
}

/* Колонка содержимого — не одна большая коробка, а стопка панелей на сером
   фоне: так видно, где кончается один блок и начинается другой. */
.maket-soderzhimoe {
    display: flex;
    flex-direction: column;
    gap: var(--otstup-16);
    min-width: 0;
}

.zagolovok-stroka {
    display: flex;
    flex-wrap: wrap;
    gap: var(--otstup-8) var(--otstup-16);
    align-items: center;
    justify-content: space-between;
}

.zagolovok-stroka h1 {
    margin: 0;
}

.schetchik,
.poyasnenie {
    color: var(--tekst-tihiy);
    font-size: var(--razmer-podpis);
}

.poyasnenie {
    margin: var(--otstup-4) 0;
}

.tusklo {
    color: var(--tekst-tihiy);
}

.nazad,
/* Звонок кандидату — рабочее действие администратора точки с телефона (Э-2):
   в ссылку нужно попадать пальцем, поэтому цель касания 44 на 44. */
.zvonok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--otstup-8);
    min-height: 44px;
    min-width: 44px;
    color: var(--tekst);
    font-weight: var(--ves-zhirnyy);
}

/* Звонок прямо из списка: администратор точки в перерыве открывает список и
   звонит, не заходя в карточку. На компьютере — кнопкой в конце строки,
   на телефоне — во всю ширину карточки (см. @media). */
.stroka-spiska {
    display: flex;
    align-items: stretch;
    gap: var(--otstup-8);
    border-bottom: 1px solid var(--liniya);
}

.stroka-spiska .stroka-kandidata {
    flex: 1;
    min-width: 0;
    border-bottom: 0;
}

.zvonok-v-stroke {
    flex: none;
    padding: var(--otstup-8) var(--otstup-12);
    border: 1px solid var(--liniya);
    border-radius: var(--skruglenie);
    background: var(--fon-karty);
    text-decoration: none;
    align-self: center;
    font-size: var(--razmer-podpis);
}

a.zvonok-v-stroke:hover {
    border-color: var(--akcent);
}

/* --- 5.1 Список кандидатов --- */

/* Панель над списком: главное — таблетки по оценке, остальное убрано глубже,
   чтобы список начинался как можно выше (Э-6: 70 откликов в день). */
.panel-spiska {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--otstup-12);
}

.panel-verh {
    display: flex;
    flex-wrap: wrap;
    gap: var(--otstup-12);
    align-items: flex-start;
    justify-content: space-between;
}

/* Выгрузка в Excel — второстепенное действие. На компьютере она стоит в правом
   верхнем углу панели; на телефоне лежит в конце панели, чтобы не занимать
   первый экран, ради которого администратор точки достал телефон. */
.panel-vygruzka {
    display: flex;
    order: 1;
}

/* На компьютере панель — две колонки: слева поиск и фильтры, справа сверху
   выгрузка. Так кнопка стоит в углу панели и при этом не наезжает на поле
   поиска: колонка поиска сама ужимается под оставшееся место. */
@media (min-width: 761px) {
    .panel-spiska {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .panel-verh,
    .tabletki-gruppa,
    .sortirovka,
    .filtry {
        grid-column: 1;
    }

    .panel-vygruzka {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
}

.poisk {
    flex: 1;
    min-width: 0;
    max-width: var(--shirina-kolonki-teksta);
}

.poisk .pole {
    margin: 0 0 var(--otstup-4);
}

.filtry-knopka {
    display: inline-flex;
    align-items: center;
    gap: var(--otstup-8);
    min-height: 44px;
    padding: var(--otstup-8) var(--otstup-16);
    border: 1px solid var(--liniya);
    border-radius: var(--skruglenie);
    background: var(--fon-karty);
    font-weight: var(--ves-zhirnyy);
    cursor: pointer;
}

#filtry-tumbler:not(:checked) ~ .filtry-spisok {
    display: none;
}

.filtry-spisok {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 var(--otstup-16);
    padding-top: var(--otstup-12);
    border-top: 1px solid var(--liniya);
}

.sortirovka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--otstup-8) var(--otstup-16);
}

.sortirovka-punkt {
    display: inline-flex;
    align-items: center;
    gap: var(--otstup-8);
    min-height: 44px;
    cursor: pointer;
}

.spisok-kandidatov {
    display: flex;
    flex-direction: column;
}

/* Строка кандидата в две строчки: сверху имя и оценка, снизу суть — должность,
   точка, канал. Строка несёт больше смысла, чем ячейка плотной таблицы. */
.stroka-kandidata {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--otstup-4) var(--otstup-12);
    align-items: center;
    min-height: 44px;
    padding: var(--otstup-12) var(--otstup-8);
    border-bottom: 1px solid var(--liniya);
    color: var(--tekst);
    text-decoration: none;
}

a.stroka-kandidata:hover {
    background: var(--zalivka-akcenta-slabaya);
}

.kandidat-glavnoe {
    display: flex;
    flex-direction: column;
    gap: var(--otstup-4);
    min-width: 0;
}

.stroka-sut {
    display: flex;
    flex-wrap: wrap;
    gap: var(--otstup-4) var(--otstup-8);
    font-size: var(--razmer-podpis);
    color: var(--tekst-tihiy);
}

/* Должность, точка и канал идут через точку-разделитель: три слова подряд
   без разделителя читаются как одно длинное. */
.stroka-sut > :nth-child(n+2)::before {
    content: "· ";
    color: var(--tekst-tihiy);
}

.kandidat-sprava {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--otstup-4);
    text-align: right;
}

.fio {
    font-weight: var(--ves-zhirnyy);
    overflow-wrap: break-word;
}

.konec-spiska {
    margin: var(--otstup-12) 0 0;
}

/* --- 5.2 Карточка кандидата --- */

.etap-kandidata {
    margin: var(--otstup-4) 0 0;
    color: var(--tekst-tihiy);
}

.pary {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: var(--otstup-8) var(--otstup-16);
    margin: 0;
}

.pary dt {
    color: var(--tekst-tihiy);
}

/* Между пояснением и списком пар нужен воздух: иначе объяснение слипается
   с первой строкой данных и читается как её подпись (Э-2.3). */
.poyasnenie + .pary {
    margin-top: var(--otstup-16);
}

.pary dd {
    margin: 0;
    overflow-wrap: break-word;
}

/* Строка телефона выше остальных из-за цели касания: подпись держится её середины. */
.pary .para-zvonka {
    align-self: center;
}

.pometka {
    display: inline-block;
    padding: var(--otstup-4) var(--otstup-12);
    border-radius: var(--skruglenie-krug);
    background: var(--zalivka-tihaya);
    font-size: var(--razmer-podpis);
}

.metka-nevyyasneno {
    display: inline-block;
    padding: var(--otstup-4) var(--otstup-12);
    border-radius: var(--skruglenie-krug);
    background: var(--zalivka-vnimaniya);
    color: var(--tekst);
    font-size: var(--razmer-podpis);
}

/* Переписка лентой: сторона видна и по подписи, и по стороне выравнивания. */
.perepiska {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--otstup-12);
}

.soobschenie {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--otstup-4);
    max-width: var(--shirina-kolonki-teksta);
    padding: var(--otstup-12);
    border: 1px solid var(--liniya);
    border-radius: var(--skruglenie);
    background: var(--fon-karty);
}

.soobschenie-kandidat {
    background: var(--zalivka-akcenta);
    border-color: var(--zalivka-akcenta);
    margin-left: auto;
}

.soobschenie-bot,
.soobschenie-sotrudnik {
    background: var(--zalivka-tihaya);
    border-color: var(--zalivka-tihaya);
}

.soobschenie-kto {
    font-weight: var(--ves-zhirnyy);
    font-size: var(--razmer-podpis);
}

.soobschenie-vremya {
    color: var(--tekst-tihiy);
    font-size: var(--razmer-podpis);
}

.napisat {
    margin-top: var(--otstup-16);
}

/* Панель действий стоит сразу под именем и оценкой — и на компьютере, и на
   телефоне главное действие видно без прокрутки. Всё остальное на карточке —
   справка, за которой человек идёт уже после решения. */
.deystviya-panel {
    display: flex;
    flex-direction: column;
    gap: var(--otstup-8);
    padding-top: var(--otstup-12);
    border-top: 1px solid var(--liniya);
}

/* --- 5.3 Экран точек: плитки --- */

.plitki-tochek {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--otstup-16);
}

.tochka-shapka {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--otstup-8) var(--otstup-12);
    margin-bottom: var(--otstup-12);
}

.tochka-shapka h2 {
    margin: 0;
}

.tochka-adres {
    color: var(--tekst-tihiy);
    font-size: var(--razmer-podpis);
}

.est-nekhvatka {
    background: var(--zalivka-akcenta-slabaya);
}

.ostalnye {
    margin-top: var(--otstup-12);
}

.ostalnye summary {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: var(--otstup-8);
    color: var(--tekst-tihiy);
    font-size: var(--razmer-podpis);
    list-style: none;
}

.ostalnye summary::before {
    content: "▸";
    color: var(--tekst-tihiy);
}

.ostalnye[open] summary::before {
    content: "▾";
}

/* --- 5.4 Вакансии и форма --- */

.forma {
    max-width: var(--shirina-kolonki-teksta);
}

/* --- 5.5 Вход --- */

.vhod {
    max-width: 480px;
    margin: var(--otstup-48) auto;
    padding: var(--otstup-16);
}

.vhod-znak {
    display: block;
    color: var(--akcent);
    font-size: var(--razmer-zagolovok-ekrana);
    font-weight: var(--ves-zhirnyy);
    line-height: var(--mezhstrochnyy-zagolovok);
    text-align: center;
    margin: 0;
}

.vhod-podzagolovok {
    text-align: center;
    color: var(--tekst-tihiy);
    font-size: var(--razmer-podpis);
    margin: var(--otstup-4) 0 var(--otstup-24);
}

.vhod-forma .knopka {
    width: 100%;
}

.oshibka-mesto {
    min-height: var(--otstup-24);
    margin: 0 0 var(--otstup-8);
}

.vybor-roli-spisok {
    list-style: none;
    margin: var(--otstup-12) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--otstup-8);
}

.vybor-roli-spisok .knopka {
    width: 100%;
}

/* --- 5.6 Учётные записи и выход из системы (Э-2.1) --- */

/* «Выйти» — кнопка формы, а не ссылка: выйти можно только осознанным нажатием,
   а не переходом по чужой ссылке. Выглядит она ровно так же, как выглядела
   ссылка в шапке. */
.forma-vyhoda {
    display: flex;
}

button.shapka-vyhod {
    border: 0;
    background: none;
    padding: 0;
    font-family: var(--shrift);
    font-size: var(--razmer-osnovnoy);
    cursor: pointer;
}

/* Списки с колонками занимают всю рабочую область, а не колонку текста:
   иначе колонки сжимаются и слова рвутся посреди («Руководит ель»). */
.stranica-shiroko {
    max-width: var(--shirina-rabochey-oblasti);
    margin: 0 auto;
    padding: var(--otstup-24) var(--otstup-16) var(--otstup-48);
}

/* Строка списка пользователей. На телефоне становится карточкой
   «подпись: значение» — правило в разделе 7. */
.stroka-polzovatelya {
    display: grid;
    grid-template-columns:
        minmax(0, 1.9fr) minmax(0, 1.35fr) minmax(0, 0.85fr)
        minmax(0, 1.2fr) minmax(0, 4.1fr);
    gap: var(--otstup-8) var(--otstup-12);
    align-items: center;
    padding: var(--otstup-8);
    border-bottom: 1px solid var(--liniya);
    min-height: 44px;
}

.deystviya-stroki {
    display: flex;
    flex-wrap: wrap;
    gap: var(--otstup-8);
}

/* Три действия в строке списка должны помещаться в одну линию, поэтому поля у
   кнопок здесь уже. Высота — прежние 44 точки: палец попадает так же. */
.deystviya-stroki .knopka {
    padding-left: var(--otstup-12);
    padding-right: var(--otstup-12);
}

/* Пароль показывается один раз, и его переписывают с экрана на бумагу:
   набран крупно и жирно, чтобы не ошибиться в знаке. */
.parol {
    font-size: var(--razmer-zagolovok-bloka);
    font-weight: var(--ves-zhirnyy);
}

/* Строка справочника — точки и должности (Э-2.2). Строка точки целиком
   ссылка: с телефона в неё попадают пальцем, не целясь в мелкое слово. */
.stroka-spravochnika {
    display: grid;
    gap: var(--otstup-8) var(--otstup-12);
    align-items: center;
    padding: var(--otstup-8);
    border-bottom: 1px solid var(--liniya);
    min-height: 44px;
    color: var(--tekst);
    text-decoration: none;
}

.stroka-tochki {
    grid-template-columns:
        minmax(0, 1.6fr) minmax(0, 2.4fr) minmax(0, 0.8fr) minmax(0, 1fr);
}

.stroka-dolzhnosti-spravochnik {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);
}

/* Тот же список без колонки действий: у HR и администратора точки должности
   только для просмотра (матрица 4.3), и пустая третья колонка растянула бы
   строку зря. */
.stroka-dolzhnosti-prosmotr {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

a.stroka-spravochnika:hover {
    background: var(--zalivka-akcenta);
}

/* Нормы точки: одно поле на должность. Должностей тринадцать, а в поле стоит
   одна цифра, поэтому поля идут плиткой, а не столбиком во всю ширину: иначе
   экран растягивается на две прокрутки даже на компьютере. */
.normy {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--otstup-12) var(--otstup-16);
    margin-bottom: var(--otstup-16);
}

/* ================================================================== */
/* 6. Экран-витрина /dizayn/                                          */
/* ================================================================== */

.vitrina {
    max-width: var(--shirina-rabochey-oblasti);
    margin: 0 auto;
    padding: var(--otstup-24) var(--otstup-16) var(--otstup-64);
    display: flex;
    flex-direction: column;
    gap: var(--otstup-24);
}

.vitrina-razdel {
    display: flex;
    flex-direction: column;
    gap: var(--otstup-12);
}

.vitrina-obraztsy {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--otstup-12);
}

.vitrina-stolbtsy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--otstup-16);
}

.vitrina-podpis {
    font-size: var(--razmer-podpis);
    color: var(--tekst-tihiy);
    margin: 0;
}

.vitrina-cvet {
    display: flex;
    align-items: center;
    gap: var(--otstup-12);
}

.vitrina-obrazets-cveta {
    display: block;
    width: var(--otstup-48);
    height: var(--otstup-48);
    border: 1px solid var(--liniya);
    border-radius: var(--skruglenie);
    flex: none;
}

.cvet-fon-stranicy { background: var(--fon-stranicy); }
.cvet-fon-karty { background: var(--fon-karty); }
.cvet-liniya { background: var(--liniya); }
.cvet-tekst { background: var(--tekst); }
.cvet-tekst-tihiy { background: var(--tekst-tihiy); }
.cvet-akcent { background: var(--akcent); }
.cvet-akcent-tekst { background: var(--akcent-tekst); }
.cvet-uspeh { background: var(--uspeh); }
.cvet-vnimanie { background: var(--vnimanie); }
.cvet-oshibka { background: var(--oshibka); }

/* Образцы четырёх размеров текста. */
.obrazets-teksta {
    margin: 0 0 var(--otstup-8);
    overflow-wrap: break-word;
}

.obrazets-zagolovok-ekrana {
    font-size: var(--razmer-zagolovok-ekrana);
    font-weight: var(--ves-zhirnyy);
    line-height: var(--mezhstrochnyy-zagolovok);
}

.obrazets-zagolovok-bloka {
    font-size: var(--razmer-zagolovok-bloka);
    font-weight: var(--ves-zhirnyy);
    line-height: var(--mezhstrochnyy-zagolovok);
}

.obrazets-osnovnoy {
    font-size: var(--razmer-osnovnoy);
}

.obrazets-podpis {
    font-size: var(--razmer-podpis);
    color: var(--tekst-tihiy);
}

.obraztsy-otstupov {
    align-items: flex-end;
    gap: var(--otstup-16);
}

/* Образцы шкалы отступов: столбик высотой в свой шаг с числом под ним. */
.obrazets-otstupa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--otstup-4);
}

.obrazets-otstupa::before {
    content: "";
    display: block;
    width: var(--otstup-24);
    background: var(--akcent);
    border-radius: var(--skruglenie);
}

.obrazets-otstupa-4::before { height: var(--otstup-4); }
.obrazets-otstupa-8::before { height: var(--otstup-8); }
.obrazets-otstupa-12::before { height: var(--otstup-12); }
.obrazets-otstupa-16::before { height: var(--otstup-16); }
.obrazets-otstupa-24::before { height: var(--otstup-24); }
.obrazets-otstupa-32::before { height: var(--otstup-32); }
.obrazets-otstupa-48::before { height: var(--otstup-48); }
.obrazets-otstupa-64::before { height: var(--otstup-64); }

/* Список на 1000 строк: показывается в окне с прокруткой, чтобы витрина
   осталась обозримой, но вёрстка проверялась на настоящем объёме. */
.vitrina-mnogo {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--liniya);
    border-radius: var(--skruglenie);
    padding: var(--otstup-8);
}

/* ================================================================== */
/* 7. Телефон (Э-2): меню становится лентой вкладок, строки — карточками */
/* ================================================================== */

@media (max-width: 760px) {
    .maket-telo {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--otstup-12);
        padding: var(--otstup-12) var(--otstup-12) var(--otstup-64);
    }

    /* Лента вкладок: рабочие разделы всегда на виду, прокручивается лента,
       а не страница. Разделы, которых ещё нет, прячутся за «Все разделы». */
    .menyu {
        flex-direction: row;
        align-items: center;
        gap: var(--otstup-8);
        margin: 0 calc(-1 * var(--otstup-12));
        padding: 0 var(--otstup-12);
    }

    .menyu-spisok {
        flex-direction: row;
        overflow-x: auto;
        gap: var(--otstup-8);
    }

    .menyu-punkt {
        flex: none;
        padding-left: 0;
        border: 1px solid var(--liniya);
        border-radius: var(--skruglenie-krug);
        background: var(--fon-karty);
    }

    /* Текущий раздел встаёт в начало ленты: иначе на узком экране он уезжает
       за правый край и человек не видит, где находится. */
    .menyu-punkt-tekuschiy {
        order: -1;
        background: var(--akcent);
        border-color: var(--akcent);
    }

    .menyu-znachok {
        padding-left: var(--otstup-12);
    }

    .menyu-ssylka {
        padding: var(--otstup-8) var(--otstup-16);
        white-space: nowrap;
    }

    .menyu-punkt-eschyo {
        display: flex;
        border: none;
        background: none;
        padding-left: 0;
    }

    .menyu-knopka {
        display: inline-flex;
        align-items: center;
        flex: none;
        min-height: 44px;
        padding: var(--otstup-8) var(--otstup-16);
        border: 1px solid var(--liniya);
        border-radius: var(--skruglenie-krug);
        background: var(--fon-karty);
        font-size: var(--razmer-podpis);
        cursor: pointer;
    }

    #menyu-tumbler:not(:checked) ~ .menyu-spisok .menyu-punkt-buduschiy {
        display: none;
    }

    .kartochka {
        padding: var(--otstup-16);
    }

    .zagolovki {
        display: none;
    }

    /* Настоящая таблица на телефоне становится карточками «подпись: значение».
       Строка кандидата сюда не входит: она с самого начала сделана карточкой
       с именем и сутью, подписи в ней только мешали бы. */
    .stroka-kriteriya,
    .stroka-perekhoda,
    .stroka-dolzhnosti {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--otstup-4);
        padding: var(--otstup-12);
        border: 1px solid var(--liniya);
        border-radius: var(--skruglenie);
        margin-bottom: var(--otstup-8);
    }

    .stroka-kriteriya .yacheyka::before,
    .stroka-perekhoda .yacheyka::before,
    .stroka-dolzhnosti .yacheyka::before {
        content: attr(data-podpis) ": ";
        color: var(--tekst-tihiy);
        font-size: var(--razmer-podpis);
    }

    /* Список пользователей на телефоне: строка становится карточкой, а кнопки
       действий встают под ней в столбик — по ним попадают пальцем. */
    .stroka-polzovatelya {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--otstup-4);
        padding: var(--otstup-12);
        border: 1px solid var(--liniya);
        border-radius: var(--skruglenie);
        margin-bottom: var(--otstup-8);
    }

    .stroka-polzovatelya .yacheyka::before {
        content: attr(data-podpis) ": ";
        color: var(--tekst-tihiy);
        font-size: var(--razmer-podpis);
    }

    /* Строка справочника точек и должностей — тоже карточка (Э-2.2). */
    .stroka-spravochnika {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--otstup-4);
        padding: var(--otstup-12);
        border: 1px solid var(--liniya);
        border-radius: var(--skruglenie);
        margin-bottom: var(--otstup-8);
    }

    /* Подпись ставится только там, где она задана: название точки и должности
       узнаётся без слова «Название», а лишняя строка на телефоне дорога. */
    .stroka-spravochnika .yacheyka[data-podpis]::before {
        content: attr(data-podpis) ": ";
        color: var(--tekst-tihiy);
        font-size: var(--razmer-podpis);
    }

    /* У кнопок подпись не нужна: они сами называют действие. */
    .stroka-polzovatelya .deystviya-stroki::before,
    .stroka-spravochnika .deystviya-stroki::before {
        content: none;
    }

    /* Действий в строке справочника два, и оба коротких: они встают рядом, а не
       двумя полосами во всю ширину — иначе список из тринадцати должностей
       растягивается на три экрана. */
    .stroka-spravochnika .deystviya-stroki .knopka {
        flex: 0 1 auto;
    }


    .stroka-polzovatelya .deystviya-stroki .knopka {
        flex: 1 1 100%;
    }

    .stroka-vakansii {
        grid-template-columns: minmax(0, 1fr);
        border: 1px solid var(--liniya);
        border-radius: var(--skruglenie);
        margin-bottom: var(--otstup-8);
    }

    /* Строка становится карточкой, а звонок — широкой кнопкой под ней: пальцем
       по такой попадают не глядя. Рамку карточки держит обёртка. */
    .stroka-spiska {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border: 1px solid var(--liniya);
        border-radius: var(--skruglenie);
        margin-bottom: var(--otstup-8);
    }

    .stroka-kandidata {
        grid-template-columns: auto minmax(0, 1fr);
        padding: var(--otstup-8);
    }

    .zvonok-v-stroke {
        align-self: stretch;
        border: 0;
        border-top: 1px solid var(--liniya);
        border-radius: 0 0 var(--skruglenie) var(--skruglenie);
    }

    /* Этап и дата уходят под имя: справа на 390 точках им места нет. Идут подряд
       слева, а не по краям: иначе у коротких ярлыков дата убегает вправо и
       список выглядит рваным. */
    .kandidat-sprava {
        grid-column: 2;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: var(--otstup-8);
        width: 100%;
        text-align: left;
    }

    .pary {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .pary dt {
        margin-top: var(--otstup-8);
        font-size: var(--razmer-podpis);
    }

    .filtry-spisok {
        grid-template-columns: minmax(0, 1fr);
    }

    .plitki-tochek {
        grid-template-columns: minmax(0, 1fr);
    }

    .panel-verh {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Первый экран телефона принадлежит списку, а не настройкам списка:
       администратор точки открывает его в перерыве, чтобы позвонить тому,
       кого ему передали (Э-2). Поэтому шапка встаёт в одну строку, подпись
       поля поиска уступает место подсказке внутри поля, а сортировка
       раскрывается вместе с фильтрами — сразу под их кнопкой. */
    .shapka-vnutri {
        flex-wrap: nowrap;
        gap: var(--otstup-8);
    }

    .shapka-kto {
        min-width: 0;
        font-size: var(--razmer-podpis);
    }

    .panel-spiska {
        gap: var(--otstup-8);
    }

    .poisk .pole-podpis {
        display: none;
    }

    /* Пояснение к поиску (находит и отказанных, и невышедших) на телефоне
       появляется, когда человек встал в поле: до этого место отдано списку. */
    .poisk .pole-podskazka {
        display: none;
    }

    .poisk:focus-within .pole-podskazka {
        display: block;
    }


    .filtry {
        order: 2;
    }

    .sortirovka {
        order: 3;
    }

    .panel-vygruzka {
        order: 4;
    }

    .panel-spiska:has(#filtry-tumbler:not(:checked)) .sortirovka {
        display: none;
    }

    .kartochka-shapka,
    .zagolovok-stroka {
        flex-direction: column;
        align-items: flex-start;
    }

    .soobschenie {
        max-width: 100%;
    }

    .vitrina {
        padding: var(--otstup-12) var(--otstup-12) var(--otstup-64);
    }
}