/* ============================================================================
   matlas.css — единственный файл вида для Матласа: токены и примитивы.

   До 2026-08-27 весь вид сайта держал инлайновый блок <style> на 23 строки
   внутри core/templates/core/base.html, а папки core/static не существовало
   вовсе. Этот файл её заменил целиком: в base.html не осталось ни одного
   правила.

   ── ОТКУДА ВЗЯТЫ ЗНАЧЕНИЯ ──────────────────────────────────────────────────
   Палитра НЕ придумана здесь. Она выбрана владельцем в диалоговом заходе
   `kod_tokeny.md` 2026-08-27 из пяти показанных вариантов — палитра П3,
   «тёплая бумага плюс один холодный якорь». Разбор и отвергнутые варианты
   лежат в zhurnal/2026-08-27_problems-paper-visible/tokeny/.

   Каждое значение ниже ЗАМЕРЕНО по WCAG 2.1, а не подобрано на глаз.

   🔴 ЧТО ИМЕННО ИЗМЕРЕНО — дословно, потому что прежняя редакция этой фразы
   утверждала больше, чем считала, и это нашёл верификатор. Порог проходят все
   пары «текст на фоне» (4.5:1) и все границы ЭЛЕМЕНТОВ УПРАВЛЕНИЯ — кнопка,
   поле, кольцо фокуса (3:1, WCAG 1.4.11). ДЕКОРАТИВНЫЕ границы `--edge` —
   рамка карточки, рамка блока задачи, волосяная линия между задачами — порога
   3:1 НЕ проходят и не обязаны: 1.4.11 про органы управления, а не про
   разделители. Их числа честные и низкие: 1.19:1 к земле в светлой теме,
   1.44:1 в тёмной. Называть их «прошедшими» было бы неправдой, а поднимать до
   3:1 — превратить листок в таблицу.

   ── ДВА АКЦЕНТА СЕМАНТИЧЕСКИЕ, И ИМЕННО ПОЭТОМУ ОДИН ИЗ НИХ ХОЛОДНЫЙ ───────
   `--remark` (ремарка) и `--aside` (отступление) значат РАЗНОЕ, поэтому им
   мало проходить контраст на бумаге — они обязаны расходиться друг с другом.
   Замерено с симуляцией дальтонизма: две ТЁПЛЫЕ краски этого не выдерживают.
   Амбра с терракотой расходятся на 43 в норме и на 17 у дальтоника, в тёмной
   теме на 3.3 — это один цвет, а не два. Амбра с оливой держится в светлой и
   схлопывается в тёмной. Прежняя пара амбра+роза тоже не держится: 52 и 57
   при пороге 60. Пара «тёплая амбра + холодный сине-серый» даёт 119 и 106.
   Отсюда правило: тёплой может быть ЗЕМЛЯ, а второй акцент — нет.

   🔴 Порог 60 на разведение акцентов — наш, а не стандартный: у WCAG пункта
   про различимость двух акцентов между собой нет вовсе.

   ── ТЁМНАЯ ТЕМА — ТОЛЬКО СИСТЕМНАЯ НАСТРОЙКА, И ЭТО РЕШЕНИЕ ────────────────
   Переключателя тем НЕТ, и `[data-theme]` здесь тоже нет. Владелец его не
   просил, а селектор, который нечем включить, — мёртвый код. Заведёте
   переключатель — добавится второй блок тёмных значений, и тогда клауза
   «число цветовых токенов равно числу переопределений» перестанет считаться
   в лоб: считать придётся РАЗЛИЧНЫЕ имена, а не строки.

   Проверить, что ни один цветовой токен не остался без тёмного значения:
     grep -oE -- '--[a-z-]+:[[:space:]]*#' core/static/css/matlas.css \
       | grep -oE -- '--[a-z-]+' | sort | uniq -c
   У КАЖДОГО имени обязана стоять двойка. Это же гоняет
   core/tests/test_tokens.py, чтобы правило не держалось на памяти.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ── текст ── */
  --ink: #1a1a1a;              /* чернила; значение с логотипа, замер приёмки  */
  --muted: #6b6660;            /* вторичный текст, подписи                     */

  /* ── поверхности ── */
  --ground: #f4f0e7;           /* земля страницы: тёплая, около бумаги         */
  --surface: #fffdf8;          /* карточка, блок задачи, поле ввода            */
  --surface-code: #f7f2e7;     /* моноширинный блок                            */

  /* ── линии ── */
  --edge: #e2ddd2;             /* декоративная: рамка карточки, разделитель    */
  --edge-strong: #7f776a;      /* граница элемента управления: нужен 3:1       */
                               /* 🔴 считается против САМОЙ ТЁМНОЙ поверхности,*/
                               /* какую встречает, а это заливка кнопки ПОД    */
                               /* КУРСОРОМ. На #8f887c там выходило 2.72:1 —   */
                               /* кнопка теряла границу ровно тогда, когда на  */
                               /* неё наводят. Нашёл верификатор, не я.        */

  /* ── акценты ── */
  --accent: #9e5817;           /* интерфейс: ссылки, фокус                     */
  --remark: #9e5817;           /* СМЫСЛ: ремарка. Тёплый                       */
  --aside: #2f5d78;            /* СМЫСЛ: отступление. Единственный холодный    */

  /* ── кнопки ── */
  --control: #f2ede2;
  --control-hover: #e9e2d4;
  --ok-surface: #e3efe1;
  --ok-edge: #628d5b;          /* усилен: #8fb48a владельца давал 2.28:1       */
  --ok-ink: #2c6124;
  --bad-surface: #fdeee6;
  --bad-edge: #ab744c;         /* усилен: #d8a583 владельца давал 2.15:1       */
  --bad-ink: #8a4a1d;

  /* ── нецветовые токены: тёмного значения у них нет по природе ── */
  --font-shell: -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-paper: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "DejaVu Sans Mono", Consolas, monospace;
  /* 🔴 38rem, а не 900px из веб-системы владельца, и это осознанно. 900px —
     ширина его страниц в nlogn, где лежат таблицы и широкие карточки. Ни на
     одной живой странице Матласа такого содержимого пока нет, а колонка в
     900px под тремя строками текста читается как пустая страница. Появится
     страница, которой нужна ширина, — она её и получит. */
  --measure-shell: 38rem;
  --measure-paper: 34em;
  --radius: 10px;
  --radius-inner: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e2ddd2;            /* НЕ #ffffff: logo/USAGE.md запрещает прямо -  */
                               /* холодный белый выпадает из тёплой палитры    */
    --muted: #a49d90;
    --ground: #14120f;
    --surface: #1e1b16;
    --surface-code: #241f19;
    --edge: #34312a;
    --edge-strong: #8d8676;    /* та же причина: на #7a7464 под курсором 2.86  */
    --accent: #d9a463;         /* замер захода logo: #9e5817 на тёмном гаснет  */
    --remark: #d9a463;
    --aside: #8fc0dd;
    --control: #2a2721;
    --control-hover: #332f28;
    --ok-surface: #1e2a1c;
    --ok-edge: #63855c;
    --ok-ink: #a8d3a0;
    --bad-surface: #2a1e17;
    --bad-edge: #986a4d;
    --bad-ink: #f0b48c;
  }
}

