/* ================================================================
   SCADA INSTRUMENTS — styles for needle gauges, status LEDs,
   phase-balance bars, power triangle and the control-room cluster.
   Loaded after app.css. Tokens (--ok/--warn/--err/--line…) come from there.
   ================================================================ */

/* monospace, tabular numerics on the instrument readouts — "engineering console" feel */
.stat-value, .flow-kw, .eng-kv b, .kpi-value, .hist-stat .v,
.wall-kw-num, .wall-counter-v, .wall-phase-v, .wall-phase-i, .wall-aux-v {
  font-family: var(--mono);
  letter-spacing: -0.01em;
}
.eng-table td span, .eng-table thead th { font-family: var(--mono); }

/* ---- status LED with glow halo ---- */
.led-row { display: inline-flex; align-items: center; gap: 6px; }
.led {
  display: inline-block; border-radius: 50%;
  background: var(--led, var(--text-mute));
  box-shadow: 0 0 6px 1px var(--led, transparent), 0 0 0 1px rgba(0,0,0,0.4) inset;
}
.led-na { box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset; opacity: 0.6; }
.led-label { font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }
@keyframes led-breathe {
  0%, 100% { box-shadow: 0 0 5px 1px var(--led); }
  50%      { box-shadow: 0 0 11px 3px var(--led); }
}
.led-pulse { animation: led-breathe 1.8s ease-in-out infinite; }

/* ---- needle gauge container ---- */
.ng { display: flex; flex-direction: column; align-items: center; }
.ng-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ng-svg text { font-family: 'Inter', system-ui, sans-serif; }

/* ---- instrument cluster grid (control-room row) ---- */
.inst-cluster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px;
}
/* 5 instruments in a 2-col phone grid leave a dangling empty slot — let the odd
   last cell (Frequency) span the full row so the row reads complete. */
