/* ФинЦентр — «Сводная ведомость».
   Замысел и токены — design/ДИЗАЙН.md. Здесь только исполнение. */

/* ---------- Шрифт: Golos Text, раздаётся с нашего сервера ---------- */

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/golos-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/golos-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/golos-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Токены ---------- */

:root {
  color-scheme: light;
  --paper: #F4F5F7;
  --sheet: #FFFFFF;
  --ink: #1B2130;
  --pencil: #596172;
  --rule: #D8DBE2;
  --rule-soft: #E7E9EE;
  --stamp: #2F4FB0;
  --stamp-wash: #E9EDF8;
  --red: #B42318;
  --red-wash: #FBEDEB;
  --ochre: #8A5600;
  --ochre-wash: #F8F0E1;
  --leader: #B5BAC5;

  /* метки графиков — проверены validate_palette.py */
  --m-in: #2F4FB0;
  --m-out: #B42318;
  --m-total: #3F4657;
  --m-mid: #7C8394;

  /* тепловая карта загрузки: один цвет печати, от тихого к пиковому;
     подписи — чернилами на светлых ступенях и белым на тёмных (контраст от 5:1) */
  --heat-1: #E6EAF6; --heat-2: #D1D8EE; --heat-3: #B8C3E4;
  --heat-4: #9DACDA; --heat-5: #506BBD; --heat-6: #2F4FB0;
  --heat-ink: var(--ink); --heat-ink-hi: #FFFFFF;

  --font: "Golos Text", "Segoe UI", system-ui, sans-serif;
  --radius: 6px;
  --rail: 232px;
}

/* Тёмная: «копирка». Свои ступени, а не перевёрнутые светлые. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111318;
  --sheet: #181B22;
  --ink: #E3E6ED;
  --pencil: #9CA3B3;
  --rule: #2A2F3A;
  --rule-soft: #22262F;
  --stamp: #9DB0FF;
  --stamp-wash: #1F2640;
  --red: #FF8B7B;
  --red-wash: #33201E;
  --ochre: #E2A541;
  --ochre-wash: #2E2616;
  --leader: #454C5B;
  --m-in: #6A82E6;
  --m-out: #E56A58;
  --m-total: #C3C8D4;
  --m-mid: #737B8D;
  --heat-1: #242938; --heat-2: #30364D; --heat-3: #3E4767;
  --heat-4: #4E5983; --heat-5: #7182C4; --heat-6: #899DEF;
  --heat-ink: var(--ink); --heat-ink-hi: #111318;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #111318;
    --sheet: #181B22;
    --ink: #E3E6ED;
    --pencil: #9CA3B3;
    --rule: #2A2F3A;
    --rule-soft: #22262F;
    --stamp: #9DB0FF;
    --stamp-wash: #1F2640;
    --red: #FF8B7B;
    --red-wash: #33201E;
    --ochre: #E2A541;
    --ochre-wash: #2E2616;
    --leader: #454C5B;
    --m-in: #6A82E6;
    --m-out: #E56A58;
    --m-total: #C3C8D4;
    --m-mid: #737B8D;
    --heat-1: #242938; --heat-2: #30364D; --heat-3: #3E4767;
    --heat-4: #4E5983; --heat-5: #7182C4; --heat-6: #899DEF;
    --heat-ink: var(--ink); --heat-ink-hi: #111318;
  }
}

/* ---------- Основа ---------- */

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

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
a, button, input, select, textarea, label { touch-action: manipulation; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--font);
  font-feature-settings: "pnum" 1;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 24px; }
h2 { font-size: 19px; }
h3 { font-size: 15.5px; }
p { margin: 0; }

a { color: var(--stamp); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* Фокус с клавиатуры виден всегда: синяя печать с зазором. */
:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: 12px; top: -48px;
  background: var(--sheet); color: var(--ink);
  padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--radius);
  z-index: 10;
}
.skip:focus { top: 12px; }

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

/* Суммы: табличные цифры там, где числа стоят столбцом. */
.num, td.r, th.r {
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}
.neg { color: var(--red); }
.muted { color: var(--pencil); }
.small { font-size: 13px; }

