/* Хроника-Школа · слой «Стол» для публичных страниц.
   Подключается ПОСЛЕ css/tokens.css и после инлайнового <style> страницы,
   поэтому перекрывает прежние правила при равной специфичности.
   Источник компонентов — прототип docs/ux/stol/stol.css.
   Ни одного жёсткого цвета: только роли токенов. */

/* Прототип «Стол» — дашбордный интерфейс «Хроники-Школы».
   Цвета только из токенов: ни одного жёсткого hex, кроме прозрачных теней.
   Сетка резиновая, во всю ширину окна: центральной колонки нет нигде. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-head); font-weight: var(--fw-head); line-height: var(--lh-head); margin: 0; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0; }
small { font-size: var(--fs-small); color: var(--ink-2); }
button, input, select, textarea { font-family: inherit; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm);
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ================= верхняя панель во всю ширину ================= */
.topbar {
  position: sticky; top: 0; z-index: 40; background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--pad); min-height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--ink);
  font: 800 18px/1 var(--font-head); white-space: nowrap; flex: none; }
.brand .mark { width: 36px; height: 36px; border-radius: 11px; background: var(--accent-bright);
  color: var(--accent-bright-ink); display: grid; place-items: center; flex: none; }
.brand .mark svg { width: 23px; height: 23px; display: block; }
.mainnav { display: flex; gap: 2px; align-items: center; overflow: hidden; }
.mainnav button {
  display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--sp-4);
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-2);
  font: 600 var(--fs-small)/1 var(--font-sans); cursor: pointer; white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.mainnav button:hover { background: var(--surface-2); color: var(--ink); }
.mainnav button[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text-bg); }
.topright { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.iconbtn { width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 17px; position: relative; }
.iconbtn:hover { background: var(--surface-2); }
.iconbtn .cnt { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: var(--surface); font: 700 var(--fs-micro)/20px var(--font-sans); }
.userbtn { display: flex; align-items: center; gap: var(--sp-3); padding: 5px 6px 5px var(--sp-3); border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.userbtn:hover { background: var(--surface-2); }
.userbtn .nm { font: 700 var(--fs-small)/1.2 var(--font-sans); }
.userbtn .rl { display: block; font: 600 var(--fs-micro)/1.2 var(--font-sans); color: var(--ink-2); }
.userbtn .ava { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text-bg);
  display: grid; place-items: center; font: 800 var(--fs-small)/1 var(--font-head); flex: none; }

/* ================= страница и строка заголовка ================= */
.page { padding: var(--sp-5) var(--pad) var(--sp-9); display: grid; gap: var(--sp-5); }
.phead { display: grid; grid-template-columns: minmax(200px, auto) minmax(220px, 1fr) auto; gap: var(--sp-4); align-items: center; }
.phead .ttl { display: grid; gap: 2px; }
.phead .sub { font-size: var(--fs-small); color: var(--ink-2); }
.phead .acts { display: flex; gap: var(--sp-3); align-items: center; }

.search { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap);
  padding: 0 var(--sp-3) 0 var(--sp-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); cursor: text; width: 100%; }
.search:hover { border-color: var(--accent-edge); }
.search input { border: 0; background: none; outline: none; flex: 1; min-width: 0; font-size: var(--fs-body); color: var(--ink); }
.search .ico { color: var(--ink-2); flex: none; }
.kbd { display: inline-flex; gap: 3px; flex: none; }
.kbd span { border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; font: 600 var(--fs-micro)/1.3 var(--font-sans); color: var(--ink-2); background: var(--surface-2); }

/* ================= кнопки ================= */
/* Белый текст на оранжевом разрешён только крупным жирным — это .btn (19px/800). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-5); border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent-edge-strong);
  font: 800 var(--fs-btn)/1 var(--font-sans); cursor: pointer; white-space: nowrap;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), filter var(--fast) var(--ease); }
.btn:hover { filter: brightness(1.04); box-shadow: var(--shadow-warm); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-lg { min-height: 60px; padding: 0 var(--sp-6); font-size: clamp(19px, 1.5vw, 23px); }
/* мелкие кнопки — никогда белым по оранжевому */
.btn2 { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: 0 var(--sp-4); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--accent-text); border: 1px solid var(--accent-edge);
  font: 700 var(--fs-small)/1 var(--font-sans); cursor: pointer; white-space: nowrap;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.btn2:hover { background: var(--accent-soft); }
.btn2:active { transform: translateY(1px); }
.btn3 { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: 0 var(--sp-4); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  font: 600 var(--fs-small)/1 var(--font-sans); cursor: pointer; white-space: nowrap; }
.btn3:hover { background: var(--surface-2); }
.btn-wide { width: 100%; }

/* ================= карточки и сетки ================= */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-1); display: grid; gap: var(--sp-4); align-content: start; }
.card > .chead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.card-hot { border-color: var(--accent-edge); background: var(--accent-soft); }
.card-link { text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: transform var(--norm) var(--ease), box-shadow var(--norm) var(--ease), border-color var(--norm) var(--ease); }
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent-edge); }
.card-link:active { transform: translateY(-1px); }

.grid { display: grid; gap: var(--sp-4); }
.g-auto  { grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 22vw, 360px), 1fr)); }
.g-kpi   { grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 15vw, 280px), 1fr)); }
.g-tiles { grid-template-columns: repeat(auto-fit, minmax(clamp(210px, 17vw, 330px), 1fr)); }
.g-wide  { grid-template-columns: repeat(auto-fit, minmax(clamp(300px, 30vw, 560px), 1fr)); }
.g-2of3  { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.g-1of2  { grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); }
@media (max-width: 1100px) { .g-2of3, .g-1of2 { grid-template-columns: minmax(0, 1fr); } }

