/* ============================================================================
   ПАО «Магнит» — оценочный инструмент. Оформление.
   ----------------------------------------------------------------------------
   Панель НИЧЕГО НЕ СОВЕТУЕТ, и оформление обязано это поддерживать.

   1. ОДИН акцент, и он НЕ красный. Красный на витрине зарезервирован под статус
      «critical»; фирменный алый «Магнита» в роли акцента читался бы как тревога
      на панели, весь смысл которой — «сигнала нет». Акцент — синий слот 1
      валидированной палитры dataviz.

   2. АКЦЕНТ РАСЩЕПЛЁН НАДВОЕ. Материал (заливки, марки, полосы) держит порог 3:1
      к поверхности, краска текста — 4,5:1. Один и тот же #2a78d6 даёт 4,30 к
      карточке: как марка проходит, как текст — нет. Поэтому --accent (материал) и
      --accent-ink (текст) — разные шаги одной шкалы. Измерено наложением слоёв
      (карточка на плоскости страницы), а не на глаз.

   3. ЦВЕТ НИКОГДА НЕ ЕДИНСТВЕННЫЙ КАНАЛ. Класс PIT, «поздняя» точка чистого долга,
      теневой слой — всё несёт слово и форму, а не только оттенок.

   4. ЦВЕТ ГРАФИКОВ ЖИВЁТ ТОЛЬКО ЗДЕСЬ. В charts.js нет ни одного fill/stroke:
      SVG получает классы, краска приезжает отсюда. Иначе тема переключается, а
      график остаётся в прежних цветах.

   Палитра — валидированная эталонная (dataviz, scripts/validate_palette.js):
   пара #2a78d6 / #eb6834 на светлой поверхности #fcfcfb и #3987e5 / #d95926 на
   тёмной #1a1a19 проходят все шесть проверок (CVD ΔE 24,7 и 26,8 при пороге 8).
   ============================================================================ */

:root {
  color-scheme: dark;

  --plane: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #211f1e;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --rule: #383835;
  --hair: rgba(255, 255, 255, .10);

  --accent: #3987e5;
  --accent-ink: #3987e5;
  --accent-soft: rgba(57, 135, 229, .20);
  --accent-wash: rgba(57, 135, 229, .08);

  --s2: #d95926;
  --s2-ink: #eb6834;
  --s2-soft: rgba(217, 89, 38, .20);

  --good: #0ca30c;
  --warn: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;

  /* Расходящаяся пара (только сетка условной стоимости): синий = капитал
     акционера положителен, красный = обнулён. Нейтраль в середине — серый. */
  --div-pos: 57, 135, 229;
  --div-neg: 208, 59, 59;
  --div-mid: var(--grid);

  --shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 8px 24px -14px rgba(0, 0, 0, .7);

  /* Кегль: 11 / 12 / 13 / 15 / 17 / 21 / 30 */
  --t-micro: .6875rem;
  --t-tiny: .75rem;
  --t-small: .8125rem;
  --t-base: .9375rem;
  --t-lead: 1.0625rem;
  --t-h: 1.3125rem;
  --t-num: 1.875rem;

  --s1: 4px; --s2s: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  --radius: 14px;
  --radius-sm: 9px;
  --measure: 1180px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

:root[data-theme="light"] {
  color-scheme: light;

  --plane: #f4f4f1;
  --surface: #fcfcfb;
  --surface-2: #f1f0ec;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  /* #7d7b75 давал 4,0 к карточке — а этим серым набран весь мелкий текст 11–12 px,
     ему нужно 4,5. #6d6b65 даёт 5,2 к карточке и 4,8 к плоскости страницы. */
  --muted: #6d6b65;
  --grid: #e1e0d9;
  --rule: #c3c2b7;
  --hair: rgba(11, 11, 11, .10);

  --accent: #2a78d6;      /* материал: 4,30 к карточке, 4,01 к плоскости — порог 3:1 */
  --accent-ink: #256abf;  /* текст: 5,26 и 4,90 — порог 4,5:1 */
  --accent-soft: rgba(42, 120, 214, .16);
  --accent-wash: rgba(42, 120, 214, .06);

  --s2: #eb6834;          /* материал: 3,12 */
  --s2-ink: #b8461f;      /* текст: 5,20 и 4,84 */
  --s2-soft: rgba(235, 104, 52, .18);

  /* Статус на светлой поверхности — свои шаги: #fab219 даёт 1,79 и как рамка
     невидим ровно тогда, когда важнее всего. */
  --good: #0a7c0a;
  --warn: #a06800;
  --serious: #b4502a;
  --critical: #c02525;

  --div-pos: 42, 120, 214;
  --div-neg: 192, 37, 37;
  --div-mid: var(--grid);

  --shadow: 0 1px 2px rgba(11, 11, 11, .05), 0 10px 28px -18px rgba(11, 11, 11, .35);
}

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

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

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: var(--t-base)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-soft); }

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3 { margin: 0; font-weight: 620; letter-spacing: -.01em; }
h1 { font-size: var(--t-h); }
h2 { font-size: var(--t-lead); }
h3 { font-size: var(--t-base); }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

