/* Kaskad 3 — графики выхода (charts.js, этап 1 T8, SE §7.3). Цвета — только токены темы (tokens.css): светлая и тёмная
   берутся сами. Поле, деления, подписи и подсказка — сетка gx-grid (grid.css, Claude Design «Сетка на графиках r1»):
   здесь — линия, точки и полоса состояний. */
.kc { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kc__t { font-size: var(--fs-sm); line-height: 1.125rem; color: var(--text-2); }
.kc__svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.kc__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kc__dot { fill: var(--accent); }
.kc__empty { padding: 18px 12px; border-radius: var(--r-field); background: var(--info-soft); color: var(--text-2); font-size: var(--fs-sm); }
.kc__st { fill: var(--neutral-soft); }
.kc__st--ok { fill: var(--success); }
.kc__st--degraded { fill: var(--warning); }
.kc__st--standby { fill: var(--text-2); }
.kc__st--off { fill: var(--danger); }
.kc__leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-xs); color: var(--text-2); }
.kc__legi { display: inline-flex; align-items: center; gap: 6px; }
.kc__legi::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--neutral-soft); }
.kc__legi--ok::before { background: var(--success); }
.kc__legi--degraded::before { background: var(--warning); }
.kc__legi--standby::before { background: var(--text-2); }
.kc__legi--off::before { background: var(--danger); }

/* ── UI-B 23.10: «кардиограмма» активности за сутки и окно «График» (spark.js; Claude Design People Activity r1,
   css/activity.css). Одна линия 1,5 px без заливки и сетки: ноль — нет трафика или не в сети, всплеск — объём за окно,
   разрыв с пунктиром по нулю — нет данных, точка справа — «сейчас». Цвета — только токены. ── */
[data-hero] { --spark-h: 16px; --spark-w: 96px; }
.gx-spark { position: relative; display: block; flex: none; width: var(--spark-w); height: var(--spark-h); }
.gx-spark.is-btn { cursor: pointer; }
.gx-spark > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gx-spark--lg { --spark-w: 120px; --spark-h: 20px; }
.gx-spark--w140 { --spark-w: 140px; }
.gx-spark--row { --spark-w: 48px; --spark-h: 12px; margin-left: auto; }
.gx-spark--sheet { --spark-w: 100%; --spark-h: 32px; }
.gx-spark--sm { --spark-w: 96px; --spark-h: 14px; }
.gx-spark__l { fill: none; stroke: var(--success); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.gx-spark__l--mute { stroke: var(--text-3); }
.gx-spark__nd { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 1 2.5; stroke-linecap: round; }
.gx-spark__dot { fill: var(--text-3); }
.gx-spark__dot--on { fill: var(--success); }
.gx-spark__dot--warn { fill: var(--warning); }
.gx-spark__dot--bad { fill: var(--danger); }
/* наведение: черта окна и подсказка окна (одна на страницу; место — style.left из spark.js) */
.gx-spark__hx { position: absolute; z-index: 2; top: -4px; bottom: -4px; width: 0; border-left: 1px solid var(--text-2); pointer-events: none; }
.gx-sptip { position: absolute; z-index: 6; bottom: calc(100% + 8px); transform: translateX(-50%); display: grid; gap: 1px; padding: 6px 10px; border-radius: var(--r-field); background: var(--surface-raised); box-shadow: var(--popover-shadow), 0 0 0 1px var(--border); white-space: nowrap; pointer-events: none; font: 400 .78125rem/1.0625rem var(--font); color: var(--foreground); }
.gx-sptip > b { font: 500 .75rem/1rem var(--mono); color: var(--text-2); }
.gx-sptip--r { transform: translateX(calc(-100% + 16px)); }
/* «График»: та же линия на сетке (grid.css): деления, единица и ось времени — gx-grid* */
.gx-gr { display: grid; gap: 6px; min-width: 0; }
.gx-gr__plot { position: relative; height: 150px; touch-action: pan-y; }
.gx-gr__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.gx-gr__line { fill: none; stroke: var(--success); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.gx-gr__nd { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 1 3; stroke-linecap: round; }
.gx-gr__pre { position: absolute; left: 0; top: 0; bottom: 0; display: grid; place-items: center; color: var(--text-3); font: 500 var(--fs-sm)/1.125rem var(--font); text-align: center; }
.gx-gr__hx { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 1px solid var(--text-2); pointer-events: none; }
.gx-gr .gx-sptip { bottom: auto; top: 6px; }
.gx-gr .gx-sptip--r { transform: translateX(calc(-100% - 10px)); }
.gx-gr .gx-sptip--l { transform: translateX(10px); }
.gx-legend { display: flex; align-items: center; gap: 14px; font-size: var(--fs-xs); color: var(--text-2); }
.gx-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gx-key-l { display: block; width: 18px; height: 10px; overflow: visible; flex: none; }
.gx-legend .gx-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-3); }
.gx-legend .gx-key--on { background: var(--success); }
/* у человека — устройства с долей трафика; нажатие — график устройства */
.gx-actd { display: grid; border-radius: var(--r-tile); background: var(--tile-bg); }
.gx-actd__r { display: grid; grid-template-columns: 24px minmax(0, 1fr) 160px 40px 72px 128px 16px; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border: 0; border-radius: 0; background: none; color: var(--foreground); font: 400 var(--fs-sm)/1.125rem var(--font); text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.gx-actd__r:first-child { border-radius: var(--r-tile) var(--r-tile) 0 0; }
.gx-actd__r:last-child { border-radius: 0 0 var(--r-tile) var(--r-tile); }
.gx-actd__r:only-child { border-radius: var(--r-tile); }
.gx-actd__r + .gx-actd__r { box-shadow: inset 0 1px 0 var(--separator); }
.gx-actd__r:hover { background: var(--surface-hover); }
.gx-actd__r:focus-visible { outline-offset: -2px; }
.gx-actd__ic { display: grid; place-items: center; color: var(--text-2); }
.gx-actd__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.gx-actd__bar { display: block; width: 160px; height: 6px; }
.gx-actd__tr { fill: var(--surface-3); }
.gx-actd__v { fill: var(--text-2); }
.gx-actd__p, .gx-actd__vol, .gx-actd__on { color: var(--text-2); white-space: nowrap; text-align: right; }
.gx-actd__on { overflow: hidden; text-overflow: ellipsis; }
.gx-actd__ch { display: grid; place-items: center; color: var(--text-3); }