/* ===================================================================
   Operator console design system — stylesheet.
   Token-only: every color is defined on :root for light and remapped for
   dark under both the OS media query and the data-theme="dark" pin.
   Companion: components.js (theme toggle, menus, tooltips, tabs, drawers).
   =================================================================== */

/* ---- tokens: light (default) ---- */
:root {
  color-scheme: light;
  --bg-primary: #ffffff; /* cards, header, popups */
  --bg-secondary: #f8f9fa; /* page canvas */
  --bg-hover: #f8f9fa; /* th, row hover */
  --bg-tertiary: #e8eaed; /* neutral fills: chips, tracks, button hover */
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --text-muted: #80868b;
  --border-default: #dadce0;
  --border-light: #e8eaed;
  --accent: #1a73e8;
  --accent-hover: #1967d2;
  --on-accent: #ffffff; /* text on an accent fill */
  --green: #34a853;
  --green-bg: #e6f4ea;
  --green-light: #81c995; /* "running" segment beside a completed --green */
  --yellow: #fbbc04;
  --yellow-bg: #fef7e0;
  --yellow-text: #b06000;
  --red: #ea4335;
  --red-bg: #fce8e6;
  --red-text: #c5221f;
  --red-light: #f28b82;
  --blue: #4285f4;
  --blue-bg: #e8f0fe;
  --blue-light: #8ab4f8;
  --detail-bg: #f8f9fa;
  --overlay: rgba(0, 0, 0, 0.5);
  --shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.2);
  --shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-tooltip: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-inline: 0 1px 6px rgba(0, 0, 0, 0.22);
  --font-sans: "Roboto", "Google Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Roboto Mono", "SF Mono", Monaco, monospace;
}

/* ---- tokens: dark ----
   Surfaces lighten with elevation (canvas < card < hover), text drops to
   Google's 200/300 grays, accent and status hues move to their 300 tones,
   and "running" segments become the 700 tones so completed work still
   reads as the stronger color. The same block is applied twice: once for
   the OS preference (unless the page pins light) and once for an explicit
   data-theme="dark" pin. Keep the two copies identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-primary: #292a2d;
    --bg-secondary: #1f1f21;
    --bg-hover: #303236;
    --bg-tertiary: #3c4043;
    --text-primary: #e8eaed;
    --text-secondary: #bdc1c6;
    --text-muted: #9aa0a6;
    --border-default: #444746;
    --border-light: #37393c;
    --accent: #8ab4f8;
    --accent-hover: #aecbfa;
    --on-accent: #202124;
    --green: #81c995;
    --green-bg: #1e3a2a;
    --green-light: #188038;
    --yellow: #fdd663;
    --yellow-bg: #3d3416;
    --yellow-text: #fdd663;
    --red: #f28b82;
    --red-bg: #3c1f1c;
    --red-text: #f28b82;
    --red-light: #c5221f;
    --blue: #8ab4f8;
    --blue-bg: #1f3350;
    --blue-light: #1967d2;
    --detail-bg: #232427;
    --overlay: rgba(0, 0, 0, 0.65);
    --shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.6);
    --shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-tooltip: 0 4px 16px rgba(0, 0, 0, 0.7);
    --shadow-inline: 0 1px 6px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #292a2d;
  --bg-secondary: #1f1f21;
  --bg-hover: #303236;
  --bg-tertiary: #3c4043;
  --text-primary: #e8eaed;
  --text-secondary: #bdc1c6;
  --text-muted: #9aa0a6;
  --border-default: #444746;
  --border-light: #37393c;
  --accent: #8ab4f8;
  --accent-hover: #aecbfa;
  --on-accent: #202124;
  --green: #81c995;
  --green-bg: #1e3a2a;
  --green-light: #188038;
  --yellow: #fdd663;
  --yellow-bg: #3d3416;
  --yellow-text: #fdd663;
  --red: #f28b82;
  --red-bg: #3c1f1c;
  --red-text: #f28b82;
  --red-light: #c5221f;
  --blue: #8ab4f8;
  --blue-bg: #1f3350;
  --blue-light: #1967d2;
  --detail-bg: #232427;
  --overlay: rgba(0, 0, 0, 0.65);
  --shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.6);
  --shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-tooltip: 0 4px 16px rgba(0, 0, 0, 0.7);
  --shadow-inline: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* ---- reset / base ---- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  overflow-x: hidden;
}
body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
input,
select,
textarea {
  background: var(--bg-primary);
}
button {
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
}
.muted {
  color: var(--text-muted);
}
.tabular {
  font-variant-numeric: tabular-nums;
}
.sub {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
[hidden] {
  display: none !important;
}
/* Frozen snapshot: every control is inert, including ones rendered later. */
body.snapshot .btn,
body.snapshot .link {
  opacity: 0.5;
  pointer-events: none;
}

/* ---- header ---- */
.header {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-default);
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.logo span {
  color: var(--accent);
}
.nav {
  display: flex;
  gap: 4px;
}
.nav-link {
  padding: 6px 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}
