/* ==========================================================================
   P31 Quantum Material — OKLCH Design Tokens
   Token-audit-safe: no raw hex. All values use oklch() or color-mix().
   ========================================================================== */

:root {
/* tier: primitive */
  /* --- Primitives (immutable) --- */
  --p31-void: oklch(0.08 0.005 270);
  --p31-surface: oklch(0.14 0.008 270);
  --p31-surface2: oklch(0.2 0.012 270);
  --p31-surface3: oklch(0.28 0.015 270);
  --p31-cloud: oklch(0.68 0.008 270);
  --p31-text-primary: oklch(0.96 0.005 270);
  --p31-text-muted: oklch(0.82 0.012 270);

  /* Accents */
  --p31-accent-cyan: oklch(0.78 0.18 195);
  --p31-accent-violet: oklch(0.72 0.16 285);
  --p31-accent-gold: oklch(0.82 0.16 85);
  --p31-accent-green: oklch(0.76 0.14 155);
  --p31-accent-red: oklch(0.68 0.18 15);
  --p31-accent-iris: oklch(0.62 0.14 275);

/* tier: semantic */
  /* Glass */
  --p31-glass-bg: color-mix(in oklch, white 4%, transparent);
  --p31-glass-bg-hover: color-mix(in oklch, white 7%, transparent);
  --p31-glass-border: color-mix(in oklch, white 8%, transparent);
  --p31-glass-border-focus: color-mix(in oklch, var(--p31-accent-cyan) 50%, transparent);
  --p31-glass-blur: blur(20px);
  --p31-glass-shadow: 0 12px 32px 0 color-mix(in oklch, black 45%, transparent);
  --p31-scrim: linear-gradient(
    180deg,
    color-mix(in oklch, var(--p31-void) 85%, transparent) 0%,
    color-mix(in oklch, var(--p31-void) 40%, transparent) 100%
  );

/* tier: semantic */
  /* Semantic mapping */
  --p31-accent: var(--p31-accent-cyan);
  --p31-accent-hover: oklch(0.84 0.16 195);
  --p31-accent-dim: color-mix(in oklch, var(--p31-accent-cyan) 12%, transparent);
  --p31-success: var(--p31-accent-green);
  --p31-text-on-accent: var(--p31-void);
  --p31-surface-base: var(--p31-surface);
  --p31-text-strong: var(--p31-text-primary);

/* tier: semantic */
  /* Ambient (p31ca MolecularHeart + Starfield) */
  --p31-star: oklch(0.8 0.125 90);
  --p31-heart-core: var(--p31-accent-cyan);
  --p31-heart-plasma: var(--p31-accent-violet);
  --p31-scene-rotation: 1;
  --p31-scene-tilt: 0.18;
  --p31-scene-scale: 2.2;
  --p31-scene-density: 140;
  --p31-scene-twinkle: 1;
  --p31-scene-flare: 6;

/* tier: primitive */
  /* Typography */
  --p31-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --p31-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --p31-text-xs: 0.75rem;
  --p31-text-sm: 0.875rem;
  --p31-text-base: 1rem;
  --p31-text-lg: 1.125rem;
  --p31-text-xl: 1.25rem;
  --p31-text-h3: 1.5rem;
  --p31-text-h2: 2rem;
  --p31-text-h1: 3rem;

/* tier: primitive */
  /* Spacing */
  --p31-space-1: 4px;
  --p31-space-2: 8px;
  --p31-space-3: 12px;
  --p31-space-4: 16px;
  --p31-space-5: 24px;
  --p31-space-6: 32px;
  --p31-space-7: 48px;

/* tier: primitive */
  /* Radius */
  --p31-radius-sm: 8px;
  --p31-radius-md: 12px;
  --p31-radius-lg: 24px;
  --p31-radius-full: 9999px;

/* tier: primitive */
  /* Motion */
  --motion-scale: 1;
  --p31-transition-fast: calc(150ms * var(--motion-scale));
  --p31-transition-normal: calc(250ms * var(--motion-scale));
  --p31-transition-slow: calc(400ms * var(--motion-scale));
  --p31-ease-quantum: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-scale: 0.1;
  }
}

/* backdrop-filter is GPU-expensive on mid-range mobile — cap the blur. */
@media (max-width: 768px) {
  :root {
    --p31-glass-blur: blur(10px);
  }
}

/* prefers-reduced-transparency (Chrome 118+) — solid surfaces, no blur. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --p31-glass-blur: none;
    --p31-glass-bg: color-mix(in oklch, var(--p31-surface) 96%, transparent);
    --p31-glass-bg-hover: var(--p31-surface2);
  }
}
/* ── Quantum enterprise polish: component tier + surface hierarchy ──────────
   Research bar: 4+ surface elevation levels, luminance-stepped 5-8%; component
   tokens reference semantic (never primitives) so Chameleon theming is one-level. */
:root {
/* tier: semantic */
  /* Surface hierarchy — elevation by luminance (5-8% steps), not shadow. */
  --p31-surface-deep: oklch(0.10 0.012 270);
  --p31-surface-raised: oklch(0.19 0.016 270);
  --p31-surface-overlay: oklch(0.24 0.022 270);
  --p31-surface-modal: oklch(0.29 0.028 270);

/* tier: component */
  /* Component tokens — scoped overrides (reference semantic, never primitives). */
  --p31-button-bg: var(--p31-accent);
  --p31-button-fg: var(--p31-text-on-accent);
  --p31-button-hover-bg: color-mix(in oklch, var(--p31-accent) 88%, white 12%);
  --p31-card-bg: var(--p31-glass-bg);
  --p31-card-border: var(--p31-glass-border);
  --p31-badge-live-bg: color-mix(in oklch, var(--p31-success) 16%, transparent);
  --p31-badge-live-fg: var(--p31-success);
  --p31-input-bg: color-mix(in oklch, var(--p31-surface-base) 92%, transparent);
  --p31-input-border: var(--p31-glass-border);
  --p31-input-focus: var(--p31-accent);
  --p31-code-bg: color-mix(in oklch, var(--p31-surface-deep) 70%, transparent);
  --p31-code-fg: var(--p31-text-strong);
}

/* ── Enterprise surface layout tokens (M3 / Coinbase rhythm) ─────────────── */
:root {
/* tier: semantic */
  --surface-max-width: 960px;
  --surface-gutter: 32px;
  --surface-section-gap: 64px;
  --surface-card-gap: 20px;
  --surface-card-padding:32px;
}
/* ==========================================================================
   P31 Quantum Material Workspace — layout + surface styles
   ========================================================================== */

/* Topbar */
.topbar {
  height: 64px;
  padding:0 var(--p31-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--p31-glass-border);
  background: color-mix(in oklch, var(--p31-void) 85%, transparent);
  backdrop-filter: var(--p31-glass-blur);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--p31-space-3);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--p31-text-primary);
  font-weight: 700;
  font-size: var(--p31-text-lg);
  letter-spacing: -0.01em;
}

.p31-crown-logo {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--p31-accent) 0%, var(--p31-accent-violet) 100%);
  border-radius: var(--p31-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p31-void);
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 0 12px color-mix(in oklch, var(--p31-accent) 30%, transparent);
}

.topbar-center { display: flex; align-items: center; flex: 1; max-width: 520px; margin:0 var(--p31-space-5); }
.topbar-right { display: flex; align-items: center; gap: var(--p31-space-3); }

.search-box {
  width: 100%;
  height: 40px;
  background: var(--p31-surface2);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-md);
  padding:0 var(--p31-space-3);
  display: flex;
  align-items: center;
  gap: var(--p31-space-2);
  color: var(--p31-cloud);
  cursor: pointer;
}

.search-kbd {
  margin-left:auto;
  background: var(--p31-surface);
  border: 1px solid var(--p31-glass-border);
  border-radius: 4px;
  padding:2px 8px;
  font-family: var(--p31-font-mono);
  font-size: var(--p31-text-xs);
  color: var(--p31-cloud);
}

/* Spoon dial */
.spoon-dial {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--p31-surface2);
  padding:4px 12px;
  border-radius: var(--p31-radius-full);
  border: 1px solid var(--p31-glass-border);
}

.spoon-dial-label { font-size: 11px; color: var(--p31-cloud); font-weight: 600; margin-right:4px; }

.spoon-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--p31-surface3);
  cursor: pointer;
  border: none;
  transition: transform var(--p31-transition-fast), background var(--p31-transition-fast);
}

.spoon-dot.active {
  background: var(--p31-accent-gold);
  box-shadow: 0 0 8px color-mix(in oklch, var(--p31-accent-gold) 60%, transparent);
  transform: scale(1.2);
}

.spoon-crisis-btn {
  margin-left:4px;
  background: color-mix(in oklch, var(--p31-accent-red) 15%, transparent);
  border: 1px solid color-mix(in oklch, var(--p31-accent-red) 30%, transparent);
  color: var(--p31-accent-red);
  font-size: var(--p31-text-xs);
  padding:2px 8px;
  border-radius: var(--p31-radius-full);
  cursor: pointer;
  font-weight: 600;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p31-accent-violet), var(--p31-accent-iris));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--p31-text-primary);
  font-size: 14px;
  border: 2px solid var(--p31-glass-border);
  cursor: pointer;
}

/* App body */
.app-shell {
  display: flex;
  flex: 1;
  height: calc(100vh - 64px);
  overflow: hidden;
  position: relative;
}

