/* =========================================================================
   Личный кабинет клиента. Дизайн-закон v3 «Мастерская».

   Ведущий предмет кабинета — монитор на шарнире: экран с данными. Отсюда
   тёмная по умолчанию, моноширинные цифры, холодный свет на панелях данных
   и лайм ровно одной вещью на экран — главной кнопкой.

   Ни одного своего цвета: всё из masterskaya.css. Появился новый — значит,
   его место в законе, а не здесь.
   ========================================================================= */

body{
  margin:0;
  background:var(--fon);
  color:var(--tekst);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Раскладка: слева меню, справа работа ---------- */

.kab-setka{
  display:grid;
  grid-template-columns:266px minmax(0,1fr);
  min-height:100vh;
}
@media (max-width:900px){
  .kab-setka{grid-template-columns:1fr}
}

.kab-bok{
  position:sticky; top:0; align-self:start;
  height:100vh; overflow-y:auto;
  background:var(--fon2);
  border-right:1px solid var(--liniya);
  padding:18px 14px 24px;
  display:flex; flex-direction:column; gap:18px;
}
@media (max-width:900px){
  .kab-bok{
    position:fixed; inset:0 auto 0 0; z-index:50; width:min(86vw,320px);
    transform:translateX(-102%); transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.35);
  }
  .kab-bok[data-otkryto="da"]{transform:none}
}

.kab-imya{
  display:flex; align-items:center; min-height:var(--zona);
  font-weight:600; font-size:16px; letter-spacing:-.01em;
  color:var(--tekst); text-decoration:none;
}
/* В боковом меню имя и номер идут в две строки: в одну они слипались
   в «Психологический кабинетK00001». */
.kab-bok .kab-imya{flex-direction:column; align-items:flex-start; gap:2px; line-height:1.25}
.kab-imya span{display:block; font-weight:400; font-size:13px; color:var(--tush); font-family:var(--mono)}

.kab-punkty{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.kab-punkt{
  display:block; padding:10px 12px; min-height:var(--zona);
  border-radius:var(--r); color:var(--tekst); text-decoration:none;
  transition:background .18s;
}
.kab-punkt:hover{background:var(--stal-fon)}
.kab-punkt[aria-current="page"]{background:var(--fon3); box-shadow:inset 2px 0 0 var(--laym)}
.kab-punkt small{display:block; font-size:12.5px; color:var(--tush); line-height:1.35; margin-top:2px}
.kab-punkt em{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--tush)}

.kab-bok-niz{margin-top:auto; display:flex; flex-direction:column; gap:12px}
.kab-bok-niz a{color:var(--tush); text-decoration:none; font-size:14px; min-height:36px; display:inline-flex; align-items:center}
.kab-bok-niz a:hover{color:var(--tekst)}

