/* ═══════════════════════════════════════════════════════════════════════════
   CONNECTED SYSTEMS · stylesheet
   Operator register: dense, calm, legible under time pressure. Colour carries
   meaning only — the five postures are distinguishable by hue AND by a left
   rule AND by their label, so nothing depends on colour alone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The header that states what this is ────────────────────────────────── */
.sysbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding:13px 17px;margin-bottom:20px;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(13,20,32,.96),rgba(26,65,116,.96));
  border:1px solid rgba(242,103,34,.28);color:#E8EDF4}
.sysbar-l{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.sysbar-dot{width:7px;height:7px;border-radius:50%;background:var(--ff-orange);
  box-shadow:0 0 0 0 rgba(242,103,34,.5);animation:sysPulse 2.6s ease-in-out infinite}
@keyframes sysPulse{70%{box-shadow:0 0 0 8px rgba(242,103,34,0)}100%{box-shadow:0 0 0 0 rgba(242,103,34,0)}}
.sysbar-t{font-family:var(--fc);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.sysbar-s{font-size:12.5px;line-height:1.55;opacity:.82;flex:1 1 340px;min-width:0}
.sysbar-s strong{color:#fff;opacity:1}

/* ── The grid ───────────────────────────────────────────────────────────── */
.sysgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}

.syscard{background:var(--tgi-white);border:1px solid var(--tgi-mist);border-radius:var(--r);
  padding:16px 18px;border-left-width:3px;
  transition:transform .22s var(--e-out,cubic-bezier(.16,1,.3,1)),box-shadow .22s var(--e-out,cubic-bezier(.16,1,.3,1))}
.syscard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* Five postures. Left rule + chip colour + label — never colour alone. */
.s-mand{border-left-color:var(--tgi-navy)}       .s-mand   .sc-state{background:rgba(26,65,116,.10);color:var(--tgi-navy)}
.s-county{border-left-color:var(--tgi-plum)}     .s-county .sc-state{background:rgba(107,41,125,.10);color:var(--tgi-plum)}
.s-ready{border-left-color:var(--tgi-good)}      .s-ready  .sc-state{background:rgba(46,168,100,.12);color:#1E6B3F}
.s-noapi{border-left-color:var(--tgi-stone)}     .s-noapi  .sc-state{background:var(--tgi-cloud);color:var(--tgi-slate)}
.s-gap{border-left-color:var(--tgi-urgent);background:linear-gradient(180deg,rgba(213,94,39,.05),transparent 55%)}
.s-gap .sc-state{background:rgba(213,94,39,.12);color:var(--tgi-orange-dk)}

.sc-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:3px}
.sc-name{font-family:var(--fh);font-size:15.5px;font-weight:600;color:var(--tgi-navy);line-height:1.25}
.sc-state{flex:0 0 auto;font-family:var(--fc);font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap}
.sc-role{font-size:12px;color:var(--tgi-stone);line-height:1.45;margin-bottom:12px}
.sc-dir{display:inline-block;margin:0 4px;color:var(--tgi-cyan-dk);font-weight:700}

/* Telemetry. Tabular numerals so a column of counts reads as a column. */
.sc-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:11px 0;
  border-top:1px solid var(--tgi-cloud);border-bottom:1px solid var(--tgi-cloud);margin-bottom:11px}
.sc-stat{min-width:0}
.sc-sv{font-family:var(--fc);font-size:14px;font-weight:700;color:var(--tgi-navy);
  font-variant-numeric:tabular-nums;line-height:1.15;overflow-wrap:anywhere}
.sc-sv.warn{color:var(--tgi-gold)} .sc-sv.bad{color:var(--tgi-urgent)}
.sc-sl{font-size:9.5px;color:var(--tgi-stone);letter-spacing:.03em;margin-top:2px;line-height:1.3}

.sc-objs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.sc-obj{font-family:var(--fc);font-size:10.5px;letter-spacing:.02em;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--tgi-cloud);color:var(--tgi-slate);white-space:nowrap}
.sc-note{font-size:12.5px;color:var(--tgi-slate);line-height:1.55;margin-bottom:12px}

.sc-f{border-top:1px solid var(--tgi-cloud);padding-top:11px;display:grid;gap:7px}
.sc-k{display:block;font-family:var(--fc);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tgi-stone);margin-bottom:1px}
.sc-appr,.sc-sig{font-size:12px;color:var(--tgi-ink);line-height:1.45}
.sc-src{font-size:11.5px;color:var(--tgi-stone)}
.sc-src summary{cursor:pointer;color:var(--tgi-cyan-dk);font-weight:500;min-height:24px;
  display:inline-flex;align-items:center}
.sc-src summary:focus-visible{outline:2px solid var(--tgi-cyan);outline-offset:2px;border-radius:4px}
.sc-src div{margin-top:6px;line-height:1.6;color:var(--tgi-slate);
  padding:9px 11px;background:var(--tgi-pearl);border-radius:8px;overflow-wrap:anywhere}

/* ── Executive roll-up ──────────────────────────────────────────────────── */
.sysrow{border:1px solid var(--tgi-mist);border-left-width:3px;border-radius:var(--r);
  padding:15px 17px;margin-bottom:11px;background:var(--tgi-white)}
.sysrow-h{display:flex;align-items:center;gap:11px;margin-bottom:5px}
.sysrow-n{font-family:var(--fc);font-size:21px;font-weight:700;color:var(--tgi-navy);
  font-variant-numeric:tabular-nums;margin-left:auto}
.sysrow-w{font-size:12.5px;color:var(--tgi-slate);line-height:1.55;margin-bottom:9px}
.sysrow-i{display:flex;flex-wrap:wrap;gap:5px}

/* ── Caseworker ─────────────────────────────────────────────────────────── */
.cw-blocked{border-color:rgba(225,146,37,.5);background:linear-gradient(180deg,rgba(225,146,37,.06),transparent 55%)}

@media(max-width:520px){
  .sc-stats{grid-template-columns:repeat(3,1fr);gap:10px 8px}
  .sysgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .sysbar-dot{animation:none}
  .syscard{transition:none}
}