.sidebar {
  width: 240px;
  background: color-mix(in oklch, var(--p31-surface) 72%, transparent);
  backdrop-filter: var(--p31-glass-blur);
  border-right: 1px solid var(--p31-glass-border);
  display: flex;
  flex-direction: column;
  padding:var(--p31-space-3);
  gap: var(--p31-space-1);
  flex-shrink: 0;
  overflow-y: auto;
  min-height: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--p31-space-3);
  padding:var(--p31-space-3) var(--p31-space-4);
  border-radius: var(--p31-radius-sm);
  color: var(--p31-cloud);
  background: none;
  border: 1px solid transparent;
  font-weight: 500;
  font-size: var(--p31-text-base);
  cursor: pointer;
  user-select: none;
}

.nav-item:hover { background: var(--p31-surface2); color: var(--p31-text-primary); }
.nav-item.active { background: var(--p31-accent-dim); color: var(--p31-accent); border-color: color-mix(in oklch, var(--p31-accent) 20%, transparent); }
.nav-item .lock-icon { margin-left:auto; opacity: 0.6; }

.main-workspace {
  flex: 1;
  overflow-y: auto;
  background: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
}

.surface-panel {
  display: none;
  flex: 1;
  height: 100%;
  flex-direction: column;
}

.surface-panel.active { display: flex; }

/* Mobile bottom nav */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: color-mix(in oklch, var(--p31-surface) 95%, transparent);
  backdrop-filter: var(--p31-glass-blur);
  border-top: 1px solid var(--p31-glass-border);
  z-index: 90;
  justify-content: space-around;
  align-items: center;
}

.mobile-bottom-nav__btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: inherit;
  min-width: 48px;
  min-height: 48px;
}

@media (max-width: 768px) {
  .sidebar { display: none; }
  .mobile-bottom-nav { display: flex; }
  .topbar-center { display: none; }
  body { padding-bottom:64px; }
}

/* Home / launcher */
.home-container { padding:var(--p31-space-6); max-width: 1200px; margin:0 auto; width: 100%; }
.home-hero { margin-bottom:var(--p31-space-6); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--p31-space-5); flex-wrap: wrap; }

.greeting-h1 {
  font-size: var(--p31-text-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--p31-text-primary) 30%, var(--p31-cloud) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom:var(--p31-space-2);
}

.family-strip {
  display: flex;
  align-items: center;
  gap: var(--p31-space-4);
  background: var(--p31-surface2);
  padding:var(--p31-space-3) var(--p31-space-5);
  border-radius: var(--p31-radius-lg);
  border: 1px solid var(--p31-glass-border);
}

.family-avatars { display: flex; margin-right:-8px; }
.family-avatar {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--p31-surface2);
  margin-right:-8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold;
}
.family-avatar.active { border-color: var(--p31-accent); box-shadow: 0 0 0 2px color-mix(in oklch, var(--p31-accent) 35%, transparent); }
.family-avatar[data-accent='cyan'] { border-color: var(--p31-accent-cyan); }
.family-avatar[data-accent='violet'] { border-color: var(--p31-accent-violet); }
.family-avatar[data-accent='gold'] { border-color: var(--p31-accent-gold); }
.family-avatar[data-accent='green'] { border-color: var(--p31-accent-green); }
.family-avatar[data-accent='red'] { border-color: var(--p31-accent-red); }
.family-avatar[data-accent='iris'] { border-color: var(--p31-accent-iris); }

.love-chip {
  background: color-mix(in oklch, var(--p31-accent-red) 15%, transparent);
  color: var(--p31-accent-red);
  border: 1px solid color-mix(in oklch, var(--p31-accent-red) 30%, transparent);
  padding:4px 12px; border-radius: var(--p31-radius-full);
  font-weight: 600; font-size: var(--p31-text-sm);
}

.home-floor {
  padding:var(--p31-space-6);
  border: 1px dashed var(--p31-glass-border);
  border-radius: var(--p31-radius-lg);
  text-align: center;
}

.launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--p31-space-5);
}

.surface-card {
  background: var(--p31-glass-bg);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-lg);
  padding:var(--p31-space-5);
  transition: all var(--p31-transition-normal) var(--p31-ease-quantum);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--p31-space-3);
  color: inherit;
  text-align: left;
}

.surface-card:hover, .surface-card:focus-visible {
  background: var(--p31-glass-bg-hover);
  border-color: color-mix(in oklch, white 20%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px color-mix(in oklch, black 50%, transparent);
}

.surface-card-header { display: flex; align-items: center; justify-content: space-between; }
.surface-card-icon { width: 48px; height: 48px; border-radius: var(--p31-radius-md); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.surface-card-title { font-size: var(--p31-text-xl); font-weight: 600; color: var(--p31-text-primary); }
.surface-card-desc { font-size: var(--p31-text-base); color: var(--p31-cloud); line-height: 1.4; }

/* Docs */
.docs-layout { display: flex; height: 100%; }
.docs-sidebar { width: 260px; background: color-mix(in oklch, var(--p31-surface) 65%, transparent); border-right: 1px solid var(--p31-glass-border); padding:var(--p31-space-4); display: flex; flex-direction: column; gap: var(--p31-space-3); }

.doc-list-item {
  padding:var(--p31-space-3);
  border-radius: var(--p31-radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  color: var(--p31-text-primary);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.doc-list-item:hover { background: var(--p31-surface2); }
.doc-list-item.active { background: var(--p31-surface2); border-left: 3px solid var(--p31-accent); }
.doc-item-title { font-weight: 600; font-size: var(--p31-text-base); }
.doc-item-meta { font-size: var(--p31-text-xs); color: var(--p31-cloud); }

.docs-editor-container { flex: 1; display: flex; flex-direction: column; background: color-mix(in oklch, var(--p31-void) 55%, transparent); overflow-y: auto; }
.docs-toolbar { height: 48px; border-bottom: 1px solid var(--p31-glass-border); background: var(--p31-surface2); display: flex; align-items: center; padding:0 var(--p31-space-4); gap: var(--p31-space-2); }
.tb-btn { background: none; border: none; color: var(--p31-cloud); width: 32px; height: 32px; border-radius: 4px; cursor: pointer; font-weight: 600; }
.tb-btn:hover { background: var(--p31-surface3); color: var(--p31-text-primary); }

.docs-shell { max-width: 800px; width: 100%; margin:var(--p31-space-6) auto; padding:var(--p31-space-6); background: color-mix(in oklch, var(--p31-surface) 85%, transparent); border: 1px solid var(--p31-glass-border); border-radius: var(--p31-radius-md); min-height: 800px; }
.doc-title-input { font-size: var(--p31-text-h2); font-weight: 700; background: transparent; border: none; color: var(--p31-text-primary); width: 100%; margin-bottom:var(--p31-space-5); outline: none; }
.doc-content-area { min-height: 600px; outline: none; font-size: var(--p31-text-base); line-height: 1.7; color: var(--p31-text-primary); }

.docs-outline { width: 220px; border-left: 1px solid var(--p31-glass-border); padding:var(--p31-space-4); background: color-mix(in oklch, var(--p31-surface) 65%, transparent); }

/* Sheets */
.sheets-layout { display: flex; flex-direction: column; height: 100%; }
.sheets-formula-bar { height: 40px; background: color-mix(in oklch, var(--p31-surface2) 70%, transparent); border-bottom: 1px solid var(--p31-glass-border); display: flex; align-items: center; padding:0 var(--p31-space-3); gap: var(--p31-space-3); font-family: var(--p31-font-mono); font-size: var(--p31-text-sm); }
.cell-ref { width: 60px; text-align: center; background: var(--p31-surface); border: 1px solid var(--p31-glass-border); border-radius: 4px; padding:2px 0; color: var(--p31-accent); font-weight: 600; }
.fx-label { color: var(--p31-cloud); font-style: italic; }
.formula-input { flex: 1; background: var(--p31-surface); border: 1px solid var(--p31-glass-border); border-radius: 4px; padding:4px 8px; color: var(--p31-text-primary); font-family: var(--p31-font-mono); outline: none; }

.sheet-grid-container { flex: 1; overflow: auto; }
.sheet-table { border-collapse: collapse; width: 100%; font-family: var(--p31-font-mono); font-size: var(--p31-text-sm); }
.sheet-table th, .sheet-table td { border: 1px solid color-mix(in oklch, white 8%, transparent); min-width: 110px; height: 32px; padding:0 8px; text-align: left; white-space: nowrap; }
.sheet-table th { background: var(--p31-surface2); color: var(--p31-cloud); font-weight: 600; position: sticky; top: 0; z-index: 10; text-align: center; }
.sheet-table td.row-header { background: var(--p31-surface2); color: var(--p31-cloud); text-align: center; width: 40px; position: sticky; left: 0; z-index: 9; }
.sheet-table td.selected { outline: 2px solid var(--p31-accent); background: var(--p31-accent-dim); cursor: pointer; }

/* Slides */
.slides-layout { display: flex; height: 100%; }
.slides-sidebar { width: 220px; background: color-mix(in oklch, var(--p31-surface) 65%, transparent); border-right: 1px solid var(--p31-glass-border); padding:var(--p31-space-4); display: flex; flex-direction: column; gap: var(--p31-space-3); }
.slide-thumb { aspect-ratio: 16/9; background: var(--p31-surface2); border: 2px solid var(--p31-glass-border); border-radius: var(--p31-radius-sm); cursor: pointer; padding:var(--p31-space-2); display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.slide-thumb.active { border-color: var(--p31-accent-violet); box-shadow: 0 0 12px color-mix(in oklch, var(--p31-accent-violet) 30%, transparent); }
.slide-thumb-num { position: absolute; top: 4px; left: 4px; font-size: 10px; background: color-mix(in oklch, black 50%, transparent); padding:1px 4px; border-radius: 2px; }

.slides-canvas-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding:var(--p31-space-6); background: transparent; }
.slide-canvas { width: 100%; max-width: 860px; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--p31-surface) 0%, var(--p31-surface2) 100%); border: 1px solid var(--p31-glass-border); border-radius: var(--p31-radius-lg); padding:var(--p31-space-7); display: flex; flex-direction: column; justify-content: center; box-shadow: 0 20px 50px color-mix(in oklch, black 60%, transparent); }
.slide-canvas h2 { font-size: 36px; font-weight: 700; color: var(--p31-text-primary); margin-bottom:var(--p31-space-4); }
.slide-canvas p { font-size: 20px; color: var(--p31-cloud); line-height: 1.6; }

.present-overlay { position: fixed; inset: 0; background: oklch(0 0 0); z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.present-slide { width: 90vw; height: 80vh; max-width: 1280px; background: var(--p31-surface); border-radius: var(--p31-radius-lg); padding:64px; display: flex; flex-direction: column; justify-content: center; }
.present-controls { position: absolute; bottom: 24px; display: flex; gap: 16px; align-items: center; background: color-mix(in oklch, white 10%, transparent); backdrop-filter: blur(10px); padding:8px 16px; border-radius: var(--p31-radius-full); }

/* Calendar */
.calendar-layout { display: flex; height: 100%; gap: var(--p31-space-4); padding:var(--p31-space-5); }
.calendar-main { flex: 1; display: flex; flex-direction: column; gap: var(--p31-space-4); }
.calendar-header { display: flex; align-items: center; justify-content: space-between; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; flex: 1; align-content: start; }
.cal-weekday { text-align: center; font-weight: 600; color: var(--p31-cloud); padding:8px 0; font-size: var(--p31-text-sm); }
.cal-day-cell { background: color-mix(in oklch, var(--p31-surface) 65%, transparent); border: 1px solid var(--p31-glass-border); border-radius: var(--p31-radius-md); padding:8px; display: flex; flex-direction: column; gap: 4px; min-height: 84px; cursor: pointer; color: var(--p31-text-primary); }
.cal-day-cell:hover { border-color: color-mix(in oklch, var(--p31-accent) 40%, transparent); }
.cal-day-cell.today { border-color: var(--p31-accent); background: var(--p31-surface2); }
.cal-day-num { font-weight: 600; font-size: var(--p31-text-sm); }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--p31-accent); }
.cal-day-panel { width: 320px; background: var(--p31-surface); border: 1px solid var(--p31-glass-border); border-radius: var(--p31-radius-lg); padding:var(--p31-space-5); display: flex; flex-direction: column; gap: var(--p31-space-4); }

/* Mail */
.mail-layout { display: flex; height: 100%; }
.mail-folders { width: 200px; background: color-mix(in oklch, var(--p31-surface) 65%, transparent); border-right: 1px solid var(--p31-glass-border); padding:var(--p31-space-4); display: flex; flex-direction: column; gap: var(--p31-space-2); }
.mail-list { width: 320px; border-right: 1px solid var(--p31-glass-border); background: color-mix(in oklch, var(--p31-void) 50%, transparent); display: flex; flex-direction: column; overflow-y: auto; }
.mail-item { padding:var(--p31-space-4); border-bottom: 1px solid var(--p31-glass-border); cursor: pointer; display: flex; flex-direction: column; gap: 4px; background: none; border-left: none; border-right: none; border-top: none; color: var(--p31-text-primary); text-align: left; }
.mail-item:hover { background: var(--p31-surface); }
.mail-item.unread { background: var(--p31-surface2); border-left: 3px solid var(--p31-accent-iris); }
.mail-sender { font-weight: 600; font-size: var(--p31-text-base); }
.mail-subject { font-weight: 500; font-size: var(--p31-text-sm); }
.mail-snippet { font-size: var(--p31-text-xs); color: var(--p31-cloud); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-thread { flex: 1; background: color-mix(in oklch, var(--p31-surface) 65%, transparent); padding:var(--p31-space-6); display: flex; flex-direction: column; gap: var(--p31-space-5); overflow-y: auto; }

/* Drive */
.drive-layout { display: flex; flex-direction: column; height: 100%; padding:var(--p31-space-5); gap: var(--p31-space-4); }
.drive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--p31-space-4); flex-wrap: wrap; }
.drive-chips { display: flex; gap: var(--p31-space-2); }
.chip { background: var(--p31-surface2); border: 1px solid var(--p31-glass-border); padding:8px 16px; border-radius: var(--p31-radius-full); font-size: var(--p31-text-sm); cursor: pointer; color: var(--p31-cloud); }
.chip.active { background: var(--p31-accent-dim); color: var(--p31-accent); border-color: color-mix(in oklch, var(--p31-accent) 40%, transparent); }

