/* OpsUI skin — loaded only when ui_mode() === 'alt'. Classic is untouched.
 *
 * Strategy, in order of leverage:
 *   1. Re-point the app's existing design tokens. 48 of 76 pages already
 *      style through var(--panel) / var(--border) / ..., so redefining them
 *      here rethemes those pages wholesale with no page edits.
 *   2. Restyle the shared class vocabulary (.card 290x, .btn 295x, .pill 83x,
 *      .kpi-*, .detail-*, .snapshot-*, tables) to OpsUI proportions.
 *   3. !important only where pages hardcode hex — 53 pages do, and an inline
 *      style="background:#..." cannot be beaten any other way. Scoped to
 *      body.ui-alt so it can never leak into classic.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────── */
/* Values taken verbatim from OpsUI's own styles/tokens.css (frontend_alt on
   RavenTek-Products/manageddex-msp @ dev), not eyeballed from screenshots.
   Two things there that a guess gets wrong:

   - The ramp is charcoal, not near-black. Near-black behind light text causes
     halation, which compounds over a shift on a wall display.
   - There are FIVE surface levels, not the usual three. With only
     surface/raised/hover an active tab and an inactive tab resolve to the same
     fill, and the "you are here" signal disappears.

   Semantic hues are reserved and must not be reused decoratively: --accent is
   "interactive", --ai is AI surfaces only, --green is LIVE/ACTIVE only. */
body.ui-alt {
  --bg: #1c1c22;
  --surface: #232329;
  --surface-2: #2a2a31;
  --hover: #313139;
  --panel: #3a3a43;
  --border: #3f3f48;
  --border-2: #50505a;

  --text: #f2f2f5;
  --text-sec: #c4c4ce;
  --text-mut: #a5a5ae;

  --accent: #38bdf8;
  --amber: #fbbf24;
  --red: #f87171;
  --green: #34d399;
  --ai: #c084fc;
  --brand: #3b82f6;

  /* Classic's own token names, re-pointed so the 48 pages that style through
     them inherit the OpsUI ramp with no page edits. */
  --muted: var(--text-mut);
  --link: var(--accent);
  --pos: var(--green);
  --neg: var(--red);
  --neu: var(--text-mut);

  /* OpsUI dropped Space Grotesk / JetBrains Mono: those faces stylize digits,
     and a 0 reading as 8 was a real review complaint. */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --fs-row: 14px;
  --fs-label: 13px;
  --fs-sub: 12px;
  --row-h: 40px;

  --op-rail: var(--surface);
  --op-hover: var(--hover);
  --op-accent: var(--accent);

  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-row);
}

/* ── 2. Shell ──────────────────────────────────────────────────── */
body.ui-alt .app-shell { display: flex; min-height: 100vh; }
body.ui-alt .app-main { flex: 1; min-width: 0; background: var(--bg); }
body.ui-alt .page-shell { padding: 20px 24px 60px; max-width: 1400px; }
body.ui-alt .sidebar { display: none; }

body.ui-alt .opsui-rail {
  width: 208px; flex: none; background: var(--op-rail);
  border-right: 1px solid var(--border); padding: 10px 0 30px;
}
body.ui-alt .opsui-group {
  padding: 14px 16px 5px; font-size: 10px;
  letter-spacing: .1em; color: var(--muted);
}
body.ui-alt .opsui-link {
  display: flex; align-items: center; gap: 10px; padding: 7px 16px;
  font-size: 13.5px; color: var(--text); text-decoration: none;
  border-left: 2px solid transparent;
}
body.ui-alt .opsui-link:hover { background: var(--op-hover); }
body.ui-alt .opsui-link.is-active { background: #182029; border-left-color: var(--op-accent); }
body.ui-alt .opsui-ico { color: var(--muted); width: 14px; text-align: center; }

body.ui-alt .opsui-top {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); background: var(--op-rail);
}
body.ui-alt .opsui-brand { font-weight: 700; letter-spacing: .04em; }
body.ui-alt .opsui-badge {
  border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 8px; font-size: 11px; color: var(--muted);
}
body.ui-alt .opsui-spacer { flex: 1; }
body.ui-alt .opsui-btn {
  border: 1px solid var(--border); border-radius: 6px; background: transparent;
  color: var(--text); padding: 5px 11px; font-size: 12.5px;
  cursor: pointer; text-decoration: none;
}
body.ui-alt .opsui-btn:hover { background: var(--op-hover); }

