/* app.css v2 — учебная платформа, «премиум» язык.
   Чёрный фон, карточки на 1px рамках, Manrope + JetBrains Mono, белая главная кнопка со стрелкой,
   статусы-пилюли с точкой, пунктир для неизвестного. CSP-safe: без inline, без CDN.
   Адаптив — контейнерные запросы (контейнер = body или .app). */

/* Шрифты: @fontsource-variable 5.3.0 (OFL 1.1, лицензии в static/fonts), только cyrillic + latin. */
@font-face { font-family: Manrope; src: url("../fonts/manrope-cyrillic-wght-normal.e58febde317b.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Manrope; src: url("../fonts/manrope-latin-wght-normal.938c6e8019b6.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; 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"; src: url("../fonts/jetbrains-mono-cyrillic-wght-normal.615bf869ebeb.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-wght-normal.b058178d7f30.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; 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; }

/* ---------- 1. Токены ---------- */
:root {
  color-scheme: light;
  --bg: #eef0f2;
  --surface: #ffffff;
  --surface-2: #f4f5f7;
  --field-bg: #f4f5f7;
  --text: #000000;
  --muted: #62656f;
  --muted-2: #646771;
  --border: #e1e3e7;
  --border-strong: #c9ccd3;
  --accent: #087f76;
  --accent-hover: #0a9a8f;
  --accent-text: #ffffff;
  --accent-bg: #dcf3f0;
  --btn: #000000;        --btn-text: #ffffff;  --btn-hover: #1b1c1f;
  --btn-square: #ffffff; --btn-arrow: #000000;
  --ok: #1f8a4c;        --ok-bg: #e0f3e6;
  --warn: #9a5b00;      --warn-bg: #fdf0d5;
  --bad: #c8302a;       --bad-bg: #fde4e2;
  --info: #62656f;      --info-bg: #f4f5f7;
  --pending: #5f4bd8;   --pending-bg: #ebe8fb;
  --focus: #087f76;
  --radius: 20px; --radius-sm: 12px; --radius-xs: 8px; --radius-lg: 28px;
  --space: 8px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --tap: 44px;
  --font: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px;
  --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-display: 48px; --fs-stat: 56px;
  --lh: 1.5; --lh-tight: 1.1;
  --shadow-1: none; --shadow-2: none;
  --page-max: 960px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #000000; --surface: #111214; --surface-2: #16171a; --field-bg: #0c0d0f;
    --text: #ffffff; --muted: #a8abb7; --muted-2: #7d808b; --border: #26272c; --border-strong: #34363c;
    --accent: #19d3c5; --accent-hover: #5fe8dd; --accent-text: #000000; --accent-bg: #0e2a28;
    --btn: #ffffff; --btn-text: #000000; --btn-hover: #e3e5e9; --btn-square: #000000; --btn-arrow: #19d3c5;
    --ok: #5ad27f; --ok-bg: #0f2418; --warn: #f0b24a; --warn-bg: #2a1f0b;
    --bad: #ff6b6b; --bad-bg: #2c1212; --info: #a8abb7; --info-bg: #16171a;
    --pending: #c3b6ff; --pending-bg: #1a1730; --focus: #19d3c5;
  }
}
.theme-light {
  color-scheme: light;
  --bg: #eef0f2; --surface: #ffffff; --surface-2: #f4f5f7; --field-bg: #f4f5f7;
  --text: #000000; --muted: #62656f; --muted-2: #646771; --border: #e1e3e7; --border-strong: #c9ccd3;
  --accent: #087f76; --accent-hover: #0a9a8f; --accent-text: #ffffff; --accent-bg: #dcf3f0;
  --btn: #000000; --btn-text: #ffffff; --btn-hover: #1b1c1f; --btn-square: #ffffff; --btn-arrow: #000000;
  --ok: #1f8a4c; --ok-bg: #e0f3e6; --warn: #9a5b00; --warn-bg: #fdf0d5;
  --bad: #c8302a; --bad-bg: #fde4e2; --info: #62656f; --info-bg: #f4f5f7;
  --pending: #5f4bd8; --pending-bg: #ebe8fb; --focus: #087f76;
}
.theme-dark {
  color-scheme: dark;
  --bg: #000000; --surface: #111214; --surface-2: #16171a; --field-bg: #0c0d0f;
  --text: #ffffff; --muted: #a8abb7; --muted-2: #7d808b; --border: #26272c; --border-strong: #34363c;
  --accent: #19d3c5; --accent-hover: #5fe8dd; --accent-text: #000000; --accent-bg: #0e2a28;
  --btn: #ffffff; --btn-text: #000000; --btn-hover: #e3e5e9; --btn-square: #000000; --btn-arrow: #19d3c5;
  --ok: #5ad27f; --ok-bg: #0f2418; --warn: #f0b24a; --warn-bg: #2a1f0b;
  --bad: #ff6b6b; --bad-bg: #2c1212; --info: #a8abb7; --info-bg: #16171a;
  --pending: #c3b6ff; --pending-bg: #1a1730; --focus: #19d3c5;
}