.drive-forge { display: flex; gap: var(--p31-space-2); align-items: center; }
.drive-forge input {
  width: min(360px, 40vw);
  background: var(--p31-surface2);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-sm);
  padding:var(--p31-space-2) var(--p31-space-3);
  color: var(--p31-text-primary);
  outline: none;
  font-size: 0.8125rem;
}

.drive-status { font-family: var(--p31-font-mono); font-size: 12px; color: var(--p31-accent-green); background: color-mix(in oklch, var(--p31-accent-green) 8%, transparent); border: 1px solid color-mix(in oklch, var(--p31-accent-green) 30%, transparent); padding:var(--p31-space-2) var(--p31-space-3); border-radius: var(--p31-radius-sm); }

.drive-content { display: flex; gap: var(--p31-space-5); flex: 1; min-height: 0; }
.drive-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--p31-space-4); align-content: start; overflow-y: auto; }
.file-card { background: var(--p31-surface); border: 1px solid var(--p31-glass-border); border-radius: var(--p31-radius-md); padding:var(--p31-space-4); display: flex; flex-direction: column; gap: var(--p31-space-3); cursor: pointer; color: var(--p31-text-primary); text-align: left; }
.file-card:hover { transform: translateY(-2px); border-color: color-mix(in oklch, white 20%, transparent); }
.file-card.selected { border-color: var(--p31-accent); background: var(--p31-surface2); }
.file-icon { font-size: 32px; }
.drive-preview { width: 280px; background: var(--p31-surface); border: 1px solid var(--p31-glass-border); border-radius: var(--p31-radius-lg); padding:var(--p31-space-5); display: flex; flex-direction: column; gap: var(--p31-space-4); }

/* Modals */
.modal-backdrop { position: fixed; inset: 0; background: color-mix(in oklch, var(--p31-void) 85%, transparent); backdrop-filter: blur(12px); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-box { width: 100%; max-width: 440px; background: var(--p31-surface); border: 1px solid var(--p31-glass-border); border-radius: var(--p31-radius-lg); padding:var(--p31-space-6); box-shadow: var(--p31-glass-shadow); display: flex; flex-direction: column; gap: var(--p31-space-5); }

.pin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--p31-space-3); margin-top:var(--p31-space-3); }
.pin-btn { height: 56px; font-size: var(--p31-text-xl); font-weight: 600; border-radius: var(--p31-radius-md); background: var(--p31-surface2); border: 1px solid var(--p31-glass-border); color: var(--p31-text-primary); cursor: pointer; }
.pin-btn:hover { background: var(--p31-surface3); }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin-bottom:var(--p31-space-2); }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--p31-cloud); }
.pin-dot.filled { background: var(--p31-accent); border-color: var(--p31-accent); box-shadow: 0 0 8px var(--p31-accent); }

.palette-box { max-width: 600px; padding:0; overflow: hidden; }
.palette-input-wrap { padding:var(--p31-space-4); border-bottom: 1px solid var(--p31-glass-border); }
.palette-input { width: 100%; background: transparent; border: none; font-size: var(--p31-text-lg); color: var(--p31-text-primary); outline: none; }
.palette-results { max-height: 360px; overflow-y: auto; padding:var(--p31-space-2); }
.palette-item { padding:var(--p31-space-3) var(--p31-space-4); border-radius: var(--p31-radius-sm); display: flex; align-items: center; justify-content: space-between; cursor: pointer; background: none; border: none; color: var(--p31-text-primary); width: 100%; text-align: left; font-size: var(--p31-text-base); }
.palette-item:hover, .palette-item.selected { background: var(--p31-surface2); color: var(--p31-accent); }

/* Crisis overlay */
.crisis-overlay { position: fixed; inset: 0; background: oklch(0.03 0 270); z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding:32px; }
.breathing-circle { width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklch, var(--p31-accent-gold) 30%, transparent) 0%, color-mix(in oklch, var(--p31-void) 0%, transparent) 70%); border: 2px solid var(--p31-accent-gold); animation: pulseBreath 4s infinite ease-in-out; margin-bottom:32px; }

/* Calm overlay (the calm-mode rest floor) */
.calm-overlay { position: fixed; inset: 0; background: oklch(0.03 0 270); z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding:32px; }
.calm-circle { width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklch, var(--p31-accent-gold) 30%, transparent) 0%, color-mix(in oklch, var(--p31-void) 0%, transparent) 70%); border: 2px solid var(--p31-accent-gold); animation: pulseBreath 4s infinite ease-in-out; margin-bottom:32px; }

@keyframes pulseBreath {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.35); opacity: 0.9; }
}