.nav-link:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.nav-link.active {
  background: var(--blue-bg);
  color: var(--accent);
}
.actor {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* ---- status vocabulary: pill / tag / chip (§6.5) ---- */
.phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.phase-badge.green {
  background: var(--green-bg);
  color: var(--green);
}
.phase-badge.yellow {
  background: var(--yellow-bg);
  color: var(--yellow-text);
}
.phase-badge.blue {
  background: var(--blue-bg);
  color: var(--accent);
}
.phase-badge.red {
  background: var(--red-bg);
  color: var(--red-text);
}
.task-type {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.task-type.green {
  background: var(--green-bg);
  color: var(--green);
}
.task-type.yellow {
  background: var(--yellow-bg);
  color: var(--yellow-text);
}
.task-type.blue {
  background: var(--blue-bg);
  color: var(--accent);
}
.task-type.red {
  background: var(--red-bg);
  color: var(--red-text);
}
.task-type.gray {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}
.task-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border-color: var(--text-muted);
}
.task-chip.yellow {
  background: var(--yellow-bg);
  color: var(--yellow-text);
  border-color: var(--yellow-text);
}
.task-chip.blue {
  background: var(--blue-bg);
  color: var(--accent);
  border-color: var(--accent);
}
.task-chip.red {
  background: var(--red-bg);
  color: var(--red-text);
  border-color: var(--red-text);
}
.task-chip.green {
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green);
}

/* ---- live indicator ---- */
.refresh-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.refresh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.refresh-dot.error {
  background: var(--red);
}
@media (prefers-reduced-motion: no-preference) {
  .refresh-dot:not(.error) {
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }
}

/* ---- banners ---- */
.snapshot-banner {
  background: var(--yellow-bg);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-default);
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 500;
}
.snapshot-banner.enforce {
  background: var(--red-bg);
  color: var(--red-text);
  border-bottom-color: var(--red);
}
.error-banner {
  background: var(--red-bg);
  color: var(--red-text);
  border-bottom: 1px solid var(--red);
  padding: 8px 24px;
  font-size: 12px;
  font-family: var(--font-mono);
}

/* ---- layout ---- */
.container {
  padding: 24px;
  max-width: 1800px;
  margin: 0 auto;
}
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.main-content {
  min-width: 0;
}
.main-content .card + .card {
  margin-top: 24px;
}
aside .card + .card {
  margin-top: 16px;
}
.tab-panel[hidden] {
  display: none;
}
@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* ---- card ---- */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
}
.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.card-header-left,
.card-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.card-header .count {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
}
.card-body {
  padding: 16px;
}
.card-body.table-body,
.card-body.logs-body {
  padding: 0;
}
.card-note {
  padding: 10px 16px;
  border-top: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: 12px;
}

/* ---- KPI tiles (§6.3) ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 16px;
}
.stat-card .stat-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.stat-card .stat-value {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-value.green {
  color: var(--green);
}
.stat-card .stat-value.yellow {
  color: var(--yellow-text);
}
.stat-card .stat-value.red {
  color: var(--red);
}
.stat-card .stat-value.blue {
  color: var(--accent);
}
.stat-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ---- sidebar statistics (§6.2) ---- */
.stats-section + .stats-section {
  margin-top: 20px;
}
.stats-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.stat-row:last-child {
  border-bottom: none;
}
.stat-label {
  color: var(--text-secondary);
}
.stat-value {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.stat-value.ceiling::before {
  content: "≤ ";
  color: var(--text-muted);
  font-weight: 400;
}
.stats-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
}

/* ---- tables (§6.4) ---- */
.table-container {
  overflow-x: auto;
  width: 100%;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
th,
td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  word-wrap: break-word;
  overflow-wrap: break-word;
  vertical-align: top;
}
th {
  background: var(--bg-hover);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  user-select: none;
}
th.sortable {
  cursor: pointer;
}
th.sortable:hover {
  background: var(--bg-tertiary);
}
th.sorted-asc::after {
  content: " ▲";
  font-size: 10px;
}
th.sorted-desc::after {
  content: " ▼";
  font-size: 10px;
}
th.num,
td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
tbody tr:hover {
  background: var(--bg-hover);
}
tbody tr:last-child td {
  border-bottom: none;
}
tr.clickable {
  cursor: pointer;
}
tr.selected td {
  background: var(--blue-bg);
}
tr.dim td {
  color: var(--text-muted);
}
tr.flash td {
  background: var(--yellow-bg);
}
.empty-state {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-muted);
}
.duration-warning {
  color: var(--yellow-text);
  font-weight: 500;
}
.duration-danger {
  color: var(--red);
  font-weight: 500;
}
.input-file {
  font-family: var(--font-mono);
  font-size: 11px;
  max-height: 60px;
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-all;
  display: block;
  cursor: pointer;
}
.input-file:hover {
  background: var(--bg-tertiary);
}

