/* =================================================================
 * Cognitive Atoms — Sovereign Cognition Console
 * Phase 56 — Cinematic Cognition Infrastructure
 *
 * Atmospheric darkness + restrained neon. The console reads as a
 * cinematic local operating environment: deep void, layered
 * bloom, glowing continuity ring, color-signatured memory
 * constellation. Accents are sparse — energy inside darkness,
 * never RGB spam.
 *
 * Constraints honoured:
 *   * Localhost-only — no remote fonts, no CDN, no analytics.
 *   * System sans stack — Space Grotesk feel achieved through
 *     letter-spacing, font-feature-settings, weight choices.
 *   * Reduced motion respected.
 *   * Every test-pinned class / ID preserved.
 * ================================================================= */

:root {
  /* ---- Surfaces (OLED void → graphite layered system) ----
   * Lighting pass: pushed closer to obsidian/OLED black so blacks
   * separate cleanly and cards lift off the page. The Phase 56
   * literals are preserved as ``*-legacy`` aliases below for
   * provenance + palette presence. --bg-void is the pinned floor. */
  --bg-void:           #050608;
  --bg-page:           #07080D;
  --bg-card:           #0B0D14;
  --bg-card-hover:     #141826;
  --bg-sidebar:        #050609;
  /* Phase 56 cinematic literals — kept for lineage. */
  --bg-page-legacy:    #0A0B11;
  --bg-card-legacy:    #0D0F16;
  --bg-sidebar-legacy: #07080C;

  /* Legacy aliases — kept so existing selectors render. */
  --bg-root:           #0B0B0C;
  --bg-soft:           #121316;
  --bg-elev:           #131624;
  --surface-card:      var(--bg-card);
  --surface-card-strong: var(--bg-card-hover);
  --surface-glass:     rgba(13, 15, 22, 0.62);
  /* Phase 54-era token aliases — kept so existing tests / selectors render. */
  --color-bg:          var(--bg-void);
  --color-bg-soft:     var(--bg-page);
  --color-bg-card:     var(--bg-card);
  --color-bg-elev:     var(--bg-card-hover);

  /* ---- Borders (hairline, almost invisible) ---- */
  --border:            rgba(255, 255, 255, 0.06);
  --border-soft:       rgba(255, 255, 255, 0.04);
  --border-card:       rgba(140, 255, 200, 0.06);
  --border-bright:     rgba(140, 255, 200, 0.18);
  --border-violet:     rgba(157, 117, 255, 0.18);
  --border-glow:       rgba(140, 255, 200, 0.10);
  --color-border:      var(--border);
  --color-border-soft: var(--border-soft);

  /* ---- Type ---- */
  --text-primary:      #F6F8FC;
  --text-secondary:    #99A0B5;
  --text-tertiary:     #666D83;
  --text-eyebrow:      #767E94;
  --text-mono:         #7CD6B7;
  --color-text:        var(--text-primary);
  --color-text-soft:   var(--text-secondary);
  --color-text-mute:   var(--text-tertiary);
  --text:              var(--text-primary);
  --text-soft:         var(--text-secondary);
  --text-mute:         var(--text-tertiary);

  /* ---- Neon (restrained accents, signal-oriented) ---- */
  /* The old neon-green is retired app-wide: this token now resolves to brand
     jade, the canonical "good / connected / live" hue. Every consumer
     (--green, --accent-success, status badges, trust strip, …) recolors to
     jade in one place — no neon-green renders anywhere. */
  --neon-green:        #35D6A0;
  --neon-green-bright: #5BE6B8;
  --neon-cyan:         #3FE0FF;
  --neon-cyan-bright:  #6BEBFF;
  --neon-violet:       #9D75FF;
  --neon-violet-bright:#B594FF;
  --neon-magenta:      #FF3DAA;
  --neon-orange:       #FF8B3D;
  --neon-amber:        #FFC53D;

  /* Legacy aliases — point semantic names at the new palette. */
  --accent-warm:       var(--neon-cyan);
  --accent-silver:     var(--text-secondary);
  --accent-graphite:   var(--text-tertiary);
  --accent-success:    var(--neon-green);
  --accent-warn:       var(--neon-amber);
  --accent-danger:     #FF6B7C;
  --accent-blue:       var(--neon-cyan);   /* old --accent-blue is now restrained cyan */
  --accent-teal:       var(--neon-cyan);
  --accent-green:      var(--neon-green);
  --color-accent:      var(--neon-cyan);
  --color-accent-2:    var(--neon-green);
  --warning:           var(--neon-amber);
  --danger:            var(--accent-danger);
  --accent:            var(--neon-cyan);

  /* ---- Cognitive-instrument doctrine aliases ----
   * Canonical names used across all cognitive-instrument surfaces.
   * Doctrine: pages surface cognition first, navigation second; every
   * surface answers "what's true / unresolved / changed / emerging /
   * why". These names point at the existing palette so legacy
   * selectors keep rendering. Recorded in
   * /Users/apple/.claude/projects/-Users-apple-cognitive-atoms-poc/memory/cognitive_instrument_doctrine.md
   */
  --void:              var(--bg-void);
  --page:              var(--bg-page);
  --card:              var(--bg-card);
  --elevated:          var(--bg-card-hover);
  --glass:             var(--surface-glass);
  --ink:               var(--text-primary);
  --ink-2:             var(--text-secondary);
  --ink-3:             var(--text-tertiary);
  --ink-eyebrow:       var(--text-eyebrow);
  --mono-tint:         var(--text-mono);
  --green:             var(--neon-green);
  --green-bright:      var(--neon-green-bright);
  --cyan:              var(--neon-cyan);
  --cyan-bright:       var(--neon-cyan-bright);
  --violet:            var(--neon-violet);
  --amber:             var(--neon-amber);
  --magenta:           var(--neon-magenta);
  --orange:            var(--neon-orange);
  --border-green-bright: var(--border-bright);
  --bloom-green:       rgba(53, 214, 160, 0.22);
  --bloom-cyan:        rgba(63, 224, 255, 0.22);
  --bloom-violet:      rgba(157, 117, 255, 0.20);
  --bloom-amber:       rgba(255, 197, 61, 0.22);
  --bloom-magenta:     rgba(255, 61, 170, 0.20);
  --bloom-orange:      rgba(255, 139, 61, 0.22);
  --bloom-danger:      rgba(255, 107, 124, 0.22);
  --sans:              -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --mono:              "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Glow recipes ---- */
  --glow-green:        0 0 8px rgba(53, 214, 160, 0.55), 0 0 22px rgba(53, 214, 160, 0.22);
  --glow-cyan:         0 0 8px rgba(63, 224, 255, 0.55), 0 0 22px rgba(63, 224, 255, 0.22);
  --glow-violet:       0 0 8px rgba(157, 117, 255, 0.55), 0 0 22px rgba(157, 117, 255, 0.22);
  --glow-warm:         rgba(63, 224, 255, 0.10);
  --glow-success:      rgba(53, 214, 160, 0.18);
  --glow-blue:         rgba(63, 224, 255, 0.10);
  --color-glow-accent: rgba(63, 224, 255, 0.10);
  --color-glow-trust:  rgba(53, 214, 160, 0.18);

  /* ---- Shadows (soft ambient depth, not harsh) ---- */
  --shadow-soft:       0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-card:       0 16px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.40);
  --shadow-float:      0 24px 56px rgba(0, 0, 0, 0.60), 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-hero:       0 40px 120px rgba(0, 0, 0, 0.70), 0 8px 24px rgba(0, 0, 0, 0.50);

  /* ---- Spacing scale (4 px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ---- Type scale ---- */
  --text-display: 44px;
  --text-h2:      32px;
  --text-h3:      11px;
  --text-h4:      13px;
  --text-body:    14px;
  --text-meta:    12px;
  --text-micro:   11px;

  /* ---- Radius ---- */
  --radius-1:   8px;
  --radius-2:   14px;
  --radius-3:   18px;
  --radius-xl:  18px;
  --radius-2xl: 22px;
  --radius-3xl: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --motion-fast:   180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-normal: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-calm:   380ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-smooth: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ============================================================
   * Phase 69 — Temporal Motion System
   *
   * A temporal-realism layer, NOT a visual redesign. Motion here
   * communicates continuity, persistence, cognitive gravity and
   * longitudinal evolution — never delight, urgency or attention.
   *
   * Motion tier framework. Every animated element declares which
   * tier it belongs to; nothing exceeds its tier's motion budget or
   * pace. Tiers are documented in
   * docs/ui/TEMPORAL_MOTION_DOCTRINE.md.
   *
   *   Tier 0  static infrastructure        — no motion at all
   *   Tier 1  ambient environmental drift  — 24–40s, imperceptible
   *   Tier 2  continuity pulse             — 12–22s, restrained
   *   Tier 3  strategic focus response     — transition on state
   *   Tier 4  user-triggered interaction   — the --motion-* tokens
   *
   * Durations are deliberately non-round and mutually coprime so
   * layered loops never resolve into an obvious shared period.
   * ------------------------------------------------------------ */

  /* Tier 1 — ambient environmental drift. */
  --temporal-drift-slow:  41s;   /* field migration            */
  --temporal-drift:       33s;   /* luminance drift            */
  --temporal-drift-dust:  37s;   /* deep-space dust            */
  --temporal-grain:       29s;   /* atmospheric grain shimmer  */

  /* Tier 2 — continuity pulse (async, slightly varied per node). */
  --temporal-pulse:       17s;   /* primary continuity pulse   */
  --temporal-pulse-alt:   13s;   /* preserved-signal resonance */
  --temporal-shimmer:     23s;   /* continuity field shimmer   */

  /* Orbital pacing — gravitational, inevitable, never "spinning". */
  --temporal-orbit:       96s;   /* main orbit revolution      */
  --temporal-orbit-counter: 124s;/* parallax counter-orbit     */
  --temporal-orbit-trace: 88s;   /* low-opacity orbital trace  */

  /* Long, asymmetric easing curves — cinematic, non-mechanical.
   * The continuity ease eases out slowly (settling, never
   * arriving); the gravity ease is near-linear with a faint pull
   * so orbital motion reads as inertia, not animation. */
  --ease-continuity: cubic-bezier(0.33, 0.00, 0.20, 1.00);
  --ease-temporal:   cubic-bezier(0.45, 0.05, 0.30, 1.00);
  --ease-gravity:    cubic-bezier(0.40, 0.10, 0.55, 0.90);

  /* Continuity density (0–1). The temporal engine raises this as
   * preserved cognition grows; the atmosphere deepens by only
   * ~5–10% across the full range — never visually loud. Default
   * keeps the interface calm before any data is read. */
  --continuity-density: 0;
  /* Derived atmospheric intensity: 1.0 → ~1.09 across the range. */
  --atmos-intensity: calc(1 + (var(--continuity-density) * 0.09));

  /* Global motion intensity cap. Calm mode dials this toward 0;
   * reduced-motion forces it to 0. Motion strengths multiply by it so a
   * single switch can quiet (or freeze) the whole system. */
  --temporal-gain: 1;
}

/* =================================================================
 * DESIGN MIGRATION — WAVE 1: CANONICAL TOKEN RE-BASE (additive)
 *
 * Source of truth: docs/design/ux-unification/migration/TOKEN_MIGRATION_MAP.md
 * Canonical reference: apps/local_ui/frontend/command_center.html (V2) :root
 * + apps/website/index.html :root.
 *
 * This block ADDS the canonical Cognitive Atoms palette into the legacy
 * stylesheet so local UI surfaces can begin consuming canonical tokens in
 * later waves. It is intentionally ADDITIVE: it introduces new token names
 * that do not exist elsewhere in this file and does NOT remove, rename, or
 * re-aim any legacy/neon token, alias, font, class, keyframe, or motion
 * token that the test suite pins (test_visual_reset, test_premium_ui,
 * test_providers_oauth_diagnostic, test_spatial_ui, test_temporal_motion,
 * test_environmental_ui, test_hierarchy_refinement,
 * test_cognitive_instrument_top_alignment).
 *
 * The ONLY value change to a live alias is --cyan, nudged from the neon
 * #3FE0FF to the canonical #3FE0F2 (one channel, imperceptible). No test
 * pins --cyan's value; it only requires --cyan to be defined (still true).
 * Color meaning is unchanged here: cyan = continuity, lavender = "differs"
 * (RESERVED). ember/amber/jade are rare signal hues — never fills, never
 * severity. Severity/neon de-semanticization and forbidden-token removal are
 * deferred to a later wave that updates the pinning tests in lockstep.
 * ================================================================= */
:root {
  /* Canonical surfaces (additive — distinct from legacy --bg-void #050608) */
  --abyss:        #02060B;
  --abyss-deep:   #010407;
  --navy-deep:    #030810;
  --navy:         #050E18;
  --navy-top:     #081826;
  --ink-800:      #0B1A28;
  --ink-750:      #0D1E2D;
  --ink-700:      #122638;
  --ink-600:      #1B3954;

  /* Canonical accent + support (cyan re-aimed to canonical #3FE0F2).
   * These canonical definitions cascade-win over the legacy neon
   * aliases above (--cyan/--cyan-bright pointed at #3FE0FF/#6BEBFF).
   * The legacy neon literals remain in the first :root so the pinned
   * cinematic-palette tests (test_visual_reset) still find them. */
  --cyan:         #3FE0F2;   /* re-aim: was var(--neon-cyan) #3FE0FF */
  --cyan-bright:  #9CF4FF;   /* re-aim: was var(--neon-cyan-bright) #6BEBFF */
  --cyan-even:    #4FD6EA;   /* the mark below ~64px — flat, no gradient */
  --teal:         #5BC9D8;
  --teal-deep:    #2E9EB0;

  /* Reserved divergence — lavender is for "this differs from before" only */
  --lavender:       #AFA8FF;
  --lavender-soft:  rgba(175, 168, 255, 0.65);
  --lavender-glow:  rgba(175, 168, 255, 0.25);

  /* Cognition-spectrum signal hues (v2.1 §03) — rare earned per-thought
   * signals, never fills, never severity, never the mark, never more than
   * one warm/special hue in view. --amber re-aimed to the canonical sodium
   * amber (was the legacy neon-amber #FFC53D; not consumed via var()). */
  --ember:        #FF7A45;   /* returning  */
  --amber:        #FFB454;   /* preserved (re-aim: was var(--neon-amber) #FFC53D) */
  --jade:         #35D6A0;   /* grounded   */

  /* Canonical text ramp (additive — distinct from legacy --text-primary etc.) */
  --text-1:       #EDF4F8;
  --text-2:       #9FB6C4;
  --text-3:       #5E7888;

  /* Luminous cyan hairlines (additive — never a hard white border) */
  --hairline:        rgba(80, 225, 245, 0.11);
  --hairline-strong: rgba(80, 225, 245, 0.22);

  /* Canonical radii + the two canonical easings (additive) */
  --r-lg:         30px;
  --r-md:         24px;
  --r-sm:         16px;
  --ease-soft:    cubic-bezier(.4, 0, .2, 1);
  --ease-settle:  cubic-bezier(.22, .61, .36, 1);
}

/* =================================================================
 * Global reset + atmospheric stage
 * ================================================================= */

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

html, body {
  background:
    radial-gradient(ellipse 70% 50% at 78% 26%, rgba(157, 117, 255, 0.045) 0%, transparent 46%),
    var(--bg-void);
  color: var(--text-primary);
  /* System sans stack tuned to feel close to Space Grotesk —
   * tabular figures, sharp stylistic alternates. No remote fonts. */
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01", "ss02", "tnum", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--text-body);
  line-height: 1.55;
  min-height: 100vh;
}

