@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   LAYER 0 — TOKENS
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Surface (DESIGN.md §Theme Dark) ── */
  --bg: #000;
  --fg: #f5f5f7;
  --fg-secondary: #b0b0b5;
  --dim: #a1a1a6;
  --card: #1c1c1e;
  --border: rgba(255, 255, 255, 0.16);
  --glow: #00ff88;
  --panel: rgba(28, 28, 30, 0.95);
  --glass-subtle: rgba(255, 255, 255, 0.03);
  --glass: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-hover: rgba(255, 255, 255, 0.12);
  --glass-strong: rgba(255, 255, 255, 0.18);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
  --scrim: rgba(0, 0, 0, 0.8);
  /* ── Accent (override per scope via CANON.json) ── */
  --accent: #3b82f6;
  --accent-rgb: 59, 130, 246;
  /* ── Category Palette (DESIGN.md §Color System) ── */
  --kernel: #ff0088;
  --runtime: #00ff88;
  --operations: #2997ff;
  --commerce: #ff9f0a;
  --knowledge: #bf5af2;
  --governance: #ffd60a;
  --services: #ec4899;
  /* ── Category RGB (for rgba(var(--X-rgb), alpha) usage) ── */
  --kernel-rgb: 255, 0, 136;
  --runtime-rgb: 0, 255, 136;
  --operations-rgb: 41, 151, 255;
  --commerce-rgb: 255, 159, 10;
  --knowledge-rgb: 191, 90, 242;
  --governance-rgb: 255, 214, 10;
  --services-rgb: 236, 72, 153;
  --dim-rgb: 161, 161, 166;
  --red-rgb: 255, 69, 58;
  /* ── Fleet aliases (composable from categories) ── */
  --green: var(--runtime);
  --blue: var(--operations);
  --purple: var(--knowledge);
  --pink: var(--services);
  --gold: var(--commerce);
  --red: #ff453a;
  --cyan: var(--operations);
  --blue-light: #60a5fa;
  --pink-light: #f472b6;
  /* ── Status colors ── */
  --success: #22c55e;
  --success-rgb: 34, 197, 94;
  --error: #ff453a;
  --error-rgb: 255, 69, 58;
  --warning: #f59e0b;
  --warning-rgb: 245, 158, 11;
  /* ── Transaction colors (FLEET + POST ledgers) ── */
  --tx-mint: #059669;
  --tx-mint-rgb: 5, 150, 105;
  --tx-work: #2563eb;
  --tx-work-rgb: 37, 99, 235;
  --tx-transfer: #d97706;
  --tx-transfer-rgb: 217, 119, 6;
  --tx-spend: #dc2626;
  --tx-spend-rgb: 220, 38, 38;
  --tx-donation: #7c3aed;
  --tx-donation-rgb: 124, 58, 237;
  /* ── Typography (DESIGN.md §Typography) ── */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  --font-2xs: 10px;
  --font-xs: 11px;
  --font-sm: 13px;
  --font-base: 15px;
  --font-lg: 18px;
  --font-xl: 24px;
  --font-2xl: clamp(28px, 4vw, 48px);
  --font-3xl: clamp(40px, 6vw, 72px);
  --font-hero: clamp(48px, 7vw, 80px);
  /* ── Spacing ── */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-xs-sm: 12px;
  --space-sm: 16px;
  --space-sm-md: 20px;
  --space-md: 24px;
  --space-md-lg: 32px;
  --space-lg: 48px;
  --space-xl: 80px;
  /* ── Radius ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;
  /* ── Motion (DESIGN.md §Animation Tokens) ── */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.15s var(--spring);
  --transition-base: all 0.2s var(--spring);
  --transition-slow: all 0.3s var(--spring);
  /* ── Glass (DESIGN.md §Glass Morphism Rules) ── */
  --blur-panel: blur(20px);
  --blur-dock: blur(30px);
  --blur-overlay: blur(40px);
  /* ── Z-index scale ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-nav: 1000;
  --z-modal: 2000;
  --z-overlay: 3000;
  --z-toast: 4000;
  /* ── Focus ── */
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
  /* ── Header geometry (ONE bar — NAV primitive + sub-row) ── */
  --nav-h: 44px;
  --nav-sub-h: 24px;
  --header-offset: calc(var(--nav-h) + var(--nav-sub-h));
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 1 — RESET + BASE
   ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Fixed nav: ensure in-page anchors never land under the header. */
  scroll-padding-top: calc(var(--header-offset) + 18px);
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

h1 {
  font-size: var(--font-3xl);
}

h2 {
  font-size: var(--font-2xl);
}

h3 {
  font-size: clamp(20px, 2.5vw, 32px);
}

h4 {
  font-size: clamp(16px, 2vw, 24px);
}

h5 {
  font-size: clamp(13px, 1.5vw, 18px);
}

h6 {
  font-size: clamp(11px, 1.2vw, 16px);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: all var(--transition-base);
}

a:hover {
  opacity: 0.8;
}

/* Global focus ring — every interactive element (WCAG 2.4.7)
   box-shadow for visual ring, transparent outline for Windows High Contrast Mode */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* Screen-reader only — visually hidden, accessible to assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — visible on focus (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: calc(var(--z-modal, 9000) + 1);
  padding: var(--space-xs) var(--space-md);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.skip-link:focus {
  top: var(--space-sm);
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

code, pre {
  font-family: var(--mono);
  font-size: var(--font-sm);
}

pre {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  overflow-x: auto;
}

code {
  background: var(--card);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

pre code {
  background: none;
  padding: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: var(--space-xs-sm) 0;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-sm);
}

th {
  font-size: var(--font-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  font-weight: 500;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-md-lg) 0;
}

img {
  max-width: 100%;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 2 — LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
/* Container */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-lg) 120px;
}

.container-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Hero (offset for nav) */
.hero {
  padding: calc(var(--header-offset) + 56px) var(--space-md) var(--space-xl);
  text-align: center;
}

.hero h1 {
  margin-bottom: var(--space-sm);
  background: linear-gradient(180deg, var(--fg) 40%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: var(--font-hero);
  letter-spacing: -0.04em;
  line-height: 1;
}

.hero .subtitle {
  color: var(--dim);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.hero .description {
  color: var(--dim);
  font-size: 17px;
  line-height: 1.7;
  margin-top: var(--space-sm);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  padding: var(--space-xs) var(--space-sm-md);
  border-radius: var(--radius-pill);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--space-md);
  letter-spacing: 0.02em;
}

.hero-cta {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

/* Hero with cover art */
.hero-cover {
  text-align: left;
}

.hero-cover-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  max-width: 960px;
  margin: 0 auto;
}

.hero-cover-image {
  flex: 0 0 240px;
}
.hero-cover-image img {
  width: 240px;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow), 0 0 0 1px var(--glass-border);
}

.hero-cover-text {
  flex: 1;
  min-width: 0;
}

@media (max-width: 640px) {
  .hero-cover-inner {
    flex-direction: column;
    text-align: center;
  }
  .hero-cover-image {
    flex: none;
  }
  .hero-cover-image img {
    width: 180px;
  }
}
/* Section — open canvas, generous breathing
   Apple-finish scopes override via --section-* tokens in _THEMES.scss.
   All other scopes get glass-card defaults via var() fallbacks. */
section {
  background: var(--section-bg, linear-gradient(180deg, var(--glass-subtle) 0%, transparent 100%));
  border: var(--section-border, 1px solid var(--glass-border));
  border-radius: var(--section-radius, var(--radius-xl));
  padding: var(--section-padding, var(--space-xl) var(--space-lg));
  margin-bottom: var(--section-margin, var(--space-md));
  border-bottom: var(--section-divider, none);
}

/* Alternating section contrast — accent tint on even sections */
section:nth-child(even) {
  background: var(--section-bg-alt, linear-gradient(180deg, rgba(var(--accent-rgb), 0.04) 0%, transparent 100%));
}

section h2 {
  font-size: var(--h2-size, clamp(24px, 3.5vw, 40px));
  text-transform: var(--h2-transform, uppercase);
  letter-spacing: var(--h2-tracking, 0.08em);
  color: var(--fg);
  margin-bottom: var(--space-xs-sm);
  text-align: center;
  line-height: 1.1;
}

section h2 + p,
section > p:first-of-type {
  text-align: center;
  color: var(--dim);
  font-size: var(--font-base);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto var(--space-lg);
}

/* Narrative section — full-width, no card */
.section-narrative {
  background: transparent;
  border: none;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.section-narrative h2 {
  font-size: clamp(24px, 3vw, 36px);
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.3;
  margin-bottom: var(--space-sm-md);
}

.section-narrative p {
  font-size: 17px;
  color: var(--dim);
  line-height: 1.8;
}

/* Header / Footer */
header:not(.nav) {
  margin-bottom: var(--space-xl);
  text-align: center;
}

footer {
  text-align: center;
  color: var(--dim);
  font-size: var(--font-sm);
  margin-top: var(--space-xl);
  padding: var(--space-md-lg);
  border-top: 1px solid var(--glass-subtle);
}

footer a {
  color: var(--accent);
  opacity: 0.8;
}

footer a:hover {
  opacity: 1;
}

/* Grid (merged from _GRID.scss) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-sm-md);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm-md);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm-md);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm-md);
}

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm-md);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

/* LAYER 2.5 — GOVERNED FLEET NAV POLISH */
.nav-links a.nav-flagship {
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-xs-sm);
  font-size: var(--font-xs);
  letter-spacing: 0.04em;
}

#hero,
section[id],
.container > div[id],
.container > section[id] {
  scroll-margin-top: calc(var(--header-offset) + 18px);
}

/* ── Layer: Dashboard (VAULT financial surfaces) ──────────────── */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md-lg);
}

.dashboard-wide {
  grid-column: 1/-1;
}

.dashboard-widget {
  background: var(--glass-subtle);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  min-height: 180px;
  transition: var(--transition-base);
}

.dashboard-widget:hover {
  border-color: rgba(var(--accent-rgb), 0.24);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

/* Metric Cards (E*Trade / Webull style) */
.metric-card {
  padding: var(--space-xs) 0;
}

.metric-label {
  font-size: var(--font-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.metric-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--fg);
  margin-top: var(--space-2xs);
  font-feature-settings: "tnum";
  line-height: 1.1;
}

.metric-change {
  font-size: var(--font-sm);
  font-weight: 600;
  margin-top: var(--space-2xs);
  font-family: var(--mono);
}

/* Chart containers */
.dashboard-chart {
  margin-top: var(--space-xs-sm);
}

.dashboard-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Compact table inside dashboard widget */
.dashboard-widget .comp-table {
  font-size: var(--font-sm);
  margin-top: var(--space-xs);
}

.dashboard-widget .comp-table th {
  font-size: var(--font-2xs);
  letter-spacing: 0.08em;
}

/* Responsive: stack to single column on mobile */
@media (max-width: 640px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
  .metric-value {
    font-size: 26px;
  }
  .dashboard-widget {
    padding: 18px;
    min-height: 140px;
  }
}
/* Light theme adjustments */
[data-theme=light] .dashboard-widget {
  background: var(--glass-subtle);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-sm);
}

[data-theme=light] .dashboard-widget:hover {
  border-color: rgba(var(--accent-rgb), 0.32);
  box-shadow: var(--shadow-sm);
}

/* ── Layer: Wallet Hero (Coinbase / PayPal style) ────────────── */
.wallet-hero {
  text-align: center;
  padding: var(--space-md-lg) var(--space-sm);
}

.wallet-balance-label {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-bottom: var(--space-2xs);
}

.wallet-balance-value {
  font-size: 52px;
  font-weight: 800;
  margin: var(--space-xs) 0 var(--space-md);
  font-feature-settings: "tnum";
  line-height: 1.1;
  color: var(--fg);
}

.wallet-currency {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--dim);
  vertical-align: middle;
}

.wallet-actions {
  display: flex;
  gap: var(--space-xs-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.wallet-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs-sm) var(--space-md);
  border: 1px solid var(--glass-strong);
  border-radius: var(--radius);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  transition: var(--transition-base);
  cursor: pointer;
  background: transparent;
  min-width: 88px;
}

.wallet-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.wallet-action-btn:active {
  transform: translateY(0);
}

.wallet-action-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 700;
}

.wallet-action-primary:hover {
  opacity: 0.88;
  color: var(--bg);
}

[data-theme=light] .wallet-action-btn {
  border-color: var(--glass-strong);
}

[data-theme=light] .wallet-action-btn:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.04);
}

[data-theme=light] .wallet-action-primary {
  color: var(--bg);
}

[data-theme=light] .wallet-action-primary:hover {
  color: var(--bg);
}

/* ── Layer: Transaction List ─────────────────────────────────── */
.tx-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tx-row {
  display: grid;
  grid-template-columns: 72px auto 1fr auto;
  gap: var(--space-xs-sm);
  align-items: center;
  padding: var(--space-xs-sm) 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: var(--font-sm);
  transition: background var(--transition-fast);
}

.tx-row:hover {
  background: rgba(var(--accent-rgb), 0.03);
}

.tx-row:last-child {
  border-bottom: none;
}

.tx-date {
  font-size: var(--font-sm);
  color: var(--dim);
  font-feature-settings: "tnum";
}

.tx-badge {
  font-size: var(--font-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px var(--space-xs);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  background: var(--glass-border);
  color: var(--fg);
}

/* Type-specific badge colors — vivid for both light and dark */
.tx-mint-signup, .tx-mint-pyramid {
  background: rgba(var(--tx-mint-rgb), 0.18);
  color: var(--tx-mint);
}

.tx-mint-work {
  background: rgba(var(--tx-work-rgb), 0.18);
  color: var(--tx-work);
}

.tx-transfer {
  background: rgba(var(--tx-transfer-rgb), 0.18);
  color: var(--tx-transfer);
}

.tx-spend {
  background: rgba(var(--tx-spend-rgb), 0.18);
  color: var(--tx-spend);
}

.tx-sale {
  background: rgba(var(--tx-mint-rgb), 0.18);
  color: var(--tx-mint);
}

.tx-donation {
  background: rgba(var(--tx-donation-rgb), 0.18);
  color: var(--tx-donation);
}

.tx-invest {
  background: rgba(var(--tx-work-rgb), 0.18);
  color: var(--tx-work);
}

/* Dark mode: brighter text on badges */
@media (prefers-color-scheme: dark) {
  .tx-mint-signup, .tx-mint-pyramid {
    color: var(--success);
  }
  .tx-mint-work {
    color: var(--blue-light);
  }
  .tx-transfer {
    color: var(--commerce);
  }
  .tx-spend {
    color: var(--red);
  }
  .tx-sale {
    color: var(--success);
  }
  .tx-donation {
    color: var(--knowledge);
  }
  .tx-invest {
    color: var(--blue-light);
  }
}
html:not([data-theme=light]) .tx-mint-signup, html:not([data-theme=light]) .tx-mint-pyramid {
  color: var(--success);
}
html:not([data-theme=light]) .tx-mint-work {
  color: var(--blue-light);
}
html:not([data-theme=light]) .tx-transfer {
  color: var(--commerce);
}
html:not([data-theme=light]) .tx-spend {
  color: var(--red);
}
html:not([data-theme=light]) .tx-sale {
  color: var(--success);
}
html:not([data-theme=light]) .tx-donation {
  color: var(--knowledge);
}
html:not([data-theme=light]) .tx-invest {
  color: var(--blue-light);
}

.tx-desc {
  color: var(--fg-secondary, var(--dim));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-amount {
  font-weight: 700;
  font-feature-settings: "tnum";
  text-align: right;
  white-space: nowrap;
}

.tx-credit {
  color: var(--tx-mint);
}

.tx-debit {
  color: var(--tx-spend);
}

html:not([data-theme=light]) .tx-credit {
  color: var(--success);
}

html:not([data-theme=light]) .tx-debit {
  color: var(--red);
}

.tx-empty {
  padding: var(--space-md) 0;
  text-align: center;
  color: var(--dim);
  font-size: var(--font-sm);
}

[data-theme=light] .tx-row {
  border-color: var(--glass-border);
}

[data-theme=light] .tx-row:hover {
  background: rgba(var(--accent-rgb), 0.04);
}

[data-theme=light] .tx-badge {
  background: var(--glass-hover);
}

/* ── Layer: Checkout Form ────────────────────────────────────── */
.checkout-label {
  font-size: var(--font-sm);
  color: var(--dim);
  display: block;
  margin-bottom: var(--space-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.checkout-input {
  width: 100%;
  padding: var(--space-xs-sm) var(--space-xs-sm);
  border-radius: var(--radius);
  border: 1px solid var(--glass-hover);
  background: var(--glass-subtle);
  color: var(--fg);
  font: inherit;
  font-size: var(--font-sm);
  transition: border-color var(--transition-base);
}

.checkout-input:focus {
  outline: none;
  border-color: var(--accent);
}

[data-theme=light] .checkout-input {
  border-color: var(--glass-hover);
  background: var(--glass-subtle);
}

[data-theme=light] .checkout-input:focus {
  border-color: var(--accent);
}

/* ── Layer: App Grid polish ──────────────────────────────────── */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-xs-sm);
}

.app-grid .app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-xs);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--fg);
  transition: var(--transition-base);
  cursor: pointer;
}

.app-grid .app-icon:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
  transform: translateY(-2px);
}

.app-icon-glyph {
  font-size: 28px;
  line-height: 1;
}

.app-icon-label {
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

[data-theme=light] .app-grid .app-icon {
  border-color: var(--glass-border);
  box-shadow: var(--shadow-sm);
}

[data-theme=light] .app-grid .app-icon:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.04);
  box-shadow: var(--shadow-sm);
}

/* Responsive */
@media (max-width: 640px) {
  .wallet-hero {
    padding: var(--space-sm-md) var(--space-xs-sm);
  }
  .wallet-balance-value {
    font-size: 38px;
  }
  .tx-row {
    grid-template-columns: 60px auto 1fr auto;
    gap: var(--space-xs);
    font-size: var(--font-sm);
  }
  .app-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--space-xs);
  }
  .app-icon-glyph {
    font-size: 24px;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   LAYER 2 — NAV (Unified Navigation Primitive)
   ═══════════════════════════════════════════════════════════════════

   ONE bar. THREE zones. ONE sub-row.
   Fleet tabs (primary) + breadcrumbs + scope links (secondary).

   HTML contract:
   <header class="nav" id="nav">
     <div class="nav-left">    brand (home link)              </div>
     <div class="nav-center">  fleet tabs / post-back / deck  </div>
     <div class="nav-right">   TALK + theme                   </div>
     <div class="nav-sub">     breadcrumbs + scope links      </div>
   </header>

   ═══════════════════════════════════════════════════════════════════ */
/* ── The Bar ── */
.nav {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  background: var(--panel);
  -webkit-backdrop-filter: var(--blur-panel) saturate(180%);
  backdrop-filter: var(--blur-panel) saturate(180%);
  z-index: var(--z-nav);
  border-bottom: 1px solid var(--glass-border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: var(--nav-h) auto;
  align-items: center;
  padding: 0 var(--space-sm-md);
  gap: 0 var(--space-sm);
  transition: transform var(--transition-base) var(--ease-out), opacity var(--transition-base) var(--ease-out);
}

/* ── LEFT zone: Brand ── */
.nav-left {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  transition: background var(--transition-base);
  color: var(--green);
  text-decoration: none;
}

.nav-brand:hover {
  background: var(--glass-border);
}

.nav-mark {
  font-size: var(--font-base);
  line-height: 1;
}

.nav-fleet {
  font-size: var(--font-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: var(--font);
}

/* ── CENTER zone: Fleet tabs / post-back / deck ── */
.nav-center {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
  overflow: hidden;
}

/* Fleet scope tabs (primary nav) */
.nav-fleet-tabs {
  display: flex;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-fleet-tabs li {
  flex: 0 0 auto;
}

.nav-fleet-tabs a {
  --tab-accent: var(--accent);
  display: block;
  color: var(--dim);
  text-decoration: none;
  font-size: var(--font-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: var(--space-2xs) var(--space-xs-sm);
  border-radius: var(--radius-sm);
  transition: color var(--transition-base), background var(--transition-base);
  white-space: nowrap;
}

.nav-fleet-tabs a:hover {
  color: var(--fg);
  background: var(--glass-border);
}

.nav-fleet-tabs a.active {
  color: var(--tab-accent, var(--accent));
  background: var(--glass-border);
}

/* Double-fleet separator */
.nav-fleet-sep {
  display: flex;
  align-items: center;
  padding: 0 2px;
}

.nav-fleet-sep::before {
  content: "";
  display: block;
  width: 1px;
  height: 16px;
  background: var(--glass-strong);
  border-radius: 1px;
}

/* Post mode: back + scope badge */
.nav-back {
  color: var(--dim);
  text-decoration: none;
  font-size: var(--font-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--transition-base);
  flex-shrink: 0;
}

.nav-back:hover {
  color: var(--accent);
}

.nav-scope {
  font-family: var(--mono);
  font-size: var(--font-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--dim);
  opacity: 0.85;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── RIGHT zone: TALK + Theme ── */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.nav-talk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs-sm) var(--space-2xs) var(--space-xs-sm);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--runtime-rgb), 0.25);
  background: rgba(var(--runtime-rgb), 0.06);
  color: var(--green);
  font-weight: 700;
  font-size: var(--font-2xs);
  letter-spacing: 0.1em;
  font-family: var(--mono);
  cursor: pointer;
  transition: all var(--transition-slow) var(--spring);
}

.nav-talk:hover {
  background: rgba(var(--runtime-rgb), 0.12);
  border-color: rgba(var(--runtime-rgb), 0.4);
  box-shadow: 0 0 12px rgba(var(--runtime-rgb), 0.15);
  transform: translateY(-1px);
}

.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(var(--runtime-rgb), 0.5);
  animation: nav-breathe 3s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes nav-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(var(--runtime-rgb), 0.4);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 14px rgba(var(--runtime-rgb), 0.6), 0 0 28px rgba(var(--runtime-rgb), 0.2);
  }
}
/* Inline control buttons (download, view — same family as theme toggle) */
.nav-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  background: none;
  border: 1px solid var(--glass-hover);
  color: var(--dim);
  font-size: var(--font-2xs);
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  padding: 3px var(--space-xs-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all var(--transition-base) var(--spring);
}

.nav-ctrl:hover {
  border-color: var(--glass-strong);
  color: var(--fg);
}

.nav-theme {
  background: none;
  border: 1px solid var(--glass-hover);
  color: var(--dim);
  font-size: var(--font-sm);
  padding: 3px var(--space-xs-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base) var(--spring);
  font-family: var(--font);
}

.nav-theme:hover {
  border-color: var(--glass-strong);
  color: var(--fg);
}

/* ── SUB-ROW: Breadcrumbs + Scope links ── */
.nav-sub {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 0 var(--space-2xs);
  min-height: 0;
}

.nav-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
}

.nav-crumb {
  font-size: var(--font-xs);
  font-family: var(--mono);
  color: var(--dim);
  text-decoration: none;
  transition: color var(--transition-base);
}

a.nav-crumb:hover {
  color: var(--accent);
}

.nav-crumb--current {
  color: var(--fg);
  font-weight: 700;
}

.nav-crumb-sep {
  color: var(--dim);
  opacity: 0.4;
  font-size: var(--font-2xs);
  -webkit-user-select: none;
  user-select: none;
}

/* Scope-local links (secondary, in sub-row) */
.nav-links {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-left: auto;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

.nav-links li {
  flex: 0 0 auto;
}

.nav-links a {
  color: var(--dim);
  text-decoration: none;
  font-size: var(--font-sm);
  font-weight: 500;
  transition: color var(--transition-base);
}

.nav-links a:hover {
  color: var(--accent);
}

.nav-links a.active {
  color: var(--fg);
}

/* ── DECK mode: center becomes deck controls ── */
.nav--deck .nav-center {
  justify-content: center;
  gap: var(--space-sm);
}

.nav-deck-title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-deck-counter {
  font-family: var(--mono);
  font-size: var(--font-xs);
  color: var(--dim);
  white-space: nowrap;
}

.nav-deck-timer {
  font-family: var(--mono);
  font-size: var(--font-xs);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .nav {
    padding: 0 var(--space-sm);
  }
  .nav-fleet {
    display: none;
  }
  .nav-fleet-tabs a {
    font-size: var(--font-xs);
    padding: var(--space-2xs) var(--space-xs);
  }
  .nav-links {
    gap: var(--space-sm);
  }
  .nav-links a {
    font-size: var(--font-sm);
  }
}
@media (max-width: 640px) {
  .nav-fleet-tabs {
    display: none;
  }
  .nav-sub {
    display: none;
  }
  .nav-scope {
    display: none;
  }
  .nav-talk-label {
    display: none;
  }
  .nav-talk {
    padding: var(--space-2xs) var(--space-xs);
  }
  .nav-ctrl {
    font-size: 0.65rem;
    padding: 2px var(--space-xs);
  }
}
@media (max-width: 480px) {
  .nav {
    padding: 0 var(--space-xs-sm);
  }
}
/* ── Light theme ── */
[data-theme=light] .nav {
  background: var(--panel);
  border-bottom: 1px solid var(--glass-border);
}

[data-theme=light] .nav-brand {
  color: var(--green);
}

[data-theme=light] .nav-fleet-tabs a:hover {
  background: var(--glass-hover);
}

[data-theme=light] .nav-fleet-tabs a.active {
  background: var(--glass-border);
}

[data-theme=light] .nav-fleet-sep::before {
  background: var(--glass-strong);
}

[data-theme=light] .nav-crumb {
  color: var(--dim);
}

[data-theme=light] .nav-crumb--current {
  color: var(--fg);
}

[data-theme=light] .nav-ctrl {
  border-color: var(--glass-hover);
  color: var(--dim);
}

[data-theme=light] .nav-ctrl:hover {
  border-color: var(--glass-strong);
  color: var(--fg);
}

[data-theme=light] .nav-theme {
  border-color: var(--glass-hover);
  color: var(--dim);
}

[data-theme=light] .nav-theme:hover {
  border-color: var(--glass-strong);
  color: var(--fg);
}

/* ── Nav dropdown (paper/book standalone layouts) ── */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--glass-border);
  padding: var(--space-xs) var(--space-md);
  z-index: 99;
}