/* Setup surface */
.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--p31-space-5); margin-top:var(--p31-space-6); }
.setup-panel { padding:var(--p31-space-5); display: flex; flex-direction: column; gap: var(--p31-space-3); }
.setup-title { font-size: var(--p31-text-lg); font-weight: 600; color: var(--p31-text-primary); }
.setup-desc { color: var(--p31-cloud); font-size: var(--p31-text-sm); }
.setup-pin-row { display: flex; gap: var(--p31-space-2); align-items: center; }
.setup-input { flex: 1; background: var(--p31-surface2); border: 1px solid var(--p31-glass-border); border-radius: var(--p31-radius-sm); padding:var(--p31-space-2) var(--p31-space-3); color: var(--p31-text-primary); outline: none; font-size: 1rem; }
.setup-msg { color: var(--p31-success); font-size: var(--p31-text-sm); }
.setup-roster { display: flex; flex-direction: column; gap: var(--p31-space-2); }
.setup-member { display: flex; align-items: center; gap: var(--p31-space-2); padding:var(--p31-space-2) var(--p31-space-3); border-radius: var(--p31-radius-sm); border: 1px solid var(--p31-glass-border); background: var(--p31-surface2); color: var(--p31-text-primary); cursor: pointer; font-size: var(--p31-text-sm); }
.setup-member.active { border-color: var(--p31-accent); background: var(--p31-accent-dim); }
.setup-rows { display: flex; flex-direction: column; gap: var(--p31-space-2); }
.setup-row { display: flex; justify-content: space-between; font-size: var(--p31-text-sm); color: var(--p31-cloud); }
.setup-ok { color: var(--p31-accent-green); }
.setup-err { color: var(--p31-accent-red); }
.setup-dim { color: var(--p31-text-muted); }
.setup-mono { font-family: var(--p31-font-mono); font-size: 12px; color: var(--p31-text-primary); }

/* Landing page */
.landing { max-width: 1080px; margin:0 auto; padding:var(--p31-space-7) var(--p31-space-5); display: flex; flex-direction: column; gap: var(--p31-space-7); }
.landing-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--p31-space-4); padding-top:var(--p31-space-6); }
.landing-eyebrow { font-family: var(--p31-font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--p31-accent); }
.landing-h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; max-width: 22ch; }
.landing-sub { color: var(--p31-cloud); font-size: var(--p31-text-lg); max-width: 52ch; margin:0 auto; }
.landing-ctas { display: flex; gap: var(--p31-space-4); justify-content: center; margin-top:var(--p31-space-4); }
.landing-section { display: flex; flex-direction: column; gap: var(--p31-space-5); }
.landing-h2 { font-size: var(--p31-text-h3); font-weight: 600; }
.landing-surfaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--p31-space-4); }
.landing-surface { padding:var(--p31-space-5); display: flex; flex-direction: column; gap: var(--p31-space-2); }
.landing-surface-icon { font-size: 32px; }
.landing-surface-title { font-weight: 600; color: var(--p31-text-primary); }
.landing-surface-desc { color: var(--p31-cloud); font-size: var(--p31-text-sm); }
.landing-proof { padding:var(--p31-space-5); }
.landing-proof-line { font-family: var(--p31-font-mono); font-size: var(--p31-text-sm); color: var(--p31-text-primary); }
.proof-ok { color: var(--p31-accent-green); }
.proof-err { color: var(--p31-accent-red); }
.landing-proof-note { color: var(--p31-cloud); font-size: var(--p31-text-sm); margin-top:var(--p31-space-3); }
.landing-footer { text-align: center; color: var(--p31-text-muted); font-size: var(--p31-text-sm); padding-bottom:var(--p31-space-6); }
/* Notification stack */
.notif-stack {
  position: fixed;
  right: var(--p31-space-4);
  bottom: var(--p31-space-4);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: var(--p31-space-2);
  max-width: 340px;
}
.notif-toast {
  position: relative;
  background: var(--p31-surface2);
  border: 1px solid var(--p31-glass-border);
  border-left: 3px solid var(--p31-accent);
  border-radius: var(--p31-radius-md);
  padding:var(--p31-space-3) var(--p31-space-4);
  box-shadow: var(--p31-glass-shadow);
  animation: notif-in var(--p31-transition-normal) var(--p31-ease-quantum);
}
.notif-toast__title { font-weight: 600; font-size: var(--p31-text-sm); }
.notif-toast-text { color: var(--p31-cloud); font-size: var(--p31-text-sm); margin-top:2px; }
.notif-toast__close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: var(--p31-cloud);
  font-size: 16px;
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
}
.notif-stack__clear {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--p31-text-muted);
  font-size: 12px;
  cursor: pointer;
  padding:4px 8px;
}
@keyframes notif-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .notif-toast { animation: none; }
}

/* Settings surface — tabs */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p31-space-2);
  margin-top:var(--p31-space-4);
}
.settings-tab {
  background: var(--p31-surface2);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-sm);
  padding:var(--p31-space-2) var(--p31-space-3);
  color: var(--p31-cloud);
  font-size: var(--p31-text-sm);
  cursor: pointer;
  min-height: 40px;
}
.settings-tab.is-active {
  background: var(--p31-accent);
  color: var(--p31-ink);
  border-color: transparent;
  font-weight: 600;
}
.settings-pane { margin-top:var(--p31-space-4); }
.settings-pane .glass-panel { padding:var(--p31-space-5); }
.setup-title { font-size: var(--p31-text-lg); font-weight: 600; color: var(--p31-text-primary); }
.setup-desc { color: var(--p31-text-muted); font-size: var(--p31-text-sm); margin-top:var(--p31-space-1); }
.setup-input {
  background: var(--p31-surface);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-sm);
  padding:var(--p31-space-2) var(--p31-space-3);
  color: var(--p31-text-primary);
  font-size: var(--p31-text-sm);
  width: 140px;
}
.setup-pin-row { display: flex; gap: var(--p31-space-2); margin-top:var(--p31-space-3); align-items: center; }
.setup-roster { display: flex; flex-wrap: wrap; gap: var(--p31-space-2); margin-top:var(--p31-space-3); }
.setup-member {
  display: flex; align-items: center; gap: var(--p31-space-2);
  background: var(--p31-surface2);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-sm);
  padding:var(--p31-space-2) var(--p31-space-3);
  cursor: pointer;
  color: var(--p31-cloud);
  min-height: 40px;
}
.setup-member.active { border-color: var(--p31-accent); background: color-mix(in oklch, var(--p31-accent) 15%, var(--p31-surface2)); }
.setup-rows { display: flex; flex-direction: column; gap: var(--p31-space-2); margin-top:var(--p31-space-3); }
.setup-row { display: flex; justify-content: space-between; gap: var(--p31-space-3); color: var(--p31-cloud); font-size: var(--p31-text-sm); }
.setup-ok { color: var(--p31-accent-green); }
.setup-err { color: var(--p31-accent-red); }
.setup-dim { color: var(--p31-text-muted); }
.setup-mono { font-family: var(--p31-mono); font-size: 12px; color: var(--p31-text-muted); word-break: break-all; }

/* ThemeCharm — brand × world × age × sensory */
.charm { display: flex; flex-direction: column; gap: var(--p31-space-3); margin-top:var(--p31-space-3); }
.charm-row { display: flex; align-items: center; gap: var(--p31-space-2); flex-wrap: wrap; }
.charm-label { font-size: var(--p31-text-sm); color: var(--p31-text-muted); min-width: 72px; }
.charm-chip-row { display: flex; gap: var(--p31-space-1); flex-wrap: wrap; }
.charm-chip {
  background: var(--p31-surface2);
  border: 1px solid var(--p31-glass-border);
  border-radius: 999px;
  padding:8px 12px;
  font-size: var(--p31-text-sm);
  color: var(--p31-cloud);
  cursor: pointer;
  min-height: 34px;
}
.charm-chip.is-active { background: var(--p31-accent); color: var(--p31-ink); border-color: transparent; font-weight: 600; }
.charm-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--p31-cloud); font-size: var(--p31-text-sm); cursor: pointer; }
.charm-toggle input { width: 18px; height: 18px; accent-color: var(--p31-accent); }

/* Dev menu */
.dev-menu {
  position: fixed;
  right: var(--p31-space-4);
  bottom: var(--p31-space-4);
  z-index: 1300;
  width: min(380px, calc(100vw - 2 * var(--p31-space-4)));
  background: var(--p31-surface2);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-md);
  box-shadow: var(--p31-glass-shadow);
  overflow: hidden;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.dev-menu__head {
  display: flex; justify-content: space-between; align-items: center;
  padding:var(--p31-space-2) var(--p31-space-3);
  border-bottom: 1px solid var(--p31-glass-border);
  font-weight: 600;
  color: var(--p31-text-primary);
}
.dev-menu__close {
  background: none; border: none; color: var(--p31-cloud);
  font-size: 18px; cursor: pointer; min-width: 32px; min-height: 32px;
}
.dev-menu-content { overflow-y: auto; padding:var(--p31-space-3); display: flex; flex-direction: column; gap: var(--p31-space-4); }
.dev-pane h3 { font-size: var(--p31-text-sm); font-weight: 600; color: var(--p31-text-primary); margin-bottom:var(--p31-space-2); }
.dev-pane p { color: var(--p31-cloud); font-size: var(--p31-text-sm); margin:4px 0; }
.dev-pane__row { display: flex; gap: var(--p31-space-2); flex-wrap: wrap; margin-top:var(--p31-space-2); }
.btn-sm { padding:8px 12px; font-size: var(--p31-text-sm); min-height: 32px; }
.dev-list { list-style: none; padding:0; margin:0; display: flex; flex-direction: column; gap: 4px; }

/* Profile surface */
.profile-member-bar { display: flex; flex-wrap: wrap; gap: var(--p31-space-2); margin-top:var(--p31-space-4); }
.profile-member {
  display: inline-flex; align-items: center; gap: var(--p31-space-2);
  background: var(--p31-glass-bg);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-sm);
  padding:var(--p31-space-2) var(--p31-space-3);
  cursor: pointer;
  color: var(--p31-cloud);
  font-size: var(--p31-text-sm);
  min-height: 40px;
  backdrop-filter: var(--p31-glass-blur);
}
.profile-member.active {
  border-color: var(--p31-accent);
  background: color-mix(in oklch, var(--p31-accent) 15%, var(--p31-surface2));
  color: var(--p31-text-primary);
}
.profile-member__check { color: var(--p31-accent); font-weight: 700; margin-left:2px; }

