/* Ревизорро Mini App — стили каркаса. Только var(--…) из tokens.css, ни
   одного цветового/размерного литерала (docs/design/DESIGN-SYSTEM.md §1).
   Ни одного inline style="" — строгий CSP (docs/stages/F2-B1…md). */

*, *::before, *::after { box-sizing: border-box; }

/* Акцент как цвет ТЕКСТА мелкого размера: чистый --accent в светлой теме даёт 2.8–3.3:1 (нужно 4.5) —
   темнее на 40% к --ink (правило №5: оттенок выводим color-mix из токена, нового токена нет). */
:root { --accent-text: color-mix(in srgb, var(--accent) 60%, var(--ink)); }

html { height: 100%; }
body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* скроллится только .scroll — apphead и tabbar фиксированы */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Время/индикаторы рисует Telegram — это только отступ под них. */
.statusbar { height: env(safe-area-inset-top, 0px); flex: 0 0 auto; }

.app-shell { display: flex; flex-direction: column; height: 100%; }
/* #app держит текущий экран (apphead + scroll) — router.js:mount() пишет
   в него целиком при каждом переходе. */
#app { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.apphead { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s4) var(--s3); gap: var(--s3); }
.apphead h2 { margin: 0; font-size: var(--t-display); font-weight: var(--t-display-w); letter-spacing: var(--t-display-ls); }
.apphead .back, .apphead .spacer { width: 44px; height: 44px; flex: 0 0 auto; }
.apphead .back { position: relative; display: grid; place-items: center; margin-left: -7px; color: var(--ink); cursor: pointer; }
.apphead .spacer { margin-right: -7px; }
/* Кружок 30 px внутри зоны нажатия 44 px. */
.apphead .back::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-brd); }
.apphead .back svg { position: relative; }

.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px var(--s4) var(--s6); }
.scroll::-webkit-scrollbar { display: none; }
/* Без таб-бара (зритель) нижнюю безопасную зону держит сам контент. */
[data-tabs="none"] .scroll { padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px)); }

.card {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  position: relative;
}
.card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: linear-gradient(90deg, transparent, var(--glass-top), transparent);
}

/* --- Banner ------------------------------------------------------------ */

.banner { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s4); margin-bottom: var(--s3); }
.banner .big { font-size: var(--t-banner); font-weight: var(--t-banner-w); letter-spacing: var(--t-banner-ls); }
.banner .small { font-size: var(--t-caption); color: var(--muted); margin-top: 1px; }

.dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
.dot.ok { background: var(--ok); color: var(--ok); }
.dot.warn { background: var(--warn); color: var(--warn); }
.dot.crit { background: var(--crit); color: var(--crit); }
.dot.unknown { background: var(--muted); color: var(--muted); }