.nav-dropdown.open {
  display: block;
}

.nav-dropdown-label {
  font-family: var(--mono);
  font-size: var(--font-xs);
  color: var(--dim);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2xs);
}

.nav-dropdown-links {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.nav-dropdown-links a {
  font-family: var(--mono);
  font-size: var(--font-sm);
  color: var(--accent);
  text-decoration: none;
}

.nav-dropdown-links a:hover {
  text-decoration: underline;
}

.nav-dropdown-links a.active {
  color: var(--fg);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .nav-dot {
    animation: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   LAYER 4 — COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */
/* Card (shared base) */
.card, .app-card {
  background: var(--glass-subtle);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  transition: var(--transition-slow);
}

.card:hover, .app-card:hover {
  border-color: var(--glass-hover);
  transform: translateY(-4px);
  background: var(--glass-hover);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

/* App Card (extends card) */
.app-card {
  display: block;
  text-decoration: none;
}

.app-card:hover {
  box-shadow: var(--shadow-lg);
}

.app-card .app-icon {
  font-size: 32px;
  margin-bottom: var(--space-xs-sm);
}

.app-card .app-name {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--space-2xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.app-card .app-desc {
  font-size: var(--font-sm);
  color: var(--dim);
  line-height: 1.5;
}

/* Stat */
.stat {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  border-top: 2px solid var(--accent);
  transition: var(--transition-slow);
}

.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.stat-value {
  font-size: var(--font-2xl);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  margin-top: var(--space-2xs);
}

/* Badge */
.badge {
  display: inline-block;
  padding: var(--space-2xs) var(--space-xs-sm);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs-sm) var(--space-md);
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  font-size: var(--font-base);
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: var(--transition-slow);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-sm);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: var(--glass-border);
  color: var(--fg);
  border: 1px solid var(--glass-hover);
}

.btn-secondary:hover {
  border-color: var(--glass-strong);
  background: var(--glass-border);
}

.btn-primary {
  background: var(--accent);
  color: var(--fg);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.4);
}

.btn-primary:hover {
  background: var(--blue-dark);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.5);
}

.btn-pink {
  background: linear-gradient(135deg, var(--pink-light) 0%, var(--pink) 100%);
  color: var(--fg);
  box-shadow: 0 4px 14px rgba(var(--services-rgb), 0.4);
}

.btn-pink:hover {
  box-shadow: 0 6px 20px rgba(var(--services-rgb), 0.5);
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--governance));
  color: var(--bg);
  box-shadow: 0 4px 14px rgba(var(--commerce-rgb), 0.4);
}

.btn-green {
  background: var(--green);
  color: var(--bg);
  box-shadow: 0 4px 14px rgba(var(--runtime-rgb), 0.3);
}

.btn-green:hover {
  box-shadow: 0 6px 20px rgba(var(--runtime-rgb), 0.4);
}

.btn-sm {
  font-size: var(--font-sm);
  padding: var(--space-xs) var(--space-sm);
}

/* Tab Button */
.tab-btn {
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: var(--transition-base);
}

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

.tab-btn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* Page tabs (contract-declared tab navigation) */
.page-tabs {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  position: sticky;
  top: calc(var(--eco-h, 40px) + var(--nav-h, 52px));
  z-index: var(--z-dropdown);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.page-tab {
  padding: var(--space-xs) var(--space-sm-md);
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: var(--transition-base);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.page-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.page-tab.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* Demo tabs (hero iPhone switcher) */
.demo-tabs {
  display: inline-flex;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  margin-top: var(--space-sm);
  border-radius: var(--radius);
  background: var(--glass-subtle);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}

.demo-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--dim);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  font-size: var(--font-sm);
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: var(--transition-base);
}

.demo-tab:hover {
  color: var(--fg);
  border-color: var(--glass-hover);
  background: var(--glass-border);
}

.demo-tab.active {
  color: var(--fg);
  border-color: rgba(var(--tab-accent-rgb, 59, 130, 246), 0.35);
  background: rgba(var(--tab-accent-rgb, 59, 130, 246), 0.12);
  box-shadow: 0 10px 24px rgba(var(--tab-accent-rgb, 59, 130, 246), 0.12);
}

/* Switcher — interactive narrative tabs */
.switcher {
  margin-top: var(--space-md-lg);
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, var(--glass-subtle) 0%, transparent 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.switcher-kicker {
  font-family: var(--mono);
  font-size: var(--font-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--space-xs-sm);
}

.switcher-tabs {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  padding-bottom: var(--space-xs-sm);
  border-bottom: 1px solid var(--glass-border);
}

.switcher-tab {
  appearance: none;
  border: 1px solid var(--glass-border);
  background: var(--glass-subtle);
  color: var(--dim);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--font-sm);
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: var(--transition-base);
}

.switcher-tab:hover {
  border-color: var(--glass-strong);
  color: var(--fg);
  transform: translateY(-1px);
}

.switcher-tab.active {
  border-color: rgba(var(--accent-rgb, 59, 130, 246), 0.35);
  background: rgba(var(--accent-rgb, 59, 130, 246), 0.12);
  color: var(--fg);
  box-shadow: 0 10px 28px rgba(var(--accent-rgb, 59, 130, 246), 0.12);
}

.switcher-panels {
  padding-top: var(--space-xs-sm);
}

.switcher-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-sm);
  align-items: start;
}

.switcher-panel[hidden] {
  display: none;
}

.switcher-copy h3 {
  margin: var(--space-2xs) 0 var(--space-xs-sm);
  font-size: var(--font-xl);
  letter-spacing: -0.02em;
}

.switcher-copy p {
  margin: 0;
  color: var(--fg-secondary);
  line-height: 1.7;
  font-size: var(--font-sm);
}

.switcher-bullets {
  margin: var(--space-xs-sm) 0 0;
  padding-left: var(--space-sm);
  color: var(--fg-secondary);
  font-size: var(--font-sm);
}

.switcher-bullets li {
  margin: var(--space-2xs) 0;
}

.switcher-footnote {
  margin-top: var(--space-xs-sm);
  font-family: var(--mono);
  font-size: var(--font-xs);
  color: var(--dim);
  opacity: 0.75;
}

.switcher-cta {
  margin-top: var(--space-xs-sm);
}

.switcher-graphic {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--accent-rgb, 59, 130, 246), 0.15);
  background: radial-gradient(120% 120% at 0% 0%, rgba(var(--accent-rgb, 59, 130, 246), 0.14) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(0, 0, 0, 0.06) 100%);
  padding: var(--space-xs-sm);
  overflow: hidden;
}

.switcher-graphic svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Figure SVG — responsive sizing */
.figure-svg {
  width: 100%;
  max-width: 520px;
}

/* Vault card — reduced opacity */
.app-card-vault {
  border-color: rgba(var(--commerce-rgb), 0.2);
  opacity: 0.65;
}

/* Metric trend colors */
.metric-trend-up {
  color: var(--green);
}

.metric-trend-down {
  color: var(--error);
}

.metric-trend-neutral {
  color: var(--dim);
}

/* Feature block (vaas-style) */
.vaas {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md-lg);
  align-items: center;
  padding: var(--space-lg) var(--space-lg);
  border-radius: var(--radius-xl);
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
}

.vaas-content {
  position: relative;
  z-index: 1;
}

.vaas-eyebrow {
  font-family: var(--mono);
  font-size: var(--font-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-xs-sm);
}

.vaas-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg);
  margin-bottom: var(--space-xs-sm);
}

.vaas-desc {
  font-size: var(--font-base);
  line-height: 1.65;
  color: var(--fg-secondary);
  max-width: 540px;
}

.vaas-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.vaas-tag {
  font-family: var(--mono);
  font-size: var(--font-sm);
  padding: var(--space-2xs) var(--space-xs-sm);
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb, 59, 130, 246), 0.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb, 59, 130, 246), 0.2);
  letter-spacing: 0.03em;
}

.vaas-mark {
  font-size: clamp(100px, 15vw, 180px);
  font-weight: 800;
  color: var(--glass-subtle);
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.vaas-graphic {
  border-radius: var(--radius);
  border: 1px solid rgba(var(--accent-rgb, 59, 130, 246), 0.15);
  background: radial-gradient(120% 120% at 0% 0%, rgba(var(--accent-rgb, 59, 130, 246), 0.14) 0%, rgba(255, 255, 255, 0.05) 55%);
  padding: var(--space-xs-sm);
  overflow: hidden;
  max-width: 380px;
}

.vaas-graphic svg {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 720px) {
  .vaas {
    grid-template-columns: 1fr;
    padding: var(--space-md-lg) var(--space-md);
  }
  .vaas-mark {
    position: absolute;
    right: -20px;
    bottom: -20px;
    opacity: 0.6;
  }
  .vaas-graphic {
    max-width: 100%;
  }
}
/* Message (Chat) — Apple Messages feel */
.message {
  max-width: 80%;
  padding: var(--space-xs-sm) var(--space-sm);
  border-radius: var(--radius-xl);
  line-height: 1.6;
  font-size: var(--font-base);
  animation: msg-in 0.35s var(--spring) both;
}

@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.message.user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xs) var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.message.assistant {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-xs);
  box-shadow: var(--shadow-sm);
}

.message.welcome {
  align-self: center;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--dim);
  font-size: var(--font-sm);
  max-width: 460px;
  padding: var(--space-md);
  line-height: 1.7;
}

.message.error {
  background: rgba(var(--error-rgb), 0.12);
  color: var(--error);
  border: 1px solid rgba(var(--error-rgb), 0.25);
  border-radius: var(--radius-xl);
}

/* Typing indicator — three breathing dots */
.message.thinking {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-xs);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  gap: 5px;
  align-items: center;
}

.message.thinking .dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  animation: think-bounce 1.4s ease-in-out infinite;
}

.message.thinking .dot:nth-child(2) {
  animation-delay: 0.15s;
}

.message.thinking .dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes think-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}
/* Message typography — TALK typesetting */
.message p {
  margin: 0 0 var(--space-xs);
}

.message p:last-child {
  margin-bottom: 0;
}

.message ul, .message ol {
  margin: var(--space-xs) 0;
  padding-left: var(--space-md);
}

.message li {
  margin-bottom: var(--space-2xs);
  line-height: 1.6;
}

.message code {
  background: var(--glass-strong);
  padding: 2px var(--space-2xs);
  border-radius: var(--radius-xs);
  font-family: var(--mono);
  font-size: 0.88em;
}

.message pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs-sm) var(--space-sm);
  margin: var(--space-xs-sm) 0;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--font-sm);
  line-height: 1.5;
}

.message pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

.message blockquote {
  border-left: 3px solid var(--accent);
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-xs-sm);
  margin: var(--space-xs-sm) 0;
  font-style: italic;
  color: var(--dim);
}

.message blockquote p {
  margin: 0;
}

.message h2 {
  font-size: var(--font-base);
  font-weight: 700;
  margin: var(--space-xs-sm) 0 var(--space-2xs);
}

.message h3 {
  font-size: var(--font-sm);
  font-weight: 700;
  margin: var(--space-xs-sm) 0 var(--space-2xs);
}

.message h4 {
  font-size: var(--font-sm);
  font-weight: 700;
  margin: var(--space-xs) 0 var(--space-2xs);
  color: var(--dim);
}

.message hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-xs-sm) 0;
}

.message a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.message a:hover {
  opacity: 0.8;
}

.message strong {
  font-weight: 600;
}

.message .typing::after {
  content: "u258C";
  animation: blink 0.8s step-end infinite;
  color: var(--accent);
  margin-left: 1px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
/* Panel */
.panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background: var(--card);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  z-index: var(--z-dropdown);
  display: none;
}

.panel.active {
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: var(--space-sm) var(--space-sm-md);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: var(--font-sm);
}

.panel-content {
  padding: var(--space-sm) var(--space-sm-md);
  flex: 1;
  overflow-y: auto;
}

/* FAB — Floating Action Button (scoped to avoid FontAwesome .fab collision) */
.fab:not([class*=fa-]) {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: var(--font-xl);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-nav);
}

.fab:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow);
}

/* Form Elements */
input, textarea {
  width: 100%;
  padding: var(--space-xs-sm) var(--space-sm);
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--font-sm);
  outline: none;
  transition: var(--transition-base);
}

input:focus, textarea:focus {
  border-color: var(--accent);
}

textarea {
  resize: vertical;
  min-height: 80px;
}

select {
  width: 100%;
  padding: var(--space-xs-sm) var(--space-sm);
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--font-sm);
  outline: none;
  cursor: pointer;
}

/* Proof Block — monospace evidence */
.proof {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm-md);
  font-family: var(--mono);
  font-size: var(--font-sm);
  line-height: 1.8;
  color: var(--dim);
  overflow-x: auto;
}

.proof strong {
  color: var(--accent);
}

/* Feature Block — section feature with title, text, tags, figure */
.feature-block {
  margin-top: var(--space-md-lg);
}

.feature-title {
  font-size: var(--font-xl);
  margin-bottom: var(--space-xs-sm);
}

.feature-text {
  line-height: 1.7;
}

/* Tag Cloud + Tag — governed scope pills, feature tags */
.tag-cloud {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs-sm);
  flex-wrap: wrap;
}

.tag {
  padding: var(--space-2xs) var(--space-xs-sm);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: var(--radius-pill);
  font-size: var(--font-xs);
  font-weight: 600;
}

.tag-link {
  color: var(--fg-secondary);
  text-decoration: none;
}

/* Governed Scopes — auto-generated children block */
.governed-scopes {
  margin-top: var(--space-sm-md);
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.governed-scopes .section-eyebrow {
  margin-bottom: var(--space-xs-sm);
}

/* Section CTA — call-to-action buttons within a section */
.section-cta {
  margin-top: var(--space-md-lg);
}

/* Section Heading + Subtitle — reusable within ECON/WALLET/etc */
.section-heading {
  font-size: var(--font-lg);
  font-weight: 800;
  margin-top: var(--space-2xs);
}

.section-subtitle {
  margin-top: var(--space-xs);
  font-size: var(--font-sm);
}

/* ECON + WALLET sections — COIN enforcement surfaces */
.econ-section, .wallet-section {
  margin-top: var(--space-sm-md);
  padding: var(--space-sm);
}

/* Footer Links — flex row of footer navigation */
.footer-links {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

/* Banner — governance/feature banner */
.governance-banner {
  margin-top: 64px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.banner-content {
  flex: 1;
}

.banner-title {
  font-size: var(--font-xl);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.banner-badges {
  margin-top: var(--space-sm-md);
}

.banner-symbol {
  font-size: 80px;
  opacity: 0.6;
  color: var(--accent);
}

/* Card Grid — responsive grid for CARDS.html */
.card-grid {
  display: grid;
  margin-top: var(--space-md-lg);
}

/* Tier Grid — responsive grid for TIERS.html */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm-md);
  margin-top: var(--space-md-lg);
}

.tier-axiom {
  text-align: center;
  padding: var(--space-md-lg) var(--space-md);
  font-size: var(--font-base);
  color: var(--fg-secondary);
  font-style: italic;
}

.tier-axiom strong {
  color: var(--fg);
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 5 — DECK (Presentation Layer)
   DESIGN.md 255 Map
   ═══════════════════════════════════════════════════════════════════ */
/* ── Body: deck-mode ─────────────────────────────────────────────── */
.deck-mode {
  overflow: hidden;
  background: #000;
  color: #fff;
  --fg: #ffffff;
  --dim: rgba(255, 255, 255, 0.5);
  --accent: #f59e0b;
  --accent-rgb: 245, 158, 11;
  /* Tufte: 16:9 projection type scale — DESIGN.md 255 Map */
  --font-2xs: 14px;
  --font-xs: 16px;
  --font-sm: 18px;
  --font-base: 20px;
  --font-lg: 24px;
  --font-xl: 32px;
  /* Tufte: generous whitespace */
  --space-2xs: 6px;
  --space-xs: 12px;
  --space-xs-sm: 16px;
  --space-sm: 24px;
  --space-md: 32px;
  --space-lg: 64px;
}

/* ── Layout: Fullscreen ──────────────────────────────────────────── */
.deck-mode .deck-main,
main.deck-main {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  margin: 0;
  overflow: hidden;
}

.slide-area {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Slide ────────────────────────────────────────────────────────── */
.slide {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100vw;
  height: 100vh;
  padding: 60px 10vw;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
}

/* Mobile: allow vertical scroll when slide content overflows viewport */
@media (max-width: 768px) {
  .slide {
    overflow-y: auto;
  }
}
.slide.active {
  display: flex;
}

/* ── Slide Content ────────────────────────────────────────────────── */
.slide-eyebrow {
  font-family: var(--mono);
  font-size: var(--font-2xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.slide-heading {
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: var(--space-xs);
}

.slide-story {
  font-size: clamp(20px, 2vw, 28px);
  color: var(--dim);
  line-height: 1.5;
  max-width: 65%;
  margin-bottom: var(--space-sm);
  font-weight: 300;
  white-space: pre-line;
}

/* ── Dashboard ────────────────────────────────────────────────────── */
.slide-dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  width: 100%;
  max-width: 1200px;
  flex: 0 1 auto;
  min-height: 0;
}

.slide-widget {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  flex: 0 1 auto;
}

/* Figures take full width */
.slide-widget:has(.slide-figure) {
  flex: 1 1 100%;
}

/* Tables take full width */
.slide-widget:has(table) {
  flex: 1 1 100%;
  max-width: 700px;
}

/* Metrics flow inline */
.slide-widget:has(.metric-card) {
  flex: 0 1 auto;
  min-width: 120px;
}

.slide-widget.span-2 {
  flex: 1 1 100%;
}

/* ── Metrics — hero-sized, gold, centered ─────────────────────────── */
.slide-widget .metric-card {
  padding: 0;
  text-align: center;
}

.slide-widget .metric-value {
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--space-2xs);
}

.slide-widget .metric-label {
  font-family: var(--mono);
  font-size: var(--font-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.slide-widget .metric-change {
  font-size: var(--font-xs);
  color: var(--dim);
  margin-top: var(--space-2xs);
}

/* ── Tables — minimal, clean ──────────────────────────────────────── */
.slide-widget table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-xs);
  text-align: left;
}

.slide-widget table th {
  text-align: left;
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--mono);
  font-size: var(--font-2xs);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.slide-widget table td {
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--fg);
  font-size: var(--font-sm);
}

.slide-widget table td:first-child {
  font-weight: 600;
  color: var(--accent);
}

/* ── Figures — large, centered, breathing room ───────────────────── */
.slide-figure {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slide-figure svg,
.slide-figure .figure-svg {
  display: block;
  width: 100%;
  max-height: 320px;
  height: auto;
}

/* ── Cards ────────────────────────────────────────────────────────── */
.slide-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  max-width: 900px;
}

.slide-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  flex: 1 1 200px;
  max-width: 280px;
  transition: border-color var(--transition-base);
}

.slide-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.slide-card .card-icon {
  font-size: var(--font-xl);
  display: block;
  margin-bottom: var(--space-xs-sm);
}

.slide-card strong {
  display: block;
  font-size: var(--font-base);
  margin-bottom: var(--space-xs);
  color: var(--fg);
}

.slide-card p {
  font-size: var(--font-sm);
  color: var(--dim);
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* ── Navigation Dots ──────────────────────────────────────────────── */
.slide-nav {
  position: fixed;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-xs);
  z-index: var(--z-sticky);
  padding: var(--space-2xs) var(--space-sm);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-xl);
}

.deck-mode .slide-nav .nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: var(--transition-base);
  animation: none;
  box-shadow: none;
}

.deck-mode .slide-nav .nav-dot:hover {
  background: rgba(255, 255, 255, 0.3);
}

.deck-mode .slide-nav .nav-dot.active {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
}

/* ── Footer ───────────────────────────────────────────────────────── */
.deck-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  padding: var(--space-2xs);
  z-index: var(--z-dropdown);
}

/* ── Downloads ────────────────────────────────────────────────────── */
.deck-downloads {
  position: fixed;
  top: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  gap: var(--space-xs);
  z-index: var(--z-sticky);
}