/* Шапка только на узком экране: три полоски и название */
.kab-verh{
  display:none; position:sticky; top:0; z-index:40;
  height:var(--shapka); align-items:center; gap:12px;
  padding-inline:16px; background:var(--fon); border-bottom:1px solid var(--liniya);
}
@media (max-width:900px){.kab-verh{display:flex}}
.kab-poloski{
  width:var(--zona); height:var(--zona); display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--liniya2); border-radius:var(--r); cursor:pointer;
}
.kab-poloski span{position:relative; display:block; width:18px; height:2px; background:var(--tekst)}
.kab-poloski span::before,.kab-poloski span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--tekst)}
.kab-poloski span::before{top:-6px} .kab-poloski span::after{top:6px}
.kab-zaslonka{
  position:fixed; inset:0; z-index:45; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.kab-zaslonka[data-vidno="da"]{opacity:1; pointer-events:auto}

.kab-rabota{padding:clamp(20px,3vw,40px) var(--pole) 80px; max-width:1180px}

/* ---------- Типографика ---------- */

h1{font-size:clamp(26px,3vw,38px); line-height:1.12; font-weight:600; letter-spacing:-.02em; margin:0 0 10px}
h2{font-size:clamp(19px,2vw,23px); line-height:1.2; font-weight:600; margin:34px 0 14px}
h3{font-size:17px; font-weight:600; margin:0 0 6px}
.kab-lid{color:var(--tush); font-size:17px; max-width:66ch; margin:0 0 26px}
.mono{font-family:var(--mono)}
.tiho{color:var(--tush); font-size:14px}
.kab-melko{color:var(--tush); font-size:14px; line-height:1.45}
.kab-metka{font-family:var(--mono); font-size:12px; color:var(--tush); letter-spacing:.02em}
a{color:var(--tekst); text-underline-offset:3px; text-decoration-color:var(--liniya2)}
a:hover{text-decoration-color:var(--tekst)}
.kab-uzko{max-width:72ch}

/* ---------- Панели ---------- */

.kab-panel{background:var(--fon2); border:1px solid var(--liniya); border-radius:var(--r); padding:18px}
.kab-panel + .kab-panel{margin-top:12px}

/* Экран: всё, что показывает измеренное */
.kab-ekran{
  background:var(--ekran); color:var(--na-ekrane);
  border:1px solid var(--ekran-ramka); border-radius:var(--r);
  padding:18px 20px; position:relative; overflow:hidden;
}
.kab-ekran::after{
  content:""; position:absolute; inset:-40% -10% auto; height:70%;
  background:radial-gradient(ellipse at 30% 0%, var(--ekran-svet), transparent 70%);
  pointer-events:none;
}
.kab-ekran .kab-metka,.kab-ekran .kab-melko{color:var(--ekran-tush)}

/* ---------- Хронология ---------- */

.kab-god{border-top:1px solid var(--liniya); margin-top:18px}
.kab-god > summary{
  list-style:none; cursor:pointer; padding:14px 2px;
  display:flex; align-items:baseline; gap:14px; min-height:var(--zona);
}
.kab-god > summary::-webkit-details-marker{display:none}
.kab-god-chislo{font-family:var(--mono); font-size:26px; font-weight:500}
.kab-god[open] .kab-god-chislo{color:var(--tekst)}
.kab-god > summary .tiho{margin-left:auto}

.kab-mesyats{margin:0 0 4px 0; padding-left:18px; border-left:1px solid var(--liniya)}
.kab-mesyats > summary{
  list-style:none; cursor:pointer; padding:9px 2px; min-height:40px;
  display:flex; align-items:baseline; gap:12px; color:var(--tush);
}
.kab-mesyats > summary::-webkit-details-marker{display:none}
.kab-mesyats[open] > summary{color:var(--tekst)}
.kab-mesyats > summary strong{font-weight:600; font-size:16px}

.kab-vetka{padding-left:18px; border-left:1px solid var(--liniya); display:flex; flex-direction:column; gap:10px; padding-bottom:14px}

.kab-sobytie{position:relative; background:var(--fon2); border:1px solid var(--liniya); border-radius:var(--r)}
.kab-sobytie::before{
  content:""; position:absolute; left:-23px; top:20px; width:9px; height:9px; border-radius:50%;
  background:var(--stal); border:2px solid var(--fon);
}
.kab-sobytie--vstrecha::before{background:var(--laym)}
.kab-sobytie--nezavershyon::before{background:var(--oshibka)}
.kab-sobytie > summary,.kab-sobytie-shapka{
  list-style:none; cursor:pointer; padding:13px 16px; display:flex; flex-wrap:wrap;
  align-items:baseline; gap:10px; min-height:var(--zona);
}
.kab-sobytie > summary::-webkit-details-marker{display:none}
.kab-sobytie-data{font-family:var(--mono); font-size:12.5px; color:var(--tush); min-width:58px}
.kab-sobytie-imya{font-weight:600}
.kab-sobytie-hvost{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.kab-vnutri{padding:0 16px 16px 16px; border-top:1px solid var(--liniya); padding-top:14px; display:flex; flex-direction:column; gap:12px}
.kab-vnutri h4{margin:0 0 6px; font-size:14px; font-weight:600; color:var(--tush); font-family:var(--mono); letter-spacing:.02em}

/* Метки состояния */
.kab-shashka{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
  font-family:var(--mono); font-size:11.5px; border:1px solid var(--liniya2); color:var(--tush);
  text-decoration:none; min-height:26px;
}
a.kab-shashka:hover{border-color:var(--tekst); color:var(--tekst)}
.kab-shashka--naznachen{border-color:var(--sinij); color:var(--sinij)}
[data-tema="noch"] .kab-shashka--naznachen{border-color:var(--stal); color:var(--stal)}
.kab-shashka--sam{border-color:var(--ok); color:var(--ok)}
.kab-shashka--nezavershyon{border-color:var(--oshibka); color:var(--oshibka)}
.kab-shashka--novoe{border-color:var(--laym); color:var(--tekst); background:color-mix(in srgb, var(--laym) 16%, transparent)}

/* ---------- Списки разделов ---------- */

.kab-spisok{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.kab-strochka{
  background:var(--fon2); border:1px solid var(--liniya); border-radius:var(--r);
  padding:14px 16px; display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start;
}
.kab-strochka-telo{flex:1 1 280px; min-width:0}
/* Выданный лично опросник (список «Опросники») — зелёная рамка, 28.09.2026. */
.kab-strochka--vydal{border-color:var(--ok); box-shadow:inset 3px 0 0 var(--ok)}
.kab-shashka--vydal{border-color:var(--ok); color:var(--ok)}
.kab-strochka h3 a{text-decoration:none}
.kab-strochka h3 a:hover{text-decoration:underline}

/* Фильтры */
.kab-filtry{display:flex; flex-wrap:wrap; gap:18px; margin:0 0 20px; padding:12px 0; border-block:1px solid var(--liniya)}
.kab-filtr{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.kab-filtr-imya{font-family:var(--mono); font-size:11.5px; color:var(--tush); margin-right:2px}
.kab-filtr a{
  display:inline-flex; align-items:center; min-height:32px; padding:4px 11px; border-radius:999px;
  font-size:13.5px; text-decoration:none; color:var(--tush); border:1px solid transparent;
}
.kab-filtr a:hover{color:var(--tekst); border-color:var(--liniya)}
.kab-filtr a[aria-current="true"]{color:var(--tekst); border-color:var(--liniya2); background:var(--stal-fon)}

/* ---------- Графики ---------- */

.kab-grafik{margin-bottom:22px}
.kab-grafik svg{width:100%; height:auto; display:block}
.kab-liniya{fill:none; stroke:var(--laym); stroke-width:2}
.kab-tochka{fill:var(--ekran); stroke:var(--laym); stroke-width:2}
.kab-setka-linii{stroke:var(--ekran-ramka); stroke-width:1}
.kab-podpis-osi{fill:var(--ekran-tush); font-family:var(--mono); font-size:11px}
.kab-znachenie{fill:var(--na-ekrane); font-family:var(--mono); font-size:11px}

/* ---------- Прохождение ---------- */

.kab-hod{position:sticky; top:0; z-index:30; background:var(--fon); border-bottom:1px solid var(--liniya); padding:10px 0; margin-bottom:26px}
/* На телефоне сверху уже липнет шапка с тремя полосками (.kab-verh): ход
   прохождения встаёт под неё, а не уезжает за неё при прокрутке. */
@media (max-width:900px){.kab-hod{top:var(--shapka)}}
.kab-hod-ryad{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.kab-hod-schyot{font-family:var(--mono); font-size:12px; color:var(--tush)}
.kab-polosa{flex:1 1 160px; height:3px; background:var(--stal-fon)}
.kab-polosa i{display:block; height:100%; background:var(--laym)}

.kab-vopros{font-size:clamp(20px,2.4vw,27px); font-weight:600; line-height:1.2; margin:0 0 22px}
.kab-pary{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:700px){.kab-pary{grid-template-columns:1fr 1fr; gap:16px}}
.kab-para{
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  min-height:150px; padding:22px; text-align:start; cursor:pointer;
  background:var(--fon2); color:var(--tekst);
  border:1px solid var(--liniya); border-radius:var(--r);
  font-family:var(--sans); font-size:18px; line-height:1.4;
  transition:border-color .16s, background .16s;
}
.kab-para:hover{border-color:var(--laym); background:var(--fon3)}
.kab-para-nazvanie{font-weight:600}
.kab-para-poyasnenie{color:var(--tush); font-size:14px; line-height:1.4}
.kab-para-klavisha{font-family:var(--mono); font-size:11px; color:var(--tush)}

/* «?» в углу карточки — пояснение к ценности (Илья 25.09.2026: текстом на
   карточке «шумно»). Отдельная кнопка поверх угла, не внутри карточки:
   нажатие на неё не выбор. Зона нажатия — 44 точки, как у всех кнопок. */
.kab-para-mesto{position:relative; display:grid}
.kab-para--s-voprosom{padding-right:64px}
.kab-para-vopros{
  position:absolute; top:10px; right:10px;
  width:var(--zona); height:var(--zona); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--tush); cursor:pointer;
  border:1px solid var(--liniya2); font-family:var(--mono); font-size:15px;
}
.kab-para-vopros:hover,
.kab-para-vopros:focus-visible{color:var(--tekst); border-color:var(--tekst)}
/* В итоговом списке — тот же «?», поменьше, в строку с названием; зона
   нажатия добирается прозрачными полями вокруг. */
.kab-rang-vopros{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  width:26px; height:26px; margin:-9px 0 -9px 6px; padding:0; border-radius:50%;
  background:transparent; color:var(--tush); cursor:pointer;
  border:1px solid var(--liniya2); font-family:var(--mono); font-size:12.5px;
  position:relative;
}
.kab-rang-vopros::before{content:""; position:absolute; inset:-9px}
.kab-rang-vopros:hover,
.kab-rang-vopros:focus-visible{color:var(--tekst); border-color:var(--tekst)}
.kab-iz-chego--svetlo{color:var(--tush)}

.kab-vybor{display:grid; gap:18px}
@media (min-width:900px){.kab-vybor{grid-template-columns:2fr 1fr}}
.kab-ostalos{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; list-style:none; margin:0; padding:0}
.kab-tsennost{
  width:100%; min-height:var(--zona); padding:14px 16px; text-align:start; cursor:grab;
  background:var(--fon2); color:var(--tekst); border:1px solid var(--liniya); border-radius:var(--r);
  font-family:var(--sans); font-size:15.5px; line-height:1.35; transition:border-color .16s, background .16s;
}
.kab-tsennost:hover{border-color:var(--laym); background:var(--fon3)}
.kab-tsennost--tashchat{opacity:.4}
.kab-tsennost-poyasnenie{display:block; color:var(--tush); font-size:13px; margin-top:3px}
.kab-korzinka{background:var(--fon2); border:1px dashed var(--liniya2); border-radius:var(--r); padding:16px}
.kab-korzinka--zhdyot{border-color:var(--laym)}
.kab-korzinka ol{margin:10px 0 0; padding-inline-start:20px}
.kab-korzinka li{margin-bottom:6px; font-size:14.5px}

.kab-punkty-oprosa{display:flex; flex-direction:column; gap:14px; list-style:none; margin:0 0 26px; padding:0}
.kab-punkt-oprosa{background:var(--fon2); border:1px solid var(--liniya); border-radius:var(--r); padding:16px}
.kab-punkt-tekst{margin:0 0 12px}
.kab-punkt-nomer{font-family:var(--mono); font-size:12px; color:var(--tush); margin-right:6px}
.kab-otvety{display:flex; flex-wrap:wrap; gap:8px}
/* Ответ своими словами (анкета «Перед первой встречей») — поле как у плашки жалоб. */
.kab-svobodnyy{
  width:100%; box-sizing:border-box; resize:vertical; min-height:84px;
  font:inherit; font-size:16px; line-height:1.45; color:var(--tekst);
  background:var(--fon3); border:1px solid var(--liniya-pole); border-radius:var(--r); padding:10px 12px;
}
.kab-svobodnyy:focus-visible{outline:2px solid var(--laym); outline-offset:2px}
.kab-otvet{position:relative}
.kab-otvet input{position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.kab-otvet span{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--zona); min-width:var(--zona); padding:8px 14px;
  border:1px solid var(--liniya2); border-radius:var(--r);
  font-size:14.5px; text-align:center; transition:background .15s, border-color .15s;
}
.kab-otvet input:checked + span{background:var(--laym); color:var(--na-layme); border-color:var(--laym)}
.kab-otvet input:focus-visible + span{outline:2px solid var(--laym); outline-offset:3px}

/* ---------- Раскладка баллов: Белбин, PAEI ---------- */
/*
  Числового поля со стрелочками (.kab-ball-pole) больше нет — заменено
  кружками, приём paei.denero.ru. Отдельной липкой строки «распределено N
  из M» над «Дальше» (.kab-schyot-bloka) с 25.09.2026 тоже нет: тот же счёт
  стоял в банке баллов, Илья назвал это задвоением. Весь экран раскладки —
  ниже, в разделе «Раскладка баллов кружками».
*/

/* ---------- Результат ---------- */

.kab-ball{font-family:var(--mono); font-size:clamp(40px,7vw,68px); line-height:1; font-weight:500}
.kab-iz-chego{color:var(--ekran-tush); font-size:13.5px; line-height:1.45; margin-top:10px}
.kab-rangi{margin:0; padding-inline-start:22px}
.kab-rangi li{margin-bottom:10px}
.kab-pobed{font-family:var(--mono); font-size:12px; color:var(--tush)}

/* ---------- Формы ---------- */

.kab-forma{max-width:460px; display:flex; flex-direction:column; gap:18px}
.kab-pole{display:flex; flex-direction:column; gap:6px}
.kab-pole label{font-weight:600; font-size:15px}
.kab-pole input[type="text"],.kab-pole input[type="email"],.kab-pole input[type="password"],.kab-pole input[type="tel"],
.kab-pole select{
  min-height:48px; padding:0 14px; border-radius:var(--r);
  background:var(--fon3); color:var(--tekst); border:1px solid var(--liniya-pole);
  font-family:var(--sans); font-size:16px; width:100%;
}
/* Часовой пояс в «О себе» — первый выпадающий список кабинета. Цвет списка
   браузер берёт из color-scheme: без него в ночной теме список белый. */
:root[data-tema="noch"] .kab-pole select{color-scheme:dark}
.kab-pole-podskazka{color:var(--tush); font-size:13.5px}
.kab-pole-oshibka{color:var(--oshibka); font-size:13.5px}
.kab-galochka{display:flex; flex-direction:row; gap:10px; align-items:flex-start}
.kab-galochka input{margin-top:3px; width:20px; height:20px}
.kab-knopki{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.kab-knopki a:not(.knopka){display:inline-flex; align-items:center; min-height:var(--zona); color:var(--tush)}
.kab-knopki a:not(.knopka):hover{color:var(--tekst)}
.kab-pod-knopkoy{color:var(--tush); font-size:13.5px; margin:8px 0 0; max-width:60ch}

.kab-soobshchenie{
  border:1px solid var(--liniya); border-left:3px solid var(--stal);
  border-radius:var(--r); padding:13px 16px; margin:0 0 12px; background:var(--fon2);
}
.kab-soobshchenie--success{border-left-color:var(--ok)}
.kab-soobshchenie--error{border-left-color:var(--oshibka)}

/* ---------- Плашка «сайт в разработке» (templates/kabinet/plashka-razrabotki.html) ----------
   Малозаметная (решение Ильи 26.09.2026): поверхность на полтона от фона, тихий
   текст. Внутри — раскрывашка с полем для жалобы: её заголовок и есть текст
   плашки, подчёркнут только хвост «напишите мне прямо здесь». Крестик — зона
   нажатия var(--zona), отрицательные поля держат высоту по тексту. [hidden]
   обязателен: у плашки display:flex, без правила крестик её не спрячет. */
.kab-plashka{
  display:flex; align-items:flex-start; gap:8px;
  background:var(--fon2); border:1px solid var(--liniya); border-radius:var(--r);
  padding:10px 12px; margin:0 0 20px;
  color:var(--tush); font-size:13px; line-height:1.45;
}
/* Из пункта меню «Написать разработчику» плашка прокручивается к верху — не под шапку телефона. */
.kab-plashka{scroll-margin-top:calc(var(--shapka) + 12px)}
.kab-plashka[hidden]{display:none}
.kab-plashka-telo{flex:1 1 auto; min-width:0; padding-top:2px}
.kab-plashka p{margin:0}
.kab-plashka-raskryt summary{cursor:pointer; list-style:none}
.kab-plashka-raskryt summary::-webkit-details-marker{display:none}
.kab-plashka-ssylka{text-decoration:underline; text-underline-offset:3px}
.kab-plashka-raskryt summary:hover .kab-plashka-ssylka{color:var(--tekst)}
.kab-plashka-forma{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.kab-plashka-forma textarea{
  width:100%; box-sizing:border-box; resize:vertical; min-height:72px;
  font:inherit; font-size:15px; line-height:1.45; color:var(--tekst);
  background:var(--fon3); border:1px solid var(--liniya-pole); border-radius:var(--r); padding:10px 12px;
}
.kab-plashka-forma textarea::placeholder{color:var(--tush)}
/* Ловушка для роботов: поле есть в форме, но глазами и с клавиатуры его не найти. */
.kab-plashka-lovushka{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.kab-plashka-niz{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.kab-plashka-schyotchik{font-family:var(--mono); font-size:12px}
.kab-plashka .knopka{min-height:36px; padding:8px 16px; font-size:14px}
.kab-plashka-otvet{color:var(--ok); margin-top:6px !important}
.kab-plashka .kab-pole-oshibka{margin:0}
.kab-plashka .kab-pole-oshibka[hidden]{display:none}
/* Голосовое: кнопка записи тихая, как всё в плашке; красная точка — общепринятый
   знак «идёт запись», мигает только во время записи. У элементов с display
   правило [hidden] переписано явно, иначе спрятанное оставалось бы видно. */
.kab-plashka-golos{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.kab-plashka-golos[hidden]{display:none}
.kab-plashka-zapis{
  display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:6px 14px;
  background:transparent; color:var(--tekst); border:1px solid var(--liniya2); border-radius:999px;
  font:inherit; font-size:13px; cursor:pointer;
}
.kab-plashka-zapis[hidden]{display:none}
.kab-plashka-zapis:hover{border-color:var(--tekst)}
.kab-plashka-tochka{width:8px; height:8px; border-radius:50%; background:var(--oshibka); flex:0 0 auto}
.kab-plashka-zapis.idyot{border-color:var(--oshibka)}
.kab-plashka-zapis.idyot .kab-plashka-tochka{animation:kab-plashka-migaet 1s ease-in-out infinite}
@keyframes kab-plashka-migaet{50%{opacity:.25}}
.kab-plashka-vremya{font-family:var(--mono); font-size:12px}
.kab-plashka-golos audio{height:36px; max-width:100%; flex:1 1 220px}
.kab-plashka-ubrat{
  min-height:36px; background:none; border:0; padding:0 4px; cursor:pointer;
  color:var(--tush); font:inherit; font-size:13px; text-decoration:underline; text-underline-offset:3px;
}
.kab-plashka-ubrat:hover{color:var(--tekst)}
.kab-plashka-krestik{
  flex:0 0 auto; width:var(--zona); height:var(--zona); margin:-12px -12px -12px 0;
  background:none; border:0; border-radius:var(--r); cursor:pointer;
  color:var(--tush); font:inherit; font-size:22px; line-height:1;
}
.kab-plashka-krestik:hover{color:var(--tekst); background:var(--stal-fon)}

/* ---------- «Глазами клиента»: полоса просмотра (kabinet/glazami.py) ----------
   Клиент её не видит никогда — только браузер Ильи, открытый из «Диалогов».
   Не липнет: на телефоне сверху уже липнет шапка с тремя полосками. */
.kab-glazami{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px var(--pole); background:var(--stal-fon);
  border-bottom:1px solid var(--liniya2);
}
.kab-glazami-tekst{flex:1 1 320px; margin:0; font-size:14px; line-height:1.45}
.kab-glazami-tekst b{display:block; font-size:16px}
.kab-glazami-tekst span{color:var(--tush)}

/* ---------- Вход: отдельная узкая страница ---------- */

.kab-vhod-stranitsa{min-height:100vh; display:grid; place-items:center; padding:40px var(--pole)}
.kab-vhod-korobka{width:min(440px,100%)}
.kab-vhod-verh{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px}

.kab-k-soderzhaniyu{position:absolute; left:-9999px}
.kab-k-soderzhaniyu:focus{
  left:16px; top:16px; z-index:70; display:inline-flex; align-items:center; min-height:var(--zona);
  padding:10px 16px; background:var(--laym); color:var(--na-layme); border-radius:var(--r);
}

/* ---------- Раскладка баллов кружками ---------- */
/*
  PAEI и Белбин: вместо числового поля со стрелочками — ряд кружков-радио под
  цифрами шкалы, как на paei.denero.ru (design/zadacha-paei-belbin-2026-09-22).
  Цифра лежит прямо в кружке: у Белбина 11 делений (0–10) не выстроить общей
  шапкой в один столбец без разъезда при переносе строки на телефоне, а число
  внутри кружка само себя подписывает и для PAEI, и для Белбина одинаково.
  Кружки — обычные radio, вся раскладка работает и без единого скрипта;
  disabled и живой счёт (kabinet/prokhozhdenie.html) — только улучшение поверх.
*/

/*
  С 25.09.2026 (Илья: «кружочки поменьше, чтобы на одной строке умещалось и
  слово „Прямой“, и сами кружочки» — на телефоне раньше помещалась половина
  блока) слово и кружки стоят в одну линию: строка — flex, слову отдаётся
  всё, что осталось от кружков, но не меньше 7em. Длинный текст Белбина
  и одиннадцать кружков сами уходят на две строки. Размер кружка — одна
  переменная на строки и на банк: монетки банка обязаны быть того же
  размера, что кружки строк (Илья 22.09.2026).
*/
/* На широком экране строка не растягивается на всю работу: слово и его
   кружки должны читаться вместе, а не через полметра пустоты. */
.kab-forma-blokov{max-width:640px}
.kab-raskladka,
.kab-bank{--kruzhok:36px}
@media (min-width:700px){
  .kab-raskladka,
  .kab-bank{--kruzhok:40px}
}
.kab-raskladka{gap:8px; margin:0 0 12px}
.kab-raskladka-stroka{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  padding:8px 10px 8px 14px;
}
.kab-raskladka-tekst{
  margin:0;
  flex:1 1 7em;
  min-width:0;
  font-size:16px;
  line-height:1.3;
}
/* Телефон: самое длинное слово PAEI — «Взаимодействующий» (блок 6), при 16px
   оно шире колонки на 390 точках (замер 25.09.2026: 164 против 160).
   При 15px — 154, влезает до 375 точек включительно. */
@media (max-width:640px){
  .kab-raskladka-tekst{font-size:15px}
}
/* Самые узкие телефоны (до 385 точек): кружки чуть меньше, а на 360 это
   слово всё равно не влезает целиком (154 против 144) — там переносится по
   слогам. Только здесь: на шире экране перенос по слогам резал бы и длинные
   фразы Белбина, которым он не нужен. */
@media (max-width:385px){
  .kab-raskladka,
  .kab-bank{--kruzhok:34px}
  .kab-raskladka-stroka{padding-left:10px; column-gap:8px}
  .kab-raskladka-tekst{hyphens:auto; -webkit-hyphens:auto}
  .kab-kruzhki{gap:5px}
}
.kab-kruzhki{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex:0 1 auto;
  min-width:0;
}
/* Кружки и кнопки жмут быстро и подряд: без manipulation телефон ждёт,
   не двойное ли это касание для приближения. Кружок в фокусе (стрелки,
   Tab) не прячется под липкой шапкой с квадратиками. */
.kab-kruzhok,
.kab-knopki-bloka .knopka{touch-action:manipulation}
.kab-kruzhok input{scroll-margin-top:calc(var(--shapka) + 64px); scroll-margin-bottom:16px}
.kab-kruzhok{
  position:relative;
  display:inline-flex;
}
.kab-kruzhok input{
  position:absolute; inset:0; opacity:0; margin:0; width:100%; height:100%; cursor:pointer;
}
.kab-kruzhok span{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--kruzhok); height:var(--kruzhok);
  border:1px solid var(--liniya2); border-radius:50%;
  background:var(--fon3); color:var(--tush);
  font-family:var(--mono); font-size:15px; line-height:1;
  transition:background .15s, border-color .15s, color .15s;
}
.kab-kruzhok input:not(:disabled):hover + span{border-color:var(--tekst); color:var(--tekst)}
.kab-kruzhok input:focus-visible + span{outline:2px solid var(--laym); outline-offset:2px}
/* Кружок «0», отмеченный явно, — не заливка (у Белбина 0 значит «ничего не
   потрачено», красить нечего), но видно, что строку тронули: жирный контур
   без фона, тем же приёмом, что hover. Заливка 1..N — ниже, через :has(). */
.kab-kruzhok:has(input[value="0"]:checked) span{border-color:var(--tekst); font-weight:600}

/* Кружок, на который баллов уже не осталось, — серый и не нажимается: живёт
   через настоящий disabled, не через ругань после клика (Илья 22.09.2026:
   «серым показывается, куда уже нельзя ставить» — недопустимое состояние
   недостижимо, а не разрешено с сообщением следом; скрипт также ставит
   title «баллов не осталось», см. DESIGN.md, «Правила поведения интерфейса
   кабинета»). */
.kab-kruzhok:has(input:disabled){cursor:not-allowed}
.kab-kruzhok input:disabled + span{
  background:var(--fon3); border-color:var(--liniya); color:var(--tush);
  opacity:.4; cursor:not-allowed;
}

/* ---------- Накопительная заливка: выбрал N — потратил N ---------- */
/*
  Просьба Ильи 22.09.2026: кружок не просто отмечается, а «баллы тратятся» —
  выбрал 4, значит залиты кружки 1,2,3,4, а не один четвёртый. Чистый CSS,
  без единой строчки скрипта: :has() у кружка со следующим по счёту отмеченным
  соседом красит всё, что ДО выбора, сам выбранный красит :has(:checked).
  Правка Ильи того же дня: «зачем синие, если у всех тестов выбор — это
  зелёный (лаймовый)?» — заливка лаймом, тем же цветом, что и выбор во всех
  остальных опросниках (.kab-otvet input:checked + span выше); здесь это
  правило главнее «лайма одной вещью на блок» из закона v3, см. DESIGN.md,
  «Правила поведения интерфейса кабинета». Кружок «0» этой заливкой никогда
  не красится: у Белбина 0 — «ничего не потрачено», отмечать залитым нечего.
*/
.kab-kruzhok:not(:has(input[value="0"])):has(~ .kab-kruzhok input:checked) span{
  background:color-mix(in srgb, var(--laym) 38%, var(--fon3));
  border-color:var(--laym); color:var(--tekst);
}
.kab-kruzhok:not(:has(input[value="0"])):has(input:checked) span{
  background:var(--laym); border-color:var(--laym); color:var(--na-layme); font-weight:600;
}

/* ---------- Банк баллов: «ваши 10», гаснут по мере траты ---------- */
/*
  Ряд кружков над раскладкой — тот же смысл, что игровой запас фишек: видно,
  сколько ещё есть и сколько уже роздано по строкам. Кружки рисует скрипт
  (их ровно summa_bloka, а range в шаблоне не завести без своего фильтра —
  граница задания не даёт трогать predyavlenie.py). Карточка — «экран»
  (.kab-ekran, всегда тёмный вне зависимости от темы). Монетки того же
  размера и цвета, что кружки строк (Илья 22.09.2026: «монеточки должны быть
  такого же размера, зелёненькие»), и гаснут коротким переходом на месте —
  не полётом через весь экран (для этого нужен был бы JS, считающий точные
  координаты обоих элементов; здесь достаточно простого CSS-перехода
  ≤300 мс). `prefers-reduced-motion` учтён общим правилом в masterskaya.css
  (`*{animation:none !important}`, transition гасим здесь же отдельно, раз
  тут именно transition, а не keyframes).
*/
/*
  С 25.09.2026 банк стоит под строками, над кнопками, и одна его строка
  слов — единственный счёт на экране. Кружки — сеткой: на широком экране
  все в один ряд, на телефоне — двумя ровными рядами, 10 это 5 и 5, а не
  6 и 4, как выходило при простом переносе (Илья: «чтобы красиво было»).
  Сколько кружков и сколько в ряду, пишет скрипт (--tochek,
  --tochek-v-ryadu); без него сетка просто пустая.
*/
.kab-bank{margin:0 0 12px; padding:12px 14px}
.kab-bank-tochki{
  display:grid; gap:6px;
  grid-template-columns:repeat(var(--tochek, 10), var(--kruzhok));
}
@media (max-width:640px){
  .kab-bank-tochki{grid-template-columns:repeat(var(--tochek-v-ryadu, 5), var(--kruzhok))}
}
.kab-bank-tochka{
  width:var(--kruzhok); height:var(--kruzhok); border-radius:50%;
  background:var(--laym); box-shadow:0 0 8px color-mix(in srgb, var(--laym) 55%, transparent);
  transition:transform .26s ease, opacity .26s ease, background .26s ease, box-shadow .26s ease;
}
.kab-bank-tochka--potracheno{
  background:var(--ekran-ramka); box-shadow:none; opacity:.4; transform:scale(.6);
}
@media (prefers-reduced-motion: reduce){
  .kab-bank-tochka{transition:opacity .12s, background .12s}
  .kab-bank-tochka--potracheno{transform:none}
}
.kab-bank-slova{margin:0 0 10px; position:relative; z-index:1}
/* Цвета внутри «экрана» — не --ok/--oshibka напрямую: экран всегда тёмный
   независимо от темы (см. .kab-ekran выше), а дневные оттенки --ok/--oshibka
   рассчитаны на светлый фон и гаснут на нём (тот же приём, что --ekran-tush
   для обычного текста внутри .kab-ekran). «Готово» — лаймом, тем же цветом,
   что и выбор; «лишних» (редкий, защитный случай — кружки и так не дают
   перебрать) — цветом лампы, он не меняется между днём и ночью. */
.kab-bank[data-sostoyanie="gotovo"] .kab-bank-slova{color:var(--laym); font-weight:600}
.kab-bank[data-sostoyanie="oshibka"] .kab-bank-slova{color:var(--lampa-cvet); font-weight:600}

/* ---------- Ход по блокам: ряд «экранчиков» в липкой шапке ---------- */
/*
  Приём paei.denero.ru (Илья 22.09.2026: «очень хорошо указано, сколько
  блоков из 10 пройдено... можно квадратики, как маленькие экранчики
  с четырьмя шкалами, пройденный помечается зелёной галочкой»). С 25.09.2026
  стоит в липкой шапке вместо полоски с процентами и без подписи «блок N из
  M» (Илья: «и так понятно визуально»). Все квадратики в одну строку и на
  телефоне: они не переносятся, а сжимаются (flex-basis 30px, может меньше).
  Пройденный квадратик — ссылка на «?blok=N» (правка старого блока,
  prokhozhdenie() в vidy.py), у непройденных ссылки нет.
*/
.kab-hod--bloki{margin-bottom:14px}
.kab-hod-blokov-ryad{
  display:flex; flex-wrap:nowrap; gap:6px; list-style:none; margin:0; padding:5px 5px 0 0;
}
.kab-hod-blok{display:flex; flex:0 1 30px; min-width:0}
.kab-hod-blok-ekran{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:1; box-sizing:border-box;
  background:var(--ekran); border:1px solid var(--ekran-ramka); border-radius:4px;
  text-decoration:none;
}
a.kab-hod-blok-ekran{cursor:pointer; transition:border-color .15s}
a.kab-hod-blok-ekran:hover,
a.kab-hod-blok-ekran:focus-visible{border-color:var(--laym)}
.kab-hod-blok-shkaly{display:flex; flex-direction:column; justify-content:space-evenly; width:62%; height:64%}
.kab-hod-blok-shkaly i{display:block; height:2px; border-radius:1px; background:var(--ekran-ramka)}
.kab-hod-blok--proydeno .kab-hod-blok-shkaly i{background:var(--laym)}
.kab-hod-blok--tekushchiy .kab-hod-blok-ekran{
  border-color:var(--laym); box-shadow:0 0 0 2px color-mix(in srgb, var(--laym) 35%, transparent);
}
.kab-hod-blok-galochka{
  position:absolute; top:-5px; right:-5px; width:13px; height:13px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--laym); color:var(--na-layme); font-size:8.5px; line-height:1; font-weight:700;
}

/* ---------- Заголовок блока: «Блок 2 (название опросника)» ---------- */
/*
  Илья 25.09.2026: «непонятно, какое сейчас исследование прохожу». Название
  — то, что видит клиент (nazvanie_dlya_klienta), тише и мельче номера:
  главное на экране всё равно строки с кружками.
*/
.kab-blok-zagolovok{margin:0 0 12px; text-wrap:balance}
.kab-blok-test{font-weight:400; font-size:.72em; color:var(--tush); letter-spacing:0}
.kab-blok-vopros{margin:-4px 0 12px; font-size:16px; line-height:1.35}
.kab-blok-pravka{margin:-4px 0 12px}

/* ---------- Кнопки блока в один ряд и правила под «?» ---------- */
/*
  Илья 25.09.2026: «в ряд — значок вопроса, „Вернуться на блок назад“ и
  „Дальше“, так сэкономим высоту». Текст правил, стоявший под кнопкой,
  — в окошке под «?» (атрибут popover: открывается и закрывается без
  скриптов, по нажатию мимо — тоже). На первом блоке окошко открывает
  скрипт сам, пока ничего не отмечено. Браузер без popover показывает
  правила просто текстом под кнопками.
*/
.kab-knopki-bloka{gap:8px; flex-wrap:nowrap}
.kab-knopki-bloka .knopka{padding-inline:16px; white-space:nowrap}
.kab-knopki-bloka .kab-knopka-vopros{
  flex:0 0 auto; width:var(--zona); padding:0; font-size:18px;
}
@media (max-width:640px){
  .kab-knopki-bloka{gap:6px}
  .kab-knopki-bloka .knopka{padding-inline:10px; font-size:15px}
  .kab-knopki-bloka .kab-knopka-dalshe{flex:1 1 auto}
}
/* Самые узкие телефоны (360–380 точек): «Вернуться на блок назад» целиком
   не влезает в ряд с «?» и «Дальше» — там надпись короче, смысл тот же,
   полная фраза остаётся в подсказке. Скрытая надпись — display:none, и
   читалка с экрана её тоже не читает, двоения нет. */
.kab-nadpis-korotkaya{display:none}
@media (max-width:385px){
  .kab-knopki-bloka .kab-nadpis-polnaya{display:none}
  .kab-knopki-bloka .kab-nadpis-korotkaya{display:inline}
}
.kab-pravila{
  width:min(34rem, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto;
  margin:auto; padding:20px 20px 18px; box-sizing:border-box;
  background:var(--fon2); color:var(--tekst);
  border:1px solid var(--liniya2); border-radius:var(--r);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  font-size:15.5px; line-height:1.5;
  overscroll-behavior:contain;
}
.kab-pravila p{margin:0 0 12px}
.kab-pravila .kab-pravila-zagolovok{margin:0 0 10px}
.kab-pravila::backdrop{background:rgba(0,0,0,.5)}

/* ---------- Заявки с сайта (страница сотрудника) ----------
   Строка заявки — та же .kab-strochka, что в материалах и встречах. Своего
   тут три вещи: разбор полей формы, поле заметки и кнопка «я ответил».
*/
.kab-polya{
  display:grid; grid-template-columns:auto 1fr; gap:4px 12px;
  margin:8px 0 0; font-size:14.5px;
}
.kab-polya dt{color:var(--tush); font-family:var(--mono); font-size:13px}
.kab-polya dd{margin:0}
.kab-zametka-forma{margin:12px 0 0; display:grid; gap:6px; max-width:520px}
.kab-zametka-forma textarea{
  width:100%; padding:10px 12px; border-radius:var(--r);
  border:1px solid var(--liniya-pole); background:var(--pole);
  color:inherit; font:inherit; resize:vertical;
}
.kab-zametka-forma .knopka{justify-self:start}
.kab-strochka-deystvie{
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto;
}
@media (max-width:640px){
  .kab-polya{grid-template-columns:1fr; gap:2px}
  .kab-strochka-deystvie{align-items:flex-start; width:100%}
}

/* ---------- Кнопка ждёт ответа ----------
   Ставится скриптом osnova-vhoda.html при отправке формы: кнопка гаснет
   через встроенное [disabled], текст меняется, рядом крутится кружок.
   Уважает prefers-reduced-motion — правило уже общее, в masterskaya.css
   (*{animation:none !important}), тут его дублировать не нужно.
*/
.knopka-zhdyot{gap:10px}
.kab-vrashenie{
  display:inline-block; flex:0 0 auto; width:16px; height:16px;
  border:2px solid rgba(0,0,0,.25); border-top-color:var(--na-layme);
  border-radius:50%; animation:kab-vrashenie-krug .7s linear infinite;
}
.knopka-2 .kab-vrashenie{border-color:var(--liniya2); border-top-color:var(--tekst)}
@keyframes kab-vrashenie-krug{to{transform:rotate(360deg)}}

/* ---------- Поле пароля с глазком ----------
   Общий кусок templates/kabinet/vhod/kusok-parol.html — включается вместо
   {{ pole }} у каждого поля пароля. Кнопка внутри поля справа, зона
   нажатия — полные 44px (--zona), работает и с клавиатуры (обычная кнопка).
*/
.kab-parol-obertka{position:relative; display:block}
.kab-parol-obertka input[type="password"],
.kab-parol-obertka input[type="text"]{padding-right:52px}
.kab-parol-glazok{
  position:absolute; top:50%; right:2px; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--zona); height:var(--zona); padding:0; border:0; border-radius:var(--r);
  background:transparent; color:var(--tush); cursor:pointer;
}
.kab-parol-glazok:hover,
.kab-parol-glazok[aria-pressed="true"]{color:var(--tekst)}
.kab-parol-glazok:focus-visible{outline:2px solid var(--laym); outline-offset:2px}
/* Какую из двух SVG показать — решает [aria-pressed], а не hidden: атрибут
   hidden в инлайновом SVG браузер молча игнорирует, обе иконки остаются
   видны разом. */
.kab-parol-glazok .kab-glaz-zakryt{display:none}
.kab-parol-glazok[aria-pressed="true"] .kab-glaz-otkryt{display:none}
.kab-parol-glazok[aria-pressed="true"] .kab-glaz-zakryt{display:block}

/* =========================================================================
   Лента: фильтры, панель, между встречами
   Задача design/lenta-2026-09-23 — главная как панель уведомлений + история.
   Ни одного своего цвета: всё из masterskaya.css/kabinet.css выше.
   ========================================================================= */

/* ---------- Лаймовый кружок-метка у пункта меню (незавершённые опросники) ----------
   Единственное место, где лайм — заливка, а не обводка: DESIGN.md разрешает
   лайм «одной вещью» на экран, и здесь это она — счётчик-уведомление, не кнопка.
*/
.kab-metka-laym{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px; margin-left:6px;
  border-radius:999px; background:var(--laym); color:var(--na-layme);
  font-family:var(--mono); font-size:12px; font-weight:600; line-height:1;
  vertical-align:middle;
}

/* ---------- Панель «Что ждёт вас» ---------- */
.kab-zhdyot{margin-bottom:8px}
.kab-zhdyot > summary{
  list-style:none; cursor:pointer; padding:14px 16px; min-height:var(--zona);
  display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.kab-zhdyot > summary::-webkit-details-marker{display:none}
.kab-zhdyot-zagolovok{font-weight:600; font-size:16px}
.kab-zhdyot-telo{padding:0 16px 16px; display:flex; flex-direction:column; gap:12px}
.kab-zhdyot-telo .kab-spisok{margin:0}

/* ---------- Отправная точка внизу ленты ---------- */
.kab-otpravnaya-tochka{
  margin:34px 0 0; padding-top:18px; border-top:1px solid var(--liniya);
  color:var(--tush); font-size:14.5px; line-height:1.5; max-width:66ch;
}

/* ---------- Фильтры-чипы над лентой ---------- */
.kab-filtry-lenta{align-items:center}
.kab-chip{
  display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px 11px 4px 8px;
  border-radius:999px; border:1px solid transparent; font-size:13.5px; cursor:pointer; user-select:none;
}
.kab-chip:hover{border-color:var(--liniya)}
.kab-chip input{width:16px; height:16px; margin:0; accent-color:var(--laym)}
button.kab-shashka{background:none; font:inherit; cursor:pointer}

/* Блок, который фильтр временно притушил: мелкий серый текст вместо обычного
   размера. Клик по нему (не по ссылке/кнопке внутри) возвращает обычный вид —
   JS в hronologiya.html. Без JS этого класса ни на чём не будет вовсе.
   Звёздочка с !important — не небрежность: содержимое внутри (h3, .kab-melko,
   ol, p) держит собственный font-size/color с не меньшей специфичностью,
   обычное наследование их не перебивает, а видов содержимого здесь слишком
   много (встреча, опросник, материал, между встречами), чтобы перечислять
   каждый по имени. */
[data-faset].kab-tiho{
  font-size:12.5px; color:var(--tush); cursor:pointer;
}
[data-faset].kab-tiho *{
  font-size:inherit !important; color:inherit !important; line-height:1.4 !important;
}
[data-faset].kab-tiho .kab-spisok,
[data-faset].kab-tiho ol,
[data-faset].kab-tiho svg{display:none}

/* ---------- Между встречами: раскладка «как вы сейчас» ---------- */
.kab-forma .kab-pole textarea{
  width:100%; padding:10px 12px; border-radius:var(--r);
  border:1px solid var(--liniya-pole); background:var(--fon3);
  color:inherit; font:inherit; resize:vertical;
}

/* Вход по коду: поле для шести цифр — крупно, по центру, вразрядку. */
.kab-kod input[type="text"]{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:28px; letter-spacing:.35em; text-align:center; min-height:60px;
}
.kab-spisok-shagov{padding-left:1.3em; display:flex; flex-direction:column; gap:10px; margin:14px 0 22px}

/* ---------- Табло над парами и «Как вы проходили» (25.09.2026) ----------
   Экран с измеренным — тёмный в обеих темах, как весь .kab-ekran. Лайм одной
   вещью: закрашенные клетки определившихся мест на табло, медаль на итоге.
   Клетки закрашиваются по порядку, а не на своих местах: на своих они выдали
   бы, какое место определилось, — а это человек видит только в конце. */
.kab-tablo{margin-top:22px; display:flex; flex-direction:column; gap:14px}
.kab-tablo-chisla,
.kab-kak-prokhodil-chisla{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px 22px; margin:0;
}
.kab-tablo-chisla dd,
.kab-kak-prokhodil-chisla dd{margin:0}
.kab-tablo-chislo{font-family:var(--mono); font-size:clamp(22px,3vw,30px); line-height:1.1; font-weight:500; color:var(--na-ekrane)}
.kab-tablo .kab-iz-chego{margin:0}
.kab-tablo-mesta{border-top:1px solid var(--ekran-ramka); padding-top:12px}
.kab-tablo-mesta-podpis{margin:0 0 8px}
.kab-tablo-mesta-podpis b{color:var(--na-ekrane); font-weight:500}
.kab-tablo-yacheyki{list-style:none; margin:0 0 8px; padding:0; display:grid; grid-template-columns:repeat(18, 1fr); gap:4px; max-width:540px}
.kab-tablo-yacheyka{height:14px; border-radius:2px; border:1px solid var(--ekran-ramka)}
.kab-tablo-yacheyka--est{background:var(--laym); border-color:var(--laym)}
.kab-tablo-yacheyka--novaya{animation:kab-yacheyka-vspyshka 1.2s ease-out 1}
@keyframes kab-yacheyka-vspyshka{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--laym) 70%, transparent); transform:scaleY(1.5)}
  100%{box-shadow:0 0 0 8px transparent; transform:scaleY(1)}
}
.kab-tablo-slova{margin:0}
.kab-tablo-slova--novoe{color:var(--na-ekrane) !important}

.kab-kak-prokhodil{margin:28px 0 8px; display:flex; flex-direction:column; gap:16px}
.kab-kak-prokhodil-zagolovok{margin:0; color:var(--na-ekrane)}
.kab-kak-prokhodil-chisla > div{display:flex; flex-direction:column; gap:4px}
.kab-kak-prokhodil .kab-iz-chego{margin-top:2px}
.kab-achivka{
  display:flex; gap:14px; align-items:center;
  padding:12px 14px; border:1px solid var(--ekran-ramka); border-radius:var(--r);
}
.kab-achivka-medal{
  flex:0 0 auto; width:var(--zona); height:var(--zona); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:3px solid var(--laym); color:var(--na-ekrane);
  font-family:var(--mono); font-size:20px; font-weight:600;
}
.kab-achivka-imya{margin:0 0 2px; font-weight:600; color:var(--na-ekrane)}
.kab-achivka .kab-melko{margin:0}

/* ---------- Страница опросника: последний замер и история (25.09.2026) ----------
   Плашка «Последний раз вы проходили его …» с кнопкой нового замера и
   раскрывашка прошлых результатов. У регулярного замера история закрыта
   всегда — заголовок с предупреждением виден до того, как её откроют. */
.kab-zamer{border-left:3px solid var(--laym); margin:0 0 18px}
.kab-zamer > p{margin:0 0 8px}
.kab-zamer-data{font-size:17px}
.kab-zamer h2{margin-top:18px}
.kab-zamer .kab-pod-knopkoy{margin-bottom:0}
.kab-istoriya{margin-top:24px; padding:0}
.kab-istoriya > summary{
  list-style:none; cursor:pointer; padding:14px 16px; min-height:var(--zona);
  display:flex; align-items:baseline; justify-content:space-between; gap:6px 14px; flex-wrap:wrap;
}
.kab-istoriya > summary::-webkit-details-marker{display:none}
.kab-istoriya > summary::before{content:"▸"; color:var(--tush); margin-right:-6px}
.kab-istoriya[open] > summary::before{content:"▾"}
.kab-istoriya-zagolovok{font-weight:600; font-size:16px; margin-right:auto}
.kab-istoriya > .kab-spisok{margin:0; padding:0 16px 14px}