/* Winston V3 — Operations screen. Operator-tier density. */

/* ── Status strip (sticky-ish across sub-tabs) ──────────────────── */
#screen-operations .ops-statusbar {
  margin: var(--space-3) 0 var(--space-2);
}
#screen-operations .ops-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--type-xs);
  font-variant-numeric: tabular-nums;
}
#screen-operations .ops-strip-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  white-space: nowrap;
}
#screen-operations .ops-strip-cell strong { font-weight: var(--weight-semi); }
#screen-operations .ops-strip-cell.warn-text { color: var(--mode-live); font-weight: var(--weight-semi); }
#screen-operations .ops-strip-cell.up   { color: var(--money-up); }
#screen-operations .ops-strip-cell.down { color: var(--money-down); }
#screen-operations .ops-strip-led {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--status-idle);
}
#screen-operations .ops-strip-led[data-tone="ok"]    { background: var(--money-up); }
#screen-operations .ops-strip-led[data-tone="warn"]  { background: var(--mode-live); }
#screen-operations .ops-strip-led[data-tone="error"] { background: var(--money-down); }

/* ── Health banner (kit Operations Overview — replaces the numbers strip) ── */
#screen-operations .ops-health-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
#screen-operations .ops-health-banner[data-tone="ok"]       { background: var(--money-up-soft);   border-color: var(--money-up-line); }
#screen-operations .ops-health-banner[data-tone="warn"]     { background: var(--warn-soft);       border-color: var(--warn-line); }
#screen-operations .ops-health-banner[data-tone="critical"] { background: var(--money-down-soft); border-color: var(--money-down-line); }
#screen-operations .ops-hb-icon { display: flex; align-items: center; color: var(--ink-3); flex-shrink: 0; }
#screen-operations .ops-health-banner[data-tone="ok"]       .ops-hb-icon { color: var(--money-up); }
#screen-operations .ops-health-banner[data-tone="warn"]     .ops-hb-icon { color: var(--warn); }
#screen-operations .ops-health-banner[data-tone="critical"] .ops-hb-icon { color: var(--money-down); }
#screen-operations .ops-hb-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
#screen-operations .ops-hb-status { font-size: var(--type-sm); font-weight: var(--weight-bold); color: var(--ink); }
#screen-operations .ops-hb-detail { font-size: var(--type-xs); }
#screen-operations .ops-hb-run { flex-shrink: 0; }

/* ── Sub-tab bar (re-styled for operator density) ───────────────── */
#screen-operations .ops-subtab-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin: 0 0 var(--space-4);
}
#screen-operations .ops-subtab-row .ops-subtabs {
  border-bottom: none;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
#screen-operations .ops-subtab-refresh {
  flex-shrink: 0;
  padding-bottom: var(--space-2);
}
#screen-operations .ops-subtabs {
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;  /* horizontal-only strip — block the coerced vertical scrollbar */
}
#screen-operations .ops-subtab {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
}
#screen-operations .ops-subtab:hover { color: var(--ink); }
#screen-operations .ops-subtab.is-active {
  color: var(--ai);
  border-bottom-color: var(--ai);
  font-weight: var(--weight-semi);
}

/* ── Control Room grid ──────────────────────────────────────────── */
#screen-operations .ops-cr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
#screen-operations .ops-cr-attn   { grid-column: 1; grid-row: 1; }
#screen-operations .ops-cr-next   { grid-column: 2; grid-row: 1; }
#screen-operations .ops-cr-tape   { grid-column: 1; grid-row: 2; }
#screen-operations .ops-cr-tiles  { grid-column: 2; grid-row: 2; }
#screen-operations .ops-cr-broker { grid-column: 1 / -1; grid-row: 3; }

@media (max-width: 900px) {
  #screen-operations .ops-cr-grid { grid-template-columns: 1fr; }
  #screen-operations .ops-cr-attn,
  #screen-operations .ops-cr-next,
  #screen-operations .ops-cr-tape,
  #screen-operations .ops-cr-tiles,
  #screen-operations .ops-cr-broker { grid-column: 1; grid-row: auto; }
}

/* Broker status card (Alpaca published status). Tones map to the status token
   family: ok=green, warn=amber (incl. maintenance), bad=red, muted=idle. */
