:root {
  --bg: #04081a;
  --bg-surface: #0a1128;
  --bg-card: rgba(255, 255, 255, 0.035);
  --bg-card-hover: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  
  --cyan: #00d4ff;
  --cyan-muted: rgba(0, 212, 255, 0.15);
  --violet: #7c3aed;
  --violet-muted: rgba(124, 58, 237, 0.18);
  
  --emerald: #10b981;
  --emerald-muted: rgba(16, 185, 129, 0.12);
  --emerald-line: rgba(16, 185, 129, 0.35);
  
  --rose: #f43f5e;
  /* The same red, lightened, for text small enough that the accent does not clear WCAG AA. On the
     muted rose card the accent measures 4.24 to 1 at 11.5px and 4.47 at 12.8px, against 4.5. This
     measures 5.63 and 5.50. The accent stays the accent: the hero word is 40px and needs 3.0. */
  --rose-text: #f87171;
  --rose-muted: rgba(244, 63, 94, 0.12);
  --rose-line: rgba(244, 63, 94, 0.35);
  
  --amber: #f59e0b;
  --amber-muted: rgba(245, 158, 11, 0.12);
  
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --muted-dim: rgba(255, 255, 255, 0.45);
  
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  background-image: radial-gradient(70rem 45rem at 50% -12rem, rgba(124, 58, 237, 0.18), transparent 65%);
  background-repeat: no-repeat;
  min-height: 100vh;
}

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* UX-D: one link colour everywhere, identifiable by more than colour alone. Unvisited and
   visited links share it: the page is evidence, not navigation, and a visited run link must
   not fade against the next one. #00d4ff on #04081a measures 11.25 to 1, past AA's 4.5. */
a {
  color: var(--cyan);
}

a:visited {
  color: var(--cyan);
}

main a,
footer a {
  text-decoration: underline;
}

main a:hover,
footer a:hover {
  text-decoration-thickness: 2px;
}

/* Header & Status Bar */
header {
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 0 1rem;
  background: rgba(4, 8, 26, 0.85);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.mark {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
  color: var(--text);
  text-decoration: none;
}

.mark span {
  color: var(--cyan);
}

.hero-caveat {
  margin: 0.75rem 0 0;
}

/* inline-block so the pill stays one rounded shape when its text wraps. As a plain inline span at
   375px it broke into two fragments, each with its own rounded ends, which reads as a rendering
   fault on the one line that has to read as deliberate. */
.hero-caveat .badge-arch {
  display: inline-block;
}

.badge-arch {
  font-family: var(--mono);
  font-size: 0.7rem;
  background: var(--violet-muted);
  color: #c4b5fd;
  border: 1px solid rgba(124, 58, 237, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* UX-H: what ran sits next to what did not. The header strip with the kill-test scores hides
   at 560px and below; this compact line beside the Sandbox badge carries the same validated
   numbers there instead. Desktop keeps the header strip, so this stays hidden above 560px. */
.badge-nemotron {
  display: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  background: rgba(16, 185, 129, 0.12);
  color: var(--emerald);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .badge-nemotron:not([hidden]) {
    display: inline-block;
  }
}

.system-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--muted);
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
}
/* The header strip replays recorded results; a glowing green dot beside a model name reads as a
   live connection, and nothing on this static page calls the model. */
.status-dot-recorded { background: var(--cyan); box-shadow: none; }

/* Navigation Tabs */
.nav-tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid var(--line);
  margin-top: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
/* A real spacer after the last tab. At full scroll the last tab otherwise sat 0.19 px past the
   strip on a real device (production, 375 px, #kill-test): the content width is fractional and
   the largest scrollLeft is not, so the final fraction cannot be scrolled into view. Invisible,
   but it left the test that holds the active tab inside the strip one font metric from flaking.
   A pseudo-element flex item counts toward scrollable width in every engine; an end margin on
   the last tab does not in all of them. */
.nav-tabs::after { content: ""; flex: 0 0 0.75rem; }

.tab-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--text);
}

.tab-btn.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
  font-weight: 600;
}

/* Tab Panels */
.tab-content {
  display: none;
  padding: 2rem 0 4rem;
}
.tab-content.active {
  display: block;
}

/* Hero Section */
.hero-title {
  font-size: 1.85rem;
  line-height: 1.22;
  letter-spacing: -0.025em;
  margin: 1.5rem 0 0.6rem;
  font-weight: 700;
}
.hero-title .claim-word { color: var(--emerald); }
.hero-title .reality-word { color: var(--rose); }

.hero-subtitle {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 44rem;
  margin: 0 0 2rem;
}

/* Cards & Proof Container */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: border-color 0.2s ease;
}
.card:hover {
  border-color: var(--line-strong);
}

.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.card-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-body {
  padding: 1.25rem;
}

/* Proof Hero Card */
.proof-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.02);
}

.tick-icon {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
}

.pill {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  font-family: var(--mono);
}

.pill-pass {
  background: var(--emerald-muted);
  color: var(--emerald);
  border: 1px solid var(--emerald-line);
}

.pill-fail {
  background: var(--rose-muted);
  color: var(--rose-text);
  border: 1px solid var(--rose-line);
}

.pill-warn {
  background: var(--amber-muted);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.pill-muted {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border: 1px solid var(--line);
}

.run-ref {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--muted);
  /* anywhere, not break-all. break-all split the run URL mid word at 375px, so the single most
     important line of evidence on the page read as "elencho / s/actions/runs". A URL has break
     opportunities at its slashes and this uses them first, falling back to mid token only when a
     token genuinely does not fit. */
  word-break: normal;
  overflow-wrap: anywhere;
}
/* The three third party findings on the estate tab link to the file and line in somebody else's
   repository, which is the entire evidential weight of that tab: a reader who does not open them
   has only our word. Nothing styled them, so they rendered in the browser default #0000EE on a
   near black card. Measured contrast 2.00 to 1, against 4.5 to 1 for WCAG AA. The page's own link
   colour on that card measures 10.59 to 1. */