/* ================= крупные числа ================= */
.kpi { display: grid; gap: var(--sp-2); align-content: start; }
.kpi .n { font: 800 var(--fs-kpi)/1 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .t { font-size: var(--fs-small); color: var(--ink-2); }
.kpi .n.up { color: var(--ok); } .kpi .n.down { color: var(--danger); } .kpi .n.hot { color: var(--accent-text); }
.spark { display: block; width: 100%; height: 34px; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spark .fill { fill: var(--accent-soft); stroke: none; }
.trend { display: inline-flex; align-items: center; gap: 4px; font: 700 var(--fs-micro)/1 var(--font-sans);
  padding: 4px var(--sp-2); border-radius: var(--radius-pill); background: var(--ok-soft); color: var(--ok); }
.trend.down { background: var(--danger-soft); color: var(--danger); }
.trend.flat { background: var(--surface-2); color: var(--ink-2); }

/* ================= светофор ================= */
.traffic { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 13vw, 240px), 1fr)); }
.tr { display: grid; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.tr:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.tr .n { font: 800 clamp(28px, 2.4vw, 38px)/1 var(--font-head); font-variant-numeric: tabular-nums; }
.tr .t { font-size: var(--fs-small); color: var(--ink-2); }
.tr-red { background: var(--danger-soft); border-color: transparent; } .tr-red .n { color: var(--danger); }
.tr-amber { background: var(--warn-soft); border-color: transparent; } .tr-amber .n { color: var(--warn); }
.tr-green { background: var(--ok-soft); border-color: transparent; } .tr-green .n { color: var(--ok); }
.tr-accent { background: var(--accent-soft); border-color: transparent; } .tr-accent .n { color: var(--accent-text-bg); }

/* ================= чипсы ================= */
.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chips-scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 var(--sp-4);
  border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 600 var(--fs-small)/1 var(--font-sans); cursor: pointer; white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.chip:hover { background: var(--surface-2); }
.chip[aria-pressed="true"], .chip.on { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent-text-bg); }
.chip .cnt { font-weight: 800; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px var(--sp-3); border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink); font: 600 var(--fs-micro)/1.4 var(--font-sans); }
.tag-ok { background: var(--ok-soft); color: var(--ok); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }
.tag-red { background: var(--danger-soft); color: var(--danger); }
.tag-accent { background: var(--accent-soft); color: var(--accent-text-bg); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ================= полоса недели ================= */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-3); }
.wday { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-3); border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: inherit;
  min-height: 116px; transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.wday:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.wday .d { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.wday .d b { font: 800 var(--fs-h3)/1 var(--font-head); }
.wday .d span { font-size: var(--fs-micro); color: var(--ink-2); text-transform: lowercase; }
.wday .ln { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-micro); color: var(--ink-2); }
.wday .ln b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.wday.today { border: 2px solid var(--accent); background: var(--accent-soft); }
.wday.today .d span { color: var(--accent-text-bg); font-weight: 700; }
.wday.empty-day { opacity: .72; }

/* ================= плитки-входы ================= */
.tile { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-5); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  cursor: pointer; text-align: left; font: inherit; color: inherit; min-height: 168px;
  transition: transform var(--norm) var(--ease), box-shadow var(--norm) var(--ease), border-color var(--norm) var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--accent-edge); }
.tile .ic { width: 52px; height: 52px; border-radius: 15px; background: var(--accent-soft); color: var(--accent-text-bg);
  display: grid; place-items: center; font-size: 25px; }
.tile .nm { font: 800 var(--fs-h2)/1.15 var(--font-head); }
.tile .num { font: 800 clamp(20px, 1.6vw, 26px)/1 var(--font-head); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.tile .num small { display: block; font-weight: 600; color: var(--ink-2); margin-top: 3px; }
.tile-hot { background: var(--accent-bright); border-color: transparent; color: var(--accent-bright-ink); }
.tile-hot .ic { background: var(--surface); color: var(--accent-text-bg); }
.tile-hot .num, .tile-hot .num small { color: var(--accent-bright-ink); }

/* ================= строки списка ================= */
.stol-rows { display: grid; }
.stol-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); text-align: left; font: inherit; color: inherit;
  background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; width: 100%; }
.stol-row:last-child { border-bottom: 0; }
.stol-row:hover { background: var(--surface-2); }
.stol-row .when { font: 800 var(--fs-h3)/1 var(--font-head); font-variant-numeric: tabular-nums; min-width: 52px; }
.stol-row .who { font-weight: 700; display: block; }
.stol-row .sub { font-size: var(--fs-small); color: var(--ink-2); display: block; }
.ava-sq { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2);
  display: grid; place-items: center; font: 800 var(--fs-small)/1 var(--font-head); flex: none; }
.ava-lg { width: 64px; height: 64px; border-radius: 16px; font-size: var(--fs-h3); }

/* ================= прогресс ================= */
.bar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent-bright); border-radius: 999px;
  transition: width var(--norm) var(--ease); }
.ring { --p: 0; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-2) 0);
  font: 800 21px/1 var(--font-head); flex: none; }
.ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface); }
.ring span { position: relative; z-index: 1; }

/* ================= маршрут ученика: шаги карточками ================= */
.route { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 12vw, 220px), 1fr)); gap: var(--sp-3); }
.step { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-4); border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: inherit;
  min-height: 112px; transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.step:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.step .no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-2); font: 800 var(--fs-small)/1 var(--font-head); }
.step .nm { font-weight: 700; line-height: 1.25; }
.step .mt { font-size: var(--fs-micro); color: var(--ink-2); }
.step.done { background: var(--ok-soft); border-color: transparent; }
.step.done .no { background: var(--ok); color: var(--surface); }
.step.now { border: 2px solid var(--accent); background: var(--accent-soft); }
.step.now .no { background: var(--surface); color: var(--accent-text); border: 2px solid var(--accent); }
.step.next .no { background: var(--accent-soft); color: var(--accent-text-bg); }
.step.later { opacity: .8; }

