/*
 * Стиль «Чертёжный лист» (TECH.md, «Поиск и вёрстка»).
 * Все цвета, шрифты и размеры берутся из переменных ниже. Новый цвет сначала
 * появляется здесь, потом в разметке.
 */

/* Шрифты лежат у нас (static/fonts, лицензия OFL). Переменные версии: один
   файл на все начертания, кириллица и латиница отдельно, браузер берёт только
   нужный по unicode-range. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-cyrillic-wght-normal.fe2bd26ae82a.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-latin-wght-normal.3db826ed1c5d.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-cyrillic-wght-normal.615bf869ebeb.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.b058178d7f30.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #FFFFFF;
  --bg-2: #F2F3EF;
  --ink: #111418;
  --ink-2: #2B3036;
  --muted: #4A5057;
  --line: #D9DDDA;
  --grid: #E6E9E6;
  /* Акцент только заливкой с чёрным текстом: оранжевый текст на белом не
     проходит по контрасту. */
  --accent: #FF5A1F;
  --accent-tint: #FFF3EC;
  --ok: #0E7C66;
  /* Только ошибки в формах. В макетах красного нет, а ошибку нужно отличить. */
  --danger: #B42318;
  --dark: #111418;
  --dark-text: #F2F3EF;
  --dark-muted: #A9B0B6;
  --dark-line: #3A4048;
  /* Только ряды графиков: на одном графике бывает до пяти рядов, а сайту
     хватает одного акцента. Первые три ряда: акцент, текст, «готово». */
  --chart-4: #2F6FB5;
  --chart-5: #A0741A;

  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius: 4px;
  --radius-sm: 3px;
  --border: 1.5px solid var(--ink);
  --hair: 1px solid var(--line);
  --tap: 44px;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(40px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden сильнее классов с display: иначе .callout его перебивает. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.5 var(--font);
}

a { color: var(--ink); text-underline-offset: 4px; }
a:hover { color: #000; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

.icon { flex: none; vertical-align: middle; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); border-bottom: var(--hair); }
.section--tinted { background: var(--bg-2); }
.stack { display: flex; flex-direction: column; gap: 24px; }

.kicker {
  font: 400 13px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 560px; }
.note { font-size: 15px; color: var(--muted); }

.h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; font-weight: 800; letter-spacing: -0.025em; }
.h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; font-weight: 800; }
.h2--sm { font-size: 28px; line-height: 1.15; }
.h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.h4 { font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: 0; }
.section-head { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.section-head--row {
  max-width: none;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 24px;
}

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

/* --- Кнопки и метки ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: 600 16px/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { color: var(--ink); background: var(--bg-2); }
.btn--accent { background: var(--accent); border-color: var(--accent); font-weight: 700; }
.btn--accent:hover { background: var(--accent); border-color: var(--ink); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }
.btn--lg { min-height: 52px; padding: 0 22px; font-size: 18px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 48px;
  min-height: var(--tap);
  padding: 0 14px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: 500 16px/1 var(--font);
  justify-content: center;
}
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }

.tag {
  flex: none;
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  font: 400 12px/1.3 var(--mono);
}
.tag--solid { background: var(--ink); color: #fff; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-weight: 600; text-decoration-thickness: 2px; }

/* Миллиметровка: подбор темы, код входа, боковые блоки. */
.grid-paper {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* --- Шапка --------------------------------------------------------------- */

.site-header { border-bottom: var(--hair); background: var(--bg); }
.site-header__inner { display: flex; align-items: center; gap: 8px 32px; padding-block: 12px; }

.brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); text-decoration: none; }
.brand__name { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }

.site-nav { display: flex; gap: 0 24px; flex: 1 1 auto; }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 500; text-decoration: none; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; font-weight: 600; }
.site-actions { display: flex; align-items: center; gap: 8px 16px; }
.site-actions__login { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-weight: 500; text-decoration: none; }

/* Ссылки прячутся за кнопкой «Меню» в два шага. На планшете уходят только
   разделы, вход и «Подобрать тему» остаются в шапке. На телефоне за кнопкой
   всё, иначе ссылки занимают три строки. */
.site-menu { display: none; margin-left: auto; }
.site-menu > summary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 12px;
  border: var(--border); border-radius: var(--radius);
  font-weight: 600; cursor: pointer; list-style: none;
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu__panel {
  position: absolute; left: 0; right: 0; z-index: 10;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px var(--gutter) 20px;
  background: var(--bg); border-bottom: var(--border);
}
.site-menu__panel a { display: flex; align-items: center; min-height: var(--tap); font-weight: 500; text-decoration: none; }

@media (max-width: 1120px) {
  .site-header__inner { position: relative; gap: 8px 16px; }
  .site-nav { display: none; }
  .site-actions { margin-left: auto; }
  .site-menu { display: block; margin-left: 0; }
  .site-menu__panel .site-menu__extra { display: none; }
}

@media (max-width: 760px) {
  .site-actions { display: none; }
  .site-menu { margin-left: auto; }
  .site-menu__panel .site-menu__extra { display: flex; }
}

/* --- Главная: первый экран ---------------------------------------------- */