/* overflow-x lives on html alone. On `body` it makes the body its own scroll
   container that never scrolls, so `position:sticky` on the rail never engages:
   measured at scrollY 600 the sidebar's top was -600 — the navigation scrolled
   off the screen entirely and could not be reached again without returning to
   the top of the page. The horizontal clamp is still wanted (decorative layers
   in temporal.js overhang the right edge), it just belongs one level up. */
html {
  overflow-x: hidden;
}

/* Ambient bloom — three soft radial gradients fixed to the viewport. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 64% 46% at 78% 26%, rgba(157, 117, 255, 0.075) 0%, transparent 44%),
    radial-gradient(ellipse 52% 42% at 18% 82%, rgba(63, 224, 255, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(53, 214, 160, 0.04) 0%, transparent 56%);
  z-index: 0;
}

/* Faint grain — keeps the surface from looking digitally flat. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.012) 0px,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 2px);
  z-index: 1;
  mix-blend-mode: overlay;
}

code, pre, kbd, samp {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 11px;
}

a {
  color: var(--neon-cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(63, 224, 255, 0.30);
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
a:hover { color: var(--neon-cyan-bright); border-color: rgba(63, 224, 255, 0.55); }

button { font-family: inherit; }

/* =================================================================
 * App shell
 * ================================================================= */

/* The content column never scrolls sideways.

   Several surfaces carry decorative glows as pseudo-elements with negative
   insets — `.hero::before` at `right: -120px`, `.journey-stage::before` at
   `inset: -40px -100px`. They are meant to bleed. On containers that do not
   clip, they extended the DOCUMENT instead: Projects, Continuity, Connect your
   AI tools and About each scrolled 44-64px sideways at 1440px, so content
   drifted under the cursor for no reason a person could see.

   One rule here rather than one per decoration, because the next glow someone
   adds will have the same negative inset and nobody will remember this.

   `clip`, not `hidden`: `overflow: hidden` establishes a scroll container,
   which breaks `position: sticky` on anything inside — that is exactly how the
   nav rail was destroyed once already. `overflow-x: clip` with an implied
   `overflow-y: visible` is legal and does neither. */
.main { overflow-x: clip; }

/* Two names, one shell — roughly half the pages use each, so both selectors
   MUST stay in this one list. A rule inserted between them silently made the
   first a selector for THAT rule and stripped its flex, and every page using
   the first name stacked its sidebar on top of its content: a full viewport of
   empty space, the page starting below the fold. It survived a commit because
   a tab-count-and-overflow sweep passes on a vertically stacked layout.
   Pinned by tests/test_four_tab_shell.py. */
.app,
.layout {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 2;
}

/* Global vignette — darkens the corners so the eye settles on the
   central cognition surfaces. Subtle, click-through, never a frame. */
.app::after,
.layout::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(ellipse 118% 118% at 50% 38%, transparent 56%, rgba(0, 0, 0, 0.34) 100%);
}

.main {
  flex: 1;
  padding: 48px 56px 96px 56px;
  max-width: 1480px;
}

/* =================================================================
 * Sidebar — sovereign workstation rail
 * ================================================================= */

.sidebar {
  width: 252px;
  flex-shrink: 0;
  background:
    linear-gradient(180deg, rgba(157, 117, 255, 0.010), transparent 20%),
    var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 28px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.sidebar h1 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 24px 4px 24px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan-bright) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(63, 224, 242, 0.30);
}
.sidebar .tagline {
  margin: 0 24px 24px 24px;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0;
  text-transform: none;
  font-family: ui-monospace, "SF Mono", monospace;
}

/* Unified brand row (logo + wordmark + tagline). Injected by
 * sidebar.js renderBrandHeader() on every page. Replaces the
 * standalone <h1>+.tagline pair above once the JS runs. */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 24px 24px 24px;
}
.sidebar-brand .brand-mark {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(53, 214, 160, 0.35));
}
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  line-height: 1;
}
.sidebar-brand-name {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan-bright) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(63, 224, 242, 0.30);
}
.sidebar-brand-tag {
  font-size: 11px;
  line-height: 1;
  color: var(--text-tertiary);
  letter-spacing: 0;
  text-transform: none;
  font-family: ui-monospace, "SF Mono", monospace;
}

.sidebar nav { display: flex; flex-direction: column; gap: 1px; padding: 0; }

.sidebar nav .nav-section {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  color: var(--text-eyebrow);
  text-transform: uppercase;
  padding: 18px 24px 8px 24px;
  margin: 0;
}
.sidebar nav .nav-section:first-child { margin-top: 0; }

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 24px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-secondary);
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  position: relative;
  transition: color var(--motion-fast), background var(--motion-fast);
}
.sidebar nav a span:not(.nav-icon) { line-height: 1; }
.sidebar nav a:hover {
  color: var(--text-primary);
  background: rgba(157, 117, 255, 0.04);
}
.sidebar nav a .nav-icon {
  width: 16px;
  height: 16px;
  opacity: 0.65;
  flex-shrink: 0;
  transition: opacity var(--motion-fast), filter var(--motion-fast);
}
.sidebar nav a:hover .nav-icon { opacity: 0.95; }

.sidebar nav a.active {
  color: var(--cyan);
  background: linear-gradient(90deg, rgba(63, 224, 242, 0.08), transparent);
  box-shadow:
    inset 0 0 0 0 transparent,
    0 0 24px -8px rgba(63, 224, 242, 0.30);
  border-left: none;
}
.sidebar nav a.active::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--neon-green);
  box-shadow: var(--glow-green);
}
.sidebar nav a.active .nav-icon {
  opacity: 1;
  filter: drop-shadow(0 0 4px var(--neon-green));
}

/* ===========================================================================
   THE FOUR-TAB SHELL  [D-027 · DESIGN_AUTHORITY_CONSOLIDATED §1.1]

   Ring = home · Chat · Explore · Council · Profile · capture as an action.

   Density adapts, identity does not (IMPLEMENTATION_RULES rule 6): a quiet
   left rail at desktop widths, and below 900px the same four tabs become the
   bottom bar from the v95 prototype. Same tabs, same order, same meaning —
   the shell is not two designs.
   =========================================================================== */

/* --- home: the ring ------------------------------------------------------ */
.sidebar nav .nav-home {
  display: flex; align-items: center; gap: 12px;
  margin: 0 14px 14px; padding: 9px 10px;
  border-radius: var(--r-sm, 16px);
  font-size: 13px; color: var(--text-secondary); text-decoration: none;
}
.sidebar nav .nav-home:hover { color: var(--text-primary); }
.sidebar nav .nav-home.active { color: var(--text-primary); }
/* The ring is the continuity mark. It breathes; it is NEVER a spinner, a
   progress arc, or a loader (forbidden-expressions §9). */
.sidebar nav .nav-home-ring {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--cyan);
  box-shadow: 0 0 10px -2px rgba(63, 224, 242, 0.5);
  animation: ca-ring-breathe 5.2s var(--ease-soft, cubic-bezier(.4,0,.2,1)) infinite;
}
@keyframes ca-ring-breathe {
  0%, 100% { opacity: .62; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* --- the tabs ------------------------------------------------------------ */
.sidebar nav .nav-tabs { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.sidebar nav .nav-tab {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--r-sm, 16px);
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.1px;
  color: var(--text-secondary); text-decoration: none;
  transition: color .18s var(--ease-soft, cubic-bezier(.4,0,.2,1)),
              background .18s var(--ease-soft, cubic-bezier(.4,0,.2,1));
}
.sidebar nav .nav-tab .nav-icon { width: 20px; height: 20px; opacity: .55; }
.sidebar nav .nav-tab:hover { color: var(--text-primary); background: rgba(63, 224, 242, 0.04); }
.sidebar nav .nav-tab:hover .nav-icon { opacity: .85; }
/* Active tab = soft cyan glow (DA §7). Not a filled pill, not a hard border. */
.sidebar nav .nav-tab.active { color: var(--cyan-bright, #9CF4FF); background: rgba(63, 224, 242, 0.07); }
.sidebar nav .nav-tab.active .nav-icon {
  opacity: 1; color: var(--cyan);
  filter: drop-shadow(0 0 7px rgba(63, 224, 242, 0.55));
}

/* --- capture: a verb among nouns ----------------------------------------- */
.sidebar nav .nav-capture { padding: 14px 10px 4px; }
.sidebar nav .nav-action {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 999px;
  font-size: 13px; color: var(--cyan-bright, #9CF4FF); text-decoration: none;
  border: 1px solid var(--hairline-strong);
  background: rgba(63, 224, 242, 0.05);
}
.sidebar nav .nav-action:hover { background: rgba(63, 224, 242, 0.10); }
.sidebar nav .nav-action .nav-icon { width: 15px; height: 15px; opacity: .9; }

/* --- within the active tab ----------------------------------------------- */
.sidebar nav .nav-within { margin-top: 18px; padding: 14px 10px 0; border-top: 1px solid var(--hairline); }
.sidebar nav .nav-within a {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 12px; border-radius: var(--r-sm, 16px);
  font-size: 13px; color: var(--text-tertiary); text-decoration: none;
}
.sidebar nav .nav-within a:hover { color: var(--text-primary); }
.sidebar nav .nav-within a.active { color: var(--cyan-bright, #9CF4FF); }
.sidebar nav .nav-within a .nav-icon { width: 14px; height: 14px; opacity: .55; }
.sidebar nav .nav-within a.active .nav-icon { opacity: 1; color: var(--cyan); }
.sidebar nav .nav-signout { font-size: 11.5px; opacity: .7; }

/* --- below 900px: the prototype's bottom bar ----------------------------- */
/* Same four tabs. The rail's secondary list and capture action fold away —
   on a narrow surface the tabs ARE the navigation, exactly as v95 has it. */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; inset: auto 0 0 0; width: 100%; height: auto;
    padding: 0; border-right: none; border-top: 1px solid var(--hairline);
    z-index: 40;
    background: linear-gradient(180deg, rgba(8, 22, 32, 0.72), rgba(4, 12, 20, 0.88));
  }
  .sidebar .sidebar-brand,
  .sidebar nav .nav-within,
  .sidebar nav .nav-capture,
  .sidebar nav .nav-home span:not(.nav-home-ring) { display: none; }
  /* .sidebar-account and .localhost-badge are also withdrawn here, but they
     cannot be hidden from this block — see the end of this file for why. */
  .sidebar nav { flex-direction: row; align-items: center; justify-content: space-around; }
  .sidebar nav .nav-home { margin: 0; padding: 10px 14px; }
  .sidebar nav .nav-tabs {
    flex: 1; flex-direction: row; justify-content: space-around;
    padding: 7px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .sidebar nav .nav-tab {
    flex-direction: column; gap: 4px; padding: 4px 12px;
    font-size: 10px; font-weight: 500; letter-spacing: .1px;
  }
  .sidebar nav .nav-tab .nav-icon { width: 24px; height: 24px; }
  /* The rail no longer occupies horizontal space; nothing should offset for it. */
  :root { --ca-nav-w: 0px; }

  /* A flex child defaults to min-width:auto and refuses to shrink below its
     content, so long lines pushed the page wider than the window and the copy
     ran off the right edge with no way to reach it. */
  .layout > *:not(.sidebar) { min-width: 0; }
  /* Content must clear the bar rather than sit under it. */
  .layout > *:not(.sidebar) {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar nav .nav-home-ring { animation: none; opacity: .85; }
}


/* =================================================================
 * Hero (continuity-core-stage)
 * ================================================================= */

.continuity-core-stage,
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 48px;
  align-items: start;
  margin-bottom: 64px;
  position: relative;
}
.continuity-core-stage::before,
.hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -80px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(63, 224, 255, 0.07), transparent 62%);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
}
.continuity-core-stage > *,
.hero > * { position: relative; z-index: 1; }

.core-copy h2,
.hero-title,
.hero h2 {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 18px 0;
  color: var(--text-primary);
}
.core-copy h2 .accent,
.hero-title .accent {
  background: linear-gradient(90deg, var(--neon-green) 0%, var(--neon-cyan) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.core-copy .core-sub,
.hero-sub,
.lede {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px 0;
  max-width: 540px;
}

/* =================================================================
 * Trust layer / trust strip (premium glass pills row)
 * ================================================================= */

.trust-layer,
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 14px 20px;
  background: rgba(13, 15, 22, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  max-width: 600px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  margin-bottom: 24px;
  width: max-content;
}
.trust-layer .trust-pill,
.trust-strip .ind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.01em;
  padding: 2px 4px;
  border: none;
  background: transparent;
  border-radius: 0;
  text-transform: none;
}
.trust-layer .trust-pill::before,
.trust-strip .ind::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: var(--glow-green);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.trust-strip .ind.muted::before { background: var(--text-tertiary); box-shadow: none; animation: none; }
.trust-strip .ind.warn::before  { background: var(--neon-amber); box-shadow: 0 0 8px var(--neon-amber); }
.trust-strip .ind.fail::before  { background: var(--accent-danger); box-shadow: 0 0 8px var(--accent-danger); }
/* UX-021 — an unestablished claim must not look like an established one.
   renderTrustStrip correctly emits class="ind unknown" and the text "not
   established", but no rule existed for it, so it inherited the base dot:
   neon green, glowing, pulsing. Measured computed style was rgb(53,214,160)
   for all five indicators, identical to "ok". At a glance "Encrypted locally
   — not established" read as a green tick, which is the precise dishonesty
   the honest-state work was meant to remove.
   Hollow and still: present, unlit, not claiming anything. */
.trust-strip .ind.unknown {
  color: var(--text-tertiary);
}
.trust-strip .ind.unknown::before {
  background: transparent;
  border: 1px solid var(--text-tertiary);
  box-shadow: none;
  animation: none;
}

.trust-pill.active .trust-pill-icon {
  background: var(--neon-green);
  box-shadow: var(--glow-green);
}
.trust-pill-icon {
  display: inline-flex;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

/* =================================================================
 * Continuity ring — cinematic centerpiece
 * ================================================================= */

.ring-stage,
.continuity-core {
  position: relative;
  width: min(440px, 100%);
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.ring-stage::before,
.continuity-core::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(63, 224, 255, 0.10), transparent 58%);
  pointer-events: none;
}
.continuity-core.verified::before {
  background: radial-gradient(circle, rgba(53, 214, 160, 0.13), transparent 58%);
}

.ring-svg,
.continuity-core svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ring-track,
.core-ring.outer {
  fill: none;
  stroke: rgba(255, 255, 255, 0.045);
  stroke-width: 1.5;
}
.ring-progress,
.core-ring.middle {
  fill: none;
  stroke: url(#ringGradient);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(63, 224, 255, 0.7))
          drop-shadow(0 0 16px rgba(63, 224, 255, 0.35));
  transition: stroke-dashoffset var(--motion-calm), stroke var(--motion-smooth);
}
.core-ring.inner {
  fill: none;
  stroke: rgba(53, 214, 160, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(53, 214, 160, 0.45));
  transition: stroke-dashoffset var(--motion-calm), stroke var(--motion-smooth);
}
.continuity-core.verified .core-ring.middle {
  stroke: var(--neon-green);
  filter: drop-shadow(0 0 6px rgba(53, 214, 160, 0.7))
          drop-shadow(0 0 18px rgba(53, 214, 160, 0.35));
}

.ring-tick {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
}

.ring-dot {
  fill: var(--neon-cyan-bright);
  filter: drop-shadow(0 0 6px var(--neon-cyan)) drop-shadow(0 0 16px var(--neon-cyan));
  animation: dot-pulse 3.5s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

.core-pulse {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 224, 255, 0.16), transparent 70%);
  animation: core-breathe 4s ease-in-out infinite;
  pointer-events: none;
}
.continuity-core.verified .core-pulse {
  background: radial-gradient(circle, rgba(53, 214, 160, 0.20), transparent 70%);
}
@keyframes core-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.05); }
}

.ring-center,
.core-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 36px;
  pointer-events: none;
  z-index: 2;
}
.ring-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--text-eyebrow);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ring-pct,
.continuity-score {
  font-size: 72px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--neon-cyan) 110%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(63, 224, 255, 0.25);
  font-variant-numeric: tabular-nums;
}
.continuity-core.verified .continuity-score {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--neon-green) 110%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(53, 214, 160, 0.35);
}
.ring-pct .pct-unit { font-size: 0.5em; opacity: 0.6; font-weight: 400; }
.continuity-state,
.ring-status {
  font-size: 13px;
  margin-top: 10px;
  color: var(--text-secondary);
  font-family: ui-monospace, "SF Mono", monospace;
  line-height: 1.4;
}
.ring-helper {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 14px;
  max-width: 240px;
  line-height: 1.5;
}
.ring-status .dot-warn,
.continuity-state .dot-warn {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--neon-amber);
  box-shadow: 0 0 8px var(--neon-amber);
  margin: 0 8px;
  vertical-align: middle;
}