code {
  overflow-wrap: anywhere;
  padding: .08em .32em;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: .88em;
}

/* ---------------------------------------------------------------- шапка ---- */

/* Шапка НЕ липкая, и это осознанно. Липкими были обе полосы — шапка с z-index выше,
   и постоянная надпись уезжала ПОД неё при первой же прокрутке: требование «надпись
   видна всегда» держалось бы только на первом экране. Липкой оставлена надпись. */
.top {
  background: var(--plane);
  border-bottom: 1px solid var(--rule);
}

.top-in {
  max-width: var(--measure); margin: 0 auto;
  padding: var(--s3) var(--s4) var(--s2s);
  display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
}

.brand { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.brand .tick { font-family: var(--mono); font-size: var(--t-tiny); color: var(--muted); }
.tools { margin-left: auto; display: flex; gap: var(--s2s); align-items: center; }

.ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 999px;
  font: 600 var(--t-tiny)/1 var(--sans);
  cursor: pointer; text-decoration: none;
}
.ghost:hover { color: var(--ink); border-color: var(--ink-2); }

/* ПОСТОЯННАЯ НАДПИСЬ. Она прилипает под шапкой и видна на любом экране страницы —
   это рамка проекта, а не подпись в подвале. Мелкий шрифт и подвал ей запрещены. */
.always {
  position: sticky; top: 0; z-index: 40;
  /* [ЭТАП 6] Полоса ПРИБИТА, а заливка была полупрозрачной (8 %): в
     прокрученном состоянии сквозь неё просвечивал текст под ней, и нечитаемы
     становились ОБА слоя. Измерено браузером через elementFromPoint: на
     375×667 полоса перекрывала 168 px плитки K0 — 8,4 строки, 126 точек из
     171; на 1280×900 — 87 px. Дефект не телефонный, он на всех ширинах.
     Тот же цвет поверх непрозрачной подложки: вид в покое не меняется,
     просвечивание пропадает (замер до/после: 3 вьюпорта из 3 -> 0 из 3). */
  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--plane);
  border-bottom: 1px solid var(--rule);
}
.always-in {
  max-width: var(--measure); margin: 0 auto;
  padding: 9px var(--s4);
  display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap;
  font-size: var(--t-small);
}
.always b { color: var(--accent-ink); letter-spacing: .01em; }
.always span { color: var(--ink-2); }

.nav {
  max-width: var(--measure); margin: 0 auto;
  padding: 0 var(--s4) var(--s2s);
  display: flex; gap: var(--s4); flex-wrap: wrap;
  font-size: var(--t-tiny);
}
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--accent-ink); }

main { max-width: var(--measure); margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); }

/* --------------------------------------------------------------- карточки -- */

.card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s5);
  margin-bottom: var(--s5);
}
.card > h2 { margin-bottom: var(--s2s); }

.sect-head { margin-bottom: var(--s4); }
.sect-head .out-no {
  display: inline-block; margin-bottom: 6px;
  font: 600 var(--t-micro)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.lede { color: var(--ink-2); font-size: var(--t-small); max-width: 68ch; }
.hint { color: var(--muted); font-size: var(--t-tiny); max-width: 78ch; }

/* Врезка «чего про это число нельзя сказать» — обязательный жанр этой панели. */
.cant {
  margin: var(--s4) 0 0;
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border-left: 3px solid var(--rule);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--t-small); color: var(--ink-2);
}
.cant b { color: var(--ink); }
.cant ul { margin: 0; padding-left: 1.1em; }
.cant li { margin-bottom: 6px; }
.cant li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- числа и атомы --- */