/* ============================================================================
   ПРИМИТИВЫ ОБОЛОЧКИ — веб-нативный регистр
   Кабинет, формы, страница входа. Выбран владельцем: «Кабинеты определённо
   вариант 2». Источник — его же система из nlogn/*поля для сайта.html.
   ========================================================================== */

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

body {
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  max-width: var(--measure-shell);
  font: 1rem/1.55 var(--font-shell);
  color: var(--ink);
  background: var(--ground);
}

h1 { font-size: 1.375rem; font-weight: 600; margin: 0 0 .5rem; }
h2 { font-size: 1.0625rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
p { margin: 0 0 .75rem; }

/* Подпись, служебная строка. Класс достался от инлайнового блока и остаётся:
   он стоит в шести живых шаблонах, переименование — работа не этого захода. */
.tihoe { color: var(--muted); font-size: .875rem; }

a { color: var(--accent); }
a:focus-visible,
button:focus-visible,
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

ul, ol { margin: 0 0 .75rem; padding-left: 1.4rem; }
li { margin: 0 0 .25rem; }
strong { font-weight: 600; }

.card {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: .875rem 1rem;
  margin: 0 0 1rem;
}

.badge {
  display: inline-block;
  font-size: .75rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: .0625rem .5rem;
}

button {
  font: inherit;
  font-size: .8125rem;
  padding: .3125rem .875rem;
  color: var(--ink);
  background: var(--control);
  border: 1px solid var(--edge-strong);
  border-radius: 6px;
  cursor: pointer;
}
button:hover { background: var(--control-hover); }
button.ok  { background: var(--ok-surface);  border-color: var(--ok-edge);  color: var(--ok-ink); }
button.bad { background: var(--bad-surface); border-color: var(--bad-edge); color: var(--bad-ink); }

label { display: block; margin-bottom: .75rem; }

input, textarea, select {
  font: inherit;
  font-size: .875rem;
  padding: .375rem .5625rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--edge-strong);
  border-radius: 6px;
  max-width: 22em;
  width: 100%;
}
input[type="checkbox"] { width: auto; margin-right: .375rem; }

