/* Shared styles for the migrated "Live Metrics" monitor pages (Voting, CIOML, …).
   vm-* = the report shell: header, 🐒 loading, full-width charts, audit tables. */
#vm-wrap { padding: 16px 20px; max-width: 1400px; }
#vm-head { position: relative; }
#vm-head h1 { font-size: 20px; margin: 0 0 4px; }

/* ↻ Refresh — top-right of the header, Databricks-style. */
.vm-refresh-btn {
  position: absolute; top: 0; right: 0;
  background: var(--border); color: var(--text); border: 1px solid transparent;
  border-radius: 4px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.vm-refresh-btn:hover:not(:disabled) { background: var(--text-dim); }
.vm-refresh-btn:disabled { opacity: 0.5; cursor: default; }
.vm-sub { font-size: 12px; color: var(--text-dim); max-width: 90ch; margin: 0 0 8px; }
/* The strategy picker bar in the header: dropdown OR a free-text name + Load. */
.vm-strategy-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.vm-strategy-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.vm-strategy-pick select, .vm-strategy-pick input {
  background: var(--bg); color: inherit; color-scheme: inherit;
  border: 1px solid var(--border); border-radius: 4px; padding: 5px 10px; font-size: 13px;
}
.vm-strategy-pick select { cursor: pointer; }
.vm-load-btn {
  background: var(--selected); color: #fff; border: 1px solid transparent;
  border-radius: 4px; padding: 6px 14px; font-size: 13px; cursor: pointer; font-weight: 600;
}
.vm-load-btn:hover { filter: brightness(1.1); }
/* The "Viewing: <strategy> — <dataset>" banner, so it's unmistakable which
   strategy is on screen. */
.vm-strategy-title {
  font-size: 16px; margin: 4px 0 2px; color: var(--text);
  border-left: 3px solid var(--selected); padding-left: 8px;
}
.vm-count { font-size: 12px; color: var(--text-dim); margin: 0 0 12px; }
.vm-error { color: var(--down); font-size: 13px; }

/* Dataset-parameter form (Voting/CIOML): a wrap of small labelled inputs + Apply.
   The knobs bound into the query — strategy names, trigger, holidays. */
.vm-params {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end;
  margin: 0 0 12px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel);
}
.vm-param { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text-dim); }
.vm-param input {
  font-size: 12px; padding: 3px 6px; min-width: 180px;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px;
}
.vm-param input:focus { outline: none; border-color: var(--selected); }

/* Multiselect knob (holidays): a compact toggle button over an absolute dropdown
   panel of checkboxes, so 10 dates don't sprawl across the form. */
.vm-multi { position: relative; }
.vm-multi-toggle {
  font-size: 12px; padding: 3px 8px; min-width: 130px; text-align: left; cursor: pointer;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px;
}
.vm-multi-toggle:hover { border-color: var(--selected); }
.vm-multi-panel {
  position: absolute; z-index: 20; top: 100%; left: 0; margin-top: 4px;
  min-width: 220px; max-height: 260px; overflow-y: auto; padding: 6px;
  background: var(--panel-solid, var(--panel)); border: 1px solid var(--border);
  border-radius: 4px; box-shadow: var(--shadow);
}
.vm-multi-actions { display: flex; gap: 6px; margin-bottom: 6px; }
.vm-multi-actions button {
  font-size: 11px; padding: 2px 8px; cursor: pointer; color: var(--text-dim);
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
}
.vm-multi-actions button:hover { color: var(--text); border-color: var(--selected); }
.vm-multi-opt {
  display: flex; align-items: center; gap: 6px; padding: 2px 2px;
  font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap;
}
.vm-multi-opt input { margin: 0; }
.vm-multi-opt:hover { color: var(--selected); }

/* The 🐒 loading state — a little troop of bouncing monkeys while the 30-day
   report loads async. */
.vm-loading {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-dim); padding: 24px 0;
}
.vm-loading[hidden] { display: none; }
.vm-loading .vm-monkey { display: inline-block; animation: vm-bounce 0.8s ease-in-out infinite; }
.vm-loading .vm-monkey:nth-child(2) { animation-delay: 0.12s; }
.vm-loading .vm-monkey:nth-child(3) { animation-delay: 0.24s; }
.vm-loading-text { margin-left: 6px; }
@keyframes vm-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Charts in a 2-column grid (like the dashboard). A section of 5 lays out as
   2 + 2 + 1 — the 5th card spans the full width. A 2-card section (the
   executor-log rates) stays as one row of two. */
.vm-charts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.vm-charts .vm-card:nth-child(5) { grid-column: 1 / -1; }

/* The audit tables side by side in one row; each keeps its own horizontal
   scroll (wide tables scroll sideways instead of stretching the row). */
.vm-tables-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; align-items: start;
}
.vm-table-block { min-width: 0; }
.vm-table-block h2 { font-size: 14px; margin: 18px 0 6px; }
.vm-card {
  border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px 4px;
  background: var(--bg);
}
.vm-card h2 { font-size: 13px; margin: 0; display: flex; align-items: center; gap: 6px; }
/* The per-chart (?) help button + its panel. */
.vm-help-btn {
  width: 16px; height: 16px; line-height: 14px; padding: 0; text-align: center;
  border: 1px solid var(--border); border-radius: 50%; background: transparent;
  color: var(--text-dim); font-size: 10px; cursor: pointer;
}
.vm-help-btn:hover { color: var(--text); border-color: var(--selected); }
.vm-help {
  border: 1px solid var(--border); border-left: 3px solid var(--selected);
  border-radius: 4px; background: color-mix(in srgb, var(--accent) 6%, transparent);
  padding: 8px 10px; margin: 6px 0; font-size: 11px; color: var(--text-dim);
  max-width: 90ch;
}
.vm-help[hidden] { display: none; }
.vm-help p { margin: 0 0 6px; }
.vm-help p:last-child { margin-bottom: 0; }
/* The copyable query block inside a (?) — for inspecting the metric in Databricks. */
.vm-help-q {
  margin: 6px 0 0; padding: 8px 10px; border-radius: 4px;
  background: var(--bg); border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.45; color: var(--text);
  white-space: pre; overflow-x: auto;
}
/* Copy-to-clipboard buttons for the runnable SQL (per chart + full dataset). */
.vm-copy-sql, .vm-copy-sql-full {
  margin-top: 6px; padding: 3px 10px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  font-size: 11px;
}
.vm-copy-sql:hover, .vm-copy-sql-full:hover { color: var(--text); border-color: var(--selected); }
.vm-sql-full { margin: 14px 0 4px; }

/* System Metrics: a 2-col grid of chart cards. The parity-only full-width rule
   on the 5th card must NOT leak here (this page has many cards). */
.sm-grid .vm-card:nth-child(5) { grid-column: auto; }
.sm-card h2 { flex-wrap: wrap; }
/* A spec'd `wide` chart spans the whole grid row (Trigger Cross, the parity funnel). */
/* `:nth-child(n)` lifts the specificity above the `:nth-child(5) { auto }` rule
   above, so a wide card stays full width whatever its position (e.g. Job detail) */