/* Identity surface — family passports */
.identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--p31-space-4);
  margin-top:var(--p31-space-5);
}
.identity-card {
  padding:var(--p31-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--p31-space-2);
}
.identity-card.active {
  border-color: var(--p31-accent);
  box-shadow: 0 0 0 1px var(--p31-accent), 0 8px 24px color-mix(in oklch, var(--p31-accent) 20%, transparent);
}
.identity-card__head { display: flex; align-items: center; gap: var(--p31-space-2); }
.identity-card__emoji { font-size: 24px; }
.identity-card__name { font-weight: 600; color: var(--p31-text-primary); }

/* SBT gallery */
.sbt-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--p31-space-3);
  margin-top:var(--p31-space-3);
}
.sbt-card {
  padding:var(--p31-space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sbt-card--achievement { border-left: 3px solid var(--p31-accent-cyan); }
.sbt-card--credential { border-left: 3px solid var(--p31-accent-violet); }
.sbt-card--affiliation { border-left: 3px solid var(--p31-accent-green); }
.sbt-card--guardian { border-left: 3px solid var(--p31-accent-gold); }
.sbt-card__kind { font-size: var(--p31-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--p31-cloud); }
.sbt-card__title { font-size: var(--p31-text-base); font-weight: 600; color: var(--p31-text-primary); }
.sbt-card__desc { font-size: var(--p31-text-sm); color: var(--p31-cloud); }
.sbt-card__foot { display: flex; justify-content: space-between; font-size: var(--p31-text-xs); color: var(--p31-text-muted); margin-top:4px; }
.passport-summary { color: var(--p31-text-muted); font-size: var(--p31-text-sm); }

/* Journey link in the workspace topbar */
.topbar-journey {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding:8px 12px;
  border-radius: var(--p31-radius-sm);
  border: 1px solid var(--p31-glass-border);
  color: var(--p31-cloud);
  font-size: var(--p31-text-sm);
  min-height: 36px;
  text-decoration: none;
  transition: border-color var(--p31-transition-fast), color var(--p31-transition-fast);
}
.topbar-journey:hover {
  border-color: color-mix(in oklch, white 22%, transparent);
  color: var(--p31-text-primary);
}
/* ==========================================================================
   P31 Quantum Material — OKLCH Design Tokens
   Token-audit-safe: no raw hex. All values use oklch() or color-mix().
   ========================================================================== */

:root {
/* tier: primitive */
  /* --- Primitives (immutable) --- */
  --p31-void: oklch(0.08 0.005 270);
  --p31-surface: oklch(0.14 0.008 270);
  --p31-surface2: oklch(0.2 0.012 270);
  --p31-surface3: oklch(0.28 0.015 270);
  --p31-cloud: oklch(0.68 0.008 270);
  --p31-text-primary: oklch(0.96 0.005 270);
  --p31-text-muted: oklch(0.82 0.012 270);

  /* Accents */
  --p31-accent-cyan: oklch(0.78 0.18 195);
  --p31-accent-violet: oklch(0.72 0.16 285);
  --p31-accent-gold: oklch(0.82 0.16 85);
  --p31-accent-green: oklch(0.76 0.14 155);
  --p31-accent-red: oklch(0.68 0.18 15);
  --p31-accent-iris: oklch(0.62 0.14 275);

/* tier: semantic */
  /* Glass */
  --p31-glass-bg: color-mix(in oklch, white 4%, transparent);
  --p31-glass-bg-hover: color-mix(in oklch, white 7%, transparent);
  --p31-glass-border: color-mix(in oklch, white 8%, transparent);
  --p31-glass-border-focus: color-mix(in oklch, var(--p31-accent-cyan) 50%, transparent);
  --p31-glass-blur: blur(20px);
  --p31-glass-shadow: 0 12px 32px 0 color-mix(in oklch, black 45%, transparent);
  --p31-scrim: linear-gradient(
    180deg,
    color-mix(in oklch, var(--p31-void) 85%, transparent) 0%,
    color-mix(in oklch, var(--p31-void) 40%, transparent) 100%
  );

/* tier: semantic */
  /* Semantic mapping */
  --p31-accent: var(--p31-accent-cyan);
  --p31-accent-hover: oklch(0.84 0.16 195);
  --p31-accent-dim: color-mix(in oklch, var(--p31-accent-cyan) 12%, transparent);
  --p31-success: var(--p31-accent-green);
  --p31-text-on-accent: var(--p31-void);
  --p31-surface-base: var(--p31-surface);
  --p31-text-strong: var(--p31-text-primary);

/* tier: semantic */
  /* Ambient (p31ca MolecularHeart + Starfield) */
  --p31-star: oklch(0.8 0.125 90);
  --p31-heart-core: var(--p31-accent-cyan);
  --p31-heart-plasma: var(--p31-accent-violet);
  --p31-scene-rotation: 1;
  --p31-scene-tilt: 0.18;
  --p31-scene-scale: 2.2;
  --p31-scene-density: 140;
  --p31-scene-twinkle: 1;
  --p31-scene-flare: 6;

/* tier: primitive */
  /* Typography */
  --p31-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --p31-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --p31-text-xs: 0.75rem;
  --p31-text-sm: 0.875rem;
  --p31-text-base: 1rem;
  --p31-text-lg: 1.125rem;
  --p31-text-xl: 1.25rem;
  --p31-text-h3: 1.5rem;
  --p31-text-h2: 2rem;
  --p31-text-h1: 3rem;

/* tier: primitive */
  /* Spacing */
  --p31-space-1: 4px;
  --p31-space-2: 8px;
  --p31-space-3: 12px;
  --p31-space-4: 16px;
  --p31-space-5: 24px;
  --p31-space-6: 32px;
  --p31-space-7: 48px;

/* tier: primitive */
  /* Radius */
  --p31-radius-sm: 8px;
  --p31-radius-md: 12px;
  --p31-radius-lg: 24px;
  --p31-radius-full: 9999px;

/* tier: primitive */
  /* Motion */
  --motion-scale: 1;
  --p31-transition-fast: calc(150ms * var(--motion-scale));
  --p31-transition-normal: calc(250ms * var(--motion-scale));
  --p31-transition-slow: calc(400ms * var(--motion-scale));
  --p31-ease-quantum: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-scale: 0.1;
  }
}

/* backdrop-filter is GPU-expensive on mid-range mobile — cap the blur. */
@media (max-width: 768px) {
  :root {
    --p31-glass-blur: blur(10px);
  }
}

/* prefers-reduced-transparency (Chrome 118+) — solid surfaces, no blur. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --p31-glass-blur: none;
    --p31-glass-bg: color-mix(in oklch, var(--p31-surface) 96%, transparent);
    --p31-glass-bg-hover: var(--p31-surface2);
  }
}
/* ── Quantum enterprise polish: component tier + surface hierarchy ──────────
   Research bar: 4+ surface elevation levels, luminance-stepped 5-8%; component
   tokens reference semantic (never primitives) so Chameleon theming is one-level. */
:root {
/* tier: semantic */
  /* Surface hierarchy — elevation by luminance (5-8% steps), not shadow. */
  --p31-surface-deep: oklch(0.10 0.012 270);
  --p31-surface-raised: oklch(0.19 0.016 270);
  --p31-surface-overlay: oklch(0.24 0.022 270);
  --p31-surface-modal: oklch(0.29 0.028 270);

/* tier: component */
  /* Component tokens — scoped overrides (reference semantic, never primitives). */
  --p31-button-bg: var(--p31-accent);
  --p31-button-fg: var(--p31-text-on-accent);
  --p31-button-hover-bg: color-mix(in oklch, var(--p31-accent) 88%, white 12%);
  --p31-card-bg: var(--p31-glass-bg);
  --p31-card-border: var(--p31-glass-border);
  --p31-badge-live-bg: color-mix(in oklch, var(--p31-success) 16%, transparent);
  --p31-badge-live-fg: var(--p31-success);
  --p31-input-bg: color-mix(in oklch, var(--p31-surface-base) 92%, transparent);
  --p31-input-border: var(--p31-glass-border);
  --p31-input-focus: var(--p31-accent);
  --p31-code-bg: color-mix(in oklch, var(--p31-surface-deep) 70%, transparent);
  --p31-code-fg: var(--p31-text-strong);
}

/* ── Enterprise surface layout tokens (M3 / Coinbase rhythm) ─────────────── */
:root {
/* tier: semantic */
  --surface-max-width: 960px;
  --surface-gutter: 32px;
  --surface-section-gap: 64px;
  --surface-card-gap: 20px;
  --surface-card-padding:32px;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: color-mix(in oklch, var(--p31-void) 92%, transparent);
  color: var(--p31-text-primary);
  font-family: var(--p31-font-sans);
  font-size: var(--p31-text-base);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

:focus-visible {
  outline: 2px solid var(--p31-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--p31-space-4);
  background: var(--p31-accent);
  color: var(--p31-void);
  padding:var(--p31-space-2) var(--p31-space-4);
  border-radius: var(--p31-radius-sm);
  font-weight: 600;
  z-index: 9999;
  transition: top var(--p31-transition-fast);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--p31-space-4);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p31-space-2);
  min-height: 40px;
  padding:var(--p31-space-2) var(--p31-space-4);
  border-radius: var(--p31-radius-sm);
  font-family: var(--p31-font-sans);
  font-size: var(--p31-text-base);
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--p31-transition-fast) var(--p31-ease-quantum);
  background: transparent;
  color: var(--p31-text-primary);
  text-decoration: none;
  user-select: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--p31-accent);
  color: var(--p31-void);
  font-weight: 600;
}