.download-btn {
  background: var(--glass-border);
  border: 1px solid var(--glass-hover);
  color: var(--dim);
  padding: var(--space-2xs) var(--space-xs-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-family: var(--mono);
  text-decoration: none;
  transition: var(--transition-base);
}

.download-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Gradient Text ────────────────────────────────────────────────── */
.grad-green {
  background: linear-gradient(135deg, var(--runtime), var(--operations));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.grad-pink {
  background: linear-gradient(135deg, var(--operations), var(--services));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.grad-gold {
  background: linear-gradient(135deg, var(--governance), var(--commerce));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.grad-red {
  background: linear-gradient(135deg, var(--red), var(--services));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Inline color spans */
.g {
  color: var(--green);
}

.b {
  color: var(--cyan);
}

.p {
  color: var(--pink);
}

.o {
  color: var(--orange);
}

.r {
  color: var(--red);
}

.gd {
  color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════
   FIGURE COMPONENTS — CSS for server-rendered Jekyll includes
   ═══════════════════════════════════════════════════════════════════ */
/* ── Score Meter (SCORE.html) ─────────────────────────────────────── */
.score-meter {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.score-meter svg {
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* ── Timeline (TIMELINE.html) ─────────────────────────────────────── */
.timeline-visual {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0;
  text-align: left;
}

.tl-node {
  padding: var(--space-xs-sm) var(--space-xs);
  border-left: 2px solid rgba(var(--accent-rgb), 0.25);
  position: relative;
}

.tl-node::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}

.tl-year {
  font-family: var(--mono);
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: var(--space-2xs);
}

.tl-event {
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 2px;
}

.tl-detail {
  font-size: var(--font-xs);
  color: var(--dim);
  line-height: 1.4;
}

.tl-amt {
  font-family: var(--mono);
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--accent);
  margin-top: var(--space-2xs);
}

/* ── Hero Stats (HERO-STATS.html) — THE reference layout ──────────── */
.hero-stats {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.hero-stat {
  text-align: center;
  min-width: 140px;
}

.hero-number {
  font-size: clamp(48px, 7vw, 110px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.hero-label {
  font-family: var(--mono);
  font-size: var(--font-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  margin-bottom: var(--space-2xs);
}

.hero-detail {
  font-size: var(--font-sm);
  color: var(--dim);
  opacity: 0.6;
}

.hero-footer {
  width: 100%;
  text-align: center;
  font-size: var(--font-sm);
  color: var(--dim);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── App Grid (APP-GRID.html) — deck override ────────────────────── */
.deck-mode .app-grid {
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  max-width: 900px;
  gap: var(--space-sm);
}

.deck-mode .app-icon-glyph {
  font-size: 36px;
}

.deck-mode .app-icon-label {
  font-size: var(--font-2xs);
}

/* ── Funnel (FUNNEL.html) ─────────────────────────────────────────── */
.funnel {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  justify-content: space-between;
  width: 100%;
  max-width: 1000px;
}

.funnel-col {
  flex: 1 1 250px;
}

.funnel-header {
  font-family: var(--mono);
  font-size: var(--font-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  text-align: center;
}

.funnel-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.fi {
  font-size: var(--font-sm);
  padding: var(--space-2xs) var(--space-xs-sm);
  border-radius: var(--radius-sm);
  text-align: center;
  color: var(--fg);
}

.fi-idiom {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
}

.fi-lang {
  background: rgba(var(--runtime-rgb), 0.06);
  border: 1px solid rgba(var(--runtime-rgb), 0.12);
}

.fi-more {
  color: var(--dim);
  font-style: italic;
  font-size: var(--font-xs);
}

.funnel-flow {
  font-size: 28px;
  color: var(--accent);
  flex-shrink: 0;
}

.funnel-bridge {
  flex-shrink: 0;
  text-align: center;
}

.bridge-label {
  font-family: var(--mono);
  font-size: var(--font-2xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: var(--space-2xs);
}

.bridge-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.08);
}

.bridge-c {
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  font-family: var(--mono);
}

.bridge-sub {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  font-family: var(--mono);
  margin-top: 2px;
}

.funnel-result {
  text-align: center;
  margin-top: var(--space-sm);
  font-family: var(--mono);
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Architecture (ARCHITECTURE.html) ─────────────────────────────── */
.moat {
  width: 100%;
}

.moat-label {
  font-family: var(--mono);
  font-size: var(--font-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin-bottom: var(--space-sm);
  font-weight: 700;
}

.arch {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.arch-layer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs-sm) var(--space-sm);
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
}

.arch-frontend {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04));
  border-color: rgba(var(--accent-rgb), 0.2);
}

.arch-backend {
  background: linear-gradient(135deg, rgba(var(--runtime-rgb), 0.08), rgba(var(--runtime-rgb), 0.02));
  border-color: rgba(var(--runtime-rgb), 0.15);
}

.arch-id {
  font-family: var(--mono);
  font-size: var(--font-2xs);
  font-weight: 700;
  color: var(--accent);
  min-width: 72px;
}

.arch-title {
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--fg);
}

.arch-desc {
  font-size: var(--font-xs);
  color: var(--dim);
  margin-left: auto;
  font-family: var(--mono);
}

.arch-connector {
  display: flex;
  justify-content: center;
  padding: var(--space-2xs) 0;
}

.arch-arrow {
  width: 2px;
  height: 12px;
  background: rgba(var(--accent-rgb), 0.3);
}

.arch-arrow-label {
  font-size: 11px;
  color: var(--dim);
}

.arch-lib {
  display: flex;
  align-items: center;
  gap: var(--space-xs-sm);
  padding: var(--space-xs-sm) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--glass-subtle);
  border: 1px solid var(--glass-border);
}

.arch-lib-name {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--fg);
}

.arch-lib-type {
  font-size: var(--font-xs);
  color: var(--dim);
  font-family: var(--mono);
  margin-left: auto;
}

.moat-punchline {
  text-align: center;
  margin-top: var(--space-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--accent);
}

/* ── Tier Cards (TIER-CARDS.html) ─────────────────────────────────── */
.tier-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-xs-sm);
}

.tier-card {
  background: var(--glass-subtle);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  text-align: center;
  transition: border-color var(--transition-base);
}

.tier-card:hover {
  border-color: var(--glass-strong);
}

.tier-card-name {
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tier-card-price {
  font-size: var(--font-xl);
  font-weight: 800;
  margin-bottom: var(--space-xs-sm);
}

.tier-card-badges {
  display: flex;
  gap: var(--space-2xs);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xs-sm);
}

.tier-badge {
  font-family: var(--mono);
  font-size: 11px;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-xs);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.tier-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.tier-card-features li {
  font-size: var(--font-sm);
  color: var(--dim);
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid var(--glass-subtle);
}

.tier-card-features li:last-child {
  border-bottom: none;
}

.tier-card-features li::before {
  content: "✓";
  color: var(--accent);
  margin-right: var(--space-xs);
  font-size: var(--font-2xs);
  font-weight: 700;
}

/* ── JS-hydrated figure containers ────────────────────────────────── */
.figure-pipeline,
.figure-balance,
.figure-flow,
.figure-area,
.figure-audit,
.figure-donut,
.figure-gauge {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.figure-pipeline svg,
.figure-balance svg,
.figure-flow svg,
.figure-area svg,
.figure-audit svg,
.figure-donut svg,
.figure-gauge svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .slide {
    padding: 40px 6vw;
  }
  .slide-heading {
    font-size: clamp(16px, 5vw, 28px);
    letter-spacing: 0.15em;
  }
  .slide-story {
    font-size: clamp(12px, 2.5vw, 16px);
    max-width: 100%;
  }
  .slide-dashboard {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }
  .slide-widget .metric-value {
    font-size: clamp(24px, 6vw, 40px);
  }
  .timeline-visual {
    grid-template-columns: 1fr;
  }
  .funnel {
    flex-direction: column;
  }
  .hero-stats {
    flex-direction: column;
    align-items: center;
  }
  .hero-number {
    font-size: clamp(36px, 10vw, 64px);
  }
  .arch-layer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .arch-desc {
    margin-left: 0;
  }
  .tier-cards-grid {
    grid-template-columns: 1fr;
  }
}
/* ── Print / PDF ─────────────────────────────────────────────────── */
@media print {
  .deck-mode {
    background: #fff;
  }
  .slide-container {
    position: static;
  }
  .slide {
    display: flex !important;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100vh;
    page-break-after: always;
    break-after: page;
    overflow: visible;
    padding: 5% 8%;
  }
  .slide-nav,
  .deck-footer,
  .deck-downloads,
  .nav-bar,
  .talk-overlay {
    display: none !important;
  }
  .slide-widget {
    break-inside: avoid;
  }
  .slide-figure svg {
    max-width: 360px;
  }
}
/* ── Deck is ALWAYS dark — no theme can override ────────────────── */
/* .deck-mode sets --fg and --dim at line 12-13. Decks are always black   */
/* background with white text regardless of data-theme or system pref.    */
/* These explicit overrides are defense-in-depth against theme leakage.   */
.deck-mode .slide-heading {
  color: var(--fg);
}

.deck-mode .slide-story {
  color: var(--dim);
}

.deck-mode .slide-widget table td {
  color: var(--fg);
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

.deck-mode .slide-widget table th {
  color: var(--dim);
}

.deck-mode .slide-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.deck-mode .slide-card strong {
  color: var(--fg);
}

.deck-mode .slide-card p {
  color: var(--dim);
}

.deck-mode .tl-node {
  border-left-color: rgba(var(--accent-rgb), 0.3);
}

.deck-mode .tl-event {
  color: var(--fg);
}

.deck-mode .tl-detail {
  color: var(--dim);
}

/* ── Contract view override for deck-mode ──────────────────────── */
/* GOV view shows governance contract prose — needs scrollable light background */
/* !important overrides .deck-mode { overflow: hidden } on same element (body) */
.deck-mode .view-gov {
  background: var(--bg);
  min-height: 100vh;
  padding-top: var(--nav-h);
  overflow-y: auto;
}

body.deck-mode.contract-view {
  overflow: auto !important;
  height: auto;
  background: var(--bg);
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 6 — UTILITIES
   ═══════════════════════════════════════════════════════════════════ */
.accent {
  color: var(--accent);
}

.muted {
  color: var(--dim);
}

.mono {
  font-family: var(--mono);
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--font-xs);
}

.gradient-text {
  background: linear-gradient(180deg, var(--fg) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.epoch-num {
  color: var(--accent);
  font-weight: 700;
  font-family: var(--mono);
}

.collab-key {
  color: var(--accent);
  font-weight: 600;
}

/* Paradigm — comparison layout */
.paradigm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.paradigm-old {
  opacity: 0.5;
  text-decoration: line-through;
}

.paradigm-new {
  color: var(--accent);
  font-weight: 600;
}

/* Lineage — flow display */
.lineage {
  font-family: var(--mono);
  font-size: var(--font-sm);
  color: var(--dim);
  text-align: center;
  padding: var(--space-sm-md);
}

.lineage .arrow {
  color: var(--accent);
}

/* Animation (merged from _ANIMATION.scss) */
@keyframes blink-cursor {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse-border {
  0%, 100% {
    box-shadow: 0 0 0 1px var(--glass-hover), 0 0 0 4px rgba(var(--accent-rgb), 0.3);
  }
  50% {
    box-shadow: 0 0 0 1px var(--glass-hover), 0 0 0 8px rgba(var(--accent-rgb), 0.15);
  }
}
.typing::after {
  content: "▋";
  animation: blink-cursor 0.7s infinite;
  color: var(--accent);
  margin-left: 2px;
}

.fade-in {
  animation: fade-in 0.3s ease forwards;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 8 — RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --nav-h: 42px;
  }
  .container {
    padding: var(--space-md);
  }
  .hero {
    padding: calc(var(--header-offset) + 36px) var(--space-md) var(--space-xl);
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3, .grid-4, .grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .paradigm {
    grid-template-columns: 1fr;
  }
  .panel {
    width: 100%;
  }
  .slide {
    padding: 0 6vw;
  }
  .hero-cta {
    flex-direction: column;
    align-items: center;
  }
  .switcher-panel {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  :root {
    --nav-sub-h: 0px;
  }
  .container {
    padding: var(--space-sm);
  }
  .grid, .grid-2, .grid-3, .grid-4, .grid-5 {
    grid-template-columns: 1fr;
  }
  .card-grid {
    grid-template-columns: 1fr !important;
  }
  .apps-grid {
    grid-template-columns: 1fr;
  }
  section {
    padding: var(--space-lg) var(--space-sm);
  }
  .message {
    max-width: 90%;
  }
  .fab:not([class*=fa-]) {
    width: 48px;
    height: 48px;
    font-size: 20px;
    bottom: 16px;
    right: 16px;
  }
  .slide {
    padding: 0 5vw;
  }
}
@media (max-width: 480px) {
  :root {
    --nav-h: 40px;
  }
  .container {
    padding: var(--space-xs);
  }
  .hero {
    padding: calc(var(--header-offset) + 20px) var(--space-xs) var(--space-lg);
  }
  .hero-content h1 {
    font-size: clamp(28px, 8vw, 40px);
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .stat {
    padding: var(--space-sm);
  }
  .stat-label {
    font-size: var(--font-sm);
    letter-spacing: 0.05em;
  }
  .section {
    padding: var(--space-lg) 0;
  }
  .btn, .btn-primary, .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  .hero-cta {
    width: 100%;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   LAYER 9 — THEMES (light / dark)
   ═══════════════════════════════════════════════════════════════════ */
/* Light theme — opt-in via data-theme="light" */
[data-theme=light] {
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --fg: #1a1a2e;
  --fg-secondary: #64748b;
  --dim: #64748b;
  --card: #ffffff;
  --border: rgba(37, 99, 235, 0.18);
  --panel: rgba(255, 255, 255, 0.95);
  --glass-subtle: rgba(0, 0, 0, 0.01);
  --glass: rgba(0, 0, 0, 0.02);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-hover: rgba(0, 0, 0, 0.04);
  --glass-strong: rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 8px rgba(37, 99, 235, 0.05);
  --shadow: 0 4px 24px rgba(37, 99, 235, 0.08);
  --shadow-lg: 0 20px 60px rgba(37, 99, 235, 0.15);
  --scrim: rgba(255, 255, 255, 0.8);
}

/* Light mode token overrides for WCAG contrast */
[data-theme=light] {
  --glow: #059669;
  --runtime: #059669;
  --green: #059669;
}

[data-theme=light] .nav-talk {
  border-color: rgba(var(--tx-mint-rgb), 0.3);
  background: rgba(var(--tx-mint-rgb), 0.08);
  color: var(--tx-mint);
}

[data-theme=light] .nav-talk:hover {
  background: rgba(var(--tx-mint-rgb), 0.14);
  border-color: rgba(var(--tx-mint-rgb), 0.5);
  box-shadow: 0 0 12px rgba(var(--tx-mint-rgb), 0.15);
}

[data-theme=light] .nav-dot {
  background: var(--tx-mint);
  box-shadow: 0 0 6px rgba(var(--tx-mint-rgb), 0.5);
}

[data-theme=light] .stat,
[data-theme=light] .app-card,
[data-theme=light] .card {
  background: var(--bg);
  box-shadow: var(--shadow);
}

[data-theme=light] .btn-secondary {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

[data-theme=light] section {
  background: var(--section-bg, var(--bg));
  box-shadow: var(--section-shadow, var(--shadow));
  border: var(--section-border, 1px solid var(--glass-border));
  border-radius: var(--section-radius, var(--radius-xl));
}

/* System light mode — auto-apply if no explicit theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) {
    --bg: #ffffff;
    --bg-alt: #f8fafc;
    --fg: #1a1a2e;
    --fg-secondary: #64748b;
    --dim: #64748b;
    --card: #ffffff;
    --border: rgba(37, 99, 235, 0.18);
    --panel: rgba(255, 255, 255, 0.95);
    --glass-subtle: rgba(0, 0, 0, 0.01);
    --glass: rgba(0, 0, 0, 0.02);
    --glass-border: rgba(0, 0, 0, 0.06);
    --glass-hover: rgba(0, 0, 0, 0.04);
    --glass-strong: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 2px 8px rgba(37, 99, 235, 0.05);
    --shadow: 0 4px 24px rgba(37, 99, 235, 0.08);
    --shadow-lg: 0 20px 60px rgba(37, 99, 235, 0.15);
    --scrim: rgba(255, 255, 255, 0.8);
  }
  :root:not([data-theme=dark]) {
    --glow: #059669;
    --runtime: #059669;
    --green: #059669;
  }
  :root:not([data-theme=dark]) .nav-talk {
    border-color: rgba(var(--tx-mint-rgb), 0.3);
    background: rgba(var(--tx-mint-rgb), 0.08);
    color: var(--tx-mint);
  }
  :root:not([data-theme=dark]) .nav-talk:hover {
    background: rgba(var(--tx-mint-rgb), 0.14);
    border-color: rgba(var(--tx-mint-rgb), 0.5);
    box-shadow: 0 0 12px rgba(var(--tx-mint-rgb), 0.15);
  }
  :root:not([data-theme=dark]) .nav-dot {
    background: var(--tx-mint);
    box-shadow: 0 0 6px rgba(var(--tx-mint-rgb), 0.5);
  }
  :root:not([data-theme=dark]) .stat,
  :root:not([data-theme=dark]) .app-card,
  :root:not([data-theme=dark]) .card {
    background: var(--bg);
    box-shadow: var(--shadow);
  }
  :root:not([data-theme=dark]) section {
    background: var(--section-bg, var(--bg));
    box-shadow: var(--section-shadow, var(--shadow));
    border: var(--section-border, 1px solid var(--glass-border));
    border-radius: var(--section-radius, var(--radius-xl));
  }
}
/* ═══════════════════════════════════════════════════════════════════
   SCOPE ACCENTS — per-fleet override
   ═══════════════════════════════════════════════════════════════════

   Usage: <html data-scope="foundation">
   Or just override in inline style:
   <style>:root { --accent: #7c3aed; }</style>

   ═══════════════════════════════════════════════════════════════════ */
/* Dark mode (default) scope accents */
[data-scope=foundation] {
  --accent: #7c3aed;
  --accent-rgb: 124,58,237;
}

[data-scope=magic] {
  --accent: #00ff88;
  --accent-rgb: 0,255,136;
}

[data-scope=hadleylab] {
  --accent: #60a5fa;
  --accent-rgb: 96,165,250;
}

[data-scope=mammochat] {
  --accent: #ec4899;
  --accent-rgb: 236,72,153;
}

[data-scope=oncochat] {
  --accent: #3b82f6;
  --accent-rgb: 59,130,246;
}

[data-scope=patents] {
  --accent: #f59e0b;
  --accent-rgb: 245,158,11;
}

[data-scope=deal] {
  --accent: #10b981;
  --accent-rgb: 16,185,129;
}

[data-scope=investor] {
  --accent: #d4af37;
  --accent-rgb: 212,175,55;
}

[data-scope=canonic] {
  --accent: #00ff88;
  --accent-rgb: 0,255,136;
}

/* ── Apple-finish layout tokens (opt-in per scope) ──
   Scopes that define these override the default glass-card sections
   with borderless full-bleed Apple-style layout. All other scopes
   fall through to defaults via var() fallbacks in _LAYOUT.scss. */
[data-scope=canonic] {
  --section-border: none;
  --section-radius: 0;
  --section-shadow: none;
  --section-padding: var(--space-xl) 0;
  --section-margin: 0;
  --section-divider: 1px solid var(--glass-border);
  --section-bg: transparent;
  --section-bg-alt: rgba(0, 255, 136, 0.02);
  --h2-transform: none;
  --h2-tracking: -0.03em;
}

[data-scope=hadleylab] {
  --section-border: none;
  --section-radius: 0;
  --section-shadow: none;
  --section-padding: var(--space-xl) 0;
  --section-margin: 0;
  --section-divider: 1px solid var(--glass-border);
  --section-bg: transparent;
  --section-bg-alt: rgba(96, 165, 250, 0.02);
  --h2-transform: none;
  --h2-tracking: -0.02em;
}

/* Light mode scope accents — WCAG AA safe on white */
[data-theme=light][data-scope=foundation] {
  --accent: #6d28d9;
  --accent-rgb: 109,40,217;
}

[data-theme=light][data-scope=magic] {
  --accent: #059669;
  --accent-rgb: 5,150,105;
}

[data-theme=light][data-scope=hadleylab] {
  --accent: #2563eb;
  --accent-rgb: 37,99,235;
}

[data-theme=light][data-scope=mammochat] {
  --accent: #db2777;
  --accent-rgb: 219,39,119;
}

[data-theme=light][data-scope=oncochat] {
  --accent: #2563eb;
  --accent-rgb: 37,99,235;
}

[data-theme=light][data-scope=patents] {
  --accent: #d97706;
  --accent-rgb: 217,119,6;
}

[data-theme=light][data-scope=deal] {
  --accent: #059669;
  --accent-rgb: 5,150,105;
}

[data-theme=light][data-scope=investor] {
  --accent: #b45309;
  --accent-rgb: 180,83,9;
}

[data-theme=light][data-scope=canonic] {
  --accent: #059669;
  --accent-rgb: 5,150,105;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark])[data-scope=foundation] {
    --accent: #6d28d9;
    --accent-rgb: 109,40,217;
  }
  :root:not([data-theme=dark])[data-scope=magic] {
    --accent: #059669;
    --accent-rgb: 5,150,105;
  }
  :root:not([data-theme=dark])[data-scope=hadleylab] {
    --accent: #2563eb;
    --accent-rgb: 37,99,235;
  }
  :root:not([data-theme=dark])[data-scope=mammochat] {
    --accent: #db2777;
    --accent-rgb: 219,39,119;
  }
  :root:not([data-theme=dark])[data-scope=oncochat] {
    --accent: #2563eb;
    --accent-rgb: 37,99,235;
  }
  :root:not([data-theme=dark])[data-scope=patents] {
    --accent: #d97706;
    --accent-rgb: 217,119,6;
  }
  :root:not([data-theme=dark])[data-scope=deal] {
    --accent: #059669;
    --accent-rgb: 5,150,105;
  }
  :root:not([data-theme=dark])[data-scope=investor] {
    --accent: #b45309;
    --accent-rgb: 180,83,9;
  }
  :root:not([data-theme=dark])[data-scope=canonic] {
    --accent: #059669;
    --accent-rgb: 5,150,105;
  }
}
/* ── Deck is ALWAYS dark — override light theme at any specificity ─── */
/* Light-mode variables set on :root cascade into .deck-mode children.   */
/* Re-assert dark tokens on .deck-mode so no light leak reaches slides.  */
.deck-mode {
  --bg: #000000;
  --fg: #ffffff;
  --fg-secondary: rgba(255, 255, 255, 0.6);
  --dim: rgba(255, 255, 255, 0.5);
  --card: rgba(255, 255, 255, 0.03);
  --border: rgba(255, 255, 255, 0.06);
  --panel: rgba(0, 0, 0, 0.95);
  --glass: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-hover: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 10 — TALK (Fleet-wide Chat Primitive)
   ═══════════════════════════════════════════════════════════════════

   TALK = CHAT + INTEL
   The universal conversation service. Every frontend gets it.
   Abstracted to AXIOMS in the GALAXY.

   HTML contract:
   <div class="talk-bar" id="talkBar">
       <div class="talk-dot"></div>
       <span class="talk-scope">SCOPE</span>
       <input class="talk-input" id="talkInput">
       <button class="talk-btn">TALK</button>
   </div>

   ═══════════════════════════════════════════════════════════════════ */
/* ── Talk dot + breathe (shared by overlay header) ── */
.talk-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: talk-breathe 3s ease-in-out infinite;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(var(--runtime-rgb), 0.4);
}

@keyframes talk-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(var(--runtime-rgb), 0.4);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 16px rgba(var(--runtime-rgb), 0.6), 0 0 32px rgba(var(--runtime-rgb), 0.2);
  }
}
.talk-scope {
  font-size: var(--font-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--dim);
  flex-shrink: 0;
  font-family: var(--mono);
  opacity: 0.7;
}

/* ── Talk Panel — a CONTROL, not a text box ── */
.talk-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--panel);
  -webkit-backdrop-filter: var(--blur-overlay);
  backdrop-filter: var(--blur-overlay);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--transition-slow) var(--spring), opacity var(--transition-slow) var(--ease-out);
  border-left: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}

.talk-overlay.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Scrim — dims page behind panel, click to close */
.talk-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  right: 420px;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
  z-index: -1;
}

.talk-overlay.open::before {
  opacity: 1;
  pointer-events: auto;
}

/* Header — commanding, tight */
.talk-overlay-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  background: var(--glass-subtle);
}

.talk-overlay-header .talk-dot {
  width: 9px;
  height: 9px;
}

.talk-overlay-header .talk-scope {
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--fg);
  opacity: 0.75;
}

/* Provider select — moved from inline */
.talk-provider-select {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--glass-strong);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  font-size: var(--font-xs);
  margin-left: auto;
  cursor: pointer;
  width: auto;
}

.talk-provider-label {
  font-size: var(--font-2xs);
  opacity: 0.5;
  margin-left: var(--space-2xs);
}

.talk-overlay-close {
  margin-left: 0;
  background: var(--glass-subtle);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs-sm);
  color: var(--dim);
  cursor: pointer;
  font-size: var(--font-xs);
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all var(--transition-base) var(--spring);
}

.talk-overlay-close:hover {
  border-color: var(--glass-strong);
  color: var(--fg);
  background: var(--glass-border);
  transform: translateY(-1px);
}

/* ── Messages area ── */
.talk-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  scroll-behavior: smooth;
}

/* First message in TALK panel — the welcome — gets presence */
.talk-messages > .message:first-child {
  background: rgba(var(--accent-rgb, 59, 130, 246), 0.06);
  border: 1px solid rgba(var(--accent-rgb, 59, 130, 246), 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-sm-md) var(--space-md);
  font-size: var(--font-sm);
  line-height: 1.7;
  color: var(--fg);
  opacity: 0.9;
}

/* ── Talk Input — the draw ── */
.talk-input-row {
  display: flex;
  gap: var(--space-xs-sm);
  padding: var(--space-sm-md) var(--space-md);
  border-top: 1px solid var(--glass-border);
  flex-shrink: 0;
  background: var(--glass-subtle);
}

.talk-input-row input {
  flex: 1;
  background: var(--glass-border);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: var(--space-xs-sm) var(--space-sm);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--font-sm);
  outline: none;
  width: auto;
  transition: all var(--transition-slow) var(--ease-out);
}

.talk-input-row input:focus {
  border-color: rgba(var(--accent-rgb, 59, 130, 246), 0.4);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 59, 130, 246), 0.1), var(--shadow);
  background: var(--glass-hover);
}

.talk-input-row input::placeholder {
  color: var(--dim);
  opacity: 0.4;
}

.talk-input-row button {
  background: var(--accent);
  color: var(--fg);
  border: none;
  border-radius: var(--radius);
  padding: var(--space-xs-sm) var(--space-md);
  font-size: var(--font-sm);
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition-base) var(--spring);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb, 59, 130, 246), 0.2);
}

.talk-input-row button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb, 59, 130, 246), 0.3);
}

.talk-input-row button:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 4px rgba(var(--accent-rgb, 59, 130, 246), 0.15);
}

/* ── Talk — top position variant ── */
.talk-overlay[data-position=top] {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: 50vh;
  max-width: 100vw;
  transform: translateY(-100%);
  border-left: none;
  border-bottom: 1px solid var(--glass-border);
}

.talk-overlay[data-position=top].open {
  transform: translateY(0);
}

.talk-overlay[data-position=top]::before {
  inset: 50vh 0 0 0;
  right: 0;
}

/* ── Talk — light theme ── */
[data-theme=light] .talk-overlay {
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}

[data-theme=light] .talk-overlay::before {
  background: var(--scrim);
}

[data-theme=light] .talk-input-row input {
  background: var(--glass-subtle);
}

[data-theme=light] .talk-input-row input:focus {
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 0, 255, 136), 0.1), var(--shadow);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .talk-overlay {
    background: var(--panel);
    box-shadow: var(--shadow-lg);
  }
  :root:not([data-theme=dark]) .talk-overlay::before {
    background: var(--scrim);
  }
  :root:not([data-theme=dark]) .talk-input-row input {
    background: var(--glass-subtle);
  }
  :root:not([data-theme=dark]) .talk-input-row input:focus {
    background: var(--bg);
  }
}
/* ── Talk — responsive ── */
@media (max-width: 640px) {
  /* Mobile: full-width panel */
  .talk-overlay {
    width: 100vw;
    border-left: none;
  }
  .talk-overlay::before {
    display: none;
  }
  .talk-messages {
    padding: var(--space-sm-md) var(--space-sm);
  }
  .talk-input-row {
    padding: var(--space-sm);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .talk-overlay {
    transform: none;
  }
  .talk-overlay.open {
    transform: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   LAYER 10.5 — CHAT (Full-Page Chat Surface Primitive)
   ═══════════════════════════════════════════════════════════════════

   CUSTOM layout chat applications (MammoChat, OncoChat, OmicsChat, etc.)
   These are full-page surfaces, distinct from the TALK slide-out panel.
   All styling via design tokens. No external CSS dependencies.

   Viewport contract:
   custom.html body[data-layout="custom"] → flex column → min-height 100dvh
   All children flex-shrink: 0 (take natural height)
   <main> flex: 1 → fills remaining viewport space
   Content above <main> is optional and accommodated automatically.

   HTML contract:
   <header>
     <div class="header-left">
       <span class="logo">ICON</span>
       <div>
         <h1>AppName</h1>
         <div class="subtitle">Tagline</div>
         <div class="tagline">Description</div>
       </div>
     </div>
     <div class="header-controls">
       <select>...</select>
       <span class="learning-badge">INTEL: ...</span>
       <span class="magic-badge">MAGIC 255</span>
     </div>
   </header>
   <!-- optional above-fold content (hero, panels, CTA) -->
   <main class="with-sidebar">       <!-- flex: 1, grid: chat + sidebar -->
     <div class="chat-column">
       <div id="talkMessages"></div>
       <div class="input-area">
         <input ...>
         <button>Send</button>
       </div>
     </div>
     <aside class="mcode-sidebar">...</aside>
   </main>
   <div class="disclaimer">...</div>

   ═══════════════════════════════════════════════════════════════════ */
/* ── Chat header ── */
body > header:not(.nav),
.view-web > header:not(.nav),
.chat-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  padding-top: calc(var(--header-offset) + var(--space-sm));
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-wrap: wrap;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-xs-sm);
}

.header-left .logo {
  font-size: var(--font-xl);
  flex-shrink: 0;
  line-height: 1;
}

.header-left h1 {
  font-size: var(--font-lg);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.header-left .subtitle {
  font-size: var(--font-sm);
  color: var(--dim);
  line-height: 1.3;
}

.header-left .tagline {
  font-size: var(--font-2xs);
  color: var(--dim);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.header-controls select {
  background: var(--glass);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--font-xs);
  font-family: var(--font);
  cursor: pointer;
  width: auto;
}

/* ── Badges ── */
.learning-badge {
  font-size: var(--font-2xs);
  font-weight: 600;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  letter-spacing: 0.03em;
  white-space: nowrap;
  font-family: var(--mono);
}

.magic-badge {
  font-size: var(--font-2xs);
  font-weight: 700;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background: rgba(var(--governance-rgb, 255, 214, 10), 0.15);
  color: var(--governance);
  letter-spacing: 0.03em;
  white-space: nowrap;
  font-family: var(--mono);
}

/* ── Custom-layout viewport flex ── */
[data-layout=custom] {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Chat apps ARE the talk surface — hide the nav TALK overlay button */
[data-layout=custom] .nav-talk {
  display: none;
}

/* TALK INSTANCE = product surface (app.*.ai)
   Chat IS the page — TALK overlay button is noise.
   Double fleet nav + breadcrumbs stay (cross-fleet navigation). */
[data-layout=talk] .nav-talk {
  display: none;
}

[data-layout=custom] > * {
  flex-shrink: 0;
}

[data-layout=custom] > .view-gov {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

[data-layout=custom] > .view-web {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[data-layout=custom] > .view-web > main,
[data-layout=custom] > main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Chat layout ── */
.with-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  height: 100%;
  overflow: hidden;
}

.chat-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.chat-column #talkMessages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  scroll-behavior: smooth;
}

.input-area {
  display: flex;
  gap: var(--space-xs-sm);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}

.input-area input {
  flex: 1;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-xs-sm) var(--space-sm);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--font-sm);
  outline: none;
  transition: var(--transition-base);
}

.input-area input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: var(--focus-ring);
}

