/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Экран «Обзор» по макету Main.dc.html: плоские секции («Ждёт вас», «Идёт сейчас», «Подписка Claude», «Требует внимания», события)
   и подвал с нагрузкой компьютера. Подключён в index.html после project.css; значения — только из tokens.css, размеры в rem.
   Раскладка: 390 — одна колонка; шире — колонки по 26 rem и больше (на 1440 две), события на всю ширину. Цветных пилюль и заливок нет:
   состояние — точка, прогресс — тонкая полоса 2 px (.ov-bar), числа — шрифтом чисел. Тёмная тема берёт те же токены.
   Заголовок экрана и ошибка связи — общие, лежат в screens.css. */

/* ---------- Раскладка и заголовок секции ---------- */
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--space-10) var(--space-12); align-items: start; }
.dash[hidden], .ov-foot[hidden] { display: none; }
.dsec { min-width: 0; }
.dsec--ev { grid-column: 1 / -1; }
.dsec__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
  min-height: var(--size-touch-min); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-line);
}
.ov-h { margin: 0; color: var(--color-ink2); font: var(--weight-medium) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); letter-spacing: 0.02em; }
.dsec__none { margin: 0; padding-top: var(--space-3); color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.overview__state:empty { display: none; }
.ov-res:empty { display: none; }
.ov-res[data-tone="ok"] { color: var(--color-ok-text); }
.ov-res[data-tone="warn"] { color: var(--color-warn-text); }

/* Текстовая ссылка вперёд справа в заголовке: без подчёркивания, стрелка вправо из CSS (в имя ссылки не входит) */
.ov-more {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--size-touch-min);
  color: var(--color-ink2); text-decoration: none; font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans);
}
.ov-more::after { content: "→" / ""; flex: none; }
.ov-more:hover { color: var(--color-acc-text); }

/* ---------- Строки: «Ждёт вас» и «Идёт сейчас» ---------- */
.ov-rows { display: grid; margin: 0; padding: 0; list-style-type: none; }
.ov-rows > li + li { border-top: 1px solid var(--color-line); }
.pcard__leads { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style-type: none; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }

/* Касание не меньше 44 px на телефоне и на сенсорном экране: «Открыть» в строках, имя работы с двумя лидами, уровни и флажок «Экономии лимита» */
@media (max-width: 40rem), (pointer: coarse) {
  .drow .btn, .alert .btn, .ov-saving__g .ui-switch__b { min-height: var(--size-touch-min); }
  .rrow > .rrow__a a.pcard__name { display: inline-flex; align-items: center; min-height: var(--size-touch-min); }
}

/* Решение: точка акцента, заголовок и «проект · время», справа «Открыть» */
.drow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4) 0; }
.drow__dot { flex: none; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--color-dot-wait); }
.drow__main { flex: 1 1 14rem; min-width: 0; display: grid; gap: var(--space-1); }
.drow .pcard__meta { color: var(--color-ink2); font-size: var(--text-caption-size); }

/* Работа: название и состояние слева, «N из M» и время справа, под ними полоса 2 px */
.rrow > .rrow__a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; justify-content: stretch;
  gap: var(--space-2) var(--space-4); height: auto; min-height: var(--size-touch-min); padding: var(--space-4) 0;
}
.rrow > .rrow__a .pcard__main { flex: none; }
.rrow > .rrow__a .pcard__side { display: grid; justify-items: end; gap: 0; margin-left: 0; text-align: right; }
.rrow > .rrow__a > .ov-bar { grid-column: 1 / -1; }
/* Полоса стоит на нижней границе строки и заменяет разделитель: у строки с полосой нет отступа снизу, а следующей строке не нужна верхняя линия (одна линия, не две) */
.rrow > .rrow__a:has(> .ov-bar) { padding-bottom: 0; row-gap: var(--space-4); }
.ov-rows > li:has(> .rrow__a > .ov-bar) + li { border-top: 0; }
.rrow > a.rrow__a:hover .pcard__name { color: var(--color-acc-text); }
.rrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
.rrow__meta .ui-status { min-height: 0; }

/* Карточка лида, который ждёт решения (js/screens/overview.js → waitingRow): вид — общий, в lead-ask.css (тонкая граница и мягкое
   свечение). Здесь только раскладка Обзора: список .ov-asks и обёртка .ov-now держат равный зазор через gap, у карточек нет внешних
   отступов; шапка-ссылка — имя и время в одной строке, статус под ними на всю ширину. */
