/* Ops Center — Prod Watch. Uses Mission Control tokens from base.css (light + dark). */
#ops-root {
  --svc-0: #2563eb; --svc-1: #0e7490; --svc-2: #7c3aed; --svc-3: #c2410c;
  --svc-4: #15803d; --svc-5: #be185d; --svc-6: #4d7c0f; --svc-7: #a16207;
  min-width: 0;
}
@media (prefers-color-scheme: dark) {
  #ops-root {
    --svc-0: #6ea0ff; --svc-1: #22d3ee; --svc-2: #c4b5fd; --svc-3: #fb923c;
    --svc-4: #4ade80; --svc-5: #f472b6; --svc-6: #a3e635; --svc-7: #facc15;
  }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* header + stage segmented control */
.ops-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.ops-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ops-title h1 { margin: 0; }
.ops-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
}
.ops-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 32px;
}
.ops-seg-btn:hover { color: var(--ink); }
.ops-seg-btn.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.ops-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ops-act { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); }
.ops-act--live { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.ops-act--recent { background: var(--warn); }

/* panels */
.ops-status,
.ops-panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  background: var(--surface);
  box-shadow: var(--shadow);
  min-width: 0;
}
.ops-status { margin-bottom: 1rem; border-left: 4px solid var(--accent); }
.ops-status.stale { border-left-color: var(--rule-strong); }
.ops-status.stale h2, .ops-status.stale p { opacity: 0.7; }
.ops-status h2 { margin: 0.2rem 0 0.35rem; font-size: 1.15rem; }
.ops-now-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.ops-status .phase {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  letter-spacing: 0.02em;
}
.ops-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0 0.75rem;
}
.ops-progress-track {
  flex: 1 1 8rem;
  min-width: 6rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.ops-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.2s ease; }
.ops-progress-pct { font-weight: 600; font-size: 0.85rem; }
.ops-progress-eta { font-size: 0.85rem; }

.ops-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .ops-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ops-grid .ops-panel--wide { grid-column: 1 / -1; }
}
.ops-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.ops-panel h3 { margin: 0; font-size: 0.95rem; }
.ops-panel h4 { margin: 0.6rem 0 0.35rem; font-size: 0.8rem; }
.ops-panel .err, .bad-text { color: var(--bad); }
.ops-panel .err { font-size: 0.85rem; }

.ops-health-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--rule));
  background: color-mix(in srgb, var(--bad) 5%, var(--surface));
}
.ops-health-strip-label { font-size: 0.82rem; font-weight: 600; color: var(--bad); }
.ops-perr-chip {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.ops-panel-error {
  border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--rule));
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.65rem;
  background: color-mix(in srgb, var(--bad) 4%, transparent);
}
.ops-perr-summary { margin: 0 0 0.35rem; font-size: 0.88rem; }
.ops-perr-pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.75rem;
  max-height: 12rem;
  overflow: auto;
  margin: 0.35rem 0;
  padding: 0.5rem;
  background: var(--surface-2);
  border-radius: 6px;
}
.ops-perr-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.5rem; }
.ops-perr-actions a { font-size: 0.78rem; }
.ops-perr-history ul { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.78rem; color: var(--muted); }
.ops-perr-needs { margin: 0.35rem 0; font-size: 0.82rem; color: var(--bad); }
.ops-table-wrap { overflow-x: auto; max-width: 100%; }
.ops-panel table { width: 100%; font-size: 0.82rem; border-collapse: collapse; }
.ops-panel th, .ops-panel td {
  text-align: left;
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.ops-panel th { color: var(--muted); font-weight: 600; font-size: 0.75rem; white-space: nowrap; }
.ops-panel .chip.ok { background: var(--ok-soft); color: var(--ok); }
.ops-panel .chip.bad { background: var(--bad-soft); color: var(--bad); }
.ops-panel .chip.now { background: var(--accent-soft); color: var(--accent); }

/* service colour chips */
.ops-svc, .ops-src {
  --c: var(--svc-0);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  white-space: nowrap;
  cursor: pointer;
}
.svc-0 { --c: var(--svc-0); } .svc-1 { --c: var(--svc-1); } .svc-2 { --c: var(--svc-2); } .svc-3 { --c: var(--svc-3); }
.svc-4 { --c: var(--svc-4); } .svc-5 { --c: var(--svc-5); } .svc-6 { --c: var(--svc-6); } .svc-7 { --c: var(--svc-7); }
.ops-src { padding: 4px 10px; min-height: 28px; opacity: 0.55; background: transparent; }
.ops-src.on { opacity: 1; background: color-mix(in srgb, var(--c) 14%, transparent); }
.ops-src:focus-visible, .ops-svc:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ops-health { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); }
.ops-health--ok { background: var(--ok); }
.ops-health--warn { background: var(--warn); }
.ops-health--bad { background: var(--bad); }