#screen-operations .ops-bs-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
}
#screen-operations .ops-bs-checked { font-size: var(--type-xs); }
#screen-operations .ops-bs-row {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--type-sm); font-weight: var(--weight-semi); color: var(--ink-2);
}
#screen-operations .ops-bs-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--status-idle);
}
#screen-operations .ops-bs-dot[data-tone="ok"]    { background: var(--status-ok); }
#screen-operations .ops-bs-dot[data-tone="warn"]  { background: var(--status-warn); }
#screen-operations .ops-bs-dot[data-tone="bad"]   { background: var(--status-err); }
#screen-operations .ops-bs-dot[data-tone="muted"] { background: var(--status-idle); }
#screen-operations .ops-bs-affected,
#screen-operations .ops-bs-incident {
  font-size: var(--type-sm); color: var(--ink-2); margin-top: var(--space-2); line-height: 1.4;
}
#screen-operations .ops-bs-link {
  display: inline-block; margin-top: var(--space-3);
  font-size: var(--type-sm); font-weight: var(--weight-semi);
  color: var(--accent, var(--ink-2));
}

#screen-operations .ops-cr-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
#screen-operations .ops-cr-title {
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-muted);
  margin: 0 0 var(--space-3);
}
#screen-operations .ops-cr-eyebrow {
  font-size: var(--type-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-muted);
  display: block;
  margin-bottom: var(--space-2);
}

/* ── Needs Attention ────────────────────────────────────────────── */
#screen-operations .ops-clean {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--money-up-soft);
  border-radius: var(--radius-sm);
  color: var(--money-up);
  font-size: var(--type-sm);
}
#screen-operations .ops-clean-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--money-up);
  flex-shrink: 0;
}
#screen-operations .ops-clean strong { color: var(--money-up); }
#screen-operations .ops-clean .muted { color: var(--ink-muted); }

#screen-operations .ops-attn-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: 4px;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--type-sm);
}
#screen-operations .ops-attn-row[data-sev="warn"]  { border-left-color: var(--mode-live);  background: var(--mode-live-soft); }
#screen-operations .ops-attn-row[data-sev="error"] { border-left-color: var(--money-down); background: var(--money-down-soft); }
#screen-operations .ops-attn-time { color: var(--ink-muted); font-size: var(--type-xs); padding-top: 2px; white-space: nowrap; }
#screen-operations .ops-attn-body strong { font-weight: var(--weight-semi); }

/* ── What's next ────────────────────────────────────────────────── */
#screen-operations .ops-next-task {
  padding: var(--space-3);
  background: var(--ai-soft);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  font-size: var(--type-sm);
}
#screen-operations .ops-next-row {
  display: grid;
  grid-template-columns: 64px 50px 1fr auto;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--type-sm);
  align-items: baseline;
}
#screen-operations .ops-next-row:last-child { border-bottom: none; }
#screen-operations .ops-next-sym { font-weight: var(--weight-semi); }

/* ── Today's tape ───────────────────────────────────────────────── */
#screen-operations .ops-tape-row {
  display: grid;
  grid-template-columns: 96px 200px 56px 1fr;
  gap: var(--space-2);
  padding: 4px var(--space-2);
  font-size: var(--type-xs);
  border-bottom: 1px solid var(--hairline);
  border-left: 3px solid transparent;
  align-items: baseline;
}
#screen-operations .ops-tape-row:last-child { border-bottom: none; }
/* Severity is encoded primarily on the 3px left bar (not color-alone
   background tint, which fails sunlight + colour-blind users at 3-4%
   alpha). Build review B-C3 / docs/why.md#UI6. */
#screen-operations .ops-tape-row[data-tone="trade"]  { border-left-color: var(--ai); }
#screen-operations .ops-tape-row[data-tone="hedge"]  { border-left-color: var(--sleeve-options); }
#screen-operations .ops-tape-row[data-tone="error"]  {
  border-left-color: var(--money-down);
  background: var(--money-down-soft);
}
#screen-operations .ops-tape-ts { color: var(--ink-muted); white-space: nowrap; }
#screen-operations .ops-tape-name { color: var(--ink); font-weight: var(--weight-semi); }
#screen-operations .ops-tape-sym { color: var(--ai); }
#screen-operations .ops-tape-detail { color: var(--ink-muted); word-break: break-word; }

/* #101 — Collapsed-row multiplier badge inline with the timestamp +
   a subtle left bar so the operator can spot stacked rows at a glance. */