.grid { display: grid; gap: var(--s4); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tile {
  min-width: 0;
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
}
.tile .lab { font-size: var(--t-tiny); color: var(--muted); margin-bottom: 4px; }
.tile .val { font-size: var(--t-num); line-height: 1.05; letter-spacing: -.02em; }
.tile .val.sm { font-size: var(--t-lead); }
.tile .u { font-size: var(--t-small); color: var(--ink-2); margin-left: .25em; }
.tile .sub { margin-top: 6px; font-size: var(--t-micro); color: var(--muted); }
.dash { color: var(--muted); }

/* Подписи-обязательства: база учёта и знаменатель ходят вместе с числом. */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; min-width: 0; }
/* Фишка НЕ nowrap. В узкой колонке подпись «на 30.06.2026 · известно с 28.08.2026»
   вылезала за карточку и заезжала в соседнюю базу учёта — то есть ровно то смешение
   баз на экране, которого вся панель избегает в числах. */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid var(--rule); border-radius: 999px;
  font: 600 var(--t-micro)/1.5 var(--sans); color: var(--ink-2);
  overflow-wrap: anywhere;
}
.chip.basis { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.chip.den { border-style: dashed; }
.chip.pit-A, .chip.pit-B { color: var(--good); border-color: var(--good); }
.chip.pit-M { color: var(--accent-ink); border-color: var(--accent); }
.chip.pit-D { color: var(--warn); border-color: var(--warn); }
.chip.pit-C, .chip.pit-X { color: var(--muted); }
.chip.late { color: var(--warn); border-color: var(--warn); }

.note { margin-top: 7px; font-size: var(--t-micro); color: var(--muted); }

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

/* Широкая таблица прокручивается ВНУТРИ своего контейнера: страница по горизонтали
   не ездит ни на каком экране. */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--s3); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-small); }
th, td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--grid); }
th:first-child, td:first-child { text-align: left; }
thead th { color: var(--muted); font-weight: 600; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { font-variant-numeric: tabular-nums; }
td.wrap { white-space: normal; min-width: 22ch; }
tr.here td { background: var(--accent-wash); }
tr.here td:first-child::before { content: "▸ "; color: var(--accent-ink); }
td.strike { text-decoration: line-through; color: var(--muted); }

/* ---------------------------------------------------------------- графики -- */

.fig { margin-top: var(--s4); position: relative; }
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.figcap { margin-top: 7px; font-size: var(--t-micro); color: var(--muted); }

/* ЦВЕТ ГРАФИКА — ТОЛЬКО ЗДЕСЬ. */
.ax-line { stroke: var(--rule); stroke-width: 1; fill: none; }
.ax-grid { stroke: var(--grid); stroke-width: 1; fill: none; }
.ax-text { fill: var(--muted); font-size: 10px; font-family: var(--sans); }
.ax-text.lead { fill: var(--ink-2); }
.lbl { fill: var(--ink-2); font-size: 11px; font-family: var(--sans); }
.lbl-strong { fill: var(--ink); font-size: 11px; font-weight: 620; font-family: var(--sans); }
.lbl-mut { fill: var(--muted); font-size: 10px; font-family: var(--sans); }
/* Подпись перцентилей в веере идёт ПОД полосой и пересекается со сквозной чертой
   центра. Обводка цветом подложки колонки разводит их без второго цвета и без
   переноса текста. */
.fan-foot {
  fill: var(--muted); font-size: 10px; font-family: var(--sans);
  paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; stroke-linejoin: round;
}

.band-outer { fill: var(--accent-soft); }
.band-inner { fill: var(--accent); fill-opacity: .55; }
.band-cap { stroke: var(--accent); stroke-width: 1.5; }
.center-rule { stroke: var(--ink); stroke-width: 2; }
.center-halo { stroke: var(--surface-2); stroke-width: 4; }

.ser1-line { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linejoin: round; }
.ser1-dot { fill: var(--accent); }
.ser1-ring { stroke: var(--surface); stroke-width: 2; fill: var(--accent); }
.ser1-area { fill: var(--accent-wash); }
.ser2-line { stroke: var(--s2); stroke-width: 2; fill: none; stroke-linejoin: round; }
.ser2-dot { fill: var(--s2); }
.ser2-ring { stroke: var(--surface); stroke-width: 2; fill: var(--s2); }

.bar1 { fill: var(--accent); }
.bar2 { fill: var(--s2); }
.bar-mut { fill: var(--rule); }

.ref-line { stroke: var(--ink-2); stroke-width: 1.5; fill: none; }
.late-mark { fill: none; stroke: var(--warn); stroke-width: 2; }
.zero-line { stroke: var(--rule); stroke-width: 1; }

/* Теневой слой перекрашивает свои графики в серое: в решение он не входит и цвета
   решения носить не должен. */
.shadow-zone .ser1-line, .shadow-zone .bar1 { stroke: var(--muted); fill: none; }
.shadow-zone .bar1 { fill: var(--muted); stroke: none; }
.shadow-zone .ser1-dot { fill: var(--muted); }
.shadow-zone .band-outer { fill: var(--grid); }
.shadow-zone .band-inner { fill: var(--rule); fill-opacity: 1; }

.legend { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s2s); font-size: var(--t-micro); color: var(--ink-2); }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.legend .k1 { background: var(--accent); }
.legend .k2 { background: var(--s2); }
.legend .kw { background: var(--warn); }
.legend .km { background: var(--muted); }

/* Подсказка на наведении: разметка тултипа тут, позиция — из скрипта. */
.tip {
  position: absolute; z-index: 5; pointer-events: none;
  max-width: 30ch; padding: 8px 10px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: var(--t-micro); line-height: 1.45;
}
.tip[hidden] { display: none; }
.tip b { display: block; margin-bottom: 3px; }
.tip .m { color: var(--muted); }

/* ------------------------------------------------------------- две базы ---- */

.bases { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.basis-col {
  min-width: 0;
  padding: var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
}
.basis-col > header {
  display: flex; align-items: baseline; gap: var(--s2s); flex-wrap: wrap;
  padding-bottom: var(--s2s); margin-bottom: var(--s3);
  border-bottom: 1px solid var(--grid);
}
.basis-col > header h3 { color: var(--accent-ink); }
.basis-col > header .who { font-size: var(--t-micro); color: var(--muted); }
/* Между колонками нет ни стрелки, ни «итого»: арифметика между базами запрещена. */
.no-bridge {
  margin: var(--s3) 0 0; padding: var(--s2s) var(--s3);
  border: 1px dashed var(--rule); border-radius: var(--radius-sm);
  font-size: var(--t-micro); color: var(--muted); text-align: center;
}

/* --------------------------------------------------------- теневой слой ---- */

.shadow-zone {
  margin-top: var(--s7);
  padding: var(--s5);
  background: repeating-linear-gradient(
    135deg, var(--surface-2) 0 10px, transparent 10px 20px), var(--plane);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}
.shadow-zone h2 { color: var(--ink-2); }
.shadow-zone .card { background: var(--surface); box-shadow: none; }

/* Долговой слой (правка №5 аудита) длинный и состоит из подразделов: h4 —
   единственный уровень заголовка ниже карточного h3, и он обязан читаться
   как подраздел, а не как ещё одна карточка. */
.shadow-zone h4 {
  margin: var(--s5) 0 var(--s2s);
  font: 620 var(--t-small)/1.4 var(--sans);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}
.shadow-zone h4:first-of-type { border-top: 0; padding-top: 0; }
.shadow-flag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; margin-bottom: var(--s2s);
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface);
  font: 700 var(--t-micro)/1.6 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.shadow-zone .tile .val { color: var(--ink-2); }

/* ------------------------------------------------------------ состояния ---- */

.skeleton { color: var(--muted); font-size: var(--t-small); padding: var(--s5) 0; text-align: center; }

.refuse {
  padding: var(--s5);
  background: var(--surface);
  border: 2px solid var(--critical);
  border-radius: var(--radius);
}
.refuse h2 { color: var(--critical); }
.refuse ul { font-size: var(--t-small); color: var(--ink-2); }

.status-row { display: flex; align-items: center; gap: 7px; font-size: var(--t-small); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.good { background: var(--good); }
.dot.warn { background: var(--warn); }
.dot.crit { background: var(--critical); }
.dot.mut { background: var(--muted); }

/* --------------------------------------------------------------- подвал ---- */

.foot {
  max-width: var(--measure); margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s7);
  border-top: 1px solid var(--rule);
  font-size: var(--t-micro); color: var(--muted);
}
.foot code { font-size: .95em; word-break: break-all; }
.foot .prov { margin-top: var(--s3); }

