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: 66rem) {

  /* Шире делается ТОЛЬКО кабинет с колонкой: у админки своя шапка и колонки нет,
     и растягивать её текст на 66rem не за чем. */
  body.с-колонкой header, body.с-колонкой footer, body.с-колонкой .каркас {
    max-width: var(--каркас);
  }
  body.с-колонкой .каркас {
    display: grid; grid-template-columns: var(--колонка-меню) minmax(0, 1fr);
    gap: 2rem; align-items: start;
  }
  aside.боковое { display: block; position: sticky; top: .75rem; }
  nav.нижняя { display: none; }}

.в-строку { 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(--потеря); }

.чипы { 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`, `svodka.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; }