/* expandable detail rows */
th.toggle,
td.toggle {
  width: 30px;
  padding-left: 12px;
  padding-right: 0;
}
.chev {
  display: inline-block;
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.12s;
}
tr.row.open td {
  background: var(--detail-bg);
  border-bottom: 0;
}
tr.row.open td.toggle {
  box-shadow: inset 3px 0 0 var(--accent);
}
tr.row.open .chev {
  transform: rotate(90deg);
  color: var(--accent);
}
tr.detail td {
  background: var(--detail-bg);
  padding: 0 16px 14px 42px;
  cursor: default;
}
tr.detail td.toggle-rail {
  box-shadow: inset 3px 0 0 var(--accent);
}
tbody tr.detail:hover td {
  background: var(--detail-bg);
}
.panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 24px;
  padding: 12px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 6px;
}
.panel h4 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.panel dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 3px 12px;
  font-size: 12px;
}
.panel dt {
  color: var(--text-secondary);
  white-space: nowrap;
}
.panel dd {
  overflow-wrap: anywhere;
}
.panel .full {
  grid-column: 1 / -1;
}
@media (prefers-reduced-motion: reduce) {
  .chev {
    transition: none;
  }
}

/* ---- identifiers / code (§6.11) ---- */
.job-id {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 3px;
  word-break: break-all;
}
.node-id {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-tertiary);
  padding: 4px 8px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.node-copy-btn,
.copy-btn {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 11px;
  padding: 0 2px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.15s;
}
.node-id:hover .node-copy-btn,
tr:hover .node-copy-btn,
.flag-item:hover .copy-btn,
.stat-row:hover .copy-btn {
  opacity: 1;
}
.node-copy-btn:hover,
.copy-btn:hover {
  color: var(--accent);
}
@media (max-width: 600px) {
  .node-copy-btn,
  .copy-btn {
    opacity: 1;
  }
}
.copy-dropdown-menu {
  position: fixed;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  box-shadow: var(--shadow-menu);
  z-index: 1000;
  min-width: 200px;
  padding: 4px 0;
}
.copy-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  font-size: 13px;
  color: var(--text-primary);
}
.copy-dropdown-item:hover {
  background: var(--bg-tertiary);
}
.tok {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  overflow-wrap: anywhere;
}
.tok .op {
  color: var(--text-muted);
  margin-right: 4px;
}
.clickable-value {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
.clickable-value:hover {
  color: var(--accent-hover);
}
.flags-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.flag-item {
  display: grid;
  grid-template-columns: 280px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-light);
}
.flag-item:nth-child(odd) {
  border-right: 1px solid var(--border-light);
}
.flag-name {
  color: var(--text-secondary);
  font-size: 12px;
}
.flag-value {
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-all;
}
@media (max-width: 600px) {
  .flags-grid {
    grid-template-columns: 1fr;
  }
  .flag-item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name name"
      "value copy";
    gap: 2px 8px;
    padding: 8px 12px;
  }
  .flag-item:nth-child(odd) {
    border-right: none;
  }
  .flag-name {
    grid-area: name;
  }
  .flag-value {
    grid-area: value;
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .copy-btn {
    grid-area: copy;
  }
}

