/*
 * MyGentic — Foundations (P1)
 * Brand baseline: External Brand Book v1.0 (April 2026).
 *
 * Sections
 *   01  Fonts
 *   02  Tokens
 *   03  Reset & base
 *   04  Type scale
 *   05  Layout primitives & section banding
 *   06  Buttons
 *   07  Pills
 *   08  Cards
 *   09  Stats
 *   10  Forms
 *   11  Rules & dividers
 *   12  Orb (Sage)
 *   13  Constellation
 *   14  Sage bar
 *   15  Accessibility & motion
 */

/* ------------------------------------------------------------------ */
/*  01  Fonts                                                         */
/* ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ------------------------------------------------------------------ */
/*  02  Tokens                                                        */
/* ------------------------------------------------------------------ */

:root {
  /* Foundation
     ──────────────────────────────────────────────────────────
     v1.9 (2026-04-28): Paper palette shifted from warm cream
     (#F7F4EE) to cool near-white (#FAFAFB). The brand reads
     cleaner / less editorial-newsprint and lets cards genuinely
     pop as pure #FFF. Warm ink + terra cotta accent retained
     for warmth. See brand-g7m4x2.html for the canonical guide.
     Previous warm values: paper #F7F4EE, paper-2 #F1EDE5,
     card #FDFBF6, rule #D9D2C6, rule-light #E8E3D7. */
  --paper:        #FAFAFB;   /* page bg — barely-tinted off-white */
  --paper-2:      #F3F3F5;   /* paired surface (hover, panels)    */
  --card:         #FFFFFF;   /* cards: pure white, elevated       */
  --rule:         #E2E2E5;   /* cool divider                      */
  --rule-light:   #EFEFF1;   /* lighter cool divider              */

  /* Accent — terra cotta is the only accent */
  --terra:        #B8471F;
  --terra-deep:   #8D2F13;
  --terra-soft:   #E8D9CE;
  --terra-tint:   #F5E9E1;

  /* Ink */
  --ink:          #14110F;
  --ink-soft:     #3A342E;
  --ink-mute:     #7A736C;
  --ink-faint:    #A89F93;

  /* Semantic */
  --success:      #2D6A4F;
  --warning:      #C7860A;
  --danger:       #A0301A;

  /* Sage (orb-only — Sage's presence reads cool and ethereal, distinct
     from terra cotta which is the brand accent everywhere else) */
  --sage:         #6FB3B8;
  --sage-deep:    #3D7F84;
  --sage-soft:    #C8E0E2;
  --sage-tint:    #E8F1F2;

  /* Spacing scale (4px base) */
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      24px;
  --space-6:      32px;
  --space-7:      48px;
  --space-8:      64px;
  --space-9:      96px;
  --space-10:     128px;

  /* Type families */
  --f-display:    'Instrument Serif', Georgia, serif;
  --f-body:       'Geist', system-ui, -apple-system, sans-serif;
  --f-mono:       'Geist Mono', ui-monospace, monospace;

  /* Layout widths */
  --w-reading:    720px;
  --w-product:    1200px;
  --w-bleed:      1440px;

  /* Radii */
  --radius-sm:    4px;
  --radius:       6px;
  --radius-lg:    8px;

  /* Elevation */
  --shadow-card:  0 1px 2px rgba(20, 17, 15, 0.04);
  --shadow-pop:   0 6px 24px rgba(20, 17, 15, 0.08);

  /* Motion */
  --t-fast:       150ms;
  --t-base:       200ms;
  --t-slow:       300ms;

  /* ─────────────────────────────────────────────────────────────────
     Pastel Category System (Brand Amendment, April 2026 — P22)
     Five categories that differentiate the kinds of things
     connected to the user's context layer. Strict rules:
       1. Each pastel = one category (Pulled / MCP / Sage / Agent / Library).
       2. Terra cotta keeps primary brand role (CTAs, accents, focus rings).
       3. Pastels never combine. No gradients between categories.
       4. Pastels always sit on paper bg.
       5. Strokes 1.5px or thinner.
     Each category has 4 stops: base, deep (hover/active), soft
     (stale/inactive), tint (backgrounds/fills).
     ───────────────────────────────────────────────────────────────── */

  /* Pulled sources — soft peach / coral */
  --cat-pulled:        #E8A87C;
  --cat-pulled-deep:   #C9824F;
  --cat-pulled-soft:   #F4D7C2;
  --cat-pulled-tint:   #FAEBE0;

  /* MCP tools — soft sage green */
  --cat-mcp:           #9CB89A;
  --cat-mcp-deep:      #6E8C70;
  --cat-mcp-soft:      #C8D5C7;
  --cat-mcp-tint:      #E2EAE1;

  /* Sage — soft sky blue */
  --cat-sage:          #A4B8D1;
  --cat-sage-deep:     #6E89AB;
  --cat-sage-soft:     #C9D4E2;
  --cat-sage-tint:     #E1E8F0;

  /* Agent Builder — soft amber / gold */
  --cat-agent:         #D4B370;
  --cat-agent-deep:    #A8884A;
  --cat-agent-soft:    #E5D2A6;
  --cat-agent-tint:    #F0E5C8;

  /* Agent Libraries — soft lavender */
  --cat-library:       #B7A2C8;
  --cat-library-deep:  #8E76A4;
  --cat-library-soft:  #D5C5E0;
  --cat-library-tint:  #E5D9EC;
}