/* ================= задача и подсказки ================= */
.task-q { font: 700 clamp(19px, 1.7vw, 26px)/1.4 var(--font-head); }
.answer { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.answer input { min-height: var(--tap); min-width: 150px; flex: 0 1 220px; padding: 0 var(--sp-4);
  border: 2px solid var(--line); border-radius: var(--radius-sm); font: 700 var(--fs-h3)/1 var(--font-sans);
  background: var(--surface); color: var(--ink); }
.answer.ok input { border-color: var(--ok); background: var(--ok-soft); }
.answer.bad input { border-color: var(--warn); background: var(--warn-soft); }
.hintbox { display: grid; gap: var(--sp-3); }
.hint { display: grid; gap: 4px; padding: var(--sp-4); border-radius: var(--radius); background: var(--surface-2); }
.hint b { font-family: var(--font-head); }
.verdict { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--radius); }
.verdict-ok { background: var(--ok-soft); color: var(--ok); }
.verdict-hint { background: var(--warn-soft); color: var(--warn); }
.verdict b { color: inherit; }

/* ================= формы ================= */
.field { display: grid; gap: var(--sp-1); }
.field .lbl { font: 700 var(--fs-small)/1.3 var(--font-sans); }
.field input, .field select, .field textarea { min-height: var(--tap); padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
  font: 400 var(--fs-body)/1.4 var(--font-sans); width: 100%; }
.field textarea { min-height: 96px; padding-top: var(--sp-3); resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; }

/* ================= таблица ================= */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
th, td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--ink-2); font-weight: 700; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ================= всплывающие ================= */
.toasts { position: fixed; right: var(--pad); bottom: var(--sp-5); z-index: 90; display: grid; gap: var(--sp-2);
  width: min(420px, calc(100% - var(--pad) * 2)); }
.toast { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-2); font-size: var(--fs-small); }
.overlay { position: fixed; inset: 0; z-index: 80; background: rgba(17, 24, 39, .45);
  display: grid; place-items: center; padding: var(--sp-4); }
.sheet { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-2);
  width: min(620px, 100%); max-height: 88vh; overflow: auto; padding: var(--sp-6); display: grid; gap: var(--sp-4); }
.cmdk { align-items: start; padding-top: 12vh; }
.cmdk .sheet { padding: var(--sp-4); gap: var(--sp-3); }
.cmdk .res { display: grid; }
.cmdk .res button { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4);
  border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.cmdk .res button:hover, .cmdk .res button.sel { background: var(--accent-soft); }
.cmdk .res .hintk { margin-left: auto; font-size: var(--fs-micro); color: var(--ink-2); }

/* ================= скелетоны ================= */
@keyframes shimmer { from { background-position: -200% 0 } to { background-position: 200% 0 } }
.skel { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--n-50) 37%, var(--surface-2) 63%);
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.skel-line { height: 14px; margin-bottom: var(--sp-2); }
.skel-n { height: 40px; width: 60%; margin-bottom: var(--sp-2); }