.ov-now { display: grid; gap: var(--space-3); min-width: 0; }
.ov-asks { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style-type: none; min-width: 0; }
.ov-asks > .rrow > .rrow__a { align-items: baseline; row-gap: var(--space-1); padding: 0; }
.ov-asks .rrow__a > .rrow__meta { grid-column: 1 / -1; }
.ov-asks .rrow__a > .pcard__side { align-self: baseline; }

/* Строка-вывод: значок и слово тона (прогноз) */
.ov-say { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.ov-say .ic { flex: none; width: var(--size-icon); height: var(--size-icon); color: var(--color-ink3); }
.ov-say[data-tone="ok"] .ic { color: var(--color-ok-text); }
.ov-say[data-tone="warn"] .ic { color: var(--color-warn-text); }
.ov-say[data-tone="danger"] .ic { color: var(--color-danger-text); }

/* Полоса: нативный progress, ширину задаёт value (inline-стили запрещены политикой безопасности); заливка и дорожка — общий вид из kit.css */
.ov-bar {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--size-focus-width);
  border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--bar-track, var(--color-acc-track)); color: var(--bar-fill, var(--color-acc));
}
.pcard__barv { color: var(--color-ink2); font-size: var(--text-label-size); white-space: nowrap; }

/* ---------- Подписка Claude: два окна лимита крупными числами, доли моделей, «Экономия лимита» ---------- */
.ov-lim__body { display: grid; gap: var(--space-5); padding-top: var(--space-4); }
.ov-lim { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.ov-lim__c { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.ov-lim__l { color: var(--color-ink2); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ov-lim__v {
  color: var(--color-ink); white-space: nowrap;
  font: var(--text-number-lg-weight) var(--text-number-lg-size)/var(--text-number-lg-line) var(--text-number-lg-family);
  letter-spacing: var(--text-number-lg-track);
}
.ov-bar--lim { height: calc(var(--size-progress) * 4 / 3); }
.ov-lim__c[data-tone="warn"] .ov-bar { --bar-fill: var(--color-warn); --bar-track: var(--color-track); }
.ov-lim__c[data-tone="danger"] .ov-bar { --bar-fill: var(--color-danger); --bar-track: var(--color-track); }
.ov-lim__n { color: var(--color-ink3); font-size: var(--text-label-size); line-height: var(--text-caption-line); }
.ov-lim__saving { margin-top: var(--space-5); }

/* Расход по аккаунтам: строка на аккаунт, основной помечен словом. Пометка аккаунта у лида в «Идёт сейчас» — та же плашка. */
.ov-accs { display: grid; gap: 0; margin: 0; padding: 0; list-style-type: none; }
.ov-acc { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--color-line); min-width: 0; }
.ov-acc:first-child { border-top: 0; padding-top: 0; }
.ov-acc__n { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); min-width: 0; }
.ov-acc__name { min-width: 0; overflow-wrap: anywhere; }
.ov-acc__tag {
  padding: 0 var(--space-2); border: 1px solid var(--color-line2); border-radius: var(--radius-pill); color: var(--color-ink2);
  font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); white-space: nowrap;
}
.ov-acc__m { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--color-ink2); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ov-acc__v { color: var(--color-ink); }
.ov-acc__v[data-tone="warn"] { color: var(--color-warn-text); }
.ov-acc__v[data-tone="danger"] { color: var(--color-danger-text); }

/* Мелкие показатели: число над подписью, сколько влезет в строку */
.ov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--space-3) var(--space-4); }
.ov-stat { gap: 0; }
.ov-stat .ui-kpi__v { font-size: var(--text-h3-size); line-height: var(--text-h3-line); letter-spacing: var(--text-h3-track); }