/* ------------------------------------------------------------------ */
/*  03  Reset & base                                                  */
/* ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  font: 400 17px/1.65 var(--f-body);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
/* Form controls without a class still pick up brand ink (avoids UA pure-black). */
input, select, textarea { color: var(--ink); }
/* Avoid UA pure-white default on bare <select>; class-styled selects override below. */
select { background-color: var(--card); }
a { color: var(--terra); text-decoration: none; }
a:hover { color: var(--terra-deep); }

::selection { background: var(--terra-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------ */
/*  04  Type scale                                                    */
/* ------------------------------------------------------------------ */

.t-hero {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.t-h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.t-h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.t-h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.t-h4 {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.3;
  color: var(--ink);
}

.t-body-large {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--ink-soft);
}

.t-body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--ink-soft);
}

.t-body-small {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.55;
  color: var(--ink-soft);
}

.t-label-mono {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.t-caption {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(12px, 1vw, 13px);
  line-height: 1.4;
  color: var(--ink-mute);
}

/* Modifiers */
.t-italic       { font-style: italic; font-weight: 400; }
.t-terra        { color: var(--terra); }
.t-terra-deep   { color: var(--terra-deep); }
.t-ink          { color: var(--ink); }
.t-ink-soft     { color: var(--ink-soft); }
.t-ink-mute     { color: var(--ink-mute); }
.t-center       { text-align: center; }

/* Inline accent within display type, e.g. <span class="t-accent">Gen</span> */
.t-accent       { color: var(--terra); }

/* ------------------------------------------------------------------ */
/*  05  Layout primitives & section banding                           */
/* ------------------------------------------------------------------ */

.wrap-reading {
  max-width: var(--w-reading);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.wrap-product {
  max-width: var(--w-product);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.wrap-bleed {
  max-width: var(--w-bleed);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.section {
  background: var(--paper);
  padding: var(--space-9) 0;
}

.section-alt {
  background: var(--paper-2);
  padding: var(--space-9) 0;
}

.section-feature {
  background: var(--terra-tint);
  border-top: 1px solid var(--terra-soft);
  border-bottom: 1px solid var(--terra-soft);
  padding: var(--space-9) 0;
}

@media (max-width: 720px) {
  .wrap-reading, .wrap-product, .wrap-bleed { padding: 0 var(--space-5); }
  .section, .section-alt, .section-feature { padding: var(--space-8) 0; }
}

/* ------------------------------------------------------------------ */
/*  06  Buttons                                                       */
/* ------------------------------------------------------------------ */

.btn-primary,
.btn-secondary,
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: 500 15px/1 var(--f-body);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
  white-space: nowrap;
}

.btn-primary {
  background: var(--terra);
  color: var(--paper);
  border: none;
  padding: 12px 24px;
}
.btn-primary:hover     { background: var(--terra-deep); color: var(--paper); }
.btn-primary:disabled  { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 11px 23px; /* compensate 1px for border */
}
.btn-secondary:hover    { background: var(--ink); color: var(--paper); }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-tertiary {
  background: transparent;
  color: var(--terra);
  border: none;
  border-bottom: 1px solid var(--terra);
  border-radius: 0;
  padding: 4px 0;
  gap: 4px;
}
.btn-tertiary:hover {
  color: var(--terra-deep);
  border-bottom-width: 2px;
  padding-bottom: 3px;
}

/* Sizes */
.btn-sm { font-size: 14px; padding: 10px 16px; }
.btn-secondary.btn-sm { padding: 9px 15px; }
.btn-tertiary.btn-sm  { padding: 4px 0; font-size: 14px; }

.btn-lg { font-size: 16px; padding: 16px 32px; }
.btn-secondary.btn-lg { padding: 15px 31px; }
.btn-tertiary.btn-lg  { padding: 4px 0; font-size: 16px; }

/* ------------------------------------------------------------------ */
/*  07  Pills                                                         */
/* ------------------------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  white-space: nowrap;
}

.pill-terra   { background: var(--terra-tint); color: var(--terra-deep); border-color: var(--terra-soft); }
.pill-success { background: #E8F0EB;           color: var(--success);    border-color: rgba(45, 106, 79, 0.25); }
.pill-warn    { background: #FBF1DC;           color: var(--warning);    border-color: rgba(199, 134, 10, 0.25); }
.pill-danger  { background: #F8E2DC;           color: var(--danger);     border-color: rgba(160, 48, 26, 0.25); }

/* ------------------------------------------------------------------ */
/*  08  Cards                                                         */
/* ------------------------------------------------------------------ */

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.card-featured {
  background: var(--terra-tint);
  border: 1px solid var(--terra-soft);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.card-flush {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------------ */
/*  09  Stats                                                         */
/* ------------------------------------------------------------------ */

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

.stat-num {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.stat-num.t-terra { color: var(--terra); }

.stat-label {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ------------------------------------------------------------------ */
/*  10  Forms                                                         */
/* ------------------------------------------------------------------ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.form-input,
.form-textarea,
.form-select {
  font: 400 16px/1.4 var(--f-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color var(--t-fast);
  width: 100%;
}

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

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border: 2px solid var(--terra);
  padding: 11px 13px;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--ink-faint); }

.form-helper {
  font: 400 13px/1.4 var(--f-body);
  color: var(--ink-mute);
  margin-top: 6px;
}

.form-error {
  font: 400 13px/1.4 var(--f-body);
  color: var(--danger);
  margin-top: 6px;
}

/* ------------------------------------------------------------------ */
/*  11  Rules & dividers                                              */
/* ------------------------------------------------------------------ */

.accent-rule {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--terra);
  border: none;
  margin: var(--space-5) 0;
}

.hr-faint {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--rule);
  border: none;
  margin: 0;
}

/* ------------------------------------------------------------------ */
/*  12  Orb (Sage)                                                    */
/*                                                                    */
/*  Sage as a presence, not an object. Layered cloud-like gradients   */
/*  with internal drift, soft fades at every edge, and a sparse field */
/*  of warm particles that fade in and out around the body. No hard   */
/*  borders anywhere.                                                 */
/*                                                                    */
/*  Layers (back to front):                                           */
/*    .orb-halo      outer aura, ~180% size, slow shifting glow       */
/*    .orb-core      main warm body, no border, cloudy gradient       */
/*    .orb-accent    inner bright kernel that wanders inside the core */
/*    .orb-particles 6 tiny dots that drift in and out                */
/* ------------------------------------------------------------------ */

.orb {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 140px;
  height: 140px;
  flex: none;
}

.orb-sm   { width: 60px;  height: 60px; }
.orb-lg   { width: 220px; height: 220px; }
.orb-hero { width: 320px; height: 320px; }

/* Orbs that open the Sage modal get a pointer cursor and a subtle hover
   tell. Children carry pointer-events: none so the click always lands on
   the orb wrapper itself (where the data-action attribute lives). */
.orb[data-action="open-sage"] {
  cursor: pointer;
  transition: transform var(--t-fast);
}
.orb[data-action="open-sage"]:hover { transform: scale(1.04); }
.orb[data-action="open-sage"]:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 6px;
  border-radius: 50%;
}

.orb-halo,
.orb-core,
.orb-accent {
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ── Outer aura ── large, very diffuse, slowly drifts off-center */
.orb-halo {
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 28% 35%, rgba(200, 224, 226, 0.42) 0%, transparent 38%),
    radial-gradient(circle at 72% 65%, rgba(111, 179, 184, 0.32) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(232, 241, 242, 0.45) 0%, rgba(200, 224, 226, 0.18) 32%, transparent 60%);
  filter: blur(4px);
  animation: orb-aura 9s ease-in-out infinite;
}

/* ── Main body ── translucent vapor, no hard edges anywhere */
.orb-core {
  width: 68%;
  height: 68%;
  transform: translate(-50%, -50%);
  background:
    /* Diffuse highlights at offset positions — no single bright "ball" spot */
    radial-gradient(circle at 32% 28%, rgba(232, 241, 242, 0.32) 0%, transparent 35%),
    radial-gradient(circle at 62% 38%, rgba(232, 241, 242, 0.22) 0%, transparent 30%),
    radial-gradient(circle at 70% 75%, rgba(61, 127, 132, 0.30) 0%, rgba(61, 127, 132, 0.08) 42%, transparent 75%),
    radial-gradient(circle at 25% 80%, rgba(111, 179, 184, 0.28) 0%, transparent 60%),
    radial-gradient(circle, rgba(200, 224, 226, 0.45) 0%, rgba(111, 179, 184, 0.38) 50%, rgba(61, 127, 132, 0.16) 80%, transparent 100%);
  filter: blur(3px);
  animation: orb-cloud 7s ease-in-out infinite;
}

/* ── Inner kernel ── visible wandering glow inside the body */
.orb-accent {
  width: 38%;
  height: 38%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(232, 241, 242, 0.78) 0%, rgba(200, 224, 226, 0.40) 38%, transparent 75%);
  filter: blur(4px);
  animation: orb-kernel 5s ease-in-out infinite;
}

/* ── Particle field ── 8 dots, larger and more visible */
.orb-particles {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  border-radius: 50%;
}
.orb-particles span {
  position: absolute;
  border-radius: 50%;
  background: var(--sage);
  filter: blur(0.6px);
  opacity: 0;
  box-shadow: 0 0 6px rgba(111, 179, 184, 0.5);
  will-change: transform, opacity;
}
.orb-particles span:nth-child(1) {
  width: 4px; height: 4px; top: 18%; left: 14%;
  animation: orb-p1 6.5s ease-in-out infinite;
}
.orb-particles span:nth-child(2) {
  width: 3px; height: 3px; top: 12%; right: 18%;
  background: var(--sage-deep);
  animation: orb-p2 5.8s ease-in-out infinite 0.8s;
}
.orb-particles span:nth-child(3) {
  width: 5px; height: 5px; bottom: 18%; left: 16%;
  animation: orb-p3 7.2s ease-in-out infinite 1.4s;
}
.orb-particles span:nth-child(4) {
  width: 3.5px; height: 3.5px; bottom: 22%; right: 14%;
  background: var(--sage-soft);
  box-shadow: 0 0 8px rgba(111, 179, 184, 0.7);
  animation: orb-p4 5.5s ease-in-out infinite 0.3s;
}
.orb-particles span:nth-child(5) {
  width: 3px; height: 3px; top: 50%; left: 4%;
  animation: orb-p5 6.8s ease-in-out infinite 2.1s;
}
.orb-particles span:nth-child(6) {
  width: 4px; height: 4px; top: 46%; right: 6%;
  background: var(--sage-deep);
  animation: orb-p6 6.2s ease-in-out infinite 1.1s;
}
.orb-particles span:nth-child(7) {
  width: 2.5px; height: 2.5px; top: 8%; left: 48%;
  animation: orb-p7 5.6s ease-in-out infinite 1.7s;
}
.orb-particles span:nth-child(8) {
  width: 3.5px; height: 3.5px; bottom: 6%; left: 52%;
  background: var(--sage-soft);
  box-shadow: 0 0 8px rgba(111, 179, 184, 0.7);
  animation: orb-p8 6.4s ease-in-out infinite 0.5s;
}

/* ── Idle drift keyframes ── */
@keyframes orb-aura {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.92; }
  33%      { transform: translate(-48%, -52%) scale(1.05); opacity: 1; }
  66%      { transform: translate(-52%, -48%) scale(0.97); opacity: 0.85; }
}
@keyframes orb-cloud {
  0%, 100% { transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
  50%      { transform: translate(-49%, -51%) scale(1.025) rotate(2deg); }
}
@keyframes orb-kernel {
  0%, 100% { transform: translate(-50%, -50%); opacity: 0.55; }
  25%      { transform: translate(-42%, -55%); opacity: 0.85; }
  50%      { transform: translate(-55%, -45%); opacity: 0.70; }
  75%      { transform: translate(-45%, -42%); opacity: 0.90; }
}

/* ── Particle keyframes — each has unique drift vector ── */
@keyframes orb-p1 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  25%      { opacity: 0.65; }
  50%      { transform: translate(10px, -8px); opacity: 0.85; }
  75%      { opacity: 0.45; }
}
@keyframes orb-p2 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  30%      { opacity: 0.55; }
  50%      { transform: translate(-8px, 6px); opacity: 0.80; }
  70%      { opacity: 0.40; }
}
@keyframes orb-p3 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  25%      { opacity: 0.50; }
  50%      { transform: translate(7px, 9px); opacity: 0.75; }
  75%      { opacity: 0.45; }
}
@keyframes orb-p4 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  35%      { opacity: 0.65; }
  50%      { transform: translate(-9px, -7px); opacity: 0.95; }
  65%      { opacity: 0.50; }
}
@keyframes orb-p5 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  20%      { opacity: 0.45; }
  50%      { transform: translate(11px, 4px); opacity: 0.70; }
  80%      { opacity: 0.30; }
}
@keyframes orb-p6 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  30%      { opacity: 0.55; }
  50%      { transform: translate(-7px, -10px); opacity: 0.80; }
  70%      { opacity: 0.45; }
}
@keyframes orb-p7 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  25%      { opacity: 0.55; }
  50%      { transform: translate(5px, 12px); opacity: 0.85; }
  75%      { opacity: 0.40; }
}
@keyframes orb-p8 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  35%      { opacity: 0.60; }
  50%      { transform: translate(-6px, -11px); opacity: 0.95; }
  65%      { opacity: 0.45; }
}