/* ================= анимации ================= */
@keyframes rise { from { transform: translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes popin { from { transform: scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }
.rise { animation: rise .26s var(--ease) both; }
.popin { animation: popin .2s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .rise, .popin, .skel { animation: none; }
  * { transition: none !important; }
}

/* ================= нижняя панель на телефоне ================= */
.bottomnav { display: none; position: sticky; bottom: 0; z-index: 35; background: var(--surface); border-top: 1px solid var(--line); }
.bottomnav nav { display: flex; }
.bottomnav button { flex: 1; display: grid; place-items: center; gap: 3px; min-height: 60px; border: 0; background: none;
  color: var(--ink-2); font: 600 var(--fs-micro)/1.2 var(--font-sans); cursor: pointer; padding: 6px 4px; }
.bottomnav button[aria-current="page"] { color: var(--accent-text); }
.bottomnav .ic { font-size: 19px; line-height: 1; }

/* ================= адаптив ================= */
@media (max-width: 1240px) {
  .phead { grid-template-columns: minmax(0, 1fr) auto; }
  .phead .search-cell { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 900px) {
  .mainnav { display: none; }
  .week { grid-template-columns: repeat(7, minmax(132px, 1fr)); }
  .weekscroll { overflow-x: auto; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) var(--sp-2); }
  .g-2of3, .g-1of2, .g-auto, .g-tiles, .g-wide { grid-template-columns: minmax(0, 1fr); }
  .traffic { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .bottomnav { display: block; }
  .page { padding-bottom: var(--sp-6); }
  .userbtn .nm, .userbtn .rl { display: none; }
  .userbtn { padding: 5px; }
  .phead .acts .hide-sm { display: none; }
}
@media (max-width: 560px) {
  .g-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toasts { right: var(--sp-3); left: var(--sp-3); width: auto; }
}
/* на очень широких экранах карточки не растягиваются в полосы, а прибавляют колонку */
@media (min-width: 1800px) {
  .g-kpi { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .g-auto { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
}

/* ---- узкие экраны: шапка и строка заголовка не должны вылезать ---- */
@media (max-width: 700px) {
  .phead { grid-template-columns: minmax(0, 1fr); }
  .phead .search-cell { order: 2; }
  .phead .acts { order: 3; width: 100%; }
  .phead .acts .btn { flex: 1; }
}
@media (max-width: 620px) {
  .topbar { gap: var(--sp-2); padding: 0 var(--sp-3); }
  /* на узком экране надпись убираем совсем: имя ссылки задано aria-label,
     а спрятанный inline-flex выпирал бы за край окна */
  .topbar .brand span:not(.mark) { display: none; }
  .topright { gap: var(--sp-2); }
  .iconbtn { width: 40px; height: 40px; }
  .userbtn .ava { width: 32px; height: 32px; }
}

/* На узких экранах третий столбец строки уходит вниз, иначе текст сжимается в столбик */
@media (max-width: 700px) {
  .stol-row { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--sp-2); }
  .stol-row > :nth-child(3) { grid-column: 1 / -1; justify-self: start; }
  .stol-row .chips { width: 100%; }
}

/* Прямые дети карточки-грида не растягиваются во всю ширину: метка остаётся меткой */
.card > .tag, .card > .chip, .card > .btn2, .card > .btn3, .card > .trend, .sheet > .tag { justify-self: start; }

/* логотип — тоже цель касания */
.brand { min-height: var(--tap-min); }
.card > .btn:not(.btn-wide) { justify-self: start; }

/* на телефоне крупные числа чуть меньше: «152-ФЗ» и «2,35 млн ₽» не должны переноситься */
@media (max-width: 560px) {
  .kpi .n { font-size: clamp(22px, 7.4vw, 30px); }
  .tr .n { font-size: clamp(24px, 8vw, 32px); }
}

/* крупное число не разрывается между разрядами («48 400 ₽» одной строкой) */
.kpi .n, .tr .n { white-space: nowrap; }

/* ==========================================================================
   Раздел 3А ТЗ: визуальная иерархия. Сетка 12 колонок, три размера блоков,
   один цветовой акцент на экран, уровни типографики с разницей не меньше 1,5×.
   ========================================================================== */

.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5); }
.c2 { grid-column: span 2 } .c3 { grid-column: span 3 } .c4 { grid-column: span 4 }
.c5 { grid-column: span 5 } .c6 { grid-column: span 6 } .c7 { grid-column: span 7 }
.c8 { grid-column: span 8 } .c9 { grid-column: span 9 } .c12 { grid-column: 1 / -1 }
@media (max-width: 1180px) {
  .g12 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-4); }
  .c9, .c8, .c7, .c6, .c5, .c4 { grid-column: span 8 }   /* на планшете спутник уходит под главный блок */
  .c3 { grid-column: span 4 } .c2 { grid-column: span 4 }
}
@media (max-width: 760px) {
  .g12 { grid-template-columns: minmax(0, 1fr); }
  .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9 { grid-column: 1 / -1 }
}

/* ритм: между секциями отступ вдвое больше, чем между карточками */
.page { gap: var(--sp-7); }
/* только раздел страницы: класс «sec» на многих страницах занят вторичной кнопкой
   (.btn.sec), и общее правило растягивало её на всю ширину */
section.sec { display: grid; gap: var(--sp-4); }
section.sec > h2.sec-h { font-size: clamp(22px, 1.8vw, 30px); }

/* уровни типографики */
/* Крупный заголовок экрана: тоньше и просторнее — так он читается, а не сливается */
.page-title { font-size: clamp(34px, 3.4vw, 60px); font-weight: var(--fw-display);
  line-height: 1.12; letter-spacing: -.015em; }
.card h2, .sec-h { font-size: clamp(22px, 1.8vw, 30px); }
.card h3 { font-size: var(--fs-h3); }
.hero .num-xl, .num-xl { font: 800 clamp(44px, 4vw, 64px)/1 var(--font-head);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; white-space: nowrap; }
.kpi .n, .tr .n, .num-md { font-size: clamp(28px, 2.2vw, 34px); }
.cap { font-size: var(--fs-small); color: var(--ink-2); }

/* главный блок экрана: единственный цветовой акцент */
.hero { position: relative; background: var(--accent-soft); border: 1px solid var(--accent-edge);
  border-radius: var(--radius-xl); padding: var(--sp-6); display: grid; gap: var(--sp-4); align-content: start;
  box-shadow: var(--shadow-1); min-height: 340px; }
.hero-fill { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
/* на брендовой заливке нет мелкого текста: подписи крупные и жирные — это AA для крупного текста */
.hero-fill .cap, .hero-fill small { color: var(--accent-ink); font-size: var(--fs-btn); font-weight: 700; opacity: .92; }
.hero-fill .tag { background: var(--surface); color: var(--ink); }
.hero .art { position: absolute; right: var(--sp-5); top: var(--sp-5); width: clamp(96px, 9vw, 168px);
  height: clamp(96px, 9vw, 168px); border-radius: 50%; background: var(--surface); color: var(--accent-text-bg);
  display: grid; place-items: center; opacity: .95; pointer-events: none; }
.hero .art svg { width: 54%; height: 54%; }
.hero-fill .art { background: rgba(255, 255, 255, .55); }
@media (max-width: 760px) { .hero { min-height: 0; padding: var(--sp-5); } .hero .art { display: none; } }

/* колонка-спутник: 2–4 коротких строки со стрелкой, а не одна большая карточка */
.stack-lines { display: grid; gap: var(--sp-3); align-content: start; }
.line { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4); cursor: pointer; text-align: left; font: inherit; color: inherit;
  box-shadow: var(--shadow-1); transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.line:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.line .ic { width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft);
  color: var(--accent-text-bg); display: grid; place-items: center; }
.line .t { font-weight: 700; display: block; }
.line .s { font-size: var(--fs-small); color: var(--ink-2); display: block; }
.line .v { font: 800 clamp(28px, 2.2vw, 34px)/1 var(--font-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.line .arrow { color: var(--ink-2); display: grid; place-items: center; }
.line-tall { padding: var(--sp-5); }

/* компактная карточка-вход: меньше главного, но с крупной иконкой */
.mini { display: grid; gap: var(--sp-2); align-content: start; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-1); cursor: pointer; text-align: left; font: inherit; color: inherit;
  grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.mini .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--surface-2); color: var(--ink-2);
  display: grid; place-items: center; }
.mini .t { font-weight: 800; font-family: var(--font-head); display: block; }
.mini .s { font-size: var(--fs-small); color: var(--ink-2); display: block; }
.mini .v { font: 800 clamp(22px, 1.7vw, 28px)/1 var(--font-head); color: var(--accent-text); white-space: nowrap; }

/* крупная карточка-вход с иконографией и кнопкой */
.entry { display: grid; gap: var(--sp-3); align-content: start; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--sp-6);
  box-shadow: var(--shadow-1); min-height: 260px; position: relative; overflow: hidden; }
