/* telemetry.noomoo.dev — стили страницы на токенах лендинга (tokens.css). Эталон —
   docs/ui/ds/telemetry/telemetry.dc.html; шрифт — свои файлы, без загрузок с чужих адресов. */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/IBMPlexMono-Light.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/IBMPlexMono-Regular.woff2) format("woff2");
}

* { box-sizing: border-box; min-width: 0; }
html { background: var(--tm-bg); }
body {
  margin: 0; background: var(--tm-bg); color: var(--tm-ink);
  font-family: var(--tm-font); font-weight: var(--tm-weight); font-size: var(--tm-size-4); line-height: var(--tm-lh);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, figure, pre { margin: 0; font-weight: var(--tm-weight); }
h1 { font-size: var(--tm-size-2); line-height: var(--tm-lh-tight); letter-spacing: -.02em; }
h2 { font-size: var(--tm-size-3); line-height: var(--tm-lh-tight); }
.h3 { font-size: var(--tm-size-3); line-height: var(--tm-lh-tight); }
a { color: var(--tm-ok); text-underline-offset: 3px; }
a:hover { color: #4AD3A0; }
code, pre { font-family: inherit; }
input, button { font: inherit; }
:focus-visible { outline: 2px solid var(--tm-ok); outline-offset: 2px; }

/* текстовые роли */
.dim { color: var(--tm-ink-dim); }
.muted { color: var(--tm-ink-muted); }
.small { font-size: var(--tm-size-6); line-height: var(--tm-lh-code); }
.label { font-size: var(--tm-size-6); letter-spacing: var(--tm-tracking-label); text-transform: uppercase; color: var(--tm-ink-muted); }
.num { font-variant-numeric: var(--tm-nums); font-size: var(--tm-size-5); }
.big { font-size: var(--tm-size-2); }
.r { text-align: right; }
.ok { color: var(--tm-ok); }
.warn { color: var(--tm-warn); }
.fail, .is-stale { color: var(--tm-fail); }
.ok-bg { background: var(--tm-ok); }
.warn-bg { background: var(--tm-warn); }

/* раскладка */
/* Страница резиновая: потолок ширины лендинга (--tm-max) на операторском экране не применяется. */
.wrap, .page { width: 100%; margin: 0 auto; padding: 0 var(--tm-pad); }
.page { padding: var(--tm-gap-lg) var(--tm-pad) 96px; }
.stack { display: flex; flex-direction: column; gap: var(--tm-gap-lg); }
.stack-sm { display: flex; flex-direction: column; gap: var(--tm-gap); }
.stack-xs { display: flex; flex-direction: column; gap: calc(var(--tm-step) * 2); }
.row { display: flex; align-items: center; gap: calc(var(--tm-step) * 2); }
.row-wrap { display: flex; align-items: center; gap: calc(var(--tm-step) * 2); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--tm-gap); flex-wrap: wrap; }
.push { margin-left: auto; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 46%), 1fr)); gap: var(--tm-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30%), 1fr)); gap: var(--tm-gap); }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tm-gap); flex-wrap: wrap; margin-bottom: var(--tm-pad); }
.title-row { display: flex; align-items: center; gap: calc(var(--tm-step) * 3); flex-wrap: wrap; }