/* ── Listen state — shorter cycles, more energetic particles ── */
.orb[data-state="listen"] .orb-halo   { animation-duration: 2.4s; }
.orb[data-state="listen"] .orb-core   { animation-duration: 1.6s; }
.orb[data-state="listen"] .orb-accent { animation-duration: 1.6s; }
.orb[data-state="listen"] .orb-particles span { animation-duration: 2.6s; }

/* ── Speak state — outward ripple, more saturated body ── */
.orb[data-state="speak"] .orb-core {
  background:
    radial-gradient(circle at 38% 32%, rgba(232, 241, 242, 0.65) 0%, rgba(200, 224, 226, 0.45) 22%, transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(61, 127, 132, 0.55) 0%, rgba(61, 127, 132, 0.22) 42%, transparent 78%),
    radial-gradient(circle at 25% 80%, rgba(111, 179, 184, 0.45) 0%, transparent 62%),
    radial-gradient(circle, rgba(200, 224, 226, 0.65) 0%, rgba(111, 179, 184, 0.62) 45%, rgba(61, 127, 132, 0.32) 78%, transparent 100%);
}
.orb[data-state="speak"]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220%;
  height: 220%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(200, 224, 226, 0.30) 0%,
    rgba(111, 179, 184, 0.10) 50%,
    transparent 72%
  );
  filter: blur(4px);
  animation: orb-ripple 1.8s ease-out infinite;
}
@keyframes orb-ripple {
  0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.65; }
  100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
}