#screen-operations .ops-tape-multi {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 var(--space-1);
  font-size: var(--type-xs);
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  color: var(--ink);
  font-weight: var(--weight-bold);
}
#screen-operations .ops-tape-range {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--ink-muted);
}
#screen-operations .ops-tape-row[data-collapsed="1"] {
  box-shadow: inset 2px 0 0 var(--ink-muted);
}

@media (max-width: 720px) {
  #screen-operations .ops-tape-row { grid-template-columns: 60px 1fr; }
  #screen-operations .ops-tape-row .ops-tape-sym,
  #screen-operations .ops-tape-row .ops-tape-detail { grid-column: 2; }
}

/* ── System tiles + engines ────────────────────────────────────── */
#screen-operations .ops-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
}
#screen-operations .ops-tile {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#screen-operations .ops-tile-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-muted);
  font-weight: var(--weight-semi);
}
#screen-operations .ops-tile-value { font-size: var(--type-sm); color: var(--ink); font-weight: var(--weight-semi); }

#screen-operations .ops-engines {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--hairline);
}
#screen-operations .ops-tile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: var(--type-sm);
}
#screen-operations .ops-tile-key { color: var(--ink-2); font-family: var(--font-mono); }
#screen-operations .ops-tile-val {
  font-family: var(--font-mono);
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}
#screen-operations .ops-tile-val[data-tone="ok"]   { background: var(--money-up-soft); color: var(--money-up); }
#screen-operations .ops-tile-val[data-tone="warn"] { background: var(--warn-soft);     color: var(--warn); }
#screen-operations .ops-tile-val[data-tone="off"]  { background: var(--surface-3);     color: var(--ink-muted); }

/* ── Agents — engine toggles ───────────────────────────────────── */
#screen-operations .ops-engine-grid {
  display: grid;
  /* All engine toggles on one row at desktop (operator: no wrapping), auto-
     adapting to the engine count so a new sleeve never wraps or needs a bump. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
@media (max-width: 720px) {
  #screen-operations .ops-engine-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); }
}
#screen-operations .ops-engine-toggle {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out);
}
#screen-operations .ops-engine-toggle:hover { border-color: var(--ai-line); }
/* #121 three-state corral. armed = enabled + sleeve can fund a position
   (green); staged = enabled but cash below per-position min (amber, same
   warn tokens as the Desk chip); off = flag is off (grey, dim). */
#screen-operations .ops-engine-toggle[data-state="armed"],
#screen-operations .ops-engine-toggle[data-state="on"] {
  border-color: var(--money-up);
  background: var(--money-up-soft);
}
/* L2 (UAT Stream F): staged was reading too close to off at chip scale —
   both lived in the muted/amber-tint band. Now staged carries a solid
   2px amber outline + a left-edge amber bar to say "configured, waiting";
   off drops opacity and uses a neutral dashed border to say "intentionally
   parked, nothing's happening here." */
#screen-operations .ops-engine-toggle[data-state="staged"] {
  border-color: var(--warn);
  border-width: 2px;
  background: var(--warn-soft);
  box-shadow: inset 4px 0 0 var(--warn);
}
#screen-operations .ops-engine-toggle[data-state="off"] {
  border-color: var(--border);
  border-style: dashed;
  background: var(--surface-2);
  opacity: 0.7;
}
#screen-operations .ops-engine-label {
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  color: var(--ink-muted);
}
#screen-operations .ops-engine-state {
  font-family: var(--font-mono);
  font-size: var(--type-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
#screen-operations .ops-engine-toggle[data-state="armed"] .ops-engine-state,
#screen-operations .ops-engine-toggle[data-state="on"] .ops-engine-state { color: var(--money-up); }
#screen-operations .ops-engine-toggle[data-state="staged"] .ops-engine-state { color: var(--warn); }
#screen-operations .ops-engine-toggle[data-state="off"] .ops-engine-state { color: var(--ink-muted); }
#screen-operations .ops-engine-meta { font-size: var(--type-xs); }

/* ── Agent table ───────────────────────────────────────────────── */
#screen-operations .agent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-sm);
}
#screen-operations .agent-table th, #screen-operations .agent-table td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--hairline);
  text-align: left;
}
#screen-operations .agent-table th {
  color: var(--ink-muted);
  font-weight: var(--weight-semi);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--surface-2);
}
/* #129 — Pills read as lowercase tags so the Agents row carries one
   typography convention (monospace name + monospace engine + lowercase
   pill) instead of three competing ones. */