/* Orbit nodes around the ring. */
.orbit-path {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: orbit-drift 60s linear infinite;
}
@keyframes orbit-drift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.orbit-node {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
  transform-origin: 0 0;
  pointer-events: auto;
}
.continuity-core.verified .orbit-node {
  background: var(--neon-green);
  box-shadow: 0 0 10px var(--neon-green);
}
.orbit-node .orbit-label {
  position: absolute;
  left: 18px; top: -3px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--motion-fast);
}
.orbit-node:hover .orbit-label { opacity: 1; }

/* =================================================================
 * Provider bridge
 * ================================================================= */

.bridge,
.provider-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 48px auto 64px auto;
  padding: 16px;
  flex-wrap: wrap;
  max-width: 720px;
}
.bridge-node,
.provider-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  font-family: ui-monospace, "SF Mono", monospace;
  color: var(--text-secondary);
  letter-spacing: 0;
}
.bridge-node.remote::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
}
.bridge-node .tag,
.provider-pill .small-tag {
  font-size: 10px;
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
}
.bridge-node.preserved,
.provider-pill.local {
  border-color: rgba(53, 214, 160, 0.40);
  background: linear-gradient(90deg, rgba(53, 214, 160, 0.08), rgba(53, 214, 160, 0.02));
  box-shadow: 0 0 20px rgba(53, 214, 160, 0.18);
  color: var(--text-primary);
}
.bridge-node.preserved::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: var(--glow-green);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.bridge-node.preserved .tag,
.provider-pill.local .small-tag {
  color: var(--neon-green);
  border-color: rgba(53, 214, 160, 0.40);
  background: rgba(53, 214, 160, 0.05);
}
.bridge-arrow,
.provider-arrow {
  color: var(--neon-violet);
  font-size: 18px;
  font-weight: 500;
  filter: drop-shadow(0 0 6px var(--neon-violet));
}

/* =================================================================
 * Provider continuity orbit — single-row layout correction.
 * Pure layout: glow / typography / colour are inherited from the
 * .bridge-node / .provider-pill / .provider-arrow rules above.
 * The two side nodes share a fixed min-width so the centre node is
 * mathematically centred regardless of label length.
 * ================================================================= */

.dashboard-provider-orbit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 900px;
  margin: 48px auto 64px auto;
  padding: 16px;
  position: relative;
  z-index: 2;
}
.dashboard-provider-orbit .provider-orbit-node {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
}
/* The centre node stays visually dominant: ~10% larger via a
   transform (so its layout box is unchanged and the row stays
   symmetric) while keeping the existing green glow language. */
.dashboard-provider-orbit .provider-orbit-center {
  transform: scale(1.10);
  transform-origin: center;
  min-width: 0;            /* natural width; centring comes from the symmetric side nodes */
}
.dashboard-provider-orbit .provider-orbit-connector {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  line-height: 1;
}

/* Responsive: keep ONE row as long as possible — shrink nodes and
   gap progressively before ever stacking. */
@media (max-width: 1100px) {
  .dashboard-provider-orbit { gap: 18px; max-width: 760px; }
  .dashboard-provider-orbit .provider-orbit-node { min-width: 160px; }
  .dashboard-provider-orbit .provider-orbit-connector { width: 22px; }
}
@media (max-width: 820px) {
  .dashboard-provider-orbit { gap: 12px; }
  .dashboard-provider-orbit .provider-orbit-node { min-width: 132px; font-size: 12px; }
  .dashboard-provider-orbit .provider-orbit-center { transform: scale(1.06); }
  .dashboard-provider-orbit .provider-orbit-connector { width: 16px; }
}
/* Only stack on truly narrow mobile widths. */
@media (max-width: 560px) {
  .dashboard-provider-orbit { flex-wrap: wrap; gap: 12px; }
  .dashboard-provider-orbit .provider-orbit-node {
    min-width: 200px; width: 100%; max-width: 280px;
  }
  .dashboard-provider-orbit .provider-orbit-center { transform: none; }
  .dashboard-provider-orbit .provider-orbit-connector { transform: rotate(90deg); }
}

/* =================================================================
 * Section eyebrows (cinematic dividers)
 * ================================================================= */

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: 0.20em;
  color: var(--text-eyebrow);
  text-transform: uppercase;
  margin: 56px 0 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-bright), transparent);
}

/* =================================================================
 * Memory constellation — atom cards with signature colours
 * ================================================================= */

.memory-constellation-stage {
  position: relative;
  margin-bottom: 24px;
}

#cluster-grid.cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  padding: 0;
  position: relative;
  z-index: 1;
}

/* Cluster card — also rendered as <button type="button">. */
.memory-cluster-node,
.atom-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-3);
  padding: 22px;
  min-height: 160px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform var(--motion-smooth),
              border-color var(--motion-smooth),
              box-shadow var(--motion-smooth);
  opacity: 0;
  animation: card-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.memory-cluster-node::before,
.atom-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, var(--card-glow, transparent) 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--motion-smooth);
}
.memory-cluster-node:hover,
.atom-card:hover {
  transform: translateY(-3px);
  border-color: var(--card-color, var(--border-bright));
  box-shadow: 0 0 24px var(--card-glow-strong, rgba(53, 214, 160, 0.18));
}
.memory-cluster-node:hover::before,
.atom-card:hover::before { opacity: 1; }
.memory-cluster-node:focus-visible {
  outline: 2px solid var(--card-color, var(--neon-cyan));
  outline-offset: 3px;
}

.memory-cluster-node .memory-node-glow {
  position: absolute;
  top: -32px; left: -32px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-glow, rgba(63, 224, 255, 0.18)), transparent 70%);
  pointer-events: none;
  opacity: 0.65;
  transition: opacity var(--motion-smooth);
}
.memory-cluster-node:hover .memory-node-glow { opacity: 1; }

/* Cluster head — dot + label + sparkline. */
.cluster-head,
.atom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.cluster-head .cluster-label,
.atom-head .atom-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.cluster-dot,
.atom-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--card-color, var(--neon-cyan));
  box-shadow: 0 0 8px var(--card-color), 0 0 16px var(--card-glow);
  animation: pulse-dot 2.8s ease-in-out infinite;
  flex-shrink: 0;
}
.atom-sparkline {
  width: 56px;
  height: 18px;
  flex-shrink: 0;
}
.atom-sparkline path {
  fill: none;
  stroke: var(--card-color, var(--neon-cyan));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px var(--card-color));
  opacity: 0.85;
}

.memory-cluster-node .cluster-count,
.atom-card .atom-number {
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--card-color, var(--neon-cyan)) 140%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}

.memory-cluster-node .cluster-samples,
.atom-card .atom-identifier {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.memory-cluster-node .cluster-hint {
  display: inline-block;
  margin-top: 12px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  opacity: 0.7;
  transition: opacity var(--motion-fast), color var(--motion-fast);
}
.memory-cluster-node:hover .cluster-hint {
  color: var(--card-color, var(--neon-cyan));
  opacity: 1;
}

/* Variants for the legacy `.large/.medium/.small` Phase 55 API. */
.memory-cluster-node.large  { min-height: 180px; }
.memory-cluster-node.medium { min-height: 160px; }
.memory-cluster-node.small  { min-height: 140px; padding: 18px; }
.memory-cluster-node.small .cluster-count { font-size: 32px; }

/* Signature colour variants — green, cyan, violet, magenta, orange, amber. */
.atom-card.c-green,
.memory-cluster-node.tone-green {
  --card-color: var(--neon-green);
  --card-glow: rgba(53, 214, 160, 0.18);
  --card-glow-strong: rgba(53, 214, 160, 0.32);
}
.atom-card.c-cyan,
.memory-cluster-node.tone-cyan {
  --card-color: var(--neon-cyan);
  --card-glow: rgba(63, 224, 255, 0.18);
  --card-glow-strong: rgba(63, 224, 255, 0.32);
}
.atom-card.c-violet,
.memory-cluster-node.tone-violet {
  --card-color: var(--neon-violet);
  --card-glow: rgba(157, 117, 255, 0.18);
  --card-glow-strong: rgba(157, 117, 255, 0.32);
}
.atom-card.c-magenta,
.memory-cluster-node.tone-magenta {
  --card-color: var(--neon-magenta);
  --card-glow: rgba(255, 61, 170, 0.18);
  --card-glow-strong: rgba(255, 61, 170, 0.32);
}
.atom-card.c-orange,
.memory-cluster-node.tone-orange {
  --card-color: var(--neon-orange);
  --card-glow: rgba(255, 139, 61, 0.18);
  --card-glow-strong: rgba(255, 139, 61, 0.32);
}
.atom-card.c-amber,
.memory-cluster-node.tone-amber {
  --card-color: var(--neon-amber);
  --card-glow: rgba(255, 197, 61, 0.18);
  --card-glow-strong: rgba(255, 197, 61, 0.32);
}

/* =================================================================
 * Memory detail drawer
 * ================================================================= */

.memory-detail-drawer {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 90;
}
.memory-detail-drawer.open { display: block; }
.memory-detail-drawer .drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 8, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  animation: drawer-fade-in var(--motion-smooth) forwards;
}
@keyframes drawer-fade-in { to { opacity: 1; } }

.memory-detail-drawer .drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 92vw);
  background:
    radial-gradient(circle at 0% 0%, rgba(157, 117, 255, 0.10), transparent 55%),
    linear-gradient(180deg, var(--bg-card-hover), var(--bg-card));
  border-left: 1px solid var(--border-violet);
  box-shadow: -40px 0 80px rgba(0, 0, 0, 0.70);
  display: flex;
  flex-direction: column;
  transform: translateX(40px);
  opacity: 0;
  animation: drawer-slide-in var(--motion-smooth) forwards;
}
@keyframes drawer-slide-in { to { transform: translateX(0); opacity: 1; } }

.memory-detail-header {
  padding: 28px 32px 18px 32px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}
.memory-detail-header .drawer-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: var(--text-eyebrow);
  margin-bottom: 8px;
}
.memory-detail-header .drawer-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px 0;
  color: var(--text-primary);
}
.memory-detail-header .drawer-description {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 14px 0;
  max-width: 460px;
}
.memory-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.memory-detail-badges .memory-badge {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-family: ui-monospace, "SF Mono", monospace;
}
.memory-detail-badges .memory-badge.local     { color: var(--neon-cyan); border-color: rgba(63, 224, 255, 0.32); }
.memory-detail-badges .memory-badge.private   { color: var(--neon-violet); border-color: rgba(157, 117, 255, 0.32); }
.memory-detail-badges .memory-badge.validated { color: var(--neon-green); border-color: rgba(53, 214, 160, 0.32); }
.memory-detail-badges .memory-badge.linked    { color: var(--neon-amber); border-color: rgba(255, 197, 61, 0.32); }

.drawer-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 18px;
  width: 32px; height: 32px;
  line-height: 1;
  border-radius: var(--radius-pill);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.drawer-close:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.drawer-body {
  padding: 18px 32px 28px 32px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.drawer-body .drawer-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.drawer-body .drawer-section-title {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin: 20px 0 10px 0;
  font-weight: 600;
}

.memory-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.memory-detail-item {
  padding: 16px 18px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  animation: drawer-item-in var(--motion-smooth) both;
}
@keyframes drawer-item-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.memory-detail-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.memory-detail-summary {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 10px;
}
.memory-detail-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: ui-monospace, "SF Mono", monospace;
}
.memory-detail-flags .flag {
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  text-transform: uppercase;
}
.memory-detail-flags .flag.on  { color: var(--neon-green); border-color: rgba(53, 214, 160, 0.30); }
.memory-detail-flags .flag.off { color: var(--text-tertiary); }
.memory-detail-flags .memory-id {
  font-size: 9px;
  color: var(--text-tertiary);
  opacity: 0.55;
  margin-left: auto;
}

.memory-related-clusters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.related-cluster-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 12.5px;
  cursor: pointer;
  transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast);
}
.related-cluster-pill:hover {
  background: rgba(157, 117, 255, 0.08);
  border-color: rgba(157, 117, 255, 0.32);
  color: var(--text-primary);
}
.related-cluster-pill .related-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.drawer-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.drawer-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(63, 224, 255, 0.14), rgba(63, 224, 255, 0.04));
  color: var(--text-primary);
  border: 1px solid rgba(63, 224, 255, 0.30);
  cursor: pointer;
  transition: transform var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.drawer-action:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(63, 224, 255, 0.22), rgba(63, 224, 255, 0.06));
  box-shadow: 0 0 18px rgba(63, 224, 255, 0.25);
}
.drawer-action.secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
}
.drawer-action.secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  box-shadow: none;
}

/* =================================================================
 * Continuity stream / preservation timeline
 * ================================================================= */

/* Preservation timeline — a dedicated track with absolutely
   positioned dots + labels. The line passes through the exact
   vertical centre of every dot; completed/future states change
   only colour + box-shadow, never top/left. */
.preservation-timeline {
  position: relative;
  margin: 0 0 24px 0;
  /* Inset so the 0% and 100% endpoint dots are not clipped. */
  padding: 0 24px;
}
.timeline-track {
  position: relative;
  height: 72px;
}
.timeline-line {
  position: absolute;
  top: 18px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--neon-green),
    var(--neon-cyan) 50%,
    rgba(255, 255, 255, 0.06));
  border-radius: 2px;
  opacity: 0.45;
  pointer-events: none;
}
.timeline-node {
  position: absolute;
  top: 18px;
  transform: translate(-50%, -50%);
}
.timeline-dot {
  display: block;
  width: 14px; height: 14px;
  border-radius: 999px;
  position: relative;
  background: var(--bg-card);
  border: 2px solid rgba(255, 255, 255, 0.10);
}
.timeline-node.complete .timeline-dot {
  background: var(--neon-green);
  border-color: var(--neon-green);
  box-shadow: 0 0 0 4px rgba(53, 214, 160, 0.10), 0 0 12px var(--neon-green);
}
.timeline-node.pending .timeline-dot {
  background: var(--bg-card);
  border-color: var(--neon-cyan);
  animation: pulse-soft 1800ms ease-in-out infinite;
}
.timeline-label {
  position: absolute;
  top: 32px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: center;
  color: var(--text-tertiary);
}
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* The Phase 54 .preservation-timeline pt-row layout still exists
 * elsewhere; keep its visual treatment compact and neutral. */