/* ---- progress (§6.6) ---- */
.progress-section + .progress-section {
  margin-top: 16px;
}
.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.progress-label {
  font-weight: 500;
}
.progress-timer {
  color: var(--text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}
.progress-timer:empty {
  display: none;
}
.progress-timer:not(:empty)::before {
  content: "· ";
  margin-right: 2px;
}
.progress-count {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.progress-bar {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}
td .progress-bar {
  width: 80px;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}
.progress-fill.warn {
  background: var(--yellow);
}
.progress-fill.over {
  background: var(--red);
}

/* ---- buttons (§6.7) ---- */
.btn {
  padding: 4px 8px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  min-width: 32px;
  transition: all 0.15s;
}
.btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn.danger {
  color: var(--red);
}
.btn.danger:hover {
  background: var(--red-bg);
  border-color: var(--red);
}
.btn.block {
  width: 100%;
  text-align: center;
}
.actions,
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sort-controls {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.sort-btn {
  padding: 4px 10px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  transition: all 0.15s;
}
.sort-btn:hover {
  background: var(--bg-tertiary);
}
.sort-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.chip {
  border: 1px solid var(--border-default);
  background: var(--bg-primary);
  color: var(--text-secondary);
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
}
.chip:hover {
  border-color: var(--accent);
}
.chip.active {
  background: var(--blue-bg);
  border-color: var(--accent);
  color: var(--accent);
}
.link {
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  font-size: inherit;
  overflow-wrap: anywhere;
  text-align: left;
}

/* ---- controls rows (sidebar) ---- */
.parallelism-controls {
  display: grid;
  gap: 12px;
}
.parallelism-row {
  /* Label above its controls: a 320px aside cannot hold "Max consolidators:"
     beside five stepper buttons on one line. */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.parallelism-label {
  font-size: 12px;
  color: var(--text-muted);
}
.parallelism-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  /* Anchor for the .inline-edit overlay. */
  position: relative;
}
.parallelism-input-group.editing > .btn,
.parallelism-input-group.editing > .parallelism-value {
  opacity: 0.45;
  pointer-events: none;
}
.parallelism-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: center;
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
/* The box is the whole control at rest, so it draws its edge in --text-muted
   (>= 3:1 on every surface, TestControlEdgeContrast); a border token is a
   divider weight and vanishes at 14px. Drawn by hand so both themes agree.
   Selectors are `label.check …` so they outrank `.field input` (padding,
   width 100%) and the later `.field .action-row input` (width auto): the
   consoles put these boxes inside form fields and action rows. */
label.check input[type="checkbox"],
label.check input[type="radio"] {
  appearance: none;
  box-sizing: border-box;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--text-muted);
  border-radius: 3px;
  background: var(--bg-primary);
  cursor: pointer;
}
label.check input[type="radio"] {
  border-radius: 50%;
}
/* :where keeps the disabled guard at zero specificity so :checked below
   still owns the border color on hover. */
label.check input:hover:where(:not(:disabled)) {
  border-color: var(--text-secondary);
}
label.check input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
label.check input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
label.check input[type="checkbox"]:checked::after {
  content: "";
  width: 3px;
  height: 7px;
  margin-top: -2px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
label.check input[type="radio"]:checked::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--on-accent);
}
label.check input:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Forced colors (Windows High Contrast) drop author backgrounds, which is
   all the hand-drawn mark is made of: hand the boxes back to the UA. The
   switch's forced-colors rules sit after the .switch rules they override. */
@media (forced-colors: active) {
  label.check input[type="checkbox"],
  label.check input[type="radio"] {
    appearance: auto;
    width: auto;
    height: auto;
    border: 0;
    background: none;
  }
  label.check input:checked::after {
    content: none;
  }
}

/* ---- inputs (§6.8) ---- */
.log-search {
  padding: 4px 10px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-primary);
  font-size: 12px;
  width: 220px;
}
.log-search:focus {
  outline: none;
  border-color: var(--accent);
}
.field {
  display: grid;
  gap: 4px;
}
.field label {
  font-size: 12px;
  color: var(--text-secondary);
}
.field input,
.field select,
.field textarea {
  padding: 6px 8px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-primary);
  width: 100%;
  font-size: 13px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.field textarea {
  min-height: 64px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.field .hint {
  color: var(--text-muted);
  font-size: 12px;
}
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* input beside its action button (sidebar "Force compact <id>" idiom) */
.field.inline {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.field.inline label {
  grid-column: 1 / -1;
}
.field + .field {
  margin-top: 12px;
}
/* One-off operator command: label on its own row, then inputs, selects,
   checks and the button flowing in one wrapping row (an SRE
   controls). Controls keep their natural width; a text input gets 200px. */
.action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.field .action-row input,
.field .action-row select {
  width: auto;
}
.field .action-row input[type="text"] {
  width: 200px;
}
.field .action-row input.wide {
  flex: 1 1 280px;
}

/* ---- feedback: status line (§6.9) ---- */
.scale-status {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 18px;
}
.scale-status.success {
  color: var(--green);
}
.scale-status.error {
  color: var(--red);
}

/* ---- modal (§6.10) ---- */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.popup-overlay.visible {
  display: flex;
}
.popup {
  background: var(--bg-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-popup);
  max-width: 720px;
  width: 94vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.popup-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.popup-close {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
}
.popup-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.popup-body {
  padding: 16px 20px;
  overflow: auto;
  display: grid;
  gap: 12px;
}
.popup-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}
.popup-footer .scale-status {
  flex: 1;
}
.popup-summary {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 12px;
  display: grid;
  gap: 4px;
}
.popup-table {
  width: 100%;
  border-collapse: collapse;
}
.popup-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: 12px;
}
.ack {
  border: 1px solid var(--red);
  background: var(--red-bg);
  padding: 10px 12px;
  border-radius: 4px;
}
.ack code {
  font-family: var(--font-mono);
}

/* ---- tooltips (§6.11) ---- */
.info-toggle {
  background: none;
  border: none;
  padding: 0 2px;
  margin-left: 2px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}
.info-toggle:hover,
.info-toggle:focus,
.info-toggle[aria-expanded="true"] {
  color: var(--accent);
}
/* Like .menu: appended to body and position: fixed, placed from the ⓘ
   trigger's rect, because cards clip absolutely positioned children. */
.story-tooltip {
  position: fixed;
  z-index: 1000;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  box-shadow: var(--shadow-tooltip);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre;
  font-variant-numeric: tabular-nums;
  max-width: min(480px, 90vw);
  overflow-x: auto;
}

/* ---- logs (§6.12) ---- */
.logs-container {
  max-height: 400px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
}
.log-line {
  padding: 4px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  gap: 12px;
}
.log-line:hover {
  background: var(--bg-hover);
}
.log-time {
  color: var(--text-muted);
  flex-shrink: 0;
  width: 70px;
}
.log-severity-cell {
  flex-shrink: 0;
  width: 80px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.log-severity {
  font-weight: 500;
}
.log-severity-info {
  color: var(--text-secondary);
}
.log-severity-warning {
  color: var(--yellow-text);
}
.log-severity-error {
  color: var(--red);
}
.log-severity-fatal {
  color: var(--red);
  font-weight: 700;
}
.log-task {
  font-size: 10px;
  color: var(--text-muted);
}
.log-node {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.log-node .copy-btn {
  opacity: 0.5;
}
.log-node:hover .copy-btn {
  opacity: 1;
}
.log-message {
  color: var(--text-primary);
  flex: 1;
  word-break: break-word;
}
.logs-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}

/* ---- legend (§6.13) ---- */
.histogram-legend,
.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  justify-content: center;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.axis-label {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
}
/* ---- controls bar (list-page shape): filters above a table ---- */
.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.controls label {
  color: var(--text-secondary);
  font-size: 12px;
}
.controls select,
.controls input[type="text"],
.controls input[type="search"],
.controls input[type="datetime-local"],
.controls input[type="date"],
.controls input[type="number"] {
  padding: 5px 8px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 12px;
}
.controls select:focus,
.controls input:focus {
  outline: none;
  border-color: var(--accent);
}
.controls .spacer {
  flex: 1;
}

/* ---- form controls (§6.8) ---- */
select {
  cursor: pointer;
}
.check-group {
  display: grid;
  gap: 6px;
}
/* range: native track/thumb in the accent, value chip beside it */
.range-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.range-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  height: 16px;
  margin: 0;
  background: transparent;
}
.range-row .parallelism-value {
  min-width: 48px;
}
/* toggle switch: a checkbox drawn as a 28×16 track */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .track {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 8px;
  /* Off is a filled track in --text-muted, the same rest-state edge as the
     .check box, so it reads on every surface and the --bg-primary knob
     reads on it. A neutral fill sinks into the card. */
  background: var(--text-muted);
  border: 1px solid var(--text-muted);
  transition:
    background 0.15s,
    border-color 0.15s;
  flex-shrink: 0;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.switch input:checked + .track {
  background: var(--accent);
  border-color: var(--accent);
}
.switch input:checked + .track::after {
  transform: translateX(12px);
  background: var(--on-accent);
}
.switch input:focus-visible + .track {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.switch input:disabled + .track {
  opacity: 0.5;
}
/* Forced colors: author backgrounds are dropped, so the knob gets a system
   border and the on-track a system fill. After every other .switch rule so
   equal-specificity selectors resolve in this block's favor. */
@media (forced-colors: active) {
  .switch .track::after {
    border: 1px solid ButtonText;
  }
  .switch input:checked + .track {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
  }
  .switch input:checked + .track::after {
    background: HighlightText;
  }
}
/* inline exact-value edit for a stepper chip (master shape) */
.parallelism-value.editable {
  cursor: pointer;
}
.parallelism-value.editable:hover {
  background: var(--bg-primary);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}
.inline-edit {
  /* Overlays the chip and the +1/+10 buttons, anchored right inside the
     group, so the row never reflows while an editor is open. */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-primary);
  border-radius: 6px;
  padding: 2px;
  box-shadow: var(--shadow-inline);
}
.inline-edit input {
  width: 64px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
}
.inline-edit input.invalid {
  border-color: var(--red);
}
.inline-edit .btn.icon {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 14px;
}
.inline-edit .btn.icon:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* ---- theme toggle (header-right, optional) ---- */
.theme-toggle {
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  padding: 4px 6px;
}
.theme-toggle:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* ---- interstitial (list-page shape): one centered card ---- */
.interstitial {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.interstitial .card {
  padding: 32px 40px;
  text-align: center;
  max-width: 520px;
  width: 100%;
}
.interstitial .card .phase-badge {
  margin-bottom: 16px;
}
.interstitial h1 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
}
.interstitial p {
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.interstitial .back {
  margin-top: 20px;
}
.interstitial a {
  color: var(--accent);
  text-decoration: none;
}
.interstitial a:hover {
  text-decoration: underline;
}

/* ---- histogram (§6.13) ---- */
.histogram-container {
  position: relative;
  height: 200px;
  margin-top: 8px;
  display: flex;
  align-items: stretch;
}
.y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  padding: 8px 8px 8px 0;
  text-align: right;
  min-width: 36px;
}
.histogram {
  display: flex;
  align-items: flex-end;
  height: 180px;
  background: var(--bg-secondary);
  border-radius: 4px;
  padding: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.histogram-bar {
  flex: 1 1 0;
  display: flex;
  flex-direction: column-reverse;
  min-width: 2px;
}
.bar-segment {
  width: 100%;
  transition: height 0.3s ease;
}
.bar-map-complete {
  background: var(--red);
}
.bar-map-running {
  background: repeating-linear-gradient(
    135deg,
    var(--red),
    var(--red) 2px,
    var(--red-light) 2px,
    var(--red-light) 4px
  );
}
.bar-consolidate-complete {
  background: var(--green);
}
.bar-consolidate-running {
  background: repeating-linear-gradient(
    135deg,
    var(--green),
    var(--green) 2px,
    var(--green-light) 2px,
    var(--green-light) 4px
  );
}
.bar-reduce-complete {
  background: var(--blue);
}
.bar-reduce-running {
  background: repeating-linear-gradient(
    135deg,
    var(--blue),
    var(--blue) 2px,
    var(--blue-light) 2px,
    var(--blue-light) 4px
  );
}
.progress-map-completed {
  background: var(--red);
}
.progress-map-running {
  background: var(--red-light);
}
.progress-consolidate-completed {
  background: var(--green);
}
.progress-consolidate-running {
  background: var(--green-light);
}
.progress-reduce-completed {
  background: var(--blue);
}
.progress-reduce-running {
  background: var(--blue-light);
}
.progress-failed {
  background: var(--text-secondary);
}

/* ===================================================================
   Forward catalog (§6.15): controls no page uses yet, designed in-system
   so the first page that needs one does not invent it.
   =================================================================== */

/* ---- sub-tabs inside a card header ---- */
.card-tabs {
  display: flex;
  gap: 2px;
}
.card-tabs .nav-link {
  padding: 4px 10px;
  font-size: 12px;
}
.nav-link .n {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.nav-link.active .n {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---- breadcrumbs ---- */
.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  min-width: 0;
}
.crumbs a,
.crumbs .link {
  color: var(--text-secondary);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--accent);
}
.crumbs .sep {
  color: var(--text-muted);
}
.crumbs .here {
  color: var(--text-primary);
  font-weight: 500;
}

/* ---- pager (table footer) ---- */
.pager {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pager .spacer {
  flex: 1;
}

/* ---- menu (dropdown / row overflow) ----
   Cards clip (overflow: hidden), so a menu is never a child of its trigger:
   append it to body, position: fixed, and place it from the trigger's
   getBoundingClientRect(). Close on outside click, Escape, and scroll. */
.menu {
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  padding: 4px 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  box-shadow: var(--shadow-menu);
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  font-size: 13px;
  color: var(--text-primary);
}
.menu-item:hover {
  background: var(--bg-hover);
}
.menu-item.danger {
  color: var(--red);
}
.menu-item:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}
.menu-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--border-light);
}
kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 5px;
  line-height: 16px;
}