/* live logs */
.ops-logs-panel { margin-bottom: 1rem; }
.ops-logs-panel > summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}
.ops-logs-panel > summary::-webkit-details-marker { display: none; }
.ops-logs-panel > summary::before { content: "▸"; color: var(--muted); }
.ops-logs-panel[open] > summary::before { content: "▾"; }
.ops-logs-panel[open] > summary { margin-bottom: 0.6rem; }
.ops-src-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.6rem; }
.ops-src-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 0.6rem; position: relative; }
.ops-src-selected { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; max-width: 100%; overflow: hidden; }
.ops-src-more { white-space: nowrap; }
.ops-src-picker {
  position: absolute;
  z-index: 20;
  left: 0;
  top: calc(100% + 4px);
  width: min(100%, 36rem);
  max-height: min(60vh, 420px);
  overflow: auto;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ops-src-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.5rem; }
.ops-src-search { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.45rem; }
.ops-src-search input { font: inherit; padding: 6px 8px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--surface); color: var(--ink); }
.ops-src-group { margin-bottom: 0.55rem; }
.ops-src-group-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.ops-src-opt {
  display: grid;
  grid-template-columns: auto auto minmax(4rem, 1fr) minmax(0, 2fr);
  gap: 6px 8px;
  align-items: center;
  padding: 3px 0;
  font-size: 0.82rem;
  cursor: pointer;
}
.ops-src-opt.stale { opacity: 0.55; }
.ops-src-opt input { margin: 0; }
.ops-src-id { font-weight: 600; }
.ops-src-grp { font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-src-picker-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px solid var(--rule); }
.ops-src-bucket { margin: 0 0 0.35rem; }
.ops-src-picker-btn { font-weight: 600; }
.ops-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-bottom: 0.5rem; align-items: center; }
.ops-toolbar label { font-size: 0.8rem; display: flex; gap: 0.35rem; align-items: center; color: var(--muted); }
.ops-toolbar label.grow { flex: 1 1 10rem; }
.ops-toolbar label.grow input { flex: 1; min-width: 0; }
.ops-toolbar input, .ops-toolbar select {
  font: inherit;
  font-size: 0.82rem;
  padding: 4px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}
.ops-follow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.82rem; margin-bottom: 0.4rem; }
.ops-health-note { color: var(--warn); margin: 0 0 0.4rem; }
.ops-logs {
  font-family: var(--mono);
  font-size: 0.72rem;
  max-height: 460px;
  overflow: auto;
  background: var(--surface-2);
  color: var(--ink);
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--rule);
}
.ops-empty { padding: 0.75rem 0.25rem; font-family: var(--font); }
.ops-line {
  display: grid;
  grid-template-columns: 4.6rem 6.2rem 3.2rem 7.5rem 4.5rem minmax(0, 1fr);
  gap: 0 0.5rem;
  align-items: baseline;
  padding: 2px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}