/* ---------- 2. База ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Компоненты задают display (grid/flex); атрибут hidden должен всё равно скрывать */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--bg); color: var(--text);
  font: var(--fs-md) / var(--lh) var(--font);
  container-type: inline-size;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.app { background: var(--bg); color: var(--text); font: var(--fs-md) / var(--lh) var(--font); container-type: inline-size; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, figure, fieldset { margin: 0; }
h1 { font-size: 30px; line-height: var(--lh-tight); font-weight: 500; letter-spacing: -.015em; text-wrap: balance; }
h1 .dim, h2 .dim { display: block; color: var(--muted); }
h2 { font-size: var(--fs-xl); line-height: 1.15; font-weight: 500; letter-spacing: -.01em; }
h3 { font-size: var(--fs-lg); line-height: 1.25; font-weight: 500; }
p { text-wrap: pretty; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
p a, .j-detail a, td a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-xs); }
code, .code { font-family: var(--font-mono); font-size: .86em; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.mono { font-family: var(--font-mono); font-size: .92em; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.row.between { justify-content: space-between; }
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@container (min-width: 640px) { h1 { font-size: var(--fs-3xl); } h2 { font-size: 26px; } }

/* ---------- 3. Шапка: бренд + плавающая пилюля навигации ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 72px; padding: var(--space-3) var(--space-4);
  background: var(--bg);
}
.brand { font-weight: 600; font-size: 19px; letter-spacing: -.01em; color: var(--text); text-decoration: none; margin-right: auto; white-space: nowrap; }
.brand span { color: var(--muted); font-weight: 500; margin-left: .3em; }
.brand:hover { color: var(--text); }
.topbar nav { display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.topbar nav a, .topbar nav button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px;
  border: 0; background: none; border-radius: var(--radius-xs);
  color: var(--muted); text-decoration: none; font: 500 15px / 1 var(--font); cursor: pointer;
  transition: background-color .25s, color .25s;
}
.topbar nav a:hover, .topbar nav button:hover { color: var(--text); }
.topbar nav a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
/* Кнопка «Выйти» — POST-форма внутри пилюли; форма не должна ломать flex-ряд */
.topbar nav form { display: contents; }
.who { color: var(--muted-2); font-family: var(--font-mono); font-size: 13px; padding: 0 var(--space-3); white-space: nowrap; }
/* Перенос шапки до 639px: между 480 и 640 пилюля с именем не помещалась и давала горизонтальный скролл */
@container (max-width: 639px) {
  .topbar { flex-wrap: wrap; }
  .brand { font-size: 17px; min-height: 40px; display: inline-flex; align-items: center; }
  .topbar nav { flex: 1 0 100%; }
  .topbar nav { flex-wrap: wrap; }
  .topbar nav a, .topbar nav button { flex: 1; font-size: var(--fs-sm); padding: 0 8px; }
  /* Под кем вошли — первой строкой пилюли: на общем телефоне это главное, что нужно видеть */
  .who { flex: 1 0 100%; order: -1; padding: 6px 10px 2px; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
}
@container (min-width: 640px) { .topbar { padding: var(--space-4) var(--space-5); } }
@container (min-width: 960px) { .topbar { padding: var(--space-4) var(--space-6); } }

/* ---------- 4. Страница и карточка ---------- */
.page { max-width: var(--page-max); margin: 0 auto; padding: var(--space-5) var(--space-4) 96px; display: grid; gap: var(--space-6); }
.page.wide { max-width: 1200px; }
.page-head { display: grid; gap: var(--space-3); }
.page-head p { max-width: 640px; }
.block { display: grid; gap: var(--space-4); }
.two-col { display: grid; gap: var(--space-4); align-items: start; }
.card {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-5);
}
.card.row { flex-direction: row; }
.prose p { max-width: 60ch; font-size: 17px; line-height: 1.6; }
@container (min-width: 640px) {
  .page { padding: var(--space-6) var(--space-5) 120px; gap: 40px; }
  .page-head { gap: var(--space-4); }
  .card { padding: 28px; }
}
@container (min-width: 960px) {
  .page { padding: var(--space-7) var(--space-6) 140px; gap: var(--space-7); }
  .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}

/* ---------- 5. Кнопки ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--btn); color: var(--btn-text);
  font: 600 var(--fs-md) / 1.2 var(--font); text-decoration: none; text-align: left;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color .25s, border-color .25s, color .25s, transform .06s;
}
.btn:hover { background: var(--btn-hover); color: var(--btn-text); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.secondary:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.btn.link { background: none; border-color: transparent; color: var(--accent); padding: 0 8px; }
.btn.link:hover { background: none; color: var(--accent-hover); text-decoration: underline; text-underline-offset: .18em; }
.btn.lg { min-height: 56px; padding: 0 24px; font-size: var(--fs-lg); }
.btn.block { width: 100%; }
/* Стрелка в квадрате — для действий «вперёд» (Открыть, Сдать, Дальше) */
.btn.arrow { justify-content: space-between; padding-right: 54px; }
.btn.arrow::before { content: ""; position: absolute; right: 5px; top: 5px; bottom: 5px; width: 36px; border-radius: var(--radius-xs); background: var(--btn-square); transition: transform .4s cubic-bezier(.2,1,.68,1); }
.btn.arrow::after { content: ""; position: absolute; right: 21px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--btn-arrow); border-right: 2px solid var(--btn-arrow); transform: translateY(-50%) rotate(45deg); transition: transform .4s cubic-bezier(.2,1,.68,1); }
.btn.arrow:hover::after { transform: translate(2px, -50%) rotate(45deg); }
.btn.lg.arrow { padding-right: 68px; }
.btn.lg.arrow::before { right: 6px; top: 6px; bottom: 6px; width: 44px; }
.btn.lg.arrow::after { right: 26px; width: 9px; height: 9px; }
.btn.secondary.arrow::before { background: var(--surface-2); }
.btn.secondary.arrow::after { border-color: var(--text); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@container (max-width: 479px) { .actions .btn:not(.link) { flex: 1 1 100%; } }

/* ---------- 6. Бейджи (пилюли с точкой), плашки, коды правил ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 11px 0 9px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); flex: none; }
.badge.ok::before { background: var(--ok); }
.badge.warn::before { background: var(--warn); }
.badge.bad::before { background: var(--bad); }
.badge.info::before { background: var(--accent); }
.badge.pending { border-style: dashed; border-color: var(--border-strong); color: var(--muted); }
.badge.pending::before { background: var(--pending); }
.badge.quiet { color: var(--muted); border-color: transparent; background: var(--surface-2); }
.badge.quiet::before { display: none; }

.notice {
  display: grid; gap: var(--space-2); padding: var(--space-4) 20px;
  border-radius: 16px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
}
.notice p { color: var(--muted); max-width: 64ch; }
.notice .eyebrow { color: var(--accent); }
.notice.ok { border-color: color-mix(in oklab, var(--ok) 45%, transparent); }
.notice.ok .eyebrow { color: var(--ok); }
.notice.warn { border-color: color-mix(in oklab, var(--warn) 50%, transparent); }
.notice.warn .eyebrow { color: var(--warn); }
.notice.bad { background: var(--bad-bg); border-color: color-mix(in oklab, var(--bad) 55%, transparent); }
.notice.bad .eyebrow { color: var(--bad); }
.notice.bad p { color: var(--text); }
.notice.pending { border: 1px dashed var(--border-strong); background: transparent; }
.notice.pending .eyebrow { color: var(--pending); }
.notice.plain { background: var(--surface-2); border-color: transparent; }
.notice.plain .eyebrow { color: var(--muted); }
.notice ul { padding-left: 1.2em; display: grid; gap: 4px; color: var(--muted); }
.notice .actions { margin-top: var(--space-2); }

.rule { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); }
.rule code { padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); font-size: 12px; color: var(--muted); }

/* ---------- 7. Формы ---------- */
label { display: block; font-weight: 500; margin-bottom: 8px; }
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input:not([type]), textarea, select {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--text); font: inherit; font-size: var(--fs-md);
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
textarea { min-height: 112px; resize: vertical; line-height: var(--lh); }
textarea.mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 20px; height: 20px; margin: 0; flex: none; }
.field { display: grid; gap: 8px; }
.field label { margin: 0; }
.field .hint { font-size: var(--fs-sm); color: var(--muted); }
.field.short input { max-width: 200px; }
.field.invalid input { border-color: var(--warn); }
.field .error-text { font-size: var(--fs-sm); color: var(--warn); }

fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--space-2); }
fieldset.plain legend { font-weight: 500; padding: 0; margin-bottom: var(--space-3); }
label.radio, label.check {
  display: flex; align-items: flex-start; gap: 14px;
  min-height: 52px; padding: 14px 16px; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-weight: 500; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
label.radio input, label.check input { margin-top: 2px; }
label.radio:has(input:checked), label.check:has(input:checked) { border-color: var(--text); background: var(--surface-2); }
label.radio .sub { display: block; color: var(--muted); font-size: var(--fs-sm); font-weight: 400; margin-top: 2px; }

/* Поле ответа */
.answer { display: grid; gap: var(--space-3); }
.answer input { font-size: var(--fs-2xl); font-weight: 500; min-height: 64px; padding: 12px 20px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.answer .actions { margin-top: var(--space-2); }

/* Индикатор сохранения */
.save-state { display: inline-flex; align-items: center; gap: 10px; min-height: 24px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.save-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); flex: none; }
.save-state[data-state="saved"] { color: var(--muted); }
.save-state[data-state="saved"]::before { background: var(--ok); }
.save-state[data-state="saving"]::before { background: var(--muted-2); animation: ss-pulse 1.2s ease-in-out infinite; }
.save-state[data-state="error"], .save-state[data-state="conflict"] { color: var(--bad); }
.save-state[data-state="error"]::before { background: var(--bad); }
.save-state[data-state="conflict"]::before { background: transparent; box-shadow: inset 0 0 0 2px var(--bad); }
@keyframes ss-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.copy-state { font-family: var(--font-mono); font-size: 13px; min-height: 22px; color: var(--muted); }
.copy-state[data-state="ok"] { color: var(--ok); }
.copy-state[data-state="fail"] { color: var(--warn); }

/* ---------- 8. Условие задачи и дроби ---------- */
.statement { font-size: 36px; line-height: 1.15; font-weight: 500; letter-spacing: -.015em; font-variant-numeric: lining-nums; }
.statement.sm { font-size: var(--fs-2xl); }
.statement-en { color: var(--muted-2); font-family: var(--font-mono); font-size: 13px; }
.protected { -webkit-user-select: none; user-select: none; }
.op { margin: 0 .18em; }
@container (min-width: 640px) { .statement { font-size: var(--fs-display); } .statement.sm { font-size: 30px; } }

.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: .55em; margin: 0 .1em; font-size: .8em; line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; }
.statement .frac { font-size: .64em; vertical-align: .62em; }
.frac > :first-child { border-bottom: .08em solid currentColor; padding: 0 .18em .06em; }
.frac > :last-child { padding: .04em .18em 0; }
/* В мелком тексте (14px) вертикальная дробь выходит ~11px — там дробь в строку через U+2044 */
.frac-inline .frac, .small .frac { display: inline; vertical-align: baseline; font-size: inherit; line-height: inherit; margin: 0; }
.frac-inline .frac > *, .small .frac > * { padding: 0; border: 0; }
.frac-inline .frac > :first-child::after, .small .frac > :first-child::after { content: "\2044"; margin: 0 .04em; }