/* ---- icon, split and busy buttons ---- */
.btn.icon {
  width: 28px;
  min-width: 28px;
  padding: 4px 0;
  text-align: center;
  line-height: 1;
}
.btn-group.split {
  gap: 0;
}
.btn-group.split .btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group.split .btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}
.btn.busy {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  border-top-color: transparent;
}
.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  border-top-color: transparent;
  vertical-align: -2px;
}
@media (prefers-reduced-motion: no-preference) {
  .btn.busy::after,
  .spinner {
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}

/* ---- notes / callouts ---- */
.note {
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid var(--border-default);
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.note.info {
  background: var(--blue-bg);
  border-color: var(--accent);
}
.note.warn {
  background: var(--yellow-bg);
  border-color: var(--yellow);
}
.note.error {
  background: var(--red-bg);
  border-color: var(--red);
  color: var(--red-text);
}
.note.success {
  background: var(--green-bg);
  border-color: var(--green);
}
.note b {
  font-weight: 500;
}

/* ---- tokens with remove, unit-suffixed inputs, combobox hint ---- */
.tok .rm {
  margin-left: 4px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
}
.tok .rm:hover {
  color: var(--red);
}
.token-input {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 4px 6px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-primary);
}
.token-input input {
  flex: 1;
  min-width: 80px;
  border: 0;
  outline: none;
  padding: 2px 4px;
  font-size: 12px;
  background: transparent;
}
.token-input:focus-within {
  border-color: var(--accent);
}
.input-unit {
  display: flex;
  align-items: stretch;
}
.input-unit input {
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-unit .unit {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--border-default);
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 12px;
}
.row3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* ---- drop zone ---- */
.dropzone {
  border: 1px dashed var(--border-default);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  background: var(--bg-secondary);
}
.dropzone.over {
  border-color: var(--accent);
  background: var(--blue-bg);
  color: var(--accent);
}
.dropzone .file {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* ---- code and diff blocks ---- */
.code {
  position: relative;
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-primary);
  overflow: auto;
  max-height: 320px;
  white-space: pre;
}
.code .copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0.6;
}
.code:hover .copy-btn {
  opacity: 1;
}
.diff .line {
  display: block;
  padding: 0 8px;
  margin: 0 -12px;
}
.diff .add {
  background: var(--green-bg);
  color: var(--green);
}
.diff .del {
  background: var(--red-bg);
  color: var(--red-text);
}
.diff .ln {
  display: inline-block;
  width: 32px;
  color: var(--text-muted);
  user-select: none;
}