.entry .art { width: clamp(64px, 6vw, 92px); height: clamp(64px, 6vw, 92px); border-radius: 22px;
  background: var(--accent-soft); color: var(--accent-text-bg); display: grid; place-items: center; }
.entry h3 { font-size: clamp(20px, 1.6vw, 26px); font-family: var(--font-head); font-weight: 800; }
.entry .v { font: 800 clamp(24px, 2vw, 32px)/1 var(--font-head); color: var(--accent-text); }

/* строка поиска первого экрана */
.search-xl { min-height: 66px; font-size: var(--fs-h3); padding-left: var(--sp-5); }
.search-xl input { font-size: clamp(16px, 1.3vw, 19px); }

/* дети карточек не растягивают контейнер: широкое содержимое прокручивается внутри себя */
.card > *, .hero > *, .g12 > * { min-width: 0; }
.weekscroll { min-width: 0; }
/* в узких блоках день недели не сжимается до нечитаемого */
.hero .week, .card .week { grid-template-columns: repeat(7, minmax(118px, 1fr)); }

/* ==========================================================================
   Страница «Репетиторам»: блоки без пустот, содержимое крупное.
   Секция — ряд из высокой плашки и колонки блоков, высоты выровнены по секции.
   ========================================================================== */
.pitch { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5); align-items: stretch; }
.pitch > * { height: 100%; }
.pitch-main { grid-column: span 4; display: grid; align-content: space-between; gap: var(--sp-5);
  background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-xl); padding: var(--sp-6); }
.pitch-main .say { font: 800 clamp(30px, 2.6vw, 44px)/1.1 var(--font-head); letter-spacing: -.02em; }
.pitch-main .more { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--accent-ink);
  font: 700 var(--fs-btn)/1 var(--font-sans); background: none; border: 0; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 4px; }
.pitch-col { grid-column: span 4; display: grid; gap: var(--sp-5); align-content: stretch; }
.pitch-cell { background: var(--surface-2); border-radius: var(--radius-lg); padding: var(--sp-5);
  display: grid; align-content: center; gap: var(--sp-2); cursor: pointer; text-align: left; font: inherit; color: inherit;
  border: 1px solid transparent; transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.pitch-cell:hover { background: var(--surface); border-color: var(--line); transform: translateY(-2px); }
.pitch-cell .big { font: 800 clamp(40px, 3.4vw, 64px)/1 var(--font-head); font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; white-space: nowrap; }
.pitch-cell .lbl2 { font-size: clamp(16px, 1.2vw, 18px); color: var(--ink-2); font-weight: 600; }
.pitch-wide { grid-column: span 8; }
@media (max-width: 1180px) {
  .pitch { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .pitch-main, .pitch-col { grid-column: span 4; }
  .pitch-wide { grid-column: span 8; }
}
@media (max-width: 760px) {
  .pitch { grid-template-columns: minmax(0, 1fr); }
  .pitch-main, .pitch-col, .pitch-wide { grid-column: 1 / -1; }
  .pitch > * { height: auto; }
}

/* ==========================================================================
   Подвал
   ========================================================================== */
.foot { background: var(--surface); border-top: 1px solid var(--line); margin-top: var(--sp-8);
  padding: var(--sp-7) var(--pad) var(--sp-5); }
.foot-in { display: grid; grid-template-columns: minmax(200px, 1.3fr) repeat(5, minmax(130px, 1fr)); gap: var(--sp-6); align-items: start; }
.foot .brand { margin-bottom: var(--sp-4); }
.foot h4 { font: 800 var(--fs-small)/1.3 var(--font-head); margin: 0 0 var(--sp-3); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.foot a, .foot button.flink { background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: 400 var(--fs-small)/1.5 var(--font-sans); color: var(--ink-2); text-decoration: none; }
.foot a:hover, .foot button.flink:hover { color: var(--accent-text); text-decoration: underline; }
.foot .apps { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.foot .app { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-min);
  padding: 0 var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink); font: 600 var(--fs-small)/1 var(--font-sans); cursor: pointer; }
.foot .app:hover { background: var(--surface-2); }
.foot-bottom { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: var(--sp-6); padding-top: var(--sp-4);
  font-size: var(--fs-micro); color: var(--ink-2); }
.foot-bottom .sep { margin-left: auto; }
.to-top { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer; display: grid; place-items: center; flex: none; }
.to-top:hover { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-edge); }
@media (max-width: 1400px) { .foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .foot-in { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } }


/* ==========================================================================
   Переходный слой: прежняя вёрстка публичных страниц на язык «Стола»
   ========================================================================== */

/* центральной колонки больше нет: контейнеры идут во всю ширину окна */
.wrap, .wrap-narrow, .container { width: 100%; max-width: 100%; margin-inline: 0; padding: 0 var(--pad); }
.narrow, .wrap-narrow { max-width: 860px; margin-inline: auto; }

/* базовая типографика страницы */
body { background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--font-sans); }
h1 { font-size: clamp(34px, 3.4vw, 60px); font-weight: var(--fw-display);
  line-height: 1.12; letter-spacing: -.015em; }
h2 { font-size: clamp(22px, 1.8vw, 30px); }
h3 { font-size: var(--fs-h3); }
a { color: var(--accent-text); }

/* кнопки прежней вёрстки получают вид «Стола» */
.btn, .btn-green, .btn-sky {
  border-radius: var(--radius-pill); min-height: var(--tap); padding: 0 var(--sp-5);
  font: 800 var(--fs-btn)/1 var(--font-sans); box-shadow: none;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent-edge-strong);
}
.btn:hover, .btn-green:hover, .btn-sky:hover { transform: none; filter: brightness(1.04); box-shadow: var(--shadow-warm); }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  font-weight: 600; font-size: var(--fs-small); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line); box-shadow: none; }

/* карточки прежней вёрстки */
.card, .box, .panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}