/* карточки и таблицы */
.card { border: 1px solid var(--tm-line); border-radius: var(--tm-radius-lg); background: var(--tm-surface); overflow: hidden; }
.card-head { padding: var(--tm-gap); border-bottom: 1px solid var(--tm-line); display: flex; align-items: baseline; justify-content: space-between; gap: var(--tm-gap); flex-wrap: wrap; }
.empty { padding: 48px var(--tm-pad); align-items: flex-start; }
.empty .dim { max-width: 560px; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--tm-step) var(--tm-gap); align-items: baseline; padding: calc(var(--tm-step) * 2) var(--tm-gap); }
.kv + .kv { border-top: 1px solid var(--tm-line); }
.kv-head { border-top: 1px solid var(--tm-line); padding-top: calc(var(--tm-step) * 3); }
.kv-k { font-size: var(--tm-size-5); line-height: var(--tm-lh-code); color: var(--tm-ink-dim); }
.kv-v { white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.table { min-width: 640px; }
.tr { display: grid; gap: var(--tm-gap); padding: var(--tm-gap); border-bottom: 1px solid var(--tm-line); align-items: center; }
.th { padding: calc(var(--tm-step) * 3) var(--tm-gap); font-size: var(--tm-size-6); letter-spacing: var(--tm-tracking-label); text-transform: uppercase; color: var(--tm-ink-muted); }
.th .r, .tr .r { text-align: right; }
.tfoot { padding: calc(var(--tm-step) * 3) var(--tm-gap); }
.projects .tr { grid-template-columns: minmax(0, 3fr) 92px 96px minmax(120px, 1.4fr) 72px 200px; }
.projects { min-width: 820px; }
.commands .tr { grid-template-columns: minmax(0, 1fr) 88px 104px 112px; }
.phases .tr { grid-template-columns: 64px minmax(0, 1fr) 88px 104px 112px; }
.machines .tr { grid-template-columns: 120px 96px minmax(0, 1fr) minmax(0, 1fr); }
.rubrics .tr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr) 88px 120px 128px; }
.rubrics { min-width: 760px; }
.commands, .phases, .machines { min-width: 480px; }
.tr code { font-size: var(--tm-size-6); }
.cell-name { display: flex; flex-direction: column; gap: var(--tm-step); min-width: 0; }
.name { text-decoration: none; color: var(--tm-ink); }
.origin { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stages { padding: calc(var(--tm-step) * 3) var(--tm-gap); display: flex; flex-direction: column; gap: calc(var(--tm-step) * 2); border-top: 1px solid var(--tm-line); }
.stages .kv { padding: 0; border: 0; }
.cover { padding: calc(var(--tm-step) * 3) var(--tm-gap); border-bottom: 1px solid var(--tm-line); display: flex; flex-direction: column; gap: calc(var(--tm-step) * 2); }

/* пилюли и кнопки */
.pill { font-size: var(--tm-size-7); height: 22px; display: inline-flex; align-items: center; padding: 0 calc(var(--tm-step) * 2); border-radius: 4px; border: 1px solid var(--tm-line); background: var(--tm-surface-2); color: var(--tm-ink-dim); white-space: nowrap; }
.pill-own, .pill-ok { background: var(--tm-ok-bg); color: var(--tm-ok); border-color: var(--tm-ok-line); }
.pill-blocked, .pill-fail { background: var(--tm-fail-bg); color: var(--tm-fail); border-color: var(--tm-fail-line); }
.btn-primary { font-size: var(--tm-size-4); height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--tm-radius); background: var(--tm-ok); color: var(--tm-bg); text-decoration: none; cursor: pointer; }
.btn-primary[disabled] { background: var(--tm-surface-2); color: var(--tm-ink-muted); cursor: default; }
.btn-danger-fill { height: var(--tm-control-h); padding: 0 calc(var(--tm-step) * 3); font-size: var(--tm-size-6); background: var(--tm-fail); }
.btn-ghost, .chip, .tab { font-size: var(--tm-size-6); height: var(--tm-control-h); padding: 0 calc(var(--tm-step) * 3); background: transparent; color: var(--tm-ink); border: 1px solid var(--tm-line); border-radius: var(--tm-radius); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: border-color var(--tm-motion), background var(--tm-motion); }
.btn-accent { color: var(--tm-ok); }
.btn-small { font-size: var(--tm-size-7); height: 28px; padding: 0 calc(var(--tm-step) * 2); background: transparent; color: var(--tm-ink-dim); border: 1px solid var(--tm-line); border-radius: var(--tm-radius); cursor: pointer; white-space: nowrap; }
.btn-danger { color: var(--tm-fail); }
.chip, .tab { color: var(--tm-ink-dim); }
.chip[aria-pressed="true"], .tab[aria-pressed="true"] { background: var(--tm-surface-2); color: var(--tm-ink); border-color: var(--tm-ok); }
.tab { font-size: var(--tm-size-5); height: 36px; padding: 0 var(--tm-gap); }
.tabs { display: flex; gap: calc(var(--tm-step) * 2); flex-wrap: wrap; border-bottom: 1px solid var(--tm-line); padding-bottom: var(--tm-gap); }
.back { align-self: flex-start; color: var(--tm-ink-dim); text-decoration: none; font-size: var(--tm-size-6); }
.code-hint { font-size: var(--tm-size-6); background: var(--tm-bg); color: var(--tm-ok); padding: calc(var(--tm-step) * 2); border-radius: var(--tm-radius); margin-top: calc(var(--tm-step) * 2); }
input[type="date"] { font-size: var(--tm-size-6); height: var(--tm-control-h); padding: 0 calc(var(--tm-step) * 2); color: var(--tm-ink); background: var(--tm-bg); border: 1px solid var(--tm-line); border-radius: var(--tm-radius); color-scheme: dark; }