/* ------------------------------------------------- каркас и страница 404 --- */
/* Классы ниже используются web/404.html — файлом чужой зоны. Удалять нельзя. */

.frame { max-width: 46rem; margin: 0 auto; padding: var(--s7) var(--s4); }
.frame-kicker { margin: 0 0 .35rem; font-size: var(--t-tiny); letter-spacing: .09em; color: var(--muted); }
.frame-note, .frame-text { margin: 0 0 .8rem; color: var(--ink-2); }
.frame-note strong { color: var(--ink); }
.frame-card { margin: var(--s5) 0; padding: var(--s4); background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-sm); }
.err-code { margin: 0; font-size: 3rem; font-weight: 700; line-height: 1; color: var(--accent-ink); }
.frame-foot { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); font-size: var(--t-small); color: var(--muted); }



/* ======================================================= ЭТАП 4: НОВОЕ ==== */
/* Всё ниже добавлено вёрсткой Этапа 4 по правкам №1–№5 и №7 внешнего аудита
   от 06.09.2026. Ни одного нового цвета сверх валидированной палитры. */

/* --- краска трёх новых форм (dbars, dots, curve) --------------------------- */
/* Нулевая линия у расходящихся столбцов и у кривой — не «ещё одна сетка», а
   опорная величина: она на шаг темнее сетки и сплошная (пунктир на витрине
   запрещён, он читается как «прогноз»). */
.zero-strong { stroke: var(--ink-2); stroke-width: 1.5; }
.bar-pos { fill: var(--accent); }
.bar-neg { fill: var(--s2); }
.whisker { stroke: var(--ink-2); stroke-width: 1.5; }
.est-ring { fill: var(--accent); stroke: var(--surface-2); stroke-width: 2; }
.range-wash { fill: var(--accent-wash); }
.range-edge { stroke: var(--rule); stroke-width: 1; }
/* Подпись диапазона идёт ПОВЕРХ кривой и сетки — обводка подложкой разводит их
   без второго цвета и без переноса текста (тот же приём, что у подписи веера). */
.range-lbl {
  fill: var(--muted); font-size: 10px; font-family: var(--sans);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}
/* В теневой зоне графики обесцвечиваются: цвета решения там носить нечему. */
.shadow-zone .bar-pos, .shadow-zone .bar-neg { fill: var(--muted); }
.shadow-zone .est-ring { fill: var(--ink-2); stroke: var(--surface); }
.shadow-zone .range-wash { fill: var(--surface-2); }
.shadow-zone .range-edge { stroke: var(--muted); }

/* --- пометка «непроверяемо» ------------------------------------------------ */
/* Требование рамки: всё, что печатается сверх прежней рамки, несёт срок, за
   которым его вообще можно будет проверить. Пометка — заголовочная, не сноска. */
.unver {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: var(--s2s);
  padding: 2px 9px;
  border: 1px dashed var(--warn); border-radius: 999px;
  font: 700 var(--t-micro)/1.6 var(--sans); letter-spacing: .04em;
  color: var(--warn); white-space: nowrap;
}
.unver::before { content: "⧗"; font-weight: 400; }
/* max-width страхует и широкий экран: пилюля никогда не шире своего места. */
.unver { max-width: 100%; }

/* --- раздел «режим» — рано на странице, но окрашен как тень ---------------- */
.regime {
  border: 1px dashed var(--rule);
  box-shadow: none;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--surface);
}
.regime .val { color: var(--ink-2); }
.regime .sect-head .out-no { color: var(--warn); }

/* Связка «что это меняет в выходах»: не украшение, а единственное место, где
   раздел режима сцеплен с пятью выходами. */
.xlinks { display: grid; gap: var(--s2s); margin-top: var(--s4); }
.xlink {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3);
  align-items: baseline;
  padding: var(--s2s) var(--s3);
  background: var(--surface-2); border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  font-size: var(--t-small); color: var(--ink-2);
}
.xlink a { color: var(--accent-ink); font-weight: 620; white-space: nowrap; text-decoration: none; }
.xlink a:hover { text-decoration: underline; }