.input-area input::placeholder {
  color: var(--dim);
  opacity: 0.5;
}

.input-area button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: var(--space-xs-sm) var(--space-md);
  font-size: var(--font-sm);
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: var(--transition-base);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.input-area button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.25);
}

.input-area button:active {
  transform: translateY(0) scale(0.97);
}

/* ── mCODE Sidebar ── */
.mcode-sidebar {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--glass-subtle);
  overflow-y: auto;
  height: 100%;
}

.mcode-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-sm);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mcode-header-icon {
  font-size: var(--font-lg);
  line-height: 1;
}

.mcode-header-text {
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--fg);
  flex: 1;
}

.mcode-header-badge {
  font-size: var(--font-2xs);
  font-weight: 600;
  padding: 2px var(--space-xs);
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-family: var(--mono);
}

.mcode-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: var(--space-2xs);
  color: var(--dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.mcode-toggle:hover {
  background: var(--glass);
  color: var(--fg);
}

.mcode-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm);
}

.mcode-section {
  margin-bottom: var(--space-sm);
}

.mcode-section-title {
  font-size: var(--font-2xs);
  font-weight: 700;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
}

.mcode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}

.mcode-item {
  padding: var(--space-xs);
  background: var(--glass);
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
}

.mcode-item.full {
  grid-column: 1/-1;
}

.mcode-item-label {
  font-size: var(--font-2xs);
  color: var(--dim);
  margin-bottom: 2px;
}

.mcode-item-value {
  font-size: var(--font-xs);
  color: var(--fg);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.mcode-export {
  margin: var(--space-sm);
  padding: var(--space-xs-sm) var(--space-sm);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent);
  font-size: var(--font-xs);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
  text-align: center;
  flex-shrink: 0;
}

.mcode-export:hover {
  background: var(--glass-hover);
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* ── Disclaimer ── */
.disclaimer {
  font-size: var(--font-2xs);
  color: var(--dim);
  text-align: center;
  padding: var(--space-xs) var(--space-md);
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

.disclaimer a {
  color: var(--accent);
  text-decoration: none;
}

.disclaimer a:hover {
  text-decoration: underline;
}

/* ── No-sidebar layout (MedChat style) ── */
[data-layout=custom] > main:not(.with-sidebar) {
  display: flex;
  flex-direction: column;
  width: 100%;
}

main:not(.with-sidebar) .chat-column,
main:not(.with-sidebar) {
  max-width: 720px;
  margin: 0 auto;
}

main:not(.with-sidebar) .chat-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}

main:not(.with-sidebar) #talkMessages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 0;
}

/* ── Keyboard visibility — copy button visible on focus-within, not just hover ── */
.message:focus-within .msg-controls {
  opacity: 1;
}

/* ── Mobile sidebar FAB — visible only when sidebar is hidden ── */
.mcode-fab {
  display: none;
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: var(--z-modal, 9000);
  box-shadow: var(--shadow);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  line-height: 1;
  align-items: center;
  justify-content: center;
}

.mcode-fab:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ── Chat — responsive ── */
@media (max-width: 768px) {
  [data-layout=custom] {
    height: auto;
    overflow: visible;
  }
  .with-sidebar {
    grid-template-columns: 1fr;
    height: auto;
  }
  .mcode-sidebar {
    border-left: none;
    border-top: 1px solid var(--border);
    max-height: 300px;
  }
  body > header:not(.nav),
  .chat-header-bar {
    padding: var(--space-xs) var(--space-sm);
  }
  .header-left h1 {
    font-size: var(--font-base);
  }
}
@media (max-width: 640px) {
  .mcode-sidebar {
    display: none;
  }
  .mcode-sidebar.open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    max-height: 100vh;
    background: var(--bg);
  }
  .mcode-fab {
    display: flex;
  }
  .input-area {
    padding: var(--space-xs) var(--space-sm);
  }
  .header-controls {
    width: 100%;
    justify-content: flex-end;
  }
}
/* ── Touch targets — clinical users include elderly patients on mobile ── */
@media (pointer: coarse) {
  .fleet-pill,
  .mcode-toggle,
  .mcode-export,
  .copy-btn,
  #talkSend,
  .nav-theme,
  .nav-talk,
  .talk-overlay-close,
  .header-controls select,
  .input-area button,
  .input-area input,
  .talk-input-row button,
  .talk-input-row input {
    min-height: 44px;
    min-width: 44px;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   FLEET — Cross-fleet navigation, community learning, evidence badges
   ═══════════════════════════════════════════════════════════════════ */
/* ── Fleet Navigation Bar ── */
.fleet-nav {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  background: var(--glass-subtle);
  border-bottom: 1px solid var(--border);
}

.fleet-nav::-webkit-scrollbar {
  display: none;
}

.fleet-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: var(--font-xs);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}

.fleet-pill:hover {
  border-color: var(--pill-accent);
  color: var(--pill-accent);
  background: rgba(var(--accent-rgb), 0.06);
  transform: translateY(-1px);
}

.fleet-pill.active {
  border-color: var(--pill-accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--pill-accent);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.12);
}

.fleet-pill-logo {
  font-size: var(--font-sm);
  line-height: 1;
}

.fleet-pill-name {
  line-height: 1;
}

/* ── Community Learning Dashboard ── */
.community-section {
  padding: 0 var(--space-md);
  flex-shrink: 0;
}

.community-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.community-title {
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.community-stats {
  display: flex;
  gap: var(--space-xs);
  flex: 1;
}

.community-stat {
  font-size: var(--font-2xs);
  font-weight: 600;
  padding: 2px var(--space-xs);
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-family: var(--mono);
}

.community-toggle {
  font-size: var(--font-2xs);
  color: var(--dim);
  transition: transform 0.2s;
}

.community-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-xs);
  padding-bottom: var(--space-sm);
  max-height: 200px;
  overflow-y: auto;
}

.community-card {
  padding: var(--space-xs) var(--space-sm);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}

.community-card:hover {
  background: var(--glass-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.community-card-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

.community-card-date {
  font-size: var(--font-2xs);
  color: var(--dim);
  font-family: var(--mono);
}

.community-card-scope {
  font-size: var(--font-2xs);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.community-card-text {
  font-size: var(--font-xs);
  color: var(--fg);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.community-card-source {
  font-size: var(--font-2xs);
  color: var(--dim);
  margin-top: 2px;
  font-style: italic;
}

/* ── Evidence Badges ── */
.evidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px var(--space-xs);
  border-radius: var(--radius-pill);
  font-size: var(--font-2xs);
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--fg);
  transition: all 0.15s;
  vertical-align: middle;
}

a.evidence-badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.evidence-badge.tier-gold {
  border-color: #d4a017;
  background: rgba(212, 160, 23, 0.08);
  color: #b8860b;
}

.evidence-badge.tier-silver {
  border-color: #8b8b8b;
  background: rgba(139, 139, 139, 0.08);
  color: #6b7280;
}

.evidence-badge.tier-bronze {
  border-color: #cd7f32;
  background: rgba(205, 127, 50, 0.08);
  color: #a0522d;
}

/* ── Typing Indicator ── */
.typing-indicator {
  display: inline-flex;
  gap: 4px;
  padding: var(--space-xs) var(--space-sm);
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: var(--dim);
  border-radius: 50%;
  animation: typing-bounce 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}
/* ── Message Entrance Animation ── */
.message-enter {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
}

.message-enter.message {
  opacity: 1;
  transform: translateY(0);
}

/* ── Copy Button + Timestamp ── */
.msg-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-2xs);
  opacity: 0;
  transition: opacity 0.2s;
}

.message:hover .msg-controls {
  opacity: 1;
}

.msg-time {
  font-size: var(--font-2xs);
  color: var(--dim);
  font-family: var(--mono);
}

.copy-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  padding: 2px var(--space-2xs);
  font-size: var(--font-2xs);
  color: var(--dim);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}

.copy-btn:hover {
  background: var(--glass);
  border-color: var(--border);
  color: var(--fg);
}

/* ── MAGIC badge as link ── */
a.magic-badge {
  text-decoration: none;
  transition: all 0.15s;
}

a.magic-badge:hover {
  background: rgba(var(--governance-rgb, 255, 214, 10), 0.25);
  transform: translateY(-1px);
}

/* ── Fleet responsive ── */
@media (max-width: 640px) {
  .fleet-nav {
    padding: var(--space-2xs) var(--space-sm);
    gap: var(--space-2xs);
    -webkit-mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent);
    mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent);
  }
  .fleet-pill-name {
    display: none;
  }
  .fleet-pill {
    padding: var(--space-2xs) var(--space-xs);
  }
  .community-cards {
    grid-template-columns: 1fr;
    max-height: 150px;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 11 — POST (Fleet-wide Article/Blog Layer)

   Spectral design: dark, gradient, Apple-esque.
   Every blog post, paper, and long-form page inherits this.

   Usage:
     <div class="post-hero">
       <h1>Title</h1>
       <p class="post-subtitle">Subtitle</p>
       <div class="post-meta">Author · Date · Tag</div>
       <div class="post-stats">
         <span class="stat-badge"><span class="val">7,062</span><span class="lbl">commits</span></span>
       </div>
     </div>
     <div class="post-body">
       <a href="/BLOG/" class="post-back">← All Posts</a>
       <p>Prose...</p>
       <blockquote>Quote</blockquote>
       <div class="chart-wrap">...</div>
       <div class="mult-grid"><div class="mult-card">...</div></div>
       <div class="post-proof">
         <blockquote>Closing statement</blockquote>
         <p class="post-sig">Author · Date</p>
       </div>
     </div>
   ═══════════════════════════════════════════════════════════════════════════ */
/* POST — Hero */
.post-hero {
  padding: 176px var(--space-md) var(--space-lg);
  text-align: center;
  background: linear-gradient(180deg, var(--glass-subtle) 0%, transparent 100%);
}

.post-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
  background: linear-gradient(180deg, var(--accent) 0%, var(--green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.post-subtitle {
  font-size: 1.125rem;
  color: var(--fg-secondary);
  margin-bottom: 1.5rem;
}

.post-meta {
  font-size: var(--font-sm);
  color: var(--fg-secondary);
  margin-bottom: var(--space-md-lg);
}

.post-meta strong {
  color: var(--fg, #fff);
}

/* POST — Stats Row */
.post-stats {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--glass-border);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.5rem 1.25rem;
  font-family: var(--mono, "SF Mono", monospace);
  font-size: 0.875rem;
}

.stat-badge .val {
  font-weight: 700;
  color: var(--accent);
}

.stat-badge .lbl {
  color: var(--fg-secondary);
}

/* POST — Back Link */
.post-back {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: var(--font-sm);
  color: var(--dim);
  text-decoration: none;
  transition: all var(--transition-base) ease;
}

.post-back:hover {
  color: var(--accent);
}

/* POST — Body / Prose */
.post-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
}

.post-body p, .prose {
  color: var(--dim);
  font-size: 1.0625rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  max-width: 700px;
}

.post-body p strong, .prose strong {
  color: var(--fg, #fff);
}

.post-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-sm-md);
  margin: 2rem 0;
  font-style: italic;
  font-size: 1.125rem;
  color: var(--fg, #fff);
  line-height: 1.6;
}

.post-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

.post-body ul, .post-body ol {
  margin: 1rem 0 1.5rem 1.5rem;
  color: var(--dim);
  font-size: 1rem;
  line-height: 1.8;
}

.post-body pre {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin: 1.5rem 0;
  font-family: var(--mono, "SF Mono", monospace);
  font-size: 0.875rem;
  overflow-x: auto;
  line-height: 1.6;
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}

.post-body th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  border-bottom: 2px solid var(--border);
}

.post-body td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

/* POST — Section headers (spectral style) */
.post-body h2 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fg-secondary);
  margin: 3rem 0 1.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.post-body h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--fg);
}

/* POST — Chart Wrapper */
.chart-wrap {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 2rem;
  margin: 2rem 0;
  overflow-x: auto;
}

.chart-wrap svg {
  width: 100%;
  height: auto;
}

.chart-wrap-compact {
  padding: 1rem;
  margin: var(--space-xs) 0 0;
}

/* POST — Tags (tier badges) */
.tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tag-magic {
  background: rgba(var(--runtime-rgb), 0.15);
  color: var(--green);
}

.tag-agent {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.tag-enterprise {
  background: rgba(var(--commerce-rgb), 0.15);
  color: var(--commerce);
}

.tag-community {
  background: rgba(var(--dim-rgb), 0.15);
  color: var(--dim);
}

.tag-founder {
  background: rgba(var(--runtime-rgb), 0.15);
  color: var(--green);
}

.tag-pro {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.tag-human {
  background: rgba(var(--dim-rgb), 0.15);
  color: var(--dim);
}

/* POST — Multiplier Cards */
.mult-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.mult-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
}

.mult-value {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: var(--mono, "SF Mono", monospace);
  background: linear-gradient(135deg, var(--accent), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mult-label {
  font-size: 0.75rem;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.5rem;
}

.mult-detail {
  font-size: 0.8125rem;
  color: var(--dim);
  opacity: 0.6;
  margin-top: 0.25rem;
}

/* POST — NDA Lock Badge */
.post-lock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold, #d4af37);
  background: rgba(var(--commerce-rgb), 0.1);
  border: 1px solid rgba(var(--commerce-rgb), 0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  margin-top: var(--space-sm);
}

/* POST — Proof / Closing */
.post-proof {
  padding: 3rem 0;
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}

.post-proof blockquote {
  font-size: 1.25rem;
  font-weight: 500;
  font-style: italic;
  color: var(--accent);
  max-width: 600px;
  margin: 0 auto 1.5rem;
  line-height: 1.5;
  border-left: none;
  padding-left: 0;
}

.post-sig {
  color: var(--dim);
  font-size: 0.875rem;
}

.post-proof-cta {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  text-align: left;
}

/* POST — Era Timeline */
.era-timeline {
  display: grid;
  gap: 0;
  margin: 2rem 0;
}

.era-row, .fitness-row {
  display: grid;
  align-items: center;
  gap: 1rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.era-row:first-child, .fitness-row:first-child {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.era-row:last-child, .fitness-row:last-child {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border-bottom: none;
}

.era-row {
  grid-template-columns: 140px 100px 1fr 80px;
  padding: 1rem 1.5rem;
}

.era-name {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.era-dates {
  font-size: 0.75rem;
  color: var(--dim);
  font-family: var(--mono);
}

.era-bar-wrap {
  height: 24px;
  background: var(--glass-subtle);
  border-radius: 4px;
  overflow: hidden;
}

.era-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease;
}

.era-rate {
  text-align: right;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.875rem;
}

/* POST — Fitness Bars */
.fitness-row {
  grid-template-columns: 140px 60px 1fr 60px;
  padding: 0.75rem 1.5rem;
}

.fitness-bar-wrap {
  height: 28px;
  background: var(--glass-subtle);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.fitness-bar {
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--scrim);
  min-width: 40px;
}

.fitness-tier {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
}

/* POST — Daily Bars */
.daily-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.75rem;
  height: 200px;
  margin: 2rem 0;
  padding: 1rem 0;
}

.daily-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  max-width: 120px;
}

.daily-bar {
  width: 100%;
  border-radius: var(--radius-sm) var(--radius-sm) 4px 4px;
  background: linear-gradient(180deg, var(--accent), var(--green));
  transition: height 1s ease;
  min-height: 4px;
}

.daily-val {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
}

.daily-date {
  font-size: 0.6875rem;
  color: var(--dim);
  font-family: var(--mono);
}

/* POST — Contributor Table */
.contrib-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.875rem;
}

.contrib-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  border-bottom: 2px solid var(--border);
}

.contrib-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

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

.contrib-name {
  font-weight: 600;
}

.contrib-handle {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.8125rem;
}

/* POST — Blog Index */
.blog-hero {
  padding: 176px var(--space-md) 60px;
  text-align: center;
}

.blog-hero h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-xs-sm);
}

.blog-hero p {
  font-size: var(--font-base);
  color: var(--dim);
  max-width: 600px;
  margin: 0 auto;
}

.blog-grid {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
  display: grid;
  gap: var(--space-sm-md);
}

.blog-card, .book-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-decoration: none;
  color: var(--fg);
  transition: all var(--transition-base) ease;
  display: block;
}

.blog-card:hover, .book-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.book-card {
  position: relative;
  overflow: hidden;
}

.blog-eyebrow, .book-eyebrow {
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
  color: var(--accent);
}

.blog-title {
  font-size: var(--font-sm-md, 20px);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.blog-desc, .book-desc {
  font-size: var(--font-sm);
  color: var(--dim);
  line-height: 1.6;
  margin-bottom: var(--space-xs-sm);
}

.blog-meta, .book-meta {
  font-size: var(--font-2xs);
  color: var(--dim);
}

.blog-meta strong, .book-meta strong {
  color: var(--fg);
}

/* POST — Books Index */
.books-hero {
  padding: 176px var(--space-md) 60px;
  text-align: center;
}

.books-hero h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-xs-sm);
}

.books-hero p {
  font-size: var(--font-base);
  color: var(--dim);
  max-width: 600px;
  margin: 0 auto;
}

.books-grid {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
  display: grid;
  gap: var(--space-sm-md);
}

.book-title {
  font-size: var(--font-xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

/* POST — Header — clear unified nav bar */
.post-header {
  padding-top: calc(var(--header-offset) + 40px);
  text-align: center;
}

.post-figure {
  display: flex;
  justify-content: center;
  margin: var(--space-md-lg) auto;
}

.post-header h1 {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.post-date {
  display: block;
  font-size: var(--font-sm);
  color: var(--dim);
  margin-top: var(--space-2xs);
  font-family: var(--mono);
}

.post-author {
  display: block;
  font-size: var(--font-sm);
  color: var(--fg-secondary);
  margin-top: 2px;
}

/* POST — Download Bar */
.post-downloads,
.deck-downloads {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  margin: 0 auto;
  max-width: 720px;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: var(--glass-border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm-md);
  font-size: var(--font-sm);
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  text-decoration: none;
  transition: all var(--transition-base) var(--ease-out, ease);
}

.download-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.15);
}

.download-btn:active {
  transform: translateY(0) scale(0.97);
}

.deck-downloads {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-dropdown);
  background: var(--scrim);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-sm);
  box-shadow: var(--shadow-lg);
}

[data-theme=light] .download-btn {
  background: var(--glass-subtle);
}

[data-theme=light] .download-btn:hover {
  background: rgba(var(--accent-rgb), 0.06);
}

[data-theme=light] .deck-downloads {
  background: var(--scrim);
  box-shadow: var(--shadow-lg);
}

/* POST — Responsive */
@media (max-width: 768px) {
  .post-header {
    padding-top: calc(var(--header-offset) + 28px);
  }
  .era-row {
    grid-template-columns: 100px 1fr 60px;
  }
  .era-dates {
    display: none;
  }
  .fitness-row {
    grid-template-columns: 100px 1fr 50px;
  }
  .fitness-row > :nth-child(2) {
    display: none;
  }
  .mult-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contrib-table {
    font-size: 0.75rem;
  }
  .contrib-table th, .contrib-table td {
    padding: 0.5rem;
  }
}
@media (max-width: 480px) {
  .post-header {
    padding-top: calc(var(--header-offset) + 20px);
  }
  .post-body {
    padding: 0 var(--space-sm) 60px;
  }
  .post-body h2 {
    margin: 2rem 0 1rem;
    padding-top: 1.5rem;
  }
}
/* POST — Light Theme Overrides */
[data-theme=light] .post-hero {
  background: linear-gradient(180deg, var(--glass-subtle) 0%, transparent 100%);
}

[data-theme=light] .post-hero h1 {
  background: linear-gradient(180deg, var(--accent) 0%, var(--tx-mint) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme=light] .mult-value {
  background: linear-gradient(180deg, var(--accent) 0%, var(--tx-mint) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* POST — Utility: gate visibility */
.hidden {
  display: none !important;
}

.contrib-success {
  display: none;
}

.contrib-success.unlocked {
  display: block;
}

/* POST — Cover Art Header */
.post-header-cover {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
}

.post-cover {
  flex: 0 0 200px;
}
.post-cover img {
  width: 200px;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--glass-border);
}

.post-header-text {
  flex: 1;
  min-width: 0;
}

.post-description {
  font-size: var(--font-base);
  color: var(--dim);
  line-height: 1.6;
  margin-top: var(--space-xs);
}

@media (max-width: 640px) {
  .post-header-cover {
    flex-direction: column;
    text-align: center;
  }
  .post-cover {
    flex: none;
  }
  .post-cover img {
    width: 160px;
  }
}
/* POST — Contribution Gate */
.gate-contribute {
  max-width: 480px;
  margin: 0 auto var(--space-lg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.gate-inner {
  text-align: center;
}

.gate-text {
  font-size: var(--font-sm);
  color: var(--dim);
  line-height: 1.7;
  margin-bottom: var(--space-sm-md);
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.gate-form input,
.gate-form textarea,
.gate-form select {
  background: var(--glass-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-xs-sm) var(--space-sm);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--font-sm);
  width: 100%;
}

.gate-form input:focus,
.gate-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.gate-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Gated content — hidden by default, shown by JS */
.gated-content {
  display: none;
}

.gated-content.unlocked {
  display: block;
}

/* Contribute section at bottom of gated content */
.contribute-section {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--border);
  text-align: center;
}

.contribute-section h2 {
  font-size: var(--font-xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  border: none;
  padding: 0;
  text-transform: none;
  letter-spacing: normal;
}

.contribute-sub {
  font-size: var(--font-sm);
  color: var(--dim);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.contrib-success {
  text-align: center;
  padding: var(--space-md);
  background: rgba(var(--success-rgb), 0.06);
  border: 1px solid rgba(var(--success-rgb), 0.2);
  border-radius: var(--radius);
  color: var(--success);
  font-size: var(--font-sm);
}

/* ── Post Navigation (next/prev) ── */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.post-nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  max-width: 48%;
  transition: border-color 0.2s, background 0.2s;
}

.post-nav-link:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 96, 165, 250), 0.04);
}

.post-nav-prev {
  text-align: left;
}

.post-nav-next {
  text-align: right;
  margin-left: auto;
}

.post-nav-label {
  font-size: var(--font-xs);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.post-nav-title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--fg);
  line-height: 1.4;
}

/* ── Blog Badge (catalog index) ── */
.blog-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: var(--space-xs);
  background: rgba(var(--accent-rgb, 96, 165, 250), 0.1);
  color: var(--accent, #60a5fa);
}