.ops-line .ops-svc { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ops-t { color: var(--muted); }
.ops-lvl { font-weight: 700; color: var(--muted); }
.lvl-error { background: color-mix(in srgb, var(--bad) 7%, transparent); }
.lvl-error .ops-lvl { color: var(--bad); }
.lvl-warn .ops-lvl { color: var(--warn); }
.lvl-debug { color: var(--muted); }
.ops-scan { display: inline-flex; gap: 2px; min-width: 0; }
.ops-scan-btn, .ops-copy {
  font: inherit;
  border: 0;
  background: none;
  color: var(--accent);
  padding: 0;
  cursor: pointer;
}
.ops-scan-btn:hover { text-decoration: underline; }
.ops-copy { color: var(--muted); }
.ops-pstage { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-msg { white-space: pre-wrap; word-break: break-word; min-width: 0; }
.ops-fields { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; margin-left: 6px; }
.ops-kv { color: var(--ink-2); }
.ops-kv i { font-style: normal; color: var(--muted); margin-right: 3px; }
.ops-kv i::after { content: "="; }

/* workers */
.ops-workers th.sortable { cursor: pointer; user-select: none; }
.ops-workers tbody tr { cursor: pointer; }
.ops-workers tbody tr:hover, .ops-workers tbody tr:focus-visible { background: var(--surface-2); outline: none; }
.ops-workers tr.row-bad td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.ops-workers tr.row-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* alarms */
.ops-alarm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ops-alarm { border: 1px solid var(--rule); border-radius: 8px; padding: 0.5rem 0.65rem; }
.ops-alarm--alarm { border-color: color-mix(in srgb, var(--bad) 45%, var(--rule)); background: color-mix(in srgb, var(--bad) 4%, transparent); }
.ops-alarm-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ops-alarm-name { font-size: 0.88rem; }
.ops-alarm-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 0.4rem 0 0; font-size: 0.82rem; }
.ops-alarm-dl dt { color: var(--muted); }
.ops-alarm-dl dd { margin: 0; word-break: break-word; }
.ops-sev { font-size: 10.5px; font-weight: 700; text-transform: uppercase; padding: 1px 7px; border-radius: 4px; background: var(--idle-soft); color: var(--idle); }
.ops-sev--critical { background: var(--bad); color: #fff; }
.ops-sev--high { background: var(--bad-soft); color: var(--bad); }
.ops-sev--medium { background: var(--warn-soft); color: var(--warn); }
.ops-group { color: var(--muted); }
.ops-group--bad { color: var(--bad); }
.ops-allclear { color: var(--ok); font-weight: 600; font-size: 0.85rem; margin: 0.25rem 0; }
.ops-group-toggle { margin-top: 0.6rem; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 4px 0; cursor: pointer; }

/* phone */
@media (max-width: 760px) {
  .ops-head { align-items: stretch; }
  .ops-seg { width: 100%; }
  .ops-seg-btn { flex: 1; justify-content: center; min-height: 40px; }
  .ops-status, .ops-panel { padding: 0.75rem; }
  .ops-line {
    grid-template-columns: auto auto auto minmax(0, 1fr);
    grid-template-areas: "t svc lvl scan" "msg msg msg msg";
    padding: 4px 0;
  }
  .ops-line .ops-t { grid-area: t; }
  .ops-line .ops-svc { grid-area: svc; }
  .ops-line .ops-lvl { grid-area: lvl; }
  .ops-line .ops-scan { grid-area: scan; justify-self: end; }
  .ops-line .ops-pstage { display: none; }
  .ops-line .ops-msg { grid-area: msg; }
  .ops-toolbar label { flex: 1 1 100%; }
  .ops-toolbar label input, .ops-toolbar label select { flex: 1; }
  .ops-workers thead { display: none; }
  .ops-workers, .ops-workers tbody { display: block; width: 100%; }
  .ops-workers tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0.75rem; border-bottom: 1px solid var(--rule); padding: 0.4rem 0; }
  .ops-workers td { display: flex; justify-content: space-between; gap: 0.5rem; border: 0; padding: 2px 0.25rem; min-width: 0; }
  .ops-workers td:first-child { grid-column: 1 / -1; }
  .ops-workers td::before { content: attr(data-label); color: var(--muted); font-size: 0.75rem; }
}