/* --- матрица с расходящейся заливкой (сетка стоимости, карта ожиданий) ----- */
.hgrid { font-variant-numeric: tabular-nums; }
/* Разделяет клетки ЗАЗОР подложки в 2 px, а не обводка вокруг марки. */
.hgrid th, .hgrid td { border: 2px solid var(--surface); padding: 6px 8px; }
.hgrid thead th { text-align: right; }
.hgrid tbody th {
  text-align: left; font-weight: 620; color: var(--ink-2);
  font-size: var(--t-micro); white-space: nowrap; background: var(--surface-2);
}
/* Заливка — прозрачностью одной краски на плечо; светлота монотонна по
   построению. Текст остаётся чернилами: краска ряда текст не набирает. */
.hgrid td.hc { position: relative; text-align: right; color: var(--ink); }
.hc-p1 { background: rgba(var(--div-pos), .08); }
.hc-p2 { background: rgba(var(--div-pos), .18); }
.hc-p3 { background: rgba(var(--div-pos), .30); }
.hc-p4 { background: rgba(var(--div-pos), .44); }
.hc-p5 { background: rgba(var(--div-pos), .60); }
.hc-n1 { background: rgba(var(--div-neg), .08); }
.hc-n2 { background: rgba(var(--div-neg), .18); }
.hc-n3 { background: rgba(var(--div-neg), .30); }
.hc-n4 { background: rgba(var(--div-neg), .44); }
.hc-n5 { background: rgba(var(--div-neg), .60); }
.hc-0 { background: var(--div-mid); }
/* ВТОРОЙ КАНАЛ ЗНАКА — САМО ЧИСЛО В КЛЕТКЕ. Пробовал засечку слева: у всех
   клеток она давала сплошную полосу краски, у одних отрицательных читалась как
   разделитель столбцов. Снято на ОТРИСОВАННОЙ странице, а не в коде. Матрица и
   есть табличное представление: значение стоит в каждой клетке с типографским
   минусом, контраст чернил на самом плотном шаге 6,2 : 1, плюс подписанная
   шкала под таблицей. Цвет здесь не единственный канал и без засечки.

   И ещё: теневая зона перекрашивает свои ГРАФИКИ в серое, но не эту матрицу.
   Там цвет означал бы принадлежность к решению, здесь он означает ЗНАК —
   единственное, что матрица показывает. Теневой статус несут рамка, флаг
   «в решение не входит» и ярлык под каждой сеткой. */
/* Клетка, ближайшая к рынку. Отмечена рамкой и словом, а не только цветом. */
.hgrid td.hc.at-market { outline: 2px solid var(--ink); outline-offset: -2px; font-weight: 700; }
.hgrid td.hc.at-market::after {
  content: "ближе всего к рынку"; display: block; white-space: normal;
  font: 600 var(--t-micro)/1.2 var(--sans); color: var(--ink-2); letter-spacing: .02em;
}
.hscale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2s); margin-top: var(--s2s); font-size: var(--t-micro); color: var(--muted); }
.hscale i { display: inline-block; width: 22px; height: 12px; border-radius: 3px; border: 1px solid var(--hair); }

/* --- перечень допущений: обязателен рядом с любой клеткой ------------------ */
.assum {
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.assum > b { display: block; font-size: var(--t-small); margin-bottom: 6px; }
.assum ul { margin: 0; padding-left: 1.05em; font-size: var(--t-micro); color: var(--ink-2); columns: 2; column-gap: var(--s5); }
.assum li { margin-bottom: 3px; break-inside: avoid; }
.assum .lbl-tag {
  display: inline-block; margin-top: var(--s2s); padding: 2px 8px;
  border: 1px solid var(--warn); border-radius: 999px;
  font: 700 var(--t-micro)/1.6 var(--sans); color: var(--warn);
}

/* --- отказ на границе экрана, локальный для одного блока ------------------- */
/* Отличается от .refuse тем, что гасит ОДИН слой, а не всю страницу: слой
   условной стоимости не рисуется, остальная витрина продолжает работать. */
.gate-fail {
  margin-top: var(--s4);
  padding: var(--s4);
  background: var(--surface);
  border: 2px solid var(--critical);
  border-radius: var(--radius-sm);
  font-size: var(--t-small); color: var(--ink-2);
}
.gate-fail b { color: var(--critical); display: block; margin-bottom: 6px; }
.gate-fail ul { margin: 6px 0 0; padding-left: 1.1em; }

/* --- ОТСУТСТВУЮЩЕЕ ПОЛЕ -----------------------------------------------------
   Видно, но не кричит: это не ошибка данных и не отказ рамки, а рассогласование
   версий витрины и payload. Пунктир отличает состояние «нечего рисовать» от
   сплошной рамки отказа (.gate-fail) и от карточки ошибки рендера. */
.nofield {
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  border: 1px dashed var(--warn); border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--t-small); color: var(--ink-2);
}
.nofield b { color: var(--warn); display: block; margin-bottom: 4px; }
.nofield code { font-size: var(--t-micro); overflow-wrap: anywhere; }
.nofield-inline {
  margin-top: 6px; font-size: var(--t-micro); color: var(--warn);
  overflow-wrap: anywhere;
}
.nofield-inline code { overflow-wrap: anywhere; }
.tile.nofield-tile { border-style: dashed; border-color: var(--warn); }
.tile.nofield-tile .val { font-size: var(--t-micro); color: var(--warn); line-height: 1.3; }
.tile.nofield-tile .sub code { overflow-wrap: anywhere; }
/* [ЭТАП 5, ПРАВКА 2] Заглушка, не объясняющая себя, — дефект витрины, а не
   оформление: она читается как «величины нет», тогда как на деле неизвестно,
   не посчитана она, потеряна при сборке или невозможна в принципе. Метка
   видна на экране и ловится стендом. */