body.ui-alt .opsui-tabs {
  display: flex; gap: 4px; padding: 0 16px;
  border-bottom: 1px solid var(--border); background: var(--panel); overflow-x: auto;
}
body.ui-alt .opsui-tab {
  padding: 11px 12px; font-size: 13.5px; color: var(--muted);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
body.ui-alt .opsui-tab:hover { color: var(--text); }
body.ui-alt .opsui-tab.is-active { color: var(--text); border-bottom-color: var(--op-accent); }

/* ── 3. Page header ────────────────────────────────────────────── */
/* Classic renders a gradient hero banner; OpsUI wants a plain title block. */
body.ui-alt .page-hero,
body.ui-alt .page-hero-card {
  background: none !important; border: 0 !important;
  box-shadow: none !important; padding: 0 0 14px !important;
}
body.ui-alt .eyebrow { display: none; }
body.ui-alt .page-title,
body.ui-alt .page-title-compact { font-size: 25px !important; margin: 0 0 3px !important; }
body.ui-alt .page-intro { color: var(--muted); font-size: 13.5px; margin: 0; }

/* ── 4. Shared vocabulary ──────────────────────────────────────── */
body.ui-alt .card,
body.ui-alt .panel,
body.ui-alt .content-section {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body.ui-alt .btn {
  border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--text);
  padding: 5px 11px; font-size: 12.5px;
}
body.ui-alt .btn:hover { background: var(--op-hover); }
body.ui-alt .btn.primary {
  background: #1f6feb; border-color: #1f6feb; color: #fff;
}
body.ui-alt .muted, body.ui-alt .sub, body.ui-alt .label,
body.ui-alt .detail-label, body.ui-alt .snapshot-k, body.ui-alt .k {
  color: var(--muted) !important;
}
body.ui-alt a, body.ui-alt .link { color: var(--link); }

/* Count/status chips. Semantic colours are deliberately NOT overridden —
   OpsUI uses the same red/amber/green language for severity. */
body.ui-alt .pill {
  border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 8px; font-size: 11.5px;
}

body.ui-alt .kpi-title { color: var(--muted); font-size: 11.5px; letter-spacing: .04em; }
body.ui-alt .num, body.ui-alt .value,
body.ui-alt .detail-value, body.ui-alt .snapshot-v, body.ui-alt .v {
  font-variant-numeric: tabular-nums;
}
body.ui-alt .empty-state { color: var(--muted); }

/* ── 5. Tables ─────────────────────────────────────────────────── */
/* Pages name their tables individually (wap-table, cq-table, ao-tbl, …), so
   match the element rather than chase 20 class names. */
body.ui-alt table { border-collapse: collapse; width: 100%; }
body.ui-alt th {
  color: var(--muted) !important;
  background: transparent !important;
  font-size: 12px; font-weight: 600; text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--border) !important;
  white-space: nowrap;
}
body.ui-alt td {
  padding: 8px 10px; font-size: 13px;
  border-bottom: 1px solid var(--border) !important;
}
body.ui-alt tbody tr:hover td { background: var(--op-hover) !important; }
body.ui-alt tbody tr:last-child td { border-bottom: 0 !important; }

/* ── 6. Hardcoded-hex holdouts ─────────────────────────────────── */
/* 53 pages set panel colours inline or in a page <style>. Inline styles beat
   stylesheets, so these are the only rules that can reach them. Attribute
   selectors are blunt on purpose: they target the *chrome* declarations
   (panel fills, borders) and leave text colour alone, so severity reds and
   greens set inline still read correctly. */