/* шапка и вход */
.topbar { border-bottom: 1px solid var(--tm-line); }
.topbar .wrap { padding-top: var(--tm-gap); padding-bottom: var(--tm-gap); display: flex; align-items: center; justify-content: space-between; gap: var(--tm-gap); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: var(--tm-gap); }
.brand-sub { font-size: var(--tm-size-5); color: var(--tm-ink-dim); padding-left: var(--tm-gap); border-left: 1px solid var(--tm-line); }
.mark { height: 37px; width: auto; display: block; }
.mark-sm { height: 32px; }
.login { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 96px var(--tm-pad); }
.login-box { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--tm-pad); }
.notice { border: 1px solid var(--tm-line); border-radius: var(--tm-radius-lg); background: var(--tm-surface); padding: var(--tm-gap); display: flex; flex-direction: column; gap: var(--tm-step); }
.notice[data-tone="fail"] { border-color: var(--tm-fail); }
.notice[data-tone="fail"] .notice-code { color: var(--tm-fail); }
.notice[data-tone="warn"] { border-color: var(--tm-warn); }
.notice[data-tone="warn"] .notice-code { color: var(--tm-warn); }
.notice-code { font-size: var(--tm-size-6); }

/* проект */
.banner-blocked { border: 1px solid var(--tm-fail-line); border-radius: var(--tm-radius-lg); background: var(--tm-fail-bg); padding: var(--tm-gap); display: flex; align-items: center; justify-content: space-between; gap: var(--tm-gap); flex-wrap: wrap; font-size: var(--tm-size-5); }
.banner-blocked .btn-ghost { border-color: var(--tm-fail-line); }
.facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow-x: auto; }
.fact { padding: var(--tm-gap); display: flex; flex-direction: column; gap: var(--tm-step); min-width: 140px; }
.fact + .fact { border-left: 1px solid var(--tm-line); }
.fact .num { font-size: var(--tm-size-4); }
.period-row { display: flex; align-items: center; gap: calc(var(--tm-step) * 2); flex-wrap: wrap; }
.confirm { border-color: var(--tm-fail-line); padding: var(--tm-pad); margin-top: var(--tm-gap); max-width: 640px; }
.how { padding: var(--tm-pad); }
.how .dim { max-width: 720px; }
section .dim { max-width: 720px; }

/* полосы и столбики: доля — переменная --w, её ставит app.js из data-w */
.bar { height: 6px; border-radius: 3px; background: var(--tm-surface-2); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; width: var(--w, 0%); }
.health-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--tm-gap); padding: var(--tm-gap) var(--tm-gap) 0; }
.big.num { font-size: var(--tm-size-1); line-height: 1.15; }
.spark { display: flex; align-items: flex-end; gap: var(--tm-step); height: 64px; }
.spark-bar { width: 10px; border-radius: 2px; background: var(--tm-ok); height: var(--w, 0%); min-height: 2px; }
.layer { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: calc(var(--tm-step) * 2) var(--tm-gap); align-items: center; padding: calc(var(--tm-step) * 2) var(--tm-gap); border-top: 1px solid var(--tm-line); }
.layer .bar { height: 4px; }

/* сырые записи */
.raw-item { padding: calc(var(--tm-step) * 3) var(--tm-gap); border-bottom: 1px solid var(--tm-line); display: flex; flex-direction: column; gap: calc(var(--tm-step) * 2); }
.raw-meta { display: flex; align-items: baseline; gap: var(--tm-gap); flex-wrap: wrap; font-size: var(--tm-size-6); }
.raw-item pre { padding: calc(var(--tm-step) * 3); border-radius: var(--tm-radius); background: var(--tm-bg); overflow-x: auto; font-size: var(--tm-size-6); line-height: var(--tm-lh-code); color: var(--tm-ink-dim); }

/* заглушки */
.skeleton { padding: var(--tm-pad); display: flex; flex-direction: column; gap: calc(var(--tm-step) * 3); }
.skeleton-list { padding: 0; gap: 0; }
.skeleton-list .tr { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
.skeleton-line { height: 12px; border-radius: 3px; background: var(--tm-surface-2); width: var(--w, 100%); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 720px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--tm-line); }
}