/* Доля Opus и Sonnet: двухцветная шкала и подпись под ней */
.ov-split { display: grid; gap: var(--space-2); }
.ov-split__bar { display: block; width: 100%; height: var(--space-2); border-radius: var(--radius-pill); overflow: hidden; background: var(--color-line); }
.ov-split__bar rect[data-m="opus"], .ov-dot[data-m="opus"] { fill: var(--color-model-opus); background: var(--color-model-opus); }
.ov-split__bar rect[data-m="sonnet"], .ov-dot[data-m="sonnet"] { fill: var(--color-model-sonnet); background: var(--color-model-sonnet); }
.ov-split__t { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ov-split__k { display: inline-flex; align-items: center; gap: var(--space-1); }
.ov-dot { display: inline-block; width: var(--space-2); height: var(--space-2); margin-right: var(--space-1); border-radius: var(--radius-round); }

/* ---------- Полоса состояния вверху экрана: компьютер и счётчики работы ----------
   Одна тонкая строка под шапкой приложения, снизу волосяная линия; числа — Geist Mono; цвет — только точка статуса и тон чисел.
   Телефон: видны статус, процессор, лиды и «С ошибкой», остальное по кнопке «Ещё» (.is-open). От 64rem (1024) показано всё. */
.ov-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4);
  margin: calc(var(--space-2) * -1) 0 var(--space-5); border-bottom: 1px solid var(--color-line);
  color: var(--color-ink2); font: var(--weight-regular) var(--text-caption-size)/var(--text-caption-line) var(--font-sans);
}
.ov-foot__body { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-6); min-width: 0; flex: 1 1 auto; }
.ov-foot__g { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); min-width: 0; }
.ov-foot__pc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); min-height: var(--size-touch-min); color: inherit; text-decoration: none; }
.ov-foot__pc:hover .ov-foot__st { color: var(--color-acc-text); }
.ov-foot__st { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-ink); }
.ov-foot__dot { flex: none; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--color-ink3); }
.ov-foot__st[data-tone="ok"] .ov-foot__dot { background: var(--color-dot-ok); }
.ov-foot__st[data-tone="warn"] .ov-foot__dot { background: var(--color-dot-wait); }
.ov-foot__st[data-tone="danger"] .ov-foot__dot { background: var(--color-danger); }
.ov-foot__i { white-space: nowrap; }
.ov-foot__v { color: var(--color-ink); font-size: inherit; }
.ov-foot__i[data-tone="warn"] .ov-foot__v { color: var(--color-warn-text); }
.ov-foot__i[data-tone="danger"] .ov-foot__v { color: var(--color-danger-text); }
.ov-foot__err { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--size-touch-min); color: var(--color-ink2); text-decoration: none; }
.ov-foot__err:hover { color: var(--color-acc-text); }
.ov-foot__tog {
  display: none; align-items: center; min-height: var(--size-touch-min); padding: 0 var(--space-2); border: 0; background: none;
  color: var(--color-ink2); font: inherit; cursor: pointer;
}
.ov-foot__tog:hover { color: var(--color-ink); }
.ov-foot__tog::after { content: ""; width: var(--space-2); height: var(--space-2); margin-left: var(--space-2); border: solid currentColor; border-width: 0 var(--size-focus-width) var(--size-focus-width) 0; transform: translateY(-25%) rotate(45deg); }
.ov-foot__tog[aria-expanded="true"]::after { transform: translateY(25%) rotate(225deg); }
@media (max-width: 63.9375rem) {
  .ov-foot { flex-wrap: nowrap; align-items: flex-start; }
  .ov-foot__tog { display: inline-flex; flex: none; }
  .ov-foot__i--more { display: none; }
  .ov-foot.is-open .ov-foot__i--more { display: inline; }
  .ov-foot__body, .ov-foot__g, .ov-foot__pc { column-gap: var(--space-4); }
}
@media (min-width: 64rem) and (pointer: fine) {
  .ov-foot__pc, .ov-foot__err { min-height: var(--size-ctl-sm); }
}

/* Переключатель периода в заголовке событий */
.ov-seg { border-bottom: 0; }
.ov-more { margin-top: var(--space-3); }

/* Предупреждения: значок, «что случилось» и под ним «что сделать»; одна строка списка — одно предупреждение */
.alerts { display: grid; gap: var(--space-2); }
.alert {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-4); row-gap: var(--space-2);
  padding: var(--space-4); background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--surface-shadow);
}
/* Остановка выделена мягким свечением, а не рамкой */
.alert[data-attention="stopped"] { box-shadow: var(--shadow-attn-glow); }
.alert__body { display: grid; gap: var(--space-1); min-width: 0; }
.alert__st { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.alert__ic { flex: none; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--color-ink3); }
.alert__ic[data-tone="danger"] { background: var(--color-danger); }
.alert__ic[data-tone="warn"] { background: var(--color-dot-wait); }
.alert__dl { display: grid; gap: var(--space-1); min-width: 0; }
.alert__v { margin: 0; overflow-wrap: anywhere; }
.alert__todo { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.alert__done { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.alert__when { color: var(--color-ink2); }
/* Текстовая ссылка на проект в карточке: не кнопка, без верхнего отступа заголовочной ссылки */
.alert .alert__link { margin-top: 0; }
/* Пустое состояние: спокойная строка без значка и рамки */
.ov-calm { color: var(--color-ink2); }
.alert__where { color: var(--color-ink); }
.alert__reason { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.alert__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; }
.alert__res { margin: 0 0 var(--space-3); color: var(--color-ink2); }
.alert__res[data-tone="warn"] { color: var(--color-ink); }
/* Группа одинаковых остановок: сворачиваемый список задач на всю ширину карточки */
.alert--group > .alert__more { grid-column: 1 / -1; min-width: 0; }
.alert__sum {
  display: inline-flex; align-items: center; min-height: var(--size-touch-min); cursor: pointer; color: var(--color-ink2);
  font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans);
}
.alert__sum:hover { color: var(--color-ink); }
.alert__sum:focus-visible { outline: 0.125rem solid var(--color-acc); outline-offset: 0.125rem; border-radius: var(--radius-xs); }
.alert__subs { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style-type: none; }
.alert__sub {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-4); row-gap: var(--space-2);
  padding: var(--space-3) var(--space-4); background: var(--surface-inner); border-radius: var(--inner-radius); min-width: 0;
}
@media (max-width: 40rem) {
  .alert, .alert__sub { grid-template-columns: minmax(0, 1fr); }
  .alert__acts { justify-content: flex-start; }
  .alert > .btn { justify-self: start; }
}
/* От 1440 (90 rem) тексту — вся свободная ширина карточки: колонка кнопок не шире 40% и переносит кнопки внутри себя,
   а не растёт до суммы их ширин и не зажимает «что случилось» и «что сделать»; группа и вложенные остановки — так же */