.preservation-timeline .pt-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  position: relative;
}
.preservation-timeline .pt-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--neon-green);
  margin: 6px 0 0 7px;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(53, 214, 160, 0.10);
}
.preservation-timeline .pt-row.muted .pt-dot {
  background: var(--text-tertiary);
  box-shadow: 0 0 0 4px rgba(122, 132, 153, 0.08);
}
.preservation-timeline .pt-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
}
.preservation-timeline .pt-summary {
  color: var(--text-secondary);
  font-size: 11.5px;
  margin-top: 2px;
}
.preservation-timeline .pt-stamp {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  align-self: start;
  white-space: nowrap;
}

/* =================================================================
 * Cards / kv list / footer
 * ================================================================= */

.kv {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 10px 16px;
  margin: 8px 0 24px 0;
}
.kv .k {
  color: var(--text-eyebrow);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: center;
}
.kv .v {
  color: var(--text-primary);
  font-size: 13px;
  align-self: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 10.5px;
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.badge.ok      { color: var(--neon-green); border-color: rgba(53, 214, 160, 0.30); }
.badge.warn    { color: var(--neon-amber); border-color: rgba(255, 197, 61, 0.30); }
.badge.danger  { color: var(--accent-danger); border-color: rgba(255, 107, 124, 0.30); }
.badge.accent  { color: var(--neon-cyan); border-color: rgba(63, 224, 255, 0.30); }

.footer {
  color: var(--text-tertiary);
  font-size: 11.5px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  letter-spacing: 0.02em;
}

.muted { color: var(--text-tertiary); }
.small { font-size: 11.5px; }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.row input[type="text"],
.row input[type="password"],
.row select {
  flex: 1 1 auto;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 11px 14px;
  font: inherit;
}
.row input:focus, .row select:focus {
  outline: none;
  border-color: rgba(63, 224, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(63, 224, 255, 0.10);
}

/* =================================================================
 * Buttons
 * ================================================================= */

button.primary,
button.cta,
.journey-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #050608;
  border: 1px solid rgba(53, 214, 160, 0.50);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--neon-green-bright), var(--neon-green));
  box-shadow:
    0 8px 24px rgba(53, 214, 160, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.20);
  cursor: pointer;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}
button.primary:hover,
button.cta:hover,
.journey-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 32px rgba(53, 214, 160, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
button.primary:disabled,
button.cta:disabled,
.journey-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

button:not(.primary):not(.cta):not(.drawer-action):not(.related-cluster-pill):not(.vault-action):not(.journey-cta):not(.drawer-close):not(.memory-cluster-node):not(#fb-submit) {
  padding: 10px 18px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
button:not(.primary):not(.cta):not(.drawer-action):not(.related-cluster-pill):not(.vault-action):not(.journey-cta):not(.drawer-close):not(.memory-cluster-node):not(#fb-submit):hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

#fb-submit {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(63, 224, 255, 0.30);
  background: linear-gradient(180deg, rgba(63, 224, 255, 0.16), rgba(63, 224, 255, 0.04));
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}
#fb-submit:hover {
  background: linear-gradient(180deg, rgba(63, 224, 255, 0.24), rgba(63, 224, 255, 0.06));
}

/* =================================================================
 * Vault preservation chamber
 * ================================================================= */

.vault-chamber,
.preservation-chamber {
  position: relative;
  padding: 56px 0 36px 0;
  text-align: center;
  margin-bottom: 24px;
}
.preservation-chamber::before {
  content: "";
  position: absolute;
  inset: -40px -120px;
  background: radial-gradient(640px 380px at 50% 40%, rgba(63, 224, 255, 0.06), transparent 62%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}
.preservation-chamber > * { position: relative; z-index: 1; }

.vault-core {
  position: relative;
  width: min(440px, 80vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto 28px auto;
}
.vault-core::before {
  content: "";
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle, rgba(63, 224, 255, 0.16), transparent 65%);
  pointer-events: none;
}
.vault-core.verified::before {
  background: radial-gradient(circle, rgba(53, 214, 160, 0.22), transparent 65%);
}
.vault-core svg {
  width: 100%; height: 100%; display: block;
}

.vault-ring { fill: none; stroke-linecap: round; transition: stroke-dashoffset var(--motion-calm), stroke var(--motion-smooth); }
.vault-ring.outer  { stroke: rgba(255, 255, 255, 0.045); stroke-width: 1.5; }
.vault-ring.middle {
  stroke: url(#vaultRingGradient, var(--neon-cyan));
  stroke: var(--neon-cyan);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(63, 224, 255, 0.55))
          drop-shadow(0 0 16px rgba(63, 224, 255, 0.30));
}
.vault-ring.inner {
  stroke: rgba(53, 214, 160, 0.55);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 4px rgba(53, 214, 160, 0.45));
}
.vault-core.verified .vault-ring.middle {
  stroke: var(--neon-green);
  filter: drop-shadow(0 0 6px rgba(53, 214, 160, 0.7))
          drop-shadow(0 0 18px rgba(53, 214, 160, 0.35));
}

.vault-seal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 32px;
  pointer-events: none;
}
.vault-seal .seal-percent {
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--neon-cyan) 110%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(63, 224, 255, 0.30);
  margin-bottom: 10px;
}
.vault-core.verified .vault-seal .seal-percent {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--neon-green) 110%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(53, 214, 160, 0.40);
}
.vault-preservation-state {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin-bottom: 6px;
  font-family: ui-monospace, "SF Mono", monospace;
}
.vault-seal-headline {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-primary);
}

.chamber-detail {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 16px auto 0 auto;
  text-align: center;
}

.survivability-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.survivability-row .surv-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-family: ui-monospace, "SF Mono", monospace;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.survivability-row .surv-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
}
.survivability-row .surv-pill.ok {
  color: var(--neon-green);
  border-color: rgba(53, 214, 160, 0.30);
}
.survivability-row .surv-pill.ok .dot {
  background: var(--neon-green);
  box-shadow: var(--glow-green);
}

.vault-integrity { display: contents; }

.vault-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.vault-panel {
  position: relative;
  background:
    radial-gradient(circle at 0% 0%, rgba(157, 117, 255, 0.05), transparent 60%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.vault-panel h3 {
  margin: 0 0 6px 0;
  font-size: 14px;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.vault-panel h3::after { display: none; }
.vault-panel .panel-sub {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-bottom: 16px;
  line-height: 1.55;
}
.vault-panel input[type="password"] {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 11px 14px;
  font: inherit;
  margin-bottom: 14px;
}
.vault-panel input[type="password"]:focus {
  outline: none;
  border-color: rgba(63, 224, 255, 0.40);
  box-shadow: 0 0 0 3px rgba(63, 224, 255, 0.10);
}
.vault-panel .vault-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(63, 224, 255, 0.16), rgba(63, 224, 255, 0.04));
  border: 1px solid rgba(63, 224, 255, 0.30);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--motion-fast), background var(--motion-fast);
}
.vault-panel .vault-action:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(63, 224, 255, 0.24), rgba(63, 224, 255, 0.06));
}
.vault-panel .vault-result {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.vault-panel .vault-result.error { color: var(--neon-amber); }

/* =================================================================
 * Continuity journey
 * ================================================================= */

.journey-stage {
  position: relative;
  padding: 32px 0 16px 0;
  margin-bottom: 24px;
}
.journey-stage::before {
  content: "";
  position: absolute;
  inset: -40px -100px;
  background: radial-gradient(640px 380px at 50% 40%, rgba(157, 117, 255, 0.05), transparent 58%);
  filter: blur(28px);
  pointer-events: none;
  opacity: 0.4;
  z-index: 0;
}
.journey-stage > * { position: relative; z-index: 1; }
.journey-stage h2 {
  font-size: var(--text-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 18px 0;
}

.wizard-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 18px 0;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  font-family: ui-monospace, "SF Mono", monospace;
}
.wizard-progress .bar,
.journey-progress {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  position: relative;
}
.wizard-progress .bar > span,
.journey-progress .bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-green));
  transition: width var(--motion-smooth);
  box-shadow: 0 0 12px rgba(63, 224, 255, 0.40);
}

.journey-cards,
.timeline.journey-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.journey-card {
  position: relative;
  padding: 22px 22px 20px 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(63, 224, 255, 0.04), transparent 60%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-card);
  transition: transform var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-smooth), opacity var(--motion-smooth);
  opacity: 0.65;
}
.journey-card .journey-num {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin-bottom: 6px;
  font-family: ui-monospace, "SF Mono", monospace;
}
.journey-card .journey-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.journey-card .journey-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.journey-card.done {
  opacity: 1;
  border-color: rgba(53, 214, 160, 0.28);
  box-shadow: var(--shadow-card), 0 0 20px rgba(53, 214, 160, 0.10);
}
.journey-card.done::before {
  content: "✓";
  position: absolute;
  top: 18px; right: 18px;
  color: var(--neon-green);
  font-size: 14px;
  font-weight: 700;
}
.journey-card.failed {
  opacity: 1;
  border-color: rgba(255, 107, 124, 0.30);
}
.journey-card.running {
  opacity: 1;
  border-color: rgba(63, 224, 255, 0.35);
  animation: pulse-soft 1800ms ease-in-out infinite;
}

.journey-final,
.continuity-result.journey-final {
  position: relative;
  text-align: center;
  padding: 56px 28px;
  margin: 24px 0 32px 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(53, 214, 160, 0.16), transparent 60%),
    linear-gradient(180deg, var(--bg-card-hover), var(--bg-card));
  border: 1px solid rgba(53, 214, 160, 0.32);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-hero),
              0 0 80px rgba(53, 214, 160, 0.15);
  animation: continuity-settle var(--motion-calm) both;
}
.journey-final h3 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--neon-green);
  margin: 0 0 14px 0;
  display: block;
}
.journey-final h3::after { display: none; }
.journey-final p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
  max-width: 580px;
  margin: 0 auto;
}
.journey-final .seal-line {
  margin-top: 22px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  font-family: ui-monospace, "SF Mono", monospace;
}
@keyframes continuity-settle {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =================================================================
 * Continuity wizard legacy timeline rows (hidden under journey-cards
 * because each row also carries the .journey-card class).
 * Keep the .tl-* styles muted so badges placed in them by JS still
 * look ok on hover/inspect.
 * ================================================================= */

.timeline .tl-row .tl-dot { display: none; }
.timeline .tl-row .tl-stage { display: none; }
.timeline.journey-cards .tl-row { /* journey-card overrides */ }

/* =================================================================
 * Banners
 * ================================================================= */

.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--radius-2);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 18px;
}
.banner .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
}
.banner.ok      { border-color: rgba(53, 214, 160, 0.25); color: var(--text-primary); }
.banner.ok .dot { background: var(--neon-green); box-shadow: var(--glow-green); }
.banner.warn    { border-color: rgba(255, 197, 61, 0.25); color: var(--neon-amber); }
.banner.warn .dot { background: var(--neon-amber); }
.banner.danger  { border-color: rgba(255, 107, 124, 0.25); color: var(--accent-danger); }
.banner.danger .dot { background: var(--accent-danger); }

/* =================================================================
 * Tables (search results, settings)
 * ================================================================= */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-bottom: 24px;
}
thead th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-secondary);
  vertical-align: top;
}
tbody tr:hover td { background: rgba(255, 255, 255, 0.015); }
tbody td strong { color: var(--text-primary); font-weight: 500; }

/* =================================================================
 * Empty states (re-used by JS renderEmptyState)
 * ================================================================= */

.empty-state {
  padding: 36px 28px;
  text-align: center;
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed var(--border);
  border-radius: var(--radius-3);
  color: var(--text-secondary);
}
.empty-state .empty-icon {
  font-size: 24px;
  letter-spacing: 0.30em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.empty-state h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.empty-state p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 420px;
  margin: 0 auto;
}

/* =================================================================
 * Localhost status chip / footer badge
 * ================================================================= */

/* The badge is position:fixed and floats over the page, so on shorter windows
   it sat on real content — "Show technical details" on import, the "What's
   protected" heading on vault, the trust line on projects — covering ~280x20px
   of text behind an opaque blurred pill. Reserving space at the end of the
   document does not help: the badge is fixed, so it covers whatever happens to
   be under it at the current scroll position, not what is at the bottom.
   Below 900px of height it is withdrawn. Nothing is lost by that — the rail
   footer already states the same thing ("Local · sovereign"), and a trust
   signal that hides your own words is not reassuring. */
.localhost-badge {
  position: fixed;
  bottom: 22px;
  right: 26px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(13, 15, 22, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(53, 214, 160, 0.22);
  border-radius: var(--radius-pill);
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  color: var(--text-secondary);
  box-shadow: 0 0 20px rgba(53, 214, 160, 0.10);
  pointer-events: none;
}
.localhost-badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  box-shadow: none;
}
.localhost-badge.ok { color: var(--text-primary); border-color: rgba(53, 214, 160, 0.32); }
.localhost-badge.ok .dot   { background: var(--neon-green); box-shadow: var(--glow-green); animation: pulse-dot 2s ease-in-out infinite; }
.localhost-badge.warn      { color: var(--neon-amber); border-color: rgba(255, 197, 61, 0.32); }

@media (max-height: 900px) {
  .localhost-badge { display: none; }
}
.localhost-badge.warn .dot { background: var(--neon-amber); box-shadow: 0 0 8px var(--neon-amber); }
.localhost-badge.muted .dot { background: var(--text-tertiary); }

/* =================================================================
 * Steps cards (welcome page)
 * ================================================================= */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0 36px 0;
}
.step {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(63, 224, 255, 0.10);
  color: var(--neon-cyan);
  border: 1px solid rgba(63, 224, 255, 0.30);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
  font-family: ui-monospace, "SF Mono", monospace;
}
.step h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.step p {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Flow diagram (welcome page) — minimal premium nodes. */
.flow-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 20px 0 36px 0;
}
.flow-diagram .node {
  padding: 10px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-family: ui-monospace, "SF Mono", monospace;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.flow-diagram .arrow {
  color: var(--neon-violet);
  font-size: 16px;
  filter: drop-shadow(0 0 4px var(--neon-violet));
}

/* Explainer / about copy. */
.explainer { max-width: 720px; }
.explainer section { margin-bottom: 36px; }
.explainer h3 {
  color: var(--text-primary);
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 10px;
  font-weight: 600;
}
.explainer h3::after { display: none; }
.explainer p {
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 12px 0;
}
.explainer ul {
  color: var(--text-secondary);
  line-height: 1.75;
  font-size: 14px;
  padding-left: 20px;
}
.explainer .callout {
  margin-top: 18px;
  padding: 16px 20px;
  background: rgba(63, 224, 255, 0.05);
  border: 1px solid rgba(63, 224, 255, 0.20);
  border-radius: var(--radius-2);
  color: var(--text-primary);
  font-size: 13.5px;
}
.explainer .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Continuity-result success card uses the journey-final styling. */
.continuity-result {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: 32px 28px;
  margin-top: 18px;
  text-align: center;
}
.continuity-result h3 {
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-size: 22px;
  margin: 0 0 10px 0;
}
.continuity-result h3::after { display: none; }
.continuity-result p { color: var(--text-secondary); margin: 0 auto; max-width: 480px; line-height: 1.55; font-size: 14px; }
.continuity-result.success {
  border-color: rgba(53, 214, 160, 0.32);
  background:
    radial-gradient(circle at 50% 0%, rgba(53, 214, 160, 0.14), transparent 60%),
    linear-gradient(180deg, var(--bg-card-hover), var(--bg-card));
  box-shadow: var(--shadow-hero), 0 0 80px rgba(53, 214, 160, 0.15);
}
.continuity-result.success h3 { color: var(--neon-green); font-size: 28px; }
.continuity-result .seal { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-eyebrow); margin-top: 18px; }