/* ---- skeleton loaders ---- */
.skeleton {
  display: block;
  height: 12px;
  border-radius: 4px;
  background: var(--bg-tertiary);
}
.skeleton.w40 {
  width: 40%;
}
.skeleton.w60 {
  width: 60%;
}
.skeleton.w80 {
  width: 80%;
}
@media (prefers-reduced-motion: no-preference) {
  .skeleton {
    background: linear-gradient(
      90deg,
      var(--bg-tertiary) 25%,
      var(--bg-hover) 50%,
      var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
  }
  @keyframes shimmer {
    to {
      background-position: -200% 0;
    }
  }
}
td .skeleton {
  margin: 4px 0;
}

/* ---- mini bars and bar cells (numbers with a bar behind them) ---- */
.mini-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 130px;
}
.mini-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mini-bar-label {
  font-size: 10px;
  color: var(--text-muted);
  width: 10px;
}
.mini-bar {
  height: 7px;
  width: 110px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.mini-fill {
  height: 100%;
}
td.bar-cell {
  background-image: linear-gradient(var(--blue-bg), var(--blue-bg));
  background-repeat: no-repeat;
  background-size: var(--pct, 0%) 100%;
  font-variant-numeric: tabular-nums;
}
td.bar-cell.red {
  background-image: linear-gradient(var(--red-bg), var(--red-bg));
}
td.bar-cell.green {
  background-image: linear-gradient(var(--green-bg), var(--green-bg));
}

/* ---- KPI delta ---- */
.delta {
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}
.delta.up {
  color: var(--green);
}
.delta.down {
  color: var(--red);
}
.delta.flat {
  color: var(--text-muted);
}
.delta.bad.up {
  color: var(--red);
}
.delta.bad.down {
  color: var(--green);
}

/* ---- timeline (audit trail) ---- */
.timeline {
  list-style: none;
  padding-left: 18px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border-light);
}
.timeline li {
  position: relative;
  padding: 0 0 12px 0;
  font-size: 12px;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  border: 2px solid var(--bg-primary);
}
.timeline li.green::before {
  background: var(--green);
}
.timeline li.red::before {
  background: var(--red);
}
.timeline li.blue::before {
  background: var(--accent);
}
.timeline li.yellow::before {
  background: var(--yellow);
}
.timeline .when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 8px;
}
.timeline .who {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

/* ---- disclosure (advanced options) ---- */
details.disclosure {
  border: 1px solid var(--border-light);
  border-radius: 4px;
}
details.disclosure summary {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  list-style: none;
  user-select: none;
}
details.disclosure summary::before {
  content: "▶";
  display: inline-block;
  font-size: 9px;
  margin-right: 8px;
  color: var(--text-muted);
  transition: transform 0.12s;
}
details.disclosure[open] summary::before {
  transform: rotate(90deg);
  color: var(--accent);
}
details.disclosure .body {
  padding: 4px 12px 12px;
  border-top: 1px solid var(--border-light);
}

/* ---- choice cards (pick a mode) ---- */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.choice {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-primary);
  cursor: pointer;
}
.choice:hover {
  border-color: var(--accent);
}
.choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.choice .title {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.choice .desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--blue-bg);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- wizard steps ---- */
.steps {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.steps .step {
  display: flex;
  align-items: center;
  gap: 6px;
}
.steps .num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.steps .step.active {
  color: var(--text-primary);
  font-weight: 500;
}
.steps .step.active .num {
  background: var(--accent);
  color: var(--on-accent);
}
.steps .step.done .num {
  background: var(--green-bg);
  color: var(--green);
}
.steps .bar {
  flex: 1;
  height: 1px;
  background: var(--border-default);
  min-width: 16px;
}

/* ---- tree view ---- */
.tree,
.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tree ul {
  padding-left: 18px;
  border-left: 1px solid var(--border-light);
  margin-left: 7px;
}
.tree li {
  padding: 2px 0;
  font-size: 13px;
}
.tree .node {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.tree .node:hover {
  background: var(--bg-hover);
}
.tree .node.selected {
  background: var(--blue-bg);
  color: var(--accent);
}
.tree .node .chev {
  width: 10px;
}
.tree .node .count {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- drawer (right-hand detail panel) ---- */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 100vw);
  background: var(--bg-primary);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-popup);
  z-index: 900;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}
