/* KPI line: few strong numbers set as text, separated by space, not boxed into tiles.
   Phones: a compact 2 x 2 grid so the scene starts high. */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; padding: 2px var(--gutter) 12px; }
.kpi { min-width: 0; }
.kpi__name { margin: 0 0 3px; font-size: 12px; color: var(--ink-2); }
.kpi__value { font: 600 26px/1 var(--font-cond); letter-spacing: -0.01em; white-space: nowrap; }
.kpi__unit { font: 500 14px/1 var(--font-cond); color: var(--ink-2); margin-left: 4px; }
.kpi__note { display: none; margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }

/* Line pressure gauge: where the network sits inside its 90-125 psig band. */
.gauge { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.gauge__track { position: relative; height: 24px; margin: 2px 6px 0; }
.gauge__line { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--rule-strong); }
.gauge__band { position: absolute; top: 4px; height: 6px; border-radius: 3px; background: var(--st-loaded); opacity: 0.55; }
.gauge__mark { position: absolute; top: -2px; width: 2px; height: 18px; margin-left: -1px; background: var(--ink); transition: left 0.6s ease; }
.gauge__mark::after { content: ''; position: absolute; left: -4px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--bg); }
.gauge__tick { position: absolute; top: 14px; transform: translateX(-50%); font: 500 11px/1 var(--font-cond); color: var(--ink-3); }
.gauge__tick:first-of-type, .gauge__tick:last-of-type { display: none; }
.gauge.is-low .gauge__mark, .gauge.is-low .gauge__mark::after,
.gauge.is-high .gauge__mark, .gauge.is-high .gauge__mark::after { background: var(--st-unloaded); }

.spark { display: block; width: 100%; max-width: 220px; height: 22px; margin-top: 6px; }
.spark__line { fill: none; stroke: var(--select); stroke-width: 2; stroke-linejoin: round; }
.spark__dot { fill: var(--select); stroke: var(--bg); stroke-width: 2; }

.pips { display: flex; gap: 4px; margin-top: 8px; max-width: 160px; }
.pip { flex: 1; min-width: 0; height: 6px; border-radius: 3px; background: var(--pip, var(--st-stopped)); }

.kpi--alarms.has-danger .kpi__value { color: var(--st-alarm); }
.alarm-line { display: flex; gap: 8px; align-items: baseline; margin: 6px 0 0; font-size: 12px; color: var(--ink-2); min-width: 0; }
.kpi--alarms.has-danger .alarm-line { color: var(--ink); }
.alarm-line span:last-child { overflow-wrap: anywhere; }
.alarm-line__icon { flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: var(--st-alarm); }
.alarm-line.is-warn .alarm-line__icon { background: var(--st-unloaded); }
.alarm-line.is-clear .alarm-line__icon { background: var(--st-loaded); border-radius: 50%; transform: none; }

@media (min-width: 720px) {
  .kpis { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.5fr); gap: 20px 28px; padding: 6px var(--gutter) 16px; }
  .kpi__name { font-size: 13px; margin-bottom: 4px; }
  .kpi__value { font-size: 32px; }
  .kpi__unit { font-size: 15px; }
  .kpi__note { display: block; }
  .alarm-line { font-size: 13px; }
  .gauge { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 20px; }
  .gauge__track { height: 34px; margin: 0 0 2px; }
  .gauge__line { top: 12px; }
  .gauge__band { top: 10px; }
  .gauge__mark { top: 2px; height: 22px; }
  .gauge__mark::after { top: -4px; }
  .gauge__tick { top: 22px; font-size: 12px; }
  .gauge__tick:first-of-type, .gauge__tick:last-of-type { display: block; }
  .spark { height: 30px; }
  .pips { gap: 5px; margin-top: 10px; }
}
@media (min-width: 960px) { .kpis { padding: 10px 32px 18px; gap: 20px 40px; } .kpi__value { font-size: 38px; } }
@media (prefers-reduced-motion: reduce) { .gauge__mark { transition: none; } }
.kpi__sub { margin: 6px 0 0; font-size: 12px; color: var(--ink-2); }
.kpi__sub[hidden] { display: none; }

/* The alarms figure is a button that opens the Alarmas view. */
.kpi--alarms { display: block; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--radius); }
.kpi--alarms .kpi__name, .kpi--alarms .kpi__value { display: block; }
.kpi__more { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--select); }
.kpi--alarms:hover .kpi__more { text-decoration: underline; }

/* Line pressure from the PLC: a stale or missing value always shows its note, on every screen. */
.kpi--line.is-stale .kpi__note { display: block; color: var(--st-unloaded); }
.gauge.is-stale .gauge__mark, .gauge.is-stale .gauge__mark::after { background: var(--ink-3); }