.where a {
  color: var(--cyan);
}

.run-ref a {
  color: var(--cyan);
}

.reality-banner {
  border-top: 1px solid var(--line);
  background: var(--rose-muted);
  padding: 1rem 1.25rem;
  /* --rose-text, not --rose: at 15px on the muted rose card the accent measures 4.24 to 1 against
     AA's 4.5, which is why --rose-text exists (see :root). This banner never used it. */
  color: var(--rose-text);
  font-size: 0.95rem;
}
/* What the receipt did not record. It shared the defect banner's red, so "we do not know" read as
   "this failed". Unknown is not a failure and not a pass: a neutral panel with an amber edge, the
   same words. */
.unknown-banner {
  border-top: 1px solid var(--line);
  border-left: 3px solid rgba(245, 158, 11, 0.6);
  background: rgba(255, 255, 255, 0.025);
  padding: 0.85rem 1.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.reality-banner code {
  font-family: var(--mono);
  font-size: 0.85rem;
  background: rgba(244, 63, 94, 0.16);
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-sm);
  color: #fecdd3;
}

/* Stats Row */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.stat-box {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stat-value {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cyan);
  line-height: 1.1;
}

.stat-label {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

/* A stat that carries its command carries a long path; at 320px it must wrap inside the box. */
.stat-label code { overflow-wrap: anywhere; }

/* Interactive Socratic Playground */
.playground-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 860px) {
  .playground-grid { grid-template-columns: 1fr; }
}

.preset-selector {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.preset-btn {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  font-family: var(--mono);
  transition: all 0.15s ease;
}

.preset-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text);
  border-color: var(--line-strong);
}

.preset-btn.active {
  background: var(--cyan-muted);
  color: var(--cyan);
  border-color: rgba(0, 212, 255, 0.4);
  font-weight: 600;
}

.editor-pane {
  background: #020512;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: #e2e8f0;
  line-height: 1.5;
  min-height: 16rem;
  max-height: 22rem;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--cyan), #0284c7);
  color: #04081a;
  border: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.65rem 1.35rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 212, 255, 0.35);
}

.btn-secondary {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--sans);
}
.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--line-strong);
}

/* 4-Stage Execution Trace Timeline */
.stage-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.stage-step {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  padding: 0.9rem 1.1rem;
  transition: all 0.2s ease;
}

.stage-step.active {
  border-color: rgba(0, 212, 255, 0.4);
  background: var(--cyan-muted);
}

.stage-step.complete {
  border-color: rgba(16, 185, 129, 0.3);
}

.stage-step.failed {
  border-color: rgba(244, 63, 94, 0.35);
  background: var(--rose-muted);
}

.stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.stage-name {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stage-body {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}

.stage-output {
  margin-top: 0.6rem;
  background: #020512;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #94a3b8;
  max-height: 8rem;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* Side by Side Reality Split View */
.split-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (max-width: 768px) {
  .split-view { grid-template-columns: 1fr; }
}

.pane-claim {
  border: 1px solid var(--emerald-line);
  border-radius: var(--radius-md);
  background: rgba(16, 185, 129, 0.03);
}
.pane-claim .pane-head {
  background: var(--emerald-muted);
  color: var(--emerald);
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--emerald-line);
}

.pane-reality {
  border: 1px solid var(--rose-line);
  border-radius: var(--radius-md);
  background: rgba(244, 63, 94, 0.03);
}
.pane-reality .pane-head {
  background: var(--rose-muted);
  color: var(--rose-text);
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--rose-line);
}