/* прежняя шапка страниц: белая полоса во всю ширину */
.top { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: var(--sp-4); min-height: 64px; }
.top nav { background: none; border: 0; box-shadow: none; padding: 0; margin-left: auto; }
.top nav a { border-radius: var(--radius-sm); font: 600 var(--fs-small)/1 var(--font-sans); color: var(--ink-2); }
.top nav a:hover { background: var(--surface-2); color: var(--ink); }
.top nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }

/* первый экран статических страниц */
.hero-page { display: grid; gap: var(--sp-5); padding: var(--sp-7) 0 var(--sp-6); }
.hero-page .lead { font-size: clamp(17px, 1.3vw, 20px); color: var(--ink-2); max-width: 62ch; }

/* секции и ритм */
section + section { margin-top: var(--sp-7); }
.sec-title { font-size: clamp(22px, 1.8vw, 30px); margin: 0 0 var(--sp-4); }

/* первый экран главной: заголовок слева, широкая строка поиска, входы разного размера */
.hero-stol { background: none; padding: var(--sp-7) 0 var(--sp-6); text-align: left; }
.hero-stol .wrap { display: grid; gap: var(--sp-5); }
.hero-stol .eyebrow { margin: 0; font: 700 var(--fs-small)/1 var(--font-sans); color: var(--accent-text);
  letter-spacing: .04em; text-transform: uppercase; }
.hero-stol h1 { margin: 0; max-width: 20ch; }
.hero-stol h1 em { font-style: normal; color: var(--accent-text); }
.hero-stol .lead { margin: 0; max-width: 62ch; font-size: clamp(17px, 1.3vw, 20px); color: var(--ink-2); }
.find-row { gap: var(--sp-4); align-items: stretch; }
.find-row .btn { width: 100%; }
.entries { align-items: stretch; }
.entries .entry { height: 100%; }
.entries .entry .art { font-size: 34px; }
.entries .entry h2 { margin: 0; font-size: clamp(20px, 1.6vw, 26px); }
.entries .entry p { margin: 0; color: var(--ink-2); font-size: var(--fs-small); }
.entries .mini .s { white-space: normal; }
/* входы первого экрана: иконка сверху слева, ссылки без подчёркивания */
.entries .entry { grid-template-columns: minmax(0, 1fr); justify-items: start; }
.entries .entry .art { order: -1; width: clamp(56px, 5vw, 76px); height: clamp(56px, 5vw, 76px);
  display: grid; place-items: center; border-radius: 20px; background: var(--accent-soft); }
.entries .entry .v { color: var(--accent-text); }
.entries a, .foot a, .mini, .line { text-decoration: none; }
.mini .t, .mini .s, .mini .v { text-decoration: none; }
.entries .mini { align-items: center; }
/* внутри первого экрана главной иконка входа не позиционируется абсолютно */
.hero-stol .entry .art { position: static; right: auto; top: auto; }
.entries .entry { align-content: space-between; }
.entries .entry h2, .entries .entry .v, .entries .entry p { width: 100%; }
/* таблицы правовых страниц прокручиваются внутри своего блока */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table-wrap th, .table-wrap td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line); }
.table-wrap th { color: var(--ink-2); font-weight: 700; }

/* первый экран внутренних страниц: одна колонка, блоки во всю ширину */
.hero.hero-stol { display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--sp-6); align-items: stretch; padding: var(--sp-7) 0 var(--sp-6); }
.hero.hero-stol > div { min-width: 0; }
.hero.hero-stol .cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin: var(--sp-5) 0 var(--sp-3); }
.hero.hero-stol .pitch-main .say { hyphens: none; }
.pitch-cell, .pitch-cell .big, .pitch-cell .lbl2, .pitch-main .more { text-decoration: none; }
.pitch-main .more { text-decoration: underline; text-underline-offset: 4px; }
.pitch-cell .big { color: var(--ink); }
.pitch-cell .lbl2 { color: var(--ink-2); }

/* на телефоне кнопки не вылезают за экран: текст переносится, кегль чуть меньше */
@media (max-width: 620px) {
  .btn, .btn-green, .btn-sky {
    max-width: 100%; white-space: normal; text-align: center;
    padding: var(--sp-3) var(--sp-4); min-height: var(--tap);
    font-size: var(--fs-btn); font-weight: 800; line-height: 1.25;   /* крупный текст: AA на оранжевом */
  }
  .btn-ghost { max-width: 100%; white-space: normal; text-align: center;
    padding: var(--sp-3) var(--sp-4); min-height: var(--tap); font-size: 16px; line-height: 1.25; }
  .btn-lg { font-size: clamp(19px, 5vw, 22px); }
  .cta, .hero-stol .cta { width: 100%; }
  .cta .btn, .hero-stol .cta .btn { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .chip, .pill, .btn.sec, .btn-ghost { max-width: 100%; white-space: normal; }
  .chips, .pills { max-width: 100%; }
}
.pitch-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
@media (max-width: 760px) { .pitch-grid2 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } }
/* кнопка не сжимается до нечитаемой ширины */
.btn, .btn-green, .btn-sky, .btn-ghost, .btn.sec { min-width: fit-content; }
@media (max-width: 620px) { .btn, .btn-ghost, .btn.sec { min-width: 0; width: 100%; } }
/* ряды кнопок переносятся на узких экранах */
@media (max-width: 620px) { .row, .cta, .pills, .actions { flex-wrap: wrap !important; } }

/* единая верхняя панель публичных страниц */
.topbar { padding: 0 var(--pad); }
.topbar .brand img { display: block; border-radius: 10px; }
.topbar .mainnav a { display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding: 0 var(--sp-4); border-radius: var(--radius-sm); color: var(--ink-2);
  font: 600 var(--fs-small)/1 var(--font-sans); text-decoration: none; white-space: nowrap; }
.topbar .mainnav a:hover { background: var(--surface-2); color: var(--ink); }
.topbar .mainnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
.topbar .btn-sm-top { min-height: var(--tap-min); padding: 0 var(--sp-4); font-size: var(--fs-small);
  font-weight: 700; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent-edge-strong); display: inline-flex; align-items: center; text-decoration: none; }