body.ui-alt [style*="background:#"],
body.ui-alt [style*="background: #"],
body.ui-alt [style*="background-color:#"],
body.ui-alt [style*="background-color: #"] {
  background: var(--panel) !important;
}
body.ui-alt [style*="border:1px solid #"],
body.ui-alt [style*="border: 1px solid #"] {
  border-color: var(--border) !important;
}

/* Escape hatch: anything that must keep its own colour in alt mode. */
body.ui-alt .opsui-keep,
body.ui-alt .opsui-keep * { background: revert !important; border-color: revert !important; }

/* ── Fixes from the first real render ──────────────────────────── */

/* The dev banner and the beta bar sit above the shell and were still using
   the classic yellow. OpsUI keeps them, quieter. */
body.ui-alt .dev-banner {
  background: #21262d !important; color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 11.5px; font-weight: 500;
}

/* Cards were still drawing the classic accent bar on their top edge. */
body.ui-alt .card { border-top-color: var(--border) !important; }

/* Section headings inside cards: OpsUI sets them smaller and tighter than
   the classic h2, which is sized for the gradient hero. */
body.ui-alt .card h2 { font-size: 16px; margin: 0 0 4px; }
body.ui-alt .card h3 { font-size: 14px; margin: 0 0 4px; }

/* Screenshot spacing: content starts hard against the tab row, and cards
   stack tighter than the classic 20px rhythm. */
body.ui-alt .card + .card { margin-top: 12px; }

/* Inputs and selects inherited the classic light fills. */
body.ui-alt input[type="text"], body.ui-alt input[type="search"],
body.ui-alt input[type="password"], body.ui-alt input[type="number"],
body.ui-alt select, body.ui-alt textarea {
  background: #0d1117 !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: 6px;
  padding: 5px 8px; font-size: 13px;
}

/* ── Per-page class prefixes ───────────────────────────────────── */
/* Pages define their own prefixed variants of the same concepts —
   ua-eyebrow, ao-card, cq-table, wap-kpi, sc-hero, aru-table, and ~40 more.
   Matching on the suffix catches every prefix at once, which is the only
   way to reach all 76 pages without editing any of them. */

body.ui-alt [class$="-eyebrow"],
body.ui-alt [class*="-eyebrow "] { display: none !important; }

body.ui-alt [class$="-hero"], body.ui-alt [class*="-hero "],
body.ui-alt [class$="-hero-copy"], body.ui-alt [class*="-hero-copy "] {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 0 !important;
}

body.ui-alt [class$="-card"], body.ui-alt [class*="-card "],
body.ui-alt [class$="-panel"], body.ui-alt [class*="-panel "],
body.ui-alt [class$="-tile"], body.ui-alt [class*="-tile "],
body.ui-alt [class$="-kpi"], body.ui-alt [class*="-kpi "] {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  border-radius: 8px;
}

body.ui-alt [class$="-table"] th, body.ui-alt [class*="-table "] th {
  background: transparent !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
}
body.ui-alt [class$="-table"] td, body.ui-alt [class*="-table "] td {
  border-bottom: 1px solid var(--border) !important;
}

/* The shared hero is also a .card, and .card's background wins on order —
   restate it so the page title block stays flat rather than panelled. */
body.ui-alt .page-hero,
body.ui-alt .page-hero-card { background: none !important; border: 0 !important; }

/* ── Topbar vs the fixed dev banner ────────────────────────────── */
/* .dev-banner is position:fixed at z-index 9999, so it lands on top of the
   topbar and both compete for the same 21px. Push the topbar clear of it
   rather than restyling the banner, which also has to work in classic. */
body.ui-alt .opsui-top { position: relative; z-index: 1; }
body.ui-alt:has(.dev-banner) .opsui-top { margin-top: 21px; }
body.ui-alt .opsui-brand { color: var(--text); font-size: 14px; }

/* Cards on pages that stack sections need breathing room; the classic sheet
   only spaces them inside .page-shell. */
