body.по-центру {           /* вход, приглашение, ошибка — одна колонка на экран */
  display: flex; flex-direction: column; min-height: 100vh;
  align-items: center; justify-content: center; gap: var(--шаг);
  padding: var(--поле);
}
/* Запасной вход (код на почту) стоит ПОД основным и мельче его. До Д-0 он висел
   внизу экрана `position: fixed`; снятие инлайна поставило его бок о бок с формой
   логина, и два равных прямоугольника читались как два равных входа. Поймано
   08.09 глазом на боевом кабинете, а не гейтом: разметка была цела. */
body.по-центру .запасной { font-size: var(--кегль-подпись); }
body.по-центру .запасной label { margin-top: 0; }

header, main, footer, .каркас { max-width: var(--полоса); margin: 0 auto; padding: 0 var(--поле); }
/* Внутри каркаса поля и центровку держит сам каркас: второй раз их применять нельзя,
   иначе колонка текста уезжает от шапки на ширину поля. */
.каркас > main { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
footer.без-рамки { border: 0; margin-top: 1.5rem; }

/* Единственное крупное число на экране. Класс намеренно один и без вариантов:
   два «главных» числа на экране означают, что главного нет (ТЗ §5.2). */
.число-экрана { font-size: var(--кегль-число); font-weight: 600; line-height: 1.1;
                white-space: nowrap; }

/* Колокольчик и аватар: §4.1, Д-5; довод — `base.html`. 44 px — правило §5.5 про палец. */
.колокол, .аватар { display: inline-flex; align-items: center; justify-content: center;
                    position: relative; min-width: 44px; min-height: 44px; }
.бейдж { position: absolute; top: 6px; right: 4px; min-width: 1.1rem; height: 1.1rem;
         padding: 0 .2rem; border-radius: .6rem; background: var(--потеря);
         color: var(--бумага); font-size: var(--кегль-подпись); line-height: 1.1rem;
         text-align: center; font-variant-numeric: tabular-nums; }
.аватар span { display: inline-flex; align-items: center; justify-content: center;
               width: 2rem; height: 2rem; border-radius: 50%;
               border: 1px solid var(--линия); background: var(--бумага);
               color: var(--чернила); font-size: var(--кегль-подпись);
               font-weight: 600; letter-spacing: .02em; }
.вправо { float: right; }

.крошки { font-size: var(--кегль-подпись); color: var(--серый); margin: .5rem 0 0; }
.крошки a { font-size: var(--кегль-подпись); }

/* ЛЕВАЯ КОЛОНКА РАЗДЕЛОВ И НИЖНЯЯ ПАНЕЛЬ — ТЗ §4.1, этап Д-2 (09.09.2026).

   БУРГЕР СНЯТ. Он держал ТРИНАДЦАТЬ разделов в одной строке шапки, и снимок 1280 px
   от 08.09 поймал, чем это кончается: шапка кабинета переносилась в ЧЕТЫРЕ строки,
   съедая первый экран до всякого содержимого. Заплатки тут нет — §4.1 отдаёт десктопу
   левую колонку, а телефону нижнюю панель из четырёх пунктов: одна рука, большой
   палец, и разделы не соревнуются с логотипом за одну строку.

   ГРАНИЦА ОДНА, А НЕ ДВЕ. Колонка встаёт там, где для неё есть место (--каркас), и
   ровно там же исчезает нижняя панель: экран не бывает без навигации ни на одной
   ширине, и двух навигаций одновременно тоже не бывает. */
aside.боковое { display: none; }
nav.нижняя {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; background: var(--бумага); border-top: 1px solid var(--линия);
  padding-bottom: env(safe-area-inset-bottom);
}
nav.нижняя > a, nav.нижняя > details > summary {
  flex: 1; min-height: var(--палец); display: flex; align-items: center;
  justify-content: center; text-align: center; text-decoration: none;
  color: var(--серый); font-size: var(--кегль-подпись); padding: .3rem .2rem;
}
nav.нижняя a.активен { color: var(--чернила); box-shadow: inset 0 2px 0 var(--акцент); }
nav.нижняя > details { flex: 1; }
nav.нижняя > details > summary { list-style: none; cursor: pointer; }
nav.нижняя > details > summary::-webkit-details-marker { display: none; }
/* «Ещё» раскрывается ВВЕРХ: панель прижата к низу экрана, и список вниз ушёл бы за
   его край. JS в вёрстке экранов нет ни строки (М-531) — это `<details>`. */
nav.нижняя > details > nav {
  position: absolute; bottom: 100%; right: 0; min-width: 12rem;
  display: flex; flex-direction: column; gap: .1rem;
  background: var(--бумага); border: 1px solid var(--линия);
  border-radius: var(--скругление) var(--скругление) 0 0; padding: .4rem 0;
}
nav.нижняя > details > nav a {
  min-height: var(--палец); display: flex; align-items: center;
  padding: 0 .9rem; text-decoration: none; color: var(--серый);
  font-size: var(--кегль-мелкий);
}@media (min-width: 64rem) {

  /* Шире делается ТОЛЬКО кабинет с колонкой: у админки своя шапка и колонки нет,
     и растягивать её текст на ширину каркаса не за чем. */
  body.с-колонкой header, body.с-колонкой footer, body.с-колонкой .каркас {
    max-width: var(--каркас);
  }
  body.с-колонкой .каркас {
    display: grid; grid-template-columns: var(--колонка-меню) minmax(0, 1fr);
    gap: 1.5rem; align-items: start;
  }
  aside.боковое { display: block; position: sticky; top: .75rem; }
  nav.нижняя { display: none; }}
/* ШИРОКИЙ ЭКРАН (с 1280 px): на 1440 колонка в 800 px оставляла треть экрана пустой
   (ревизия М-721 §4). Абзацы держит `--ширина-текста`, растут таблицы и графики. */
@media (min-width: 80rem) {
  body.с-колонкой header, body.с-колонкой footer, body.с-колонкой .каркас {
    max-width: var(--каркас-широкий);
  }}

.в-строку { display: inline; }

/* Строка состояния дня под крошками. На живом дне зелёного не бывает. */
.строка-дня { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline;
              font-size: var(--кегль-подпись); color: var(--серый);
              border-bottom: 1px solid var(--линия); padding: .5rem 0; }
.строка-дня .вердикт { color: var(--чернила); font-size: var(--кегль-мелкий); font-weight: 600; }

/* ── 8. Пустота с причиной — ТЗ §1.1 и §6 ────────────────────────────────────
   Три пустоты — «чисто», «не считалось», «данных нет» — и ни одна не молчит.
   Виджет без данных рисует ЭТО, а не исчезает (ТЗ §4.2). */
.пусто { border: 1px dashed var(--линия); border-radius: var(--скругление);
         padding: .7rem .9rem; margin: .6rem 0; color: var(--серый);
         font-size: var(--кегль-мелкий); background: var(--бумага); }
.пусто b, .пусто strong { color: var(--чернила); font-weight: 600; }

/* Скелетон живёт не дольше секунды; дальше на его месте — «пусто» с причиной. */
.скелетон { background: var(--линия); border-radius: var(--скругление-мелкое);
            min-height: 1rem; opacity: .45; }
button.опасная { border-color: var(--потеря); color: var(--потеря); background: var(--потеря-фон); }

.чипы { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0; }
.чип { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none;
       font-size: var(--кегль-подпись); padding: .3rem .6rem; border-radius: 999px;
       border: 1px solid var(--линия); color: var(--серый); background: var(--бумага); }
.чип.активен { border-color: var(--акцент); color: var(--акцент); }
form.колонка { display: block; max-width: 24rem; }
form.колонка input, form.колонка select, form.колонка textarea, form.колонка button { width: 100%; }
form.фильтр { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: .5rem 0 1rem; }
.во-всю { width: 100%; }
.таблица-прокрутка { overflow-x: auto; }@media (max-width: 40rem) {

  table.карточками, table.карточками tbody, table.карточками tr, table.карточками td {
    display: block; width: auto;
  }
  table.карточками tr:first-child { display: none; }
  table.карточками tr { border: 1px solid var(--линия);
                        border-radius: var(--скругление); background: var(--бумага);
                        padding: .5rem .7rem; margin: .5rem 0; }
  table.карточками td { border: 0; padding: .15rem 0; }
  table.карточками td[data-подпись]::before {
    content: attr(data-подпись) ": "; color: var(--серый);
    font-size: var(--кегль-подпись); text-transform: uppercase; letter-spacing: .04em;
  }
  table.карточками td:empty { display: none; }}


/* Виджет 4 «Находок по областям»: §4.2, Д-5; довод — `dashboard.html`, `summaries.py`. */
ul.области-виджет { list-style: none; padding: 0; margin: .4rem 0; }
ul.области-виджет li { padding: .3rem 0; }
.область-имя { flex: 1; min-width: 6rem; }
.область-число { font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.область-полоса { width: 7.5rem; flex: none; display: block; }
.область-полоса svg { width: 100%; height: .75rem; display: block; }@media (max-width: 30rem) {

  .область-полоса { width: 4.5rem; }}


/* ── 10б. Настройка уведомлений: §4.6, Д-5; довод — `profile.html`. */
ul.события { list-style: none; padding: 0; margin: .5rem 0; }
ul.события > li { border-bottom: 1px solid var(--линия); padding: .5rem 0; }
form.событие { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
               margin: 0; }
form.событие .имя-события { flex: 1 1 12rem; }
form.событие button { min-height: 44px; }
.выбор { display: inline-flex; align-items: center; gap: .25rem; margin: 0;
         font-size: var(--кегль-подпись); color: var(--серый); }
.выбор input { width: auto; margin: 0; }
form.тихие-часы label { display: inline-flex; align-items: center; gap: .4rem;
                        margin-right: .8rem; }
form.тихие-часы input { width: auto; }
details.превью { flex-basis: 100%; }

/* ── 10в. Чат: пузыри — §4.6, Д-5; довод — `chat.html`. */
.пузырь { border: 1px solid var(--линия); border-radius: var(--скругление);
          background: var(--бумага); padding: .5rem .7rem; margin: .5rem 0;
          max-width: 42rem; }
.пузырь.мой { margin-left: auto; border-color: var(--акцент); }

/* ── 10г. Люди и доступ: карточки и четыре оси чипами — §4.6, Д-5; довод —
   `people.html`. Оси стоят колонкой: у каждой подпись слева и чипы справа, а на
   узком экране подпись встаёт над ними. */
ul.люди { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: var(--шаг); }
.человек-шапка { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.человек-шапка .набор { margin-left: auto; color: var(--серый);
                        font-size: var(--кегль-подпись); }
.оси { display: grid; gap: .25rem; margin: .5rem 0 0; }
.строка-счёта { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
                margin-top: .3rem; }
details.свёртка > summary { cursor: pointer; color: var(--чернила);
                            font-size: var(--кегль-мелкий); font-weight: 600;
                            min-height: var(--палец); display: list-item; padding: .5rem 0; }
details.свёртка { margin: .8rem 0 0; }

/* ── 12. Липкая плашка (демо, инцидент) ─────────────────────────────────── */
.плашка { position: sticky; top: 0; z-index: 5; padding: .5rem var(--поле);
          font-size: var(--кегль-подпись); text-align: center;
          border-bottom: 1px solid currentColor; background: var(--бумага); }
.плашка--демо { color: var(--оценка); }
.плашка--инцидент { color: var(--потеря); }

/* ── 13. Нижняя панель на телефоне — ТЗ §4.1 и §7 п.8 ────────────────────── */
.панель-низ { display: none; }@media (max-width: 48rem) {

  .панель-низ {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    background: var(--бумага); border-top: 1px solid var(--линия);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .панель-низ a { flex: 1; min-height: var(--палец); display: flex; flex-direction: column;
                  align-items: center; justify-content: center; gap: .1rem;
                  text-decoration: none; color: var(--серый);
                  font-size: var(--кегль-подпись); padding: .35rem 0; }
  .панель-низ a.активен { color: var(--акцент); }
  .панель-низ svg { width: 1.25rem; height: 1.25rem; }
  body.с-панелью main { padding-bottom: calc(var(--палец) + 2.5rem); }}


/* ── 14. Две зоны главной и сетки — ТЗ §4.2 ──────────────────────────────────
   Зона задаёт ПРИРОДУ данных, поэтому виджет между зонами не переносится:
   «сегодня» — живой срез без вердикта, «вчера» — закрытый день с вердиктом. */
.зона { margin: 1.5rem 0; }
.зона > h2 { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.зона--живая  { border-left: 3px solid var(--вопрос); padding-left: .8rem; }
.зона--закрытая { border-left: 3px solid var(--линия); padding-left: .8rem; }

.плитки { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--шаг); margin: .6rem 0; }@media (min-width: 48rem) {
 .плитки { grid-template-columns: repeat(4, 1fr); }}

.плитка { border: 1px solid var(--линия); border-radius: var(--скругление);
          background: var(--бумага); padding: .6rem .7rem; }
.плитка .дельта { color: var(--серый); font-size: var(--кегль-подпись); }

/* ── 16. Баннер установки PWA ───────────────────────────────────────────── */
.pwa-баннер { border: 1px solid var(--акцент); border-radius: var(--скругление);
              background: var(--бумага); padding: .7rem .9rem; margin: .8rem 0;
              font-size: var(--кегль-мелкий); }
.pwa-баннер button { margin-right: .5rem; }
.pwa-баннер svg { width: 1.1rem; height: 1.1rem; vertical-align: -.2rem; }

/* Две картинки шагов iPhone: §4.6, Д-5; довод — `base.html`. */
.pwa-баннер .шаги { display: flex; gap: var(--шаг); flex-wrap: wrap; margin-top: .5rem; }
.pwa-баннер svg.рисунок { width: 100%; height: auto; display: block; }
svg.рисунок .рамка { fill: var(--бумага); stroke: var(--линия); stroke-width: 2; }
svg.рисунок .тень { fill: none; stroke: var(--неизвестно); stroke-width: 2;
                    stroke-linecap: round; }
svg.рисунок .выделено { fill: none; stroke: var(--акцент); stroke-width: 2;
                        stroke-linecap: round; stroke-linejoin: round; }

/* ── Подсказка у поля (§5.5, ред. 23.09.2026; `templates/hint.html`) ─────────
   Свёрнута по умолчанию: форма читается полями, а не абзацами. Раскрытие — касанием
   (палец 44 px), не наведением: на телефоне наведения нет. Цвет — акцент ссылки, текст
   под ней — бумага с линией, как у «Происхождения числа», чтобы читатель узнал приём. */
details.подсказка { margin: .25rem 0 .5rem; }
details.подсказка > summary { cursor: pointer; color: var(--акцент);
  font-size: var(--кегль-подпись); min-height: var(--палец); display: inline-flex;
  align-items: center; gap: .35rem; list-style: none; }
details.подсказка > summary::-webkit-details-marker { display: none; }
details.подсказка > summary .значок { width: 1.05rem; height: 1.05rem; }
details.подсказка .подсказка-текст { border-left: 2px solid var(--линия);
  padding: .35rem .7rem; color: var(--чернила); font-size: var(--кегль-мелкий);
  max-width: var(--ширина-текста); background: var(--бумага); }
.план-выпусков { list-style: none; padding: 0; margin: .4rem 0 .8rem; }
.план-выпусков li { border-bottom: 1px solid var(--линия); padding: .45rem 0; }
.план-выпусков .когда { font-weight: 600; }
.шаги-инструкции { counter-reset: шаг; list-style: none; padding: 0; }
.шаги-инструкции > li { border: 1px solid var(--линия); border-radius: var(--скругление);
  padding: .6rem .9rem; margin: .6rem 0; }
.шаги-инструкции > li h3 { margin: .1rem 0 .3rem; font-size: 1rem; }
.шаги-инструкции .куда { font-size: var(--кегль-подпись); }

/* ── 19. Ред. 5 — графика вместо текста (ТЗ дизайна §10, Р-24.09-1, Г-3/Г-4) ──────
   Число — крупной цифрой или фигурой, пояснение — одной строкой. Цвета — только токены
   ред. 5 из `ayanbi.css`: бронзовая подложка у вердикта, тинт природы у её плитки. */

/* Вердикт закрытого дня — на подложке, без рамки: единственный блок Главной с фоном. */
.карточка.вердикт { background: var(--подложка); border: 0; border-radius: 18px;
                    padding: 1rem 1.1rem; }
.карточка.вердикт .строка-дня { border-bottom-color: var(--линия); }
.карточка.вердикт .строка-дня .вердикт { font-size: var(--кегль-вердикт); }
.карточка.вердикт .строка { background: transparent; border: 0; padding: .4rem 0; margin: 0; }

/* Фигура с подписью: кольцо, пончик, месяц. На телефоне — столбиком, шире — в ряд. */
.фигуры { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center;
          margin: .8rem 0; }
.фигура { margin: 0; display: flex; align-items: center; gap: .8rem; }
.фигура > svg.график { width: 7.5rem; flex: none; }
.фигура--широкая { flex: 1 1 18rem; flex-direction: column; align-items: stretch; }
.фигура--широкая > svg.график { width: 100%; max-width: 30rem; }
.фигура figcaption { display: flex; flex-direction: column; gap: .2rem; }
.легенда { display: flex; flex-wrap: wrap; gap: .3rem .8rem; }

/* Плитки природ: тинт СВОЕЙ природы, ярлык словом, сумма крупно. */
.природы { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
           gap: var(--шаг); margin: .6rem 0; }
.плитка-природы { border-radius: 14px; padding: .8rem .9rem; display: flex;
                  flex-direction: column; gap: .35rem; background: var(--неизвестно-фон); }
.плитка-природы--потеря { background: var(--потеря-фон); }
.плитка-природы--вопрос { background: var(--вопрос-фон); }
.плитка-природы--оценка { background: var(--оценка-фон); }
.плитка-природы--оборот { background: var(--оборот-фон); }
/* В плитке ярлык — подпись, а не плашка: рамка вокруг двух строк выглядела обрывком. */
.плитка-природы .природа { white-space: normal; align-self: flex-start; border: 0;
                           padding: 0; font-weight: 600; }
.плитки--метрики .плитка { display: flex; flex-direction: column; gap: .25rem; }
.плитки--метрики .плитка .значение .тихо { font-size: var(--кегль-подпись); font-weight: 400; }
.сумма-крупно { font-size: var(--кегль-экран); font-weight: 600; line-height: 1.1;
                letter-spacing: -.01em; }

/* Полосы (`bar_row`) не растягиваются на всю колонку: подпись в SVG масштабируется
   вместе с картинкой, и на 1280 px она становилась крупнее заголовка карточки. */
.полосы { max-width: 34rem; }

/* Легенда уровней рядом с пончиком: слово и число, цвет — у точки. */
ul.легенда-уровней { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
ul.легенда-уровней li { display: flex; align-items: baseline; gap: .5rem; }
ul.легенда-уровней li::before { content: ""; width: .7rem; height: .7rem; border-radius: 3px;
                               background: var(--неизвестно); align-self: center; }
ul.легенда-уровней .уровень--высокий::before { background: var(--потеря); }
ul.легенда-уровней .уровень--средний::before { background: var(--вопрос); }
ul.легенда-уровней .уровень--низкий::before  { background: var(--акцент); }
.уровень-число { font-size: var(--кегль-вердикт); font-weight: 600; }

/* Области плитками: значок, число крупно, имя. С находками — тинт подложки. */
ul.области-плитки { list-style: none; padding: 0; margin: .5rem 0; display: grid;
                    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--шаг); }
@media (min-width: 48rem) {
  ul.области-плитки { grid-template-columns: repeat(4, minmax(0, 1fr)); }}
.область-плитка { border: 1px solid var(--линия); border-radius: 14px;
                  padding: .7rem .8rem; display: flex; flex-direction: column; gap: .3rem;
                  background: var(--бумага); }
.область-плитка.есть { background: var(--подложка); border-color: var(--подложка); }
/* Порядок в разметке «имя · число» (его читают пробы и скринридер), на глаз — число
   над именем: крупная цифра — первое, что видно. */
.область-плитка .область-имя { order: 2; }
.область-плитка .область-число { order: 1; }
.область-плитка .значок { width: 1.5rem; height: 1.5rem; color: var(--акцент); }
.область-плитка .область-число { font-size: var(--кегль-экран); font-weight: 600;
                                 line-height: 1.1; text-align: left; }
.область-плитка.тихо .значок, .область-плитка.тихо .область-число { color: var(--неизвестно); }

/* Живая зона: KPI крупно, входы дня плашками. */
.плитки .плитка .значение { font-size: var(--кегль-экран); font-weight: 600; line-height: 1.15; }
ul.входы-дня { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .4rem;
               grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
ul.входы-дня li { background: var(--неизвестно-фон); border-radius: 10px; padding: .5rem .7rem; }

/* Зоны без полос слева: зона — заголовок и отступ, а не рамка. */
.зона--живая, .зона--закрытая { border-left: 0; padding-left: 0; }

/* Строка находки (Г-4) живёт в `ayanbi.css`, блок 13в: её рисует и витрина фрагментом
   листа, а витрина этого файла не подключает. */

/* Охват листа — сетка клеток «проверено / не проверялось» рядом с кольцом. */
.охват-клетки { display: grid; grid-template-columns: repeat(auto-fill, minmax(1.6rem, 1fr));
                gap: 4px; max-width: 20rem; }
.охват-клетки span { height: 1.6rem; border-radius: 6px; background: var(--оборот); }
.охват-клетки span.нет { background: var(--неизвестно-фон);
                         outline: 1px dashed var(--неизвестно); outline-offset: -1px; }

/* Карточка находки: сумма — крупно; лента сюжета — точками на линии времени. */
article.карточка[data-паритет="карточка"] .деньги { font-size: var(--кегль-экран);
                                                    font-weight: 600; }
ol.лента-сюжета { list-style: none; padding: 0 0 0 1.1rem; margin: .6rem 0;
                  border-left: 2px solid var(--линия); }
ol.лента-сюжета li { position: relative; padding: .25rem 0 .25rem .4rem; }
ol.лента-сюжета li::before { content: ""; position: absolute; left: -1.55rem; top: .6rem;
                             width: .7rem; height: .7rem; border-radius: 50%;
                             background: var(--бумага); border: 2px solid var(--акцент); }

@media print {
  .карточка.вердикт { background: var(--бумага); border: 1px solid var(--линия); }
}

/* ── 20. Экраны v5 ред. 5 (ТЗ дизайна §10, М-622): главная, дела, лента, свод, исправления.
   Классы — один дом; разметку раскладывает `templates/v5_parts.html`. */
.счётчики { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.счётчик { display: flex; flex-direction: column; }
.число-счётчика { font-size: var(--кегль-крупно); font-weight: 600; line-height: 1; }
.счётчики--малые .число-счётчика { font-size: var(--кегль-экран); }
.счётчик--висяки .число-счётчика { color: var(--вопрос); }

.дело { border: 1px solid var(--линия); border-radius: 16px; background: var(--бумага);
        padding: .9rem 1rem; margin: .7rem 0; display: flex; flex-direction: column; gap: .5rem; }
.карточка.вердикт .дело { border-color: transparent; }
.дела-сетка { display: grid; gap: var(--шаг); margin: .6rem 0;
              grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.дела-сетка .дело { margin: 0; }
.дело-шапка { display: flex; align-items: center; gap: .55rem; }
.дело-шапка .дело-имя { flex: 1 1 auto; min-width: 0; }
.дело-значок { flex: none; }
.дело-значок .значок { width: 1.8rem; height: 1.8rem; padding: .35rem; border-radius: 50%;
                       background: var(--подложка); color: var(--акцент); }
.дело-имя { font-size: var(--кегль-текст); line-height: 1.3; }
.дело-имя a { color: var(--чернила); text-decoration: none; }
.дело-мета { display: flex; flex-wrap: wrap; gap: .35rem; }
.дело-мета .чип { background: var(--фон); }
.чип--возраст { border-color: var(--вопрос); color: var(--вопрос); }
.кратность { margin-left: auto; font-weight: 600; color: var(--акцент);
             background: var(--подложка); border-radius: 999px; padding: .1rem .6rem; }
.суммы-дела { display: grid; gap: var(--шаг); justify-content: start;
              grid-template-columns: repeat(auto-fill, minmax(12rem, 17rem)); }
.сумма-строка { display: inline-flex; align-items: center; gap: .4rem; margin-right: .8rem;
                white-space: nowrap; }
.сумма-строка .деньги { font-weight: 600; }
ul.суммы-группы { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem .8rem;
                  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
ul.суммы-группы .сумма-строка { font-weight: 600; }
ul.суммы-группы--с-ярлыком { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
dl.опознание-строки { margin: .4rem 0; padding-top: .4rem; border-top: 1px solid var(--линия);
                      display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
dl.опознание-строки dd { margin: 0; font-size: var(--кегль-мелкий); }
.опознание-сумма { font-weight: 600; min-width: 9rem; }

.чипы--проверено { margin: .6rem 0; }
.чип--проверено { border-color: var(--оборот); color: var(--оборот); background: var(--оборот-фон); }
.чип--проверено::before { content: "✓"; font-weight: 600; }
.величины-плитки { display: grid; gap: .4rem;
                   grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.величина { background: var(--фон); border-radius: 10px; padding: .5rem .6rem;
            display: flex; flex-direction: column; gap: .15rem; }
.величина .подпись { text-transform: none; letter-spacing: 0; }
.величина-число { font-size: var(--кегль-вердикт); font-weight: 600; }

.не-проверено { display: grid; gap: var(--шаг); }
.причина { border: 1px dashed var(--неизвестно); border-radius: 14px; padding: .7rem .9rem;
           background: var(--неизвестно-фон); }
.причина-текст { font-size: var(--кегль-мелкий); color: var(--чернила); margin-bottom: .35rem; }
.причина .чипы { margin: 0; }
.чип--молчит { color: var(--неизвестно); border-style: dashed; border-color: var(--неизвестно); }

.дни-сетка { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); }
.день-плитка { border-radius: 10px; padding: .45rem .5rem; text-decoration: none;
               display: flex; flex-direction: column; gap: .15rem; min-height: var(--палец);
               background: var(--бумага); border: 1px solid var(--линия); color: var(--чернила); }
.день-номер { font-size: var(--кегль-вердикт); font-weight: 600; line-height: 1; }
.день-счёт, .день-уточнение { font-size: var(--кегль-подпись); line-height: 1.25; }
.день-плитка--1 { background: var(--вопрос-фон); border-color: var(--вопрос-фон); }
.день-плитка--2 { background: var(--подложка); border-color: var(--подложка); }
.день-плитка--3 { background: var(--вопрос); border-color: var(--вопрос); color: var(--бумага); }
.день-плитка--4 { background: var(--акцент); border-color: var(--акцент); color: var(--бумага); }
.месяц { margin: 1rem 0; }
.месяц-имя { font-size: var(--кегль-текст); margin: .4rem 0; }
ul.файлы-дней { list-style: none; padding: 0; columns: 2 16rem; font-size: var(--кегль-мелкий); }

.сегмент { display: inline-flex; border: 1px solid var(--линия); border-radius: 12px;
           overflow: hidden; margin: .6rem 0; background: var(--бумага); }
.сегмент a { padding: .5rem 1rem; min-height: var(--палец); display: inline-flex;
             align-items: center; text-decoration: none; color: var(--серый); }
.сегмент a + a { border-left: 1px solid var(--линия); }
.сегмент a.активен { background: var(--акцент); color: var(--бумага); font-weight: 600; }

.окна-сетка { display: grid; gap: var(--шаг);
              grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.окно-карточка { border: 1px solid var(--линия); border-radius: 16px; background: var(--бумага);
                 padding: .9rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.окно-даты { color: var(--чернила); text-decoration: none; font-size: var(--кегль-текст); }

.висяк { border-top: 1px solid var(--линия); padding: .6rem 0; }
.висяк:first-of-type { border-top: 0; }
.висяк-полоса { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.держится { width: 8rem; flex: none; }
.держится svg { width: 100%; height: .75rem; display: block; }
.шаг { background: var(--подложка); border-radius: 10px; padding: .55rem .75rem;
       font-size: var(--кегль-мелкий); }

/* Календарь ленты — семь столбцов с понедельника; первая плитка месяца встаёт в свой. */
.дни-сетка--неделя { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 40rem; }
.день-недели { font-size: var(--кегль-подпись); color: var(--серый); text-align: center; }
.день-с-1 { grid-column-start: 1; } .день-с-2 { grid-column-start: 2; }
.день-с-3 { grid-column-start: 3; } .день-с-4 { grid-column-start: 4; }
.день-с-5 { grid-column-start: 5; } .день-с-6 { grid-column-start: 6; }
.день-с-7 { grid-column-start: 7; }
@media (max-width: 30rem) {
  .дни-сетка--неделя .день-счёт { display: none; }}
/* Текст для скринридера и проб: на глаз его заменяет плитка, в тексте страницы он есть. */
.для-чтения { position: absolute; width: 1px; height: 1px; overflow: hidden;
              clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Наш кабинет (М-813, `/admin`): метка роли, строка точки, фигура с легендой ──
   Роль — те же шесть слов, что у картинок (`svg.ROLES`): метка точки и клетка её дня
   красятся одним словарём (`owner.POINT_STATES`). */
.метка.потеря, .метка.вопрос, .метка.оценка, .метка.оборот, .метка.неизвестно {
  border: 0; font-weight: 600; }
.метка.потеря     { background: var(--потеря-фон); color: var(--потеря); }
.метка.вопрос     { background: var(--вопрос-фон); color: var(--вопрос); }
.метка.оценка     { background: var(--оценка-фон); color: var(--оценка); }
.метка.оборот     { background: var(--оборот-фон); color: var(--оборот); }
.метка.неизвестно { background: var(--неизвестно-фон); color: var(--неизвестно); }
.точка-статус { display: grid; gap: .4rem; padding: .7rem 0; border-top: 1px solid var(--линия); }
.точка-статус:first-of-type { border-top: 0; }
ul.грани { list-style: none; padding: 0; margin: .2rem 0; display: flex; flex-wrap: wrap;
           gap: .2rem 1rem; font-size: var(--кегль-мелкий); }
.фигура-и-легенда { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: center; }
.фигура-и-легенда ul.грани { flex-direction: column; }
@media (min-width: 64rem) {
  .точка-статус { grid-template-columns: minmax(12rem, 1fr) 20rem; }
  .точка-статус ul.грани { grid-column: 1 / -1; }}
/* Фигура нашего экрана не растягивается на всю карточку: подписи внутри SVG растут
   вместе с шириной, и на десктопе полоса из шести строк выходила кеглем заголовка. */
.фигура { max-width: 26rem; }
.фигура--полоса { max-width: 20rem; }
.фигура--кольцо { max-width: 7.5rem; }

/* ЛЕНТА УВЕДОМЛЕНИЙ (М-622, §10 ред. 5): непрочитанное — точкой бренда и рамкой, а не
   цветом текста: пара «текст на бумаге» остаётся той, что уже судит гейт контраста. */
.feed-action { margin-top: .6rem; }
.feed-day { font-size: var(--кегль-подпись); color: var(--серый); margin: 1.2rem 0 .2rem; }
.notice-head { display: flex; align-items: center; gap: .55rem; }
.notice-title { flex: 1 1 auto; min-width: 0; }
.notice-dot { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--акцент); }
.notice-new { border-color: var(--акцент); }
.notice-body { margin: 0; }

/* ПОКАЗАТЕЛИ И ОТЧЁТ ДНЯ (28.09.2026, слово Игоря: «меньше текста, больше графики»;
   «клиентская выдача v5 — переработать»). Цвета — только токены `ayanbi.css`. */
.indicators-controls { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; margin: .25rem 0 1rem; }
.indicators-controls label { display: flex; flex-direction: column; gap: .2rem; font-size: var(--кегль-подпись); color: var(--серый); margin: 0; }
.indicators-controls select { min-height: var(--палец); }
.indicators-scale { display: inline-flex; border: 1px solid var(--линия); border-radius: var(--скругление-мелкое); overflow: hidden; }
.indicators-scale button { border: 0; border-radius: 0; background: var(--подложка); color: var(--акцент); min-height: var(--палец); padding: 0 .9rem; margin: 0; }
.indicators-scale button.is-on { background: var(--акцент); color: var(--бумага); }
.indicators-show { min-height: var(--палец); }
.indicators-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.indicators-tile { background: var(--бумага); border: 1px solid var(--линия); border-radius: var(--скругление); padding: .7rem .85rem; display: flex; flex-direction: column; gap: .15rem; }
.indicators-value { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.indicators-meta { display: flex; flex-wrap: wrap; gap: .1rem .5rem; font-size: var(--кегль-подпись); }
.indicators-delta { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.indicators-delta.good { color: var(--оборот); }
.indicators-delta.bad { color: var(--потеря); }
.indicators-chart { margin: 1rem 0; }
.indicators-chart h4 { margin: 0 0 .3rem; }
.indicators-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--кегль-подпись); color: var(--серый); margin-bottom: .3rem; }
.swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.swatch-now { background: var(--акцент); }
.swatch-was { background: var(--оценка); }
.indicators-numbers summary { font-size: var(--кегль-подпись); color: var(--серый); cursor: pointer; }
.indicators-table { width: 100%; border-collapse: collapse; font-size: var(--кегль-мелкий); }
.indicators-table th, .indicators-table td { padding: .35rem .25rem; border-bottom: 1px solid var(--линия); text-align: left; vertical-align: top; }
.indicators-table th { font-weight: 600; color: var(--серый); font-size: var(--кегль-подпись); }
.indicators-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.indicators-bar { display: block; max-width: 9rem; }
.indicators-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .indicators-pair { grid-template-columns: 1fr; } }
.report-strip { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: baseline; margin: .4rem 0; font-variant-numeric: tabular-nums; }
.report-case { background: var(--бумага); border: 1px solid var(--линия); border-left: 4px solid var(--потеря); border-radius: var(--скругление); padding: .8rem 1rem; margin-bottom: .7rem; }
.report-case--carried { border-left-color: var(--линия); }
.report-case-head { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.report-case-sum { font-weight: 600; white-space: nowrap; }
.report-case p { margin: .35rem 0; }
.report-rows { margin: .3rem 0 0; padding-left: 1.1rem; font-size: var(--кегль-мелкий); }
.report-do { background: var(--вопрос-фон); border-radius: var(--скругление-мелкое); padding: .5rem .7rem; margin-top: .5rem; font-size: var(--кегль-мелкий); }
.report-detail { margin-top: 1.5rem; }
.report-detail > summary { cursor: pointer; color: var(--серый); }

/* АДМИНКА: РАЗДЕЛЫ СЛЕВА ГРУППАМИ (слово Игоря 29.09.2026). Колонка — общий механизм
   кабинета (`aside.боковое`); нижней панели у админки нет, её разделы на узком экране
   раскрываются списком «Разделы» под шапкой, а на широком этот список прячется —
   двух навигаций одновременно не бывает, как и у кабинета клиента. */
details.sections-narrow { margin: .5rem 0 0; }
details.sections-narrow > summary { cursor: pointer; color: var(--серый);
  font-size: var(--кегль-мелкий); min-height: var(--палец); display: flex; align-items: center; }
details.sections-narrow > nav.меню { flex-direction: column; gap: .2rem; padding: .3rem 0 .6rem; }
details.sections-narrow > nav.меню a { min-height: var(--палец); display: flex; align-items: center; }
.menu-group { display: block; font-size: var(--кегль-подпись); color: var(--серый);
  text-transform: uppercase; letter-spacing: .04em; margin-top: .9rem; }
.menu-group:first-child { margin-top: 0; }
body.admin main { padding-bottom: 3rem; }
@media (min-width: 64rem) {
  details.sections-narrow { display: none; }}

/* ── 21. Фирменная раскладка AyanBI, этап 2 (М-845, макеты 09.10.2026, Р-09.10-1) ──────
   Шапка кабинета и нашей админки — ЗЕЛЁНАЯ ПОЛОСА во всю ширину окна; разметка шапки не
   менялась: фон тянется тенью за пределы колонки, а `clip-path` срезает её по высоте.
   Витрина и экраны входа (`body.витрина`, `body.по-центру`) живут своей шапкой. */
body.с-колонкой > header {
  background: var(--акцент); color: var(--бумага); border-bottom: 0;
  box-shadow: 0 0 0 100vmax var(--акцент); clip-path: inset(0 -100vmax);
  margin-bottom: 1rem;
}
body.с-колонкой > header .лого,
body.с-колонкой > header .человек,
body.с-колонкой > header .человек a,
body.с-колонкой > header .крошки,
body.с-колонкой > header .крошки a,
body.с-колонкой > header .колокол .значок { color: var(--бумага); }
body.с-колонкой > header .крошки span,
body.с-колонкой > header .крошки a.активен { color: var(--бумага); font-weight: 600; }
body.с-колонкой > header .крошки { opacity: .9; padding-bottom: .1rem; }
/* Знак на зелёном — инверсия: кольцо и нижняя черта белые, сдвинутая черта остаётся кораллом. */
body.с-колонкой > header .знак { color: var(--бумага); }
body.с-колонкой > header .лого svg { width: 1.6rem; height: 1.6rem; }
body.с-колонкой > header .аватар span { background: var(--бумага); color: var(--акцент); border-color: var(--бумага); }
body.с-колонкой > header .языки { border-color: rgba(255,255,255,.35); background: transparent; }
body.с-колонкой > header .языки a { color: var(--бумага); background: transparent; }
body.с-колонкой > header .языки a + a { border-left-color: rgba(255,255,255,.35); }
body.с-колонкой > header .языки a.активен { background: var(--бумага); color: var(--акцент); font-weight: 600; }
body.с-колонкой > header .бейдж { background: var(--signal-text); }
body.admin > header details.sections-narrow summary,
body.admin > header details.sections-narrow nav.меню a { color: var(--бумага); }

/* Левая колонка — пункты-плашки: активный на тинте бренда, а не тонкой чертой сбоку. */
@media (min-width: 64rem) {
  aside.боковое nav.меню { gap: .15rem; }
  aside.боковое nav.меню a {
    display: block; padding: .5rem .75rem; border-radius: var(--скругление-мелкое);
    color: var(--чернила); font-size: var(--кегль-мелкий);
  }
  aside.боковое nav.меню a:hover { background: var(--бумага); }
  aside.боковое nav.меню a.активен, aside.боковое nav.меню a.активна {
    border-left: 0; margin-left: 0; padding-left: .75rem;
    background: var(--подложка); color: var(--акцент); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--signal);
  }
  aside.боковое .menu-group { padding: .9rem .75rem .2rem; }}
/* Нижняя панель телефона: активный пункт — цветом бренда и коралловой чертой сверху. */
nav.нижняя a.активен { color: var(--акцент); font-weight: 600; box-shadow: inset 0 3px 0 var(--signal); }

/* Кнопка главного действия — сигнальным цветом (белый на --signal-text 4,9:1). */
a.кнопка.cta-signal, button.cta-signal {
  background: var(--signal-text); border-color: var(--signal-text); color: var(--бумага);
  font-weight: 600;
}

/* Главная: панель последнего дня — на глубоком зелёном, поводы — белыми карточками. */
.карточка.вердикт.home-verdict {
  background: var(--акцент); color: var(--бумага); border-radius: 18px;
  padding: 1.1rem 1.2rem 1.2rem;
}
.home-verdict .home-verdict-label { margin-top: 0; font-size: var(--кегль-подпись);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600; opacity: .85; }
.home-verdict .строка-дня { border-bottom-color: rgba(255,255,255,.22); color: var(--бумага); }
.home-verdict .строка-дня .вердикт { color: var(--бумага); font-size: var(--кегль-вердикт); }
.home-verdict .счётчики { margin: .9rem 0 .8rem; }
.home-verdict .число-счётчика { color: var(--бумага); font-size: var(--кегль-витрина); }
.home-verdict .счётчик:first-child .число-счётчика { color: var(--бумага);
  text-decoration: underline; text-decoration-color: var(--signal);
  text-decoration-thickness: .12em; text-underline-offset: .12em; }
.home-verdict .счётчик .подпись { color: var(--бумага); opacity: .85; }
.home-verdict .report-case { color: var(--чернила); border-left-color: var(--signal); }
.home-verdict .report-case .тихо { color: var(--серый); }
.home-verdict > p, .home-verdict > .тихо { color: var(--бумага); }
.home-verdict .пусто { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: var(--бумага); }
.home-verdict .пусто p { color: var(--бумага); }
.home-verdict .кнопки { margin-top: .9rem; }

/* Полоса 14 дней: одна строка из четырнадцати плиток; на телефоне — только номер дня. */
.day-strip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; margin: .5rem 0; }
.day-strip .день-плитка { min-height: 3.2rem; padding: .35rem .2rem; align-items: center;
  justify-content: center; text-align: center; border-radius: 8px; }
.day-strip .день-номер { font-size: var(--кегль-текст); }
@media (max-width: 40rem) {
  .day-strip { gap: 4px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .day-strip .день-плитка { min-height: 2.6rem; }
  .day-strip .день-счёт { display: none; }}

@media print {
  body.с-колонкой > header { background: none; color: var(--чернила); box-shadow: none; clip-path: none; }
  body.с-колонкой > header .лого, body.с-колонкой > header .знак { color: var(--акцент); }
  .карточка.вердикт.home-verdict { background: var(--бумага); color: var(--чернила); border: 1px solid var(--линия); }
  .home-verdict .строка-дня .вердикт, .home-verdict .число-счётчика,
  .home-verdict .счётчик .подпись, .home-verdict-label { color: var(--чернила); }
}

/* Тон дня — фирменной шкалой: день без находок на тинте «чисто», дальше тёплый ряд от
   песочного к коралловому и кирпичному. Прежний ряд кончался глубоким зелёным — цветом
   бренда и «чистого», и самый густой день читался как самый спокойный. */
.день-плитка--0 { background: var(--оборот-фон); border-color: var(--оборот-фон); color: var(--оборот); }
.день-плитка--1 { background: var(--вопрос-фон); border-color: var(--вопрос-фон); color: var(--чернила); }
.день-плитка--2 { background: var(--потеря-фон); border-color: var(--потеря-фон); color: var(--потеря); }
.день-плитка--3 { background: var(--signal-text); border-color: var(--signal-text); color: var(--бумага); }
.день-плитка--4 { background: var(--потеря); border-color: var(--потеря); color: var(--бумага); }

/* Лист дня: голова — зелёная панель; цифры дня белыми плитками, «сравнение с» строкой. */
.day-head .report-strip { display: grid; gap: 6px; margin: .8rem 0 .4rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.day-head .report-figure { background: var(--бумага); color: var(--чернила); border-radius: 12px;
  padding: .55rem .7rem; display: flex; flex-direction: column; gap: .1rem; }
.day-head .report-figure b { font-size: var(--кегль-вердикт); line-height: 1.15; }
.day-head .report-strip > .тихо { grid-column: 1 / -1; color: var(--бумага); opacity: .85; }
.day-head p.тихо, .day-head .чипы { color: var(--бумага); opacity: .9; }
.day-head .чип { background: transparent; color: var(--бумага); border-color: rgba(255,255,255,.4); }
.day-head .чип.активен { background: var(--бумага); color: var(--акцент); }
/* Кнопка на зелёном — белая с текстом бренда: заливка бренда там сливается с фоном. */
a.кнопка.on-dark, button.on-dark { background: var(--бумага); color: var(--акцент);
  border-color: var(--бумага); font-weight: 600; }
/* Итог дня одной фразой — выноской с коралловой чертой; поводы — карточками покрупнее. */
p.report-summary { background: var(--бумага); border: 1px solid var(--линия);
  border-left: 4px solid var(--signal); border-radius: var(--скругление); padding: .7rem 1rem;
  max-width: none; }
.report-case { border-left-color: var(--signal); }
.report-case-sum { font-size: var(--кегль-вердикт); color: var(--signal-text); }
.report-case--carried .report-case-sum { color: var(--чернила); }
@media print {
  .day-head .report-strip > .тихо, .day-head p.тихо, .day-head .чипы { color: var(--серый); }
  .day-head .report-figure { border: 1px solid var(--линия); }
}

/* Вход, приглашение, ошибка (М-845 этап 2, макет «вход»): страница на глубоком зелёном,
   над формой — логотип в инверсии, форма — белая карточка. Логотип ставит CSS, а не
   разметка: три скелета без шапки получают его одним правилом. */
body.по-центру { background: var(--акцент); color: var(--бумага); }
body.по-центру::before {
  content: ""; display: block; width: 12rem; height: 3.2rem; margin-bottom: .6rem;
  background: url("/static/brand/ayanbi-logo-inverse.svg") no-repeat center / contain;
}
body.по-центру > form.карточка, body.по-центру > .карточка, body.по-центру > section {
  background: var(--бумага); color: var(--чернила); border: 0; border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); width: min(24rem, 100%); padding: 1.3rem 1.4rem;
}
body.по-центру > form.карточка h1 { margin-top: .2rem; }
body.по-центру > form.запасной { box-shadow: none; background: rgba(255,255,255,.1);
  color: var(--бумага); }
body.по-центру > form.запасной label { color: var(--бумага); }
body.по-центру > form.запасной button { background: var(--бумага); color: var(--акцент); border-color: var(--бумага); }
body.по-центру button.главная, body.по-центру input[type="submit"] {
  background: var(--signal-text); border-color: var(--signal-text); color: var(--бумага); }
body.по-центру > p, body.по-центру > p a, body.по-центру > a { color: var(--бумага); }

/* Свод недели и месяца: голова — зелёной панелью; кольцо — на белой плитке (его штрихи
   рисуются цветами ролей и на зелёном пропали бы); показатели — плитками. */
.home-verdict figure.фигура { background: var(--бумага); color: var(--чернила); border-radius: 16px;
  padding: .5rem .8rem; margin: 0; display: flex; align-items: center; gap: .6rem; }
.home-verdict figure.фигура .подпись { color: var(--серый); }
.period-head .тревога { color: var(--бумага); background: rgba(255,255,255,.12);
  border-radius: var(--скругление-мелкое); padding: .4rem .6rem; }
.плитки-показателей { display: grid; gap: .6rem; margin: .6rem 0 .8rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.плитка-показателя { background: var(--бумага); border: 1px solid var(--линия);
  border-radius: var(--скругление); padding: .7rem .85rem;
  display: flex; flex-direction: column; gap: .2rem; }
.плитка-показателя .сумма-крупно { font-size: var(--кегль-вердикт); }
ul.моменты { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
ul.моменты li { background: var(--подложка); color: var(--акцент); border-radius: 999px;
  padding: .3rem .8rem; font-size: var(--кегль-мелкий); }

/* Первый запуск (М-845 этап 2): шаги — степпером с кружками и линией между ними. */
ol.onboarding-steps { list-style: none; padding: 0; margin: 1rem 0; }
.onboarding-step { display: flex; gap: .8rem; position: relative; padding-bottom: 1rem; }
.onboarding-step:not(:last-child)::after { content: ""; position: absolute; left: 1rem; top: 2.1rem;
  bottom: .1rem; width: 2px; background: var(--линия); }
.onboarding-step-dot { flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
  background: var(--бумага); border: 2px solid var(--линия); color: var(--серый); }
.onboarding-step--active .onboarding-step-dot { border-color: var(--signal-text); color: var(--signal-text); }
.onboarding-step--done .onboarding-step-dot { background: var(--акцент); border-color: var(--акцент); color: var(--бумага); }
.onboarding-step-body { flex: 1; min-width: 0; padding-top: .2rem; }
.onboarding-step-state { font-size: var(--кегль-подпись); border-radius: 999px; padding: .05rem .55rem;
  margin-left: .3rem; background: var(--неизвестно-фон); color: var(--неизвестно); white-space: nowrap; }
.onboarding-step--active .onboarding-step-state { background: var(--вопрос-фон); color: var(--вопрос); }
.onboarding-step--done .onboarding-step-state { background: var(--оборот-фон); color: var(--оборот); }

/* Наша админка «Сервис сегодня» (М-845 этап 2): плитки — белыми карточками с крупным
   числом; плитка с тревогой — коралловой чертой сверху, число — цветом потери. */
body.admin .плитки { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
body.admin .плитка { background: var(--бумага); border: 1px solid var(--линия); border-radius: var(--скругление);
  padding: .7rem .85rem; display: flex; flex-direction: column; gap: .2rem; border-top: 3px solid var(--линия); }
body.admin .плитка .значение { font-size: var(--кегль-вердикт); font-weight: 700; }
body.admin .плитка:has(.тревога) { border-top-color: var(--signal); }

/* ── 22. Сверка с макетами 09.10 (`Платформа/design/mockups/`, М-845) ──────────────────
   ДЕСКТОП: зелёная колонка разделов во всю высоту окна со знаком в голове; шапка над
   содержимым светлая — имя точки, колокольчик, аватар. ТЕЛЕФОН: зелёная полоса сверху и
   нижняя панель, как было (§21). */
.sidebar-logo { display: none; }
@media (min-width: 64rem) {
  body.с-колонкой { padding-left: 15rem; }
  body.с-колонкой .каркас { display: block; }
  aside.боковое { position: fixed; left: 0; top: 0; bottom: 0; width: 15rem; z-index: 6;
    background: var(--акцент); padding: 1.1rem 1rem; overflow-y: auto; }
  .sidebar-logo { display: block; height: 2.4rem; margin: 0 .25rem 1.3rem;
    background: url("/static/brand/ayanbi-logo-inverse.svg") no-repeat left center / contain; }
  aside.боковое nav.меню a { color: var(--бумага); opacity: .88; padding: .6rem .8rem;
    border-radius: 10px; font-size: var(--кегль-текст); }
  aside.боковое nav.меню a:hover { background: rgba(255,255,255,.08); opacity: 1; }
  aside.боковое nav.меню a.активен, aside.боковое nav.меню a.активна {
    background: rgba(255,255,255,.12); color: var(--бумага); opacity: 1; box-shadow: none; font-weight: 600; }
  aside.боковое .menu-group { color: var(--бумага); opacity: .6; }
  /* Шапка на десктопе — светлая строка над содержимым, без полосы. */
  body.с-колонкой > header { background: transparent; color: var(--чернила); box-shadow: none;
    clip-path: none; margin-bottom: 0; }
  body.с-колонкой > header .лого, body.с-колонкой > header .крошки,
  body.с-колонкой > header .крошки a, body.с-колонкой > header .человек,
  body.с-колонкой > header .человек a { color: var(--серый); }
  body.с-колонкой > header .лого { font-size: var(--кегль-мелкий); font-weight: 400; }
  body.с-колонкой > header .лого svg { display: none; }
  body.с-колонкой > header .крошки span { color: var(--чернила); }
  body.с-колонкой > header .колокол .значок { color: var(--чернила); }
  body.с-колонкой > header .колокол { border: 1px solid var(--линия); border-radius: 12px;
    background: var(--бумага); min-width: 44px; }
  body.с-колонкой > header .аватар span { background: var(--подложка); color: var(--акцент); border-color: var(--подложка);
    width: 2.6rem; height: 2.6rem; }
  body.с-колонкой > header .языки { border-color: var(--линия); }
  body.с-колонкой > header .языки a { color: var(--серый); }
  body.с-колонкой > header .языки a + a { border-left-color: var(--линия); }
  body.с-колонкой > header .языки a.активен { background: var(--акцент); color: var(--бумага); }}
@media print { aside.боковое { display: none !important; } body.с-колонкой { padding-left: 0; } }

/* Вход по макету: зелёная голова во всю ширину со знаком и фразой; форма — без карточки,
   на светлом поле; «Войти» — заливкой бренда. Приглашение и ошибка остаются на зелёном. */
body.по-центру.login-page { background: var(--фон); color: var(--чернила);
  justify-content: flex-start; padding: 0 0 2rem; }
body.по-центру.login-page::before { display: none; }
.login-hero { align-self: stretch; background: var(--акцент); color: var(--бумага);
  padding: 2.4rem 1.5rem 2rem; position: relative; overflow: hidden; }
.login-hero::after { content: ""; position: absolute; right: -1rem; top: 1.6rem; width: 7rem;
  height: 1.3rem; border-radius: 1rem; background: var(--signal); opacity: .85; }
.login-logo { display: block; width: 9rem; height: 2.4rem; margin-bottom: 1.4rem;
  background: url("/static/brand/ayanbi-logo-inverse.svg") no-repeat left center / contain; }
.login-slogan { font-size: var(--кегль-вердикт); font-weight: 700; line-height: 1.25;
  margin: 0; max-width: 22rem; color: var(--бумага); }
@media (min-width: 40rem) {
  .login-hero { padding: 3rem calc(50% - 12rem) 2.4rem; }}
body.login-page > form.карточка { background: transparent; box-shadow: none; border: 0;
  padding: 1.4rem 1.5rem 0; margin-top: .4rem; }
body.login-page > form.карточка h1 { font-size: var(--кегль-вердикт); }
body.login-page button.главная, body.login-page input[type="submit"] {
  background: var(--акцент); border-color: var(--акцент); color: var(--бумага); min-height: 3rem; }
body.login-page > form.запасной { background: var(--бумага); color: var(--чернила);
  border: 1px solid var(--линия); padding: 1rem 1.2rem; }
body.login-page > form.запасной label { color: var(--чернила); }
body.login-page > form.запасной button { background: var(--подложка); color: var(--акцент); border-color: var(--подложка); }

/* Главная по макету: в голове панели — день и кнопка главного действия справа; ниже —
   плитки видов сумм белым (тинт «под вопросом» — песочный, как в макете); счётчики мельче. */
.verdict-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  flex-wrap: wrap; padding: .2rem 0 .9rem; }
.verdict-top .вердикт { font-size: var(--кегль-вердикт); font-weight: 700; color: var(--бумага); }
.verdict-top a.кнопка { margin: 0; }
.nature-tiles { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: .9rem; }
.nature-tile { background: var(--бумага); color: var(--чернила); border-radius: 14px; padding: .8rem 1rem;
  display: flex; flex-direction: column; gap: .3rem; border: 2px solid var(--бумага); }
.nature-tile-name { font-size: var(--кегль-подпись); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.nature-tile-name::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.nature-tile-sum { font-size: var(--кегль-экран); font-weight: 700; line-height: 1.1; }
.nature-tile--confirmed_loss .nature-tile-name { color: var(--потеря); }
.nature-tile--in_question { background: var(--вопрос-фон); border-color: var(--вопрос); }
.nature-tile--in_question .nature-tile-name { color: var(--вопрос); }
.nature-tile--estimate .nature-tile-name { color: var(--оценка); }
.nature-tile--turnover_to_check .nature-tile-name { color: var(--оборот); }
.home-verdict .счётчики { margin: .2rem 0 .6rem; }
.home-verdict .число-счётчика { font-size: var(--кегль-экран); }
@media (max-width: 40rem) {
  .verdict-top a.кнопка { order: 3; width: 100%; justify-content: center; }
  .nature-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

/* Полоса 14 дней по макету: светлые плитки с цветной чертой снизу, номер мелко. */
.day-strip .день-плитка { background: var(--оборот-фон); border: 0; border-bottom: 4px solid var(--оборот);
  color: var(--чернила); border-radius: 8px 8px 4px 4px; }
.day-strip .день-плитка--1 { background: var(--вопрос-фон); border-bottom-color: var(--вопрос); }
.day-strip .день-плитка--2 { background: var(--вопрос-фон); border-bottom-color: var(--вопрос); }
.day-strip .день-плитка--3 { background: var(--потеря-фон); border-bottom-color: var(--потеря); }
.day-strip .день-плитка--4 { background: var(--потеря-фон); border-bottom-color: var(--потеря); }
.day-strip .день-номер { font-size: var(--кегль-мелкий); font-weight: 600; }
.day-strip .день-счёт { font-size: var(--кегль-подпись); color: var(--серый); }

/* Лист дня и свод по макету — голова СВЕТЛАЯ (зелёная панель только у главной). */
.day-head .report-strip > .тихо, .day-head p.тихо, .day-head .чипы { color: var(--серый); opacity: 1; }
.day-head .чип { color: var(--акцент); border-color: var(--линия); background: var(--бумага); }
.day-head .чип.активен { background: var(--акцент); color: var(--бумага); }
.day-head .report-figure { border: 1px solid var(--линия); }
.day-head .строка-дня .вердикт { font-size: var(--кегль-экран); font-weight: 700; }
.period-head .тревога { color: var(--потеря); background: var(--потеря-фон); }
.nature-chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px;
  padding: .1rem .6rem; font-size: var(--кегль-мелкий); font-weight: 600;
  background: var(--неизвестно-фон); color: var(--неизвестно); }
.nature-chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.nature-chip--in_question { background: var(--вопрос-фон); color: var(--вопрос); }
.nature-chip--confirmed_loss { background: var(--потеря-фон); color: var(--потеря); }
.nature-chip--estimate { background: var(--оценка-фон); color: var(--оценка); }
.nature-chip--turnover_to_check { background: var(--оборот-фон); color: var(--оборот); }
.report-case { border: 0; border-radius: 16px; box-shadow: 0 1px 3px rgba(16,32,28,.08); padding: 1rem 1.1rem; }
.report-case-sum { font-size: var(--кегль-экран); color: var(--чернила); }
.report-case-head { flex-direction: column; align-items: flex-start; gap: .2rem; }

/* Первый запуск по макету: полоса прогресса из сегментов, шаги — белыми карточками;
   принятый — галка в зелёном тинте, идущий — рамка бренда. */
.onboarding-progress { display: flex; gap: 5px; margin: .8rem 0 .4rem; }
.onboarding-progress-seg { flex: 1; height: 6px; border-radius: 3px; background: var(--линия); }
.onboarding-progress-seg--done { background: var(--акцент); }
.onboarding-progress-seg--active { background: var(--signal); }
.onboarding-step { background: var(--бумага); border: 1px solid var(--линия); border-radius: 16px;
  padding: .8rem 1rem; margin-bottom: .55rem; align-items: flex-start; }
.onboarding-step:not(:last-child)::after { display: none; }
.onboarding-step--active { border: 2px solid var(--акцент); }
.onboarding-step--active .onboarding-step-dot { background: var(--акцент); border-color: var(--акцент); color: var(--бумага); }
.onboarding-step--done .onboarding-step-dot { background: var(--оборот-фон); border-color: var(--оборот-фон); color: transparent; position: relative; }
.onboarding-step--done .onboarding-step-dot::after { content: "✓"; color: var(--оборот); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; }
.onboarding-step--done .onboarding-step-body .тихо { display: none; }

/* Админка по макету: тревожная плитка — тинт потери с рамкой. */
body.admin .плитка:has(.тревога) { background: var(--потеря-фон); border: 2px solid var(--потеря); }
body.admin .плитка:has(.тревога) .подпись, body.admin .плитка .тревога { color: var(--потеря); }
.nature-tiles { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.nature-tile .природа { border: 0; padding: 0; background: none; text-transform: none; letter-spacing: 0; }
.home-verdict .report-case-sum { font-size: var(--кегль-вердикт); }
.home-verdict .report-case-head { flex-direction: row; justify-content: space-between; align-items: baseline; }
.nature-chip.природа { border: 0; padding: .1rem .6rem; font-size: var(--кегль-мелкий); }

/* Первая строка главной — ответ крупно, точка и день — строкой над ним. */
.home-kicker { color: var(--серый); font-size: var(--кегль-мелкий); margin: 1rem 0 .1rem; }
h1.home-answer { font-size: var(--кегль-экран); font-weight: 700; line-height: 1.15; margin: 0 0 1rem; max-width: 40rem; }
@media (min-width: 48rem) { h1.home-answer { font-size: var(--кегль-крупно); } }

/* Свод: вкладки «неделя / месяц» во всю ширину, как в макете. */
nav.period-switch { display: flex; width: 100%; max-width: 30rem; background: var(--подложка); border: 0; padding: 4px; border-radius: 14px; }
nav.period-switch a { flex: 1; justify-content: center; border-radius: 10px; }
nav.period-switch a + a { border-left: 0; }
nav.period-switch a.активен { background: var(--бумага); color: var(--акцент); box-shadow: 0 1px 3px rgba(16,32,28,.12); }

/* Карточка повода (макет «карточка находки»): на десктопе — две колонки, справа история. */
a.case-link { color: inherit; text-decoration: none; }
a.case-link:hover { text-decoration: underline; text-decoration-color: var(--signal); }
.case-layout { display: grid; gap: 1.2rem; margin-top: .8rem; }
@media (min-width: 64rem) { .case-layout { grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); align-items: start; } }
.case-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.case-chip { border-radius: 999px; padding: .15rem .65rem; font-size: var(--кегль-подпись); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; background: var(--подложка); color: var(--акцент); }
.case-chip--new { background: var(--вопрос-фон); color: var(--вопрос); }
.case-chip--today { background: var(--signal-text); color: var(--бумага); }
.case-chip--check { background: var(--подложка); color: var(--акцент); }
.case-chip--info { background: var(--неизвестно-фон); color: var(--неизвестно); }
.case-chip--first { background: var(--оборот-фон); color: var(--оборот); }
.case-chip--age { background: var(--вопрос); color: var(--бумага); text-transform: none; letter-spacing: 0; }
h1.case-title { font-size: var(--кегль-экран); font-weight: 700; line-height: 1.2; margin: .6rem 0 .4rem; }
.case-sum { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; }
.case-sum-value { font-size: var(--кегль-крупно); font-weight: 700; line-height: 1; }
.case-chart svg { width: 100%; height: auto; max-height: 12rem; }
.case-facts { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: .8rem 0; }
.case-fact { background: var(--бумага); border-radius: 16px; padding: .9rem 1rem; box-shadow: 0 1px 3px rgba(16,32,28,.08); }
.case-fact-head { font-size: var(--кегль-подпись); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--серый); }
.case-fact p { margin: .3rem 0 0; }
.case-history-row { padding: .3rem 0; font-size: var(--кегль-мелкий); }
.case-mark-buttons { display: grid; gap: .5rem; }
.case-mark-buttons button { width: 100%; min-height: 2.8rem; margin: 0; }
.case-mark-buttons button.case-mark-outline { background: var(--бумага); color: var(--акцент); border: 1.5px solid var(--акцент); }
.case-mark-buttons button.выбрано { box-shadow: 0 0 0 3px var(--signal); }

/* «Сегодня» (макет 09.10): пульсирующая точка среза, выручка крупно, столбики часов. */
.live-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .4rem 0 .4rem; }
.live-head h2 { margin: 0; }
.live-dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--signal); align-self: center;
  box-shadow: 0 0 0 0 var(--signal); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(228,87,61,.5); } 70% { box-shadow: 0 0 0 .5rem rgba(228,87,61,0); } 100% { box-shadow: 0 0 0 0 rgba(228,87,61,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.live-card { border: 0; border-radius: 18px; box-shadow: 0 1px 3px rgba(16,32,28,.08); }
.live-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.live-sum { font-size: var(--кегль-крупно); font-weight: 700; line-height: 1.05; }
.live-card svg { width: 100%; height: auto; max-height: 11rem; margin-top: .6rem; }

/* ЗАДАЧИ ПО ПОВОДАМ (#67): состояние задачи чипом, строка списка карточкой-ссылкой,
   просроченная — полосой потери слева. */
.task-state { border-radius: 999px; padding: .15rem .65rem; font-size: var(--кегль-подпись); font-weight: 700;
  background: var(--подложка); color: var(--акцент); }
.task-state--assigned { background: var(--вопрос-фон); color: var(--вопрос); }
.task-state--returned { background: var(--потеря-фон); color: var(--потеря); }
.task-state--reported { background: var(--оценка-фон); color: var(--оценка); }
.task-state--done { background: var(--оборот-фон); color: var(--оборот); }
.tasks-filters { flex-wrap: wrap; margin: var(--шаг) 0; }
.tasks-list { display: grid; gap: var(--шаг); }
.task-row { display: grid; gap: .3rem; color: var(--чернила); text-decoration: none; }
.task-row--overdue { border-left: 4px solid var(--потеря); }
.task-row-top, .task-row-meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.task-row-title { font-size: var(--кегль-текст); }
.tasks-funnel .счётчики { margin-bottom: var(--шаг); }

/* БЛОК ЗАДАЧИ (#67, 24.10): статус, ход по шагам, цепочка передачи, отчёт. */
.task-widget { display: grid; gap: .45rem; padding: .6rem .75rem; border: 1px solid var(--линия);
  border-radius: var(--скругление-мелкое); background: var(--бумага); margin-top: var(--шаг); }
.task-widget--overdue { border-left: 4px solid var(--потеря); }
.task-widget-top { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.task-widget-open { margin-left: auto; font-size: var(--кегль-мелкий); }
.task-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; list-style: none;
  margin: 0; padding: 0; font-size: var(--кегль-подпись); }
.task-step { padding-top: 6px; border-top: 4px solid var(--линия); color: var(--серый); }
.task-step--done { border-top-color: var(--оборот); color: var(--чернила); }
.task-step--current { border-top-color: var(--акцент); color: var(--акцент); font-weight: 700; }
.task-chain { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; font-size: var(--кегль-мелкий); }
.task-chain-head { color: var(--серый); }
.task-chain-arrow { color: var(--серый); }
.task-chain-person--current { font-weight: 700; }
.task-report { font-size: var(--кегль-мелкий); }
.task-report p { margin: .25rem 0 0; }
.task-outcome { font-weight: 700; }
.task-outcome--confirmed { color: var(--потеря); }
.task-outcome--accounting_error { color: var(--вопрос); }
.task-outcome--not_confirmed { color: var(--оборот); }

/* ГРАФИКА ЗАДАЧ, ред. 2 (#67, слово Игоря 24.10: «скучно и интуитивно не очень понятно»). */
/* Ход задачи — четыре кружка на линии: пройденные с галочкой, текущий — кольцом. */
.task-stepper { list-style: none; margin: .2rem 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.task-stepper-step { position: relative; display: grid; justify-items: center; gap: .25rem; text-align: center;
  font-size: var(--кегль-подпись); color: var(--серый); }
.task-stepper-step::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 3px;
  background: var(--линия); z-index: 0; }
.task-stepper-step:first-child::before { display: none; }
.task-stepper-step.is-done::before, .task-stepper-step.is-current::before { background: var(--оборот); }
.task-stepper-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 999px; background: var(--бумага); border: 3px solid var(--линия); font-weight: 700; }
.task-stepper-step.is-done .task-stepper-dot { background: var(--оборот); border-color: var(--оборот); color: var(--бумага); }
.task-stepper-step.is-current .task-stepper-dot { border-color: var(--акцент); color: var(--акцент);
  box-shadow: 0 0 0 4px var(--подложка); }
.task-stepper-step.is-current { color: var(--акцент); font-weight: 700; }
.task-stepper-step.is-returned .task-stepper-dot { border-color: var(--потеря); color: var(--потеря);
  box-shadow: 0 0 0 4px var(--потеря-фон); }

/* Цепочка передачи — люди кружками с инициалами, стрелки между ними; у кого задача — кольцо. */
.task-people { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .35rem .5rem; margin: .3rem 0; }
.task-people-arrow { align-self: center; margin-top: -1.4rem; color: var(--серый); font-size: 1.2rem; }
.task-person { display: grid; justify-items: center; gap: .1rem; min-width: 4.5rem; max-width: 7rem; text-align: center; }
.task-person-face { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  background: var(--подложка); color: var(--акцент); font-weight: 700; }
.task-person.is-creator .task-person-face { background: var(--оценка-фон); color: var(--оценка); }
.task-person.is-holder .task-person-face { background: var(--акцент); color: var(--бумага); box-shadow: 0 0 0 4px var(--signal); }
.task-person-name { font-size: var(--кегль-мелкий); font-weight: 600; }
.task-person-role, .task-person-tag { font-size: var(--кегль-подпись); color: var(--серый); }
.task-person-tag--now { color: var(--signal-text); font-weight: 700; }

/* Отчёт — «реплика» исполнителя с кружком и итогом цветом. */
.task-bubble { border-radius: var(--скругление); padding: .55rem .75rem; background: var(--неизвестно-фон);
  font-size: var(--кегль-мелкий); }
.task-bubble--confirmed { background: var(--потеря-фон); }
.task-bubble--accounting_error { background: var(--вопрос-фон); }
.task-bubble--not_confirmed { background: var(--оборот-фон); }
.task-bubble-head { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.task-bubble-face { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: var(--бумага); font-size: var(--кегль-подпись); font-weight: 700; }
.task-bubble p { margin: .3rem 0 0; }
.task-late { color: var(--потеря); font-weight: 700; font-size: var(--кегль-мелкий); }
.task-returned { color: var(--потеря); font-size: var(--кегль-мелкий); }

/* Доска — четыре колонки хода; на телефоне листается вбок внутри себя. */
.task-board { display: grid; grid-template-columns: repeat(4, minmax(11rem, 1fr)); gap: .6rem; overflow-x: auto;
  padding-bottom: .3rem; margin: .5rem 0; }
.task-column { background: var(--фон); border-radius: var(--скругление); padding: .5rem; min-height: 6rem; }
.task-column-head { margin: 0 0 .4rem; font-size: var(--кегль-мелкий); display: flex; justify-content: space-between; }
.task-column-count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; border-radius: 999px;
  background: var(--бумага); font-size: var(--кегль-подпись); }
.task-column--assigned .task-column-head { color: var(--вопрос); }
.task-column--in_work .task-column-head { color: var(--акцент); }
.task-column--reported .task-column-head { color: var(--оценка); }
.task-column--done .task-column-head { color: var(--оборот); }
.task-card { display: grid; gap: .3rem; background: var(--бумага); border: 1px solid var(--линия); border-radius: var(--скругление-мелкое);
  padding: .5rem .6rem; margin-bottom: .45rem; color: var(--чернила); text-decoration: none; font-size: var(--кегль-мелкий); }
.task-card:hover { border-color: var(--акцент); }
.task-card--overdue, .task-card--returned { border-left: 4px solid var(--потеря); }
.task-card-title { font-weight: 600; }
.task-card-foot { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.task-card-face { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: var(--акцент); color: var(--бумага); font-size: var(--кегль-подпись); font-weight: 700; }
.task-card-holder { color: var(--серый); }
.task-column-empty { color: var(--серый); text-align: center; margin: .5rem 0; }
.tasks-details { margin-top: .8rem; }
@media (max-width: 640px) { .task-board { grid-template-columns: 1fr; overflow-x: visible; }
  .task-column { min-height: 0; } .task-column--empty { display: none; } }
.tasks-funnel svg.график { max-width: 34rem; }
.tasks-funnel svg.график + svg.график { max-width: 40rem; margin-top: .6rem; }
/* Цепочка на телефоне — столбиком со стрелками вниз (слово Игоря 24.10): в строку три
   человека не помещаются, и стрелка оставалась смотреть в пустоту. */
@media (max-width: 640px) {
  .task-people { flex-direction: column; align-items: stretch; gap: .2rem; }
  .task-people-arrow { align-self: flex-start; margin: 0 0 0 .75rem; transform: rotate(90deg); }
  .task-person { display: grid; grid-template-columns: 40px 1fr; column-gap: .6rem; row-gap: 0;
    justify-items: start; text-align: left; max-width: none; min-width: 0; }
  .task-person-face { grid-row: span 3; }
}