.btn-primary:hover:not(:disabled) {
  background: var(--p31-accent-hover);
  box-shadow: 0 0 16px color-mix(in oklch, var(--p31-accent) 35%, transparent);
}

.btn-glass {
  background: var(--p31-glass-bg);
  border-color: var(--p31-glass-border);
  backdrop-filter: var(--p31-glass-blur);
}

.btn-glass:hover:not(:disabled) {
  background: var(--p31-glass-bg-hover);
  border-color: color-mix(in oklch, white 18%, transparent);
}

.glass-panel {
  background: var(--p31-glass-bg);
  border: 1px solid var(--p31-glass-border);
  backdrop-filter: var(--p31-glass-blur);
  border-radius: var(--p31-radius-md);
  box-shadow: var(--p31-glass-shadow);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding:2px 8px;
  border-radius: var(--p31-radius-full);
  font-size: var(--p31-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-spark {
  background: color-mix(in oklch, var(--p31-accent-cyan) 15%, transparent);
  color: var(--p31-accent-cyan);
  border: 1px solid color-mix(in oklch, var(--p31-accent-cyan) 30%, transparent);
}

.badge-maker {
  background: color-mix(in oklch, var(--p31-accent-violet) 15%, transparent);
  color: var(--p31-accent-violet);
  border: 1px solid color-mix(in oklch, var(--p31-accent-violet) 30%, transparent);
}

.badge-workshop {
  background: color-mix(in oklch, var(--p31-accent-gold) 15%, transparent);
  color: var(--p31-accent-gold);
  border: 1px solid color-mix(in oklch, var(--p31-accent-gold) 30%, transparent);
}/* ==========================================================================
   P31 Design Portal — content classes (suite vocabulary only).
   All surfaces render with suite classes (surface-card, chip, glass-panel,
   badge, btn) plus the small helpers below. No legacy bespoke names.
   ========================================================================== */

/* ── Heading block ──────────────────────────────────────────────────────── */
.surface-head { margin-bottom:20px; }
.surface-head__eyebrow {
  font-family: var(--p31-font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--p31-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
}
.surface-head h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin:8px 0 8px;
  color: var(--p31-text);
}
.surface-head p {
  color: var(--p31-text-secondary);
  font-size: 15px;
  max-width: 56ch;
  margin:0;
}

/* ── Live preview stage ──────────────────────────────────────────────────── */
.preview-box {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:16px;
  border: 1px dashed var(--p31-glass-border);
  border-radius: 12px;
  background: color-mix(in oklch, var(--p31-void) 60%, transparent);
}
.preview-box--mini { min-height: 56px; padding:8px; }
.preview-box--lab { min-height: 200px; }
.preview-box__text { font-size: 12px; color: var(--p31-text-tertiary); text-align: center; line-height: 1.5; }

/* ── Utility rows ──────────────────────────────────────────────────────────── */
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ── Tiny label (replaces contract-block-label) ─────────────────────── */
.label-tiny {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--p31-text-tertiary);
  margin:0 0 8px;
}

/* ── Mono helper ────────────────────────────────────────────────────── */
.mono { font-family: var(--p31-font-mono, ui-monospace, monospace); }

/* ── Suite shell reset — neutralize design-core recipes pill topbar ─── */
.topbar { margin:0; border-radius: 0; box-shadow: none; }

/* ── Surface card fill gap: header icon row, dense desc ─────────────── */
.surface-card .surface-card-header { gap: 8px; }
.surface-card-title.surface-card-title--mono { font-family: var(--p31-font-mono, ui-monospace, monospace); font-size: 14px; }

/* ── Code / toast / dyslexia helpers ───────────────────────────────── */
.code-line {
  font-family: var(--p31-font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.7;
  color: var(--p31-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  margin:0;
}
.code-line + .code-line { margin-top:4px; }

.portal-toast {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding:8px 16px;
  border-radius: 9999px;
  background: var(--p31-surface);
  border: 1px solid var(--p31-accent);
  color: var(--p31-text);
  font-size: 13px;
  font-family: var(--p31-font-mono, ui-monospace, monospace);
}

.dyslexia-mode {
  letter-spacing: 0.05em !important;
  word-spacing: 0.05em !important;
  line-height: 1.9 !important;
  font-size: 105% !important;
}

/* ── Active surface-card (Brands) ───────────────────────────────────── */
.surface-card--active {
  border-color: var(--p31-accent);
  background: color-mix(in oklch, var(--p31-accent) 10%, var(--p31-glass-bg));
}

/* ── QA gate result chips (Intent DSL) ──────────────────────────────── */
.chip-ok { background: var(--p31-accent-green); color: var(--p31-void); }
.chip-err { background: var(--p31-accent-red); color: var(--p31-void); }
.chip-warn { background: var(--p31-accent-gold); color: var(--p31-void); }
/* ── LivePreview component helpers ──────────────────────────────────── */
.catalog-preview-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.catalog-preview-text { font-size: 12px; color: var(--p31-text-tertiary); text-align: center; line-height: 1.5; }
.catalog-preview-text--muted { opacity: 0.7; }
.catalog-preview-max { min-height: 80px; display: flex; align-items: center; justify-content: center; }
.catalog-preview-cmdk { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
/* polish.css — quantum enterprise polish layer.
   Imported LAST in main.tsx. Token stance: var(--p31-*) / OKLCH only. */

/* ── Surface sizing: constrain ALL surfaces to the MCP reference (960px, centered).
     MCP + Accessibility already conform; this pulls every other surface to the
     same density bar (dense hierarchy over wide minimalism). */
/* Surface width is owned by the SurfaceLayout template (960px, the MCP bar). */

/* Tighter vertical rhythm on shared shells. */
.home-container {
  max-width: 960px;
}

/* ── Sidebar / panel alignment ──────────────────────────────────────────── */
.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top:var(--p31-space-3);
}
.nav-item {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.nav-item .lock-icon {
  display: none;
}

/* ── Theme picker ───────────────────────────────────────────────────────── */
.theme-picker {
  position: relative;
}
.theme-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--p31-space-2);
  min-height: 40px;
  padding:8px 8px;
  background: color-mix(in oklch, var(--p31-surface) 80%, transparent);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-full);
  color: var(--p31-text-primary);
  cursor: pointer;
  backdrop-filter: var(--p31-glass-blur);
}
.theme-picker__trigger:hover {
  border-color: color-mix(in oklch, var(--p31-accent) 45%, transparent);
}
.theme-picker__swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--p31-glass-border-strong);
  display: inline-block;
}
.theme-picker__label {
  font-size: var(--p31-text-sm);
  font-weight: 600;
  text-transform: capitalize;
}
.theme-picker__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 176px;
  padding:var(--p31-space-2);
  background: color-mix(in oklch, var(--p31-surface2) 96%, transparent);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-md);
  backdrop-filter: var(--p31-glass-blur);
  box-shadow: var(--p31-glass-shadow);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-picker__item {
  display: flex;
  align-items: center;
  gap: var(--p31-space-3);
  width: 100%;
  padding:var(--p31-space-2) var(--p31-space-3);
  background: none;
  border: none;
  border-radius: var(--p31-radius-sm);
  color: var(--p31-text-primary);
  cursor: pointer;
  font-size: var(--p31-text-sm);
}
.theme-picker__item:hover {
  background: color-mix(in oklch, var(--p31-accent) 12%, transparent);
}
.theme-picker__item.active {
  background: color-mix(in oklch, var(--p31-accent) 18%, transparent);
  color: var(--p31-accent);
  font-weight: 600;
}
.theme-picker__check {
  margin-left:auto;
}

/* ── Notification stack / toasts ───────────────────────────────────────── */
.notif-stack {
  position: fixed;
  right: var(--p31-space-5);
  bottom: var(--p31-space-5);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--p31-space-2);
  max-width: 360px;
  pointer-events: none;
}
.notif-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--p31-space-3);
  padding:var(--p31-space-3) var(--p31-space-4);
  background: color-mix(in oklch, var(--p31-surface2) 92%, transparent);
  border: 1px solid var(--p31-glass-border);
  border-left: 3px solid var(--p31-accent);
  border-radius: var(--p31-radius-md);
  backdrop-filter: var(--p31-glass-blur);
  box-shadow: var(--p31-glass-shadow);
  animation: notif-in 0.24s var(--p31-ease-out, ease-out);
}
@keyframes notif-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .notif-toast {
    animation: none;
  }
}
.notif-toast__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top:4px;
  flex-shrink: 0;
}
.notif-toast-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.notif-toast__title {
  font-size: var(--p31-text-sm);
  font-weight: 700;
  color: var(--p31-text-primary);
}
.notif-toast__text {
  font-size: var(--p31-text-xs);
  color: var(--p31-text-tertiary);
  line-height: 1.45;
}
.notif-toast__dismiss {
  margin-left:auto;
  background: none;
  border: none;
  color: var(--p31-text-tertiary);
  cursor: pointer;
  font-size: var(--p31-text-sm);
  padding:0 2px;
}
.notif-toast__dismiss:hover {
  color: var(--p31-text-primary);
}
/* ── Skeleton loading (component-shaped, not spinner) ────────────────────── */
.surface-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--p31-space-4);
  padding:var(--p31-space-6);
  width: 100%;
  max-width: 960px;
  margin:0 auto;
}
.skeleton-tile,
.skeleton-row,
.skeleton-card {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--p31-surface) 100%, transparent) 0%,
    color-mix(in oklch, var(--p31-surface2) 100%, transparent) 50%,
    color-mix(in oklch, var(--p31-surface) 100%, transparent) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  border-radius: var(--p31-radius-md);
}
.skeleton-tile { height: 120px; }
.skeleton-row { height: 48px; max-width: 420px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--p31-space-4); }
.skeleton-card { height: 140px; }
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-tile, .skeleton-row, .skeleton-card { animation: none; }
}