body.ui-alt .card { margin-bottom: 12px; }

/* Buttons inside cards were inheriting classic pill sizing. */
body.ui-alt .card .btn { line-height: 1.4; }

/* Collapsible section chevrons and small controls read too bright. */
body.ui-alt summary, body.ui-alt details > summary { color: var(--text); }

/* ── Nav stays put ─────────────────────────────────────────────── */
/* The classic shell scrolls the whole page, rail included. OpsUI keeps the
   rail and topbar fixed so navigation is reachable from anywhere in a long
   table — which is most of these pages. */
body.ui-alt .opsui-top { position: sticky; top: 0; z-index: 30; }
body.ui-alt .opsui-rail {
  position: sticky;
  /* Sits below the topbar; the dev banner adds 21px when present. */
  top: 48px;
  align-self: flex-start;
  height: calc(100vh - 48px);
  overflow-y: auto;
}
body.ui-alt:has(.dev-banner) .opsui-rail { top: 69px; height: calc(100vh - 69px); }
body.ui-alt:has(.dev-banner) .opsui-top { top: 21px; }

/* The tab row scrolls with content — it belongs to the page, not the chrome. */

/* ── Typography ────────────────────────────────────────────────── */
/* Classic sets headings in Space Grotesk (--font-display) to carry the
   gradient hero. OpsUI has no hero and uses one plain UI sans throughout, so
   re-point the token rather than chase every heading selector. Numerics keep
   the mono token — tabular figures are the whole point in these tables. */