/* Feedback panel — softened. */
.feedback-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 28px;
  margin-top: 32px;
  box-shadow: var(--shadow-card);
}
.feedback-panel h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  margin: 0 0 8px 0;
}
.feedback-panel h3::after { display: none; }
.feedback-panel .lede { font-size: 13px; margin-bottom: 18px; }
.feedback-panel .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.feedback-panel .field label { font-size: 12px; color: var(--text-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; }
.feedback-panel .field select,
.feedback-panel .field input[type="text"],
.feedback-panel .field textarea {
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 9px 12px;
  font: inherit;
}
.feedback-panel .field textarea { min-height: 64px; resize: vertical; }
.feedback-panel .submitted { color: var(--neon-green); font-size: 12.5px; margin-top: 10px; }
.feedback-panel .small-row { font-size: 11px; color: var(--text-tertiary); margin-top: 12px; }

/* =================================================================
 * Responsive
 * ================================================================= */

@media (max-width: 1180px) {
  .continuity-core-stage,
  .hero { grid-template-columns: 1fr; }
  .continuity-core,
  .ring-stage { margin: 0 auto; }
  .main { padding: 36px 32px 80px 32px; }
}
@media (max-width: 720px) {
  /* `.sidebar { display: none }` used to live here, which meant that below
     720px the console had NO navigation whatsoever — not a collapsed rail, not
     a menu button: nothing. Every surface became a dead end reachable only by
     typing a URL. The four-tab shell turns the rail into the bottom bar at
     900px instead (see the shell block above), so hiding it here would delete
     the bar we just built. */
  .main { padding: 28px 18px 80px 18px; }
  .hero-title,
  .core-copy h2,
  .hero h2,
  .journey-stage h2 { font-size: 30px; }
  .continuity-core,
  .ring-stage { width: 320px; height: 320px; }
  .vault-core { width: 280px; }
  .vault-seal .seal-percent,
  .continuity-score,
  .ring-pct { font-size: 56px; }
  #cluster-grid.cluster-grid { grid-template-columns: 1fr; }
}

/* =================================================================
 * Reduced motion
 * ================================================================= */

/* Single-selector override so the strict cluster-node test
 * regex matches. The combined .memory-cluster-node, .atom-card
 * rule already declares the same value. */
.memory-cluster-node {
  cursor: pointer;
}

/* Phase 57 — continuity insights inside the memory detail drawer.
 * Subtle, ambient, never a popup. Each line is a calm dot + text
 * row that cites its supporting cognition implicitly through the
 * /continuity/recall payload the drawer fetched. */
.memory-continuity-insights {
  margin: 4px 0 8px 0;
}
.continuity-quiet {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.55;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-2);
}
.continuity-line-list { list-style: none; padding: 0; margin: 0; }
.continuity-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-soft);
}
.continuity-line:last-child { border-bottom: none; }
.continuity-line-dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--glow-green);
  margin-top: 6px;
}
.continuity-providers {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.continuity-provider {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  font-family: ui-monospace, "SF Mono", monospace;
}

/* =================================================================
 * Phase 58 — continuity-aware chat surface.
 *
 * Two-column layout: conversation on the left, continuity context
 * on the right. Premium and quiet — the chat surface should read
 * as a part of the same product, never as a chatbot clone.
 * ================================================================= */

.chat-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: flex-start;
  padding: 12px 0 18px 0;
}
.chat-hero h2 {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.chat-hero .lede {
  max-width: 620px;
  font-size: 14px;
  margin: 0;
}
.chat-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.chat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.chat-pill.local::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon-green);
  box-shadow: var(--glow-green);
}
.chat-pill.continuity {
  color: var(--neon-cyan);
  border-color: rgba(63, 224, 255, 0.30);
}
.chat-pill.provider {
  color: var(--text-tertiary);
  letter-spacing: 0.18em;
}

.chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  margin-bottom: 28px;
  align-items: stretch;
}

.chat-column-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.chat-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.chat-control-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
  min-width: 0;
}
.chat-control-field label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
}
.chat-control-field select {
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
}
.chat-control-field select:focus {
  outline: none;
  border-color: rgba(63, 224, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(63, 224, 255, 0.10);
}
.chat-secondary-btn {
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: 12.5px;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.chat-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.conversation {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 18px;
  min-height: 360px;
  max-height: 560px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
}
.conversation .empty-state {
  margin: auto;
  background: transparent;
  border: none;
  padding: 24px;
}
.chat-bubble {
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  max-width: 92%;
  animation: chat-bubble-in var(--motion-smooth) both;
}
@keyframes chat-bubble-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-bubble.role-user {
  align-self: flex-end;
  border-color: rgba(63, 224, 255, 0.20);
  background: linear-gradient(180deg, rgba(63, 224, 255, 0.06), rgba(63, 224, 255, 0.015));
}
.chat-bubble.role-assistant {
  align-self: flex-start;
  border-color: rgba(53, 214, 160, 0.20);
  background: linear-gradient(180deg, rgba(53, 214, 160, 0.05), rgba(53, 214, 160, 0.015));
}
.chat-bubble-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-eyebrow);
  margin-bottom: 6px;
  font-family: ui-monospace, "SF Mono", monospace;
}
.chat-bubble-content {
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------------------------------------------------------------------
 * Continuity-commit surface — the composer + send as ONE machined panel.
 * The input and the send control share a single bordered surface (no gap,
 * no floating pill). The send control is a dense, dark-green docked panel
 * lit at its seam, not a bright SaaS blob. Committing a message reads as
 * activating the continuity field, not "pressing send".
 * ------------------------------------------------------------------------- */
.composer,
.chat-composer-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: rgba(0, 0, 0, 0.32);
  overflow: hidden;
  transition: border-color var(--motion-smooth), box-shadow var(--motion-smooth);
}
/* The whole surface responds to focus — one continuous cognition surface. */
.chat-composer-row:focus-within,
.composer:focus-within {
  border-color: rgba(63, 224, 255, 0.26);
  box-shadow: inset 0 0 0 1px rgba(63, 224, 255, 0.08);
}
.composer textarea,
.chat-input {
  flex: 1 1 auto;
  background: transparent;
  color: var(--text-primary);
  border: none;
  border-radius: 0;
  padding: 14px 16px;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  min-height: 56px;
}
.composer textarea:focus,
.chat-input:focus {
  outline: none;
  box-shadow: none;
}

/* The send control — docked, machined, edge-lit. */
.chat-send-button {
  flex: 0 0 auto;
  align-self: stretch;
  width: 96px;
  min-width: 96px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: none;
  border-left: 1px solid rgba(53, 214, 160, 0.16);   /* the continuity seam */
  border-radius: 0;
  color: var(--neon-green-bright);
  /* Dense dark-green base + a thin top machined highlight + bottom shade.
   * Edge-light, not fill-light; no outer bloom. */
  background:
    linear-gradient(180deg, rgba(53, 214, 160, 0.10) 0%, rgba(53, 214, 160, 0.028) 100%),
    #0B130F;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  /* Infrastructural label — smaller, tracked, semibold. */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    background var(--motion-smooth),
    box-shadow var(--motion-smooth),
    color var(--motion-smooth),
    border-color var(--motion-smooth);
}
.chat-send-button .chat-send-glyph {
  display: inline-flex;
  opacity: 0.8;
  transition: opacity var(--motion-smooth), transform var(--motion-smooth);
}
.chat-send-button .chat-send-glyph svg { width: 13px; height: 13px; display: block; }

/* Hover/focus: luminance rise + seam activation + faint internal edge
 * energy. No scaling, no bounce, no outer glow pulse. */
.chat-send-button:hover,
.chat-send-button:focus-visible {
  outline: none;
  color: #7CFFC0;
  background:
    linear-gradient(180deg, rgba(53, 214, 160, 0.16) 0%, rgba(53, 214, 160, 0.05) 100%),
    #0D170F;
  border-left-color: rgba(53, 214, 160, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    inset 0 0 16px rgba(53, 214, 160, 0.08);
}
.chat-send-button:hover .chat-send-glyph { opacity: 1; transform: translateX(1px); }
/* Press: a small machined depth response (no transform jump). */
.chat-send-button:active {
  background:
    linear-gradient(180deg, rgba(53, 214, 160, 0.07) 0%, rgba(53, 214, 160, 0.02) 100%),
    #0A120D;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}
.chat-send-button:disabled {
  opacity: 0.5;
  cursor: default;
  color: var(--text-secondary);
  border-left-color: var(--border);
}
.chat-send-button:disabled .chat-send-glyph { transform: none; }

.composer-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: ui-monospace, "SF Mono", monospace;
}

.chat-column-context {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.context-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin-bottom: 4px;
}
.context-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 18px;
  flex: 1 1 auto;
  min-height: 280px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.context-item {
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2);
  animation: chat-bubble-in var(--motion-smooth) both;
}
.context-item.tone-strong { border-color: rgba(53, 214, 160, 0.30); }
.context-item.tone-medium { border-color: rgba(63, 224, 255, 0.22); }
.context-item.tone-soft   { border-color: var(--border-soft); }
.context-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.context-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 6px rgba(63, 224, 255, 0.45);
  flex-shrink: 0;
}
.context-item.tone-strong .context-dot {
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--glow-green);
}
.context-title {
  flex: 1 1 auto;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.context-cited {
  font-size: 10px;
  font-family: ui-monospace, "SF Mono", monospace;
  color: var(--text-tertiary);
}
.context-explanation {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.context-providers-line {
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.context-provider {
  padding: 2px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-family: ui-monospace, "SF Mono", monospace;
}

/* =================================================================
 * Phase 64 — longitudinal continuity surface (natural panel).
 * Calm, human, no confidence numbers, no technical labels.
 * ================================================================= */
.continuity-synthesis-line {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.continuity-synthesis-line.is-seeded {
  color: var(--text-tertiary);
}
.context-summary {
  flex: 1 1 auto;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.45;
}
.context-why {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 2px;
}
.context-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.context-when {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}
.context-project {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(63, 224, 255, 0.20);
  color: var(--neon-cyan);
  letter-spacing: 0.02em;
}
.context-trail {
  margin-top: 8px;
}
.context-trail > summary {
  font-size: 11px;
  color: var(--text-tertiary);
  cursor: pointer;
  list-style: none;
  letter-spacing: 0.02em;
}
.context-trail > summary:hover { color: var(--text-secondary); }
.context-trail p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 6px 0 0 0;
}
.context-item.is-seeded {
  border-style: dashed;
  border-color: var(--border-soft);
  opacity: 0.92;
}

/* =================================================================
 * Phase 65 — persistent reasoning (cognitive identity panel).
 * Quiet, longitudinal, reflective. No scores, no gamification.
 * ================================================================= */
.identity-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 22px 0 16px 0;
}
.identity-panel { display: flex; flex-direction: column; gap: 10px; }
.identity-item {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2);
  animation: chat-bubble-in var(--motion-smooth) both;
}
.identity-item.is-seeded { border-style: dashed; opacity: 0.9; }
.identity-item-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.identity-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  top: 5px;
  background: var(--neon-violet);
  box-shadow: 0 0 6px rgba(157, 117, 255, 0.45);
}
.identity-item[data-kind="pattern"]   .identity-dot { background: var(--neon-cyan);   box-shadow: 0 0 6px rgba(63, 224, 255, 0.45); }
.identity-item[data-kind="tension"]   .identity-dot { background: var(--neon-amber);  box-shadow: 0 0 6px rgba(255, 197, 61, 0.45); }
.identity-item[data-kind="evolution"] .identity-dot { background: var(--neon-green);  box-shadow: 0 0 6px rgba(53, 214, 160, 0.45); }
.identity-summary {
  flex: 1 1 auto;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-primary);
}
.identity-when {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  margin-top: 6px;
}
.identity-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-tertiary);
  margin-top: 12px;
}

/* =================================================================
 * Phase 67 — continuity capture (quiet candidate suggestions).
 * Ambient, calm, never a notification feed. No scores shown.
 * ================================================================= */
:root { --ambient-continuity: 0.3; }

.capture-panel { display: flex; flex-direction: column; gap: 10px; }
.capture-item {
  display: flex;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2);
  background: rgba(255, 255, 255, 0.012);
  animation: chat-bubble-in var(--motion-smooth) both;
}
.capture-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
  position: relative; top: 6px;
  background: var(--neon-cyan);
  box-shadow: 0 0 6px rgba(63, 224, 255, 0.40);
}
.capture-item[data-kind="unresolved"] .capture-dot {
  background: var(--neon-amber);
  box-shadow: 0 0 6px rgba(255, 197, 61, 0.45);
  animation: capture-pulse 3.6s ease-in-out infinite;
}
.capture-item[data-kind="strategic"] .capture-dot {
  background: var(--neon-violet);
  box-shadow: 0 0 6px rgba(157, 117, 255, 0.45);
}
@keyframes capture-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.capture-body { flex: 1 1 auto; }
.capture-summary {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-primary);
}
.capture-reason {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.45;
  margin-top: 4px;
}

/* Settings — continuity-capture toggles. */
.capture-controls { display: flex; flex-direction: column; gap: 10px; }
.capture-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.capture-toggle input { accent-color: var(--neon-green); width: 15px; height: 15px; }

/* Ambient environmental evolution — the continuity column glows a
   little deeper as accumulated cognition (continuity density) grows.
   Subtle by design; capped low so it never overpowers the field. */
.chat-column-context {
  background:
    radial-gradient(130% 70% at 100% 0%,
      rgba(63, 224, 255, calc(var(--ambient-continuity, 0.3) * 0.05)),
      transparent 62%);
  border-radius: var(--radius-3);
  transition: background var(--motion-smooth, 320ms ease);
}

/* Dashboard CTA — links to /chat from the hero copy. */
.dashboard-cta-row { margin-top: 18px; }
.dashboard-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: linear-gradient(90deg, rgba(63, 224, 255, 0.10), rgba(53, 214, 160, 0.06));
  border: 1px solid rgba(63, 224, 255, 0.30);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: 13px;
  text-decoration: none;
  transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
}
.dashboard-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(63, 224, 255, 0.55);
  background: linear-gradient(90deg, rgba(63, 224, 255, 0.16), rgba(53, 214, 160, 0.10));
}
.dashboard-cta .dashboard-cta-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 6px rgba(63, 224, 255, 0.45);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.dashboard-cta .dashboard-cta-arrow {
  color: var(--text-tertiary);
  font-size: 14px;
}

@media (max-width: 1100px) {
  .chat-layout { grid-template-columns: 1fr; }
}

/* Phase 59 — provider guidance + enablement help. */
.provider-guidance {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: ui-monospace, "SF Mono", monospace;
  line-height: 1.45;
}
.provider-guidance.warn { color: var(--neon-amber); }

.provider-help {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-secondary);
}
.provider-help summary {
  cursor: pointer;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  list-style: none;
}
.provider-help summary::-webkit-details-marker { display: none; }
.provider-help summary::before {
  content: "▸ ";
  color: var(--text-tertiary);
  font-size: 10px;
}
.provider-help[open] summary::before { content: "▾ "; }
.provider-help .provider-help-body { margin-top: 10px; line-height: 1.55; }
.provider-help .provider-help-body p { margin: 8px 0; color: var(--text-secondary); font-size: 12.5px; }
.provider-help .provider-help-body strong { color: var(--text-primary); }
.provider-help pre {
  margin: 6px 0 10px 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2);
  font-size: 11px;
  color: var(--text-secondary);
  overflow-x: auto;
}