/* белый текст на оранжевом мелким нельзя: кнопка в панели — контурная */
.topbar .btn-sm-top { background: var(--surface); color: var(--accent-text); border-color: var(--accent-edge); }
.topbar .btn-sm-top:hover { background: var(--accent-soft); }
@media (max-width: 900px) { .topbar .mainnav { display: none; } }
/* знак в логотипе: квадрат с брендовой заливкой, сам знак белый */
.topbar .brand .mark, .foot .brand .mark { width: 36px; height: 36px; border-radius: 11px;
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.topbar .brand .mark svg, .foot .brand .mark svg { width: 23px; height: 23px; display: block; }
.foot .brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--ink);
  font: 800 18px/1 var(--font-head); text-decoration: none; margin-bottom: var(--sp-4); }

/* Мелкий текст на брендовой заливке недопустим (3.37 — AA только для крупного).
   Такие места получают светлую подложку с тёмным текстом. */
.timer, .exam-demo .timer { background: var(--surface); color: var(--accent-text);
  padding: 4px var(--sp-3); border-radius: var(--radius-pill); display: inline-block; font-weight: 700; }
.cta-final p, .final p, .pitch-main p { font-size: var(--fs-btn); font-weight: 700; }
.lead-invert { font-size: var(--fs-btn); font-weight: 700; }
.foot .fh { font: 800 var(--fs-small)/1.3 var(--font-head); margin: 0 0 var(--sp-3); }
/* на телефоне логотип остаётся целью касания 44×44, даже когда надпись скрыта */
@media (max-width: 620px) { .topbar .brand { min-width: var(--tap-min); justify-content: center; padding-right: 0; } }

/* ==========================================================================
   Шаги «Как это работает»: цифра в кружке над заголовком, без наложения.
   Ведущего нуля нет, отступы внутри карточки одинаковые со всех сторон.
   ========================================================================== */
.steps { display: grid; gap: var(--sp-4); counter-reset: s;
  grid-template-columns: repeat(auto-fit, minmax(clamp(230px, 20vw, 340px), 1fr)); }
.step { position: static; display: grid; gap: var(--sp-2); align-content: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-1); }
.step::before {
  counter-increment: s; content: counter(s);          /* без ведущего нуля */
  position: static; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent-text);
  font: 800 20px/1 var(--font-head); margin: 0 0 var(--sp-2);
}
.step h3 { margin: 0; font: 800 var(--fs-h3)/1.25 var(--font-head); }
.step p { margin: 0; color: var(--ink-2); font-size: var(--fs-small); }
/* список шагов (инструкция репетитора): кружок слева, текст по одной линии */
ol.steps, ul.steps { grid-template-columns: minmax(0, 1fr); }
ol.steps li, ul.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-4);
  align-items: start; padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
ol.steps li:first-child, ul.steps li:first-child { border-top: 0; }
ol.steps li::before, ul.steps li::before {
  counter-increment: s; content: counter(s);
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text); font: 800 18px/1 var(--font-head);
}

/* ==========================================================================
   Первый экран главной: три варианта и переключатель между ними.
   Переключатель временный — после выбора владельца остаётся один вариант.
   ========================================================================== */
.vswitch { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--accent-edge);
  border-radius: var(--radius-pill); background: var(--surface); width: fit-content; }
.vswitch-l { font: 700 var(--fs-small)/1 var(--font-sans); color: var(--ink-2); padding: 0 var(--sp-2); }
.vswitch button { min-height: var(--tap-min); padding: 0 var(--sp-4); border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 600 var(--fs-small)/1 var(--font-sans); cursor: pointer; }
.vswitch button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent-text); }
.vbox { display: grid; gap: var(--sp-5); }
.v-text { display: grid; gap: var(--sp-4); align-content: center; }
.v-text h1 { margin: 0; }
.v-text .lead { margin: 0; max-width: 46ch; font-size: clamp(17px, 1.3vw, 20px); color: var(--ink-2); }
.v1, .v3 { align-items: stretch; }
.v-demo { min-height: 320px; }

/* вариант 2: заголовок по центру, под ним поиск и плитки с цифрами */
.v2-head { display: grid; gap: var(--sp-4); justify-items: center; text-align: center; }
/* Первый экран — призыв: крупнее остальных заголовков портала. */
.v2-head h1 { margin: 0; max-width: 23ch; font-size: clamp(38px, 4.6vw, 76px); line-height: 1.08; }
.v2-head .lead { margin: 0; max-width: 52ch; font-size: clamp(17px, 1.3vw, 20px); color: var(--ink-2); }
.v2-head .find-row { width: 100%; }
.numtile { display: grid; gap: var(--sp-2); align-content: center; justify-items: start;
  background: var(--surface-2); border-radius: var(--radius-lg); padding: var(--sp-5);
  text-decoration: none; color: var(--ink); min-height: 150px;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.numtile:hover { background: var(--surface); transform: translateY(-2px); }
.numtile .big { font: 800 clamp(40px, 3.4vw, 64px)/1 var(--font-head); letter-spacing: -.03em; white-space: nowrap; }
.numtile .lbl2 { font-size: clamp(16px, 1.2vw, 18px); color: var(--ink-2); font-weight: 600; }

/* вариант 3: фрагмент рабочего стола */
.deskpeek { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2); overflow: hidden; height: 100%; display: grid; grid-template-rows: auto 1fr; }
.deskpeek-bar { display: flex; align-items: center; gap: 6px; padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border-bottom: 1px solid var(--line); }
.deskpeek-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--n-400); }
.deskpeek-t { margin-left: var(--sp-3); font: 700 var(--fs-small)/1 var(--font-sans); color: var(--ink-2); }
.deskpeek-body { padding: var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; }
.deskpeek-traffic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.deskpeek-traffic .tr { display: grid; gap: 4px; padding: var(--sp-4); border-radius: var(--radius); }
.deskpeek-traffic b { font: 800 clamp(24px, 2vw, 32px)/1 var(--font-head); }
.deskpeek-traffic i { font-style: normal; font-size: var(--fs-micro); color: var(--ink-2); }
.deskpeek-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.deskpeek-card { display: grid; gap: 4px; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); }
.deskpeek-card b { font: 800 var(--fs-h3)/1 var(--font-head); }
.deskpeek-card i { font-style: normal; font-size: var(--fs-micro); color: var(--ink-2); }
.deskpeek-money { display: grid; gap: 4px; padding: var(--sp-4); background: var(--accent-soft); border-radius: var(--radius); }
.deskpeek-money b { font: 800 clamp(28px, 2.4vw, 38px)/1 var(--font-head); color: var(--ok); }
.deskpeek-money i { font-style: normal; font-size: var(--fs-small); color: var(--ink-2); }
@media (max-width: 760px) {
  .deskpeek-traffic, .deskpeek-cards { grid-template-columns: minmax(0, 1fr); }
  .v2-head { justify-items: start; text-align: left; }
}