/* Series headers in blog index — era grouping */
.blog-series-header {
  padding: var(--space-md) 0 var(--space-xs);
  margin-top: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.blog-series-header .blog-eyebrow {
  font-size: var(--font-sm);
  color: var(--fg);
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 12 — GALAXY (Phase 5: Dual Drawers + Search Dock)
   ═══════════════════════════════════════════════════════════════════ */
/* ═══ OPERATING SURFACE (chrome-free, full-bleed) ═══ */
body.galaxy-surface {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg, #0a0a0f);
}

.galaxy-surface-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.galaxy-surface-container .galaxy-hero {
  margin-top: 0;
  height: 100%;
}

.galaxy-surface-container .galaxy-container--fullscreen {
  height: 100vh;
  height: 100dvh;
}

.galaxy-surface-container .control-panel {
  top: var(--space-sm, 16px);
}

.galaxy-surface-container .cat-legend {
  top: var(--space-sm, 16px);
}

/* ═══ AUTH GATE (GitHub login surface) ═══ */
.galaxy-auth-gate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06060a;
  background-image: radial-gradient(ellipse 600px 400px at 50% 40%, rgba(0, 255, 136, 0.03), transparent), radial-gradient(ellipse 400px 300px at 30% 60%, rgba(41, 151, 255, 0.02), transparent);
  z-index: 9999;
}

.galaxy-auth-card {
  text-align: center;
  padding: clamp(32px, 5vh, 52px) clamp(28px, 4vw, 44px) clamp(24px, 4vh, 40px);
  border-radius: clamp(16px, 2vw, 24px);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  box-shadow: 0 12px 64px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  max-width: min(480px, 85vw);
  width: 90%;
}

.auth-ring-wrap {
  position: relative;
  width: clamp(80px, 15vmin, 160px);
  height: clamp(80px, 15vmin, 160px);
  margin: 0 auto clamp(20px, 3vh, 36px);
}

.auth-ring {
  display: block;
  width: 100%;
  height: 100%;
}

.auth-ring-arc {
  animation: auth-ring-spin 30s linear infinite;
  transform-origin: 60px 60px;
}

@keyframes auth-ring-spin {
  to {
    transform: rotate(360deg);
  }
}
.auth-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(24px, 4vmin, 36px);
  color: rgba(255, 255, 255, 0.25);
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vmin, 14px);
  margin-bottom: 8px;
}

.auth-mark {
  font-size: clamp(24px, 4vmin, 36px);
  color: var(--accent, #00ff88);
  text-shadow: 0 0 20px rgba(0, 255, 136, 0.35);
}

.auth-title {
  font-family: var(--mono);
  font-size: clamp(20px, 3.5vmin, 32px);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--fg, #e5e5e5);
}

.auth-subtitle {
  font-family: var(--mono);
  font-size: clamp(11px, 1.5vmin, 14px);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent, #00ff88);
  opacity: 0.5;
  margin-bottom: clamp(12px, 2vh, 20px);
}

.auth-tagline {
  font-size: clamp(13px, 1.8vmin, 16px);
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.5;
  margin-bottom: clamp(24px, 4vh, 36px);
}

.auth-login-btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1.2vmin, 12px);
  padding: clamp(12px, 2vmin, 16px) clamp(24px, 4vmin, 40px);
  border-radius: clamp(10px, 1.5vmin, 14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg, #e5e5e5);
  font-family: var(--mono);
  font-size: clamp(14px, 2vmin, 17px);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.04em;
}

.auth-login-btn:hover {
  background: rgba(0, 255, 136, 0.08);
  border-color: rgba(0, 255, 136, 0.25);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0, 255, 136, 0.12);
}

.auth-login-btn i {
  font-size: clamp(16px, 2.2vmin, 22px);
}

.auth-footer {
  margin-top: clamp(16px, 3vh, 28px);
  font-size: clamp(10px, 1.4vmin, 13px);
  color: rgba(255, 255, 255, 0.18);
  letter-spacing: 0.06em;
}

.auth-unlocking .auth-lock i {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: rotate(-15deg);
  color: var(--accent, #00ff88);
  filter: drop-shadow(0 0 12px rgba(0, 255, 136, 0.5));
}
.auth-unlocking .auth-ring-arc {
  transition: stroke-dasharray 0.5s ease-out;
  filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.4));
}
.auth-unlocking .auth-login-btn {
  opacity: 0;
  transition: opacity 0.2s;
}

.auth-unlocked {
  animation: auth-fade-out 0.6s ease-in forwards;
}

@keyframes auth-fade-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
    filter: blur(8px);
  }
}
.galaxy-entering {
  animation: galaxy-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes galaxy-enter {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.sc-card {
  animation: card-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sc-card:nth-child(1) {
  animation-delay: 30ms;
}

.sc-card:nth-child(2) {
  animation-delay: 60ms;
}

.sc-card:nth-child(3) {
  animation-delay: 90ms;
}

.sc-card:nth-child(4) {
  animation-delay: 120ms;
}

.sc-card:nth-child(5) {
  animation-delay: 150ms;
}

.sc-card:nth-child(6) {
  animation-delay: 180ms;
}

.sc-card:nth-child(7) {
  animation-delay: 210ms;
}

.sc-card:nth-child(8) {
  animation-delay: 240ms;
}

.sc-card:nth-child(9) {
  animation-delay: 270ms;
}

.sc-card:nth-child(10) {
  animation-delay: 300ms;
}

.sc-card:nth-child(11) {
  animation-delay: 330ms;
}

.sc-card:nth-child(12) {
  animation-delay: 360ms;
}

.sc-card:nth-child(13) {
  animation-delay: 390ms;
}

.sc-card:nth-child(14) {
  animation-delay: 420ms;
}

.sc-card:nth-child(15) {
  animation-delay: 450ms;
}

.sc-card:nth-child(16) {
  animation-delay: 480ms;
}

.sc-card:nth-child(17) {
  animation-delay: 510ms;
}

.sc-card:nth-child(18) {
  animation-delay: 540ms;
}

.sc-card:nth-child(19) {
  animation-delay: 570ms;
}

.sc-card:nth-child(20) {
  animation-delay: 600ms;
}

.sc-card:nth-child(21) {
  animation-delay: 630ms;
}

.sc-card:nth-child(22) {
  animation-delay: 660ms;
}

.sc-card:nth-child(23) {
  animation-delay: 690ms;
}

.sc-card:nth-child(24) {
  animation-delay: 720ms;
}

@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dp-ring circle:not(:first-child) {
  transition: stroke-dasharray 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cp-coin {
  transition: text-shadow 0.3s;
}
.cp-coin:hover {
  text-shadow: 0 0 16px rgba(255, 214, 10, 0.5);
}

.dp-rocket {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dp-ring-wrap:hover .dp-rocket {
  transform: translateY(-4px) scale(1.2);
  filter: drop-shadow(0 4px 8px rgba(0, 255, 136, 0.3));
}

@keyframes tier-up {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.6) drop-shadow(0 0 20px currentColor);
  }
  100% {
    filter: brightness(1);
  }
}
.tier-up {
  animation: tier-up 0.8s ease-out;
}

@keyframes magic-complete {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 24px rgba(0, 255, 136, 0.6));
  }
}
.magic-255 {
  animation: magic-complete 2s ease-in-out infinite;
}

.talk-msg {
  animation: msg-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes msg-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#searchInput:focus {
  box-shadow: 0 0 0 2px rgba(41, 151, 255, 0.15), 0 2px 12px rgba(0, 0, 0, 0.2);
  border-color: rgba(41, 151, 255, 0.3);
  transition: all 0.2s;
}

.lp-item:hover .lp-icon {
  transform: translateY(-3px) scale(1.08);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.galaxy-hero {
  position: relative;
}

.galaxy-hero-text {
  text-align: center;
  padding: calc(var(--header-offset) + 20px) var(--space-md) var(--space-md);
  position: relative;
  z-index: 2;
}

.galaxy-hero-text h1 {
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: -0.03em;
}

.galaxy-hero-text .subtitle {
  font-size: var(--font-sm-md, 20px);
  color: var(--dim);
  margin-top: var(--space-sm);
}

.galaxy-hero-text .description {
  font-size: var(--font-base);
  color: var(--dim);
  max-width: 600px;
  margin: var(--space-sm) auto 0;
  line-height: 1.7;
}

.galaxy-container {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.galaxy-container--fullscreen {
  height: calc(100vh - var(--header-offset) - 40px);
  min-height: 500px;
}

/* Full-bleed galaxy: extends behind transparent nav */
.galaxy-page .galaxy-hero {
  margin-top: calc(-1 * var(--header-offset));
}

.galaxy-page .galaxy-container--fullscreen {
  height: 100vh;
  height: 100dvh;
}

.galaxy-page .control-panel {
  top: calc(var(--header-offset) + var(--space-sm));
}

.galaxy-page .cat-legend {
  top: calc(var(--header-offset) + var(--space-sm));
}

/* Transparent nav over galaxy — auto-hides on interaction */
.galaxy-page .nav {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: transform var(--transition-base) var(--ease-out), opacity var(--transition-base) var(--ease-out);
}

.galaxy-page .nav.nav-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Galaxy stats block (non-fullscreen) */
.galaxy {
  background: var(--card);
  border: 1px solid var(--glass-strong);
  border-radius: var(--radius);
  padding: var(--space-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.08), var(--shadow);
}

.galaxy::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(var(--runtime-rgb), 0.2) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.galaxy h2 {
  position: relative;
  font-size: var(--font-xl);
  margin-bottom: var(--space-xs);
  color: var(--accent);
}

.galaxy p {
  position: relative;
}

.galaxy-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
  position: relative;
}

.galaxy-val {
  font-family: var(--mono);
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--accent);
}

.galaxy-lbl {
  font-size: var(--font-xs);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--space-2xs);
}

/* ═══ ANIMATIONS ═══ */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeSlideUpCenter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@keyframes fadeSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeSlideRight {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ring-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(0, 255, 136, 0.5));
  }
}
@keyframes node-fix-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes unicorn-shimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* ═══ LOADING ═══ */
.galaxy-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg, #000);
  z-index: 999;
  transition: opacity 0.6s ease;
}

.galaxy-loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-ring {
  width: 56px;
  height: 56px;
  border: 3px solid rgba(0, 255, 136, 0.08);
  border-top-color: var(--accent, #00ff88);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 24px rgba(0, 255, 136, 0.2), inset 0 0 12px rgba(0, 255, 136, 0.05);
}

.loader-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent, #00ff88);
  letter-spacing: 0.2em;
  margin-top: 16px;
  background: linear-gradient(90deg, #00ff88 0%, #2997ff 50%, #00ff88 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* ═══ CONTROL PANEL (top-left, Apple-style) ═══ */
.control-panel {
  position: absolute;
  top: var(--space-sm, 16px);
  left: var(--space-sm, 16px);
  z-index: 10;
  padding: 14px 18px;
  border-radius: 16px;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.1));
  -webkit-backdrop-filter: var(--blur-panel, blur(30px));
  backdrop-filter: var(--blur-panel, blur(30px));
  box-shadow: var(--shadow, 0 4px 24px rgba(0, 0, 0, 0.5));
  animation: fadeSlideLeft 0.5s ease 0.1s both;
  -webkit-user-select: none;
  user-select: none;
}

.cp-brand {
  margin-bottom: 10px;
}

.cp-brand-title {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--fg);
}

.cp-brand-sub {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent, #00ff88);
  opacity: 0.7;
  margin-top: 1px;
}

.cp-score {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cp-ring {
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}

.cp-ring:hover {
  transform: scale(1.08);
}

.cp-ring svg {
  filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.3));
}

.cp-bits {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--fg);
}

.cp-stats {
  flex: 1;
  min-width: 0;
}

.cp-tier {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.cp-coin {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: #ffd60a;
  transition: all 0.2s;
  margin-top: 2px;
  text-shadow: 0 0 12px rgba(255, 214, 10, 0.3);
  text-decoration: none;
}

.cp-coin:hover {
  text-shadow: 0 0 20px rgba(255, 214, 10, 0.5);
}

.cp-coin i {
  font-size: 10px;
}

.cp-scope-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 0.06em;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.cp-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--dim);
  font-size: 10px;
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.control-panel:hover .cp-close {
  opacity: 0.5;
}

.cp-close:hover {
  opacity: 1;
  color: var(--fg);
}

.cp-divider {
  border-top: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  margin: 8px 0 6px;
}

.cp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.filter-pill {
  font-family: var(--mono);
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.2s;
  letter-spacing: 0.05em;
  background: transparent;
  font-weight: 600;
}

.filter-pill:hover {
  background: var(--glass-hover, rgba(255, 255, 255, 0.06));
}

.filter-pill.active {
  background: rgba(255, 255, 255, 0.08);
}

/* ═══ COIN FEED (dropdown in control panel) ═══ */
.cp-coin-feed {
  margin-top: 6px;
  padding: 6px 0;
  border-top: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  max-height: 200px;
  overflow-y: auto;
}

.coin-tx {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-family: var(--mono);
  font-size: 9px;
}

.coin-tx-type {
  font-weight: 700;
  min-width: 36px;
  text-align: right;
}

.coin-tx-desc {
  flex: 1;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.coin-tx-date {
  color: var(--dim);
  opacity: 0.5;
  font-size: 8px;
}

.coin-tx-empty {
  text-align: center;
  padding: 8px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
}

/* ═══ FLEET STATS + HEALTH BAR ═══ */
.cp-fleet-stats {
  display: flex;
  gap: 16px;
  padding: 0 2px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.08em;
}

.cp-fleet-stat {
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
}

.cp-fleet-stat:hover {
  color: var(--fg);
}

.cp-fleet-stat.active {
  color: var(--fg);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.cp-fleet-num {
  font-weight: 700;
  color: var(--fg);
  margin-right: 3px;
}

.cp-health {
  cursor: pointer;
  margin-top: 4px;
  transition: opacity 0.2s;
}

.cp-health:hover {
  opacity: 0.85;
}

.cp-health-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--dim);
  letter-spacing: 0.1em;
  margin-bottom: 3px;
}

.cp-health-bar {
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.cp-health-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}

/* ═══ CATEGORY LEGEND (top-right) ═══ */
.cat-legend {
  position: absolute;
  top: var(--space-sm, 16px);
  right: var(--space-sm, 16px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.1));
  -webkit-backdrop-filter: var(--blur-panel, blur(24px));
  backdrop-filter: var(--blur-panel, blur(24px));
  animation: fadeSlideRight 0.5s ease 0.15s both;
  box-shadow: var(--shadow, 0 4px 16px rgba(0, 0, 0, 0.3));
}

.cat-dot {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--dim);
  padding: 3px 7px;
  border-radius: 5px;
  transition: all 0.2s;
  letter-spacing: 0.04em;
}

.cat-dot:hover {
  background: var(--glass-hover, rgba(255, 255, 255, 0.06));
  color: var(--fg);
}

.cat-dot.active {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.06);
}

.cat-dot-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}

/* ═══ LEFT DRAWER (INTEL) ═══ */
.left-drawer {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 100%;
  z-index: 15;
  transform: translateX(-100%);
  background: var(--panel);
  border-right: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  -webkit-backdrop-filter: var(--blur-panel, blur(30px));
  backdrop-filter: var(--blur-panel, blur(30px));
  transition: transform 0.35s cubic-bezier(0.34, 1, 0.64, 1);
  overflow-y: auto;
  padding-bottom: 80px;
}

.left-drawer.open {
  transform: translateX(0);
}

.left-drawer::-webkit-scrollbar {
  width: 3px;
}

.left-drawer::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.ld-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}

.ld-title {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent, #00ff88);
}

.ld-close {
  background: none;
  border: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  color: var(--dim);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.ld-close:hover {
  color: var(--fg);
  background: var(--glass-hover, rgba(255, 255, 255, 0.06));
}

/* ═══ RIGHT DRAWER (DETAIL) ═══ */
.right-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  height: 100%;
  z-index: 15;
  transform: translateX(100%);
  background: var(--panel);
  border-left: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  -webkit-backdrop-filter: var(--blur-panel, blur(30px));
  backdrop-filter: var(--blur-panel, blur(30px));
  transition: transform 0.35s cubic-bezier(0.34, 1, 0.64, 1);
  overflow-y: auto;
  padding-bottom: 80px;
}

.right-drawer.open {
  transform: translateX(0);
}

.right-drawer::-webkit-scrollbar {
  width: 3px;
}

.right-drawer::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

/* ═══ DETAIL PANEL (rendered inside right drawer) ═══ */
.dp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
}

.dp-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dp-close {
  background: none;
  border: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  color: var(--dim);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.dp-close:hover {
  color: var(--fg);
  border-color: rgba(255, 255, 255, 0.2);
  background: var(--glass-hover, rgba(255, 255, 255, 0.06));
}

.dp-ring {
  text-align: center;
  padding: 28px 0 14px;
  position: relative;
}

.dp-ring svg {
  animation: ring-pulse 3s ease-in-out infinite;
}

.dp-ring-launch {
  display: inline-block;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dp-ring-launch:hover {
  transform: scale(1.05);
}

.dp-ring-launch:hover .dp-rocket {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.3);
}

.dp-ring-launch:active .dp-rocket {
  transform: translate(-50%, -55%) scale(1.5);
}

.dp-rocket {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 34px;
  opacity: 0.4;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 16px rgba(41, 151, 255, 0.5));
}

.dp-tier {
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  letter-spacing: 0.08em;
}

.dp-meta {
  padding: 16px 24px;
}

.dp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
}

.dp-row:last-child {
  border: none;
}

.dp-label {
  font-size: 11px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dp-value {
  font-family: var(--mono);
  font-size: 12px;
}

.dp-section {
  padding: 12px 24px;
  border-top: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
}

.dp-section-title {
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.dp-inheritors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.dp-child {
  padding: 6px 10px;
  border: 1px solid;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
}

.dp-child:hover {
  background: var(--glass-hover, rgba(255, 255, 255, 0.06));
  transform: scale(1.03);
}

.dp-intel {
  padding: 10px 24px;
  border-top: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
}

.dp-intel-label {
  font-size: 9px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dp-intel-label::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.dp-intel-value {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg);
}

.dp-dims {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dp-dim-missing {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 69, 58, 0.12);
  color: #ff453a;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 69, 58, 0.2);
}

.dp-learning-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  border-left: 2px solid rgba(0, 255, 136, 0.2);
  padding-left: 8px;
  margin-left: -2px;
}

.dp-learning-signal {
  color: var(--accent, #00ff88);
  font-weight: 600;
  margin-right: 4px;
}

.dp-learning-pattern {
  color: var(--fg);
  opacity: 0.8;
  flex: 1;
}

.dp-learning-date {
  color: var(--dim);
  font-size: 9px;
}

.dp-launch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(41, 151, 255, 0.2);
  background: linear-gradient(135deg, rgba(41, 151, 255, 0.12) 0%, rgba(41, 151, 255, 0.06) 100%);
  color: #2997ff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s;
  box-shadow: 0 0 12px rgba(41, 151, 255, 0.1);
}

.dp-launch:hover {
  background: linear-gradient(135deg, rgba(41, 151, 255, 0.25) 0%, rgba(41, 151, 255, 0.12) 100%);
  border-color: rgba(41, 151, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(41, 151, 255, 0.2);
}

.dp-score-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.dp-score-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: linear-gradient(90deg, #00ff88 0%, #2997ff 50%, #ffd60a 100%);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

/* ═══ FIX BUTTONS ═══ */
.dp-dim-fix {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 69, 58, 0.12);
  color: #ff453a;
  border: 1px solid rgba(255, 69, 58, 0.2);
  cursor: pointer;
  transition: all 0.25s;
  letter-spacing: 0.05em;
}

.dp-dim-fix:hover {
  background: rgba(0, 255, 136, 0.15);
  color: var(--accent, #00ff88);
  border-color: rgba(0, 255, 136, 0.3);
  transform: scale(1.05);
}

.dp-fix-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 255, 136, 0.2);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.12) 0%, rgba(0, 255, 136, 0.06) 100%);
  color: var(--accent, #00ff88);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
}

.dp-fix-all:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.25) 0%, rgba(0, 255, 136, 0.12) 100%);
  border-color: rgba(0, 255, 136, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.2);
}

/* ═══ INTEL SECTIONS (scope-aware content) ═══ */
.intel-section {
  padding: 10px 16px;
  border-top: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.06));
}

.intel-section-title {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.intel-section-title::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.intel-section-body {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg);
  line-height: 1.5;
}

/* ═══ INTEL TASKS (inside left drawer) ═══ */
.intel-tasks {
  padding: 0 8px 8px;
}

.intel-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.intel-task:hover {
  background: var(--glass-hover, rgba(255, 255, 255, 0.06));
  transform: translateX(2px);
}

.intel-task.active {
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.12);
}

.intel-task-bits {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  min-width: 28px;
  text-align: right;
}

.intel-task-info {
  flex: 1;
  min-width: 0;
}

.intel-task-name {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intel-task-action {
  font-size: 9px;
  color: var(--dim);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intel-task-gap {
  font-family: var(--mono);
  font-size: 8px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.1);
  color: var(--accent, #00ff88);
  white-space: nowrap;
}

.intel-task-fix {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(0, 255, 136, 0.15);
  background: rgba(0, 255, 136, 0.06);
  color: var(--accent, #00ff88);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  opacity: 0;
}

.intel-task:hover .intel-task-fix {
  opacity: 1;
}

.intel-task-fix:hover {
  background: rgba(0, 255, 136, 0.2);
  border-color: rgba(0, 255, 136, 0.3);
  transform: scale(1.1);
}

/* ═══ SEARCH BAR (centered bottom) ═══ */
.search-bar {
  position: absolute;
  bottom: calc(var(--space-sm, 16px) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  max-width: calc(100% - 40px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  animation: fadeSlideUpCenter 0.5s ease 0.2s both;
  transition: transform 0.4s cubic-bezier(0.34, 1, 0.64, 1), opacity 0.3s ease;
}

.search-bar.animated {
  animation: none;
}

.search-bar.collapsed {
  transform: translateX(-50%) translateY(calc(100% + 20px));
  pointer-events: none;
}

.search-peek {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 6px;
  border-radius: 6px 6px 0 0;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  z-index: 21;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, background 0.2s ease, height 0.2s ease;
}

.search-peek.visible {
  opacity: 1;
  pointer-events: auto;
}

.search-peek:hover {
  background: rgba(0, 255, 136, 0.3);
  height: 8px;
}

.search-results {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: var(--panel);
  border: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  -webkit-backdrop-filter: var(--blur-panel, blur(30px));
  backdrop-filter: var(--blur-panel, blur(30px));
  transition: max-height 0.35s cubic-bezier(0.34, 1, 0.64, 1), opacity 0.25s ease;
}

.search-results.open {
  max-height: 50vh;
  overflow-y: auto;
  opacity: 1;
}

.search-results::-webkit-scrollbar {
  width: 3px;
}

.search-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.search-results-inner {
  padding: 8px;
}

.search-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 0 14px;
  -webkit-backdrop-filter: var(--blur-panel, blur(30px));
  backdrop-filter: var(--blur-panel, blur(30px));
  box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.4)), 0 0 20px rgba(0, 255, 136, 0.06);
  position: relative;
}

.search-bar.has-results .search-input-bar {
  border-radius: 0 0 14px 14px;
}

.search-input-bar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -50%;
  right: -50%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #00ff88 20%, #2997ff 40%, #bf5af2 60%, #ffd60a 80%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 4s linear infinite;
  opacity: 0;
  transition: opacity 0.3s;
}

.search-bar:hover .search-input-bar::before, .search-bar.has-results .search-input-bar::before {
  opacity: 0.6;
}

.sb-icon {
  font-size: 14px;
  color: var(--dim);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  padding: 4px;
}

.sb-icon:hover {
  color: var(--fg);
  transform: scale(1.1);
}

.sb-icon.intel-toggle {
  color: var(--accent, #00ff88);
  opacity: 0.6;
}

.sb-icon.intel-toggle:hover {
  opacity: 1;
}

.sb-icon.detail-toggle {
  color: #2997ff;
  opacity: 0.6;
}

.sb-icon.detail-toggle:hover {
  opacity: 1;
}

.sb-input {
  flex: 1;
  padding: 12px 0;
  background: none;
  border: none;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  outline: none;
  letter-spacing: 0.02em;
}

.sb-input::placeholder {
  color: rgba(134, 134, 139, 0.5);
}

.sb-kbd {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  padding: 2px 6px;
  border: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
  opacity: 0.5;
  flex-shrink: 0;
}

.search-bar.has-results .sb-kbd {
  display: none;
}

/* Search result items */
.lp-section {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 0.15em;
  padding: 10px 12px 4px;
  text-transform: uppercase;
}

.lp-section:not(:first-child) {
  border-top: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  margin-top: 4px;
}

.lp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px 8px;
}

.lp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.lp-item:hover {
  background: var(--glass-hover, rgba(255, 255, 255, 0.06));
  border-color: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.lp-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-item:hover .lp-icon {
  box-shadow: 0 0 10px currentColor;
  border-color: currentColor;
}

.lp-info {
  flex: 1;
  min-width: 0;
}

.lp-name {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-meta {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--dim);
  margin-top: 1px;
}

.lp-launch {
  font-size: 14px;
  text-decoration: none;
  transition: all 0.25s;
  opacity: 0.5;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(41, 151, 255, 0.3));
}

.lp-item:hover .lp-launch {
  opacity: 1;
  transform: scale(1.15);
}

.lp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.lp-row:hover {
  background: var(--glass-hover, rgba(255, 255, 255, 0.06));
  border-color: rgba(255, 255, 255, 0.06);
  transform: translateX(2px);
}

.lp-row-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.lp-row-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  flex: 1;
  letter-spacing: 0.03em;
}

.lp-row-kind {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  padding: 2px 7px;
  border: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  border-radius: 5px;
}

.lp-row-bits {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  min-width: 28px;
  text-align: right;
}

.lp-row-coin {
  font-family: var(--mono);
  font-size: 10px;
  color: #ffd60a;
  text-shadow: 0 0 8px rgba(255, 214, 10, 0.3);
}

.lp-learning {
  border-left: 2px solid rgba(0, 255, 136, 0.3);
  margin-left: 4px;
  padding-left: 8px;
}

.lp-pattern {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg);
  opacity: 0.8;
  flex: 1;
}

.lp-source {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  white-space: nowrap;
}

/* ═══ TALK MODE (chat in search bar) ═══ */
.talk-mode-toggle {
  color: var(--dim);
  opacity: 0.5;
  transition: all 0.2s;
}

.talk-mode-toggle:hover {
  opacity: 0.8;
}

.talk-mode-toggle.active {
  color: #2997ff;
  opacity: 1;
  text-shadow: 0 0 8px rgba(41, 151, 255, 0.4);
}