.sm-grid .sm-wide, .sm-grid .vm-card.sm-wide:nth-child(n) { grid-column: 1 / -1; }
.sm-wide .vm-plot { height: 380px; }
/* Clusters tab: range picker + CPU heatmap/detail */
/* everything on the right: what is on screen, reset, then the date ranges */
.sm-ranges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end;
  margin: 0 0 12px; }  /* now above the loading monkeys, outside the charts grid */
.sm-view-status { font-size: 11px; padding: 3px 10px; border: 1px dashed var(--border, #30363d); }
.sm-view-status.sm-filtered { border-style: solid; border-color: #e0a83e; color: #e0a83e;
  background: rgba(224, 168, 62, 0.08); }
.sm-view-status.sm-filtered b { color: inherit; }
/* reset: squared like the ranges, an outlined action in the accent colour */
.sm-reset { font: inherit; font-size: 11px; font-weight: 600; padding: 3px 12px; border-radius: 0;
  border: 1px solid var(--accent, #1f6feb); background: transparent; color: var(--accent, #58a6ff);
  cursor: pointer; }
.sm-reset:hover { background: var(--accent, #1f6feb); color: #fff; }
.sm-jobs-all, .sm-jh-cluster { font: inherit; font-size: 11px; padding: 3px 10px; border-radius: 12px;
  border: 1px solid var(--border, #30363d); background: transparent; color: inherit; cursor: pointer; }
/* the date ranges: ONE squared segmented control, so they never read as the subgroup tabs */
.sm-range-group { display: inline-flex; align-items: center; }
.sm-range-group[hidden] { display: none; }
/* Clusters opened with no range: the prompt in place of the heatmaps */
.sm-await { text-align: center; padding: 36px 16px; border-style: dashed; }
.sm-await-title { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.sm-env-label { margin-right: 6px; }
/* System Metrics: the loading monkeys centred under the filters (`#sm-rangebar` only
   exists on this page, so the other monitors keep their left-aligned loader) */
#sm-rangebar ~ .vm-loading { justify-content: center; }
/* the CPU · Memory switch: on the right of the CPU card's title row */
.sm-metric-switch { margin-left: auto; font-size: 11px; font-weight: 400; }
.sm-range-btn { font: inherit; font-size: 11px; padding: 3px 10px; border-radius: 0;
  border: 1px solid var(--border, #30363d); background: transparent; color: inherit; cursor: pointer; }
.sm-range-btn + .sm-range-btn { border-left-width: 0; }
.sm-range-btn:disabled { opacity: 0.4; cursor: not-allowed; }  /* e.g. "staging (0)" */
.sm-range-btn.sm-active { background: var(--accent, #1f6feb); border-color: var(--accent, #1f6feb); color: #fff; }
.sm-dim { color: var(--text-dim, #8b949e); font-size: 11px; }
.sm-cpu-head { font-size: 12px; margin: 10px 0 2px; }
.sm-cpu-detail { height: 340px; width: 100%; }
/* a clicked cluster's / job's detail: its own card below both heatmaps */
.sm-detail-card[hidden] { display: none; }
.sm-cpu-info { font-size: 11px; color: var(--text-dim, #8b949e); margin: 2px 0 8px;
  padding: 6px 10px; border-left: 3px solid var(--text-dim, #8b949e);
  background: rgba(139, 148, 158, 0.08); border-radius: 4px; }
.sm-chip { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.sm-chip i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.sm-jobs .sm-job-row { cursor: pointer; }
.sm-jobs .sm-job-row.sm-active td { background: rgba(88, 166, 255, 0.15); }
.sm-jobs .sm-job-failed td:nth-child(4) { color: #ef5350; font-weight: 600; }
/* Alerts tab (system_alerts.js): it must SHOUT — a banner, one tile per severity, rows
   striped and tinted by severity, a pulsing dot on a critical alert nobody took. */
.sa-card { --sa-critical: #f23645; --sa-error: #ff6d00; --sa-warning: #f5b700; }
/* room under the tab selector (Alerts has no filters bar to fill it, unlike the chart
   tabs) and between the cards */
.sm-grid > .sa-card:first-child { margin-top: 18px; }
.sa-card + .sa-card { margin-top: 28px; }
/* the two accordions: All alerts, Response times */
.sa-card > summary { list-style: none; cursor: pointer; user-select: none; }
.sa-card > summary::-webkit-details-marker { display: none; }
.sa-card > summary:hover h2 { color: var(--selected, #2962ff); }
.sa-card[open] > summary { margin-bottom: 8px; }
.sa-caret { display: inline-block; width: 12px; transition: transform .15s; }
.sa-card[open] .sa-caret { transform: rotate(90deg); }
.sa-demo { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 8px; border: 1px dashed var(--warn, #ff9800); color: var(--warn, #ff9800); }
.sa-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0;
  padding: 12px 16px; font-size: 13px; border-left: 6px solid; }
.sa-banner b { font-size: 15px; letter-spacing: .03em; }
.sa-banner span:not(.sa-pulse) { opacity: .9; }
.sa-banner-critical { background: var(--sa-critical); border-color: #9e0f1c; color: #fff; }
.sa-banner-error { background: rgba(255, 109, 0, .14); border-color: var(--sa-error); }
.sa-banner-busy { background: rgba(41, 98, 255, .10); border-color: var(--accent, #2962ff); }
.sa-banner-clear { background: rgba(8, 153, 129, .12); border-color: var(--up, #089981); }
.sa-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  margin: 0 0 12px; }
.sa-tile { padding: 10px 14px; border: 1px solid var(--border, #30363d); border-top: 4px solid;
  border-top-color: var(--text-dim, #787b86); }
.sa-tile-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.sa-tile-num { font-size: 34px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sa-tile-sub { font-size: 11px; color: var(--text-dim, #787b86); }
.sa-tile-critical { border-top-color: var(--sa-critical); }
.sa-tile-error { border-top-color: var(--sa-error); }
.sa-tile-warning { border-top-color: var(--sa-warning); }
.sa-tile:not(.sa-tile-hot) .sa-tile-num { color: var(--text-dim, #787b86); }
.sa-tile-hot.sa-tile-critical { background: rgba(242, 54, 69, .12); }
.sa-tile-hot.sa-tile-critical .sa-tile-num, .sa-tile-hot.sa-tile-critical .sa-tile-label { color: var(--sa-critical); }
.sa-tile-hot.sa-tile-error { background: rgba(255, 109, 0, .10); }
.sa-tile-hot.sa-tile-error .sa-tile-num, .sa-tile-hot.sa-tile-error .sa-tile-label { color: var(--sa-error); }
.sa-tile-hot.sa-tile-warning { background: rgba(245, 183, 0, .12); }
.sa-tile-hot.sa-tile-neutral { border-top-color: var(--text, #131722); }
.sa-tile-hot.sa-tile-ok { border-top-color: var(--up, #089981); background: rgba(8, 153, 129, .10); }
.sa-tile-hot.sa-tile-ok .sa-tile-num, .sa-tile-hot.sa-tile-ok .sa-tile-label { color: var(--up, #089981); }
.sa-tile-sub b { color: inherit; }
/* Response times: the three plots */
.sa-plot-title { font-size: 12px; font-weight: 600; margin: 14px 0 0; }
.sa-plot { width: 100%; min-height: 220px; }
.sa-tile-alarm { animation: sa-glow 1.6s ease-in-out infinite; }
@keyframes sa-glow { 50% { box-shadow: 0 0 0 3px rgba(242, 54, 69, .45); } }
.sa-pulse { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px;
  background: #fff; vertical-align: middle; animation: sa-pulse 1.2s ease-in-out infinite; }
.sa-table .sa-pulse { background: var(--sa-critical); }
@keyframes sa-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .sa-pulse, .sa-tile-alarm { animation: none; } }
.sa-table td { vertical-align: top; }
/* a 5px severity stripe on every row; unresolved rows tinted by severity */
.sa-table tr.sa-row > td:first-child { border-left: 5px solid transparent; white-space: nowrap; }
.sa-table tr.sa-sevrow-critical > td:first-child { border-left-color: var(--sa-critical); }
.sa-table tr.sa-sevrow-error > td:first-child { border-left-color: var(--sa-error); }
.sa-table tr.sa-sevrow-warning > td:first-child { border-left-color: var(--sa-warning); }
.sa-table-live tr.sa-sevrow-critical.sa-row-open > td { background: rgba(242, 54, 69, .13); }
.sa-table-live tr.sa-sevrow-critical.sa-row-in_progress > td { background: rgba(242, 54, 69, .06); }
.sa-table-live tr.sa-sevrow-error.sa-row-open > td { background: rgba(255, 109, 0, .09); }
.sa-table-live tr.sa-sevrow-warning.sa-row-open > td { background: rgba(245, 183, 0, .08); }
.sa-table-live .sa-title { font-size: 12px; }
.sa-age { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sa-age-late { color: var(--sa-critical); font-weight: 700; }
/* All alerts: a critical that took over 12 h to close — the row tinted, the cell red */
.sa-table tr.sa-row-slow > td { background: rgba(242, 54, 69, .08); color: var(--text, #131722); }
.sa-table tr.sa-row-slow > td.sa-slow { color: var(--sa-critical); font-weight: 700; }
.sa-slow-tag { display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 700; padding: 1px 6px;
  text-transform: uppercase; letter-spacing: .04em; background: var(--sa-critical); color: #fff; }
.sa-title { font-weight: 600; }
.sa-error { max-width: 520px; white-space: normal; }
.sa-note-cell { max-width: 320px; white-space: normal; }
.sa-people { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
/* the channel icons (Teams · Telegram) in front of the recipients */
.sa-via { display: inline-flex; gap: 3px; margin-right: 3px; }
.sa-app { display: inline-flex; width: 18px; height: 18px; }
.sa-app svg { width: 100%; height: 100%; }
.sa-person { font-size: 10px; padding: 1px 6px; border-radius: 9px; white-space: nowrap;
  background: var(--subtle, rgba(139, 148, 158, .15)); border: 1px solid var(--border, #30363d); }
.sa-sev, .sa-state { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px;
  border: 1px solid currentColor; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
/* unresolved: a solid badge; closed (`sa-sev-done`): outlined, so open work stands out */
.sa-sev-critical { background: var(--sa-critical); border-color: var(--sa-critical); color: #fff; }
.sa-sev-error { background: var(--sa-error); border-color: var(--sa-error); color: #fff; }
.sa-sev-warning { background: var(--sa-warning); border-color: var(--sa-warning); color: #131722; }
.sa-sev.sa-sev-done { background: transparent; }
.sa-sev-done.sa-sev-critical { color: var(--sa-critical); }
.sa-sev-done.sa-sev-error { color: var(--sa-error); }
.sa-sev-done.sa-sev-warning { color: #c79400; }
.sa-state-open { color: var(--down, #f23645); }
.sa-state-in_progress { color: var(--accent, #2962ff); }
.sa-state-closed { color: var(--text-dim, #787b86); }
.sa-row-closed td { color: var(--text-dim, #787b86); }
.sa-btn { font: inherit; font-size: 11px; padding: 3px 10px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border, #30363d); background: transparent; color: inherit; }
.sa-btn:hover { border-color: var(--selected, #2962ff); }
.sa-btn:disabled { opacity: .5; cursor: wait; }
.sa-btn-start { border-color: var(--accent, #2962ff); color: var(--accent, #2962ff); }
.sa-btn-close { border-color: var(--up, #089981); color: var(--up, #089981); }
.sa-form-row td { background: var(--subtle, rgba(139, 148, 158, 0.08)); }
.sa-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.sa-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; flex: 1 1 260px; }
.sa-input { font: inherit; font-size: 12px; padding: 4px 6px; color: inherit;
  background: var(--bg, #fff); border: 1px solid var(--border, #30363d); }
.sa-note { resize: vertical; min-height: 54px; }
.sa-form-actions { display: flex; gap: 6px; }
.sa-form-error { flex-basis: 100%; color: var(--down, #f23645); font-size: 11px; }
/* Errors tab: the clicked cell's / row's errors, in the shared detail card */
.sm-err-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 520px; overflow: auto; }
.sm-err-item { padding: 6px 0; border-top: 1px solid var(--border, #30363d); font-size: 12px; }
.sm-err-time { font-variant-numeric: tabular-nums; color: var(--text-dim, #8b949e); }
.sm-err-type { font-weight: 600; color: #ef5350; }
.sm-err-fn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text); }
.sm-err-msg { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sm-err-trace summary { cursor: pointer; font-size: 11px; color: var(--text-dim, #8b949e); margin-top: 2px; }
.sm-err-trace pre { margin: 4px 0 0; padding: 6px 8px; font-size: 10.5px; white-space: pre-wrap;
  overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; }
/* System Metrics → Health: one tile per source (no Plotly: badge, numbers, SVG sparkline) */
.sm-tile { cursor: pointer; padding: 4px 0 2px; }
.sm-tile-selected { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.sm-tile-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12px;
  margin: 2px 0 6px; }
.sm-tile-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: #fff;
  padding: 2px 8px; border-radius: 10px; }
.sm-tile-why { color: var(--text-dim); font-size: 11px; }
.sm-tile-nums span { white-space: nowrap; }
.sm-tile-bad { color: var(--down); }
.sm-spark { display: block; width: 100%; height: 36px; margin: 2px 0 4px; }
/* the detail tables of Health (rows per bucket) and Latency (a trigger's stages) */
.sm-hl-table { max-height: 320px; overflow: auto; margin-top: 6px; }
.sm-hl-table table { border-collapse: collapse; font-size: 12px; width: 100%; }
.sm-hl-table th, .sm-hl-table td { padding: 3px 8px; border-bottom: 1px solid var(--border);
  text-align: left; }
.sm-hl-table th { color: var(--text-dim); font-weight: 600; position: sticky; top: 0;
  background: var(--bg); }
.sm-hl-gap td { color: var(--down); }
/* System Metrics → Latency: a row per trigger with a horizontal bar, and budget tables */
.sm-lat-summary { gap: 6px 26px; margin: 4px 0 8px; }
.sm-lat-big { font-size: 20px; font-weight: 700; margin-right: 4px; }
.sm-jr-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 11px; margin: 0 0 8px; }
.sm-jr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px;
  vertical-align: -1px; }
.sm-jr-list { max-height: 440px; overflow: auto; border-top: 1px solid var(--border); }
.sm-jr-head, .sm-jr-row { display: grid; grid-template-columns: 150px 120px 1fr 150px; gap: 10px;
  align-items: center; padding: 4px 6px; border-bottom: 1px solid var(--border); font-size: 12px; }
.sm-jr-head { color: var(--text-dim); font-size: 11px; font-weight: 600; position: sticky; top: 0;
  background: var(--bg); }
.sm-jr-row { cursor: pointer; }
.sm-jr-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sm-jr-selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.sm-jr-over { background: color-mix(in srgb, var(--down) 7%, transparent); }
.sm-jr-bar { display: block; width: 100%; height: 14px; }
.sm-lat-verdict { font-size: 12px; margin: 4px 0 8px; }
.sm-lat-table td { vertical-align: middle; }
.sm-lat-barcell { width: 32%; }
/* System Metrics fills the screen: the 1400 px cap of the other monitors is lifted and
   the grid gains columns with the viewport — a 6-track grid where a normal card takes
   half the row, a Health tile a third from 1700 px and a quarter from 2300 px, and a
   wide card (heatmaps, the trigger journey, the detail cards) always the whole row. */
#vm-wrap.sm-page { max-width: none; }
.sm-page .sm-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sm-page .sm-grid > .vm-card { grid-column: span 3; }
.sm-page .sm-grid > .vm-card.sm-wide { grid-column: 1 / -1; }
@media (min-width: 1700px) {
  .sm-page .sm-grid > .vm-card.sm-kind-health { grid-column: span 2; }
}
@media (min-width: 2300px) {
  .sm-page .sm-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sm-page .sm-grid > .vm-card { grid-column: span 4; }
  .sm-page .sm-grid > .vm-card.sm-kind-health { grid-column: span 2; }
  .sm-page .sm-grid > .vm-card.sm-wide { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .sm-page .sm-grid > .vm-card, .sm-page .sm-grid > .vm-card.sm-kind-health { grid-column: 1 / -1; }
  .sm-jr-head, .sm-jr-row { grid-template-columns: 110px 90px 1fr 110px; gap: 6px; }
}
/* Health: one section per system (like the Errors tab's four cards) */
.sm-grid > .sm-section { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 14px; margin: 10px 0 -4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.sm-grid > .sm-section:first-child { margin-top: 0; }
.sm-section h3 { font-size: 14px; margin: 0; }
.sm-section-badges { margin-left: auto; display: inline-flex; gap: 6px; }
/* The trigger parity funnel: a day/decision bar and the three KPI answers. */
.sm-fn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 6px; font-size: 12px; }
.sm-fn-decs { display: inline-flex; gap: 6px; margin-left: 8px; }
.sm-fn-bar .sm-copy { margin-left: auto; text-decoration: none; }
.sm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sm-kpi { border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.sm-kpi-label { font-size: 11px; color: var(--text-dim); }
.sm-kpi-value { font-size: 22px; font-weight: 600; }
.sm-kpi-sub { font-size: 11px; color: var(--text-dim); }
.sm-kpi-ok { border-color: var(--up); }
.sm-kpi-bad { border-color: var(--warn); }
@media (max-width: 700px) { .sm-kpis { grid-template-columns: 1fr; } }
.sm-ds-tag { margin-left: auto; font-size: 10px; color: var(--text-dim); font-weight: 400; }
.sm-copy {
  padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 10px;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
}
.sm-copy:hover { color: var(--text); border-color: var(--selected); }
/* The subgroup selector (Data / Clusters / … / Strategy Health). */
.sm-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sm-group-btn, .sm-fn-dec {
  padding: 4px 12px; border-radius: 999px; cursor: pointer; font-size: 12px;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
}
.sm-group-btn:hover, .sm-fn-dec:hover { color: var(--text); border-color: var(--selected); }
.sm-group-btn.sm-active, .sm-fn-dec.sm-active {
  color: var(--text); border-color: var(--selected);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Comité step 0: date controls, return chips, the multi-book equity chart and
   the metric-per-book comparison table. */
.cm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.cm-date { font-size: 11px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; }
.cm-date input[type="date"] {
  padding: 4px 6px; border-radius: 4px; background: var(--bg);
  color: var(--text); border: 1px solid var(--border); color-scheme: inherit; font-size: 12px;
}
.cm-presets { display: inline-flex; gap: 4px; margin-left: 4px; }
.cm-preset {
  display: inline-block; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  font-size: 11px; text-decoration: none;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
}
.cm-preset:hover { color: var(--text); border-color: var(--selected); }

/* The Comité's shared-window caption under the step tabs. */
.cm-anchor { font-size: 12px; color: var(--text); margin: 8px 0 0; }
.cm-anchor b { font-variant-numeric: tabular-nums; }

/* Books: colour chips (same colour as the book's curve) + an add-select. */
.cm-books { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.cm-books-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.cm-book-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px 4px 10px;
  border-radius: 4px; border: 1px solid var(--border); border-left-width: 3px;
  background: var(--bg); font-size: 12px; font-weight: 500;
}
.cm-book-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cm-book-x {
  color: var(--text-dim); font-size: 11px; line-height: 1; padding: 2px 4px;
  border-radius: 4px; text-decoration: none;
}
.cm-book-x:hover { color: #fff; background: var(--sell); }
.cm-add-select {
  background: var(--bg); color: var(--text-dim); color-scheme: inherit;
  border: 1px dashed var(--border); border-radius: 4px; padding: 4px 10px;
  font-size: 12px; cursor: pointer;
}
.cm-add-select:hover, .cm-add-select:focus { color: var(--text); border-color: var(--selected); outline: none; }

.cm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cm-chip {
  padding: 5px 12px; border-radius: 4px; font-size: 12px;
  border: 1px solid var(--border); border-left-width: 3px; background: var(--bg);
}
.cm-chip-bh { border-left-color: var(--text-dim); }
.cm-chart-card { margin-bottom: 14px; }
.cm-plot { height: 320px; }

/* The committee STEP bar — the "pages". A numbered tab strip so it's obvious
   which step you're on and that you click the next number to advance. */
.cm-steps { display: flex; gap: 4px; margin-top: 14px; border-bottom: 1px solid var(--border); }
.cm-step-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; cursor: pointer;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); font-size: 13px;
}
.cm-step-tab:hover { color: var(--text); }
.cm-step-n {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--border); color: var(--text); font-size: 11px; font-weight: 700;
}
.cm-step-disabled { opacity: 0.4; cursor: not-allowed; }
.cm-step-disabled:hover { color: var(--text-dim); }
.cm-step-active { color: var(--text); border-bottom-color: var(--selected); font-weight: 600; }
.cm-step-active .cm-step-n { background: var(--selected); color: var(--bg); }

/* Step-0 inputs, boxed so they read as controls FOR this step (not navigation). */
.cm-step-controls {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--border);
  border-radius: 4px; background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.cm-step-controls .cm-controls, .cm-step-controls .cm-books { margin-top: 0; }
/* The parameters note under Step 0's metrics — a clear caption so the reader
   knows these numbers run with margin 0.40 etc., not the engine defaults. */
.cm-params-note {
  margin: 12px 0 0; padding: 8px 11px; line-height: 1.6;
  border: 1px solid var(--border); border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
/* Step 1 · Signal audit — the external audit page embedded chrome-less. NO box:
   borderless, full width, filling the viewport under the step header, so it reads
   like the normal full-screen page (the frame owns its own scroll). */
/* Step 1 takes the WHOLE screen width (desk owner, 2026-09-30) so the audit's
   three columns fit side by side — the 1400px reading cap is for the other steps. */
#vm-wrap.cm-full { max-width: none; padding-left: 12px; padding-right: 12px; }
.cm-audit-frame {
  display: block; width: 100%; border: 0; border-radius: 0;
  height: calc(100vh - 128px); min-height: 560px; background: var(--bg);
}
/* ▶ Run — the single trigger; nothing else fetches. Prominent, pushed right. */
.cm-run-btn {
  margin-left: auto; padding: 7px 18px; border-radius: 4px; cursor: pointer;
  font-size: 13px; font-weight: 700; border: 1px solid var(--selected);
  background: var(--selected); color: var(--bg);
}
.cm-run-btn:hover { filter: brightness(1.08); }
.cm-run-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

/* Step 0 layout: chart on the LEFT, metrics table on the RIGHT — until there are
   many books (`.cm-stacked`, set by JS at 3+) or the screen is narrow, when the
   table drops BELOW the chart at full width instead of squeezing it. */
.cm-overview-grid {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start;
}
.cm-overview-grid.cm-stacked { grid-template-columns: 1fr; }
.cm-overview-grid .vm-tablewrap { overflow-x: auto; }  /* wide table scrolls, never squeezes */
@media (max-width: 900px) {
  .cm-overview-grid { grid-template-columns: 1fr; }
  .cm-steps { overflow-x: auto; }
  .cm-step-controls { gap: 8px 12px; }
}

.cm-metrics { width: 100%; border-collapse: collapse; font-size: 12px; }
.cm-metrics th, .cm-metrics td { padding: 5px 10px; border-bottom: 1px solid var(--border); text-align: right; }
.cm-metrics th:first-child, .cm-metrics td:first-child { text-align: left; color: var(--text-dim); }
.cm-metrics thead th { color: var(--text); border-bottom: 1px solid var(--selected); }
.cm-metrics tbody td { font-variant-numeric: tabular-nums; color: var(--text); }
.cm-metrics td.cm-good { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); font-weight: 600; }
.cm-metrics td.cm-target { color: var(--text-dim); }

.vm-hint { font-size: 10px; color: var(--text-dim); margin: 2px 0 6px; font-weight: 400; }
.vm-plot { height: 240px; width: 100%; }

.vm-tables h2 { font-size: 14px; margin: 18px 0 6px; }

/* The DataTables-style wrapper (length menu, search, paging) around each table. */
.vm-dt { margin-bottom: 8px; }
.vm-dt-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 6px; flex-wrap: wrap;
}
.vm-dt-len, .vm-dt-info { font-size: 11px; color: var(--text-dim); }
.vm-dt-size, .vm-dt-search {
  background: var(--bg); color: inherit; color-scheme: inherit;
  border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font-size: 12px;
}
.vm-dt-search { min-width: 200px; }
/* ⬇ Download XLSX button that lives in the table toolbar */
.vm-dt-dl {
  padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 11px;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
}
.vm-dt-dl:hover { color: var(--text); border-color: var(--selected); }
.vm-dt-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 6px; flex-wrap: wrap;
}
.vm-dt-pager { display: inline-flex; align-items: center; gap: 8px; }
.vm-dt-pager button {
  background: var(--border); color: var(--text); border: 1px solid transparent;
  border-radius: 4px; padding: 2px 9px; font-size: 13px; cursor: pointer; line-height: 1.4;
}
.vm-dt-pager button:hover:not(:disabled) { background: var(--text-dim); }
.vm-dt-pager button:disabled { opacity: 0.4; cursor: default; }
.vm-dt-page { font-size: 11px; color: var(--text-dim); }
/* Sortable headers + the active-sort arrow. */
.vm-table th { cursor: pointer; user-select: none; }
.vm-table th.vm-asc::after { content: " ▲"; color: var(--selected); }
.vm-table th.vm-desc::after { content: " ▼"; color: var(--selected); }
.vm-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; }
.vm-table { border-collapse: collapse; width: 100%; font-size: 11px; }
.vm-table th, .vm-table td {
  padding: 4px 8px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.vm-table th { color: var(--text-dim); font-weight: 600; position: sticky; top: 0; background: var(--bg); }
.vm-table tbody tr:hover { background: var(--border); }
.vm-ok { color: var(--up); font-weight: 700; }
.vm-bad { color: var(--down); font-weight: 700; }
.vm-dim { color: var(--text-dim); }
.vm-note { font-size: 11px; color: var(--text-dim); margin-top: 16px; font-style: italic; }
/* Divider heading between the main section and the executor-log section. */
.vm-section-title {
  font-size: 15px; margin: 28px 20px 10px; padding-top: 16px;
  border-top: 1px solid var(--border); color: var(--text);
}

/* ── Comité Step 2 · Live replay cards ───────────────────────────────────── */
.cm-parity-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.cm-parity-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-dim);
}
.cm-parity-select, .cm-parity-label input[type="date"] {
  background: var(--bg); color: inherit; color-scheme: inherit;
  border: 1px solid var(--border); border-radius: 4px; padding: 5px 10px; font-size: 13px;
}
.cm-parity-select { cursor: pointer; }

.tr-sig  { font-weight: 700; padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.tr-buy  { color: var(--up); border: 1px solid var(--up); }
.tr-sell { color: var(--down); border: 1px solid var(--down); }

.tr-badge {
  padding: 1px 8px; border-radius: 4px; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px;
}
.tr-b-ok  { background: color-mix(in srgb, var(--up) 13%, transparent); color: var(--up); }
.tr-b-bad { background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--down); }
.tr-b-na  { background: color-mix(in srgb, var(--text-dim) 10%, transparent); color: var(--text-dim); }
.tr-b-warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.cm-warn { color: var(--warn); }

/* Click-to-replay: the per-trade table rows select into the audit charts. */
.cm-replay-row { cursor: pointer; }
.cm-replay-row.cm-row-sel td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* The detail pair below the table: backtest | live, same tape, equal halves. */
.cm-replay-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start;
}
@media (max-width: 900px) { .cm-replay-detail { grid-template-columns: 1fr; } }

/* 📖 Docs — the Comité's unnumbered how-to tab: five numbered points. */
.cm-docs { max-width: 760px; margin-top: 14px; line-height: 1.5; font-size: 14px; }
.cm-docs code { font-size: 12.5px; }
.cm-docs-flow { list-style: none; counter-reset: flow; padding: 0; margin: 0; }
.cm-docs-flow > li {
  counter-increment: flow; position: relative; margin: 0 0 8px; padding: 10px 12px 10px 46px;
  border: 1px solid var(--border); border-radius: 4px; color: var(--text);
}
.cm-docs-flow > li::before {
  content: counter(flow); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--selected); color: var(--bg);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.cm-docs-flow > li strong:first-child { display: block; margin-bottom: 2px; }
.cm-step-docs .cm-step-n { background: transparent; width: auto; }
.cm-docs-flow ul { margin: 4px 0 0; padding-left: 18px; }
.cm-docs-flow ul li { margin: 2px 0; }
.cm-docs-flow b { color: var(--text); font-weight: 650; }

/* Overview: the trades behind the metrics + their audit SQL, at the bottom. */
.cm-trades { margin-top: 14px; }
.cm-trades summary { cursor: pointer; font-size: 13px; margin-bottom: 8px; }
.cm-trades-table td, .cm-trades-table th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-trades-table td.cm-bad { color: var(--sell); }
.cm-trades-table td.cm-good { color: var(--buy); }
.cm-audit-sql { margin-top: 14px; }
.cm-audit-sql h2 { font-size: 14px; margin: 0 0 6px; }
.cm-audit-q { margin-top: 8px; border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; }
.cm-audit-q summary { cursor: pointer; font-size: 12.5px; }
.cm-audit-head { display: flex; justify-content: flex-end; margin: 6px 0 4px; }
.cm-copy { padding: 2px 10px; border-radius: 4px; border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); cursor: pointer; font-size: 11px; }
.cm-copy:hover { color: var(--text); border-color: var(--selected); }
.cm-audit-pre { margin: 0; padding: 10px 12px; max-height: 360px; overflow: auto; background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }

/* 📖 Docs: "Before a committee" — the two runs to do first, above the points. */
.cm-docs-before { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--selected);
  border-radius: 4px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.cm-docs-before strong { display: block; margin-bottom: 2px; }
.cm-docs-before ul { margin: 4px 0 0; padding-left: 18px; }
.cm-docs-before li { margin: 2px 0; }
.cm-docs-before a { color: var(--selected); }
.cm-docs-before b { color: var(--text); font-weight: 650; }

/* 📖 Docs · Before a committee — the two "Run it here" panels. */
.cm-rh-steps { margin: 6px 0 0; padding-left: 20px; }
.cm-rh-steps > li { margin: 6px 0; }
.cm-rh-open, .cm-rh-go {
  margin-left: 6px; padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;
  border: 1px solid var(--selected); background: transparent; color: var(--selected);
}
.cm-rh-go { margin-left: 0; font-weight: 650; background: var(--selected); color: var(--bg); }
.cm-rh-go[data-armed="1"] { background: var(--sell); border-color: var(--sell); }
.cm-rh-go:disabled { opacity: .45; cursor: not-allowed; }
.cm-rh-panel { margin: 8px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); }
.cm-rh-note { margin: 0 0 8px; font-size: 12px; color: var(--text-dim); }
.cm-rh-body { overflow-x: auto; }
.cm-rh-table { border-collapse: collapse; font-size: 12px; margin: 0 0 8px; }
.cm-rh-table th, .cm-rh-table td { padding: 4px 10px 4px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.cm-rh-table th { color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.cm-rh-dim { color: var(--text-dim); }
.cm-rh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cm-rh-status { font-size: 12px; }
.cm-rh-status.ok { color: var(--buy); }
.cm-rh-status.err { color: var(--sell); }
.cm-rh-log { max-height: 180px; overflow: auto; margin: 8px 0 0; padding: 6px 8px; font-size: 11px; border: 1px solid var(--border); border-radius: 4px; white-space: pre-wrap; }
/* Committee "Run it here" · trades: each book's run config, collapsed under its row. */
.cm-rh-json > td { padding-top: 0; }
.cm-rh-json summary { cursor: pointer; font-size: 11px; color: var(--text-dim); }
.cm-rh-json pre { max-height: 320px; overflow: auto; margin: 6px 0 0; padding: 6px 8px; font-size: 11px; border: 1px solid var(--border); border-radius: 4px; }
.cm-rh-copy { float: right; margin: 6px 0 0 8px; padding: 2px 8px; font-size: 11px; cursor: pointer; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--text-dim); }

/* ── Strategy Monitor · rates block and Targets view (feature #50) ───────────
   The "Success and Exec Rate" artifact's series, reference-line and mark colours:
   its light values by default (the app is light by default), its dark values under
   the app's opt-in dark theme. Its neutral tokens are the app's own (--bg, --panel,
   --text, --text-dim, --border), which is what adapts it to this page. The charts,
   the tiles, the Targets marks and the Targets image all read these at render time. */
:root {
  --rm-success: #2a78d6;
  --rm-exec: #eb6834;
  --rm-exit: #7b4fc9;
  --rm-ref100: #1baf7a;
  --rm-ref90: #eda100;
  --rm-miss: #c8372d;
}
html.scheme-dark {
  --rm-success: #3987e5;
  --rm-exec: #d95926;
  --rm-exit: #9b7be0;
  --rm-ref100: #199e70;
  --rm-ref90: #c98500;
  --rm-miss: #e5645a;
}

/* The rates block: its own section above the parity report, so it stays on
   screen while that report loads or fails. */
.rm-block { margin: 12px 0 18px; }
.rm-title { font-size: 14px; margin: 0 0 2px; color: var(--text); }
.rm-range { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--text-dim); }
.rm-note { font-size: 11px; color: var(--text-dim); max-width: 120ch; margin: 0 0 10px; }
.rm-bar { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.rm-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rm-swatch-success { background: var(--rm-success); }
.rm-swatch-exec { background: var(--rm-exec); }
.rm-png { margin-left: auto; font-size: 11px; padding: 1px 7px; }

/* The two 15-day tiles, tinted with their series colour. */
.rm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 560px) { .rm-tiles { grid-template-columns: 1fr; } }
.rm-tile { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.rm-tile-success { background: color-mix(in srgb, var(--rm-success) 13%, var(--panel)); }
.rm-tile-exec { background: color-mix(in srgb, var(--rm-exec) 14%, var(--panel)); }
.rm-tile-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.rm-tile-value { font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.rm-tile-sub { font-size: 11px; color: var(--text-dim); }

/* The collapsible day-by-day table and "View SQL". */
.rm-fold { margin: 0 0 10px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; background: var(--bg); }
.rm-fold > summary { cursor: pointer; font-size: 12.5px; color: var(--text); }
.rm-fold-head { display: flex; justify-content: flex-end; margin: 6px 0 4px; }
.rm-pre {
  margin: 0; padding: 10px 12px; max-height: 360px; overflow: auto; background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px; font-size: 12px; color: var(--text);
}

/* Targets: one row per metric, one column per window. */
.rm-tg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.rm-tg-head .vm-strategy-title { margin: 0; }
.rm-tg-strategy { font-size: 12px; color: var(--text-dim); }
.rm-tg-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.rm-tg-actions button:disabled { opacity: 0.45; cursor: default; }
.rm-tg-card { padding: 4px 12px; background: var(--panel); margin-bottom: 10px; overflow-x: auto; }
.rm-tg-table { width: 100%; border-collapse: collapse; }
.rm-tg-table th, .rm-tg-table td {
  padding: 10px 12px 10px 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.rm-tg-table tbody tr:last-child th, .rm-tg-table tbody tr:last-child td { border-bottom: 0; }
.rm-tg-table thead th {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .05em;
}
.rm-tg-sub { display: block; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.rm-tg-name { font-size: 14px; font-weight: 600; color: var(--text); margin-right: 6px; }
.rm-tg-goal { font-size: 11px; font-weight: 400; color: var(--text-dim); }
.rm-tg-tag { font-size: 11px; font-weight: 600; color: var(--text-dim); margin-right: 6px; }
.rm-tg-table .vm-help { font-weight: 400; }
.rm-mark { display: inline-block; width: 1.1em; font-weight: 700; }
.rm-mark-ok { color: var(--rm-ref100); }
.rm-mark-miss { color: var(--rm-miss); }
.rm-tg-value { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.rm-tg-cellnote { font-size: 11px; color: var(--text-dim); margin-left: 1.1em; }
.rm-tg-foot { font-size: 11px; color: var(--text-dim); margin: 8px 0 12px; }

/* Targets: the signal crossing under the table, one 2x2 per window (screen only):
   three equal columns, the same column widths, caption height and row height in each. */
.rm-xg { margin: 0 0 12px; }
.rm-xg-title { font-size: 13px; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; color: var(--text); }
.rm-xg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .rm-xg-grid { grid-template-columns: minmax(0, 1fr); } }
.rm-xg-table {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
}
.rm-xg-col-head { width: 31%; }
.rm-xg-col { width: 23%; }
.rm-xg-caption { caption-side: top; text-align: left; font-size: 12px; font-weight: 600; color: var(--text); padding: 0 0 6px; }
.rm-xg-sub { display: block; min-height: 14px; font-size: 11px; font-weight: 400; color: var(--text-dim); }
.rm-xg-table th, .rm-xg-table td {
  padding: 6px 10px; text-align: right; vertical-align: top; border-top: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.rm-xg-table thead th {
  font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em;
  vertical-align: bottom;
}
.rm-xg-rowhead { text-align: left; font-size: 12px; font-weight: 600; color: var(--text); }
.rm-xg-value { display: block; font-size: 16px; line-height: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.rm-xg-note { min-height: 14px; font-size: 11px; line-height: 14px; color: var(--text-dim); }
.rm-xg-total .rm-xg-value { font-weight: 600; color: var(--text-dim); }
.rm-xg-totals .rm-xg-rowhead { color: var(--text-dim); font-weight: 500; }
.rm-xg-universe .rm-xg-value { color: var(--text); font-weight: 700; }

/* The commentary: typed in the browser, kept in the page only. */
.rm-commentary { margin: 0 0 4px; }
.rm-cm-view[hidden], .rm-cm-editor[hidden] { display: none; }
.rm-cm-text { font-size: 13px; line-height: 1.5; color: var(--text); margin: 0 0 6px; max-width: 120ch; }
.rm-cm-body { white-space: pre-line; }
.rm-cm-note { font-size: 11px; color: var(--text-dim); margin-left: 8px; }
.rm-cm-editor { display: grid; gap: 8px; max-width: 120ch; }
.rm-cm-field { display: grid; gap: 2px; font-size: 11px; color: var(--text-dim); }
.rm-cm-field input, .rm-cm-field textarea {
  font: inherit; font-size: 13px; padding: 5px 8px; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px;
}
.rm-cm-field textarea { min-height: 110px; resize: vertical; }
.rm-cm-field input:focus, .rm-cm-field textarea:focus { outline: none; border-color: var(--selected); }
.rm-cm-buttons { display: flex; gap: 8px; }

/* ── Strategy Monitor (2026-10-11): one page — a strategy, a view, a range ──────
   The selector bar under the title (strategy · Live First books · views), the range
   pills with the status line (System Metrics' own), the Overview tiles, the Triggers
   and Ticks tables with their filter chips, and a row's detail card. Tokens only. */
.sm-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 8px; }
.sm-lbl { font-size: 11px; color: var(--text-dim); }
.sm-page .sm-ranges { margin-top: 10px; }
.sm-ranges .sm-lbl { margin-left: 6px; }
/* the grid: six tracks; a tile takes a third of the row (a sixth from 1700 px), a chart
   half, a book chart a third, a table or a detail the whole row */
.sm-page .sm-grid > .vm-card.sm-kind-tile { grid-column: span 2; }
.sm-page .sm-grid > .vm-card.sm-kind-chart { grid-column: span 3; }
.sm-page .sm-grid > .vm-card.sm-kind-third { grid-column: span 2; }
.sm-page .sm-grid > .vm-card.sm-kind-wide, .sm-page .sm-grid > .sm-wide { grid-column: 1 / -1; }
@media (min-width: 1700px) {
  .sm-page .sm-grid > .vm-card.sm-kind-tile { grid-column: span 1; }
}
@media (min-width: 2300px) {
  .sm-page .sm-grid > .vm-card.sm-kind-tile { grid-column: span 1; }
  .sm-page .sm-grid > .vm-card.sm-kind-chart { grid-column: span 4; }
  .sm-page .sm-grid > .vm-card.sm-kind-third { grid-column: span 2; }
  .sm-page .sm-grid > .vm-card.sm-kind-wide, .sm-page .sm-grid > .sm-wide { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .sm-page .sm-grid > .vm-card.sm-kind-tile, .sm-page .sm-grid > .vm-card.sm-kind-chart,
  .sm-page .sm-grid > .vm-card.sm-kind-third { grid-column: 1 / -1; }
}
.sm-kind-tile { padding-bottom: 8px; }
.sm-big { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sm-big.sm-big-long { font-size: 17px; }  /* "1 buy · 27 sell · 149 hold" stays on one line */
.sm-tile-sub { font-size: 11px; color: var(--text-dim); }
.sm-kind-tile .sm-tile-row { align-items: baseline; margin: 4px 0 2px; }
.sm-tone-bad .sm-big { color: var(--down); }
.sm-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 8px; }
.sm-chip-btn { font: inherit; font-size: 11px; padding: 3px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: inherit; }
.sm-chip-btn:hover { border-color: var(--selected); }
.sm-chip-btn.sm-active { background: var(--accent, #1f6feb); border-color: var(--accent, #1f6feb); color: var(--on-accent, #fff); }
.sm-chip-btn.sm-active .sm-dim { color: inherit; opacity: .85; }
.sm-tbl { overflow: auto; max-height: 560px; }
.sm-tbl table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.sm-tbl th, .sm-tbl td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.sm-tbl th { color: var(--text-dim); font-weight: 600; font-size: 11px; position: sticky; top: 0; background: var(--bg); z-index: 1; }
.sm-tbl th small { font-weight: 400; }
tr.sm-row { cursor: pointer; }
tr.sm-row:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
tr.sm-row.sm-selected td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
tr.sm-row.sm-flag td:first-child { box-shadow: inset 3px 0 var(--down); }
/* a trigger with a signal ≠ 0: lit by which side wanted the trade (both · backtest · live) */
tr.sm-row.sm-sig-both td { background: color-mix(in srgb, var(--up) 13%, transparent); }
tr.sm-row.sm-sig-bt td { background: color-mix(in srgb, var(--rm-success) 13%, transparent); }
tr.sm-row.sm-sig-live td { background: color-mix(in srgb, var(--rm-exec) 14%, transparent); }
.sm-tbl tr.sm-row.sm-selected td { background: color-mix(in srgb, var(--accent) 26%, transparent); font-weight: 600; }
.sm-tbl tr.sm-row.sm-selected td:first-child { box-shadow: inset 4px 0 var(--accent); }
tr.sm-row.sm-sig-both:hover td, tr.sm-row.sm-sig-bt:hover td, tr.sm-row.sm-sig-live:hover td {
  filter: brightness(0.96); }
.sm-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.sm-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 4px;
  vertical-align: -1px; border: 1px solid var(--border); }
.sm-legend i.sm-sig-both { background: color-mix(in srgb, var(--up) 40%, var(--bg)); }
.sm-legend i.sm-sig-bt { background: color-mix(in srgb, var(--rm-success) 40%, var(--bg)); }
.sm-legend i.sm-sig-live { background: color-mix(in srgb, var(--rm-exec) 40%, var(--bg)); }
.sm-sig { display: inline-block; min-width: 18px; text-align: center; font-weight: 600; }
.sm-sig-up { color: var(--up); }
.sm-sig-down { color: var(--down); }
.sm-sig-flat, .sm-sig-none { color: var(--text-dim); }
.sm-state-same { color: var(--text-dim); }
.sm-state-different { color: var(--down); font-weight: 600; }
.sm-state-missing { color: var(--warn); }
/* a row's detail: both sides and the WHY side by side, then the texts and the order life */
.sm-detail h3 { font-size: 13px; margin: 14px 0 6px; }
.sm-detail h3 small { font-weight: 400; }
.sm-detail-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12px;
  color: var(--text-dim); margin: 0 0 8px; }
.sm-detail-head b { color: var(--text); }
.sm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 1100px) { .sm-pair { grid-template-columns: 1fr; } }
.sm-pair > div { min-width: 0; border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 12px; }
.sm-comp { border-collapse: collapse; width: 100%; font-size: 12px; margin-top: 4px; }
.sm-comp th, .sm-comp td { padding: 3px 6px; border-bottom: 1px dashed var(--border); text-align: left; }
.sm-comp th { color: var(--text-dim); font-weight: 600; font-size: 11px; }
.sm-verdict-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0; max-height: 420px; overflow: auto; }
.sm-note { font-size: 11px; color: var(--text-dim); margin: 6px 0 0; }
.sm-detail .sm2-why-title { font-size: 12.5px; margin: 4px 0 6px; }
.sm-detail .sm2-lados { grid-template-columns: 1fr; gap: 8px; }
.sm-detail .cp-section { margin: 0 0 8px; }
.sm-detail .cp-table-wrap { max-height: 50vh; }
#sm-books .sm-range-btn { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
/* the Forense: a modal over the trigger detail, read only when its button is pressed */
.sm-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start;
  justify-content: center; padding: 24px 16px; overflow: auto;
  background: color-mix(in srgb, var(--text) 45%, transparent); }
.sm-modal[hidden] { display: none; }
.sm-modal-box { width: min(1700px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px 16px;
  box-shadow: var(--shadow, none); }
.sm-modal-head { display: flex; align-items: center; gap: 10px; position: sticky; top: 0;
  background: var(--bg); padding: 6px 0 8px; border-bottom: 1px solid var(--border); z-index: 1; }
.sm-modal-head h2 { font-size: 15px; margin: 0; }
.sm-modal-head .sm-copy { margin-left: auto; font-size: 12px; }
body.sm-modal-open { overflow: hidden; }
.sm-modal #fx-wrap { padding: 8px 0 0; }
/* any window of UTC days, next to the range pills (every view) */
.sm-custom { gap: 6px; margin-left: 10px; }
.sm-date { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); }
.sm-date input { font: inherit; font-size: 11px; color: var(--text); background: var(--panel);
  border: 1px solid var(--border); border-radius: 0; padding: 2px 6px; color-scheme: inherit; }
@media (max-width: 900px) { .sm-custom { margin-left: 0; } }
/* the executor's replay (sprint 79, H2), a third side in Triggers and the detail: tags are
   explanations the desk already knows (never a failure); the detail's three-side table. */
.sm-tags { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }
.sm-tag { display: inline-block; font-size: 10px; line-height: 14px; padding: 0 6px; border-radius: 8px;
  border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; cursor: help; }
.sm-tag-weekend, .sm-tag-live_blocked, .sm-tag-replay_blocked, .sm-tag-omitted { border-color: var(--warn); color: var(--warn); }
.sm-tag-no_live, .sm-tag-no_official, .sm-tag-live_open, .sm-tag-adds { border-color: var(--down); color: var(--down); }
.sm-side { font-weight: 600; }
.sm-side-buy { color: var(--up); }
.sm-side-sell { color: var(--down); }
.sm-xs { font-size: 11px; color: var(--text-dim); }
.sm-delta-pos { color: var(--up); }
.sm-delta-neg { color: var(--down); }
.sm-x3 { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 4px; }
.sm-x3 th, .sm-x3 td { padding: 4px 8px; border-bottom: 1px dashed var(--border); text-align: left; white-space: nowrap; }
.sm-x3 th { color: var(--text-dim); font-weight: 600; font-size: 11px; }
.sm-x3 td:first-child { color: var(--text-dim); }
.sm-x3 td.sm-d { color: var(--text-dim); }
.sm-x3 tr.sm-x3-diff td { color: var(--down); }
.sm-known { display: grid; gap: 4px; font-size: 12px; margin: 6px 0 0; }
.sm-known b { margin-right: 4px; }
.sm-events { font-size: 11.5px; font-variant-numeric: tabular-nums; max-height: 260px; overflow: auto; margin-top: 4px; }
.sm-events div { padding: 2px 0; border-bottom: 1px dashed var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-events .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-dim); }