/* ─── Экран «Ещё»: сводка по работе системы ──────────────────────────────
   Владелец файла — more.js. Пороги отбора оформляются в thresholds.css.

   Ни одного нового цвета и ни одного нового размера шрифта: всё из
   tokens.css. Экран должен читаться как ещё один раздел приложения, а не как
   админка, случайно оказавшаяся внутри — а «своя» палитра выдаёт чужой экран
   мгновенно, даже когда все цвета по отдельности приличные.

   ШИРИНА. `#screen-more` и `#more` не входят в список элементов, которые
   layout.css центрует на широком экране (там перечислены части ленты).
   Поэтому контейнер `.more` центрует себя сам — теми же `--content-max` и
   правилом, что и лента, чтобы на десктопе разделы не разъезжались по ширине.
   ──────────────────────────────────────────────────────────────────────── */

.more {
  padding: 10px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.more-summary { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Контейнеры чужих модулей (пороги, «Требуют проверки», «Мои анализы»)
   вставляются ВСЕГДА, а наполняются только когда модуль есть и его раздел
   включён. Пустой контейнер обязан исчезнуть: расстояния внутри `.more`
   задаёт `gap`, и пустой блок добавил бы полосу воздуха ниоткуда — на экране
   это читается как «что-то не загрузилось». */
.more > div:empty { display: none; }

/* Карточка раздела — та же геометрия, что у карточки лота в ленте (радиус,
   тень, подложка): взгляд не должен спотыкаться на переходе между экранами. */
.more-card {
  background: var(--bg);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.more-card .card-head {
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.more-card h3 {
  margin: 0; font-size: var(--fs-ui); font-weight: 600; letter-spacing: -.01em;
}
.more-card .card-aside {
  margin-left: auto; font-size: var(--fs-small); color: var(--ink-soft);
}
.more-card .card-note {
  margin: 0; font-size: var(--fs-small); color: var(--ink-soft);
}
/* ГОЧА: модификаторы называются `is-warn`/`is-danger`, а не `warn`/`danger`.
   В detail.css есть НЕОГРАНИЧЕННОЕ правило `.warn { padding; border-left;
   background; … }` для плашки расхождения площадей — оно применяется к любому
   элементу с этим классом на любом экране. Живая проверка 04.08: подписи
   «7 сбоев» в расходе получали от него рамку и подложку, а заливка шкалы при
   ≥70 % превратилась бы в плашку с отступами. Тот файл вне границ задачи, и
   переименовать своё дешевле, чем ограничивать чужое. */
.more-card .card-note.is-warn { color: var(--warn); }

/* Ссылка-кнопка («Ещё 18 причин», «Попробовать снова»): не главное действие,
   поэтому без заливки — иначе спорит с кнопками лота. */
.more .link-btn {
  align-self: flex-start;
  border: 0; background: none; padding: 2px 0;
  color: var(--accent); font: inherit; font-size: var(--fs-small); font-weight: 500;
  cursor: pointer;
}

/* ─── состояние прогона ─────────────────────────────────────────────────── */

/* Состояние — словами, цвет лишь усиливает. Точка слева читается как
   индикатор, но одна она ничего не значит: рядом всегда стоит фраза
   («упал на стадии “сбор лотов”»), и в чёрно-белом виде смысл не теряется. */
.run-state {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -.01em;
}
.run-state .dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  margin-top: 5px; background: var(--ink-soft);
}
.run-state.tone-ok .dot { background: var(--ok); }
.run-state.tone-warn .dot { background: var(--warn); }
.run-state.tone-danger .dot { background: var(--danger); }
.run-state.tone-run .dot { background: var(--accent); }
.run-state.tone-idle .dot { background: var(--line); }
.run-state.tone-danger b { color: var(--danger); }

.run .run-sub, .run .run-split, .run .run-last {
  margin: 0; font-size: var(--fs-small); color: var(--ink-soft);
}
.run .run-last { padding-top: var(--sp-1); }
.run .run-last-day { color: var(--ink); font-weight: 500; }

/* Четыре числа дня. Ряд из четырёх на телефоне: 390 px делится на четыре
   колонки по ~88 px, а четырёхзначное число занимает ~52 px — влезает без
   переносов. Разделители-линии вместо рамок, как и везде в приложении. */
.kpi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border-radius: var(--r-sm);
  padding: var(--sp-2) 0;
}
.kpi-cell {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 0 var(--sp-1);
  border-left: 1px solid var(--line);
}
.kpi-cell:first-child { border-left: 0; }
/* Крупное число — пропорциональными цифрами: `tabular-nums` даёт каждой цифре
   ширину нуля, и «37» на этом кегле выглядит разреженным. Ровнять тут нечего:
   числа стоят в ряд, а не в столбец. */
.kpi .k-val { font-size: var(--fs-title); font-weight: 600; letter-spacing: -.02em; }
.kpi .k-lab { font-size: var(--fs-meta); color: var(--ink-soft); text-align: center; }

/* ─── сбой ──────────────────────────────────────────────────────────────── */

/* Ради этого блока экран и заказан: «почему не работал». Поэтому он не
   прячется под раскрытие целиком — видно сразу, что и когда сломалось, а под
   раскрытие уходит только traceback. */
.err {
  background: var(--danger-soft); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.err-when { font-size: var(--fs-meta); color: var(--ink-soft); }
.err-hint { font-size: var(--fs-body); line-height: 1.4; }
.err-sum {
  font-size: var(--fs-small); color: var(--ink-soft);
  word-break: break-word;
}
.err-more summary {
  font-size: var(--fs-small); color: var(--accent); cursor: pointer;
  list-style: none;
}
.err-more summary::-webkit-details-marker { display: none; }
.err-more pre {
  margin: var(--sp-1) 0 0;
  /* Traceback длинный и с отступами — читаем его только прокруткой вбок:
     перенос строк ломает выравнивание и делает его нечитаемым, а страница из-за
     него начинала бы ездить горизонтально целиком. */
  overflow-x: auto;
  font-size: var(--fs-caption); line-height: 1.45;
  color: var(--ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ─── причины отсева ────────────────────────────────────────────────────── */

.reasons { list-style: none; margin: 0; padding: 0; }
/* Строка-полоса: длина заливки = доля причины. Один цвет на все строки —
   это одна величина, а разные цвета выдумали бы категории, которых нет. */
.r-row {
  position: relative; z-index: 0;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 5px var(--sp-2);
  font-size: var(--fs-small); line-height: 1.35;
}
.r-bar {
  position: absolute; z-index: -1; left: 0; top: 2px; bottom: 2px;
  background: var(--accent-soft);
  /* Скруглён только «конец данных» — начало прижато к базовой линии слева. */
  border-radius: 0 4px 4px 0;
}
.r-lab { min-width: 0; flex: 1; }
.r-n {
  flex: none; font-weight: 600;
  /* Здесь наоборот — числа стоят столбцом у правого края, и без табличных
     цифр край «дышит». */
  font-variant-numeric: tabular-nums;
}

/* ─── расход внешних вызовов ────────────────────────────────────────────── */

.sp-row { display: flex; flex-direction: column; gap: 3px; }
.sp-top { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-small); }
.sp-lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-n {
  margin-left: auto; flex: none; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.sp-note { font-size: var(--fs-meta); color: var(--ink-soft); }
.sp-note.is-warn { color: var(--warn); }

/* Шкала «сколько израсходовано из лимита». Дорожка — бледный шаг того же
   акцента, что и заливка: состояние читается по всей длине полосы, а не
   только по её началу. */
.meter {
  height: 6px; border-radius: 3px; background: var(--accent-tint); overflow: hidden;
}
.meter i {
  display: block; height: 100%; border-radius: 3px;
  background: var(--accent);
}
.meter i.is-warn { background: var(--warn); }
.meter i.is-danger { background: var(--danger); }

/* ─── лента событий ─────────────────────────────────────────────────────── */

.events { list-style: none; margin: 0; padding: 0; }
.ev + .ev { border-top: 1px solid var(--line); }
.ev-head {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0; border: 0; background: none;
  font: inherit; font-size: var(--fs-small); color: var(--ink);
  text-align: left; cursor: pointer;
}
.ev-head .dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft);
}
.ev.tone-ok .dot { background: var(--ok); }
.ev.tone-warn .dot { background: var(--warn); }
.ev.tone-danger .dot { background: var(--danger); }
.ev.tone-run .dot { background: var(--accent); }
.ev-day { flex: none; font-weight: 600; }
.ev-txt {
  min-width: 0; flex: 1; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Восклицательный знак у сбойного дня: значок + цвет, а не цвет один. */
.ev-flag {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); color: var(--on-accent);
  font-size: var(--fs-caption); font-weight: 700; line-height: 16px; text-align: center;
}
/* Стрелка-раскрытие рисуется рамкой, а не символом: у «›» и «▸» в системных
   шрифтах разный вертикальный центр, и значок плясал по строкам. */
.ev-chev {
  flex: none; width: 7px; height: 7px; margin-right: 2px;
  border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(-45deg); transition: transform var(--fast) ease;
}
.ev-head[aria-expanded="true"] .ev-chev { transform: rotate(45deg); margin-bottom: 4px; }
.ev-body { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-3); }

/* ─── аккаунт ───────────────────────────────────────────────────────────── */

.more .who { margin: 0; font-size: var(--fs-ui); font-weight: 500; }
.more-switch {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); cursor: pointer;
}
.more-switch input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

/* Кнопки действия в карточке настроек (04.09): та же пилюля, что у задач,
   чтобы «Включить уведомления» и «Сохранить задачу» читались одной семьёй. */
.more-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.more-btn {
  border: 0; border-radius: var(--r-pill); padding: 10px 18px;
  background: var(--accent); color: var(--on-accent);
  font: inherit; font-size: var(--fs-ui); font-weight: 700; cursor: pointer;
}
.more-btn.ghost { background: var(--surface); color: var(--ink); }
.more-btn:disabled { opacity: .5; }

/* ─── wide: контейнер по центру ─────────────────────────────────────────── */

@media (min-width: 760px) {
  .more {
    max-width: var(--content-max);
    margin-left: auto; margin-right: auto;
  }
  .more .link-btn, .more .ev-head, .more-switch, .err-more summary { cursor: pointer; }
}

/* Шире контейнера числам всё равно не растечься, поэтому режим `desk`
   (≥1180, навигация колонкой слева) своих правил не требует: `body` уже
   отступил на ширину колонки, а `.more` центруется в остатке. */

/* ─── СПИСОК РАЗДЕЛОВ «ЕЩЁ» (хаб, 03.09) ─────────────────────────────────
   До 03.09 экран был одной длинной простынёй, и всё, что не сверху, надо
   было искать прокруткой. Теперь шесть строк, каждая ведёт на свой экран.
   Геометрия — как у сгруппированного списка в iOS: одна карточка, строки
   разделены волосяной линией, значок слева, шеврон справа.
   ──────────────────────────────────────────────────────────────────────── */
.more-h1 {
  font-size: var(--fs-title); font-weight: 700; letter-spacing: -.02em;
  margin: 2px 0 6px;
}

.hub {
  background: var(--bg); border-radius: var(--r); box-shadow: var(--shadow);
  overflow: hidden;
}
.hub-row {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px var(--sp-3);
  border: 0; border-top: 1px solid var(--line); background: none;
  color: var(--ink); font: inherit; text-align: left;
  transition: background var(--fast) ease;
}
.hub-row:first-child { border-top: 0; }
.hub-row:active { background: var(--surface); }
/* Значок наследует цвет строки — потому и SVG, а не эмодзи. */
.hub-row .hub-ic {
  flex: none; width: 24px; height: 24px;
  fill: none; stroke: var(--accent); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.hub-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hub-title { font-size: var(--fs-ui); font-weight: 500; }
.hub-note { font-size: var(--fs-small); color: var(--ink-soft); }
.hub-n {
  flex: none; min-width: 20px; padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-meta); font-weight: 600; line-height: 1.4; text-align: center;
}
.hub-go { flex: none; color: var(--ink-3); font-size: 19px; line-height: 1; }

/* ─── шапка раздела внутри «Ещё» ────────────────────────────────────────
   Кнопка «Ещё» здесь есть у ОБЕИХ дверей: в Telegram системная кнопка тоже
   работает, но видимый возврат к списку понятнее, чем догадка про хром
   клиента. Она не закрывает раздел сама — зовёт общую цепочку «Назад». */
.more-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px; }
.more-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 1px;
  margin-left: -6px; padding: 4px 6px;
  border: 0; background: none; color: var(--accent-strong);
  font: inherit; font-size: var(--fs-ui); font-weight: 500;
}
.more-back .hub-ic {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.more-back:active { opacity: .6; }
.more-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.more-body > div:empty { display: none; }

/* ─── сеансы (только браузерная дверь) ───────────────────────────────── */
.ses-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.ses { display: flex; flex-direction: column; gap: 1px; }
.ses-dev { font-size: var(--fs-body); }
.ses-meta { font-size: var(--fs-meta); color: var(--ink-soft); }
/* «Выйти» — единственное необратимое действие на экране, и выглядит оно
   соответственно: красным по светлому, а не ещё одной серой строкой. */
.btn-danger {
  align-self: flex-start;
  padding: 9px 16px; border: 0; border-radius: var(--r-sm);
  background: var(--danger-soft); color: var(--danger);
  font: inherit; font-size: var(--fs-ui); font-weight: 600;
}
.btn-danger:active { opacity: .8; }
/* Число рядом с названием экрана: сколько ждёт в этом разделе. Стоит здесь,
   а не в карточке под заголовком, — иначе название печатается дважды подряд
   («Мои анализы», а строкой ниже «🔎 Мои анализы 44»). */
.more-h1 .more-n {
  margin-left: 8px; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: var(--fs-small); font-weight: 600; vertical-align: middle;
}