.drawer.open {
  transform: none;
}
.drawer .popup-header,
.drawer .popup-footer {
  flex-shrink: 0;
}
.drawer .popup-body {
  flex: 1;
  align-content: start;
}
@media (prefers-reduced-motion: reduce) {
  .drawer {
    transition: none;
  }
}

/* ---- sticky table header inside a scrolling container ---- */
.table-container.scroll {
  max-height: 420px;
  overflow-y: auto;
}
.table-container.scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ---- empty-state variants ---- */
.empty-state.error {
  color: var(--red-text);
}
.empty-state .btn {
  margin-top: 10px;
}

/* ---- page footer ---- */
.page-footer {
  padding: 16px 24px 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.page-footer a {
  color: var(--text-secondary);
}

/* ---- stacked drawers ----
   Drawers open on top of one another (row → detail → sub-detail) and the
   stack is never lost: exactly one drawer is FOCUSED; drawers below it are
   BEHIND (pushed 32px further left per level and dimmed, click to focus);
   drawers above it are COLLAPSED into 36px vertical tabs docked at the
   right edge (click to re-expand). The focused drawer and everything
   behind it shift left to clear the collapsed tabs. Per-drawer parameters
   set by the script: --depth (levels below focus), --collapsed-right
   (number of collapsed tabs to clear), --slot (a collapsed tab's position,
   0 = far right). At most DRAWER_MAX_VISIBLE (3) drawers render — the
   focused one and its nearest neighbors — the rest are PARKED off-screen
   and reachable from the stack menu ("2 of 5 ▾" in every drawer header),
   which also offers Close this / Close others / Close all. × closes only
   its own drawer; ‹ focuses the drawer below; Escape closes the focused
   drawer. */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 890;
  display: none;
}
.drawer-overlay.visible {
  display: block;
}
.drawer {
  transform: translateX(100%);
  visibility: hidden; /* off-screen AND out of the tab order once the slide ends */
  transition:
    transform 0.2s ease,
    width 0.2s ease,
    visibility 0s linear 0.2s;
}
.drawer.open {
  transform: translateX(
    calc(-32px * var(--depth, 0) - 36px * var(--collapsed-right, 0))
  );
  visibility: visible;
  transition-delay: 0s, 0s, 0s;
}
.drawer.open.behind {
  cursor: pointer;
}
.drawer.open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay);
  opacity: calc(var(--depth, 0) * 0.5);
  pointer-events: none;
  transition: opacity 0.2s;
}
.drawer.open.behind::after {
  pointer-events: auto;
}
.drawer.open.collapsed {
  width: 36px;
  transform: translateX(calc(-36px * var(--slot, 0)));
  cursor: pointer;
  overflow: hidden;
  background: var(--bg-hover);
}
.drawer.open.collapsed > * {
  display: none;
}
.drawer.open.collapsed::after {
  display: none;
}
.drawer.open.collapsed::before {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  padding: 16px 0;
}
.drawer.open.parked {
  transform: translateX(100%);
  visibility: hidden;
  transition-delay: 0s, 0s, 0.2s;
  pointer-events: none;
}
.drawer.open.collapsed:hover {
  background: var(--bg-tertiary);
}
.drawer .popup-header .stack-btn {
  margin-right: 8px;
}
.menu-item .n {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
}
.menu-item.current {
  color: var(--accent);
  font-weight: 500;
}
.drawer.open.collapsed:hover::before {
  color: var(--accent);
}
.drawer .popup-header .back {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 0 8px 0 0;
}
.drawer .popup-header .back:hover {
  color: var(--text-primary);
}
.drawer .popup-header .crumbs {
  flex: 1;
}