b.defect { color: var(--bad, var(--warn)); text-transform: uppercase;
  letter-spacing: .02em; }
b.worse { color: var(--warn); font-weight: 600; }
b.better { color: var(--ok, var(--ink-2)); font-weight: 600; }

/* --- ТОЖДЕСТВО И СОГЛАШЕНИЕ -------------------------------------------------
   Роль величины — такая же обязательная подпись, как база учёта и знаменатель.
   Тождество отличается от измерения тем, что ошибки в нём нет по построению;
   соглашение — тем, что его вообще никто не измерял. Оба ярлыка носят рамку,
   а не заливку: заливка на витрине означает знак, и другого смысла у неё быть
   не должно. */
.chip.role { border-style: dashed; }
.chip.role-identity { border-color: var(--warn); color: var(--warn); }
.chip.role-sensitivity, .chip.role-distribution_width, .chip.role-interval { color: var(--ink-2); }
.chip.role-conditional_valuation, .chip.role-frozen_nowcast { border-color: var(--warn); color: var(--warn); }
.conv {
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  border: 1px solid var(--rule); border-left: 3px dashed var(--ink-2);
  border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: var(--t-small); color: var(--ink-2);
}
.conv > b { display: block; margin-bottom: 4px; color: var(--ink); }
.conv p, .conv ul { margin: 0; font-size: var(--t-micro); }
.conv ul { padding-left: 1.05em; }
.conv li { margin-bottom: 3px; }

/* Подпись условной сетки живёт ВНУТРИ таблицы: снимок экрана уносит её вместе
   с числами. Прижата к верху и не прокручивается вбок вместе с клетками. */
.hgrid caption.cond-cap {
  caption-side: top; text-align: left;
  padding: var(--s2s) var(--s3); margin-bottom: var(--s2s);
  border: 1px solid var(--warn); border-radius: var(--radius-sm);
  background: var(--surface-2);
  font: 600 var(--t-micro)/1.45 var(--sans); color: var(--warn);
}

/* Мягкая заглушка: блок посчитан работой Этапа 4, но генератором ещё не собран. */
.absent {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border: 1px dashed var(--rule); border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--t-small); color: var(--muted);
}
.absent b { color: var(--ink-2); }

/* --- оглавитель теневого слоя --------------------------------------------- */
.snav {
  display: flex; flex-wrap: wrap; gap: var(--s2s);
  margin: var(--s3) 0 var(--s5);
}
.snav a {
  padding: 4px 10px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
  font: 600 var(--t-micro)/1.6 var(--sans); color: var(--ink-2); text-decoration: none;
}
.snav a:hover { border-color: var(--ink-2); color: var(--ink); }

/* --- строка «оси допущений» карты ожиданий --------------------------------- */
/* Аудит: допущения обязаны быть видимыми ОСЯМИ, а не сноской. Оси печатаются
   строкой над таблицей, каждая — со всеми своими значениями. */