.talk-msg {
  padding: 8px 12px;
  margin: 4px 0;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  word-wrap: break-word;
}

.talk-user {
  background: rgba(41, 151, 255, 0.08);
  border: 1px solid rgba(41, 151, 255, 0.12);
  margin-left: 24px;
}

.talk-assistant {
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.08);
  margin-right: 24px;
}

.talk-who {
  display: block;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-bottom: 3px;
  text-transform: uppercase;
}

.talk-text {
  white-space: pre-wrap;
}

/* Unicorn text */
.unicorn-text {
  background: linear-gradient(135deg, #00ff88, #2997ff, #bf5af2, #ffd60a, #ff6b6b, #00ff88);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: unicorn-shimmer 6s ease infinite;
}

/* Detail panel — holographic ring border */
.dp-ring-launch::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  opacity: 0;
  background: conic-gradient(from 0deg, #00ff88, #2997ff, #bf5af2, #ffd60a, #ff6b6b, #00ff88);
  z-index: -1;
  transition: opacity 0.4s;
  filter: blur(8px);
}

.dp-ring-launch:hover::after {
  opacity: 0.3;
}

/* Rocket hover glow */
.lp-launch:hover {
  filter: drop-shadow(0 0 8px rgba(41, 151, 255, 0.5)) drop-shadow(0 0 16px rgba(191, 90, 242, 0.3));
}

/* ═══ FINDER VIEW ═══ */
.finder-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-sm, 16px);
  padding-top: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

.finder-view::-webkit-scrollbar {
  width: 4px;
}

.finder-view::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

/* Breadcrumb */
.finder-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm, 16px) 0 var(--space-xs, 8px);
  font-family: var(--mono);
  font-size: 11px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg, #0a0a0f);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.bc-segment {
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--dim);
  transition: all 0.15s;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.bc-segment:hover {
  color: var(--fg);
  background: var(--glass-hover, rgba(255, 255, 255, 0.06));
}

.bc-segment.bc-active {
  color: var(--fg);
  font-weight: 600;
}

.bc-home {
  font-size: 13px;
  padding: 4px 8px;
}

.bc-sep {
  color: rgba(255, 255, 255, 0.15);
  font-size: 10px;
  -webkit-user-select: none;
  user-select: none;
}

/* Scope header (inside finder, below breadcrumb) */
.finder-scope-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--space-xs, 8px) 0 var(--space-sm, 16px);
  border-bottom: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  margin-bottom: var(--space-sm, 16px);
}

.fsh-ring {
  flex-shrink: 0;
}

.fsh-info {
  flex: 1;
  min-width: 0;
}

.fsh-name {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.fsh-tier {
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 2px;
}

.fsh-intel {
  font-size: 11px;
  color: var(--dim);
  margin-top: 4px;
  line-height: 1.4;
  max-width: 400px;
}

.fsh-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.fsh-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  background: transparent;
  color: var(--dim);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.fsh-toggle:hover {
  color: var(--fg);
  background: var(--glass-hover, rgba(255, 255, 255, 0.06));
}

.fsh-toggle.active {
  color: var(--accent, #00ff88);
  border-color: rgba(0, 255, 136, 0.2);
  background: rgba(0, 255, 136, 0.06);
}

/* Finder content — clear HUD panels */
.galaxy-surface .finder-breadcrumb,
.galaxy-surface .finder-scope-header,
.galaxy-surface .finder-grid {
  margin-left: 320px;
  margin-right: 16px;
}

/* Scope cards grid */
.finder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  padding-bottom: 80px;
}

.scope-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.06));
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all 0.2s;
  min-height: 56px;
}

.scope-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.scope-folder:hover {
  border-color: rgba(0, 255, 136, 0.15);
}

.sc-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.scope-card:hover .sc-icon {
  box-shadow: 0 0 10px currentColor;
  border-color: currentColor;
}

.sc-folder-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 7px;
  color: var(--accent, #00ff88);
  background: var(--bg, #0a0a0f);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-info {
  flex: 1;
  min-width: 0;
}

.sc-name {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg);
}

.sc-meta {
  display: flex;
  gap: 8px;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
}

.sc-tier {
  font-weight: 600;
}

.sc-coin {
  color: #ffd60a;
}

.sc-ring {
  flex-shrink: 0;
}

.finder-empty {
  text-align: center;
  padding: 48px 24px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.08em;
}

/* Mobile Finder */
@media (max-width: 768px) {
  .finder-grid {
    grid-template-columns: 1fr;
  }
  .finder-breadcrumb {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fsh-intel {
    display: none;
  }
  .sc-ring {
    display: none;
  }
}
/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .galaxy-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .galaxy-hero-text {
    padding: 80px var(--space-md) var(--space-md);
  }
  .search-bar {
    width: calc(100% - 32px);
  }
  .control-panel {
    min-width: 180px;
    padding: 10px 14px;
  }
  .cp-brand-title {
    font-size: 13px;
  }
  .cat-legend {
    display: none;
  }
  .left-drawer {
    width: 100%;
  }
  .right-drawer {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .galaxy-container--fullscreen {
    min-height: 400px;
  }
  .control-panel {
    left: var(--space-xs);
    padding: var(--space-2xs);
    max-width: 160px;
  }
  .galaxy-page .control-panel {
    top: calc(var(--header-offset) + var(--space-xs));
  }
}
@media (max-width: 480px) {
  .galaxy-container--fullscreen {
    min-height: 360px;
  }
  .search-bar {
    width: calc(100% - 24px);
  }
  .control-panel {
    left: var(--space-2xs);
    padding: var(--space-2xs);
    max-width: 140px;
  }
  .galaxy-page .control-panel {
    top: calc(var(--header-offset) + var(--space-2xs));
  }
}
/* ═══ FINDER VIEW ═══ */
.cp-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cp-greeting {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.04em;
}

.cp-username {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  opacity: 0.5;
  letter-spacing: 0.04em;
}

.finder-breadcrumb {
  position: absolute;
  top: var(--space-sm, 16px);
  left: var(--space-sm, 16px);
  right: var(--space-sm, 16px);
  z-index: 10;
  animation: fadeSlideUp 0.4s ease 0.15s both;
}

body.galaxy-surface .finder-breadcrumb ~ .control-panel {
  display: none;
}

.fb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.1));
  -webkit-backdrop-filter: var(--blur-panel, blur(30px));
  backdrop-filter: var(--blur-panel, blur(30px));
  box-shadow: var(--shadow, 0 4px 24px rgba(0, 0, 0, 0.5));
}

.fb-segments {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.fb-segment {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s;
  white-space: nowrap;
}
.fb-segment:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg);
}

.fb-current {
  color: var(--fg);
  font-weight: 600;
  cursor: default;
}
.fb-current:hover {
  background: transparent;
}

.fb-root {
  font-size: 12px;
  color: var(--accent, #00ff88);
  opacity: 0.6;
}
.fb-root:hover {
  opacity: 1;
}

.fb-sep {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  opacity: 0.3;
  margin: 0 1px;
}

.fb-toggle {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.fb-toggle-btn {
  font-family: var(--mono);
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 32px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.fb-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
}
.fb-toggle-btn.active {
  background: rgba(0, 255, 136, 0.08);
  color: var(--accent, #00ff88);
  border-color: rgba(0, 255, 136, 0.2);
}
.fb-toggle-btn i {
  font-size: 10px;
}

.finder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 12px var(--space-sm, 16px) 80px var(--space-sm, 16px);
  min-height: 100vh;
  align-content: start;
}

.finder-card {
  padding: 14px;
  border-radius: 12px;
  background: var(--panel, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.finder-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.fc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.fc-icon {
  font-size: 18px;
  opacity: 0.8;
}

.fc-ring {
  flex-shrink: 0;
}

.fc-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9px;
}

.fc-bits {
  font-weight: 700;
}

.fc-children {
  color: var(--dim);
  opacity: 0.5;
}

.fc-coin {
  color: #ffd60a;
  font-weight: 600;
}

.fc-hud {
  background: var(--panel, rgba(255, 255, 255, 0.04));
  border-color: rgba(0, 255, 136, 0.15);
}

.fc-hud-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  object-fit: cover;
}

.fb-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-right: 8px;
  padding-right: 10px;
  border-right: 1px solid var(--glass-strong, rgba(255, 255, 255, 0.08));
}

.fb-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.fb-ring {
  flex-shrink: 0;
}

.fb-coin {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: #ffd60a;
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fb-coin i {
  font-size: 9px;
}

.talk-mode-toggle.active {
  color: var(--accent, #00ff88);
  background: rgba(0, 255, 136, 0.1);
  border-radius: 50%;
}

@media (max-width: 768px) {
  .finder-grid {
    padding: 12px var(--space-sm, 8px) 80px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .galaxy-surface-container .control-panel {
    display: none;
  }
}
@media (max-width: 480px) {
  .finder-grid {
    padding: 8px 8px 80px;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .finder-card {
    padding: 10px;
  }
  .fc-label {
    font-size: 10px;
  }
  .fc-meta {
    font-size: 8px;
  }
  .fc-hud {
    grid-column: 1/-1;
  }
  .finder-breadcrumb {
    display: none;
  }
  .galaxy-surface-container .control-panel {
    display: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   LAYER 13 — DEMO MOCK (iPhone Preview Primitive)
   ═══════════════════════════════════════════════════════════════════

   Animated product demo in a device frame.
   Chat messages cycle on a 24s animation.
   render.js builds from CONTENT.json hero.demo.

   Usage:
     <div class="hero-split">
       <div class="hero-split-inner">
         <div class="hero-content">...</div>
         <div class="device-container">
           <div class="device-glow"></div>
           <div class="iphone"><div class="iphone-screen">...</div></div>
         </div>
       </div>
     </div>

   ═══════════════════════════════════════════════════════════════════ */
/* Split hero layout */
.hero-split {
  padding: calc(var(--header-offset) + 28px) var(--space-md) var(--space-xl);
  background: linear-gradient(180deg, rgba(var(--accent-rgb, 96, 165, 250), 0.06) 0%, var(--bg) 100%);
}

.hero-split-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.hero-content {
  max-width: 560px;
}

.hero-content h1 {
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--space-md);
}

.hero-content h1 .accent {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}

.hero-content p {
  font-size: var(--font-lg);
  color: var(--dim);
  line-height: 1.7;
  margin-bottom: var(--space-md-lg);
}

/* Device frame */
.device-container {
  position: relative;
  text-align: center;
}

.device-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(var(--accent-rgb, 96, 165, 250), 0.12) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.iphone {
  position: relative;
  width: 300px;
  height: 620px;
  background: var(--card);
  border-radius: 50px;
  padding: var(--space-xs-sm);
  margin: 0 auto;
  box-shadow: 0 0 0 1px var(--glass-hover), var(--shadow-lg);
  z-index: 1;
  animation: device-pulse 3s ease-in-out infinite;
  transition: transform 0.3s var(--spring);
}

.iphone::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 32px;
  background: var(--card);
  border-radius: 0 0 18px 18px;
  z-index: 10;
}

.iphone-screen {
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: 42px;
  overflow: hidden;
}

.iphone:hover {
  transform: scale(1.02);
}

@keyframes device-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px var(--glass-hover), var(--shadow-lg), 0 0 0 4px rgba(var(--accent-rgb, 96, 165, 250), 0.3);
  }
  50% {
    box-shadow: 0 0 0 1px var(--glass-hover), var(--shadow-lg), 0 0 0 8px rgba(var(--accent-rgb, 96, 165, 250), 0.15), 0 0 60px rgba(var(--accent-rgb, 96, 165, 250), 0.3);
  }
}
/* Chat preview */
.app-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, rgba(var(--demo-accent-rgb, 236, 72, 153), 0.06) 0%, var(--bg) 100%);
  overflow: hidden;
}

.chat-header {
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--demo-accent, var(--pink));
  padding: var(--space-xs-sm);
  border-bottom: 1px solid rgba(var(--demo-accent-rgb, 236, 72, 153), 0.2);
  text-align: center;
  flex-shrink: 0;
}

.chat-messages {
  flex: 1;
  overflow: hidden;
  padding: var(--space-xs-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  animation: demo-scroll 24s infinite;
}

.chat-msg {
  opacity: 0;
  transform: translateY(10px);
}

.chat-user {
  background: var(--demo-accent, var(--pink));
  color: white;
  padding: var(--space-xs-sm) var(--space-xs-sm);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
  font-size: var(--font-xs);
  margin-left: 20%;
  align-self: flex-end;
}

.chat-bot {
  background: var(--glass-strong, rgba(255, 255, 255, 0.12));
  color: var(--fg);
  padding: var(--space-xs-sm) var(--space-xs-sm);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  font-size: var(--font-xs);
  margin-right: 15%;
  line-height: 1.5;
  align-self: flex-start;
}

.chat-cite {
  font-size: 9px;
  color: var(--dim);
  padding-left: var(--space-xs);
  align-self: flex-start;
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: var(--space-xs-sm) var(--space-sm);
  background: var(--bg);
  border-radius: var(--radius-lg);
  width: fit-content;
  margin-right: 60%;
  opacity: 0;
}

.typing-indicator span {
  width: 6px;
  height: 6px;
  background: var(--demo-accent, var(--pink));
  border-radius: 50%;
  animation: typing-bounce 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
/* Chat input area */
.chat-input-area {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-xs-sm);
  background: var(--bg);
  border-top: 1px solid rgba(var(--demo-accent-rgb, 236, 72, 153), 0.15);
  flex-shrink: 0;
  align-items: center;
}

.chat-input {
  flex: 1;
  padding: var(--space-xs) var(--space-xs-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  font-size: var(--font-2xs);
  color: var(--fg);
  background: var(--bg);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 28px;
}

.input-text-wrapper {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  opacity: 0;
}

.input-text {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  max-width: 0;
}

.input-cursor {
  display: inline-block;
  width: 2px;
  height: 12px;
  background: var(--demo-accent, var(--pink));
  margin-left: 1px;
  animation: blink-cursor 0.7s infinite;
}

.chat-send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--demo-accent, var(--pink));
  color: white;
  font-size: var(--font-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Demo scroll animation (24s cycle)
   Scroll tracks the conversation: nudge up as messages stack.
   2-exchange demo (5 msgs): content ~300px, viewport ~520px → scroll -80px max.
   4-exchange demo (10 msgs): content ~600px → scroll -480px.
   Scroll stages match message appearance timings. */
/* Scroll resets at 92% AFTER msgs fade at 88% — no visible jump on cycle restart */
@keyframes demo-scroll {
  0%, 8% {
    transform: translateY(0);
  }
  18%, 28% {
    transform: translateY(-40px);
  }
  38%, 86% {
    transform: translateY(-80px);
  }
  92%, 100% {
    transform: translateY(0);
  }
}
/* Chat message animations (24s cycle)
   Pattern per exchange: user types → send → typing dots → bot reply (+ optional cite)
   MammoChat has 2 exchanges (5 msgs + 2 typing), but up to 10 msgs + 4 typing supported.

   Sequence for 2-exchange demo (MammoChat):
     0-8%   input-1 types        → user typing in input bar
     8-10%  msg-1 appears         → user message bubble
     10-16% typing-1 appears      → bot thinking dots
     16-18% msg-2 appears         → bot response
     18-20% msg-3 appears         → citation
     28-30% input-2 types         → user typing in input bar
     30-32% msg-4 appears         → user message bubble
     32-38% typing-2 appears      → bot thinking dots
     38-40% msg-5 appears         → bot response
     hold until 95%, then fade all out at 98%.
*/
.msg-1 {
  animation: msg1 24s infinite;
}

.msg-2 {
  animation: msg2 24s infinite;
}

.msg-3 {
  animation: msg3 24s infinite;
}

.msg-4 {
  animation: msg4 24s infinite;
}

.msg-5 {
  animation: msg5 24s infinite;
}

.msg-6 {
  animation: msg6 24s infinite;
}

.msg-7 {
  animation: msg7 24s infinite;
}

.msg-8 {
  animation: msg8 24s infinite;
}

.msg-9 {
  animation: msg9 24s infinite;
}

.msg-10 {
  animation: msg10 24s infinite;
}

.typing-1 {
  animation: typ1 24s infinite;
}

.typing-2 {
  animation: typ2 24s infinite;
}

.typing-3 {
  animation: typ3 24s infinite;
}

.typing-4 {
  animation: typ4 24s infinite;
}

/* Message + typing animations (24s cycle)
   Msgs fade at 88% BEFORE scroll resets at 92% — prevents visible jump on cycle restart.
   Sequence: type in bar → user bubble → typing dots → bot reply → cite → repeat */
@keyframes msg1 {
  0%, 8% {
    opacity: 0;
    transform: translateY(8px);
  }
  10%, 86% {
    opacity: 1;
    transform: translateY(0);
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes typ1 {
  0%, 10% {
    opacity: 0;
  }
  12%, 16% {
    opacity: 1;
  }
  18%, 100% {
    opacity: 0;
  }
}
@keyframes msg2 {
  0%, 16% {
    opacity: 0;
    transform: translateY(8px);
  }
  18%, 86% {
    opacity: 1;
    transform: translateY(0);
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes msg3 {
  0%, 18% {
    opacity: 0;
  }
  20%, 86% {
    opacity: 1;
  }
  88%, 100% {
    opacity: 0;
  }
}
@keyframes msg4 {
  0%, 30% {
    opacity: 0;
    transform: translateY(8px);
  }
  32%, 86% {
    opacity: 1;
    transform: translateY(0);
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes typ2 {
  0%, 32% {
    opacity: 0;
  }
  34%, 38% {
    opacity: 1;
  }
  40%, 100% {
    opacity: 0;
  }
}
@keyframes msg5 {
  0%, 38% {
    opacity: 0;
    transform: translateY(8px);
  }
  40%, 86% {
    opacity: 1;
    transform: translateY(0);
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes msg6 {
  0%, 52% {
    opacity: 0;
    transform: translateY(8px);
  }
  54%, 86% {
    opacity: 1;
    transform: translateY(0);
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes typ3 {
  0%, 54% {
    opacity: 0;
  }
  56%, 60% {
    opacity: 1;
  }
  62%, 100% {
    opacity: 0;
  }
}
@keyframes msg7 {
  0%, 60% {
    opacity: 0;
    transform: translateY(8px);
  }
  62%, 86% {
    opacity: 1;
    transform: translateY(0);
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes msg8 {
  0%, 72% {
    opacity: 0;
    transform: translateY(8px);
  }
  74%, 86% {
    opacity: 1;
    transform: translateY(0);
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes typ4 {
  0%, 74% {
    opacity: 0;
  }
  76%, 80% {
    opacity: 1;
  }
  82%, 100% {
    opacity: 0;
  }
}
@keyframes msg9 {
  0%, 80% {
    opacity: 0;
    transform: translateY(8px);
  }
  82%, 86% {
    opacity: 1;
    transform: translateY(0);
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes msg10 {
  0%, 82% {
    opacity: 0;
  }
  84%, 86% {
    opacity: 1;
  }
  88%, 100% {
    opacity: 0;
  }
}
/* Typewriter input animations */
.input-wrapper-1 {
  animation: si1 24s infinite;
}

.input-wrapper-1 .input-text {
  animation: st1 24s infinite;
}

.input-wrapper-2 {
  animation: si2 24s infinite;
}

.input-wrapper-2 .input-text {
  animation: st2 24s infinite;
}

.input-wrapper-3 {
  animation: si3 24s infinite;
}

.input-wrapper-3 .input-text {
  animation: st3 24s infinite;
}

.input-wrapper-4 {
  animation: si4 24s infinite;
}

.input-wrapper-4 .input-text {
  animation: st4 24s infinite;
}

/* Typewriter: input-1 types 0-8% (before msg-1), input-2 types 22-30% (before msg-4) */
@keyframes si1 {
  0%, 8% {
    opacity: 1;
  }
  9%, 100% {
    opacity: 0;
  }
}
@keyframes st1 {
  0% {
    max-width: 0;
  }
  2% {
    max-width: 60px;
  }
  4% {
    max-width: 120px;
  }
  6%, 8% {
    max-width: 200px;
  }
  9%, 100% {
    max-width: 0;
  }
}
@keyframes si2 {
  0%, 22% {
    opacity: 0;
  }
  23%, 30% {
    opacity: 1;
  }
  31%, 100% {
    opacity: 0;
  }
}
@keyframes st2 {
  0%, 22% {
    max-width: 0;
  }
  24% {
    max-width: 50px;
  }
  26% {
    max-width: 100px;
  }
  28%, 30% {
    max-width: 200px;
  }
  31%, 100% {
    max-width: 0;
  }
}
@keyframes si3 {
  0%, 44% {
    opacity: 0;
  }
  45%, 52% {
    opacity: 1;
  }
  53%, 100% {
    opacity: 0;
  }
}
@keyframes st3 {
  0%, 44% {
    max-width: 0;
  }
  46% {
    max-width: 50px;
  }
  48% {
    max-width: 100px;
  }
  50%, 52% {
    max-width: 200px;
  }
  53%, 100% {
    max-width: 0;
  }
}
@keyframes si4 {
  0%, 64% {
    opacity: 0;
  }
  65%, 72% {
    opacity: 1;
  }
  73%, 100% {
    opacity: 0;
  }
}
@keyframes st4 {
  0%, 64% {
    max-width: 0;
  }
  66% {
    max-width: 50px;
  }
  68% {
    max-width: 100px;
  }
  70%, 72% {
    max-width: 200px;
  }
  73%, 100% {
    max-width: 0;
  }
}
/* Send button pulses when user message fires (at 8%, 30% for 2-exchange demo) */
@keyframes send-pulse {
  0%, 7% {
    transform: scale(1);
  }
  8% {
    transform: scale(0.8);
    box-shadow: 0 0 12px rgba(var(--demo-accent-rgb, 236, 72, 153), 0.6);
  }
  9%, 29% {
    transform: scale(1);
    box-shadow: none;
  }
  30% {
    transform: scale(0.8);
    box-shadow: 0 0 12px rgba(var(--demo-accent-rgb, 236, 72, 153), 0.6);
  }
  31%, 51% {
    transform: scale(1);
    box-shadow: none;
  }
  52% {
    transform: scale(0.8);
    box-shadow: 0 0 12px rgba(var(--demo-accent-rgb, 236, 72, 153), 0.6);
  }
  53%, 71% {
    transform: scale(1);
    box-shadow: none;
  }
  72% {
    transform: scale(0.8);
    box-shadow: 0 0 12px rgba(var(--demo-accent-rgb, 236, 72, 153), 0.6);
  }
  80%, 100% {
    transform: scale(1);
    box-shadow: none;
  }
}
.chat-send {
  animation: send-pulse 24s infinite;
}

/* Demo — responsive */
@media (max-width: 768px) {
  .hero-split-inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .hero-split {
    padding: calc(var(--header-offset) + 20px) var(--space-md) var(--space-lg);
  }
  .device-container {
    order: -1;
  }
  .iphone {
    width: 240px;
    height: 500px;
  }
  @keyframes demo-scroll {
    0%, 8% {
      transform: translateY(0);
    }
    18%, 28% {
      transform: translateY(-30px);
    }
    38%, 92% {
      transform: translateY(-60px);
    }
    96%, 100% {
      transform: translateY(0);
    }
  }
}
@media (max-width: 640px) {
  .hero-content h1 {
    font-size: 32px;
  }
  .iphone {
    width: 200px;
    height: 420px;
  }
  @keyframes demo-scroll {
    0%, 8% {
      transform: translateY(0);
    }
    18%, 28% {
      transform: translateY(-20px);
    }
    38%, 92% {
      transform: translateY(-40px);
    }
    96%, 100% {
      transform: translateY(0);
    }
  }
}
/* ═══════════════════════════════════════════════════════════════════
   TERMINAL MOCKUP — "The Machine" hero demo (canonic.org)
   apple.com/developer aesthetic: compiler output in a terminal window
   ═══════════════════════════════════════════════════════════════════ */
/* Terminal tabs — matches demo tab pattern */
.terminal-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.terminal-tab {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--glass-hover);
  background: transparent;
  color: var(--dim);
  font-size: var(--font-xs);
  cursor: pointer;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
}

.terminal-tab:hover {
  border-color: var(--accent);
  color: var(--fg);
}

.terminal-tab.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

.terminal-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.terminal-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.terminal {
  position: relative;
  width: 440px;
  background: #0d0d0d;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--glass-hover), var(--shadow-lg);
  z-index: 1;
  overflow: hidden;
  font-family: var(--mono);
  text-align: left;
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.terminal-dot.red {
  background: #ff5f57;
}

.terminal-dot.yellow {
  background: #febc2e;
}

.terminal-dot.green {
  background: #28c840;
}

.terminal-title {
  flex: 1;
  text-align: center;
  font-size: var(--font-xs);
  color: var(--dim);
  letter-spacing: 0.04em;
}

.terminal-body {
  padding: 16px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--dim);
  height: 220px;
  overflow-y: auto;
  scrollbar-width: none;
}

.terminal-body::-webkit-scrollbar {
  display: none;
}

.terminal-prompt {
  color: var(--accent);
  font-weight: 700;
}

.terminal-line {
  opacity: 0;
  animation: term-fade-in 0.3s ease forwards;
}

/* Stagger: each line fades in 0.35s after the previous */
.tl-1 {
  animation-delay: 0.3s;
}

.tl-2 {
  animation-delay: 0.7s;
}

.tl-3 {
  animation-delay: 1.1s;
}

.tl-4 {
  animation-delay: 1.5s;
}

.tl-5 {
  animation-delay: 1.9s;
}

.tl-6 {
  animation-delay: 2.3s;
}

.tl-7 {
  animation-delay: 2.7s;
}

.tl-8 {
  animation-delay: 3.1s;
}

.tl-9 {
  animation-delay: 3.5s;
}

.tl-10 {
  animation-delay: 3.9s;
}

.tl-11 {
  animation-delay: 4.5s;
}

.tl-12 {
  animation-delay: 5s;
}

.tl-13 {
  animation-delay: 5.5s;
}

.tl-14 {
  animation-delay: 6s;
}

.tl-15 {
  animation-delay: 6.5s;
}

.tl-16 {
  animation-delay: 7s;
}

.tl-17 {
  animation-delay: 7.5s;
}

.tl-18 {
  animation-delay: 8s;
}

.tl-19 {
  animation-delay: 8.5s;
}

.tl-20 {
  animation-delay: 9s;
}

@keyframes term-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Terminal responsive */
@media (max-width: 768px) {
  .terminal {
    width: 100%;
    max-width: 380px;
  }
  .terminal-body {
    height: 200px;
  }
}
@media (max-width: 640px) {
  .terminal {
    max-width: 320px;
  }
  .terminal-body {
    font-size: 11px;
    height: 180px;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   LAYER 14 — PRODUCTS, DEALS & GOVERNANCE
   ═══════════════════════════════════════════════════════════════════

   Product cards, status badges, deal grids, governance banners.
   Shared across any scope that has products/deals.

   ═══════════════════════════════════════════════════════════════════ */
/* Section eyebrow */
.section-eyebrow {
  font-family: var(--mono);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--space-xs-sm);
}

.section-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm-md);
}

/* Apps grid */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-sm);
}

/* App icon variants — gradient backgrounds */
.app-icon.mammo {
  background: linear-gradient(135deg, var(--services), var(--pink-light));
}

.app-icon.onco {
  background: linear-gradient(135deg, var(--accent), var(--blue-light));
}

.app-icon.med {
  background: linear-gradient(135deg, var(--green), var(--green));
}

.app-icon.ip {
  background: linear-gradient(135deg, var(--commerce), var(--commerce));
}

.app-icon.deal {
  background: linear-gradient(135deg, var(--commerce), var(--governance));
}

.app-card .app-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  margin-bottom: var(--space-xs-sm);
  color: var(--fg);
}

/* App badge (status pill) */
.app-badge {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: 3px var(--space-xs);
  border-radius: var(--radius-xs);
  font-size: var(--font-2xs);
  font-weight: 700;
}

/* Status badge (positioned) */
.status-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  background: var(--pink);
  color: var(--fg);
  padding: var(--space-2xs) var(--space-xs-sm);
  border-radius: var(--radius-xl);
  font-size: var(--font-xs);
  font-weight: 600;
}

/* Primitive card (INTEL/CHAT/COIN) */
.primitive-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: var(--space-md-lg);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: border-color var(--transition-base) var(--spring), transform var(--transition-base) var(--spring);
  position: relative;
}

.primitive-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-lg);
  background: var(--glass-hover);
}

.primitive-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-2xl, 28px);
  margin: 0 auto var(--space-sm-md);
  color: var(--fg);
}

/* Governance banner */
.governance-banner {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(0, 0, 0, 0.4));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.05);
}

/* Governance banner — responsive */
@media (max-width: 768px) {
  .governance-banner {
    flex-direction: column;
    padding: var(--space-md-lg);
  }
}
/* ═══════════════════════════════════════════════════════════════════
   LAYER 15 — ABOUT & TIERS
   ═══════════════════════════════════════════════════════════════════

   Founder section, avatar, tags.
   Tier pricing cards.
   MAGIC-specific content blocks: axiom, flow, prim, comp-table, CTA.

   ═══════════════════════════════════════════════════════════════════ */
/* About — Vitae */
.about-section {
  max-width: 720px;
  margin: 0 auto;
}

.about-identity {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.about-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--blue-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-md-lg, 32px);
  font-weight: 700;
  color: var(--fg);
  margin: 0 auto var(--space-md);
  box-shadow: var(--shadow);
}

.about-name {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}

.about-title {
  font-size: var(--font-base);
  color: var(--dim);
  margin-bottom: var(--space-xs);
  line-height: 1.5;
}

.about-location {
  font-size: var(--font-sm);
  color: var(--dim);
  opacity: 0.7;
  margin-bottom: var(--space-xs-sm);
}

.about-tagline {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm-md);
}

.about-links {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.about-link {
  font-size: var(--font-sm);
  color: var(--accent);
  text-decoration: none;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  transition: all 0.25s var(--spring);
}

.about-link:hover {
  background: var(--glass-subtle);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.about-tags {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.about-tag {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--fg);
  background: var(--glass-subtle);
  transition: all 0.25s var(--spring);
}

.about-tag:hover {
  border-color: var(--accent);
  background: var(--glass-border);
}

.about-section-title {
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: var(--space-sm-md);
  font-weight: 600;
}

.about-pubs {
  margin-bottom: var(--space-lg);
}

.about-pub {
  padding: var(--space-xs-sm) 0;
  border-bottom: 1px solid var(--glass-subtle);
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--dim);
}

.about-pub:last-child {
  border-bottom: none;
}

.about-pub-authors {
  color: var(--fg);
  font-weight: 500;
}

.about-pub-journal {
  color: var(--accent);
}

.about-lineage {
  margin-bottom: var(--space-lg);
}

.lineage-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: var(--space-sm) 0;
  position: relative;
}

.lineage-track::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
}

.lineage-node {
  flex: 1;
  min-width: 100px;
  text-align: center;
  position: relative;
}

.lineage-year {
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--accent);
  font-family: var(--mono);
  margin-bottom: var(--space-xs);
}

.lineage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 auto var(--space-xs);
  box-shadow: 0 0 12px rgba(var(--runtime-rgb), 0.3);
  position: relative;
  z-index: 1;
}