/* ---------- Каркас: полоса меню слева ---------- */

/* minmax(0, …): широкая таблица прокручивается в своей рамке, а не раздвигает страницу. */
.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }

.rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: 22px 0 18px;
  background: var(--sheet);
  border-right: 1px solid var(--rule);
}
.wordmark {
  display: block; padding: 0 22px 26px;
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--stamp);
}
.wordmark:hover { text-decoration: none; }

.nav { list-style: none; margin: 0; padding: 0; }
.nav a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  min-height: 40px; padding: 9px 22px 9px 19px;
  border-left: 3px solid transparent;
  color: var(--pencil); font-size: 15.5px;
}
.nav a:hover { color: var(--ink); text-decoration: none; background: var(--paper); }
.nav a[aria-current="page"] {
  color: var(--ink); font-weight: 600;
  border-left-color: var(--stamp);
}
.nav .count {
  font-size: 13px; font-weight: 600; color: var(--ochre);
  font-feature-settings: "tnum" 1;
}

/* Служебный пункт отделён воздухом и линейкой: это не рабочая комната. */
.nav .nav-service { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
.nav .nav-service a { font-size: 14px; }

/* Вкладки комнаты: над страницей, строкой, без рамок — подчёркнута текущая. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 4px 24px; margin: -6px 0 22px;
  border-bottom: 1px solid var(--rule);
}
.tabs a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 0;
  margin-bottom: -1px; border-bottom: 3px solid transparent;
  color: var(--pencil); font-size: 15.5px; white-space: nowrap;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--stamp); }

/* Вывод страницы: одна фраза, главное — числа. С него начинается каждый экран. */
.verdict { font-size: 19px; line-height: 1.45; max-width: 60ch; margin: 0 0 24px; text-wrap: pretty; }
.verdict b { font-weight: 600; font-feature-settings: "pnum" 1; white-space: nowrap; }
.nw { white-space: nowrap; }  /* сумма во фразе: разряды не разрываются */
.note { color: var(--pencil); margin: -12px 0 24px; max-width: 72ch; }
.note b { color: var(--ink); font-weight: 600; }
.verdict .neg { color: var(--red); }

.rail-foot { margin-top: auto; padding: 16px 22px 0; border-top: 1px solid var(--rule-soft); }
.rail-foot p { font-size: 13px; color: var(--pencil); }
.rail-foot a { display: inline-block; font-size: 13px; padding: 6px 0; }
.rail-foot form { margin: 0; }
.linkish {
  background: none; border: 0; padding: 6px 0; font: inherit; font-size: 13px;
  color: var(--stamp); cursor: pointer;
}
.linkish:hover { text-decoration: underline; text-underline-offset: 0.18em; }

.main { padding: 28px 40px 72px; max-width: 1240px; width: 100%; }

/* ---------- Заголовок страницы ---------- */

.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px 32px; margin-bottom: 28px;
}
.page-head .sub { color: var(--pencil); margin-top: 6px; max-width: 64ch; }
.stepper { display: flex; gap: 18px; margin-top: 8px; font-size: 14px; }
.stepper .off { color: var(--rule); }

.sources-mini { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--pencil); text-align: right; }
.sources-mini li + li { margin-top: 2px; }
.sources-mini .stale { color: var(--red); font-weight: 600; }

/* ---------- Сетка главной ---------- */

/* Сводка без банков: вопросы, «Сегодня» и направления — без моста и счетов */
.lite-note { color: var(--pencil); max-width: 72ch; margin: 0 0 28px; }
.home-lite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 900px; }
.home-lite .now .questions { margin-top: 0; }

.home {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px 48px;
}
.home .bridge { grid-column: span 7; }
.home .now { grid-column: span 5; }
.home .entities { grid-column: 1 / -1; }
.home .lines { grid-column: 1 / -1; }

section > h2 { margin-bottom: 14px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }

/* ---------- Мост: смелость в одном месте ---------- */

.lede {
  font-size: 21px; line-height: 1.35; letter-spacing: -0.01em;
  max-width: 34ch; margin-bottom: 18px; text-wrap: pretty;
}
.lede b { font-weight: 600; white-space: nowrap; }

