/* Гейт КЭВ: светлый оверлей поверх готовой страницы. Экраны выбора, титула и вопросов.
   Значения — только semantic-токены tokens-2026.css (см. kev-quiz-spec.md §3.0). */
#gate{position:fixed;inset:0;z-index:50;overflow-y:auto;
  background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400}
#gate[hidden]{display:none}
/* Гейт — оверлей поверх готовой страницы карты, но живёт в том же документе,
   поэтому ловит на себя чужие сквозные правила по тегу (diagnostic-page.css
   не трогаем — он отвечает за карту, не за гейт). `<section>` внутри гейта
   получал бы padding от карты. Сброс держим на #gate section, чтобы он покрывал
   любой будущий экран гейта, а не только сегодняшний. */
#gate section{padding:0}
body.gate-open{overflow:hidden}

#gate .gate-topbar{justify-content:flex-start}
.gate-steps{display:flex;align-items:center;gap:var(--s-8);margin-left:auto;overflow-x:auto}
.gate-steps button{padding:var(--s-8) var(--s-12);border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--ink-soft);font:500 var(--fs-caption)/1 var(--font);
  white-space:nowrap;cursor:pointer}
.gate-steps button:hover{color:var(--brand)}
.gate-steps button.is-current{color:var(--ink);font-weight:700;cursor:default}
.gate-steps button.is-future{color:var(--line);cursor:default}
.gate-steps button:focus-visible,.gate-action:focus-visible,.gate-back:focus-visible,
.gate-search:focus-visible,
.gate-form textarea:focus-visible,.gate-chips button:focus-visible{
  outline:3px solid var(--energy-ink);outline-offset:3px;
}

#gate-body{min-height:calc(100vh - 72px);padding:var(--s-64) var(--pad-x) var(--s-96)}
#gate .hero h1{font-size:var(--fs-display);font-weight:400;line-height:1.08}
.gate-kicker{display:inline-block;font-size:var(--fs-label);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.gate-hero-copy{min-width:0}
.gate-hero .lead{margin-bottom:var(--s-24)}
.gate-hero{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.gate-child-art{background:none;overflow:hidden}
.gate-child-art img{display:block;width:100%;height:100%;object-fit:cover}

.gate-action{display:inline-flex;align-items:center;gap:12px;padding:17px 30px;
  border-radius:var(--r-pill);border:0;background:var(--energy);color:var(--energy-deep);
  font:700 var(--fs-body)/1 var(--font);cursor:pointer;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.gate-action::after{content:"↗";display:grid;place-items:center;width:26px;height:26px;
  border-radius:var(--r-pill);background:rgba(18,36,31,.14);font-size:14px}
.gate-action:hover{background:var(--energy-hover);transform:translateY(-2px)}
.gate-action[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* Выбор ребёнка. Фото и аватарки запрещены. Реестр растёт заметно больше 27
   карт — вместо одного длинного дропдауна поле поиска фильтрует его по имени,
   возрасту, дате и педагогу, а под ним остаётся тот же список-выбор и та же
   кнопка «Выбрать» (diagnostic-gate.js). */
.gate-picker{width:min(var(--container),100%);margin:0 auto}
.gate-picker h1{margin:var(--s-16) 0 var(--s-24);font-size:var(--fs-display);font-weight:400;line-height:1.08}
.gate-picker .lead{margin-bottom:var(--s-24)}
.gate-search{display:block;width:100%;height:56px;margin-bottom:var(--s-16);padding:0 var(--s-24);
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-card);
  color:var(--ink);font:500 var(--fs-body-lg)/1 var(--font)}
.gate-search::placeholder{color:var(--ink-soft)}
.gate-picker-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-16);align-items:center}
.gate-picker-empty{margin:0;padding:var(--s-24);border:1px dashed var(--line);border-radius:var(--r-card);
  color:var(--ink-soft);font:500 var(--fs-body)/1.4 var(--font)}

/* Титул: факты повторяют горизонтальную полосу лендинга. */
.gate-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-16);
  margin-bottom:var(--s-24);padding:var(--s-24);background:var(--bg-warm);
  border-block:1px solid var(--line)}