/* ── Flare state — brief 800ms intense pulse ── */
.orb[data-state="flare"] .orb-core   { animation: orb-flare-core   800ms ease-out forwards; }
.orb[data-state="flare"] .orb-halo   { animation: orb-flare-halo   800ms ease-out forwards; }
.orb[data-state="flare"] .orb-particles span { animation: orb-flare-particles 800ms ease-out forwards; }

@keyframes orb-flare-core {
  0%   { transform: translate(-50%, -50%) scale(1); }
  35%  {
    transform: translate(-50%, -50%) scale(1.18);
    background: radial-gradient(circle, rgba(232, 241, 242, 0.95) 0%, rgba(111, 179, 184, 0.92) 55%, rgba(61, 127, 132, 0.85) 100%);
    box-shadow: 0 0 40px rgba(61, 127, 132, 0.55);
    filter: blur(1px);
  }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes orb-flare-halo {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.92; }
  35%  { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.92; }
}
@keyframes orb-flare-particles {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  35%  { opacity: 1; transform: translate(0, 0) scale(1.6); }
  100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

/* ------------------------------------------------------------------ */
/*  13  Constellation                                                 */
/* ------------------------------------------------------------------ */

.constellation {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
}

.constellation text {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  fill: var(--ink-soft);
  text-transform: uppercase;
}

/* Digital twin label — sits inside the central sphere. */
.constellation .twin-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  fill: var(--terra-deep);
  font-weight: 500;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Internal twin nodes — every third one twinkles. */
.constellation .twin-node.twinkle {
  animation: twin-twinkle 4.5s ease-in-out infinite;
}
@keyframes twin-twinkle {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .constellation .twin-node.twinkle { animation: none !important; }
}

/* ------------------------------------------------------------------ */
/*  14  Sage bar                                                      */
/* ------------------------------------------------------------------ */

.sage-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.sage-bar .orb-sm {
  width: 32px;
  height: 32px;
}

.sage-bar-message {
  flex: 1;
  font: 400 17px/1.5 var(--f-body);
  color: var(--ink-soft);
  min-width: 0;
}

.sage-bar-input {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 8px 12px 8px 14px;
  font: 400 14px/1 var(--f-body);
  color: var(--ink-mute);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  flex: none;
}

.sage-bar-input:hover {
  border-color: var(--terra);
  background: var(--card);
  color: var(--ink-soft);
}

.sage-bar-input kbd {
  font: 500 12px/1 var(--f-mono);
  letter-spacing: 0.04em;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  color: var(--ink-soft);
}

/* J5: target highlight — terra cotta ring + soft pulse on the
   element Sage just routed the user to. Applied by app-shell.js
   when `?from=sage&move=…` is in the URL. Self-fades after ~6s
   so it doesn't dominate the page indefinitely. */
.sage-target {
  position: relative;
  z-index: 1;
  animation: sage-target-pulse 2.4s ease-in-out 3;
  border-radius: var(--radius);
}
.sage-target::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--terra);
  border-radius: calc(var(--radius) + 4px);
  pointer-events: none;
  opacity: 0.85;
  animation: sage-target-ring 2.4s ease-in-out 3;
  z-index: -1;
}
@keyframes sage-target-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204, 88, 51, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(204, 88, 51, 0.18); }
}
@keyframes sage-target-ring {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .sage-target,
  .sage-target::after { animation: none; }
}