pre {
  margin: 0 0 .875rem;
  padding: .625rem .75rem;
  background: var(--surface-code);
  border: 1px solid var(--edge);
  border-radius: 7px;
  font: .8125rem/1.5 var(--font-mono);
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Ошибки формы. Django печатает их как <ul class="errorlist">. Текст ошибки
   называет ОДНО нарушенное правило — docs/TEXT-RULES.md правило 2; здесь
   только вид, сам текст живёт в core/views.py. */
.errorlist {
  list-style: none;
  padding: 0;
  margin: -.5rem 0 .75rem;
  color: var(--bad-ink);
  font-size: .875rem;
}

/* ============================================================================
   БУМАЖНЫЙ РЕГИСТР — листок

   Второй регистр, и граница между ним и оболочкой ровно одна: класс `.paper`.
   Снаружи сайт говорит гротеском, внутри — Georgia. Структура выбрана
   владельцем: Е — сплошного листа НЕТ, задачи лежат карточками прямо на
   земле, а связный текст между ними — на самой земле.

   🔴 Правило группировки — тоже решение владельца: задачи, идущие подряд,
   делят ОДНУ рамку и разделены внутри неё волосяной линией; связный текст
   между задачами рамку разрывает. Поэтому группировка живёт в РАЗМЕТКЕ
   (`.problem-group`), а не в CSS: заход рендера обязан будет её проставлять.
   ========================================================================== */

.paper {
  max-width: var(--measure-paper);
  margin: 0 auto;
  font: 17px/1.5 var(--font-paper);
  color: var(--ink);
}
.paper h1 { font: 700 1.5em/1.3 var(--font-paper); margin: 0 0 1.1em; }
.paper p { margin: 0 0 .55em; text-align: justify; hyphens: auto; }

.problem-group {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-inner);
  padding: .875rem 1.125rem;
  margin: .9em 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}