/* ── Glass-tile framing (byte-identical to .mc-step / .a11y-tile) ──────────
   The bordered glass panel that gives every surface the MCP/A11y look. */
.glass-tile {
  background: var(--p31-glass-bg);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-lg);
  padding:var(--p31-space-5);
  backdrop-filter: var(--p31-glass-blur);
  -webkit-backdrop-filter: var(--p31-glass-blur);
  box-shadow: var(--p31-glass-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--p31-space-4);
}

/* ── Starfield transparency: the fixed starfield (z=0) sits behind. Every
     chrome ancestor must be transparent so it shows through; surface content
     uses the semi-transparent glass-bg (which lets it glow through too). */
html,
body,
#root,
.app-shell,
.main-workspace,
.surface-panel {
  background: transparent !important;
}

/* ── Topbar: left cluster + portaled theme menu ─────────────────────────── */
.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--p31-space-3);
  flex-shrink: 0;
}

.theme-picker__menu {
  position: fixed;
  z-index: 400;
  min-width: 176px;
  padding:var(--p31-space-2);
  background: color-mix(in oklch, var(--p31-surface2) 96%, transparent);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-md);
  backdrop-filter: var(--p31-glass-blur);
  -webkit-backdrop-filter: var(--p31-glass-blur);
  box-shadow: var(--p31-glass-shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-picker__scrim {
  position: fixed;
  inset: 0;
  z-index: 399;
  background: transparent;
}

/* ── Nested-glass fix: one frame, transparent inner wrappers ───────────────
   Never stack glass on glass. Inside a .glass-tile, .live-example becomes a
   transparent layout wrapper (no border/bg/blur/shadow) so only the card
   frame renders — no triple borders or double padding on inner components
   (GlassPanel / StatusBadge / MetricBadge / SpoonDial). */
.glass-tile .live-example,
.surface-card .live-example {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding:var(--p31-space-3);
  gap: var(--p31-space-2);
}
.glass-tile .live-example__render,
.surface-card .live-example__render {
  display: flex;
  align-items: center;
  justify-content: center;
  padding:var(--p31-space-3);
}
.glass-tile .live-example__head,
.surface-card .live-example__head {
  padding-bottom:0;
}

/* ── Starfield: darker base + brighter stars (CSS-only, no engine edit) ── */
html {
  background: oklch(0.05 0.008 270) !important;
}
.starfield-bg canvas {
  filter: brightness(var(--star-brightness, 1.6)) contrast(1.2) saturate(1.15);
}
.starfield-bg {
  opacity: 0.9;
}

/* ── Theme picker menu: narrower (portaled, right of the logo) ─────────── */
.theme-picker__menu {
  min-width: 140px;
  padding:var(--p31-space-1);
}
.theme-picker__item {
  padding:var(--p31-space-1) var(--p31-space-2);
  gap: var(--p31-space-2);
  font-size: var(--p31-text-xs);
}
/* surface.css — the enterprise surface template rhythm + the CARD CONTRACT.
   Imported via main.tsx (after content.css). Token stance: var(--p31-*) only.

   Card contract (WP-2026-09-27): every grid card is a 4-slot SurfaceCard that
   inherits the grid's row tracks via CSS subgrid — equal-height cards, aligned
   title/body/meta/foot tracks across each row, no overflow. Traps honored:
   no class ending in `-body` (use __content), no bare 1fr (minmax(0,1fr)),
   no padding on the subgrid container, no glass-on-glass. */

.surface-layout {
  display: flex;
  flex-direction: column;
  gap: var(--surface-section-gap, 64px);
  width: 100%;
  max-width: var(--surface-max-width, 960px);
  margin: 0 auto;
  padding: var(--surface-gutter, 32px);
}

/* Hero header card — the "nice header card" Home has, on every surface. */
.surface-hero {
  gap: var(--surface-card-gap, 20px);
  max-width: 100%;
  min-width: 0;
}
.surface-hero__main {
  display: flex;
  flex-direction: column;
  gap: var(--p31-space-2);
}
.surface-hero__eyebrow {
  font-family: var(--p31-font-mono);
  font-size: var(--p31-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p31-accent);
}
.surface-hero__lede {
  max-width: 56ch;
  color: var(--p31-text-secondary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.surface-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p31-space-3);
}

/* Section rhythm — 64px between sections. */
.surface-section {
  display: flex;
  flex-direction: column;
  gap: var(--surface-card-gap, 20px);
}
.surface-section__title {
  font-size: var(--p31-text-h3);
  font-weight: 700;
  color: var(--p31-text-primary);
  margin: 0;
}

/* ─── The card grid — the parent declares the shared 4 row tracks ───
   head · body · meta · foot. Cards span a 4-track group via subgrid, so the
   tallest head sizes the head track for every card in that group, etc. */
.surface-grid {
  display: grid;
  grid-template-columns: repeat(var(--surface-grid-cols, 2), minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  grid-auto-rows: auto auto 1fr auto;
  gap: var(--surface-card-gap, 20px);
  align-items: stretch;
}
@media (max-width: 820px) {
  .surface-grid {
    grid-template-columns: 1fr;
  }
}

/* Tile/uniform grids (icons, swatches, chips) — same columns, but rows are
   plain auto tracks (NOT the 4-track card contract). Add --tiles to SurfaceGrid. */
.surface-grid--tiles {
  grid-template-rows: none;
  grid-auto-rows: auto;
}

/* ─── The card — a subgrid consumer spanning the 4 shared tracks ───
   The card carries its own glass look (no .glass-tile — that class sets
   display:flex + padding). Padding lives on the SLOTS, never the card.
   IMPORTANT: padding: 0 applies ONLY to the four-slot subgrid card; any other
   element carrying .surface-card keeps the standard 24px rhythm (the earlier
   blanket padding:0 clobbered .glass-tile wrappers — "content riding the
   edge"). :has() is baseline-safe (Chrome 105+, FF 121+, Safari 15.4+). */
.surface-card:has(> .surface-card__head) {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  background: var(--p31-glass-bg);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-lg);
  backdrop-filter: var(--p31-glass-blur);
  -webkit-backdrop-filter: var(--p31-glass-blur);
  box-shadow: var(--p31-glass-shadow);
  transition: transform var(--p31-transition-normal) var(--p31-ease-quantum),
              border-color var(--p31-transition-normal);
}
.surface-card:has(> .surface-card__head):hover {
  border-color: color-mix(in oklch, var(--p31-text-primary) 15%, transparent);
  transform: translateY(-2px);
}

.surface-card__head {
  grid-row: 1;
  padding: var(--p31-space-5) var(--p31-space-5) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--p31-space-3);
  min-width: 0;
}
.surface-card__content {
  grid-row: 2;
  padding: 0 var(--p31-space-5);
  font-size: var(--p31-text-sm);
  color: var(--p31-cloud);
  line-height: 1.5;
  min-width: 0;
}
.surface-card__meta {
  grid-row: 3;
  padding: 0 var(--p31-space-5);
  font-size: var(--p31-text-xs);
  color: var(--p31-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--p31-space-2);
  min-width: 0;
}
.surface-card__foot {
  grid-row: 4;
  align-self: end;
  padding: var(--p31-space-3) var(--p31-space-5) var(--p31-space-5);
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--p31-space-2);
  min-width: 0;
}

/* ─── Overflow contract — every text node declares its behavior ─── */
.surface-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.surface-card__content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.surface-card__meta > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Anti-blowout — every grid child may shrink below its content width. */
.surface-grid > * {
  min-width: 0;
  min-height: 0;
}

/* ─── Bare escape hatch — a full-bleed card (skips the 4-slot subgrid) ─── */
.surface-card--bare {
  display: flex;
  flex-direction: column;
  gap: var(--p31-space-3);
  padding: var(--p31-space-5);
}

/* ─── Fallback for browsers without subgrid (pre-2023) ───
   Flex-column: only the footer aligns via margin-top:auto; the internals
   degrade gracefully. */
@supports not (grid-template-rows: subgrid) {
  .surface-card:has(> .surface-card__head) {
    display: flex;
    flex-direction: column;
    padding: var(--p31-space-5);
  }
  .surface-card__head,
  .surface-card__content,
  .surface-card__meta,
  .surface-card__foot {
    padding: 0;
    grid-row: auto;
  }
  .surface-card__content {
    flex: 1 1 auto;
  }
  .surface-card__foot {
    margin-top: auto;
    align-self: auto;
  }
}
/* ── Composition-class padding (WP verified fix, 2026-09-27) ────────────────
   design-core GlassPanel emits p-4/p-6/p-8 for its size variants but never
   defined them — every GlassPanel computed padding: 0 ("content riding the
   edge"). Fixed in the design-core canon (recipes.css) + re-packed into the
   vendor. Portal-specific compositions that also need padding get it here. */
.a2ui-pane {
  padding: var(--p31-space-5);
}
.glab-hero {
  padding: var(--p31-space-6);
}
.glab-strip {
  padding: var(--p31-space-3);
}

/* Raw .glass-panel composition class (used directly by some surfaces, e.g. the
   Icons Import block) — design-core gives it bg/border but no padding. Pad it
   like .glass-tile/.glass-strong so content never rides the edge. */
.glass-panel {
  padding: var(--p31-space-5);
}

/* ── SurfaceCard head badge pin (the four-slot contract) ────────────────── */
.surface-card__head > .badge,
.surface-card__head > .chip {
  margin-left: auto;
  flex-shrink: 0;
}
.surface-card__head {
  gap: var(--p31-space-4);
}
/* utilities.css — the missing utility layer (WP 2026-09-27).
   The codebase has long used Tailwind-style utility classes (flex, gap-*,
   mb-*, rounded-*, text-sm…) that were NEVER defined — every one rendered as a
   no-op, breaking flex/gap/margin across surfaces (the recurring "same
   sections" issues). This defines the set actually used, mapped to P31 tokens.
   Guarded by scripts/undefined-class-audit.mjs (every className must be defined
   or a dynamic/state token). Token stance: var(--p31-*) only. */