@media (min-width: 90rem) {
  .alert, .alert__sub { grid-template-columns: minmax(0, 1fr) fit-content(40%); }
  .alert__body, .alert__dl { width: 100%; }
}

/* Ячейка суммы расхода. Экран теперь рисует суммы через kpi, но tests/pult-kit.test.mjs и tests/pult-shell.test.mjs
   (вне зоны задачи) ещё проверяют эти два правила; уберите их вместе с тестами, когда лид перенесёт проверку на .ui-kpi__v. */
.usage-tile { min-width: 0; padding: var(--space-4); background: var(--color-panel); }
.usage-tile__v {
  white-space: nowrap;
  font: var(--text-number-lg-weight) var(--text-h2-size)/var(--text-number-lg-line) var(--text-number-lg-family);
  letter-spacing: var(--text-number-lg-track); font-variant-numeric: tabular-nums;
}

/* Последние события */
.feed { display: grid; }
.feed__i {
  display: grid; gap: var(--space-1) var(--space-4); align-items: center;
  padding: var(--space-3) 0; border-top: 1px solid var(--color-line);
}
.feed__i:last-child { border-bottom: 1px solid var(--color-line); }
.feed__t { white-space: nowrap; color: var(--color-ink3); font-size: var(--text-label-size); }
.feed__a {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1);
  min-height: var(--size-touch-min); color: inherit; text-decoration: none; overflow-wrap: anywhere;
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
a.feed__a:hover { color: var(--color-acc-text); }
@media (min-width: 40rem) {
  .feed__i { grid-template-columns: calc(var(--space-16) * 2) minmax(0, 1fr); }
}

/* Экономия лимита: сегменты — общий .ui-switch; без соединения кнопки недоступны, но выбранная читается как активная; флажок подстройки — строка с подписью */
.ov-saving { display: grid; gap: var(--space-3); min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.ov-saving__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.ov-saving__t, .ov-saving__help { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ov-saving__help { color: var(--color-ink3); }
.ov-saving__g .ui-switch__b:disabled { cursor: default; }
.ov-saving__g .ui-switch__b[aria-checked="true"]:disabled { color: var(--color-ink); }
.ov-saving__p { margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ov-saving__hint { color: var(--color-ink3); }
.ov-saving__auto { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--size-touch-min); color: var(--color-ink); cursor: pointer; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.ov-saving__cb { flex: none; width: var(--size-icon); height: var(--size-icon); margin: 0; accent-color: var(--color-acc); cursor: pointer; }
.ov-saving__cb:disabled { cursor: default; }
.ov-saving[aria-busy="true"] .ui-switch__b, .ov-saving[aria-busy="true"] .ov-saving__auto, .ov-saving[aria-busy="true"] .ov-saving__cb { cursor: progress; }
.ov-saving__eff { color: var(--color-ink); }
.ov-saving__err { color: var(--color-danger-text); }
@media (max-width: 40rem) {
  .ov-saving__g .ui-switch__b { min-width: 0; padding-inline: var(--space-1); overflow-wrap: anywhere; }
}

/* Шапка «Обзора»: «Пауза», «Остановить всё» и «Новая задача» справа, по верху — на одной линии с заголовком, а не с подписью под ним */
.ov-head { align-items: start; }
.ov-head > .head__acts { align-self: start; justify-content: flex-end; }