/* чипсы-ссылки в первом экране не подчёркиваются */
.v3 .chip, .vbox .chip { text-decoration: none; }
/* неделя в фрагменте кабинета */
.deskpeek-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
.deskpeek-week span { display: grid; gap: 2px; justify-items: center; padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.deskpeek-week b { font: 800 var(--fs-h3)/1 var(--font-head); }
.deskpeek-week i { font-style: normal; font-size: var(--fs-micro); color: var(--ink-2); }
@media (max-width: 760px) { .deskpeek-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ссылки-кнопки на публичных страницах не подчёркиваются */
a.btn, a.btn2, a.btn3, a.chip, a.mini, a.numtile, a.line { text-decoration: none; }
/* подзаголовок первого экрана держится в двух строках и на телефоне */
@media (max-width: 480px) {
  .v-text .lead, .v2-head .lead { font-size: 15px; line-height: 1.45; }
  .wide-only { display: none; }
}


/* ---------- читаемость заголовков ----------
   На крупных кеглях жирное начертание сливается: заголовок экрана набираем
   полужирным (600), заголовки блоков — 700, межстрочный интервал просторнее. */
h1, .page-title, .v2-head h1, .hero h2 { font-weight: var(--fw-display); }
h2, h3, .sec-h, .card h2, .entry h3, .mini .t, .line .t { font-weight: 700; }
.lead, .v2-head .lead, .v-text .lead { font-weight: 400; }
/* крупные числа: тот же вес, что у заголовков, иначе спорят друг с другом */
.num-xl, .numtile .big, .pitch-cell .big, .kpi .n, .tr .n, .deskpeek-money b { font-weight: 700; letter-spacing: -.02em; }

/* Надпись логотипа: «Хроника» основным цветом, «Школа» — оранжевым текстовым токеном.
   Дефис между ними не должен разрывать пару при переносе. */
.brand .lg { display: inline-flex; align-items: baseline; white-space: nowrap; }
.brand .lg b { font-weight: 800; color: var(--ink); }
.brand .lg i { font-style: normal; font-weight: 800; color: var(--accent-text); }
.brand .lg u { text-decoration: none; color: var(--ink-2); }

/* Айфон с вырезом: боковые отступы и нижняя панель не заезжают под системные зоны. */
@supports (padding: env(safe-area-inset-left)) {
  .wrap, .topbar, .foot-in { padding-left: calc(var(--pad) + env(safe-area-inset-left));
    padding-right: calc(var(--pad) + env(safe-area-inset-right)); }
  .bottomnav { padding-bottom: env(safe-area-inset-bottom); }
}

/* Логотип не должен выпирать за край в узкой колонке: надпись сжимается,
   а на самых узких экранах переносится под знак. */
.brand { max-width: 100%; min-width: 0; flex-wrap: wrap; }
.brand .lg { min-width: 0; }
@media (max-width: 620px) { .foot .brand .lg { font-size: 16px; } }

/* вложенный контейнер не должен добавлять второй боковой отступ:
   иначе секции внутри страницы съезжают относительно соседних */
.wrap .wrap, .wrap .foot-in { padding-left: 0; padding-right: 0; }

/* длинный адрес почты не должен вылезать из колонки подвала */
.foot li, .foot a, .foot p, .muted a { overflow-wrap: anywhere; }

/* ==========================================================================
   Единая шкала текста и ритм отступов (правка 23 сентября)
   ========================================================================== */
.page-title, h1 { font-size: var(--fs-h1); }
h2, .sec-h, .sec-title { font-size: var(--fs-h2); }
h3, .card h3, .entry h3, .mini .t, .tile .nm { font-size: var(--fs-h3); }
p, li, .lead, .sub, .cap, .muted,
.card p, .card li, section p, section li, main p, main li { max-width: var(--measure); }
/* пояснение под заголовком не может быть крупнее заголовка карточки */
.sub, .cap, .muted, .note, small, figcaption { font-size: var(--fs-small); }
.lead { font-size: clamp(17px, 1.2vw, 19px); }

/* ритм: между разделами вдвое больше, чем между карточками */
main > section, main > .block, section.sec, .page > section { margin-block: clamp(40px, 4vw, 64px); }
main > section:first-child, .page > section:first-child { margin-top: 0; }
.g12, .grid, .cards, .entries, .tiles { gap: clamp(16px, 1.4vw, 24px); }
.card, .entry, .mini, .tile { padding: max(20px, var(--sp-5)); }

/* соседние блоки не стоят впритык: между заголовком и пояснением — воздух */
h1 + p, h2 + p, h3 + p, h1 + .lead, h2 + .lead, .eyebrow + h1, .eyebrow + h2,
p + p, p + ul, ul + p, p + .card, .card + .card { margin-top: max(12px, var(--sp-3)); }
h2 + .sub, h3 + .sub, h2 + .cap { margin-top: max(12px, var(--sp-3)); }