/* Подвал: служебные ссылки (смена пароля, семья) */
.page-foot { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-4) var(--space-6); color: var(--muted); font-size: var(--fs-sm); }

/* Чертёж задания (генерируется сервером, currentColor — работает в обеих темах) и текст для чтения */
.figure { margin: 0; max-width: 320px; color: var(--text); }
.figure svg { display: block; width: 100%; height: auto; }
.figure.sm { max-width: 220px; }
.passage { padding: var(--space-4) 20px; border-radius: 14px; background: var(--surface-2); line-height: 1.6; }
.passage p { max-width: 64ch; }

/* Учебный пакет — «терминальная» карточка */
.pack { border: 1px solid var(--border); border-radius: var(--radius); background: var(--field-bg); overflow: hidden; }
.pack-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 14px 20px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); }
.pack-text {
  display: block; width: 100%; min-height: 220px; max-height: 400px; overflow: auto; margin: 0;
  padding: 20px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--field-bg); color: var(--text);
  font: 13.5px / 1.75 var(--font-mono); white-space: pre-wrap; word-break: break-word; resize: vertical;
  -webkit-user-select: text; user-select: text;
}
.pack .pack-text { border: 0; border-radius: 0; }
.pack-text:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }

/* ---------- 9. Результат ---------- */
.answers { display: grid; gap: var(--space-3); }
.answer-cell { display: grid; gap: 4px; padding: 18px 20px; border-radius: 14px; background: var(--surface-2); border: 1px solid transparent; }
.answer-cell .val { font-size: var(--fs-2xl); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.answer-cell.key { border-color: color-mix(in oklab, var(--ok) 45%, transparent); }
.score { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.score-num { font-size: var(--fs-stat); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
@container (min-width: 640px) { .answers { grid-template-columns: 1fr 1fr; } .answer-cell .val { font-size: 32px; } }

/* ---------- 10. Списки шагов ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--border); }
.steps > li {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); align-items: start;
  padding: 20px 0; counter-increment: step; border-bottom: 1px solid var(--border);
  transition: background-color .25s;
}
.steps > li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; color: var(--muted-2); padding-top: 5px; }
.steps > li[data-status="done"] { color: var(--muted); }
.steps > li[data-status="done"]::before { content: "\2713"; color: var(--ok); font-size: 15px; }
.steps > li[data-status="done"] .step-title { font-weight: 500; color: var(--muted); }
.steps > li[data-status="current"] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin: 12px 0; }
.steps > li[data-status="current"]::before { color: var(--accent); }
.steps > li[data-status="none"] { border-bottom-style: dashed; color: var(--muted); }
.steps > li[data-status="none"]::before { content: "\2014"; }
.step-body { display: grid; gap: 6px; min-width: 0; }
.step-title { font-size: 19px; line-height: 1.25; font-weight: 500; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; letter-spacing: -.01em; }
.step-title .min { color: var(--muted-2); font-family: var(--font-mono); font-weight: 400; font-size: 13px; }
.step-note { color: var(--muted); font-size: 15px; max-width: 56ch; }
.step-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: 4px; }
.step-action { grid-column: 1 / -1; }
@container (min-width: 640px) {
  .steps > li { grid-template-columns: 56px 1fr auto; align-items: center; padding: 24px 0; }
  .steps > li[data-status="current"] { padding: 24px; }
  .step-action { grid-column: auto; }
}
.steps.compact { border-top: 0; }
.steps.compact > li { padding: 12px 0; grid-template-columns: 32px 1fr; }
.steps.compact > li:last-child { border-bottom: 0; }
.steps.compact > li[data-status="current"] { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 12px 0; margin: 0; }
.steps.compact .step-title { font-size: var(--fs-md); font-weight: 500; }

/* ---------- 11. Раскрывающиеся блоки ---------- */
details.disclosure { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
details.disclosure summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 14px 20px; font-weight: 500;
}
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure summary::before {
  content: ""; width: 8px; height: 8px; flex: none; margin: 0 2px 0 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .25s;
}
details.disclosure[open] summary::before { transform: rotate(45deg); }
details.disclosure .disclosure-body { padding: 0 20px 20px; display: grid; gap: var(--space-3); }

/* ---------- 12. Таблицы ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 14px 20px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 16px 20px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td .sub { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
@container (max-width: 639px) {
  .table-wrap.stack thead { display: none; }
  .table-wrap.stack table, .table-wrap.stack tbody, .table-wrap.stack tr, .table-wrap.stack td { display: block; }
  .table-wrap.stack tr { padding: 16px 20px; border-bottom: 1px solid var(--border); }
  .table-wrap.stack tr:last-child { border-bottom: 0; }
  .table-wrap.stack td { padding: 2px 0; border: 0; }
  .table-wrap.stack td:first-child { font-weight: 500; font-size: 17px; margin-bottom: 6px; }
  .table-wrap.stack td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; }
  .table-wrap.stack td:first-child[data-label]::before { display: none; }
}

/* ---------- 13. Журнал ---------- */
.journal { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.journal > li { display: grid; grid-template-columns: 1fr; gap: 4px var(--space-5); padding: 18px 0; border-bottom: 1px solid var(--border); }
.journal > li.j-day { display: block; padding: 28px 0 10px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); }
.journal > li.j-day:first-child { padding-top: 12px; }
.j-time { font-family: var(--font-mono); font-size: 13px; color: var(--muted-2); display: flex; gap: 12px; }
.j-title { font-weight: 500; font-size: 16px; }
.j-detail { color: var(--muted); font-size: var(--fs-sm); }
@container (min-width: 640px) {
  .journal > li { grid-template-columns: 128px 1fr; padding: 20px 0; }
  .j-time { flex-direction: column; gap: 2px; }
  .j-title, .j-detail { grid-column: 2; }
  .j-title { font-size: 17px; }
}

/* ---------- 14. Прочее ---------- */
.kv { display: grid; grid-template-columns: 1fr; gap: 4px var(--space-4); }
.kv dt { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); }
.kv dd { margin: 0 0 var(--space-3); }
.kv dd:last-child { margin-bottom: 0; }
.kv.small dd { font-size: 15px; color: var(--muted); }
@container (min-width: 640px) {
  .kv { grid-template-columns: 150px 1fr; gap: 10px var(--space-5); }
  .kv dt { padding-top: 4px; }
  .kv dd { margin: 0; }
}
.examples { display: grid; gap: var(--space-3); }
.example { display: grid; gap: var(--space-3); padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.example p { color: var(--muted); }
@container (min-width: 720px) { .examples { grid-template-columns: 1fr 1fr; } }
.decision { display: grid; gap: 6px; }
.decision strong { font-weight: 500; font-size: 16px; }
.decision + .decision { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.reasons { padding-left: 1.2em; display: grid; gap: 6px; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; transition: color .2s, background-color .2s; }
.filters a:hover { color: var(--text); }
.filters a[aria-current="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.auth { max-width: 440px; width: 100%; margin: 0 auto; }
.auth-page { display: grid; gap: var(--space-5); align-items: center; justify-items: center; }
.auth-page .hero3d { width: min(100%, 320px); aspect-ratio: 4 / 3; }
/* На телефоне форма — первой: заставка не должна сдвигать вход под сгиб */
@container (max-width: 639px) { .auth-page .hero3d { order: 1; width: min(100%, 220px); } }
@container (min-width: 640px) { .auth { padding: 36px; } .auth-page .hero3d { width: min(100%, 440px); } }
@container (min-width: 960px) {
  .auth-page { grid-template-columns: minmax(0, 1fr) 440px; gap: var(--space-7); min-height: 560px; }
  .auth-page .hero3d { width: 100%; max-width: 560px; justify-self: start; }
}

/* 3D-объект: <canvas data-hero3d aria-hidden="true"> внутри .hero3d; рисует hero3d.js */
.hero3d { position: relative; }
.hero3d canvas { display: block; width: 100%; height: 100%; }
.page-head.with-hero { grid-template-columns: minmax(0, 1fr) 112px; grid-template-rows: auto auto; align-items: center; column-gap: var(--space-4); }
.page-head.with-hero > h1 { grid-column: 1; grid-row: 1; }
.page-head.with-hero > .hero3d { grid-column: 2; grid-row: 1; width: 112px; height: 112px; }
.page-head.with-hero > p { grid-column: 1 / -1; grid-row: 2; }
@container (min-width: 640px) { .page-head.with-hero { grid-template-columns: minmax(0, 1fr) 200px; } .page-head.with-hero > .hero3d { width: 200px; height: 200px; } .page-head.with-hero > p { grid-column: 1; } }
@container (min-width: 960px) { .page-head.with-hero { grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: auto 1fr; align-items: start; row-gap: var(--space-4); } .page-head.with-hero > .hero3d { width: 260px; height: 260px; grid-row: 1 / 3; align-self: center; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Day progress on «Сегодня» and the step-by-step solution of a worked example */
.day-progress { display: grid; gap: 6px; margin-top: var(--space-3); max-width: 420px; }
/* <progress>, not a width in a style attribute: the CSP (style-src 'self') drops inline styles. */
.day-progress-bar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0;
  border-radius: 999px; background: var(--border); overflow: hidden; color: var(--accent); }
.day-progress-bar::-webkit-progress-bar { background: var(--border); border-radius: 999px; }
.day-progress-bar::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width .3s; }
.day-progress-bar::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.solution-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.next-step { display: grid; gap: var(--space-2); }
.next-step .step-what { color: var(--muted); }

/* Sections of one learner in the parent area */
.subnav { display: flex; gap: 2px; padding: 4px; margin: 0 0 var(--space-4); overflow-x: auto; scrollbar-width: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.subnav a { flex: 1 0 auto; text-align: center; padding: 8px 10px; border-radius: calc(var(--radius-sm) - 4px);
  color: var(--muted); text-decoration: none; font-size: var(--fs-sm); white-space: nowrap; }
.subnav a:hover { color: var(--text); }
.subnav a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.summary-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.tile { padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); display: grid; gap: 4px; align-content: start; }
.tile .num { font-size: 1.4rem; font-weight: 600; color: var(--text); }
.tile .lbl { font-size: var(--fs-sm); color: var(--muted); }
.work + .work { margin-top: var(--space-3); }
.work summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: baseline; }
.work .when { color: var(--muted); font-size: var(--fs-sm); }

/* Sign-up and recovery */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.auth .auth-links { margin-top: var(--space-4); }
.auth label.check { margin-top: var(--space-3); }
.auth label.check + .btn, .auth label.check + button { margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-6); }
.prose h2:first-child { margin-top: 0; }
.prose li { max-width: 60ch; line-height: 1.55; margin-bottom: var(--space-2); }
.auth-alt { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); display: grid; gap: var(--space-3); }
.auth-alt p { margin: 0; }
.stack-cards { display: grid; gap: var(--space-5); }
.stack-cards h2 { margin-top: var(--space-4); }
.stack-cards h1 + h2 { margin-top: var(--space-3); }
.auth .tg-login { margin-top: var(--space-3); }
.stack-cards .card > h2:first-child { margin-top: 0; }

/* Landing for visitors */
.landing-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 var(--space-6); }
.landing-cta .btn { flex: 1 1 220px; }
.landing .summary-tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 0; }
.landing .tile strong { font-weight: 500; line-height: 1.4; }
.plain-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.landing .block + .block { margin-top: var(--space-6); }
.btn.danger { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.btn.danger:hover { background: var(--bad); color: #fff; }
.family-layout { display: flex; flex-direction: column; gap: var(--space-6); }
.family-layout.first-run .add-forms { order: -1; }

/* Согласие на статистику посещений (static/js/consent.js) */
.consent-box { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 50; max-width: 560px; margin: 0 auto; padding: var(--space-4); border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 8px 30px rgba(0, 0, 0, .18); }
.consent-box p { margin: 0 0 var(--space-3); }
.consent-box .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.page-foot a { color: inherit; }
.legal h2 { margin-top: var(--space-5); }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: var(--space-2); border-bottom: 1px solid var(--border); }
.table-scroll { overflow-x: auto; }
.password-row { display: flex; gap: var(--space-2); }
.password-row input { flex: 1; min-width: 0; }
.who-sub { display: block; font-size: var(--fs-xs); color: var(--muted); }
.consent-box { bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
.has-consent-banner .page { padding-bottom: 280px; }