.pane-content {
  padding: 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Terminal Log Formatting */
.term-log {
  background: #01030d;
  color: #cbd5e1;
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  line-height: 1.45;
}
.term-err { color: #fda4af; font-weight: 600; }
.term-warn { color: #fde047; }
/* 4.33 to 1 before. These lines are the caveats inside the simulated terminal, the ones that say
   the example is an example, so they were dimmer than the thing they qualify. 5.94 now, and still
   plainly dimmer than the body text, which measures 18.7. */
.term-dim { color: #7d8b9e; }

/* Estate Dashboard (Maximos View) */
.estate-controls {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.search-input {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 0.85rem;
  flex: 1;
  min-width: 14rem;
}
.search-input:focus {
  border-color: var(--cyan);
}
.search-label {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}
.search-input:focus-visible,
.filter-chip:focus-visible,
#estate-empty-clear:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
/* Inset: the strip scrolls sideways and would clip an outline drawn outside the tab. */
.tab-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }

.filter-btn-group {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.filter-chip {
  font-family: inherit;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}
.filter-chip.active {
  background: var(--cyan-muted);
  color: var(--cyan);
  border-color: rgba(0, 212, 255, 0.4);
  font-weight: 600;
}

.estate-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.estate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  text-align: left;
}

.estate-table th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.estate-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: middle;
}

.estate-table tr:last-child td {
  border-bottom: none;
}

.estate-table tr:hover td {
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.repo-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
}

/* Attestation & Receipt Card */
.receipt-box {
  background: #020512;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.6;
  position: relative;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.receipt-row:last-child { border-bottom: none; }
.receipt-label { color: var(--muted); }
.receipt-value { color: var(--cyan); word-break: break-all; }

/* Responsive adjustments */
@media (min-width: 768px) {
  .hero-title { font-size: 2.3rem; }
  body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Tourguide Spotlight & Popover */
.tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 26, 0.78);
  backdrop-filter: blur(2px);
  z-index: 9990;
  display: none;
}
.tour-overlay.active { display: block; }

.tour-spotlight {
  position: relative;
  z-index: 9995 !important;
  box-shadow: 0 0 0 4px var(--cyan), 0 0 28px rgba(0, 212, 255, 0.45) !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.25s ease !important;
}

.tour-card {
  position: fixed;
  right: clamp(0.5rem, 2vw, 1.5rem);
  bottom: clamp(0.5rem, 2vw, 1.5rem);
  z-index: 9999;
  background: #090f24;
  border: 1px solid var(--cyan);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  width: min(24rem, calc(100vw - 1rem));
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 212, 255, 0.2);
  display: none;
  animation: tourFadeIn 0.2s ease;
}
.tour-card.active { display: block; }
.tour-card:focus-visible,
.tour-actions button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* On a phone the card spans almost the full width. Keep it above the centered
 * spotlight; a bottom-anchored card completely covered the final receipt. */
@media (max-width: 480px) {
  .tour-card {
    top: 0.5rem;
    bottom: auto;
  }
}

@keyframes tourFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tour-step-badge {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cyan);
  background: var(--cyan-muted);
  border: 1px solid rgba(0, 212, 255, 0.3);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 0.5rem;
}
.tour-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.tour-text {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 1rem;
}
.tour-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tour-btn {
  background: var(--cyan);
  color: #04081a;
  border: none;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tour-btn-sec {
  background: transparent;
  color: var(--muted);
  border: none;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.4rem;
}
.tour-btn-sec:hover { color: var(--text); }

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast {
  background: #0e1626;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--cyan);
  color: var(--text);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: toastSlide 0.25s ease;
}
@keyframes toastSlide {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Footer */
footer {
  border-top: 1px solid var(--line);
  margin-top: 4rem;
  padding: 2rem 0 3rem;
  color: var(--muted);
  font-size: 0.85rem;
}
footer a {
  color: var(--cyan);
}

/* --- Telemetry Badge --- */
/* Wraps rather than overflows. The honest replacements for two fabricated numbers were longer
   than the invented ones, and on a 375px screen the strip ran off the right edge with half a
   sentence clipped. Found by opening the deployed page rather than by trusting a 200. */
.telemetry-badge {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  align-items: center;
  gap: 0.35rem 0.5rem;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--cyan);
}
.telemetry-sep {
  color: var(--line-strong);
}
.telemetry-stat {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 560px) {
  /* The whole strip goes. Wrapping stopped it running off the edge but left a four line pill
     sitting on the most valuable part of the screen, and both of its numbers already appear in
     the stats further down with room to breathe. On a phone the header earns its space with the
     wordmark, whether the sandbox is deployed, and the way in. Three data points is not that.
     The 375px screen is the one the entry is judged on, so it gets the hero and nothing else. */
  .telemetry-badge { display: none; }
}

/* --- Socratic Canary Flight Deck --- */
.flight-deck-card {
  margin-bottom: 1.25rem;
  background: linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(4, 8, 26, 0.95));
  border: 1px solid rgba(0, 212, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.flight-deck-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0;
}
.deck-node {
  flex: 1;
  min-width: 10rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: all 0.25s ease;
}
.deck-node.active {
  background: rgba(0, 212, 255, 0.12);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.25);
}
.deck-node.complete {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--emerald-line);
}
.deck-icon {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}
.deck-content {
  display: flex;
  flex-direction: column;
}
.deck-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.deck-meta {
  font-size: 0.7rem;
  color: var(--muted);
  font-family: var(--mono);
}
.deck-connector {
  width: 1.5rem;
  height: 2px;
  background: var(--line);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.deck-connector.active {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
.deck-connector.complete {
  background: var(--emerald);
}

/* MCP Tool Spec */
.mcp-box {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-top: 1rem;
}
/* Keep exact evidence links and outcomes readable in the recorded experiment. */
#control-experiment-result a { color: var(--cyan, #00d4ff); text-decoration: underline; }
#tab-receipts .code-block { overflow-x: auto; }
.hero-case-link a { color: var(--cyan); font-weight: 600; }
#recorded-control-case, #kill-test, #first-view-case { scroll-margin-top: 6rem; }
.control-policy, .control-packet, .control-stage {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin: 1rem 0;
  min-width: 0;
}
.control-policy h4, .control-packet h4, .control-stage h4 { margin: 0 0 0.55rem; }
.control-journey { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.75rem; }
.control-journey .control-stage { margin: 0; border-left: 4px solid var(--cyan); }
.control-journey .control-stage-repaired { border-left-color: var(--emerald); }
.control-journey .control-stage-clean { border-left-color: var(--muted); }
.control-mode { font-size: 0.75rem; color: var(--muted); font-weight: 700; letter-spacing: 0.04em; }
.control-facts { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 0.4rem 0.75rem; margin: 1rem 0; }
.control-facts dt { color: var(--muted); }
.control-facts dd { margin: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: 0.85rem; }
.control-stage-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
@media (max-width: 560px) {
  .control-facts { grid-template-columns: 1fr; gap: 0.2rem; }
  .control-facts dd { margin-bottom: 0.55rem; }
}

/* A numbered text diff remains readable and keyboard reachable at phone width. */
.pr-review-source { overflow-wrap: anywhere; font-family: var(--mono); font-size: 0.78rem; }
#pr-review .card-title { margin: 0; }
.pr-review-hunk { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; margin: 1rem 0; }
.pr-review-hunk h4 { margin: 0 0 0.6rem; }
.pr-review-hunk ol { padding-left: 1.4rem; overflow-wrap: anywhere; }
.pr-review-hunk li { margin: 0.4rem 0; font-family: var(--mono); font-size: 0.82rem; }
.pr-review-controls { display: grid; gap: 0.55rem; max-width: 48rem; }
.pr-review-controls label { font-weight: 600; }
.pr-review-controls textarea, .pr-review-controls input {
  width: 100%; box-sizing: border-box; color: var(--text); background: var(--bg-surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.7rem;
  font: inherit;
}
.pr-review-controls input { font-family: var(--mono); font-size: 0.83rem; }
.pr-review-controls :is(button, input, textarea):focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
#pr-review-status { min-height: 2.5rem; overflow-wrap: anywhere; }
.assess-box-controls { display: grid; gap: 0.55rem; }
.assess-box-controls label { font-weight: 600; }
.assess-box-controls textarea {
  width: 100%; box-sizing: border-box; color: var(--text); background: var(--bg-surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.7rem;
  font-family: var(--mono); font-size: 0.83rem;
}
.assess-box-controls :is(button, textarea):focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
#assess-box-result { min-height: 2.5rem; overflow-wrap: anywhere; }
#assess-box-result ul { padding-left: 1.4rem; margin: 0; }
#assess-box-result li { margin: 0.4rem 0; font-family: var(--mono); font-size: 0.82rem; }
#blind-first, #blind-second { overflow-wrap: anywhere; }
#blind-first ul, #blind-second ul { padding-left: 1.4rem; }

/* ── First view, card E7 ─────────────────────────────────────────────────────────────────────
   The recorded three-run case, above the tabs. The design carries one idea: in the first column a
   green "Job passed" sits beside "Marker detected". That contradiction is the product, so it is the
   one place on the screen with a warning edge. The three columns stay side by side even at 320px,
   because the argument is the comparison across them; stacked, a phone reader sees one run at a
   time and has to hold the other two in memory. */
.first-view {
  margin: 1.25rem 0 0.25rem;
  padding: 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
}
.first-view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.85rem;
}
.first-view-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.evidence-badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  white-space: nowrap;
}
.first-view-arms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
.first-view-pending {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.75rem 0;
}
.first-arm {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--bg-card);
  overflow-wrap: anywhere;
  animation: first-arm-in 420ms ease-out both;
}
.first-arm:nth-child(2) { animation-delay: 140ms; }
.first-arm:nth-child(3) { animation-delay: 280ms; }
@keyframes first-arm-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.first-arm-pass { border-color: var(--emerald-line); }
.first-arm-fail { border-color: var(--rose-line); background: var(--rose-muted); }
/* Green job, detected marker: the claim that is not a control. */
.first-arm-masked {
  border-color: rgba(245, 158, 11, 0.55);
  background: var(--amber-muted);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.18), 0 8px 28px -12px rgba(245, 158, 11, 0.45);
}
.first-arm-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.first-arm-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 1.02rem;
}
.first-arm-status::before {
  content: "";
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
}
.first-arm-pass .first-arm-status { color: var(--emerald); }
.first-arm-pass .first-arm-status::before { background: var(--emerald); box-shadow: 0 0 10px var(--emerald); }
.first-arm-fail .first-arm-status { color: var(--rose-text); }
.first-arm-fail .first-arm-status::before { background: var(--rose); box-shadow: 0 0 10px var(--rose); }
.first-arm-detect { font-size: 0.84rem; color: var(--text); }
.first-arm-masked .first-arm-detect { color: #fbbf24; font-weight: 600; }
.first-arm-run {
  margin-top: auto;
  padding-top: 0.2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--cyan);
}
.first-view-verdict {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}
.first-view-verdict:empty, .first-view-model:empty { display: none; }
/* The sponsor paragraph. NVIDIA green as an edge only; the text keeps the page's contrast. */
.first-view-model {
  margin: 0.85rem 0 0;
  padding: 0.6rem 0 0.6rem 0.85rem;
  border-left: 3px solid #76b900;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}
.first-view-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
}
.first-view-actions a { color: var(--cyan); font-weight: 600; }
.first-view-access { color: var(--muted); font-size: 0.78rem; }
.first-view-model a { color: var(--cyan); font-weight: 600; }
/* The tour, as the first view's one button (06-UX-04). It takes the evidence badge's place in the
   heading row; on a phone it wraps under the title as the badge did. The runs still sit higher
   than before, because each arm lost its input row. */