body.ui-alt {
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
body.ui-alt h1, body.ui-alt h2, body.ui-alt h3,
body.ui-alt .page-title, body.ui-alt [class$="-title"] {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
body.ui-alt .page-title, body.ui-alt .page-title-compact { font-weight: 600; }

/* ── Topbar client picker + scope bar ──────────────────────────── */
body.ui-alt .opsui-client { display: flex; align-items: center; gap: 8px; margin-left: 14px; }
body.ui-alt .opsui-client-label {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
body.ui-alt .opsui-select {
  background: #0d1117 !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: 6px;
  padding: 4px 8px; font-size: 12.5px; max-width: 320px;
}

/* Standing indicator that every table below is one customer's, not the
   estate's — the scope is session-wide and easy to forget otherwise. */
body.ui-alt .opsui-scope {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; font-size: 12.5px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 48px; z-index: 25;
}
body.ui-alt:has(.dev-banner) .opsui-scope { top: 69px; }
body.ui-alt .opsui-scope-dot { color: var(--op-accent); font-size: 9px; }
body.ui-alt .opsui-scope .muted { font-size: 12px; }

/* The rail sits below both bars once a scope is pinned. */
body.ui-alt:has(.opsui-scope) .opsui-rail { top: 82px; height: calc(100vh - 82px); }
body.ui-alt:has(.dev-banner):has(.opsui-scope) .opsui-rail { top: 103px; height: calc(100vh - 103px); }

/* ── OpsUI page templates (public/alt/*.php) ───────────────────── */
/* These are OpsUI's own markup, so they get its real measurements rather than
   overrides of classic's. Sizes come from tokens.css: 14px rows, 13px labels,
   12px sub-lines held down on purpose so raising the row size widens the
   hierarchy gap instead of flattening it. */

body.ui-alt .ops-page { max-width: 1400px; }
body.ui-alt .ops-h1 { font-size: 25px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
body.ui-alt .ops-meta { color: var(--text-sec); font-size: var(--fs-sub); margin-bottom: 6px; }
body.ui-alt .ops-lede { color: var(--text-mut); font-size: var(--fs-cell); margin: 0 0 16px; max-width: 62ch; }

body.ui-alt .ops-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
body.ui-alt .ops-inline { display: inline-flex; }
body.ui-alt .ops-search {
  flex: 1; max-width: 520px;
  background: var(--surface-2) !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: 6px;
  padding: 7px 10px; font-size: var(--fs-cell);
}

body.ui-alt .ops-tablewrap {
  border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; background: var(--surface);
}
body.ui-alt .ops-table { width: 100%; border-collapse: collapse; }
body.ui-alt .ops-table th {
  background: var(--surface) !important; color: var(--text-mut) !important;
  font-size: var(--fs-label); font-weight: 600; text-align: left;
  padding: 9px 12px; border-bottom: 1px solid var(--border) !important;
}
body.ui-alt .ops-table td {
  padding: 7px 12px; font-size: var(--fs-row); height: var(--row-h);
  border-bottom: 1px solid var(--border) !important; vertical-align: middle;
}
body.ui-alt .ops-table tbody tr:hover td { background: var(--hover) !important; }
body.ui-alt .ops-table tbody tr:last-child td { border-bottom: 0 !important; }
body.ui-alt .ops-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Two-line cell: identity on top, context beneath. This is the idiom the skin
   could not produce, because classic emits one value per cell. */
body.ui-alt .ops-strong { display: block; color: var(--text); }
body.ui-alt .ops-sub { display: block; color: var(--text-mut); font-size: var(--fs-sub); }

body.ui-alt .ops-pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: var(--fs-sub); border: 1px solid var(--border-2); color: var(--text-sec);
}
/* Green is LIVE/ACTIVE only, amber warns, red is critical — OpsUI's reserved
   semantics, not decoration. */
body.ui-alt .ops-pill.is-green { color: var(--green); border-color: var(--green); }
body.ui-alt .ops-pill.is-amber { color: var(--amber); border-color: var(--amber); }
body.ui-alt .ops-pill.is-red   { color: var(--red);   border-color: var(--red); }
body.ui-alt .is-amber { color: var(--amber); }
body.ui-alt .is-red   { color: var(--red); }
body.ui-alt .ops-empty { color: var(--text-mut); text-align: center; padding: 22px; }

body.ui-alt .ops-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-cell); color: var(--text-sec); white-space: nowrap;
}
body.ui-alt .ops-link { color: var(--accent); text-decoration: none; }
body.ui-alt .ops-link:hover { text-decoration: underline; }

/* ---- KPI tiles -------------------------------------------------------- */
/* Used by the client-scoped screens (License, and the drilldowns to come):
   a row of headline numbers above the detail tables, wrapping on narrow
   viewports rather than scrolling. */
body.ui-alt .ops-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
body.ui-alt .ops-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
body.ui-alt .ops-kpi-v {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
body.ui-alt .ops-kpi-v.is-amber { color: var(--amber); }
body.ui-alt .ops-kpi-k {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
body.ui-alt .ops-h2 {
  margin: 26px 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
body.ui-alt .ops-sub-inline {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
body.ui-alt .ops-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

/* Two side-by-side panels that stack once there is no room for both. */
body.ui-alt .ops-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  align-items: start;
}
body.ui-alt .ops-tablewrap { margin-bottom: 18px; }
body.ui-alt .ops-table .is-red { color: var(--red); }
body.ui-alt .ops-table .is-amber { color: var(--amber); }

/* Narrative findings — sentences, not a table. */
body.ui-alt .ops-findings {
  margin: 0;
  padding: 14px 16px 14px 32px;
  list-style: disc;
  color: var(--text);
  font-size: 13px;
  line-height: 1.65;
}
body.ui-alt .ops-findings li + li { margin-top: 6px; }

/* ---- Client Executive View -------------------------------------------- */
body.ui-alt .ops-exec-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 0 0 22px;
}
body.ui-alt .ops-exec-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.ui-alt .ops-exec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
body.ui-alt .ops-exec-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text);
}
body.ui-alt .ops-exec-delta {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
body.ui-alt .ops-exec-delta.is-green { color: var(--green); }
body.ui-alt .ops-exec-delta.is-red   { color: var(--red); }
body.ui-alt .ops-exec-scale {
  font-size: 11px;
  color: var(--muted);
}
body.ui-alt .ops-exec-value {
  margin: 8px 0 6px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
body.ui-alt .ops-exec-value.is-muted { color: var(--muted); }
body.ui-alt .ops-exec-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
}
body.ui-alt .ops-exec-link {
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
body.ui-alt .ops-exec-link:hover { text-decoration: underline; }

body.ui-alt .ops-exec-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 14px;
  align-items: start;
}
body.ui-alt .ops-exec-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
body.ui-alt .ops-exec-h {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
body.ui-alt .ops-dl { margin: 0; font-size: 12.5px; }
body.ui-alt .ops-dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
body.ui-alt .ops-dl > div:last-child { border-bottom: 0; }
body.ui-alt .ops-dl dt { color: var(--muted); }
body.ui-alt .ops-dl dd {
  margin: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
body.ui-alt .ops-dl dd.is-red   { color: var(--red); }
body.ui-alt .ops-dl dd.is-amber { color: var(--amber); }
body.ui-alt .ops-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
}
body.ui-alt .ops-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
body.ui-alt .ops-chip {
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}
body.ui-alt .ops-chip.is-on { color: var(--green); border-color: var(--green); }

/* "Not run yet" panel — an expensive report waiting to be asked for. */
body.ui-alt .ops-load {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
body.ui-alt .ops-load p { margin: 0; font-size: 13px; color: var(--muted); }

/* ---- Admin menu -------------------------------------------------------- */
/* <details> rather than JS: it opens on click, closes on Escape and is
   keyboard-reachable without a line of script. */
body.ui-alt .opsui-menu { position: relative; }
body.ui-alt .opsui-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
body.ui-alt .opsui-menu > summary::-webkit-details-marker { display: none; }
body.ui-alt .opsui-btn-icon {
  padding: 5px 9px;
  font-size: 13px;
  line-height: 1.2;
}
body.ui-alt .opsui-menu[open] > summary {
  color: var(--accent);
  border-color: var(--accent);
}
body.ui-alt .opsui-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 190px;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
}
body.ui-alt .opsui-menu-list a {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
body.ui-alt .opsui-menu-list a:hover { background: var(--hover); }

/* AI trigger. Purple is OpsUI's reserved AI accent — nothing else uses it,
   so a machine-generated explanation is never mistaken for a measurement. */
body.ui-alt .ops-ai-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--ai);
  background: transparent;
  color: var(--ai);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
body.ui-alt .ops-ai-btn:hover:not(:disabled) { background: rgba(192, 132, 252, .12); }
body.ui-alt .ops-ai-btn:disabled { opacity: .6; cursor: default; }
body.ui-alt .ops-exec-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
body.ui-alt .ops-exec-actions .ops-exec-link { margin-top: 0; }
body.ui-alt .ops-head-actions { display: flex; gap: 8px; margin: 0 0 18px; }

/* Metric picker chips. .ops-chip is also used as a static badge in the
   Executive panel, so only the anchor form takes a pointer. */
body.ui-alt a.ops-chip { text-decoration: none; cursor: pointer; }
body.ui-alt a.ops-chip:hover { border-color: var(--accent); color: var(--text); }
body.ui-alt a.ops-chip.is-on {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(56, 189, 248, .10);
}
body.ui-alt .ops-toolbar-label {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 6px;
}
body.ui-alt .ops-toolbar-label:first-child { margin-left: 0; }

/* Long prose in a table cell: cap the width so it cannot crowd out the
   numbers beside it. The full text stays in the title attribute. */
body.ui-alt .ops-clamp {
  display: inline-block;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Spec threshold groups — a label with its own set of cut-offs. */
body.ui-alt .ops-specgroup { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
body.ui-alt .ops-specgroup-k { font-size: 11px; color: var(--muted); }

/* Basis opens the thresholds behind the verdict. */
body.ui-alt .ops-basis { text-decoration: none; }
body.ui-alt .ops-basis:hover .ops-pill { border-color: var(--accent); color: var(--accent); }