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

/* ---------- Обзор ---------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tile-gap); align-items: start; }
.dsec { min-width: 0; }
.dsec__top { display: flex; flex-wrap: wrap; 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); }
.dsec__none { 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); }
@media (min-width: 64rem) {
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsec--band, .dsec--dec, .dsec--now { grid-column: 1 / -1; }
}

/* Плашки: три отдельные стеклянные плитки с промежутком; на телефоне друг под другом, с 48rem — три колонки на всю ширину.
   Плитка кликабельна целиком: ссылка-стрелка в углу растянута на неё (::after), текстовых ссылок и подчёркивания нет. */
.ov-band__g { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tile-gap); }
@media (min-width: 48rem) {
  .ov-band__g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ov-card { position: relative; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-4); }
.ov-card:hover { border-color: var(--color-line2); }
.ov-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--space-8); }
.ov-card__top .h3 { margin: 0; }
.ov-card__body { display: grid; gap: var(--space-3); min-width: 0; }
.ov-card__go {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--size-touch-min); height: var(--size-touch-min); margin: calc((var(--size-touch-min) - var(--space-8)) / -2) calc(var(--space-2) * -1);
  color: var(--color-ink3); text-decoration: none; border-radius: var(--radius-pill);
}
.ov-card__go .ic { width: var(--size-icon); height: var(--size-icon); transform: rotate(180deg); }
.ov-card__go::after { content: ""; position: absolute; inset: 0; border-radius: var(--tile-radius); }
.ov-card:hover .ov-card__go, .ov-card__go:focus-visible { color: var(--color-acc-text); }
.ov-card__go:focus-visible { outline: 0; }
.ov-card__go:focus-visible::after { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: calc(var(--size-focus-offset) * -1); }

/* Текстовая ссылка без подчёркивания: стрелка справа */
.ov-link { gap: var(--space-1); }
.ov-link .ic { flex: none; width: var(--size-icon); height: var(--size-icon); transform: rotate(180deg); }

/* Строка-вывод плашки: значок и слово тона */
.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); }

/* Мини-полосы: подпись и значение в строку, под ними шкала */
.ov-ms { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style-type: none; }
.ov-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-1) var(--space-3); }
.ov-m__l { min-width: 0; font: var(--text-ui-strong-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.ov-m__n { color: var(--color-ink2); font-weight: var(--text-ui-weight); }
.ov-m__v { color: var(--color-ink); white-space: nowrap; }
.ov-m > .ov-bar { grid-column: 1 / -1; width: 100%; }
.ov-m__s { grid-column: 1 / -1; color: var(--color-ink2); font-size: var(--text-caption-size); line-height: var(--text-caption-line); }
/* Низ плашки: строки-итоги отделены линией; значения обычным текстом, не крупными цифрами */
.ov-stats--wide { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.ov-stats--wide .ov-stat .ui-kpi__v { font-size: var(--text-ui-size); line-height: var(--text-ui-line); letter-spacing: normal; }

/* Мелкие показатели: число над подписью, сколько влезет в строку */
.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); }

/* Шкала задач у работающего проекта и мини-полоса плашки: нативный progress, ширину задаёт value (inline-стили запрещены политикой безопасности) */
.pcard__bar { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
.ov-bar {
  -webkit-appearance: none; appearance: none; display: block; flex: 1 1 auto; min-width: 0; height: var(--space-2);
  border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-line); color: var(--color-acc);
}
.ov-bar::-webkit-progress-bar { background: var(--color-line); border-radius: var(--radius-pill); }
.ov-bar::-webkit-progress-value { background: var(--color-acc); border-radius: var(--radius-pill); }
.ov-bar::-moz-progress-bar { background: var(--color-acc); border-radius: var(--radius-pill); }
/* Тон мини-полосы: норма — зелёный, много — жёлтый, почти всё — красный, лиды — акцент */
.ov-m > .ov-bar { color: var(--color-ok); }
.ov-m > .ov-bar::-webkit-progress-value { background: var(--color-ok); }
.ov-m > .ov-bar::-moz-progress-bar { background: var(--color-ok); }
.ov-m[data-tone="warn"] > .ov-bar { color: var(--color-warn); }
.ov-m[data-tone="warn"] > .ov-bar::-webkit-progress-value { background: var(--color-warn); }
.ov-m[data-tone="warn"] > .ov-bar::-moz-progress-bar { background: var(--color-warn); }
.ov-m[data-tone="danger"] > .ov-bar { color: var(--color-danger); }
.ov-m[data-tone="danger"] > .ov-bar::-webkit-progress-value { background: var(--color-danger); }
.ov-m[data-tone="danger"] > .ov-bar::-moz-progress-bar { background: var(--color-danger); }
.ov-m[data-tone="acc"] > .ov-bar { color: var(--color-acc); }
.ov-m[data-tone="acc"] > .ov-bar::-webkit-progress-value { background: var(--color-acc); }
.ov-m[data-tone="acc"] > .ov-bar::-moz-progress-bar { background: var(--color-acc); }
.pcard__barv { color: var(--color-ink2); font-size: var(--text-label-size); white-space: nowrap; }

/* Переключатель периода в заголовке событий */
.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: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-4); row-gap: var(--space-2);
  padding: var(--space-4); background: var(--surface-inner); border-radius: var(--inner-radius);
}
.alert__ic { display: inline-flex; color: var(--color-ink3); }
.alert__ic .ic { width: 1rem; height: 1rem; }
.alert[data-attention="stopped"] .alert__ic { color: var(--color-danger-text); }
.alert[data-attention="warning"] .alert__ic { color: var(--color-warn-text); }
.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); }
@media (max-width: 40rem) {
  .alert { grid-template-columns: auto minmax(0, 1fr); }
  .alert > .btn { grid-column: 2; justify-self: start; }
}

/* Ячейка суммы расхода. Экран теперь рисует суммы через 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); }
}