/* J3: inline CTA appended to the priority-driven bar message.
   Terra cotta, underlined. Sits flush at the right end of the
   message text, wraps onto the next line on narrow viewports. */
.sage-bar-cta-inline {
  display: inline-block;
  margin-left: 8px;
  color: var(--terra);
  font: 500 15px/1.4 var(--f-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast);
}
.sage-bar-cta-inline:hover { color: var(--terra-deep); }
.sage-bar-cta-inline:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 720px) {
  .sage-bar {
    padding: var(--space-3) var(--space-5);
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  /* J3: keep the priority message visible on mobile (it's the whole
     point of the bar now), but hide the desktop ⌘K affordance — taps
     on the orb / message open Sage instead. */
  .sage-bar-message {
    flex: 1 1 calc(100% - 48px);
    font-size: 15px;
    line-height: 1.45;
    min-width: 0;
  }
  .sage-bar-input { display: none; }
  /* CTA collapses to a small chip below the message. */
  .sage-bar-cta-inline {
    display: inline-block;
    margin: 4px 0 0;
    padding: 6px 10px;
    background: var(--terra-tint);
    border: 1px solid var(--terra-soft);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font: 500 13px/1 var(--f-body);
  }
  .sage-bar-cta-inline:hover {
    background: var(--terra-soft);
    color: var(--terra-deep);
  }
}

/* ------------------------------------------------------------------ */
/*  15  Accessibility & motion                                        */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .orb-halo,
  .orb[data-state="speak"]::after,
  .orb[data-state="listen"] .orb-halo,
  .orb[data-state="listen"] .orb-core {
    animation: none !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ */
/*  16  Atlas — token aliases                                         */
/* ------------------------------------------------------------------ */
/* Semantic shortcuts the Atlas surface (atlas.html, atlas.js) reaches
   for. They alias existing brand tokens so any future palette change
   propagates without atlas-side edits. */
:root {
  --atlas-canvas-bg:         var(--paper);
  --atlas-ring-stroke:       var(--ink-faint);
  --atlas-ring-stroke-active:var(--ink-soft);
  --atlas-ring-stroke-full:  var(--ink);
  --atlas-node:              var(--terra);
  --atlas-node-old:          var(--terra-soft);
  --atlas-node-empty:        var(--ink-faint);
  --atlas-link:              var(--terra-soft);
  --atlas-system-label:      var(--ink-soft);
  --atlas-meta-label:        var(--ink-mute);
}