.hero { border-bottom: var(--hair); }
.hero__inner {
  display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start;
  padding-block: clamp(40px, 6vw, 88px);
}
.hero__text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.picker {
  flex: 1 1 520px; min-width: 0;
  border: var(--border); border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 20px;
}
.picker__head { display: flex; justify-content: space-between; gap: 12px; font: 400 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.picker fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.picker legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 15px; }
.picker__options { display: flex; flex-wrap: wrap; gap: 8px; }
.picker__form { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.picker__form fieldset, .picker__form .picker__head { align-self: stretch; }

.topic { background: var(--bg); border: var(--border); border-radius: var(--radius); overflow: hidden; }
.topic__bar {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 16px; background: var(--accent);
  font: 600 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.topic__body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.topic__title { font-size: 23px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.topic__why { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; }
.topic__why li { display: flex; align-items: center; gap: 6px; }
.topic__why .icon { color: var(--ok); stroke-width: 2.25; }
.topic__facts { margin: 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 8px 20px; font-size: 15px; }
.topic__facts dt { color: var(--muted); }
.topic__facts dd { margin: 0; }
.topic__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Размерная линия, как на чертеже. */
.dim { display: flex; align-items: center; gap: 8px; font: 400 12px/1 var(--mono); color: var(--muted); }
.dim::before, .dim::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ink); }
.dim { border-inline: 1.5px solid var(--ink); padding-block: 3px; }

/* --- Таблицы ------------------------------------------------------------- */

.table-scroll { overflow-x: auto; }
.table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 16px; }
.table thead th {
  padding: 12px 16px; text-align: left;
  font: 500 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.table tbody tr { border-top: var(--hair); }
.table tbody tr:last-child { border-bottom: var(--hair); }
.table th[scope="row"] { text-align: left; font-weight: 700; }
.table td, .table th[scope="row"] { padding: 18px 16px; vertical-align: top; }
.table :is(th, td):first-child { padding-left: 0; }
.table :is(th, td):last-child { padding-right: 0; }
.table--ruled { border-top: var(--border); }
.date { font: 600 15px/1.4 var(--mono); }
.date + .note { display: block; font-size: 14px; }

/* Таблица «кто что делает»: колонка платформы на оранжевой подложке. */
.who { overflow-x: auto; background: var(--bg); border: var(--border); border-radius: var(--radius); }
.who table { width: 100%; min-width: 760px; border-collapse: collapse; }
.who th, .who td { padding: 18px 20px; text-align: left; vertical-align: top; }
.who thead tr { border-bottom: var(--border); }
.who tbody tr + tr { border-top: var(--hair); }
.who__col { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.who__platform { background: var(--accent-tint); }
.who__step { display: block; font-size: 19px; font-weight: 700; }

/* На телефоне таблица становится карточками по шагам: в три колонки текст
   не помещается, а прокрутка вбок прячет колонку платформы. */
@media (max-width: 760px) {
  .who { overflow: visible; }
  .who table, .who tbody, .who tr, .who th, .who td { display: block; }
  .who table { min-width: 0; }
  .who thead { display: none; }
  .who tbody tr + tr { border-top: var(--border); }
  .who th[scope="row"] { padding: 16px 16px 8px; }
  .who td { padding: 8px 16px 14px; }
  .who td::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font: 500 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  }
}

/* --- Список направлений -------------------------------------------------- */

.directions { list-style: none; display: flex; flex-wrap: wrap; column-gap: 48px; border-top: var(--border); }
.directions li { flex: 1 1 440px; min-width: 0; display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: var(--hair); }
.directions__text { flex: 1 1 auto; min-width: 0; }
.directions__name { display: block; font-weight: 700; }
.directions__hint { display: block; font-size: 15px; color: var(--muted); }

/* --- Тёмный блок для родителей ------------------------------------------ */

.band-dark { background: var(--dark); color: var(--dark-text); }
.band-dark .kicker, .band-dark .note { color: var(--dark-muted); }
.band-dark .h2 { color: #fff; }
.band-dark__inner { display: flex; flex-wrap: wrap; gap: 40px 64px; padding-block: clamp(40px, 5vw, 80px); }
.band-dark__lead { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.promises { flex: 1 1 520px; min-width: 0; list-style: none; border-top: 1px solid var(--dark-line); }
.promises li { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--dark-line); }
.promises strong { display: block; color: #fff; }
.promises span { color: #C9CED3; }

/* --- Темы, подвал -------------------------------------------------------- */

.split { display: flex; flex-wrap: wrap; gap: 16px 64px; }
.split > :first-child { flex: 1 1 260px; min-width: 0; }
.split > :last-child { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; font-size: 18px; color: var(--ink-2); }

.grades { display: flex; flex-wrap: wrap; gap: 12px; }
.grades a {
  flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px;
  padding: 18px 20px; background: var(--bg); border: var(--border); border-radius: var(--radius);
  text-decoration: none;
}
.grades a:hover { background: var(--accent-tint); }
.grades b { font-size: 40px; font-weight: 800; line-height: 1; }
.grades span { font-size: 15px; color: var(--muted); }
.link-cloud { line-height: 2.1; }

.site-footer { border-top: var(--border); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 32px 64px; padding-block: 48px 32px; }
.site-footer__about { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer nav { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.site-footer nav a { padding: 4px 0; text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer__legal { flex: 1 1 100%; padding-top: 20px; border-top: var(--hair); font: 400 13px/1.4 var(--mono); color: var(--muted); }

/* --- Карточки и формы ---------------------------------------------------- */

main { flex: 1 0 auto; }
.page-tinted { background: var(--bg-2); }

.card {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(20px, 2.4vw, 32px);
  /* Только цвет, без shorthand: иначе .grid-paper на карточке потеряет сетку. */
  background-color: var(--bg); border: var(--border); border-radius: var(--radius);
}
.card > .btn { align-self: flex-start; }

.form { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.field { align-self: stretch; display: flex; flex-direction: column; gap: 6px; }
.field__label { padding: 0; font-weight: 600; font-size: 15px; }
.field__error { color: var(--danger); font-size: 15px; font-weight: 500; }
.input {
  width: 100%; min-height: 52px; padding: 0 14px;
  border: var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  font: 400 18px/1.2 var(--font);
}
.input[aria-invalid="true"] { border-color: var(--danger); }
.input--code { font: 600 22px/1.2 var(--mono); text-align: center; }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: var(--tap); cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); }

.choice { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
.options { display: flex; flex-wrap: wrap; gap: 8px; }
.chip--choice { position: relative; cursor: pointer; }
.chip--choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip--choice:has(input:checked) { background: var(--ink); color: #fff; }
.chip--choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.note--icon { display: flex; align-items: center; gap: 8px; }
.link-back { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--tap); font: 400 13px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.notices { display: flex; flex-direction: column; gap: 8px; padding-top: 24px; }
.notice {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--bg); border: var(--hair); border-left: 4px solid var(--ok); border-radius: var(--radius);
}
.notice .icon { color: var(--ok); }

/* Ссылка для входа прямо на странице, только в разработке. */
.dev-note { padding: 12px 16px; border: 1.5px dashed var(--muted); border-radius: var(--radius); font: 400 14px/1.5 var(--mono); overflow-wrap: anywhere; }

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

.auth { display: flex; flex-direction: column; gap: 24px; padding-block: clamp(32px, 5vw, 64px); }
.auth--narrow { max-width: calc(600px + 2 * var(--gutter)); }
.auth__panels { display: flex; flex-wrap: wrap; gap: 24px; }
.auth__panel { flex: 1 1 380px; min-width: 0; }

/* --- Шапка кабинета ------------------------------------------------------ */

.account { margin-left: auto; display: flex; align-items: center; gap: 4px 12px; }
.account__who { font: 400 14px/1.3 var(--mono); color: var(--muted); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); padding: 0;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer;
}
.icon-btn:hover { background: var(--bg-2); }

@media (max-width: 480px) {
  .account__who { display: none; }
}

/* --- Кабинет ------------------------------------------------------------- */

.cabinet { display: flex; flex-direction: column; gap: 24px; padding-block: 32px 64px; }
.cabinet__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.cabinet__empty { max-width: 640px; }
.cabinet__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.cabinet__main { flex: 2 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.cabinet__side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* Дети без имён различаются классом, кодом и знаком: круг, треугольник, квадрат. */
.kids { display: flex; flex-wrap: wrap; gap: 12px; }
.kid {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 18px;
  border: var(--border); border-radius: var(--radius); background: var(--bg); text-decoration: none;
}
.kid:hover { background: var(--accent-tint); }
.kid[aria-current="page"] { background: var(--ink); color: #fff; }
.kid__grade { display: block; font-weight: 700; }
.kid__code { display: block; font: 400 13px/1.3 var(--mono); color: var(--muted); }
.kid[aria-current="page"] .kid__code { color: var(--dark-muted); }

.mark { flex: none; width: 22px; height: 22px; }
.mark--0 { background: var(--accent); border-radius: 50%; }
.mark--1 { background: var(--ok); clip-path: polygon(50% 4%, 98% 94%, 2% 94%); }
.mark--2 { background: var(--ink); border-radius: 2px; transform: scale(0.82); }
.kid[aria-current="page"] .mark--2 { background: var(--dark-text); }

.howto { list-style: none; border-top: var(--hair); }
.howto li { display: flex; gap: 16px; padding: 14px 0; border-bottom: var(--hair); }
.howto__n { font: 400 15px/1.6 var(--mono); color: var(--muted); }

.code-plate {
  padding: 14px 16px; border: var(--hair); border-radius: var(--radius-sm);
  font: 600 clamp(18px, 5vw, 22px)/1.3 var(--mono); text-align: center; overflow-wrap: anywhere;
}
.code-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Рядом, пока обе кнопки помещаются в строку, на телефоне одна под другой. */
.code-actions > * { flex: 1 1 150px; }
.code-actions .btn { width: 100%; white-space: nowrap; }
.qr > summary { list-style: none; }
.qr > summary::-webkit-details-marker { display: none; }
.qr[open] { flex-basis: 100%; }
.qr__body { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; text-align: center; }
.qr__img { display: block; width: 100%; max-width: 220px; height: auto; }

/* --- Подбор темы --------------------------------------------------------- */

.podbor { display: flex; flex-direction: column; gap: 24px; padding-block: 32px 64px; }
.podbor__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.podbor__form { flex: 1 1 360px; min-width: 0; gap: 20px; }
.podbor__results { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.podbor__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* Карточка целиком нажимается: ссылка заголовка растянута на всю карточку. */
.result { position: relative; background: var(--bg); border: var(--border); border-radius: var(--radius); overflow: hidden; }
.result:hover { background: var(--accent-tint); }
.result__bar {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px;
  background: var(--bg-2); border-bottom: var(--hair);
  font: 600 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.result--full .result__bar { background: var(--accent); border-bottom-color: var(--accent); }
.result__kind { display: inline-flex; align-items: center; gap: 8px; }
.result__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 20px; }
.result__title { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.result__title a { text-decoration: none; }
.result__title a::after { content: ""; position: absolute; inset: 0; }
.result__title a:focus-visible { outline: 0; }
.result:has(a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.result__meta { font: 400 13px/1.4 var(--mono); color: var(--muted); }

/* --- Страница темы ------------------------------------------------------- */

.topic-page { display: flex; flex-direction: column; gap: 16px; padding-block: 24px 64px; }
.topic-page__head { max-width: 880px; margin-bottom: 8px; }
.topic-page__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.topic-page__main { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.topic-page__side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.facts { margin: 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 10px 24px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
@media (max-width: 520px) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts dd { margin-bottom: 10px; }
}

.fit-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.fit-list li + li { padding-top: 12px; border-top: var(--hair); }

.callout {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  background: var(--bg); border: var(--hair); border-left: 4px solid var(--ink); border-radius: var(--radius);
}
.callout--warn { border-left-color: var(--accent); }

/* «Кто что делает» в одной теме или проекте, как в макете кабинета. */
.who-card { background: var(--bg); border: var(--border); border-radius: var(--radius); overflow: hidden; }
.who-card__head { padding: 18px clamp(20px, 2.4vw, 32px); border-bottom: var(--border); }
.who-card__cols { display: flex; flex-wrap: wrap; }
.who-card__col { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px clamp(20px, 2.4vw, 32px); }
.who-card__list { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.who-card__row { display: flex; gap: 12px; padding: 14px clamp(20px, 2.4vw, 32px); border-top: var(--hair); background: var(--bg-2); }

.input--area { min-height: 0; padding: 12px 14px; line-height: 1.4; resize: vertical; }
.input--date { max-width: 240px; font-family: var(--mono); }

/* --- Проект: срок и шаги ------------------------------------------------- */

.project-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; }
.project-head__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.countdown { flex: none; text-align: right; }
.countdown__n { display: block; font: 600 44px/1 var(--mono); letter-spacing: -0.02em; }
.countdown__label { display: block; font-size: 15px; color: var(--muted); }
.project-steps { display: flex; flex-direction: column; gap: 12px; }
.project-steps__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

.progress { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.progress__step { flex: 1 1 90px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.progress__bar { height: 8px; border: 1.5px solid var(--dark-muted); border-radius: 1px; }
.progress__label { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); }
.progress__step.is-done .progress__bar { background: var(--ink); border-color: var(--ink); }
.progress__step.is-done .progress__label { color: var(--ink); }
.progress__step.is-done .icon { color: var(--ok); stroke-width: 3; }
.progress__step.is-current .progress__bar { background: var(--accent); border-color: var(--ink); }
.progress__step.is-current .progress__label { color: var(--ink); font-weight: 700; }

/* --- Рабочее место ребёнка ----------------------------------------------- */

.workspace-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; }
.workspace-head__text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.workspace-head__title { font-size: 20px; line-height: 1.3; font-weight: 700; }

.progress__link { display: flex; flex-direction: column; gap: 8px; min-height: var(--tap); color: inherit; text-decoration: none; }
.progress__link:hover .progress__label { text-decoration: underline; text-underline-offset: 4px; }
.progress__step.is-shown .progress__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.step-title { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.step-title__who { display: flex; flex-wrap: wrap; gap: 8px; }
.step-title__who p {
  flex: 1 1 320px; min-width: 0; display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; background: var(--bg); border: var(--hair); border-radius: var(--radius);
}
.step-title__who p.who__platform { background: var(--accent-tint); }
.step-title__who .icon { margin-top: 3px; }

.plan-form__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.work-form__row { display: flex; flex-wrap: wrap; gap: 16px; align-self: stretch; }
.work-form__row .field { flex: 0 1 220px; }
.input--minutes { max-width: 140px; font-family: var(--mono); }

.advice__head { display: flex; align-items: center; gap: 10px; }
.advice__weak { padding: 10px 14px; background: var(--accent-tint); border-left: 4px solid var(--accent); }
.earlier > summary { cursor: pointer; list-style-position: inside; }
.earlier__item { padding-top: 12px; border-top: var(--hair); display: flex; flex-direction: column; gap: 4px; }
.earlier__text { font-size: 15px; }

/* Сообщения после действия: успех зелёный, ошибка и предупреждение оранжевые. */
.notice--warning, .notice--error { border-left-color: var(--accent); }
.notice--warning .icon, .notice--error .icon { color: var(--ink); }

/* --- Дневник ------------------------------------------------------------- */

.entries { list-style: none; display: flex; flex-direction: column; border-top: var(--hair); }
.entry { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: var(--hair); }
.entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.entry__when { font: 400 14px/1.4 var(--mono); color: var(--muted); }
.entry__text { min-width: 0; }
.entry__more > summary { cursor: pointer; font-size: 15px; color: var(--muted); }
.entry__more .facts { margin-top: 10px; font-size: 15px; }
.entry__flag { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.entries--compact .entry { flex-direction: row; flex-wrap: wrap; gap: 4px 20px; padding: 12px 0; }
.entries--compact .entry__when { flex: 0 0 150px; }
.entries--compact .entry__text { flex: 1 1 300px; }
.diary-page .entries { background: var(--bg); border: var(--border); border-radius: var(--radius); padding: 0 clamp(16px, 2.4vw, 28px); }
.diary-page .entry:last-child { border-bottom: 0; }

.badge {
  display: inline-block; padding: 2px 8px; border: 1px solid var(--ink); border-radius: var(--radius-sm);
  font: 500 12px/1.4 var(--mono); letter-spacing: 0.04em; vertical-align: 1px;
}
.badge--child { background: var(--ink); color: #fff; }
.badge--model { background: var(--accent-tint); }
.badge--service { border-color: var(--line); color: var(--muted); }
.badge--parent { background: var(--bg-2); }

.week { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: var(--hair); }

/* На телефоне шаги в одну строку: полосы без подписей, название шага и так
   стоит заголовком ниже (TECH.md: работа первой на экране). Подписи остаются
   для экранного диктора. */
@media (max-width: 600px) {
  .progress { flex-wrap: nowrap; }
  .progress__step { flex: 1 1 0; justify-content: center; min-height: var(--tap); }
  .progress__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .progress__link { justify-content: center; }
  .step-title__who p { padding: 8px 12px; font-size: 15px; }
}

/* --- Лаборатория веб-страниц --------------------------------------------- */

.tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; border-bottom: var(--hair); }
.tabs__item {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap);
  font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tabs__item[aria-current="page"] { border-bottom-color: var(--accent); }

.lab { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.lab__preview { flex: 3 1 560px; min-width: 0; }
.lab__side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.lab__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }

/* Сцена под страницу: на «телефоне» ширина как у настоящего телефона. */
.lab__stage { display: flex; justify-content: center; padding: 12px; background: var(--bg-2); border: var(--hair); border-radius: var(--radius-sm); }
.lab__frame { display: block; width: 100%; height: 600px; border: var(--border); border-radius: var(--radius-sm); background: #fff; }
.lab__stage--telefon .lab__frame { width: 375px; max-width: 100%; height: 667px; }
.lab__empty { padding: 32px 24px; border: var(--hair); border-radius: var(--radius-sm); }
.lab__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.lab__versions { display: flex; flex-direction: column; gap: 8px; }
.lab__pending { display: flex; gap: 14px; align-items: flex-start; }
.lab__pending > div { display: flex; flex-direction: column; gap: 6px; }

.lab__spinner {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
  animation: lab-spin 0.9s linear infinite;
}
@keyframes lab-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lab__spinner { animation: none; border-color: var(--accent); } }

.chip--small { min-height: 36px; min-width: 40px; padding: 0 12px; font-size: 15px; text-decoration: none; }
.chip[aria-current="true"] { background: var(--ink); color: #fff; }
.callout .btn { margin-left: auto; }

/* --- Публикация ---------------------------------------------------------- */

.address { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border: var(--hair); border-radius: var(--radius-sm); background: var(--bg); }
.address__text { flex: 1 1 auto; min-width: 0; font: 400 14px/1.4 var(--mono); overflow-wrap: anywhere; }

.slug-input { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.slug-input .input { flex: 1 1 200px; width: auto; font-family: var(--mono); }
.slug-input__part { font: 400 15px/1.4 var(--mono); color: var(--muted); }

/* --- Оформление и выгрузка ----------------------------------------------- */

.title-fields { display: flex; flex-direction: column; gap: 6px; }
.title-fields .input { min-height: var(--tap); font-size: 16px; }
.ai-choice { gap: 12px; padding-top: 16px; border-top: var(--hair); }

.stats { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.stats > div { flex: 1 1 150px; padding: 14px 16px; background: var(--bg); border: var(--border); border-radius: var(--radius); }
.stats dt { font: 400 12px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.stats dd { margin: 4px 0 0; font: 600 32px/1 var(--mono); }

/* --- Защита: слайды и репетиция с жюри ----------------------------------- */

.from-work > summary { cursor: pointer; font-size: 15px; color: var(--muted); }
.from-work > p { margin-top: 8px; padding: 10px 14px; font-size: 15px; background: var(--bg-2); border-radius: var(--radius-sm); }
.jury__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.jury__item { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.jury__q { font-weight: 600; }
.jury__answer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.jury__answer .input { align-self: stretch; }
.jury__review { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: var(--hair); border-radius: var(--radius); }

/* --- Подбор темы через нейросеть ----------------------------------------- */

.ai-form { gap: 24px; }
.ai-check { align-items: center; }
.ai-check .icon { color: var(--ok); }
.ai-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; }
.ai-card__kind, .ai-card__tag { display: inline-flex; align-items: center; gap: 6px; }
.ai-card__tag { color: var(--ink); }
.ai-card__question { display: flex; gap: 8px; font-weight: 600; }
.ai-card__question .icon { flex: none; margin-top: 3px; color: var(--accent); }
.ai-card__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.ai-card__chips li {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  font-size: 14px; background: var(--bg-2); border: var(--hair); border-radius: 999px;
}
.ai-card__pros { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ai-card__plus, .ai-card__minus { flex: 1 1 200px; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.ai-card__plus li, .ai-card__minus li { display: flex; gap: 6px; }
.ai-card__plus .icon, .ai-card__minus .icon { flex: none; margin-top: 2px; }
.ai-card__plus .icon { color: var(--ok); stroke-width: 2.25; }
.ai-card__minus .icon { color: var(--accent); }
.ai-card__facts { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; border-top: var(--hair); padding-top: 14px; }
.ai-card__fact { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 4px 16px; }
.ai-card__fact dt { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); }
.ai-card__fact dt .icon { flex: none; margin-top: 2px; color: var(--ink); }
.ai-card__fact dd { margin: 0; }
.ai-card__fact--warn { padding: 8px 10px; background: var(--accent-tint); border-radius: var(--radius-sm); }
@media (max-width: 600px) { .ai-card__fact { grid-template-columns: minmax(0, 1fr); } }

/* Обоснование для жюри: под карточкой темы и в проекте. Строже карточки:
   пункты списком, спрос столбиками, ссылки на похожие работы. */
.basis { border-top: var(--border); padding-top: 12px; }
.basis__summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; list-style-position: outside; }
.basis__title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.basis__facts { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; font: 400 13px/1.4 var(--mono); color: var(--muted); }
.basis__facts span { display: inline-flex; align-items: center; gap: 4px; }
.basis__body { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
.basis__items { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.basis__item { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 4px 16px; }
.basis__item dt { font-weight: 600; }
.basis__item dd { margin: 0; }
@media (max-width: 600px) { .basis__item { grid-template-columns: minmax(0, 1fr); } }
.basis__demand { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--bg-2); border: var(--hair); border-radius: var(--radius); font-size: 15px; }
.basis__bars { display: block; width: 100%; height: 56px; }
.basis__bars rect { fill: var(--line); }
.basis__bars rect.is-peak { fill: var(--accent); }
.basis__axis { display: flex; justify-content: space-between; font: 400 12px/1 var(--mono); color: var(--muted); }
.basis__label, .requirements .basis__label { font: 400 13px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.basis__sources ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.basis__sources a { overflow-wrap: anywhere; }

.requirements { display: flex; flex-direction: column; gap: 8px; }
.requirements > summary { cursor: pointer; }
.requirements__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.thinking--inline { max-width: none; display: flex; flex-direction: column; gap: 12px; }
.thinking--inline .h4 { flex: 1 1 auto; }

/* «Думаю»: точки, полоса и этапы. Без движения, если человек его отключил. */
.thinking { max-width: 720px; }
.thinking__head { display: flex; align-items: center; gap: 16px; }
.thinking__head .h2 { flex: 1 1 auto; }
.thinking__timer { font: 600 22px/1 var(--mono); color: var(--muted); }
.thinking__dots { display: inline-flex; gap: 6px; }
.thinking__dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: think-dot 1.2s ease-in-out infinite; }
.thinking__dots span:nth-child(2) { animation-delay: 0.15s; }
.thinking__dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes think-dot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.35; } 40% { transform: translateY(-8px); opacity: 1; } }
.thinking__bar { position: relative; height: 6px; overflow: hidden; background: var(--bg-2); border: var(--hair); border-radius: 999px; }
.thinking__bar span { position: absolute; inset: 0 auto 0 0; width: 35%; background: var(--accent); border-radius: 999px; animation: think-bar 1.6s ease-in-out infinite; }
@keyframes think-bar { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.thinking__steps { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.thinking__steps li { display: flex; align-items: center; gap: 10px; color: var(--muted); transition: color 0.3s; }
.thinking__steps li::before { content: ""; flex: none; width: 10px; height: 10px; border: 1.5px solid var(--line); border-radius: 50%; }
.thinking__steps li.is-current { color: var(--ink); font-weight: 600; }
.thinking__steps li.is-current::before { border-color: var(--accent); background: var(--accent); animation: think-pulse 1s ease-in-out infinite; }
.thinking__steps li.is-done { color: var(--ink); }
.thinking__steps li.is-done::before { border-color: var(--ok); background: var(--ok); }
@keyframes think-pulse { 50% { transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) {
  .thinking__dots span, .thinking__bar span, .thinking__steps li.is-current::before { animation: none; }
  .thinking__bar span { width: 100%; opacity: 0.5; }
}

/* --- Пояснительная записка ----------------------------------------------- */

.taken { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.taken li { display: flex; gap: 8px; }
.taken .icon { flex: none; margin-top: 2px; color: var(--accent); }
.taken li.is-ready .icon { color: var(--ok); stroke-width: 2.25; }

/* --- Исследование: методика, таблицы замеров, графики --------------------- */

.field--short .input { max-width: 240px; }
.input--file { min-height: var(--tap); padding: 9px 10px; font-size: 15px; }
.link-list { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.file-list { list-style: none; display: flex; flex-direction: column; }
.grid-form { align-items: flex-start; }
.grid-form > .field, .grid-form > .choice { align-self: stretch; }

/* Сетка таблицы: на телефоне прокручивается вбок внутри рамки, страница стоит. */
/* position: подписи для диктора стоят абсолютно, без него они вылезают за рамку
   и раздвигают страницу на телефоне. */
.grid-edit__scroll { position: relative; align-self: stretch; overflow-x: auto; background: var(--bg); border: var(--hair); border-radius: var(--radius-sm); }
.grid-edit { min-width: 100%; border-collapse: collapse; }
.grid-edit th, .grid-edit td { padding: 4px; vertical-align: top; border-bottom: var(--hair); }
.grid-edit thead th { text-align: left; background: var(--bg-2); border-bottom: var(--border); }
.grid-edit tbody tr:last-child :is(th, td) { border-bottom: 0; }
.grid-edit .input { min-height: 40px; padding: 6px 8px; font-size: 16px; }
.grid-edit__n { width: 36px; text-align: center; vertical-align: middle; font: 400 13px/1.4 var(--mono); color: var(--muted); }
.grid-edit tbody .grid-edit__n { vertical-align: middle; }
.grid-edit__head { min-width: 132px; font-weight: 600; }
.grid-edit__unit { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.grid-edit .grid-edit__unit-input { flex: 1 1 auto; min-width: 80px; font-family: var(--mono); font-size: 14px; }
.grid-edit__cell { width: 100%; min-width: 88px; font-family: var(--mono); }
.grid-edit__del { flex: none; width: 40px; height: 40px; color: var(--muted); }
.grid-edit__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Варианты в две строки: у метки межстрочный 1, длинный текст слипается. */
.grid-form .chip--choice { padding-block: 8px; line-height: 1.25; text-align: left; justify-content: flex-start; }

/* График: геометрия из apps/research/charts.py, цвета здесь. На телефоне
   свой узкий SVG, чтобы подписи читались и график не уезжал за край. */
.chart { margin: 0; align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.chart__scroll { overflow-x: auto; }
.chart__svg { display: block; width: 100%; min-width: 420px; max-width: 760px; height: auto; }
.chart__svg--narrow { display: none; }
@media (max-width: 600px) {
  .chart__svg--wide { display: none; }
  .chart__svg--narrow { display: block; min-width: 0; }
}
.chart__grid { stroke: var(--grid); stroke-width: 1; }
.chart__axis { stroke: var(--ink); stroke-width: 1.5; }
.chart__tick { font: 400 13px var(--mono); fill: var(--muted); }
.chart__tick--y { text-anchor: end; }
.chart__tick--x { text-anchor: middle; }
.chart__title { font: 600 13px var(--font); fill: var(--ink); }
.chart__title--x { text-anchor: end; }
.chart__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart__dot, .chart__bar { stroke: var(--ink); stroke-width: 1.5; }
.chart__whisker { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.chart__mark:hover .chart__bar, .chart__mark:hover .chart__dot { stroke-width: 3; }
.chart__line.s1 { stroke: var(--accent); }
.chart__line.s2 { stroke: var(--ink); }
.chart__line.s3 { stroke: var(--ok); }
.chart__line.s4 { stroke: var(--chart-4); }
.chart__line.s5 { stroke: var(--chart-5); }
.chart__dot.s1, .chart__bar.s1 { fill: var(--accent); }
.chart__dot.s2, .chart__bar.s2 { fill: var(--ink); }
.chart__dot.s3, .chart__bar.s3 { fill: var(--ok); }
.chart__dot.s4, .chart__bar.s4 { fill: var(--chart-4); }
.chart__dot.s5, .chart__bar.s5 { fill: var(--chart-5); }
.chart__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.chart__legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart__swatch { width: 12px; height: 12px; border: 1.5px solid var(--ink); border-radius: 2px; }
.chart__swatch.s1 { background: var(--accent); }
.chart__swatch.s2 { background: var(--ink); }
.chart__swatch.s3 { background: var(--ok); }
.chart__swatch.s4 { background: var(--chart-4); }
.chart__swatch.s5 { background: var(--chart-5); }

.calc { width: 100%; border-collapse: collapse; font-size: 15px; }
.calc th, .calc td { padding: 8px 10px; text-align: left; border-bottom: var(--hair); }
.calc :is(th, td):first-child { padding-left: 0; }
.calc thead th { font: 400 12px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: var(--border); }
.calc td { font-family: var(--mono); white-space: nowrap; }
.calc__facts { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

.data-card__head { display: flex; flex-direction: column; gap: 4px; }
.data-card__head a { text-decoration: none; }
.data-card__head a:hover { text-decoration: underline; }

/* Бланк для тетради: на печати остаётся только лист. */
.blank__actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.blank__sheet { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 40px); background: var(--bg); border: var(--border); border-radius: var(--radius); }
.blank__line { font-size: 15px; }
.blank__method { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.blank__method div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 12px; }
.blank__method dt { font-weight: 600; }
.blank__method dd { margin: 0; }
.blank__table { width: 100%; border-collapse: collapse; }
.blank__table th, .blank__table td { height: 44px; padding: 8px; text-align: left; font-size: 15px; border: 1.5px solid var(--ink); }
.blank__table th { background: var(--bg-2); }
.blank__notes { height: 160px; border: 1.5px solid var(--ink); }
@media (max-width: 600px) { .blank__method div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media print {
  .site-header, .site-footer, .notices, .no-print { display: none; }
  body, .page-tinted { background: #fff; }
  .cabinet { padding: 0; }
  .blank__sheet { padding: 0; border: 0; }
  .blank__table th { background: none; }
}
a.chip { text-decoration: none; }

/* --- Опрос: анкета в кабинете и страница для участников ------------------ */

.poll { max-width: calc(760px + 2 * var(--gutter)); padding-block: 32px 64px; }
.poll__card { gap: 24px; }
.poll__intro { font-size: 18px; }
.poll__consent, .poll__q { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.poll__consent { padding: 16px; background: var(--accent-tint); border-radius: var(--radius); }
.poll__consent legend, .poll__q legend { padding: 0; margin-bottom: 8px; }
.poll__text { font-weight: 700; font-size: 18px; }
.poll__experiment { display: flex; flex-direction: column; gap: 12px; }
.poll__frame { height: 560px; }
.poll-edit__q { margin: 0; padding: 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; align-self: stretch; border: var(--hair); border-radius: var(--radius); }
.poll-edit__q legend { padding: 0 6px; }
.poll-edit__locked { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.poll-edit__list { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.poll-result { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: var(--hair); }
.poll-result__texts { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }

/* --- Материалы: фото, файлы, записи интервью ----------------------------- */

.materials { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.material { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.material__photo { flex: 0 0 200px; display: block; border: var(--hair); border-radius: var(--radius-sm); overflow: hidden; }
.material__photo img { display: block; width: 100%; height: auto; }
.material__icon { flex: 0 0 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: var(--bg-2); border-radius: var(--radius-sm); color: var(--ink); }
.material__body { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.material__body h2 a { text-decoration: none; }
.material__flags { display: flex; flex-direction: column; gap: 4px; }
.material__full { display: block; width: 100%; height: auto; border: var(--hair); border-radius: var(--radius-sm); }
.material__audio { width: 100%; }
.material__text { min-height: 280px; font-size: 16px; }
@media (max-width: 600px) { .material__photo { flex-basis: 100%; } }

/* --- Деталь для 3D-печати: просмотр в лаборатории ------------------------ */

.part { display: flex; flex-direction: column; gap: 12px; }
.part__stage { background: var(--bg-2); border: var(--hair); border-radius: var(--radius-sm); }
/* touch-action: палец крутит деталь, а не страницу. */
.part__canvas { display: block; width: 100%; height: clamp(300px, 55vw, 520px); touch-action: none; cursor: grab; }
.part__code > summary { cursor: pointer; font-size: 15px; color: var(--muted); }
.part__code pre { margin: 8px 0 0; max-height: 320px; overflow: auto; padding: 12px; font: 400 13px/1.5 var(--mono); background: var(--bg-2); border-radius: var(--radius-sm); }

/* --- Подпись автора под меню главной ------------------------------------- */
/* Текст в content, а не в HTML: поисковики его не индексируют (public/_dedication.html). */

.dedication { background: var(--accent-tint); border-bottom: var(--hair); }
.dedication__inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 7px; padding-block: 9px; font-size: 15px; font-weight: 500; text-align: center; color: var(--ink-2); }
.dedication__a::before { content: "Сделано Зарифом Рафаэльевичем с"; }
.dedication__b::before { content: "для детей, чтобы помочь с проектом"; }
.dedication .icon { fill: var(--accent); stroke: var(--ink); stroke-width: 1.5; }

/* --- «Как устроено»: код из лаборатории по частям ------------------------ */

.how-langs { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.how-langs li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 4px solid var(--accent); }
.how-langs span { font-size: 15px; color: var(--muted); }
.how-pieces { padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.how-pieces li { display: flex; flex-direction: column; gap: 4px; }
.how-pieces__code { font-size: 14px; overflow-wrap: anywhere; }
.how-pieces__code code, .how-words code { font: 500 14px/1.4 var(--mono); padding: 1px 5px; background: var(--bg-2); border-radius: var(--radius-sm); }
.how-check { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: var(--hair); }
.how-part { gap: 12px; }
.how-part__summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; list-style-position: outside; }
.how-words { display: flex; flex-direction: column; gap: 6px; }
.how-words__list { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 6px 16px; font-size: 14px; }
.how-words__list div { display: flex; gap: 8px; align-items: baseline; }
.how-words__list dd { margin: 0; color: var(--ink-2); }
/* Код с номерами строк: номера рисует CSS, при копировании их нет. */
.code { margin: 0; max-height: 480px; overflow: auto; padding: 12px 14px; font: 400 13px/1.55 var(--mono); background: var(--bg-2); border: var(--hair); border-radius: var(--radius-sm); counter-reset: line; }
.code__line::before { counter-increment: line; content: counter(line); display: inline-block; width: 3.5ch; margin-right: 1.5ch; text-align: right; color: var(--muted); user-select: none; }

/* --- Защита голосом ------------------------------------------------------ */

.recorder { display: flex; flex-direction: column; gap: 8px; }
.recorder__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.recorder__time { font-size: 22px; font-weight: 600; }
.recorder__file > summary { cursor: pointer; font-size: 15px; color: var(--muted); }
.recorder__file form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.talk-facts { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.talk-facts li { display: flex; gap: 8px; align-items: flex-start; }
.talk-facts .icon { flex: none; margin-top: 2px; }
.talk-facts li.is-good .icon { color: var(--ok); }
.talk-facts li.is-bad .icon { color: var(--accent); }
.jury__voice { width: 100%; max-width: 420px; height: 40px; }

/* --- План до защиты ------------------------------------------------------ */

.plan-list { list-style: none; display: flex; flex-direction: column; border-top: var(--hair); }
.plan-list__item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: var(--hair); }
.plan-list__mark { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 var(--mono); border: 1.5px solid var(--line); border-radius: 50%; }
.plan-list__title { flex: 1 1 auto; min-width: 0; }
.plan-list__due { flex: none; font-size: 14px; color: var(--muted); }
.plan-list__item.is-done .plan-list__mark { border-color: var(--ok); color: var(--ok); }
.plan-list__item.is-done .plan-list__title { color: var(--muted); }
.plan-list__item.is-now .plan-list__mark { background: var(--accent); border-color: var(--ink); }
.plan-list__item.is-now .plan-list__title { font-weight: 700; }
.plan-list__item.is-late .plan-list__mark { background: var(--accent-tint); border-color: var(--accent); }
.plan-list__item.is-late .plan-list__due { color: var(--ink); font-weight: 600; }

/* --- Условия оплаты и счётчик расходов ----------------------------------- */

/* Окно после входа: пока родитель не ответил, дальше кабинет не пускает. */
.terms { display: flex; justify-content: center; padding-block: clamp(24px, 4vw, 56px) 64px; }
.terms__window { width: 100%; max-width: 760px; gap: 20px; }
.terms__lead { align-items: center; border-left-color: var(--accent); font-weight: 600; }
.terms__lead .icon { flex: none; }
.terms__part { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: var(--hair); }
.terms__list { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; }
.terms__prices { font-size: 15px; }
.terms__prices dd { text-align: right; white-space: nowrap; }
.terms__answer { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
@media (max-width: 520px) {
  .terms__answer .btn { flex: 1 1 100%; justify-content: center; }
  .terms__prices dd { text-align: left; }
}

.meter__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.meter__rub { font: 600 32px/1 var(--mono); }
.meter__lines { list-style: none; display: flex; flex-direction: column; border-top: var(--hair); font-size: 15px; }
.meter__lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: var(--hair); }
.meter__lines .mono { flex: none; }

/* --- Документы: политика и оферта ---------------------------------------- */

.legal { padding-block: clamp(32px, 5vw, 64px); }
.legal__doc { max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.legal__doc h2 { margin-top: 18px; }
.legal__doc ul { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; }
.legal__lead { font-size: 18px; font-weight: 500; color: var(--ink-2); }
.legal__meta { font: 400 14px/1.5 var(--mono); color: var(--muted); }
.legal__operator { margin-top: 24px; padding-top: 16px; border-top: var(--hair); }