.chart { display: block; width: 100%; height: auto; overflow: visible; }
.waterfall { max-width: 680px; margin: 4px 0 6px; }

.c-base { stroke: var(--rule); stroke-width: 1; }
.c-link { stroke: var(--leader); stroke-width: 1; }
.c-hit { fill: transparent; }
.c-val { fill: var(--ink); font: 600 12.5px var(--font); font-feature-settings: "tnum" 1; }
.c-cat { fill: var(--pencil); font: 400 12.5px var(--font); }
.c-val.is-current, .c-cat.is-current { fill: var(--ink); font-weight: 700; }

.m-in, .m-in path { fill: var(--m-in); }
.m-out, .m-out path { fill: var(--m-out); }
.m-total, .m-total path { fill: var(--m-total); }
.m-mid, .m-mid path { fill: var(--m-mid); }

.c-mark { cursor: default; }
.c-mark.is-lit path { opacity: 0.72; }

.statement { list-style: none; margin: 8px 0 0; padding: 0; max-width: 680px; }
.statement li {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto;
  column-gap: 12px; align-items: baseline;
  padding: 7px 8px; margin: 0 -8px; border-radius: 4px;
}
.statement li.is-lit { background: var(--stamp-wash); }
.statement .key { width: 10px; height: 10px; border-radius: 2px; align-self: center; }
.statement .key.m-in { background: var(--m-in); }
.statement .key.m-out { background: var(--m-out); }
.statement .key.m-total { background: var(--m-total); }
.statement .key.m-mid { background: var(--m-mid); }

.statement .label { display: flex; align-items: baseline; min-width: 0; }
.statement .label::after {
  content: ""; flex: 1 1 auto; min-width: 16px;
  margin: 0 0 0.3em 10px;
  border-bottom: 1px dotted var(--leader);
}
.statement .label a, .statement .label span { color: var(--ink); }
.statement .amount { font-feature-settings: "tnum" 1, "lnum" 1; white-space: nowrap; text-align: right; }
.statement .note { grid-column: 2 / -1; font-size: 13px; color: var(--pencil); margin-top: 1px; }

.statement .is-total .label a, .statement .is-total .label span { font-weight: 600; }
.statement .is-total .amount { font-weight: 600; }
.statement .is-subtotal { border-top: 1px solid var(--rule); border-radius: 0; margin-top: 4px; padding-top: 9px; }
.statement .is-subtotal .label span, .statement .is-subtotal .amount { font-weight: 600; }
.statement .is-close { border-top: 2px solid var(--ink); border-radius: 0; margin-top: 6px; padding-top: 10px; }

/* ---------- «Сейчас на счетах» и вопросы ---------- */

.figure {
  font-size: 48px; font-weight: 600; line-height: 1.05; letter-spacing: -0.025em;
  font-feature-settings: "pnum" 1, "lnum" 1; white-space: nowrap;
}
.figure .cur { font-size: 0.55em; font-weight: 500; color: var(--pencil); margin-left: 0.15em; letter-spacing: 0; }
.figure-note { color: var(--pencil); font-size: 14px; margin-top: 8px; }

.now .questions { margin-top: 40px; }

.qlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.qlist li { border-bottom: 1px solid var(--rule-soft); }
.qlist a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px;
  padding: 11px 0 11px 14px; color: var(--ink); position: relative;
}
.qlist a::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px;
  background: var(--lvl, var(--m-mid));
}
.qlist a:hover { text-decoration: none; background: var(--sheet); }
.qlist a:hover .q-title { text-decoration: underline; text-underline-offset: 0.18em; }
.qlist .q-title { font-size: 15px; }
.qlist .q-sum { font-feature-settings: "tnum" 1; white-space: nowrap; font-size: 15px; }
.qlist .q-meta { grid-column: 1 / -1; font-size: 13px; color: var(--pencil); margin-top: 2px; }

/* Черта слева — важность вопроса. Цвет задаётся переменной, без борьбы специфичностей. */
.lvl-высокий { --lvl: var(--red); }
.lvl-средний { --lvl: var(--ochre); }
.lvl-проверить { --lvl: var(--stamp); }
.lvl-справочно { --lvl: var(--m-mid); }