.axes { display: grid; gap: var(--s2s); margin: var(--s3) 0 var(--s4); }
.axis-row {
  display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); gap: var(--s3);
  align-items: baseline;
  padding: var(--s2s) var(--s3);
  background: var(--surface-2); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--t-small);
}
.axis-row .an { font-weight: 620; color: var(--ink); }
.axis-row .av { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.axis-row .av em { font-style: normal; color: var(--muted); }

/* --- крупная выноска на теневой слой из основного выхода ------------------- */
.handoff {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4);
  align-items: center;
  margin-top: var(--s5); padding: var(--s3) var(--s4);
  background: var(--accent-wash);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  font-size: var(--t-small); color: var(--ink-2);
}
.handoff b { color: var(--accent-ink); }
.handoff a {
  padding: 5px 12px; background: var(--surface); border: 1px solid var(--accent);
  border-radius: 999px; color: var(--accent-ink); text-decoration: none;
  font: 620 var(--t-micro)/1.6 var(--sans); white-space: nowrap;
}

/* --- теневая врезка ВНУТРИ обычного выхода --------------------------------- */
/* Живая карта ожиданий — теневой слой, но лежит она внутри выхода 3, потому что
   это его собственный пересчёт. Отделяется штриховкой и флагом, как большая
   теневая зона, но не уезжает из раздела: аудит прав, что это единственный
   выход с содержанием для решения, и прятать его пересчёт в подвал нельзя. */
.inshadow {
  margin-top: var(--s5);
  padding: var(--s4);
  background: repeating-linear-gradient(
    135deg, var(--surface-2) 0 10px, transparent 10px 20px), var(--surface);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-sm);
}
.inshadow > h3 { color: var(--ink-2); }
.inshadow .tile .val { color: var(--ink-2); }
.inshadow .bar-pos, .inshadow .bar-neg { fill: var(--muted); }

@media (max-width: 700px) {
  .assum ul { columns: 1; }
  .conv ul { padding-left: .95em; }
  .hgrid caption.cond-cap { font-size: var(--t-micro); padding: var(--s2s); }
  .handoff { grid-template-columns: minmax(0, 1fr); }
  .axis-row { grid-template-columns: minmax(0, 1fr); }
  .xlink { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------- мобильно -- */

@media (max-width: 900px) {
  .bases, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  /* Пилюля срока проверяемости переносится вместе с заголовком. Без этого
     она и есть источник горизонтальной прокрутки всей страницы на телефоне. */
  .unver { white-space: normal; text-align: left; }
  h2, h3, h4 { overflow-wrap: anywhere; }
  :root { --t-num: 1.5rem; }
  main { padding: var(--s4) var(--s3) var(--s6); }
  .card { padding: var(--s4) var(--s3); border-radius: var(--radius-sm); }
  .top-in, .always-in, .nav, .foot { padding-left: var(--s3); padding-right: var(--s3); }
  .bases, .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .shadow-zone { padding: var(--s4) var(--s3); }
  .nav { gap: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .top, .nav, .tools { display: none; }
  .card, .shadow-zone { box-shadow: none; break-inside: avoid; }
}

/* ---- ПРАВКА 3 ЭТАПА 4: эпистемический класс числа --------------------- */
/* Ярлык обязан читаться раньше самого числа: тождество, принятое за
   измерение, стоило проекту трёх циклов разоблачения. Поэтому фишка класса
   не пунктирная, как роль, а сплошная и залитая — и цвет разный у трёх
   классов, чтобы «соглашение» нельзя было пробежать глазами. */
.chip.epi { border-style: solid; font-weight: 700; letter-spacing: .01em; }
.chip.epi-meas { color: var(--good); border-color: var(--good); }
.chip.epi-ident { color: var(--warn); border-color: var(--warn); }
.chip.epi-conv { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-wash); }
.note.conv-why { color: var(--ink-2); border-left: 2px solid var(--accent); padding-left: 7px; }
.epi-legend ul { margin: 6px 0 0; padding-left: 0; list-style: none; }
.epi-legend li { margin-top: 6px; }
.epi-legend .lede { margin-top: 8px; }

/* [ПРАВКА 3 ЭТАПА 5] Строка таблицы, под которой нет отчётности: отличается
   не только цветом (он не читается вспомогательными технологиями), но и
   левой чертой — тот же приём, что у карточек предупреждений. */
tr.warnrow > td:first-child { border-left: 3px solid var(--warn); padding-left: 9px; }
tr.warnrow > td { background: color-mix(in srgb, var(--warn) 7%, transparent); }