.lineage-milestone {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--space-2xs);
}

.lineage-work {
  font-size: var(--font-xs);
  color: var(--dim);
  font-family: var(--mono);
}

.about-orgs {
  display: flex;
  gap: var(--space-xs-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.about-org {
  font-size: var(--font-2xs);
  font-weight: 600;
  color: var(--dim);
  padding: var(--space-2xs) var(--space-xs-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
}

.about-org-year {
  color: var(--accent);
  font-size: var(--font-xs);
}

/* Tiers */
.tier {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md-lg);
  text-align: center;
  transition: border-color var(--transition-base) var(--spring), transform var(--transition-base) var(--spring);
}

.tier:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.tier.featured {
  border: 2px solid var(--accent);
  position: relative;
}

.tier.featured::after {
  content: "POPULAR";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--bg);
  padding: 3px var(--space-xs-sm);
  border-radius: var(--radius-xl);
  font-size: var(--font-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.tier-name {
  font-size: var(--font-sm-md, 20px);
  font-weight: 700;
  margin-bottom: var(--space-2xs);
}

.tier-price {
  font-size: 36px;
  font-weight: 700;
  color: var(--accent);
  margin: var(--space-sm) 0 var(--space-2xs);
  line-height: 1;
}

.tier-price-sub {
  font-size: var(--font-sm);
  color: var(--dim);
  margin-bottom: var(--space-sm-md);
}

.tier-list {
  list-style: none;
  text-align: left;
  margin-bottom: var(--space-md);
}

.tier-list li {
  padding: var(--space-xs) 0;
  font-size: var(--font-sm);
  color: var(--dim);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.tier-list li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  font-size: var(--font-2xs);
}

.tier-list li:last-child {
  border: none;
}

.tier-cta {
  display: inline-block;
  padding: var(--space-xs-sm) 28px;
  border-radius: var(--radius);
  font-size: var(--font-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-base) var(--spring), box-shadow var(--transition-base);
}

.tier-cta:hover {
  transform: translateY(-2px);
}

.tier-cta-primary {
  background: var(--accent);
  color: var(--bg);
}

.tier-cta-secondary {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--fg);
}

/* Axiom block (MAGIC) */
.axiom-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md-lg);
  margin-bottom: var(--space-sm-md);
}

.axiom-block h3 {
  color: var(--accent);
  font-size: var(--font-sm-md, 20px);
  margin-bottom: var(--space-xs-sm);
}

.axiom-block p {
  color: var(--dim);
  font-size: var(--font-sm);
  line-height: 1.7;
}

/* Flow diagram */
.flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs-sm);
  flex-wrap: wrap;
  padding: var(--space-md) 0;
}

.flow-node {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-xs-sm) 22px;
  font-weight: 600;
  font-size: var(--font-sm);
  transition: border-color var(--transition-base) var(--spring), transform var(--transition-base) var(--spring);
}

.flow-node:hover {
  transform: translateY(-1px);
}

.flow-node.accent {
  border-color: var(--accent);
  color: var(--accent);
}

.flow-arrow {
  color: var(--accent);
  font-size: var(--font-lg);
}

/* Prim card (MAGIC primitives) */
.prim {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: border-color var(--transition-base) var(--spring), transform var(--transition-base) var(--spring);
}

.prim:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.prim h3 {
  font-size: var(--font-lg);
  margin-bottom: var(--space-2xs);
}

/* Compositions table */
.comp-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-md);
}

.comp-table th {
  text-align: left;
  padding: var(--space-xs-sm) var(--space-sm);
  font-size: var(--font-2xs);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}

.comp-table td {
  padding: var(--space-xs-sm) var(--space-sm);
  font-size: var(--font-sm);
  border-bottom: 1px solid var(--border);
}

.comp-table td:first-child {
  font-weight: 600;
}

.comp-table .formula {
  font-family: var(--mono);
  color: var(--accent);
  font-size: var(--font-sm);
}

.comp-table .desc {
  color: var(--dim);
}

/* How it works */
.how-card {
  text-align: center;
  padding: var(--space-md);
}

.how-icon {
  font-size: 32px;
  margin-bottom: var(--space-xs-sm);
}

.how-card h3 {
  margin-bottom: var(--space-xs);
}

/* CTA block */
.cta {
  background: linear-gradient(135deg, rgba(var(--runtime-rgb), 0.08), var(--scrim));
  border: 1px solid rgba(var(--runtime-rgb), 0.2);
  text-align: center;
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.cta h3 {
  font-size: 28px;
  margin-bottom: var(--space-xs-sm);
  color: var(--accent);
}

.cta p {
  color: var(--dim);
  margin-bottom: var(--space-md);
}

.cta-buttons {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

[data-theme=light] .cta {
  background: rgba(var(--runtime-rgb), 0.04);
  border-color: rgba(var(--runtime-rgb), 0.12);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .cta {
    background: rgba(var(--runtime-rgb), 0.04);
    border-color: rgba(var(--runtime-rgb), 0.12);
  }
}
/* ═══════════════════════════════════════════════════════════════════
   LAYER 16 — FOUNDATION COMPONENTS
   Step numbers, question cards, industries, shop cards, MAGIC validation blocks.
   Migrated from Foundation inline CSS. Zero inline styles.
   ═══════════════════════════════════════════════════════════════════ */
/* How-it-works step numbers */
.step-num {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), var(--knowledge));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: var(--space-sm);
}

/* Question / idiom cards */
.q-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: border-color 0.25s var(--spring), transform 0.25s var(--spring);
}

.q-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.q-card h3 {
  font-size: var(--font-lg);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}

/* Sector cards */
.sector {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  transition: border-color 0.25s var(--spring), transform 0.25s var(--spring);
}

.sector:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.sector-icon {
  font-size: 32px;
  margin-bottom: var(--space-xs);
}

.sector h3 {
  font-size: var(--font-sm);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}

/* Shop / library cards */
.shop-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: border-color 0.25s var(--spring), transform 0.25s var(--spring);
}

.shop-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.shop-card h3 {
  font-size: var(--font-lg);
  margin-bottom: var(--space-xs);
}

.shop-card p {
  font-size: var(--font-sm);
  color: var(--dim);
  line-height: 1.6;
}

/* MAGIC validation feature blocks */
.magic-validation {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), var(--scrim));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.magic-validation-content {
  flex: 1;
}

.magic-validation-eyebrow {
  font-size: var(--font-xs);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs-sm);
}

.magic-validation-title {
  font-size: var(--font-2xl);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

.magic-validation-desc {
  color: var(--dim);
  line-height: 1.7;
  font-size: var(--font-base);
}

.magic-validation-tags {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

.magic-validation-tag {
  padding: var(--space-2xs) var(--space-xs-sm);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 600;
}

.magic-validation-mark {
  font-size: 80px;
  opacity: 0.6;
  color: var(--accent);
  display: inline-block;
}

/* CTA section */
.cta-section {
  text-align: center;
}

.cta-title {
  font-size: var(--font-2xl);
  font-weight: 700;
  margin-bottom: var(--space-xs-sm);
}

.cta-desc {
  font-size: var(--font-lg);
  color: var(--dim);
  margin-bottom: var(--space-md-lg);
}

/* MAGIC validation + governance-banner responsive */
@media (max-width: 768px) {
  .magic-validation {
    flex-direction: column;
    padding: var(--space-md);
  }
  .magic-validation-mark {
    display: none;
  }
}
[data-theme=light] .magic-validation {
  background: rgba(var(--accent-rgb), 0.04);
  border-color: rgba(var(--accent-rgb), 0.12);
}

/* ═══════════════════════════════════════════════════════════════════
   MAGIC DESIGN | CANONIC FLEET | 2026-02-12
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   LAYER 17 — SHOP (Composable Commerce)
   ═══════════════════════════════════════════════════════════════════

   SHOP = COIN + WALLET projection
   Composable via frontmatter: shop: true|inline
   Same pattern as TALK: one include, one script, one layer.

   HTML contract:
   <div class="shop" id="shopRoot" data-mode="catalog|inline">
       <div class="shop-header" id="shopHeader">...</div>
       <div class="shop-products" id="shopProducts">...</div>
       <div class="shop-bag-overlay" id="shopBag">...</div>
   </div>

   ═══════════════════════════════════════════════════════════════════ */
/* ── Shop root ── */
.shop {
  position: relative;
}

/* ── Header: wallet balance + bag button ── */
.shop-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs-sm);
  padding: var(--space-xs) 0;
  margin-bottom: var(--space-sm);
}

.shop-balance {
  font-family: var(--mono);
  font-size: var(--font-sm);
  color: var(--fg-secondary, var(--dim));
  display: none;
}

.shop-bag-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xs) var(--space-xs-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  transition: var(--transition-base);
}
.shop-bag-btn:hover {
  border-color: var(--accent);
}

.shop-bag-count {
  display: none;
  background: var(--accent);
  color: var(--bg);
  font-size: var(--font-xs);
  font-weight: 700;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  margin-left: var(--space-2xs);
  display: inline-block;
}

/* ── Product grid ── */
.shop-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm-md);
  margin: var(--space-sm) 0 var(--space-md-lg);
}

.shop-empty {
  color: var(--fg-secondary, var(--dim));
  font-size: var(--font-sm);
  text-align: center;
  padding: var(--space-lg) 0;
}

/* ── Product card — Apple-minimal ── */
.shop-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base) ease, transform var(--transition-base) ease;
  display: flex;
  flex-direction: column;
}
.shop-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.shop-card-cover {
  width: 100%;
  height: 160px;
  background-size: cover;
  background-position: center;
}

.shop-card-gradient {
  background: linear-gradient(135deg, var(--accent) 0%, var(--card) 100%);
}

.shop-card-body {
  padding: var(--space-xs-sm) var(--space-sm) var(--space-xs);
  flex: 1;
}

.shop-card-eyebrow {
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-secondary, var(--dim));
  margin-bottom: var(--space-2xs);
}

.shop-card-title {
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-2xs);
  color: var(--fg);
}

.shop-card-synopsis {
  font-size: var(--font-sm);
  color: var(--fg-secondary, var(--dim));
  line-height: 1.5;
  margin-bottom: var(--space-xs);
}

.shop-card-status {
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-secondary, var(--dim));
  margin-bottom: var(--space-2xs);
}

.shop-card-price {
  font-family: var(--mono);
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--fg);
}

/* ── Single CTA per card ── */
.shop-card-cta {
  width: 100%;
  padding: var(--space-xs-sm);
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: var(--transition-base);
}
.shop-card-cta:hover {
  background: rgba(var(--accent-rgb), 0.06);
}

.shop-card-cta-free {
  color: var(--fg);
}

/* ── Bag overlay — slide from right (like TALK overlay) ── */
.shop-bag-overlay {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  transition: var(--transition-base);
  box-shadow: var(--shadow-lg);
}
.shop-bag-overlay.open {
  right: 0;
}

.shop-bag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-sm-md);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-lg);
  font-weight: 600;
}

.shop-bag-close {
  background: transparent;
  border: none;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

.shop-bag-items {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xs-sm) var(--space-sm-md);
}

.shop-bag-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs-sm) 0;
  border-bottom: 1px solid var(--border);
}

.shop-bag-item-title {
  font-size: var(--font-base);
  font-weight: 500;
}

.shop-bag-item-price {
  font-family: var(--mono);
  font-size: var(--font-sm);
  color: var(--fg-secondary, var(--dim));
}

.shop-bag-item-remove {
  background: transparent;
  border: none;
  font-size: var(--font-sm);
  color: var(--fg-secondary, var(--dim));
  cursor: pointer;
}
.shop-bag-item-remove:hover {
  color: var(--red);
}

.shop-bag-footer {
  padding: var(--space-sm) var(--space-sm-md);
  border-top: 1px solid var(--border);
}

.shop-bag-total {
  font-family: var(--mono);
  font-size: var(--font-xl);
  font-weight: 700;
  margin-bottom: var(--space-xs-sm);
}

.shop-checkout-methods {
  display: flex;
  gap: var(--space-xs);
}

.shop-checkout-btn {
  flex: 1;
  padding: var(--space-xs-sm);
  border: none;
  border-radius: var(--radius);
  font-size: var(--font-base);
  font-weight: 600;
  cursor: pointer;
  background: var(--accent);
  color: var(--bg);
  transition: var(--transition-base);
}
.shop-checkout-btn:hover {
  opacity: 0.9;
}

.shop-checkout-card {
  background: var(--fg);
}

.shop-bag-empty {
  display: none;
  text-align: center;
  padding: var(--space-xl) var(--space-sm-md);
  color: var(--fg-secondary, var(--dim));
  font-size: var(--font-base);
}

/* ── Flash message ── */
.shop-message {
  display: none;
  position: fixed;
  top: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-xs-sm) var(--space-sm-md);
  border-radius: var(--radius);
  font-size: var(--font-sm);
  font-weight: 500;
  z-index: var(--z-modal);
  box-shadow: var(--shadow);
}

.shop-message-success {
  background: rgba(var(--success-rgb), 0.9);
  color: var(--fg);
}

.shop-message-error {
  background: rgba(var(--error-rgb), 0.5);
  color: var(--fg);
}

.shop-message-info {
  background: var(--fg);
  color: var(--bg);
}

/* ── Filter bar ── */
.shop-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  padding: var(--space-xs) 0;
  margin-bottom: var(--space-sm);
}

.shop-filter-label {
  font-size: var(--font-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  font-family: var(--mono);
  margin-right: var(--space-2xs);
  margin-left: var(--space-xs);
}
.shop-filter-label:first-child {
  margin-left: 0;
}

.shop-filter-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-xs-sm);
  font-size: var(--font-2xs);
  font-weight: 600;
  color: var(--dim);
  cursor: pointer;
  transition: var(--transition-base);
  font-family: var(--font);
}
.shop-filter-btn:hover {
  border-color: var(--glass-strong);
  color: var(--fg);
}
.shop-filter-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

/* ── Tag pills ── */
.shop-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xs);
}

.shop-tag {
  font-size: var(--font-2xs);
  padding: 2px var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--glass);
  color: var(--dim);
  white-space: nowrap;
  font-family: var(--font);
}

/* ── Audience + Domain badges ── */
.shop-card-badges {
  display: flex;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xs);
}

.shop-badge {
  font-size: var(--font-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px var(--space-xs);
  border-radius: var(--radius-pill);
  font-family: var(--mono);
  white-space: nowrap;
}

.shop-badge-audience {
  background: rgba(var(--knowledge-rgb), 0.12);
  color: var(--knowledge);
}

.shop-badge-domain {
  background: rgba(var(--operations-rgb), 0.12);
  color: var(--operations);
}

/* ── Inline mode: compact cards ── */
[data-mode=inline] .shop-header {
  display: none;
}

[data-mode=inline] .shop-filter-bar {
  display: none;
}

[data-mode=inline] .shop-products {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-sm);
}

body.auth-gated > *:not(#authGate):not(.view-web):not(script):not(style) {
  display: none !important;
}

.auth-gate {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
}

body.auth-gated .auth-gate {
  display: flex;
}

.auth-box {
  text-align: center;
  max-width: 400px;
  padding: var(--space-lg) var(--space-md);
}

.auth-box h2 {
  font-size: var(--font-sm-md, 20px);
  font-weight: 800;
  margin-bottom: var(--space-xs);
  letter-spacing: 0.05em;
}

.auth-box p {
  color: var(--fg-secondary, var(--dim));
  font-size: var(--font-sm);
  margin-bottom: var(--space-md);
}

.auth-btn {
  display: inline-block;
  padding: var(--radius) var(--space-md);
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--font-sm);
  font-family: inherit;
  transition: opacity var(--transition-base);
}

.auth-btn:hover {
  opacity: 0.85;
}

.auth-error {
  color: var(--red);
  font-size: var(--font-2xs);
  margin-bottom: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 19 — LATEX (Academic Typography for Web)
   ═══════════════════════════════════════════════════════════════════

   Opt-in academic typography for papers and books.
   Activated by front matter: math: true or layout: paper
   Mirrors ~/Code/white_paper LaTeX aesthetic on the web.

   Features:
   - Two-column layout (.latex-two-col)
   - Theorem/definition/proof boxes
   - Figure captions (academic style)
   - Citation styling (Nature superscript)
   - Abstract block
   - KaTeX dark-theme override

   ═══════════════════════════════════════════════════════════════════ */
/* ── Abstract ── */
.latex-abstract {
  max-width: 85%;
  margin: 0 auto 2rem;
  padding: var(--space-md) var(--space-md-lg);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--fg-secondary);
}

.latex-abstract strong {
  font-weight: 700;
  color: var(--fg);
}

/* ── Two-column layout ── */
.latex-two-col {
  column-count: 2;
  column-gap: var(--space-md-lg);
  column-rule: 1px solid var(--border);
}

.latex-two-col h2,
.latex-two-col h3,
.latex-two-col .latex-figure,
.latex-two-col .theorem,
.latex-two-col .definition {
  column-span: all;
}

/* ── Theorem boxes — tcolorbox style ── */
.theorem, .definition, .proof-box, .lemma, .corollary, .remark {
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-sm-md) var(--space-md);
  margin: var(--space-md) 0;
  font-size: 0.9375rem;
  line-height: 1.8;
}

.theorem-title, .definition-title, .proof-title, .lemma-title, .corollary-title, .remark-title {
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.5rem;
  font-family: var(--mono);
}

.definition {
  border-left-color: var(--knowledge);
  background: rgba(var(--knowledge-rgb), 0.04);
  border-color: rgba(var(--knowledge-rgb), 0.15);
  border-left-color: var(--knowledge);
}

.definition .definition-title {
  color: var(--knowledge);
}

.proof-box {
  border-left-color: var(--dim);
  background: var(--glass-subtle);
  border-color: var(--border);
  border-left-color: var(--dim);
}

.proof-box::after {
  content: "■";
  display: block;
  text-align: right;
  margin-top: 0.5rem;
  color: var(--dim);
}

.lemma {
  border-left-color: var(--operations);
  background: rgba(var(--operations-rgb), 0.04);
  border-color: rgba(var(--operations-rgb), 0.15);
  border-left-color: var(--operations);
}

.lemma .lemma-title {
  color: var(--operations);
}

.corollary {
  border-left-color: var(--commerce);
  background: rgba(var(--commerce-rgb), 0.04);
  border-color: rgba(var(--commerce-rgb), 0.15);
  border-left-color: var(--commerce);
}

.corollary .corollary-title {
  color: var(--commerce);
}

.remark {
  border-left-color: var(--fg-secondary);
  background: var(--glass-subtle);
  border-color: var(--border);
  border-left-color: var(--fg-secondary);
  font-style: italic;
}

/* ── Figure captions — academic style ── */
.latex-figure {
  margin: 2rem 0;
  text-align: center;
}

.latex-figure img,
.latex-figure svg {
  max-width: 100%;
  border-radius: var(--radius-sm);
}

.latex-figure figcaption,
.latex-caption {
  font-size: 0.8125rem;
  color: var(--dim);
  margin-top: 0.75rem;
  line-height: 1.6;
  font-style: italic;
}

.latex-caption strong {
  font-style: normal;
  font-weight: 700;
  color: var(--fg);
}

/* ── Citation styling — Nature-style superscript ── */
.citation {
  font-size: 0.75em;
  vertical-align: super;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}

.citation:hover {
  text-decoration: underline;
}

/* ── References section ── */
.references {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--border);
}

.references h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}

.references ol {
  padding-left: 2rem;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--fg-secondary);
}

.references ol li {
  margin-bottom: 0.5rem;
}

/* ── Equation numbering ── */
.katex-display {
  position: relative;
}

.eq-number {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--dim);
}

/* ── KaTeX dark-theme override ── */
.katex {
  color: var(--fg);
}

/* ── Vignette boxes — dual side-by-side (like white_paper) ── */
.latex-vignettes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