@media (max-width: 479px) {
  .inst-cluster > .inst-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.inst-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 8px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: var(--shadow);
}
.inst-cell .inst-head {
  display: flex; align-items: center; gap: 6px;
  width: 100%; justify-content: space-between;
  font-size: 10px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.inst-cell .inst-head > span:first-child {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Fill the remaining cell height and center content, so digital-readout cells
   (PF, Frequency) don't leave a gap below the value when sharing a grid row
   with the taller needle-gauge cells (kW, V, I). */
.inst-cell .inst-gauge { width: 100%; max-width: 200px; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }

/* ---- digital readout (replaces a needle gauge inside a cell) ----
   Sits in the same slots as a gauge (.inst-gauge / .wall-aux-gauge / .pq-gauge).
   min-height matches the ~168px tall gauge SVGs so the cluster row stays even;
   value/unit sizing mirrors .stat-value/.stat-unit so it reads intentional. */
.inst-readout {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 120px; height: 100%; text-align: center;
}
.ro-val {
  font-size: 48px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ro-unit { font-size: 15px; font-weight: 600; color: var(--text-dim); margin-left: 4px; letter-spacing: 0.04em; }
.ro-sub { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: lowercase; }

/* Scoped size overrides so the big value fits the smaller Sheet / Wall slots. */
.pq-gauge .inst-readout { min-height: 72px; }
.pq-gauge .ro-val { font-size: 30px; }
.pq-gauge .ro-unit { font-size: 13px; }
.wall-aux-gauge .ro-val { font-size: 34px; }

/* ---- phase-balance bars ---- */
.phasebars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pb-group { display: flex; flex-direction: column; gap: 6px; }
.pb-cap { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.07em; }
.pb-cols { display: flex; gap: 8px; align-items: flex-end; height: 96px; }
.pb-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; }
.pb-track {
  flex: 1; width: 100%; max-width: 34px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line); border-radius: 5px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.pb-fill { width: 100%; border-radius: 4px 4px 0 0; transition: height 0.5s cubic-bezier(0.22,1,0.36,1); }
.pb-val { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pb-name { font-size: 10px; font-weight: 700; }

/* on wider screens give V and I bars more room side-by-side */
@media (min-width: 720px) {
  .pb-cols { height: 120px; }
}

/* ---- dashboard stat cards (per-phase + min/avg/max + sparkline) ---- */
.dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (min-width: 720px)  { .dash-stats { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px;
}
.stat-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.stat-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.07em; }
.stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-unit { font-size: 12px; color: var(--text-dim); font-weight: 600; margin-left: 4px; }
.stat-phases { display: flex; gap: 6px; }
.stat-phase {
  flex: 1; text-align: center; background: rgba(255,255,255,0.03);
  border-radius: 6px; padding: 4px 2px; border-top: 2px solid var(--pc, var(--line));
}
.stat-phase b { display: block; font-size: 9px; color: var(--text-dim); font-weight: 700; letter-spacing: 0.04em; }
.stat-phase i { font-style: normal; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-mm { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.stat-mm b { color: var(--text-dim); font-weight: 700; }
.stat-spark { flex: 1 1 auto; min-height: 36px; color: var(--accent); }
.stat-foot { font-size: 9px; color: var(--text-mute); }

/* ---- now-card sub-grid (phase bars + power triangle) ---- */
.now-sub-grid {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.now-card-inner {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
}
.now-card-inner .sheet-section-title { margin-bottom: 10px; }
.inst-unbal { font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; margin-left: 8px; }
.inst-cluster { margin-top: 14px; }
@media (min-width: 720px) {
  .now-sub-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- wall / kiosk instrument additions ---- */
.wall-aux-gauge { width: 100%; max-width: 200px; margin: 6px auto 0; }
.wall-hero-head { align-items: center; }
.wall-aux-item { text-align: center; }

/* ---- master health strip ---- */
.health-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);
}
.health-master { display: flex; align-items: center; gap: 10px; }
.health-master .led { width: 20px; height: 20px; }
.health-title { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.health-phases { display: flex; gap: 12px; margin-left: auto; }
.health-phase { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); }

/* ---- power flow: single-line diagram ---- */
.flow-body { display: flex; flex-direction: column; gap: 18px; }
.flow-incomer { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 10px; box-shadow: var(--shadow); }
.flow-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.flow-feeder { flex: none; width: 16px; height: 3px; background: var(--accent); opacity: 0.7; border-radius: 2px; }
.flow-feeder.root { width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); opacity: 1; }
.flow-node {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; min-height: 46px; color: var(--text); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.flow-node:hover { border-color: var(--text-mute); }
.flow-node.is-incomer { background: var(--surface-2); }
.flow-led { width: 11px; height: 11px; flex: none; }
.flow-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-node.is-incomer .flow-name { font-weight: 800; }
.flow-tag { font-size: 9px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; margin-left: 4px; }
.flow-bars { display: flex; align-items: flex-end; gap: 2px; height: 24px; width: 30px; flex: none; }
.flow-ph { width: 8px; border-radius: 1px 1px 0 0; background: var(--text-mute); }
.flow-ph-r { background: var(--phase-r); }
.flow-ph-y { background: var(--phase-y); }
.flow-ph-b { background: var(--phase-b); }
.flow-kw { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; min-width: 62px; text-align: right; }
.flow-kw i { font-style: normal; font-size: 10px; color: var(--text-dim); font-weight: 600; margin-left: 3px; }
.flow-unb { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; flex: none; width: 46px; text-align: right; }
.flow-balance { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.flow-balance b { color: var(--text); font-variant-numeric: tabular-nums; }
.flow-balance-err { color: var(--err); font-weight: 600; }

/* ---- power flow: view selector + breadcrumb ---- */
.flow-view-select {
  margin-left: auto; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 7px 10px; font-size: 12px; font-family: inherit; min-height: 36px;
  max-width: 220px; cursor: pointer;
}
.flow-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.flow-crumb {
  background: var(--surface); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 8px; padding: 6px 11px; font: inherit; font-size: 12.5px; min-height: 34px; cursor: pointer;
}
.flow-crumb:hover:not(.cur) { color: var(--text); border-color: var(--text-mute); }
.flow-crumb.cur { color: var(--text); border-color: var(--accent); background: var(--surface-2); cursor: default; }
.flow-crumb-sep { color: var(--text-mute); }

/* ---- power flow B: Sankey (inline SVG) ---- */
.flow-svg { width: 100%; height: auto; display: block; overflow: visible; }
.flow-svg text { font-family: 'Inter', system-ui, sans-serif; }
.sk-col   { fill: var(--text-mute); font-size: 10px; font-weight: 700; letter-spacing: 1.1px; }
.sk-focus { fill: var(--ok); }
.sk-node  { fill: #7e8a98; cursor: pointer; }
.sk-node.off { fill: #39434f; stroke: #4a5560; stroke-dasharray: 4 3; cursor: default; }
.sk-name  { fill: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; }
.sk-name.sk-unmet { fill: var(--text-dim); cursor: default; }
.sk-tot   { fill: var(--text-dim); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.sk-chip  { font-size: 10.5px; font-weight: 700; }
.sk-dot   { fill: var(--text-mute); }
.sk-drill { fill: var(--accent); font-size: 10.5px; font-weight: 700; }
.sk-state { fill: var(--err); font-size: 10px; font-weight: 700; font-style: italic; }
.sk-stale { fill: var(--warn); font-size: 10px; font-weight: 700; font-style: italic; }
.sk-warn  { fill: var(--err); }
.sk-let   { fill: #0a0f14; font-size: 12px; font-weight: 800; }
.sk-letkw { fill: #0a0f14; font-size: 9.5px; font-weight: 700; opacity: .8; }

/* ---- power flow B: phone fallback (stacked phase bars + child list) ---- */
.flow-pb { display: flex; flex-direction: column; gap: 14px; }
.flow-pb-row { display: flex; align-items: center; gap: 10px; }
.flow-pb-tag { flex: none; width: 46px; font-weight: 800; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.flow-pb-dot { width: 10px; height: 10px; border-radius: 50%; }
.flow-pb-track { flex: 1; height: 26px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); display: flex; overflow: hidden; }
.flow-pb-seg { height: 100%; min-width: 0; }
.flow-pb-seg.unm { background: repeating-linear-gradient(45deg, var(--text-mute) 0 4px, transparent 4px 8px); opacity: .6; }
.flow-pb-tot { flex: none; width: 64px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.flow-pb-tot i { font-style: normal; font-size: 10px; color: var(--text-dim); margin-left: 2px; }
.flow-pb-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.flow-pb-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  min-height: 44px; color: var(--text); font: inherit; cursor: pointer; }
.flow-pb-item:hover { border-color: var(--text-mute); }
.flow-pb-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.flow-pb-iname { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-pb-ikw { flex: none; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-dim); }
.flow-pb-iact { flex: none; color: var(--accent); font-weight: 800; }

/* ---- power flow C: grouped by incomer phase ---- */
.flow-ph-group { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.flow-ph-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-2);
  border-left: 4px solid var(--pc); border-bottom: 1px solid var(--line); }
.flow-ph-badge { flex: none; width: 22px; height: 22px; border-radius: 6px; color: #0a0f14; font-weight: 800;
  font-size: 12px; display: flex; align-items: center; justify-content: center; }
.flow-ph-htxt { font-weight: 700; font-size: 13.5px; }
.flow-ph-hkw { margin-left: auto; font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.flow-ph-hkw b { color: var(--text); }
.flow-ph-row { display: grid; grid-template-columns: 16px 1fr 130px 78px 40px; gap: 10px; align-items: center;
  padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.flow-ph-row:first-of-type { border-top: none; }
.flow-ph-row.off { opacity: .42; }
.flow-ph-led { width: 11px; height: 11px; }
.flow-ph-nm { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-ph-bar { height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.flow-ph-bar i { display: block; height: 100%; border-radius: 4px; }
.flow-ph-v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.flow-ph-v i { font-style: normal; font-size: 10px; color: var(--text-dim); margin-left: 2px; }
.flow-ph-pct { text-align: right; font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
/* phase-mapping markers (Power Flow B & C): unassigned '?' + single-phase tag */
.flow-ph-q { color: var(--warn); font-weight: 800; }
.sk-q { fill: var(--warn); font-weight: 800; }
.sk-ptag { font-weight: 800; }

/* ---- engineering deep-dive ---- */
.eng-console {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.eng-console-name { font-size: 15px; font-weight: 800; }
.eng-console-tag { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.eng-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px)  { .eng-grid { grid-template-columns: 1fr 1fr; } .eng-card-wide { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .eng-grid { grid-template-columns: 2fr 1fr 1fr; } .eng-card-wide { grid-column: 1 / -1; } }
.eng-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; box-shadow: var(--shadow); }
.eng-card-h { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; }
.eng-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.eng-table th, .eng-table td { text-align: right; padding: 7px 8px; font-size: 13px; border-bottom: 1px solid var(--line); }
.eng-table thead th { font-size: 10px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.eng-table tbody th { text-align: left; font-weight: 600; color: var(--text-dim); font-size: 12px; }
.eng-table td span { font-weight: 700; }
.eng-table .eng-unit { color: var(--text-mute); font-size: 11px; font-weight: 500; }
.eng-hist { color: var(--text-dim); font-weight: 600 !important; }
.eng-hist i { font-style: normal; font-size: 8px; color: var(--accent); vertical-align: super; margin-left: 1px; }
.eng-na { color: var(--text-mute); font-weight: 400 !important; }
.eng-gate { font-size: 9px; color: var(--text-mute); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; white-space: nowrap; }
.eng-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.eng-kv:last-child { border-bottom: none; }
.eng-kv span { color: var(--text-dim); }
.eng-kv b { font-variant-numeric: tabular-nums; font-weight: 700; }
.eng-trend { min-height: 200px; }

/* ---- admin settings: Meters | Users tabs ---- */
.set-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 4px; margin-bottom: 14px; max-width: 100%; }
.set-tab { background: transparent; border: none; color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 18px; border-radius: 7px; cursor: pointer; min-height: 36px; }
.set-tab:hover { color: var(--text); }
.set-tab.active { background: var(--surface-2); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset; }
.set-role-admin { color: var(--accent); font-weight: 700; }
.set-role-viewer { color: var(--text-dim); }
.set-udel { color: var(--err); border-color: rgba(239,68,68,0.4); }

/* ---- admin settings: meter cards + groups (mobile-friendly) ---- */
.set-site { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.set-site b { color: var(--text); }
.set-list { display: flex; flex-direction: column; gap: 22px; }
.set-group { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); }
.set-group-h { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding: 2px 2px 8px; display: flex; align-items: center; gap: 8px; }
.set-group-n { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; font-size: 10px; color: var(--text-dim); }
.set-meter { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--line); }
.set-group .set-meter:first-of-type { border-top: none; }
.set-meter-main { flex: 1; min-width: 0; }
.set-meter-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-meter-id { font-size: 11px; color: var(--text-mute); font-weight: 500; }
.set-meter-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Single source of truth for these badges/labels (values were previously split
   across this block and a now-dead `.set-table` block — these are the merged,
   shipped computed values). */
.set-edit { flex: none; padding: 4px 12px; min-height: 36px; }
.set-root { font-size: 10px; color: var(--accent); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.set-on  { color: var(--ok); font-weight: 700; }
.set-off { color: var(--text-mute); font-weight: 600; }
.set-pending-name { color: var(--text-dim); font-weight: 500; font-size: 12px; }
.set-passign { flex: none; }
.set-pdismiss { flex: none; }

/* ---- admin settings: meter management ---- */
.set-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.set-table { width: 100%; border-collapse: collapse; }
.set-table th, .set-table td { text-align: left; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.set-table thead th { font-size: 10px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; }
.set-table tbody tr:last-child td { border-bottom: none; }
.set-table .set-name { font-weight: 700; }
.set-3ph { font-size: 10px; color: var(--accent-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-weight: 600; }

.set-form { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow); }
.set-form-h { font-size: 14px; font-weight: 800; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* min-width:0 lets the sub-label shrink below its content and wrap instead of
   pushing the whole .set-form-h (and the page) past the viewport on mobile */
.set-form-tenant { font-size: 11px; color: var(--text-dim); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.set-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
@media (min-width: 720px) { .set-fields { grid-template-columns: repeat(3, 1fr); } }
.set-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; min-width: 0; }
.set-fields input[type="text"], .set-fields input[type="number"], .set-fields select {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 9px 10px; font-size: 14px; min-height: 42px; font-family: inherit;
  width: 100%; min-width: 0; max-width: 100%;
}
.set-fields input:focus, .set-fields select:focus { border-color: var(--accent); }
.set-fields .set-check { flex-direction: row; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); }
.set-fields .set-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.set-fields .set-wide { grid-column: 1 / -1; }
/* Usage-pattern bands editor (Settings → Site): a list of label + time-range rows */
.set-bands { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.set-bands-empty { color: var(--text-mute); font-size: 12px; padding: 4px 2px; }
.set-band-row { display: flex; align-items: center; gap: 8px; }
.set-band-row input {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; min-height: 40px; font-family: inherit;
}
.set-band-row input:focus { border-color: var(--accent); outline: none; }
.set-band-row .sf-band-label { flex: 1; min-width: 0; }
.set-band-row .set-band-time { flex: none; width: auto; }
.set-band-dash { color: var(--text-dim); flex: none; }
.set-band-del {
  flex: none; width: 38px; height: 40px; min-height: 40px;
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 8px; font-size: 14px; line-height: 1;
}
.set-band-del:hover { border-color: var(--err); color: var(--err); }
.set-band-add {
  align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px; padding: 8px 14px; font-size: 12px;
  font-weight: 600; min-height: 40px; margin-bottom: 4px;
}
.set-band-add:hover { border-color: var(--accent); }

.set-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.set-form-msg { font-size: 12px; color: var(--text-dim); }
.set-form-msg.err { color: var(--err); }
.set-form-msg.ok  { color: var(--ok); }
/* Settings → Site tab: company name + logo URL, with a live identity preview */
.set-fields input[type="url"] {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 10px; font-family: inherit; font-size: 14px; color: var(--text);
  text-transform: none; letter-spacing: 0; min-width: 0; width: 100%;
}
.set-fields input[type="url"]:focus { border-color: var(--accent); }
.set-site-preview { display: flex; align-items: center; gap: 10px; margin-top: 14px; min-height: 32px; flex-wrap: wrap; }
.set-site-preview-k { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; }
.set-site-preview-id { display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface-2, var(--bg-2)); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; }
.set-site-preview-id img { height: 24px; width: auto; max-width: 84px; object-fit: contain; border-radius: 4px; }
.set-site-preview-id b { font-size: 15px; font-weight: 700; color: var(--text); }
/* group_viewer multi-site picker */
.uf-site-multi { margin-top: 12px; }
.uf-site-multi[hidden] { display: none; }
.uf-site-multi-h { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.uf-site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.uf-site-check { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.uf-site-check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.set-it-h { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
.set-it-note { font-size: 9px; color: var(--text-mute); text-transform: none; letter-spacing: 0; font-weight: 500; }
.set-fields input[disabled] { opacity: 0.7; cursor: not-allowed; background: var(--surface); color: var(--text-dim); }

/* ---- mobile fit / overflow safety ---- */
.inst-cell { overflow: hidden; }            /* keep gauge glow/needle inside the tile */
.inst-cell .inst-gauge { max-width: 100%; }
.eng-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#eng-meter { max-width: 60vw; }
/* grid/flex children must be allowed to shrink, else wide content overflows the page */
.stat-card, .ov-panel, .flow-node, .eng-card, .kpi, .inst-cell { min-width: 0; }
.set-form-tenant { white-space: nowrap; }

/* ---- Resources (per-site info sections + files) ---- */
.res-part { margin-bottom: 26px; }
.res-subhead { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.res-val { white-space: normal; overflow: visible; text-overflow: clip; color: var(--text); font-size: 13px; }
/* edit mode */
.res-sec-edit .res-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.res-sec-title { flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px; padding: 9px 10px; font-size: 14px; font-weight: 700; font-family: inherit; }
.res-sec-title:focus { border-color: var(--accent); }
.res-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.res-item-edit { display: flex; gap: 8px; align-items: center; }
.res-item-edit input { flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px; padding: 9px 10px; font-size: 14px; font-family: inherit; }
.res-item-edit input:focus { border-color: var(--accent); }
.res-item-edit .res-row-del { flex: none; min-height: 42px; padding: 0 12px; }
.res-edit-footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.res-upload { margin-bottom: 16px; }
.res-upload input[type="file"] { background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 9px 10px; font-size: 13px; font-family: inherit; text-transform: none;
  letter-spacing: 0; width: 100%; min-width: 0; }

/* ---- Notifications (superadmin) ---- */
.notif-job .notif-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 1px 7px; margin-left: 6px; }
.notif-last { color: var(--text-mute); }
.notif-actions { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.notif-actions .icon-btn { padding: 6px 10px; font-size: 12px; }
.notif-del { color: var(--err); }
.notif-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.notif-presets-lbl { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.notif-presets .icon-btn { padding: 5px 9px; font-size: 12px; }
.notif-preset-time { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); text-transform: none; letter-spacing: 0; }
.notif-preset-time input { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 5px 8px; font-family: inherit; }
.notif-form textarea { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
  padding: 9px 10px; font-family: inherit; font-size: 14px; width: 100%; resize: vertical; text-transform: none; letter-spacing: 0; }
.notif-form textarea:focus { border-color: var(--accent); }
.notif-ph { font-size: 11px; color: var(--text-mute); margin-top: 10px; }
.notif-ph code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--text-dim); font-size: 11px; }
.notif-preview { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.notif-preview-text b { font-size: 14px; }
.notif-preview-text div { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.notif-preview-img { width: 100%; max-width: 480px; border: 1px solid var(--line); border-radius: 12px; }
.notif-loghead { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin: 22px 0 8px; }
.notif-log { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.notif-log-row { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12px; flex-wrap: wrap; }
.notif-log-row:first-child { border-top: none; }
.notif-log-when { color: var(--text-mute); white-space: nowrap; }
.notif-log-title { font-weight: 600; flex: 1; min-width: 0; }
.notif-log-meta { color: var(--text-dim); white-space: nowrap; }
.notif-copy-panel { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }
.notif-copy-sel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 5px 8px; font-family: inherit; }
.notif-hint { font-size: 10px; color: var(--text-mute); text-transform: none; letter-spacing: 0; }
/* devices tab */
.notif-dev-user { font-size: 11px; color: var(--text-dim); font-weight: 700; padding: 10px 2px 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif-dev-off { opacity: 0.6; }
/* let the 4 action buttons wrap below the name on narrow screens instead of
   crushing the name to "Sh…" (the job card already wraps via .notif-job) */
.notif-dev { flex-wrap: wrap; }
.notif-dev .set-meter-main, .notif-job .notif-job-main { flex-basis: 100%; }
.notif-dev .notif-actions .icon-btn { padding: 6px 10px; font-size: 12px; }
/* job/device name lines carry trailing badges (type · paused · device kind);
   ellipsis-clipping hid them, so allow these names to wrap and keep badges visible */
.notif-job .set-meter-name, .notif-dev .set-meter-name {
  white-space: normal; overflow: visible; text-overflow: clip;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
}
.dev-del { color: var(--err); }
/* viewer-activity alert settings panel (top of the Notifications tab) */
.notif-valert { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.notif-valert-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.notif-valert-title { font-weight: 700; font-size: 14px; }
.notif-valert-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; max-width: 52ch; }
.notif-valert-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); white-space: nowrap; cursor: pointer; }
.notif-valert-switch input { width: 18px; height: 18px; accent-color: var(--accent); }
.notif-valert-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--text-dim); }
.notif-valert-row input[type="number"] { width: 84px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 6px 8px; font-family: inherit; }
.notif-valert-unit { color: var(--text-mute); }
.notif-valert-msg { color: var(--accent); font-size: 12px; }
/* Styles tab — live card-style previews */
.notif-styles { display: flex; flex-direction: column; gap: 18px; }
.nstyle-h { font-size: 13px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nstyle-tag { font-size: 11px; font-weight: 600; color: var(--text-dim); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.nstyle-img { width: 100%; max-width: 520px; border: 1px solid var(--line); border-radius: 14px; display: block; box-shadow: var(--shadow); }
.nstyle-note { font-size: 12px; margin-top: 2px; }
/* audience picker in the job editor */
.notif-aud { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.notif-aud-h { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif-aud-item { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 0 8px 8px 0; font-size: 13px; color: var(--text); cursor: pointer; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.notif-aud-item input { width: 16px; height: 16px; accent-color: var(--accent); }
/* expandable recipients on a job row */
.notif-job { flex-wrap: wrap; }
.notif-job-main { cursor: pointer; }
.notif-caret { color: var(--text-dim); font-size: 11px; }
.notif-job .notif-copy-panel { flex-basis: 100%; }
.notif-recips { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.notif-recips-h { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; margin-bottom: 8px; }
.notif-recip-user { margin-bottom: 8px; }
.notif-recip-dev { font-size: 13px; color: var(--text); padding: 3px 0 3px 14px; }
.notif-recip-dev.notif-dev-off { color: var(--text-mute); }

/* ---- Subscriptions matrix (#/subscriptions) ---- */
.subm-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.subm-tenant {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; min-height: 40px; padding: 0 12px; font: inherit; font-size: 14px;
}
.subm-chan { margin: 0; }
.subm-addc { margin-left: auto; }
.subm-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
table.subm { border-collapse: collapse; width: 100%; font-size: 13px; }
.subm th, .subm td { border-bottom: 1px solid var(--line); padding: 9px 12px; text-align: center; }
.subm tbody tr:last-child td { border-bottom: none; }
.subm-corner {
  text-align: left; position: sticky; left: 0; z-index: 3; background: var(--surface-2);
  min-width: 150px; color: var(--text-dim); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.subm thead th { background: var(--surface-2); }
.subm-rh-n { font-weight: 700; color: var(--text); white-space: nowrap; }
.subm-rh-m { font-size: 10px; color: var(--text-mute); margin-top: 2px; white-space: nowrap; }
.subm-cat td {
  text-align: left; background: var(--bg-2); color: var(--accent);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 6px 12px;
}
.subm-nh {
  text-align: left; position: sticky; left: 0; z-index: 1; background: var(--surface);
  color: var(--text); font-weight: 600; white-space: nowrap;
}
.subm-cell { background: var(--surface); }
.subm-off {
  color: var(--text-mute); font-size: 10px; border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 5px; margin-left: 4px;
}
.subm-box { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.subm-box:disabled { opacity: 0.25; cursor: not-allowed; }
.subm-note { margin-top: 12px; font-size: 12px; color: var(--text-mute); line-height: 1.5; }
.subm-chico { font-size: 12px; margin-right: 4px; letter-spacing: 1px; }
.subm-nh-dim { opacity: 0.5; }                       /* notification not sent on this channel */
.subm-rh-off .subm-rh-n { opacity: 0.55; }            /* device-less person placeholder */
.subm-rh-off .subm-rh-m { color: var(--warn); }

/* ===== SITE LOAD (superadmin: energy-signature attribution) =====
   Mobile-first at 360px; min-width queries expand it. Touch targets >= 44px.
   js/loadsig.js + docs/superpowers/specs/2026-08-12-site-load-signatures-design.md */

.sl-tabs { display: flex; gap: 6px; padding: 0 0 12px; }
.sl-tab {
  flex: 1; min-height: 44px; padding: 10px 8px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-dim);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.sl-tab.active { color: var(--text); border-color: var(--accent); background: #17233f; }

/* busy veil — keeps the previous analysis readable instead of blanking the page */
#sl-body { position: relative; }
#sl-body.sl-busy { opacity: .45; pointer-events: none; }
#sl-body.sl-busy::after {
  content: "analysing\2026"; position: absolute; inset: 0; display: flex;
  align-items: flex-start; justify-content: center; padding-top: 60px;
  font-size: 13px; color: var(--text); font-weight: 600;
}
.sl-spin svg { animation: sl-rot 1s linear infinite; }
@keyframes sl-rot { to { transform: rotate(360deg); } }

/* hero: two figures at equal weight — the unmetered share is the point of the
   page, not a caption under the bar */
.sl-hero { background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.sl-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sl-hero-fig { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.sl-hero-num { font-size: 30px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.sl-hero-unit { font-size: 14px; color: var(--text-dim); font-weight: 600; }
.sl-hero-cap { font-size: 11.5px; color: var(--text-mute); flex-basis: 100%; }
.sl-hero-warn .sl-hero-num { color: var(--warn); }
.sl-hero-warn .sl-hero-cap { color: var(--warn); opacity: .85; }
.sl-split { margin-top: 14px; }
.sl-split-bar { height: 10px; border-radius: 6px; overflow: hidden; display: flex; background: #1b2540; }
.sl-split-met { display: block; height: 100%; background: var(--accent); }
.sl-split-un  { display: block; height: 100%; background: var(--warn); opacity: .75; }
.sl-split-txt { margin-top: 8px; font-size: 12px; color: var(--text-dim); }

.sl-note { font-size: 11.5px; color: var(--text-mute); margin: 0 0 12px; line-height: 1.5; }
.sl-muted { color: var(--text-mute); font-style: italic; }

.sl-banner { background: #3a2020; border: 1px solid #5b2626; color: #fca5a5;
             padding: 10px 12px; border-radius: 9px; font-size: 12.5px; margin-bottom: 10px; }
.sl-toast { background: #17233f; border: 1px solid var(--accent); color: var(--text);
            padding: 10px 12px; border-radius: 9px; font-size: 12.5px; margin-bottom: 10px; }
.sl-retry { margin-left: 8px; min-height: 36px; padding: 6px 12px; border-radius: 8px;
            border: 1px solid var(--line); background: #16203a; color: var(--text); cursor: pointer; }

/* meter rows — a coloured rail carries depth even when the indent is subtle */
.sl-meters { display: flex; flex-direction: column; gap: 6px; }
.sl-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name kw" "bar bar" "meta meta";
  gap: 5px 8px; padding: 11px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
}
.sl-d1 { margin-left: 14px; border-left: 3px solid #2e3f63; }
.sl-d2 { margin-left: 28px; border-left: 3px solid #223252; }
.sl-d3 { margin-left: 42px; border-left: 3px solid #1c2a45; }
.sl-row-root { background: #16203a; border-color: #2e3f63; }
.sl-row-root .sl-row-name { font-size: 14.5px; }
.sl-row-tap { cursor: pointer; }
.sl-row-tap:hover, .sl-row-tap:focus-visible { border-color: var(--accent); outline: none; }
.sl-row-name { grid-area: name; font-size: 13.5px; color: var(--text); font-weight: 600; min-width: 0; }
.sl-row-kw { grid-area: kw; font-size: 14px; font-weight: 700; color: var(--text);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-kw-bad { color: var(--err); }
.sl-dead { color: var(--text-mute); }
.sl-u { font-size: 10.5px; color: var(--text-mute); margin-left: 3px; font-weight: 600; }
.sl-row-bar { grid-area: bar; height: 6px; border-radius: 4px; background: #1b2540; overflow: hidden; }
.sl-row-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.sl-bar-dim { background: #3a4a6b !important; }
.sl-bar-resid { background: var(--warn) !important; }
.sl-row-meta { grid-area: meta; font-size: 11px; color: var(--text-mute);
               display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sl-sigcount { color: var(--text-mute); }
.sl-chev { margin-left: auto; color: var(--text-dim); font-size: 15px; }
.sl-row-resid { border: 1px solid var(--line); border-left: 3px solid var(--warn); background: #1e1a12; }
.sl-row-resid .sl-row-name { color: var(--warn); }

/* findings as words, not a glyph with a tooltip nobody can reach on touch */
.sl-pill { font-size: 10.5px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; font-weight: 600; }
.sl-pill-bad  { background: #3a2020; color: #fca5a5; border: 1px solid #5b2626; }
.sl-pill-warn { background: #3a2e16; color: #fbbf24; border: 1px solid #4a3a22; }

.sl-chip { font-size: 10px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line);
           color: var(--text-mute); white-space: nowrap; background: transparent; cursor: pointer; }
.sl-chip-corroborated { color: var(--ok);   border-color: #1d5236; }
.sl-chip-contradicted { color: var(--err);  border-color: #5b2626; }
.sl-chip-assumed      { color: var(--text-dim); }
.sl-chip-sparse       { color: var(--warn); border-color: #4a3a22; }

/* signatures */
.sl-legend { font-size: 11.5px; color: var(--text-mute); padding: 0 2px 10px; }
.sl-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sl-filter { min-height: 44px; padding: 8px 12px; border-radius: 999px; font-size: 12px;
             border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); cursor: pointer; }
.sl-filter.active { color: var(--text); border-color: var(--accent); background: #17233f; }

.sl-sec { margin-bottom: 10px; }
.sl-sec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%;
               min-height: 44px; padding: 10px 12px; background: var(--surface);
               border: 1px solid var(--line); border-radius: 10px; cursor: pointer; text-align: left;
               position: sticky; top: 0; z-index: 2; }
.sl-caret { color: var(--text-mute); font-size: 12px; }
.sl-sec-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.sl-sec-tiers { margin-left: auto; display: flex; gap: 7px; font-size: 11.5px; }
.sl-t-ok { color: var(--ok); }
.sl-t-mid { color: var(--warn); }
.sl-t-none { color: var(--text-mute); }

/* One signature = ONE ROW.
   It was a ~175px card: a full-width state line, a header row, a habit line and a
   44px "name it…" button on its own row — four short facts spread over four rows.
   At 95 signatures that is ~16,600px, about 14 desktop screens, to read the list
   once. Single-line rows cut it to roughly a quarter of that, and the name box is
   always present so naming never costs a mode change. */
.sl-sig {
  display: grid; align-items: center; gap: 4px 10px;
  grid-template-columns: 14px auto auto auto 1fr;
  grid-template-areas: "st id shape mag ph" "nm nm nm nm nm";
  padding: 7px 10px; margin: 4px 0 0 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid transparent; border-radius: 9px;
}
.sl-sig-on   { border-left-color: var(--ok); }
.sl-sig-edit { border-left-color: var(--accent); background: #16203a; }
.sl-st { grid-area: st; font-size: 12px; line-height: 1; color: var(--text-mute); cursor: help; }
.sl-sig-on .sl-st { color: var(--ok); }
.sl-sig-id { grid-area: id; font-family: var(--mono); font-size: 12px; color: var(--text); font-weight: 700; }
.sl-sig-shape { grid-area: shape; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
                padding: 2px 6px; border-radius: 5px; background: #1b2540; color: var(--text-dim); }
.sl-shape-ramp  { background: #3a2a16; color: #fbbf24; }
.sl-shape-cycle { background: #16323a; color: #5eead4; }
.sl-shape-step  { background: #1b2540; color: #93b4e8; }
.sl-sig-mag { grid-area: mag; font-size: 13px; font-weight: 700; color: var(--text);
              font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-sig-ph { grid-area: ph; font-size: 11px; color: var(--text-dim); font-family: var(--mono); }
.sl-sig-habit { grid-area: hab; font-size: 11px; color: var(--text-mute);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: none; }
.sl-on  { color: var(--ok); }
.sl-unk { color: var(--warn); }
.sl-sig-name { grid-area: nm; display: flex; align-items: center; gap: 6px; min-width: 0; }

/* the instrument is a HYPOTHESIS about hardware, not a measured fact — violet is
   used nowhere else on this page, so the two never get confused */
.sl-chip-inst {
  flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid #453a7a; background: #1e1a33; color: #c4b5fd; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-chip-inst:hover, .sl-chip-inst:focus-visible { border-color: #8b7cf0; background: #262046; outline: none; }
.sl-chip-inst b { font-size: 10px; color: #8579c9; font-weight: 700; }
.sl-nameinput { flex: 1 1 140px; min-width: 0; min-height: 34px; padding: 6px 10px;
                border-radius: 8px; border: 1px solid var(--line); background: var(--bg);
                color: var(--text); font-size: 12.5px; }
.sl-nameinput:focus { border-color: var(--accent); outline: none; }
.sl-nameinput::placeholder { color: #5c6a86; font-style: italic; }

.sl-savebar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
              padding: 10px 12px; margin-bottom: 10px; border-radius: 10px;
              background: #17233f; border: 1px solid var(--accent); font-size: 12.5px; color: var(--text); }
.sl-savebar-btn { min-height: 40px; padding: 8px 16px; border-radius: 8px; margin-left: auto;
                  background: var(--accent); color: #06263a; border: none; font-weight: 700; cursor: pointer; }
.sl-savebar-btn:disabled { opacity: .6; cursor: default; }
.sl-savebar-cancel { min-height: 40px; padding: 8px 12px; border-radius: 8px;
                     background: transparent; color: var(--text-dim); border: 1px solid var(--line); cursor: pointer; }

.sl-oneoff { font-size: 11px; color: var(--text-mute); padding: 6px 10px; margin: 4px 0 0 10px;
             border: 1px dashed var(--line); border-radius: 9px; }

/* events — direction is an arrow; green/red stay reserved for healthy/fault */
.sl-events { display: flex; flex-direction: column; gap: 4px; }
.sl-evday { font-size: 11px; color: var(--text-mute); font-weight: 700; letter-spacing: .05em;
            text-transform: uppercase; padding: 10px 2px 4px; }
.sl-ev { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: center;
         padding: 9px 11px; background: var(--surface); border: 1px solid var(--line);
         border-radius: 9px; font-size: 12px; }
.sl-ev-t { font-family: var(--mono); color: var(--text); font-weight: 600; }
.sl-ev-m { color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-ev-kw { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; color: var(--text); }
.sl-ev-ph, .sl-ev-sh { font-size: 10px; color: var(--text-mute); }
.sl-ev-sh { padding: 1px 5px; border-radius: 4px; justify-self: start; }

@media (min-width: 720px) {
  .sl-tabs { max-width: 420px; }
  .sl-hero-grid { grid-template-columns: repeat(2, max-content); gap: 48px; }
  .sl-row { grid-template-columns: minmax(0,1fr) 110px 200px minmax(220px, auto);
            grid-template-areas: "name kw bar meta"; align-items: center; gap: 12px; }
  .sl-row-meta { justify-content: flex-end; }
  .sl-d1 { margin-left: 24px; }
  .sl-d2 { margin-left: 48px; }
  .sl-d3 { margin-left: 72px; }
  .sl-sec, .sl-sig, .sl-oneoff { max-width: 900px; }
  .sl-ev { grid-template-columns: 62px minmax(0,1fr) 120px 70px 92px; max-width: 900px; }
}
.sl-unattr { font-size: 10px; color: var(--text-mute); font-style: italic; }

/* live state of a signature — green rail = running right now */
.sl-sig-on { border-left: 3px solid var(--ok); }
.sl-state { font-size: 11px; font-weight: 600; margin-bottom: 6px; }
.sl-state-on  { color: var(--ok); }
.sl-state-cyc { color: #5eead4; }
.sl-state-off { color: var(--text-mute); font-weight: 500; }
.sl-state-unk { color: var(--warn); font-weight: 500; }
.sl-onbadge { font-size: 10px; padding: 2px 8px; border-radius: 999px;
              background: #10331f; color: var(--ok); border: 1px solid #1d5236; white-space: nowrap; }
.sl-filter-on.active { border-color: var(--ok); background: #10331f; color: var(--ok); }

@media (min-width: 900px) {
  /* one true single-line row: 95 signatures now fit in ~4 screens, not 14 */
  .sl-sig { grid-template-columns: 14px 62px 58px 78px 56px minmax(200px, 1fr) minmax(220px, 340px);
            grid-template-areas: "st id shape mag ph hab nm"; padding: 5px 10px; }
  .sl-sig-habit { display: block; }
}
.sl-legend-hint { color: var(--text-dim); }