/* 🔴 В ТЁМНОЙ ТЕМЕ ОБЪЁМ ДАЁТ СВЕТ, А НЕ ТЕНЬ. Выбор владельца 2026-08-28
   («выбираю Б») из трёх показанных вариантов.

   Почему тень тут не годится и почему её нельзя просто усилить — замерено
   композитом по альфе, а не решено на вкус. Чёрная тень над землёй `#14120f`
   даёт 1.008:1 при непрозрачности .07 и всего 1.083:1 при .65 — то есть даже
   на пределе МЕНЬШЕ, чем даёт сама карточка (1.089:1). Земля почти чёрная,
   темнить некуда: чёрная тень на тёмном не работает ни при какой силе.
   Подсветка верхнего края даёт 1.218:1 — больше, чем тень выдаёт даже в
   светлой теме (1.168:1).

   ⚠ Эти два `rgba()` — тень выше и грань здесь — ЕДИНСТВЕННЫЕ цвета во всём
   файле мимо системы токенов, и это осознанно, а не недосмотр. Токенизировать
   их нельзя: у грани нет светлого значения (в светлой теме её не существует
   вовсе), и токен без пары сломал бы правило «у каждого цветового токена есть
   тёмное значение», которое стережёт `core/tests/test_tokens.py`. Не
   «исправляйте» это, заведя токен. */
@media (prefers-color-scheme: dark) {
  .problem-group {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  }
}
.problem-group .problem { margin: 0; text-align: justify; }
.problem-group .problem + .problem {
  border-top: 1px solid var(--edge);
  margin-top: .7em;
  padding-top: .7em;
}

/* Номер задачи. Звезда — просто звезда: ни толстой рамки, ни пилюли.
   Решение владельца 2026-08-27, и оно ОТМЕНЯЕТ его же прежнее
   (`.card.star`, акцентная рамка вдвое толще) — отменяет потому, что он
   попросил сам: «я и так понял, что задача со звёздочкой». */
.paper .tag {
  display: inline-block;
  border: 1px solid var(--ink);
  padding: 0 .25em;
  margin-right: .4em;
  font-weight: 700;
  font-size: .92em;
  line-height: 1.35;
  white-space: nowrap;
}
.paper .tag sup { font-size: .75em; line-height: 0; }

.paper .term { font-style: italic; }
.paper var, .paper .m { font-style: italic; font-family: inherit; }
.paper .up, .paper .mod { font-style: normal; }
.paper .nb { white-space: nowrap; }
.paper sup, .paper sub { font-size: .72em; line-height: 0; }

.paper .remark {
  color: var(--remark);
  font-size: .93em;
  line-height: 1.45;
  margin: .8em 0 .8em 1.1em;
  text-indent: -1.1em;
  text-align: justify;
}
.paper .aside {
  color: var(--aside);
  font-size: .93em;
  line-height: 1.45;
  margin: .9em 0;
  text-align: justify;
}
.paper .aside .mk { font-style: normal; }

.paper .display { text-align: center; margin: .75em 0; line-height: 1.35; }
.paper .display.accented { color: var(--remark); }

.paper .code {
  font: .82em/1.55 var(--font-mono);
  color: var(--aside);
  white-space: pre-wrap;
  margin: .6em 0;
  padding: .625rem .75rem;
  background: var(--surface-code);
  border: 1px solid var(--edge);
  border-radius: 7px;
}

/* Пункты внутри задачи. Маркеры латинские, потому что латинский и текст
   задач в референсе; на русском листке это одно свойство list-style. */
.paper ol.items { margin: .5em 0 0 1.4em; padding: 0; list-style: lower-alpha; }
.paper ul.items { margin: .5em 0 0 1.2em; padding: 0; }
.paper .items li { margin: 0 0 .3em; text-align: justify; }

.paper figure { margin: 1em 0 .2em; text-align: center; }
.paper figure img { max-width: 56%; height: auto; }
.paper figcaption { margin-top: .45em; font-size: .97em; color: var(--muted); }

.paper .frac {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin: 0 .18em;
  line-height: 1.25;
}
.paper .frac > .n { display: block; border-bottom: 1px solid currentColor; padding: 0 .32em; }
.paper .frac > .d { display: block; padding: 0 .32em; }
.paper .sqrt { white-space: nowrap; }
.paper .sqrt .rad { text-decoration: overline; }

@media (max-width: 620px) {
  body { padding: 1.25rem .875rem 3rem; }
  .paper { font-size: 16px; }
  .paper p, .paper .problem, .paper .remark, .paper .aside { text-align: left; }
  .paper figure img { max-width: 100%; }
}