.chat-bubble.chat-bubble-error {
  border-color: rgba(255, 197, 61, 0.40);
  background: linear-gradient(180deg, rgba(255, 197, 61, 0.08), rgba(255, 197, 61, 0.015));
}

/* =================================================================
 * Phase 60 — project continuity spaces.
 *
 * Premium, ambient, longitudinal. Never SaaS-grid. Project
 * cards feel alive with accumulated cognition.
 * ================================================================= */

.project-create-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(157, 117, 255, 0.05), transparent 60%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-card);
  margin-bottom: 28px;
}
.project-create-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.project-create-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.project-create-form input[type="text"] {
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  min-width: 220px;
}
.project-create-form input[type="text"]:focus {
  outline: none;
  border-color: rgba(63, 224, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(63, 224, 255, 0.10);
}
.project-create-form button.primary {
  padding: 9px 18px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  border-bottom: none;
  transition: transform var(--motion-fast), box-shadow var(--motion-smooth), border-color var(--motion-fast);
}
.project-card:hover {
  transform: translateY(-2px);
  border-color: rgba(63, 224, 255, 0.25);
  box-shadow: var(--shadow-float);
}
.project-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.project-card-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(63, 224, 255, 0.45);
}
.project-card.tone-strong  .project-card-dot { background: var(--neon-green);    box-shadow: 0 0 8px var(--glow-green); }
.project-card.tone-forming .project-card-dot { background: var(--neon-cyan);     box-shadow: 0 0 8px rgba(63, 224, 255, 0.45); }
.project-card.tone-early   .project-card-dot { background: var(--neon-violet);   box-shadow: 0 0 8px rgba(157, 117, 255, 0.45); }
.project-card.tone-quiet   .project-card-dot { background: var(--text-tertiary); box-shadow: none; }
.project-card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1;
}
.project-card-strength {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-family: ui-monospace, "SF Mono", monospace;
}
.project-card.tone-strong  .project-card-strength { color: var(--neon-green);    border-color: rgba(53, 214, 160, 0.30); }
.project-card.tone-forming .project-card-strength { color: var(--neon-cyan);     border-color: rgba(63, 224, 255, 0.30); }
.project-card.tone-early   .project-card-strength { color: var(--neon-violet);   border-color: rgba(157, 117, 255, 0.30); }
.project-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}
.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-family: ui-monospace, "SF Mono", monospace;
}
.project-card-providers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.project-provider {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-family: ui-monospace, "SF Mono", monospace;
}
.project-card-synthesis {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ---- Individual project page ---- */

.project-detail-eyebrow {
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin-bottom: 8px;
}
.project-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.project-strength-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 22px;
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
}
.project-strength-meter {
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  margin-bottom: 12px;
}
.project-strength-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-green));
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(63, 224, 255, 0.40);
  transition: width var(--motion-smooth);
}
.project-strength-text {
  font-size: 13px;
  color: var(--text-primary);
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.02em;
}
.project-strength-stats {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-family: ui-monospace, "SF Mono", monospace;
}
.project-strength-stat {
  padding: 2px 0;
}

.project-synthesis-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 18px;
  margin-bottom: 24px;
}
.project-synthesis-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-soft);
  line-height: 1.55;
}
.project-synthesis-line:last-child { border-bottom: none; }
.project-synthesis-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--glow-green);
  margin-top: 6px;
}

.project-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.project-timeline-event {
  position: relative;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2);
}
.project-timeline-event.tone-active { border-color: rgba(63, 224, 255, 0.30); }
.project-timeline-event.tone-quiet  { opacity: 0.6; }
.project-timeline-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin-bottom: 6px;
}
.project-timeline-count {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.project-timeline-dot {
  position: absolute;
  top: 14px; right: 14px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-tertiary);
}
.project-timeline-event.tone-active .project-timeline-dot {
  background: var(--neon-cyan);
  box-shadow: 0 0 6px rgba(63, 224, 255, 0.45);
}

.project-connected {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.project-relationship-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  text-decoration: none;
  color: inherit;
  border-bottom: none;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.project-relationship-card:hover {
  border-color: rgba(157, 117, 255, 0.30);
  background: rgba(157, 117, 255, 0.04);
}
.project-relationship-type {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neon-violet);
}
.project-relationship-explain {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.project-relationship-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: ui-monospace, "SF Mono", monospace;
}

.project-linked-sessions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-session-card {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2);
}
.project-session-title {
  font-size: 13.5px;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 4px;
}
.project-session-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: ui-monospace, "SF Mono", monospace;
}

/* Chat: project scope bar above the controls. */
.project-scope-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(157, 117, 255, 0.10), rgba(63, 224, 255, 0.04));
  border: 1px solid rgba(157, 117, 255, 0.30);
  border-radius: var(--radius-2);
  font-size: 12.5px;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.project-scope-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon-violet);
  box-shadow: 0 0 6px var(--neon-violet);
}
.project-scope-label {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.project-scope-link {
  margin-left: auto;
  font-size: 11px;
  color: var(--neon-cyan);
}

/* =================================================================
 * Phase 61 — Continuity Topology Visualization.
 *
 * Atmospheric. Calm. Spatial. Never a graph debug tool.
 * ================================================================= */

.topology-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.topology-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.topology-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 720px;
  margin: 0 auto 32px auto;
  border-radius: var(--radius-3);
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(11, 13, 20, 0.60), rgba(4, 5, 8, 0.97));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.topology-field { position: absolute; inset: 0; pointer-events: none; }
.topology-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(44px);
  pointer-events: none;
  animation: topology-breathe 11s ease-in-out infinite;
}
.topology-glow-core {
  inset: 22%;
  background:
    radial-gradient(circle, rgba(63, 224, 255, 0.14) 0%, rgba(157, 117, 255, 0.055) 45%, transparent 72%);
  opacity: 0.34;
}
@keyframes topology-breathe {
  0%, 100% { transform: scale(1); opacity: 0.38; }
  50%      { transform: scale(1.04); opacity: 0.52; }
}

.topology-svg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.topology-edge {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 0.8;
}

.topology-node {
  cursor: default;
  opacity: 0;
  animation: topology-node-enter 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes topology-node-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.topology-node-halo {
  transition: transform var(--motion-smooth), opacity var(--motion-smooth);
}
.topology-node-core {
  fill: var(--node-color, var(--neon-cyan));
  filter: drop-shadow(0 0 8px var(--node-color, var(--neon-cyan)));
  transition: filter var(--motion-smooth);
}
.topology-node-label {
  fill: var(--text-secondary);
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.topology-node:hover .topology-node-halo,
.topology-node:focus .topology-node-halo { transform: scale(1.12); }
.topology-node:hover .topology-node-core,
.topology-node:focus .topology-node-core {
  filter: drop-shadow(0 0 14px var(--node-color, var(--neon-cyan)));
}
.topology-node:hover .topology-node-label,
.topology-node:focus .topology-node-label { fill: var(--text-primary); }

.topology-node.tone-project    { --node-color: var(--neon-cyan); }
.topology-node.tone-goal       { --node-color: var(--neon-green); }
.topology-node.tone-constraint { --node-color: var(--neon-violet); }
.topology-node.tone-pattern    { --node-color: var(--neon-cyan); }
.topology-node.tone-loop       { --node-color: var(--neon-amber); }
.topology-node.tone-decision   { --node-color: var(--neon-magenta); }

.topology-node.is-unresolved .topology-node-halo {
  animation: topology-loop-pulse 3.4s ease-in-out infinite;
}
@keyframes topology-loop-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1.0; }
}

.topology-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.topology-tooltip {
  position: absolute;
  z-index: 5;
  max-width: 320px;
  padding: 12px 14px;
  background: rgba(13, 15, 22, 0.92);
  /* Luminous cyan hairline (was hard white 1px) — DA §6/§11. */
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.topology-tooltip-eyebrow {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin-bottom: 4px;
}
.topology-tooltip-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.topology-tooltip-summary {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 8px;
}
.topology-tooltip-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.topology-tooltip-open {
  font-size: 11px;
  color: var(--neon-cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(63, 224, 255, 0.30);
}

.topology-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}
.topology-timeline-event {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2);
}
.topology-timeline-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
  margin-top: 6px;
}
.topology-timeline-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.topology-timeline-explanation {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 4px;
}
.topology-timeline-meta {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.04em;
}

/* User-requested: stop the continuity-core image from moving
 * with the mouse. The Phase 57 parallax shift was making the
 * percentage + status text inside the ring look misaligned as
 * the SVG translated underneath them. Override the parallax
 * transform on the core only; the rest of the page (constellation
 * field, environment field) still drift gently. */
#continuity-core[data-parallax] {
  --par-strength: 0;
  transform: none !important;
  transition: none !important;
}

/* =================================================================
 * Phase 57 — Environmental Motion + Depth pass.
 *
 * Atmospheric particle field, depth planes, ring orbital shells,
 * constellation traces, timeline energy flow, parallax-friendly
 * transforms. All additive: every Phase 56 surface keeps its
 * appearance. Motion is restrained — particles drift over 8–14 s,
 * orbit shells over 40–90 s, glows breathe over 6–10 s.
 *
 * No remote assets. No external libraries. Pure CSS + tiny JS.
 * ================================================================= */

/* The fixed environmental field sits behind everything but the
 * page background, never above app surfaces. */
.environment-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}

/* Two large soft glows — one warm-green lower-left, one cool
 * graphite upper-right. They're invisible at first glance but
 * give the void a layered horizon. */
.environment-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.32;
  pointer-events: none;
  will-change: transform, opacity;
  animation: env-breathe 9s ease-in-out infinite;
}
.environment-glow.glow-lower-left {
  width: 620px;
  height: 620px;
  left: -200px;
  bottom: -260px;
  background: radial-gradient(circle, rgba(53, 214, 160, 0.06), transparent 60%);
  animation-delay: 0s;
}
.environment-glow.glow-upper-right {
  width: 700px;
  height: 700px;
  right: -300px;
  top: -300px;
  background: radial-gradient(circle, rgba(157, 117, 255, 0.04), transparent 60%);
  animation-delay: 4s;
  animation-duration: 11s;
}
.environment-glow.glow-mid {
  width: 540px;
  height: 540px;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(63, 224, 255, 0.035), transparent 66%);
  animation-duration: 10s;
  animation-delay: 2s;
  opacity: 0.26;
}
@keyframes env-breathe {
  0%, 100% { opacity: var(--breath-low, 0.22); transform: scale(1); }
  50%      { opacity: var(--breath-high, 0.38); transform: scale(1.03); }
}

/* A subtle noise/smoke plane sits on top of the glows but
 * underneath the app. Tiny diagonal moire — invisible until
 * the reader leans toward the screen. */
.ambient-depth-plane {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.010) 0 1px,
      transparent 1px 7px);
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Particle layer — DOM-only, populated by mountAmbientField(). */
.environment-particle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.environment-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--particle-color, rgba(124, 214, 183, 0.55));
  opacity: 0;
  will-change: transform, opacity;
  animation:
    particle-drift var(--particle-drift, 14s) linear infinite,
    particle-fade  var(--particle-fade, 11s) ease-in-out infinite;
  animation-delay: var(--particle-delay, 0s);
}
.environment-particle.tone-teal  { --particle-color: rgba(124, 214, 183, 0.55); }
.environment-particle.tone-green { --particle-color: rgba(127, 200, 137, 0.45); }
.environment-particle.tone-white { --particle-color: rgba(220, 226, 235, 0.40); }
.environment-particle.size-2     { width: 2px; height: 2px; }
.environment-particle.size-3     { width: 3px; height: 3px; opacity: 0.6; }
.environment-particle.size-1     { width: 1px; height: 1px; opacity: 0.45; }
@keyframes particle-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--particle-x, 12px), calc(var(--particle-y, -120vh)), 0); }
}
@keyframes particle-fade {
  0%   { opacity: 0; }
  20%  { opacity: var(--particle-peak, 0.65); }
  80%  { opacity: var(--particle-peak, 0.65); }
  100% { opacity: 0; }
}

/* Vignette — slight darken at the corners so the centre feels
 * lit by the bloom. */
.environment-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 48%, rgba(0, 0, 0, 0.58) 100%);
  pointer-events: none;
}

/* Parallax targets — JS sets --par-x / --par-y custom properties. */
[data-parallax] {
  transform:
    translate3d(
      calc(var(--par-x, 0) * var(--par-strength, 1)),
      calc(var(--par-y, 0) * var(--par-strength, 1)),
      0
    );
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* =================================================================
 * Continuity ring environmental shells
 *
 * Wraps the existing .continuity-core (Phase 56). The new layers
 * sit BEHIND the existing rings; they never overwrite or replace
 * the test-pinned .core-ring.outer / .middle / .inner elements.
 * ================================================================= */

.continuity-ring-shell {
  position: absolute;
  inset: -24px;
  pointer-events: none;
  z-index: 0;
}
.continuity-ring-shell .continuity-energy-field {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, rgba(63, 224, 255, 0.13), transparent 58%),
    radial-gradient(circle at 50% 60%, rgba(53, 214, 160, 0.07), transparent 62%);
  filter: blur(20px);
  opacity: 0.5;
  animation: energy-breathe 8s ease-in-out infinite;
}
.continuity-core.verified .continuity-ring-shell .continuity-energy-field {
  background:
    radial-gradient(circle at 50% 40%, rgba(53, 214, 160, 0.16), transparent 58%),
    radial-gradient(circle at 50% 60%, rgba(63, 224, 255, 0.07), transparent 62%);
  opacity: 0.62;
}
@keyframes energy-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.06); }
}

/* Faint outer rings — two extra hairlines surrounding the core
 * SVG. They sit beneath the SVG via z-index so the SVG's tick
 * marks and progress arc stay dominant. */
.continuity-ring-shell::before,
.continuity-ring-shell::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.continuity-ring-shell::after {
  inset: -2%;
  border-color: rgba(255, 255, 255, 0.025);
}

/* Secondary orbital layer — a few small dots drifting in the
 * opposite direction of the main orbit-path for parallax. */
.continuity-orbit-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: orbit-counter-drift 80s linear infinite;
}
@keyframes orbit-counter-drift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
.continuity-orbit-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(124, 214, 183, 0.65);
  box-shadow: 0 0 6px rgba(124, 214, 183, 0.40);
  transform-origin: 0 0;
  animation: dot-soft-pulse var(--dot-pulse, 6s) ease-in-out infinite;
}
.continuity-orbit-dot.tone-green { background: rgba(127, 200, 137, 0.65); box-shadow: 0 0 6px rgba(127, 200, 137, 0.40); }
.continuity-orbit-dot.tone-white { background: rgba(220, 226, 235, 0.45); box-shadow: 0 0 6px rgba(220, 226, 235, 0.30); }
@keyframes dot-soft-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* Soft depth glow — a wider halo that sits behind the main
 * .continuity-core::before bloom. Adds the impression that the
 * ring is lit from within. */
.continuity-depth-glow {
  position: absolute;
  inset: -48px;
  background: radial-gradient(circle, rgba(63, 224, 255, 0.045), transparent 62%);
  filter: blur(28px);
  opacity: 0.5;
  pointer-events: none;
  animation: env-breathe 10s ease-in-out infinite;
}
.continuity-core.verified .continuity-depth-glow {
  background: radial-gradient(circle, rgba(53, 214, 160, 0.07), transparent 65%);
}

/* =================================================================
 * Memory constellation environment
 *
 * Subtle background traces behind the cluster cards. Hovering a
 * card lights the adjacent traces. Atmospheric, not technical.
 * ================================================================= */