.first-view-tour { padding: 0.5rem 1rem; font-size: 0.88rem; white-space: nowrap; }
.first-view-tour:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
/* The long model paragraph, moved from the first view to the top of tab 1. */
.model-summary { margin: 0 0 1.5rem; }

@media (max-width: 480px) {
  .first-view { padding: 0.75rem; }
  .first-view-arms { gap: 0.4rem; }
  .first-arm { padding: 0.55rem; gap: 0.22rem; }
  .first-arm-status { font-size: 0.86rem; gap: 0.3rem; }
  .first-arm-detect { font-size: 0.74rem; }
  .first-arm-label { font-size: 0.64rem; }
  .first-arm-run { font-size: 0.75rem; }
}
/* Row alignment across the three runs. Without it a label that wraps in one column ("Clean
   control" at 375px) pushes that column's status below its neighbours', and the eye compares the
   wrong lines. With subgrid every row, label to run link, is shared by all three columns. Browsers
   without subgrid keep the flex column above, which is readable, only unaligned. */
@supports (grid-template-rows: subgrid) {
  .first-view-arms { grid-template-rows: repeat(4, auto); }
  .first-arm { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
  .first-view-pending { grid-row: 1 / -1; }
}
.first-view-verdict code {
  font-family: var(--mono);
  font-size: 0.86em;
  white-space: nowrap;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #fbbf24;
}
@media (max-width: 480px) {
  .first-arm-label { letter-spacing: 0.02em; }
  .first-arm-status { font-size: 0.8rem; }
  .first-view-verdict { font-size: 0.9rem; }
  .first-view-model { font-size: 0.84rem; }
}
/* ── Kill-test panel, Measured Benchmarks ───────────────────────────────────────────────────
   Rules as rows, draws as columns, so the rule a reader is looking at is readable in the row and
   every cell is a touch target at 375px. The totals row is literally the sum of the columns above
   it, which is the whole argument for putting the table on the page. */
.kt-pending, .kt-lead, .kt-baselines, .kt-note { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.kt-lead { margin: 0 0 1rem; }
.kt-designs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.kt-design {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--bg-card);
}
.kt-design-a { border-color: var(--rose-line); }
/* The design in use carries the sponsor's green as an edge, the same mark the first view uses. */
.kt-design-b { border-color: var(--emerald-line); border-left: 3px solid #76b900; }
.kt-design h4 { margin: 0 0 0.45rem; font-size: 0.9rem; font-weight: 600; }
.kt-draws { margin: 0; }
.kt-draws-value { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.kt-draws-unit { color: var(--muted); font-size: 0.85rem; }
.kt-verdict { margin: 0.4rem 0 0; font-size: 0.86rem; line-height: 1.5; }
.kt-pass { color: var(--emerald); }
.kt-fail { color: var(--rose-text); }

.kt-table-wrap { overflow-x: auto; margin: 0.25rem 0 0.6rem; }
.kt-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.kt-table caption { caption-side: top; text-align: left; color: var(--muted); padding-bottom: 0.6rem; line-height: 1.5; }
.kt-table th, .kt-table td { padding: 0.28rem 0.2rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.kt-table thead th { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; color: var(--muted); text-align: center; }
.kt-table thead th:first-child { text-align: left; }
.kt-table tbody th { text-align: left; font-weight: 400; }
/* A visible seam between the two designs, on every row. */
.kt-table tbody td:nth-of-type(4), .kt-table tfoot td:nth-of-type(4),
.kt-table .kt-draw-row th:nth-of-type(4) { border-left: 2px solid var(--line-strong); padding-left: 0.5rem; }
.kt-id { font-family: var(--mono); font-size: 0.74rem; color: var(--cyan); margin-right: 0.45rem; }
.kt-rule { color: var(--text); }
.kt-table td { text-align: center; width: 2.2rem; }
.kt-cell {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
}
.kt-cell-pass { background: var(--emerald); border-color: var(--emerald); }
.kt-cell-fail { background: var(--rose-muted); border-color: var(--rose-line); }
.kt-cell-unparsed {
  background: repeating-linear-gradient(135deg, rgba(245, 158, 11, 0.55) 0 4px, rgba(245, 158, 11, 0.15) 4px 8px);
  border-color: rgba(245, 158, 11, 0.6);
}
/* Scored under the pre-registered exit rule, but by crashing: still green, striped so it is not
   read as the same kind of pass as its neighbours. */
.kt-cell-pass.kt-cell-crash {
  background: repeating-linear-gradient(135deg, var(--emerald) 0 4px, rgba(16, 185, 129, 0.3) 4px 8px);
}
.kt-cell:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.kt-cell[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.kt-table tfoot th { font-weight: 600; text-align: left; }
.kt-total { font-family: var(--mono); font-weight: 700; font-size: 0.95rem; }

.kt-detail td { text-align: left; background: rgba(255, 255, 255, 0.03); padding: 0.75rem 0.85rem 0.9rem; }
.kt-detail p { margin: 0 0 0.45rem; line-height: 1.5; overflow-wrap: anywhere; }
.kt-detail-head { font-weight: 600; }
.kt-detail-rule { color: var(--text); }
.kt-detail-why, .kt-detail-call, .kt-detail-label { color: var(--muted); font-size: 0.84rem; }
.kt-shell { max-height: 16rem; overflow: auto; font-size: 0.76rem; white-space: pre; margin: 0 0 0.5rem; }

.kt-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.2rem 0 0.6rem; font-size: 0.8rem; color: var(--muted); }
.kt-key { display: inline-flex; align-items: center; gap: 0.35rem; background: none !important; border: 0 !important; }
.kt-key::before { content: ""; width: 0.85rem; height: 0.85rem; border-radius: 3px; border: 1px solid transparent; }
.kt-key.kt-cell-pass::before { background: var(--emerald); }
.kt-key.kt-cell-fail::before { background: var(--rose-muted); border-color: var(--rose-line); }
.kt-key.kt-cell-unparsed::before {
  background: repeating-linear-gradient(135deg, rgba(245, 158, 11, 0.55) 0 3px, rgba(245, 158, 11, 0.15) 3px 6px);
}
.kt-key.kt-cell-pass.kt-cell-crash::before {
  background: repeating-linear-gradient(135deg, var(--emerald) 0 3px, rgba(16, 185, 129, 0.3) 3px 6px);
}
.kt-note { margin: 0.5rem 0 0.35rem; font-size: 0.82rem; }
.kt-posthoc, .kt-recall { margin: 0.4rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }

@media (max-width: 560px) {
  .kt-table th, .kt-table td { padding: 0.25rem 0.1rem; }
  .kt-table td { width: 1.75rem; }
  /* The rule stays readable in its row, two lines at most; the full text opens with the cell. */
  .kt-rule {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.78rem;
  }
  .kt-id { display: block; margin: 0 0 0.1rem; }
  .kt-cell { width: 1.5rem; height: 1.5rem; }
  .kt-table tbody td:nth-of-type(4), .kt-table tfoot td:nth-of-type(4),
  .kt-table .kt-draw-row th:nth-of-type(4) { padding-left: 0.3rem; }
  .kt-draws-value { font-size: 1.35rem; }
}
/* At 375px the table overflowed its own scroller by 57 px: a long token in one rule
   ("continue-on-error:") set the rule column's minimum width, pushing Design B off screen. Let the
   rule text break anywhere and keep the cells at their 24 px touch target with almost no padding. */
@media (max-width: 560px) {
  .kt-rule, .kt-id { overflow-wrap: anywhere; }
  .kt-table td { width: auto; padding: 0.25rem 1px; }
}
/* Fixed layout: the columns are set here and content cannot widen them. The first attempt only let
   the rule text break, and the table stayed 57 px too wide because the cause was the detail row's
   unwrappable shell, not the rules. Measured, not assumed. */
.kt-table { table-layout: fixed; }
.kt-col-cell { width: 2.4rem; }
.kt-col-seam { width: 2.95rem; }
.kt-detail td > *, .kt-shell { max-width: 100%; }
@media (max-width: 560px) {
  .kt-col-cell { width: 1.75rem; }
  .kt-col-seam { width: 2.2rem; }
}

/* ── First screen on small phones ─────────────────────────────────────────────────────────────
   The tab strip: an edge fade on whichever side has more tabs. Set by app.js from the scroll
   position, so it disappears once the reader reaches the end, instead of fading the last tab. */
.nav-tabs[data-overflow="end"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
.nav-tabs[data-overflow="start"] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
}
.nav-tabs[data-overflow="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

/* 320 x 640 is the smallest screen the tests hold us to, and on it the "Marker detected" row, half
   of the contradiction the first view exists to show, sat below the fold (status row at 606 of
   640, measured). The space came back from places that are not the evidence: the header on one
   line, the subtitle's bottom margin, and the sandbox disclosure on one line in a smaller face,
   with its words unchanged. The header's tour pill has since become the first view's button. */
@media (max-width: 480px) {
  .hero-subtitle { margin-bottom: 1.1rem; }
}
@media (max-width: 560px) {
  /* The compact score line beside the Sandbox badge wraps the hero caveat onto two lines;
     take the space back from the caveat's own margin so the first view barely moves. */
  .hero-caveat { margin-top: 0.5rem; }
}
@media (max-width: 360px) {
  .header-inner { flex-wrap: nowrap; gap: 0.5rem; }
  .mark { font-size: 1.05rem; }
  .hero-title { font-size: 1.62rem; margin-top: 0.8rem; }
  .hero-subtitle { font-size: 0.95rem; margin-bottom: 0.8rem; }
  .hero-caveat { margin-top: 0.4rem; }
  .hero-caveat .badge-arch { font-size: 0.6rem; letter-spacing: 0; }
  .badge-nemotron { font-size: 0.6rem; }
  .first-view { margin-top: 0.65rem; }
}

/* ── The four stages, with where each one runs ─────────────────────────────────────────────── */
.flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.flow-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  background: var(--bg-card);
}
/* The model's stage carries the sponsor's green edge, the same mark as the first view and the panel. */
.flow-card-model { border-left: 3px solid #76b900; }
.flow-name { font-family: var(--mono); font-weight: 600; color: var(--cyan); display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.flow-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.flow-status::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; flex: none; }
.flow-live { border-color: var(--emerald-line); }
.flow-live::before { background: var(--emerald); }
.flow-recorded { border-color: rgba(0, 212, 255, 0.35); }
.flow-recorded::before { background: var(--cyan); }
.flow-text { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.flow-evidence { margin-top: auto; font-size: 0.8rem; font-weight: 600; color: var(--cyan); }

/* No table on this page fits a phone, so at 560px and below each row of every estate table
   is a card: one row per field, the column name beside its value. The header row stays for
   screen readers and leaves the layout. Every cell of these tables carries a data-label; a
   cell without one wraps in the value column instead of overflowing. */
.estate-empty-state { margin-top: 1rem; }
.estate-empty-state p { margin: 0 0 0.75rem; color: var(--muted); }
@media (max-width: 560px) {
  .estate-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .estate-table, .estate-table tbody, .estate-table tr { display: block; width: 100%; }
  .estate-table tr { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
  .estate-table tr:last-child { border-bottom: none; }
  .estate-table td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.5rem; padding: 0.3rem 0.75rem; border-bottom: none; overflow-wrap: anywhere; }
  .estate-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
  /* Stacked cards must not force sideways scroll: grid children shrink to their track
     instead of sizing to their longest unbreakable run, and pills wrap inside their
     own box instead of holding one nowrap line. Nothing is clipped; long values take
     a second line. */
  .estate-table td > * { min-width: 0; }
  .estate-table td .pill { white-space: normal; }
}

/* More evidence (UX-E). The Receipts tab opens on the recorded control case; the secondary
   cards sit collapsed in native details blocks under one heading. The summary is a button
   in all but name: pointer cursor, visible focus, and the card's own padding rhythm. */
.more-evidence-heading {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--text);
}

details.more-evidence {
  margin-bottom: 1rem;
}

details.more-evidence:last-child {
  margin-bottom: 0;
}

details.more-evidence > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cyan);
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
  list-style-position: inside;
}

details.more-evidence > summary:hover {
  border-color: rgba(0, 212, 255, 0.45);
}

details.more-evidence > summary:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

details.more-evidence[open] > summary {
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: none;
}

details.more-evidence[open] > .card {
  border-radius: 0 0 var(--radius) var(--radius);
  margin-top: 0;
}

/* The committed pull request summary: the counts line reads as the headline, the rows as
   the table, and the provenance as muted small print. */
.action-summary-counts {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 1rem;
}

.action-summary-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 1rem 0 0;
}

/* ==========================================================================
   8-Page App Shell, Sidebar, KPI Stat Tiles, Meters & Slide-Over Drill-Down
   ========================================================================== */

@media (min-width: 1080px) {
  .wrap {
    max-width: 90rem;
  }
}

.console-top-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 4px;
  padding: 0.18rem 0.5rem;
  text-transform: uppercase;
}

.console-header-btn {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0.28rem 0.65rem;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.console-header-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--cyan);
}

.console-header-btn-accent {
  background: rgba(0, 212, 255, 0.12);
  color: var(--cyan);
  border-color: rgba(0, 212, 255, 0.42);
}

.console-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--emerald);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--emerald-line);
  border-radius: 999px;
  padding: 0.24rem 0.65rem;
}

.console-workspace-grid {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.15rem;
}

.console-main-pane {
  min-width: 0;
}

.console-sidebar {
  position: sticky;
  top: 4.4rem;
  background: linear-gradient(180deg, rgba(8, 15, 38, 0.96) 0%, rgba(4, 9, 24, 0.96) 100%);
  border: 1px solid rgba(0, 212, 255, 0.24);
  border-radius: var(--radius-md);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1079px) {
  .console-top-tag,
  .console-live-pill,
  .console-header-btn,
  .console-sidebar {
    display: none;
  }
  .console-workspace-grid {
    display: block;
    margin-top: 0;
  }
}

.console-rail-box {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.console-rail-head {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-dim);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
}

.console-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.console-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.44rem 0.55rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.console-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.console-nav-item.active {
  background: rgba(0, 212, 255, 0.14);
  border-color: rgba(0, 212, 255, 0.45);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--cyan);
}

.console-nav-idx {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 4px;
  padding: 0.06rem 0.32rem;
  flex: none;
}

.console-kv-list {
  margin: 0;
  background: rgba(3, 7, 20, 0.8);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.console-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.73rem;
}

.console-kv-row dt {
  color: var(--muted);
  margin: 0;
}

.console-kv-row dd {
  margin: 0;
}

.console-kv-val {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
}

.console-val-emerald {
  color: var(--emerald);
}

.console-val-cyan {
  color: var(--cyan);
}

.console-val-amber {
  color: var(--amber);
}

.console-stage-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.console-stage-chip {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--emerald);
  background: var(--emerald-muted);
  border: 1px solid var(--emerald-line);
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
  transition: filter 120ms ease;
}

.console-stage-chip:hover {
  filter: brightness(1.2);
}

.console-rail-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.25rem;
  font-size: 0.74rem;
}

/* Top View Bar inside Main Pane */
.app-view-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: rgba(10, 17, 40, 0.85);
  border: 1px solid rgba(0, 212, 255, 0.24);
  border-radius: var(--radius-md);
}

.app-view-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.app-view-breadcrumb {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-transform: uppercase;
}

.app-view-heading {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.app-view-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.console-mini-btn {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.32rem 0.65rem;
}

/* Compact Console Mode: hides verbose prose; keeps WAI-ARIA tab strip reachable */
body.app-compact-mode .app-prose-block {
  display: none;
}

.app-compact-hero-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

@media (max-width: 640px) {
  .app-view-topbar {
    display: none;
  }
  .app-compact-hero-bar {
    padding: 0.35rem 0.55rem;
    margin-bottom: 0.35rem;
    gap: 0.35rem;
  }
}

body.app-compact-mode .hero-title {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0;
}

body.app-compact-mode .hero-title br {
  display: none;
}

body.app-compact-mode .hero-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
}

body.app-compact-mode .hero-caveat {
  margin: 0;
}

/* 6-Tile KPI Stat Grid with Progress Bars & Drill-Down Triggers */
.app-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.15rem;
}

@media (max-width: 860px) {
  .app-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .app-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.app-stat-card {
  background: linear-gradient(180deg, rgba(12, 21, 50, 0.92) 0%, rgba(6, 11, 28, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.app-stat-card:hover {
  border-color: var(--cyan);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 212, 255, 0.12);
}

.app-stat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
}

.app-stat-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.app-stat-metric {
  font-family: var(--mono);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
}

.app-meter {
  width: 100%;
  height: 0.36rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.app-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.meter-full { width: 100%; }
.meter-eighty { width: 80%; }
.meter-half { width: 45%; }

.meter-emerald { background: linear-gradient(90deg, #059669, #10b981); }
.meter-cyan { background: linear-gradient(90deg, #0284c7, #00d4ff); }
.meter-amber { background: linear-gradient(90deg, #d97706, #f59e0b); }

.app-stat-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

.app-drill-btn {
  background: transparent;
  border: none;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  flex: none;
}

.app-drill-btn:hover {
  text-decoration: underline;
}

/* Mini KPI Row inside Modules */
.app-mini-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (max-width: 640px) {
  .app-mini-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.app-mini-kpi {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.app-mini-kpi span {
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.app-mini-kpi strong {
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--text);
}

/* Workbench & Modules */
.console-workbench {
  background: linear-gradient(180deg, rgba(10, 18, 44, 0.96) 0%, rgba(5, 10, 28, 0.96) 100%);
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

.console-workbench-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  background: rgba(0, 212, 255, 0.07);
  border-bottom: 1px solid rgba(0, 212, 255, 0.22);
}

.console-workbench-title-group {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.console-window-dots {
  display: inline-flex;
  gap: 0.3rem;
}

.console-window-dots i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.55);
  display: inline-block;
}

.console-workbench-title {
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.console-workbench-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.console-workbench-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  padding: 1.1rem;
}

.console-workbench-grid.single-module-view {
  grid-template-columns: 1fr;
}

@media (max-width: 960px) {
  .console-workbench-grid {
    grid-template-columns: 1fr;
  }
}

.console-module {
  background: rgba(4, 8, 26, 0.78);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.console-module-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--line);
}

.console-module-title {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cyan);
}

.console-module-body {
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.console-form-row {
  display: grid;
  grid-template-columns: 1fr 8rem;
  gap: 0.6rem;
}

@media (max-width: 640px) {
  .console-form-row {
    grid-template-columns: 1fr;
  }
}

.console-field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
}

.console-field input,
.console-select,
.console-textarea {
  background: rgba(3, 6, 18, 0.92);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.42rem 0.55rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  width: 100%;
}

.console-field-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
}

.console-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.console-action-btn {
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.42rem 0.75rem;
}

.console-status-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--emerald);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid var(--emerald-line);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
}

.console-status-led {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--emerald);
  flex: none;
}

.harness-layer-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.harness-layer-chip {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.24rem 0.5rem;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--emerald-line);
  color: var(--emerald);
  cursor: pointer;
}

.harness-layer-chip.layer-warn {
  background: var(--amber-muted);
  border-color: rgba(245, 158, 11, 0.45);
  color: var(--amber);
}

.harness-layer-chip.layer-deny {
  background: var(--rose-muted);
  border-color: var(--rose-line);
  color: var(--rose-text);
}

.console-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

@media (max-width: 640px) {
  .console-preset-grid {
    grid-template-columns: 1fr;
  }
}

.console-preset-btn {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-align: left;
  padding: 0.38rem 0.55rem;
}

.console-custom-box {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.console-verdict-banner {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
}

.console-verdict-allow,
.verdict-allow {
  background: var(--emerald-muted);
  border-color: var(--emerald-line);
  color: var(--emerald);
}

.console-verdict-confirm,
.verdict-confirm {
  background: var(--amber-muted);
  border-color: rgba(245, 158, 11, 0.45);
  color: var(--amber);
}

.console-verdict-deny,
.verdict-deny {
  background: var(--rose-muted);
  border-color: var(--rose-line);
  color: var(--rose-text);
}

.console-terminal-wrap {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #020510;
}

.console-terminal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.32rem 0.65rem;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--muted);
}

.console-terminal-code {
  display: block;
  margin: 0;
  border: none;
  border-radius: 0;
  max-height: 14rem;
  overflow: auto;
  font-size: 0.74rem;
  line-height: 1.45;
  padding: 0.65rem 0.75rem;
  white-space: pre;
}

.console-workbench-foot {
  margin: 0;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}

/* Slide-Over Drill-Down Drawer */
.app-drilldown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 5, 16, 0.68);
  backdrop-filter: blur(4px);
  z-index: 250;
}

.app-drilldown-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(34rem, 94vw);
  background: #060c22;
  border-left: 1px solid rgba(0, 212, 255, 0.4);
  box-shadow: -16px 0 44px rgba(0, 0, 0, 0.65);
  z-index: 260;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-drilldown-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.15rem;
  background: rgba(0, 212, 255, 0.08);
  border-bottom: 1px solid rgba(0, 212, 255, 0.24);
}

.app-drilldown-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-transform: uppercase;
}

.app-drilldown-title {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
  color: var(--text);
}

.app-drilldown-body {
  padding: 1.15rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.app-drilldown-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.app-drilldown-summary {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.5;
}

.app-drilldown-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.app-launchpad-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.9rem 1.05rem;
}

@media (max-width: 820px) {
  .app-launchpad-grid {
    grid-template-columns: 1fr;
  }
}

.app-launchpad-card {
  background: rgba(11, 18, 42, 0.78);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.55rem;
}

.app-launchpad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.app-launchpad-head strong {
  font-size: 0.84rem;
  color: var(--text);
  flex: 1;
}

.app-launchpad-card p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

/* --- SOTA UX: NN/g Heuristic #1 Live Agent Execution Stepper --- */
.agent-exec-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0.55rem 0;
}

@media (max-width: 720px) {
  .agent-exec-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.agent-exec-step {
  font-family: var(--mono);
  font-size: 0.69rem;
  font-weight: 600;
  padding: 0.32rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.65);
  color: var(--muted);
  text-align: center;
  transition: all 140ms ease;
}

.agent-exec-step.step-active {
  border-color: var(--cyan);
  background: rgba(0, 212, 255, 0.14);
  color: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.22);
}

.agent-exec-step.step-done {
  border-color: var(--emerald-line);
  background: var(--emerald-muted);
  color: var(--emerald);
}

.agent-exec-step.step-error {
  border-color: rgba(244, 63, 94, 0.55);
  background: rgba(244, 63, 94, 0.14);
  color: var(--rose);
}

/* --- SOTA UX: GitLab Pajamas Actionable Error & Recovery Banner --- */
.pajamas-error-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.55rem 0;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(244, 63, 94, 0.55);
  border-left: 4px solid var(--rose);
  background: rgba(244, 63, 94, 0.12);
}

.pajamas-error-body {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  font-size: 0.78rem;
}

.pajamas-error-body strong {
  color: #fda4af;
}

.pajamas-error-body span {
  color: var(--text);
}

/* --- SOTA UX: GitLab Pajamas Colorized Diff Viewer & Copy Bar --- */
.pajamas-remediation-panel {
  margin: 0.65rem 0;
  border: 1px solid rgba(0, 212, 255, 0.32);
  border-radius: var(--radius-sm);
  background: #070d20;
  overflow: hidden;
}

.pajamas-remediation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.pajamas-remediation-badges,
.pajamas-copy-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pajamas-diff-view {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.45;
  max-height: 16rem;
  overflow: auto;
  padding: 0.45rem 0;
}

.pajamas-diff-line {
  padding: 0.08rem 0.75rem;
  white-space: pre;
  border-left: 3px solid transparent;
}

.pajamas-diff-hunk {
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.08);
  border-left-color: var(--cyan);
  font-weight: 600;
}

.pajamas-diff-del {
  color: #fda4af;
  background: rgba(244, 63, 94, 0.16);
  border-left-color: var(--rose);
}

.pajamas-diff-add {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.16);
  border-left-color: var(--emerald);
}

.pajamas-diff-ctx {
  color: var(--muted);
}

.supervised-actor-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.actor-step {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.68);
  font-size: 0.76rem;
  line-height: 1.42;
  color: var(--text);
}

.actor-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.actor-system {
  background: rgba(0, 212, 255, 0.14);
  color: var(--cyan);
  border: 1px solid rgba(0, 212, 255, 0.4);
}

.actor-agent {
  background: var(--emerald-muted);
  color: var(--emerald);
  border: 1px solid var(--emerald-line);
}

.actor-human {
  background: rgba(251, 191, 36, 0.14);
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.45);
}

@media (max-width: 960px) {
  .supervised-actor-rail {
    grid-template-columns: 1fr;
  }
}