.latex-vignette {
  background: rgba(var(--red-rgb), 0.03);
  border: 1px solid rgba(var(--red-rgb), 0.15);
  border-radius: var(--radius-sm);
  padding: var(--space-sm-md) var(--space-md);
  font-size: 0.875rem;
  line-height: 1.7;
}

.latex-vignette-title {
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
  margin-bottom: 0.5rem;
}

/* ── Academic table — booktabs style ── */
.latex-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}

.latex-table thead th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  border-top: 2px solid var(--fg-secondary);
  border-bottom: 1px solid var(--fg-secondary);
}

.latex-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.latex-table tbody tr:last-child td {
  border-bottom: 2px solid var(--fg-secondary);
}

/* ═══════════════════════════════════════════════════════════════════
   PAPER LAYOUT — MammoChat Whitepaper Aesthetic (Token-Only)
   ═══════════════════════════════════════════════════════════════════
   Renders .paper-page as an academic whitepaper:
   - Sans-serif typography via var(--font) — Helvetica system stack
   - Two-column body layout (CSS columns, var(--space-md) gap)
   - Slate-colored section headings via var(--fg-secondary)
   - Full-width title block + abstract above columns
   - ALL values from Layer 0 tokens — zero hardcoded colors/fonts/spacing
   - Respects light/dark theme toggle via CSS custom properties
   ═══════════════════════════════════════════════════════════════════ */
/* ── Paper container ── */
.paper-page .post.paper {
  max-width: 60rem;
  margin: 0 auto;
  font-family: var(--font);
  font-size: var(--font-base);
  line-height: 1.2;
}

/* ── Academic title block (centered, full-width above columns) ── */
.paper-title-block {
  text-align: center;
  padding: var(--space-md) 0 var(--space-sm);
  border-bottom: 2px solid var(--fg-secondary);
  margin-bottom: var(--space-sm);
}

.paper-foundation {
  font-variant: small-caps;
  font-size: var(--font-xs);
  letter-spacing: 0.18em;
  color: var(--fg-secondary);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
}

.paper-title {
  font-family: var(--font);
  font-size: var(--font-xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--fg);
  margin: var(--space-xs) 0;
}

.paper-date {
  display: block;
  font-size: var(--font-xs);
  color: var(--fg-secondary);
  font-family: var(--mono);
  letter-spacing: 0.05em;
  margin-top: var(--space-xs);
}

/* ── Abstract (full-width above columns) ── */
.paper-abstract {
  max-width: 85%;
  margin: 0 auto var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: var(--font-sm);
  line-height: 1.5;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  color: var(--fg-secondary);
  border-bottom: 1px solid var(--border);
}

.paper-abstract strong {
  font-weight: 700;
  color: var(--fg);
}

/* ── Colophon ── */
.paper-colophon {
  text-align: center;
  font-variant: small-caps;
  font-size: var(--font-xs);
  letter-spacing: 0.18em;
  color: var(--dim);
  padding: var(--space-md) 0 var(--space-sm);
  border-top: 1px solid var(--border);
  margin-top: var(--space-lg);
}

/* ── Paper body — single-column (HTML default, like blog posts) ── */
/* TEX view renders the 2-col PDF directly via iframe. HTML view = 1 col. */
.paper-page .paper-body {
  font-size: var(--font-base);
  line-height: 1.6;
}

/* Section headings — bold sans-serif, slate color */
.paper-page .paper-body h2 {
  font-family: var(--font);
  font-size: var(--font-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
  padding-bottom: 0.25em;
  color: var(--fg-secondary);
  border-bottom: 1px solid var(--border);
}

.paper-page .paper-body h3 {
  font-family: var(--font);
  font-size: var(--font-base);
  font-weight: 700;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
  color: var(--fg-secondary);
}

.paper-page .paper-body h4 {
  font-size: var(--font-base);
  font-weight: 700;
  font-style: italic;
  color: var(--fg-secondary);
}

/* Paragraphs — no indent, paragraph spacing (MammoChat style) */
.paper-page .paper-body p {
  margin: 0 0 var(--space-xs);
  text-indent: 0;
}

/* Block quotes */
.paper-page .paper-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-sm);
  margin: var(--space-sm) 0;
  font-style: italic;
  color: var(--fg-secondary);
}

/* Tables — booktabs style */
.paper-page .paper-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-sm);
  margin: var(--space-sm) 0;
}

.paper-page .paper-body th,
.paper-page .paper-body td {
  padding: var(--space-xs) var(--space-xs);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.paper-page .paper-body thead th {
  font-weight: 700;
  border-top: 2px solid var(--fg-secondary);
  border-bottom: 2px solid var(--fg-secondary);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.paper-page .paper-body tbody tr:last-child td {
  border-bottom: 2px solid var(--fg-secondary);
}

/* Horizontal rules as section separators */
.paper-page .paper-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-sm) 0;
}

/* Code — smaller, constrained to column */
.paper-page .paper-body pre {
  font-size: 0.8em;
  line-height: 1.4;
  overflow-x: auto;
}

.paper-page .paper-body code {
  font-size: 0.85em;
}

/* Lists — tighter spacing for columns */
.paper-page .paper-body ul,
.paper-page .paper-body ol {
  padding-left: var(--space-sm);
  margin: var(--space-xs) 0;
}

.paper-page .paper-body li {
  margin-bottom: 0.25em;
}

/* ── Figure (full-width above/between columns) ── */
.paper-page .post-figure {
  margin: var(--space-sm) auto;
  text-align: center;
  max-width: 90%;
  column-span: all;
}

/* ── Downloads ── */
.paper-page .paper-downloads {
  text-align: center;
  margin: var(--space-sm) 0;
}

.paper-page .paper-downloads .download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font);
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition-fast);
}

.paper-page .paper-downloads .download-btn:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: var(--accent);
}

/* ── Book override — single column for long-form reading ── */
.book-page .paper-body {
  column-count: 1;
}

.book-page .post.paper {
  max-width: 48rem;
}

/* Collapse gap between title-only article and view-gov/view-web article in book layout */
.book-page > .post:first-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
}

.book-page .view-web > .post {
  padding-top: 0;
  margin-top: 0;
}

.paper-author {
  font-size: var(--font-sm);
  color: var(--fg-secondary);
  margin-top: var(--space-xs);
}

/* ── Print ── */
@media print {
  .paper-page .nav,
  .paper-page .talk-overlay,
  .paper-page .paper-downloads,
  .paper-page footer {
    display: none !important;
  }
  .paper-page .post.paper {
    max-width: 100%;
    box-shadow: none;
    margin: 0;
    padding: 0;
  }
  .paper-page .post-figure {
    break-inside: avoid;
  }
  .paper-page h2, .paper-page h3 {
    break-after: avoid;
  }
}
/* ── Responsive — single column on mobile ── */
@media (max-width: 768px) {
  .latex-two-col {
    column-count: 1;
  }
  .latex-abstract {
    max-width: 100%;
    padding: var(--space-sm);
  }
  .latex-vignettes {
    grid-template-columns: 1fr;
  }
  .paper-page .post.paper {
    padding: 0 var(--space-sm);
  }
  .paper-page .paper-body { /* already 1-col */ }
  .paper-abstract {
    max-width: 100%;
  }
  .paper-title {
    font-size: var(--font-lg);
  }
}
/* ═══════════════════════════════════════════════════════════════
   PDF VIEWER — Book-Spread Presentation
   GOV: PAPERS.md → TEX View — PDF.js canvas (book-spread)
   Two modes: spread (desktop ≥768px) / scroll (mobile <768px)
   Apple-style effects: page turn, spine shadow, depth, hover lift
   ═══════════════════════════════════════════════════════════════ */
/* ── Viewer container (full viewport) ── */
.pdf-viewer-mode {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--nav-h);
  padding-bottom: var(--space-lg);
  z-index: var(--z-base);
}

/* ── Spread mode: 2-page facing ── */
.pdf-spread {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* ── Page wrapper (both modes) ── */
.pdf-page-wrapper {
  position: relative;
  transition: var(--transition-fast);
}

/* ── Spread mode page positioning ── */
.pdf-page--left {
  transform-origin: right center;
}

.pdf-page--right {
  transform-origin: left center;
}

/* ── Hover lift effect ── */
.pdf-viewer--spread .pdf-page-wrapper:hover {
  transform: translateY(-2px);
}

/* ── Canvas (centered, aspect-preserved, HiDPI) ── */
.pdf-canvas {
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

/* ── Left page: deeper shadow on right edge (toward spine) ── */
.pdf-page--left .pdf-canvas {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  box-shadow: -4px 2px 12px rgba(0, 0, 0, 0.08), -1px 0 4px rgba(0, 0, 0, 0.04);
}

/* ── Right page: deeper shadow on left edge (toward spine) ── */
.pdf-page--right .pdf-canvas {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: 4px 2px 12px rgba(0, 0, 0, 0.08), 1px 0 4px rgba(0, 0, 0, 0.04);
}

/* ── Page edge gradient (simulates page thickness) ── */
.pdf-page--left::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to left, var(--border), transparent);
  pointer-events: none;
}

.pdf-page--right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to right, var(--border), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── Spine shadow (between facing pages) ── */
.pdf-spine {
  width: 6px;
  align-self: stretch;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0.06));
  flex-shrink: 0;
}

/* ── Blank page slot (cover recto, last verso) ── */
.pdf-page-blank {
  aspect-ratio: 0.707;
  background: transparent;
}

/* ── Page-turn animation: entering spread ── */
.pdf-spread--entering {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-spread--from-right {
  opacity: 0;
  transform: translateX(40px) rotateY(-4deg);
}

.pdf-spread--from-left {
  opacity: 0;
  transform: translateX(-40px) rotateY(4deg);
}

.pdf-spread--entered {
  opacity: 1;
  transform: translateX(0) rotateY(0);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

/* ── Page-turn animation: leaving spread ── */
.pdf-spread--leaving {
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.pdf-spread--to-left {
  opacity: 0;
  transform: translateX(-40px) rotateY(4deg);
}

.pdf-spread--to-right {
  opacity: 0;
  transform: translateX(40px) rotateY(-4deg);
}

/* ── Navigation bar (bottom center, glass panel) ── */
.pdf-nav {
  position: fixed;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--scrim);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-sm);
  -webkit-backdrop-filter: var(--blur-panel);
  backdrop-filter: var(--blur-panel);
  z-index: var(--z-modal);
}

/* ── Page counter ── */
.pdf-page-counter {
  font-family: var(--mono);
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--fg-secondary);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── Downloads (fixed top-right corner) ── */
.pdf-viewer-mode ~ .paper-downloads {
  position: fixed;
  top: calc(var(--nav-h) + var(--space-xs));
  right: var(--space-sm);
  z-index: var(--z-modal);
}

/* ── Scroll mode (mobile) ── */
.pdf-viewer--scroll {
  overflow-y: auto;
  max-height: 85vh;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.pdf-page--scroll {
  margin-bottom: var(--space-sm);
}

.pdf-page--scroll .pdf-canvas {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

/* ── Responsive — mobile ── */
@media (max-width: 768px) {
  .pdf-viewer-mode {
    padding-bottom: var(--space-md);
  }
  .pdf-nav {
    bottom: var(--space-sm);
  }
}
/* ── Cursor hints for click-edge navigation ── */
.pdf-viewer--spread {
  cursor: default;
}

.controls-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  margin: 0 auto;
  max-width: 720px;
  flex-wrap: wrap;
}

.controls-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 1.1em;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--glass-border);
  background: var(--glass-subtle, rgba(255, 255, 255, 0.04));
  color: var(--dim);
  font: 600 0.82rem/1 var(--font-sans, system-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base, 0.2s) var(--ease-out, ease);
}

.controls-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.15);
}

.controls-btn:active {
  transform: translateY(0) scale(0.97);
}

.controls-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s infinite;
}

.controls-downloads {
  display: flex;
  gap: var(--space-xs);
}

.controls-view {
  font-variant-numeric: tabular-nums;
}

.deck-mode .controls-bar {
  position: fixed;
  bottom: var(--space-sm);
  right: var(--space-sm);
  left: auto;
  max-width: none;
  justify-content: flex-end;
  z-index: var(--z-sticky, 100);
}

[data-theme=light] .controls-btn {
  background: var(--glass-subtle);
}

[data-theme=light] .controls-btn:hover {
  background: rgba(var(--accent-rgb), 0.06);
}

/* ── Atomic pill groups (GOV/WEB, A−/A+) ── */
.nav-pill-group {
  display: inline-flex;
  gap: 1px;
  align-items: center;
  background: var(--glass-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
}

.nav-sw-btn {
  padding: 4px 10px;
  font-size: var(--font-xs);
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  line-height: 1;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-sw-btn:hover {
  color: var(--fg);
  background: var(--glass);
  border-color: var(--glass-strong);
}

.nav-sw-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

@media (pointer: coarse) {
  .nav-sw-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 4px 12px;
  }
}
@media (max-width: 640px) {
  .nav-pill-group {
    padding: 1px;
  }
  .nav-sw-btn {
    padding: 4px 6px;
    font-size: var(--font-2xs);
  }
}
/* Legacy compat — old view-toggle still used in some layouts */
.view-toggle {
  display: flex;
  gap: 2px;
  align-items: center;
}

.view-toggle-btn {
  padding: 4px 10px;
  font-size: var(--font-xs);
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.view-toggle-btn:hover {
  color: var(--fg);
  border-color: var(--fg-secondary);
}

.view-toggle-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.view-toggle-arrow {
  color: var(--fg-secondary);
  font-size: var(--font-xs);
  opacity: 0.5;
  padding: 0 2px;
}

@media print {
  .controls-bar,
  .view-toggle,
  .nav-pill-group {
    display: none !important;
  }
}
.star-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 9000);
  background: var(--bg, #000);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.star-overlay.open {
  transform: translateX(0);
}

body.star-open {
  overflow: hidden;
}

.star-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  flex-shrink: 0;
}

.star-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.star-mark {
  font-size: 18px;
  color: #ffd60a;
}

.star-title {
  font-family: var(--mono);
  font-size: var(--font-sm, 13px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text, #fff);
}

.star-principal {
  font-family: var(--mono);
  font-size: var(--font-2xs, 10px);
  padding: 2px 8px;
  border-radius: var(--radius-sm, 4px);
  background: var(--glass-subtle, rgba(255, 255, 255, 0.04));
  color: var(--dim, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.star-close {
  font-family: var(--mono);
  font-size: var(--font-xs, 11px);
  background: none;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  color: var(--dim, #888);
  padding: 4px 10px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.star-close:hover {
  color: var(--text, #fff);
  border-color: var(--text, #fff);
}

.star-lane-tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.star-lane-tabs::-webkit-scrollbar {
  display: none;
}

.star-lane-btn {
  font-family: var(--mono);
  font-size: var(--font-2xs, 10px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dim, #888);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.star-lane-btn:hover {
  color: var(--text, #fff);
}
.star-lane-btn.active {
  color: var(--accent, #ffd60a);
  border-bottom-color: var(--accent, #ffd60a);
}

.star-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}

.star-loading, .star-empty, .star-auth-gate {
  font-family: var(--mono);
  font-size: var(--font-sm, 13px);
  color: var(--dim, #888);
  text-align: center;
  padding: 60px 20px;
}

.star-auth-gate {
  color: var(--accent, #ffd60a);
}

.star-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.star-filter-btn {
  font-family: var(--mono);
  font-size: var(--font-2xs, 10px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-pill, 20px);
  background: none;
  color: var(--dim, #888);
  cursor: pointer;
  transition: all 0.15s;
}
.star-filter-btn:hover {
  color: var(--text, #fff);
  border-color: var(--text, #fff);
}
.star-filter-btn.active {
  background: var(--filter-color, var(--accent, #ffd60a));
  color: #000;
  border-color: var(--filter-color, var(--accent, #ffd60a));
}

.star-timeline-entries {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.star-event {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 4px);
  transition: background 0.15s;
}
.star-event:hover {
  background: var(--glass-subtle, rgba(255, 255, 255, 0.04));
}

.star-event-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 48px;
  flex-shrink: 0;
}

.star-event-icon {
  font-size: 16px;
}

.star-event-stream {
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.star-event-body {
  flex: 1;
  min-width: 0;
}

.star-event-type {
  font-family: var(--mono);
  font-size: var(--font-2xs, 10px);
  color: var(--accent, #ffd60a);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.star-event-summary {
  font-family: var(--mono);
  font-size: var(--font-xs, 11px);
  color: var(--text, #fff);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.star-event-meta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.star-event-scope, .star-event-ts {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim, #888);
}

.star-timeline-total {
  font-family: var(--mono);
  font-size: var(--font-2xs, 10px);
  color: var(--dim, #888);
  text-align: center;
  padding: 16px;
}

.star-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.star-service-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius, 8px);
  text-decoration: none;
  color: var(--text, #fff);
  transition: border-color 0.15s, transform 0.15s;
}
.star-service-card:hover {
  border-color: var(--accent, #ffd60a);
  transform: translateY(-2px);
}

.star-service-name {
  font-family: var(--mono);
  font-size: var(--font-sm, 13px);
  font-weight: 600;
}

.star-service-bits {
  font-family: var(--mono);
  font-size: var(--font-2xs, 10px);
  color: var(--dim, #888);
}

.star-econ {
  max-width: 400px;
}

.star-econ-balance {
  text-align: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  margin-bottom: 16px;
}

.star-econ-label {
  font-family: var(--mono);
  font-size: var(--font-2xs, 10px);
  color: var(--dim, #888);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.star-econ-value {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 600;
  color: #ff9f0a;
}

.star-econ-unit {
  font-size: var(--font-sm, 13px);
  color: var(--dim, #888);
}

.star-econ-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-family: var(--mono);
  font-size: var(--font-xs, 11px);
  color: var(--dim, #888);
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.04));
}

.star-intel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.star-intel-row {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.04));
}

.star-intel-signal {
  font-family: var(--mono);
  font-size: var(--font-2xs, 10px);
  color: #bf5af2;
  min-width: 120px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.star-intel-pattern {
  font-family: var(--mono);
  font-size: var(--font-xs, 11px);
  color: var(--text, #fff);
  line-height: 1.4;
}

.star-identity {
  max-width: 400px;
}

.star-identity-name {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--text, #fff);
  margin-bottom: 4px;
}

.star-identity-title {
  font-family: var(--mono);
  font-size: var(--font-sm, 13px);
  color: var(--dim, #888);
  margin-bottom: 20px;
}

.star-identity-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-family: var(--mono);
  font-size: var(--font-xs, 11px);
  color: var(--dim, #888);
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.04));
}

.star-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.star-media-card {
  padding: 16px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius, 8px);
  text-decoration: none;
  color: var(--text, #fff);
  transition: border-color 0.15s;
}
.star-media-card:hover {
  border-color: var(--accent, #ffd60a);
}

.star-media-type {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.star-media-title {
  font-family: var(--mono);
  font-size: var(--font-sm, 13px);
}

.star-gov-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.star-gov-scope {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 4px);
}
.star-gov-scope:hover {
  background: var(--glass-subtle, rgba(255, 255, 255, 0.04));
}

.star-gov-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.star-gov-label {
  font-family: var(--mono);
  font-size: var(--font-xs, 11px);
  color: var(--text, #fff);
  flex: 1;
}

.star-gov-bits {
  font-family: var(--mono);
  font-size: var(--font-2xs, 10px);
  color: var(--dim, #888);
}

.star-raw {
  font-family: var(--mono);
  font-size: var(--font-2xs, 10px);
  color: var(--dim, #888);
  white-space: pre-wrap;
  word-break: break-all;
}

@media (max-width: 768px) {
  .star-lane-btn {
    padding: 8px 10px;
    font-size: 9px;
  }
  .star-content {
    padding: 12px;
  }
  .star-services-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .star-event-summary {
    white-space: normal;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   LAYER 22 — TIMELINE
   The time axis of the galaxy. Month/week/day views from TIMELINE INDEX.
   GOV: hadleylab-canonic/SERVICES/TIMELINE/CANON.md
   ═══════════════════════════════════════════════════════════════════ */
.cal-app {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  position: relative;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.cal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}

.cal-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cal-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-left: 8px;
}

.cal-btn {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--fg);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.cal-btn:hover {
  background: var(--glass-hover);
  border-color: var(--glass-strong);
}

.cal-btn--icon {
  padding: 6px 10px;
  font-weight: 600;
}

/* ── View toggle ─────────────────────────────────────────── */
.cal-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--glass);
  border-radius: 8px;
  padding: 2px;
}

.cal-view-btn {
  background: transparent;
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.cal-view-btn--active {
  background: var(--glass-strong);
  color: var(--fg);
}

/* ── Lane toggles ────────────────────────────────────────── */
.cal-lanes {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.cal-lane-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--dim);
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  transition: all 0.15s;
}

.cal-lane-btn.cal-lane--active {
  background: rgba(var(--lane-color-rgb, 128, 128, 128), 0.15);
  border-color: var(--lane-color);
  color: var(--lane-color);
}

.cal-lane-icon {
  font-size: 12px;
}

.cal-lane-label {
  font-family: var(--mono, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Grid container ──────────────────────────────────────── */
.cal-grid-container {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.cal-weekday-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}

.cal-weekday {
  padding: 8px;
  text-align: center;
  font-family: var(--mono, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
}

.cal-weekday--today {
  color: var(--accent);
  font-weight: 700;
}

/* ── Month grid ──────────────────────────────────────────── */
.cal-grid--month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
}

.cal-cell {
  border-right: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  padding: 4px 6px;
  min-height: 90px;
  cursor: pointer;
  transition: background 0.12s;
  overflow: hidden;
}

.cal-cell:hover {
  background: var(--glass-subtle);
}

.cal-cell--empty {
  background: transparent;
  cursor: default;
}

.cal-cell--today {
  background: rgba(var(--accent-rgb, 59, 130, 246), 0.06);
}

.cal-cell--today .cal-day-num {
  color: var(--accent);
  font-weight: 700;
}

.cal-day-num {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--fg-secondary, var(--dim));
}

.cal-day-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-event-dot {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(var(--dot-color-rgb, 128, 128, 128), 0.12);
  border-left: 2px solid var(--dot-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg-secondary, var(--dim));
}

.cal-event-more {
  font-size: 10px;
  color: var(--dim);
  padding: 1px 4px;
  font-family: var(--mono, monospace);
}

/* ── Week grid ───────────────────────────────────────────── */
.cal-grid--week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
}

.cal-cell--week {
  min-height: 200px;
  padding: 6px;
}

.cal-week-event {
  font-size: 11px;
  padding: 3px 6px;
  margin-bottom: 3px;
  border-radius: 4px;
  border-left: 2px solid var(--dot-color);
  background: rgba(var(--dot-color-rgb, 128, 128, 128), 0.08);
  display: flex;
  gap: 4px;
  align-items: baseline;
}

.cal-event-time {
  font-family: var(--mono, monospace);
  font-size: 10px;
  color: var(--dim);
  flex-shrink: 0;
}

.cal-event-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Day view ────────────────────────────────────────────── */
.cal-grid--day {
  flex: 1;
  overflow: auto;
}

.cal-day-view {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

.cal-day-empty {
  text-align: center;
  color: var(--dim);
  padding: 40px;
  font-size: 14px;
}

.cal-day-event {
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: var(--glass);
  border-left: 3px solid var(--dot-color);
}

.cal-day-event-lane {
  font-family: var(--mono, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  margin-bottom: 4px;
}

.cal-lane-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.cal-day-event-time {
  font-family: var(--mono, monospace);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 4px;
}

.cal-day-event-summary {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.cal-day-event-meta {
  font-size: 12px;
  color: var(--dim);
  margin-top: 4px;
}

/* ── Detail panel ────────────────────────────────────────── */
.cal-detail {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 360px;
  background: var(--panel);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  z-index: 10;
  box-shadow: var(--shadow-lg);
}

.cal-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel);
}

.cal-detail-date {
  font-weight: 700;
  font-size: 14px;
}

.cal-detail-close {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
}

.cal-detail-close:hover {
  color: var(--fg);
}

.cal-detail-events {
  padding: 12px;
}

.cal-detail-event {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-left: 3px solid var(--accent);
  background: var(--glass-subtle);
  border-radius: 6px;
}

.cal-detail-event-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.cal-detail-lane {
  font-family: var(--mono, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cal-detail-time {
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--dim);
}

.cal-detail-summary {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.cal-detail-meta {
  font-size: 11px;
  color: var(--dim);
  margin-top: 3px;
}

/* ── Resolved contacts ───────────────────────────────────── */
.cal-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.cal-resolved-contact,
.cal-unresolved-contact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--glass);
}

.cal-resolved-contact {
  border: 1px solid var(--governance);
  color: var(--governance);
}

.cal-unresolved-contact {
  border: 1px solid var(--glass-strong);
  color: var(--dim);
}

.cal-node-badge {
  font-family: var(--mono, monospace);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.cal-resolved-summary {
  font-family: var(--mono, monospace);
  font-size: 10px;
  color: var(--governance);
}

.cal-detail-participants {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-detail-person {
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--glass-subtle);
}

.cal-detail-person--resolved {
  border-left: 2px solid var(--governance);
}

.cal-person-name {
  font-size: 12px;
  font-weight: 500;
  display: block;
}

.cal-person-node {
  font-family: var(--mono, monospace);
  font-size: 10px;
  color: var(--governance);
  display: block;
  margin-top: 2px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .cal-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .cal-detail {
    width: 100%;
    left: 0;
  }
  .cal-cell {
    min-height: 60px;
    padding: 2px 4px;
  }
  .cal-day-num {
    font-size: 11px;
  }
  .cal-event-dot {
    font-size: 9px;
  }
  .cal-lanes {
    order: -1;
  }
}

/*# sourceMappingURL=DESIGN.css.map */