/* ---- tabbed panels ----
   Inside a card, drawer or modal. Horizontal: a pill strip (the header
   nav shape, one size down) above panes. Vertical: a 160px column of pills
   beside the pane, for settings-style forms with many sections. */
.tab-strip {
  display: flex;
  gap: 2px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--border-light);
}
.tab-strip .nav-link {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 4px 4px 0 0;
}
.tab-strip .nav-link.active {
  box-shadow: inset 0 -2px 0 var(--accent);
  background: none;
}
.tab-pane[hidden] {
  display: none;
}
.tab-pane {
  padding: 16px;
}
.tabs.vertical {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  min-height: 200px;
}
.tabs.vertical .tab-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  border-right: 1px solid var(--border-light);
}
.tabs.vertical .nav-link {
  text-align: left;
  font-size: 12px;
  padding: 6px 10px;
}
@media (max-width: 600px) {
  .tabs.vertical {
    grid-template-columns: 1fr;
  }
  .tabs.vertical .tab-list {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--border-light);
  }
}

/* ---- master-detail split pane ---- */
.master-detail {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: 240px;
}
.master-detail .master {
  border-right: 1px solid var(--border-light);
  overflow-y: auto;
}
.master-detail .list-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--border-light);
  background: none;
  text-align: left;
  font-size: 13px;
  color: var(--text-primary);
}
.master-detail .list-item:hover {
  background: var(--bg-hover);
}
.master-detail .list-item.selected {
  background: var(--blue-bg);
  box-shadow: inset 3px 0 0 var(--accent);
}
.master-detail .detail {
  padding: 16px;
  min-width: 0;
}
@media (max-width: 900px) {
  .master-detail {
    grid-template-columns: 1fr;
  }
  .master-detail .master {
    border-right: 0;
    border-bottom: 1px solid var(--border-light);
    max-height: 240px;
  }
}