.gate-facts div{display:flex;flex-direction:column;gap:2px}
.gate-facts div b{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.gate-facts div span{font-size:var(--fs-caption);color:var(--ink-soft);order:2}

/* Вопросы и короткий экран сборки. */
.gate-card{width:min(var(--container),100%);margin:0 auto;padding:var(--s-48);
  border-radius:var(--r-card);background:var(--bg-card);box-shadow:var(--shadow);
  display:grid;gap:var(--s-24)}
.gate-card h1{font-size:var(--fs-h2);line-height:1.1}
.gate-card>.lead{color:var(--ink-soft)}
.gate-form{display:grid;gap:var(--s-16);justify-items:start}
.gate-form textarea{width:100%;min-height:132px;resize:vertical;padding:var(--s-16) var(--s-24);
  border-radius:var(--r-card);border:1px solid var(--line);background:var(--bg-card);
  color:var(--ink);font:500 var(--fs-body-lg)/1.45 var(--font)}
.gate-form textarea::placeholder{color:var(--ink-soft)}
.gate-columns{display:grid;gap:var(--s-32);grid-template-columns:1fr 1fr}
.gate-columns header{margin-bottom:0}
.gate-columns header b{display:block;font-size:var(--fs-h3);font-weight:500}
.gate-columns header span{display:block;margin-top:var(--s-4);font-size:var(--fs-caption);color:var(--ink-soft)}
.gate-chips{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-top:var(--s-16)}
.gate-chips button{padding:var(--s-8) var(--s-16);cursor:pointer;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--bg-card);color:var(--ink);
  font:500 var(--fs-caption)/1.3 var(--font)}
/* Цвет отмеченной кнопки — от колонки, а не от оценки педагога:
   «уже получается» зелёный, «нужна поддержка» красный. */
.gate-chips button[aria-pressed="true"]{color:var(--bg-card)}
[data-group="strengths"][aria-pressed="true"]{background:var(--brand);border-color:var(--brand)}
[data-group="needs"][aria-pressed="true"]{background:var(--dg-low-ink);border-color:var(--dg-low-ink)}
.gate-back{justify-self:start;padding:0;border:0;background:transparent;cursor:pointer;
  color:var(--ink-soft);font:400 var(--fs-body)/1 var(--font)}
.gate-back:hover{color:var(--brand)}
.gate-building i{display:block;height:12px;border-radius:var(--r-pill);background:var(--line);margin-bottom:var(--s-12)}
.gate-building i:nth-child(2){width:72%}
.gate-building i:nth-child(3){width:48%}

@media(max-width:1000px){
  #gate-body{padding-top:var(--s-48)}
  .gate-hero{grid-template-columns:1fr}
}
@media(max-width:760px){
  .gate-topbar{flex-wrap:wrap}
  /* На 375px четыре кнопки шагов не помещаются в одну строку (сумма ширин
     ~353px против ~327px доступных) — overflow-x:auto из базового правила
     технически даёт внутреннюю прокрутку, но без подсказки (тени/скроллбара)
     она незаметна, и последняя кнопка выглядит обрезанной. Перенос строки —
     ряд всегда виден целиком, без скролл-жеста. */
  .gate-steps{width:100%;margin-left:0;flex-wrap:wrap;row-gap:var(--s-4);overflow-x:visible}
  #gate-body{min-height:0;padding:var(--s-32) var(--pad-x) var(--s-64)}
  .gate-columns,.gate-facts,.gate-picker-control{grid-template-columns:1fr}
  .gate-picker-control .gate-action{justify-self:start}
  .gate-card{padding:var(--s-24)}
}

/* Плашка сверки с ответами родителя. Живёт в раскрытии параметра; в сводке
   плашек нет — одиннадцать подряд читаются как сыпь (kev-quiz-spec.md §4). */
.param-echo{display:inline-block;margin-top:var(--s-8);
  padding:var(--s-4) var(--s-12);border-radius:var(--r-pill);
  font-size:var(--fs-label);font-weight:700;letter-spacing:.04em}
/* dg-low на bg-card даёт 3.81:1 — ниже 4.5:1 для 12px жирного текста;
   dg-low-ink на том же фоне даёт 5.76:1. */
.param-echo-match{background:var(--dg-low-ink);color:var(--bg-card)}
.param-echo-strong{background:var(--brand-soft);color:var(--dg-high-ink)}
.param-echo-differs{background:var(--energy);color:var(--energy-deep)}

/* Всплывающий список выбора ребёнка. Постоянно раскрытый список занимал весь
   первый экран — на встрече там должны быть заголовок и поле, а не 27 строк. */
.gate-combo{position:relative;min-width:0}
.gate-options{position:absolute;left:0;right:0;top:calc(100% + var(--s-8));z-index:10;
  max-height:340px;overflow-y:auto;padding:var(--s-8);
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--bg-card);box-shadow:var(--shadow)}
.gate-options[hidden]{display:none}
.gate-options button{display:block;width:100%;padding:12px var(--s-16);cursor:pointer;
  border:0;border-radius:var(--r-tag);background:transparent;color:var(--ink);
  font-family:var(--font);font-weight:500;font-size:var(--fs-body);text-align:left}
.gate-options button:hover,.gate-options button:focus-visible{background:var(--bg-warm)}
.gate-options button[aria-selected="true"]{background:var(--brand-soft);font-weight:700}

/* Строка под полем поиска: откуда список и насколько он свежий. Тон служебный —
   на встрече это подпись для менеджера, а не сообщение родителю. */