#screen-operations .agent-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  font-family: var(--font-mono);
}
#screen-operations .agent-pill[data-state="active"] { background: var(--money-up-soft); color: var(--money-up); }
#screen-operations .agent-pill[data-state="paused"] { background: var(--surface-3); color: var(--ink-muted); }
#screen-operations .agent-pill[data-state="off"]    { background: var(--money-down-soft); color: var(--money-down); }
/* #136: liveness states for always-on daemons that are config-enabled but
   not actually alive. `down` reads the same way "off" does — red, attention-
   demanding — because a dead always-on daemon IS a critical condition. `stale`
   reads amber (warning). `idle` is the calm "scheduled work, not its window
   yet" state — quieter than "active" so a paused intraday-monitor at 6am
   doesn't compete for attention. */
#screen-operations .agent-pill[data-state="down"]   { background: var(--money-down-soft); color: var(--money-down); }
#screen-operations .agent-pill[data-state="stale"]  { background: var(--warn-soft, rgba(220, 138, 0, 0.12)); color: var(--warn, #b06900); }
#screen-operations .agent-pill[data-state="idle"]   { background: var(--surface-3); color: var(--ink-muted); }

/* Tracker #141 M4: suppress the redundant account-state strip on Operations
   when the global health banner is showing — the operator already sees
   the same liveness signal at the top of the app; doubling burns ~80px. */
.app:has(.health-banner:not([hidden])) #screen-operations .ops-statusbar {
  display: none;
}

/* ── Events tape ───────────────────────────────────────────────── */
/* Tracker #141 M4: collapse the chip row + search input into ONE row
   instead of stacking. Search input flexes to fill remaining width.
   On narrow viewports they re-stack (chips wrap, search fills 100%). */
#screen-operations .ops-event-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
#screen-operations .ops-event-controls .chip-row {
  flex: 0 1 auto;
}
#screen-operations .ops-event-search {
  flex: 1 1 240px;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  background: var(--surface);
}
#screen-operations .ops-event-search:focus {
  outline: 2px solid var(--ai-soft);
  border-color: var(--ai);
}
#screen-operations .event-list {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  max-height: 60vh;
  overflow-y: auto;
}
#screen-operations .event-row {
  display: grid;
  grid-template-columns: 96px 220px 1fr;
  gap: var(--space-2);
  padding: 4px var(--space-2);
  border-bottom: 1px solid var(--hairline);
  word-break: break-word;
  align-items: baseline;
}
#screen-operations .event-row:last-child { border-bottom: none; }
#screen-operations .event-row[data-tone="error"] { background: var(--money-down-soft); }
#screen-operations .event-row[data-tone="warn"]  { background: var(--mode-live-soft); }
#screen-operations .event-ts { color: var(--ink-muted); white-space: nowrap; }
#screen-operations .event-name { color: var(--ai); font-weight: var(--weight-semi); }
#screen-operations .event-payload { color: var(--ink-2); }

/* ── Tracker + Audit ───────────────────────────────────────────── */
#screen-operations .tracker-row,
#screen-operations .audit-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: center;
  font-size: var(--type-sm);
}
#screen-operations .tracker-row:last-child,
#screen-operations .audit-row:last-child { border-bottom: none; }
#screen-operations .severity-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
#screen-operations .severity-pill[data-sev="critical"] { background: var(--money-down-soft); color: var(--money-down); }
#screen-operations .severity-pill[data-sev="high"]     { background: var(--mode-live-soft); color: var(--mode-live); }
#screen-operations .severity-pill[data-sev="medium"]   { background: var(--surface-3); color: var(--ink-2); }
#screen-operations .severity-pill[data-sev="low"]      { background: var(--surface-2); color: var(--ink-muted); }
#screen-operations .severity-pill[data-sev="nit"]      { background: var(--surface-2); color: var(--ink-faint); }

/* ── Tracker #084 — Operations 5-category rollup ────────────────────── */
#screen-operations .ops-rollup {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
#screen-operations .ops-rollup-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
#screen-operations .ops-rollup-card {
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--ink-muted);
}
#screen-operations .ops-rollup-card[data-status="green"]   { border-left-color: var(--money-up); }
#screen-operations .ops-rollup-card[data-status="amber"]   { border-left-color: var(--mode-live); }
#screen-operations .ops-rollup-card[data-status="red"]     { border-left-color: var(--money-down); }
#screen-operations .ops-rollup-card[data-status="unknown"] { border-left-color: var(--ink-faint); }
/* #122 — friendly empty-state for the rollup card. Neutral info styling,
   NOT the muted-grey "error" look we used to ship, so an operator
   reading "Rollup unavailable: not found" while paused doesn't
   misread it as a system-health alarm. */