/* Layout */
.flex { display: flex; }
.grid { display: grid; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }

/* Gap */
.gap-2 { gap: var(--p31-space-2); }
.gap-3 { gap: var(--p31-space-3); }
.gap-4 { gap: var(--p31-space-4); }

/* Margin */
.mt-3 { margin-top: var(--p31-space-3); }
.mb-2 { margin-bottom: var(--p31-space-2); }
.mb-3 { margin-bottom: var(--p31-space-3); }
.mb-6 { margin-bottom: var(--p31-space-6); }

/* Padding */
.p-4 { padding: var(--p31-space-4); }
.px-4 { padding-inline: var(--p31-space-4); }
.py-2 { padding-block: var(--p31-space-2); }

/* Size */
.h-8 { height: 32px; }
.h-40 { height: 160px; }
.h-64 { height: 256px; }
.w-8 { width: 32px; }
.resize-y { resize: vertical; }

/* Radius */
.rounded-lg { border-radius: var(--p31-radius-md); }
.rounded-xl { border-radius: 16px; }
.rounded-full { border-radius: var(--p31-radius-full); }

/* Typography */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.font-mono { font-family: var(--p31-font-mono); }
.font-semibold { font-weight: 600; }
.break-words { overflow-wrap: anywhere; }

/* Border */
.border-none { border: none; }
.border-2 { border-width: 2px; }
.border-accent { border-color: var(--p31-accent); }
.border-glass-border { border-color: var(--p31-glass-border); }
.border-t-transparent { border-top-color: transparent; }

/* Interaction + motion */
.cursor-pointer { cursor: pointer; }
.transition-all { transition: all var(--p31-transition-normal) var(--p31-ease-quantum); }
.animate-spin { animation: p31-spin 1s linear infinite; }
@keyframes p31-spin {
  to { transform: rotate(360deg); }
}

/* Responsive grid columns (used by surfaces) */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Arbitrary value used in source: text-[11px] */
.text-\[11px\] { font-size: 11px; }
.w-full { width: 100%; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.text-secondary { color: var(--p31-text-secondary); }
.text-tertiary { color: var(--p31-text-tertiary); }

/* Padding — design-core GlassPanel emits p-4/p-6/p-8 for its size variants;
   the portal imports design-core css/index.css (not recipes.css), so these are
   defined here. p-4=16px · p-6=24px · p-8=32px (Tailwind semantics). */
.p-6 { padding: var(--p31-space-5); }
.p-8 { padding: var(--p31-space-6); }
/* legacy-missing.css — token-based styles for classes the surfaces reference
   but no stylesheet ever defined (surfaced by undefined-class-audit.mjs).
   These are the "catalog mangled" / "brands not rendering" contributors.
   Token stance: var(--p31-*) only. */

/* ── Brands: the chameleon brand header ─── */
.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: var(--p31-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: var(--p31-accent-dim);
  color: var(--p31-accent);
}
.brand-word {
  font-weight: 700;
  font-size: var(--p31-text-lg);
  color: var(--p31-text-primary);
}
.brand-version {
  font-family: var(--p31-font-mono);
  font-size: var(--p31-text-xs);
  color: var(--p31-text-muted);
}
.brand-delta {
  font-family: var(--p31-font-mono);
  font-size: var(--p31-text-xs);
  color: var(--p31-accent);
}

/* ── Catalog: live preview tiles (search / crisis / starfield / fallback) ─── */
.catalog-preview-search,
.catalog-preview-crisis,
.catalog-preview-starfield,
.catalog-preview-fallback {
  position: relative;
  overflow: hidden;
  border-radius: var(--p31-radius-md);
  background: var(--p31-glass-bg);
  border: 1px solid var(--p31-glass-border);
  padding: var(--p31-space-4);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--p31-space-2);
}
.catalog-preview-cmdk-input {
  width: 100%;
  max-width: 260px;
  background: var(--p31-surface2);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-md);
  padding: var(--p31-space-3) var(--p31-space-4);
  font-family: var(--p31-font-mono);
  font-size: var(--p31-text-sm);
  color: var(--p31-text-primary);
}
.catalog-preview-crisis__title {
  font-weight: 700;
  color: var(--p31-accent-gold);
}
.catalog-preview-crisis__text {
  font-size: var(--p31-text-sm);
  color: var(--p31-cloud);
}
.catalog-preview-crisis__bar {
  height: 6px;
  border-radius: var(--p31-radius-full);
  background: var(--p31-surface3);
}
.catalog-preview-crisis__btn,
.catalog-preview-crisis__btn--ghost {
  padding: var(--p31-space-2) var(--p31-space-4);
  border-radius: var(--p31-radius-md);
  border: 1px solid var(--p31-glass-border);
  color: var(--p31-text-primary);
  background: var(--p31-surface2);
}
.catalog-preview-crisis__btn--ghost {
  background: transparent;
}
.catalog-preview-starfield__core {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--p31-accent);
}

/* ── MCP console: run output ─── */
.mc-run {
  display: flex;
  flex-direction: column;
  gap: var(--p31-space-2);
}

/* ── Recipes grid item ─── */
.recipes-grid__item {
  min-width: 0;
}

/* ── Marketplace contract (expandable section) ─── */
.surface-card-contract {
  border-top: 1px solid var(--p31-glass-border);
  padding-top: var(--p31-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--p31-space-3);
}

/* ── A2UI export button ─── */
.a2ui-export {
  font-family: var(--p31-font-mono);
  font-size: var(--p31-text-sm);
  color: var(--p31-accent);
  background: var(--p31-accent-dim);
  border: 1px solid color-mix(in oklch, var(--p31-accent) 40%, transparent);
  border-radius: var(--p31-radius-md);
  padding: var(--p31-space-2) var(--p31-space-4);
  cursor: pointer;
}

/* ── Hide on mobile ─── */
@media (max-width: 640px) {
  .hide-mobile { display: none; }
}
/* ── Chameleon brand demo card container ─── */
.chameleon-card {
  display: flex;
  flex-direction: column;
  gap: var(--p31-space-3);
  padding: var(--p31-space-5);
  background: var(--p31-glass-bg);
  border: 1px solid var(--p31-glass-border);
  border-radius: var(--p31-radius-lg);
}
/* dome.css — dome surface + ambient background wrapper. Token stance: var(--p31-*) only.
   The LED controller styling lives in the vendored @p31/p31ca-ambient CSS. */

/* Portal-wide ambient wrapper (MolecularHeart is fixed z-0 + pointer-events none). */
.dome-bg {
  pointer-events: none;
}
.dome-bg canvas {
  width: 100vw;
  height: 100vh;
}

/* /dome surface — full-bleed stage, no cards. Drag orbits the dome. */
.dome-surface {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.dome-surface:active {
  cursor: grabbing;
}
.dome-stage {
  position: absolute;
  inset: 0;
  min-height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.dome-a11y {
  position: absolute;
  bottom: var(--p31-space-3);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--p31-text-xs);
  color: var(--p31-text-tertiary);
  z-index: 290;
  max-width: 90%;
  text-align: center;
  pointer-events: none;
}/* ambient.css — portal-specific overrides on the vendored @p31/p31ca-ambient
   CSS. Imported AFTER the vendored CSS so these win at equal specificity.
   Token stance: var(--p31-*) only (color-mix, no raw hex/rgba).

   LED controller transparency: the open panel (.devpanel) is a 0.56–0.62
   alpha gradient + 32px backdrop blur — it blocks the dome. We drop it to the
   ~0.38–0.46 band + softer blur so the molecular heart reads through. The
   internal chips/wells keep their own surfaces (we do NOT touch
   --p31-panel-surface — lowering it would hurt readout readability).

   A11y floor: at crisis (data-spoons 0–1) and prefers-reduced-motion the
   panel goes back near-opaque — a see-through panel over a moving dome is a
   vestibular hazard. Mirrors the ambient's own crisis-floor philosophy. */

.devpanel {
  background: linear-gradient(
    160deg,
    color-mix(in oklch, var(--p31-surface2) 24%, transparent) 0%,
    color-mix(in oklch, var(--p31-surface) 22%, transparent) 60%,
    color-mix(in oklch, var(--p31-surface2) 24%, transparent) 100%
  );
  /* Lighten the internal chips/wells so the dome reads through them (the LCD
     deep wells keep their solid surface for legibility). */
  --p31-panel-surface: color-mix(in oklch, var(--p31-surface) 55%, transparent);
}
.devpanel::before {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Crisis / calm — the panel becomes near-opaque for readability. */
[data-spoons="0"] .devpanel,
[data-spoons="1"] .devpanel {
  background: linear-gradient(
    160deg,
    color-mix(in oklch, var(--p31-surface2) 85%, transparent) 0%,
    color-mix(in oklch, var(--p31-surface) 82%, transparent) 60%,
    color-mix(in oklch, var(--p31-surface2) 85%, transparent) 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .devpanel {
    background: linear-gradient(
      160deg,
      color-mix(in oklch, var(--p31-surface2) 85%, transparent) 0%,
      color-mix(in oklch, var(--p31-surface) 82%, transparent) 60%,
      color-mix(in oklch, var(--p31-surface2) 85%, transparent) 100%
    );
  }
}

/* The static SVG molecular-heart layer is removed from the vendored JSX; this
   is a safety net so any stale copy can never paint over the dome. */
.molecular-heart-svg {
  display: none;
}