/* ── Stat / KPI cards ─────────────────────────────────────────────────── */
.stat {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--surface), var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px 20px 16px;
  transition: border-color .14s;
}
.stat:hover { border-color: var(--border-bright); }
/* Instrument readout: label row (icon + name) → hero figure → context → window.
   The icon rides inline with the label — echoing the panel headers — so there is
   no floating badge and no dead space above the number. */
.stat-head {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-family: var(--font-mono);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.4px;
}
.stat-head .icon { width: 15px; height: 15px; flex: none; color: var(--muted-2); }
.stat .num {
  font-family: var(--font-mono); font-size: 46px; font-weight: 700;
  line-height: 1; letter-spacing: -1.5px; color: var(--text-strong);
  margin-top: 13px;
}
.stat .sub { color: var(--muted); font-size: 12px; margin-top: 9px; line-height: 1.4; }
/* Window caption pinned to the tile foot (all four align) — quiet metadata that
   answers «за який період» without competing with the figure. */
.stat-scope {
  margin-top: auto; padding-top: 14px;
  font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted-2);
}
/* СЗЧ reads as a warning only when there is something new to act on. */
.stat.alert .stat-head, .stat.alert .stat-head .icon, .stat.alert .num { color: var(--danger); }
.stat.alert .stat-scope { color: color-mix(in srgb, var(--danger) 62%, var(--muted-2)); }
/* A KPI tile whose «Стан» is switched off «Враховувати в розрахунках» (the strip keeps
   its slot — see `DashboardStats.DAILY_STATUS_TILE_CODES`). Its 0 is a 0 by exclusion
   rather than a quiet morning, so the figure is dimmed to say the tile is not
   reporting. Deliberately not `opacity`: that would fade the standing head-count in the
   sub-line too, and that number is the one thing here still real. Named for the same
   rule as `.excluded-note` in `base/helpers.css`, its page-level half. */
.stat.is-excluded .stat-head, .stat.is-excluded .num { color: var(--muted-2); }
/* Muster tiles carry a semantic tone on the figure: «у строю» reads as present
   (green), «відсутні» as attention (amber). «За списком» stays neutral; СЗЧ is
   handled by .alert above. */
.stat.primary .num { color: var(--ok); }
.stat.signal .num { color: var(--signal); }
/* The muster-tab tiles keep the classic order (figure → label → sub). */
.stat .label {
  color: var(--muted); font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 1.5px; margin-top: 7px;
}

/* Readiness gauge card */
.gauge-card { display: flex; gap: 18px; align-items: center; }
.gauge { flex: none; }
.gauge .track { fill: none; stroke: var(--panel-3); stroke-width: 9; }
.gauge .val { fill: none; stroke: var(--accent-2); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset 1s ease; }
.gauge-card .meta .label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}

/* ── Status LED ───────────────────────────────────────────────────────── */
.led {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: none;
}
.led.pulse { animation: ledpulse 1.8s ease-in-out infinite; }
@keyframes ledpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }