/*
 * Nexus — Infrix Block Explorer
 *
 * NEXUS-REDESIGN-PLAN-2026-05-09 Phase 0: extracted from inline <style>
 * in index.html. Tokens, animations, and component styles preserved
 * byte-for-byte from the pre-redesign single-file SPA. Phase 0 adds
 * top-nav + view-frame styles at the end of this file; later phases
 * will rebalance + theme.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/*
 * NEXUS — Spine Aurora design system.
 *
 * Aurora-Dark is the default theme — operators run this dashboard for
 * hours and a dark surface reduces eye strain. Daylight is the clean
 * light variant (Linear/Stripe-style). Phosphor is high-contrast
 * terminal-green for accessibility / projector contexts.
 *
 * Every theme defines the canonical seven-stage SPINE gradient
 * (violet → indigo → cyan → mint → emerald → chartreuse → gold). The
 * spine flow widget paints each dot in its stage colour as it
 * activates so the visual flow mirrors the data flow.
 */
:root,
:root[data-theme="dark"] {
  /* === Aurora-Dark (default) === */
  --bg:               #08090F;
  --bg-alt:           #0E1119;
  --bg-deep:          #04050A;
  --surface:          #131724;
  --surface-alt:      #1B2031;
  --surface-hover:    #232940;
  --border:           #252B40;
  --border-bold:      #353D58;
  --border-strong:    #4A5478;
  --text:             #ECEFFA;
  --text-secondary:   #9BA4C2;
  /* WCAG AA: --text-dim must reach >=4.5:1 on the darkest surfaces (#0E1119 /
     #1B2031). #5A6385 was ~3:1 (axe color-contrast). #8B94BD is ~5.3-5.9:1. */
  --text-dim:         #8B94BD;
  /* WCAG AA: #6E5BFF was ~3.3-3.9:1 as text on dark surfaces and 4.35:1 as a
     button background with dark text (both below 4.5). #8F82FF clears both as
     text-on-dark and as button-bg-with-dark-text. */
  --accent:           #8F82FF;        /* primary action */
  --accent-soft:      #2D2755;        /* accent backgrounds */
  --accent-glow:      rgba(110, 91, 255, 0.32);
  --ok:               #4DE3B5;
  --ok-soft:          #0F3D2C;
  --warn:             #FFC960;
  --warn-soft:        #3D2F0F;
  --alert:            #FF6E92;
  --alert-soft:       #3D0F1E;
  --info:             #6EAFFF;
  --info-soft:        #0F1F3D;

  /* Spine 7-stage gradient (cool → warm) */
  --spine-1: #8E7BFF;  /* intent      — violet */
  --spine-2: #6E9CFF;  /* plan        — indigo */
  --spine-3: #4EC8FF;  /* approval    — cyan */
  --spine-4: #4DE3B5;  /* execution   — mint */
  --spine-5: #6EFFB0;  /* outcome     — emerald */
  --spine-6: #C8FF6E;  /* evidence    — chartreuse */
  --spine-7: #FFD24E;  /* anchor      — gold */
  --spine-track: #1F2438;

  /* Shadows + glows */
  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:        0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow:      0 0 0 1px var(--accent-glow), 0 4px 24px var(--accent-glow);

  /* Type + radius + motion */
  --font:             'Inter', system-ui, -apple-system, sans-serif;
  --mono:             'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  --radius:           10px;
  --radius-sm:        6px;
  --radius-xs:        4px;
  --motion-fast:      120ms cubic-bezier(0.4, 0.0, 0.2, 1);
  --motion-base:      200ms cubic-bezier(0.4, 0.0, 0.2, 1);
  --motion-slow:      400ms cubic-bezier(0.4, 0.0, 0.2, 1);

  /* Memphis-era pop colors are kept as aliases so legacy spine.js
   * (the archived pre-redesign home page) still renders correctly. */
  --coral: #FF6E92;
  --hot-pink: #FF6E92;
  --electric-blue: #6EAFFF;
  --indigo: #6E5BFF;
  --mint: #4DE3B5;
  --sunny: #FFC960;
  --tangerine: #FFA86E;
  --red: #FF6E92;
  --gradient-pop: linear-gradient(135deg, var(--spine-1), var(--spine-3), var(--spine-5));
  --gradient-cool: linear-gradient(135deg, var(--spine-2), var(--spine-4));
  --gradient-warm: linear-gradient(135deg, var(--spine-6), var(--spine-7));
  --shadow-pop: 0 2px 0 rgba(0,0,0,0.6);
  --shadow-pop-sm: 0 1px 0 rgba(0,0,0,0.6);
}

:root[data-theme="light"] {
  /* === Daylight — clean light variant === */
  --bg:               #FAFBFD;
  --bg-alt:           #F2F4F9;
  --bg-deep:          #ECEEF6;
  --surface:          #FFFFFF;
  --surface-alt:      #F5F7FB;
  --surface-hover:    #EEF1F8;
  --border:           #E4E8F0;
  --border-bold:      #CFD5E2;
  --border-strong:    #A8B0C4;
  --text:             #15192B;
  --text-secondary:   #5A6280;
  --text-dim:         #9BA4C2;
  --accent:           #5B47E0;
  --accent-soft:      #EDEAFB;
  --accent-glow:      rgba(91, 71, 224, 0.18);
  --ok:               #18A57B;
  --ok-soft:          #DEFBED;
  --warn:             #C77E00;
  --warn-soft:        #FFF3D6;
  --alert:            #D43A6A;
  --alert-soft:       #FBE2EA;
  --info:             #2563EB;
  --info-soft:        #DCEAFB;

  --spine-1: #5B47E0;
  --spine-2: #2563EB;
  --spine-3: #0EA5E9;
  --spine-4: #14B8A6;
  --spine-5: #18A57B;
  --spine-6: #65A30D;
  --spine-7: #D97706;
  --spine-track: #E4E8F0;

  --shadow-sm:        0 1px 2px rgba(21, 25, 43, 0.05);
  --shadow-md:        0 4px 14px rgba(21, 25, 43, 0.08);
  --shadow-lg:        0 16px 48px rgba(21, 25, 43, 0.12);
  --shadow-glow:      0 0 0 3px var(--accent-glow);

  --coral: #FF6E92;
  --hot-pink: #D43A6A;
  --electric-blue: #2563EB;
  --indigo: #5B47E0;
  --mint: #14B8A6;
  --sunny: #D97706;
  --tangerine: #EA580C;
  --red: #D43A6A;
  --gradient-pop: linear-gradient(135deg, var(--spine-1), var(--spine-3), var(--spine-5));
  --gradient-cool: linear-gradient(135deg, var(--spine-2), var(--spine-4));
  --gradient-warm: linear-gradient(135deg, var(--spine-6), var(--spine-7));
  --shadow-pop: 0 2px 0 rgba(21, 25, 43, 0.10);
  --shadow-pop-sm: 0 1px 0 rgba(21, 25, 43, 0.10);
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

/*
 * Aurora ribbon — a subtle horizontal light wash near the top of the
 * page that picks up the spine-stage gradient. Sits behind everything,
 * pointer-events none. Each theme tunes the opacity via tokens so
 * Daylight is barely-there and Aurora-Dark is just a hint of glow.
 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 320px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, color-mix(in srgb, var(--spine-1) 12%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 0%, color-mix(in srgb, var(--spine-3) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 50% 0%, color-mix(in srgb, var(--spine-5) 8%, transparent) 0%, transparent 70%);
  opacity: 0.85;
  mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}
:root[data-theme="contrast"] body::before { display: none; }

@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes pop { 0% { transform:scale(0.95); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@keyframes slideIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
@keyframes wiggle { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-2deg); } 75% { transform:rotate(2deg); } }
@keyframes pulse-dot { 0%,100% { transform:scale(1); } 50% { transform:scale(1.4); } }
@keyframes spin { to { transform:rotate(360deg); } }

.fade-up { animation: fadeUp 0.5s ease-out both; }
.fade-up-1 { animation-delay: 0.05s; }
.fade-up-2 { animation-delay: 0.1s; }
.fade-up-3 { animation-delay: 0.15s; }

/* ===== Container ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ===== Header ===== */
/* body > header scopes these to the TOP app header only — in-page views
   create their own <header class="workspace-header"> elements, which must
   NOT inherit the app bar's sticky positioning / z-index (that made the
   Studio banner a sticky z-2000 element covering the header dropdowns). */
body > header {
  padding: 16px 0;
  border-bottom: 3px solid var(--text);
  background: var(--bg);
  position: sticky;
  top: 0;
  /* Above all page content (which reaches z 200/800/999) so the header
     dropdowns (identity switcher, theme palette, search results) are never
     covered, while staying below the 9000 modal/command-palette layer. */
  z-index: 2000;
}

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

.logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.logo-text {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: var(--gradient-pop);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-sub {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid var(--text);
  padding: 2px 8px;
  border-radius: 4px;
}

/* Second-tier context strip: mode + acting-identity on the left, the
   live/connection/block/theme status cluster floated to the right. Wraps
   instead of clipping so nothing is ever squished or obscured. */
.header-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.header-context .header-pulse { margin-left: auto; }

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint);
  border: 2px solid var(--text);
  animation: pulse-dot 2s infinite;
}

.status-dot.disconnected { background: var(--red); }

.block-height-display {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  /* WCAG AA: dark text on the bright --sunny background (light text was
     1.32:1). #08090F on #FFC960 is ~13:1. */
  color: var(--bg);
  background: var(--sunny);
  padding: 4px 14px;
  border-radius: 4px;
  border: 2px solid var(--bg);
  box-shadow: var(--shadow-pop-sm);
}

/* The cockpit-rail footer link was unstyled (browser default #0000EE link
   color failed contrast on the dark surface). Give it the accent color, which
   meets WCAG AA on the rail surface. */
.cockpit-rail-footer-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.cockpit-rail-footer-link:hover {
  text-decoration: underline;
}

/* Base link color: unstyled in-content anchors must not fall back to the
   browser default (#0000EE), which fails WCAG AA contrast on dark surfaces.
   Styled link components (.workspace-link, etc.) override this by specificity. */
a {
  color: var(--accent);
}

.auto-refresh-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.toggle-switch {
  width: 40px;
  height: 22px;
  background: var(--border-bold);
  border: 2px solid var(--text);
  border-radius: 11px;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}

.toggle-switch.active { background: var(--mint); }

.toggle-switch::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--text);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: all 0.3s;
}

.toggle-switch.active::after { transform: translateX(18px); }

/* ===== Search ===== */
.search-section {
  padding: 20px 0 8px;
}

.search-bar {
  display: flex;
  gap: 0;
  border: 3px solid var(--text);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  background: var(--surface);
  transition: transform 0.15s;
}

.search-bar:focus-within {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--text);
}

.search-input {
  flex: 1;
  border: none;
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--text);
  background: transparent;
  outline: none;
}

.search-input::placeholder { color: var(--text-dim); }

.search-btn {
  background: var(--gradient-pop);
  color: white;
  border: none;
  padding: 14px 28px;
  font-family: var(--font);
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: opacity 0.2s;
  border-left: 3px solid var(--text);
}

.search-btn:hover { opacity: 0.9; }

.search-hint {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 8px;
  font-weight: 500;
}

/* Search Results */
.search-results {
  display: none;
  margin-top: 16px;
  animation: pop 0.25s ease-out;
}

.search-results.visible { display: block; }

.search-result-card {
  background: var(--surface);
  border: 3px solid var(--text);
  border-radius: var(--radius-sm);
  padding: 20px;
  box-shadow: var(--shadow-pop);
  position: relative;
}

.search-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.search-result-type {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 4px;
  border: 2px solid var(--text);
}

.search-result-type.tx { background: var(--bg-alt); color: var(--text); }
.search-result-type.contract { background: #EEF2FF; color: var(--indigo); }
.search-result-type.block { background: #ECFDF5; color: var(--mint); }

.search-close {
  background: none;
  border: 2px solid var(--text);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  font-size: 1rem;
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.search-close:hover {
  background: var(--red);
  color: white;
  border-color: var(--red);
}

.search-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.search-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-detail-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.search-detail-value {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text);
  word-break: break-all;
}

.search-not-found {
  text-align: center;
  padding: 24px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ===== Main ===== */
main { padding: 20px 0 48px; }
.section { margin-bottom: 28px; }

.section-title {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-badge {
  font-size: 0.72rem;
  font-weight: 800;
  background: var(--text);
  color: var(--surface);
  padding: 2px 10px;
  border-radius: 4px;
  min-width: 24px;
  text-align: center;
}

/* ===== Stats ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.stat-card {
  background: var(--surface);
  border: 3px solid var(--text);
  border-radius: var(--radius-sm);
  padding: 18px;
  box-shadow: var(--shadow-pop);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--text);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}

.stat-card:nth-child(1)::before { background: var(--gradient-pop); }
.stat-card:nth-child(2)::before { background: var(--indigo); }
.stat-card:nth-child(3)::before { background: var(--gradient-cool); }
.stat-card:nth-child(4)::before { background: var(--gradient-warm); }

.stat-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.stat-value {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.1;
}

.stat-value.coral { color: var(--coral); }
.stat-value.indigo { color: var(--indigo); }
.stat-value.mint { color: var(--mint); }
.stat-value.tangerine { color: var(--tangerine); }

.stat-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ===== Transactions ===== */
.tx-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
}

.tx-list::-webkit-scrollbar { width: 8px; }
.tx-list::-webkit-scrollbar-track { background: var(--bg-alt); border-radius: 4px; }
.tx-list::-webkit-scrollbar-thumb { background: var(--border-bold); border-radius: 4px; border: 2px solid var(--bg-alt); }

.tx-item {
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: var(--radius-xs);
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.15s;
}

.tx-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.tx-item.success { border-left: 6px solid var(--mint); }
.tx-item.failed { border-left: 6px solid var(--red); }

.tx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tx-hash {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--electric-blue);
}

.tx-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 2px solid var(--text);
}

.tx-badge.success { background: #ECFDF5; color: #065F46; }
.tx-badge.failed { background: #FEF2F2; color: #991B1B; }

.tx-meta {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  flex-wrap: wrap;
}

.tx-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px dashed var(--border);
  font-size: 0.78rem;
  display: none;
  animation: slideIn 0.2s ease-out;
}

.tx-item.expanded .tx-details { display: block; }

.tx-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  gap: 12px;
}

/* Replay panel */
.replay-btn {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
  padding: 4px 12px; border-radius: 4px; border: 2px solid var(--indigo);
  background: rgba(99,102,241,0.1); color: var(--indigo); cursor: pointer;
  margin-top: 8px; transition: all 0.15s;
}
.replay-btn:hover { background: var(--indigo); color: white; }
.replay-panel {
  margin-top: 10px; padding: 12px; background: var(--bg-alt); border-radius: 8px;
  border: 2px solid var(--indigo); font-size: 0.78rem; display: none;
}
.replay-panel.visible { display: block; animation: slideIn 0.2s ease-out; }
.replay-section-title { font-weight: 800; font-size: 0.7rem; text-transform: uppercase; color: var(--text-dim); margin: 10px 0 4px; }
.replay-steps { font-family: var(--mono); font-size: 0.72rem; max-height: 200px; overflow-y: auto; background: var(--surface); padding: 8px; border-radius: 6px; border: 1px solid var(--border); }
.replay-step { padding: 2px 0; }
.replay-step .op { color: var(--indigo); }
.replay-step .detail { color: var(--text-secondary); }
.replay-step .gas { color: var(--text-dim); font-size: 0.65rem; }
.replay-mem { font-family: var(--mono); font-size: 0.72rem; }
.replay-mem-change { padding: 2px 0; }
.replay-mem-offset { color: var(--tangerine); }
.replay-mem-old { color: var(--text-dim); text-decoration: line-through; }
.replay-mem-new { color: var(--mint); font-weight: 600; }
.replay-flame { margin-top: 6px; }
.replay-flame-bar { height: 22px; border-radius: 4px; margin: 2px 0; display: flex; align-items: center; padding: 0 6px; font-size: 0.68rem; font-family: var(--mono); color: white; cursor: default; position: relative; }
.replay-flame-bar:hover { opacity: 0.85; }
.replay-identical { color: var(--mint); font-weight: 700; margin-top: 8px; }
.replay-counterfactual { color: var(--tangerine); font-weight: 700; margin-top: 8px; }
.whatif-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.whatif-input { flex: 1; padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-family: var(--mono); font-size: 0.78rem; color: var(--text); }
.whatif-btn { font-size: 0.7rem; font-weight: 700; padding: 6px 14px; border-radius: 4px; border: 2px solid var(--indigo); background: var(--indigo); color: white; cursor: pointer; }

/* Temporal panels */
.temporal-section { margin-top: 20px; }
.temporal-panel { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 16px; margin-top: 10px; }
.temporal-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tangerine); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.temporal-title .icon { font-size: 1rem; }
.callback-item { padding: 8px 10px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); margin-bottom: 6px; font-size: 0.75rem; }
.callback-fn { font-family: var(--mono); color: var(--indigo); font-weight: 600; }
.callback-meta { color: var(--text-dim); font-size: 0.68rem; margin-top: 2px; }
.callback-status { font-weight: 700; }
.callback-status.pending { color: var(--tangerine); }
.callback-status.executed { color: var(--mint); }
.callback-status.cancelled { color: var(--text-dim); }
.time-travel-slider { width: 100%; margin: 8px 0; accent-color: var(--indigo); }
.time-travel-label { font-family: var(--mono); font-size: 0.78rem; color: var(--text-secondary); }
.time-travel-result { margin-top: 8px; padding: 8px; background: var(--bg); border-radius: 6px; font-family: var(--mono); font-size: 0.75rem; }
.sim-panel { margin-top: 10px; }
.sim-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.sim-input { flex: 1; padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-family: var(--mono); font-size: 0.78rem; color: var(--text); }
.sim-btn { font-size: 0.7rem; font-weight: 700; padding: 6px 14px; border-radius: 4px; border: 2px solid var(--tangerine); background: var(--tangerine); color: white; cursor: pointer; }
.sim-result { margin-top: 8px; padding: 10px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); font-size: 0.78rem; }
.sim-success { border-color: var(--mint); }
.sim-fail { border-color: var(--red); }

/* Shadow State */
.shadow-section { margin-top: 20px; }
.shadow-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hot-pink); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.shadow-title .icon { font-size: 1rem; }
.shadow-panel { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 16px; }
.shadow-key-item { padding: 8px 10px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); margin-bottom: 6px; font-size: 0.75rem; display: flex; justify-content: space-between; align-items: center; }
.shadow-key-name { font-family: var(--mono); color: var(--electric-blue); font-weight: 600; }
.shadow-key-level { font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.shadow-key-level.public { background: rgba(16,185,129,0.15); color: var(--mint); border: 1px solid var(--mint); }
.shadow-key-level.private { background: rgba(255,46,147,0.15); color: var(--hot-pink); border: 1px solid var(--hot-pink); }
.shadow-key-level.owner_read { background: rgba(251,146,60,0.15); color: var(--tangerine); border: 1px solid var(--tangerine); }
.shadow-key-level.authority_only { background: rgba(99,102,241,0.15); color: var(--indigo); border: 1px solid var(--indigo); }
.shadow-value { font-family: var(--mono); font-size: 0.72rem; color: var(--text-secondary); word-break: break-all; }
.shadow-encrypted { color: var(--hot-pink); font-style: italic; }
.shadow-decrypt-btn { font-size: 0.65rem; font-weight: 700; padding: 3px 10px; border-radius: 4px; border: 1px solid var(--hot-pink); background: transparent; color: var(--hot-pink); cursor: pointer; }
.shadow-decrypt-btn:hover { background: rgba(255,46,147,0.15); }
.shadow-lookup-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.shadow-lookup-input { flex: 1; padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-family: var(--mono); font-size: 0.78rem; color: var(--text); }
.shadow-lookup-btn { font-size: 0.7rem; font-weight: 700; padding: 6px 14px; border-radius: 4px; border: 2px solid var(--hot-pink); background: var(--hot-pink); color: white; cursor: pointer; }

/* Sentient: Live Feeds */
.feeds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.feed-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 14px; transition: border-color 0.2s; }
.feed-card:hover { border-color: var(--electric-blue); }
.feed-name { font-family: var(--mono); font-size: 0.85rem; font-weight: 700; color: var(--electric-blue); }
.feed-value { font-family: var(--mono); font-size: 1.3rem; font-weight: 800; color: var(--text); margin: 4px 0; }
.feed-meta { font-size: 0.68rem; color: var(--text-dim); display: flex; gap: 8px; flex-wrap: wrap; }
.feed-confidence { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; }
.feed-confidence.high { background: rgba(6,214,160,0.15); color: var(--mint); }
.feed-confidence.medium { background: rgba(251,191,36,0.15); color: var(--sunny); }
.feed-confidence.low { background: rgba(239,68,68,0.15); color: var(--red); }

/* Sentient: Event Subscriptions */
.subs-section { margin-top: 20px; }
.subs-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--indigo); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.subs-title .icon { font-size: 1rem; }
.sub-item { padding: 8px 10px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); margin-bottom: 6px; font-size: 0.75rem; display: flex; justify-content: space-between; align-items: center; }
.sub-arrow { color: var(--indigo); font-weight: 700; margin: 0 6px; }
.sub-event { font-family: var(--mono); color: var(--tangerine); font-size: 0.7rem; }
.sub-handler { font-family: var(--mono); color: var(--mint); font-size: 0.7rem; }
.sub-dispatches { font-size: 0.65rem; color: var(--text-dim); }
.sub-active { color: var(--mint); font-weight: 700; }
.sub-inactive { color: var(--text-dim); font-weight: 700; }

/* Sentient: Behavioral Awareness */
.awareness-section { margin-top: 20px; }
.awareness-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--coral); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.awareness-title .icon { font-size: 1rem; }
.awareness-panel { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 16px; }
.awareness-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.awareness-stat { text-align: center; padding: 10px 6px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); }
.awareness-stat-value { font-family: var(--mono); font-size: 1.1rem; font-weight: 800; color: var(--text); }
.awareness-stat-label { font-size: 0.62rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.anomaly-bar { height: 6px; border-radius: 3px; background: var(--border); margin-top: 10px; overflow: hidden; }
.anomaly-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
.anomaly-low { background: var(--mint); }
.anomaly-medium { background: var(--sunny); }
.anomaly-high { background: var(--red); }
.awareness-error { margin-top: 10px; padding: 8px 10px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); border-radius: 6px; font-size: 0.72rem; color: var(--red); font-family: var(--mono); }

/* Immune System: Health Badge */
.health-badge { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.health-badge.healthy { background: var(--mint); box-shadow: 0 0 6px rgba(6,214,160,0.5); }
.health-badge.throttled { background: var(--sunny); box-shadow: 0 0 6px rgba(251,191,36,0.5); animation: pulse-badge 1.5s infinite; }
.health-badge.paused { background: var(--tangerine); box-shadow: 0 0 6px rgba(251,146,60,0.5); animation: pulse-badge 1s infinite; }
.health-badge.frozen { background: var(--red); box-shadow: 0 0 8px rgba(239,68,68,0.6); animation: pulse-badge 0.7s infinite; }
@keyframes pulse-badge { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
.immune-status-tag { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.04em; }
.immune-status-tag.normal { background: rgba(6,214,160,0.12); color: var(--mint); }
.immune-status-tag.throttled { background: rgba(251,191,36,0.15); color: var(--sunny); }
.immune-status-tag.paused { background: rgba(251,146,60,0.15); color: var(--tangerine); }
.immune-status-tag.frozen { background: rgba(239,68,68,0.15); color: var(--red); }
.contract-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

/* Immune System: Circuit Breaker Panel */
.breaker-section { margin-top: 20px; }
.breaker-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--red); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.breaker-title .icon { font-size: 1rem; }
.breaker-panel { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 16px; }
.breaker-state-label { font-family: var(--mono); font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }
.breaker-reason { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 8px; }
.breaker-meta { font-size: 0.68rem; color: var(--text-dim); display: flex; gap: 12px; flex-wrap: wrap; }

/* Immune System: Alert Feed */
.alert-feed { max-height: 300px; overflow-y: auto; }
.alert-item { padding: 8px 10px; background: var(--bg); border-radius: 6px; border-left: 3px solid var(--border); margin-bottom: 6px; font-size: 0.73rem; }
.alert-item.critical { border-left-color: var(--red); }
.alert-item.high { border-left-color: var(--tangerine); }
.alert-item.medium { border-left-color: var(--sunny); }
.alert-item.low { border-left-color: var(--mint); }
.alert-type { font-family: var(--mono); font-weight: 700; color: var(--indigo); }
.alert-severity { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; margin-left: 6px; }
.alert-severity.critical { background: rgba(239,68,68,0.15); color: var(--red); }
.alert-severity.high { background: rgba(251,146,60,0.15); color: var(--tangerine); }
.alert-severity.medium { background: rgba(251,191,36,0.15); color: var(--sunny); }
.alert-severity.low { background: rgba(6,214,160,0.12); color: var(--mint); }
.alert-detail { color: var(--text-dim); margin-top: 2px; }
.alert-contract { font-family: var(--mono); color: var(--text-secondary); font-size: 0.68rem; }

/* Immune System: Quarantine */
.quarantine-item { padding: 10px 12px; background: var(--bg); border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; margin-bottom: 6px; }
.quarantine-url { font-family: var(--mono); font-weight: 700; color: var(--red); font-size: 0.8rem; }
.quarantine-reason { font-size: 0.72rem; color: var(--text-secondary); margin-top: 3px; }
.quarantine-severity-tag { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; }
.quarantine-severity-tag.critical { background: rgba(239,68,68,0.15); color: var(--red); }
.quarantine-severity-tag.warning { background: rgba(251,191,36,0.15); color: var(--sunny); }

.tx-detail-label { color: var(--text-dim); font-weight: 700; flex-shrink: 0; }
.tx-detail-value { font-family: var(--mono); color: var(--text-secondary); word-break: break-all; text-align: right; }

/* ===== Contracts ===== */
.contracts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.contract-card {
  background: var(--surface);
  border: 3px solid var(--text);
  border-radius: var(--radius-sm);
  padding: 18px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: var(--shadow-pop-sm);
}

.contract-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--text);
}

.contract-card.selected {
  box-shadow: 5px 5px 0 var(--indigo);
  border-color: var(--indigo);
}

.contract-url {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--indigo);
  margin-bottom: 10px;
  word-break: break-all;
}

.contract-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 0.72rem;
  margin-bottom: 10px;
}

.contract-meta-label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  font-size: 0.62rem;
}

.contract-meta-value {
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.function-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.function-pill {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  background: #EEF2FF;
  color: var(--indigo);
  border: 2px solid var(--indigo);
  transition: all 0.15s;
}

.function-pill:hover { background: var(--indigo); color: white; }

/* ===== Interaction Panel ===== */
.interaction-panel {
  display: none;
  margin-top: 14px;
  animation: pop 0.3s ease-out;
}

.interaction-panel.visible { display: block; }

.panel-inner {
  background: var(--surface);
  border: 3px solid var(--indigo);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 6px 6px 0 var(--indigo);
}

.panel-title {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.panel-contract-url {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: 18px;
  word-break: break-all;
}

.call-builder { display: flex; flex-direction: column; gap: 12px; }

.form-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 140px;
}

.form-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

select, input[type="text"] {
  background: var(--bg);
  border: 2px solid var(--text);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.85rem;
  outline: none;
  transition: all 0.15s;
  width: 100%;
}

select:focus, input[type="text"]:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%232D1B08' fill='none' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.btn {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 10px 22px;
  border-radius: var(--radius-xs);
  border: 2px solid var(--text);
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn-call {
  background: var(--gradient-pop);
  color: white;
  box-shadow: var(--shadow-pop-sm);
}

.btn-call:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--text); }

.btn-query {
  background: #EEF2FF;
  color: var(--indigo);
}

.btn-query:hover { background: #E0E7FF; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ===== Result ===== */
.result-display {
  margin-top: 14px;
  padding: 14px;
  background: var(--bg);
  border-radius: var(--radius-xs);
  border: 2px solid var(--border);
  font-family: var(--mono);
  font-size: 0.82rem;
  display: none;
}

.result-display.visible { display: block; animation: slideIn 0.2s ease-out; }
.result-display.success { border-color: var(--mint); background: #ECFDF5; }
.result-display.error { border-color: var(--red); background: #FEF2F2; }

.result-label { font-family: var(--font); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 6px; }
.result-value { color: #065F46; font-weight: 600; word-break: break-all; }
.result-display.error .result-value { color: #991B1B; }
.result-meta { margin-top: 6px; font-size: 0.72rem; color: var(--text-dim); display: flex; gap: 14px; flex-wrap: wrap; font-weight: 600; }

/* ===== Call History ===== */
.call-history { margin-top: 18px; }
.call-history-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }

.call-history-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }

.call-history-item {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 6px 10px;
  background: var(--bg);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
}

.call-history-fn { color: var(--indigo); }
.call-history-result { color: #065F46; }
.call-history-item.failed .call-history-result { color: #991B1B; }

/* ===== Empty State ===== */
.empty-state {
  text-align: center;
  padding: 40px 24px;
  color: var(--text-dim);
}

.empty-state .big-icon { font-size: 2.5rem; margin-bottom: 10px; }
.empty-state p { font-size: 0.88rem; font-weight: 600; }
.empty-state .sub { font-size: 0.78rem; margin-top: 4px; font-weight: 500; color: var(--text-dim); }

/* ===== Footer ===== */
footer {
  border-top: 3px solid var(--text);
  padding: 16px 0;
  position: relative;
  z-index: 1;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
}

.footer-brand {
  background: var(--gradient-pop);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .header-inner { flex-direction: column; align-items: flex-start; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .contracts-grid { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }
  .stat-value { font-size: 1.5rem; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .container { padding: 0 14px; }
}

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 3px solid var(--border);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: spin 0.5s linear infinite;
}

/* ============================================================
 * Phase 0 additions — top nav + view frame.
 *
 * The redesign plan calls for a top navigation bar that drives
 * a router-based SPA. Phase 0 adds the structural styles only;
 * later phases populate per-view layouts.
 * ============================================================ */

/* Top navigation bar that lives directly under <header>. */
.topnav {
  border-bottom: 2px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 70px;
  z-index: 99;
  padding: 8px 0;
}

.topnav-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.nav-link {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 4px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.12s;
}

.nav-link:hover {
  color: var(--text);
  background: var(--bg-alt);
}

.nav-link.active {
  color: var(--text);
  background: var(--surface);
  border-color: var(--text);
  box-shadow: var(--shadow-pop-sm);
}

.nav-link.coming-soon {
  color: var(--text-dim);
  cursor: help;
  opacity: 0.55;
}

.nav-link.coming-soon::after {
  content: 'soon';
  margin-left: 6px;
  font-size: 0.6rem;
  font-weight: 800;
  background: var(--sunny);
  color: var(--text);
  border: 1px solid var(--text);
  border-radius: 3px;
  padding: 0 4px;
}

.nav-divider {
  width: 1px;
  height: 18px;
  background: var(--border-bold);
  margin: 0 4px;
}

/* Phase 0 view frame: each view module renders into this slot. */
.view-frame { animation: pop 0.2s ease-out; }
.view-frame[hidden] { display: none; }

/* Placeholder card for views that aren't built yet (phases 1+). */
.coming-soon-card {
  background: var(--surface);
  border: 3px dashed var(--border-bold);
  border-radius: var(--radius);
  padding: 48px 32px;
  text-align: center;
}

.coming-soon-card h2 {
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: 8px;
  background: var(--gradient-pop);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.coming-soon-card p { color: var(--text-secondary); font-size: 0.9rem; }
.coming-soon-card .phase-tag {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  background: var(--bg-alt);
  border: 2px solid var(--text);
  border-radius: 4px;
}

/* ============================================================
 * Phase 1 — live spine flow view.
 *
 * Three lanes on the home page:
 *   1. Recent intents — each row a 7-dot stage progression
 *   2. Health card grid — block height, anchor mode, L0 endpoint,
 *      plugins admitted, pending approvals, trust drift, outcome
 *      capture failures, last anchor lag
 *   3. Anchor chain — last 10 anchors with type/class/purpose/L0
 * ============================================================ */

/* Section header with live-mode indicator. */
.spine-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.spine-section-header h2 {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border: 2px solid var(--text);
  border-radius: 4px;
  background: var(--surface);
}

.live-badge::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  animation: pulse-dot 1.6s infinite;
}

.live-badge.polling::before { background: var(--sunny); }
.live-badge.closed::before  { background: var(--red); animation: none; }

/* Intent row. */
.intent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 620px;
  overflow-y: auto;
}

.intent-list::-webkit-scrollbar { width: 8px; }
.intent-list::-webkit-scrollbar-track { background: var(--bg-alt); border-radius: 4px; }
.intent-list::-webkit-scrollbar-thumb { background: var(--border-bold); border-radius: 4px; border: 2px solid var(--bg-alt); }

.intent-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--text);
  border-left: 6px solid var(--border-bold);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}

.intent-row:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.intent-row.completed { border-left-color: var(--mint); }
.intent-row.failed    { border-left-color: var(--red); }
.intent-row.executing { border-left-color: var(--electric-blue); }
.intent-row.pending   { border-left-color: var(--sunny); }

.intent-row .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.intent-row .meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.intent-row .intent-id {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--electric-blue);
}

.intent-row .goal-pill {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 3px;
  background: var(--bg-alt);
  border: 1px solid var(--text);
}

.intent-row .actor {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 280px;
}

.intent-row .timestamp {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-weight: 500;
}

/* Seven-dot stage progression. */
.stage-track {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}

.stage-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--text);
  background: var(--surface);
  position: relative;
  cursor: help;
  transition: background 0.18s, transform 0.12s;
}

.stage-dot.done {
  background: var(--mint);
}

.stage-dot.failed {
  background: var(--red);
}

.stage-dot.active {
  background: var(--electric-blue);
  animation: pulse-dot 1.4s infinite;
}

.stage-connector {
  width: 8px;
  height: 2px;
  background: var(--border-bold);
}

.stage-connector.done { background: var(--mint); }

.intent-row .status-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.7rem;
  white-space: nowrap;
}

.intent-row .status-pill {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid var(--text);
  text-transform: uppercase;
}

.status-pill.completed       { background: rgba(6,214,160,0.15); color: var(--mint); }
.status-pill.executing       { background: rgba(59,130,246,0.15); color: var(--electric-blue); }
.status-pill.pending,
.status-pill.awaiting_approval { background: rgba(251,191,36,0.15); color: var(--sunny); }
.status-pill.failed          { background: rgba(239,68,68,0.15); color: var(--red); }
.status-pill.created,
.status-pill.parsed          { background: var(--bg-alt); color: var(--text); }

/* Health card grid. */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.health-card {
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}

.health-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border-bold);
}

.health-card.ok::before     { background: var(--mint); }
.health-card.warn::before   { background: var(--sunny); }
.health-card.alert::before  { background: var(--red); }
.health-card.info::before   { background: var(--indigo); }

.health-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}

.health-value {
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
  word-break: break-all;
}

.health-value.small {
  font-size: 0.92rem;
}

.health-value.tag {
  font-size: 0.78rem;
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--text);
  border-radius: 3px;
  width: fit-content;
}

.health-value.tag.testnet  { background: rgba(59,130,246,0.18); border-color: var(--electric-blue); color: var(--electric-blue); }
.health-value.tag.mainnet  { background: rgba(255,46,147,0.18); border-color: var(--hot-pink); color: var(--hot-pink); }
.health-value.tag.bookkeeping { background: rgba(251,191,36,0.18); border-color: var(--sunny); color: var(--text); }
.health-value.tag.off      { background: var(--bg-alt); color: var(--text-dim); }

.health-sub {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-weight: 600;
}

.health-card a.detail-link {
  font-size: 0.7rem;
  color: var(--electric-blue);
  text-decoration: none;
  font-weight: 700;
  margin-top: 4px;
}

.health-card a.detail-link:hover { text-decoration: underline; }

/* Anchor-chain panel. */
.anchor-chain {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
}

.anchor-chain::-webkit-scrollbar { width: 8px; }
.anchor-chain::-webkit-scrollbar-track { background: var(--bg-alt); border-radius: 4px; }
.anchor-chain::-webkit-scrollbar-thumb { background: var(--border-bold); border-radius: 4px; border: 2px solid var(--bg-alt); }

.anchor-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-bold);
  border-radius: var(--radius-xs);
  font-size: 0.74rem;
  cursor: pointer;
  transition: transform 0.1s, border-left-color 0.1s;
}

.anchor-row:hover { transform: translateX(3px); }
.anchor-row.confirmed { border-left-color: var(--mint); }
.anchor-row.submitted { border-left-color: var(--electric-blue); }
.anchor-row.pending   { border-left-color: var(--sunny); }
.anchor-row.failed    { border-left-color: var(--red); }
.anchor-row.verified  { border-left-color: var(--indigo); }

.anchor-row .block-num {
  font-family: var(--mono);
  font-weight: 800;
  color: var(--text);
  min-width: 64px;
}

.anchor-row .artifact-type {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--indigo);
}

.anchor-row .anchor-class {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border: 1px solid var(--text);
  border-radius: 3px;
  text-transform: uppercase;
  background: var(--bg-alt);
}

.anchor-row .anchor-purpose {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.anchor-row .anchor-state-pill {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid currentColor;
  text-transform: uppercase;
}

/* Empty state. */
.empty-spine {
  text-align: center;
  padding: 40px 20px;
  border: 2px dashed var(--border-bold);
  border-radius: var(--radius);
  color: var(--text-dim);
}

.empty-spine .big-icon { font-size: 2rem; margin-bottom: 10px; }
.empty-spine .hint     { font-size: 0.78rem; margin-top: 6px; font-weight: 500; }

/* Section wrappers. */
.spine-section { margin-bottom: 28px; }

/* Tooltip on stage dots — pure-CSS hover. */
.stage-dot[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  font-family: var(--mono);
  font-size: 0.66rem;
  white-space: nowrap;
  background: var(--text);
  color: var(--surface);
  padding: 3px 7px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 10;
}

/* =====================================================================
 * NEXUS-REDESIGN-PLAN-2026-05-09 Phase 2 — six core spine views.
 * Each list/detail screen uses the same primitive components: section
 * head, filter bar, table, detail card grid, and verification panel.
 * ===================================================================== */

/* List + section primitives */
.spine-section-head { margin: 0 0 16px; }
.spine-section-head h2 { margin: 0 0 4px; font-size: 22px; }
.spine-section-sub { margin: 0; color: var(--text-secondary); font-size: 13px; max-width: 80ch; }

.spine-back {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--accent-blue);
  text-decoration: none;
}
.spine-back:hover { text-decoration: underline; }

.spine-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.spine-filter {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--text-secondary);
}
.spine-filter input,
.spine-filter select {
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--mono);
  min-width: 140px;
}
.spine-filter input.not-found {
  border-color: #d73a49;
  background: #fff0f0;
}

/* Tables */
.spine-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.spine-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.spine-table thead th {
  text-align: left;
  padding: 9px 12px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.spine-table tbody td {
  padding: 9px 12px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}
.spine-table tbody tr {
  cursor: pointer;
  transition: background 0.08s;
}
.spine-table tbody tr:hover { background: var(--surface-alt); }
.spine-table-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 4px 0 12px;
}

/* Detail grid */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.spine-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
}
.spine-card-title {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.spine-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

/* Key/value rows */
.kv-row {
  display: grid;
  grid-template-columns: minmax(140px, 38%) 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dotted var(--border);
}
.kv-row:last-child { border-bottom: none; }
.kv-label { font-size: 12px; color: var(--text-secondary); }
.kv-value { font-size: 13px; word-break: break-all; }
.kv-value.empty { color: var(--text-secondary); font-style: italic; }

/* Hash chip */
.hash-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 7px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  user-select: text;
  transition: background 0.1s;
}
.hash-chip:hover { background: #eef4ff; }
.hash-chip.copied { background: #def7e3; color: #2da44e; }
.hash-chip.empty { cursor: default; color: var(--text-secondary); }

/* Status pills */
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
}
.status-pill.status-ok    { background: #def7e3; color: #1a6b2c; border-color: #b8e8c1; }
.status-pill.status-warn  { background: #fff3cd; color: #6e4500; border-color: #f3d889; }
.status-pill.status-alert { background: #ffe1e1; color: #8a1a1a; border-color: #f5b8b8; }
.status-pill.status-info  { background: #e6f0ff; color: #1a4691; border-color: #b8d4f5; }
.status-pill.status-neutral { background: var(--surface-alt); }

/* JSON pretty print */
.json-block {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0;
  white-space: pre;
  max-height: 380px;
  overflow: auto;
}
.raw-details { font-size: 13px; }
.raw-details summary {
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  color: var(--text-secondary);
}

/* Action row (cross-links + verify buttons) */
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.deeplink-btn,
.verify-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.08s;
}
.deeplink-btn:hover,
.verify-btn:hover { background: #eef4ff; border-color: #1a4691; }
.verify-btn[disabled] { opacity: 0.55; cursor: progress; }
.spine-link {
  font-family: var(--mono);
  color: #1a4691;
  text-decoration: none;
  border-bottom: 1px dotted #1a4691;
}
.spine-link:hover { color: var(--text); }

/* Empty / loading / error */
.empty-state,
.spine-loading,
.spine-error {
  padding: 14px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.spine-error { color: #8a1a1a; background: #fff5f5; border-color: #f5b8b8; border-style: solid; }

/* Mono inline */
.mono { font-family: var(--mono); }

/* Spine summary grid (Intent detail) */
.spine-summary-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.spine-summary-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
}
.spine-summary-cell .stage-name { color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.spine-summary-cell .stage-mark { font-size: 18px; }
.spine-summary-cell.done { background: #def7e3; border-color: #b8e8c1; }

/* Approval lanes */
.approval-lane { margin-bottom: 24px; }
.approval-lane h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: 0 0 8px;
}
.approval-mini-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.approval-mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
}

/* Finality state machine */
.finality-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.finality-stage {
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}
.finality-stage.reached { background: #def7e3; color: #1a6b2c; border-color: #b8e8c1; }
.finality-stage.current { font-weight: 600; }
.finality-arrow { color: var(--text-secondary); }

/* Verification panel */
.verify-init { font-size: 12px; color: var(--text-secondary); margin: 0 0 6px; }
.verify-output { margin-top: 10px; }
.verify-summary {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.verify-summary.verify-pass { background: #def7e3; color: #1a6b2c; }
.verify-summary.verify-fail { background: #ffe1e1; color: #8a1a1a; }
.verify-ts { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.verify-checks { list-style: none; padding: 0; margin: 0; }
.verify-check {
  display: grid;
  grid-template-columns: 18px 200px 1fr;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px dotted var(--border);
}
.verify-check:last-child { border-bottom: none; }
.verify-check .verify-mark { font-weight: 700; text-align: center; }
.verify-check.verify-pass .verify-mark { color: #2da44e; }
.verify-check.verify-fail .verify-mark { color: #d73a49; }
.verify-check .verify-name { font-family: var(--mono); }
.verify-check .verify-detail { color: var(--text-secondary); }
.verify-check .verify-error { color: #8a1a1a; }

/* Anchor chain list */
.anchor-chain-list {
  list-style: decimal inside;
  padding: 0;
  margin: 0;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.anchor-chain-list li { padding: 4px 8px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 4px; }
.chain-at { color: var(--text-secondary); margin-left: 8px; }
.chain-note { font-size: 11px; color: var(--text-secondary); margin-top: 6px; }

/* =====================================================================
 * NEXUS-REDESIGN-PLAN-2026-05-09 Phase 3 — universal-gate views.
 * ===================================================================== */

/* Policy rule rendering */
.policy-set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--border);
}
.policy-set-row:last-child { border-bottom: none; }
.policy-set-meta { font-size: 12px; color: var(--text-secondary); }

.policy-rule-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.policy-rule {
  padding: 10px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.policy-rule-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.policy-rule-priority {
  font-size: 11px;
  color: var(--text-secondary);
}
.policy-rule-name { font-weight: 600; font-size: 13px; }
.policy-rule-desc { font-size: 12px; color: var(--text-secondary); margin: 4px 0; }
.policy-rule-cond {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 4px 0;
  white-space: pre-wrap;
}
.policy-rule-audit { font-size: 11px; color: var(--text-secondary); font-style: italic; }

/* History timeline */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.history-row {
  display: grid;
  grid-template-columns: 200px 130px 1fr;
  gap: 10px;
  padding: 5px 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.history-ts { color: var(--text-secondary); }
.history-type { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.history-detail { color: var(--text); }

/* Plain list (capabilities, evidence-profile, side-effect-limits) */
.plain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.plain-list li {
  padding: 3px 9px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--mono);
}

/* =====================================================================
 * NEXUS-REDESIGN-PLAN-2026-05-09 Phase 4 — Subsystems hub.
 * ===================================================================== */
.subsystems-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: start;
}
.subsystems-rail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 6px;
  position: sticky;
  top: 12px;
}
.subsystems-group {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: 10px 8px 4px;
}
.subsystems-link {
  display: block;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
  margin: 0 2px;
  transition: background 0.08s;
}
.subsystems-link:hover { background: var(--surface-alt); }
.subsystems-link.active {
  background: #e6f0ff;
  color: #1a4691;
  font-weight: 600;
}
.subsystems-content {
  min-width: 0; /* allow tables to shrink within grid */
}

/* =====================================================================
 * NEXUS-REDESIGN-PLAN-2026-05-09 Phase 5 — operator-trust-free verifier.
 * ===================================================================== */
.verify-dropzone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 28px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--surface-alt);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  margin-bottom: 12px;
}
.verify-dropzone:hover { color: var(--text); border-color: #1a4691; }
.verify-dropzone.dragover {
  background: #def7e3;
  border-color: #2da44e;
  color: #1a6b2c;
}
.verify-textarea {
  width: 100%;
  min-height: 200px;
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  resize: vertical;
}
.verify-actions { margin-bottom: 16px; }
.verify-envelope {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}

/* =====================================================================
 * NEXUS-REDESIGN-PLAN-2026-05-09 Phase 6 — header search + theme switcher.
 * ===================================================================== */

/* Header search */
.header-search {
  position: relative;
  flex: 1;
  max-width: 480px;
  margin: 0 16px;
}
.header-search-input {
  width: 100%;
  padding: 7px 12px;
  font-size: 13px;
  font-family: var(--font);
  border: 2px solid var(--border-bold);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.header-search-input:focus {
  border-color: var(--electric-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.header-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
}
.header-search-group {
  padding: 6px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.header-search-group:first-child { border-top: none; }
.header-search-row {
  padding: 7px 12px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.header-search-row:last-child { border-bottom: none; }
.header-search-row:hover,
.header-search-row.active {
  background: var(--surface-alt);
}
.header-search-id {
  font-family: var(--mono);
  color: var(--text);
  word-break: break-all;
}
.header-search-detail {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.header-search-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Theme select */
.header-theme-select {
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
}

/* =====================================================================
 * Phase 6 — themes.
 *
 * Each theme overrides the small set of canonical custom properties
 * the rest of the stylesheet depends on. Memphis-specific accents
 * (--coral, --hot-pink, etc.) are intentionally preserved across
 * themes — they're brand colours, not surface colours. Operators
 * who need a stricter monochrome can choose high-contrast.
 * ===================================================================== */
/* === Phosphor — terminal-green high-contrast === */
:root[data-theme="contrast"] {
  --bg:               #000000;
  --bg-alt:           #050805;
  --bg-deep:          #000000;
  --surface:          #0A0F0A;
  --surface-alt:      #0F1A10;
  --surface-hover:    #122014;
  --border:           #1F3D24;
  --border-bold:      #2D5C36;
  --border-strong:    #4A8C58;
  --text:             #C8FFD9;
  --text-secondary:   #6FCC85;
  --text-dim:         #3D7A4C;
  --accent:           #00FF88;
  --accent-soft:      #002818;
  --accent-glow:      rgba(0, 255, 136, 0.30);
  --ok:               #00FF88;
  --ok-soft:          #002818;
  --warn:             #FFE100;
  --warn-soft:        #2A2400;
  --alert:            #FF4D6E;
  --alert-soft:       #2A0008;
  --info:             #00E1FF;
  --info-soft:        #002028;

  --spine-1: #B080FF;
  --spine-2: #80B0FF;
  --spine-3: #00E1FF;
  --spine-4: #00FF88;
  --spine-5: #88FF00;
  --spine-6: #E0FF00;
  --spine-7: #FFC000;
  --spine-track: #0F1A10;

  --shadow-sm:        0 0 0 1px var(--border);
  --shadow-md:        0 0 0 1px var(--border-bold);
  --shadow-lg:        0 0 0 2px var(--accent), 0 0 32px var(--accent-glow);
  --shadow-glow:      0 0 0 1px var(--accent), 0 0 24px var(--accent-glow);

  --coral: #FF4D6E;
  --hot-pink: #FF4D6E;
  --electric-blue: #00E1FF;
  --indigo: #B080FF;
  --mint: #00FF88;
  --sunny: #FFE100;
  --tangerine: #FFC000;
  --red: #FF4D6E;
}

/* =====================================================================
 * Spine-stage paint — paint each .stage-dot in its corresponding
 * gradient colour as the dot activates. Renderer side sets
 * data-stage="1..7" on the dot so the CSS can pick the colour.
 * ===================================================================== */
.stage-track {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  --stage-track-bg: var(--spine-track);
}
.stage-dot {
  --stage-color: var(--spine-track);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--stage-track-bg);
  position: relative;
  transition: background var(--motion-base), box-shadow var(--motion-base), transform var(--motion-fast);
}
.stage-dot[data-stage="1"] { --stage-color: var(--spine-1); }
.stage-dot[data-stage="2"] { --stage-color: var(--spine-2); }
.stage-dot[data-stage="3"] { --stage-color: var(--spine-3); }
.stage-dot[data-stage="4"] { --stage-color: var(--spine-4); }
.stage-dot[data-stage="5"] { --stage-color: var(--spine-5); }
.stage-dot[data-stage="6"] { --stage-color: var(--spine-6); }
.stage-dot[data-stage="7"] { --stage-color: var(--spine-7); }
.stage-dot.done {
  background: var(--stage-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--stage-color) 22%, transparent),
              0 0 12px color-mix(in srgb, var(--stage-color) 32%, transparent);
}
.stage-dot.failed {
  background: var(--alert);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--alert) 25%, transparent);
}
.stage-dot.active {
  animation: stage-pulse 1.6s ease-in-out infinite;
}
@keyframes stage-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0px color-mix(in srgb, var(--stage-color) 40%, transparent),
                0 0 8px color-mix(in srgb, var(--stage-color) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-color) 15%, transparent),
                0 0 16px color-mix(in srgb, var(--stage-color) 50%, transparent);
  }
}

/* =====================================================================
 * Status pills — the new design uses tinted backgrounds tied to
 * theme tokens (--ok/--warn/--alert/--info) with their soft variants.
 * Override the Phase 2 generic pills with the new aesthetic.
 * ===================================================================== */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.status-pill.status-ok    { background: var(--ok-soft);    color: var(--ok);    border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.status-pill.status-warn  { background: var(--warn-soft);  color: var(--warn);  border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.status-pill.status-alert { background: var(--alert-soft); color: var(--alert); border-color: color-mix(in srgb, var(--alert) 30%, transparent); }
.status-pill.status-info  { background: var(--info-soft);  color: var(--info);  border-color: color-mix(in srgb, var(--info) 25%, transparent); }

/* Hash chip refresh */
.hash-chip {
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--text);
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.hash-chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.hash-chip.copied {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: var(--ok);
  animation: copy-flash 600ms ease-out;
}
@keyframes copy-flash {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Cards refresh — softer corners, no Memphis pop shadow */
.spine-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.spine-card:hover {
  border-color: var(--border-bold);
  box-shadow: var(--shadow-md);
}

/* Verify summary — subtle gradient bar */
.verify-summary {
  border-radius: var(--radius-sm);
}
.verify-summary.verify-pass {
  background: linear-gradient(90deg, var(--ok-soft), color-mix(in srgb, var(--ok-soft) 70%, var(--surface)));
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
}
.verify-summary.verify-fail {
  background: linear-gradient(90deg, var(--alert-soft), color-mix(in srgb, var(--alert-soft) 70%, var(--surface)));
  color: var(--alert);
  border: 1px solid color-mix(in srgb, var(--alert) 25%, transparent);
}
.verify-check.verify-pass .verify-mark { color: var(--ok); }
.verify-check.verify-fail .verify-mark { color: var(--alert); }
.verify-error { color: var(--alert); }

/* Spine link — accent under-line */
.spine-link {
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.spine-link:hover { color: var(--text); border-bottom-color: var(--accent); }

/* Buttons refresh — more density, accent hover */
.deeplink-btn,
.verify-btn {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.deeplink-btn:hover,
.verify-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}
.deeplink-btn:active,
.verify-btn:active { transform: translateY(0); }

/* Subsystems rail active state */
.subsystems-link {
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: color var(--motion-fast), background var(--motion-fast);
}
.subsystems-link:hover {
  background: var(--surface-alt);
  color: var(--text);
}
.subsystems-link.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  position: relative;
}
.subsystems-link.active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

/* Drop zone refresh */
.verify-dropzone {
  background: var(--surface-alt);
  border-color: var(--border-bold);
  color: var(--text-secondary);
  transition: background var(--motion-base), border-color var(--motion-base), color var(--motion-base);
}
.verify-dropzone:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}
.verify-dropzone.dragover {
  background: var(--ok-soft);
  border-color: var(--ok);
  color: var(--ok);
  animation: dropzone-pulse 1.4s ease-in-out infinite;
}
@keyframes dropzone-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 35%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 0%, transparent); }
}

/* Finality state machine — tint with gradient */
.finality-stage {
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}
.finality-stage.reached {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}
.finality-stage.current {
  box-shadow: var(--shadow-glow);
}

/* Empty / error states */
.empty-state,
.spine-loading {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius);
}
.spine-error {
  background: var(--alert-soft);
  color: var(--alert);
  border-color: color-mix(in srgb, var(--alert) 30%, transparent);
  border-radius: var(--radius);
}

/* JSON block refresh */
.json-block {
  background: var(--bg-deep);
  color: var(--text);
  border-color: var(--border);
  border-radius: var(--radius-sm);
}

/* Tables — denser, cleaner */
.spine-table-wrap {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.spine-table thead th {
  background: var(--bg-alt);
  border-bottom-color: var(--border);
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.spine-table tbody tr {
  transition: background var(--motion-fast);
}
.spine-table tbody tr:hover {
  background: var(--surface-hover);
}
.spine-table tbody td {
  border-top-color: var(--border);
}

/* Filter bar polish */
.spine-filter-bar {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--radius);
}
.spine-filter input,
.spine-filter select {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.spine-filter input:focus,
.spine-filter select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Header search refresh */
.header-search-input {
  background: var(--surface);
  border-color: var(--border-bold);
  color: var(--text);
  border-radius: var(--radius-sm);
}
.header-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.header-search-results {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-sm);
}
.header-search-group {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--text-dim);
}
.header-search-row:hover,
.header-search-row.active {
  background: var(--accent-soft);
}
.header-search-id { color: var(--text); }
.header-search-detail { color: var(--text-secondary); }
.header-theme-select {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}

/* Verify textarea + actions */
.verify-textarea {
  background: var(--bg-deep);
  border-color: var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}

/* Stage connectors (Phase 1 home only — Phase 2+ stage-track has no
 * inter-dot lines, just gap). The connector colour is tinted to the
 * current dot's stage so the connecting line "flows" between dots. */
.stage-connector {
  width: 14px;
  height: 2px;
  background: var(--spine-track);
  border-radius: 1px;
  transition: background var(--motion-base);
}
.stage-connector.done {
  background: linear-gradient(90deg, var(--spine-3), var(--spine-5));
}

/* Spine flow row entry animation — when a new live event arrives,
 * the row slides in from the top with a subtle fade. */
.intent-row-new {
  animation: intent-row-enter var(--motion-slow) ease-out both;
}
@keyframes intent-row-enter {
  0%   { opacity: 0; transform: translateY(-8px); background: var(--accent-soft); }
  60%  { opacity: 1; transform: translateY(0); }
  100% { background: transparent; }
}

/* Header logo — cleaner monospace mark */
.logo-text {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 18px;
  background: var(--gradient-pop);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.logo-sub {
  font-family: var(--font);
  font-weight: 500;
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin-left: 6px;
}

/* Top nav refresh — clean underline-active rather than Memphis pop */
.topnav {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nav-link {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 14px;
  border-bottom: 2px solid transparent;
  transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
  text-decoration: none;
}
.nav-link:hover {
  color: var(--text);
  background: var(--surface-alt);
}
.nav-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.nav-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 8px;
}

/* Header refresh */
body > header {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

/* Custom scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border-bold) var(--bg); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bg); }
*::-webkit-scrollbar-thumb { background: var(--border-bold); border-radius: 999px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* =====================================================================
 * UNIFIED INTENT SPINE-DETAIL view (the "everything about this intent
 * in one screen" canonical view). Section nav + section bands +
 * section bodies. Each section is bookmarkable via its #sec-<id>.
 * ===================================================================== */
.spine-section-nav {
  position: sticky;
  top: 56px; /* sit below the topnav */
  z-index: 30;
  background: color-mix(in srgb, var(--bg-alt) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  margin: 0 0 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.spine-section-jump {
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.spine-section-jump:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.spine-detail-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 28px;
  margin-bottom: 22px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.spine-detail-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 0% 50%, color-mix(in srgb, var(--spine-1) 15%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 50%, color-mix(in srgb, var(--spine-7) 12%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.spine-detail-head > * { position: relative; z-index: 1; }
.spine-detail-id {
  font-size: 18px;
  word-break: break-all;
  color: var(--text);
  margin: 0;
}
.spine-detail-stages {
  display: flex;
  align-items: center;
  gap: 12px;
}
.spine-stage-large {
  --stage-size: 18px;
  gap: 10px;
}
.spine-stage-large .stage-dot {
  width: var(--stage-size);
  height: var(--stage-size);
}
.spine-stage-large .stage-connector {
  width: 28px;
  height: 3px;
}
.spine-stage-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.spine-sections {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.spine-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  scroll-margin-top: 120px;
  transition: border-color var(--motion-fast);
  position: relative;
}
.spine-section::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--spine-track);
  transition: background var(--motion-base);
}
.spine-section[data-section="intent"]::before    { background: var(--spine-1); }
.spine-section[data-section="plan"]::before      { background: var(--spine-2); }
.spine-section[data-section="approvals"]::before { background: var(--spine-3); }
.spine-section[data-section="execution"]::before { background: var(--spine-4); }
.spine-section[data-section="outcome"]::before   { background: var(--spine-5); }
.spine-section[data-section="evidence"]::before  { background: var(--spine-6); }
.spine-section[data-section="anchor"]::before    { background: var(--spine-7); }
.spine-section[data-section="policies"]::before  { background: var(--info); }
.spine-section[data-section="plugins"]::before   { background: var(--accent); }
.spine-section[data-section="trust"]::before     { background: var(--ok); }
.spine-section h2 {
  font-size: 16px;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
  font-weight: 700;
}
.spine-section-body {
  font-size: 13px;
}

/* =====================================================================
 * Top-nav dropdown (Registries) — collapses the per-artifact registry
 * tabs into a secondary surface so the primary nav reflects the
 * canonical workflow: Spine | Intents | Subsystems | Verify |
 * Registries ▾ | Network. The spine artifacts are reached
 * canonically through their intent's unified detail view.
 * ===================================================================== */
.nav-dropdown {
  position: relative;
  display: inline-block;
}
.nav-dropdown-trigger {
  background: transparent;
  border: none;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-dropdown-trigger:hover {
  color: var(--text);
  background: var(--surface-alt);
}
.nav-dropdown-trigger.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.nav-caret {
  font-size: 10px;
  transition: transform var(--motion-fast);
}
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--motion-fast), transform var(--motion-fast), visibility 0s linear var(--motion-fast);
  z-index: 200;
}
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
.nav-dropdown-group {
  padding: 8px 14px 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 700;
}
.nav-dropdown-group:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.nav-dropdown-item {
  display: block;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.nav-dropdown-item:hover {
  background: var(--surface-alt);
  color: var(--accent);
}
.nav-dropdown-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* Primary nav link (Intents) gets a subtle accent badge to signal it's
 * the canonical entry point. */
.nav-link.nav-link-primary {
  position: relative;
}
.nav-link.nav-link-primary::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* =====================================================================
 * THREE-MODE NAV — Live / Inspect / Operate.
 * Each mode is a CARD with personality, not a tab. The user always
 * knows their orientation.
 * ===================================================================== */
.spine-modes {
  background: transparent;
  border-bottom: none;
  padding: 12px 0 4px;
}
.spine-modes-inner {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.mode-link {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
  position: relative;
  overflow: hidden;
}
.mode-link::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--motion-base);
}
.mode-link:hover {
  border-color: var(--border-bold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.mode-link:hover::before { opacity: 1; }
.mode-link.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--accent-soft) 60%, var(--surface)) 100%);
  box-shadow: var(--shadow-glow);
}
.mode-link.active::before { opacity: 1; }
.mode-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  z-index: 1;
}
.mode-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.mode-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.mode-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
/* Live icon: pulsing concentric circles */
.mode-icon-live {
  background: linear-gradient(135deg, color-mix(in srgb, var(--spine-1) 25%, var(--surface-alt)) 0%, color-mix(in srgb, var(--spine-3) 20%, var(--surface-alt)) 100%);
}
.mode-icon-live span {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: live-ripple 2.4s ease-out infinite;
}
.mode-icon-live span:nth-child(1) { width: 14px; height: 14px; animation-delay: 0s; }
.mode-icon-live span:nth-child(2) { width: 14px; height: 14px; animation-delay: 0.8s; }
.mode-icon-live span:nth-child(3) { width: 14px; height: 14px; animation-delay: 1.6s; }
@keyframes live-ripple {
  0%   { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(2.8); opacity: 0; }
}
/* Inspect icon: 7-stage gradient mini bar */
.mode-icon-inspect {
  display: flex;
  gap: 2px;
  padding: 0 6px;
}
.mode-icon-inspect .mini-dot {
  width: 4px;
  height: 18px;
  border-radius: 2px;
}
.mode-icon-inspect .mini-dot[data-stage="1"] { background: var(--spine-1); }
.mode-icon-inspect .mini-dot[data-stage="2"] { background: var(--spine-2); }
.mode-icon-inspect .mini-dot[data-stage="3"] { background: var(--spine-3); }
.mode-icon-inspect .mini-dot[data-stage="4"] { background: var(--spine-4); }
.mode-icon-inspect .mini-dot[data-stage="5"] { background: var(--spine-5); }
.mode-icon-inspect .mini-dot[data-stage="6"] { background: var(--spine-6); }
.mode-icon-inspect .mini-dot[data-stage="7"] { background: var(--spine-7); }
/* Operate icon */
.mode-icon-operate {
  font-size: 22px;
  color: var(--text-secondary);
}

/* =====================================================================
 * SPINE HERO (Live mode top canvas) — the canonical 7-stage pipeline
 * rendered as a horizontal flow chart. The visual hero of the explorer.
 * ===================================================================== */
.spine-hero {
  margin: 0 0 26px;
  padding: 24px 28px 20px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.spine-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 100% at 0% 50%, color-mix(in srgb, var(--spine-1) 14%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 50% 100% at 100% 50%, color-mix(in srgb, var(--spine-7) 12%, transparent) 0%, transparent 70%);
}
.spine-hero > * { position: relative; z-index: 1; }
.spine-hero-head { margin-bottom: 16px; }
.spine-hero-title {
  font-size: 24px;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 6px;
}
.spine-hero-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 80ch;
  line-height: 1.5;
}
.spine-pipeline {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 20px;
  overflow-x: auto;
  padding: 6px 0;
}
.stage-pipe-card {
  flex: 1 1 0;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  transition: border-color var(--motion-base), transform var(--motion-fast);
}
.stage-pipe-card:hover { transform: translateY(-2px); }
.stage-pipe-card[data-stage="1"] { border-top: 3px solid var(--spine-1); }
.stage-pipe-card[data-stage="2"] { border-top: 3px solid var(--spine-2); }
.stage-pipe-card[data-stage="3"] { border-top: 3px solid var(--spine-3); }
.stage-pipe-card[data-stage="4"] { border-top: 3px solid var(--spine-4); }
.stage-pipe-card[data-stage="5"] { border-top: 3px solid var(--spine-5); }
.stage-pipe-card[data-stage="6"] { border-top: 3px solid var(--spine-6); }
.stage-pipe-card[data-stage="7"] { border-top: 3px solid var(--spine-7); }
.stage-pipe-num {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.stage-pipe-dot {
  margin-bottom: 8px;
}
.stage-pipe-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.stage-pipe-blurb {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  text-align: center;
}
.stage-pipe-throughput {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.stage-pipe-throughput.non-zero { color: var(--accent); font-weight: 600; }
.stage-pipe-conn {
  flex: 0 0 24px;
  align-self: center;
  height: 2px;
  background: linear-gradient(90deg, var(--spine-track), var(--border-bold), var(--spine-track));
  margin: 0 -1px;
}

/* =====================================================================
 * INSPECT MODE — focused single-intent canvas with stage tiles +
 * stage-focus pane + right rail of involved entities.
 * ===================================================================== */
.inspect-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
.inspect-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.inspect-rail {
  position: sticky;
  top: 96px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px 8px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.inspect-rail-head { margin-bottom: 14px; }
.inspect-rail-head h3 {
  margin: 0 0 4px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 700;
}
.inspect-rail-head p {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.4;
}
.inspect-rail-section { margin-bottom: 16px; }
.inspect-rail-section-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 700;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.inspect-rail-count {
  background: var(--surface-alt);
  padding: 1px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--text-secondary);
}
.inspect-rail-empty {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  padding: 6px 0;
}
.inspect-rail-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
  font-family: inherit;
  color: inherit;
}
.inspect-rail-row:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.inspect-rail-label {
  font-size: 11.5px;
  color: var(--text);
  word-break: break-all;
}
.inspect-rail-sub {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.inspect-rail-row.rail-row-ok    { border-left: 2px solid var(--ok); }
.inspect-rail-row.rail-row-warn  { border-left: 2px solid var(--warn); }
.inspect-rail-row.rail-row-alert { border-left: 2px solid var(--alert); }

.inspect-crumb {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.inspect-crumb-back {
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
}
.inspect-crumb-back:hover { color: var(--accent); }
.inspect-crumb-id {
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
  flex: 1 1 auto;
  min-width: 200px;
}

.inspect-stages {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 16px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.inspect-tile {
  flex: 1 1 0;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
  font-family: inherit;
  color: inherit;
  position: relative;
}
.inspect-tile:hover { background: var(--surface-alt); transform: translateY(-1px); }
.inspect-tile.active {
  background: color-mix(in srgb, var(--surface-alt) 60%, var(--accent-soft));
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.inspect-tile-num {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.inspect-tile-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.inspect-tile-status {
  font-size: 10.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.inspect-tile.done .inspect-tile-status { color: var(--ok); }
.inspect-tile.failed .inspect-tile-status { color: var(--alert); }
.inspect-tile-conn {
  flex: 0 0 16px;
  align-self: center;
  height: 2px;
  background: var(--spine-track);
  margin: 0 -1px;
  transition: background var(--motion-base);
}
.inspect-tile-conn.done {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 50%, transparent), color-mix(in srgb, var(--ok) 50%, transparent));
}

.inspect-focus {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  min-height: 280px;
}

/* Inspect landing (no intent selected) */
.inspect-landing {
  max-width: 720px;
  margin: 40px auto;
}
.inspect-landing-head h1 {
  font-size: 28px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.inspect-landing-head p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.inspect-landing-form {
  margin: 24px 0 30px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.inspect-landing-form label {
  display: block;
  width: 100%;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.inspect-landing-input {
  flex: 1 1 320px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.inspect-landing-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.inspect-landing-recent-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 10px;
}
.inspect-landing-recent {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inspect-recent-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 140px auto auto;
  gap: 16px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}
.inspect-recent-row:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateX(2px);
}
.inspect-recent-id { font-size: 12px; }
.inspect-recent-goal { font-size: 12px; color: var(--text-secondary); }
.inspect-recent-ts { font-size: 11px; color: var(--text-dim); }

/* =====================================================================
 * OPERATE MODE — three sub-tabs
 * ===================================================================== */
.operate-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.operate-tab {
  flex: 1 1 0;
  min-width: 200px;
  text-align: left;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}
.operate-tab:hover {
  border-color: var(--border-bold);
  transform: translateY(-1px);
}
.operate-tab.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--accent-soft) 50%, var(--surface)) 100%);
  box-shadow: var(--shadow-glow);
}
.operate-tab-label {
  font-size: 14px;
  font-weight: 700;
}
.operate-tab-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.operate-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
}

/* =====================================================================
 * DRAWER SYSTEM — slide-in side panels for plugin / policy / trust /
 * role / capability drilldowns inside Inspect mode. Stack from the
 * right; click outside or Esc to pop.
 * ===================================================================== */
.drawer-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 22, 0.55);
  opacity: 0;
  pointer-events: auto;
  transition: opacity var(--motion-base);
  backdrop-filter: blur(2px);
}
.drawer-backdrop.open { opacity: 1; }
.drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 480px;
  max-width: calc(100vw - 40px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  transform: translateX(100%);
  transition: transform var(--motion-base);
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.drawer-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
}
.drawer-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color var(--motion-fast);
}
.drawer-close:hover { color: var(--text); }
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}
.drawer-section-head {
  margin: 18px 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 700;
}

/* =====================================================================
 * SPINE HERO ANIMATIONS — particles flow along connectors when intents
 * advance; stage cards pulse on activity; throughput counters bump
 * when they change.
 * ===================================================================== */
.spine-hero-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
  font-family: var(--mono);
}
.stage-pipe-card.pulsing {
  animation: stage-card-pulse 1.2s ease-out;
}
@keyframes stage-card-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  20% {
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent),
      0 0 24px color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(-3px);
  }
  60% { transform: translateY(0); }
}
.stage-pipe-conn {
  position: relative;
  overflow: visible;
}
.stage-pipe-conn-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--spine-track), color-mix(in srgb, var(--border-bold) 80%, transparent), var(--spine-track));
  border-radius: 1px;
}
.stage-pipe-particle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: blur(0.4px);
  box-shadow: 0 0 12px currentColor;
  pointer-events: none;
}
.stage-pipe-particle.go {
  animation: particle-flow 1.2s cubic-bezier(0.55, 0.06, 0.45, 0.94) forwards;
}
@keyframes particle-flow {
  0%   { left: 0%;   opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  90%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
}
.stage-pipe-throughput.bump {
  animation: throughput-bump 0.5s ease-out;
}
@keyframes throughput-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); color: var(--accent); }
  100% { transform: scale(1); }
}

/* =====================================================================
 * LIVE LAYOUT — stream + sidebar (runtime pulse + event log)
 * ===================================================================== */
.live-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}
.live-stream { min-width: 0; }
.live-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 96px;
}

/* Runtime pulse */
.live-pulse-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.live-pulse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.live-pulse-head h3 {
  margin: 0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-weight: 700;
}
.live-pulse-heartbeat {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 var(--ok);
  animation: heartbeat 2.4s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent); }
}
.live-pulse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.live-pulse-tile {
  padding: 8px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-fast);
}
.live-pulse-tile.alert { border-color: color-mix(in srgb, var(--alert) 50%, transparent); }
.live-pulse-tile.ok { border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.live-pulse-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 4px;
}
.live-pulse-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}
.live-pulse-value.bump {
  animation: pulse-bump 0.5s ease-out;
}
@keyframes pulse-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); color: var(--accent); }
  100% { transform: scale(1); }
}
.live-pulse-tile.alert .live-pulse-value { color: var(--alert); }
.live-pulse-tile.ok .live-pulse-value { color: var(--ok); }

/* Event log */
.live-eventlog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  max-height: 480px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.live-eventlog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.live-eventlog-head h3 {
  margin: 0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-weight: 700;
}
.live-eventlog-sub {
  font-size: 10.5px;
  color: var(--text-dim);
  font-family: var(--mono);
}
.live-eventlog-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.live-eventlog-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 5px 4px;
  border-bottom: 1px dotted var(--border);
  font-size: 12px;
}
.live-eventlog-row:last-child { border-bottom: none; }
.live-eventlog-row-new {
  animation: eventlog-arrive 0.6s ease-out;
}
@keyframes eventlog-arrive {
  0%   { transform: translateX(8px); opacity: 0; background: color-mix(in srgb, var(--accent) 15%, transparent); }
  60%  { transform: translateX(0); opacity: 1; }
  100% { background: transparent; }
}
.live-eventlog-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  box-shadow: 0 0 8px currentColor;
}
.live-eventlog-text { font-size: 12px; color: var(--text); }
.evlog-stage {
  display: inline-block;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 700;
  margin-right: 6px;
}
.evlog-id { color: var(--accent); font-size: 11.5px; }
.live-eventlog-ts {
  font-size: 10.5px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
 * INSPECT TILE DOMINANCE — active tile is bigger + bolder + glowing.
 * Inactive tiles are smaller + muted but still readable.
 * ===================================================================== */
.inspect-stages { gap: 4px; }
.inspect-tile {
  flex: 1 1 0;
  transition:
    flex var(--motion-base),
    background var(--motion-fast),
    border-color var(--motion-fast),
    transform var(--motion-fast),
    padding var(--motion-base);
}
.inspect-tile:not(.active) {
  flex: 0.7 1 0;
  opacity: 0.78;
  padding: 6px 6px;
}
.inspect-tile:not(.active) .inspect-tile-name { font-size: 11px; }
.inspect-tile:not(.active) .stage-dot { width: 8px; height: 8px; }
.inspect-tile.active {
  flex: 1.6 1 0;
  padding: 14px 12px;
  border-width: 2px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--surface-alt) 50%, var(--accent-soft)) 0%,
    var(--surface-alt) 100%);
}
.inspect-tile.active .inspect-tile-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.inspect-tile.active .stage-dot {
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-color) 18%, transparent),
              0 0 16px color-mix(in srgb, var(--stage-color) 40%, transparent);
}

/* Focus pane slide-transition. JS adds .swap class to trigger animation. */
.inspect-focus { position: relative; overflow: hidden; }
.inspect-focus > * {
  animation: focus-enter 0.32s cubic-bezier(0.4, 0.0, 0.2, 1);
}
@keyframes focus-enter {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
 * HEADER PULSE METER — flashes on every spine activity event.
 * ===================================================================== */
.header-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: default;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 700;
}
.header-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: background var(--motion-fast), box-shadow var(--motion-fast);
}
.header-pulse-dot.flash {
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse-flash 0.8s ease-out;
}
.header-pulse-label { font-family: var(--mono); }
@keyframes pulse-flash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  60%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* =====================================================================
 * MODE SWITCH ANIMATION — view container fades + slides on activation.
 * ===================================================================== */
.view-frame:not([hidden]) {
  animation: view-enter 0.28s cubic-bezier(0.4, 0.0, 0.2, 1);
}
@keyframes view-enter {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
 * THE SPINE CANVAS — the single primary view.
 *
 *   ┌─ Spine strip ───────────────────────────────────────┐
 *   ├──────────────────────────────────────┬─────────────┤
 *   │  Flow region (timeline | narrative)  │  Telemetry  │
 *   └──────────────────────────────────────┴─────────────┘
 *
 * The strip spans the full width. The flow region holds the
 * timeline (default) and the narrative (slid up over the timeline
 * when an intent is selected). The telemetry rail is always on.
 * ===================================================================== */
/* ============================================================
 * Unified workspace shell — every view (cockpit, studio, atlas,
 * console, verifier, review-and-sign, live execution) sits inside
 * the same outer container. Consistent max-width, side padding,
 * top spacing, header rhythm, panel borders.
 * ============================================================ */
.workspace {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 24px 40px;
  min-height: calc(100vh - 92px);
}
.workspace-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.workspace-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.workspace-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 720px;
}
.workspace-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cockpit canvas — 2-column dashboard inside the unified shell. */
.spine-canvas,
.cockpit-canvas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: "flow rail";
  gap: 16px;
  align-items: start;
}
.spine-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.spine-telemetry {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 96px;
  align-self: start;
}
.spine-strip       { grid-area: strip; }
.spine-flow        { grid-area: flow;  position: relative; min-height: 480px; }
.spine-telemetry   { grid-area: rail;  position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 96px); display: flex; flex-direction: column; gap: 12px; }

/* =====================================================================
 * SPINE STRIP — always-visible canonical pipeline
 * ===================================================================== */
.spine-strip {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--surface) 90%, var(--accent-soft)) 0%,
    var(--surface-alt) 100%);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius);
  padding: 16px 20px 18px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.spine-strip::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 100% at 0% 50%, color-mix(in srgb, var(--spine-1) 16%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 40% 100% at 100% 50%, color-mix(in srgb, var(--spine-7) 14%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.spine-strip > * { position: relative; z-index: 1; }
.spine-strip-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  font-weight: 700;
  margin-bottom: 12px;
}
.spine-strip-eyebrow .eyebrow-mark { color: var(--accent); font-size: 13px; }
.spine-strip-eyebrow .eyebrow-tag {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.1em;
}
.spine-strip-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  row-gap: 6px;
}
.strip-card {
  flex: 1 1 120px;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  cursor: pointer;
  transition: transform var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
  font-family: inherit;
  color: inherit;
  overflow: hidden;
}
.strip-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.strip-card[data-stage="1"]::before { background: var(--spine-1); }
.strip-card[data-stage="2"]::before { background: var(--spine-2); }
.strip-card[data-stage="3"]::before { background: var(--spine-3); }
.strip-card[data-stage="4"]::before { background: var(--spine-4); }
.strip-card[data-stage="5"]::before { background: var(--spine-5); }
.strip-card[data-stage="6"]::before { background: var(--spine-6); }
.strip-card[data-stage="7"]::before { background: var(--spine-7); }
.strip-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-bold);
  box-shadow: var(--shadow-md);
}
.strip-card.completed {
  background: color-mix(in srgb, var(--surface-alt) 70%, color-mix(in srgb, var(--accent-soft) 50%, transparent));
}
.strip-card.failed { border-color: var(--alert); }
.strip-card.active-chapter {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--accent-soft) 50%, var(--surface)) 100%);
}
.strip-card.pulse { animation: strip-card-pulse 1.2s ease-out; }
@keyframes strip-card-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  20% {
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent),
      0 0 28px color-mix(in srgb, var(--accent) 36%, transparent);
    transform: translateY(-3px);
  }
  60% { transform: translateY(0); }
}
.strip-num {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-top: 6px;
}
.strip-dot {
  margin-top: 4px;
  width: 12px;
  height: 12px;
}
.strip-name {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.strip-blurb {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  text-align: center;
  line-height: 1.3;
}
.strip-meta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  min-height: 14px;
}
.strip-meta.non-zero { color: var(--accent); font-weight: 600; }
.strip-meta.bump { animation: throughput-bump 0.5s ease-out; }
@keyframes throughput-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); color: var(--accent); }
  100% { transform: scale(1); }
}
.strip-conn {
  flex: 0 0 22px;
  align-self: center;
  position: relative;
  height: 26px;
}
.strip-conn-track {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--spine-track), color-mix(in srgb, var(--border-bold) 80%, transparent), var(--spine-track));
  border-radius: 1px;
}
.strip-particle {
  position: absolute;
  top: 50%; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: blur(0.4px);
  box-shadow: 0 0 14px currentColor;
  pointer-events: none;
}
.strip-particle.go {
  animation: strip-particle 1.2s cubic-bezier(0.55, 0.06, 0.45, 0.94) forwards;
}
@keyframes strip-particle {
  0%   { left: 0%;   opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  90%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
}
.spine-strip.strip-narrative-mode .strip-card { cursor: pointer; }
.spine-strip.strip-narrative-mode .strip-meta { font-size: 14px; font-weight: 700; }
.spine-strip.strip-narrative-mode .strip-card.completed .strip-meta { color: var(--ok); }
.spine-strip.strip-narrative-mode .strip-card.failed .strip-meta { color: var(--alert); }

/* =====================================================================
 * TIMELINE — Gantt-style intent ribbon
 * ===================================================================== */
.spine-timeline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 22px;
  box-shadow: var(--shadow-sm);
}
.timeline-head { margin-bottom: 16px; }
.timeline-title {
  font-size: 18px;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 4px;
}
.timeline-sub {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.timeline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.timeline-chip {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.timeline-chip:hover { background: var(--accent-soft); color: var(--accent); }
.timeline-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
}
.timeline-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(280px, 2.4fr) auto;
  align-items: center;
  gap: 18px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.timeline-row:hover {
  background: var(--surface);
  border-color: var(--accent);
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}
.timeline-row.flash {
  animation: timeline-row-flash 0.8s ease-out;
}
@keyframes timeline-row-flash {
  0%   { background: var(--accent-soft); border-color: var(--accent); }
  100% { background: var(--bg-alt); border-color: var(--border); }
}
.timeline-ident {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.timeline-id { font-size: 12px; word-break: break-all; }
.timeline-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.timeline-goal {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
}
.timeline-actor {
  font-size: 10.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-track {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  height: 18px;
}
.timeline-cell {
  background: var(--spine-track);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  transition: background var(--motion-base);
}
.timeline-cell-fill {
  position: absolute; inset: 0;
  background: var(--spine-track);
  transform: translateX(-100%);
  transition: transform var(--motion-slow);
}
.timeline-cell[data-stage="1"] .timeline-cell-fill { background: var(--spine-1); }
.timeline-cell[data-stage="2"] .timeline-cell-fill { background: var(--spine-2); }
.timeline-cell[data-stage="3"] .timeline-cell-fill { background: var(--spine-3); }
.timeline-cell[data-stage="4"] .timeline-cell-fill { background: var(--spine-4); }
.timeline-cell[data-stage="5"] .timeline-cell-fill { background: var(--spine-5); }
.timeline-cell[data-stage="6"] .timeline-cell-fill { background: var(--spine-6); }
.timeline-cell[data-stage="7"] .timeline-cell-fill { background: var(--spine-7); }
.timeline-cell.completed .timeline-cell-fill { transform: translateX(0); }
.timeline-cell.current::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bg);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px currentColor;
  animation: timeline-cell-blink 1.6s ease-in-out infinite;
}
@keyframes timeline-cell-blink {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.timeline-cell.failed { background: var(--alert); }
.timeline-tail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.timeline-ts {
  font-size: 10.5px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.timeline-empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--text-secondary);
}
.timeline-empty-mark {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.6;
}
.timeline-empty-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.timeline-empty-sub { font-size: 13px; }

/* =====================================================================
 * NARRATIVE — slid up from bottom over the timeline
 * ===================================================================== */
.spine-narrative {
  position: absolute;
  inset: 0;
  background: var(--surface);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 5;
}
.spine-narrative.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.narr-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  flex-wrap: wrap;
}
.narr-crumb {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  flex-wrap: wrap;
}
.narr-crumb-back {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 11.5px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.narr-crumb-back:hover { background: var(--surface-alt); color: var(--text); border-color: var(--border-bold); }
.narr-crumb-arrow { font-size: 13px; }
.narr-crumb-title { display: flex; flex-direction: column; gap: 2px; }
.narr-crumb-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 700;
  font-family: var(--mono);
}
.narr-crumb-id { font-size: 14px; word-break: break-all; }
.narr-crumb-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-left: auto;
}
.narr-crumb-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.narr-crumb-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 700;
}
.narr-crumb-val { font-size: 12px; }
.narr-close {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.narr-close:hover { background: var(--alert-soft); color: var(--alert); border-color: var(--alert); }
.narr-close-x { font-size: 16px; line-height: 1; }
.narr-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 22px 28px 60px;
  scroll-behavior: smooth;
}
.narr-chapter {
  padding: 22px 0 28px;
  border-bottom: 1px dashed var(--border);
  position: relative;
}
.narr-chapter:last-child { border-bottom: none; }
.narr-chapter::before {
  content: '';
  position: absolute;
  left: -28px; top: 24px; bottom: 28px;
  width: 3px;
  border-radius: 0 2px 2px 0;
}
.narr-chapter[data-stage="intent"]::before    { background: var(--spine-1); }
.narr-chapter[data-stage="plan"]::before      { background: var(--spine-2); }
.narr-chapter[data-stage="approval"]::before  { background: var(--spine-3); }
.narr-chapter[data-stage="execution"]::before { background: var(--spine-4); }
.narr-chapter[data-stage="outcome"]::before   { background: var(--spine-5); }
.narr-chapter[data-stage="evidence"]::before  { background: var(--spine-6); }
.narr-chapter[data-stage="anchor"]::before    { background: var(--spine-7); }
.narr-chapter-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.narr-chapter-num {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.narr-chapter-titlewrap { flex: 1; }
.narr-chapter-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.narr-chapter-blurb {
  font-size: 12px;
  color: var(--text-secondary);
}
.narr-chapter-stamp { margin-left: auto; }
.narr-chapter-body {}

/* Narrative entity links + chips + rows */
.narr-entity-link {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 4px;
  padding: 1px 8px;
  font-family: inherit;
  font-size: inherit;
  color: var(--accent);
  cursor: pointer;
  transition: background var(--motion-fast);
}
.narr-entity-link:hover { background: var(--accent-soft); }
.narr-mini-head {
  margin: 22px 0 10px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-weight: 700;
}
.narr-entity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.narr-entity-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.narr-entity-chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.narr-entity-chip-sub {
  font-size: 10.5px;
  color: var(--text-dim);
}
.narr-entity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.narr-entity-row {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.narr-entity-row:hover { background: var(--accent-soft); border-color: var(--accent); }
.narr-entity-row.alert { border-left: 3px solid var(--alert); }
.narr-entity-row-pill {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
}
.narr-entity-row.alert .narr-entity-row-pill {
  background: var(--alert-soft);
  color: var(--alert);
}
.narr-entity-row-id { font-size: 12px; }
.narr-entity-row-sub { font-size: 11px; color: var(--text-dim); }

/* =====================================================================
 * TELEMETRY RAIL
 * ===================================================================== */
.tele-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.tele-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tele-head h3 {
  margin: 0;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  font-weight: 700;
}
.tele-heartbeat {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  animation: heartbeat 2.4s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent); }
}
.tele-sub { font-size: 10px; color: var(--text-dim); font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.tele-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tele-tile {
  padding: 7px 9px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-fast);
}
.tele-tile.alert { border-color: color-mix(in srgb, var(--alert) 50%, transparent); }
.tele-tile.ok { border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.tele-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 3px;
}
.tele-value {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}
.tele-value.bump {
  animation: pulse-bump 0.5s ease-out;
}
@keyframes pulse-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); color: var(--accent); }
  100% { transform: scale(1); }
}
.tele-tile.alert .tele-value { color: var(--alert); }
.tele-tile.ok .tele-value { color: var(--ok); }
.tele-activity {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.tele-activity-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 360px;
}
.tele-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 4px;
  font-size: 11.5px;
  border-bottom: 1px dotted var(--border);
}
.tele-row:last-child { border-bottom: none; }
.tele-row.arrive {
  animation: tele-row-arrive 0.6s ease-out;
}
@keyframes tele-row-arrive {
  0%   { transform: translateX(8px); opacity: 0; background: color-mix(in srgb, var(--accent) 15%, transparent); }
  60%  { transform: translateX(0); opacity: 1; }
  100% { background: transparent; }
}
.tele-row-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  box-shadow: 0 0 8px currentColor;
}
.tele-row-txt { font-size: 11.5px; color: var(--text); }
.tele-stage {
  display: inline-block;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-weight: 700;
  margin-right: 5px;
}
.tele-id { color: var(--accent); font-size: 11px; }
.tele-row-ts {
  font-size: 10px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.tele-console-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.tele-console-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}
.console-icon { font-size: 16px; color: var(--accent); }
.console-chevron { margin-left: auto; color: var(--text-secondary); font-size: 14px; }

/* =====================================================================
 * OPERATE CONSOLE — slide-in from bottom
 * ===================================================================== */
.op-console-host {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 800;
}
.op-console-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 10, 22, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.op-console-backdrop.open { opacity: 1; }
.op-console {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  max-height: calc(100vh - 80px);
  background: var(--surface);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  transform: translateY(calc(100% + 30px));
  opacity: 0;
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.op-console.open {
  transform: translateY(0);
  opacity: 1;
}
.op-console-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.op-console-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}
.op-console-brand .op-icon { font-size: 16px; color: var(--accent); }
.op-tabs {
  display: flex;
  gap: 6px;
  margin-left: 18px;
  flex: 1;
}
.op-tab {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.op-tab:hover { background: var(--surface-alt); border-color: var(--border-bold); }
.op-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.op-tab-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.op-tab-sub {
  display: block;
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.op-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.op-close:hover { color: var(--text); }
.op-console-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px;
}

/* =====================================================================
 * STATE COMPONENTS — five distinct visuals so the user can tell:
 *   loading      — in flight
 *   hidden       — disclosure policy redacts this section
 *   notProduced  — upstream stage hasn't produced it yet
 *   unavailable  — backend can't retrieve
 *   error        — transient failure
 * Each kind has a unique icon + colour band. They're never silently
 * "empty" — the user always knows WHY a section is bare.
 * ===================================================================== */
.state-node {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
}
.state-node .state-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.state-node .state-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.state-node .state-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.state-node .state-detail {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.state-loading {
  border-color: color-mix(in srgb, var(--info) 25%, var(--border));
}
.state-loading .state-icon {
  color: var(--info);
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
  animation: state-loading-spin 1.6s linear infinite;
}
@keyframes state-loading-spin { to { transform: rotate(360deg); } }
.state-loading .state-spinner { display: none; }

.state-hidden {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--accent-soft) 35%, var(--surface)) 100%);
}
.state-hidden .state-icon {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.state-notProduced {
  border-color: var(--border);
  background: var(--bg-alt);
  border-style: dashed;
}
.state-notProduced .state-icon {
  color: var(--text-dim);
  background: var(--bg);
  border: 1.5px dashed var(--border-bold);
}
.state-notProduced .state-label {
  color: var(--text-secondary);
}

.state-unavailable {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--warn-soft) 25%, var(--surface)) 100%);
}
.state-unavailable .state-icon {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}

.state-error {
  border-color: color-mix(in srgb, var(--alert) 40%, var(--border));
  background: linear-gradient(135deg, var(--surface) 0%, var(--alert-soft) 100%);
}
.state-error .state-icon {
  color: var(--alert);
  background: var(--alert-soft);
  border-color: color-mix(in srgb, var(--alert) 50%, transparent);
}
.state-error .state-label { color: var(--alert); }

/* =====================================================================
 * RESPONSIVE — Phase 0 audit covers four viewport breakpoints
 * (1440 / 1024 / 768 / 390). The strip wraps gracefully, the
 * telemetry rail collapses below the flow on narrow widths, and
 * intent rows reflow with stacked metadata.
 * ===================================================================== */

/* < 1280px: telemetry rail narrows */
@media (max-width: 1280px) {
  .spine-canvas {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

/* < 1024px: telemetry rail moves below the flow region */
@media (max-width: 1024px) {
  .spine-canvas {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "strip"
      "flow"
      "rail";
  }
  .spine-telemetry {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  .tele-card { flex: 1 1 320px; }
  .tele-console-btn { flex: 1 1 260px; }
}

/* < 900px: the spine strip allows horizontal scroll if it doesn't fit */
@media (max-width: 900px) {
  .spine-strip-grid {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .strip-card {
    min-width: 110px;
    flex: 0 0 110px;
  }
  .strip-conn {
    flex: 0 0 16px;
  }
}

/* < 768px: timeline row collapses identity column under track */
@media (max-width: 768px) {
  .timeline-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px;
  }
  .timeline-tail {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .narr-head {
    padding: 12px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .narr-crumb-stats { margin-left: 0; }
  .narr-scroll {
    padding: 16px 18px 40px;
  }
  .narr-chapter-head {
    flex-wrap: wrap;
  }
  .narr-chapter-stamp {
    margin-left: 0;
    width: 100%;
  }
  .op-console {
    left: 8px; right: 8px; bottom: 8px;
  }
  .op-tabs {
    flex-direction: column;
    margin-left: 0;
    width: 100%;
  }
  .header-search {
    margin: 0 8px;
    max-width: none;
  }
}

/* < 480px: phone — single-column everywhere, header collapses */
@media (max-width: 480px) {
  .header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .header-context {
    gap: 8px 12px;
  }
  /* On phones, let the status cluster flow left instead of forcing a
     right-float that would orphan it on its own line. */
  .header-context .header-pulse { margin-left: 0; }
  .header-search {
    margin: 0;
  }
  .strip-card {
    min-width: 96px;
    flex: 0 0 96px;
  }
  .strip-blurb { display: none; }
  .narr-chapter-num { font-size: 18px; }
  .narr-chapter-title { font-size: 18px; }
  .tele-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
 * NEXUS-REIMAGINED-2026-05-10 Phase 1 — cockpit
 * ===================================================================== */

/* Severity badges */
.sev-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-secondary);
}
.sev-badge.sev-normal      { color: var(--text-secondary); }
.sev-badge.sev-attention   { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.sev-badge.sev-blocked     { background: var(--alert-soft); color: var(--alert); border-color: color-mix(in srgb, var(--alert) 30%, transparent); }
.sev-badge.sev-failed      { background: var(--alert-soft); color: var(--alert); border-color: var(--alert); }
.sev-badge.sev-unverifiable{ background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.sev-icon { font-size: 10px; line-height: 1; }
.sev-label {}

/* Cockpit rail panels (approval queue, risk rail, verification rail) */
.cockpit-rail .tele-head { margin-bottom: 8px; }
.cockpit-rail-count {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.cockpit-rail-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.cockpit-rail-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 9px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-bold);
  border-radius: var(--radius-sm);
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.cockpit-rail-row:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateX(2px);
}
.cockpit-rail-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cockpit-rail-row-role,
.cockpit-rail-row-kind {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}
.cockpit-rail-row-id {
  font-size: 10.5px;
  color: var(--accent);
}
.cockpit-rail-row-meta,
.cockpit-rail-row-msg {
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Risk row colour by severity */
.risk-row.risk-normal      { border-left-color: var(--border-bold); }
.risk-row.risk-attention   { border-left-color: var(--warn); }
.risk-row.risk-blocked     { border-left-color: var(--alert); }
.risk-row.risk-failed      { border-left-color: var(--alert); background: color-mix(in srgb, var(--alert-soft) 50%, var(--bg-alt)); }
.risk-row.risk-unverifiable{ border-left-color: var(--accent); }

.cockpit-rail-empty {
  padding: 10px 9px;
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}
.cockpit-rail-skeleton {
  height: 38px;
  background: linear-gradient(90deg, var(--bg-alt), var(--surface-alt), var(--bg-alt));
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: cockpit-skeleton 1.4s ease-in-out infinite;
  margin-bottom: 4px;
}
@keyframes cockpit-skeleton {
  0%, 100% { background-position: 100% 50%; }
  50%      { background-position: 0% 50%; }
}

/* Quick compose dock */
.cockpit-compose {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.cockpit-compose::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--spine-1), var(--spine-3), var(--spine-5), var(--spine-7));
}
.cockpit-compose-head { margin-bottom: 12px; }
.cockpit-compose-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.cockpit-compose-sub {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.cockpit-compose-form {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 12px;
  align-items: start;
}
.cockpit-compose-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 700;
}
.cockpit-compose-label > span { font-size: inherit; color: inherit; letter-spacing: inherit; }
.cockpit-compose-select,
.cockpit-compose-textarea {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  outline: none;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.cockpit-compose-textarea {
  min-height: 96px;
  resize: vertical;
  white-space: pre;
}
.cockpit-compose-select:focus,
.cockpit-compose-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.cockpit-compose-buttons {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.cockpit-compose-out {
  margin-top: 12px;
}
.cockpit-compose-out-loading {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.cockpit-compose-out-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.cockpit-compose-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}
.cockpit-compose-meta-label {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 10px;
}
.cockpit-compose-meta-value { font-size: 11px; color: var(--text); }

/* Header disclosure context — now a clickable identity switcher */
.header-disclosure-wrap { position: relative; }
.header-disclosure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font);
  color: inherit;
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.header-disclosure:hover { border-color: var(--accent); background: var(--surface); }
.header-disclosure-icon { font-size: 12px; line-height: 1; }
.header-disclosure-caret { color: var(--text-dim); font-size: 9px; }
.header-disclosure-actor {
  color: var(--text);
  font-size: 11px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-disclosure-purpose {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: lowercase;
}
.header-disclosure-sep { color: var(--text-dim); }

/* Compact theme palette icon (replaces the full-width theme <select>) */
.header-theme-wrap { position: relative; }
.header-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.header-theme-btn:hover { border-color: var(--accent); background: var(--surface); }

/* Shared header popover (identity switcher + theme palette) */
.header-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border-bold);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}
.header-popover[hidden] { display: none; }
.popover-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 700;
}
.popover-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.popover-input:focus { outline: none; border-color: var(--accent); }
.popover-actions { display: flex; justify-content: flex-end; margin-top: 2px; }
.popover-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bg);
  background: var(--accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.popover-btn:hover { filter: brightness(1.08); }
.popover-hint { font-size: 10px; color: var(--text-dim); margin: 2px 0 0; line-height: 1.4; }
.popover-hint code { font-family: var(--mono); color: var(--text-secondary); }
.theme-popover { min-width: 140px; }
.theme-option {
  text-align: left;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.theme-option:hover { background: var(--surface-alt); }
.theme-option.active { border-color: var(--accent); color: var(--accent); }

/* Time-travel selector — compact pill button + absolute popover panel.
   Was unstyled, so the panel rendered inline and expanded the header row
   to several lines. */
.time-selector { position: relative; display: inline-flex; }
.time-selector-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.time-selector-button:hover { border-color: var(--accent); background: var(--surface); }
.time-selector-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border-bold);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}
.time-selector-panel[hidden] { display: none; }
.time-selector-row { display: flex; gap: 14px; }
.time-selector-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  text-transform: capitalize;
  cursor: pointer;
}
.time-selector-input-row { display: flex; flex-direction: column; gap: 5px; }
.time-selector-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 700;
}
.time-selector-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.time-selector-input:focus { outline: none; border-color: var(--accent); }
.time-selector-note { font-size: 10.5px; color: var(--text-dim); line-height: 1.4; }
.time-selector-apply-row { display: flex; justify-content: flex-end; gap: 8px; }
.time-selector-apply,
.time-selector-reset {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
}
.time-selector-apply { color: var(--bg); background: var(--accent); border: none; }
.time-selector-reset { color: var(--text); background: transparent; border: 1px solid var(--border); }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
 * Phosphor theme — kept terminal-green but inherit the new
 * spine-dot + status-pill scaffolding via CSS variables. The
 * outline-heavy character of the original phosphor is
 * preserved by overriding hash-chip and stage-dot borders.
 * ============================================================ */
:root[data-theme="contrast"] body { background: #000; }
:root[data-theme="contrast"] body::before { display: none; }
:root[data-theme="contrast"] .hash-chip {
  border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
}
:root[data-theme="contrast"] .stage-dot { border: 1.5px solid var(--accent); }
:root[data-theme="contrast"] .stage-dot.done { background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
:root[data-theme="contrast"] .deeplink-btn,
:root[data-theme="contrast"] .verify-btn {
  border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font-weight: 700;
}
:root[data-theme="contrast"] .deeplink-btn:hover,
:root[data-theme="contrast"] .verify-btn:hover { background: var(--accent); color: #000; }
:root[data-theme="contrast"] .nav-link.active { border-bottom-color: var(--accent); }
:root[data-theme="contrast"] .json-block { background: #000; border: 1px solid var(--border); }

/* ============================================================
 * NEXUS-REIMAGINED-2026-05-10 Phase 2 — Intent Studio + Dossier
 * ============================================================ */

/* ── Intent Studio link from quick-compose dock ── */
.cockpit-compose-studio-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.cockpit-compose-studio-link:hover { text-decoration: underline; }

/* ── Compose canvas layout ── */
/* .compose-canvas inherits .workspace padding — no override. */
.compose-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}
.compose-sidebar {
  position: sticky;
  top: 96px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.compose-sidebar-head {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.compose-sidebar-category {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 8px 0 2px;
  opacity: 0.85;
}
.compose-sidebar-item {
  display: block;
  padding: 6px 10px;
  margin: 0;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
  border-left: 2px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.compose-sidebar-item:hover {
  background: var(--surface-alt);
  border-left-color: var(--accent);
}
.compose-sidebar-item.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left-color: var(--accent);
  font-weight: 600;
}
.compose-sidebar-loading,
.compose-sidebar-empty {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

/* ── Compose main column — bordered card (matches .compose-sidebar
 * so the 2-column grid reads as two equal panels). ── */
.compose-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}
.compose-header { margin-bottom: 14px; }
.compose-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.compose-category-pill {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  vertical-align: middle;
}
.compose-description {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 720px;
}

/* ── Tabs ── */
.compose-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: 16px 0 0;
}
.compose-tab {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.compose-tab:hover { color: var(--text); }
.compose-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Form fields ── */
.compose-form-wrap { margin: 18px 0; }
.compose-guided-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.compose-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.compose-field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.compose-field-required { color: var(--danger); }
.compose-field-input,
.compose-field-textarea {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.compose-field-textarea {
  font-family: var(--font-mono);
  min-height: 100px;
  resize: vertical;
}
.compose-field-input:focus,
.compose-field-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.compose-field-checkbox { width: 18px; height: 18px; }
.compose-field-hint {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}
.compose-field-error {
  margin: 0;
  font-size: 11px;
  color: var(--danger);
  font-weight: 600;
}
.compose-field.required .compose-field-input,
.compose-field.required .compose-field-textarea {
  border-left: 2px solid color-mix(in srgb, var(--danger) 60%, var(--border));
}

/* ── Raw form ── */
.compose-raw-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.compose-raw-textarea {
  font-family: var(--font-mono);
  font-size: 13px;
  min-height: 240px;
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  resize: vertical;
  outline: none;
}
.compose-raw-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* ── Buttons row ── */
.compose-buttons {
  display: flex;
  gap: 10px;
  margin: 4px 0 18px;
}
.compose-out { margin-top: 12px; }
.compose-out-loading {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  padding: 12px;
}
.compose-main-empty {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  padding: 32px;
}

/* ── Dossier ── */
.dossier {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.dossier-empty {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
}
.dossier-banner {
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 6px;
}
.dossier-summary-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

/* Risks panel */
.dossier-risks {
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--border));
  border-radius: 6px;
  padding: 10px 12px;
}
.dossier-risks h4 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--danger);
}
.dossier-risk-row {
  border-left: 3px solid var(--border);
  padding: 6px 10px;
  margin: 4px 0;
  background: color-mix(in srgb, var(--surface-alt) 60%, transparent);
  border-radius: 0 4px 4px 0;
}
.dossier-risk-row.risk-blocked  { border-left-color: var(--danger); }
.dossier-risk-row.risk-failed   { border-left-color: var(--danger); }
.dossier-risk-row.risk-attention{ border-left-color: var(--warning); }
.dossier-risk-row.risk-unverifiable { border-left-color: var(--text-dim); }
.dossier-risk-row.risk-normal   { border-left-color: var(--success); }

/* Sections (Summary / Operational / Cryptographic) */
.dossier-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alt);
  overflow: hidden;
}
.dossier-section-head {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  user-select: none;
  list-style: none;
}
.dossier-section-head::marker { content: ""; }
.dossier-section[open] .dossier-section-head {
  border-bottom: 1px solid var(--border);
}
.dossier-section-body { padding: 14px; }

/* Sub-sections inside Operational/Cryptographic */
.dossier-subsection { margin: 12px 0; }
.dossier-subsection-head {
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 4px 0;
  list-style: none;
}
.dossier-subsection-head::marker { content: ""; }
.dossier-subsection-body { padding: 4px 0 8px; }

/* Summary grid (label/value pairs) */
.dossier-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}

/* Step graph */
.dossier-step-graph {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dossier-step-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 10px 12px;
  border-left-width: 3px;
}
.dossier-step-card[data-stage="1"] { border-left-color: var(--spine-1); }
.dossier-step-card[data-stage="2"] { border-left-color: var(--spine-2); }
.dossier-step-card[data-stage="3"] { border-left-color: var(--spine-3); }
.dossier-step-card[data-stage="4"] { border-left-color: var(--spine-4); }
.dossier-step-card[data-stage="5"] { border-left-color: var(--spine-5); }
.dossier-step-card[data-stage="6"] { border-left-color: var(--spine-6); }
.dossier-step-card[data-stage="7"] { border-left-color: var(--spine-7); }
.dossier-step-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.dossier-step-name { font-size: 13px; font-weight: 600; color: var(--text); }
.dossier-step-type {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface-alt);
  padding: 2px 8px;
  border-radius: 4px;
}
.dossier-step-desc {
  margin: 4px 0;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}
.dossier-step-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  margin-top: 4px;
}
.dossier-step-deps {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-dim);
}

/* Dossier table (plugin selections / ghost predictions) */
.dossier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dossier-table th,
.dossier-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.dossier-table th {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--surface-alt);
}
.dossier-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

.dossier-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dossier-list li {
  padding: 4px 8px;
  font-size: 12px;
  border-bottom: 1px dashed var(--border);
}

.dossier-approval-row {
  border-left: 3px solid var(--warning);
  padding: 6px 10px;
  margin: 4px 0;
  background: var(--surface);
}

/* Submit handoff */
.dossier-submit-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 6px;
}
.dossier-submit-btn {
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
}
.dossier-submit-note {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
}

.dossier-raw {
  margin-top: 8px;
}

/* Mobile compose */
@media (max-width: 1024px) {
  .compose-layout {
    grid-template-columns: 1fr;
  }
  .compose-sidebar {
    position: relative;
    top: 0;
    max-height: none;
  }
  .compose-guided-form {
    grid-template-columns: 1fr;
  }
  .dossier-summary-grid {
    grid-template-columns: 1fr;
  }
  .dossier-step-meta {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * NEXUS-REIMAGINED-2026-05-10 Phase 3 — Approval Dossier
 * ============================================================ */

/* .approve-canvas inherits .workspace padding — no override. */
.approve-main {
  background: transparent;
  border: 0;
  padding: 0;
}
.approve-header { display: none; }
.approve-title { margin: 0; }
.approve-plan-line {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  display: block;
}
.approve-empty {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  padding: 32px;
  font-style: italic;
}
.approve-action-status {
  margin-bottom: 12px;
  font-weight: 600;
}

.approval-dossier {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.approval-banner {
  font-size: 14px;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 6px;
}
.approval-summary-list {
  list-style: disc;
  margin: 4px 0 4px 24px;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.approval-summary-list li { margin: 4px 0; }

.approval-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alt);
}

.approval-threshold-head {
  font-size: 14px;
  padding: 6px 0 10px;
  color: var(--text);
}
.approval-threshold-head strong {
  color: var(--accent);
  font-weight: 700;
}

.approval-invalidators-empty {
  margin: 8px 0;
  font-size: 13px;
  color: var(--success);
  font-weight: 600;
}

.approval-cta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 6px;
  margin-top: 4px;
}
.approval-sign-btn {
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
}
.approval-sign-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.approval-reject-btn {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  color: var(--danger);
}
.approval-reject-btn:hover {
  background: var(--danger);
  color: #fff;
}
.approval-inspect-btn {
  margin-left: auto;
}
.approval-cta-blocked-note {
  margin: 8px 0 0;
  width: 100%;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

/* Mobile approve */
@media (max-width: 1024px) {
  .approve-main { margin: 0 12px 20px; padding: 16px; }
  .approval-cta-bar { flex-direction: column; align-items: stretch; }
  .approval-inspect-btn { margin-left: 0; }
}

/* ============================================================
 * NEXUS-REIMAGINED-2026-05-10 Phase 4 — Execution Cinema
 * ============================================================ */

/* .execute-canvas inherits .workspace padding — no override. */
.execute-main {
  background: transparent;
  border: 0;
  padding: 0;
}
.execute-header { display: none; }
.execute-title { margin: 0; }
.execute-intent-line {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  display: block;
}
.execute-empty {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  padding: 32px;
  font-style: italic;
}

/* Stage header strip (top of execution view) */
.execution-stage-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0 16px;
}
.execution-stage-track {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  /* The stage row is an intentional horizontal scroll container: on narrow
     viewports it scrolls within its panel instead of overflowing the body.
     min-width:0 lets the flex item shrink below its content width so
     overflow-x can engage. */
  min-width: 0;
  overflow-x: auto;
}
.execution-stage-node {
  flex: 1 1 auto;
  padding: 8px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  position: relative;
  border-left: 3px solid var(--border);
  transition: background 0.2s ease, color 0.2s ease;
}
.execution-stage-node[data-stage="1"] { border-left-color: var(--spine-1); }
.execution-stage-node[data-stage="2"] { border-left-color: var(--spine-2); }
.execution-stage-node[data-stage="3"] { border-left-color: var(--spine-3); }
.execution-stage-node[data-stage="4"] { border-left-color: var(--spine-4); }
.execution-stage-node[data-stage="5"] { border-left-color: var(--spine-5); }
.execution-stage-node[data-stage="6"] { border-left-color: var(--spine-6); }
.execution-stage-node[data-stage="7"] { border-left-color: var(--spine-7); }
.execution-stage-node.done {
  color: var(--text);
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
}
.execution-stage-node.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  font-weight: 700;
  animation: stage-pulse 1.6s ease-in-out infinite;
}
.execution-waiting-badge {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 50%, var(--border));
  color: var(--warning);
}
.execution-waiting-badge[data-kind="executing"] {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--accent);
  animation: stage-pulse 1.4s ease-in-out infinite;
}
.execution-waiting-badge[data-kind="anchoring"] {
  animation: stage-pulse 2.4s ease-in-out infinite;
}
.execution-waiting-badge[data-kind="failed"] {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  color: var(--danger);
}

/* Sections inside the cinema view */
.execution-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alt);
  margin: 12px 0;
}
.execution-failure-section {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}

/* DAG layout */
.execution-dag {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.execution-dag-layer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  position: relative;
}
.execution-dag-layer:not(:last-child)::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    color-mix(in srgb, var(--accent) 20%, transparent) 50%,
    transparent 100%);
  margin: 8px 0;
}

/* Step card */
.execution-step-card {
  flex: 1 1 280px;
  min-width: 280px;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  border-left-width: 3px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.execution-step-card[data-stage="1"] { border-left-color: var(--spine-1); }
.execution-step-card[data-stage="2"] { border-left-color: var(--spine-2); }
.execution-step-card[data-stage="3"] { border-left-color: var(--spine-3); }
.execution-step-card[data-stage="4"] { border-left-color: var(--spine-4); }
.execution-step-card[data-stage="5"] { border-left-color: var(--spine-5); }
.execution-step-card[data-stage="6"] { border-left-color: var(--spine-6); }
.execution-step-card[data-stage="7"] { border-left-color: var(--spine-7); }

.execution-step-card.status-completed {
  border-color: color-mix(in srgb, var(--success) 50%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 16%, transparent) inset;
}
.execution-step-card.status-running {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  animation: stage-pulse 1.4s ease-in-out infinite;
}
.execution-step-card.status-failed {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}
.execution-step-card.status-waiting_approval,
.execution-step-card.status-waiting_anchor {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--border));
  background: color-mix(in srgb, var(--warning) 6%, var(--surface));
}
.execution-step-card.status-skipped {
  opacity: 0.5;
  border-style: dashed;
}

.execution-step-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.execution-step-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.execution-step-type {
  font-size: 10px;
  color: var(--text-dim);
  background: var(--surface-alt);
  padding: 2px 8px;
  border-radius: 4px;
}
.execution-step-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.execution-step-status.status-completed { color: var(--success); }
.execution-step-status.status-running   { color: var(--accent); }
.execution-step-status.status-failed    { color: var(--danger); }
.execution-step-status.status-waiting_approval,
.execution-step-status.status-waiting_anchor { color: var(--warning); }
.execution-step-status.status-pending   { color: var(--text-dim); }

.execution-step-desc {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}
.execution-step-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  margin-top: 6px;
}
.execution-step-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
}
.execution-step-meta-label {
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.execution-step-meta-value { color: var(--text); }
.execution-step-meta-value.execution-fallback {
  color: var(--warning);
  text-decoration: underline dotted;
}
.execution-step-failure {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-radius: 4px;
  color: var(--danger);
  font-family: var(--font-mono);
}
.execution-step-deps {
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.7;
}
.execution-step-deps.unlocked {
  opacity: 1;
  color: var(--success);
}

/* Replay mode */
.execution-replay-wrap {
  padding: 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.execution-replay-btn {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
}
.execution-replay-note {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
}
.execute-replay-banner {
  margin-bottom: 12px;
}
.execute-replay-slider {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}
.execute-replay-range {
  flex: 1 1 auto;
}
.execute-replay-step-label {
  white-space: nowrap;
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
}
.execute-replay-graph-host { margin-top: 16px; }
.execute-replay-back {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.execute-replay-back:hover { text-decoration: underline; }

.execution-events-table {
  font-size: 11px;
}

/* Narrative breadcrumb cinema link */
.narr-crumb-cinema-btn {
  display: inline-block;
  margin-left: auto;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.narr-crumb-cinema-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* Mobile execute */
@media (max-width: 1024px) {
  .execute-main { margin: 0 12px 20px; padding: 16px; }
  .execution-stage-header { flex-direction: column; align-items: stretch; }
  .execution-dag-layer { flex-direction: column; }
  .execution-step-card { max-width: none; }
  .execution-step-meta { grid-template-columns: 1fr; }
}

/* ============================================================
 * NEXUS-REIMAGINED-2026-05-10 Phase 5 — Evidence Reader And
 * Portable Verification.
 * ============================================================ */

/* .prove-canvas inherits .workspace padding — no override. */
.prove-main {
  background: transparent;
  border: 0;
  padding: 0;
}
.prove-header { display: none; }
.prove-title, .prove-subtitle { margin: 0; }

.evidence-action-status { margin-bottom: 12px; font-weight: 600; }

/* Drop zone */
.prove-drop-intro {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  max-width: 720px;
}
.prove-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  border: 2px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-alt));
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  outline: none;
  text-align: center;
}
.prove-drop-zone.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  animation: dropzone-pulse 1.2s ease-in-out infinite;
}
.prove-drop-zone:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.prove-drop-msg {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.prove-drop-or {
  font-size: 12px;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.prove-paste-details {
  margin-top: 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
}
.prove-paste-details > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.prove-paste-textarea {
  width: 100%;
  min-height: 200px;
  margin: 8px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  resize: vertical;
  outline: none;
}
.prove-paste-btn { margin-top: 4px; }
.prove-drop-result { margin-top: 16px; }
.prove-checks-table .check-pass td:nth-child(2) { color: var(--success); font-weight: 700; }
.prove-checks-table .check-fail td:nth-child(2) { color: var(--danger); font-weight: 700; }

/* Evidence proof reader */
.evidence-proof {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.evidence-proof-banner {
  font-size: 14px;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 6px;
}
.evidence-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alt);
}

/* Claim matrix */
.evidence-claim-matrix {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.evidence-claim-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 12px 14px;
  border-left-width: 3px;
}
.evidence-claim-card.status-pass {
  border-left-color: var(--success);
}
.evidence-claim-card.status-fail {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}
.evidence-claim-card.status-unverifiable {
  border-left-color: var(--text-dim);
  opacity: 0.85;
}
.evidence-claim-card.status-not_applicable {
  border-left-color: var(--warning);
  opacity: 0.7;
}
.evidence-claim-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.evidence-claim-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.evidence-claim-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.evidence-claim-status.status-pass    { color: var(--success); }
.evidence-claim-status.status-fail    { color: var(--danger); }
.evidence-claim-status.status-unverifiable { color: var(--text-dim); }
.evidence-claim-status.status-not_applicable { color: var(--warning); }

.evidence-claim-text {
  margin: 6px 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.evidence-claim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 16px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.evidence-claim-col-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 4px;
}
.evidence-claim-col-body {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}
.evidence-claim-detail {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  word-break: break-all;
}

/* Cross-bindings table reuses dossier-table */

/* Anchor panel */
.evidence-anchor-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

/* Chain walker */
.evidence-chain-walker {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: chain;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.evidence-chain-link {
  position: relative;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--surface);
  padding: 10px 12px 10px 36px;
  counter-increment: chain;
}
.evidence-chain-link::before {
  content: counter(chain);
  position: absolute;
  left: 10px;
  top: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  color: var(--text-dim);
}
.evidence-chain-link[data-stage="1"] { border-left-color: var(--spine-1); }
.evidence-chain-link[data-stage="2"] { border-left-color: var(--spine-2); }
.evidence-chain-link[data-stage="3"] { border-left-color: var(--spine-3); }
.evidence-chain-link[data-stage="4"] { border-left-color: var(--spine-4); }
.evidence-chain-link[data-stage="5"] { border-left-color: var(--spine-5); }
.evidence-chain-link[data-stage="6"] { border-left-color: var(--spine-6); }
.evidence-chain-link[data-stage="7"] { border-left-color: var(--spine-7); }
.evidence-chain-link-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.evidence-chain-link-kind {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.evidence-chain-link-id {
  font-size: 11px;
  color: var(--text);
}
.evidence-chain-link-ts {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-dim);
}
.evidence-chain-link-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.evidence-chain-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.evidence-chain-chip-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.evidence-chain-link-status {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--accent);
  font-style: italic;
}

/* Plugin versions table reuses dossier-table */

/* Raw sources */
.evidence-raw-sources {
  list-style: disc;
  margin: 4px 0 4px 24px;
  padding: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
}

/* Export controls */
.evidence-export-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 6px;
  margin-top: 4px;
}
.evidence-export-portable-btn {
  font-size: 13px;
  font-weight: 700;
}
.evidence-export-portable-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.evidence-export-note {
  margin: 4px 0 0;
  width: 100%;
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

/* Narrative breadcrumb prove link */
.narr-crumb-prove-btn {
  display: inline-block;
  margin-left: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.narr-crumb-prove-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* Mobile prove */
@media (max-width: 1024px) {
  .prove-main { margin: 0 12px 20px; padding: 16px; }
  .evidence-claim-grid { grid-template-columns: 1fr; }
  .evidence-export-bar { flex-direction: column; align-items: stretch; }
}

/* ============================================================
 * NEXUS-REIMAGINED-2026-05-10 Phase 6 — Govern Atlas
 * ============================================================ */

/* .govern-canvas inherits .workspace padding — no override. */
.govern-main {
  background: transparent;
  border: 0;
  padding: 0;
}
.govern-header { display: none; }
.govern-title, .govern-subtitle { margin: 0; }
.govern-body { display: grid; grid-template-columns: 1fr; gap: 16px; }
.govern-loading { font-size: 13px; color: var(--text-dim); font-style: italic; padding: 16px; }
.govern-empty { font-size: 13px; color: var(--text-dim); font-style: italic; padding: 8px 0; }

.govern-atlas {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
}
.govern-atlas-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}

.govern-atlas-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.govern-kind-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  border-left-width: 3px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.govern-kind-chip:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.govern-kind-chip.active {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: var(--accent);
  font-weight: 700;
}
.govern-kind-chip[data-stage="1"] { border-left-color: var(--spine-1); }
.govern-kind-chip[data-stage="2"] { border-left-color: var(--spine-2); }
.govern-kind-chip[data-stage="3"] { border-left-color: var(--spine-3); }
.govern-kind-chip[data-stage="4"] { border-left-color: var(--spine-4); }
.govern-kind-chip[data-stage="5"] { border-left-color: var(--spine-5); }
.govern-kind-chip[data-stage="6"] { border-left-color: var(--spine-6); }
.govern-kind-chip[data-stage="7"] { border-left-color: var(--spine-7); }
.govern-kind-chip-count {
  display: inline-block;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  background: var(--surface-alt);
  border-radius: 999px;
  color: var(--text-dim);
}
.govern-kind-chip.active .govern-kind-chip-count {
  background: var(--accent);
  color: #fff;
}

.govern-atlas-main { min-width: 0; }
.govern-atlas-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.govern-atlas-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.govern-atlas-disclosure {
  font-size: 11px;
  color: var(--text-dim);
}

.govern-node-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.govern-node-card {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.govern-node-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.govern-node-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.govern-node-id {
  font-size: 12px;
  color: var(--text);
}
.govern-node-state {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  background: var(--surface-alt);
  border-radius: 4px;
  color: var(--accent);
}
.govern-node-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  margin-top: 6px;
}

/* Drawer */
.govern-drawer-host { display: none; }
.govern-drawer-host.open {
  display: block;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
}
.govern-drawer-head {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.govern-drawer-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.govern-drawer-close {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.govern-drawer-close:hover { text-decoration: underline; }
.govern-drawer-section { margin: 8px 0; }
.govern-drawer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.govern-drawer-list li {
  padding: 6px 8px;
  font-size: 12px;
  border-bottom: 1px dashed var(--border);
}
.govern-drawer-list li:last-child { border-bottom: 0; }
.govern-drawer-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 700;
}
.govern-drawer-cta:hover { opacity: 0.9; }

/* Expiry / trust banners */
.govern-expiry-banner,
.govern-trust-banner {
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.govern-expiry-banner.expiry-active { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); }
.govern-expiry-banner.expiry-expires_soon { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); color: var(--warning); }
.govern-expiry-banner.expiry-expired { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
.govern-trust-banner.trust-active { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); }
.govern-trust-banner.trust-degraded { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); color: var(--warning); }
.govern-trust-banner.trust-suspended,
.govern-trust-banner.trust-revoked { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }

.govern-clickable { cursor: pointer; }

/* Narrative breadcrumb govern link */
.narr-crumb-govern-btn {
  display: inline-block;
  margin-left: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.narr-crumb-govern-btn:hover { background: var(--accent); color: #fff; }

@media (max-width: 1024px) {
  .govern-main { margin: 0 12px 20px; padding: 16px; }
  .govern-atlas-layout { grid-template-columns: 1fr; }
  .govern-node-grid { grid-template-columns: 1fr; }
  .govern-node-meta { grid-template-columns: 1fr; }
}

/* ============================================================
 * NEXUS-REIMAGINED-2026-05-10 Phase 7 — Operate Console
 * ============================================================ */

/* .operate-canvas inherits .workspace padding — no override. */
.operate-main {
  background: transparent;
  border: 0;
  padding: 0;
}
.operate-header { display: none; }
.operate-title, .operate-subtitle { margin: 0; }
.operate-body { margin-top: 0; }

.operate-console { display: flex; flex-direction: column; gap: 14px; }

.operate-governed-banner {
  font-size: 13px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-alt));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 6px;
  color: var(--text);
  line-height: 1.55;
}
.operate-governed-banner strong { color: var(--accent); }

.operate-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alt);
}

/* Health grid */
.operate-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.operate-health-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.operate-health-panel-head {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.operate-health-headline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.operate-health-headline-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.operate-health-headline-label {
  font-size: 11px;
  color: var(--text-dim);
}
.operate-health-severity {
  display: flex;
  align-items: center;
  gap: 4px;
}
.operate-panel-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}
.operate-panel-list li {
  font-size: 11px;
  padding: 2px 0;
  border-bottom: 1px dashed var(--border);
  color: var(--text);
}
.operate-panel-list li:last-child { border-bottom: 0; }
.operate-panel-empty {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  margin: 4px 0 0;
}
.operate-panel-desc {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}
.operate-network-footer {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-dim);
  padding: 6px 10px;
  background: var(--surface);
  border-radius: 4px;
}

.operate-subsystem-state {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 3px;
}
.operate-subsystem-state-active { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.operate-subsystem-state-paused,
.operate-subsystem-state-degraded { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }

/* Templates rail */
.operate-template-block { margin: 8px 0 12px; }
.operate-template-block-head {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.operate-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.operate-template-card {
  text-align: left;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 12px 14px;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.operate-template-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.operate-template-card.severity-normal    { border-left-color: var(--success); }
.operate-template-card.severity-attention { border-left-color: var(--warning); }
.operate-template-card.severity-blocked   { border-left-color: var(--danger); }
.operate-template-card.severity-failed    { border-left-color: var(--danger); }

.operate-template-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.operate-template-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.operate-template-card-desc {
  margin: 6px 0;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}
.operate-template-card-goal {
  font-size: 10px;
  color: var(--accent);
  margin-bottom: 6px;
}
.operate-template-card-cta {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-align: right;
}

/* Compose seed banner (shown when an operator template seeded the form) */
.compose-seed-banner {
  margin-bottom: 12px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-alt));
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
  border-radius: 6px;
  line-height: 1.5;
}
.compose-seed-banner strong { color: var(--warning); }

/* Narrative breadcrumb operate link */
.narr-crumb-operate-btn {
  display: inline-block;
  margin-left: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.narr-crumb-operate-btn:hover { background: var(--accent); color: #fff; }

@media (max-width: 1024px) {
  .operate-main { margin: 0 12px 20px; padding: 16px; }
  .operate-health-grid { grid-template-columns: 1fr; }
  .operate-template-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * NEXUS-REIMAGINED-2026-05-10 Phase 8 — Polish & Hardening
 * ============================================================ */

/* Command palette modal */
.command-palette {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
}
.command-palette.open { display: block; }
.command-palette-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.command-palette-modal {
  position: absolute;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.command-palette-input {
  font-family: var(--font);
  font-size: 16px;
  padding: 14px 18px;
  color: var(--text);
  background: var(--surface-alt);
  border: 0;
  border-bottom: 1px solid var(--border);
  outline: none;
  width: 100%;
}
.command-palette-input:focus {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-alt));
}
.command-palette-results {
  max-height: 56vh;
  overflow-y: auto;
}
.command-palette-group {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding: 10px 18px 4px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.command-palette-row {
  padding: 10px 18px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.command-palette-row:hover,
.command-palette-row.active {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-left-color: var(--accent);
}
.command-palette-row-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.command-palette-row-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.command-palette-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
}
.command-palette-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface-alt);
}

/* Keyboard shortcut help */
.shortcut-help {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
}
.shortcut-help.open { display: block; }
.shortcut-help-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.shortcut-help-modal {
  position: absolute;
  top: 18vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.shortcut-help-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.shortcut-help-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shortcut-help-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.shortcut-help-row:last-child { border-bottom: 0; }
.shortcut-help-key {
  display: inline-block;
  min-width: 96px;
  padding: 3px 8px;
  font-size: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: center;
  color: var(--accent);
  font-weight: 700;
}
.shortcut-help-desc {
  font-size: 13px;
  color: var(--text);
}
.shortcut-help-close {
  align-self: flex-start;
}

/* Phase 8 — fresh-devnet empty state polish */
.timeline-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 14px 0 8px;
}
.timeline-empty-action {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.timeline-empty-action:hover { background: var(--accent); color: #fff; }
.timeline-empty-hint {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-dim);
}

/* Phase 8 — accessible focus rings on every interactive surface.
 * The :focus-visible pseudo-class only fires on keyboard focus, so
 * mouse clicks don't show the ring. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.govern-node-card:focus-visible,
.operate-template-card:focus-visible,
.command-palette-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* Phase 8 — narrow viewport polish (390px / 768px) */
@media (max-width: 480px) {
  .command-palette-modal { top: 4vh; width: 96vw; }
  .command-palette-input { font-size: 15px; padding: 12px 14px; }
  .shortcut-help-modal { top: 8vh; padding: 16px; }
  .timeline-empty-actions { flex-direction: column; align-items: stretch; }
  .timeline-empty-action { text-align: center; }
}

/* ============================================================
 * Cinema E1C2 — DAG SVG overlay
 * SVG paths drawn over the execution-dag wrap. Edge state classes:
 *   .dag-edge-blocking      — dashed, muted (source not completed)
 *   .dag-edge-unlocked      — solid accent (source completed)
 *   .dag-edge-failed-path   — red, thick (on the broken-chain path)
 *   .dag-edge-anchor-wait   — slow dashed gold pulse (dest is anchor-wait)
 *   .dag-edge-unlock-animating — one-shot "flow" animation on transition
 * ============================================================ */
svg.dag-edges {
  z-index: 1;
  pointer-events: none;
}
svg.dag-edges .dag-edge {
  stroke-width: 1.6;
  fill: none;
  transition: stroke 0.25s ease, stroke-width 0.25s ease, opacity 0.25s ease;
}
svg.dag-edges .dag-edge-blocking {
  stroke: var(--border-bold, var(--border));
  stroke-dasharray: 5 4;
  opacity: 0.55;
}
svg.dag-edges .dag-edge-unlocked {
  stroke: var(--accent);
  opacity: 0.85;
}
svg.dag-edges .dag-edge-failed-path {
  stroke: var(--danger);
  stroke-width: 2.6;
  opacity: 1;
}
svg.dag-edges .dag-edge-anchor-wait {
  stroke: var(--warning);
  stroke-dasharray: 8 6;
  animation: dag-anchor-wait-pulse 3s ease-in-out infinite;
}
@keyframes dag-anchor-wait-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1;    }
}

/* One-shot "flow" animation when an edge transitions blocking → unlocked.
 * Draws the path from src→dst by animating stroke-dashoffset. */
svg.dag-edges .dag-edge-unlock-animating {
  stroke-dasharray: 1000 1000;
  stroke-dashoffset: 1000;
  animation: dag-edge-flow 700ms ease-out forwards;
}
@keyframes dag-edge-flow {
  to { stroke-dashoffset: 0; }
}

/* Arrowhead fill tints per state */
svg.dag-edges .dag-arrow-fill-blocking { fill: var(--border-bold, var(--border)); opacity: 0.55; }
svg.dag-edges .dag-arrow-fill-unlocked { fill: var(--accent); }
svg.dag-edges .dag-arrow-fill-failed   { fill: var(--danger); }

/* The dag wrap needs relative positioning so the overlay's
 * absolute children anchor correctly. Step cards inside get a
 * higher z-index so they remain interactive. */
.execution-dag {
  position: relative;
}
.execution-dag-layer {
  position: relative;
  z-index: 2;
}
.execution-step-card {
  position: relative;
  z-index: 2;
}

/* When the existing "← dep1, dep2" hint is present, dim it since
 * the SVG arrows now carry the same information. */
.execution-step-deps {
  opacity: 0.4;
  font-size: 9.5px;
}

/* ============================================================
 * Cinema E1C3 — step card state-transition animations,
 *   failure overlay, anchor-wait stage chip
 * ============================================================ */

/* pending → running: accent breathing pulse (1.4s) */
@keyframes step-card-start-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent),
                0 0 18px 2px color-mix(in srgb, var(--accent) 40%, transparent);
  }
}
.execution-step-card.step-card-anim-start {
  animation: step-card-start-pulse 1.4s ease-in-out;
}

/* running → completed: one-shot success flash (600ms) */
@keyframes step-card-success-flash {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent);
    transform: scale(1.0);
  }
  40% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--success) 30%, transparent),
                0 0 26px 4px color-mix(in srgb, var(--success) 50%, transparent);
    transform: scale(1.015);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    transform: scale(1.0);
  }
}
.execution-step-card.step-card-anim-success {
  animation: step-card-success-flash 600ms ease-out;
}

/* running → failed: one-shot shake (220ms) */
@keyframes step-card-failure-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX(4px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}
.execution-step-card.step-card-anim-failure {
  animation: step-card-failure-shake 220ms ease-in-out;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 60%, transparent),
              0 0 24px 4px color-mix(in srgb, var(--danger) 40%, transparent);
}

/* pending → waiting_approval: a softer attention blink (600ms) */
@keyframes step-card-blocked-blink {
  0%, 100% { background-color: var(--surface); }
  50%       { background-color: color-mix(in srgb, var(--warning) 14%, var(--surface)); }
}
.execution-step-card.step-card-anim-blocked {
  animation: step-card-blocked-blink 600ms ease-in-out;
}

/* waiting_anchor: long slow pulse (3s) — distinct rhythm from running */
@keyframes step-card-anchor-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 30%, transparent);
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 10%, transparent),
                0 0 22px 4px color-mix(in srgb, var(--warning) 30%, transparent);
    border-color: color-mix(in srgb, var(--warning) 70%, var(--border));
  }
}
.execution-step-card.status-waiting_anchor,
.execution-step-card.step-card-anim-anchor {
  animation: step-card-anchor-pulse 3s ease-in-out infinite;
}

/* ── Failure overlay: dim every card NOT in pathToFailure;
 *    highlight cards ON the path with a red ring + slight scale up. ── */
.execution-step-card.step-card-off-failure-path {
  opacity: 0.35;
  filter: saturate(0.4);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.execution-step-card.step-card-on-failure-path {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 60%, transparent);
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  z-index: 3;
}

/* ── Anchor-wait stage chip on the 7-stage strip:
 *    distinct slow gold pulse + caption text "waiting on L0" ── */
.execution-stage-node.execution-stage-anchor-wait {
  background: color-mix(in srgb, var(--warning) 18%, var(--surface));
  color: var(--warning);
  font-weight: 800;
  animation: stage-anchor-pulse 3s ease-in-out infinite;
  border-color: color-mix(in srgb, var(--warning) 70%, var(--border));
}
@keyframes stage-anchor-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 50%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--warning) 0%, transparent),
                0 0 22px 4px color-mix(in srgb, var(--warning) 30%, transparent);
  }
}
.execution-stage-anchor-caption {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warning);
  margin-top: 3px;
  opacity: 0.9;
}

/* ============================================================
 * Cinema E1C4 — timeline scrubber for execution replay
 * ============================================================ */
.timeline-scrubber {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.timeline-scrubber-empty {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  padding: 16px;
  text-align: center;
}
.timeline-scrubber-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.timeline-scrubber-controls > button {
  padding: 4px 12px;
  font-size: 12px;
}
.timeline-scrubber-readout {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
}
.timeline-scrubber-svg {
  display: block;
  cursor: pointer;
  outline: none;
  user-select: none;
}
.timeline-scrubber-svg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.timeline-scrubber-rail {
  stroke: var(--border-bold, var(--border));
  stroke-width: 2;
}
.timeline-scrubber-tick-major {
  stroke: var(--text-dim);
  stroke-width: 1.2;
}
.timeline-scrubber-tick-minor {
  stroke: var(--border);
  stroke-width: 1;
}
.timeline-scrubber-tick-label {
  font-size: 8.5px;
  fill: var(--text-dim);
  font-family: var(--font-mono);
}
.timeline-scrubber-marker {
  cursor: pointer;
  transition: r 0.15s ease;
}
.timeline-scrubber-marker:hover {
  r: 6;
}
.timeline-scrubber-marker-started   { fill: var(--accent); }
.timeline-scrubber-marker-completed { fill: var(--success); }
/* Step-type tints — only certain types get distinguishing colors */
.timeline-scrubber-marker.type-anchor              { stroke: var(--warning); stroke-width: 1.4; }
.timeline-scrubber-marker.type-approval            { stroke: var(--warning); stroke-width: 1.4; }
.timeline-scrubber-marker.type-contract_call,
.timeline-scrubber-marker.type-contract_deploy,
.timeline-scrubber-marker.type-evm_call,
.timeline-scrubber-marker.type-evm_deploy          { stroke: var(--accent);  stroke-width: 1.2; }

.timeline-scrubber-playhead {
  stroke: var(--danger);
  stroke-width: 2.2;
}
.timeline-scrubber-playhead-handle {
  fill: var(--danger);
  cursor: grab;
}
.timeline-scrubber-playhead-handle:active {
  cursor: grabbing;
}

.execute-replay-scrubber-wrap {
  margin: 12px 0;
}

/* Reduced-motion respect: drop all the one-shot animations + slow
 * the pulses way down. */
@media (prefers-reduced-motion: reduce) {
  .execution-step-card.step-card-anim-start,
  .execution-step-card.step-card-anim-success,
  .execution-step-card.step-card-anim-failure,
  .execution-step-card.step-card-anim-blocked,
  .execution-step-card.step-card-anim-anchor,
  .execution-step-card.status-waiting_anchor,
  .execution-stage-node.execution-stage-anchor-wait {
    animation: none !important;
  }
}

/* ============================================================
 * Workspace nav — Cockpit / Studio / Atlas / Console / Verifier
 * Five product spaces from 02-product-architecture.md surfaced as
 * header links so users can switch lenses from any view.
 * ============================================================ */

.header-workspaces {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.workspace-link {
  display: inline-block;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.workspace-link:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-alt));
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.workspace-link.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  font-weight: 800;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}
.workspace-link.active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Mobile: stack to icon row, hide labels at very narrow widths */
@media (max-width: 1280px) {
  .workspace-link {
    padding: 6px 10px;
    font-size: 11px;
  }
}
@media (max-width: 1024px) {
  .header-workspaces {
    order: 4;
    width: 100%;
    overflow-x: auto;
    padding: 4px 0;
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 480px) {
  .workspace-link {
    padding: 5px 8px;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
}

/* adoption-02 — persona start page (#/start) */
.start-canvas { max-width: 980px; }
.start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.start-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.start-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-1px);
}
.start-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}
.start-card-value {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.start-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.start-card-meta .start-card-time { font-weight: 700; color: var(--text); }
.start-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 4px;
}
.start-card-start {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 6px;
}
.start-card-start:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.start-card-learn {
  font-size: 0.76rem;
  color: var(--text-dim);
  text-decoration: none;
}
.start-card-learn:hover { color: var(--text); text-decoration: underline; }
.start-foot {
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* adoption-04 — Guided | Expert header toggle */
.header-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}
.header-mode-toggle .mode-btn {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.header-mode-toggle .mode-btn.active {
  background: color-mix(in srgb, var(--accent) 24%, var(--surface));
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* adoption-04 — Guided flows (#/guided/*) */
.guided-canvas { max-width: 820px; }
.guided-back { margin-bottom: 4px; }
.guided-back-link { font-size: 0.8rem; color: var(--text-dim); text-decoration: none; }
.guided-back-link:hover { color: var(--text); }
.guided-form { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 16px; }
.guided-field { display: flex; flex-direction: column; gap: 5px; }
.guided-label { font-size: 0.74rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.guided-input, .guided-paste {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); font: inherit;
}
.guided-paste { min-height: 120px; font-family: var(--mono, monospace); font-size: 0.8rem; }
.guided-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; width: fit-content; }
.guided-seg-btn { padding: 7px 14px; border: none; background: transparent; color: var(--text-dim); font: inherit; font-weight: 700; cursor: pointer; }
.guided-seg-btn.active { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); }
.guided-note { font-size: 0.78rem; color: var(--text-dim); margin: 2px 0 0; }
.guided-primary {
  align-self: flex-start;
  padding: 9px 18px; border: none; border-radius: 7px;
  background: var(--accent); color: var(--surface, #fff); font: inherit; font-weight: 800; cursor: pointer;
}
.guided-primary:disabled { opacity: 0.6; cursor: default; }
.guided-secondary {
  display: inline-block;
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); font-weight: 700; font-size: 0.82rem; text-decoration: none; cursor: pointer;
}
.guided-secondary:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.guided-drop { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 16px; padding: 16px; border: 1px dashed var(--border); border-radius: 10px; }
.guided-drop-hint { margin: 0; font-size: 0.85rem; color: var(--text-dim); }
.guided-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.guided-result { margin-top: 8px; }
.guided-loading { color: var(--text-dim); }
.guided-error { color: var(--danger, #e5484d); font-weight: 600; }
.guided-stages { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.guided-stage { padding: 8px 12px; border-radius: 7px; background: var(--surface-alt); font-size: 0.85rem; }
.guided-stage-done { border-left: 3px solid var(--success, #46a758); }
.guided-stage-local { border-left: 3px solid var(--warning, #f5a623); }
.guided-stage-pending { border-left: 3px solid var(--border); color: var(--text-dim); }
.guided-receipt, .guided-section, .guided-honest, .guided-refs, .guided-fix { margin: 0 0 16px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.guided-receipt-title, .guided-section-title { margin: 0 0 8px; font-size: 0.95rem; font-weight: 800; }
.guided-section-body { margin: 0; font-size: 0.88rem; color: var(--text); line-height: 1.5; }
.guided-kv { display: flex; gap: 10px; font-size: 0.85rem; padding: 2px 0; }
.guided-kv-label { min-width: 110px; color: var(--text-dim); font-weight: 700; }
.guided-verdict { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; margin-bottom: 10px; font-size: 1rem; }
.guided-verdict-pass { background: color-mix(in srgb, var(--success, #46a758) 14%, var(--surface)); }
.guided-verdict-fail { background: color-mix(in srgb, var(--danger, #e5484d) 14%, var(--surface)); }
.guided-verdict-level { font-weight: 700; color: var(--text-dim); }
.guided-assurance { font-size: 0.88rem; line-height: 1.5; margin: 0 0 12px; }
.guided-facts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.guided-details summary { cursor: pointer; font-weight: 700; font-size: 0.85rem; }
.guided-check-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.78rem; }
.guided-check-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); }
.guided-check-table .check-pass td:nth-child(2) { color: var(--success, #46a758); font-weight: 700; }
.guided-check-table .check-fail td:nth-child(2) { color: var(--danger, #e5484d); font-weight: 700; }
.guided-readiness-headline { font-size: 1.05rem; font-weight: 800; padding: 12px 14px; border-radius: 8px; margin-bottom: 12px; }
.guided-readiness-headline.ok { background: color-mix(in srgb, var(--success, #46a758) 14%, var(--surface)); }
.guided-readiness-headline.bad { background: color-mix(in srgb, var(--danger, #e5484d) 14%, var(--surface)); }
.guided-substrates { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 5px; }
.guided-substrate { display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px; border-radius: 7px; background: var(--surface-alt); font-size: 0.82rem; }
.guided-substrate-green { border-left: 3px solid var(--success, #46a758); }
.guided-substrate-yellow { border-left: 3px solid var(--warning, #f5a623); }
.guided-substrate-red { border-left: 3px solid var(--danger, #e5484d); }
.guided-substrate-status { color: var(--text-dim); }
.guided-cli, .guided-ref-path { font-family: var(--mono, monospace); font-size: 0.78rem; }
.guided-cli { white-space: pre-wrap; background: var(--surface-alt); padding: 10px 12px; border-radius: 7px; overflow-x: auto; }
.guided-honest strong { color: var(--accent); }
.guided-refs ul { margin: 6px 0 0; padding-left: 18px; }
.guided-ref { font-size: 0.84rem; margin: 3px 0; }
.guided-expert { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.guided-expert-link { font-size: 0.85rem; font-weight: 700; color: var(--accent); text-decoration: none; }
.guided-expert-link:hover { text-decoration: underline; }

/* adoption-06 — proof receipt card (shared by the prove view + Cinema proof mode) */
.proof-receipt {
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-dim);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--surface);
  margin: 0 0 14px;
  max-width: 100%;
  box-sizing: border-box;
}
.proof-receipt.receipt-verified { border-left-color: var(--success, #46a758); }
.proof-receipt.receipt-partial { border-left-color: var(--warning, #f5a623); }
.proof-receipt.receipt-failed { border-left-color: var(--danger, #e5484d); }
.proof-receipt.proof-receipt-invalid { border-left-color: var(--danger, #e5484d); }
.proof-receipt-status { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.04em; }
.proof-receipt-summary { font-size: 0.85rem; color: var(--text-dim); margin-top: 3px; }
.proof-receipt-assurance { font-size: 0.95rem; font-weight: 800; margin-top: 6px; }
.proof-receipt-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0 0; }
.proof-receipt-badge {
  font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-alt); color: var(--text-dim); border: 1px solid var(--border);
}
.proof-receipt-badge[data-on="on"] { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.proof-receipt-warnings { font-size: 0.76rem; color: var(--warning, #f5a623); margin-top: 8px; font-weight: 600; }
.proof-receipt-invalid-note { font-size: 0.76rem; color: var(--danger, #e5484d); margin-top: 8px; font-weight: 700; }
.proof-receipt-details { margin-top: 10px; }
.proof-receipt-details > summary { cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--text-dim); }
.proof-receipt-fields { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 8px 0; font-size: 0.78rem; }
.proof-receipt-fields dt { color: var(--text-dim); font-weight: 700; }
.proof-receipt-fields dd { margin: 0; overflow-wrap: anywhere; word-break: break-word; font-family: var(--mono, monospace); }
.proof-receipt-json { font-size: 0.72rem; background: var(--surface-alt); padding: 10px; border-radius: 7px; overflow-x: auto; white-space: pre; max-height: 280px; }
.cinema-receipt-host { margin-bottom: 10px; }

/* adoption-08 — translated error card (shared error panel) */
.user-error {
  border: 1px solid var(--border);
  border-left: 4px solid var(--danger, #e5484d);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--surface);
  margin: 0 0 14px;
  max-width: 100%;
  box-sizing: border-box;
}
.user-error.user-error-retryable { border-left-color: var(--warning, #f5a623); }
.user-error-title { font-size: 1.02rem; font-weight: 800; }
.user-error-message { font-size: 0.9rem; color: var(--text); margin-top: 4px; }
.user-error-impact { font-size: 0.85rem; margin-top: 8px; }
.user-error-impact-label { color: var(--text-dim); font-weight: 700; }
.user-error-impact-text { color: var(--text); }
.user-error-fixes { margin-top: 10px; }
.user-error-fixes-label { font-size: 0.82rem; font-weight: 700; color: var(--text-dim); }
.user-error-fix-list { list-style: none; padding: 0; margin: 6px 0 0; }
.user-error-fix { margin: 0 0 7px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.user-error-fix-label { font-size: 0.86rem; color: var(--text); }
.user-error-fix-command { font-family: var(--mono, monospace); font-size: 0.8rem; background: var(--surface-alt); padding: 2px 6px; border-radius: 5px; overflow-wrap: anywhere; }
.user-error-fix-command[data-safe-to-run="yes"] { border: 1px solid var(--success, #46a758); }
.user-error-fix-safe { font-size: 0.72rem; font-weight: 700; color: var(--success, #46a758); }
.user-error-retryable { font-size: 0.82rem; color: var(--text-dim); margin-top: 8px; }
.user-error-docs { display: inline-block; margin-top: 10px; font-size: 0.84rem; font-weight: 700; color: var(--accent); text-decoration: none; }
.user-error-docs:hover { text-decoration: underline; }
.user-error-details { margin-top: 10px; }
.user-error-details summary { cursor: pointer; font-size: 0.82rem; color: var(--text-dim); }
.user-error-fields { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 8px 0 0; font-size: 0.8rem; }
.user-error-fields dt { color: var(--text-dim); font-weight: 700; }
.user-error-fields dd { margin: 0; overflow-wrap: anywhere; word-break: break-word; font-family: var(--mono, monospace); }

/* adoption-11 — learn-as-you-go panels + learning ladder view */
.learn-panel { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); margin: 8px 0; }
.learn-panel[data-dismissed="yes"] { display: none; }
.learn-panel-summary { cursor: pointer; padding: 8px 12px; font-size: 0.86rem; font-weight: 700; color: var(--text); }
.learn-panel-body { padding: 0 12px 12px; }
.learn-panel-plain { font-size: 0.86rem; color: var(--text); margin: 4px 0 8px; }
.learn-panel-link { font-size: 0.8rem; font-weight: 600; color: var(--accent, #58a6ff); text-decoration: none; }
.learn-panel-link:hover { text-decoration: underline; }
.learn-panel-dismiss { display: inline-block; margin-left: 14px; font-size: 0.76rem; background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.learn-panel-dismiss:hover { color: var(--text); border-color: var(--accent, #58a6ff); }

.learn-view { max-width: 860px; margin: 0 auto; padding: 18px 16px 40px; }
.learn-view-title { font-size: 1.5rem; margin: 0 0 6px; }
.learn-view-intro { color: var(--text-dim); margin: 0 0 16px; max-width: 60ch; }
.learn-view-cta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; border: 1px solid var(--border); border-left: 4px solid var(--accent, #58a6ff); border-radius: 8px; padding: 10px 14px; margin: 0 0 18px; background: var(--surface); }
.learn-view-cta-text { font-size: 0.88rem; }
.learn-view-cta-link { font-weight: 700; color: var(--accent, #58a6ff); text-decoration: none; }
.learn-view-cta-link:hover { text-decoration: underline; }
.learn-view-ladder { list-style: none; counter-reset: none; padding: 0; margin: 0; }
.learn-view-rung { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 6px; }
.learn-view-rung-num { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 8px; border-radius: 999px; background: var(--surface-alt, #0d1117); border: 1px solid var(--border); color: var(--text-dim); font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.learn-view-rung .learn-panel { flex: 1 1 auto; min-width: 0; }
.learn-view-footer { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; margin-top: 18px; }
.learn-view-docs-link { font-size: 0.86rem; font-weight: 600; color: var(--accent, #58a6ff); text-decoration: none; }
.learn-view-docs-link:hover { text-decoration: underline; }
.learn-view-reset { font-size: 0.78rem; background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; padding: 3px 10px; cursor: pointer; }

.start-learn-link { display: inline-block; margin-top: 8px; font-size: 0.86rem; font-weight: 600; color: var(--accent, #58a6ff); text-decoration: none; }
.start-learn-link:hover { text-decoration: underline; }

/* nextux-01 — Agent Mode panel */
.agent-view { padding: 18px 22px; max-width: 1100px; }
.agent-view-title { font-size: 1.4rem; margin: 0 0 4px; }
.agent-view-intro { color: var(--text-dim, #8b949e); font-size: 0.9rem; margin: 0 0 14px; max-width: 70ch; }
.agent-conn { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.agent-conn-input { flex: 1 1 280px; min-width: 220px; font-family: var(--mono, monospace); font-size: 0.82rem; padding: 6px 10px; border: 1px solid var(--border, #30363d); border-radius: 6px; background: var(--surface, #0d1117); color: var(--text, #e6edf3); }
.agent-conn-btn, .agent-btn { font-size: 0.82rem; font-weight: 700; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--accent, #238636); background: var(--accent, #238636); color: var(--bg, #010409); cursor: pointer; }
.agent-conn-status { font-size: 0.8rem; color: var(--text-dim, #8b949e); }
.agent-conn-ok { color: var(--ok, #3fb950); }
.agent-conn-err { color: var(--alert, #f85149); }
.agent-layout { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
@media (max-width: 720px) { .agent-layout { grid-template-columns: 1fr; } }
.agent-pane-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim, #8b949e); margin-bottom: 8px; }
.agent-actions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.agent-action-btn { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border, #30363d); background: var(--surface, #161b22); color: var(--text, #e6edf3); cursor: pointer; }
.agent-action-btn:hover { border-color: var(--accent, #58a6ff); }
.agent-action-id { font-family: var(--mono, monospace); font-size: 0.8rem; flex: 1; }
.agent-action-flag { font-size: 0.66rem; color: var(--warn, #d29922); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
.agent-risk { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 4px; padding: 1px 5px; border: 1px solid currentColor; }
.agent-risk-read-only { color: var(--ok, #3fb950); }
.agent-risk-local-write { color: var(--accent, #58a6ff); }
.agent-risk-testnet-write { color: var(--warn, #d29922); }
.agent-risk-mainnet-write, .agent-risk-release-publish, .agent-risk-authority-change { color: var(--alert, #f85149); }
.agent-detail { border: 1px solid var(--border, #30363d); border-radius: 8px; padding: 16px; background: var(--surface, #0d1117); min-height: 220px; }
.agent-detail-empty { color: var(--text-dim, #8b949e); font-size: 0.9rem; }
.agent-detail-title { font-size: 1.1rem; margin: 0 0 4px; }
.agent-detail-desc { color: var(--text-dim, #8b949e); font-size: 0.85rem; margin: 0 0 8px; }
.agent-detail-meta { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.agent-detail-tag { font-size: 0.68rem; color: var(--text-dim, #8b949e); border: 1px solid var(--border, #30363d); border-radius: 4px; padding: 1px 6px; }
.agent-input-label { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim, #8b949e); margin-bottom: 4px; }
.agent-input { width: 100%; box-sizing: border-box; font-family: var(--mono, monospace); font-size: 0.8rem; padding: 8px; border: 1px solid var(--border, #30363d); border-radius: 6px; background: var(--bg, #010409); color: var(--text, #e6edf3); resize: vertical; }
.agent-detail-actions { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.agent-btn-dry { background: var(--surface, #161b22); color: var(--text, #e6edf3); }
.agent-btn-copy { background: var(--surface, #161b22); color: var(--text-dim, #8b949e); }
.agent-result-card { border-radius: 8px; padding: 12px; border: 1px solid var(--border, #30363d); }
.agent-result-ok { border-left: 3px solid var(--ok, #3fb950); }
.agent-result-fail { border-left: 3px solid var(--alert, #f85149); }
.agent-result-summary { font-weight: 600; margin-bottom: 8px; }
.agent-assurance { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.agent-assurance-level { font-family: var(--mono, monospace); font-weight: 700; }
.agent-assurance-trust { font-size: 0.78rem; color: var(--ok, #3fb950); }
.agent-dryrun, .agent-approval { background: var(--bg, #010409); border-radius: 6px; padding: 8px 10px; margin: 8px 0; font-size: 0.82rem; }
.agent-dryrun-warn, .agent-approval-title { color: var(--warn, #d29922); font-weight: 600; }
.agent-approval-hash { font-family: var(--mono, monospace); font-size: 0.74rem; color: var(--text-dim, #8b949e); word-break: break-all; }
.agent-artifact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.8rem; margin: 4px 0; }
.agent-artifact-type { font-size: 0.66rem; text-transform: uppercase; color: var(--text-dim, #8b949e); border: 1px solid var(--border, #30363d); border-radius: 4px; padding: 1px 5px; }
.agent-artifact-cmd, .agent-error-fix { font-family: var(--mono, monospace); font-size: 0.76rem; background: var(--bg, #010409); padding: 2px 6px; border-radius: 4px; word-break: break-all; }
.agent-warning { color: var(--warn, #d29922); font-size: 0.8rem; margin: 4px 0; }
.agent-error { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 6px 0; font-size: 0.82rem; }
.agent-error-code { font-family: var(--mono, monospace); font-weight: 700; color: var(--alert, #f85149); }
.agent-raw { margin-top: 10px; }
.agent-raw-summary { cursor: pointer; font-size: 0.76rem; color: var(--text-dim, #8b949e); }
.agent-raw-pre { font-family: var(--mono, monospace); font-size: 0.72rem; background: var(--bg, #010409); padding: 10px; border-radius: 6px; overflow: auto; max-height: 320px; }
.agent-loading { color: var(--text-dim, #8b949e); font-size: 0.85rem; }

/* nextux-02 — Scenario Builder */
.scenario-view { padding: 18px 22px; max-width: 1100px; }
.scenario-view-title { font-size: 1.4rem; margin: 0 0 4px; }
.scenario-view-intro { color: var(--text-dim, #8b949e); font-size: 0.9rem; margin: 0 0 16px; max-width: 72ch; }
.scenario-section-title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim, #8b949e); margin: 18px 0 8px; }
.scenario-entry-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.scenario-entry-choice { text-align: left; font-size: 0.85rem; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border, #30363d); background: var(--surface, #161b22); color: var(--text, #e6edf3); cursor: pointer; }
.scenario-entry-choice:hover { border-color: var(--accent, #58a6ff); }
.scenario-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
@media (max-width: 640px) { .scenario-template-grid { grid-template-columns: 1fr; } }
.scenario-template-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px; border-radius: 8px; border: 1px solid var(--border, #30363d); background: var(--surface, #161b22); color: var(--text, #e6edf3); cursor: pointer; }
.scenario-template-card:hover { border-color: var(--accent, #58a6ff); }
.scenario-template-title { font-weight: 600; font-size: 0.9rem; }
.scenario-template-promise { font-size: 0.78rem; color: var(--text-dim, #8b949e); }
.scenario-template-support { font-size: 0.7rem; color: var(--text-dim, #8b949e); font-family: var(--mono, monospace); }
.scenario-detail { margin-top: 14px; border: 1px solid var(--border, #30363d); border-radius: 8px; padding: 16px; background: var(--surface, #0d1117); }
.scenario-detail-empty { color: var(--text-dim, #8b949e); font-size: 0.9rem; }
.scenario-detail-title { font-size: 1.05rem; margin: 0 0 4px; }
.scenario-detail-promise { font-size: 0.85rem; color: var(--text-dim, #8b949e); margin: 0 0 10px; }
.scenario-mode-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.scenario-mode-label, .scenario-run-label { font-size: 0.8rem; color: var(--text-dim, #8b949e); }
.scenario-mode-select, .scenario-agent-input { font-size: 0.82rem; padding: 5px 8px; border: 1px solid var(--border, #30363d); border-radius: 6px; background: var(--bg, #010409); color: var(--text, #e6edf3); }
.scenario-agent-input { flex: 1 1 240px; font-family: var(--mono, monospace); }
.scenario-assurance-preview { font-size: 0.82rem; color: var(--text, #e6edf3); background: var(--bg, #010409); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; }
.scenario-run-section { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.scenario-btn { font-size: 0.82rem; font-weight: 700; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--accent, #238636); background: var(--accent, #238636); color: var(--bg, #010409); cursor: pointer; }
.scenario-verify-input { width: 100%; box-sizing: border-box; font-family: var(--mono, monospace); font-size: 0.78rem; padding: 8px; border: 1px solid var(--border, #30363d); border-radius: 6px; background: var(--bg, #010409); color: var(--text, #e6edf3); resize: vertical; margin-bottom: 8px; }
.scenario-verify-intro { font-size: 0.82rem; color: var(--text-dim, #8b949e); margin: 0 0 8px; max-width: 72ch; }
.scenario-result-card { margin-top: 12px; border-radius: 8px; padding: 12px; border: 1px solid var(--border, #30363d); }
.scenario-ok { border-left: 3px solid var(--ok, #3fb950); }
.scenario-fail { border-left: 3px solid var(--alert, #f85149); }
.scenario-result-summary { font-weight: 600; margin-bottom: 6px; }
.scenario-assurance { font-size: 0.82rem; font-family: var(--mono, monospace); margin-bottom: 6px; }
.scenario-receipt { font-size: 0.82rem; color: var(--text-dim, #8b949e); margin-bottom: 6px; }
.scenario-cinema { background: var(--bg, #010409); border-radius: 6px; padding: 8px 10px; margin: 6px 0; }
.scenario-cinema-title { font-size: 0.72rem; text-transform: uppercase; color: var(--text-dim, #8b949e); }
.scenario-cinema-steps { font-size: 0.84rem; }
.scenario-cinema-capsule { font-size: 0.74rem; color: var(--text-dim, #8b949e); }
.scenario-checks-summary { cursor: pointer; font-size: 0.78rem; color: var(--text-dim, #8b949e); }
.scenario-checks-list { list-style: none; margin: 6px 0 0; padding: 0; font-family: var(--mono, monospace); font-size: 0.74rem; }
.scenario-check-ok { color: var(--ok, #3fb950); }
.scenario-check-fail { color: var(--alert, #f85149); }
.scenario-artifact-cmd { display: block; font-family: var(--mono, monospace); font-size: 0.76rem; background: var(--bg, #010409); padding: 4px 6px; border-radius: 4px; margin: 4px 0; word-break: break-all; }
.scenario-run-error { color: var(--alert, #f85149); font-size: 0.8rem; }
.scenario-loading { color: var(--text-dim, #8b949e); font-size: 0.85rem; }

/* ===================================================================== */
/* nextux-03 — Progressive Disclosure design system                       */
/* Components: AssuranceBadge, ProofReceiptCard, ErrorResolutionCard,      */
/* NextActionBar, GlossaryPopover, TechnicalDetails, PersonaSwitcher,      */
/* TrustBoundaryMap. Status is never color-only (glyph + text always);     */
/* text keeps full --text contrast; interactive controls are >=40px tall.  */
/* ===================================================================== */

.ux-design-workspace { max-width: 1100px; }
.ux-design-body { display: flex; flex-direction: column; gap: 28px; }
.ux-design-loading { color: var(--text-secondary); }
.ux-design-error { border: 1px solid var(--alert); background: var(--alert-soft); color: var(--text); padding: 14px 16px; border-radius: 10px; }
.ux-design-gallery { display: flex; flex-direction: column; gap: 28px; }
.ux-gallery-section { border-top: 1px solid var(--border); padding-top: 18px; }
.ux-gallery-section-title { margin: 0 0 4px; font-size: 1.05rem; color: var(--text); }
.ux-gallery-section-intro { margin: 0 0 14px; color: var(--text-secondary); font-size: 0.88rem; max-width: 70ch; }
.ux-gallery-state-block { margin-bottom: 14px; }
.ux-gallery-state-title { margin: 0 0 6px; font-size: 0.82rem; color: var(--text-secondary); font-weight: 600; }

/* --- AssuranceBadge --- */
.ux-badge-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.ux-badge {
  --ux-role-fg: var(--info);
  --ux-role-soft: var(--info-soft);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--ux-role-soft) 60%, var(--surface));
  border: 1px solid var(--ux-role-fg);
  color: var(--text); font-size: 0.8rem; line-height: 1.3;
  max-width: 100%;
}
.ux-badge-glyph { color: var(--ux-role-fg); font-weight: 700; }
.ux-badge-text { font-weight: 600; }
.ux-badge-plain { color: var(--text-secondary); font-weight: 400; }
.ux-badge-empty { color: var(--text-secondary); font-style: italic; font-size: 0.8rem; }

/* --- ProofReceiptCard --- */
.ux-receipt-card {
  --ux-role-fg: var(--ok); --ux-role-soft: var(--ok-soft);
  border: 1px solid var(--border-bold); border-left: 4px solid var(--ux-role-fg);
  border-radius: 12px; background: var(--surface); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;
}
.ux-receipt-headline { display: flex; align-items: center; gap: 8px; }
.ux-receipt-glyph { color: var(--ux-role-fg); font-size: 1.1rem; font-weight: 700; }
.ux-receipt-status { font-weight: 700; letter-spacing: 0.02em; color: var(--text); }
.ux-receipt-summary { margin: 0; color: var(--text-secondary); font-size: 0.88rem; }
.ux-receipt-trust { font-size: 0.85rem; }
.ux-receipt-trust-label { color: var(--text-secondary); font-weight: 600; }
.ux-receipt-warnings { margin: 4px 0 0; padding-left: 18px; color: var(--warn); font-size: 0.82rem; }
.ux-receipt-warning { color: var(--text); }

/* --- TrustBoundaryMap --- */
.ux-trust-map { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); padding: 14px 16px; margin-bottom: 14px; }
.ux-trust-map-title { margin: 0 0 10px; font-size: 0.9rem; color: var(--text); }
.ux-trust-map-rows { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 6px 14px; margin: 0; }
.ux-trust-who { font-weight: 600; color: var(--text); font-size: 0.83rem; }
.ux-trust-who[data-state="yes"] { color: var(--ok); }
.ux-trust-who[data-state="pending"] { color: var(--warn); }
.ux-trust-who[data-state="attested"] { color: var(--warn); }
.ux-trust-who[data-state="open"] { color: var(--info); }
.ux-trust-what { margin: 0; color: var(--text-secondary); font-size: 0.83rem; }

/* --- ErrorResolutionCard --- */
.ux-error-card { border: 1px solid var(--alert); border-left: 4px solid var(--alert); background: var(--surface); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ux-error-title { font-weight: 700; color: var(--text); }
.ux-error-label { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 2px; }
.ux-error-text { margin: 0; color: var(--text); font-size: 0.86rem; }
.ux-error-fix-list { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.ux-error-fix-label { color: var(--text); font-size: 0.86rem; }
.ux-error-fix-command { display: block; font-family: var(--mono, monospace); font-size: 0.78rem; background: var(--bg); color: var(--text); padding: 4px 8px; border-radius: 6px; margin-top: 3px; word-break: break-all; }
.ux-error-fix-command[data-safe-to-run="yes"] { border-left: 3px solid var(--ok); }
.ux-error-fix-safe { font-size: 0.72rem; color: var(--ok); margin-left: 4px; }
.ux-error-retry { font-size: 0.82rem; color: var(--text-secondary); }
.ux-error-docs { font-size: 0.82rem; color: var(--accent); }

/* --- TechnicalDetails --- */
.ux-technical { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); padding: 4px 12px; }
.ux-technical-summary { cursor: pointer; font-size: 0.82rem; color: var(--text-secondary); padding: 6px 0; }
.ux-technical-fields { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 4px 12px; margin: 6px 0 10px; }
.ux-technical-label { color: var(--text-secondary); font-size: 0.78rem; }
.ux-technical-value { margin: 0; font-family: var(--mono, monospace); font-size: 0.78rem; color: var(--text); word-break: break-all; }

/* --- NextActionBar --- */
.ux-next-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.ux-next-action {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  min-height: 40px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--border-bold); background: var(--surface);
  color: var(--text); cursor: pointer; max-width: 100%;
}
.ux-next-action:hover { background: var(--surface-hover); }
.ux-next-action-label { font-weight: 600; font-size: 0.85rem; }
.ux-next-action-command { font-family: var(--mono, monospace); font-size: 0.74rem; color: var(--text-secondary); word-break: break-all; }
.ux-next-action-plain { font-size: 0.76rem; color: var(--text-secondary); }
.ux-next-empty { color: var(--text-secondary); }

/* --- GlossaryPopover --- */
.ux-glossary { position: relative; display: inline-block; }
.ux-glossary-term {
  display: inline; background: none; border: none; padding: 2px 2px; cursor: pointer;
  color: var(--accent); text-decoration: underline dotted; font: inherit;
}
.ux-glossary-hint { color: var(--text-secondary); }
.ux-glossary-popover {
  position: absolute; left: 0; top: 100%; z-index: 30; margin-top: 4px;
  display: flex; flex-direction: column; gap: 4px; width: max-content; max-width: 280px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.ux-glossary-popover[hidden] { display: none; }
.ux-glossary-name { color: var(--text); font-size: 0.84rem; }
.ux-glossary-plain { color: var(--text); font-size: 0.82rem; }
.ux-glossary-technical { color: var(--text-secondary); font-size: 0.78rem; }
.ux-glossary-docs { color: var(--accent); font-size: 0.78rem; }
.ux-gallery-gloss-line { color: var(--text); font-size: 0.9rem; line-height: 1.9; }
.ux-gallery-gloss-list { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 0 0; margin: 0; }

/* --- PersonaSwitcher --- */
.ux-persona-switcher { display: flex; flex-wrap: wrap; gap: 8px; }
.ux-persona-option {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  min-height: 40px; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--border-bold); background: var(--surface);
  color: var(--text); cursor: pointer;
}
.ux-persona-option[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.ux-persona-title { font-weight: 600; font-size: 0.85rem; }
.ux-persona-tagline { font-size: 0.74rem; color: var(--text-secondary); }

/* Visible focus state for every interactive design-system control. */
.ux-next-action:focus-visible,
.ux-persona-option:focus-visible,
.ux-glossary-term:focus-visible,
.ux-technical-summary:focus-visible,
.ux-error-docs:focus-visible,
.ux-glossary-docs:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

@media (max-width: 640px) {
  .ux-persona-switcher, .ux-next-bar { flex-direction: column; }
  .ux-persona-option, .ux-next-action { width: 100%; }
  .ux-trust-map-rows { grid-template-columns: 1fr; }
  .ux-technical-fields { grid-template-columns: 1fr; }
}

/* Motion-reduced: the design system has no essential motion, but honor the
   preference for any transitions a host theme adds. */
@media (prefers-reduced-motion: reduce) {
  .ux-badge, .ux-next-action, .ux-persona-option, .ux-receipt-card { transition: none !important; }
}

/* ===================================================================== */
/* nextux-04 — Task Template Marketplace gallery (#/tasks)                 */
/* Trust is conveyed by glyph + text + border, never color alone.          */
/* ===================================================================== */

.tasks-view { max-width: 1100px; }
.tasks-body { display: flex; flex-direction: column; gap: 18px; }
.tasks-loading { color: var(--text-secondary); }
.tasks-error { border: 1px solid var(--alert); background: var(--alert-soft); color: var(--text); padding: 14px 16px; border-radius: 10px; }
.tasks-intro { color: var(--text-secondary); font-size: 0.9rem; max-width: 72ch; margin: 0; }

.tasks-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.tasks-filter-btn {
  min-height: 40px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-bold); background: var(--surface); color: var(--text); font-size: 0.82rem;
}
.tasks-filter-btn[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.tasks-filter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tasks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.task-card {
  border: 1px solid var(--border-bold); border-radius: 12px; background: var(--surface);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.task-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.task-card-title { margin: 0; font-size: 0.98rem; color: var(--text); }
.task-card-summary { margin: 0; color: var(--text-secondary); font-size: 0.85rem; }
.task-card-meta { display: grid; grid-template-columns: minmax(72px, auto) 1fr; gap: 2px 10px; margin: 4px 0 0; }
.task-meta-label { color: var(--text-secondary); font-size: 0.74rem; }
.task-meta-value { margin: 0; color: var(--text); font-size: 0.78rem; word-break: break-word; }
.task-card-run { display: block; font-family: var(--mono, monospace); font-size: 0.74rem; background: var(--bg); color: var(--text); padding: 4px 8px; border-radius: 6px; word-break: break-all; }
.task-card-warn { margin: 0; color: var(--warn); font-size: 0.78rem; }
.task-empty { color: var(--text-secondary); }

.task-trust {
  --trust-fg: var(--info);
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--trust-fg); background: color-mix(in srgb, var(--trust-fg) 14%, var(--surface));
  color: var(--text); font-size: 0.74rem; white-space: nowrap;
}
.task-trust-glyph { color: var(--trust-fg); font-weight: 700; }

@media (max-width: 640px) {
  .tasks-grid { grid-template-columns: 1fr; }
  .tasks-filter { flex-direction: row; }
}

/* ===================================================================== */
/* nextux-05 — Autopilot remediation (#/autopilot)                         */
/* Severity + fix-kind use glyph + text + border, never color alone.       */
/* ===================================================================== */

.autopilot-view { max-width: 1000px; }
.autopilot-body { display: flex; flex-direction: column; gap: 22px; }
.autopilot-loading { color: var(--text-secondary); }
.autopilot-error { border: 1px solid var(--alert); background: var(--alert-soft); color: var(--text); padding: 14px 16px; border-radius: 10px; }
.autopilot-view-body { display: flex; flex-direction: column; gap: 22px; }
.ap-section-title { margin: 0 0 8px; font-size: 1.02rem; color: var(--text); }
.ap-subtitle { margin: 10px 0 4px; font-size: 0.85rem; color: var(--text-secondary); }
.ap-posture-line, .ap-approval-note, .ap-approval-manual { color: var(--text-secondary); font-size: 0.88rem; max-width: 72ch; margin: 0; }

.ap-finding { border: 1px solid var(--border-bold); border-radius: 12px; background: var(--surface); padding: 12px 14px; margin-bottom: 10px; }
.ap-finding-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-finding-plain { color: var(--text); font-weight: 600; font-size: 0.9rem; }
.ap-fixes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ap-finding-summary { cursor: pointer; font-size: 0.82rem; color: var(--text-secondary); }
.ap-finding-impact { margin: 8px 0 4px; color: var(--text); font-size: 0.84rem; }
.ap-finding-technical { margin: 0; color: var(--text-secondary); font-size: 0.78rem; font-family: var(--mono, monospace); word-break: break-word; }
.ap-fix-list { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.ap-fix-summary { color: var(--text); font-size: 0.83rem; }
.ap-fix-note { color: var(--ok); font-size: 0.78rem; }
.ap-fix-command { display: block; font-family: var(--mono, monospace); font-size: 0.74rem; background: var(--bg); color: var(--text); padding: 3px 7px; border-radius: 6px; margin-top: 3px; word-break: break-all; }

.ap-sev, .ap-fix {
  --role-fg: var(--info);
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--role-fg); background: color-mix(in srgb, var(--role-fg) 14%, var(--surface));
  color: var(--text); font-size: 0.72rem; white-space: nowrap;
}
.ap-fix-glyph { color: var(--role-fg); font-weight: 700; }

.ap-receipt, .ap-posture, .ap-approval, .ap-findings { border-top: 1px solid var(--border); padding-top: 14px; }
.ap-receipt-summary { color: var(--text); font-size: 0.86rem; margin: 0 0 8px; }
.ap-diff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ap-diff-row { font-size: 0.8rem; }
.ap-diff-path { font-family: var(--mono, monospace); color: var(--text-secondary); }
.ap-diff-change { color: var(--text); }
.ap-manual { margin: 4px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: 0.8rem; }
.ap-hashes { display: grid; grid-template-columns: minmax(60px, auto) 1fr; gap: 2px 10px; margin: 10px 0 0; }
.ap-hashes dt { color: var(--text-secondary); font-size: 0.76rem; }
.ap-hashes dd { margin: 0; font-size: 0.74rem; color: var(--text); word-break: break-all; }
.ap-hashes dd.mono { font-family: var(--mono, monospace); }
.ap-approval-cmd { display: block; font-family: var(--mono, monospace); font-size: 0.78rem; background: var(--bg); color: var(--text); padding: 4px 8px; border-radius: 6px; margin: 6px 0; }
.ap-finding-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* nextux-06 — Intent Copilot Workbench (#/workbench) */
.workbench-view { max-width: 1000px; }
.workbench-body { display: flex; flex-direction: column; gap: 22px; }
.workbench-loading { color: var(--text-secondary); }
.workbench-error { border: 1px solid var(--alert); background: var(--alert-soft); color: var(--text); padding: 14px 16px; border-radius: 10px; }
.workbench-view-body { display: flex; flex-direction: column; gap: 22px; }
.wb-section-title { margin: 0 0 8px; font-size: 1.02rem; color: var(--text); }
.wb-subtitle { margin: 10px 0 4px; font-size: 0.85rem; color: var(--text-secondary); }
.wb-note, .wb-run-note { color: var(--text-secondary); font-size: 0.88rem; max-width: 72ch; margin: 0; overflow-wrap: anywhere; }
.wb-request, .wb-refusal-request { color: var(--text); font-size: 0.95rem; font-style: italic; max-width: 72ch; margin: 6px 0; overflow-wrap: anywhere; }
.wb-ask, .wb-candidates, .wb-selected, .wb-run, .wb-refusal { border-top: 1px solid var(--border); padding-top: 14px; }

.wb-candidate { border: 1px solid var(--border-bold); border-radius: 12px; background: var(--surface); padding: 12px 14px; margin-bottom: 10px; }
.wb-candidate[data-selected="true"] { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset; }
.wb-candidate-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-candidate-id { font-family: var(--mono, monospace); font-size: 0.82rem; color: var(--text); word-break: break-all; }
.wb-candidate-conf { margin-left: auto; font-size: 0.78rem; color: var(--text-secondary); }
.wb-selected-badge { font-size: 0.7rem; text-transform: uppercase; color: var(--ok); border: 1px solid var(--ok); border-radius: 999px; padding: 1px 8px; }
.wb-candidate-title { margin: 6px 0 2px; color: var(--text); font-size: 0.9rem; font-weight: 600; }
.wb-candidate-why { margin: 0; color: var(--text-secondary); font-size: 0.82rem; overflow-wrap: anywhere; }
.wb-candidate-missing { margin: 6px 0 0; color: var(--warn); font-size: 0.78rem; }

.wb-kind {
  --role-fg: var(--info);
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--role-fg); background: color-mix(in srgb, var(--role-fg) 14%, var(--surface));
  color: var(--text); font-size: 0.72rem; white-space: nowrap;
}
.wb-kind-glyph { color: var(--role-fg); font-weight: 700; }

.wb-selected-line { color: var(--text); font-size: 0.88rem; margin: 0 0 8px; word-break: break-word; }
.wb-selected-missing { color: var(--warn); font-size: 0.82rem; margin: 0 0 8px; }
.wb-safety-grid { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 2px 12px; margin: 6px 0 0; }
.wb-safety-grid dt { color: var(--text-secondary); font-size: 0.78rem; }
.wb-safety-grid dd { margin: 0; font-size: 0.78rem; color: var(--text); word-break: break-word; }
.wb-run-cmd { display: block; font-family: var(--mono, monospace); font-size: 0.76rem; background: var(--bg); color: var(--text); padding: 4px 8px; border-radius: 6px; margin: 6px 0; word-break: break-all; }

.wb-refusal-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wb-refusal-item { border: 1px solid var(--alert); border-radius: 10px; background: var(--alert-soft); padding: 10px 12px; }
.wb-refusal-reason { color: var(--text); font-size: 0.86rem; font-weight: 600; }
.wb-refusal-alt { margin: 6px 0 0; color: var(--text-secondary); font-size: 0.82rem; overflow-wrap: anywhere; }
.wb-honesty { font-size: 0.82rem; color: var(--text-secondary); margin: 6px 0 0; overflow-wrap: anywhere; }
.wb-honesty[data-ok="true"] { color: var(--ok); }
.wb-honesty[data-ok="false"] { color: var(--alert); }
</content>

/* ── nextux-07 Proof Inbox + Collaboration (#/proof-inbox) ──────────────── */
.inbox-collab-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 20px;
  align-items: start;
}
.inbox-queue { min-width: 0; }
.inbox-detail {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px 18px;
}
.inbox-subtitle { margin: 0 0 8px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.inbox-lane-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.inbox-lane-btn {
  border: 1px solid var(--border-bold);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 0.76rem;
  cursor: pointer;
}
.inbox-lane-btn.inbox-lane-active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.inbox-queue-list { display: flex; flex-direction: column; gap: 8px; }
.inbox-item-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-bold);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  cursor: pointer;
}
.inbox-item-card[data-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.inbox-item-head { display: flex; align-items: center; gap: 8px; }
.inbox-item-title { font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.inbox-item-meta { margin: 4px 0 0; font-size: 0.78rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.inbox-item-kind { margin: 2px 0 0; font-size: 0.72rem; color: var(--text-dim); }
.inbox-verif-badge {
  margin-left: auto;
  font-size: 0.7rem;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid var(--border-bold);
  color: var(--text);
  white-space: nowrap;
}
.inbox-verif-badge.inbox-verif-verified { border-color: var(--ok); color: var(--ok); }
.inbox-verif-badge.inbox-verif-failed { border-color: var(--red); color: var(--red); }
.inbox-verif-badge.inbox-verif-unverified,
.inbox-verif-badge.inbox-verif-pending { border-color: var(--warn); color: var(--warn); }
.inbox-detail-head { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px; }
.inbox-detail-title { margin: 0 0 4px; font-size: 1.1rem; }
.inbox-detail-meta { margin: 0; font-size: 0.78rem; color: var(--text-secondary); word-break: break-all; }
.inbox-detail-ask { margin: 6px 0 0; font-size: 0.84rem; color: var(--text); }
.inbox-verification-panel,
.inbox-trust-boundary,
.inbox-decisions,
.inbox-comments,
.inbox-decision-controls,
.inbox-shared-summary { margin-top: 16px; }
.inbox-verif-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.inbox-verif-grid dt { color: var(--text-secondary); font-size: 0.8rem; }
.inbox-verif-grid dd { margin: 0; font-size: 0.8rem; word-break: break-all; }
.inbox-verif-detail { margin: 8px 0 0; font-size: 0.82rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.inbox-trust-line { margin: 0; font-size: 0.84rem; color: var(--text); overflow-wrap: anywhere; }
.inbox-trust-line[data-trusts-node="false"] { color: var(--ok); }
.inbox-comment-list, .inbox-decision-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inbox-comment { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--border-bold); padding-left: 10px; }
.inbox-comment-author { font-size: 0.76rem; color: var(--text-secondary); }
.inbox-comment-body { font-size: 0.86rem; color: var(--text); overflow-wrap: anywhere; }
.inbox-decision { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.inbox-decision-type { font-weight: 600; font-size: 0.84rem; text-transform: uppercase; }
.inbox-decision-by { font-size: 0.78rem; color: var(--text-secondary); }
.inbox-decision-verify { margin-left: auto; font-size: 0.76rem; }
.inbox-decision-verify[data-ok="true"] { color: var(--ok); }
.inbox-decision-verify[data-ok="false"] { color: var(--red); }
.inbox-controls-note { margin: 0 0 8px; font-size: 0.84rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.inbox-controls-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.inbox-control-btn {
  border: 1px solid var(--border-bold);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.82rem;
  cursor: pointer;
}
.inbox-control-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.inbox-control-cmd, .inbox-summary-json {
  display: block;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--mono, monospace);
  font-size: 0.76rem;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.inbox-summary-note { margin: 0 0 8px; font-size: 0.82rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.inbox-empty { font-size: 0.84rem; color: var(--text-dim); }
.inbox-error { color: var(--red); }
@media (max-width: 768px) {
  .inbox-collab-layout { grid-template-columns: 1fr; }
}

/* ── nextux-08 Wallet & Identity Control Center (#/identity) ────────────── */
.identity-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.identity-wallet-card,
.identity-accumulate-card,
.identity-signature-queue,
.identity-sessions,
.identity-permissions,
.identity-history,
.identity-safety-center {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 16px;
  min-width: 0;
}
.identity-signature-queue,
.identity-sessions,
.identity-permissions,
.identity-history,
.identity-safety-center { margin-bottom: 16px; }
.identity-subtitle { margin: 0 0 8px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.identity-wallet-status { margin: 0 0 8px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.identity-wallet-card[data-connected="true"] .identity-wallet-status { color: var(--ok); }
.identity-wallet-card[data-connected="false"] .identity-wallet-status { color: var(--text-secondary); }
.identity-accumulate-line { margin: 0 0 8px; font-weight: 600; overflow-wrap: anywhere; }
.identity-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.identity-grid dt { color: var(--text-secondary); font-size: 0.8rem; }
.identity-grid dd { margin: 0; font-size: 0.8rem; word-break: break-all; }
.identity-hint { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-dim); overflow-wrap: anywhere; }
.identity-sig-request { border: 1px solid var(--border-bold); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.identity-sig-title { margin: 0 0 6px; font-weight: 600; overflow-wrap: anywhere; }
.identity-sig-headline { margin: 0 0 8px; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.identity-sig-error { margin: 0; color: var(--warn); overflow-wrap: anywhere; }
.identity-warning { margin: 6px 0 0; color: var(--warn); font-size: 0.82rem; overflow-wrap: anywhere; }
.identity-warning-list { margin: 0; padding-left: 18px; }
.identity-warning-list .identity-warning { color: var(--warn); }
.identity-safe { margin: 0; color: var(--ok); }
.identity-session { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.identity-session-id { font-size: 0.78rem; color: var(--text-secondary); }
.identity-session-plain { font-size: 0.84rem; color: var(--text); overflow-wrap: anywhere; flex: 1 1 200px; }
.identity-session-flag { font-size: 0.7rem; text-transform: uppercase; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 1px 8px; }
.identity-session-flag.identity-flag-danger { border-color: var(--red); color: var(--red); }
.identity-perm-list, .identity-history-list { margin: 0; padding-left: 18px; }
.identity-perm, .identity-history-item { font-size: 0.84rem; color: var(--text); overflow-wrap: anywhere; margin: 2px 0; }
.identity-error { color: var(--red); }
@media (max-width: 768px) {
  .identity-grid-layout { grid-template-columns: 1fr; }
}

/* ── nextux-10 Zero-Context Local Companion (#/companion) ───────────────── */
.companion-grid-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.companion-workspace-card,
.companion-services,
.companion-suggestions,
.companion-artifacts,
.companion-agent-context,
.companion-privacy {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 16px;
  min-width: 0;
}
.companion-suggestions, .companion-artifacts, .companion-agent-context, .companion-privacy { margin-bottom: 16px; }
.companion-subtitle { margin: 0 0 8px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.companion-resume { margin: 0 0 8px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.companion-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.companion-grid dt { color: var(--text-secondary); font-size: 0.8rem; }
.companion-grid dd { margin: 0; font-size: 0.8rem; word-break: break-all; }
.companion-source { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-dim); }
.companion-source[data-live="true"] { color: var(--ok); }
.companion-hint { color: var(--text-dim); font-size: 0.82rem; overflow-wrap: anywhere; }
.companion-empty { color: var(--text-dim); font-size: 0.84rem; }
.companion-artifact { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.companion-artifact-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.companion-artifact-path { font-size: 0.82rem; overflow-wrap: anywhere; flex: 1 1 200px; }
.companion-artifact-status { margin-left: auto; font-size: 0.72rem; border-radius: 999px; padding: 1px 9px; border: 1px solid var(--border-bold); color: var(--text-secondary); white-space: nowrap; }
.companion-artifact-status[data-status="verified"] { border-color: var(--ok); color: var(--ok); }
.companion-artifact-status[data-status="failed"] { border-color: var(--red); color: var(--red); }
.companion-artifact-status[data-status="unverified"] { border-color: var(--warn); color: var(--warn); }
.companion-artifact-meta { margin: 4px 0 0; font-size: 0.78rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.companion-suggestion { border: 1px solid var(--border-bold); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.companion-suggestion[data-approval="true"] { border-left: 3px solid var(--warn); }
.companion-suggestion-title { margin: 0 0 4px; font-weight: 600; }
.companion-suggestion-reason { margin: 0 0 6px; font-size: 0.84rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.companion-suggestion-cmd { display: block; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: 0.76rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.companion-suggestion-safety { margin: 6px 0 0; font-size: 0.78rem; color: var(--text-dim); }
.companion-suggestion[data-approval="true"] .companion-suggestion-safety { color: var(--warn); }
.companion-service-list, .companion-allowed-list, .companion-privacy-list { list-style: none; margin: 8px 0 0; padding: 0; }
.companion-service { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); }
.companion-service:first-child { border-top: 0; }
.companion-service-state { color: var(--text-secondary); font-size: 0.8rem; }
.companion-service[data-on="true"] .companion-service-state { color: var(--ok); }
.companion-allowed, .companion-privacy-cmd { font-size: 0.78rem; color: var(--text); padding: 2px 0; overflow-wrap: anywhere; }
.companion-error { color: var(--red); }
@media (max-width: 768px) {
  .companion-grid-layout { grid-template-columns: 1fr; }
}

/* ── nextux-11 Proof Quest Mode (#/quests) ─────────────────────────────── */
.quest-progress { margin-bottom: 16px; min-width: 0; }
.quest-progress-title { margin: 0 0 8px; font-size: 1rem; }
.quest-progress-bar { height: 8px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); overflow: hidden; }
.quest-progress-fill { height: 100%; background: var(--ok); }
.quest-source { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-dim); }
.quest-source[data-live="true"] { color: var(--ok); }
.quest-grid-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.quest-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.quest-trail, .quest-receipt, .quest-cinema, .quest-next {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 16px;
  min-width: 0;
}
.quest-subtitle { margin: 0 0 10px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.quest-card { border: 1px solid var(--border-bold); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; min-width: 0; }
.quest-card[data-state="completed"] { border-left: 3px solid var(--ok); }
.quest-card[data-state="locked"] { opacity: 0.7; border-left: 3px solid var(--border-bold); }
.quest-card[data-state="started"] { border-left: 3px solid var(--warn); }
.quest-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quest-card-mark { font-size: 0.9rem; }
.quest-card-title { margin: 0; font-size: 0.95rem; flex: 1 1 160px; }
.quest-card-time { margin-left: auto; font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }
.quest-card-promise { margin: 6px 0 4px; font-size: 0.86rem; color: var(--text); overflow-wrap: anywhere; }
.quest-card-meta { margin: 0; font-size: 0.76rem; color: var(--text-dim); }
.quest-card-lock { margin: 6px 0 0; font-size: 0.78rem; color: var(--warn); overflow-wrap: anywhere; }
.quest-mission-list { list-style: none; margin: 8px 0 0; padding: 0; }
.quest-mission { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); font-size: 0.82rem; }
.quest-mission:first-child { border-top: 0; }
.quest-mission-dot { color: var(--ok); }
.quest-mission[data-completed="false"] .quest-mission-dot { color: var(--text-dim); }
.quest-mission-title { flex: 1 1 auto; overflow-wrap: anywhere; }
.quest-mission-state { margin-left: auto; color: var(--text-secondary); white-space: nowrap; }
.quest-badge { display: inline-block; font-size: 0.78rem; border-radius: 999px; padding: 2px 10px; border: 1px solid var(--border-bold); color: var(--text-secondary); margin-bottom: 8px; }
.quest-badge[data-tone="positive"] { border-color: var(--ok); color: var(--ok); }
.quest-badge[data-tone="negative"] { border-color: var(--red); color: var(--red); }
.quest-receipt-grid, .quest-expert-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.quest-receipt-grid dt, .quest-expert-grid dt { color: var(--text-secondary); font-size: 0.8rem; }
.quest-receipt-grid dd, .quest-expert-grid dd { margin: 0; font-size: 0.8rem; word-break: break-all; }
.quest-receipt-honesty { margin: 8px 0 0; font-size: 0.78rem; color: var(--text-dim); overflow-wrap: anywhere; }
.quest-receipt-empty, .quest-next-done { color: var(--text-dim); font-size: 0.84rem; }
.quest-cinema-state { margin: 0 0 8px; font-size: 0.84rem; overflow-wrap: anywhere; }
.quest-cinema-link { font-size: 0.82rem; }
.quest-next-title { margin: 0 0 8px; font-weight: 600; }
.quest-next-btn { font: inherit; cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: var(--bg); border-radius: 8px; padding: 8px 14px; }
.quest-next-cmd { margin: 8px 0 0; font-size: 0.78rem; color: var(--text-dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.quest-why, .quest-expert { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 10px 16px; margin-bottom: 12px; }
.quest-why-summary, .quest-expert-summary { cursor: pointer; font-weight: 600; font-size: 0.86rem; }
.quest-why-body { margin: 8px 0 0; font-size: 0.86rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.quest-expert-body { margin-top: 8px; }
.quest-error { color: var(--red); }
@media (max-width: 768px) {
  .quest-grid-layout { grid-template-columns: 1fr; }
}

/* nextux-12 — Visual Workflow Studio (#/studio) */
.studio-banner { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); padding: 10px 14px; margin-bottom: 14px; min-width: 0; }
.studio-banner-tag { color: var(--accent); }
.studio-banner-text { color: var(--text-secondary); font-size: 0.88rem; }
.studio-source { margin: 6px 0 0; font-size: 0.78rem; color: var(--text-dim); }
.studio-grid-layout { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 320px); gap: 16px; align-items: start; }
.studio-subtitle { margin: 0 0 10px; font-size: 0.95rem; }
.studio-palette, .studio-graph, .studio-assurance, .studio-sim, .studio-export { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 14px; min-width: 0; }
.studio-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.studio-palette-group { margin-bottom: 12px; }
.studio-palette-group-title { margin: 0 0 6px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.studio-palette-item { border: 1px solid var(--border-bold); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; min-width: 0; }
.studio-palette-label { display: block; font-size: 0.84rem; font-weight: 600; }
.studio-palette-expert { display: block; font-size: 0.72rem; color: var(--text-dim); overflow-wrap: anywhere; }
.studio-graph-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.studio-node { border: 1px solid var(--border-bold); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.studio-node[data-kind="workflow_action"] { border-left: 3px solid var(--accent); }
.studio-node[data-kind="proof_verify"], .studio-node[data-kind="proof_export"] { border-left: 3px solid var(--ok); }
.studio-node[data-kind="approval"], .studio-node[data-kind="agent_approval"], .studio-node[data-kind="inbox_review"] { border-left: 3px solid var(--warn); }
.studio-node-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.studio-node-kind { font-weight: 600; font-size: 0.86rem; }
.studio-node-chip { font-size: 0.68rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; }
.studio-node-label { margin: 4px 0 0; font-size: 0.84rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.studio-node-detail { margin: 4px 0 0; font-size: 0.74rem; color: var(--text-dim); overflow-wrap: anywhere; }
.studio-edge { list-style: none; text-align: center; color: var(--text-dim); font-size: 0.9rem; }
.studio-edges { margin-top: 10px; }
.studio-edges-summary { cursor: pointer; font-size: 0.8rem; color: var(--text-dim); }
.studio-edges-list { margin: 6px 0 0; padding-left: 18px; }
.studio-edge-row { font-size: 0.76rem; overflow-wrap: anywhere; }
.studio-badge { display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--border-bold); background: var(--bg-alt); }
.studio-badge[data-tone="positive"] { border-color: var(--ok); }
.studio-badge[data-tone="negative"] { border-color: var(--red); color: var(--red); }
.studio-assurance-grid, .studio-expert-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0; font-size: 0.82rem; }
.studio-assurance-grid dt, .studio-expert-grid dt { color: var(--text-dim); }
.studio-assurance-honesty, .studio-trust-boundary { font-size: 0.8rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.studio-sim-path { font-size: 0.76rem; color: var(--text-dim); overflow-wrap: anywhere; white-space: normal; }
.studio-sim-title { margin: 10px 0 4px; font-size: 0.8rem; }
.studio-sim ul { margin: 0; padding-left: 18px; font-size: 0.8rem; }
.studio-export { margin-top: 16px; }
.studio-export-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.studio-export-chip { font: inherit; font-size: 0.78rem; cursor: pointer; border: 1px solid var(--border-bold); background: var(--bg-alt); color: var(--text); border-radius: 999px; padding: 4px 12px; }
.studio-export-chip[aria-selected="true"] { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.studio-export-safe { display: inline-block; font-size: 0.74rem; border: 1px solid var(--ok); border-radius: 999px; padding: 2px 10px; color: var(--text-secondary); }
.studio-export-safe[data-safe="false"] { border-color: var(--warn); }
.studio-export-verify, .studio-export-docs { margin: 6px 0 0; font-size: 0.76rem; color: var(--text-dim); overflow-wrap: anywhere; }
.studio-export-artifact { margin: 10px 0 0; max-height: 320px; overflow: auto; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 0.74rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.studio-why, .studio-expert { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 10px 16px; margin-top: 12px; }
.studio-why-summary, .studio-expert-summary { cursor: pointer; font-weight: 600; font-size: 0.86rem; }
.studio-why-body { margin: 8px 0 0; font-size: 0.86rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.studio-error { color: var(--red); }
@media (max-width: 980px) {
  .studio-grid-layout { grid-template-columns: 1fr; }
}

/* nextux-13 — Conversational Proof Tutor (#/tutor) */
.tutor-banner { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); padding: 10px 14px; margin-bottom: 14px; min-width: 0; }
.tutor-banner-tag { color: var(--accent); }
.tutor-banner-text { color: var(--text-secondary); font-size: 0.88rem; }
.tutor-source { margin: 6px 0 0; font-size: 0.78rem; color: var(--text-dim); }
.tutor-grid-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tutor-subtitle { margin: 0 0 10px; font-size: 0.95rem; }
.tutor-explanation, .tutor-lessons { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 14px; min-width: 0; }
.tutor-audience-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tutor-audience-chip { font: inherit; font-size: 0.78rem; cursor: pointer; border: 1px solid var(--border-bold); background: var(--bg-alt); color: var(--text); border-radius: 999px; padding: 4px 12px; }
.tutor-audience-chip[aria-selected="true"] { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.tutor-summary { font-size: 0.92rem; color: var(--text); margin: 0 0 10px; overflow-wrap: anywhere; }
.tutor-status-badge { display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--border-bold); background: var(--bg-alt); color: var(--text); margin-bottom: 10px; }
.tutor-status-badge[data-tone="positive"] { border-color: var(--ok); }
.tutor-status-badge[data-tone="caution"] { border-color: var(--warn); }
.tutor-status-badge[data-tone="negative"] { border-color: var(--red); color: var(--red); }
.tutor-claim-title { margin: 12px 0 4px; font-size: 0.82rem; }
.tutor-claim-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tutor-claim { display: flex; gap: 8px; font-size: 0.84rem; color: var(--text-secondary); }
.tutor-claim-mark { color: var(--text-dim); }
.tutor-can .tutor-claim-mark { color: var(--ok); }
.tutor-cannot .tutor-claim-mark { color: var(--warn); }
.tutor-claim-text { overflow-wrap: anywhere; }
.tutor-lesson { border: 1px solid var(--border-bold); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; min-width: 0; }
.tutor-lesson-title { margin: 0 0 6px; font-size: 0.88rem; }
.tutor-lesson-body { margin: 0 0 6px; font-size: 0.82rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.tutor-lesson-example { margin: 0 0 6px; font-size: 0.78rem; color: var(--text-dim); overflow-wrap: anywhere; }
.tutor-lesson-tryit { margin: 0 0 6px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 0.74rem; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.tutor-quiz-summary { cursor: pointer; font-size: 0.8rem; color: var(--text-secondary); }
.tutor-quiz-choices { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.tutor-quiz-choice { list-style: decimal; }
.tutor-quiz-btn { font: inherit; font-size: 0.8rem; cursor: pointer; border: 1px solid var(--border-bold); background: var(--bg-alt); color: var(--text); border-radius: 8px; padding: 4px 10px; text-align: left; }
.tutor-quiz-feedback { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.tutor-quiz-feedback[data-correct="true"] { color: var(--ok); }
.tutor-quiz-feedback[data-correct="false"] { color: var(--warn); }
.tutor-why, .tutor-expert { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 10px 16px; margin-top: 12px; }
.tutor-why-summary, .tutor-expert-summary { cursor: pointer; font-weight: 600; font-size: 0.86rem; }
.tutor-why-body { margin: 8px 0 0; font-size: 0.86rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.tutor-expert-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0; font-size: 0.82rem; }
.tutor-expert-grid dt { color: var(--text-dim); }
.tutor-error { color: var(--red); }
@media (max-width: 980px) {
  .tutor-grid-layout { grid-template-columns: 1fr; }
}

/* nextux-14 — Multiplayer Demo Rooms (#/rooms) */
.room-launcher { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px 16px; }
.room-launcher-hint { color: var(--text-secondary); font-size: 0.88rem; margin: 4px 0 10px; }
.room-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.room-list-item { border: 1px solid var(--border-bold); border-radius: 10px; padding: 8px 12px; }
.room-list-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.room-list-meta { color: var(--text-dim); font-size: 0.78rem; }
.room-state { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--surface); padding: 12px 16px; margin-bottom: 14px; min-width: 0; }
.room-state-label { margin: 0 0 4px; font-size: 1.25rem; color: var(--text); }
.room-state-meta { margin: 0; font-size: 0.8rem; color: var(--text-dim); }
.room-promise { margin: 8px 0 0; font-size: 0.88rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.room-grid-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.room-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.room-subtitle { margin: 0 0 10px; font-size: 0.95rem; }
.room-participants, .room-approvals, .room-roles, .room-replay, .room-proof, .room-chat, .room-trust { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 14px; min-width: 0; }
.room-participant-list, .room-approval-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.room-participant { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: 1px solid var(--border-bold); border-radius: 8px; padding: 6px 10px; }
.room-participant-name { font-weight: 600; font-size: 0.86rem; }
.room-participant-role { font-size: 0.78rem; color: var(--text-secondary); }
.room-participant-agent { font-size: 0.7rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.room-participant-approve { font-size: 0.72rem; color: var(--text-dim); margin-left: auto; }
.room-participant-approve[data-can-approve="true"] { color: var(--ok); }
.room-approval { display: flex; gap: 8px; align-items: center; font-size: 0.84rem; color: var(--text-secondary); }
.room-approval[data-satisfied="true"] .room-approval-mark { color: var(--ok); }
.room-approval-mark { color: var(--text-dim); }
.room-role-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.room-role-table th, .room-role-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.room-role-table th { color: var(--text-dim); font-weight: 600; }
.room-role-cap[data-yes="true"] { color: var(--ok); }
.room-role-cap[data-yes="false"] { color: var(--text-dim); }
.room-replay-bound { display: inline-block; font-size: 0.74rem; border: 1px solid var(--border-bold); border-radius: 999px; padding: 2px 10px; color: var(--text-secondary); margin-bottom: 8px; }
.room-replay-bound[data-bound="true"] { border-color: var(--ok); color: var(--ok); }
.room-replay-binding, .room-replay-cinema { margin: 2px 0; font-size: 0.74rem; color: var(--text-dim); overflow-wrap: anywhere; }
.room-event-log { margin: 8px 0 0; padding-left: 18px; font-size: 0.78rem; color: var(--text-secondary); display: flex; flex-direction: column; gap: 2px; }
.room-event { list-style: decimal; }
.room-event-actor { font-weight: 600; }
.room-event-role { color: var(--text-dim); margin: 0 6px; }
.room-proof-badge { display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--border-bold); background: var(--bg-alt); color: var(--text); margin-bottom: 8px; }
.room-proof-badge[data-verified="true"] { border-color: var(--ok); }
.room-proof-grid, .room-expert-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0; font-size: 0.82rem; }
.room-proof-grid dt, .room-expert-grid dt { color: var(--text-dim); }
.room-proof-note { font-size: 0.8rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.room-chat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.room-chat-msg { font-size: 0.82rem; }
.room-chat-author { font-weight: 600; margin-right: 6px; }
.room-chat-body { color: var(--text-secondary); overflow-wrap: anywhere; }
.room-chat-empty { color: var(--text-dim); font-size: 0.82rem; }
.room-trust { border-left: 3px solid var(--accent); }
.room-trust-body { margin: 0; font-size: 0.84rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.room-why, .room-expert { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 10px 16px; margin-top: 12px; }
.room-why-summary, .room-expert-summary { cursor: pointer; font-weight: 600; font-size: 0.86rem; }
.room-why-body { margin: 8px 0 0; font-size: 0.86rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.room-error { color: var(--red); }
@media (max-width: 980px) {
  .room-grid-layout { grid-template-columns: 1fr; }
}

/* nextux-15 — Migration & Comparison Lab (#/compare) */
.compare-banner { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); padding: 10px 14px; margin-bottom: 14px; min-width: 0; }
.compare-banner-tag { color: var(--accent); }
.compare-banner-text { color: var(--text-secondary); font-size: 0.88rem; }
.compare-source { margin: 6px 0 0; font-size: 0.78rem; color: var(--text-dim); }
.compare-report-header { margin-bottom: 12px; }
.compare-report-title { margin: 0 0 4px; font-size: 1.1rem; }
.compare-report-impl { margin: 0; font-size: 0.86rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.compare-grid-layout { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: start; }
.compare-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.compare-subtitle { margin: 0 0 8px; font-size: 0.95rem; }
.compare-picker, .compare-trust, .compare-ux, .compare-proof, .compare-cost, .compare-migration, .compare-claims { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 14px; min-width: 0; }
.compare-pattern-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.compare-pattern { font-size: 0.8rem; border: 1px solid var(--border-bold); border-radius: 8px; padding: 6px 8px; overflow-wrap: anywhere; }
.compare-pattern-id { font-weight: 600; }
.compare-pattern-arrow { color: var(--text-dim); }
.compare-pattern-equiv { color: var(--accent); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.compare-table th, .compare-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; overflow-wrap: anywhere; }
.compare-table th { color: var(--text-dim); font-weight: 600; }
.compare-aspect { font-weight: 600; color: var(--text); width: 22%; }
.compare-inf { color: var(--text); }
.compare-cost-card { border: 1px solid var(--border-bold); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.compare-cost-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.compare-cost-label { font-weight: 600; font-size: 0.84rem; }
.compare-cost-basis { font-size: 0.72rem; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--text-dim); }
.compare-cost-basis[data-basis="measured"], .compare-cost-basis[data-basis="published"] { border-color: var(--ok); color: var(--ok); }
.compare-cost-line { margin: 4px 0 0; font-size: 0.8rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.compare-cost-disclaimer { margin: 4px 0 0; font-size: 0.74rem; color: var(--text-dim); overflow-wrap: anywhere; }
.compare-migration-list { margin: 0; padding-left: 18px; font-size: 0.82rem; color: var(--text-secondary); display: flex; flex-direction: column; gap: 4px; }
.compare-migration-title { font-weight: 600; color: var(--text); }
.compare-migration-action { margin-left: 6px; font-size: 0.72rem; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--accent); }
.compare-claim-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.compare-claim { font-size: 0.82rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.compare-claim-tag { font-size: 0.72rem; border: 1px solid var(--border-bold); border-radius: 6px; padding: 1px 6px; color: var(--text-dim); }
.compare-claim[data-external="false"] .compare-claim-tag { border-color: var(--ok); color: var(--ok); }
.compare-why, .compare-expert { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 10px 16px; margin-top: 12px; }
.compare-why-summary, .compare-expert-summary { cursor: pointer; font-weight: 600; font-size: 0.86rem; }
.compare-why-body { margin: 8px 0 0; font-size: 0.86rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.compare-expert-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0; font-size: 0.82rem; }
.compare-expert-grid dt { color: var(--text-dim); }
.compare-trust-model { margin: 6px 0 0; padding-left: 18px; font-size: 0.82rem; color: var(--text-secondary); }
.compare-error { color: var(--red); }
@media (max-width: 980px) {
  .compare-grid-layout { grid-template-columns: 1fr; }
}

/* nextux-16 — Prompt-to-Proof App Studio (#/app). All colors come from theme
   vars so contrast holds in both themes; overflow-wrap keeps long prompts,
   commands, and share links from overflowing on narrow viewports. */
.app-body { min-width: 0; }
.app-banner { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); padding: 10px 14px; margin-bottom: 14px; min-width: 0; }
.app-banner-tag { color: var(--accent); font-weight: 600; }
.app-banner-text { color: var(--text-secondary); font-size: 0.88rem; }
.app-source { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-dim); }
.app-grid-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.app-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.app-prompt, .app-workflow, .app-assurance, .app-artifacts, .app-next, .app-why { border: 1px solid var(--border-bold); border-radius: 12px; background: var(--surface); padding: 12px 14px; min-width: 0; }
.app-subtitle { margin: 0 0 8px; font-size: 0.95rem; color: var(--text); }
.app-prompt-text { margin: 0; padding: 8px 12px; border-left: 3px solid var(--accent); color: var(--text); font-style: italic; overflow-wrap: anywhere; }
.app-pattern { margin: 8px 0 0; font-size: 0.82rem; color: var(--text-secondary); }
.app-pattern-id { color: var(--accent); }
.app-step-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.app-step { font-size: 0.84rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.app-step-kind { font-size: 0.7rem; border: 1px solid var(--border-bold); border-radius: 6px; padding: 1px 6px; margin-right: 6px; color: var(--text-dim); }
.app-step-label { color: var(--text); }
.app-assurance-label { margin: 0 0 8px; font-size: 0.86rem; color: var(--text); overflow-wrap: anywhere; }
.app-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.app-badge { font-size: 0.74rem; border: 1px solid var(--border-bold); border-radius: 6px; padding: 1px 8px; color: var(--text-dim); }
.app-badge[data-ok="true"] { border-color: var(--ok); color: var(--ok); }
.app-deferred { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.app-deferred-tag { color: var(--text-secondary); font-size: 0.8rem; }
.app-deferred-list { margin: 6px 0 0; padding-left: 18px; font-size: 0.8rem; color: var(--text-dim); overflow-wrap: anywhere; }
.app-artifact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.app-artifact { font-size: 0.82rem; display: flex; gap: 8px; overflow-wrap: anywhere; }
.app-artifact-format { color: var(--accent); min-width: 84px; }
.app-artifact-file { color: var(--text-secondary); overflow-wrap: anywhere; }
.app-share { margin: 10px 0 0; font-size: 0.8rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.app-share-link { color: var(--accent); }
.app-next-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.app-next-item { font-size: 0.82rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.app-next-command { color: var(--accent); }
.app-why-text { margin: 0; font-size: 0.86rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.app-error { color: var(--red); }
@media (max-width: 980px) {
  .app-grid-layout { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   plan-12 — Public Launch Trust Narrative: #/launch, #/trust-center, #/receipt.
   Contrast-safe by construction (documented variable combos), responsive, with
   accessible copy buttons and example chips.
   --------------------------------------------------------------------------- */

/* Screen-reader-only utility (used by the copy button's aria-live region). */
.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;
}

/* Copy-to-clipboard command block. */
.copy-command { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; min-width: 0; }
.copy-command-text { flex: 1 1 auto; min-width: 0; font-size: 0.82rem; color: var(--accent); background: var(--bg-alt); border: 1px solid var(--border-bold); border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; }
.copy-btn { flex: 0 0 auto; font-size: 0.76rem; font-weight: 600; color: var(--bg); background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 5px 12px; cursor: pointer; }
.copy-btn:hover { background: var(--accent-soft); color: var(--text); border-color: var(--border-strong); }
.copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Shared section card look. */
.launch-section, .launch-claim-boundary, .launch-noclaims, .trust-section, .trust-noclaims, .trust-mainnet,
.receipt-summary, .receipt-verified, .receipt-notverified, .receipt-status, .receipt-actions, .launch-hero, .launch-preview {
  border: 1px solid var(--border-bold); border-radius: 12px; background: var(--surface); padding: 14px 16px; min-width: 0;
}
.launch-body, .trust-center-body, .receipt-body { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* Banners + source lines. */
.launch-banner, .trust-banner { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); padding: 10px 14px; min-width: 0; }
.launch-banner-tag, .trust-banner-tag { color: var(--accent); font-weight: 600; }
.launch-banner-text, .trust-banner-text { color: var(--text-secondary); font-size: 0.88rem; }
.launch-source, .trust-source, .receipt-source { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-dim); }
.launch-loading, .trust-loading, .receipt-loading { color: var(--text-secondary); }
.launch-error, .trust-error, .receipt-error { color: var(--red); }

/* Hero. */
.launch-headline { margin: 0 0 6px; font-size: 1.5rem; color: var(--text); }
.launch-subhead { margin: 0 0 14px; font-size: 0.95rem; color: var(--text-secondary); }
.launch-prompt-field { display: flex; flex-direction: column; gap: 6px; }
.launch-prompt-label { font-size: 0.82rem; color: var(--text-secondary); }
.launch-prompt-input { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 0.9rem; color: var(--text); background: var(--bg-alt); border: 1px solid var(--border-bold); border-radius: 10px; padding: 10px 12px; }
.launch-prompt-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.launch-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.launch-example-chip { text-align: left; font: inherit; font-size: 0.8rem; color: var(--text); background: var(--surface-alt); border: 1px solid var(--border-bold); border-radius: 999px; padding: 6px 12px; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.launch-example-chip:hover { border-color: var(--accent); color: var(--accent); }
.launch-example-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.launch-primary { margin: 10px 0 0; }
.launch-primary-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.launch-primary-label { color: var(--text); font-size: 0.95rem; }
.launch-primary-why { color: var(--text-secondary); font-size: 0.82rem; }
.launch-previews { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.launch-preview-title { margin: 0 0 8px; font-size: 0.9rem; color: var(--text); }
.launch-preview-empty { color: var(--text-dim); font-size: 0.84rem; }
.launch-receipt-label { margin: 0 0 8px; font-size: 0.84rem; color: var(--text); overflow-wrap: anywhere; }
.launch-preview-link, .launch-trust-link { display: inline-block; margin-top: 10px; font-size: 0.84rem; color: var(--accent); }
.launch-cinema-frames { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.launch-cinema-frame { font-size: 0.82rem; color: var(--text-secondary); }
.launch-cinema-note { margin: 8px 0 0; font-size: 0.78rem; color: var(--text-dim); }

/* Shared badges (launch + receipt). */
.launch-badges, .receipt-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.launch-badge, .receipt-badge { font-size: 0.74rem; border: 1px solid var(--border-bold); border-radius: 6px; padding: 1px 8px; color: var(--text-dim); }
.launch-badge[data-ok="true"], .receipt-badge[data-ok="true"] { border-color: var(--ok); color: var(--ok); }

/* Below-fold sections. */
.launch-sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.launch-section-title, .trust-section-title { margin: 0 0 6px; font-size: 1rem; color: var(--text); }
.launch-section-body { margin: 0; font-size: 0.86rem; color: var(--text-secondary); }
.launch-section-points { margin: 8px 0 0; padding-left: 18px; font-size: 0.82rem; color: var(--text-dim); display: flex; flex-direction: column; gap: 4px; }
.launch-section-points li { overflow-wrap: anywhere; }

/* Claim boundary. */
.launch-boundary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.launch-boundary-cell { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.launch-boundary-key { color: var(--accent); display: block; margin-bottom: 4px; }
.launch-boundary-cell p { margin: 0; font-size: 0.84rem; color: var(--text-secondary); }

/* What we do not claim. */
.launch-noclaims-intro { margin: 0 0 10px; font-size: 0.86rem; color: var(--text-secondary); }
.launch-noclaims-list, .trust-noclaims-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.launch-noclaim, .trust-noclaim { border-left: 3px solid var(--warn); padding: 4px 0 4px 12px; }
.launch-noclaim-title, .trust-noclaim-title { color: var(--text); font-size: 0.9rem; }
.launch-noclaim-honest, .trust-noclaim-honest { margin: 4px 0 0; font-size: 0.82rem; color: var(--text-secondary); }
.launch-noclaim-why { margin: 4px 0 0; font-size: 0.78rem; color: var(--text-dim); }
.trust-noclaim-donot { margin: 4px 0 0; font-size: 0.8rem; color: var(--warn); }

/* Trust center. */
.trust-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.8rem; color: var(--text-secondary); }
.trust-meta-commit { color: var(--accent); }
.trust-sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.trust-section-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; }
.trust-section-status { font-size: 0.74rem; color: var(--text-dim); border: 1px solid var(--border-bold); border-radius: 6px; padding: 1px 8px; }
.trust-section-detail { margin: 8px 0 0; font-size: 0.84rem; color: var(--text-secondary); }
.trust-section-link { margin: 8px 0 0; font-size: 0.78rem; color: var(--text-dim); overflow-wrap: anywhere; }
.trust-mainnet-text { margin: 0; font-size: 0.86rem; color: var(--text-secondary); }

/* Receipt. */
.receipt-h2 { margin: 0 0 6px; font-size: 1.3rem; color: var(--text); }
.receipt-h3 { margin: 0 0 8px; font-size: 1rem; color: var(--text); }
.receipt-plain { margin: 0 0 10px; font-size: 0.92rem; color: var(--text-secondary); }
.receipt-assurance-label { margin: 0 0 8px; font-size: 0.86rem; color: var(--text); overflow-wrap: anywhere; }
.receipt-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.receipt-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.receipt-list-item { font-size: 0.83rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.receipt-list-item[data-ok="false"] { color: var(--warn); }
.receipt-status-grid { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
.receipt-status-grid dt { color: var(--text-dim); font-size: 0.8rem; }
.receipt-status-grid dd { margin: 0; color: var(--text-secondary); font-size: 0.83rem; overflow-wrap: anywhere; }
.receipt-action-note { margin: 0 0 8px; font-size: 0.83rem; color: var(--text-secondary); }
.receipt-action-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 12px 0; }
.receipt-action-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.receipt-action-title { color: var(--text); display: block; margin-bottom: 4px; }
.receipt-action-sub { margin: 6px 0 0; font-size: 0.78rem; color: var(--text-dim); }

@media (max-width: 980px) {
  .launch-previews, .launch-sections, .launch-boundary-grid, .trust-sections, .receipt-columns, .receipt-action-grid {
    grid-template-columns: 1fr;
  }
}