#screen-operations .ops-rollup-empty {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--brand-accent, var(--ink-muted));
  border-radius: var(--radius-sm);
  font-size: var(--type-sm);
  margin-top: var(--space-3);
}
#screen-operations .ops-rollup-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
}
#screen-operations .ops-rollup-dot,
#screen-operations .ops-rollup-unit-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--ink-faint);
}
#screen-operations .ops-rollup-dot[data-status="green"],
#screen-operations .ops-rollup-unit-dot[data-status="green"]   { background: var(--money-up); }
#screen-operations .ops-rollup-dot[data-status="amber"],
#screen-operations .ops-rollup-unit-dot[data-status="amber"]   { background: var(--mode-live); }
#screen-operations .ops-rollup-dot[data-status="red"],
#screen-operations .ops-rollup-unit-dot[data-status="red"]     { background: var(--money-down); }
#screen-operations .ops-rollup-dot[data-status="unknown"],
#screen-operations .ops-rollup-unit-dot[data-status="unknown"] { background: var(--ink-faint); }
#screen-operations .ops-rollup-label {
  font-size: var(--type-sm);
  color: var(--ink-1);
}
#screen-operations .ops-rollup-count {
  margin-left: auto;
  font-size: var(--type-xs);
  font-family: var(--font-mono);
}
#screen-operations .ops-rollup-failing,
#screen-operations .ops-rollup-tooltip {
  margin-top: var(--space-2);
}
#screen-operations .ops-rollup-toggle {
  margin-top: var(--space-2);
  font-size: var(--type-xs);
  background: transparent;
  border: none;
  color: var(--ink-2);
  cursor: pointer;
  padding: 2px 0;
}
#screen-operations .ops-rollup-toggle:hover { color: var(--ink-1); }
#screen-operations .ops-rollup-units {
  display: none;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
  gap: var(--space-1);
}
#screen-operations .ops-rollup-card.is-open .ops-rollup-units {
  display: grid;
}
#screen-operations .ops-rollup-unit {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding: 2px 0;
}

/* ── Operations Overview kit panels (design-port) — downtime chart +
   daily-schedule, replacing the old needs-attention/what's-next cr-grid.
   Ported from kit screens.css .ops-panel-* / .ops-dt-* / .ops-sched-*,
   scoped to #screen-operations, tokens 1:1. ── */
#screen-operations .ops-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 900px) { #screen-operations .ops-panel-grid { grid-template-columns: 1fr; } }
#screen-operations .ops-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
#screen-operations .ops-panel-tall { min-height: 340px; display: flex; flex-direction: column; }
#screen-operations .ops-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
#screen-operations .ops-panel-title { font-size: var(--type-md); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
#screen-operations .ops-dt-periods { display: flex; gap: var(--space-1); }
#screen-operations .ops-dt-period { font-size: var(--type-xs); font-weight: var(--weight-semi); padding: 3px 9px; border-radius: var(--radius-sm); color: var(--ink-muted); cursor: pointer; }
#screen-operations .ops-dt-period.is-active { background: var(--ai-soft); color: var(--ai); }
#screen-operations .ops-dt-sub { font-size: var(--type-xs); margin-bottom: var(--space-3); }
#screen-operations .ops-dt-chart { flex: 1; min-height: 180px; position: relative; }
#screen-operations .ops-dt-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
#screen-operations .ops-dt-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--type-xs); color: var(--ink-muted); }
#screen-operations .ops-dt-legend-item i { width: 9px; height: 9px; border-radius: 2px; }
#screen-operations .ops-dt-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--type-sm); padding: var(--space-5) var(--space-3); }
#screen-operations .ops-sched { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: 300px; }
#screen-operations .ops-sched-row { display: grid; grid-template-columns: 54px 1fr auto; gap: var(--space-3); align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--hairline); }
#screen-operations .ops-sched-row:last-child { border-bottom: none; }
#screen-operations .ops-sched-row[data-kind="infra"] { opacity: 0.7; }
#screen-operations .ops-sched-time { font-size: var(--type-xs); color: var(--ink-2); }
#screen-operations .ops-sched-name { font-size: var(--type-sm); }
#screen-operations .ops-sched-sub { font-size: var(--type-xs); text-align: right; }