.constellation-field {
  position: absolute;
  inset: -32px -48px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.constellation-field .constellation-trace {
  position: absolute;
  border-radius: 999px;
  filter: blur(26px);
  opacity: 0.26;
  will-change: opacity, transform;
  transition: opacity var(--motion-smooth);
}
.constellation-field .constellation-trace.t-1 {
  width: 380px; height: 240px;
  left: 8%; top: 12%;
  background: radial-gradient(circle, rgba(63, 224, 255, 0.06), transparent 65%);
}
.constellation-field .constellation-trace.t-2 {
  width: 420px; height: 260px;
  left: 48%; top: 38%;
  background: radial-gradient(circle, rgba(127, 200, 137, 0.06), transparent 65%);
}
.constellation-field .constellation-trace.t-3 {
  width: 320px; height: 220px;
  right: 6%; top: 4%;
  background: radial-gradient(circle, rgba(157, 117, 255, 0.05), transparent 65%);
}
.constellation-field .constellation-trace.active {
  opacity: 0.75;
}
.memory-constellation-stage:hover .constellation-trace {
  opacity: 0.62;
}
.memory-cluster-node:hover ~ .constellation-field .constellation-trace,
.memory-constellation-stage:focus-within .constellation-trace {
  opacity: 0.78;
}

.memory-field-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 0%, rgba(63, 224, 255, 0.04), transparent 60%),
    radial-gradient(circle at 70% 100%, rgba(127, 200, 137, 0.03), transparent 65%);
  opacity: 0.6;
  z-index: 0;
}

.memory-constellation-stage {
  position: relative;
  z-index: 1;
}
#cluster-grid.cluster-grid { position: relative; z-index: 2; }

/* =================================================================
 * Preservation timeline / continuity stream — soft energy flow
 * ================================================================= */

/* Completed dots breathe via box-shadow only — no layout shift. */
.preservation-timeline .timeline-node.complete .timeline-dot {
  animation: milestone-breathe 7s ease-in-out infinite;
}
@keyframes milestone-breathe {
  0%, 100% { box-shadow: 0 0 0 4px rgba(53, 214, 160, 0.10), 0 0 10px var(--neon-green); }
  50%      { box-shadow: 0 0 0 6px rgba(53, 214, 160, 0.14), 0 0 14px var(--neon-green); }
}

/* =================================================================
 * Trust strip — soft ambient pulse on the green dots
 * ================================================================= */

.trust-strip {
  position: relative;
  transition: box-shadow var(--motion-smooth);
}
.trust-strip:hover {
  box-shadow:
    0 0 0 1px rgba(53, 214, 160, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.55),
    0 0 20px rgba(53, 214, 160, 0.06);
}

/* =================================================================
 * Smooth entrance choreography — first-paint fade for the major
 * page surfaces. Each surface enters slightly delayed.
 * ================================================================= */

.continuity-core-stage,
.hero,
.preservation-chamber,
.journey-stage {
  animation: surface-enter 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.memory-constellation-stage {
  animation: surface-enter 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms both;
}
.preservation-timeline,
.vault-panel-grid,
.journey-cards {
  animation: surface-enter 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 240ms both;
}
@keyframes surface-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =================================================================
 * Reduced motion — halts everything atmospheric.
 * ================================================================= */

@media (prefers-reduced-motion: reduce) {
  .environment-particle,
  .environment-glow,
  .continuity-ring-shell .continuity-energy-field,
  .continuity-depth-glow,
  .continuity-orbit-layer,
  .continuity-orbit-dot,
  .preservation-timeline .timeline-node.complete .timeline-dot {
    animation: none !important;
  }
  [data-parallax] {
    transform: none !important;
    transition: none !important;
  }
}

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

/* ===================================================================
   Phase 62 — Provider connections (settings_providers.html)
   Apple System Settings meets cinematic continuity OS. No SaaS
   integrations-dashboard energy: calm cards, restrained glow.
   =================================================================== */

.provider-vault-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 18px 0;
  letter-spacing: 0.01em;
}

.provider-conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.provider-conn-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(63, 224, 255, 0.05), transparent 60%),
    var(--surface-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--motion-smooth, 320ms ease),
              transform var(--motion-smooth, 320ms ease);
}

.provider-conn-card.is-connected {
  border-color: var(--border-bright);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(53, 214, 160, 0.07), transparent 60%),
    var(--surface-card);
}

.provider-conn-card.is-soon { opacity: 0.55; }

.provider-conn-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Phase 65 — official-feeling provider marks. Monochrome inline
   SVG in currentColor; the tone class supplies a soft, restrained
   glow. Branding stays secondary to the Cognitive Atoms identity. */
.provider-logo {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
  transition:
    opacity var(--motion-smooth, 320ms ease),
    filter var(--motion-smooth, 320ms ease);
}
.provider-logo svg {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
/* Per-provider tone: a softly toned colour + matching subtle glow. */
.provider-logo.tone-openai {
  color: #EDEFF5;
  filter: drop-shadow(0 0 8px rgba(230, 236, 245, 0.30));
}
.provider-logo.tone-anthropic {
  color: #E8C39A;
  filter: drop-shadow(0 0 8px rgba(232, 180, 120, 0.32));
}
.provider-logo.tone-gemini {
  color: #9DB4FF;
  filter: drop-shadow(0 0 8px rgba(120, 150, 255, 0.32));
}
.provider-logo.tone-perplexity {
  color: #6FE3DE;
  filter: drop-shadow(0 0 8px rgba(63, 224, 255, 0.28));
}
.provider-logo.tone-grok {
  color: #D8DCE4;
  filter: drop-shadow(0 0 8px rgba(216, 220, 228, 0.26));
}
.provider-logo.tone-ollama {
  color: #7FE6B0;
  filter: drop-shadow(0 0 8px rgba(53, 214, 160, 0.30));
}
.provider-logo.tone-enterprise {
  color: #9AA0AE;
  filter: drop-shadow(0 0 6px rgba(154, 160, 174, 0.22));
}
/* Connected: brighter mark + a touch more glow. */
.provider-logo.is-connected { opacity: 1; }
.provider-logo.tone-openai.is-connected    { filter: drop-shadow(0 0 12px rgba(230, 236, 245, 0.48)); }
.provider-logo.tone-anthropic.is-connected { filter: drop-shadow(0 0 12px rgba(232, 180, 120, 0.50)); }
.provider-logo.tone-gemini.is-connected    { filter: drop-shadow(0 0 12px rgba(120, 150, 255, 0.50)); }
.provider-logo.tone-perplexity.is-connected{ filter: drop-shadow(0 0 12px rgba(63, 224, 255, 0.46)); }
.provider-logo.tone-grok.is-connected       { filter: drop-shadow(0 0 12px rgba(216, 220, 228, 0.44)); }
.provider-logo.tone-ollama.is-connected     { filter: drop-shadow(0 0 12px rgba(53, 214, 160, 0.50)); }
.provider-logo.tone-enterprise.is-connected { filter: drop-shadow(0 0 10px rgba(154, 160, 174, 0.40)); }
/* Coming soon: desaturated + dimmed so it reads as not-yet-active. */
.provider-logo.is-soon {
  opacity: 0.45;
  filter: grayscale(0.55) drop-shadow(0 0 4px rgba(255, 255, 255, 0.10));
}
/* Hover: card border glow lifts subtly; no scaling, no jump. */
.provider-conn-card { transition: border-color var(--motion-smooth, 320ms ease), box-shadow var(--motion-smooth, 320ms ease); }
.provider-conn-card:hover {
  border-color: var(--border-bright);
  box-shadow: 0 0 24px rgba(63, 224, 255, 0.06);
}
.provider-conn-card.is-connected:hover {
  box-shadow: 0 0 24px rgba(53, 214, 160, 0.08);
}
.provider-conn-card.is-soon:hover { box-shadow: none; }

/* Hover: logo glow intensifies slightly; no scaling or jumping. */
.provider-conn-card:hover .provider-logo { opacity: 1; }
.provider-conn-card:hover .provider-logo.tone-ollama     { filter: drop-shadow(0 0 12px rgba(53, 214, 160, 0.42)); }
.provider-conn-card:hover .provider-logo.tone-anthropic  { filter: drop-shadow(0 0 12px rgba(232, 180, 120, 0.42)); }
.provider-conn-card:hover .provider-logo.tone-gemini     { filter: drop-shadow(0 0 12px rgba(120, 150, 255, 0.42)); }
.provider-conn-card:hover .provider-logo.tone-openai     { filter: drop-shadow(0 0 12px rgba(230, 236, 245, 0.42)); }
.provider-conn-card:hover .provider-logo.tone-perplexity { filter: drop-shadow(0 0 12px rgba(63, 224, 255, 0.38)); }
.provider-conn-card:hover .provider-logo.tone-grok       { filter: drop-shadow(0 0 12px rgba(216, 220, 228, 0.38)); }
.provider-conn-card:hover .provider-logo.tone-enterprise { filter: drop-shadow(0 0 10px rgba(154, 160, 174, 0.34)); }

/* Ollama's local-native badge. */
.provider-local-native {
  display: inline-block;
  margin-top: 4px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--neon-green);
  border: 1px solid rgba(53, 214, 160, 0.28);
  background: rgba(53, 214, 160, 0.05);
  border-radius: 999px;
  padding: 2px 9px;
}

.provider-conn-title { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.provider-conn-title h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }

.provider-state-pill {
  align-self: flex-start;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.provider-state-pill.tone-connected {
  color: var(--neon-green);
  border-color: rgba(53, 214, 160, 0.30);
  background: rgba(53, 214, 160, 0.06);
}
.provider-state-pill.tone-warn {
  color: var(--neon-amber);
  border-color: rgba(255, 197, 61, 0.30);
  background: rgba(255, 197, 61, 0.06);
}
.provider-state-pill.tone-error {
  color: var(--neon-magenta);
  border-color: rgba(255, 61, 170, 0.30);
}
.provider-state-pill.tone-disconnected { color: var(--text-secondary); }

.provider-local-badge {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  border: 1px solid rgba(63, 224, 255, 0.22);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.provider-conn-explain { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.provider-conn-meta { font-size: 12px; color: var(--text-secondary); }

.provider-model-row, .provider-cap-row { display: flex; flex-wrap: wrap; gap: 6px; }

.provider-model {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
}

.provider-cap-chip {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--neon-cyan);
  background: rgba(63, 224, 255, 0.05);
  border: 1px solid rgba(63, 224, 255, 0.16);
  border-radius: 999px;
  padding: 2px 8px;
}

.provider-conn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.provider-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(63, 224, 255, 0.28);
  background: rgba(63, 224, 255, 0.08);
  color: var(--neon-cyan-bright);
  cursor: pointer;
  transition: background var(--motion-smooth, 320ms ease),
              border-color var(--motion-smooth, 320ms ease);
}
.provider-btn:hover { background: rgba(63, 224, 255, 0.16); }
.provider-btn:disabled { opacity: 0.5; cursor: default; }
.provider-btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
}
.provider-btn.ghost:hover { border-color: var(--border-bright); color: var(--text-primary); }
.provider-btn.danger {
  background: transparent;
  border-color: rgba(255, 61, 170, 0.24);
  color: var(--neon-magenta);
}
.provider-btn.danger:hover { background: rgba(255, 61, 170, 0.08); }

/* =================================================================
 * Phase 68 — reasoning observatory (longitudinal, calm, spatial).
 * Observatory-like, not a dashboard: soft cards, no charts, no KPIs.
 * =================================================================== */
.observatory { margin: 36px 0 8px 0; }
.observatory-synthesis {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.observatory-line {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  max-width: 640px;
}
.observatory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.observatory-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(157, 117, 255, 0.05), transparent 60%),
    var(--surface-card);
  padding: 16px;
}
.observatory-card-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin-bottom: 10px;
}
.observatory-card-items { display: flex; flex-wrap: wrap; gap: 6px; }
.observatory-chip {
  font-size: 11.5px;
  color: var(--text-secondary);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 3px 10px;
}
.observatory-reflections {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.observatory-reflection {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-tertiary);
  padding-left: 14px;
  border-left: 1px solid var(--border-violet);
  max-width: 620px;
}

/* ===================================================================
 * Phase 69 — Temporal Motion System + Living Continuity Atmosphere
 *
 * A temporal-realism layer over the Phase 56–68 cinematic console.
 * The interface should feel like a living preserved cognition field
 * quietly evolving on a sovereign local machine — not an animated
 * dashboard. Everything below honours the motion tier framework
 * declared in :root and documented in
 * docs/ui/TEMPORAL_MOTION_DOCTRINE.md.
 *
 * Rules of construction:
 *   * Only compositor-friendly properties animate (transform,
 *     opacity, filter). No width/height/top/left/margin keyframes —
 *     so there is no layout thrash and the system stays 60fps-safe.
 *   * Motion strengths multiply by --temporal-gain so calm-mode and
 *     reduced-motion can quiet or freeze the whole field at once.
 *   * Durations are mutually coprime; layered loops never resolve
 *     into a visible shared period.
 *   * Nothing here changes layout, spacing, typography or palette.
 * =================================================================== */

/* -------------------------------------------------------------------
 * Tier 1 — Ambient environmental drift
 * Extremely subtle, 24–40s, low opacity. The void is never static
 * and never distracting. Layers mount inside .environment-field
 * (position:fixed; z-index:0) via the temporal continuity engine.
 * ----------------------------------------------------------------- */

/* Full-viewport container for the mounted temporal layers. Sits
 * inside the fixed .environment-field host; never interactive. */
.temporal-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Slow cyan/violet field migration — the horizon glow drifts a few
 * pixels and breathes luminance on a long, asymmetric cycle. */
.temporal-field-migration {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 30% 32%, rgba(63, 224, 255, 0.045), transparent 60%),
    radial-gradient(42% 34% at 72% 66%, rgba(157, 117, 255, 0.038), transparent 62%);
  opacity: calc(0.5 * var(--atmos-intensity));
  will-change: transform, opacity;
  animation: temporal-field-migration var(--temporal-drift-slow) var(--ease-temporal) infinite;
}
@keyframes temporal-field-migration {
  0%   { transform: translate3d(0, 0, 0);
         opacity: calc(0.40 * var(--atmos-intensity) * var(--temporal-gain)); }
  31%  { transform: translate3d(calc(10px * var(--temporal-gain)), calc(-7px * var(--temporal-gain)), 0); }
  58%  { transform: translate3d(calc(-6px * var(--temporal-gain)), calc(9px * var(--temporal-gain)), 0);
         opacity: calc(0.56 * var(--atmos-intensity) * var(--temporal-gain)); }
  82%  { transform: translate3d(calc(8px * var(--temporal-gain)), calc(5px * var(--temporal-gain)), 0); }
  100% { transform: translate3d(0, 0, 0);
         opacity: calc(0.40 * var(--atmos-intensity) * var(--temporal-gain)); }
}

/* Luminance drift — a wide, near-invisible brightness tide so the
 * whole stage feels lit from a slowly moving source. Opacity only. */
.temporal-luminance {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 38%, rgba(63, 224, 255, 0.03), transparent 64%);
  opacity: 0.5;
  will-change: opacity;
  animation: temporal-luminance-drift var(--temporal-drift) var(--ease-temporal) infinite;
}
@keyframes temporal-luminance-drift {
  0%   { opacity: calc(0.34 * var(--temporal-gain)); }
  43%  { opacity: calc(0.52 * var(--temporal-gain)); }
  71%  { opacity: calc(0.42 * var(--temporal-gain)); }
  100% { opacity: calc(0.34 * var(--temporal-gain)); }
}

/* Deep-space dust — a sparse, very low-opacity grain plane that
 * drifts diagonally. Reads as ambient infrastructure, not stars. */