.more { display: inline-block; margin-top: 12px; font-size: 14px; }

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

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 4px; }

table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid caption { text-align: left; }
table.grid th, table.grid td { padding: 9px 12px; text-align: left; vertical-align: baseline; }
table.grid thead th {
  font-size: 13px; font-weight: 500; color: var(--pencil);
  border-bottom: 1px solid var(--rule);
}
table.grid tbody tr { border-bottom: 1px solid var(--rule-soft); }
table.grid tbody tr:hover { background: var(--sheet); }
table.grid tbody th { font-weight: 500; }
table.grid tfoot td, table.grid tfoot th { border-top: 2px solid var(--ink); font-weight: 600; }
table.grid .r { text-align: right; }
table.grid th:first-child, table.grid td:first-child { padding-left: 0; }
table.grid th:last-child, table.grid td:last-child { padding-right: 0; }
table.grid .sub { display: block; font-size: 13px; font-weight: 400; color: var(--pencil); margin-top: 1px; }
table.grid .wrap { white-space: normal; min-width: 16ch; }
/* Суммы-ссылки остаются чернилами: синие цифры превращают книгу в пестроту.
   Ссылку выдаёт тонкое подчёркивание — не только цвет. */
table.grid td a { color: inherit; text-decoration: underline; text-decoration-color: var(--leader); text-underline-offset: 0.22em; }
table.grid td a:hover { color: var(--stamp); text-decoration-color: currentColor; }
/* Выбор в шапке страницы: точка и месяц рядом. */
.head-pick { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

/* Отчёт за месяц: на экране — как все страницы, на бумаге — без меню и кнопок */
.report-part { margin-bottom: 30px; max-width: 900px; }
.report-part h2 { margin-bottom: 10px; }
.report-part p { margin-bottom: 8px; max-width: 72ch; }
.report-lines { max-width: 560px; }
.report-lines tr.is-total th, .report-lines tr.is-total td { font-weight: 600; }
@media print {
  .rail, .tabs, .mock-banner, .no-print, .skip { display: none !important; }
  body, .main { background: #fff; color: #000; }
  .app { display: block; }
  .main { padding: 0; max-width: none; }
  .report-part { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* Сводка: что важно сегодня — под деньгами на счетах */
.today { margin: 22px 0 6px; }
.today h2 { font-size: 15.5px; margin-bottom: 8px; }
.today-list { list-style: none; margin: 0; padding: 0; }
.today-list li { font-size: 14px; color: var(--pencil); padding: 6px 0 6px 12px;
  border-left: 2px solid var(--rule); margin-bottom: 6px; }
.today-list li b { color: var(--ink); }
.today-list li.warn-line { border-left-color: var(--red); color: var(--ink); }

/* Направления: строка-заголовок блока в таблице и переключатель над страницей */
table.by-line .line-row { background: var(--sheet); }
table.by-line .line-row th { font-weight: 600; }
table.by-line tbody + tbody .line-row th, table.by-line tbody + tbody .line-row td { border-top: 2px solid var(--rule); }
.seg { display: flex; flex-wrap: wrap; gap: 4px; margin: -8px 0 22px; }
.seg a { padding: 6px 12px; border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--pencil); font-size: 14px; }
.seg a:hover { color: var(--ink); border-color: var(--pencil); }
.seg a[aria-current] { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.staff-line + .staff-line { margin-top: 32px; }
.staff-line h2 { margin-bottom: 10px; }
details.directions { margin-top: 36px; max-width: 640px; }
details.directions summary { cursor: pointer; font-weight: 600; font-size: 15.5px; margin-bottom: 8px; }
details.directions form { margin-top: 10px; }
details.directions .btn { margin-top: 12px; }
details.archive { margin-top: 16px; }
.receipts h3 { font-size: 14.5px; margin: 18px 0 8px; }
.receipts form { margin-top: 14px; }
details.archive summary { cursor: pointer; font-weight: 600; font-size: 15.5px; margin-bottom: 8px; }

/* Меню: четыре класса блюд одной строкой */
.menu-classes { list-style: none; margin: 0 0 20px; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 24px; }
.menu-classes li { font-size: 14px; }
.menu-classes .count-n { font-feature-settings: "tnum" 1; color: var(--ink); margin-left: 4px; }
.menu-classes .sub { display: block; color: var(--pencil); font-size: 13px; }

/* Прибыль точек */
table.profit tfoot tr.common th, table.profit tfoot tr.common td { font-weight: 400; border-top: 1px solid var(--rule); }
/* Склад: название склада — одной строкой, длинные причины списания — в две */
table.stock tbody th { white-space: nowrap; }
table.stock thead th { white-space: normal; min-width: 9ch; }

/* Раздел страницы под главной таблицей: заголовок, пояснение, таблица */
.part { margin-top: 36px; }
.part > h2 { margin-bottom: 6px; }
.part-note { color: var(--pencil); font-size: 14px; max-width: 72ch; margin: 0 0 12px; }
.rules { margin-top: 32px; max-width: 72ch; }
.rules h2 { margin-bottom: 8px; }
.rules li { color: var(--pencil); font-size: 14px; margin: 6px 0; }
.rules li b { color: var(--ink); font-weight: 600; }

/* Загрузка: день недели × час */
table.heat { border-collapse: separate; border-spacing: 3px; font-size: 13px; font-feature-settings: "tnum" 1; }
table.heat th { font-weight: 400; color: var(--pencil); padding: 2px 4px; text-align: center; }
table.heat tbody th { text-align: left; color: var(--ink); font-weight: 500; padding-right: 10px; }
table.heat td { min-width: 36px; height: 34px; padding: 0 4px; text-align: center; border-radius: 3px; color: var(--heat-ink); }
table.heat .day { text-align: right; padding-left: 14px; white-space: nowrap; color: var(--ink); }
table.heat thead .day { color: var(--pencil); }
table.heat td.closed { text-align: left; color: var(--pencil); padding-left: 8px; }
.s0 { box-shadow: inset 0 0 0 1px var(--rule-soft); }
.s1 { background: var(--heat-1); } .s2 { background: var(--heat-2); } .s3 { background: var(--heat-3); }
.s4 { background: var(--heat-4); }
table.heat .s5 { background: var(--heat-5); color: var(--heat-ink-hi); }
table.heat .s6 { background: var(--heat-6); color: var(--heat-ink-hi); font-weight: 600; }
.heat-legend { display: flex; align-items: center; gap: 3px; margin-top: 10px; }
.heat-legend span { margin: 0 6px; }
.heat-legend i { display: inline-block; width: 22px; height: 12px; border-radius: 2px; }
.heat-legend .s5 { background: var(--heat-5); } .heat-legend .s6 { background: var(--heat-6); }
table.grid a[aria-current] { color: var(--stamp); text-decoration-color: currentColor; font-weight: 600; }

table.staff .venue-row { background: var(--sheet); }
table.staff .venue-row th { font-weight: 600; }
table.staff .venue-row td { font-size: 13px; }
table.staff tbody + tbody .venue-row th { padding-top: 14px; }
table.staff .flagged th[scope="row"] { box-shadow: inset 3px 0 0 var(--red); padding-left: 10px; }
table.grid .clip { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Доля — подсказка, а не главный знак: тонкая и серая, чтобы не спорить с цифрой. */
.share { display: block; height: 3px; margin: 6px 0 0 auto; max-width: 120px; background: var(--rule-soft); border-radius: 2px; }
.share i { display: block; height: 100%; margin-left: auto; background: var(--m-mid); border-radius: 2px; }

.spark { display: inline-block; vertical-align: middle; }
.spark .c-base { stroke: var(--rule); }
.runway { display: inline-block; vertical-align: middle; overflow: visible; }
.runway .c-runway { fill: none; stroke: var(--m-total); stroke-width: 1.5; stroke-linejoin: round; }

/* Календарь платежей: дата слева, как в ежедневнике. */
.cal-day { white-space: nowrap; font-feature-settings: "tnum" 1; }
.cal-in { color: var(--ink); }
.cal-out { color: var(--red); }

/* Источники: состояние и, если не подключён, что именно вписать. */
.source-group { margin-bottom: 32px; }
.source-group h2 { margin-bottom: 10px; }
.source-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; padding: 16px 0; }
.state-ok { color: var(--ink); }
.state-bad { color: var(--red); font-weight: 600; }
.state-wait { color: var(--ochre); }
.state-off { color: var(--pencil); }
.need { grid-column: 1 / -1; margin-top: 10px; padding: 12px 14px; background: var(--sheet); border: 1px solid var(--rule-soft); border-radius: var(--radius); }
.need dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 8px 0; font-size: 14px; }
.need dt { font-weight: 500; }
.need dd { margin: 0; color: var(--pencil); }
code { font: 500 0.92em/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; }
@media (max-width: 720px) { .need dl { grid-template-columns: 1fr; } .need dd { margin-bottom: 6px; } }

/* Режим макета: данные выдуманные — это должно быть видно на каждом экране. */
.mock-banner { margin: 0 0 20px; padding: 10px 14px; border-radius: var(--radius); background: var(--ochre-wash); color: var(--ochre); font-size: 14px; }
.mock-banner b { color: inherit; }

/* Строка таблицы с правкой на месте: выбор, поле и кнопка в одну линию. */
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form select { min-width: 14ch; }
.inline-form input[type="text"] { width: 14ch; }

.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { padding: 7px 0; border-bottom: 1px solid var(--rule-soft); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Метки и состояния ---------- */

.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12.5px; line-height: 1.6; white-space: nowrap;
  background: var(--paper); color: var(--pencil); border: 1px solid var(--rule);
}
.tag.ok { color: var(--ink); }
.tag.warn { background: var(--ochre-wash); color: var(--ochre); border-color: transparent; }
.tag.bad { background: var(--red-wash); color: var(--red); border-color: transparent; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0.05em; background: var(--m-mid); }
.dot.ok { background: var(--m-in); }
.dot.bad { background: var(--red); }
.dot.wait { background: var(--ochre); }
.dot.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--m-mid); }

.empty {
  padding: 28px 0; color: var(--pencil); max-width: 56ch;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.empty b { color: var(--ink); font-weight: 600; }

/* ---------- Формы: у каждого поля видимая подпись ---------- */

.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px;
  padding: 16px 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > span { font-size: 13px; color: var(--pencil); }
.field.grow { flex: 1 1 220px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 40px; }

input[type="text"], input[type="search"], input[type="password"], input[type="date"],
input[inputmode], select, textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 8px 10px; min-height: 40px;
}
textarea { min-height: 96px; width: 100%; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--pencil); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--stamp); margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 18px; border-radius: var(--radius);
  font: 600 15px var(--font); cursor: pointer;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule);
}
.btn:hover { border-color: var(--pencil); text-decoration: none; }
.btn.primary { background: var(--stamp); border-color: var(--stamp); color: var(--sheet); }
.btn.primary:hover { filter: brightness(1.08); }