.gate-source {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted, #6B6357);
}
.gate-link {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--accent-ink, #116256);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gate-link:hover { text-decoration-thickness: 2px; }

/* --- таблица выбора ребёнка -------------------------------------------------
   Встреча идёт по демонстрации экрана, поэтому строки крупные, а тонких серых
   подписей нет. Таблица прокручивается вбок внутри своей рамки: колонок восемь,
   и на ноутбуке они не обязаны влезать все сразу. */
/* Экран выбора шире остальных: у .gate-picker ширина ограничена контейнером
   (min(--container,100%)), и на широком мониторе треть экрана простаивала, а
   таблица уезжала вбок. Здесь ограничение снимается — таблица занимает всю
   рабочую ширину. Перебивать max-width бесполезно: ограничивает width. */
.gate-board{width:100%;max-width:none}
/* Боковые поля гейта центрируют контент по --container (на 1440 это по 160 px).
   Для таблицы они лишние: она должна занимать экран, а не колонку по центру. */
#gate-body.gate-wide{padding-left:var(--s-32);padding-right:var(--s-32)}
.board-filters{display:flex;flex-wrap:wrap;gap:var(--s-12);align-items:center;margin-bottom:var(--s-16)}
.board-search{flex:1 1 320px;width:auto;margin-bottom:0}
.board-select{height:56px;padding:0 var(--s-16);border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--bg-card);color:var(--ink);
  font:500 var(--fs-body)/1 var(--font);cursor:pointer;max-width:260px}
.board-select:disabled{opacity:.5;cursor:default}
.board-select:focus-visible{outline:3px solid var(--energy-ink);outline-offset:3px}
.board-reset{flex:0 0 auto}

/* Плашка над фильтрами: состояние загрузки карт. Числа крупные — встреча идёт
   по демонстрации экрана, мелкие подписи там не читаются. */
.board-stats{display:flex;flex-wrap:wrap;gap:var(--s-12);margin-bottom:var(--s-16)}
.board-stat{flex:0 1 auto;min-width:150px;padding:var(--s-16) var(--s-24);
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg-card)}
.board-stat b{display:block;font-size:var(--fs-h2);font-weight:700;line-height:1.1;color:var(--ink)}
.board-stat span{display:block;margin-top:4px;font-size:var(--fs-caption);color:var(--ink-soft)}
.board-stat em{display:block;margin-top:6px;font-size:var(--fs-caption);font-style:normal;
  color:var(--accent-ink)}

.board-meta{margin:0 0 var(--s-12);font-size:var(--fs-caption);color:var(--ink-soft)}

.board-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--bg-card)}
.board{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.board th{position:sticky;top:0;z-index:1;padding:var(--s-16) var(--s-16);
  background:var(--bg-warm);color:var(--ink-soft);text-align:left;white-space:nowrap;
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* Тексту разрешено переноситься: имена педагогов и менеджеров бывают длинными,
   и при запрете переноса колонки выталкивали кнопку «Открыть» за край экрана.
   Неразрывными остаются только те, что рвать нельзя: возраст, дата и действие. */
.board td{padding:var(--s-16);border-top:1px solid var(--line);vertical-align:middle}
.board td:nth-child(2),.board td:nth-child(5){white-space:nowrap}
.board-child{min-width:7ch}
.board th:nth-child(3),.board th:nth-child(4),.board th:nth-child(6),
.board th:nth-child(7){width:14%}
.board tbody tr{cursor:pointer;transition:background var(--dur) var(--ease)}
.board tbody tr:hover,.board tbody tr:focus-visible{background:var(--brand-soft);outline:none}
.board tbody tr:focus-visible{box-shadow:inset 0 0 0 3px var(--energy-ink)}
.board-child{font-weight:700;color:var(--ink)}
.board-empty{color:var(--ink-soft)}
.board-go{text-align:right;white-space:nowrap;width:1%}
.board-open{display:inline-block;padding:8px var(--s-16);border-radius:var(--r-pill);
  background:var(--energy);color:var(--energy-ink);font-weight:700;font-size:var(--fs-caption);
  white-space:nowrap}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Сужение экрана: сначала поджимаем отступы, потом убираем колонки от менее
   важной к более важной. Убранное не теряется — по каждому из этих полей есть
   фильтр сверху. Опознать ребёнка на встрече хватает имени, возраста и родителя. */
@media (max-width:1100px){
  .board td,.board th{padding:var(--s-12)}
}
@media (max-width:980px){
  .board th:nth-child(7),.board td:nth-child(7){display:none}   /* Стадия */
}
@media (max-width:860px){
  .board th:nth-child(6),.board td:nth-child(6){display:none}   /* Менеджер */
}
@media (max-width:740px){
  .board th:nth-child(5),.board td:nth-child(5){display:none}   /* Занятие */
}
@media (max-width:720px){
  .board-select{max-width:none;flex:1 1 100%}
  .board-search{flex:1 1 100%}
  .board th:nth-child(4),.board td:nth-child(4){display:none}   /* Педагог */
  #gate-body.gate-wide{padding-left:var(--s-16);padding-right:var(--s-16)}
}