.temporal-dust {
  position: absolute;
  inset: -8%;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(220, 226, 235, 0.05) 0.5px, transparent 0.6px),
    radial-gradient(rgba(124, 214, 183, 0.04) 0.5px, transparent 0.6px);
  background-size: 180px 180px, 240px 240px;
  background-position: 0 0, 90px 120px;
  opacity: calc(0.5 * var(--atmos-intensity));
  will-change: transform, opacity;
  animation: temporal-dust-drift var(--temporal-drift-dust) linear infinite;
}
@keyframes temporal-dust-drift {
  0%   { transform: translate3d(0, 0, 0); opacity: calc(0.34 * var(--temporal-gain)); }
  50%  { opacity: calc(0.50 * var(--temporal-gain)); }
  100% { transform: translate3d(calc(14px * var(--temporal-gain)), calc(-18px * var(--temporal-gain)), 0);
         opacity: calc(0.34 * var(--temporal-gain)); }
}

/* Atmospheric grain — a faint shimmer over the noise plane. The
 * grain never moves position; only its luminance breathes, so it
 * costs nothing to composite. */
.temporal-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, 0.008) 0 1px,
      transparent 1px 9px);
  mix-blend-mode: overlay;
  opacity: 0.5;
  will-change: opacity;
  animation: temporal-grain-shimmer var(--temporal-grain) ease-in-out infinite;
}
@keyframes temporal-grain-shimmer {
  0%   { opacity: calc(0.30 * var(--temporal-gain)); }
  37%  { opacity: calc(0.46 * var(--temporal-gain)); }
  68%  { opacity: calc(0.36 * var(--temporal-gain)); }
  100% { opacity: calc(0.30 * var(--temporal-gain)); }
}

/* Continuity-density depth veil — as preserved cognition grows the
 * corners of the void deepen and the centre warms, by ~10% across
 * the whole density range. Bound to --continuity-density only, so
 * it shifts when the engine recomputes density, never on a loop. */
.temporal-depth-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(63, 224, 255, 0.05), transparent 58%),
    radial-gradient(circle at center, transparent 52%, rgba(0, 0, 0, 0.40) 100%);
  opacity: calc(var(--continuity-density) * 0.10);
  transition: opacity 1600ms var(--ease-continuity);
}

/* -------------------------------------------------------------------
 * Orbital continuity system refinement
 * Calmer, more physical, more infrastructural. The orbit is
 * preserved, stable, gravitational, inevitable — never decorative
 * spinning. We slow the Phase-57 orbits to the gravitational tokens
 * and add a low-opacity orbital trace ring beneath the ring SVG.
 * ----------------------------------------------------------------- */
.orbit-path {
  animation: orbit-drift var(--temporal-orbit) var(--ease-gravity) infinite;
}
.continuity-orbit-layer {
  animation: orbit-counter-drift var(--temporal-orbit-counter) var(--ease-gravity) infinite;
}

/* A faint ring the orbit nodes leave behind — the "memory" of the
 * orbital path. Pure opacity breathing on a coprime period so the
 * orbit never reads as a clock face. */
.continuity-orbit-trace {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  border: 1px solid rgba(63, 224, 255, 0.05);
  pointer-events: none;
  will-change: opacity;
  animation: temporal-orbit-trace var(--temporal-orbit-trace) ease-in-out infinite;
}
.continuity-core.verified .continuity-orbit-trace {
  border-color: rgba(53, 214, 160, 0.06);
}
@keyframes temporal-orbit-trace {
  0%   { opacity: calc(0.35 * var(--temporal-gain)); }
  46%  { opacity: calc(0.6 * var(--temporal-gain)); }
  100% { opacity: calc(0.35 * var(--temporal-gain)); }
}

/* Gravitational glow inertia on the orbit nodes — the glow lags and
 * settles rather than blinking. Filter-only; async per node via the
 * --pulse-* custom properties the engine assigns. */
.orbit-node,
.continuity-orbit-dot {
  will-change: opacity, filter;
  animation: temporal-continuity-pulse
             var(--pulse-dur, var(--temporal-pulse))
             var(--ease-continuity) infinite;
  animation-delay: var(--pulse-delay, 0s);
}

/* -------------------------------------------------------------------
 * Tier 2 — Strategic continuity pulse system
 * Continuity nodes, topology points, preserved signals and active
 * cognition surfaces pulse asynchronously, at different intervals,
 * with slight timing variance and restrained opacity modulation.
 * The field feels alive — not a panel of blinking lights.
 * ----------------------------------------------------------------- */

/* Primary continuity pulse — opacity + a sub-perceptual scale. The
 * engine assigns --pulse-dur (13–22s) and --pulse-delay per node so
 * no two share a phase. */
@keyframes temporal-continuity-pulse {
  0%   { opacity: 0.78; filter: brightness(0.96); transform: scale(1); }
  44%  { opacity: 1;    filter: brightness(1.06); transform: scale(calc(1 + 0.02 * var(--temporal-gain))); }
  100% { opacity: 0.78; filter: brightness(0.96); transform: scale(1); }
}

/* Preserved-signal resonance — a slow ring of light that swells and
 * fades around a preserved point. Opt-in via .temporal-resonant. */
.temporal-resonant {
  position: relative;
}
.temporal-resonant::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(53, 214, 160, 0.18);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  animation: temporal-signal-resonance
             var(--pulse-dur, var(--temporal-pulse-alt))
             var(--ease-continuity) infinite;
  animation-delay: var(--pulse-delay, 0s);
}
@keyframes temporal-signal-resonance {
  0%   { opacity: 0; transform: scale(0.985); }
  40%  { opacity: calc(0.5 * var(--temporal-gain)); }
  100% { opacity: 0; transform: scale(calc(1 + 0.03 * var(--temporal-gain))); }
}

/* Continuity field shimmer — a faint luminance pass across active
 * cognition surfaces. Opacity-only, very long period. */
.temporal-shimmer {
  position: relative;
  isolation: isolate;
}
.temporal-shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 35%, rgba(63, 224, 255, 0.05) 50%, transparent 65%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  will-change: opacity;
  animation: temporal-field-shimmer var(--temporal-shimmer) ease-in-out infinite;
}
@keyframes temporal-field-shimmer {
  0%   { opacity: 0; }
  50%  { opacity: calc(0.6 * var(--temporal-gain)); }
  100% { opacity: 0; }
}

/* -------------------------------------------------------------------
 * Tier 3 — Strategic focus / interaction refinement
 * Buttons and cards respond physically: opacity, glow intensity,
 * micro-translation (≤1px) and edge illumination. No scaling, no
 * bounce, no elastic motion, no large transforms.
 * ----------------------------------------------------------------- */
.temporal-interactive {
  position: relative;
  transition:
    box-shadow var(--motion-smooth),
    border-color var(--motion-smooth),
    transform var(--motion-smooth);
}
.temporal-interactive:hover {
  /* Edge illumination + a single-pixel lift. The surface lights
   * up; it does not grow. */
  transform: translate3d(0, -1px, 0);
  box-shadow:
    0 0 0 1px rgba(63, 224, 255, 0.10),
    0 12px 40px rgba(0, 0, 0, 0.45);
  border-color: var(--border-bright);
}
.temporal-interactive:active {
  transform: translate3d(0, 0, 0);
  transition-duration: 90ms;
}

/* -------------------------------------------------------------------
 * Typography stability
 * Text is infrastructural — it stays put. Headings and reading
 * surfaces never animate transform and never carry a transition on
 * properties that would move glyphs while a reader's eyes are on
 * them. This is a guard, not a style.
 * ----------------------------------------------------------------- */
h1, h2, h3, .observatory-line, .ring-eyebrow, .continuity-state, p {
  animation: none;
  will-change: auto;
}
[data-temporal-stable] {
  transform: none !important;
  animation: none !important;
}

/* -------------------------------------------------------------------
 * Reduced motion / calm mode — Phase 69
 * Calm mode caps motion strength to zero (the field holds its mid-state,
 * perfectly still). Reduced-motion does the same and halts every
 * Phase 69 layer explicitly, on top of the global catch-all below.
 * ----------------------------------------------------------------- */
:root[data-calm-mode="true"],
.calm-mode {
  --temporal-gain: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root { --temporal-gain: 0; }
  .temporal-field-migration,
  .temporal-luminance,
  .temporal-dust,
  .temporal-grain,
  .continuity-orbit-trace,
  .temporal-resonant::after,
  .temporal-shimmer::before,
  .orbit-node,
  .continuity-orbit-dot {
    animation: none !important;
  }
  .temporal-interactive,
  .temporal-interactive:hover,
  .temporal-interactive:active {
    transform: none !important;
    transition: none !important;
  }
}

/* =================================================================
 * Phase 69 — Cognitive hierarchy + information density refinement.
 *
 * Hierarchy refinement only — no layout/typography redesign, no
 * removal of atmosphere, no saturation change. Reduces visual
 * competition between cognition surfaces and the environment so the
 * eye finds primary observations first.
 * ================================================================= */

/* Dense reading surfaces quiet the ambient continuity behind them so
 * the environmental field supports hierarchy rather than competing
 * with it. Anchors the eye on observation, not glow. */
.cognition-dense {
  --ambient-continuity: 0.18;
}
.cognition-dense.chat-column-context {
  background:
    radial-gradient(130% 70% at 100% 0%,
      rgba(63, 224, 255, calc(var(--ambient-continuity, 0.18) * 0.035)),
      transparent 60%);
}

/* Glance-state weighting — primary cognition reads heavier; secondary
 * and tertiary quiet down. Weight + contrast only; no new colour. */
.anchor-line {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.ambient-line {
  color: var(--text-secondary);
  font-weight: 500;
}
.tertiary-quiet { color: var(--text-tertiary); }

/* Continuity emphasis model: strategic + longitudinal patterns feel
 * anchored; ambient cognition feels lighter; unresolved threads carry
 * the slightest tension via the existing amber pulse (kept). */
.identity-item[data-kind="pattern"]   .identity-summary { color: var(--text-primary); font-weight: 600; }
.identity-item[data-kind="tension"]   .identity-summary { color: var(--text-primary); }
.identity-item[data-kind="evolution"] .identity-summary { color: var(--text-secondary); }
.identity-when { letter-spacing: 0.02em; }

/* Observatory rhythm — primary readout dense, secondary quieter,
 * sparse reflections breathe slightly. */
.observatory-synthesis { gap: 6px; }
.observatory-line:first-child { color: var(--text-primary); font-weight: 600; }
.observatory-line + .observatory-line { color: var(--text-secondary); }
.observatory-card-items { gap: 5px; }
.observatory-chip { font-size: 11px; }

/* Capture surface — quieter chrome around the candidates. */
.capture-section .capture-summary { font-weight: 500; }
.capture-section .capture-reason { color: var(--text-tertiary); }

/* Spatial rhythm — restrained section breathing without expanding the
 * page. Increases focal rhythm by a few px, not by layout change. */
.context-eyebrow { color: var(--text-eyebrow); }
.identity-divider { margin: 26px 0 14px 0; }

/* =================================================================
 * Phase 68 — native conversation ingestion surface.
 * Calm, infrastructural; preview + commit + rollback in one column.
 * No new components beyond what the page already shares.
 * ================================================================= */
.ingest-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface-card);
  padding: 18px;
  margin: 14px 0;
}
.ingest-method-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px 0;
}
.ingest-method-btn {
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--motion-smooth), border-color var(--motion-smooth), background var(--motion-smooth);
}
.ingest-method-btn:hover { color: var(--text-primary); border-color: var(--border-bright); }
.ingest-method-btn.is-active {
  color: var(--neon-cyan-bright);
  border-color: rgba(63, 224, 255, 0.28);
  background: rgba(63, 224, 255, 0.04);
}
.ingest-field textarea,
.ingest-field input[type="url"],
.ingest-field input[type="file"] {
  width: 100%;
  background: rgba(0, 0, 0, 0.32);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 12px 14px;
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
}
.ingest-field textarea { min-height: 140px; }
.ingest-field input[type="url"]:focus,
.ingest-field textarea:focus {
  outline: none;
  border-color: rgba(63, 224, 255, 0.28);
}
.ingest-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-top: 12px;
}
.ingest-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.ingest-meta select {
  background: rgba(0, 0, 0, 0.32);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit; font-size: 13px;
  min-width: 180px;
}
.ingest-primary,
.ingest-ghost {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--motion-smooth), border-color var(--motion-smooth), color var(--motion-smooth);
}
.ingest-primary {
  border: 1px solid rgba(53, 214, 160, 0.20);
  color: var(--neon-green-bright);
  background: linear-gradient(180deg, rgba(53, 214, 160, 0.10), rgba(53, 214, 160, 0.03)), #0B130F;
}
.ingest-primary:hover { background: linear-gradient(180deg, rgba(53, 214, 160, 0.16), rgba(53, 214, 160, 0.05)), #0D170F; }
.ingest-primary:disabled { opacity: 0.45; cursor: default; }
.ingest-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.ingest-ghost:hover { color: var(--text-primary); border-color: var(--border-bright); }

.ingest-kv {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 6px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}
.ingest-kv .k { color: var(--text-tertiary); }
.ingest-kv .v { color: var(--text-primary); }
.ingest-row-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin: 14px 0 6px 0;
}
.ingest-chip {
  display: inline-block;
  font-size: 11.5px;
  color: var(--text-secondary);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 3px 10px;
  margin-right: 6px;
}
.ingest-list,
.ingest-warn {
  margin: 6px 0 0 16px;
  padding: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.ingest-warn li { color: var(--neon-amber); }

/* Phase 75 — IMPORT-STABILITY-001 diagnostics card. Scoped strictly
 * to the Import Memory page. Never modifies sidebar or brand rules. */
.ingest-diagnostics-card { margin-top: 12px; }
.ingest-diag-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 8px 0 0 0;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
}
.ingest-diag-grid dt {
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.ingest-diag-grid dd {
  margin: 0;
  color: var(--text-secondary);
  word-break: break-word;
}
.ingest-error-panel {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 90, 90, 0.55);
  border-left-width: 3px;
  border-radius: 4px;
  background: rgba(255, 90, 90, 0.06);
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
}
.ingest-error-title {
  font-weight: 600;
  color: #ff8a8a;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.ingest-error-body {
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Command Center — persisted continuity memory panels */
.badge.muted { color: var(--text-tertiary); border-color: rgba(255,255,255,0.14); }
.cc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.cc-row {
  /* Luminous cyan hairline (was hard white 1px) — DA §9 CC panels. */
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.015);
}
.cc-row .cc-title { color: var(--text-primary); font-size: 13.5px; line-height: 1.4; }
.cc-row .cc-meta { margin-top: 4px; display: flex; gap: 6px; align-items: center; }
.cc-row .cc-body { margin-top: 6px; }


/* ===========================================================================
   NARROW-WIDTH WITHDRAWALS — placement and !important are both load-bearing.

   Two rules that belong with the four-tab shell block above cannot live there,
   and both failures are silent:

   1. `.localhost-badge` gets `display: inline-flex` from its base rule ~1700
      lines LATER in this file. A media query adds no specificity, so the same
      selector further down simply wins and the badge kept sitting on top of
      the tab bar. (The existing max-height withdrawal works only because it,
      too, is placed after the base rule.)

   2. `.sidebar-account` is built by sidebar.js with `foot.style.cssText = …`,
      and an inline style beats every stylesheet rule that is not `!important`.
      So "Local · sovereign" rendered straight through the bar.

   Both are reassurances rather than controls, and at phone width the bar is
   the only navigation there is — so they yield to it.
   =========================================================================== */
@media (max-width: 900px) {
  .localhost-badge { display: none; }
  .sidebar .sidebar-account { display: none !important; }
}