.choices { border: 0; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.choices legend { font-size: 13px; color: var(--pencil); margin-bottom: 8px; padding: 0; }
.choices label { display: flex; align-items: center; gap: 8px; min-height: 36px; }

.error {
  color: var(--red); background: var(--red-wash);
  padding: 10px 12px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px;
}

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

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login { width: 100%; max-width: 380px; }
.login .wordmark { padding: 0 0 6px; font-size: 24px; }
.login .intro { color: var(--pencil); margin-bottom: 26px; font-size: 15px; }
.login form { display: grid; gap: 16px; }
.login input { width: 100%; }
.login .btn { width: 100%; margin-top: 4px; }
.login .hint { font-size: 13px; color: var(--pencil); margin-top: 18px; }

/* ---------- Вопросы: очередь и разбор ---------- */

.tally { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-bottom: 8px; }
.tally div { font-size: 14px; color: var(--pencil); }
.tally b { display: block; font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }

.queue { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.queue > li { border-bottom: 1px solid var(--rule-soft); }
.queue a.item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px;
  padding: 16px 0 16px 18px; position: relative; color: var(--ink);
}
.queue a.item::before {
  content: ""; position: absolute; left: 0; top: 17px; bottom: 17px; width: 3px; border-radius: 2px;
  background: var(--lvl, var(--m-mid));
}
.queue a.item:hover { text-decoration: none; background: var(--sheet); }
.queue a.item:hover .i-title { text-decoration: underline; text-underline-offset: 0.18em; }
.queue .i-title { font-weight: 600; font-size: 16px; }
.queue .i-sum { font-size: 16px; font-weight: 600; font-feature-settings: "tnum" 1; white-space: nowrap; }
.queue .i-text { grid-column: 1 / -1; font-size: 14px; margin-top: 4px; max-width: 90ch; }
.queue .i-why { grid-column: 1 / -1; font-size: 14px; color: var(--pencil); margin-top: 4px; max-width: 90ch; }
.queue .i-meta { grid-column: 1 / -1; font-size: 13px; color: var(--pencil); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; }

.case { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.case-body > * + * { margin-top: 26px; }
.case-body .prose { max-width: 70ch; }
.case-body .prose h2 { font-size: 15.5px; margin-bottom: 6px; }
.case-body .prose p + h2 { margin-top: 18px; }
.case-side { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; }
.case-side h2 { font-size: 15.5px; margin-bottom: 12px; }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.facts dt { color: var(--pencil); }
.facts dd { margin: 0; text-align: right; }
.answer { max-width: 70ch; }
.answer .saved { font-size: 14px; margin-bottom: 14px; }

/* ---------- Деньги по месяцам ---------- */

.money-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.columns { max-width: 760px; }

/* ---------- Телефон ---------- */

@media (max-width: 1080px) {
  /* Одна колонка: 12 колонок с промежутками на узком экране шире самого экрана. */
  .home { grid-template-columns: minmax(0, 1fr); }
  .home .bridge, .home .now, .home .entities, .home .lines { grid-column: auto; }
  .case { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 64px; }
  /* Полоса меню — своей высоты, остаток — содержимому. Без этого на короткой
     странице сетка растягивает обе строки и меню уезжает в середину экрана. */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .rail {
    position: sticky; top: 0; z-index: 5; height: auto;
    flex-direction: row; align-items: center; gap: 4px;
    padding: 0 0 0 16px; border-right: 0; border-bottom: 1px solid var(--rule);
  }
  .wordmark { padding: 0 8px 0 0; font-size: 17px; flex: none; }
  /* Обёртка меню должна уметь сжиматься, иначе по умолчанию она не уже своего
     содержимого: прокрутка внутри меню не включается, и вся страница шире экрана. */
  .rail > nav { flex: 1 1 auto; min-width: 0; }
  .nav {
    display: flex; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    min-height: 48px; padding: 12px 12px; white-space: nowrap;
    border-left: 0; border-bottom: 3px solid transparent;
  }
  .nav a[aria-current="page"] { border-bottom-color: var(--stamp); }
  .nav .nav-service { margin: 0; padding: 0; border: 0; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 20px; margin-top: -4px; }
  .tabs::-webkit-scrollbar { display: none; }
  .verdict { font-size: 17px; }
  .rail-foot { display: none; }
  .main { padding: 20px 16px 56px; }
  .page-head { margin-bottom: 20px; }
  .sources-mini { text-align: left; }
  .lede { font-size: 18px; }
  .figure { font-size: 38px; }
  .home { gap: 32px; }
  .hide-sm { display: none; }
  /* На телефоне у склада до четырёх столбцов сумм: поуже промежутки, чтобы влезли потери. */
  table.stock tbody th { white-space: normal; }
  table.stock th, table.stock td { padding-left: 6px; padding-right: 6px; }
  .btn, input, select { min-height: 44px; }
}

/* ---------- Доступность ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Режим высокой контрастности: цвет меток не виден — включаем штриховку. */
@media (forced-colors: active) {
  .m-in path, .m-in { fill: CanvasText; }
  .m-out path, .m-out { fill: Highlight; }
  .m-mid path, .m-mid { fill: GrayText; }
  .qlist a::before, .queue a.item::before { forced-color-adjust: none; background: CanvasText; }
}

@media print {
  .rail, .filters, .skip, .answer { display: none; }
  .app { display: block; }
  body { background: #fff; }
}