/* =====================================================================
   Meterless Runtime — app.css
   App-specific styles on top of tokens.css. Includes theme system
   (light/dark), shell layout, panels, charts, scout particle field,
   and the full set of subsystem panels (cross-check, cache, etc).
   ===================================================================== */

/* ---------------------------------------------------------------------
   THEME — light is the default; .theme-dark flips backgrounds and tokens.
   The Meterless brand is achromatic-first; dark theme is a true inversion.
--------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --rt-bg: #ffffff;
  --rt-bg-alt: #fafafa;
  --rt-bg-sunk: #f5f5f5;
  --rt-panel: #ffffff;
  --rt-panel-alt: #fafafa;
  --rt-fg: #171717;
  --rt-fg-2: #4d4d4d;
  --rt-fg-3: #808080;
  --rt-border: #ebebeb;
  --rt-border-strong: #d1d1d1;
  --rt-ring: rgba(0,0,0,0.08) 0 0 0 1px;
  --rt-ring-strong: rgba(0,0,0,0.16) 0 0 0 1px;
  --rt-shadow:
    rgba(0,0,0,0.06) 0 0 0 1px,
    rgba(0,0,0,0.04) 0 1px 2px,
    rgba(0,0,0,0.04) 0 8px 24px -8px;

  --rt-accent: #0a72ef;
  --rt-pink: #de1d8d;
  --rt-coral: #ff5b4f;
  --rt-green: #2bbc8a;
  --rt-amber: #f59e0b;
  --rt-violet: #7c3aed;
  --rt-cyan: #06b6d4;
}

/* Nightshift (R4 §3.1) — the dark theme IS the night palette, and it is
   the default. Deep blue-violet base, never pure black: pure black kills
   the atmosphere that makes trails read. Every panel in the product
   inherits this through the semantic tokens — one skin, no legacy split. */
.theme-dark {
  color-scheme: dark;
  --rt-bg: var(--night, #0B0E1A);
  --rt-bg-alt: #0E1222;
  --rt-bg-sunk: #080B14;
  --rt-panel: var(--night-raised, #151A2E);
  --rt-panel-alt: #1A2038;
  --rt-fg: var(--bone, #E8E4DA);
  --rt-fg-2: #A9B2CE;
  --rt-fg-3: var(--haze, #7C8BB5);
  --rt-border: var(--ns-rule, #232A44);
  --rt-border-strong: #2E3757;
  --rt-ring: rgba(124,139,181,0.22) 0 0 0 1px;
  --rt-ring-strong: rgba(124,139,181,0.38) 0 0 0 1px;
  --rt-shadow:
    rgba(124,139,181,0.10) 0 0 0 1px,
    rgba(4,6,14,0.5) 0 1px 2px,
    rgba(4,6,14,0.7) 0 8px 24px -8px;

  /* Accents restated in the night vocabulary: the working accent is the
     swift lane's cool blue; green/amber/coral are the verdict colors. */
  --rt-accent: #6FA8DC;
  --rt-green: #5FBFA8;
  --rt-amber: #E0B450;
  --rt-coral: #D4576B;
  --rt-violet: #B57EDC;
  --rt-cyan: #6FA8DC;
  --rt-pink: #B57EDC;

  /* tokens.css paints raw `p`/`h1–h5` with --fg-primary (always #171717).
     Without this alias, markdown body copy stays black in dark theme
     while headings, bold, and list markers keep the night foreground. */
  --fg-primary: var(--rt-fg);
  --fg-secondary: var(--rt-fg-2);
  --fg-muted: var(--rt-fg-3);
}

html, body { height: 100%; }
body {
  background: var(--rt-bg);
  color: var(--rt-fg);
  margin: 0;
  overflow: hidden;
}
*, *::before, *::after { box-sizing: border-box; }

/* Native <select> popups don't inherit the theme: without color-scheme
   (set on :root / .theme-dark above) the list keeps the platform's light
   chrome while options inherit the bone foreground — white-on-white.
   Explicit option colors cover engines that honor them. */
select option { background: var(--rt-panel); color: var(--rt-fg); }

/* ---------------------------------------------------------------------
   APP SHELL
--------------------------------------------------------------------- */
.app {
  height: 100vh;
  display: grid;
  /* chrome · system line (§5.1) · main · status bar */
  grid-template-rows: auto auto 1fr auto;
  background: var(--rt-bg);
  color: var(--rt-fg);
}
/* Explicit rows: tabs without a system line (Night, Judges, Archive)
   must not shift main into the auto row and strand the status bar
   mid-viewport. */
.app > .chrome { grid-row: 1; }
.app > .system-line-row { grid-row: 2; }
.app > .main { grid-row: 3; }
.app > .statusbar { grid-row: 4; }

/* Top chrome */
.chrome {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--rt-border);
  background: var(--rt-bg);
  position: relative;
  z-index: 50;
}
.chrome-left, .chrome-right { display: flex; align-items: center; gap: 14px; }
.chrome-mid { display: flex; align-items: center; gap: 4px; }

.brand-tight {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  letter-spacing: -0.32px; color: var(--rt-fg);
}
.brand-tight .brand-mark {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--rt-fg);
  display: flex; align-items: center; justify-content: center;
}
.theme-dark .brand-tight .brand-mark { background: var(--rt-fg); }
.brand-tight .brand-mark svg { width: 13px; height: 13px; color: var(--rt-bg); }
.brand-sub {
  font-family: var(--mono); font-size: 11px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding-left: 10px; border-left: 1px solid var(--rt-border);
  margin-left: 4px;
}

/* Tabs */
.tabs {
  display: flex; align-items: center; gap: 2px;
  background: var(--rt-bg-alt);
  padding: 4px;
  border-radius: 10px;
  box-shadow: var(--rt-ring);
}
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-family: var(--font); font-size: 12.5px; font-weight: 500;
  color: var(--rt-fg-2);
  background: transparent; border: none; cursor: pointer;
  border-radius: 7px;
  transition: all 150ms ease;
  white-space: nowrap;
}
.tab:hover { color: var(--rt-fg); }
.tab.active {
  background: var(--rt-panel);
  color: var(--rt-fg);
  box-shadow: var(--rt-ring), 0 1px 2px rgba(0,0,0,0.04);
}
.tab .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rt-green); }

/* Status pill */
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 30px; border-radius: 999px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--rt-fg-2);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.status-pill .live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--rt-green);
  box-shadow: 0 0 0 3px rgba(43,188,138,0.18);
  animation: breathe-green 2.4s ease-in-out infinite;
}
@keyframes breathe-green {
  0%,100% { box-shadow: 0 0 0 3px rgba(43,188,138,0.20); }
  50% { box-shadow: 0 0 0 6px rgba(43,188,138,0.06); }
}

/* Endpoint chip */
.endpoint {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 30px;
  font-family: var(--mono); font-size: 11px; color: var(--rt-fg-2);
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring); border-radius: 8px;
}
.endpoint .dot-blue { width: 5px; height: 5px; border-radius: 50%; background: var(--rt-accent); }

.runtime-endpoint-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; padding: 12px 14px;
  background: var(--rt-panel); border-radius: 12px; box-shadow: var(--rt-ring);
}
.runtime-endpoint-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.endpoint-copy-btn {
  height: 30px; display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 8px; padding: 0 10px;
  background: var(--rt-bg-alt); color: var(--rt-fg-2); box-shadow: var(--rt-ring);
  font-family: var(--mono); font-size: 11px; cursor: pointer;
}
.endpoint-copy-btn:hover { color: var(--rt-accent); background: var(--rt-bg); }
@media (max-width: 900px) { .runtime-endpoint-card { align-items: flex-start; flex-direction: column; } .runtime-endpoint-actions { justify-content: flex-start; } }

/* Icon button */
.icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--rt-fg-2); border-radius: 7px; cursor: pointer;
  transition: all 150ms ease;
}
.icon-btn:hover { background: var(--rt-bg-alt); color: var(--rt-fg); }
.icon-btn svg { width: 16px; height: 16px; }

/* Footer status */
.statusbar {
  height: 28px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  border-top: 1px solid var(--rt-border);
  background: var(--rt-bg-alt);
  font-family: var(--mono); font-size: 11px; color: var(--rt-fg-3);
}
.statusbar .group { display: flex; align-items: center; gap: 12px; }
.statusbar .group-anchor { gap: 14px; }
.statusbar .stat { display: inline-flex; align-items: center; gap: 6px; }
.statusbar .stat .k { color: var(--rt-fg-3); }
.statusbar .stat .v { color: var(--rt-fg-2); font-weight: 500; }
.statusbar .stat .pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--rt-green); }
.statusbar .stat-mini { display: inline-flex; align-items: baseline; gap: 4px; }
.statusbar .stat-mini .k { color: var(--rt-fg-3); font-size: 10px; }
.statusbar .stat-mini .v { color: var(--rt-fg-2); font-weight: 500; }
.statusbar .stat-sep {
  width: 1px; height: 12px; background: var(--rt-border); display: inline-block;
}

/* ---------------------------------------------------------------------
   MAIN CONTENT AREA
--------------------------------------------------------------------- */
.main {
  overflow: hidden;
  position: relative;
  background: var(--rt-bg);
}
.scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.scroll.scroll-chat { overflow: hidden; }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--rt-border); border-radius: 4px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

.tab-view { display: none; }
.tab-view.active { display: block; }
.tab-view.tab-chat.active { height: 100%; min-height: 0; overflow: hidden; }

/* ---------------------------------------------------------------------
   PANELS / CARDS
--------------------------------------------------------------------- */
.panel {
  background: var(--rt-panel);
  border-radius: 12px;
  box-shadow: var(--rt-ring);
  padding: 20px;
  transition: box-shadow 150ms ease;
}
.panel-tight { padding: 16px; }
.panel-flush { padding: 0; overflow: hidden; }
.panel-flush:has(.fleet-board) { overflow: visible; }
/* Host-supplied surface: the section around it already draws the card. */
.panel-bare { background: transparent; box-shadow: none; border-radius: 0; }

.panel-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.panel-h h3 {
  font-family: var(--font); font-size: 14px; font-weight: 600;
  color: var(--rt-fg); margin: 0; letter-spacing: -0.32px;
}
.panel-h .right { display: flex; align-items: center; gap: 8px; }

.eyebrow {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  color: var(--rt-fg-3); text-transform: uppercase; letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.eyebrow::before { content: ''; width: 14px; height: 1px; background: var(--rt-border-strong); }

/* ---------------------------------------------------------------------
   GRID HELPERS
--------------------------------------------------------------------- */
.page { padding: 24px; max-width: 1600px; margin: 0 auto; }
.page-tight { padding: 20px 24px 32px; max-width: 1600px; margin: 0 auto; }

/* ---------------------------------------------------------------------
   PROGRESSIVE-DISCLOSURE SECTIONS
   Used to nest panels under a collapsible header with a clear
   "job to be done" title. Persists open/closed state per-id.
--------------------------------------------------------------------- */
.rt-section {
  margin: 0 0 16px 0;
  border-radius: 14px;
  background: var(--rt-panel);
  box-shadow: var(--rt-ring);
  overflow: hidden;
}
.rt-section-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) ease;
}
.rt-section-h:hover { background: var(--rt-bg-alt); }
.rt-section-l { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.rt-section-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rt-section-caret {
  font-family: var(--mono); font-size: 12px;
  color: var(--rt-fg-3);
  transition: transform var(--dur-fast) ease;
  display: inline-block;
  width: 12px;
  text-align: center;
}
.rt-section-caret.open { transform: rotate(90deg); color: var(--rt-fg-2); }
.rt-section-title {
  font-family: var(--font); font-size: 15px; font-weight: 600;
  color: var(--rt-fg); margin: 0; letter-spacing: -0.32px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rt-section-hint {
  font-family: var(--mono); font-size: 11px; color: var(--rt-fg-3);
  white-space: nowrap;
}
.rt-section-body {
  padding: 0 18px 18px 18px;
  border-top: 1px solid var(--rt-border);
  padding-top: 16px;
}
.rt-section.dense .rt-section-body { padding: 12px 16px 14px; }
.rt-section.open .rt-section-h:hover { background: transparent; }

/* The Section primitive nests panels by default — collapse the panel's
   own ring/shadow so the section's outer ring is the visible boundary. */
.rt-section-body > .panel,
.rt-section-body > .col > .panel,
.rt-section-body > .row > .panel,
.rt-section-body > .grid-2 > .panel,
.rt-section-body > .grid-3 > .panel,
.rt-section-body > .grid-dash > .panel,
.rt-section-body > .grid-dash-3 > .panel {
  box-shadow: none;
  border: 1px solid var(--rt-border);
  background: var(--rt-bg);
}
/* Single-panel sections (one panel, no surrounding wrapper) — flatten
   the panel completely so it doesn't double-card. */
.rt-section-body > .panel:only-child {
  padding: 0;
  border: none;
  background: transparent;
}
.theme-dark .rt-section-body > .panel,
.theme-dark .rt-section-body > .col > .panel,
.theme-dark .rt-section-body > .row > .panel,
.theme-dark .rt-section-body > .grid-2 > .panel,
.theme-dark .rt-section-body > .grid-3 > .panel {
  background: var(--rt-panel-alt);
}

/* Sub-section — used inside a Section to group ~2-3 sub-panels with
   a smaller header. No box wrapper. */
.rt-subsection { margin: 0 0 14px; }
.rt-subsection:last-child { margin-bottom: 0; }
.rt-subsection-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 0 8px 0;
}
.rt-subsection-l { display: flex; align-items: baseline; gap: 10px; }
.rt-subsection-title {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--rt-fg-2); margin: 0; letter-spacing: -0.24px;
  text-transform: none;
}
.rt-subsection-hint {
  font-family: var(--mono); font-size: 10.5px; color: var(--rt-fg-3);
}
.rt-subsection-body { display: flex; flex-direction: column; gap: 10px; }

/* Hero strip — 1 line of context at the top of a tab so the user
   knows what page they are on without crowding the screen. */
.rt-tab-hero {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rt-border);
}
.rt-tab-hero-l { display: flex; flex-direction: column; gap: 4px; }
.rt-tab-hero-l h1 {
  font-family: var(--font); font-size: 22px; font-weight: 600;
  color: var(--rt-fg); margin: 0; letter-spacing: -0.6px;
}
.rt-tab-hero-l p {
  font-family: var(--font); font-size: 13px;
  color: var(--rt-fg-2); margin: 0; letter-spacing: -0.16px;
  max-width: 720px;
}
.rt-tab-hero-r { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.rt-tab-hero-stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--rt-bg-alt);
  font-family: var(--mono); font-size: 11px;
}
.rt-tab-hero-stat .k { color: var(--rt-fg-3); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.rt-tab-hero-stat .v { color: var(--rt-fg); font-weight: 600; font-size: 13px; }
.rt-tab-hero-stat .v.accent { color: var(--rt-accent); }
.rt-tab-hero-stat .v.green { color: var(--rt-green); }

/* A hero that also carries the tab's sub-nav: stats on the first line,
   the sub-tab strip under them, both flush right. `align-items: baseline`
   above is for a single-line right side — a stacked one has to align to
   the top or the h1 drops to the strip's baseline. */
.rt-tab-hero.has-subnav { align-items: flex-start; }
.rt-tab-hero-r.is-stacked { flex-direction: column; align-items: flex-end; gap: 10px; }
.rt-tab-hero-stats {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: flex-end;
}
/* The count rides inside the tab so the strip says what is behind each
   name, not just the name — muted, so it reads as a footnote to the
   label rather than a second label. */
.eng-subtabs .tab { gap: 7px; }
.eng-subtab-n { font-size: 10px; color: var(--rt-fg-3); letter-spacing: 0; }
.eng-subtabs .tab.active .eng-subtab-n { color: var(--rt-fg-2); }

/* "Now" strip — when the most-relevant info is one line of summary,
   put it inline at the top of a section (e.g. Mode strip on dashboard). */
.rt-now {
  display: flex; align-items: stretch; gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.rt-now > .panel { flex: 1; min-width: 280px; }

@media (max-width: 1100px) {
  .rt-tab-hero { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rt-tab-hero-r { flex-wrap: wrap; }
  /* Stacked hero: the right side is already under the copy, so it reads
     left-aligned with it rather than pushed to a rail that is gone. */
  .rt-tab-hero-r.is-stacked { align-items: flex-start; }
  .rt-tab-hero-stats { justify-content: flex-start; }
}
.row { display: flex; align-items: center; gap: 12px; }
.row-w { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-dash { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.grid-dash-3 { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 16px; }
@media (max-width: 1100px) {
  .grid-dash, .grid-dash-3 { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   PROVIDER CARDS
--------------------------------------------------------------------- */
.provider {
  background: var(--rt-panel);
  border-radius: 10px;
  box-shadow: var(--rt-ring);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.provider:hover { box-shadow: var(--rt-ring-strong); }
.provider.warming { box-shadow: rgba(10,114,239,0.4) 0 0 0 1px, 0 0 24px rgba(10,114,239,0.12); }
.provider.racing { box-shadow: rgba(222,29,141,0.4) 0 0 0 1px, 0 0 24px rgba(222,29,141,0.12); }
.provider.winner { box-shadow: rgba(43,188,138,0.5) 0 0 0 1px, 0 0 24px rgba(43,188,138,0.18); }
.provider.cancelled { opacity: 0.55; }
.provider.disabled { opacity: 0.4; }
.provider.host-throttled { box-shadow: rgba(255,91,79,0.4) 0 0 0 1px; }

.provider-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.provider-name {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--rt-fg); display: inline-flex; align-items: center; gap: 8px;
}
.provider-icon {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.provider-state {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 7px; border-radius: 999px;
  background: var(--rt-bg-alt); color: var(--rt-fg-2);
  box-shadow: var(--rt-ring);
}
.provider-state .d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.provider-state.connected { color: var(--rt-fg-2); }
.provider-state.warm { color: var(--rt-accent); }
.provider-state.racing { color: var(--rt-pink); }
.provider-state.winner { color: var(--rt-green); }
.provider-state.cancelled { color: var(--rt-fg-3); }
.provider-state.error { color: var(--rt-coral); }
.provider-state.host-throttled { color: var(--rt-coral); }

.provider-meta { display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; color: var(--rt-fg-3); }
.provider-meta b { color: var(--rt-fg-2); font-weight: 500; }

.provider-bar {
  height: 4px; background: var(--rt-bg-alt); border-radius: 2px; overflow: hidden;
}
.provider-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--rt-accent), var(--rt-pink));
  transition: width 600ms ease;
}

/* ---------------------------------------------------------------------
   ACTIVE REQUEST TRACE
--------------------------------------------------------------------- */
.trace {
  background: var(--rt-panel);
  border-radius: 12px;
  box-shadow: var(--rt-ring);
  overflow: hidden;
}
.trace-head {
  padding: 8px 14px;
  border-bottom: 1px solid var(--rt-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.trace-head h3 {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--rt-fg); margin: 0; display: inline-flex; align-items: center; gap: 8px;
}
.trace-app {
  font-family: var(--mono); font-size: 10.5px; color: var(--rt-fg-2);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
}
.trace-body { padding: 10px 14px; }

.phases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  position: relative;
}
.phase {
  display: grid;
  grid-template-columns: 22px 130px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  font-family: var(--font); font-size: 12px;
  background: var(--rt-bg-alt);
  position: relative;
}
.phase + .phase::before {
  content: ''; position: absolute; left: 21px; top: -2px; height: 2px; width: 1px;
  background: var(--rt-border-strong);
}
.phase-num {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--rt-panel);
  color: var(--rt-fg-3); box-shadow: var(--rt-ring);
}
.phase-name {
  font-weight: 500; color: var(--rt-fg);
  display: inline-flex; align-items: center; gap: 6px;
}
.phase-tier {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  padding: 1px 5px; border-radius: 4px;
  background: var(--rt-panel); color: var(--rt-fg-2);
  box-shadow: var(--rt-ring);
}
.phase-source { color: var(--rt-fg-2); font-size: 11px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phase-time { font-family: var(--mono); font-size: 10.5px; color: var(--rt-fg-3); text-align: right; }
.trace-token-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px solid var(--rt-border); font-size:10.5px; color:var(--rt-fg-3); }
.trace-token-row span { padding:2px 7px; border-radius:999px; background:var(--rt-bg-alt); box-shadow:var(--rt-ring); }
.phase.active { background: rgba(10,114,239,0.06); box-shadow: rgba(10,114,239,0.18) 0 0 0 1px; }
.phase.active .phase-num { background: var(--rt-accent); color: white; }
.phase.done .phase-num { background: var(--rt-green); color: white; }
.phase.error { background: color-mix(in oklab, var(--rt-coral) 10%, var(--rt-bg-alt)); box-shadow: color-mix(in oklab, var(--rt-coral) 36%, transparent) 0 0 0 1px; }
.phase.error .phase-num { background: var(--rt-coral); color: white; }
.phase.skipped { opacity: 0.5; }

.trace-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--rt-coral) 10%, var(--rt-panel));
  box-shadow: color-mix(in oklab, var(--rt-coral) 30%, transparent) 0 0 0 1px;
  color: var(--rt-coral);
}
.candidate-errors { margin-top: 8px; display: grid; gap: 4px; color: var(--rt-fg-2); }

.theme-dark .phase.active { background: rgba(10,114,239,0.12); }

/* ---------------------------------------------------------------------
   SAVINGS COUNTER
--------------------------------------------------------------------- */
.savings {
  display: flex; flex-direction: column; gap: 6px;
}
.savings .num {
  font-family: var(--mono); font-size: 38px; font-weight: 500;
  color: var(--rt-fg); letter-spacing: -1px;
  font-feature-settings: "tnum";
  display: inline-flex; align-items: baseline; gap: 4px;
}
.savings .num .currency { font-size: 18px; color: var(--rt-fg-3); }
.savings .delta {
  font-family: var(--mono); font-size: 11px; color: var(--rt-green);
  display: inline-flex; align-items: center; gap: 4px;
}
.savings .lbl {
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.05em;
}

.token-panel { display: grid; gap: 10px; }
.token-speed { font-size: 30px; color: var(--rt-fg); letter-spacing: -0.04em; }
.token-speed span { font-size: 11px; color: var(--rt-fg-3); letter-spacing: 0; }
.token-split { height: 8px; display: flex; overflow: hidden; border-radius: 999px; background: var(--rt-bg-alt); box-shadow: var(--rt-ring); }
.token-split .in { background: var(--rt-accent); min-width: 0; }
.token-split .out { background: var(--rt-green); min-width: 0; }
.token-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.token-grid div { padding: 8px 10px; border-radius: 8px; background: var(--rt-bg-alt); box-shadow: var(--rt-ring); }
.token-grid span { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--rt-fg-3); text-transform: uppercase; letter-spacing: .05em; }
.token-grid b { display: block; margin-top: 3px; font-family: var(--mono); font-size: 14px; color: var(--rt-fg); font-weight: 500; }

/* Sparkline */
.spark { width: 100%; height: 56px; }
.spark path.fill { fill: rgba(10,114,239,0.10); }
.spark path.line { fill: none; stroke: var(--rt-accent); stroke-width: 1.5; stroke-linejoin: round; }

/* ---------------------------------------------------------------------
   MODE SELECTOR
--------------------------------------------------------------------- */
.modes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 6px;
  background: var(--rt-bg-alt);
  padding: 6px;
  border-radius: 12px;
  box-shadow: var(--rt-ring);
}
.mode {
  background: transparent; border: none; cursor: pointer;
  padding: 12px 10px;
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  text-align: left;
  transition: all 150ms ease;
  font-family: var(--font); color: var(--rt-fg-2);
}
.mode:hover { background: var(--rt-panel-alt); color: var(--rt-fg); }
.mode .name {
  font-size: 13px; font-weight: 600; letter-spacing: -0.2px;
  display: inline-flex; align-items: center; gap: 6px;
}
.mode .desc { font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3); text-transform: uppercase; letter-spacing: 0.04em; }
.mode.active {
  background: var(--rt-fg);
  color: var(--rt-bg);
  box-shadow: var(--rt-ring-strong);
}
.mode.active .desc { color: var(--rt-fg-3); }
.theme-dark .mode.active .desc { color: rgba(255,255,255,0.5); }
.mode .swatch {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rt-accent);
}
/* ML-MODES: the two axes of the mode fabric on one strip — HOW (the
   dispositions) and WHAT (the classes, with the live class index's
   availability). Unavailable rows are greyed with the index's `why`,
   never hidden: a class that vanished would read as one the runtime
   does not have. */
.modes-axis { grid-column: 1 / -1; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rt-fg-3); padding: 6px 4px 0; display: flex; gap: 10px; align-items: baseline; }
.modes-axis .modes-axis-now { color: var(--rt-fg-2); text-transform: none; letter-spacing: 0.02em; }
.mode.is-unavailable { opacity: 0.45; cursor: not-allowed; }
.mode.is-unavailable:hover { background: transparent; }
.mode-avail { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--rt-border); color: var(--rt-fg-3); }
.mode-avail.is-ready { color: var(--rt-green); border-color: color-mix(in srgb, var(--rt-green) 50%, transparent); }
.mode-avail.is-admittable { color: var(--rt-amber, #F2A65A); border-color: color-mix(in srgb, var(--rt-amber, #F2A65A) 50%, transparent); }
.mode-avail.is-cloud { color: var(--rt-fg-2); }
.mode-avail.is-unavailable { color: var(--rt-red, #d9534f); border-color: color-mix(in srgb, var(--rt-red, #d9534f) 40%, transparent); }
.mode.active .mode-avail { color: var(--rt-bg); border-color: color-mix(in srgb, var(--rt-bg) 40%, transparent); }
.app-mode-class { font-family: var(--mono); font-size: 10px; background: var(--rt-bg-sunk); color: var(--rt-fg-2); border: 1px solid var(--rt-border); border-radius: 4px; padding: 2px 4px; max-width: 150px; }
.ns-mode-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ns-mode-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--rt-border); color: var(--rt-fg-2); }
.ns-mode-chip i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

/* Hover popover — shows the actual race candidates per mode */
.mode { position: relative; }
.mode-hover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 280px; max-width: 340px;
  background: var(--rt-panel);
  color: var(--rt-fg);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.32), var(--rt-ring);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  text-align: left;
  font-family: var(--font);
}
.mode:hover .mode-hover,
.mode:focus-visible .mode-hover,
.mode:focus-within .mode-hover {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
/* Right-edge modes flip the popover so it doesn't clip off-screen */
.modes .mode:nth-child(n+4) .mode-hover { left: auto; right: 0; }
.mode-hover-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 4px;
}
.mode-hover-name { font-size: 13px; font-weight: 600; color: var(--rt-fg); }
.mode-hover-tier {
  font-size: 9px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mode-hover-hint {
  font-size: 10px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rt-border);
}
.mode-hover-list { display: flex; flex-direction: column; gap: 4px; }
.mode-hover-empty { font-size: 10px; color: var(--rt-fg-3); padding: 4px 0; }
.mode-hover-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 4px 0;
}
.mode-hover-row + .mode-hover-row { border-top: 1px solid rgba(255,255,255,0.04); }
.mode-hover-rank {
  font-size: 10px; color: var(--rt-fg-3); text-align: center;
}
.mode-hover-rank.win { color: var(--rt-green); font-size: 12px; }
.mode-hover-model {
  color: var(--rt-fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mode-hover-meta { font-size: 10px; color: var(--rt-fg-3); }
.mode-hover-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rt-border);
  font-size: 9px; color: var(--rt-fg-3);
  letter-spacing: 0.02em;
}
/* Active (selected) mode has a dark background — invert popover text */
.mode.active .mode-hover { background: var(--rt-panel); color: var(--rt-fg); }

/* ---------------------------------------------------------------------
   HOST PRESSURE GAUGES
--------------------------------------------------------------------- */
.gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .gauges { grid-template-columns: repeat(2, 1fr); } }

.gauge {
  background: var(--rt-bg-alt);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--rt-ring);
  display: flex; flex-direction: column; gap: 8px;
}
.gauge .top { display: flex; align-items: center; justify-content: space-between; }
.gauge .lbl {
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.gauge .val {
  font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--rt-fg);
  font-feature-settings: "tnum";
}
.gauge .meter {
  height: 6px; background: var(--rt-panel); border-radius: 3px; position: relative; overflow: hidden;
  box-shadow: var(--rt-ring);
}
.gauge .meter > .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--rt-accent);
  border-radius: 3px;
  transition: width 600ms ease, background 300ms ease;
}
.gauge .meter > .soft, .gauge .meter > .hard {
  position: absolute; top: -2px; bottom: -2px;
  width: 1px; background: var(--rt-fg-3);
}
.gauge .meter > .hard { background: var(--rt-coral); }
.gauge.warn .fill { background: var(--rt-amber); }
.gauge.crit .fill { background: var(--rt-coral); }
.gauge .axis { display: flex; gap: 8px; font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3); }
.gauge .axis b { color: var(--rt-fg-2); font-weight: 500; }

/* ---------------------------------------------------------------------
   SCOUT command bar (Cmd+K)
--------------------------------------------------------------------- */
.scout-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
.scout-overlay.open { opacity: 1; pointer-events: auto; }
.theme-dark .scout-overlay { background: rgba(0,0,0,0.65); }

.scout-shell {
  width: min(720px, 92vw);
  background: var(--rt-panel);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.32), var(--rt-ring-strong);
  overflow: hidden;
  transform: translateY(-6px);
  transition: transform 200ms ease;
  position: relative;
}
.scout-overlay.open .scout-shell { transform: translateY(0); }

.scout-wrapper {
  position: relative;
  height: 64px;
  border-bottom: 1px solid var(--rt-border);
  overflow: hidden;
  display: flex; align-items: center;
}
.scout-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: 0.65;
}
.scout-input {
  position: relative; z-index: 10;
  flex: 1; height: 100%;
  background: transparent !important;
  border: none; outline: none;
  font-family: var(--font); font-size: 17px; font-weight: 500;
  color: var(--rt-fg);
  padding: 0 18px 0 56px;
}
.scout-input::placeholder { color: var(--rt-fg-3); }
.scout-icon {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  z-index: 10; color: var(--rt-fg-3); width: 18px; height: 18px;
}
.scout-badge {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 10;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 5px 9px; border-radius: 999px;
  background: var(--rt-bg-alt); color: var(--rt-fg-2);
  box-shadow: var(--rt-ring);
  transition: all 200ms ease;
}
/* Per-intent colors are applied inline from RT.SCOUT_INTENT_BY_ID
   so the badge tints itself for any of the 131 modes. The classes
   below are only fallbacks for the 5 original intents that pre-date
   the registry, and to give .scout-badge.ROUTING a default look. */
.scout-badge.ROUTING { background: rgba(10,114,239,0.08); color: var(--rt-accent); }
.scout-badge-cat {
  margin-left: 8px; padding-left: 8px;
  border-left: 1px solid currentColor;
  opacity: 0.7;
  font-size: 9px; letter-spacing: 0.04em;
}
.scout-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
}

/* All-intents picker (Browse all 131…) */
.scout-picker {
  margin: 8px;
  border-radius: 12px;
  background: var(--rt-bg-alt);
  box-shadow: var(--rt-ring-strong);
}
.scout-picker-h {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rt-border);
}
.scout-picker-title {
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--rt-fg);
  white-space: nowrap;
}
.scout-picker-filter {
  flex: 1; height: 28px; padding: 0 10px;
  background: var(--rt-panel); border: none; border-radius: 6px;
  font-family: var(--font); font-size: 12px; color: var(--rt-fg);
  box-shadow: var(--rt-ring);
}
.scout-picker-filter:focus { outline: 2px solid var(--rt-accent); }
.scout-picker-body { padding: 10px; max-height: 50vh; overflow-y: auto; }
.scout-picker-cat { margin-bottom: 14px; }
.scout-picker-cat:last-child { margin-bottom: 0; }
.scout-picker-cat-h {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--rt-fg-3); text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 8px;
}
.scout-picker-cat-count {
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3);
  padding: 1px 6px; border-radius: 999px; background: var(--rt-panel);
  box-shadow: var(--rt-ring);
}
.scout-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}
.scout-picker-tile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px;
  background: var(--rt-panel);
  box-shadow: var(--rt-ring);
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease;
  text-align: left;
}
.scout-picker-tile:hover {
  transform: translateY(-1px);
  box-shadow: var(--rt-ring-strong);
}
.scout-picker-tile-name {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--rt-fg);
  word-break: break-word;
}
.scout-picker-tile-meta {
  display: flex; gap: 6px;
  font-family: var(--mono); font-size: 9px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.scout-picker-tile-tier {
  padding: 1px 5px; border-radius: 999px;
  background: var(--rt-bg-alt);
}
.scout-picker-tile-topo {
  padding: 1px 5px; border-radius: 999px;
  background: rgba(124, 58, 237, 0.15);
  color: #7c3aed;
}

.scout-results { max-height: 50vh; overflow-y: auto; padding: 8px; }
.scout-group { padding: 6px 10px; font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3); text-transform: uppercase; letter-spacing: 0.06em; }
.scout-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 7px;
  font-family: var(--font); font-size: 13px;
  cursor: pointer;
  color: var(--rt-fg);
}
.scout-item:hover, .scout-item.focused { background: var(--rt-bg-alt); }
.scout-item .ic { width: 26px; height: 26px; border-radius: 6px; background: var(--rt-bg-alt); box-shadow: var(--rt-ring); display:flex; align-items:center; justify-content:center; color: var(--rt-fg-2); }
.scout-item .ic svg { width: 14px; height: 14px; }
.scout-item .lbl { flex: 1; }
.scout-item .hint { font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3); }

.scout-hints {
  padding: 8px 16px;
  border-top: 1px solid var(--rt-border);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.kbd { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 4px; background: var(--rt-bg-alt); box-shadow: var(--rt-ring); font-family: var(--mono); font-size: 10px; color: var(--rt-fg-2); }

/* ---------------------------------------------------------------------
   ONBOARDING
--------------------------------------------------------------------- */
.onb-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: var(--rt-bg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.onb-grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, var(--rt-border) 1px, transparent 0);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, transparent 70%);
  pointer-events: none;
}
.onb-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(10,114,239,0.07), transparent 70%),
    radial-gradient(40% 40% at 80% 70%, rgba(222,29,141,0.04), transparent 70%);
  pointer-events: none;
}
/* The onboarding shell is a vertical flex column that fills the
   viewport, with the body section taking the available space and
   scrolling internally if content overflows. This way short laptops
   never push the actions off-screen. */
.onb-shell {
  position: relative;
  width: min(960px, 94vw);
  margin: 0 auto;
  display: flex; flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: clamp(16px, 2.4vh, 28px) clamp(16px, 3vw, 28px);
  gap: clamp(12px, 2vh, 20px);
}
.onb-top {
  display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0;
}
.onb-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: clamp(10px, 1.6vh, 16px);
  padding-right: 4px;
  scrollbar-width: thin;
}
.onb-eyebrow {
  font-family: var(--mono); font-size: 10.5px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  display: inline-flex; align-items: center; gap: 10px;
}
.onb-eyebrow .step { color: var(--rt-fg); }
.onb-version { color: var(--rt-fg-3); }
.onb-h {
  font-family: var(--font); font-weight: 600;
  font-size: clamp(24px, 3.6vw, 40px); line-height: 1.08;
  letter-spacing: -0.03em; color: var(--rt-fg);
  margin: 0;
}
.onb-lead {
  font-family: var(--font);
  font-size: clamp(13.5px, 1.4vw, 16px); line-height: 1.5;
  color: var(--rt-fg-2); max-width: 720px; letter-spacing: -0.005em;
  margin: 0;
}

.onb-step-body {
  display: flex; flex-direction: column;
  gap: clamp(10px, 1.4vh, 14px);
}

/* Welcome cards */
.onb-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { .onb-cards { grid-template-columns: 1fr; } }
.onb-card {
  background: var(--rt-panel);
  border-radius: 10px;
  box-shadow: var(--rt-ring);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.onb-card-icon {
  width: 30px; height: 30px;
  background: var(--rt-bg-alt);
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--rt-fg-2);
  margin-bottom: 4px;
}
.onb-card-title {
  font-size: 13.5px; font-weight: 600; color: var(--rt-fg);
}
.onb-card-desc {
  font-size: 11.5px; line-height: 1.45; color: var(--rt-fg-3);
}

/* Connect step */
.onb-connect {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 760px) { .onb-connect { grid-template-columns: 1fr; } }
.onb-connect-col {
  background: var(--rt-panel);
  border-radius: 10px;
  box-shadow: var(--rt-ring);
  padding: 12px 14px;
  display: flex; flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.onb-connect-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  color: var(--rt-fg);
}
.onb-connect-h-meta {
  margin-left: auto;
  font-size: 10px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.onb-connect-list {
  display: flex; flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.onb-connect-empty {
  font-size: 11px; color: var(--rt-fg-3);
  padding: 8px 4px;
}
.onb-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: background 120ms ease;
}
.onb-row:hover { background: var(--rt-bg-alt); }
.onb-row.ok { background: rgba(43,188,138,0.06); }
.onb-row.ok:hover { background: rgba(43,188,138,0.10); }
.onb-row-icon {
  width: 22px; height: 22px;
  background: var(--rt-bg-alt);
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--rt-fg-2);
}
.onb-row-name { font-size: 12.5px; color: var(--rt-fg); }
.onb-row-state {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--rt-fg-3);
}
.onb-row-state.ok { color: var(--rt-green); }
.onb-connect-foot {
  display: flex; gap: 6px;
  margin-top: 4px;
}
.onb-connect-hint {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--rt-fg-3);
  background: rgba(255,193,7,0.08);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
}
.onb-link {
  background: transparent; border: none;
  color: var(--rt-accent);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
  padding: 0;
}

/* Local models step */
.onb-local {
  display: flex; flex-direction: column;
  gap: 10px;
}
.onb-local-empty {
  font-size: 12px; color: var(--rt-fg-3);
  background: var(--rt-panel);
  border-radius: 8px; padding: 14px;
  text-align: center;
}
.onb-local-head {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.onb-local-hw {
  font-size: 11px; color: var(--rt-fg-3);
  flex: 1; min-width: 180px;
}
.onb-local-list {
  display: flex; flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 4px;
}
.onb-local-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--rt-panel);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--rt-ring);
  transition: all 140ms ease;
}
.onb-local-row.installed { box-shadow: 0 0 0 1px rgba(43,188,138,0.30); background: rgba(43,188,138,0.04); }
.onb-local-row.downloading { box-shadow: 0 0 0 1px rgba(10,114,239,0.30); }
.onb-local-row.blocked { opacity: 0.55; }
.onb-local-row.failed { box-shadow: 0 0 0 1px rgba(220,53,69,0.30); }
.onb-local-row-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.onb-local-row-r { flex-shrink: 0; }
.onb-local-name {
  font-size: 12.5px; font-weight: 600;
  color: var(--rt-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.onb-local-meta {
  font-size: 10.5px; color: var(--rt-fg-3);
  display: flex; gap: 4px; flex-wrap: wrap;
}
.onb-local-warn {
  font-size: 10.5px; color: rgb(255,193,7);
  margin-top: 2px;
}
.onb-local-row.failed .onb-local-warn { color: rgb(220,53,69); }
.onb-local-progress {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
}
.onb-local-progress-bar {
  flex: 1; height: 4px;
  background: var(--rt-bg-alt);
  border-radius: 2px; overflow: hidden;
}
.onb-local-progress-bar > span {
  display: block; height: 100%;
  background: var(--rt-accent);
  transition: width 240ms ease;
}
.onb-local-progress > span {
  font-size: 10.5px; color: var(--rt-fg-3);
  min-width: 44px; text-align: right;
}
.onb-local-state {
  font-size: 10.5px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.onb-local-state.ok { color: var(--rt-green); }
.onb-local-foot {
  font-size: 10.5px; color: var(--rt-fg-3);
  text-align: center;
  margin-top: 4px;
}
@media (max-width: 560px) {
  .onb-local-row { flex-direction: column; align-items: stretch; }
  .onb-local-row-r { display: flex; justify-content: flex-end; }
}

/* Tune step (privacy + mode) */
.onb-tune {
  display: flex; flex-direction: column;
  gap: 14px;
}
.onb-tune-block {
  display: flex; flex-direction: column;
  gap: 8px;
}
.onb-tune-label {
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--rt-fg-3);
}
.onb-tune-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.onb-tune-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 760px) {
  .onb-tune-grid { grid-template-columns: repeat(2, 1fr); }
  .onb-tune-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .onb-tune-grid, .onb-tune-grid-5 { grid-template-columns: 1fr; }
}
.onb-pick {
  background: var(--rt-panel);
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font);
  color: var(--rt-fg-2);
  box-shadow: var(--rt-ring);
  transition: all 140ms ease;
}
.onb-pick:hover {
  background: var(--rt-panel-alt, var(--rt-bg-alt));
  color: var(--rt-fg);
}
.onb-pick.on {
  background: var(--rt-fg);
  color: var(--rt-bg);
  box-shadow: 0 0 0 1px var(--rt-fg);
}
.onb-pick.on .onb-pick-desc { color: rgba(255,255,255,0.55); }
.theme-light .onb-pick.on .onb-pick-desc { color: rgba(255,255,255,0.65); }
.onb-pick-name {
  font-size: 12.5px; font-weight: 600;
}
.onb-pick-desc {
  font-size: 10.5px; line-height: 1.35;
  color: var(--rt-fg-3);
}

/* Ready step */
.onb-ready {
  display: flex; flex-direction: column;
  gap: 12px;
}
.onb-ready-card {
  background: var(--rt-panel);
  border-radius: 10px;
  box-shadow: var(--rt-ring);
  padding: 14px 18px;
}
.onb-ready-card-primary {
  background: linear-gradient(180deg, var(--rt-bg-alt) 0%, var(--rt-panel) 100%);
  text-align: center;
}
.onb-ready-eyebrow {
  font-size: 10px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.onb-ready-url {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 600; color: var(--rt-fg);
  word-break: break-all;
  letter-spacing: -0.01em;
}
.onb-ready-hint {
  margin-top: 6px;
  font-size: 10.5px; color: var(--rt-fg-3);
}
.onb-ready-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 480px) { .onb-ready-row { grid-template-columns: 1fr; } }
.onb-ready-stat {
  background: var(--rt-panel);
  border-radius: 8px;
  box-shadow: var(--rt-ring);
  padding: 10px 12px;
  text-align: center;
}
.onb-ready-stat-num {
  font-size: 18px; font-weight: 600; color: var(--rt-fg);
}
.onb-ready-stat-lbl {
  font-size: 9.5px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 2px;
}
.onb-ready-next {
  font-size: 11px; color: var(--rt-fg-3);
  text-align: center;
}

/* Endpoint pill in the actions bar — copy-on-click */
.onb-endpoint {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rt-bg-alt);
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
  color: var(--rt-fg-2);
  transition: all 140ms ease;
  max-width: 100%;
  overflow: hidden;
}
.onb-endpoint:hover {
  background: var(--rt-panel);
  color: var(--rt-fg);
}
.onb-endpoint-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rt-green);
  box-shadow: 0 0 0 2px rgba(43,188,138,0.18);
  flex-shrink: 0;
}
.onb-endpoint-label {
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--rt-fg-3);
}
.onb-endpoint-url {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px) {
  .onb-endpoint-url { display: none; }
}

/* Legacy discovery row, kept for any other callers */
.onb-discover {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 800px) { .onb-discover { grid-template-columns: 1fr; } }
.discovery-row {
  background: var(--rt-panel);
  border-radius: 10px;
  box-shadow: var(--rt-ring);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  position: relative;
  overflow: hidden;
}
.discovery-row .ic {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--rt-fg-2);
}
.discovery-row .info { flex: 1; min-width: 0; }
.discovery-row .name { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--rt-fg); display:flex; align-items:center; gap:8px; }
.discovery-row .desc { font-family: var(--mono); font-size: 11px; color: var(--rt-fg-3); margin-top: 2px; }
.discovery-row .state {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--rt-fg-3);
}
.discovery-row.scanning .state { color: var(--rt-accent); }
.discovery-row.found .state { color: var(--rt-green); }
.discovery-row.absent .state { color: var(--rt-fg-3); }
.discovery-row .state .d {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.discovery-row.scanning .state .d {
  background: var(--rt-accent);
  animation: scan-pulse 1.2s ease-in-out infinite;
}
@keyframes scan-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}
.discovery-row .scan-line {
  position: absolute; left: 0; top: 0; bottom: 0; width: 60px;
  background: linear-gradient(90deg, transparent, rgba(10,114,239,0.18), transparent);
  pointer-events: none;
  animation: scan-sweep 1.6s linear infinite;
}
.discovery-row:not(.scanning) .scan-line { display: none; }
@keyframes scan-sweep {
  from { transform: translateX(-60px); }
  to { transform: translateX(720px); }
}

.onb-progress {
  display: flex; gap: 6px;
}
.onb-progress .dot {
  flex: 1; height: 3px; border-radius: 2px; background: var(--rt-border);
  transition: background 300ms ease;
}
.onb-progress .dot.done { background: var(--rt-fg); }
.onb-progress .dot.active { background: var(--rt-accent); }

.onb-actions {
  display: flex; gap: 8px; align-items: center;
  flex-shrink: 0;
  padding-top: 8px;
  border-top: 1px solid var(--rt-border);
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  .onb-actions {
    gap: 6px;
  }
  .onb-actions .btn-rt-sm { font-size: 11px; height: 30px; padding: 0 10px; }
}

.btn-rt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; height: 42px;
  font-family: var(--font); font-size: 14px; font-weight: 500;
  border-radius: 9px; border: none; cursor: pointer;
  background: var(--rt-fg); color: var(--rt-bg);
  transition: all 150ms ease;
  white-space: nowrap;
}
.btn-rt:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.btn-rt:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-rt-ghost { background: var(--rt-panel); color: var(--rt-fg); box-shadow: var(--rt-ring); }
.btn-rt-ghost:hover { background: var(--rt-bg-alt); }
.btn-rt-accent { background: var(--rt-accent); color: white; }
.btn-rt-accent:hover { background: #0862d0; }
.btn-rt-coral { background: var(--rt-coral); color: white; }
.btn-rt-sm { height: 32px; font-size: 12px; padding: 0 12px; border-radius: 7px; }

/* The fleet panel (engine.jsx) reaches for .btn-ghost/.btn-primary; the
   tokens.css versions are light-theme-only and assume the .btn base, so
   on the night theme they rendered as native white buttons. Restated in
   --rt-* tokens: correct in both themes, cascade wins over tokens.css. */
.btn-ghost, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 12px;
  font-family: var(--font); font-size: 12px; font-weight: 500;
  border-radius: 7px; border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; box-shadow: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn-ghost { background: var(--rt-panel); color: var(--rt-fg); border-color: var(--rt-border); }
.btn-ghost:hover { background: var(--rt-bg-alt); border-color: var(--rt-border-strong); box-shadow: none; }
.btn-primary { background: var(--rt-accent); color: #fff; }
.btn-primary:hover { opacity: 0.92; }
.btn-ghost:disabled, .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Fleet-editor fields (engine.jsx) — the class predated its style. */
.rt-input {
  background: var(--rt-bg-sunk); color: var(--rt-fg);
  border: 1px solid var(--rt-border); border-radius: 7px;
  padding: 6px 8px; font-family: var(--font); font-size: 12px;
}
.rt-input:focus { outline: none; border-color: var(--rt-border-strong); }
.rt-input::placeholder { color: var(--rt-fg-3); }

/* ---------------------------------------------------------------------
   COMPUTE WATERFALL VISUAL
--------------------------------------------------------------------- */
.waterfall {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 24px;
  align-items: stretch;
  padding: 20px;
  position: relative;
  min-height: 320px;
}
.water-col {
  display: flex; flex-direction: column; gap: 8px;
  align-items: stretch;
  padding: 16px;
  background: var(--rt-bg-alt);
  border-radius: 12px;
  box-shadow: var(--rt-ring);
  min-height: 0;
}
.water-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex: 0 0 auto;
}
.water-col h4 {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--rt-fg-3); margin: 0;
}
.water-count {
  font-size: 10px; color: var(--rt-fg-3);
  padding: 2px 6px; border-radius: 999px;
  background: var(--rt-panel); box-shadow: var(--rt-ring);
}
.water-list {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0;
}
.water-col.scrollable .water-list {
  max-height: clamp(280px, 42vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin;
}
.water-card {
  background: var(--rt-panel); border-radius: 8px;
  box-shadow: var(--rt-ring);
  padding: 9px 10px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 12px;
  position: relative;
}
.water-card .nm { font-weight: 500; flex: 1; }
.water-card .tg { font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3); }
.water-card .d { width: 6px; height: 6px; border-radius: 50%; background: var(--rt-green); }
.water-card.race {
  box-shadow: rgba(10,114,239,0.45) 0 0 0 1px, rgba(10,114,239,0.18) 0 0 12px;
  animation: card-race-pulse 1.1s ease-in-out infinite;
}
.water-card.race .d { background: var(--rt-accent) !important; animation: dot-blink 700ms ease-in-out infinite; }
.water-card.win  {
  box-shadow: rgba(43,188,138,0.55) 0 0 0 1px, rgba(43,188,138,0.25) 0 0 14px;
  background: rgba(43,188,138,0.07);
  animation: card-win-pop 420ms cubic-bezier(0.2, 1.4, 0.4, 1) 1;
}
.water-card.disabled { opacity: 0.46; filter: grayscale(0.25); }
.water-card.disabled .nm { color: var(--rt-fg-3); }
@keyframes card-race-pulse {
  0%, 100% { box-shadow: rgba(10,114,239,0.45) 0 0 0 1px, rgba(10,114,239,0.12) 0 0 8px; }
  50%      { box-shadow: rgba(10,114,239,0.7) 0 0 0 1px, rgba(10,114,239,0.3) 0 0 16px; }
}
@keyframes card-win-pop {
  0%   { transform: scale(0.97); }
  60%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.water-svg {
  position: absolute; inset: 0; pointer-events: none;
  width: 100%; height: 100%;
}

/* Edge / inference network — middle lane */
.water-col.edge-col {
  position: relative;
  background: linear-gradient(180deg, var(--rt-bg-alt) 0%, var(--rt-panel) 100%);
  overflow: hidden;
}
.water-col.edge-col .water-count.live {
  background: rgba(43,188,138,0.18);
  color: var(--rt-green);
  box-shadow: rgba(43,188,138,0.4) 0 0 0 1px;
  animation: edge-pulse 1.4s ease-in-out infinite;
}
.water-col.edge-col .water-count.outcome {
  background: rgba(43,188,138,0.12);
  color: var(--rt-green);
  box-shadow: rgba(43,188,138,0.3) 0 0 0 1px;
}
@keyframes edge-pulse {
  0%, 100% { box-shadow: rgba(43,188,138,0.4) 0 0 0 1px; }
  50%      { box-shadow: rgba(43,188,138,0.7) 0 0 0 2px; }
}
.edge-stage.outcome {
  box-shadow: inset 0 0 0 1px rgba(43,188,138,0.35), inset 0 0 28px rgba(43,188,138,0.07);
}
.edge-stage.live {
  box-shadow: inset 0 0 0 1px rgba(10,114,239,0.40), inset 0 0 28px rgba(10,114,239,0.08);
  animation: stage-live-glow 1.6s ease-in-out infinite;
}
@keyframes stage-live-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(10,114,239,0.35), inset 0 0 22px rgba(10,114,239,0.06); }
  50%      { box-shadow: inset 0 0 0 1px rgba(10,114,239,0.55), inset 0 0 34px rgba(10,114,239,0.12); }
}
.edge-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  font-size: 10px;
  flex: 0 0 auto;
}
.edge-stat {
  background: var(--rt-panel);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--rt-ring);
}
.edge-stat .k { color: var(--rt-fg-3); text-transform: uppercase; letter-spacing: 0.04em; font-size: 9px; }
.edge-stat .v { color: var(--rt-fg); font-size: 12px; animation: stat-refresh 360ms ease 1; }
/* Cells that mirror a setpoint, not live traffic — nothing to announce. */
.edge-stat .v.v-static { animation: none; }
@keyframes stat-refresh {
  0%   { opacity: 0.2; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.edge-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 140px;
  border-radius: 8px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(10,114,239,0.04), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(127,134,148,0.05) 23px 24px),
    rgba(0,0,0,0.12);
  box-shadow: inset 0 0 0 1px var(--rt-border);
  overflow: hidden;
}
.edge-race {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
}
.edge-lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 26%) auto auto;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 5px;
  transition: background 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}
.edge-lane.more { grid-template-columns: 1fr; color: var(--rt-fg-3); font-size: 10px; padding-left: 2px; }
.edge-lane.lane-enter { animation: lane-enter 360ms cubic-bezier(0.2, 0.9, 0.3, 1) backwards; }
@keyframes lane-enter {
  0%   { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}
.edge-lane .lane-name {
  font-family: var(--font);
  color: var(--rt-fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0;
}
.edge-lane .lane-kind {
  flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 2px;
  background: rgba(127,134,148,0.6);
}
.edge-lane .lane-kind.local { background: rgba(43,188,138,0.75); border-radius: 50%; }
.edge-lane .lane-kind.cloud { background: rgba(10,114,239,0.75); }
.edge-lane .lane-vendor {
  flex: 0 0 auto;
  font-size: 9px; color: var(--rt-fg-3);
  background: var(--rt-panel);
  border-radius: 999px;
  padding: 1px 6px;
  box-shadow: var(--rt-ring);
  text-transform: lowercase;
}
.edge-lane .lane-bar {
  height: 5px;
  background: var(--rt-panel);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.edge-lane .lane-bar > span {
  display: block; height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(10,114,239,0.55), rgb(10,114,239));
  box-shadow: 0 0 6px rgba(10,114,239,0.5);
  transition: width 200ms linear;
}
/* Indeterminate: no first byte yet — shimmer sweep instead of a width. */
.edge-lane .lane-bar.indeterminate > span {
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(10,114,239,0.7) 45%, rgba(56,160,255,0.95) 50%, rgba(10,114,239,0.7) 55%, transparent 100%);
  background-size: 220% 100%;
  box-shadow: none;
  animation: lane-shimmer 1.1s linear infinite;
}
@keyframes lane-shimmer {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
.edge-lane .lane-status {
  font-size: 9px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  min-width: 56px; text-align: right;
}
.edge-lane .lane-ms {
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3);
  min-width: 42px; text-align: right;
}
/* Status-driven coloring */
.edge-lane.race      .lane-bar > span { background: linear-gradient(90deg, rgba(10,114,239,0.55), rgb(10,114,239)); }
.edge-lane.streaming .lane-bar > span {
  background: linear-gradient(90deg, rgba(10,114,239,0.6), rgb(56,160,255));
  box-shadow: 0 0 8px rgba(56,160,255,0.7);
  animation: lane-pulse 700ms ease-in-out infinite;
}
.edge-lane.streaming .lane-status { color: var(--rt-accent); }
.edge-lane.win {
  background: rgba(43,188,138,0.10);
  box-shadow: inset 0 0 0 1px rgba(43,188,138,0.4), 0 0 10px rgba(43,188,138,0.12);
  animation: lane-win-pop 460ms cubic-bezier(0.2, 1.4, 0.4, 1) 1;
}
.edge-lane.win .lane-bar > span {
  background: linear-gradient(90deg, rgba(43,188,138,0.6), rgb(43,188,138));
  box-shadow: 0 0 8px rgba(43,188,138,0.65);
  position: relative;
  overflow: hidden;
}
.edge-lane.win .lane-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: lane-sweep 1.4s ease-out 1;
}
@keyframes lane-sweep {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
@keyframes lane-win-pop {
  0%   { transform: scale(0.985); }
  60%  { transform: scale(1.008); }
  100% { transform: scale(1); }
}
.edge-lane.win .lane-name { color: var(--rt-green); font-weight: 600; }
.edge-lane.win .lane-status { color: var(--rt-green); }
.edge-lane.reclaim .lane-bar > span { background: linear-gradient(90deg, rgba(222,29,141,0.4), rgb(222,29,141)); opacity: 0.7; box-shadow: 0 0 6px rgba(222,29,141,0.35); }
.edge-lane.reclaim .lane-name { color: var(--rt-fg-2); }
.edge-lane.reclaim .lane-status { color: rgb(222,29,141); }
.edge-lane.tied {
  background: rgba(255,193,7,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,193,7,0.30);
}
.edge-lane.tied .lane-bar > span { background: linear-gradient(90deg, rgba(255,193,7,0.5), rgb(255,193,7)); box-shadow: 0 0 6px rgba(255,193,7,0.4); }
.edge-lane.tied .lane-status { color: rgb(255,193,7); }
.edge-lane.lost .lane-bar > span { background: var(--rt-fg-3); opacity: 0.4; box-shadow: none; }
.edge-lane.lost { opacity: 0.75; }
.edge-lane.lost .lane-name, .edge-lane.lost .lane-status { color: var(--rt-fg-3); }
.edge-lane.failed {
  background: rgba(220,53,69,0.10);
  box-shadow: inset 0 0 0 1px rgba(220,53,69,0.35);
}
.edge-lane.failed .lane-bar > span { background: linear-gradient(90deg, rgba(220,53,69,0.5), rgb(220,53,69)); box-shadow: 0 0 6px rgba(220,53,69,0.4); }
.edge-lane.failed .lane-name, .edge-lane.failed .lane-status { color: rgb(220,53,69); }
/* Optimistic streaming: the on-device draft lane (cyan, breathing) and
   the frontier upgrade that replaces it in place (green level-up pop). */
.edge-lane.draft { background: rgba(56,189,208,0.08); box-shadow: inset 0 0 0 1px rgba(56,189,208,0.24); }
.edge-lane.draft .lane-bar > span { background: linear-gradient(90deg, rgba(56,189,208,0.35), rgba(56,189,208,0.95)); box-shadow: 0 0 6px rgba(56,189,208,0.4); animation: draft-pulse 1.1s ease-in-out infinite; }
.edge-lane.draft .lane-name { color: var(--rt-fg-2); }
.edge-lane.draft .lane-status { color: rgb(56,189,208); }
.edge-lane.upgrade { background: rgba(52,199,89,0.12); box-shadow: inset 0 0 0 1px rgba(52,199,89,0.42); animation: lane-win-pop 0.5s ease; }
.edge-lane.upgrade .lane-bar > span { background: linear-gradient(90deg, rgba(56,189,208,0.65), var(--rt-green)); box-shadow: 0 0 10px rgba(52,199,89,0.5); }
.edge-lane.upgrade .lane-name { color: var(--rt-green); font-weight: 600; }
.edge-lane.upgrade .lane-status { color: var(--rt-green); }
@keyframes draft-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes lane-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.45); }
}

/* Respect users who turn motion off — kill decorative animation but
   keep the status colors and final states. */
@media (prefers-reduced-motion: reduce) {
  .edge-lane.lane-enter,
  .edge-lane.win,
  .edge-lane.win .lane-bar::after,
  .edge-lane.streaming .lane-bar > span,
  .edge-lane.draft .lane-bar > span,
  .edge-lane.upgrade,
  .chat-draft-pulse,
  .edge-lane .lane-bar.indeterminate > span,
  .edge-stage.live,
  .edge-stat .v,
  .water-card.race,
  .water-card.race .d,
  .water-card.win,
  .water-col.edge-col .water-count.live {
    animation: none !important;
  }
}
.edge-idle {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 8px;
  height: 100%;
  padding: 10px;
}
.edge-last {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.edge-last-h {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--rt-fg-3);
}
.edge-last-path {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 12px;
}
.edge-last-path .hop {
  background: var(--rt-panel);
  padding: 4px 8px; border-radius: 6px;
  box-shadow: var(--rt-ring);
  color: var(--rt-fg-2);
}
.edge-last-path .hop.win {
  color: var(--rt-green);
  box-shadow: rgba(43,188,138,0.4) 0 0 0 1px;
}
.edge-last-path .arr { color: var(--rt-fg-3); font-family: var(--mono); }
.edge-last-meta { font-size: 10px; color: var(--rt-fg-3); }
.edge-reading {
  font-size: 10px; text-align: center; max-width: 240px;
}
.edge-legend {
  display: flex; justify-content: space-between; gap: 6px;
  flex: 0 0 auto;
  font-size: 9px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.edge-legend span { display: inline-flex; align-items: center; gap: 4px; }
.edge-legend .dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
}
.edge-legend .dot.dispatch { background: rgb(10,114,239); }
.edge-legend .dot.win      { background: rgb(43,188,138); }
.edge-legend .dot.reclaim  { background: rgb(222,29,141); }
.edge-legend .dot.tied     { background: rgb(255,193,7); }
.edge-legend .dot.failed   { background: rgb(220,53,69); }

/* Race outcome card */
.edge-outcome {
  position: relative; z-index: 1;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  transition: opacity 300ms ease;
  animation: outcome-enter 380ms cubic-bezier(0.2, 0.9, 0.3, 1) 1;
}
@keyframes outcome-enter {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .edge-outcome { animation: none; }
}
.edge-outcome-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rt-border);
}
.edge-outcome-banner {
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
}
.edge-outcome-banner.win {
  color: var(--rt-green);
  background: rgba(43,188,138,0.14);
  box-shadow: inset 0 0 0 1px rgba(43,188,138,0.35);
}
.edge-outcome-banner.fail {
  color: rgb(220,53,69);
  background: rgba(220,53,69,0.14);
  box-shadow: inset 0 0 0 1px rgba(220,53,69,0.35);
}
.edge-outcome-tally {
  font-size: 10px; color: var(--rt-fg-3);
}
.edge-outcome-list {
  display: flex; flex-direction: column; gap: 4px;
}

/* ---------------------------------------------------------------------
   CACHE / CROSS-CHECK / TIER-SPLIT visualizations
--------------------------------------------------------------------- */
.cache-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--rt-bg-alt);
  font-family: var(--mono); font-size: 12px;
}
.cache-row + .cache-row { margin-top: 4px; }
.cache-row .type {
  width: 110px; color: var(--rt-fg-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
}
.cache-row .bar { flex: 1; height: 6px; background: var(--rt-panel); border-radius: 3px; overflow: hidden; box-shadow: var(--rt-ring); }
.cache-row .bar > span { display: block; height: 100%; background: var(--rt-accent); transition: width 600ms ease; }
.cache-row .pct { width: 56px; text-align: right; color: var(--rt-fg); }

.risk-row {
  display: grid; grid-template-columns: 90px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 8px;
  background: var(--rt-bg-alt); font-family: var(--font); font-size: 13px;
}
.risk-row + .risk-row { margin-top: 4px; }
.risk-row .lvl {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.risk-row .lvl .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.risk-row .lvl.low { color: var(--rt-green); background: rgba(43,188,138,0.10); }
.risk-row .lvl.med { color: var(--rt-amber); background: rgba(245,158,11,0.10); }
.risk-row .lvl.high { color: var(--rt-coral); background: rgba(255,91,79,0.10); }
.risk-row .lvl.crit { color: white; background: var(--rt-coral); }
.risk-row .desc { color: var(--rt-fg-2); font-size: 12px; }
.risk-row .v { font-family: var(--mono); font-size: 11px; color: var(--rt-fg-3); }

/* TIER-SPLIT phase chart */
.tiers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  align-items: stretch;
  padding: 14px;
  background: var(--rt-bg-alt);
  border-radius: 10px;
}
.tier {
  background: var(--rt-panel); border-radius: 8px; box-shadow: var(--rt-ring);
  padding: 12px; display: flex; flex-direction: column; gap: 6px;
}
.tier h5 { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--rt-fg-3); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.tier .nm { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--rt-fg); }
.tier .tg { font-family: var(--mono); font-size: 11px; color: var(--rt-fg-2); }
.tier .ms { font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3); }

/* SETPOINT ROW */
.setp-row {
  display: grid;
  grid-template-columns: 160px 1fr 100px 100px;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--rt-bg-alt);
}
.setp-row + .setp-row { margin-top: 4px; }
.setp-row .lbl { font-family: var(--font); font-size: 13px; color: var(--rt-fg); font-weight: 500; }
.setp-row .lbl small { display: block; font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; }
.setp-row input[type="range"] { width: 100%; }
.setp-row .v { font-family: var(--mono); font-size: 12px; color: var(--rt-fg); text-align: right; }

input[type="range"].rt {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; background: var(--rt-border); border-radius: 2px;
  outline: none;
}
input[type="range"].rt::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--rt-fg); cursor: pointer; border: 2px solid var(--rt-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* APPS */
.apps-empty {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 18px; border-radius: 12px;
  background: var(--rt-bg-alt); color: var(--rt-fg-2);
  box-shadow: var(--rt-ring);
}
.apps-empty svg { color: var(--rt-accent); margin-top: 2px; }
.apps-empty b { color: var(--rt-fg); font-size: 13px; }
.apps-empty p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--rt-fg-3); }
.apps-list { display: grid; gap: 6px; }
.app-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 10px;
  background: var(--rt-bg-alt);
  box-shadow: var(--rt-ring);
}
.app-row + .app-row { margin-top: 4px; }
.app-icon {
  width: 32px; height: 32px; border-radius: 7px;
  background: var(--rt-panel); box-shadow: var(--rt-ring);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--rt-fg);
}
.app-icon.gaia { background: linear-gradient(135deg, #1a1a2e, #2d2d5f); color: white; }
.app-icon.relay { background: linear-gradient(135deg, #0f1f0f, #1a3a1a); color: var(--rt-green); }
.app-icon.swarms { background: linear-gradient(135deg, #0a1a0f, #0f2f1a); color: var(--rt-green); }
.app-icon.focus { background: linear-gradient(135deg, #1a1418, #2a1a22); color: var(--rt-pink); }
.app-row .nm { flex: 1; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--rt-fg); }
.app-row .nm small { display: block; font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.app-row .reqs { font-family: var(--mono); font-size: 11px; color: var(--rt-fg-2); }
.app-metric { display:flex; flex-direction:column; gap:2px; min-width:74px; font-family:var(--mono); text-align:right; }
.app-metric span { font-size:12px; color:var(--rt-fg); }
.app-metric small { font-size:9.5px; color:var(--rt-fg-3); text-transform:uppercase; letter-spacing:.04em; }
.app-chip { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 7px; border-radius: 6px; background: var(--rt-panel); color: var(--rt-fg-3); font-size: 10.5px; box-shadow: var(--rt-ring); }
.app-lanes { position: relative; flex: 0 0 auto; }
.app-lanes-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 4px 8px; border: 0; border-radius: 7px;
  background: var(--rt-panel); color: var(--rt-fg-2);
  font-family: var(--font); font-size: 11px; font-weight: 550;
  box-shadow: var(--rt-ring); cursor: pointer;
}
.app-lanes-btn:hover { color: var(--rt-fg); }
.app-lanes-btn.is-set { color: var(--rt-accent); }
.app-lanes-btn[aria-expanded="true"] { color: var(--rt-fg); box-shadow: var(--rt-ring), 0 0 0 1px var(--rt-accent); }
.app-lanes-swatches { display: inline-flex; }
.app-lanes-swatches i {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.app-lanes-swatches i + i { margin-left: -3px; }
.app-lanes-caret { font-size: 9px; color: var(--rt-fg-3); }
.app-lanes-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  min-width: 240px; max-width: min(320px, 70vw); max-height: 280px;
  overflow: auto; padding: 6px;
  border-radius: 10px; background: var(--rt-panel);
  box-shadow: var(--rt-ring), 0 12px 32px rgba(0,0,0,0.35);
}
.app-lanes-row {
  display: flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 4px 8px; border-radius: 7px;
  cursor: pointer; color: var(--rt-fg-2); font-size: 12px;
}
.app-lanes-row:hover { background: var(--rt-bg-alt); color: var(--rt-fg); }
.app-lanes-row.on { color: var(--rt-fg); }
.app-lanes-row input { accent-color: var(--rt-accent); margin: 0; }
.app-lanes-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.app-lanes-name { font-family: var(--mono); font-size: 11.5px; }
.app-lanes-hint { margin-left: auto; font-size: 10px; color: var(--rt-fg-3); }
.app-lanes-rule { height: 1px; margin: 4px 8px; background: var(--rt-fg-3); opacity: 0.25; }
.app-lanes-empty { padding: 8px 10px; font-size: 11px; color: var(--rt-fg-3); line-height: 1.4; }
/* NS-APP-STREAM §8.3 — the per-app core-mode BIND (single-select). */
.app-mode-toggle { display:inline-flex; align-items:center; gap:2px; padding:2px; border-radius:8px; background:var(--rt-bg-alt); box-shadow:var(--rt-ring); flex:0 0 auto; }
.app-mode-btn { border:0; background:transparent; color:var(--rt-fg-3); border-radius:6px; padding:4px 7px; font-size:10px; cursor:pointer; }
.app-mode-btn:hover { color: var(--rt-fg); }
.app-mode-btn.on { background: var(--rt-panel); color: var(--rt-accent); box-shadow: var(--rt-ring); }
.app-mode-joblink { border:0; background:transparent; color:var(--rt-fg-3); border-radius:6px; padding:4px 6px; font-size:10px; cursor:pointer; }
.app-mode-joblink:hover { color: var(--rt-accent); }
.app-endpoint-panel .endpoint-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.app-endpoint-panel .endpoint { flex: 1; min-width: 240px; text-transform:none; }
.app-health { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px; border-radius:999px; font-family:var(--mono); font-size:10px; background:var(--rt-bg-alt); color:var(--rt-fg-3); box-shadow:var(--rt-ring); }
.app-health .d { width:5px; height:5px; border-radius:50%; background:currentColor; }
.app-health.online { color: var(--rt-green); }
.app-health.offline, .app-health.error, .app-health.blocked { color: var(--rt-coral); }
.app-health.starting { color: var(--rt-warn, #c98200); }
.app-endpoint-note { margin-top:10px; font-size:11.5px; line-height:1.45; color:var(--rt-fg-3); }
.app-endpoint-note.error { color: var(--rt-coral); }
.segmented-mini { display:inline-flex; gap:2px; padding:2px; border-radius:8px; background:var(--rt-bg-alt); box-shadow:var(--rt-ring); }
.segmented-mini button { border:0; background:transparent; color:var(--rt-fg-3); border-radius:6px; padding:4px 8px; font-family:var(--mono); font-size:10px; cursor:pointer; }
.segmented-mini button.active { background:var(--rt-panel); color:var(--rt-accent); box-shadow:var(--rt-ring); }
.app-code { font-size:11px; background:var(--rt-code-bg, #101828); color:#d8e2f0; padding:12px; border-radius:10px; white-space:pre-wrap; margin:10px 0 0; max-height:260px; overflow:auto; }
.app-row .live-bar {
  width: 80px; height: 18px;
  display: flex; align-items: center; gap: 2px;
}
.app-row .live-bar .b {
  flex: 1; background: var(--rt-accent); border-radius: 1px; opacity: 0.4;
}
.app-row .live-bar .b.on { opacity: 1; }

/* DRAWER */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 92vw);
  background: var(--rt-panel);
  box-shadow: -16px 0 64px rgba(0,0,0,0.18), -1px 0 0 var(--rt-border);
  z-index: 80;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column;
}
.drawer.wide { width: min(900px, 96vw); }
.drawer.open { transform: translateX(0); }
.drawer-back {
  position: fixed; inset: 0; background: rgba(0,0,0,0.18); z-index: 79;
  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
.drawer-back.open { opacity: 1; pointer-events: auto; }
.drawer-h { padding: 18px 22px; border-bottom: 1px solid var(--rt-border); display: flex; align-items: center; justify-content: space-between; }
.drawer-h h2 { font-size: 18px; margin: 0; font-weight: 600; letter-spacing: -0.5px; }
.drawer-body { padding: 20px 22px; flex: 1; overflow-y: auto; }
.drawer-console .drawer-body { display: flex; flex-direction: column; min-height: 0; }
.drawer-console .developer-hub { flex: 1; min-width: 0; }
.drawer-console .drawer-body .rt-section + .rt-section { margin-top: 16px; }
.drawer-prefs .cpg-key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drawer-body section + section { margin-top: 28px; }
.drawer-body h4 { font-size: 12px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--rt-fg-3); margin: 0 0 10px; }

/* Drawer head: a title, an optional line under it, and its actions. */
.drawer-h-text { min-width: 0; }
.drawer-sub { margin: 4px 0 0; font-size: 12px; color: var(--rt-fg-3); }
.drawer-h-acts { display: flex; align-items: center; gap: 10px; flex: none; }

/* ---------------------------------------------------------------------
   CONSOLE — the passport (workshopping/console-explorations/02-passport).
   An editorial connection passport: a serif head over a double rule, a
   hotspot strip, four sections, numbered credential slips and a footer
   that names the address in use.

   Color is the shell's. Panels mounted here (traffic, savings, receipts,
   the cross-check) already read --rt-*, so the drawer does not re-tint
   them. --cx-* only names the passport's accent, slip and footer, each
   one a --rt-* alias, so light and dark stay with the rest of the app.
--------------------------------------------------------------------- */
.drawer.drawer-console {
  --cx-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Liberation Serif', 'DejaVu Serif', serif;
  --cx-accent: var(--rt-accent);
  --cx-slip: var(--rt-bg-alt);
  --cx-foot: var(--rt-bg-sunk);
  width: min(600px, 96vw);
  background: var(--rt-panel);
  color: var(--rt-fg);
}
.drawer-console .drawer-h {
  align-items: flex-start;
  padding: 28px 28px 20px;
  border-bottom: 3px double var(--rt-border-strong);
}
.drawer-console .drawer-h h2 {
  font-family: var(--cx-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.drawer-console .drawer-sub { margin-top: 9px; font-size: 12.5px; color: var(--rt-fg-2); }
.drawer-console .drawer-h-acts { padding-top: 4px; }
.drawer-console .drawer-body { padding: 0; overflow: hidden; }

.cx-passport { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Who can reach this box, said once, above the sections. */
.cx-hotspot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 20px 28px 0;
  padding: 14px 18px;
  border: 1px solid var(--rt-border-strong);
  border-radius: 3px;
}
.cx-hotspot-glyph { order: 0; width: 18px; color: var(--cx-accent); font-size: 16px; text-align: center; }
.cx-hotspot .qc-hotspot { display: contents; }
.cx-hotspot .qc-hotspot-words { order: 1; flex: 1 1 auto; min-width: 0; gap: 2px; }
.cx-hotspot .qc-hotspot-words b { font-size: 13px; font-weight: 500; }
.cx-hotspot .qc-hotspot-words .mono { font-size: 11px; }
.cx-hotspot > .cx-pill { order: 2; }
.cx-hotspot .scope-toggle { order: 3; }
.cx-hotspot .qc-err { order: 4; flex-basis: 100%; max-width: none; white-space: normal; }

.cx-pill {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--rt-border-strong);
  border-radius: 999px;
  font: 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-fg-2);
  white-space: nowrap;
}
.cx-pill.good { color: var(--rt-green); border-color: color-mix(in srgb, var(--rt-green) 42%, transparent); }

/* The four sections. */
.cx-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 18px 28px 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rt-border);
}
.cx-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: var(--rt-fg-2);
  font: 13px var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}
.cx-tab:hover { color: var(--rt-fg); }
.cx-tab:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 1px; }
.cx-tab.on { color: var(--rt-fg); border-color: var(--cx-accent); }
.cx-tab-n { font: 10px var(--mono); color: var(--rt-fg-3); }

.cx-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 26px 28px 34px; }
.cx-pane-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.cx-pane-h h3 {
  margin: 0;
  font-family: var(--cx-serif);
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--rt-fg);
}
.cx-pane-h p { margin: 7px 0 0; font-size: 12.5px; color: var(--rt-fg-2); }
.cx-stack { display: flex; flex-direction: column; gap: 14px; }
.cx-peek { margin: -8px 0 16px; font-size: 11px; color: var(--rt-fg-3); }
.cx-sub { margin-top: 36px; padding-top: 24px; border-top: 3px double var(--rt-border); }
.cx-sub-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.drawer-body .cx-sub-h h4 {
  margin: 0;
  font-family: var(--cx-serif);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rt-fg);
}
.cx-sub-h .mono { font-size: 11px; color: var(--rt-fg-3); }
.cx-sub-hint { margin: 5px 0 16px; font-size: 12px; color: var(--rt-fg-3); }

.cx-foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px 28px;
  border-top: 1px solid var(--rt-border);
  background: var(--cx-foot);
  font-size: 10.5px;
  color: var(--cx-accent);
}
.cx-foot-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-foot-stats { flex: none; color: var(--rt-fg-3); }
.cx-foot-k { text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }

/* Panels inside read as slips: hairline, square-ish, no lift. */
.drawer-console .panel {
  padding: 18px 20px;
  border: 1px solid var(--rt-border);
  border-radius: 3px;
  background: var(--cx-slip);
  box-shadow: none;
}
.drawer-console .panel-h h3 { font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; }
.drawer-console .btn-rt { border-radius: 3px; }
.drawer-console .btn-rt:hover { transform: none; box-shadow: none; }
.drawer-console .btn-rt-ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--rt-border-strong); }
.drawer-console .btn-rt-ghost:hover { background: color-mix(in srgb, var(--rt-fg) 5%, transparent); }
.drawer-console .eyebrow::before { background: var(--cx-accent); }
.drawer-console .cpg-chip { border-radius: 2px; }

/* Connect: the scope as two halves, then the numbered slips. */
.drawer-console .qc { gap: 16px; }
.drawer-console .qc-scopes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 3px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--rt-border-strong);
}
.drawer-console .qc-tab { justify-content: center; height: 36px; border-radius: 2px; font-size: 13px; }
.drawer-console .qc-tab.on { background: var(--cx-slip); color: var(--cx-accent); box-shadow: none; }
.drawer-console .qc-select { grid-column: 1 / -1; margin-left: 0; }
.drawer-console .qc-callout { border-radius: 3px; }
.drawer-console .qc-fields { counter-reset: cx-slip; gap: 14px; }
.drawer-console .qc-field {
  position: relative;
  counter-increment: cx-slip;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 10px;
  margin-left: 30px;
  padding: 15px 18px 16px 22px;
  border: 1px solid var(--rt-border);
  border-radius: 3px;
  background: var(--cx-slip);
}
.drawer-console .qc-field:hover { background: var(--cx-slip); border-color: var(--rt-border-strong); }
.drawer-console .qc-field::before {
  content: counter(cx-slip, decimal-leading-zero);
  position: absolute;
  left: -30px;
  top: 19px;
  font: 11px var(--cx-serif);
  color: var(--cx-accent);
}
.drawer-console .qc-field .k { grid-column: 1; grid-row: 1; font-size: 10.5px; letter-spacing: 0.14em; }
.drawer-console .qc-field .qc-acts { grid-column: 2; grid-row: 1; }
.drawer-console .qc-field .v {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--rt-border);
  font-size: 13.5px;
}
.drawer-console .qc-field .qc-hint { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; font-size: 11px; }
.drawer-console .qc-models,
.drawer-console .qc-actions,
.drawer-console .qc-qr { margin-left: 30px; }
.drawer-console .qc-models .cpg-chip.is-on { color: var(--cx-accent); box-shadow: inset 0 0 0 1px var(--cx-accent); }
.drawer-console .qc-qr { border-radius: 3px; background: var(--cx-slip); box-shadow: inset 0 0 0 1px var(--rt-border); }
/* the hotspot strip at the top of the Console carries this switch */
.drawer-console .qc-share { display: none; }
.cx-check { margin: 26px 0 0 30px; padding-top: 18px; border-top: 1px solid var(--rt-border); }
.cx-check-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cx-check .eyebrow { margin: 0; }

/* Apps: one entry per caller, ruled, its controls under its name. */
.cx-apps-h { margin-bottom: 8px; }
.cx-apps .apps-list { border-top: 1px solid var(--rt-border); }
.cx-apps .app-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  gap: 10px 16px;
  align-items: center;
  padding: 16px 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-bottom: 1px solid var(--rt-border);
}
.cx-apps .app-row + .app-row { margin-top: 0; }
.cx-apps .app-row > :nth-child(n+5) { grid-column: 2 / -1; justify-self: start; }
.cx-apps .app-icon { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--rt-border-strong); font-family: var(--cx-serif); font-weight: 400; }
.cx-apps .app-row .nm small { text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: 11.5px; }
.cx-apps .apps-empty { border-radius: 3px; }

@media (max-width: 640px) {
  .drawer-console .drawer-h { padding: 22px 18px 16px; }
  .drawer-console .drawer-h h2 { font-size: 26px; }
  .cx-hotspot, .cx-tabs { margin-left: 18px; margin-right: 18px; }
  .cx-pane { padding: 22px 18px 28px; }
  .cx-foot { padding: 10px 18px; }
  .cx-foot-stats { display: none; }
}

/* TWEAKS panel host */
#tweaks-mount { position: fixed; bottom: 16px; right: 16px; z-index: 70; }

/* HISTORY ROW */
.hist {
  display: grid;
  grid-template-columns: 80px 1fr 90px 70px 130px 70px 60px;
  gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 7px;
  font-family: var(--mono); font-size: 11px;
  background: var(--rt-bg-alt);
}
.hist + .hist { margin-top: 3px; }
.hist .t { color: var(--rt-fg-3); }
.hist .what { color: var(--rt-fg); font-weight: 500; }
.hist .src { color: var(--rt-fg-2); }
.hist .ms { color: var(--rt-fg-3); text-align: right; }
.hist .tok, .hist .tps { color: var(--rt-fg-3); text-align: right; }
.hist .res { text-align: right; }
.hist .res.ok { color: var(--rt-green); }
.hist .res.fail { color: var(--rt-coral); }
.hist .res.warn { color: var(--rt-amber); }

/* ---------------------------------------------------------------------
   QR PAIRING
--------------------------------------------------------------------- */
.qr-card {
  background: var(--rt-panel);
  border-radius: 14px;
  box-shadow: var(--rt-shadow);
  padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.qr-canvas {
  width: 240px; height: 240px;
  background: white; padding: 16px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.qr-canvas svg { display: block; width: 100%; height: 100%; }
.phone-pair {
  display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
}
.phone-pair-qr { flex: 0 0 240px; }
.phone-pair-meta { flex: 1; min-width: 220px; }
.phone-pair-code {
  display: inline-block;
  font-size: 22px; font-weight: 600; letter-spacing: 0.08em;
  user-select: text; color: var(--rt-fg);
  padding: 6px 0;
}
.phone-pair-device {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 8px; background: var(--rt-bg-alt);
}
.qr-code {
  display: grid; grid-template-columns: repeat(25, 1fr);
  gap: 0; width: 100%; aspect-ratio: 1;
}
.qr-code .qb { background: black; }
.qr-code .qb.off { background: white; }

/* ---------------------------------------------------------------------
   STAR FIELD (Gaia style)
--------------------------------------------------------------------- */
.starfield { position: absolute; inset: 0; pointer-events: none; opacity: 0.6; }

/* ---------------------------------------------------------------------
   ANIMATIONS
--------------------------------------------------------------------- */
@keyframes fade-up-rt {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-rt { animation: fade-up-rt 500ms cubic-bezier(.16,1,.3,1) both; }
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(10,114,239,0.4); }
  100% { box-shadow: 0 0 0 12px rgba(10,114,239,0); }
}
.pulse-ring { animation: pulse-ring 1.4s ease-out infinite; }

/* ---------------------------------------------------------------------
   UTIL
--------------------------------------------------------------------- */
.mono { font-family: var(--mono); }
.muted { color: var(--rt-fg-3); }
.fg2 { color: var(--rt-fg-2); }
.tnum { font-feature-settings: "tnum"; }
.divider { height: 1px; background: var(--rt-border); margin: 16px 0; }
.flex-1 { flex: 1; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.text-c { text-align: center; }
.no-scroll-x { overflow-x: hidden; }

/* =====================================================================
   Engine view + panels (PRD compliance surfaces)
   ===================================================================== */

.engine-view { padding: 24px; max-width: 1600px; margin: 0 auto; }

.engine-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 28px; padding-bottom: 22px;
  border-bottom: 1px solid var(--rt-border);
}
.engine-hero-l { max-width: 720px; }
.engine-hero-l .eyebrow { margin-bottom: 10px; }
.engine-title {
  font-family: var(--font); font-size: 38px; font-weight: 600;
  letter-spacing: -1.2px; line-height: 1.05; margin: 0 0 12px;
  color: var(--rt-fg);
}
.engine-blurb {
  font-size: 14.5px; line-height: 1.55; color: var(--rt-fg-2);
  margin: 0; max-width: 64ch; text-wrap: pretty;
}
.engine-hero-r {
  display: grid; grid-template-columns: repeat(2, auto); gap: 14px 28px;
  flex-shrink: 0;
}
.engine-stat { display: flex; flex-direction: column; gap: 2px; min-width: 92px; }
.engine-stat .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--rt-fg-3); text-transform: uppercase;
}
.engine-stat .v { font-size: 22px; font-weight: 600; color: var(--rt-fg); letter-spacing: -0.5px; }

.engine-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  align-items: start;
}
.engine-col { display: flex; flex-direction: column; gap: 18px; }

@media (max-width: 1280px) {
  .engine-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .engine-grid { grid-template-columns: 1fr; }
  .engine-hero { flex-direction: column; align-items: flex-start; }
}

/* ---------- KVP / shared inline pairs ---------- */
.kvp { display: inline-flex; flex-direction: column; gap: 2px; }
.kvp .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em;
  color: var(--rt-fg-3); text-transform: uppercase;
}
.kvp .v { font-size: 13px; font-weight: 500; color: var(--rt-fg); }

/* ---------- Pressure panel ---------- */
.press-row {
  display: grid;
  grid-template-columns: 76px 1fr 38px 60px 1fr;
  align-items: center; gap: 10px;
  font-size: 12px;
}
.press-lbl { color: var(--rt-fg-2); font-weight: 500; }
.press-bar {
  position: relative; height: 8px; border-radius: 4px;
  background: var(--rt-bg-alt); overflow: hidden;
}
.press-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 4px;
  transition: width 0.4s ease, background 0.3s ease;
}
.press-soft, .press-hard {
  position: absolute; top: -2px; bottom: -2px; width: 1px;
  background: var(--rt-border-strong);
}
.press-hard { background: var(--rt-coral); opacity: 0.6; }
.press-val { font-size: 11px; color: var(--rt-fg); text-align: right; }
.press-band { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.press-sensor { font-size: 10px; }

/* ---------- Route changes ---------- */
.rc-row {
  display: grid;
  grid-template-columns: 78px 1fr auto 1fr 2fr auto;
  align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--rt-bg-alt);
  font-size: 11.5px;
}
.rc-axis {
  text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 9.5px; color: var(--rt-fg-3); font-weight: 600;
  padding: 3px 6px; border-radius: 4px; background: var(--rt-panel);
  text-align: center;
}
.rc-arrow { color: var(--rt-fg-3); display: inline-flex; }
.rc-from, .rc-to { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-to { color: var(--rt-fg); }
.rc-reason { font-size: 11.5px; color: var(--rt-fg-2); line-height: 1.35; }
.rc-meta { font-size: 10px; color: var(--rt-fg-3); white-space: nowrap; }

/* ---------- Cross-check detail ---------- */
.cc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
}
.cc-passed  { color: var(--rt-green); }
.cc-skipped { color: var(--rt-fg-3); }
.cc-warning, .cc-warn { color: var(--rt-amber); }
.cc-blocked, .cc-failed { color: var(--rt-coral); }
.cc-risk-low { color: var(--rt-green); }
.cc-risk-medium { color: var(--rt-amber); }
.cc-risk-high { color: var(--rt-coral); }
.cc-risk-critical { color: var(--rt-coral); font-weight: 700; }

.check-row {
  display: grid; grid-template-columns: auto 140px 1fr;
  gap: 10px; align-items: center;
  padding: 6px 0; font-size: 12px;
}
.check-type { font-size: 11px; color: var(--rt-fg-2); }
.check-msg { color: var(--rt-fg-2); font-size: 12px; line-height: 1.4; }

.chip {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 7px; border-radius: 4px;
  display: inline-flex; align-items: center;
}
.chip-passed { background: color-mix(in oklab, var(--rt-green) 18%, transparent); color: var(--rt-green); }
.chip-warning { background: color-mix(in oklab, var(--rt-amber) 22%, transparent); color: var(--rt-amber); }
.chip-failed, .chip-blocked { background: color-mix(in oklab, var(--rt-coral) 18%, transparent); color: var(--rt-coral); }

/* ---------- TaskPhasePlan ---------- */
.phase-plan-row {
  display: grid; grid-template-columns: auto 1fr 2fr auto;
  align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px; background: var(--rt-bg-alt);
  font-size: 12px;
}
.tier-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  width: 22px; height: 22px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rt-panel); color: var(--rt-fg);
}
.tier-badge.t-A { background: color-mix(in oklab, var(--rt-green) 22%, var(--rt-panel)); color: var(--rt-green); }
.tier-badge.t-B { background: color-mix(in oklab, var(--rt-accent) 22%, var(--rt-panel)); color: var(--rt-accent); }
.tier-badge.t-C { background: color-mix(in oklab, var(--rt-violet, #8957e5) 22%, var(--rt-panel)); color: var(--rt-violet, #8957e5); }
.phase-name-2 { font-size: 11.5px; color: var(--rt-fg); font-weight: 500; }
.phase-src { font-size: 10.5px; }
.phase-rflx { font-size: 10.5px; white-space: nowrap; }

/* ---------- Cache safety table ---------- */
.cache-table {
  width: 100%; border-collapse: collapse; font-size: 11.5px;
  table-layout: fixed;
}
.cache-table th {
  text-align: left; font-family: var(--mono); font-size: 9.5px;
  font-weight: 500; color: var(--rt-fg-3); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 6px 8px; border-bottom: 1px solid var(--rt-border);
}
.cache-table td {
  padding: 8px; border-bottom: 1px solid var(--rt-border);
  vertical-align: top; color: var(--rt-fg-2);
}
.cache-table .rule { font-size: 11px; line-height: 1.4; color: var(--rt-fg-2); }
.cache-table tbody tr:last-child td { border-bottom: none; }

.replay-direct, .replay-bias-only, .replay-partial, .replay-time-limited, .replay-never {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
  display: inline-block;
}
.replay-direct       { background: color-mix(in oklab, var(--rt-green) 18%, transparent); color: var(--rt-green); }
.replay-bias-only    { background: color-mix(in oklab, var(--rt-accent) 18%, transparent); color: var(--rt-accent); }
.replay-partial      { background: color-mix(in oklab, var(--rt-amber) 22%, transparent); color: var(--rt-amber); }
.replay-time-limited { background: color-mix(in oklab, var(--rt-amber) 22%, transparent); color: var(--rt-amber); }
.replay-never        { background: color-mix(in oklab, var(--rt-coral) 18%, transparent); color: var(--rt-coral); }

/* ---------- License homeostat ---------- */
.lic-band-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  padding: 4px; background: var(--rt-bg-alt); border-radius: 8px;
  margin-top: 6px;
}
.lic-band {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  text-align: center; padding: 8px 6px; border-radius: 5px;
  color: var(--rt-fg-3); transition: all 0.2s;
}
.lic-band.active  { background: var(--rt-green); color: white; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.lic-band.grace   { background: var(--rt-amber); color: white; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.lic-band.expired { background: var(--rt-coral); color: white; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }

.lic-features {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 4px 12px; font-size: 11px;
}
.lic-feat-head, .lic-feat {
  display: contents;
}
.lic-feat-head > * {
  font-family: var(--mono); font-size: 9.5px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.05em;
  border-top: 1px solid var(--rt-border); padding-top: 6px; margin-top: 4px;
}
.lic-feat > span:nth-child(2),
.lic-feat > span:nth-child(3) {
  font-family: var(--mono); font-size: 10px; text-align: right;
}
.feat-on  { color: var(--rt-green); }
.feat-off { color: var(--rt-coral); }
.feat-lim { color: var(--rt-amber); }

/* ---------- Mobile scopes ---------- */
.scope-row {
  display: grid; grid-template-columns: auto 130px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 8px; background: var(--rt-bg-alt);
  font-size: 12px;
}
.scope-kind {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 7px; border-radius: 4px;
}
.scope-kind.read  { background: color-mix(in oklab, var(--rt-fg-3) 16%, transparent); color: var(--rt-fg-2); }
.scope-kind.write { background: color-mix(in oklab, var(--rt-amber) 22%, transparent); color: var(--rt-amber); }
.scope-key  { font-size: 11px; color: var(--rt-fg); }
.scope-desc { font-size: 11.5px; color: var(--rt-fg-2); }
.scope-toggle {
  width: 32px; height: 18px; border-radius: 999px;
  background: var(--rt-border-strong); border: none; padding: 0;
  position: relative; cursor: pointer; transition: background 0.2s;
  flex-shrink: 0;
}
.scope-toggle .thumb {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: white; transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.scope-toggle.on { background: var(--rt-green); }
.scope-toggle.on .thumb { transform: translateX(14px); }

/* ---------- Engine audit log ---------- */
.audit-list { display: flex; flex-direction: column; gap: 2px; }
.audit-row {
  display: grid;
  grid-template-columns: 76px 92px 1fr auto auto auto auto auto;
  gap: 10px; align-items: center;
  padding: 6px 8px; border-radius: 6px;
  font-size: 11px; line-height: 1.3;
}
.audit-row:hover { background: var(--rt-bg-alt); }
.audit-row.error { background: color-mix(in oklab, var(--rt-coral) 6%, transparent); }
.audit-id { font-size: 10px; color: var(--rt-fg-3); }
.audit-strat {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
  text-align: center;
}
.strat-tier_split    { background: color-mix(in oklab, var(--rt-violet, #8957e5) 18%, transparent); color: var(--rt-violet, #8957e5); }
.strat-semantic_cache{ background: color-mix(in oklab, var(--rt-accent) 18%, transparent); color: var(--rt-accent); }
.strat-race          { background: color-mix(in oklab, var(--rt-amber) 22%, transparent); color: var(--rt-amber); }
.strat-direct        { background: color-mix(in oklab, var(--rt-fg-3) 16%, transparent); color: var(--rt-fg-2); }
.strat-cross_check   { background: color-mix(in oklab, var(--rt-coral) 18%, transparent); color: var(--rt-coral); }
.strat-error         { background: color-mix(in oklab, var(--rt-coral) 18%, transparent); color: var(--rt-coral); }

.audit-winner { font-size: 11px; color: var(--rt-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-rflx, .audit-tier, .audit-host, .audit-save, .audit-ago { font-size: 10px; white-space: nowrap; }

/* ---------- Reflex budgets ---------- */
.rflx-row {
  display: grid; grid-template-columns: 180px 1fr 50px 60px;
  align-items: center; gap: 10px;
  font-size: 11.5px;
}
.rflx-lbl { color: var(--rt-fg-2); font-weight: 500; font-size: 12px; }
.rflx-bar {
  height: 6px; border-radius: 3px; background: var(--rt-bg-alt); overflow: hidden;
  position: relative;
}
.rflx-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  border-radius: 3px; transition: width 0.5s ease, background 0.3s;
}
.rflx-meas { font-size: 11px; color: var(--rt-fg); text-align: right; }
.rflx-cap  { font-size: 10px; }

/* ---------------------------------------------------------------------
   CHAT (Setup ▸ Console)
--------------------------------------------------------------------- */
.chat-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
  padding: 24px;
  gap: 16px;
}
.chat-view-embedded {
  max-width: none;
  height: min(70vh, 720px);
  min-height: 540px;
  padding: 0;
}
.developer-hub .rt-section-body > .chat-view-embedded:only-child {
  border: 1px solid var(--rt-border);
  border-radius: 12px;
  background: var(--rt-bg);
  padding: 16px;
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--rt-border);
}
.chat-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(255,91,79,0.08);
  box-shadow: rgba(255,91,79,0.3) 0 0 0 1px;
  font-family: var(--font); font-size: 13px; color: var(--rt-fg);
}
.compare-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 12px; background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
}
.compare-bar select {
  background: var(--rt-panel); color: var(--rt-fg); border: 1px solid var(--rt-border);
  border-radius: 8px; padding: 6px 8px; font-family: var(--mono); font-size: 11px;
}
.chat-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  display: flex; flex-direction: column; gap: 14px;
  overscroll-behavior: contain;
}
.chat-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 4px; padding: 80px 20px; text-align: center;
}
.chat-msg {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px;
  /* Offscreen rows skip layout + paint entirely. Without this, every
     streamed token forced a relayout of the whole history (~160ms at
     300 markdown messages); with it only near-viewport rows lay out.
     The intrinsic-size estimate keeps the scrollbar stable. */
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
}
.chat-user { background: var(--rt-bg-alt); }
.chat-assistant { background: var(--rt-panel); box-shadow: var(--rt-ring); }
.chat-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--rt-fg-3);
}
.chat-role { font-weight: 600; color: var(--rt-fg-2); text-transform: uppercase; letter-spacing: 0.05em; }
.chat-model { color: var(--rt-accent); }
.chat-stream { color: var(--rt-amber); }
.chat-tokens { color: var(--rt-fg-2); }
.chat-cache { color: var(--rt-violet); }
.chat-err { color: var(--rt-coral); }
.chat-cc.cc-passed  { color: var(--rt-green); }
.chat-cc.cc-warning { color: var(--rt-amber); }
.chat-cc.cc-failed  { color: var(--rt-coral); }
.chat-body {
  font-family: var(--font); font-size: 14.5px; line-height: 1.55;
  color: var(--rt-fg); white-space: pre-wrap; word-wrap: break-word;
}
/* Optimistic streaming chips + ghosted draft text (Console + TestBox). */
.chat-draft-chip, .simple-draft-chip { display: inline-flex; align-items: center; gap: 5px; color: rgb(56,189,208); }
.chat-upgrade-chip, .simple-upgrade-chip { color: var(--rt-green); font-weight: 600; }
.chat-draft-pulse { width: 7px; height: 7px; border-radius: 50%; background: rgb(56,189,208); box-shadow: 0 0 6px rgba(56,189,208,0.7); animation: draft-pulse 1.1s ease-in-out infinite; }
.chat-body-draft { color: var(--rt-fg-2); opacity: 0.85; transition: color 0.3s ease, opacity 0.3s ease; }
.compare-result { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare-prompt { grid-column: 1 / -1; padding: 10px 12px; border-radius: 10px; background: var(--rt-bg-alt); color: var(--rt-fg-2); }
.compare-pane { position: relative; min-height: 180px; padding: 48px 14px 14px; border-radius: 12px; background: var(--rt-panel); box-shadow: var(--rt-ring); }
.receipt-overlay {
  position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 7px 9px; border-radius: 9px; background: rgba(60,130,246,0.10); box-shadow: rgba(60,130,246,0.25) 0 0 0 1px;
  font-family: var(--mono); font-size: 11px; color: var(--rt-fg-2);
}
.receipt-overlay b { color: var(--rt-accent); }
.receipt-overlay em { color: var(--rt-amber); font-style: normal; }
@media (max-width: 900px) { .compare-result { grid-template-columns: 1fr; } }
.chat-input {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: 14px;
  background: var(--rt-panel); box-shadow: var(--rt-ring);
}
.chat-input textarea {
  width: 100%; resize: vertical; min-height: 48px; max-height: 240px;
  border: none; outline: none; background: transparent;
  font-family: var(--font); font-size: 14px; color: var(--rt-fg);
  padding: 8px 4px;
}

/* ---------------------------------------------------------------------
   SETTINGS
--------------------------------------------------------------------- */

/* Two-column row for Provider keys + Local endpoints at the top of
   the Settings tab. Each child is a <Section/> that owns its own
   collapse state — the grid only handles layout. */
.settings-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}
.settings-row-2 > .rt-section { margin-bottom: 0; }

@media (max-width: 1180px) {
  .settings-row-2 { grid-template-columns: 1fr; }
}

/* When Provider keys / Local endpoints are stacked side-by-side, the
   wide 220+220+200 key-row grid no longer fits. Compress to a single
   stacked layout so each row's name / input / actions wrap cleanly. */
.settings-row-2 .key-row {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px 0;
}
.settings-row-2 .key-name { flex-direction: row; align-items: baseline; gap: 8px; }
.settings-row-2 .key-status { min-height: 14px; }
.settings-row-2 .key-actions { flex-wrap: wrap; gap: 6px; }

.key-row {
  display: grid;
  grid-template-columns: 220px minmax(160px, 1fr) 200px auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rt-border);
}
.key-row:last-child { border-bottom: none; }
.key-name { display: flex; flex-direction: column; gap: 2px; }
.key-name-l { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--rt-fg); }
.key-name-h { font-size: 11px; }
.key-field {
  width: 100%; height: 36px; padding: 0 12px;
  font-family: var(--mono); font-size: 12px;
  background: var(--rt-bg-alt); color: var(--rt-fg);
  border: none; border-radius: 8px; box-shadow: var(--rt-ring);
}
.key-status { font-family: var(--mono); }
.key-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.input.rt {
  height: 36px; padding: 0 12px;
  font-family: var(--mono); font-size: 12px;
  background: var(--rt-bg-alt); color: var(--rt-fg);
  border: none; border-radius: 8px; box-shadow: var(--rt-ring);
}
.rt {
  height: 36px; padding: 0 12px;
  font-family: var(--mono); font-size: 12px;
  background: var(--rt-bg-alt); color: var(--rt-fg);
  border: none; border-radius: 8px; box-shadow: var(--rt-ring);
}
.rt:focus { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
input[type="range"].rt { padding: 0; height: 4px; box-shadow: none; background: var(--rt-border); border-radius: 2px; }

/* ---------------------------------------------------------------------
   STARTUP INTRO — Syntonic Convergence boot reveal
--------------------------------------------------------------------- */
.startup-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: #080809;
  color: #e2e2e5;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: opacity 620ms cubic-bezier(.16,1,.3,1), visibility 620ms;
}
.startup-intro.intro-exiting { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-ambient {
  position: absolute;
  width: min(70vw, 540px);
  height: min(70vw, 540px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94,106,210,0.16) 0%, rgba(94,106,210,0.05) 35%, transparent 72%);
  filter: blur(2px);
  animation: intro-ambient-pulse 3.6s ease-in-out infinite;
}
.intro-mesh {
  position: relative;
  width: min(72vw, 430px);
  height: min(72vw, 430px);
  z-index: 2;
}
.intro-mesh canvas { width: 100%; height: 100%; display: block; }
.intro-overlay-copy {
  position: absolute;
  left: clamp(24px, 7vw, 64px);
  bottom: clamp(34px, 8vh, 76px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.intro-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  animation: intro-fade-in 800ms cubic-bezier(.16,1,.3,1) 260ms forwards;
}
.intro-brand::before { content: ""; width: 28px; height: 1px; background: #5e6ad2; display: block; }
.intro-console { font-family: var(--mono); font-size: 10.5px; line-height: 1.55; color: #6b6b75; min-height: 132px; }
.intro-line { opacity: 0; transform: translateY(5px); animation: intro-line-in 520ms cubic-bezier(.16,1,.3,1) forwards; }
.intro-line.ready { color: #e2e2e5; font-weight: 700; margin-top: 4px; letter-spacing: 0.08em; }
.intro-go {
  position: absolute;
  left: 50%;
  top: calc(50% + min(38vw, 232px));
  transform: translateX(-50%) translateY(10px);
  z-index: 4;
  height: 38px;
  min-width: 92px;
  border: 1px solid rgba(226,226,229,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(226,226,229,0.62);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease, transform 300ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.intro-go.ready { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); color: #fff; box-shadow: 0 0 0 1px rgba(94,106,210,0.38), 0 14px 48px rgba(94,106,210,0.22); }
.intro-go.ready:hover { background: rgba(94,106,210,0.30); }
.intro-reveal-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  z-index: 5;
  background: radial-gradient(circle, #ffffff 0%, #f5f5f5 40%, rgba(94,106,210,0.82) 70%, rgba(94,106,210,0.0) 100%);
  box-shadow: 0 0 32px rgba(94,106,210,0.75);
  transform: translate(-50%, -50%) scale(0.25);
  opacity: 0;
  pointer-events: none;
}
.intro-exiting .intro-reveal-core { animation: intro-center-reveal 920ms cubic-bezier(.16,1,.3,1) forwards; }
.intro-exiting .intro-mesh, .intro-exiting .intro-overlay-copy, .intro-exiting .intro-go { opacity: 0; transition: opacity 260ms ease; }
@keyframes intro-fade-in { to { opacity: 1; } }
@keyframes intro-line-in { to { opacity: 1; transform: translateY(0); } }
@keyframes intro-ambient-pulse { 0%,100% { opacity: .72; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes intro-center-reveal {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.35); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(92); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(128); }
}
@media (max-width: 720px) {
  .intro-overlay-copy { left: 22px; right: 22px; bottom: 30px; }
  .intro-console { font-size: 9.5px; min-height: 142px; }
  .intro-go { top: calc(50% + 230px); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-ambient, .intro-brand, .intro-line, .intro-exiting .intro-reveal-core { animation-duration: 1ms !important; }
}

/* =====================================================================
   SIMPLE UI SHELL — consumer-facing default. See SIMPLE_UI_REDESIGN_PLAN.md.
   ===================================================================== */
/* Simple mode renders its own shell — app.jsx returns <SimpleView/> without
   the .main > .scroll wrapper advanced mode uses. `body` is overflow:hidden
   (the app is a fixed-viewport desktop shell), so this shell has to own its
   scrolling or everything below the fold is simply unreachable: the column
   was min-height:100vh and grew to ~1500px inside a 720px viewport with no
   scroller anywhere.
   Height is pinned to the viewport and the middle column scrolls, which
   matches advanced mode's chrome / scroll / status-bar structure and keeps
   the header and footer status bar in place. */
.simple-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--rt-bg);
  color: var(--rt-fg);
  overflow: hidden;
}
.simple-main {
  flex: 1 1 auto;
  /* Required for a flex child to shrink below its content height —
     without it `overflow-y` on this element does nothing. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Keep the panel shadows from being clipped mid-scroll. */
  scrollbar-gutter: stable;
}
/* .simple-main is a COLUMN FLEX CONTAINER, so every section in it is a
   flex item — and a flex item whose `overflow` is not `visible` gets an
   automatic minimum size of ZERO. Every card here that clips its corners
   (.simple-arena, .simple-waterfall, .simple-connected, .simple-recent,
   .simple-prompt-launcher) therefore shrank to a 1px sliver so the column
   could fit the viewport, INSTEAD of the column overflowing and this
   element scrolling. The sections without `overflow: hidden` — hero, CTA,
   modes — kept their height, which is why the page looked like half its
   panels had silently failed to render. Pin every child at its natural
   height; scrolling is this element's job. */
.simple-main > * { flex: 0 0 auto; }
.simple-main::-webkit-scrollbar { width: 8px; }
.simple-main::-webkit-scrollbar-thumb { background: var(--rt-border); border-radius: 4px; }
.simple-main::-webkit-scrollbar-track { background: transparent; }
/* The header and footer are fixed chrome around the scroller. */
.simple-shell > .simple-header,
.simple-shell > .simple-footer { flex: 0 0 auto; }

/* Header */
.simple-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: var(--rt-panel);
  border-bottom: 1px solid var(--rt-border);
}
.simple-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px;
}
.simple-brand-mark {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rt-accent); color: white; border-radius: 6px;
}
.simple-endpoint {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--rt-fg-2);
  justify-self: center;
}
.simple-endpoint-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rt-fg-3);
}
.simple-endpoint-dot.on {
  background: var(--rt-green);
  box-shadow: 0 0 0 3px rgba(43,188,138,0.18);
  animation: simple-endpoint-pulse 2.6s ease-in-out infinite;
}
.simple-endpoint-dot.off { background: var(--rt-fg-3); }
@keyframes simple-endpoint-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(43,188,138,0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(43,188,138,0.25); }
}
.simple-endpoint-label { font-weight: 500; }
.simple-endpoint-url { font-size: 11px; color: var(--rt-fg-3); }
.simple-header-right {
  display: inline-flex; align-items: center; gap: 8px;
  justify-self: end;
}
.simple-link {
  background: transparent;
  border: none;
  color: var(--rt-fg-2);
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 120ms ease, color 120ms ease;
  display: inline-flex; align-items: center; gap: 4px;
}
.simple-link:hover { background: var(--rt-bg-alt); color: var(--rt-fg); }
.simple-link-tight { padding: 2px 6px; font-size: 11px; }

/* Migration toast */
.simple-toast {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px;
  background: rgba(10,114,239,0.08);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(10,114,239,0.25);
  font-size: 12.5px;
}
.simple-toast-body { color: var(--rt-fg); }
.simple-toast-body .muted { color: var(--rt-fg-3); }
.simple-toast-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--rt-fg-3);
  padding: 0 4px;
}
.simple-toast-close:hover { color: var(--rt-fg); }

/* Hero stats — three big numbers */
.simple-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
  padding: 24px 8px 8px;
}
.simple-stat {
  display: flex; flex-direction: column; gap: 6px;
}
.simple-stat-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--rt-fg-3);
}
.simple-stat-value {
  font-size: 38px; font-weight: 600; line-height: 1;
  color: var(--rt-fg);
  letter-spacing: -0.02em;
}
.simple-stat-savings .simple-stat-value {
  font-size: 56px;
  color: var(--rt-green);
  animation: simple-stat-pulse 4s ease-in-out infinite;
}
.simple-stat-currency {
  font-size: 0.55em;
  color: var(--rt-fg-2);
  margin-right: 2px;
  font-weight: 500;
}
.simple-stat-unit {
  font-size: 0.55em;
  color: var(--rt-fg-3);
  margin-left: 2px;
  font-weight: 500;
}
@keyframes simple-stat-pulse {
  0%, 100% { text-shadow: 0 0 0 rgba(43,188,138,0); }
  50%      { text-shadow: 0 0 20px rgba(43,188,138,0.18); }
}

/* Connected apps strip */
.simple-connected {
  background: var(--rt-panel);
  border-radius: 12px;
  box-shadow: var(--rt-ring);
  overflow: hidden;
}
.simple-connected-summary {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent; border: none; cursor: pointer;
  padding: 12px 16px;
  font-family: var(--font); font-size: 13px;
  color: var(--rt-fg);
  text-align: left;
}
.simple-connected-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rt-accent);
  box-shadow: 0 0 0 3px rgba(10,114,239,0.18);
}
.simple-connected-caret {
  margin-left: auto;
  color: var(--rt-fg-3); font-size: 11px;
}
.simple-connected.open .simple-connected-summary { border-bottom: 1px solid var(--rt-border); }
.simple-connected-list { padding: 8px 12px 12px; }
.simple-connected-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.simple-connected-row:last-child { border-bottom: none; }
.simple-connected-name { font-size: 12.5px; color: var(--rt-fg-2); }
.simple-connected-meta { font-size: 10.5px; color: var(--rt-fg-3); }

.simple-connected-empty .simple-connected-empty-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
}
.simple-connected-empty-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rt-fg-3);
}
.simple-connected-empty-text {
  flex: 1; font-size: 12.5px; color: var(--rt-fg-2);
}
.simple-connected-empty-text code {
  background: var(--rt-bg-alt);
  padding: 2px 6px; border-radius: 4px;
  font-size: 11px; color: var(--rt-fg);
}

/* Mode strip wrapper + subtitle */
.simple-modes {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--rt-panel);
  padding: 14px 14px 12px;
  border-radius: 12px;
  box-shadow: var(--rt-ring);
}
.simple-modes-sub {
  font-size: 10.5px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  text-align: center;
}
/* Hide the RUNTIME ACTIVE pill that ModeStrip ships with — it's redundant
   in simple mode (the header already shows online + endpoint URL). */
.simple-modes .status-pill { display: none; }
.simple-modes .modes { box-shadow: none; padding: 4px; }

/* Arena */
.simple-arena {
  background: var(--rt-panel);
  border-radius: 14px;
  box-shadow: var(--rt-ring);
  overflow: hidden;
  transition: box-shadow 200ms ease;
}
.simple-arena.live {
  box-shadow: 0 0 0 1px rgba(10,114,239,0.30), 0 0 18px rgba(10,114,239,0.10), var(--rt-ring);
  animation: stage-live-glow-outer 1.6s ease-in-out infinite;
}
@keyframes stage-live-glow-outer {
  0%, 100% { box-shadow: 0 0 0 1px rgba(10,114,239,0.28), 0 0 12px rgba(10,114,239,0.08), var(--rt-ring); }
  50%      { box-shadow: 0 0 0 1px rgba(10,114,239,0.45), 0 0 22px rgba(10,114,239,0.16), var(--rt-ring); }
}
@media (prefers-reduced-motion: reduce) {
  .simple-arena.live { animation: none; }
}
.simple-arena.outcome {
  box-shadow: 0 0 0 1px rgba(43,188,138,0.30), var(--rt-ring);
}
.simple-arena.cache {
  box-shadow: 0 0 0 1px rgba(255,193,7,0.30), var(--rt-ring);
}
.simple-arena-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rt-border);
}
.simple-arena-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rt-fg-2);
}
.simple-arena-title-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rt-fg-3);
  transition: background 200ms ease;
}
.simple-arena.live .simple-arena-title-dot {
  background: var(--rt-accent);
  box-shadow: 0 0 0 3px rgba(10,114,239,0.18);
  animation: arena-title-blink 1s ease-in-out infinite;
}
.simple-arena.outcome .simple-arena-title-dot { background: var(--rt-green); box-shadow: 0 0 0 3px rgba(43,188,138,0.18); }
.simple-arena.cache .simple-arena-title-dot { background: rgb(255,193,7); box-shadow: 0 0 0 3px rgba(255,193,7,0.18); }
@keyframes arena-title-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.simple-arena-origin {
  font-size: 11px; color: var(--rt-fg-2);
  background: var(--rt-bg-alt);
  padding: 3px 8px;
  border-radius: 999px;
}
.simple-arena-status {
  margin-left: auto;
  font-size: 11px; color: var(--rt-fg-3);
  text-transform: lowercase; letter-spacing: 0.02em;
}
.simple-arena-status.live { color: var(--rt-accent); font-weight: 600; }
.simple-arena-status.outcome { color: var(--rt-green); font-weight: 600; }
.simple-arena-status.cache { color: rgb(214,158,0); font-weight: 600; }
.simple-arena-stage {
  position: relative;
  padding: 18px 20px;
  min-height: 232px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(10,114,239,0.03), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(127,134,148,0.04) 23px 24px);
}
/* Finish line at the right edge — the horse-race motif. */
.simple-arena-stage::after {
  content: ''; position: absolute; top: 10px; bottom: 10px; right: 14px; width: 6px;
  pointer-events: none; opacity: 0.5;
  background:
    repeating-linear-gradient(45deg, rgba(127,134,148,0.5) 0 3px, transparent 3px 6px);
  border-radius: 2px;
  transition: opacity 240ms ease;
}
.simple-arena.live .simple-arena-stage::after,
.simple-arena.outcome .simple-arena-stage::after {
  opacity: 0.9;
  background: repeating-linear-gradient(45deg, rgba(43,188,138,0.65) 0 3px, transparent 3px 6px);
}

/* Idle state */
.simple-arena-idle {
  display: flex; flex-direction: column; gap: 10px;
}
.simple-arena-idle-row {
  display: grid; grid-template-columns: 14px 1fr auto;
  align-items: center; gap: 10px;
  padding: 6px 0;
}
.simple-arena-idle-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rt-fg-3);
}
.simple-arena-idle-label {
  font-size: 13px; color: var(--rt-fg);
}
.simple-arena-idle-count {
  font-size: 11px; color: var(--rt-fg-3);
}
.simple-arena-idle-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rt-border);
  font-size: 11px;
  color: var(--rt-fg-3);
  text-align: center;
}

/* Cache hit state */
.simple-arena-cache {
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 20px 0;
}
.simple-arena-cache-headline {
  font-size: 14px; color: var(--rt-fg);
}
.simple-arena-cache-meta {
  font-size: 11px; color: var(--rt-fg-3);
}

/* Champion card — the braggable, screenshot-worthy crown on the winner. */
.arena-champion {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(43,188,138,0.14), rgba(10,114,239,0.05) 70%);
  box-shadow: inset 0 0 0 1px rgba(43,188,138,0.30), 0 8px 26px rgba(43,188,138,0.12);
  animation: champion-pop 520ms cubic-bezier(0.2, 1.4, 0.4, 1) 1;
}
@keyframes champion-pop {
  0%   { transform: scale(0.95) translateY(8px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.arena-champion-trophy {
  font-size: 26px; line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(43,188,138,0.45));
  animation: trophy-bounce 620ms cubic-bezier(0.2, 1.5, 0.4, 1) 1;
}
@keyframes trophy-bounce {
  0%   { transform: scale(0) rotate(-22deg); }
  60%  { transform: scale(1.25) rotate(9deg); }
  100% { transform: none; }
}
.arena-champion-main { min-width: 0; }
.arena-champion-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.arena-champion-winner {
  font-size: 18px; font-weight: 700; color: var(--rt-fg); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.arena-champion-verb { font-size: 12px; color: var(--rt-fg-3); }
.arena-champion-time { font-size: 16px; font-weight: 600; color: var(--rt-accent); }
.arena-champion-sub { font-size: 11px; color: var(--rt-fg-3); margin-top: 4px; }
.arena-champion-sub strong { color: var(--rt-fg-2); font-weight: 600; }
.arena-champion-arrow { color: rgb(222,29,141); font-weight: 700; }
.arena-champion-savings {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1;
}
.arena-champion-savings-v { font-size: 19px; font-weight: 700; color: var(--rt-green); }
.arena-champion-savings-k { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rt-fg-3); }
.arena-champion-share {
  align-self: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--rt-green);
  background: rgba(43,188,138,0.10);
  border: 1px solid rgba(43,188,138,0.35);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; white-space: nowrap;
  transition: background 160ms ease, transform 120ms ease, color 160ms ease;
}
.arena-champion-share:hover { background: rgba(43,188,138,0.20); transform: translateY(-1px); }
.arena-champion-share.done { background: var(--rt-green); color: #fff; border-color: var(--rt-green); }
@media (prefers-reduced-motion: reduce) {
  .arena-champion, .arena-champion-trophy { animation: none; }
}
@media (max-width: 560px) {
  .arena-champion { grid-template-columns: auto 1fr auto; }
  .arena-champion-share { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}

/* =====================================================================
   Consensus — the trust signal as a half-second read. A small pill the
   eye parses by color before reading the word: green agreed · amber
   partial · red diverged/flagged · blue escalated-to-frontier · neutral
   single route. Shared by the arena, chat, the test box and recents.
   ===================================================================== */
.consensus-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  line-height: 1; white-space: nowrap;
  padding: 4px 9px 4px 7px; border-radius: 999px;
  border: 1px solid var(--cb-line, rgba(128,136,148,0.40));
  background: var(--cb-bg, rgba(128,136,148,0.10));
  color: var(--cb-fg, var(--rt-fg-2));
}
.consensus-badge.compact { font-size: 10px; padding: 3px 8px 3px 6px; gap: 5px; }
.consensus-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--cb-fg, var(--rt-fg-3));
  box-shadow: 0 0 0 3px var(--cb-bg, transparent);
}
.consensus-badge.compact .consensus-dot { width: 6px; height: 6px; }
.consensus-label { letter-spacing: 0.01em; }
.consensus-count { opacity: 0.7; font-weight: 500; }

/* dotOnly variant — a bare status dot for dense rows (recent list) */
.consensus-dot.solo-dot {
  display: inline-block; vertical-align: middle;
  width: 8px; height: 8px; margin-right: 6px;
  box-shadow: 0 0 0 2px var(--cb-bg, transparent);
}

.tone-green   { --cb-fg: var(--rt-green);  --cb-bg: rgba(43,188,138,0.12);  --cb-line: rgba(43,188,138,0.40); }
.tone-amber   { --cb-fg: var(--rt-amber);  --cb-bg: rgba(245,158,11,0.13);  --cb-line: rgba(245,158,11,0.40); }
.tone-red     { --cb-fg: var(--rt-coral);  --cb-bg: rgba(255,91,79,0.12);   --cb-line: rgba(255,91,79,0.42); }
.tone-blue    { --cb-fg: var(--rt-accent); --cb-bg: rgba(10,114,239,0.12);  --cb-line: rgba(10,114,239,0.42); }
.tone-neutral { --cb-fg: var(--rt-fg-3);   --cb-bg: rgba(128,136,148,0.12); --cb-line: rgba(128,136,148,0.34); }

/* The states that mean "pay attention" softly pulse so the eye lands. */
.consensus-badge.tone-blue .consensus-dot,
.consensus-badge.tone-red .consensus-dot { animation: consensus-pulse 1.8s ease-in-out infinite; }
@keyframes consensus-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--cb-bg); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

/* Arena champion — the badge sits at the end of the headline, and the
   card's frame picks up the tone so the screenshot reads at a glance. */
.arena-champion-line { flex-wrap: wrap; }
.arena-champion-line .consensus-badge { margin-left: auto; }
.arena-champion.consensus-red   { box-shadow: inset 0 0 0 1px rgba(255,91,79,0.30),  0 8px 26px rgba(255,91,79,0.10); }
.arena-champion.consensus-amber { box-shadow: inset 0 0 0 1px rgba(245,158,11,0.30), 0 8px 26px rgba(245,158,11,0.10); }
.arena-champion.consensus-blue  { box-shadow: inset 0 0 0 1px rgba(10,114,239,0.30), 0 8px 26px rgba(10,114,239,0.12); }

/* The one-line "why" under the champion headline — colored by tone. */
.arena-champion-trust {
  margin-top: 5px; font-size: 11px; font-weight: 500;
  color: var(--cb-fg, var(--rt-fg-2));
}

/* Live arena status when the escalation lane spins up. */
.simple-arena-status.escalating { color: var(--rt-accent); }

/* Recent row — consensus detail line above the expanded grid. */
.simple-recent-consensus {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 2px 0 12px;
}
.simple-recent-consensus-detail { font-size: 11px; color: var(--rt-fg-3); }

@media (prefers-reduced-motion: reduce) {
  .consensus-badge .consensus-dot { animation: none; }
}

/* Recent requests */
.simple-recent {
  background: var(--rt-panel);
  border-radius: 12px;
  box-shadow: var(--rt-ring);
  overflow: hidden;
}
.simple-recent-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 16px 8px;
}
.simple-recent-head h3 {
  margin: 0; font-size: 14px; font-weight: 600;
}
.simple-recent-sub {
  font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.simple-recent-head .simple-link-tight { margin-left: auto; }
.simple-recent-empty {
  padding: 18px 16px 24px;
  font-size: 12px; color: var(--rt-fg-3);
  text-align: center;
}
.simple-recent-list {
  display: flex; flex-direction: column;
  padding: 4px 6px 8px;
}
.simple-recent-row {
  border-radius: 8px;
  background: transparent;
  transition: background 120ms ease;
}
.simple-recent-row:hover { background: var(--rt-bg-alt); }
.simple-recent-row.open { background: var(--rt-bg-alt); }
.simple-recent-row.failed .simple-recent-model { color: rgb(220,53,69); }
.simple-recent-row.cached .simple-recent-model { color: rgb(255,193,7); }
.simple-recent-summary {
  display: grid;
  grid-template-columns: 130px 80px 1fr 80px 110px 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent; border: none; cursor: pointer;
  padding: 9px 10px;
  text-align: left;
  font-family: var(--font);
}
.simple-recent-app {
  font-size: 12.5px; font-weight: 500;
  color: var(--rt-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.simple-recent-time { font-size: 10.5px; color: var(--rt-fg-3); }
.simple-recent-model {
  font-size: 12.5px; color: var(--rt-fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.simple-recent-ms {
  font-size: 11px; color: var(--rt-fg-3);
  text-align: right;
}
.simple-recent-savings {
  font-size: 11px;
  text-align: right;
}
.simple-recent-caret { color: var(--rt-fg-3); font-size: 11px; }
.simple-recent-expand {
  padding: 8px 14px 14px;
  border-top: 1px dashed var(--rt-border);
  margin: 0 4px;
}
.simple-recent-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
  margin-bottom: 10px;
}
.simple-kv {
  display: flex; gap: 8px; align-items: baseline;
  padding: 3px 0;
  font-size: 12px;
}
.simple-kv.wide { grid-column: 1 / -1; }
.simple-kv-k {
  font-size: 10px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  min-width: 80px;
}
.simple-kv-v { color: var(--rt-fg); font-family: var(--font); }
.simple-kv.wide .simple-kv-v {
  font-family: var(--mono); font-size: 11px;
  word-break: break-word;
}
.simple-recent-phases {
  background: var(--rt-bg-alt);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.simple-recent-phases-h {
  font-size: 10px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.simple-recent-phase {
  display: grid;
  grid-template-columns: 1.5fr 60px 60px 80px;
  gap: 8px;
  font-size: 11px;
  color: var(--rt-fg-2);
  padding: 2px 0;
}
.simple-recent-actions {
  display: flex; gap: 6px;
}

/* Routing waterfall, hosted in the simple shell. `panel-bare` strips the
   card chrome off RoutingWaterfall so this section owns the surface, and
   the 3-column grid narrows on the way down to a phone-width shell. */
.simple-waterfall {
  background: var(--rt-panel);
  border-radius: 12px;
  box-shadow: var(--rt-ring);
  overflow: hidden;
}
.simple-waterfall-toggle {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: transparent; border: none; cursor: pointer;
  padding: 12px 16px;
  font-size: 13px; color: var(--rt-fg);
  text-align: left;
  font-family: var(--font);
}
.simple-waterfall-toggle .muted {
  color: var(--rt-fg-3);
  font-size: 11px;
  margin-left: auto;
}
.simple-waterfall.open .simple-waterfall-toggle { border-bottom: 1px solid var(--rt-border); }
.simple-waterfall-body { padding: 0; }
.simple-waterfall .waterfall { padding: 16px; gap: 16px; min-height: 260px; }
.simple-waterfall .water-col.scrollable .water-list { max-height: clamp(200px, 30vh, 340px); }

/* Prompt launcher — one button into the shared Runtime console drawer. */
.simple-prompt-launcher {
  background: var(--rt-panel);
  border-radius: 12px;
  box-shadow: var(--rt-ring);
  overflow: hidden;
}
.simple-prompt-launcher-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: transparent; border: none; cursor: pointer;
  padding: 12px 16px;
  font-size: 13px; color: var(--rt-fg);
  text-align: left;
  font-family: var(--font);
}
.simple-prompt-launcher-btn:hover { background: var(--rt-bg-alt); }
.simple-prompt-launcher-main { font-weight: 600; }
.simple-prompt-launcher-btn .muted { color: var(--rt-fg-3); font-size: 11px; }
.simple-prompt-launcher-cue { margin-left: auto; font-size: 11px; color: var(--rt-accent); }
.simple-prompt-launcher-warn {
  background: rgba(255,193,7,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,193,7,0.25);
  margin: 0 16px 14px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--rt-fg-2);
}
.simple-prompt-launcher-last {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--rt-bg-alt); border: none;
  border-top: 1px solid var(--rt-border);
  padding: 10px 16px;
  font-family: var(--font);
}
.simple-prompt-launcher-last .muted {
  display: block;
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.simple-prompt-launcher-last-text {
  font-size: 12.5px; color: var(--rt-fg);
  white-space: pre-wrap; word-break: break-word;
}

/* Setup teaser */
.simple-setup-card {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: var(--rt-panel);
  border-radius: 12px;
  box-shadow: var(--rt-ring);
}
.simple-setup-card-l { flex: 1; min-width: 0; }
.simple-setup-eyebrow {
  font-size: 9.5px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.simple-setup-url {
  font-size: 14px; color: var(--rt-fg);
  word-break: break-all;
}
.simple-setup-card-r { display: flex; gap: 8px; flex-shrink: 0; }

/* Footer */
.simple-footer {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 24px;
  background: var(--rt-panel);
  border-top: 1px solid var(--rt-border);
  font-size: 11px; color: var(--rt-fg-3);
}
.simple-footer-stat {
  display: inline-flex; align-items: center; gap: 6px;
}
.simple-footer .simple-link-tight { margin-left: auto; }

/* Responsive */
@media (max-width: 760px) {
  .simple-header { grid-template-columns: 1fr auto; }
  .simple-endpoint { grid-column: 1 / -1; justify-self: start; padding-top: 4px; }
  .simple-hero { grid-template-columns: 1fr; }
  .simple-stat-savings .simple-stat-value { font-size: 44px; }
  .simple-recent-summary { grid-template-columns: 1fr 70px 16px; gap: 8px; }
  .simple-recent-time, .simple-recent-ms, .simple-recent-savings { display: none; }
  .simple-waterfall .waterfall { grid-template-columns: 1fr; }
}

/* =====================================================================
   UX IMPROVEMENT PLAN — cross-cutting systems
   (system line · bands · peeks · dial · presets · rewards · a11y)
   ===================================================================== */

/* ── A11y baseline (§5.5) ─────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 400;
  padding: 8px 14px; border-radius: 8px;
  background: var(--rt-accent); color: #fff;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--rt-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── System line (§5.1) ───────────────────────────────────────────── */
.system-line-row { padding: 8px 24px 0; background: var(--rt-bg); }
.system-line {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 10px;
  background: var(--rt-panel); box-shadow: var(--rt-ring);
  font-family: var(--font); font-size: 13px; color: var(--rt-fg);
}
.simple-main > .system-line { margin-bottom: 4px; }
.system-line-dot { font-size: 11px; line-height: 1; }
.system-line-dot.tone-good { color: var(--rt-green); }
.system-line-dot.tone-watch { color: var(--rt-amber); }
.system-line-dot.tone-act { color: var(--rt-coral); }
.system-line.tone-act { box-shadow: 0 0 0 1px rgba(255,91,79,0.35); }
.system-line.tone-watch { box-shadow: 0 0 0 1px rgba(255,193,7,0.30); }
.system-line-text { flex: 1; min-width: 0; }
.system-line-clause {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: var(--rt-fg); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
  text-decoration-color: var(--rt-fg-3);
}
.system-line-clause:hover { color: var(--rt-accent); }
.engineer-toggle {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 4px 10px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--rt-bg-alt); color: var(--rt-fg-3);
  font-family: var(--mono); font-size: 10.5px;
  box-shadow: var(--rt-ring);
}
.engineer-toggle.on { color: var(--rt-accent); box-shadow: 0 0 0 1px var(--rt-accent); }
.icon-btn.engineer-btn.on { color: var(--rt-accent); box-shadow: inset 0 0 0 1px var(--rt-accent); }

/* ── Section toggle + peek (§5.2) ─────────────────────────────────── */
.rt-section-toggle {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.rt-section-peek {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 14px; margin-top: 2px;
  background: var(--rt-bg-alt); border: none; border-radius: 8px;
  cursor: pointer; text-align: left;
  font-size: 11.5px; color: var(--rt-fg-3);
}
.rt-section-peek:hover { color: var(--rt-fg-2); background: var(--rt-panel); box-shadow: var(--rt-ring); }
.rt-section-peek-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-section-peek-more { flex-shrink: 0; color: var(--rt-accent); }

/* ── Band chips (§5.6) ────────────────────────────────────────────── */
.band-chip { position: relative; display: inline-flex; }
.band-chip-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
  font-family: var(--mono); font-size: 11px; color: var(--rt-fg-2);
}
.band-chip.compact .band-chip-btn { padding: 3px 8px; font-size: 10.5px; }
.band-ico { font-size: 9px; line-height: 1; }
.band-lbl { color: var(--rt-fg-3); text-transform: uppercase; letter-spacing: 0.04em; font-size: 9.5px; }
.band-val { color: var(--rt-fg); font-weight: 600; }
.band-word { font-size: 10px; }
.band-pop, .infotip-pop, .leverage-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 320;
  min-width: 230px; max-width: 300px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--rt-panel); box-shadow: 0 8px 30px rgba(0,0,0,0.18), var(--rt-ring);
  font-family: var(--font); font-size: 12px; color: var(--rt-fg-2);
  text-align: left; white-space: normal;
}
.band-pop-tip { color: var(--rt-fg); }
.band-pop-act { color: var(--rt-fg-3); font-size: 11.5px; }
.band-pop-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; cursor: pointer;
  color: var(--rt-fg-3); font-size: 14px; line-height: 1; padding: 2px;
}
.band-ico-sm { font-size: 8px; margin-left: 3px; }
.stat-link { background: none; border: none; cursor: pointer; font: inherit; }
.stat-link:hover .v { color: var(--rt-accent); }

/* ── InfoTip ──────────────────────────────────────────────────────── */
.infotip { position: relative; display: inline-flex; margin-left: 6px; }
.infotip-btn {
  width: 15px; height: 15px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--rt-bg-alt); color: var(--rt-fg-3);
  font-family: var(--mono); font-size: 10px; line-height: 1;
  box-shadow: var(--rt-ring); display: inline-flex; align-items: center; justify-content: center;
}
.infotip-btn:hover { color: var(--rt-accent); }
.infotip-pop { left: 0; right: auto; }
.infotip-pop.wide { min-width: 300px; }
.infotip-title { font-weight: 600; color: var(--rt-fg); font-size: 12.5px; }
.infotip-body { line-height: 1.5; }

/* ── Mode dial (§6.6) ─────────────────────────────────────────────── */
.mode-dial-wrap { margin-bottom: 14px; }
.mode-dial-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mode-dial {
  display: inline-flex; padding: 3px; border-radius: 12px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
}
.mode-dial-stop {
  position: relative;
  padding: 8px 18px; border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--rt-fg-2);
  font-family: var(--font); font-size: 13px; font-weight: 500;
}
.mode-dial-stop:hover { color: var(--rt-fg); }
.mode-dial-stop.active {
  background: var(--rt-panel); color: var(--rt-fg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10), var(--rt-ring);
  font-weight: 600;
}
.mode-dial-reco {
  position: absolute; top: -7px; right: -6px;
  padding: 1px 6px; border-radius: 999px;
  background: var(--rt-accent); color: #fff;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase;
}
.mode-dial-toggles { display: inline-flex; gap: 6px; }
.mode-dial-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--rt-bg-alt); color: var(--rt-fg-2);
  font-family: var(--font); font-size: 12.5px; font-weight: 500;
  box-shadow: var(--rt-ring);
}
.mode-dial-toggle.on { background: var(--rt-accent); color: #fff; box-shadow: none; }
.mode-dial-sub { margin-top: 7px; font-size: 11px; color: var(--rt-fg-3); }
.mode-dial-wrap .modes { margin-top: 12px; }
.mode-reco-badge {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--rt-accent); color: #fff;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase;
}

/* ── Toasts (§5.7 / §8) ───────────────────────────────────────────── */
.toast-host {
  position: fixed; bottom: 46px; right: 18px; z-index: 380;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  max-width: 380px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--rt-panel); box-shadow: 0 8px 30px rgba(0,0,0,0.20), var(--rt-ring);
  font-family: var(--font); font-size: 12.5px; color: var(--rt-fg);
  animation: toast-in 0.28s ease;
}
.toast-win { border-left: 3px solid var(--rt-green); }
.toast-celebrate { border-left: 3px solid var(--rt-accent); font-weight: 600; }
.toast-warn { border-left: 3px solid var(--rt-amber); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Leverage meter (§5.7) ────────────────────────────────────────── */
.leverage { position: relative; display: inline-flex; }
.leverage-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
}
.leverage-lbl { font-size: 9.5px; color: var(--rt-fg-3); text-transform: uppercase; letter-spacing: 0.05em; }
.leverage-track {
  width: 56px; height: 5px; border-radius: 999px; overflow: hidden;
  background: var(--rt-border); display: inline-block;
}
.leverage-track.sm { width: 70px; }
.leverage-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--rt-accent), var(--rt-green));
  transition: width 0.6s ease;
}
.leverage-val { font-size: 10.5px; color: var(--rt-fg-2); }
.leverage-pop { min-width: 280px; }
.leverage-pop-h { font-weight: 600; color: var(--rt-fg); font-size: 12.5px; margin-bottom: 2px; }
.leverage-row { display: flex; align-items: center; gap: 8px; }
.leverage-row-lbl { flex: 1; font-size: 11.5px; color: var(--rt-fg-2); }
.leverage-row-val { font-size: 10.5px; color: var(--rt-fg-3); width: 34px; text-align: right; }

/* ── Setup checklist (§5.8) ───────────────────────────────────────── */
.setup-checklist {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border-radius: 12px; margin-bottom: 14px;
  background: var(--rt-panel); box-shadow: var(--rt-ring);
}
.setup-checklist-h { display: flex; align-items: center; justify-content: space-between; }
.setup-checklist-title { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--rt-fg); }
.setup-checklist-progress { font-size: 11px; color: var(--rt-fg-3); }
.setup-step { display: flex; align-items: center; gap: 10px; }
.setup-step-mark {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rt-bg-alt); color: var(--rt-fg-3);
  font-family: var(--mono); font-size: 10.5px;
  box-shadow: var(--rt-ring);
}
.setup-step.done .setup-step-mark { background: var(--rt-green); color: #fff; box-shadow: none; }
.setup-step-lbl { flex: 1; font-family: var(--font); font-size: 12.5px; color: var(--rt-fg); }
.setup-step.done .setup-step-lbl { color: var(--rt-fg-3); text-decoration: line-through; }
.setup-checklist.compact { padding: 10px 14px; }
.setup-checklist.compact .setup-step-lbl { font-size: 12px; }

/* ── Presets (§6.8) ───────────────────────────────────────────────── */
.presets-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preset-card {
  position: relative;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 12px 14px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring); text-align: left;
}
.preset-card:hover { background: var(--rt-panel); }
.preset-card.active { box-shadow: 0 0 0 1.5px var(--rt-accent); }
.preset-ico { color: var(--rt-accent); }
.preset-name { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--rt-fg); }
.preset-desc { font-family: var(--font); font-size: 11px; color: var(--rt-fg-3); line-height: 1.4; }
.preset-check { position: absolute; top: 10px; right: 10px; color: var(--rt-accent); }
.adv-fold-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 0; background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--rt-fg);
  text-align: left;
}

/* ── Rules editor (§6.3) ──────────────────────────────────────────── */
.rules-grid { display: flex; flex-direction: column; }
.rules-head, .rules-row {
  display: grid; align-items: center;
  grid-template-columns: 1.3fr 1fr 1fr 0.9fr 0.8fr 0.9fr auto;
  gap: 8px; padding: 8px 4px;
  border-bottom: 1px solid var(--rt-border);
}
.rules-head { font-size: 9.5px; color: var(--rt-fg-3); text-transform: uppercase; letter-spacing: 0.05em; }
.rules-app { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--rt-fg); overflow: hidden; text-overflow: ellipsis; }
.rule-select, .rule-budget {
  height: 30px; padding: 0 8px; border: none; border-radius: 7px;
  background: var(--rt-bg-alt); color: var(--rt-fg);
  font-family: var(--mono); font-size: 11.5px;
  box-shadow: var(--rt-ring); cursor: pointer;
}
.rule-budget { width: 80px; cursor: text; }

/* ── Health summary (§6.4) ────────────────────────────────────────── */
.health-summary { margin-bottom: 14px; }
.health-rows { display: flex; flex-direction: column; gap: 4px; }
.health-row {
  display: grid; grid-template-columns: 18px 150px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; border: none; border-radius: 9px; cursor: pointer;
  background: var(--rt-bg-alt); text-align: left;
}
.health-row:hover { background: var(--rt-panel); box-shadow: var(--rt-ring); }
.health-ico { font-size: 10px; }
.health-lbl { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--rt-fg); }
.health-word { font-family: var(--mono); font-size: 11.5px; }
.health-go { color: var(--rt-fg-3); }

/* ── Benchmark targets (§6.4) ─────────────────────────────────────── */
.bench-target-row {
  display: grid; grid-template-columns: 16px 1.6fr auto auto; align-items: center; gap: 10px;
  padding: 6px 4px; border-bottom: 1px solid var(--rt-border);
}
.bench-target-ico { font-size: 10px; }
.bench-target-lbl { font-family: var(--font); font-size: 12px; color: var(--rt-fg); }
.bench-target-val { font-size: 11.5px; color: var(--rt-fg); }
.bench-target-tgt { font-size: 10.5px; }

/* ── Teaching empty states (§5.9) ─────────────────────────────────── */
.teach-empty {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 10px;
  background: var(--rt-bg-alt);
  border: 1px dashed var(--rt-border);
}
.teach-empty-text { flex: 1; min-width: 200px; font-family: var(--font); font-size: 12.5px; color: var(--rt-fg-2); }

/* ── Receipts as trophies (§5.7) ──────────────────────────────────── */
.receipt-best {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: none; border-radius: 9px; cursor: pointer;
  background: rgba(43,188,138,0.08); box-shadow: inset 0 0 0 1px rgba(43,188,138,0.30);
  text-align: left;
}
.receipt-best-stamp { flex-shrink: 0; font-size: 9px; letter-spacing: 0.08em; color: var(--rt-green); }
.receipt-best-text { font-family: var(--font); font-size: 12.5px; color: var(--rt-fg); }
.streak-chip { margin-left: 8px; font-size: 11px; color: var(--rt-amber); }

/* ── Markdown chat bodies (§6.3) ──────────────────────────────────── */
.chat-body-md { line-height: 1.55; color: var(--rt-fg); }
.chat-body-md .md-p,
.chat-body-md p,
.md p,
.md li,
.md strong,
.md em,
.md td {
  color: var(--rt-fg);
}
.chat-body-md .md-p { margin: 0 0 8px; }
.chat-body-md .md-p:last-child { margin-bottom: 0; }
.md-h { margin: 12px 0 6px; color: var(--rt-fg); }
.md-list { margin: 0 0 8px; padding-left: 22px; color: var(--rt-fg); }
.md-list li { margin: 2px 0; color: var(--rt-fg); }
.md-inline-code {
  padding: 1px 5px; border-radius: 5px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
  font-size: 0.9em;
}
.md-code {
  margin: 8px 0; border-radius: 10px; overflow: hidden;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
}
.md-code-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 12px; border-bottom: 1px solid var(--rt-border);
}
.md-code-lang { font-size: 10px; color: var(--rt-fg-3); text-transform: uppercase; letter-spacing: 0.05em; }
.md-code-copy {
  background: none; border: none; cursor: pointer;
  font-size: 10.5px; color: var(--rt-fg-3); padding: 2px 6px;
}
.md-code-copy:hover { color: var(--rt-accent); }
.md-code pre { margin: 0; padding: 12px 14px; overflow-x: auto; font-size: 12px; line-height: 1.5; }
.code-kw { color: var(--rt-accent); }
.code-str { color: var(--rt-green); }
.code-com { color: var(--rt-fg-3); font-style: italic; }
.code-num { color: var(--rt-pink); }
.md a { color: var(--rt-accent); }

/* ── Chat upgrades (§6.3) ─────────────────────────────────────────── */
.chat-prefs {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 10px; border-radius: 10px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
}
.chat-prefs-field { display: flex; flex-direction: column; gap: 4px; }
.chat-prefs-field > span { font-size: 10px; }
.chat-pin-chip { color: var(--rt-accent); }
.chat-pin-x {
  background: none; border: none; cursor: pointer;
  color: var(--rt-fg-3); font-size: 13px; line-height: 1; padding: 0 3px;
}
.chat-pin-x:hover { color: var(--rt-coral); }
.chat-act { height: 22px; padding: 0 7px; font-size: 10px; }
/* Attach button. Was styled as permanently disabled while attachments were
   a placeholder; they are real now, so it reads as the live control it is. */
.chat-attach {
  background: none; border: none; font-size: 14px;
  color: var(--rt-fg-2); cursor: pointer; padding: 0 3px; border-radius: 6px;
  transition: color .12s ease, background .12s ease;
}
.chat-attach:hover:not(:disabled) { color: var(--rt-accent); background: var(--rt-bg-alt); }
.chat-attach:disabled { cursor: not-allowed; opacity: 0.45; }

/* ── Attachments (any file type) ───────────────────────────────────── */
.chat-attach-strip {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0;
}
.chat-attach-sent { padding: 2px 0 6px; }
.chat-attach-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 6px 4px 7px; border-radius: 7px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
  font-size: 10.5px; color: var(--rt-fg-2); line-height: 1.3;
}
.chat-attach-icon { font-size: 11px; flex: none; }
.chat-attach-name {
  color: var(--rt-fg); max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-attach-meta { color: var(--rt-fg-3); white-space: nowrap; }
.chat-attach-failed { box-shadow: inset 0 0 0 1px var(--rt-coral); }
.chat-attach-failed .chat-attach-meta,
.chat-attach-failed .chat-attach-icon { color: var(--rt-coral); }
.chat-attach-reading { color: var(--rt-fg-3); }
.chat-attach-thumb { position: relative; display: inline-block; }
.chat-attach-thumb img {
  height: 48px; width: 48px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--rt-border, rgba(128, 128, 128, .35)); display: block;
}
.chat-attach-thumb .chat-pin-x { position: absolute; top: -6px; right: -6px; }
.chat-attach-sent-img {
  max-height: 180px; max-width: 60%; border-radius: 8px; display: block;
  border: 1px solid var(--rt-border, rgba(128, 128, 128, .35));
}
/* Drop target feedback. Requires app.windows[].dragDropEnabled=false in
   tauri.conf.json — otherwise Tauri swallows the OS drop before the
   webview sees it and this never lights up in the desktop build. */
.chat-input-drag {
  outline: 2px dashed var(--rt-accent); outline-offset: 4px; border-radius: 10px;
}
.thread-picker { display: inline-flex; align-items: center; gap: 2px; }
.thread-select {
  height: 30px; max-width: 190px; padding: 0 8px;
  border: none; border-radius: 7px;
  background: var(--rt-bg-alt); color: var(--rt-fg);
  font-family: var(--font); font-size: 12px;
  box-shadow: var(--rt-ring); cursor: pointer;
}

/* ── Hardware-fit badges (§6.5) ───────────────────────────────────── */
.fit-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; white-space: nowrap; }
.fit-badge.fit-gpu { color: var(--rt-green); }
.fit-badge.fit-ram { color: var(--rt-amber); }
.fit-badge.fit-no { color: var(--rt-coral); }
.fit-badge.fit-unknown { color: var(--rt-fg-3); }

/* ── Scout coach mark + inline answers (§5.4 / §6.7) ─────────────── */
.scout-coach {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; margin-bottom: 8px; border-radius: 10px;
  background: rgba(10,114,239,0.08);
  box-shadow: inset 0 0 0 1px rgba(10,114,239,0.25);
  font-family: var(--font); font-size: 12px; color: var(--rt-fg);
}
.scout-coach-x {
  background: none; border: none; cursor: pointer;
  color: var(--rt-fg-3); font-size: 14px; line-height: 1; margin-left: auto;
}
.scout-answer {
  margin: 8px 0; padding: 12px 14px; border-radius: 10px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
}
.scout-answer-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--rt-fg);
  margin-bottom: 6px;
}
.scout-answer-body {
  font-family: var(--font); font-size: 12.5px; color: var(--rt-fg-2);
  line-height: 1.55; white-space: pre-wrap;
}

/* ── Shortcut cheat-sheet (⌘/) ───────────────────────────────────── */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 360;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
}
.sheet {
  width: min(480px, calc(100vw - 40px)); max-height: 80vh; overflow: auto;
  border-radius: 14px; background: var(--rt-panel);
  box-shadow: 0 18px 60px rgba(0,0,0,0.3), var(--rt-ring);
}
.sheet-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--rt-border);
}
.sheet-h h3 { margin: 0; font-size: 15px; }
.sheet-body { padding: 10px 18px 16px; }
.sheet-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--rt-border);
}
.sheet-row:last-child { border-bottom: none; }
.sheet-row .kbd { flex-shrink: 0; min-width: 72px; text-align: center; }
.sheet-desc { font-family: var(--font); font-size: 12.5px; color: var(--rt-fg-2); }

/* ── Simple view additions (§6.1) ─────────────────────────────────── */
.simple-cta-row { display: flex; justify-content: center; }
.simple-cta {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 12px 26px; border: none; border-radius: 12px; cursor: pointer;
  background: var(--rt-accent); color: #fff;
  font-family: var(--font); font-size: 15px; font-weight: 600;
  box-shadow: 0 6px 22px rgba(10,114,239,0.30);
}
.simple-cta:hover { filter: brightness(1.06); }
.simple-cta-sub { font-size: 11px; font-weight: 400; opacity: 0.85; }
.simple-stat-sub { margin-top: 4px; font-size: 11px; }
.simple-recap {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--rt-panel); box-shadow: var(--rt-ring);
}
.simple-recap-l { flex: 1; min-width: 0; }
.simple-recap-title {
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px;
}
.simple-recap-line { font-family: var(--font); font-size: 12.5px; color: var(--rt-fg); }
.simple-recap-r { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ── Brief intro (§6.9) ───────────────────────────────────────────── */
.intro-brief .intro-go { opacity: 1; pointer-events: auto; }
.intro-brief .intro-console { display: none; }

/* Responsive touches for the new controls */
@media (max-width: 760px) {
  .presets-row { grid-template-columns: 1fr; }
  .rules-head, .rules-row { grid-template-columns: 1fr 1fr 1fr; }
  .mode-dial-row { gap: 8px; }
  .system-line { flex-wrap: wrap; }
}

/* ── Fusion / synthesis deliberation artifact (B17) ─────────────────── */
.fusion-verdict {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--rt-bg-alt);
  box-shadow: inset 0 0 0 1px var(--rt-border, rgba(128,136,148,0.22));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fusion-verdict.compact { padding: 7px 9px; gap: 6px; margin-top: 8px; }
.fusion-verdict-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fusion-verdict-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  color: var(--cb-fg); background: var(--cb-bg);
  box-shadow: inset 0 0 0 1px var(--cb-line);
}
.fusion-verdict-badge .consensus-dot { background: var(--cb-fg); }
.fusion-verdict-best { font-size: 11px; color: var(--rt-fg-2); }
.fusion-verdict-best strong { color: var(--rt-fg-1); }
.fusion-verdict-lists { display: flex; flex-direction: column; gap: 7px; }
.fusion-verdict-group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cb-fg, var(--rt-fg-3)); margin-bottom: 2px;
}
.fusion-verdict-group.tone-green  { --cb-fg: var(--rt-green); }
.fusion-verdict-group.tone-red    { --cb-fg: var(--rt-coral); }
.fusion-verdict-group.tone-blue   { --cb-fg: var(--rt-accent); }
.fusion-verdict-group.tone-amber  { --cb-fg: var(--rt-amber); }
.fusion-verdict-items {
  margin: 0; padding-left: 16px;
  font-size: 12px; line-height: 1.45; color: var(--rt-fg-1);
}
.fusion-verdict-items li { margin: 1px 0; }
.fusion-verdict-degraded { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.fusion-verdict-icon { font-size: 13px; opacity: .7; }
.fusion-verdict-degraded-text { font-size: 11px; color: var(--rt-fg-3); }
.fusion-verdict-synth { display: flex; align-items: baseline; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--rt-fg-1); }
.fusion-verdict-synth.degraded { font-size: 11px; color: var(--rt-fg-3); }
.fusion-verdict-synth.tone-green .fusion-verdict-icon { color: var(--rt-green); opacity: 1; }
.fusion-verdict-synth.tone-amber .fusion-verdict-icon { color: var(--rt-amber); opacity: 1; }
.fusion-verdict-synth strong { color: var(--rt-fg-1); }

/* =====================================================================
   NIGHTSHIFT CHROME — the shell reads as one instrument (R4 §3.2).
   Display face for the wordmark and screen names, uppercase letterspaced
   navigation, and the monospace rule on the status line. Applies in both
   themes: the identity is structural, not a skin.
   ===================================================================== */
.brand-tight {
  font-family: var(--font-display, var(--font));
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.tabs { border-radius: 4px; }
.tab {
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: 3px;
  padding: 6px 11px;
}
.tab.active { color: var(--rt-fg); }
.statusbar .stat .k, .statusbar .stat .v { font-family: var(--mono); }
.brand-sub { font-family: var(--mono); font-size: 10px; }
/* The two overnight screens sit left of a hairline; capability screens
   follow. One tablist, one product — the divider is orientation, not
   hierarchy. The COUNT is the part that drifts — it was four, then three,
   then two, as Queue/Monitor/Lanes went to the Night rail and Console to
   Setup — so read it against js/app.jsx's SCREENS, never as a fact. */
.tab-divider {
  width: 1px; height: 16px; margin: 0 4px;
  background: var(--rt-border-strong);
  flex: none;
}

/* =====================================================================
   NIGHTSHIFT SCREENS — component recipes ported from NS-UI-UX
   (HUD chips, stat tiles, verdict badges, segmented pickers, run cards,
   the answer modal, the accumulated-field still). Everything binds to
   the semantic tokens so both themes hold; every visual property on
   these surfaces maps to a named field of the job record (R4 §6).
   ===================================================================== */
.ns-screen {
  min-height: 100%;
  padding: 20px 24px 40px;
  position: relative;
}
.ns-screen::before {
  /* the dot-matrix ground from NS-UI-UX — texture on the ground plane,
     not an animation; static by construction */
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(124,139,181,0.10) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.ns-screen > * { position: relative; }
.ns-wrap { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.ns-grid { display: grid; gap: 18px; }
@media (min-width: 980px) {
  .ns-grid-morning { grid-template-columns: 7fr 5fr; align-items: stretch; }
  .ns-grid-queue { grid-template-columns: 7fr 5fr; align-items: stretch; }
  .ns-grid-cards { grid-template-columns: 1fr 1fr; }
}

.ns-card {
  background: var(--rt-panel);
  border: 1px solid var(--rt-border);
  border-radius: 6px;
  padding: 18px;
  box-shadow: var(--rt-shadow);
  display: flex; flex-direction: column; gap: 14px;
}
.ns-card-header {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rt-border);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--rt-fg-3);
  flex-wrap: wrap;
}
.ns-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--rt-amber);
}
.ns-headline {
  font-family: var(--font-display, var(--font));
  font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: 0.01em;
  color: var(--rt-fg);
}
.ns-sub { font-size: 13px; line-height: 1.6; color: var(--rt-fg-3); }

.ns-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rt-fg-2);
  background: var(--rt-bg-alt); border: 1px solid var(--rt-border);
  padding: 3px 9px; border-radius: 3px; white-space: nowrap;
}
.ns-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ns-dot-glow { box-shadow: 0 0 8px currentColor; background: currentColor; }

.ns-stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rt-border); border-bottom: 1px solid var(--rt-border);
  padding: 14px 0; text-align: center; font-family: var(--mono);
}
.ns-stat-row > div + div { border-left: 1px solid var(--rt-border); }
.ns-stat-v { font-size: 20px; font-weight: 700; color: var(--rt-fg); }
.ns-stat-k { font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rt-fg-3); margin-top: 2px; }

.ns-verdict-card {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--rt-bg-alt); border: 1px solid var(--rt-border);
  padding: 12px 14px; border-radius: 4px; font-family: var(--mono);
}
.ns-verdict-word { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.ns-cost-line { display: flex; justify-content: space-between; align-items: flex-end; font-family: var(--mono); }
.ns-cost-line .v { font-size: 20px; font-weight: 700; color: var(--rt-green); }
.ns-cost-line .k { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rt-fg-3); }

.ns-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 11px 16px; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--rt-border); background: var(--rt-bg-alt); color: var(--rt-fg-2);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.ns-btn:hover { color: var(--rt-fg); border-color: var(--rt-border-strong); }
.ns-btn-primary { background: var(--rt-fg); color: var(--rt-bg); border-color: transparent; }
.ns-btn-primary:hover { color: var(--rt-bg); opacity: 0.92; }
.ns-btn-quiet { border: none; background: transparent; padding: 8px 4px; font-weight: 500; }

.ns-seg { display: grid; gap: 8px; }
.ns-seg-2 { grid-template-columns: 1fr 1fr; }
.ns-seg-3 { grid-template-columns: 1fr 1fr 1fr; }
.ns-seg .ns-seg-btn {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 8px; text-align: center; cursor: pointer; border-radius: 3px;
  background: var(--rt-bg-sunk); border: 1px solid var(--rt-border); color: var(--rt-fg-3);
  transition: all 150ms ease;
}
.ns-seg .ns-seg-btn:hover { color: var(--rt-fg); }
.ns-seg .ns-seg-btn.on {
  background: color-mix(in srgb, var(--rt-accent) 18%, transparent);
  border-color: var(--rt-accent); color: var(--rt-fg); font-weight: 700;
}
.ns-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rt-fg-2);
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.ns-label .hint { font-size: 8px; color: var(--rt-fg-3); text-transform: none; letter-spacing: 0; }
.ns-input, .ns-select, .ns-textarea {
  width: 100%; background: var(--rt-bg-sunk); color: var(--rt-fg);
  border: 1px solid var(--rt-border); border-radius: 3px;
  padding: 9px 10px; font-family: var(--mono); font-size: 11px;
}
.ns-input:focus, .ns-select:focus, .ns-textarea:focus { outline: none; border-color: var(--rt-fg-3); }
.ns-textarea { resize: vertical; min-height: 76px; line-height: 1.55; }

.ns-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 3px; border: 1px solid;
}
.ns-progress { height: 3px; background: var(--rt-border); border-radius: 2px; overflow: hidden; }
.ns-progress > span { display: block; height: 100%; background: var(--rt-fg-2); }

.ns-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ns-table th {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rt-fg-3); font-weight: 500;
  text-align: left; padding: 6px 10px 8px 0;
}
.ns-table td { border-top: 1px solid var(--rt-border); padding: 8px 10px 8px 0; font-family: var(--mono); }

.ns-filter-btn {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px; cursor: pointer;
  background: var(--rt-bg-alt); border: 1px solid var(--rt-border); color: var(--rt-fg-3);
}
.ns-filter-btn.on { background: var(--rt-fg); color: var(--rt-bg); font-weight: 700; border-color: transparent; }

.ns-run-card {
  background: var(--rt-panel); border: 1px solid var(--rt-border); border-radius: 6px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--rt-shadow);
}
.ns-run-title { font-size: 13px; font-weight: 500; color: var(--rt-fg); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The accumulated-field still (morning screen): cluster knots sized by
   cluster.size, colored by cluster.verdict, unverified knots at 40%;
   lane origin labels on the perimeter (§6.3). Rendered as SVG — static,
   deterministic, data-bound. */
.ns-still {
  position: relative; border: 1px solid var(--rt-border); border-radius: 4px;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--rt-accent) 7%, transparent) 0%, transparent 70%),
    var(--night, #0B0E1A);
  min-height: 300px; flex: 1; overflow: hidden;
}
.ns-still svg { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.ns-lane-anchor {
  position: absolute; font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5;
}
.ns-lane-anchor .m { display: block; font-size: 7.5px; font-weight: 400; color: var(--haze, #7C8BB5); letter-spacing: 0.05em; }
.ns-still-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--haze, #7C8BB5); font-size: 12px; text-align: center; padding: 24px;
}

/* Immersive morning still (variant="immersive"): the whole field orbits
   slowly, a second dot layer counter-rotates for parallax, and each
   knot group counter-rotates at exactly the field rate so its size ·
   verdict label stays upright (same duration, opposite direction, no
   delay — sync is the mechanism). Halo breathing is opacity-only. All
   motion is CSS animation, so the global prefers-reduced-motion rule in
   tokens.css collapses the field back to the static still.
   transform-origin values resolve in the 640×640 viewBox coordinate
   system (SVG transform-box defaults to view-box); the per-knot origin
   is set inline at the knot's own center. */
.ns-still-rot { transform-box: view-box; transform-origin: 320px 320px; animation: nsStillSpin 160s linear infinite; }
.ns-still-rot-rev { animation: nsStillSpinRev 220s linear infinite; }
.ns-still-knot { transform-box: view-box; animation: nsStillSpinRev 160s linear infinite; }
.ns-still-ring { fill: none; stroke: var(--bone, #E8E4DA); stroke-width: 1; stroke-dasharray: 1 9; }
.ns-knot-halo { animation: nsKnotPulse 7s ease-in-out infinite; }
@keyframes nsStillSpin { to { transform: rotate(360deg); } }
@keyframes nsStillSpinRev { to { transform: rotate(-360deg); } }
@keyframes nsKnotPulse { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.2; } }

.ns-modal-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4, 6, 14, 0.78); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ns-modal {
  background: var(--rt-panel); border: 1px solid var(--rt-border-strong);
  border-radius: 6px; max-width: 760px; width: 100%; max-height: 84vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--rt-shadow);
}
.ns-modal-h {
  padding: 14px 18px; border-bottom: 1px solid var(--rt-border);
  background: var(--rt-bg-alt);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.ns-modal-body { padding: 18px; overflow-y: auto; font-size: 12.5px; line-height: 1.65; color: var(--rt-fg-2); white-space: pre-wrap; }
.ns-modal-f {
  padding: 12px 18px; border-top: 1px solid var(--rt-border); background: var(--rt-bg-alt);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 9px; color: var(--rt-fg-3); flex-wrap: wrap;
}

.ns-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--rt-bg-alt); border: 1px solid var(--rt-border); border-radius: 4px;
  padding: 12px 14px; font-family: var(--mono); font-size: 9.5px; color: var(--rt-fg-3);
}
.ns-banner a { color: var(--rt-fg); cursor: pointer; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }

.ns-mode-card {
  text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--rt-bg-sunk); border: 1px solid var(--rt-border); border-radius: 4px;
  padding: 14px; cursor: pointer; color: var(--rt-fg-3); transition: all 150ms ease;
}
.ns-mode-card:hover { color: var(--rt-fg); }
.ns-mode-card.on { color: var(--rt-fg); }
.ns-mode-card .t { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.ns-mode-card .d { font-size: 10px; color: var(--rt-fg-3); margin-top: 2px; }

/* =====================================================================
   The Active fleet board (js/fleet.jsx) — one row per lane, both
   workloads, framed by a stat strip and two rails (active job on the
   left, capacity on the right).

   Deliberately reuses the token layer and the existing lane vocabulary
   rather than inventing a palette: lane colours come from field.mjs
   laneColor() as inline style (EVENTS.md v1.1 forbids renderers
   enumerating lane names), and everything else is --rt-*.
   ===================================================================== */
.fleet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--rt-border);
}
.fleet-head-l { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.fleet-head h3 { margin: 0; font-size: 14px; color: var(--rt-fg); }
.fleet-head-counts { font-size: 11px; color: var(--rt-fg-3); white-space: nowrap; }
.fleet-head-counts em { font-style: normal; }
.fleet-head-counts em.run  { color: var(--rt-green); }
.fleet-head-counts em.attn { color: var(--rt-amber); }

/* The capability line (ML-MODES-BUILD-001 §7): what this box can serve
   right now, per class, from GET /v1/meterless/classes. It sits after the
   lane counts and is allowed to WRAP — the lane counts are four short
   numbers, this is up to eleven class names, and truncating it would hide
   exactly the classes an operator most needs to see. Each group takes the
   colour its availability already means elsewhere on this board: green is
   serving, amber is "not yet but it could", dim is not happening. */
.fleet-head-classes { font-size: 11px; color: var(--rt-fg-3); min-width: 0; }
.fleet-head-classes em { font-style: normal; }
.fleet-head-classes em.cap-ready       { color: var(--rt-green); }
.fleet-head-classes em.cap-admittable  { color: var(--rt-amber); }
.fleet-head-classes em.cap-cloud       { color: var(--rt-fg-2); }
/* Unavailable is dim and struck-through rather than absent: a class that
   vanished from the line reads as one the runtime does not have, when the
   truth is that it has it and cannot serve it right now. The reason is on
   the title attribute, verbatim from the index. */
.fleet-head-classes em.cap-unavailable { color: var(--rt-fg-4, var(--rt-fg-3)); text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.75; cursor: help; }

.fleet-board { padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 12px; }
.fleet-empty { color: var(--rt-fg-3); font-size: 11px; padding: 14px 6px; text-align: center; }

/* The stat strip: four numbers with a hairline grid between them. */
.fleet-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--rt-border);
  border: 1px solid var(--rt-border); border-radius: 10px; overflow: hidden;
}
.fleet-stat { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; background: var(--rt-bg-alt); }
.fleet-stat .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rt-fg-3); }
.fleet-stat b { font-size: 17px; font-weight: 600; color: var(--rt-fg); }
.fleet-stat b i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--rt-fg-3); }
.fleet-stat b.warn { color: var(--rt-amber); }

/* Job rail | lane rows | capacity rail. */
.fleet-main {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) 214px;
  gap: 12px; align-items: start;
}
.fleet-rail {
  display: flex; flex-direction: column; gap: 9px;
  padding: 11px 12px; border-radius: 10px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
}
.fleet-rail-h { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rt-fg-3); }

.fleet-jobcard { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fleet-jobcard.idle { color: var(--rt-fg-3); font-size: 11px; line-height: 1.5; }
.fleet-jobtitle {
  font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--rt-fg);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.fleet-jobmeta { font-size: 10px; color: var(--rt-accent); }
.fleet-jobmeta.dim { color: var(--rt-fg-3); }
.fleet-jobbar {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--rt-fg-3) 18%, transparent);
}
.fleet-jobbar span { display: block; height: 100%; border-radius: 2px; background: var(--rt-accent); transition: width 400ms ease; }
.fleet-live { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--rt-green); }

/* Capacity rail: the donut is counters.localPct, labeled as the share
   it is — never a hardware forecast. */
.fleet-donut {
  --fleet-local: 0%;
  width: 108px; height: 108px; border-radius: 50%; margin: 2px auto;
  background: conic-gradient(var(--rt-green) var(--fleet-local), color-mix(in srgb, var(--rt-fg-3) 22%, transparent) 0);
  display: grid; place-items: center;
}
.fleet-donut-c {
  width: 80px; height: 80px; border-radius: 50%; background: var(--rt-bg-alt);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fleet-donut-c b { font-size: 20px; font-weight: 600; color: var(--rt-fg); }
.fleet-donut-c span { font-size: 10px; color: var(--rt-fg-3); }
.fleet-cap-legend { display: flex; flex-direction: column; gap: 5px; font-size: 11px; }
.fleet-cap-legend span { display: flex; align-items: center; gap: 7px; color: var(--rt-fg-2); min-width: 0; }
.fleet-cap-legend b { margin-left: auto; font-weight: 500; color: var(--rt-fg); }
.fleet-cap-legend .lg { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.fleet-cap-legend .lg.local { background: var(--rt-green); }
.fleet-cap-legend .lg.cloud { background: var(--rt-fg-3); }
.fleet-cap-legend .lg.run   { background: var(--rt-green); }
.fleet-cap-legend .lg.q     { background: var(--rt-amber); }
.fleet-cap-legend .lg.hold  { background: var(--rt-fg-3); }
.fleet-cap-est { font-size: 10.5px; color: var(--rt-fg-2); border-top: 1px solid var(--rt-border); padding-top: 8px; }

/* One lane, one card-row. The 4px edge carries the lane's own colour;
   the badge is parsed from the resident model's filename. */
.fleet-rows { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fleet-row {
  position: relative;
  display: grid;
  grid-template-columns: 4px 74px minmax(0, 200px) auto minmax(0, 1fr) auto 46px;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  padding: 9px 10px 10px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--rt-fg-3) 5%, transparent);
  box-shadow: var(--rt-ring);
  transition: background 200ms ease, opacity 200ms ease;
}
.fleet-row:hover { background: color-mix(in srgb, var(--rt-fg-3) 10%, transparent); z-index: 4; }
.fleet-row.offline { opacity: 0.55; }
.fleet-row.attn {
  background: color-mix(in srgb, var(--rt-coral) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-coral) 32%, transparent);
}

.fleet-edge { width: 4px; align-self: stretch; border-radius: 2px; min-height: 36px; }
/* Judges keep a squared edge — a judge must never read as a racing shape
   (R4 §3.1), and its colour is already the verifier's by design. */
.fleet-row.judge .fleet-edge { border-radius: 0; }

.fleet-badge {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
  padding: 3px 6px; border-radius: 5px; text-align: center; white-space: nowrap;
}

.fleet-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fleet-name {
  min-width: 0;
  color: var(--rt-fg-1, inherit); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fleet-model {
  color: var(--rt-fg-3); font-size: 10px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fleet-specs { display: flex; flex-direction: column; gap: 2px; font-size: 10px; }
.fleet-spec i {
  font-style: normal; font-size: 9px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-right: 5px;
}
.fleet-spec b { font-weight: 500; color: var(--rt-fg-2); }

.fleet-mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fleet-err {
  font-size: 11px; color: var(--rt-coral);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fleet-endcap { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.fleet-pill {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 5px; white-space: nowrap;
  color: var(--rt-fg-3); box-shadow: inset 0 0 0 1px var(--rt-border);
}
.fleet-pill.ok    { color: var(--rt-fg-2); }
.fleet-pill.run   { color: var(--rt-green); background: color-mix(in srgb, var(--rt-green) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-green) 40%, transparent); }
.fleet-pill.win   { color: var(--rt-green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-green) 55%, transparent); }
.fleet-pill.bad   { color: var(--rt-coral); background: color-mix(in srgb, var(--rt-coral) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-coral) 45%, transparent); }
.fleet-pill.hold  { color: var(--rt-fg-2); font-style: italic; }
.fleet-pill.judge { color: var(--rt-pink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-pink) 40%, transparent); }
.fleet-pill.off   { color: var(--rt-fg-3); }
.fleet-retry {
  font-size: 10px; padding: 3px 10px; border-radius: 5px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--rt-coral) 40%, transparent);
  background: transparent; color: var(--rt-fg);
}
.fleet-retry:hover { background: color-mix(in srgb, var(--rt-coral) 12%, transparent); }

/* The shared track. Night behind, race in front — same hardware, one bar,
   so the trade between them is visible rather than implied. */
.fleet-track {
  position: relative; height: 7px; border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--rt-fg-3) 14%, transparent);
}
.fleet-night {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  opacity: 0.22; transition: width 400ms ease;
}
.fleet-sync {
  position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rt-accent) 55%, transparent), var(--rt-accent));
  transition: width 160ms linear;
}
.fleet-sync.indeterminate {
  width: 38%;
  animation: fleet-indeterminate 1100ms ease-in-out infinite;
}
@keyframes fleet-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* Held is HATCHED, never dimmed-to-broken: the lane is fine, it is being
   kept free for the user's own requests (EVENTS.md v1.3). */
.fleet-held-hatch {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--rt-fg-3) 26%, transparent) 0 3px,
    transparent 3px 7px
  );
}

.fleet-state { font-size: 10px; color: var(--rt-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-state.sync   { color: var(--rt-accent); }
.fleet-state.night  { color: var(--rt-green); }
.fleet-state.held   { color: var(--rt-fg-2); font-style: italic; }
.fleet-state.judge  { color: var(--rt-pink); }
.fleet-state.off    { color: var(--rt-fg-3); }
.fleet-ms { font-size: 10px; color: var(--rt-fg-3); min-width: 34px; text-align: right; }

/* Tok/s over time — a whisper under the track. Idle is a rest line;
   live raises opacity. The number appears only while this lane is
   actually producing tokens, so idle rows stay quiet. */
.fleet-pace {
  display: block; min-height: 14px;
}
.fleet-spark { display: block; width: 100%; height: 14px; opacity: 0.52; }
.fleet-spark polygon { fill-opacity: 0.22; }
.fleet-spark polyline {
  fill: none; stroke-width: 1.15; stroke-linejoin: round; stroke-linecap: round;
  stroke-opacity: 0.95;
}
.fleet-spark.live, .fleet-row:hover .fleet-spark, .fleet-row:focus-within .fleet-spark { opacity: 0.92; }

/* Hover card: the row stays a thin read; the rest of the lane's night
   (landed vs failed, speed, inflight, last landing) waits here. */
.fleet-tip {
  position: absolute;
  top: calc(100% + 7px);
  left: 84px;
  z-index: 8;
  width: min(320px, calc(100% - 28px));
  background: var(--rt-panel, var(--rt-bg-alt));
  color: var(--rt-fg);
  border-radius: 10px;
  padding: 9px 12px 10px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.34), var(--rt-ring);
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  text-align: left;
}
.fleet-row:hover .fleet-tip,
.fleet-row:focus-within .fleet-tip {
  opacity: 1; transform: translateY(0);
}
.fleet-rows .fleet-row:nth-last-child(-n+2) .fleet-tip {
  top: auto; bottom: calc(100% + 7px);
  transform: translateY(5px);
}
.fleet-rows .fleet-row:nth-last-child(-n+2):hover .fleet-tip,
.fleet-rows .fleet-row:nth-last-child(-n+2):focus-within .fleet-tip {
  transform: translateY(0);
}
.fleet-tip-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 2px;
}
.fleet-tip-name {
  font-size: 12px; font-weight: 600; color: var(--rt-fg);
  text-transform: uppercase; letter-spacing: 0.04em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fleet-tip-model {
  font-size: 10px; color: var(--rt-fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 6px;
}
.fleet-tip-why {
  font-size: 11px; color: var(--rt-fg-2); line-height: 1.4;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--rt-border);
}
.fleet-tip-grid { display: flex; flex-direction: column; gap: 4px; }
.fleet-tip-kv {
  display: grid; grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px; align-items: baseline;
}
.fleet-tip-kv .k {
  font-size: 9.5px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.fleet-tip-kv .v {
  font-size: 11px; color: var(--rt-fg);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fleet-row.win .fleet-sync {
  background: linear-gradient(90deg, color-mix(in srgb, var(--rt-green) 55%, transparent), var(--rt-green));
}
.fleet-row.win .fleet-name { color: var(--rt-green); font-weight: 600; }
.fleet-row.win .fleet-state { color: var(--rt-green); }
.fleet-row.reclaim .fleet-sync { background: linear-gradient(90deg, color-mix(in srgb, var(--rt-pink) 40%, transparent), var(--rt-pink)); opacity: 0.75; }
.fleet-row.reclaim .fleet-state { color: var(--rt-pink); }
.fleet-row.lost .fleet-sync { background: var(--rt-fg-3); opacity: 0.45; }
.fleet-row.failed .fleet-sync { background: var(--rt-pink); opacity: 0.55; }
/* Hedged: held back ~1.5x local p50 TTFT to give a cheaper lane first
   refusal. Not running, not slow — waiting on purpose. */
.fleet-row.hedged .fleet-sync { background: repeating-linear-gradient(-45deg, var(--rt-fg-3) 0 2px, transparent 2px 5px); opacity: 0.6; }
.fleet-row.hedged .fleet-state { color: var(--rt-fg-3); font-style: italic; }

/* The now-line: the one sentence for "what is this machine doing". */
.fleet-now {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--rt-fg-2);
}
.fleet-now.compact { font-size: 10px; }
.fleet-now-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rt-fg-3); flex: none;
}
.fleet-now-dot.live { background: var(--rt-green); animation: fleet-pulse 1600ms ease-in-out infinite; }
@keyframes fleet-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.fleet-now-text { min-width: 0; }

.fleet-posture {
  font-size: 10px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--rt-border);
}
.fleet-posture.swarm { color: var(--rt-green); border-color: color-mix(in srgb, var(--rt-green) 40%, transparent); }
.fleet-posture.depth { color: var(--rt-fg-2); }

/* Partial coverage and dropped frames are stated, never hidden — a subset
   presented as the whole is the failure the activity feed exists to end. */
.fleet-coverage {
  font-size: 10px; color: var(--rt-fg-3);
  border-bottom: 1px dotted var(--rt-fg-3); cursor: help;
}

.fleet-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--rt-border);
}
.fleet-egress { font-size: 10px; }
.fleet-egress.home { color: var(--rt-green); }
.fleet-egress.out  { color: var(--rt-pink); }

/* Narrow hosts (the simple shell's column, a split editor pane): the
   rails stack above and below the rows rather than squeezing them. */
@media (max-width: 1080px) {
  .fleet-main { grid-template-columns: minmax(0, 1fr); }
  .fleet-rail { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .fleet-rail .fleet-rail-h { flex-basis: 100%; }
  .fleet-donut { margin: 2px 0; }
  .fleet-cap-legend { flex: 1 1 140px; }
  .fleet-cap-est { border-top: none; padding-top: 0; }
  .fleet-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* keep the shared track — it is the board's point; shed the badge and
     the spec column instead */
  .fleet-row { grid-template-columns: 4px minmax(0, 160px) minmax(0, 1fr) auto 40px; }
  .fleet-badge, .fleet-specs { display: none; }
  .fleet-tip { left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .fleet-sync.indeterminate { animation: none; width: 100%; opacity: 0.5; }
  .fleet-now-dot.live { animation: none; }
  .fleet-tip { transition: none; transform: none; }
}

/* =====================================================================
   Tonight — the Simple shell's hero (js/simple.jsx TonightHero).
   The overnight job is the thing this machine does that nothing else
   does; it was not on this screen at all before.
   ===================================================================== */
.simple-tonight {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  margin: 0 0 14px;
  border: 1px solid var(--rt-border);
  border-radius: 12px;
  background: var(--rt-bg-1, transparent);
}
.simple-tonight.idle { grid-template-columns: minmax(0, 1fr); }

.simple-tonight-still {
  min-width: 0; border-radius: 8px; overflow: hidden;
  background: var(--ns-night, #0B0E1A);
}
.simple-tonight-still svg { display: block; width: 100%; height: auto; }

.simple-tonight-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.simple-tonight-eyebrow { font-size: 10px; letter-spacing: 0.12em; color: var(--rt-fg-3); }
.simple-tonight-paused { color: var(--rt-pink); }
.simple-tonight-headline {
  margin: 0; font-size: 19px; line-height: 1.3; font-weight: 600;
  text-wrap: balance;
}
.simple-tonight-stats { font-size: 11px; color: var(--rt-fg-2); }
.simple-tonight-egress { font-size: 11px; }
.simple-tonight-egress.home { color: var(--rt-green); }
.simple-tonight-egress.out { color: var(--rt-pink); }

.simple-tonight-bar {
  height: 6px; border-radius: 3px; margin: 4px 0 2px;
  background: color-mix(in srgb, var(--rt-fg-3) 18%, transparent);
  overflow: hidden;
}
.simple-tonight-bar > span {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rt-green) 50%, transparent), var(--rt-green));
  transition: width 500ms ease;
}

@media (max-width: 720px) {
  .simple-tonight { grid-template-columns: minmax(0, 1fr); }
}

/* The now-line reads wider in the simple shell than inside the board. */
.simple-shell .fleet-now:not(.compact) {
  padding: 8px 12px; margin: 0 0 12px;
  border: 1px solid var(--rt-border); border-radius: 8px;
}

/* Narrowed-for-you reads as a fact about priority, not a fault. */
.fleet-posture.held { color: var(--rt-fg-2); border-color: color-mix(in srgb, var(--rt-fg-3) 45%, transparent); font-style: italic; }
/* "Unaccounted for" is neither a clean local run nor a proven egress. */
.fleet-egress.unknown { color: var(--rt-fg-3); }

/* =====================================================================
   NIGHTSHIFT QUEUE FLOW — the guided composer (js/nightshift.jsx).
   Five questions, outcome cards, per-step "exact controls". The Scout
   input is a canvas particle field behind the task textarea: color is
   the detected Scout intent (RT.detectIntent, labeled by the HUD badge
   so the read is inspectable), motion is keystroke energy, orbit is a
   submission in flight. Reduced motion renders one static frame — the
   kernel never starts a rAF loop. Everything binds to the semantic
   tokens so both themes hold.
   ===================================================================== */
.ns-flow { display: flex; flex-direction: column; }
.ns-flow-step {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 0; border-top: 1px solid var(--rt-border);
}
.ns-flow-step:first-child { border-top: none; padding-top: 2px; }
.ns-flow-head { display: flex; align-items: baseline; gap: 10px; }
.ns-flow-num {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em;
  color: var(--rt-fg-3); border: 1px solid var(--rt-border);
  border-radius: 999px; padding: 2px 7px; flex: none;
}
.ns-flow-q { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ns-q {
  font-family: var(--font-display, var(--font));
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--rt-fg);
}
.ns-q-display { font-size: 21px; line-height: 1.3; }
.ns-q-hint { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.04em; color: var(--rt-fg-3); }
.ns-flow-body { display: flex; flex-direction: column; gap: 10px; }

.ns-adv-toggle {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rt-fg-3); background: transparent;
  border: 1px solid transparent; border-radius: 3px;
  padding: 3px 7px; cursor: pointer; flex: none;
  transition: color 150ms ease, border-color 150ms ease;
}
.ns-adv-toggle:hover { color: var(--rt-fg); border-color: var(--rt-border); }
.ns-adv-toggle.on { color: var(--rt-amber); border-color: var(--rt-border); }
.ns-adv {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--rt-bg-sunk); border: 1px dashed var(--rt-border);
  border-radius: 4px; padding: 12px;
}
.ns-adv-cap {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--rt-fg-3);
}

.ns-choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* R13 §11.1: with a fourth judge card the grid wraps to 2x2 rather than
   shrinking to four-across. The sub-copy is the part that teaches what
   each judge actually asks, and it cannot lose two lines to a narrower
   column. Below tablet width it stacks, like every other grid here. */
.ns-choice-grid-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .ns-choice-grid-quad { grid-template-columns: 1fr; } }
/* The rubric textarea is code as much as prose — the grammar is
   column-sensitive ([contains] `<title>`), so it reads in mono. */
.ns-textarea.ns-mono { font-family: var(--mono); font-size: 11px; line-height: 1.5; }
.ns-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  background: var(--rt-bg-sunk); border: 1px solid var(--rt-border); border-radius: 5px;
  padding: 12px 12px 10px; cursor: pointer; color: var(--rt-fg-3);
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, color 150ms ease;
}
.ns-choice:hover { color: var(--rt-fg); border-color: var(--rt-border-strong); transform: translateY(-1px); }
.ns-choice.on {
  background: color-mix(in srgb, var(--rt-accent) 12%, transparent);
  border-color: var(--rt-accent); color: var(--rt-fg);
}
.ns-choice-icon { font-size: 14px; line-height: 1; }
.ns-choice-t {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ns-choice-s { font-size: 10px; line-height: 1.45; color: var(--rt-fg-3); }
.ns-choice.on .ns-choice-s { color: var(--rt-fg-2); }

.ns-depth-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ns-depth-chip {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rt-border); background: var(--rt-bg-sunk); color: var(--rt-fg-3);
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.ns-depth-chip:hover { color: var(--rt-fg); }
.ns-depth-chip.on {
  border-color: var(--rt-accent); color: var(--rt-fg); font-weight: 700;
  background: color-mix(in srgb, var(--rt-accent) 14%, transparent);
}

.ns-scout-wrap {
  position: relative; overflow: hidden; border-radius: 5px;
  background: var(--rt-bg-sunk); border: 1px solid var(--rt-border);
  transition: border-color 150ms ease;
}
.ns-scout-wrap:focus-within { border-color: var(--rt-fg-3); }
.ns-scout-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; /* clicks fall through to the textarea */
  z-index: 0; opacity: 0.55;
}
.ns-scout-input {
  position: relative; z-index: 1;
  background: transparent !important; border: none !important;
  min-height: 116px; font-size: 12.5px;
}
.ns-scout-input:focus { outline: none; }
.ns-scout-hud {
  position: absolute; right: 10px; bottom: 8px; z-index: 2;
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px; padding: 3px 9px;
  background: color-mix(in srgb, var(--rt-bg) 78%, transparent);
  pointer-events: none;
}
.ns-scout-tools {
  position: absolute; left: 10px; bottom: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--rt-bg) 78%, transparent);
  border: 1px solid var(--rt-border);
}
.ns-scout-tools .is-rec { color: var(--rt-coral, #e07070); animation: ns-mic-pulse 1.1s ease-in-out infinite; }
.ns-scout-tools .is-busy { color: var(--rt-accent); }
.ns-q-hint .is-rec { color: var(--rt-coral, #e07070); animation: ns-mic-pulse 1.1s ease-in-out infinite; }
@keyframes ns-mic-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.ns-scout-wrap.has-tools .ns-scout-input { padding-bottom: 36px; padding-left: 12px; }

.ns-enhance-strip {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 6px; padding: 5px 8px;
  border: 1px dashed var(--rt-border); border-radius: 6px;
  background: var(--rt-bg-sunk);
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-2);
}
.ns-enhance-strip.is-err { color: var(--rt-amber); border-color: var(--rt-amber); }
.ns-enhance-note { color: inherit; }
.ns-enhance-step {
  border: 1px solid var(--rt-border); border-radius: 999px; padding: 2px 8px;
  color: var(--rt-fg-3); letter-spacing: 0.02em;
}
.ns-enhance-step.ok { color: var(--rt-fg); border-color: var(--rt-fg-3); }
.ns-enhance-step.busy { color: var(--rt-accent); border-color: var(--rt-accent); }
.ns-enhance-step.miss { color: var(--rt-fg-3); }

.ns-plan-sentence {
  font-family: var(--font-display, var(--font));
  font-size: 13.5px; line-height: 1.5; color: var(--rt-fg);
}

/* Question 01 stands alone in the composer card now — the field takes
   the height the other questions used to hold. */
.ns-scout-wrap.tall .ns-scout-input { min-height: 280px; }

/* …and then the rest of it. The right rail (four questions + the plan)
   is the taller column, so 01's card stretches to match it and the
   Scout field eats the difference — otherwise the composer ends short
   and a band of empty page sits between it and the jobs board. The
   chain has to be unbroken: card → flow → step → body → field. */
.ns-card-intent { min-height: 0; }
.ns-card-intent .ns-flow,
.ns-card-intent .ns-flow > .ns-flow-step,
.ns-card-intent .ns-flow > .ns-flow-step > .ns-scout-wrap { flex: 1 1 auto; min-height: 0; }
.ns-card-intent .ns-scout-wrap.tall { display: flex; flex-direction: column; }
.ns-card-intent .ns-scout-wrap.tall .ns-scout-input { flex: 1 1 auto; min-height: 280px; }

/* Questions 02–05 paginate in the right rail. Pages hide with [hidden]
   (never unmounted — canon_ref/style_ref keep their values off-screen);
   the guard rule keeps .ns-flow-step's display from resurrecting them. */
.ns-qpage[hidden] { display: none; }
/* `.ns-card` sets display:flex, and an AUTHOR declaration outranks the
   user agent's `[hidden] { display: none }` whatever its specificity —
   so a hidden card stayed on screen. This is the same one-line fix the
   pager above needed, for the same reason: in Auto the right rail is
   Tonight's plan and the Auto card, and "Shape the night" is hidden. */
.ns-card[hidden] { display: none; }
.ns-qpage .ns-flow-step { border-top: none; padding: 2px 0 0; }
.ns-qpager { display: inline-flex; align-items: center; gap: 3px; }
.ns-qpager-btn, .ns-qpager-num {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--rt-fg-3);
  background: transparent; border: 1px solid transparent; border-radius: 3px;
  padding: 3px 6px; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.ns-qpager-btn:hover:not(:disabled), .ns-qpager-num:hover { color: var(--rt-fg); border-color: var(--rt-border); }
.ns-qpager-btn:disabled { opacity: 0.35; cursor: default; }
.ns-qpager-num.on { color: var(--rt-amber); border-color: var(--rt-border); }
/* answered — the pager doubles as the progress read on the five */
.ns-qpager-num.done:not(.on) { color: var(--rt-green); }

/* Back / Next inside a question page. The numbers above jump around;
   these walk the flow in order, and Next is what records that a
   question was actually looked at. */
.ns-step-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rt-border);
}
.ns-nav-spacer { flex: none; }
.ns-nav-btn {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rt-fg-3); background: var(--rt-bg-sunk);
  border: 1px solid var(--rt-border); border-radius: 3px;
  padding: 8px 14px; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.ns-nav-btn:hover { color: var(--rt-fg); border-color: var(--rt-border-strong); }
.ns-nav-btn.on { color: var(--rt-fg-2); border-color: var(--rt-border-strong); }
.ns-nav-btn.on:hover {
  color: var(--rt-fg); border-color: var(--rt-accent);
  background: color-mix(in srgb, var(--rt-accent) 16%, transparent);
}

/* The unanswered question, marked. Set when the soft-locked primary
   button is clicked early, or when Next is refused; clears itself. */
@keyframes ns-need-pulse {
  0%, 100% { outline-color: color-mix(in srgb, var(--rt-amber) 22%, transparent); }
  50%      { outline-color: color-mix(in srgb, var(--rt-amber) 85%, transparent); }
}
.ns-need {
  outline: 1px solid color-mix(in srgb, var(--rt-amber) 60%, transparent);
  outline-offset: 8px; border-radius: 4px;
  animation: ns-need-pulse 780ms ease-in-out 3;
}

/* The primary button before all five are answered. Dimmed, counted, and
   still clickable ON PURPOSE — the early click is what turns the pager
   to what's missing, and a dead control cannot say why it's dead. */
.ns-btn-primary.is-locked { opacity: 0.5; }
.ns-btn-primary.is-locked:hover { opacity: 0.64; }
/* …and after 05's Next: armed, pointing at itself. */
@keyframes ns-begin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rt-green) 0%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rt-green) 32%, transparent); }
}
.ns-btn-primary.ns-armed { animation: ns-begin-pulse 900ms ease-in-out 3; }

@media (prefers-reduced-motion: reduce) {
  .ns-need, .ns-btn-primary.ns-armed { animation: none; }
}

/* Durable guarantees — a hover/focus popover on the primary button
   instead of a card of their own. */
.ns-guarantee-wrap { position: relative; display: inline-flex; }
.ns-guarantee-pop {
  position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 30;
  width: 300px; display: flex; flex-direction: column; gap: 8px;
  background: var(--rt-panel); border: 1px solid var(--rt-border);
  border-radius: 6px; padding: 12px 14px; box-shadow: var(--rt-shadow);
  font-size: 11px; line-height: 1.45; color: var(--rt-fg-2); text-align: left;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}
.ns-guarantee-wrap:hover .ns-guarantee-pop,
.ns-guarantee-wrap:focus-within .ns-guarantee-pop { opacity: 1; transform: none; }
.ns-guarantee-cap {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--rt-fg-3);
}
/* The same popover, while questions are still open: one row per
   question, answered rows carrying what they read as. */
.ns-ready-row { display: flex; align-items: baseline; gap: 8px; color: var(--rt-fg-3); }
.ns-ready-row.ok { color: var(--rt-fg-2); }
.ns-ready-mark { font-family: var(--mono); font-size: 10px; flex: none; width: 10px; color: var(--rt-amber); }
.ns-ready-row.ok .ns-ready-mark { color: var(--rt-green); }
.ns-ready-num {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em;
  color: var(--rt-fg-3); flex: none;
}

/* ── Omnisearch (R11) ──────────────────────────────────────────────
   The search bar that finds work the machine already did. It mounts in
   the surface that HOLDS that work — the Night subnav, one query across
   Live field · Library · Morning — not in the chrome, where it was
   identical on tabs with nothing to search. The
   canvas behind the input is the Queue composer's particle kernel —
   the same living-input signature, not a second implementation.       */
.ns-omni-wrap {
  position: relative; display: inline-flex; align-items: center;
  width: 200px; height: 30px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring); border-radius: 8px;
  /* NOT overflow:hidden — .ns-omni-drop is an absolutely positioned
     CHILD, and clipping it here hid every result the bar ever found.
     The canvas rounds its own corners instead. */
  transition: width var(--dur, 200ms) var(--ease, cubic-bezier(.16,1,.3,1));
}
.ns-omni-wrap:focus-within { width: 360px; box-shadow: var(--rt-ring-strong); }
/* The particle field lives INSIDE the pill and nowhere else.
   clip-path alone was doing this job and doing it unreliably — a
   transformed or composited ancestor drops it in some engines, and the
   particles then read as loose dots on the page around the bar. A real
   clipping layer (overflow:hidden on its own positioned box) cannot be
   dropped, and the edge mask fades the field out before it reaches the
   pill's rim so nothing ever appears to escape.

   It is its own element rather than overflow on .ns-omni-wrap because
   the dropdown is a sibling and clipping the wrap hid every result. */
.ns-omni-field {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  border-radius: 8px;
  contain: paint;
}
.ns-omni-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  border-radius: 8px; clip-path: inset(0 round 8px);
  -webkit-mask-image: radial-gradient(120% 150% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 150% at 50% 50%, #000 55%, transparent 100%);
}

/* Mounted in a page surface rather than the chrome: wider at rest
   (the subnav has room), and the dropdown hangs from the left edge
   because there is no window edge on the right to align to. */
.ns-omni-inline { width: 260px; }
.ns-omni-inline:focus-within { width: 420px; }
.ns-omni-inline .ns-omni-drop { right: auto; left: 0; }
.ns-omni-input {
  position: relative; z-index: 1; flex: 1; min-width: 0;
  height: 100%; padding: 0 10px;
  background: transparent !important; border: none !important; outline: none;
  font-family: var(--mono); font-size: 11px; color: var(--rt-fg);
}
.ns-omni-input::placeholder { color: var(--rt-fg-3); }
.ns-omni-hud {
  position: relative; z-index: 2; padding-right: 10px;
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3);
  white-space: nowrap; pointer-events: none;
}
.ns-omni-drop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 360px; max-width: 520px; max-height: 60vh; overflow-y: auto;
  padding: 8px;
  background: var(--rt-panel); box-shadow: var(--rt-ring-strong), var(--rt-shadow);
  border-radius: 10px;
}
.ns-omni-group {
  padding: 6px 10px;
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3);
  text-transform: uppercase; letter-spacing: .06em;
}
.ns-omni-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  font-family: var(--font); font-size: 12.5px; color: var(--rt-fg);
  cursor: pointer;
}
.ns-omni-row:hover, .ns-omni-row.focused { background: var(--rt-bg-alt); }
.ns-omni-ic {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; color: var(--rt-fg-2);
}
.ns-omni-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-omni-hint { font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3); white-space: nowrap; }
.ns-omni-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: var(--rt-bg); box-shadow: var(--rt-ring);
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-2);
}
.ns-omni-empty {
  padding: 14px 12px;
  font-family: var(--font); font-size: 12px; color: var(--rt-fg-3);
}
/* Narrow windows: collapse to the icon width and expand on focus,
   which is cheaper than hiding the bar entirely. */
@media (max-width: 1100px) {
  .ns-omni-wrap { width: 34px; }
  .ns-omni-wrap:focus-within { width: 300px; }
  .ns-omni-inline { width: 160px; }
  .ns-omni-inline:focus-within { width: 300px; }
  .ns-omni-hud { display: none; }
}

/* The insight card (R11 §8.3) — the world model's fold, opened from the
   dropdown and read in place. Sits inside .ns-omni-drop, below the rows
   that raised it. */
.ns-omni-card {
  margin: 6px 4px 2px;
  padding: 10px 12px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
  border-radius: 8px;
}
.ns-omni-card-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; color: var(--rt-fg);
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid var(--rt-border);
}
.ns-omni-card-head > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-omni-card-x {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  color: var(--rt-fg-3); font-size: 14px; line-height: 1;
}
.ns-omni-card-x:hover { color: var(--rt-fg); }
.ns-omni-card-row {
  padding: 4px 0;
  font-family: var(--font); font-size: 12px; color: var(--rt-fg-2);
  line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ns-omni-card-link { cursor: pointer; border-radius: 5px; padding: 4px 6px; margin: 0 -6px; }
.ns-omni-card-link:hover { background: var(--rt-bg); }
.ns-omni-card-empty {
  padding: 4px 0;
  font-family: var(--mono); font-size: 10.5px; color: var(--rt-fg-3);
}

/* Question-01 attachments — the chat surface's reader (RT.attach), the
   queue's chips. Documents inline as prompt text for every lane; images
   ride the job and fold into attempts on vision-capable lanes only. */
.ns-attach-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 240px;
  padding: 3px 6px 3px 8px;
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-2);
  background: var(--rt-bg-alt); border: 1px solid var(--rt-border);
  border-radius: 6px;
}
.ns-attach-chip.is-err { color: var(--rt-red, #d66); border-color: var(--rt-red, #d66); }
.ns-attach-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-attach-x {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  color: var(--rt-fg-3); font-size: 11px; line-height: 1;
}
.ns-attach-x:hover { color: var(--rt-fg); }

/* Queue SUA strip (NS-QFS-PRD-001) — the composer's read of this box's
   fleet atlas, one scribe-style line under the Scout input, plus the
   confirmation chips that are the only new questions. Reuses the
   .ns-depth-chip geometry; ids in var(--mono). */
/* ── NS-AUTO-BUILD-001: the Auto plan card ─────────────────────────────
   Nothing here animates; the card reads the same under reduced motion.
   Tokens are buttons because each one opens its manual question. */
.ns-auto-card { gap: 10px; }
.ns-auto-cap { font-size: 9px; color: var(--rt-fg-3); letter-spacing: 0.08em; text-transform: uppercase; }
.ns-auto-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; line-height: 1.6; color: var(--rt-fg); }
.ns-auto-sep { color: var(--rt-fg-3); }
.ns-auto-token { font: inherit; color: var(--rt-fg); background: transparent; border: 0; border-bottom: 1px dotted var(--rt-fg-3); padding: 0 1px; cursor: pointer; border-radius: 0; }
.ns-auto-token:hover { border-bottom-style: solid; color: var(--rt-accent); }
.ns-auto-token.on { border-bottom: 1px solid var(--rt-accent); color: var(--rt-accent); }
.ns-auto-token.is-override { color: var(--rt-amber); border-bottom-color: var(--rt-amber); }
.ns-auto-token.is-fixed { border-bottom: 0; cursor: default; color: var(--rt-fg-2, var(--rt-fg)); }
.ns-auto-token.is-capability { color: var(--rt-fg-3); }
.ns-auto-why summary { font-size: 9px; color: var(--rt-fg-3); cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase; }
.ns-auto-why-list { margin: 6px 0 0 18px; padding: 0; font-size: 11px; color: var(--rt-fg-2, var(--rt-fg)); line-height: 1.5; }
.ns-auto-warnings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ns-auto-warn { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; padding: 6px 8px; border: 1px solid var(--rt-border); border-left: 3px solid var(--rt-amber, #F2A65A); border-radius: 3px; background: var(--rt-bg-sunk); font-size: 11px; line-height: 1.45; }
.ns-auto-warn.is-refusal { border-left-color: var(--rt-red, #d9534f); }
.ns-auto-warn-code { font-size: 9px; color: var(--rt-fg-3); white-space: nowrap; }
.ns-auto-absent, .ns-auto-empty { font-size: 11px; color: var(--rt-fg-3); padding: 8px; border: 1px dashed var(--rt-border); border-radius: 3px; }
.ns-auto-focus-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 9px; color: var(--rt-fg-3); }
/* §7 — the receipt for a repair Auto made on its own, and the question
   it could not. Both are static, inline and identical under reduced
   motion, like every other row on this card: a repair is not a toast
   that scrolls away, and a question is not a red sentence. */
.ns-auto-repairs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ns-auto-repair { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; padding: 5px 8px; border: 1px solid var(--rt-border); border-left: 3px solid var(--rt-green, #63b37b); border-radius: 3px; background: var(--rt-bg-sunk); font-size: 11px; line-height: 1.45; }
.ns-auto-repair-mark { font-size: 10px; color: var(--rt-green, #63b37b); }
.ns-auto-repair-field { font-size: 9px; color: var(--rt-fg-3); }
.ns-auto-ask { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--rt-amber, #F2A65A); border-radius: 3px; background: color-mix(in srgb, var(--rt-amber, #F2A65A) 8%, transparent); }
.ns-auto-ask-head { display: flex; flex-direction: column; gap: 4px; }
.ns-auto-ask-code { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rt-fg-3); }
.ns-auto-ask-q { font-size: 12px; line-height: 1.5; color: var(--rt-fg); }
.ns-auto-ask-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ns-auto-ask-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 10px; line-height: 1.45; color: var(--rt-fg-3); }
.ns-auto-ask-why .ns-mono { font-size: 9px; color: var(--rt-fg-2, var(--rt-fg-3)); }
.ns-auto-swap { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--rt-amber, #F2A65A); border-radius: 3px; background: color-mix(in srgb, var(--rt-amber, #F2A65A) 8%, transparent); }
.ns-auto-swap-head { font-size: 12px; color: var(--rt-fg); }
.ns-auto-swap-why { font-size: 11px; color: var(--rt-fg-2, var(--rt-fg)); }
.ns-auto-swap-cost { font-size: 10px; color: var(--rt-fg-3); }
.ns-auto-swap-actions { display: flex; gap: 8px; margin-top: 4px; }
/* the two-state auto/manual control, left of the Plan the night title */
.ns-auto-seg { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 150px; margin-right: 10px; }
.ns-auto-seg .ns-seg-btn { padding: 5px 8px; }
.ns-card-header .ns-auto-head { display: inline-flex; align-items: center; gap: 0; min-width: 0; }

.ns-sua-strip {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 6px; padding: 6px 8px;
  border: 1px solid var(--rt-border); border-radius: 6px;
  background: var(--rt-bg-sunk);
}
.ns-sua-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0;
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-2); letter-spacing: 0.02em;
}
.ns-sua-line .ns-sua-id { color: var(--rt-fg-3); }
.ns-sua-line .ns-sua-fleet { color: var(--rt-fg); font-weight: 700; }
.ns-sua-line.is-empty { color: var(--rt-fg-3); }
.ns-sua-line.is-err { color: var(--rt-amber); }
.ns-sua-acts { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; position: relative; }
.ns-sua-btn {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--rt-border); background: transparent; color: var(--rt-fg-3);
  border-radius: 999px; padding: 3px 9px; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.ns-sua-btn:hover { color: var(--rt-fg); border-color: var(--rt-fg-3); }
.ns-sua-btn.on { border-color: var(--rt-accent); color: var(--rt-fg); background: color-mix(in srgb, var(--rt-accent) 14%, transparent); }
.ns-sua-alts {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 260px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--rt-bg-alt, #16161c); border: 1px solid var(--rt-border); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.ns-sua-alt {
  text-align: left; background: none; border: none; cursor: pointer; padding: 5px 8px; border-radius: 5px;
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-2);
}
.ns-sua-alt:hover { background: color-mix(in srgb, var(--rt-accent) 12%, transparent); color: var(--rt-fg); }
.ns-sua-confirm {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg);
}
.ns-sua-confirm.is-required { color: var(--rt-amber); }
.ns-sua-confirm.is-optional { color: var(--rt-fg-3); }
.ns-sua-confirm .ns-sua-q { flex: 1 1 auto; min-width: 0; }
.ns-sua-chip {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rt-border); background: var(--rt-bg-sunk); color: var(--rt-fg-3);
  border-radius: 999px; padding: 4px 10px; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.ns-sua-chip:hover { color: var(--rt-fg); border-color: var(--rt-fg-3); }
.ns-sua-chip.on { border-color: var(--rt-accent); color: var(--rt-fg); font-weight: 700; background: color-mix(in srgb, var(--rt-accent) 14%, transparent); }
.ns-flow-step.ns-need .ns-sua-strip { border-color: var(--rt-amber); }

/* Queue @-mentions — attach a skill or method without leaving the prompt. */
.ns-mention-wrap { position: relative; }
.ns-mention-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  display: flex; flex-direction: column; gap: 2px;
  max-height: 240px; overflow: auto;
  padding: 6px;
  background: var(--rt-bg-alt, #16161c);
  border: 1px solid var(--rt-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.ns-mention-item {
  display: flex; align-items: flex-start; gap: 8px;
  width: 100%; text-align: left;
  padding: 6px 8px;
  background: transparent; border: none; border-radius: 6px;
  cursor: pointer; color: var(--rt-fg);
}
.ns-mention-item:hover, .ns-mention-item.on { background: var(--rt-bg); }
.ns-mention-glyph { width: 16px; color: #8EB4E8; font-size: 12px; line-height: 1.4; }
.ns-mention-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ns-mention-name { font-size: 12px; color: var(--rt-fg); }
.ns-mention-meta {
  font-family: var(--mono, monospace); font-size: 10px; color: var(--rt-fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px;
}
.ns-mention-empty { padding: 8px; font-size: 11px; color: var(--rt-fg-3); }
.ns-mention-strip { margin-top: 8px; }
.ns-mention-chip.is-method { color: #7CC98F; }
.ns-mention-chip.is-skill { color: #8EB4E8; }
.ns-mention-chip.is-convert { color: #E3B76A; }
.ns-mention-chip.is-fleet { color: #5FBFA8; }
.ns-mention-item.is-convert .ns-mention-glyph { color: #E3B76A; }
.ns-mention-item.is-method .ns-mention-glyph { color: #7CC98F; }
.ns-mention-item.is-fleet .ns-mention-glyph { color: #5FBFA8; }
.ns-skill-body {
  font-size: 10.5px; max-height: 360px; overflow: auto;
  margin: 0; white-space: pre-wrap; word-break: break-word;
  color: var(--rt-fg-2);
}

/* NS-JOB-IMPORT — picker next to Q01 📎 / Q02 corpus chip. Same glass
   as .ns-mention-menu so it reads as one instrument. */
.ns-import-anchor { position: relative; display: inline-flex; align-items: center; }
.ns-import-picker {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 42;
  display: flex; flex-direction: column; gap: 6px;
  width: min(520px, 78vw); max-height: 420px;
  padding: 8px;
  background: var(--rt-bg-alt, #16161c);
  border: 1px solid var(--rt-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.ns-import-picker-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--rt-fg); padding: 2px 4px;
}
.ns-import-picker-filters {
  display: flex; gap: 6px; align-items: center;
}
.ns-import-picker-filters .ns-input { flex: 1; min-width: 0; }
.ns-import-picker-filters .ns-select { width: auto; }
.ns-import-picker-list {
  display: flex; flex-direction: column; gap: 2px;
  overflow: auto; min-height: 80px; max-height: 300px;
}
.ns-import-picker-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left;
  padding: 7px 8px;
  background: transparent; border: none; border-radius: 6px;
  cursor: pointer; color: var(--rt-fg);
}
.ns-import-picker-row:hover, .ns-import-picker-row.on { background: var(--rt-bg); }
.ns-import-picker-row.is-disabled {
  cursor: not-allowed; opacity: 0.55;
}
.ns-import-picker-title {
  font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.ns-import-picker-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ns-import-picker-reason {
  font-size: 10.5px; color: var(--rt-fg-3);
}
.ns-import-picker-foot {
  font-family: var(--mono, monospace); font-size: 10px; color: var(--rt-fg-3);
  padding: 2px 4px;
}

/* NS-WCH-PRD-001 §3.4 — the pager's third state: STALE. Answered, then
   the trigger changed underneath it; visually distinct from both done
   (it needs re-confirming) and unanswered (it was once right). */
.ns-qpager-num.stale { color: var(--rt-amber); border-color: var(--rt-amber); }

/* ---------------------------------------------------------------------
   LANES WORKBENCH (engine.jsx) — the memory ledger and the lane board,
   side by side: a quarter for the budget, three quarters for the lanes
   that spend it.

   The two used to be stacked collapsible sections, which meant the one
   number that decides whether a lane may start ("how much is left") was
   scrolled off screen exactly when an operator was pressing Start, Swap
   or Add lane. Here the ledger is a STICKY rail: it stays in view for
   the whole length of the lane list, so every lane action is taken with
   its cost visible.

   `position: sticky` is why this pair is NOT wrapped in a Section —
   .rt-section sets `overflow: hidden`, which makes itself the sticky
   element's scrollport and pins the rail to a box that never scrolls.
   The scrollport has to be .main > .scroll, so the split sits directly
   in the page and each half carries its own card chrome instead.
--------------------------------------------------------------------- */
.lmx-split {
  display: grid;
  /* 1fr / 3fr — the quarter-and-three-quarters split, with a floor so
     the ledger's big figure never wraps mid-number on a narrow window. */
  grid-template-columns: minmax(264px, 1fr) minmax(0, 3fr);
  gap: 16px;
  align-items: start;
  margin: 0 0 16px 0;
}
/* Folded: the rail keeps only its gauge, and the board takes the width.
   Not "hidden" — the pressure read stays on screen, which is the part
   worth a permanent 56px. */
.lmx-split.is-folded { grid-template-columns: 56px minmax(0, 1fr); }
@media (max-width: 1180px) {
  .lmx-split, .lmx-split.is-folded { grid-template-columns: minmax(0, 1fr); }
  .lmx-rail { position: static; max-height: none; }
}
.lmx-rail {
  position: sticky;
  top: 8px;
  min-width: 0;
  /* A ledger taller than the viewport must scroll inside itself rather
     than push its own footer past the fold and never come back. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lmx-rail::-webkit-scrollbar { width: 6px; }
.lmx-rail::-webkit-scrollbar-thumb { background: var(--rt-border); border-radius: 3px; }
.lmx-rail::-webkit-scrollbar-track { background: transparent; }
.lmx-main { min-width: 0; }
.lmx-card {
  background: var(--rt-panel);
  border-radius: 14px;
  box-shadow: var(--rt-ring);
}
/* Scout's "Show the memory ledger" / "Show daemon lanes" used to open a
   Section. With no Section to open, the landing has to say where it
   landed — one pulse of the accent ring, then back to normal. */
.lmx-flash { animation: lmx-flash 1.8s ease; }
@keyframes lmx-flash {
  0%, 100% { box-shadow: var(--rt-ring); }
  12%, 55% { box-shadow: 0 0 0 2px var(--rt-accent); }
}
@media (prefers-reduced-motion: reduce) { .lmx-flash { animation: none; } }

/* ---------- The memory ledger rail ---------- */
.mlg { padding: 18px; }
.mlg-h { display: flex; align-items: flex-start; gap: 8px; }
.mlg-h-t { flex: 1; min-width: 0; }
.mlg-title {
  margin: 0; font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rt-fg);
}
.mlg-sub { margin: 5px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--rt-fg-3); }
.mlg-src {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em;
  color: var(--rt-fg-3); background: var(--rt-bg-alt);
  border-radius: 5px; padding: 3px 6px; white-space: nowrap;
  box-shadow: var(--rt-ring); flex: 0 0 auto;
}
.mlg-fold {
  flex: 0 0 auto; width: 24px; height: 24px; padding: 0;
  border: none; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--rt-fg-3);
  font-family: var(--mono); font-size: 12px; line-height: 1;
}
.mlg-fold:hover { background: var(--rt-bg-alt); color: var(--rt-fg); }

/* The headline. One number, the size of a number that matters, with the
   arithmetic that produced it directly underneath. */
.mlg-figure { margin-top: 16px; }
.mlg-big {
  font-family: var(--mono); font-size: 34px; font-weight: 600; line-height: 1;
  letter-spacing: -0.02em; color: var(--rt-fg); font-variant-numeric: tabular-nums;
}
.mlg-big-u { font-family: var(--mono); font-size: 13px; color: var(--rt-fg-2); margin-left: 6px; }
.mlg-big-lbl { display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.4; color: var(--rt-fg-3); }
.mlg-pct { margin-top: 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.mlg-pct .mlg-pct-rest { font-weight: 400; color: var(--rt-fg-3); }

/* The board, drawn to scale: every megabyte of unified memory is in this
   bar exactly once. Lanes resident is subdivided by lane, each block in
   the hue that lane wears on Night, so "who is holding the memory" is
   answered without reading a single row. */
.mlg-plot { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; margin-top: 16px; }
.mlg-stack {
  display: flex; flex-direction: column; height: 232px; gap: 3px;
  padding: 2px; border-radius: 9px;
  background: var(--rt-bg-sunk); box-shadow: var(--rt-ring);
}
/* Four bricks, not one gradient: a lane hue can land on the same blue as
   "free to allocate", so the gap is what keeps the four parts of the
   subtraction telling themselves apart. */
.mlg-seg { position: relative; overflow: hidden; border-radius: 3px; }
/* Past the budget the bricks no longer sum to the board — the bar
   re-normalises, so it has to say that it is showing a mix, not a fit. */
.mlg-stack.is-over { box-shadow: inset 0 0 0 1px var(--rt-coral); }
/* The resident brick is a STACK of lanes, gapped like the bricks around
   it, so the region reads as several things held rather than one solid
   block that happens to change colour. */
.mlg-seg-lanes { display: flex; flex-direction: column; gap: 2px; background-color: transparent !important; }
.mlg-seg-media { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-violet, #a78bfa) 45%, transparent); }
.mlg-lane { min-height: 1px; border-radius: 2px; }
/* Free space is drawn EMPTY — an outline, not a fill. A solid brick for
   "nothing is here" is the one thing this picture must not say. */
.mlg-seg-ghost {
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 5px, rgba(111, 168, 220, 0.16) 5px 10px);
}
.mlg-seg-hatch {
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 4px, rgba(255, 255, 255, 0.10) 4px 8px);
}
.mlg-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; }
.mlg-leg { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; }
.mlg-leg-dot {
  width: 9px; height: 9px; border-radius: 2px; margin-top: 4px; flex: 0 0 auto;
  overflow: hidden; display: flex; flex-direction: column;
}
.mlg-leg-dot i { display: block; flex: 1 1 0; }
.mlg-leg-t { min-width: 0; }
.mlg-leg-k { display: block; font-size: 11.5px; color: var(--rt-fg-2); line-height: 1.3; }
.mlg-leg-v {
  display: block; font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--rt-fg); font-variant-numeric: tabular-nums; margin-top: 1px;
}
.mlg-leg.is-zero .mlg-leg-k, .mlg-leg.is-zero .mlg-leg-v { color: var(--rt-fg-3); font-weight: 400; }

/* The subtraction, spelled out. Every row is a daemon-reported field. */
.mlg-table { margin: 18px 0 0; }
.mlg-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-top: 1px solid var(--rt-border);
  font-size: 11.5px;
}
.mlg-row:first-child { border-top: none; }
.mlg-row-k { flex: 1; min-width: 0; color: var(--rt-fg-2); }
.mlg-row-v {
  font-family: var(--mono); font-size: 12px; color: var(--rt-fg);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mlg-row-v.accent { color: var(--rt-accent); font-weight: 600; }
.mlg-row-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.mlg-row-dot.empty { background: transparent; box-shadow: inset 0 0 0 1px var(--rt-border); }

.mlg-note {
  margin-top: 16px; padding: 11px 12px; border-radius: 9px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
  font-size: 11.5px; line-height: 1.55; color: var(--rt-fg-2);
}
.mlg-note-h { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--rt-amber); margin-bottom: 5px; }

.mlg-conf {
  margin-top: 10px; width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left;
  background: transparent; border: 1px dashed var(--rt-border);
  color: var(--rt-fg-3); font-family: var(--mono); font-size: 10.5px;
}
.mlg-conf:hover { background: var(--rt-bg-alt); color: var(--rt-fg-2); }
.mlg-conf-p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlg-conf-body {
  margin-top: 8px; padding: 0 2px; font-size: 11px; line-height: 1.6; color: var(--rt-fg-3);
}
.mlg-conf-body code {
  font-family: var(--mono); font-size: 10.5px; color: var(--rt-fg-2);
  background: var(--rt-bg-alt); border-radius: 4px; padding: 1px 4px;
}

/* Folded rail — the gauge alone, still to scale, still clickable back. */
.mlg-folded {
  width: 100%; padding: 14px 0; border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.mlg-folded:hover { background: var(--rt-bg-alt); border-radius: 14px; }
.mlg-folded-stack {
  width: 14px; height: 220px; border-radius: 7px; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--rt-bg-sunk); box-shadow: var(--rt-ring);
}
.mlg-folded-pct {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  writing-mode: vertical-rl; letter-spacing: 0.04em;
}
.mlg-folded-lbl {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rt-fg-3);
  writing-mode: vertical-rl;
}

/* Compact ledger (Nightshift slim — `.is-compact` on the split).
   The rail draws the board as a 232px COLUMN so the subtraction
   reads top-to-bottom. Once slim restacks that column ABOVE the
   lane board, the switcher is a long scroll away. Same partition,
   laid as a short horizontal gauge; the study rows stay on wide. */
.lmx-split.is-compact .mlg {
  padding: 10px 12px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
}
.lmx-split.is-compact .mlg-h { grid-column: 1; align-items: center; }
.lmx-split.is-compact .mlg-sub { display: none; }
.lmx-split.is-compact .mlg-fold { transform: rotate(-90deg); }
.lmx-split.is-compact .mlg-figure {
  grid-column: 2;
  margin: 0;
  text-align: right;
}
.lmx-split.is-compact .mlg-big { font-size: 20px; }
.lmx-split.is-compact .mlg-big-u { font-size: 11px; }
.lmx-split.is-compact .mlg-big-lbl { display: none; }
.lmx-split.is-compact .mlg-pct { margin-top: 2px; font-size: 11px; }
.lmx-split.is-compact .mlg-pct-rest { display: none; }
.lmx-split.is-compact .mlg-plot {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 0;
}
.lmx-split.is-compact .mlg-stack {
  flex-direction: row;
  height: 12px;
  gap: 2px;
}
.lmx-split.is-compact .mlg-seg-lanes { flex-direction: row; }
.lmx-split.is-compact .mlg-seg,
.lmx-split.is-compact .mlg-lane { min-height: 0; }
.lmx-split.is-compact .mlg-legend {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 14px;
  justify-content: flex-start;
}
.lmx-split.is-compact .mlg-leg { padding: 0; align-items: center; gap: 6px; }
.lmx-split.is-compact .mlg-leg-dot {
  margin-top: 0;
  flex-direction: row;
}
.lmx-split.is-compact .mlg-leg-t {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.lmx-split.is-compact .mlg-leg-v { margin-top: 0; font-size: 11px; }
.lmx-split.is-compact .mlg-table,
.lmx-split.is-compact .mlg-note,
.lmx-split.is-compact .mlg-conf,
.lmx-split.is-compact .mlg-conf-body { display: none; }

.lmx-split.is-compact .mlg-folded {
  flex-direction: row;
  padding: 8px 12px;
  gap: 10px;
  align-items: center;
}
.lmx-split.is-compact .mlg-folded-stack {
  width: auto;
  flex: 1 1 auto;
  height: 12px;
  flex-direction: row;
  border-radius: 6px;
}
.lmx-split.is-compact .mlg-folded-lbl,
.lmx-split.is-compact .mlg-folded-pct {
  writing-mode: horizontal-tb;
}
.lmx-split.is-compact .mlg-folded-lbl { letter-spacing: 0.08em; }
.lmx-split.is-compact .mlg-folded-pct {
  font-size: 11px;
  min-width: 2.6em;
  text-align: right;
}

/* ---------- The lane board ---------- */
.lnb { padding: 16px 18px 18px; }
.lnb-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lnb-title {
  margin: 0; font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rt-fg);
}
.lnb-count { font-family: var(--mono); font-size: 11px; color: var(--rt-fg-3); }
.lnb-h-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.lnb-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 13px 0 14px; padding-bottom: 13px;
  border-bottom: 1px solid var(--rt-border);
}
.lnb-search { position: relative; display: flex; align-items: center; flex: 1 1 200px; min-width: 150px; max-width: 340px; }
.lnb-search input {
  width: 100%; height: 34px; padding: 0 28px 0 30px;
  border-radius: 9px; border: 1px solid var(--rt-border);
  background: var(--rt-bg-sunk); color: var(--rt-fg);
  font-family: var(--font); font-size: 12.5px;
}
.lnb-search input:focus { outline: none; border-color: var(--rt-accent); }
.lnb-search input::placeholder { color: var(--rt-fg-3); }
.lnb-search-i { position: absolute; left: 10px; font-size: 11px; color: var(--rt-fg-3); pointer-events: none; }
.lnb-search-x {
  position: absolute; right: 5px; width: 20px; height: 20px; padding: 0;
  border: none; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--rt-fg-3);
  font-family: var(--mono); font-size: 13px; line-height: 1;
}
.lnb-search-x:hover { background: var(--rt-border); color: var(--rt-fg); }
.lnb-seg { flex: 0 0 auto; }
.lnb-seg button { padding: 5px 10px; font-size: 10.5px; }
.lnb-seg button .lnb-seg-n { margin-left: 5px; opacity: 0.75; }
.lnb-seg button.warn { color: var(--rt-amber); }
.lnb-seg button.is-media { color: var(--rt-violet, #a78bfa); }
.lnb-seg button.is-media.active {
  color: var(--rt-violet, #a78bfa);
  background: color-mix(in srgb, var(--rt-violet, #a78bfa) 16%, var(--rt-panel));
}
.lnb-views { margin-left: auto; }
.lnb-views button { padding: 5px 9px; font-size: 12px; line-height: 1; }

.lnb-list { display: grid; gap: 10px; }
.lnb-list.view-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.lnb-list.view-compact { gap: 4px; }

.lnb-card {
  position: relative; overflow: hidden;
  padding: 12px 14px 12px 17px; border-radius: 11px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
  transition: box-shadow 150ms ease;
}
/* The lane's own colour, as a spine. Same hue as its emitter on Night,
   its legend entry, and its block in the ledger's bar — one lane, one
   colour, everywhere it appears. */
.lnb-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--lane-hue, var(--rt-border-strong));
}
.lnb-card:hover { box-shadow: var(--rt-ring-strong); }
.lnb-card.is-open { box-shadow: 0 0 0 1px var(--rt-accent); grid-column: 1 / -1; }
.lnb-card.is-off { opacity: 0.66; }
.lnb-card.is-attn::before { background: var(--rt-coral); }
.lnb-card.is-media {
  background: color-mix(in srgb, var(--rt-violet, #a78bfa) 7%, var(--rt-bg-alt));
}

.lnb-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lnb-dot { font-size: 11px; line-height: 1; flex: 0 0 auto; }

.lnb-id { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.lnb-name {
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--rt-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lnb-pen { padding: 0 4px; line-height: 1; }
.lnb-from-model { padding: 0 6px; line-height: 1; font-size: 10px; letter-spacing: 0.02em; }

.lnb-metrics {
  margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--rt-fg-3);
  font-variant-numeric: tabular-nums;
}
.lnb-metrics .m-state { font-weight: 600; }
.lnb-metrics .m-busy { color: var(--rt-accent); }
.lnb-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.lnb-actions .btn-rt-sm { height: 28px; font-size: 11px; padding: 0 10px; }

.lnb-sub {
  margin: 7px 0 0; padding-left: 2px;
  font-family: var(--mono); font-size: 11px; line-height: 1.5;
  color: var(--rt-fg-3); word-break: break-word;
}
.lnb-line { margin-top: 5px; font-family: var(--mono); font-size: 11px; line-height: 1.5; word-break: break-word; }
.lnb-exp { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--rt-border); }

/* Compact — the same card, at half the height. The model line folds
   into the name's tooltip and comes back the moment the card is opened,
   so nothing is lost, only stacked closer. */
.view-compact .lnb-card { padding: 6px 10px 6px 13px; border-radius: 8px; }
.view-compact .lnb-badge { flex-direction: row; align-items: center; gap: 6px; min-width: 0; padding: 3px 7px; }
.view-compact .lnb-name { font-size: 12px; }
.view-compact .lnb-load { margin-top: 4px; }
.view-compact .lnb-load-meta { font-size: 10px; }
.view-compact .lnb-sub { display: none; }
.view-compact .lnb-card.is-open .lnb-sub { display: block; }
/* A green "the key still works" on every healthy cloud lane is exactly
   the line dense mode exists to drop. Warnings and errors stay: those
   are never noise. */
.view-compact .lnb-card:not(.is-open) .lnb-line-ok { display: none; }
.view-compact .lnb-actions .btn-rt-sm { height: 26px; font-size: 10.5px; padding: 0 8px; }
.view-compact .lnb-duty { height: 26px; font-size: 10px; }

/* In a card the name keeps the first line to itself and ellipsizes; the
   metrics and the actions each take a full line of their own, so every
   card in the grid has the same shape however long its lane id is. */
.view-grid .lnb-metrics, .view-grid .lnb-actions { flex: 1 0 100%; margin-left: 0; }
.view-grid .lnb-card { padding-bottom: 13px; }

.lnb-none {
  padding: 26px 16px; text-align: center;
  font-family: var(--mono); font-size: 12px; color: var(--rt-fg-3);
}
.lnb-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rt-border);
  font-family: var(--mono); font-size: 11px; color: var(--rt-fg-3);
}
.lnb-pager { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.lnb-pg {
  width: 28px; height: 28px; padding: 0; border: none; border-radius: 7px;
  cursor: pointer; background: var(--rt-panel); color: var(--rt-fg);
  box-shadow: var(--rt-ring); font-family: var(--mono); font-size: 12px; line-height: 1;
}
.lnb-pg:hover:not(:disabled) { background: var(--rt-bg-alt); }
.lnb-pg:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   FLEETS ATLAS (engine.jsx) — the map that replaced the fleet card grid.

   Seven cards is where "read them all and decide" stops working, and a
   box with custom fleets on it passes seven quickly. The atlas answers
   the four questions the grid made a reader compute by hand — which of
   these fits, which is fastest, which are nearly the same fleet, which
   one is three downloads away from being usable — by placing fleets
   instead of listing them.

   Layout: one toolbar, one queue strip, then a two-column body of map
   and inspector rail. The rail stays on the right (300–360px) so a
   click on the atlas opens the same settings the list does. The map
   fills the remaining pane — it no longer shrinks to a postcard.

   This block owns the `.fla-` prefix and nothing else uses it.
--------------------------------------------------------------------- */
.fla { display: block; }

/* ---------------------------------------------------------------------
   SETUP FLEET GALLERY (settings.jsx) — cinematic picker for catalog
   collections on Setup ▸ Local models. `.sfg-` prefix only.
   Download / missing / blocked / progress behaviour is unchanged;
   this block is the skin.
--------------------------------------------------------------------- */
.sfg-shell {
  padding: 12px 12px 14px;
  border-radius: 14px;
  background: var(--rt-panel);
  box-shadow: var(--rt-ring);
  margin-bottom: 14px;
}
.sfg { outline: none; }
.sfg-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 920px) {
  .sfg-stage { grid-template-columns: minmax(0, 1fr); }
}

.sfg-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(210px, 0.92fr) minmax(0, 1.15fr);
  gap: 8px 18px;
  min-height: 340px;
  padding: 22px 22px 18px;
  border-radius: 18px;
  background:
    radial-gradient(1200px 280px at 70% -10%, color-mix(in srgb, var(--rt-accent) 18%, transparent), transparent 60%),
    var(--rt-bg-sunk);
  box-shadow: inset 0 0 0 1px var(--rt-border);
}
.sfg-hero::before {
  content: '';
  position: absolute;
  inset: 35% -10% -40%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--rt-accent) 22%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--rt-accent) 22%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
  transform: perspective(420px) rotateX(58deg);
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
  opacity: 0.28;
  pointer-events: none;
}
.theme-dark .sfg-hero {
  background:
    radial-gradient(1000px 260px at 68% -8%, rgba(111,168,220,0.16), transparent 55%),
    linear-gradient(180deg, #10162a 0%, #0b0e1a 70%);
}
.theme-dark .sfg-hero::before { opacity: 0.4; }
.sfg-hero-copy, .sfg-arch { position: relative; z-index: 1; }
.sfg-hero-copy { display: flex; flex-direction: column; min-width: 0; padding-top: 6px; }
@media (max-width: 720px) {
  .sfg-hero { grid-template-columns: 1fr; min-height: 0; }
}

.sfg-badge {
  display: inline-flex; align-self: flex-start;
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rt-fg-3);
  background: color-mix(in srgb, var(--rt-fg) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--rt-border);
}
.sfg-title {
  margin: 10px 0 0;
  font-family: var(--font); font-size: 34px; font-weight: 650;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rt-fg); line-height: 1.05;
}
.sfg-desc {
  margin: 10px 0 0; max-width: 34em;
  font-size: 12.5px; line-height: 1.5; color: var(--rt-fg-2);
}
.sfg-live {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; font-size: 12.5px; color: var(--rt-fg-2);
}
.sfg-live.tone-good { color: var(--rt-green); }
.sfg-live.tone-warn { color: var(--rt-amber); }
.sfg-live.tone-bad { color: var(--rt-coral); }
.sfg-live.tone-live { color: var(--rt-accent); }
.sfg-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
  animation: sfg-pulse 1.8s ease-out infinite;
}
@keyframes sfg-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.sfg-hero-acts { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px; }
.sfg-go {
  background: var(--rt-green); color: #05130d; font-weight: 650;
  height: 44px; padding: 0 22px; border-radius: 999px; font-size: 14px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rt-green) 55%, transparent), 0 10px 28px -12px color-mix(in srgb, var(--rt-green) 70%, transparent);
}
.sfg-go:hover { background: #34d39c; color: #05130d; }
.sfg-hero-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sfg-hero-sec .btn-rt-ghost { border-radius: 999px; height: 32px; }
.sfg-ready { font-size: 11px; color: var(--rt-green); }

.sfg-arch {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; padding: 8px 4px 0;
}
.sfg-router {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--rt-fg);
  background: color-mix(in srgb, var(--rt-panel) 78%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-accent) 45%, var(--rt-border));
  backdrop-filter: blur(8px);
}
.sfg-wires {
  position: relative; width: min(86%, 420px); height: 28px; margin: 2px 0 4px;
}
.sfg-wires i, .sfg-wires b {
  position: absolute; left: 50%; background: linear-gradient(180deg, var(--rt-accent), color-mix(in srgb, var(--rt-cyan) 70%, var(--rt-green)));
  opacity: 0.85; box-shadow: 0 0 10px color-mix(in srgb, var(--rt-accent) 55%, transparent);
}
.sfg-wires i { top: 0; width: 2px; height: 14px; transform: translateX(-1px); }
.sfg-wires b { top: 14px; width: 72%; height: 2px; transform: translateX(-50%); border-radius: 2px; }

.sfg-lanes {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  width: 100%;
}
.sfg-lane {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  width: 148px; max-width: 100%;
  padding: 12px 12px 10px;
  border: none; border-radius: 14px; text-align: left; cursor: default;
  background: color-mix(in srgb, var(--rt-panel) 82%, transparent);
  box-shadow: inset 0 0 0 1px var(--rt-border);
  backdrop-filter: blur(10px);
  color: var(--rt-fg);
}
.sfg-lane.is-pull { cursor: pointer; }
.sfg-lane.is-pull:hover { box-shadow: inset 0 0 0 1px var(--rt-accent); }
.sfg-lane-ico { display: flex; filter: drop-shadow(0 0 6px currentColor); }
.sfg-lane-n {
  font-size: 11.5px; font-weight: 650; line-height: 1.25; color: var(--rt-fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sfg-lane-s { font-size: 10px; color: var(--rt-fg-3); }
.sfg-lane-s.tone-good, .sfg-roster .tone-good { color: var(--rt-green); }
.sfg-lane-s.tone-bad, .sfg-roster .tone-bad { color: var(--rt-coral); }
.sfg-lane-s.tone-live, .sfg-roster .tone-live { color: var(--rt-accent); }
.sfg-lane-dl, .sfg-lane-bar {
  display: block; width: 100%; height: 4px; border-radius: 999px;
  background: var(--rt-border); overflow: hidden;
}
.sfg-lane-dl > i { display: block; height: 100%; background: var(--rt-green); }
.sfg-lane-bar { height: 5px; margin-top: 2px; }
.sfg-lane-bar > i { display: block; height: 100%; border-radius: inherit; opacity: 0.9; }

.sfg-legend {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 16px; margin: 12px 0 0; padding: 0;
  font-size: 10.5px; color: var(--rt-fg-3);
}
.sfg-legend li { display: flex; align-items: center; gap: 6px; }
.sfg-legend i { width: 8px; height: 8px; border-radius: 50%; }

.sfg-rail {
  display: flex; flex-direction: column; gap: 0;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--rt-panel) 92%, transparent);
  box-shadow: inset 0 0 0 1px var(--rt-border);
  min-width: 0;
}
.sfg-rail-h { display: flex; align-items: center; gap: 8px; }
.sfg-rail-h b {
  font-size: 16px; font-weight: 650; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--rt-fg);
}
.sfg-stats { list-style: none; margin: 12px 0 0; padding: 0; }
.sfg-stats li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 0; border-top: 1px solid var(--rt-border);
  font-size: 11.5px;
}
.sfg-stats li:first-child { border-top: none; }
.sfg-stats .k { flex: 1; color: var(--rt-fg-3); }
.sfg-stats .v { color: var(--rt-fg); font-variant-numeric: tabular-nums; }

.sfg-roster-h, .sfg-why-h {
  margin: 14px 0 6px; font-size: 11px; font-weight: 650; color: var(--rt-fg);
}
.sfg-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sfg-roster li { display: flex; align-items: baseline; gap: 8px; font-size: 11px; min-width: 0; }
.sfg-roster i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; transform: translateY(1px); }
.sfg-roster .n { flex: 1; min-width: 0; color: var(--rt-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfg-roster .s { color: var(--rt-fg-3); white-space: nowrap; }
.sfg-why { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--rt-fg-3); }

.sfg-fit { margin-top: 14px; }
.sfg-fit-h {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--rt-fg-2); margin-bottom: 6px;
}
.sfg-fit-track { height: 7px; border-radius: 999px; background: var(--rt-border); overflow: hidden; }
.sfg-fit-track > i { display: block; height: 100%; border-radius: inherit; background: var(--rt-amber); }
.sfg-fit-track.tone-good > i { background: var(--rt-green); }
.sfg-fit-track.tone-bad > i { background: var(--rt-coral); }
.sfg-fit-lbl { display: block; margin-top: 5px; font-size: 11px; }
.sfg-fit-lbl.tone-good { color: var(--rt-green); }
.sfg-fit-lbl.tone-warn { color: var(--rt-amber); }
.sfg-fit-lbl.tone-bad { color: var(--rt-coral); }
.sfg-fit-lbl.tone-muted { color: var(--rt-fg-3); }
.sfg-rail-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.sfg-strip-wrap {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center; gap: 6px; margin-top: 14px;
}
.sfg-nav {
  width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%;
  background: color-mix(in srgb, var(--rt-panel) 80%, transparent);
  color: var(--rt-fg); box-shadow: inset 0 0 0 1px var(--rt-border);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.sfg-nav:hover { background: var(--rt-bg-alt); }
.sfg-strip {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 2px 10px; scrollbar-width: thin;
}
.sfg-card {
  flex: 0 0 148px; scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 10px 8px; border: none; border-radius: 14px; cursor: pointer;
  text-align: left; color: var(--rt-fg);
  background: var(--rt-bg-sunk);
  box-shadow: inset 0 0 0 1px var(--rt-border);
}
.sfg-card:hover { box-shadow: inset 0 0 0 1px var(--rt-border-strong); }
.sfg-card.is-sel {
  box-shadow:
    inset 0 0 0 1.5px var(--rt-accent),
    0 0 0 4px color-mix(in srgb, var(--rt-accent) 22%, transparent);
}
.sfg-card-h { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sfg-card-h b {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sfg-card-h em {
  font-style: normal; font-family: var(--mono); font-size: 9.5px;
  color: var(--rt-fg-3); letter-spacing: 0.04em; text-transform: uppercase;
}
.sfg-mini { display: block; width: 100%; height: 44px; }
.sfg-card-s { font-size: 10px; color: var(--rt-fg-3); }
.sfg-card-s.tone-good { color: var(--rt-green); }

.sfg-pager {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 2px;
}
.sfg-dot {
  width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%;
  background: var(--rt-border-strong); cursor: pointer;
}
.sfg-dot.is-on { width: 16px; border-radius: 999px; background: var(--rt-accent); }
.sfg-count { margin-left: 8px; font-size: 10.5px; color: var(--rt-fg-3); font-variant-numeric: tabular-nums; }

.sfg-browse-name {
  flex: 1; min-width: 0; text-align: left;
  background: transparent; border: none; padding: 0; cursor: pointer; color: inherit;
}
.sfg-browse-row { border-radius: 8px; }
.sfg-browse-row.is-sel { background: color-mix(in srgb, var(--rt-accent) 10%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .sfg-live-dot { animation: none; }
  .sfg-strip { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   MCP atlas (Workers ▸ MCP) — fleets-grade chrome. Reuses `.fla-`
   bar / body / rail / list / inspector / legend so the two maps share
   a hand. `.nsm-` is the MCP-only layer: the constellation plot,
   need fields, custom-server form, research-posture fold.
--------------------------------------------------------------------- */
.nsm-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.nsm-atlas {
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  padding: 12px 14px 10px; border-radius: 16px;
  background: var(--rt-panel); box-shadow: var(--rt-ring);
}
.theme-dark .nsm-atlas {
  background:
    radial-gradient(880px 260px at 8% -28%, color-mix(in srgb, var(--rt-accent) 12%, transparent), transparent 58%),
    var(--rt-panel);
}

.nsm-map {
  height: min(72vh, 860px); min-height: 480px;
  background:
    radial-gradient(120% 80% at 50% 110%, color-mix(in srgb, var(--rt-green) 8%, transparent), transparent 42%),
    radial-gradient(70% 50% at 80% 0%, color-mix(in srgb, var(--rt-accent) 10%, transparent), transparent 55%),
    var(--rt-bg-sunk);
}

.nsm-ax {
  font-family: var(--mono); font-size: 10px; fill: var(--rt-fg-3);
  letter-spacing: 0.04em;
}
.nsm-ax-y { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--rt-fg-3); }
.nsm-offer {
  font-size: 11px; color: var(--rt-fg-3); font-variant-numeric: tabular-nums;
}
.nsm-atlas .accent { color: var(--rt-green); font-weight: 600; }
.nsm-needs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.nsm-need { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nsm-need .k {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rt-fg-3); font-family: var(--mono);
}
.nsm-need .ns-input { width: 100%; }
.nsm-need-row { display: flex; gap: 6px; align-items: stretch; min-width: 0; }
.nsm-need-row .ns-input { flex: 1; min-width: 0; }
.nsm-need-row .btn-rt { flex: 0 0 auto; align-self: center; }
.nsm-folder-extra { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.nsm-folder-chip {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 11px; color: var(--rt-fg-2);
}
.nsm-folder-chip .mono {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nsm-root.is-default { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-green) 28%, transparent); border-radius: 8px; padding: 6px 8px; }
.nsm-roster-h {
  margin-top: 12px; padding: 7px 0 8px;
  color: var(--rt-fg-3); font-family: var(--mono); font-size: 10.5px;
  border-top: 1px solid var(--rt-border);
}
.nsm-err { color: var(--rt-coral); font-size: 12px; margin: 0 0 8px; }
.nsm-foot { margin: 0; font-size: 12px; color: var(--rt-fg-3); line-height: 1.45; }
.nsm-posture {
  border-radius: 14px;
  background: var(--rt-panel);
  box-shadow: var(--rt-ring);
  overflow: hidden;
}
.nsm-fold {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; padding: 11px 14px; cursor: pointer; color: inherit;
}
.nsm-fold:hover { background: color-mix(in srgb, var(--rt-fg) 4%, transparent); }
.nsm-fold:hover .eyebrow { color: var(--rt-fg); }
.nsm-fold-caret {
  display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto;
  align-items: center; justify-content: center;
  border-radius: 4px; background: var(--rt-bg-sunk); color: var(--rt-fg-3);
  font-family: var(--mono); font-size: 10px; line-height: 1;
  transform: rotate(-90deg); transition: transform 140ms ease;
}
.nsm-posture.is-open .nsm-fold-caret { transform: rotate(0deg); }
.nsm-posture.is-open .nsm-fold { border-bottom: 1px solid var(--rt-border); }
.nsm-fold-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nsm-fold-copy .eyebrow { margin: 0; }
.nsm-fold-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto;
}
.nsm-posture-body { padding: 12px 14px 14px; }

.nsm-pill {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
  border-radius: 999px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--rt-bg-sunk); color: var(--rt-fg-3);
}
.nsm-pill.tone-good { color: var(--rt-green); background: color-mix(in srgb, var(--rt-green) 14%, transparent); }
.nsm-pill.tone-live { color: var(--rt-amber); background: color-mix(in srgb, var(--rt-amber) 14%, transparent); }
.nsm-pill.tone-warn { color: var(--rt-amber); background: color-mix(in srgb, var(--rt-amber) 12%, transparent); }
.nsm-pill.tone-bad { color: var(--rt-coral); background: color-mix(in srgb, var(--rt-coral) 14%, transparent); }
.nsm-pill.tone-muted { color: var(--rt-fg-3); }

.nsm-sec-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.nsm-empty {
  padding: 14px 4px; font-size: 13px; color: var(--rt-fg-2); line-height: 1.45;
}
.nsm-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.nsm-cat-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border-radius: 14px; text-align: left;
  background: var(--rt-bg-sunk); box-shadow: inset 0 0 0 1px var(--rt-border);
}
.nsm-cat-card.is-ready { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rt-green) 55%, var(--rt-border)); }
.nsm-cat-card.is-live { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rt-amber) 55%, var(--rt-border)); }
.nsm-cat-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nsm-cat-h b { font-size: 13px; }
.nsm-cat-h em {
  font-style: normal; font-family: var(--mono); font-size: 9.5px;
  color: var(--rt-fg-3); letter-spacing: 0.04em; text-transform: uppercase;
}
.nsm-cat-card p { margin: 0; font-size: 12px; color: var(--rt-fg-2); line-height: 1.4; }
.nsm-cat-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.nsm-cat-st { font-size: 11px; }
.nsm-cat-st.tone-good { color: var(--rt-green); }
.nsm-cat-st.tone-live { color: var(--rt-amber); }
.nsm-cat-st.tone-bad { color: var(--rt-coral); }

/* Registry + research posture (ToolServersPanel in engine.jsx) still
   uses these — the atlas hides the add form, this is the fold. */
.nsm-custom {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: 12px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
}
.nsm-custom-h { font-size: 13px; font-weight: 600; color: var(--rt-fg); }
.nsm-custom-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.nsm-custom-row .ns-input { min-width: 160px; flex: 1; }
.nsm-custom-row textarea.ns-input { flex-basis: 100%; min-height: 64px; }
.nsm-servers { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nsm-srv {
  padding: 12px 14px; border-radius: 12px;
  background: var(--rt-bg-sunk); box-shadow: inset 0 0 0 1px var(--rt-border);
}
.nsm-srv.is-ready { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-green) 45%, var(--rt-border)); }
.nsm-srv-h {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px;
}
.nsm-srv-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-width: 0; }
.nsm-srv-id strong { font-size: 13px; }
.nsm-srv-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.nsm-stderr {
  font-size: 10px; color: var(--rt-fg-3); margin: 6px 0 0;
  white-space: pre-wrap; max-height: 120px; overflow: auto;
}
.nsm-tool-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.nsm-tool {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--rt-panel) 70%, transparent);
}
.nsm-tool.is-on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-green) 28%, transparent); }
.nsm-tool-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
.nsm-posture-block {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rt-border);
}
.nsm-native, .nsm-root {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 4px 0;
}
.nsm-posture-sec { margin-top: 10px; }

/* Atlas atmosphere + inspector chrome — MCP-only, fleets atlas untouched. */
.nsm-star { pointer-events: none; }
.nsm-fam-wash { pointer-events: none; }
.nsm-live-rule { stroke: color-mix(in srgb, var(--rt-green) 35%, var(--rt-border)); stroke-width: 1; stroke-dasharray: 2 6; fill: none; }
.nsm-link { fill: none; stroke-width: 1; opacity: 0.35; }
.nsm-hud {
  position: absolute; top: 12px; right: 12px; left: auto; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 11px 6px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--rt-panel) 90%, transparent);
  box-shadow: var(--rt-ring-strong);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rt-fg-2);
}
.nsm-hud-pip {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--rt-green);
  box-shadow: 0 0 8px color-mix(in srgb, var(--rt-green) 65%, transparent);
}
.nsm-hud.is-paused .nsm-hud-pip { background: var(--rt-amber); box-shadow: none; }
.nsm-hud b { color: var(--rt-fg); font-weight: 650; letter-spacing: 0.04em; }
.nsm-hud em { font-style: normal; color: var(--rt-fg-3); }

.nsm-insp {
  display: flex; flex-direction: column; min-height: 100%;
  padding: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nsm-hue, var(--rt-accent)) 16%, transparent), transparent 90px),
    var(--rt-bg-alt);
}
.nsm-insp-hero {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 16px 15px 12px;
}
.nsm-glyph {
  flex: 0 0 auto; display: block;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--nsm-hue, var(--rt-accent)) 45%, transparent));
}
.nsm-insp-h { flex: 1; min-width: 0; align-items: flex-start; }

.nsm-insp-body { padding: 0 15px 16px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nsm-statgrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin: 12px 0 0;
}
.nsm-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--rt-bg-sunk); box-shadow: inset 0 0 0 1px var(--rt-border);
  min-width: 0;
}
.nsm-stat .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--rt-fg-3);
}
.nsm-stat .v {
  font-size: 12.5px; color: var(--rt-fg); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.nsm-tools {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px;
}
.nsm-toolchip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; padding: 4px 8px 4px 7px; border-radius: 999px;
  background: var(--rt-bg-sunk); box-shadow: inset 0 0 0 1px var(--rt-border);
  font-family: var(--mono); font-size: 10.5px; color: var(--rt-fg-2);
}
.nsm-toolchip i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.nsm-toolchip .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsm-toolchip.is-live { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-green) 40%, var(--rt-border)); }

.nsm-posture-block.is-embed { margin-top: 0; padding-top: 0; border-top: none; }
.nsm-posture-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(220px, 0.9fr);
  gap: 10px; align-items: start;
}
@media (max-width: 1100px) {
  .nsm-posture-grid { grid-template-columns: minmax(0, 1fr); }
}
.nsm-posture-card {
  padding: 12px; border-radius: 12px;
  background: var(--rt-bg-sunk); box-shadow: inset 0 0 0 1px var(--rt-border);
  min-width: 0;
}
.nsm-posture-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rt-fg-3); margin-bottom: 8px;
}
.nsm-native-list, .nsm-root-list { display: flex; flex-direction: column; gap: 6px; }
.nsm-posture-card .nsm-native, .nsm-posture-card .nsm-root {
  padding: 8px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--rt-panel) 70%, transparent);
  align-items: center;
}
.nsm-native.is-ready { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-green) 30%, transparent); }
.nsm-posture-card .nsm-posture-sec { margin-top: 0; }
.nsm-posture-note { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--rt-fg-3); }
@media (prefers-reduced-motion: reduce) {
  .nsm-fold-caret { transition: none; }
}

/* ---------------------------------------------------------------------
   SETUP PROVIDERS (settings.jsx) — endpoint inspector + cloud key cards.
   `.cpg-` prefix only. Save / clear / copy / write-only key behaviour
   is unchanged; this block is the skin.
--------------------------------------------------------------------- */
.cpg-shell {
  padding: 12px 12px 4px;
  border-radius: 14px;
  background: var(--rt-panel);
  box-shadow: var(--rt-ring);
  margin-bottom: 14px;
}
.cpg-shell > .rt-section {
  background: transparent;
  box-shadow: none;
  padding: 8px 0 4px;
  margin: 0;
  overflow: visible;
}
.cpg-shell > .rt-section .rt-section-h,
.cpg-shell > .rt-section .rt-section-body {
  padding-left: 2px;
  padding-right: 2px;
}

.cpg-endpoint {
  display: grid;
  grid-template-columns: minmax(210px, 0.78fr) minmax(0, 1.22fr);
  gap: 8px 18px;
  align-items: stretch;
  margin-bottom: 16px;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(900px 220px at 78% -20%, color-mix(in srgb, var(--rt-accent) 16%, transparent), transparent 58%),
    var(--rt-bg-sunk);
  box-shadow: inset 0 0 0 1px var(--rt-border);
}
.theme-dark .cpg-endpoint {
  background:
    radial-gradient(800px 200px at 80% -16%, rgba(111,168,220,0.14), transparent 55%),
    linear-gradient(180deg, #10162a 0%, #0b0e1a 72%);
}
.cpg-endpoint-hero {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 8px 20px 22px;
}
.cpg-title {
  margin: 10px 0 0;
  font-family: var(--font);
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -0.5px;
  color: var(--rt-fg);
}
.cpg-desc {
  margin: 8px 0 0;
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rt-fg-2);
}
.cpg-setup { margin-top: 16px; align-self: flex-start; border-radius: 999px; }
.cpg-endpoint-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 16px 16px 8px;
  min-width: 0;
}
.cpg-field {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
}
.cpg-field:hover { background: color-mix(in srgb, var(--rt-fg) 4%, transparent); }
.cpg-field .k, .cpg-models .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rt-fg-3);
}
.cpg-field .v {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--rt-fg);
  user-select: text;
}
.cpg-copy {
  height: 28px;
  padding: 0 9px;
  flex-shrink: 0;
}
.cpg-copy.is-on { color: var(--rt-green); }
.cpg-models {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 10px 10px 4px;
}
.cpg-models .k { padding-top: 7px; }
.cpg-model-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cpg-chip {
  height: 26px;
  padding: 0 9px;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rt-fg) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--rt-border);
  color: var(--rt-fg-2);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
}
.cpg-chip:hover { color: var(--rt-fg); box-shadow: inset 0 0 0 1px var(--rt-border-strong); }
.cpg-chip.is-default { color: var(--rt-accent); }
.cpg-chip.is-on { color: var(--rt-green); }

.cpg-banner {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--rt-coral) 12%, transparent);
  color: var(--rt-coral);
}
.cpg-key-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cpg-card.key-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 14px 14px 12px;
  border: none;
  border-radius: 14px;
  background: var(--rt-bg-sunk);
  box-shadow: inset 0 0 0 1px var(--rt-border);
}
.cpg-card.key-row:last-child { border-bottom: none; }
.cpg-card.is-on {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cpg-hue, var(--rt-green)) 45%, var(--rt-border)),
    0 0 18px color-mix(in srgb, var(--cpg-hue, var(--rt-green)) 10%, transparent);
}
.cpg-card.is-edit {
  box-shadow: inset 0 0 0 1px var(--rt-accent);
}
.cpg-card.is-saved {
  box-shadow: inset 0 0 0 1px var(--rt-green);
}
.cpg-card-h {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.cpg-mark {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--cpg-hue, var(--rt-accent));
  background: color-mix(in srgb, var(--cpg-hue, var(--rt-accent)) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cpg-hue, var(--rt-accent)) 28%, transparent);
}
.cpg-card-id { flex: 1; min-width: 0; }
.cpg-card-id .key-name-h {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cpg-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--rt-fg-3);
  background: color-mix(in srgb, var(--rt-fg) 5%, transparent);
}
.cpg-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cpg-state.is-on { color: var(--rt-green); }
.cpg-state.is-off { color: var(--rt-fg-3); }
.cpg-card-body { min-width: 0; }
.cpg-note { font-size: 11px; color: var(--rt-fg-3); }
.cpg-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.cpg-prices span {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--rt-bg-alt);
  font-size: 10.5px;
  color: var(--rt-fg-3);
}
.cpg-card-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}

@media (max-width: 980px) {
  .cpg-endpoint { grid-template-columns: 1fr; }
  .cpg-endpoint-hero { padding: 18px 16px 8px; }
  .cpg-endpoint-fields { padding: 4px 12px 14px; }
  .cpg-field, .cpg-models { grid-template-columns: 1fr auto; }
  .cpg-field .k, .cpg-models .k { grid-column: 1 / -1; padding-top: 0; }
}
@media (max-width: 820px) {
  .cpg-key-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cpg-card { transition: none; }
}

/* ---------- Quick Connect (METERLESS_RUNTIME_QUICK_CONNECT_ADDENDUM.md) ---------- */
.qc { display: flex; flex-direction: column; gap: 10px; }
.qc-scopes { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 2px; border-radius: 10px; background: var(--rt-bg-alt); box-shadow: var(--rt-ring); }
.qc-tab { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--rt-fg-3); border-radius: 8px; padding: 5px 8px; font-size: 12px; font-family: var(--font); cursor: pointer; white-space: nowrap; }
.qc-tab:hover { color: var(--rt-fg); }
.qc-tab.on { background: var(--rt-panel); color: var(--rt-fg); box-shadow: var(--rt-ring); }
.qc-tab-badge { font-family: var(--mono); font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--rt-bg-sunk); color: var(--rt-fg-3); }
.qc-tab-badge.live { color: var(--rt-green); }
.qc-tab-badge.wait { color: var(--rt-amber); }
.qc-select { margin-left: auto; font-size: 11px; padding: 4px 6px; border-radius: 8px; background: var(--rt-panel); color: var(--rt-fg); border: 1px solid var(--rt-border); }
.qc-callout { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--rt-amber) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-amber) 35%, transparent); font-size: 12px; line-height: 1.4; }
.qc-callout .mono { font-size: 11px; margin-top: 2px; }
.qc-fields { display: flex; flex-direction: column; gap: 2px; }
/* Label above, value on its own full-width line (it must be READABLE in
   the Console modal's narrow column: no ellipsis on a URL or a revealed
   key), actions under it. */
.qc-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; padding: 6px 8px; border-radius: 10px; }
.qc-field:hover { background: color-mix(in srgb, var(--rt-fg) 4%, transparent); }
.qc-field .k { grid-column: 1 / -1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rt-fg-3); }
.qc-field .v { grid-column: 1 / -1; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-all; line-height: 1.35; font-size: 12px; color: var(--rt-fg); user-select: text; }
.qc-field .qc-hint { grid-column: 1; font-size: 10.5px; min-width: 0; }
.qc-field .qc-acts { grid-column: 2; justify-self: end; }
.qc-acts { display: inline-flex; gap: 4px; flex-shrink: 0; }
.qc-acts .btn-rt { height: 26px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; }
.qc-acts .is-on { color: var(--rt-green); }
.qc-models { display: flex; gap: 6px; flex-wrap: wrap; }
.qc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.qc-actions .btn-rt { display: inline-flex; align-items: center; gap: 5px; }
.qc-qr { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; padding: 12px; border-radius: 12px; background: var(--rt-bg-alt); box-shadow: var(--rt-ring); }
.qc-qr-canvas { flex: 0 0 auto; }
.qc-qr .qr-canvas { width: 200px; height: 200px; padding: 12px; }
.qc-qr.compact .qr-canvas { width: 160px; height: 160px; padding: 10px; }
.qc-qr-meta { flex: 1; min-width: 200px; }
.qc-qr-text { font-size: 11px; margin-top: 4px; word-break: break-all; user-select: text; color: var(--rt-fg-2); }
.qc-note { font-size: 10.5px; line-height: 1.5; margin-top: 6px; }
.qc-warn { font-size: 10.5px; line-height: 1.5; margin-top: 6px; color: var(--rt-amber); }
.qc-err { font-size: 10.5px; color: var(--rt-coral); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-share { padding-top: 8px; border-top: 1px solid var(--rt-border); }
.qc-hotspot { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qc-hotspot-words { display: inline-flex; flex-direction: column; line-height: 1.25; }
.qc-hotspot-words b { font-size: 12px; font-weight: 600; color: var(--rt-fg); }
.qc-hotspot-words .mono { font-size: 10.5px; }
.qc-picker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.qc-picker-off { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; }
.cpg-acts { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.cpg-share { align-items: start; }
.cpg-share .qc-hotspot-state { margin-left: 8px; }
.cpg-qr { padding: 6px 10px 10px; }


/* =====================================================================
   Lanes desk (Lanes & memory / Fleets / Inventory) - ported from the DGX edition 1.4.3, 2026-10-13. Selector-scoped: these rules replace the older web copies of the same selectors.
   ===================================================================== */
/* Fleets atlas: the Queue's match line + hand-back button on the inspector */
.fla-insp-queue {
  margin: 6px 0 4px; padding: 6px 8px; border-radius: 6px;
  border: 1px dashed var(--rt-accent); background: color-mix(in srgb, var(--rt-accent) 8%, transparent);
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-2);
  display: flex; flex-direction: column; gap: 6px;
}
.fla-insp-queue b { color: var(--rt-fg); }
.fla-insp-queue .ns-sua-btn { align-self: flex-start; }
/* ---------------------------------------------------------------------
   LANES & MEMORY DESK (engine.jsx) — the 06 Task Desk shell
   (workshopping/lanes-explorations/06-task-desk-roles.html).

   A left sidebar carries the three sub-tabs (Lanes & memory, Fleets,
   Inventory) and the "your machine" card — free memory, what needs a
   hand, the daemon — so the number that decides whether a lane may
   start stays in view on every sub-tab. The main column is the fleet
   strip, the memory gauge, the toolbar and the lane board, one row per
   duty. Dialogs (ledger, add, swap, inspector, keys, notices, log)
   are portalled to <body> and painted from the same tokens.

   Every colour here is a semantic --rt-* token, so the desk inverts with
   the theme; the night palette the design was drawn in IS .theme-dark.
--------------------------------------------------------------------- */
.lmd {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  min-height: 100%;
  background: var(--rt-bg);
  color: var(--rt-fg);
  font-family: var(--font);
  letter-spacing: -0.01em;
}
.lmd-eyebrow {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--rt-fg-3);
}
.lmd-mono { font-family: var(--mono); font-size: 11px; color: var(--rt-fg-3); word-break: break-all; }
.lmd-muted { color: var(--rt-fg-3); }
.lmd-good { color: var(--rt-green); }
.lmd-bad { color: var(--rt-coral); }
.lmd-warnc { color: var(--rt-amber); }
.lmd-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lmd-wrap { flex-wrap: wrap; }
.lmd-between { justify-content: space-between; flex-wrap: nowrap; }
.lmd-center { justify-content: center; }
.lmd-end { justify-content: flex-end; }
.lmd-grow { flex: 1; }
.lmd-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; }
.lmd-divider { height: 1px; background: var(--rt-border); margin: 16px 0; }
.lmd-pill {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 4px 8px; border-radius: 30px;
  font: 10px/1.3 var(--mono); color: var(--rt-fg-2);
  background: var(--rt-bg-alt); box-shadow: inset 0 0 0 1px var(--rt-border);
}
.lmd-pill.mod, .lmd-pill.warn { color: var(--rt-amber); background: color-mix(in srgb, var(--rt-amber) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-amber) 35%, transparent); }
.lmd-pill.ok { color: var(--rt-green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-green) 35%, transparent); }
.lmd-pill.bad { color: var(--rt-coral); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-coral) 35%, transparent); }
/* Buttons: .btn-rt-ghost / .btn-rt / .lnb-act-primary, redrawn once. */
.lmd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; min-height: 32px; padding: 7px 12px;
  border: 0; border-radius: 7px; cursor: pointer;
  background: var(--rt-panel); color: var(--rt-fg); box-shadow: var(--rt-ring);
  font: 500 12px/1.2 var(--font); letter-spacing: -0.005em;
  transition: background 0.15s, box-shadow 0.15s;
}
.lmd-btn:hover:not(:disabled) { background: var(--rt-bg-alt); box-shadow: var(--rt-ring-strong); }
.lmd-btn:disabled { opacity: 0.45; cursor: default; }
.lmd-btn:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
.lmd-btn.quiet { background: transparent; box-shadow: none; color: var(--rt-fg-2); }
.lmd-btn.quiet:hover:not(:disabled) { background: var(--rt-panel); color: var(--rt-fg); }
.lmd-btn.primary { background: var(--rt-accent); color: #fff; box-shadow: none; font-weight: 600; }
.theme-dark .lmd-btn.primary { color: #0b0e1a; }
.lmd-btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--rt-accent) 86%, #fff); }
.lmd-btn.danger { color: var(--rt-coral); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rt-coral) 40%, transparent); }
.lmd-btn.danger.confirm { background: var(--rt-coral); color: #fff; box-shadow: none; }
.lmd-btn.icon { width: 34px; min-width: 34px; padding: 0; font-size: 19px; line-height: 1; }
/* ---- the sidebar ---------------------------------------------------- */
.lmd-side {
  position: sticky; top: 0; align-self: start;
  max-height: calc(100vh - 120px); overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 22px 14px 18px;
  background: var(--rt-bg-alt);
  border-right: 1px solid var(--rt-border);
}
.lmd-side-h { margin: 0 10px 12px; }
.lmd-nav { display: flex; flex-direction: column; gap: 4px; }
.lmd-nav button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 11px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--rt-fg-2); text-align: left;
  font: 500 12.5px/1.25 var(--font);
}
.lmd-nav button:hover { background: var(--rt-panel); color: var(--rt-fg); }
.lmd-nav button.active { background: var(--rt-panel); color: var(--rt-fg); box-shadow: var(--rt-ring); }
.lmd-nav-g { font-size: 16px; width: 18px; text-align: center; color: var(--rt-fg-3); }
.lmd-nav button.active .lmd-nav-g { color: var(--rt-accent); }
.lmd-nav-t { flex: 1; min-width: 0; }
.lmd-nav-n { font: 10px var(--mono); color: var(--rt-fg-3); letter-spacing: 0; }
.lmd-side-bottom { margin-top: auto; padding: 18px 10px 0; font-size: 10.5px; line-height: 1.65; color: var(--rt-fg-3); }
.lmd-side-bottom strong { color: var(--rt-fg-2); font-weight: 500; }
/* The machine card. */
.lmd-machine {
  margin: 18px 2px 0; padding: 16px 15px;
  border-radius: 14px; background: var(--rt-panel); box-shadow: var(--rt-ring);
}
.lmd-machine .lmd-eyebrow { font-size: 9px; }
.lmd-machine h2 { margin: 10px 0 0; font: 600 17px/1.2 var(--font); letter-spacing: -0.02em; color: var(--rt-fg); }
.lmd-machine h3 { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--rt-fg); }
.lmd-machine p { margin: 6px 0 0; font-size: 11px; line-height: 1.55; color: var(--rt-fg-2); word-break: break-word; }
.lmd-machine p b { color: var(--rt-fg); font-weight: 600; }
.lmd-machine > .lmd-btn { width: 100%; margin-top: 10px; font-size: 11px; min-height: 30px; }
.lmd-big-number { margin: 12px 0 8px; font: 500 34px/1.05 var(--mono); letter-spacing: -0.04em; color: var(--rt-fg); }
.lmd-big-number small { margin-left: 6px; font-size: 11px; letter-spacing: 0; color: var(--rt-fg-3); }
.lmd-attn-item { padding: 8px 0 0; }
.lmd-attn-item p { margin: 0; }
.lmd-attn-item .lmd-btn { width: 100%; margin-top: 6px; font-size: 11px; min-height: 28px; }
/* ---- the main column ------------------------------------------------- */
.lmd-main { min-width: 0; padding: 16px 24px 24px; }
.lmd-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--rt-border);
}
.lmd-crumb { font: 11px var(--mono); letter-spacing: 0.04em; color: var(--rt-fg-3); margin-right: auto; }
.lmd-crumb span { opacity: 0.5; margin: 0 3px; }
.lmd-status { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 11px; color: var(--rt-fg-3); }
.lmd-sep { opacity: 0.4; }
.lmd-notice-btn { min-height: 30px; font-size: 11.5px; }
.lmd-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--rt-coral); color: #fff; font: 600 10px var(--mono);
}
.lmd-badge.zero { background: var(--rt-panel-alt); color: var(--rt-fg-3); }
.lmd-hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--rt-border);
}
.lmd-hero h1 { margin: 8px 0 0; font: 600 28px/1.15 var(--font); letter-spacing: -0.03em; color: var(--rt-fg); }
.lmd-hero p { margin: 9px 0 0; max-width: 640px; font-size: 12.5px; line-height: 1.65; color: var(--rt-fg-2); }
.lmd-hero-peek { margin-top: 8px; font: 11px var(--mono); color: var(--rt-fg-3); }
.lmd-hero-actions .lmd-btn.primary { padding: 11px 18px; font-size: 12.5px; }
.lmd-subbody { min-width: 0; }
.lmd-foot {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--rt-border);
  font: 9.5px/1.8 var(--mono); color: var(--rt-fg-3);
}
/* Fleet strip. */
.lmd-fleetbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 15px; border-radius: 14px; background: var(--rt-panel); box-shadow: var(--rt-ring);
}
.lmd-fleetbar .fb-name { font-size: 14.5px; font-weight: 600; color: var(--rt-fg); }
.lmd-fleetbar .fb-id { font: 11px var(--mono); color: var(--rt-fg-3); }
.lmd-fleetbar .fb-text { flex: 1; min-width: 220px; font-size: 11px; line-height: 1.5; color: var(--rt-fg-2); }
.lmd-fleetbar .fb-switch { flex-basis: 100%; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--rt-amber); }
.lmd-fleetbar .fb-switch .bar { flex: 1; max-width: 260px; min-width: 100px; height: 6px; border-radius: 6px; background: var(--rt-bg-sunk); overflow: hidden; }
.lmd-fleetbar .fb-switch .bar span { display: block; height: 100%; background: var(--rt-amber); transition: width 0.4s; }
.lmd-fleetbar .fb-note {
  flex-basis: 100%; display: flex; gap: 10px; align-items: baseline;
  padding-top: 10px; border-top: 1px solid var(--rt-border);
  font-size: 11px; line-height: 1.6; color: var(--rt-fg-2);
}
.lmd-fleetbar .fb-note span { flex: 1; }
/* Recent fleets (in the strip). */
.lnb-recent { position: relative; }
.lnb-recent-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  width: 340px; max-width: min(380px, 80vw); max-height: 420px;
  overflow: auto; padding: 6px;
  border-radius: 12px; background: var(--rt-panel);
  box-shadow: var(--rt-ring), 0 12px 32px rgba(0,0,0,0.35);
}
.lnb-recent-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px;
  width: 100%; text-align: left; border: 0; background: transparent;
  padding: 9px 11px; border-radius: 8px; cursor: pointer; color: var(--rt-fg);
  font-family: var(--font);
}
.lnb-recent-row:hover:not(:disabled) { background: var(--rt-bg-alt); }
.lnb-recent-row:disabled { cursor: default; opacity: 0.72; }
.lnb-recent-row.is-now { box-shadow: inset 0 0 0 1px var(--rt-accent); }
.lnb-recent-name { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lnb-recent-meta { font: 10px var(--mono); color: var(--rt-fg-3); align-self: center; }
.lnb-recent-row.is-now .lnb-recent-meta { color: var(--rt-accent); }
.lnb-recent-id { grid-column: 1 / -1; font: 10.5px var(--mono); color: var(--rt-fg-3); margin-top: 2px; }
.lnb-recent-empty { padding: 12px; font-size: 12px; line-height: 1.5; color: var(--rt-fg-3); }
.lnb-recent-banner {
  margin: 4px 4px 8px; padding: 10px 11px; border-radius: 8px;
  font-size: 11px; line-height: 1.5; color: var(--rt-amber);
  background: var(--rt-bg-alt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-amber) 30%, transparent);
}
.lnb-recent-banner-a { display: flex; gap: 6px; margin-top: 8px; }
.lnb-recent-banner-a .lmd-btn { min-height: 28px; font-size: 11px; }
/* The gauge: the ledger folded to a line. */
.lmd-gauge {
  display: flex; align-items: center; gap: 20px; margin-top: 12px;
  padding: 12px 16px; border-radius: 14px; background: var(--rt-panel); box-shadow: var(--rt-ring);
}
.lmd-gauge .g-fig { min-width: 140px; white-space: nowrap; }
.lmd-gauge .g-fig b { font: 500 22px var(--mono); letter-spacing: -0.03em; color: var(--rt-fg); }
.lmd-gauge .g-fig small { margin-left: 4px; font-size: 11px; color: var(--rt-fg-3); }
.lmd-gauge .g-fig span { display: block; margin-top: 3px; font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rt-fg-3); }
.lmd-gauge .g-right { text-align: right; font-size: 11px; line-height: 1.5; color: var(--rt-fg-2); }
.lmd-gauge .g-right strong { color: var(--rt-fg); font-weight: 500; }
.lmd-hstack {
  flex: 1; display: flex; gap: 2px; height: 14px; padding: 2px; min-width: 80px;
  border-radius: 7px; background: var(--rt-bg-sunk); box-shadow: var(--rt-ring);
}
.lmd-hstack.sm { height: 10px; border-radius: 5px; margin-top: 4px; }
.lmd-hstack.is-over { box-shadow: inset 0 0 0 1px var(--rt-coral); }
.lmd-hstack .hs { min-width: 0; border-radius: 3px; }
.lmd-hstack .hs-lanes { display: flex; gap: 2px; background: transparent !important; }
.lmd-hstack .hs-lane { min-width: 2px; border-radius: 2px; cursor: pointer; transition: opacity 0.15s, box-shadow 0.15s; }
.lmd-hstack .hs-ghost, .lmd-mlg-stack .seg-ghost {
  background-image: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--rt-accent) 18%, transparent) 5px 10px) !important;
  box-shadow: inset 0 0 0 1px var(--rt-accent);
}
.lmd-hstack .hs-hatch, .lmd-mlg-stack .seg-hatch {
  background-image: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(255,255,255,0.12) 4px 8px);
}
/* Hover linking: the hovered lane's brick lights, the rest dim. */
.lmd-dim .hs-lane:not(.lmd-hl-on), .lmd-dim .seg-lane:not(.lmd-hl-on), .lmd-dim .seg:not(.lmd-hl-on):not(.seg-lanes) { opacity: 0.28; }
.hs-lane.lmd-hl-on, .seg-lane.lmd-hl-on { box-shadow: 0 0 0 2px var(--rt-fg); }
/* Toolbar. */
.lmd-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 14px 0 12px; }
.lmd-search { position: relative; display: flex; align-items: center; flex: 1 1 200px; min-width: 160px; max-width: 320px; }
.lmd-search input {
  width: 100%; height: 34px; padding: 0 28px 0 30px; border-radius: 9px;
  border: 1px solid var(--rt-border); background: var(--rt-bg-sunk); color: var(--rt-fg);
  font: 12.5px var(--font);
}
.lmd-search input:focus { outline: none; border-color: var(--rt-accent); }
.lmd-search input::placeholder { color: var(--rt-fg-3); }
.lmd-search-i { position: absolute; left: 10px; color: var(--rt-fg-3); pointer-events: none; display: inline-flex; }
.lmd-search-x {
  position: absolute; right: 5px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: var(--rt-fg-3); cursor: pointer; font: 13px/1 var(--mono);
}
.lmd-search-x:hover { background: var(--rt-border); color: var(--rt-fg); }
.lmd-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--rt-bg-alt); box-shadow: var(--rt-ring); }
.lmd-seg button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px;
  border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font: 10.5px var(--mono); letter-spacing: 0.02em; color: var(--rt-fg-3);
}
.lmd-seg button:hover { color: var(--rt-fg); }
.lmd-seg button .n { font-size: 10px; opacity: 0.75; }
.lmd-seg button.on { background: var(--rt-panel); color: var(--rt-accent); box-shadow: var(--rt-ring); }
.lmd-seg button.warnc, .lmd-seg button.warnc .n { color: var(--rt-amber); opacity: 1; }
.lmd-seg button.is-media.on { color: var(--rt-violet, #a78bfa); }
.lmd-tb-confirm { display: inline-flex; gap: 6px; align-items: center; }
/* Banners. */
.lmd-banners:empty { display: none; }
.lmd-banner {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 0 0 10px; padding: 9px 12px; border-radius: 9px;
  font: 11px/1.5 var(--mono);
}
.lmd-banner > span:first-child { flex: 1; min-width: 200px; }
.lmd-banner .lmd-btn { min-height: 28px; font-size: 11px; }
.lmd-banner.warn { color: var(--rt-amber); background: color-mix(in srgb, var(--rt-amber) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-amber) 35%, transparent); }
.lmd-banner.bad { color: var(--rt-coral); background: color-mix(in srgb, var(--rt-coral) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-coral) 35%, transparent); }
/* ---- the board: one row per duty ---------------------------------- */
.lmd-board { border-radius: 14px; }
.lmd-flash { animation: lmd-flash 1.8s ease; }
@keyframes lmd-flash {
  12%, 55% { box-shadow: 0 0 0 2px var(--rt-accent); }
  100% { box-shadow: var(--rt-ring); }
}
@media (prefers-reduced-motion: reduce) { .lmd-flash { animation: none; } }
.lmd-sectionhead { margin: 18px 0 14px; }
.lmd-sectionhead h2 { margin: 8px 0 0; font: 600 19px/1.2 var(--font); letter-spacing: -0.02em; color: var(--rt-fg); }
.lmd-sectionhead p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--rt-fg-2); }
.lmd-rack { display: grid; gap: 12px; }
.lmd-track {
  display: grid; grid-template-columns: 186px minmax(0, 1fr);
  border-radius: 14px; overflow: hidden; background: var(--rt-panel); box-shadow: var(--rt-ring);
}
.lmd-track > header { padding: 18px 16px; background: var(--rt-panel-alt); border-right: 1px solid var(--rt-border); }
.lmd-track-n { font: 11px var(--mono); letter-spacing: 0.12em; color: var(--rt-accent); }
.lmd-track > header h2 { margin: 10px 0 7px; font: 600 16px/1.2 var(--font); letter-spacing: -0.02em; color: var(--rt-fg); }
.lmd-track > header p { margin: 0 0 12px; font-size: 11px; line-height: 1.55; color: var(--rt-fg-2); }
.lmd-track > header .warnnote { display: block; margin-top: 8px; font-size: 10.5px; line-height: 1.45; color: var(--rt-coral); }
.lmd-track-lanes { display: flex; gap: 12px; align-items: flex-start; padding: 14px; overflow-x: auto; }
.lmd-track-add {
  flex: 0 0 120px; align-self: stretch; min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border: 1px dashed var(--rt-border-strong); border-radius: 11px;
  background: transparent; color: var(--rt-fg-3); cursor: pointer; font-family: var(--font);
}
.lmd-track-add > span { font-size: 26px; line-height: 1; color: var(--rt-accent); }
.lmd-track-add p { margin: 0; font-size: 11px; text-align: center; }
.lmd-track-add:hover:not(:disabled), .lmd-track-add:focus-visible {
  border-color: var(--rt-accent); color: var(--rt-fg); background: color-mix(in srgb, var(--rt-accent) 6%, transparent);
}
.lmd-track-add:disabled { opacity: 0.45; cursor: default; }
.lmd-track-none { align-self: center; max-width: 220px; margin: 0; font-size: 11px; line-height: 1.5; color: var(--rt-fg-3); }
/* A lane card. */
.lmd-tile {
  position: relative; flex: 0 0 290px; width: 290px; min-width: 0;
  padding: 13px 14px 12px 16px; border-radius: 11px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
  border-left: 3px solid var(--lane, var(--rt-border-strong));
  transition: box-shadow 0.2s, opacity 0.2s;
}
.lmd-tile:hover { box-shadow: var(--rt-ring-strong); }
.lmd-tile.is-attn { border-left-color: var(--rt-coral); }
.lmd-tile.is-off { opacity: 0.62; }
.lmd-tile.is-media { background: color-mix(in srgb, var(--rt-violet, #a78bfa) 7%, var(--rt-bg-alt)); }
.lmd-tile.lmd-hl-on { box-shadow: 0 0 0 1px var(--rt-accent); }
.lmd-lt-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lmd-st { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font: 10px var(--mono); }
.lmd-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.lmd-st.busy { color: var(--rt-accent) !important; }
.lmd-st.starting i, .lmd-st.stopping i { animation: lmd-pulse 1.2s infinite; }
@keyframes lmd-pulse { 50% { opacity: 0.25; } }
.lmd-lt-name { display: flex; align-items: center; gap: 9px; margin: 10px 0 3px; }
.lmd-lt-name h3 {
  margin: 0; min-width: 0; font: 600 13px/1.3 var(--mono); color: var(--rt-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lmd-swatch {
  flex: none; width: 16px; height: 16px; min-height: 16px; padding: 0; border: 0; border-radius: 50%;
  background: var(--lane); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); cursor: pointer;
}
.lmd-swatch.unset { box-shadow: inset 0 0 0 1.5px var(--rt-fg-3); }
.lmd-tile .lnb-sub { margin: 0; padding: 0; font-family: var(--font); font-size: 11px; line-height: 1.45; color: var(--rt-fg-2); word-break: break-word; }
.lmd-tile .lnb-sub b { color: var(--rt-fg); font-weight: 500; }
.lmd-lt-metrics {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 2px;
  font: 10px var(--mono); color: var(--rt-fg-3); font-variant-numeric: tabular-nums;
}
.lmd-lt-metrics .busy { color: var(--rt-accent); font-weight: 600; }
.lmd-lt-metrics .loop { color: var(--rt-coral); font-weight: 700; }
.lmd-lt-line {
  display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap;
  margin-top: 6px; font-size: 11px; line-height: 1.5; word-break: break-word;
}
.lmd-lt-line.ok { color: var(--rt-green); }
.lmd-lt-line.warn { color: var(--rt-amber); }
.lmd-lt-line.bad { color: var(--rt-coral); }
.lmd-lt-line.mut { color: var(--rt-fg-3); }
.lmd-lt-line .lmd-btn { min-height: 24px; padding: 3px 8px; font-size: 10.5px; }
.lmd-tog {
  min-height: 22px; padding: 2px 8px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--rt-border-strong); background: transparent; color: var(--rt-fg-3); font: 10px var(--mono);
}
.lmd-tog[aria-pressed="true"] { border-color: var(--rt-green); color: var(--rt-green); }
.lmd-tile .lnb-load { margin-top: 8px; padding-left: 0; }
.lmd-lt-actions {
  display: flex; gap: 6px; align-items: stretch;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--rt-border);
}
.lmd-lt-actions .lnb-act-w { flex: 1.5 1 0; min-width: 0; }
.lmd-lt-actions .lnb-act-w:first-child { flex-grow: 1; }
.lmd-lt-actions .lnb-act-w:last-child { flex: 0 0 34px; }
.lmd-lt-actions .lnb-act { width: 100%; height: 32px; padding: 0 6px; font-size: 10.5px; justify-content: center; gap: 5px; }
.lmd-lt-actions .lnb-act-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lnb-act.lmd-more .lnb-act-i { font-size: 14px; opacity: 1; }
.lnb-act.lmd-more .lnb-act-l { display: none; }
/* Densities. */
.lmd-rack.view-rows .lmd-track-lanes { flex-direction: column; align-items: stretch; overflow: visible; }
.lmd-rack.view-rows .lmd-tile { width: auto; flex: 0 0 auto; }
.lmd-rack.view-rows .lmd-track-add { min-height: 46px; flex: 0 0 auto; flex-direction: row; }
.lmd-rack.view-dense .lmd-tile { flex-basis: 232px; width: 232px; padding: 10px 11px 9px 13px; }
.lmd-rack.view-dense .lnb-sub { display: none; }
.lmd-rack.view-dense .lmd-lt-line.mut, .lmd-rack.view-dense .lmd-lt-line.ok { display: none; }
.lmd-rack.view-dense .lmd-lt-name { margin: 7px 0 2px; }
.lmd-rack.view-dense .lmd-track-add { flex-basis: 96px; min-height: 104px; }
.lmd-board-foot {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px;
  font: 10.5px var(--mono); color: var(--rt-fg-3);
}
.lmd-board-foot .lmd-btn { min-height: 28px; font: 500 11px var(--font); }
.lmd-empty {
  padding: 46px 20px; text-align: center; border-radius: 14px; border: 1px dashed var(--rt-border-strong);
}
.lmd-empty h2, .lmd-empty h3 { margin: 0; font: 600 17px/1.3 var(--font); color: var(--rt-fg); }
.lmd-empty p { margin: 10px auto 18px; max-width: 520px; font-size: 12px; line-height: 1.6; color: var(--rt-fg-2); }
.lmd-down {
  max-width: 760px; padding: 24px; border-radius: 14px; background: var(--rt-panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-coral) 35%, transparent);
}
.lmd-down h2 { margin: 8px 0; font: 600 20px var(--font); color: var(--rt-fg); }
.lmd-down p { font-size: 12.5px; line-height: 1.6; color: var(--rt-fg-2); }
.lmd-down b { color: var(--rt-fg); }
.lmd-down pre, .lmd-pre {
  margin: 12px 0; padding: 14px 16px; border-radius: 10px; max-height: 420px; overflow: auto;
  background: var(--rt-bg-sunk); color: var(--rt-fg-2); box-shadow: var(--rt-ring);
  font: 11px/1.8 var(--mono); white-space: pre-wrap; word-break: break-word;
}
.lmd-aside { margin-top: 18px; }
.lmd-aside .lmd-machine { margin: 0; }
/* ---- slim: the sidebar becomes a strip, tracks stack -------------- */
.lmd.lmd-slim { grid-template-columns: minmax(0, 1fr); }
.lmd-slim .lmd-side {
  position: sticky; top: 0; z-index: 3; max-height: none; overflow: visible;
  flex-direction: row; align-items: center; padding: 8px 12px;
  border-right: 0; border-bottom: 1px solid var(--rt-border);
}
.lmd-slim .lmd-side-h { display: none; }
.lmd-slim .lmd-nav { flex-direction: row; flex-wrap: wrap; }
.lmd-slim .lmd-nav button { width: auto; padding: 7px 10px; }
.lmd-slim .lmd-main { padding: 12px 14px 20px; }
.lmd-slim .lmd-status .lmd-opt { display: none; }
.lmd-slim .lmd-hero { flex-direction: column; align-items: stretch; gap: 12px; }
.lmd-slim .lmd-hero h1 { font-size: 22px; }
.lmd-slim .lmd-hero p { display: none; }
.lmd-slim .lmd-gauge { flex-wrap: wrap; gap: 10px; }
.lmd-slim .lmd-gauge .lmd-hstack { flex-basis: 100%; order: 3; }
.lmd-slim .lmd-gauge .g-right { text-align: left; }
.lmd-slim .lmd-fleetbar .fb-text { min-width: 0; flex-basis: 100%; }
.lmd-slim .lmd-track { grid-template-columns: minmax(0, 1fr); }
.lmd-slim .lmd-track > header {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-right: 0; border-bottom: 1px solid var(--rt-border);
}
.lmd-slim .lmd-track > header h2 { margin: 0; font-size: 15px; }
.lmd-slim .lmd-track > header p { display: none; }
.lmd-slim .lmd-track > header .lmd-pill { margin-left: auto; }
.lmd-slim .lmd-tile { flex-basis: 256px; width: 256px; }
.lmd-slim .lmd-foot { display: none; }
/* ---- dialogs (portalled to <body>) -------------------------------- */
.lmd-overlay {
  position: fixed; inset: 0; z-index: 62;
  display: flex; justify-content: flex-end;
  background: rgba(4, 6, 14, 0.62); backdrop-filter: blur(6px);
  color: var(--rt-fg); font-family: var(--font); letter-spacing: -0.01em;
}
.lmd-dialog {
  width: 560px; max-width: 100%; height: 100%; overflow: auto;
  padding: 26px 28px; background: var(--rt-panel); color: var(--rt-fg);
  border-left: 1px solid var(--rt-border); box-shadow: -20px 0 70px rgba(0,0,0,0.4);
}
.lmd-dialog.wide { width: 820px; }
.lmd-dialog.ledger { width: 900px; }
.lmd-dialog.model-picker {
  width: 1180px; max-width: calc(100vw - 22px); height: calc(100% - 28px); margin: 14px;
  border: 1px solid var(--rt-border); border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 20px 100px rgba(0,0,0,0.5);
}
.lmd-dialog-head { display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.lmd-dialog-head h2 { margin: 0; font: 600 24px/1.2 var(--font); letter-spacing: -0.02em; color: var(--rt-fg); overflow-wrap: anywhere; }
.lmd-dialog-body > p, .lmd-dialog p { font-size: 12.5px; line-height: 1.6; color: var(--rt-fg-2); margin: 0 0 12px; }
.lmd-dialog-footer { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.lmd-note { margin-top: 14px !important; font-size: 11.5px !important; color: var(--rt-fg-3) !important; }
.lmd-hint { margin-top: 8px; font-size: 11px; line-height: 1.55; }
.lmd-hint.bad { color: var(--rt-coral); }
.lmd-hint.warn { color: var(--rt-amber); }
.lmd-hint.ok { color: var(--rt-green); }
.lmd-hint.mut { color: var(--rt-fg-3); }
.lmd-hint .lmd-btn { min-height: 26px; padding: 3px 9px; font-size: 11px; margin-top: 4px; }
.lmd-check { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0; font-size: 12px; line-height: 1.45; color: var(--rt-fg-2); cursor: pointer; }
.lmd-check input { accent-color: var(--rt-accent); width: 15px; height: 15px; flex: none; margin-top: 1px; }
.lmd-field { display: block; margin: 14px 0; font-size: 11.5px; color: var(--rt-fg-3); }
.lmd-field input, .lmd-field select, .lmd-inline input, .lmd-inline select:not(.lnb-duty) {
  display: block; width: 100%; margin-top: 7px; min-height: 38px; padding: 9px 11px;
  border: 1px solid var(--rt-border); border-radius: 8px;
  background: var(--rt-bg-sunk); color: var(--rt-fg); font: 12.5px var(--font);
}
.lmd-field input:focus, .lmd-field select:focus, .lmd-inline input:focus { outline: none; border-color: var(--rt-accent); }
.lmd-field select option { background: var(--rt-panel); color: var(--rt-fg); }
.lmd-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.lmd-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.lmd-inline input { width: 220px; flex: 1 1 160px; margin-top: 0; font-family: var(--mono); font-size: 12px; }
.lmd-callout {
  margin: 16px 0; padding: 12px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--rt-accent) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-accent) 25%, transparent);
}
.lmd-callout h3 { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--rt-fg); }
.lmd-callout p { margin: 5px 0 0 !important; font-size: 11px !important; }
.lmd-swatches { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.lmd-swatches button {
  width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.lmd-swatches button.on { box-shadow: 0 0 0 2px var(--rt-panel), 0 0 0 4px var(--rt-fg); }
.lmd-swatches button.unset {
  width: auto; padding: 0 9px; border-radius: 12px; background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--rt-fg-3); color: var(--rt-fg-3); font: 10px var(--mono);
}
.lmd-swatches button.unset.on { box-shadow: inset 0 0 0 1.5px var(--rt-fg), 0 0 0 2px var(--rt-panel); color: var(--rt-fg); }
.lmd-swatches button:disabled { cursor: default; }
/* Inspector. */
.lmd-insp-sec { padding: 15px 0; border-top: 1px solid var(--rt-border); }
.lmd-insp-sec.first { border-top: 0; padding-top: 10px; }
.lmd-insp-sec h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--rt-fg); }
.lmd-insp-sec p { margin: 0 !important; font-size: 11.5px !important; }
.lmd-facts { margin: 4px 0 0; }
.lmd-facts div { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; border-bottom: 1px solid var(--rt-border); font-size: 11px; }
.lmd-facts dt { color: var(--rt-fg-3); flex: none; }
.lmd-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-family: var(--mono); color: var(--rt-fg); }
.lmd-verbs { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.lmd-verbs .lmd-btn { font-size: 11.5px; }
/* Keys + notices. */
.lmd-keyrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rt-border); }
.lmd-keyrow h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--rt-fg); }
.lmd-keyrow h3 span { margin-left: 8px; font-size: 11px; font-weight: 500; }
.lmd-keyrow p { margin: 3px 0 0 !important; font-size: 11px !important; }
.lmd-keyrow .lmd-inline { grid-column: 1 / -1; margin: 0; }
.lmd-notice { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--rt-border); }
.lmd-notice .ni { font-size: 14px; line-height: 1.3; text-align: center; color: var(--rt-fg-3); }
.lmd-notice .ni.err { color: var(--rt-coral); }
.lmd-notice .ni.ok { color: var(--rt-green); }
.lmd-notice .ni.warn { color: var(--rt-amber); }
.lmd-notice .ni.fleet { color: var(--rt-accent); }
.lmd-notice .nt { font-size: 12px; line-height: 1.55; color: var(--rt-fg-2); word-break: break-word; }
.lmd-notice.unread .nt { color: var(--rt-fg); font-weight: 550; }
.lmd-notice .nm { grid-column: 2; display: flex; gap: 8px; align-items: center; font: 10px var(--mono); color: var(--rt-fg-3); }
.lmd-notice .nm .lmd-btn { min-height: 24px; padding: 3px 8px; font: 500 11px var(--font); }
/* Tools menu. */
.lmd-menu {
  position: fixed; z-index: 64; overflow: auto; padding: 6px;
  border-radius: 12px; background: var(--rt-panel); color: var(--rt-fg);
  box-shadow: var(--rt-ring), 0 12px 32px rgba(0,0,0,0.38);
  font-family: var(--font); letter-spacing: -0.01em;
}
.lmd-menu-h, .lnb-recent-menu .lmd-menu-h {
  padding: 10px 12px 6px; font: 9px var(--mono); letter-spacing: 0.17em; text-transform: uppercase; color: var(--rt-fg-3);
}
.lmd-menu-item {
  display: flex; width: 100%; align-items: center; gap: 12px; min-height: 40px;
  padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  color: var(--rt-fg); text-align: left; font: 12px/1.3 var(--font);
}
.lmd-menu-item:hover:not(:disabled), .lmd-menu-item:focus-visible { background: var(--rt-bg-alt); outline: none; }
.lmd-menu-item:disabled { opacity: 0.45; cursor: default; }
.lmd-menu-item .mi-i { width: 18px; flex: none; text-align: center; font-size: 14px; color: var(--rt-fg-3); }
.lmd-menu-item .mi-t { flex: 1; min-width: 0; }
.lmd-menu-item .mi-t small { display: block; margin-top: 3px; font-size: 10px; line-height: 1.4; color: var(--rt-fg-3); }
.lmd-menu-item .mi-stack { display: flex; margin-top: 8px; }
.lmd-menu-item.feature { margin: 4px 0 6px; padding: 12px; background: var(--rt-bg-alt); box-shadow: inset 0 0 0 1px var(--rt-border); }
.lmd-menu-sep { height: 1px; margin: 6px 4px; background: var(--rt-border); }
/* Add a lane, step 1. */
.lmd-job-q { margin: 10px 0 4px; font: 600 23px/1.25 var(--font); letter-spacing: -0.02em; color: var(--rt-fg); }
.lmd-job-lead { font-size: 12px !important; }
.lmd-family-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.lmd-family-nav button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 12px;
  border: 1px solid var(--rt-border); border-radius: 8px; background: var(--rt-bg-alt); color: var(--rt-fg-2);
  cursor: pointer; font: 500 11.5px var(--font);
}
.lmd-family-nav button span { font-size: 14px; }
.lmd-task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.lmd-task-card {
  display: flex; flex-direction: column; gap: 6px; padding: 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--rt-border); border-radius: 9px; background: var(--rt-bg-alt);
  color: var(--rt-fg-3); font: 10.5px/1.4 var(--font);
}
.lmd-task-card .job-name { font-size: 12.5px; font-weight: 600; color: var(--rt-fg); }
.lmd-family-nav button.active, .lmd-task-card.active {
  background: color-mix(in srgb, var(--rt-accent) 12%, var(--rt-bg-alt));
  border-color: color-mix(in srgb, var(--rt-accent) 45%, transparent);
  color: var(--rt-accent);
}
.lmd-task-card.active span:not(.job-name) { color: var(--rt-fg-2); }
.lmd-job-brief {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 18px; padding: 20px 22px; border-radius: 12px; background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
}
.lmd-job-brief h2 { margin: 8px 0; font: 600 21px/1.25 var(--font); color: var(--rt-fg); }
.lmd-job-brief p { margin: 0 0 10px !important; font-size: 12px !important; }
/* The model picker. */
.lmd-picker-summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 18px; padding: 10px 14px; border-radius: 8px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring); font-size: 11.5px; color: var(--rt-fg-2);
}
.lmd-picker-summary .lmd-btn { margin-right: auto; min-height: 28px; font-size: 11px; }
.lmd-picker-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 290px; gap: 20px; }
.lmd-picker-tax { padding-right: 16px; border-right: 1px solid var(--rt-border); }
.lmd-picker-tax p { font-size: 11px !important; }
.lmd-src-seg { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.lmd-src-seg button {
  min-height: 30px; padding: 5px 10px; border: 1px solid var(--rt-border); border-radius: 7px;
  background: var(--rt-bg-alt); color: var(--rt-fg-2); cursor: pointer; font: 11px var(--font);
}
.lmd-src-seg button.on { border-color: var(--rt-accent); color: var(--rt-accent); }
.lmd-swap-now { display: flex; gap: 10px; align-items: center; margin: 10px 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--rt-bg-alt); font: 11px var(--mono); color: var(--rt-fg-3); word-break: break-all; }
.lmd-swap-now b { color: var(--rt-fg); }
.lmd-swap-now .sw { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.lmd-picker-results { min-width: 0; }
.lmd-catalog-search {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--rt-border); border-radius: 8px; background: var(--rt-bg-sunk); color: var(--rt-fg-3);
}
.lmd-catalog-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--rt-fg); font: 12px var(--font); }
.lmd-results-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 11px; color: var(--rt-fg-3); }
.lmd-results-head .lmd-btn { min-height: 28px; font-size: 11px; }
.lmd-model-results { display: grid; gap: 8px; max-height: calc(100vh - 260px); overflow: auto; padding: 2px; }
.lmd-grp-h { padding: 12px 2px 3px; font: 9px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rt-fg-3); }
.lmd-grp-h.ok { color: var(--rt-green); }
.lmd-grp-h.warn { color: var(--rt-amber); }
.lmd-grp-h.bad { color: var(--rt-coral); }
.lmd-grp-more { padding: 4px 2px; font: 10.5px var(--mono); color: var(--rt-fg-3); }
.lmd-model-result {
  display: block; width: 100%; padding: 12px 13px; text-align: left; cursor: pointer;
  border: 1px solid var(--rt-border); border-radius: 9px; background: var(--rt-bg-alt); color: var(--rt-fg);
  font-family: var(--font);
}
.lmd-model-result:hover { border-color: var(--rt-border-strong); background: var(--rt-panel-alt); }
.lmd-model-result.chosen { border-color: var(--rt-accent); background: color-mix(in srgb, var(--rt-accent) 8%, var(--rt-bg-alt)); }
.lmd-model-result.over { opacity: 0.72; }
.lmd-model-result h3 { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.lmd-model-result p { margin: 5px 0 9px !important; font-size: 10.5px !important; color: var(--rt-fg-3) !important; word-break: break-all; }
.lmd-model-result .lmd-row { gap: 5px; }
.lmd-model-result .lmd-pill { font-size: 9.5px; padding: 3px 7px; }
.lmd-model-result .radio-mark { font-size: 16px; color: var(--rt-accent); }
.lmd-picker-config { min-width: 0; padding-left: 18px; border-left: 1px solid var(--rt-border); }
.lmd-picker-config > .lmd-eyebrow { margin-bottom: 14px; }
.lmd-sel h2 { margin: 8px 0; font: 600 20px/1.25 var(--font); color: var(--rt-fg); overflow-wrap: anywhere; }
.lmd-sel p { font-size: 11px !important; word-break: break-word; }
.lmd-sel .lmd-dialog-footer .lmd-btn.primary { flex: 1; }
.lmd-no-sel { padding-top: 28px; }
.lmd-no-sel h2 { margin: 14px 0 8px; font: 600 20px var(--font); color: var(--rt-fg); }
.lmd-type-icon {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; font-size: 24px;
  color: var(--rt-accent); background: color-mix(in srgb, var(--rt-accent) 10%, transparent);
}
.lmd-fit { margin: 14px 0 10px; padding: 11px 13px; border-radius: 8px; background: var(--rt-bg-alt); box-shadow: var(--rt-ring); font-size: 12px; color: var(--rt-fg-2); }
.lmd-fit.good { color: var(--rt-green); }
.lmd-fit.warn { color: var(--rt-amber); }
.lmd-fit.bad { color: var(--rt-coral); }
.lmd-fit p { margin: 5px 0 0 !important; color: var(--rt-fg-3) !important; }
.lmd-fit .lmd-btn { margin-top: 8px; font-size: 11px; min-height: 28px; }
.lmd-dl { flex: 1; display: flex; align-items: center; gap: 8px; font: 10px var(--mono); color: var(--rt-fg-3); }
.lmd-dl .bar { flex: 1; height: 5px; border-radius: 5px; background: var(--rt-bg-sunk); overflow: hidden; }
.lmd-dl .bar span { display: block; height: 100%; background: var(--rt-accent); }
/* The memory ledger (dialog). */
.lmd-mlg-h { display: flex; align-items: flex-start; gap: 10px; }
.lmd-mlg-sub { flex: 1; margin: 0 !important; font-size: 12px !important; }
.lmd-mlg-src { flex: none; padding: 4px 9px; border-radius: 20px; font: 10px var(--mono); color: var(--rt-fg-3); box-shadow: inset 0 0 0 1px var(--rt-border); white-space: nowrap; }
.lmd-mlg-figure { margin-top: 16px; }
.lmd-mlg-big { font: 500 50px/1 var(--mono); letter-spacing: -0.04em; color: var(--rt-fg); }
.lmd-mlg-big-u { margin-left: 6px; font: 13px var(--mono); color: var(--rt-fg-3); }
.lmd-mlg-big-lbl { display: block; margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--rt-fg-3); }
.lmd-mlg-pct { margin-top: 8px; font: 600 12px var(--mono); }
.lmd-mlg-pct span { font-weight: 400; color: var(--rt-fg-3); }
.lmd-mlg-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 20px; align-items: start; }
.lmd-mlg-plot { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; }
.lmd-mlg-stack {
  display: flex; flex-direction: column; gap: 3px; height: 330px; padding: 3px;
  border-radius: 10px; background: var(--rt-bg-sunk); box-shadow: var(--rt-ring);
}
.lmd-mlg-stack.is-over { box-shadow: inset 0 0 0 1px var(--rt-coral); }
.lmd-mlg-stack .seg { position: relative; overflow: hidden; border-radius: 3px; transition: opacity 0.15s; }
.lmd-mlg-stack .seg-lanes { display: flex; flex-direction: column; gap: 2px; background: transparent !important; }
.lmd-mlg-stack .seg-media { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-violet, #a78bfa) 45%, transparent); border-radius: 4px; }
.lmd-mlg-stack .seg-lane { min-height: 2px; border-radius: 2px; cursor: pointer; transition: opacity 0.15s, box-shadow 0.15s; }
.lmd-mlg-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; }
.lmd-mlg-legend .leg { display: flex; gap: 9px; align-items: flex-start; padding: 3px 6px; border-radius: 6px; }
.lmd-mlg-legend .leg.lmd-hl-on { background: var(--rt-bg-alt); }
.lmd-mlg-legend .leg-dot { width: 10px; height: 10px; margin-top: 3px; flex: none; border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; }
.lmd-mlg-legend .leg-dot i { display: block; flex: 1; }
.lmd-mlg-legend .leg-k { display: block; font-size: 11.5px; line-height: 1.3; color: var(--rt-fg-2); }
.lmd-mlg-legend .leg-v { display: block; margin-top: 2px; font: 600 12px var(--mono); color: var(--rt-fg); }
.lmd-mlg-legend .leg.is-zero .leg-v { font-weight: 400; color: var(--rt-fg-3); }
.lmd-mlg-whatif {
  min-height: 58px; margin-top: 14px; padding: 12px; border-radius: 9px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
  font-size: 11.5px; line-height: 1.55; color: var(--rt-fg-2);
}
.lmd-mlg-whatif b { color: var(--rt-fg); font-weight: 600; }
.lmd-mlg-who .lmd-eyebrow { margin-bottom: 10px; }
.lmd-mlg-who .who-row {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) 64px; gap: 4px 10px; align-items: center;
  width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  color: var(--rt-fg); text-align: left; font-family: var(--font);
}
.lmd-mlg-who .who-row:hover, .lmd-mlg-who .who-row.lmd-hl-on { background: var(--rt-bg-alt); }
.lmd-mlg-who .who-row .sw { width: 10px; height: 10px; border-radius: 3px; }
.lmd-mlg-who .who-row .nm { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmd-mlg-who .who-row .nm small { margin-left: 6px; font-size: 10px; font-weight: 400; color: var(--rt-fg-3); }
.lmd-mlg-who .who-row .mb { text-align: right; font: 11px var(--mono); color: var(--rt-fg-2); }
.lmd-mlg-who .who-row .wb { grid-column: 2 / 4; height: 4px; border-radius: 4px; background: var(--rt-bg-sunk); overflow: hidden; }
.lmd-mlg-who .who-row .wb span { display: block; height: 100%; }
.lmd-mlg-who .who-row.zero .nm, .lmd-mlg-who .who-row.zero .mb { color: var(--rt-fg-3); }
.lmd-mlg-table { margin-top: 22px; border-top: 1px solid var(--rt-border); }
.lmd-mlg-table .row { display: flex; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--rt-border); font-size: 12px; }
.lmd-mlg-table .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.lmd-mlg-table .dot.nodot { box-shadow: inset 0 0 0 1px var(--rt-border-strong); }
.lmd-mlg-table .k { flex: 1; color: var(--rt-fg-2); }
.lmd-mlg-table .v { font: 12px var(--mono); color: var(--rt-fg); }
.lmd-mlg-table .v.accent { color: var(--rt-accent); font-weight: 600; }
.lmd-mlg-note {
  margin-top: 18px; padding: 13px 15px; border-radius: 9px;
  background: color-mix(in srgb, var(--rt-amber) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-amber) 28%, transparent);
  font-size: 12px; line-height: 1.6; color: var(--rt-fg-2);
}
.lmd-mlg-note b { display: block; margin-bottom: 4px; color: var(--rt-amber); font-weight: 600; }
.lmd-mlg-conf { margin-top: 12px; padding: 10px 14px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--rt-border); }
.lmd-mlg-conf summary { cursor: pointer; font: 11px var(--mono); color: var(--rt-fg-2); }
.lmd-mlg-conf div { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--rt-fg-2); }
.lmd-mlg-conf code, .lmd-dialog code { font: 11px var(--mono); color: var(--rt-fg); }
@media (max-width: 1100px) {
  .lmd-picker-layout { grid-template-columns: 180px minmax(0, 1fr) 250px; gap: 16px; }
  .lmd-mlg-body { grid-template-columns: minmax(0, 1fr); }
  .lmd-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .lmd-picker-layout { grid-template-columns: minmax(0, 1fr); }
  .lmd-picker-tax { padding-right: 0; border-right: 0; }
  .lmd-picker-config { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--rt-border); }
  .lmd-model-results { max-height: 340px; }
  .lmd-job-brief { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .lmd-dialog, .lmd-dialog.model-picker { width: 100vw; max-width: 100vw; margin: 0; height: 100%; border-radius: 0; padding: 18px 16px; }
  .lmd-mlg-stack { height: 240px; }
  .lmd-mlg-big { font-size: 40px; }
}
/* ── Lane chips and verbs shared with the cards ──────────────────────── */
.lnb-badge {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  flex: 0 0 auto; min-width: 74px; padding: 4px 8px; border-radius: 7px;
  font-family: var(--mono); font-size: 9px; line-height: 1.3;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.lnb-badge b { font-weight: 700; }
.lnb-badge span { color: var(--rt-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.lnb-badge.k-local { color: var(--rt-green); background: rgba(43, 188, 138, 0.11); }
.lnb-badge.k-media { color: var(--rt-violet, #a78bfa); background: rgba(167, 139, 250, 0.14); }
.lnb-badge.k-cloud { color: var(--rt-amber); background: rgba(245, 158, 11, 0.13); }
.lnb-duty {
  height: 28px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 7px; border: none;
  background: var(--rt-panel); color: var(--rt-fg);
  box-shadow: var(--rt-ring); padding: 0 8px; cursor: pointer;
}
.lnb-duty:disabled { opacity: 0.5; cursor: not-allowed; }
.lnb-duty.is-gen {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 8px; cursor: default; font-weight: 700;
  color: var(--rt-violet, #a78bfa);
  background: rgba(167, 139, 250, 0.14);
  box-shadow: none;
}
/* A scribe's duty chip (NS UX friction review §E5): read-only like the
   media chip — embed is seated by an --embeddings flag, never picked from
   a list — in the scribe's own hue so it is not mistaken for generate. */
.lnb-duty.is-embed {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 8px; cursor: default; font-weight: 700;
  color: var(--rt-teal, #2bbc8a);
  background: rgba(43, 188, 138, 0.12);
  box-shadow: none;
}
/* The duty control wears its name (§E13): "duty" is a word this product
   coined, and the dropdown was bare. */
.lnb-duty-wrap { display: inline-flex; align-items: center; gap: 5px; }
.lnb-duty-k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--rt-fg-3);
}
/* ── Lane verbs: a glyph, a word, and a sentence on hover ─────────────
   The board is operated by people who did not write the daemon, and a
   row of bare one-word buttons made every card a memory test. The glyph
   carries the verb at a glance, the word says it, and .lnb-tip says what
   it costs. Exactly one button per card is the obvious next step, and it
   is the only one wearing the accent. */
.lnb-act-w { display: inline-flex; flex: 0 0 auto; }
.lnb-act { gap: 6px; }
.lnb-act-i {
  font-size: 11px; line-height: 1; opacity: 0.72;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 10px;
}
.lnb-act:hover .lnb-act-i { opacity: 1; }
.lnb-act-primary { background: var(--rt-accent); color: #fff; box-shadow: none; }
.theme-dark .lnb-act-primary { color: #0b0e1a; }
.lnb-act-primary:hover { background: color-mix(in srgb, var(--rt-accent) 82%, #000); }
.lnb-act-primary .lnb-act-i { opacity: 1; }
.lnb-act-danger { background: var(--rt-coral); color: #fff; box-shadow: none; }
.lnb-act-danger:hover { background: color-mix(in srgb, var(--rt-coral) 84%, #000); }
/* The bubble. A portal at the document root, so the card that owns the
   button cannot clip it; fixed, so any scroll dismisses it rather than
   letting it drift off its button. */
.lnb-tip {
  position: fixed; z-index: 96; pointer-events: none;
  display: flex; flex-direction: column; gap: 4px;
  padding: 9px 11px; border-radius: 9px;
  background: var(--rt-panel); color: var(--rt-fg-2);
  border: 1px solid var(--rt-border);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  font-family: var(--mono); font-size: 11px; line-height: 1.5;
  animation: lnb-tip-in 110ms ease-out;
}
.lnb-tip b { color: var(--rt-fg); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; }
.lnb-tip em { font-style: normal; color: var(--rt-amber); }
@keyframes lnb-tip-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lnb-tip { animation: none; } }
/* Load/unload: same 3–4px language as onboarding downloads. Hidden except
   while starting/stopping so ready cards do not grow. */
.lnb-load {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 0; padding-left: 2px;
}
.lnb-load-bar {
  flex: 1; height: 4px; min-width: 48px;
  background: var(--rt-bg-sunk); border-radius: 2px; overflow: hidden;
}
.lnb-load-bar > span {
  display: block; height: 100%;
  background: var(--rt-amber);
  transition: width 240ms ease;
}
.lnb-load.is-stall .lnb-load-bar > span { background: var(--rt-fg-3); }
.lnb-load-meta {
  font-family: var(--mono); font-size: 10px; color: var(--rt-amber);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  min-width: 4.8em; text-align: right;
}
.lnb-load.is-stall .lnb-load-meta { color: var(--rt-coral); }
/* ---------- Toolbar ---------- */
.fla-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--rt-border);
}
.fla-search { position: relative; display: flex; align-items: center; flex: 0 1 210px; min-width: 150px; }
.fla-search input {
  width: 100%; height: 30px; padding: 0 26px 0 28px;
  border-radius: 8px; border: 1px solid var(--rt-border);
  background: var(--rt-bg-sunk); color: var(--rt-fg);
  font-family: var(--font); font-size: 12px;
}
.fla-search input:focus { outline: none; border-color: var(--rt-accent); }
.fla-search input::placeholder { color: var(--rt-fg-3); }
.fla-search-i { position: absolute; left: 9px; color: var(--rt-fg-3); pointer-events: none; display: flex; }
.fla-search-x {
  position: absolute; right: 4px; width: 18px; height: 18px; padding: 0;
  border: none; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--rt-fg-3); font-family: var(--mono); font-size: 12px; line-height: 1;
}
.fla-search-x:hover { background: var(--rt-border); color: var(--rt-fg); }
.fla-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.fla-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rt-border); background: var(--rt-bg-sunk);
  color: var(--rt-fg-2); font-family: var(--font); font-size: 11.5px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.fla-chip:hover { background: var(--rt-bg-alt); color: var(--rt-fg); }
.fla-chip .n { font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3); font-variant-numeric: tabular-nums; }
/* Active is a tint, not a fill: several chips can be on at once and a row
   of solid blocks stops reading as a filter and starts reading as tabs. */
.fla-chip.active {
  border-color: var(--rt-accent); color: var(--rt-accent);
  background: color-mix(in srgb, var(--rt-accent) 12%, transparent);
}
.fla-chip.active .n { color: var(--rt-accent); }
.fla-chip.warn { border-color: color-mix(in srgb, var(--rt-amber) 55%, var(--rt-border)); color: var(--rt-amber); }
.fla-chip.warn.active { background: color-mix(in srgb, var(--rt-amber) 14%, transparent); border-color: var(--rt-amber); }
.fla-chip.is-cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; }
.fla-bar-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ---------- The download strip ---------- */
/* Deliberately above the map rather than inside the rail: "what is this
   box still missing" is a question about every fleet shown, and the
   answer has to be pressable without selecting one first. */
.fla-plan, .fla-queue {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px; padding: 11px 13px; border-radius: 10px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
}
.fla-plan { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.fla-plan-t { flex: 1; min-width: 0; font-size: 12px; color: var(--rt-fg-2); }
.fla-plan-t b { color: var(--rt-amber); }
.fla-queue.is-running { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rt-accent) 45%, transparent); }
.fla-queue-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fla-queue-t { flex: 1; min-width: 0; font-size: 12px; color: var(--rt-fg-2); }
.fla-queue-t b { color: var(--rt-fg); font-weight: 600; }
.fla-queue-n { font-size: 11px; color: var(--rt-fg-3); font-variant-numeric: tabular-nums; }
.fla-queue-track, .fla-need-track {
  height: 4px; border-radius: 2px; background: var(--rt-bg-sunk); overflow: hidden;
}
.fla-queue-track > i, .fla-need-track > i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--rt-accent); transition: width 300ms ease;
}
.fla-queue-errs { list-style: none; margin: 0; padding: 0; font-size: 10.5px; color: var(--rt-coral); }
.fla-queue-errs li { padding: 2px 0; word-break: break-all; }
/* ---------- Body: map + rail ---------- */
/* The inspector stays on the right at monitor widths so a click on the
   atlas opens settings in the same place the list does. Stack only on
   a phone-class pane — 1120px used to collapse the rail on a typical
   laptop split, which made the map look like it did nothing. */
.fla-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 14px; align-items: stretch; }
@media (max-width: 780px) { .fla-body { grid-template-columns: minmax(0, 1fr); } }
.fla-map {
  position: relative; min-width: 0;
  height: min(72vh, 860px); min-height: 520px;
  border-radius: 12px; overflow: hidden;
  background: var(--rt-bg-sunk); box-shadow: var(--rt-ring);
}
.fla-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.fla-svg:active { cursor: grabbing; }
.fla-svg.is-over-node { cursor: pointer; }
.fla-plot-bg { fill: var(--rt-bg-sunk); }
/* The interpolated field. Kept faint on purpose: it is a reading aid
   between the fleets, and a wash bright enough to compete with them
   turns a map into wallpaper. The glyph halos carry the same colour at
   full strength, so the layer is still legible AT each fleet — which is
   the only place it is a measurement rather than an interpolation. */
.fla-terrain-img { opacity: 0.2; }
.fla-contour path { fill: none; stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.75; }
.fla-contour-l { font-family: var(--mono); font-size: 10px; opacity: 0.9; }
.fla-cross { stroke: var(--rt-border); stroke-width: 1; stroke-dasharray: 3 7; fill: none; opacity: 0.7; }
.fla-ax {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  fill: var(--rt-fg-2); font-weight: 600;
}
.fla-ax-sub { font-family: var(--font); font-size: 10px; fill: var(--rt-fg-3); }
/* ---------- A fleet ---------- */
.fla-node { cursor: pointer; }
.fla-node:focus { outline: none; }
.fla-node:focus-visible .fla-core { stroke: var(--rt-accent); stroke-width: 2; }
.fla-hit { cursor: pointer; pointer-events: none; }
.fla-core { stroke-width: 1; transition: stroke-width 120ms ease, transform 120ms ease; }
.fla-node.is-hover .fla-core, .fla-node:hover .fla-core { stroke-width: 1.8; }
.fla-halo { pointer-events: none; }
/* One dot per lane, in that lane's family hue — the same fact the x
   position encodes, said a second way. A cloud lane is hollow: it holds
   no weights on this box, so it cannot be a filled mass on a map whose
   sizes mean resident bytes. */
.fla-lanedot { stroke-width: 1; }
.fla-lanedot.is-cloud { stroke-dasharray: 1.6 1.6; }
.fla-web { fill: none; stroke: var(--rt-fg-3); stroke-width: 0.6; opacity: 0.4; }
.fla-node-n {
  font-family: var(--font); font-size: 8.5px; font-weight: 600; fill: var(--rt-fg);
  paint-order: stroke; stroke: var(--rt-bg-sunk); stroke-width: 1.6px; stroke-linejoin: round;
}
.fla-node-b {
  font-family: var(--mono); font-size: 6.5px; fill: var(--rt-fg-3);
  paint-order: stroke; stroke: var(--rt-bg-sunk); stroke-width: 1.6px; stroke-linejoin: round;
}
.fla-selbox { fill: none; stroke: var(--rt-accent); stroke-width: 1.6; opacity: 0.95; }
.fla-node.is-hover .fla-selbox { opacity: 1; }
.fla-activering { fill: none; stroke: var(--rt-green); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0.9; }
/* Filtered out, not removed: the map keeps its shape, and the filter
   shows what it excluded instead of quietly redrawing the world. */
.fla-node.is-dim { opacity: 0.22; }
.fla-node.is-dim .fla-node-n { font-weight: 500; }
/* ---------- Overlays: terrain key and minimap ---------- */
.fla-terrain-card, .fla-mini {
  position: absolute; z-index: 2;
  border-radius: 11px; padding: 12px;
  /* Opaque, not frosted: these float over the map, and blurring the map
     under them re-rendered on every panned or hovered frame — the
     overlays were the single most expensive thing on the atlas. */
  background: color-mix(in srgb, var(--rt-panel) 95%, transparent);
  box-shadow: var(--rt-ring-strong);
}
.fla-terrain-card { top: 12px; left: 12px; width: auto; max-width: min(380px, 48%); padding: 9px 10px; }
.fla-tc-h {
  font-family: var(--font); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rt-fg);
}
.fla-tc-lbl { margin-top: 10px; font-size: 10.5px; color: var(--rt-fg-3); }
.fla-tc-layers { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.fla-tc-layer {
  text-align: center; padding: 4px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rt-border); background: var(--rt-bg-alt);
  color: var(--rt-fg-2); font-family: var(--font); font-size: 11px;
}
.fla-tc-layer:hover { color: var(--rt-fg); }
.fla-tc-layer.active { border-color: var(--rt-accent); color: var(--rt-accent); background: color-mix(in srgb, var(--rt-accent) 12%, transparent); }
.fla-tc-key { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.fla-tc-key li { display: flex; align-items: center; gap: 6px; }
.fla-tc-key i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.fla-tc-key span { font-size: 10px; line-height: 1.3; color: var(--rt-fg-3); }
.fla-tc-key b { display: inline; font-weight: 500; font-size: 10.5px; color: var(--rt-fg-2); margin-right: 4px; }
.fla-tc-note { margin: 11px 0 0; font-size: 10px; line-height: 1.45; color: var(--rt-fg-3); }
.fla-tip {
  position: absolute; z-index: 3; pointer-events: none;
  min-width: 168px; max-width: 240px; padding: 8px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--rt-panel) 96%, transparent);
  box-shadow: var(--rt-ring-strong);
}
.fla-tip b { display: block; font-size: 12.5px; font-weight: 600; color: var(--rt-fg); }
.fla-tip span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10.5px; color: var(--rt-fg-2); }
.fla-tip em { display: block; margin-top: 5px; font-style: normal; font-size: 10px; color: var(--rt-accent); }
.fla-mini { bottom: 12px; right: 12px; left: auto; width: 176px; display: flex; align-items: flex-end; gap: 7px; }
.fla-mini-svg {
  width: 104px; height: auto; border-radius: 7px; cursor: crosshair;
  background: var(--rt-bg-sunk); box-shadow: var(--rt-ring);
}
.fla-mini-bg { fill: var(--rt-bg-sunk); }
.fla-mini-dot { opacity: 0.8; }
.fla-mini-dot.is-sel { stroke: var(--rt-accent); stroke-width: 6; }
.fla-mini-view { fill: none; stroke: var(--rt-accent); stroke-width: 8; opacity: 0.85; }
.fla-mini-ctl { display: flex; flex-direction: column; gap: 4px; }
.fla-mini-ctl button {
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 6px; cursor: pointer;
  background: var(--rt-bg-alt); color: var(--rt-fg-2);
  font-family: var(--mono); font-size: 12px; line-height: 1;
}
.fla-mini-ctl button:hover { background: var(--rt-border); color: var(--rt-fg); }
.fla-mini-z { text-align: center; font-size: 9.5px; color: var(--rt-fg-3); font-variant-numeric: tabular-nums; }
/* ---------- The inspector rail ---------- */
.fla-rail {
  min-width: 0;
  position: sticky; top: 12px;
  max-height: min(72vh, 860px);
  overflow: auto;
}
.fla-insp {
  padding: 14px 15px 15px; border-radius: 12px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
}
.fla-insp-empty { padding: 26px 12px; text-align: center; color: var(--rt-fg-3); font-size: 12px; }
.fla-insp-h { display: flex; align-items: center; gap: 8px; }
.fla-insp-n {
  margin: 0; flex: 1; min-width: 0;
  font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--rt-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fla-tag {
  flex: 0 0 auto; padding: 3px 7px; border-radius: 5px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  background: var(--rt-bg-sunk); color: var(--rt-fg-3);
}
.fla-tag.is-mine { color: var(--rt-violet); background: color-mix(in srgb, var(--rt-violet) 14%, transparent); }
.fla-tag.is-lib { color: var(--rt-accent); background: color-mix(in srgb, var(--rt-accent) 14%, transparent); }
.fla-insp-q { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--rt-accent); }
.fla-insp-d { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--rt-fg-3); }
.fla-insp-warn { margin: 8px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--rt-amber); }
.fla-stats { list-style: none; margin: 13px 0 0; padding: 0; }
.fla-stats li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0; border-top: 1px solid var(--rt-border); font-size: 11.5px;
}
.fla-stats li:first-child { border-top: none; }
.fla-stats .k { flex: 1; color: var(--rt-fg-3); }
.fla-stats .v { font-size: 12px; color: var(--rt-fg); font-variant-numeric: tabular-nums; }
.fla-band {
  margin-top: 12px; padding: 9px 11px; border-radius: 9px;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--rt-bg-sunk); box-shadow: inset 0 0 0 1px var(--rt-border);
}
.fla-band b { font-size: 11.5px; font-weight: 600; }
.fla-band span { font-size: 10.5px; line-height: 1.4; color: var(--rt-fg-3); }
.fla-band.tone-good b { color: var(--rt-green); }
.fla-band.tone-warn b { color: var(--rt-amber); }
.fla-band.tone-bad b { color: var(--rt-coral); }
.fla-band.tone-muted b { color: var(--rt-fg-3); }
.fla-band.tone-bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-coral) 45%, transparent); }
/* ---------- Readiness + the download verbs ---------- */
.fla-need {
  margin-top: 10px; padding: 10px 11px; border-radius: 9px;
  background: var(--rt-bg-sunk);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-amber) 40%, transparent);
}
.fla-need.is-ready { box-shadow: inset 0 0 0 1px var(--rt-border); }
.fla-need-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.fla-need-t { flex: 1; min-width: 0; font-size: 11.5px; color: var(--rt-fg-2); }
.fla-need-pct { font-size: 11px; color: var(--rt-fg-3); font-variant-numeric: tabular-nums; }
.fla-need.is-ready .fla-need-track > i { background: var(--rt-green); }
.fla-need:not(.is-ready) .fla-need-track > i { background: var(--rt-amber); }
.fla-need-meter { display: flex; flex-direction: column; gap: 5px; }
.fla-need-ledger { display: flex; flex-direction: column; gap: 5px; }
.fla-need-tipwrap { position: relative; outline: none; }
.fla-need-tipwrap:focus-visible { box-shadow: 0 0 0 1px var(--rt-accent); border-radius: 6px; }
.fla-need-tipwrap .fla-need-h { margin-bottom: 0; }
.fla-need-tipwrap .fla-roster-tip {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  margin: 0; padding: 9px 11px 10px;
  border-top: none; border-radius: 10px;
  background: var(--rt-panel);
  box-shadow: 0 12px 32px rgba(0,0,0,0.32), var(--rt-ring);
}
/* One notch per model — hover names it. Same strip in list view and
   under the inspector's "All N models on disk" meter. */
.fla-notches { display: flex; gap: 2px; flex: 0 0 auto; align-items: stretch; }
.fla-notches > i {
  position: relative; display: block; flex: 0 0 6px; height: 20px; border-radius: 2px;
  cursor: default;
}
.fla-notches > i::before {
  content: ''; position: absolute; inset: -4px -3px;
}
.fla-notches > i.is-miss { opacity: 0.38; }
.fla-notches > i.is-cloud {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px currentColor;
  color: inherit;
}
.fla-notches > i[data-name]::after {
  content: attr(data-name);
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(3px);
  z-index: 40;
  padding: 4px 7px; border-radius: 6px;
  background: var(--rt-panel); color: var(--rt-fg);
  box-shadow: 0 8px 20px rgba(0,0,0,0.28), var(--rt-ring);
  font-family: var(--font); font-size: 11px; font-style: normal; font-weight: 600;
  line-height: 1.25; white-space: nowrap; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis;
  opacity: 0; pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}
.fla-notches > i[data-name]:hover::after,
.fla-notches > i[data-name]:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.fla-need-notches { width: 100%; }
.fla-need-notches > i { flex: 1 1 0; min-width: 6px; height: 8px; }
/* Setup's lane roster, revealed on hover of the models-on-disk count
   so the disk card stays short enough that Activate sits under it
   without a scroll. The inspector and the list rows share this hover. */
.fla-roster-tip {
  display: none;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--rt-border);
}
.fla-need-tipwrap:hover .fla-roster-tip,
.fla-need-tipwrap:focus-visible .fla-roster-tip,
.fla-need-tipwrap:focus-within .fla-roster-tip {
  display: block;
}
.fla-roster-tip-h {
  font-size: 10px; color: var(--rt-fg-3); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 7px;
}
.fla-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fla-roster li { display: flex; align-items: baseline; gap: 8px; font-size: 11px; min-width: 0; }
.fla-roster i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; transform: translateY(1px); }
.fla-roster .n { flex: 1; min-width: 0; color: var(--rt-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fla-roster .s { color: var(--rt-fg-3); white-space: nowrap; }
.fla-roster .tone-good { color: var(--rt-green); }
.fla-roster .tone-warn { color: var(--rt-amber); }
.fla-roster .tone-bad { color: var(--rt-coral); }
.fla-roster .tone-live { color: var(--rt-accent); }
.fla-need-list { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.fla-need-list li { display: flex; align-items: baseline; gap: 7px; font-size: 10px; }
.fla-need-list .f { flex: 1; min-width: 0; color: var(--rt-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fla-need-list .s { color: var(--rt-fg-3); white-space: nowrap; }
.fla-need-list .d { color: var(--rt-accent); white-space: nowrap; }
.fla-need-list .d.good { color: var(--rt-green); }
.fla-need-list .d.bad { color: var(--rt-coral); }
.fla-need-list li.is-unknown .s { color: var(--rt-coral); white-space: normal; }
.fla-need-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fla-need-btns .btn-rt-sm { font-size: 11px; height: 30px; padding: 0 10px; }
/* ---------- Tradeoffs, lanes, status, actions ---------- */
.fla-trade { list-style: none; margin: 13px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fla-trade li { display: flex; gap: 8px; font-size: 11px; line-height: 1.45; color: var(--rt-fg-2); }
.fla-trade .s { flex: 0 0 auto; width: 9px; font-family: var(--mono); font-weight: 700; }
.fla-trade .is-plus .s, .fla-trade li.is-plus .s { color: var(--rt-green); }
.fla-trade li.is-minus .s { color: var(--rt-fg-3); }
.fla-trade li.is-minus { color: var(--rt-fg-3); }
.fla-lanes-t {
  margin-top: 12px; width: 100%; text-align: left; padding: 7px 0;
  border: none; background: transparent; cursor: pointer;
  color: var(--rt-fg-3); font-family: var(--mono); font-size: 10.5px;
  border-top: 1px solid var(--rt-border);
}
.fla-lanes-t:hover { color: var(--rt-fg-2); }
.fla-lanes { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fla-lanes li { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.fla-lanes-hue { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
.fla-lanes .i { color: var(--rt-fg-2); flex: 0 0 auto; }
.fla-lanes .m { flex: 1; min-width: 0; color: var(--rt-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 2026-10-08: benchmark verdict chips (model-perf.js) and the inspector's
   evidence block. Tokens only, so light and dark follow the theme. */
.fla-verdict { display: inline-block; flex: 0 0 auto; padding: 0 5px; border-radius: 3px; font-family: var(--mono); font-size: 9.5px; line-height: 15px; color: var(--rt-fg-2); background: color-mix(in srgb, var(--rt-fg-3) 14%, transparent); }
.fla-verdict.is-proven { color: var(--rt-green); background: color-mix(in srgb, var(--rt-green) 15%, transparent); }
.fla-verdict.is-conditional { color: var(--rt-cyan); background: color-mix(in srgb, var(--rt-cyan) 14%, transparent); }
.fla-verdict.is-waste { color: var(--rt-amber); background: color-mix(in srgb, var(--rt-amber) 15%, transparent); }
.fla-verdict.is-banned { color: var(--rt-coral); background: color-mix(in srgb, var(--rt-coral) 15%, transparent); font-weight: 600; }
.fla-evid { margin: 10px 0 0; padding: 8px 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--rt-border); }
.fla-evid-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; }
.fla-evid-h .mono { font-size: 10.5px; color: var(--rt-fg-3); }
.fla-evid-v { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.fla-evid-w { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; line-height: 1.4; color: var(--rt-fg-2); }
.fla-evid-w li { padding-left: 8px; box-shadow: inset 2px 0 0 var(--rt-amber); }
.fla-evid-w li.is-error { box-shadow: inset 2px 0 0 var(--rt-coral); }
.fla-evid-w li.is-info { box-shadow: inset 2px 0 0 var(--rt-border-strong); }
.fla-lanes .x { color: var(--rt-fg-3); white-space: nowrap; }
.fla-status {
  margin-top: 12px; font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.fla-status.tone-good { color: var(--rt-green); }
.fla-status.tone-warn { color: var(--rt-amber); }
.fla-status.tone-bad { color: var(--rt-coral); }
.fla-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; padding-bottom: 12px; border-bottom: 1px dashed var(--rt-border); }
.fla-acts .btn-rt-sm { font-size: 11px; height: 30px; padding: 0 11px; }
/* Green, because it is the one button on this rail that starts work. */
.fla-go { background: var(--rt-green); color: #05130d; font-weight: 600; }
.fla-go:hover { background: #34d39c; }
/* ---------- List view ---------- */
.fla-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fla-row {
  position: relative;
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 10px; border: none; cursor: pointer; text-align: left;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
}
.fla-row:hover { box-shadow: var(--rt-ring-strong); z-index: 2; }
.fla-row.is-sel { box-shadow: 0 0 0 1px var(--rt-accent); }
.fla-row-hues { display: flex; gap: 2px; flex: 0 0 auto; }
.fla-row-hues > i { width: 6px; flex: 0 0 6px; height: 20px; border-radius: 2px; }
.fla-row-n { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--rt-fg); }
.fla-row-d {
  display: block; margin-top: 2px; font-weight: 400; font-size: 10.5px; color: var(--rt-fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fla-row-m { flex: 0 0 auto; font-size: 10.5px; color: var(--rt-fg-3); font-variant-numeric: tabular-nums; }
.fla-pill {
  flex: 0 0 auto; padding: 3px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; white-space: nowrap;
}
.fla-pill.tone-good { color: var(--rt-green); background: color-mix(in srgb, var(--rt-green) 13%, transparent); }
.fla-pill.tone-warn { color: var(--rt-amber); background: color-mix(in srgb, var(--rt-amber) 13%, transparent); }
.fla-pill.tone-bad { color: var(--rt-coral); background: color-mix(in srgb, var(--rt-coral) 13%, transparent); }
.fla-pill.tone-muted { color: var(--rt-fg-3); background: var(--rt-bg-sunk); }
.fla-row-need { position: relative; }
.fla-row-need .fla-roster-tip {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  width: 260px; margin: 0; padding: 9px 11px 10px;
  border-top: none; border-radius: 10px;
  background: var(--rt-panel);
  box-shadow: 0 12px 32px rgba(0,0,0,0.32), var(--rt-ring);
  text-align: left; font-family: var(--font); font-size: 11px; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--rt-fg);
}
.fla-row-need:hover .fla-roster-tip { display: block; }
/* ---------- Footers: legend, filter note, unplaceable fleets ---------- */
.fla-legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--rt-border);
  font-size: 10.5px; color: var(--rt-fg-3);
}
.fla-legend b { color: var(--rt-fg-2); font-weight: 600; margin-right: 5px; }
.fla-dimmed { margin-top: 10px; font-size: 10.5px; color: var(--rt-fg-3); }
.fla-unplaced { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--rt-border); }
.fla-unplaced-h { font-size: 10.5px; color: var(--rt-amber); margin-bottom: 7px; }
.fla-unplaced-row {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 7px 10px; margin-bottom: 4px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--rt-bg-alt);
}
.fla-unplaced-row:hover { background: var(--rt-bg-sunk); }
.fla-unplaced-row.is-sel { box-shadow: 0 0 0 1px var(--rt-accent); }
.fla-unplaced-row .n { font-size: 12px; font-weight: 600; color: var(--rt-fg); }
.fla-unplaced-row .w { flex: 1; min-width: 0; font-size: 10px; color: var(--rt-fg-3); }
@media (prefers-reduced-motion: reduce) {
  .fla-queue-track > i, .fla-need-track > i,
  .fla-notches > i[data-name]::after, .fla-roster-tip { transition: none; }
}
.nsm-atlas > .fla-body { flex: 1 1 auto; min-height: 0; }
.nsm-map .fla-svg { cursor: default; touch-action: manipulation; }
.nsm-map .fla-svg.is-over-node { cursor: pointer; }
.nsm-map .fla-node-n { font-size: 10px; }
.nsm-atlas .fla-go { display: inline-flex; align-items: center; gap: 6px; }
.nsm-insp .fla-insp-n { white-space: normal; line-height: 1.2; }
.nsm-insp .fla-status {
  margin-top: 12px; padding: 8px 10px; border-radius: 9px;
  background: var(--rt-bg-sunk);
}
.nsm-insp .fla-status.tone-good { background: color-mix(in srgb, var(--rt-green) 12%, var(--rt-bg-sunk)); }
.nsm-insp .fla-status.tone-warn { background: color-mix(in srgb, var(--rt-amber) 12%, var(--rt-bg-sunk)); }
.nsm-insp .fla-status.tone-bad { background: color-mix(in srgb, var(--rt-coral) 12%, var(--rt-bg-sunk)); }
.nsm-insp .fla-acts { border-bottom: none; padding-bottom: 0; }
/* FleetEditor ("Save current lanes" / "+ New fleet" / Edit): the lane
   table fits the panel. A <select> otherwise sizes to its longest option
   (name · GB · family) and pushed the table off the right edge; at width
   100% it shrinks to its cell, and the wrapper scrolls instead of
   clipping if a narrow window still can't hold every column. */
.fleet-editor { min-width: 0; max-width: 100%; box-sizing: border-box; }
.fleet-editor input.rt-input { max-width: 100%; box-sizing: border-box; }
.fleet-editor-lanes { margin-top: 10px; max-width: 100%; overflow-x: auto; }
.fleet-editor-lanes > table { width: 100%; border-collapse: collapse; }
.fleet-editor-lanes td.fe-model { width: 100%; min-width: 160px; }
.fleet-editor-lanes td.fe-model > select { width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.fleet-editor-lanes .fe-model-note { display: block; font-size: 10px; margin-top: 2px; }
/* Web edition: the device ledger (engine.jsx LmdWebLedger) - what each
   device lane holds on this browser's GPU, as declared footprints. */
.lmd-webledger { width: 100%; border-collapse: collapse; font-size: 12px; margin: 12px 0; }
.lmd-webledger th, .lmd-webledger td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rt-border); vertical-align: middle; }
.lmd-webledger th { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--rt-fg-3); font-weight: 500; }
.lmd-swatch-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* Job 3 · NS-JOB-TITLE (from the DGX edition): the job's name, editable in place. */
/* ── NS-JOB-TITLE — the display name, editable in place ──────────── */
.ns-job-title { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; }
.ns-job-title-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-job-title-id { font-family: var(--mono); font-size: 0.82em; color: var(--rt-fg-3); white-space: nowrap; }
.ns-job-title-pen {
  font-size: 0.9em; line-height: 1; padding: 1px 5px; border-radius: 3px; cursor: pointer;
  color: var(--rt-fg-3); background: transparent; border: 1px solid transparent; opacity: 0.55;
}
.ns-job-title:hover .ns-job-title-pen, .ns-job-title-pen:focus-visible { opacity: 1; border-color: var(--rt-border); color: var(--rt-fg); }
.ns-job-title.editing { gap: 4px; flex-wrap: wrap; }
.ns-job-title-input { font-size: 12px; min-width: 220px; height: 26px; }
.ns-job-title-err { font-size: 11px; color: var(--rt-coral, #e5484d); }
.nsf-still-foot .ns-job-title-pen { color: inherit; }
.nsf-still-foot .ns-job-title-id { color: inherit; opacity: 0.6; }