/* --- Tile / grid --------------------------------------------------------- */

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s3); }
.tile {
  padding: var(--s3) 15px 15px; display: flex; flex-direction: column; gap: 9px; min-height: 92px;
  text-align: left; border: 1px solid var(--glass-brd); cursor: default;
}
button.tile { cursor: pointer; transition: transform var(--dur-fast) var(--ease); }
button.tile:active { transform: scale(0.98); }
.tile .lbl { display: flex; align-items: center; gap: 7px; font-size: var(--t-label); color: var(--muted); font-weight: var(--t-label-w); }
.tile .lbl .d { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.tile .lbl .d.ok { background: var(--ok); }
.tile .lbl .d.warn { background: var(--warn); }
.tile .lbl .d.crit { background: var(--crit); }
.tile .lbl .d.unknown { background: var(--muted); }
.tile .val { font-size: var(--t-value); font-weight: var(--t-value-w); letter-spacing: var(--t-value-ls); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .sub { font-size: var(--t-caption); line-height: 1.3; color: var(--muted); margin-top: -4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile.amber { background: color-mix(in srgb, var(--warn) 16%, var(--glass)); border-color: color-mix(in srgb, var(--warn) 34%, var(--glass-brd)); }
.tile.amber .lbl { color: color-mix(in srgb, var(--warn) 50%, var(--ink)); }
.tile.red { background: color-mix(in srgb, var(--crit) 16%, var(--glass)); border-color: color-mix(in srgb, var(--crit) 34%, var(--glass-brd)); }
.tile.red .lbl { color: color-mix(in srgb, var(--crit) 50%, var(--ink)); }
/* Подпись на тинте бледнее фона на ~0.3 контраста: чуть темнее --muted, чтобы держать AA (4.5). */
.tile.amber .sub, .tile.red .sub { color: color-mix(in srgb, var(--muted) 80%, var(--ink)); }
/* Приглушаем только крупное значение (для него хватает 3:1); opacity на всей плитке снижал бы контраст подписей ниже AA. */
.tile.is-stale .val { opacity: 0.6; }

.tile.skel { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }

/* --- Chart card ----------------------------------------------------------- */

.chartcard { padding: var(--s4) var(--s4) var(--s2); margin-bottom: var(--s3); }
.chartcard .ct { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: var(--s2); }
.chartcard .ct b { font-size: var(--t-card); font-weight: var(--t-card-w); letter-spacing: var(--t-card-ls); }
.chartcard .ct span { font-size: var(--t-caption); color: var(--muted); }
svg.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart-wrap { position: relative; }
/* Не --glass-brd: в светлой теме он белый, и на белой карточке сетки не видно. */
.grid-line { stroke: color-mix(in srgb, var(--ink) 10%, transparent); }

/* Столбики (kind: bars — DESIGN-SYSTEM §5): прямые углы, идущий период — бледнее. */
.bar { fill: var(--accent); }
.bar.is-now { fill-opacity: 0.45; }
.axis { display: flex; justify-content: space-between; margin: 2px 0 var(--s2); font-size: var(--t-caption); color: var(--muted); }
.axis-ticks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.axis-ticks > span { display: flex; justify-content: space-between; white-space: nowrap; }
.chart-empty { padding: var(--s6) 0; text-align: center; color: var(--muted); font-size: var(--t-caption); }

.callout { position: absolute; right: 6px; bottom: 14px; padding: 3px 9px; border-radius: var(--r-chip); background: color-mix(in srgb, var(--accent) 80%, var(--ink)); color: var(--accent-ink); font-size: var(--t-label); font-weight: 700; letter-spacing: -0.01em; }
.callout.callout-top { bottom: auto; top: 6px; }

/* --- Полоса состояния (kind: state — DESIGN-SYSTEM §8.2) ---------------- */

.statebar { display: none; gap: 2px; height: 24px; }
.statebar.on { display: flex; }
.statebar i { flex: 1; border-radius: 5px; background: var(--glass-brd); }
.statebar i.ok { background: var(--ok); }
.statebar i.crit { background: var(--crit); }

/* --- Segmented control ---------------------------------------------------- */

.seg { display: flex; gap: 3px; padding: 3px; border-radius: 13px; background: var(--glass); border: 1px solid var(--glass-brd); margin: 4px 0 var(--s4); }
.seg button { flex: 1; border: 0; background: transparent; color: var(--muted); font-size: var(--t-label); font-weight: 550; min-height: 44px; padding: 8px 0; border-radius: 10px; cursor: pointer; transition: var(--dur-fast) var(--ease); }
.seg button[aria-selected="true"] { background: var(--glass-strong); color: var(--ink); box-shadow: var(--shadow); }

/* --- Chip-select (выбор метрики — DESIGN-SYSTEM §8.2) -------------------- */

.chips { position: relative; display: flex; gap: 7px; overflow-x: auto; padding: 1px 1px var(--s1); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; min-height: 44px; border: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; background-clip: padding-box; border-radius: var(--r-pill); padding: 7px 13px; font-size: var(--t-label); font-weight: 550; background-color: var(--glass); color: var(--muted); cursor: pointer; white-space: nowrap; transition: var(--dur-fast) var(--ease); }
.chip[aria-selected="true"] { background-color: var(--accent-dim); color: var(--accent-text); }
.chips.sub .chip { background-color: transparent; box-shadow: inset 0 0 0 1px var(--glass-brd); }
.chips.sub .chip[aria-selected="true"] { background-color: var(--accent-dim); box-shadow: none; }

/* --- Chip / badge (статус-метка) ------------------------------------------ */

.chip-badge { display: inline-block; padding: 3px 9px; border-radius: var(--r-chip); font-size: var(--t-caption); font-weight: 600; }
.chip-badge.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: color-mix(in srgb, var(--ok) 50%, var(--ink)); }
.chip-badge.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: color-mix(in srgb, var(--warn) 50%, var(--ink)); }
.chip-badge.crit { background: color-mix(in srgb, var(--crit) 16%, transparent); color: color-mix(in srgb, var(--crit) 50%, var(--ink)); }
.chip-badge.unknown { background: var(--glass); color: var(--muted); }

/* --- Stat-row list ---------------------------------------------------------- */

.rows { padding: 4px 2px; }
.row { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: var(--s3) 14px; font-size: var(--t-body); gap: var(--s3); }
.row + .row { border-top: 1px solid var(--glass-brd); }
.row .k { color: var(--muted); }
.row .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.row .v.mut { color: var(--muted); font-weight: 500; }

.row.expand { cursor: pointer; }
.row.expand .k { display: inline-flex; align-items: center; gap: 6px; }
.row.expand .chev { transition: transform var(--dur-fast) var(--ease); flex: 0 0 auto; }
.row.expand[aria-expanded="true"] .chev { transform: rotate(90deg); }
.detail { display: none; padding: 0 14px 13px; font-size: var(--t-caption); line-height: 1.5; color: var(--muted); }
.detail.on { display: block; }
.detail p { margin: 3px 0; }
.detail .hint { color: var(--muted); font-style: italic; margin-top: 7px; }
.detail .hint code { font-family: var(--font-mono); font-style: normal; font-size: 0.95em; color: var(--muted); background: var(--glass); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }

/* --- Tab bar --------------------------------------------------------------- */

.tabbar {
  flex: 0 0 auto; display: flex;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 10px));
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur-bar); -webkit-backdrop-filter: var(--glass-blur-bar);
  border-top: 1px solid var(--glass-brd);
}
.tabbar button { flex: 1; border: 0; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0 2px; cursor: pointer; font-size: var(--t-tab); font-weight: var(--t-tab-w); letter-spacing: 0.01em; transition: color var(--dur-fast) var(--ease); }
.tabbar button svg { width: 23px; height: 23px; }
.tabbar button[aria-current="page"] { color: var(--accent-text); }
.tabbar button[aria-current="page"] svg { color: var(--accent); }

/* --- Пустые/ошибочные состояния (api-contract.md §7.2) --------------------- */

.empty { padding: var(--s7) var(--s4); text-align: center; color: var(--muted); }
.empty-title { font-size: var(--t-card); font-weight: var(--t-card-w); color: var(--ink); margin-bottom: var(--s1); }
.empty-hint { font-size: var(--t-caption); margin-bottom: var(--s4); }
.btn-retry { min-height: 44px; border: 1px solid var(--glass-brd); background: var(--glass); color: var(--ink); border-radius: var(--r-pill); padding: var(--s2) var(--s5); cursor: pointer; font-size: var(--t-body); }

.stale-banner .big { font-size: var(--t-card); }