/* ===========================================================================
   Atlas Design System (WO#0039) — the product's permanent visual language.
   Token changes here propagate everywhere; components never need rewriting.
   Sections: 1) Tokens  2) Base  3) Typography  4) Components  5) Motion  6) a11y
   =========================================================================== */

/* --- 1. TOKENS (V2, WO#0319) --------------------------------------------- */
/* THREE THEMES, ONE STRUCTURE (the ratified V1 design). Every theme fills the
   SAME token slots — no page ever names a color. Three-color discipline:
   neutral canvas/ink, ONE accent (--primary: "go here / this matters"),
   red (--error) reserved for Needs Attention. Themes:
     slate — DEEP SPACE, the Atlas identity (DEFAULT) [data-theme="slate"]
     paper — AURORA, the warm daylight reading         [data-theme="paper"]
     mist  — cool light gray-blue                      [data-theme="mist"]
   With no saved choice, Deep Space is the canvas; a device asking for light
   gets Aurora. atlas-theme.js sets data-theme before first paint — no flash. */
:root {
  /* DEEP SPACE — the Atlas identity canvas (WO#0328). Dark is the default
     because Atlas is a command center: the instruments glow, the room does not. */
  --bg:#0B1020; --surface:#121A2B; --surface-sunk:#0E1526; --surface-raised:#19243A;
  --ink:#F4F7FB; --ink-soft:#9AA8BD; --ink-faint:#6E7C93;
  --line:#1E293D; --line-strong:#2C3A55;
  --primary:#67E8F9; --primary-ink:#04121A; --primary-soft:#0F2B36;
  --secondary:#9AA8BD;
  --intel:#A78BFA; --intel-soft:#1C1B33;
  --success:#4ADE80; --success-soft:#0E2A1C;
  --warning:#FBBF24; --warning-soft:#2C2110;
  --error:#FB7185;   --error-soft:#2E1420;
  --confidence:#67E8F9; --privacy:#5EEAD4; --disabled:#48566E; --focus:#67E8F9;

  /* Home-screen aliases (back-compat for existing markup). */
  --card:var(--surface); --soft:var(--ink-soft); --faint:var(--ink-faint);
  --accent:var(--primary); --accent-soft:var(--primary-soft);
  --space: clamp(20px,6vw,40px);

  /* Typography */
  --font-sans: ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-voice: ui-serif,Georgia,"Times New Roman",serif;  /* Atlas's voice / explainability */
  --font-mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* WO#0319 type scale — readable at the gym without glasses; titles are the
     doors (semibold + accent draws the tap), metadata never shouts. */
  --text-display: clamp(30px,8vw,42px);  --leading-display:1.18;
  --text-heading: 22px;                  --leading-heading:1.3;
  --text-title: 19px;                    --leading-title:1.35;
  --text-body: 18px;                     --leading-body:1.65;
  --text-caption: 13px;                  --leading-caption:1.5;
  --text-explain: 15px;                  --leading-explain:1.6;

  /* Spacing scale — the interface breathes. */
  --space-xs:8px; --space-s:12px; --space-m:20px;
  --space-l: clamp(28px,7vw,40px); --space-xl: clamp(44px,11vw,64px);

  /* Radius */
  --radius-sm:8px; --radius:12px; --radius-card:18px; --radius-pill:999px;

  /* Shadows — calm: at most a single soft lift. On Deep Space, depth comes
     from surface elevation and hairlines, not from drop shadows. */
  --shadow-soft: none;
  --shadow-card: 0 2px 18px rgba(0,0,0,0.45);

  /* The tab bar's height — the bottom edge every fixed bar must clear. */
  --tabbar-h:76px;

  /* Motion — nothing rushed. */
  --dur-fast:120ms; --dur:220ms; --dur-slow:420ms;
  --ease: cubic-bezier(0.22,0.61,0.36,1);
}
/* System-LIGHT override: Deep Space is the default identity; a device that
   asks for light with NO saved choice gets Aurora instead. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* AURORA LIGHT — the same language read in daylight (WO#0328).
       Warm paper, not an inverted night palette: the neutrals carry warmth and
       every accent is darkened to hold contrast on light. */
    --bg:#F5F2EC; --surface:#FFFFFF; --surface-sunk:#ECE7DE; --surface-raised:#FFFFFF;
    --ink:#141A24; --ink-soft:#5A6472; --ink-faint:#8A93A1;
    --line:#E2DCD2; --line-strong:#CDC5B8;
    --primary:#0E7490; --primary-ink:#FFFFFF; --primary-soft:#E0F2F6;
    --secondary:#5A6472;
    --intel:#6D28D9; --intel-soft:#EDE7FB;
    --success:#15803D; --success-soft:#E4F2E8;
    --warning:#B45309; --warning-soft:#FBEEDC;
    --error:#BE123C;   --error-soft:#FBE7EC;
    --confidence:#0E7490; --privacy:#0F766E; --disabled:#B4AC9F; --focus:#0E7490;
    --shadow-soft:0 1px 2px rgba(20,26,36,0.05); --shadow-card:0 2px 12px rgba(20,26,36,0.08);
  }
}

/* THEME: paper — AURORA LIGHT (explicit choice). */
[data-theme="paper"] {
  /* AURORA LIGHT — the same language, warm and calm (WO#0328). */
  --bg:#F5F2EC; --surface:#FFFFFF; --surface-sunk:#ECE7DE; --surface-raised:#FFFFFF;
  --ink:#141A24; --ink-soft:#5A6472; --ink-faint:#8A93A1;
  --line:#E2DCD2; --line-strong:#CDC5B8;
  --primary:#0E7490; --primary-ink:#FFFFFF; --primary-soft:#E0F2F6;
  --secondary:#5A6472;
  --intel:#6D28D9; --intel-soft:#EDE7FB;
  --success:#15803D; --success-soft:#E4F2E8;
  --warning:#B45309; --warning-soft:#FBEEDC;
  --error:#BE123C;   --error-soft:#FBE7EC;
  --confidence:#0E7490; --privacy:#0F766E; --disabled:#B4AC9F; --focus:#0E7490;
  --shadow-soft:0 1px 2px rgba(20,26,36,0.05); --shadow-card:0 2px 12px rgba(20,26,36,0.08);
}

/* THEME: mist — cool light gray-blue. */
[data-theme="mist"] {
  --surface-raised:#ffffff; --intel:#5B21B6; --intel-soft:#EAE4FA;
  --bg:#edf0f4; --surface:#ffffff; --surface-sunk:#e2e7ee;
  --ink:#232a35; --ink-soft:#5b6678; --ink-faint:#8a94a6;
  --line:#d6dce5; --line-strong:#bcc5d3;
  --primary:#3d6ea6; --primary-ink:#ffffff; --primary-soft:#e3ebf5; --secondary:#5b6678;
  --success:#3f7a52; --success-soft:#e5f0e8;
  --warning:#8f6b20; --warning-soft:#f5eedd;
  --error:#a8504a;   --error-soft:#f6e9e7;
  --confidence:#3d6ea6; --privacy:#2f6f63; --disabled:#aeb6c4; --focus:#5c85b8;
  --shadow-soft:0 1px 2px rgba(35,42,53,0.05); --shadow-card:0 2px 10px rgba(35,42,53,0.07);
}

/* THEME: slate — DEEP SPACE (explicit choice; identical to the default). */
[data-theme="slate"] {
  /* DEEP SPACE — the Atlas night canvas (WO#0328). */
  --bg:#0B1020; --surface:#121A2B; --surface-sunk:#0E1526; --surface-raised:#19243A;
  --ink:#F4F7FB; --ink-soft:#9AA8BD; --ink-faint:#6E7C93;
  --line:#1E293D; --line-strong:#2C3A55;
  --primary:#67E8F9; --primary-ink:#04121A; --primary-soft:#0F2B36;
  --secondary:#9AA8BD;
  --intel:#A78BFA; --intel-soft:#1C1B33;
  --success:#4ADE80; --success-soft:#0E2A1C;
  --warning:#FBBF24; --warning-soft:#2C2110;
  --error:#FB7185;   --error-soft:#2E1420;
  --confidence:#67E8F9; --privacy:#5EEAD4; --disabled:#48566E; --focus:#67E8F9;
  --shadow-soft:none; --shadow-card:0 2px 18px rgba(0,0,0,0.45);
}

/* --- 2. BASE ------------------------------------------------------------- */
.atlas, body.atlas {
  margin:0; background:var(--bg); color:var(--ink);
  font:400 var(--text-body)/var(--leading-body) var(--font-sans);
  -webkit-text-size-adjust:100%;
}
.atlas * { box-sizing:border-box; }
.atlas-wrap { max-width:620px; margin:0 auto; padding:var(--space-xl) var(--space-l) 96px; }
.stack > * + * { margin-top:var(--space-m); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
           clip:rect(0,0,0,0); border:0; }

/* --- 3. TYPOGRAPHY ------------------------------------------------------- */
.t-display { font-size:var(--text-display); line-height:var(--leading-display); font-weight:400;
             letter-spacing:-0.01em; margin:0; }
.t-heading { font-size:var(--text-heading); line-height:var(--leading-heading); font-weight:600;
             letter-spacing:-0.01em; margin:0; }
.t-body { font-size:var(--text-body); line-height:var(--leading-body); margin:0; }
.t-caption { font-size:var(--text-caption); line-height:var(--leading-caption); color:var(--ink-faint);
             letter-spacing:0.08em; text-transform:uppercase; margin:0; }
.t-explain { font-size:var(--text-explain); line-height:var(--leading-explain); color:var(--ink-soft);
             font-family:var(--font-voice); margin:0; }

/* --- 4. COMPONENTS ------------------------------------------------------- */
/* Card */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card);
        padding:clamp(22px,6vw,30px); box-shadow:var(--shadow-soft); }

/* Buttons */
.btn { font:inherit; cursor:pointer; min-height:48px; padding:12px 18px; border-radius:var(--radius);
       border:1px solid var(--line-strong); background:transparent; color:var(--ink);
       transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
       display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn:hover { border-color:var(--primary); }
.btn:active { transform:scale(0.99); }
.btn-primary { background:var(--primary); border-color:var(--primary); color:var(--primary-ink);
               font-weight:500; }
.btn-quiet { border-color:transparent; color:var(--ink-soft); min-height:auto; padding:8px 0; }
.btn-pill { border-radius:var(--radius-pill); }
.btn[disabled], .btn[aria-disabled="true"] { color:var(--disabled); border-color:var(--line);
                                              cursor:default; }

/* Fields */
.field { width:100%; font:inherit; color:var(--ink); background:var(--surface);
         border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;
         min-height:48px; }
.field:hover { border-color:var(--line-strong); }
textarea.field { min-height:56px; resize:vertical; line-height:var(--leading-body); }

/* Voice button — equal to typing; Atlas never speaks unasked. */
.voice-btn { border-radius:var(--radius-pill); }
.voice-btn .pulse { width:9px; height:9px; border-radius:50%; background:var(--primary); }

/* Conversation bubbles */
.bubble { border-radius:16px; padding:12px 16px; max-width:88%; line-height:var(--leading-body);
          font-size:var(--text-body); }
.bubble-user { background:var(--primary-soft); color:var(--ink); margin-left:auto; }
.bubble-atlas { background:var(--surface); border:1px solid var(--line); color:var(--ink);
  /* WO#0345: research answers carry real line breaks (sources, limitations) —
     preserve them so citations scan as a list, not a wall of text */
  white-space:pre-line;
                font-family:var(--font-voice); }

/* Timeline item */
.timeline-item { display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.timeline-item:first-child { border-top:0; }
.timeline-dot { width:8px; height:8px; border-radius:50%; background:var(--ink-faint); margin-top:8px;
                flex:none; }

/* Progress card */
.progress-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
                 padding:16px 18px; }
.progress-bar { height:6px; border-radius:var(--radius-pill); background:var(--surface-sunk);
                overflow:hidden; margin-top:10px; }
.progress-bar > span { display:block; height:100%; background:var(--success);
                       transition:width var(--dur-slow) var(--ease); }

/* Expandable explanation panel (use on <details>) */
.explain { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }
.explain > summary { list-style:none; cursor:pointer; color:var(--ink-soft);
                     font-size:var(--text-explain); display:inline-flex; align-items:center; gap:6px;
                     min-height:44px; }
.explain > summary::-webkit-details-marker { display:none; }
.explain .explain-body { font-family:var(--font-voice); color:var(--ink-soft);
                         font-size:var(--text-explain); line-height:var(--leading-explain);
                         padding-top:10px; }

/* Confidence indicator — plain language, never a bare number. */
.confidence { display:inline-flex; align-items:center; gap:9px; color:var(--ink-soft);
              font-size:15px; }
.confidence .dot { width:9px; height:9px; border-radius:50%; background:var(--confidence); flex:none; }
.confidence[data-level="low"] .dot { opacity:0.45; }
.confidence[data-level="medium"] .dot { opacity:0.72; }

/* Privacy indicator — quiet reassurance that data is local. */
.privacy { display:inline-flex; align-items:center; gap:7px; color:var(--privacy);
           font-size:14px; }
.privacy .lock { width:13px; height:13px; flex:none; }

/* Pills / tags */
.pill { display:inline-flex; align-items:center; border-radius:var(--radius-pill);
        padding:3px 11px; font-size:13px; background:var(--surface-sunk); color:var(--ink-soft); }

/* --- 5. MOTION ---------------------------------------------------------- */
.fade-in { animation:atlas-fade var(--dur-slow) var(--ease) both; }
@keyframes atlas-fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.thinking::after { content:"…"; animation:atlas-think 1.4s steps(4,end) infinite; }
@keyframes atlas-think { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }

/* --- 6. ACCESSIBILITY --------------------------------------------------- */
.atlas :focus-visible, .atlas-wrap :focus-visible { outline:3px solid var(--focus); outline-offset:3px;
                                                     border-radius:6px; }
@media (prefers-reduced-motion: reduce) {
  .atlas *, .fade-in, .thinking::after { animation:none !important; transition:none !important; }
}
@media (prefers-contrast: more) {
  :root { --line:#b9b4a8; --ink-soft:#4a473f; --ink-faint:#6b6862; }
}

/* --- 7. PRODUCT SHELL (V1, WO#0319 — supersedes the WO#0238 six-tab bar) --- */
/* Bottom tab bar — FIVE destinations, Atlas raised at the center. The center
   button is the bar's only accent: from anywhere, "just tell Atlas". */
.atlas-tabs {
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; justify-content:center; align-items:flex-end; gap:2px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:6px max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom));
}
.atlas-tab {
  flex:1 1 0; max-width:96px; min-height:48px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--ink-faint); text-decoration:none; border-radius:var(--radius);
  font-size:11px; letter-spacing:0.02em;
}
.atlas-tab.is-current { color:var(--primary); }
.atlas-tab:active { background:var(--surface-sunk); }
.atlas-tab-label { line-height:1.2; }
.atlas-tab--center { position:relative; top:-14px; max-width:76px; min-height:0; gap:4px; }
/* WO#0328 §16 — THE ATLAS ORB. Cyan is Atlas's identity, so the orb is the one
   place it fills a shape. Restrained on purpose: a soft ring, no neon bloom, no
   pulse unless Atlas is actually thinking. A presence, not a beacon. */
.atlas-tab--center .atlas-tab-orb {
  width:52px; height:52px; border-radius:50%;
  background:var(--primary); color:var(--primary-ink);
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--bg);
  box-shadow:0 0 0 1px var(--primary-soft), var(--shadow-card);
  transition:transform var(--dur) var(--ease);
}
.atlas-tab--center:active .atlas-tab-orb { transform:scale(0.96); }
.atlas-tab--center.is-current .atlas-tab-orb {
  box-shadow:0 0 0 3px var(--primary-soft), var(--shadow-card);
}
.atlas-tab--center .atlas-tab-label { color:var(--ink-soft); font-weight:600; }
.atlas-tab--center.is-current .atlas-tab-label { color:var(--primary); }
body.has-atlas-tabs { padding-bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); }

/* WO#0329 P14 — THE BOTTOM EDGE, shared.
   Three screens pin their own bar to bottom:0 (the Today capture, the Train
   say-bar, the Study voice line) while the tab bar also sits at bottom:0 with
   a higher z-index — so on a phone those bars were UNDER the navigation and
   effectively unreachable. Anything that owns the bottom edge says so with
   this class and the shell decides where the edge actually is. */
.atlas-bottom-bar { position:fixed; left:0; right:0; bottom:0; z-index:50; }
body.has-atlas-tabs .atlas-bottom-bar {
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
@media (min-width: 720px) {
  .atlas-tabs { gap:10px; }
  .atlas-tab { flex-direction:row; gap:8px; font-size:14px; min-height:44px; padding:0 14px; }
  .atlas-tab--center { top:0; flex-direction:column; padding:0 6px; }
  .atlas-tab--center .atlas-tab-orb { width:40px; height:40px; border-width:2px; }
}

/* WO#0329 P6 — a page's dynamic heading (an exercise name, a boot state) is
   CONTENT, not the room's name. The shared header names the room; this sits
   under it at title weight and never competes. */
.page-lede { font-size:var(--text-heading); line-height:var(--leading-heading);
             font-weight:600; margin:0 0 var(--space-s); color:var(--ink); }

/* Shared V1 header — [BACK]  TITLE  [ACTION] on every non-home screen.
   One component, injected by atlas-nav.js; pages never build their own. */
.v1-topbar {
  position:sticky; top:0; z-index:55;
  display:grid; grid-template-columns:48px 1fr 48px; align-items:center;
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  min-height:52px; padding:0 max(6px, env(safe-area-inset-left));
}
.v1-topbar .v1-back {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); background:transparent; border:0; border-radius:var(--radius);
  cursor:pointer; text-decoration:none;
}
.v1-topbar .v1-back:active { background:var(--surface-sunk); }
.v1-topbar .v1-title {
  text-align:center; font-size:var(--text-title); font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0;
}
.v1-topbar .v1-action { width:48px; height:48px; display:flex; align-items:center;
  justify-content:center; color:var(--ink-soft); text-decoration:none; border-radius:var(--radius); }
body.has-v1-topbar .shell-head { display:none; } /* legacy per-page headers retire */

/* Card titles are DOORS: semibold, accent, sized to invite the tap. */
.card .door-title { font-size:var(--text-heading); font-weight:600; color:var(--primary);
                    margin:0 0 4px; letter-spacing:-0.01em; }
a.card, .card[role="link"] { display:block; color:inherit; text-decoration:none; cursor:pointer; }
a.card:hover, .card[role="link"]:hover { border-color:var(--primary); }

/* Honest empty / loading / error states (WO#0319 A.13-A.15). */
.empty-line { color:var(--ink-soft); font-family:var(--font-voice); font-style:italic;
              margin:4px 0; }
.error-line { color:var(--ink-soft); font-size:var(--text-explain); margin:4px 0; }
.skel { position:relative; overflow:hidden; background:var(--surface-sunk);
        border-radius:var(--radius-sm); color:transparent !important; min-height:1em; }
.skel::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent);
  animation:skel-sweep 1.2s ease-in-out infinite; }
@keyframes skel-sweep { from { transform:translateX(-100%);} to { transform:translateX(100%);} }
@media (prefers-reduced-motion: reduce) { .skel::after { animation:none; } }

/* Shell header — one per page: the screen's question, answered. */
.shell-head { display:flex; align-items:baseline; justify-content:space-between;
              margin:0 0 var(--space-m); gap:var(--space-s); }
.shell-head h1 { font-size:var(--text-heading); font-weight:400; margin:0; }
.shell-head .when { color:var(--ink-faint); font-size:var(--text-caption); }

/* Card system — Layer 1 is the card; Layer 2 opens; Layer 3 is on request. */
.card { background:var(--surface); border:1px solid var(--line);
        border-radius:var(--radius-card); padding:var(--space-m);
        box-shadow:var(--shadow-soft); }
.card + .card { margin-top:var(--space-s); }
.card.tappable { cursor:pointer; transition:border-color var(--dur-fast); }
.card.tappable:hover, .card.tappable:focus-within { border-color:var(--line-strong); }
.card .kicker { font-size:var(--text-caption); letter-spacing:0.08em; text-transform:uppercase;
                color:var(--ink-faint); margin:0 0 6px; }
.card .lead { font-size:19px; line-height:1.45; margin:0; }
.card .explain { font-family:var(--font-voice); color:var(--ink-soft);
                 font-size:var(--text-explain); line-height:var(--leading-explain);
                 margin:8px 0 0; }
.card .cta { display:inline-block; margin-top:12px; padding:12px 18px;
             background:var(--primary); color:var(--primary-ink); border:0;
             border-radius:var(--radius-pill); font-size:15px; text-decoration:none;
             cursor:pointer; }
.card .cta.quiet { background:var(--surface-sunk); color:var(--ink); }
.card-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-s); }
.badge { display:inline-block; min-width:20px; text-align:center; padding:1px 7px;
         border-radius:var(--radius-pill); background:var(--warning-soft);
         color:var(--warning); font-size:12px; }
.state-pill { display:inline-block; padding:3px 10px; border-radius:var(--radius-pill);
              font-size:13px; background:var(--primary-soft); color:var(--primary); }
.state-pill.warn { background:var(--warning-soft); color:var(--warning); }
.state-pill.err  { background:var(--error-soft); color:var(--error); }

/* Quick Capture — one floating button, everywhere, <10 seconds to record. */
.atlas-fab { position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:96px; z-index:70;
             width:56px; height:56px; border-radius:50%; border:0;
             background:var(--primary); color:var(--primary-ink);
             font-size:26px; line-height:1; box-shadow:var(--shadow-card); cursor:pointer; }
.atlas-sheet { position:fixed; inset:auto 0 0 0; z-index:80; transform:translateY(105%);
               transition:transform var(--dur) ease; background:var(--surface);
               border-top:1px solid var(--line-strong);
               border-radius:var(--radius-card) var(--radius-card) 0 0;
               padding:var(--space-m) var(--space-m) max(20px, env(safe-area-inset-bottom));
               max-height:78vh; overflow:auto; }
.atlas-sheet.open { transform:translateY(0); }
.atlas-scrim { position:fixed; inset:0; z-index:75; background:rgba(0,0,0,0.35);
               opacity:0; pointer-events:none; transition:opacity var(--dur); }
.atlas-scrim.open { opacity:1; pointer-events:auto; }
.sheet-grab { width:36px; height:4px; border-radius:2px; background:var(--line-strong);
              margin:0 auto 14px; }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
/* WO#0356 — a chip is a real control and has to be tappable. At 9px padding
   these measured 27px on a phone, under the 30px floor every other control
   already meets. */
.chip { padding:9px 14px; min-height:32px; border-radius:var(--radius-pill); border:1px solid var(--line);
        background:var(--surface-sunk); color:var(--ink); font-size:14px; cursor:pointer; }
.chip[aria-pressed="true"] { background:var(--primary-soft); border-color:var(--primary);
                             color:var(--primary); }
.capture-input { width:100%; padding:13px 14px; border-radius:var(--radius);
                 border:1px solid var(--line-strong); background:var(--bg); color:var(--ink);
                 font-size:16px; }
.proto-item { display:flex; align-items:center; justify-content:space-between;
              padding:12px 0; border-bottom:1px solid var(--line); gap:10px; }
.proto-item:last-child { border-bottom:0; }
.proto-name { font-size:16px; }
.proto-meta { color:var(--ink-faint); font-size:13px; }
.proto-actions { display:flex; gap:6px; }
.proto-btn { padding:8px 12px; border-radius:var(--radius-pill); border:1px solid var(--line);
             background:var(--surface); color:var(--ink); font-size:13px; cursor:pointer; }
.proto-btn.done { background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }

/* --- 8. THE FOUR PRIMITIVES (WO#0328) ------------------------------------
   Every element of Atlas is one of four things. If a new element is none of
   them, it does not belong in the interface.
     DOOR        navigates        — a place you can go
     SIGNAL      informs          — a number or a state, no action implied
     ACTION      does             — a thing you can do right now
     OBSERVATION Atlas noticed    — a claim, its evidence, and maybe one action
   Color carries meaning here and only here: cyan = Atlas / go, violet =
   intelligence, green = good, amber = attention, rose = critical. Most of the
   interface stays neutral so that when color appears it means something. */

/* -- Numerics: measurements are instruments, not prose. */
.num { font-family:var(--font-mono); font-variant-numeric:tabular-nums;
       font-feature-settings:"tnum" 1; letter-spacing:-0.01em; }
.num-lg { font-size:34px; line-height:1.1; font-weight:600; }
.num-md { font-size:24px; line-height:1.15; font-weight:600; }
.num-unit { font-size:0.55em; font-weight:400; color:var(--ink-soft);
            margin-left:4px; letter-spacing:0; }

/* -- DOOR: a place you can go. Cyan title, hairline, no shout. */
.door { display:flex; align-items:center; justify-content:space-between; gap:12px;
        width:100%; padding:14px 0; border:0; border-bottom:1px solid var(--line);
        background:none; color:var(--ink); font:inherit; text-align:left;
        text-decoration:none; cursor:pointer;
        transition:padding-left var(--dur-fast) var(--ease); }
.door:last-child { border-bottom:0; }
.door:hover, .door:focus-visible { padding-left:4px; }
/* WO#0329 P1 — a list of sixteen cyan labels is cyan meaning nothing. The
   chevron is the "you can go here" affordance; ink carries the name. Cyan is
   reserved for the door that matters most on a screen (.door--primary). */
.door-label { font-size:var(--text-title); font-weight:600; color:var(--ink); }
.door-sub { display:block; font-size:var(--text-caption); color:var(--ink-faint);
            font-weight:400; margin-top:2px; line-height:var(--leading-caption); }
.door-arrow { flex:none; display:inline-flex; color:var(--ink-faint); line-height:1;
              transition:color var(--dur-fast), transform var(--dur-fast) var(--ease); }
.door:hover .door-arrow, .door:focus-visible .door-arrow {
  color:var(--primary); transform:translateX(2px); }
.door--primary .door-label { color:var(--primary); }

/* -- SIGNAL: a fact. Never clickable, never colored unless the state says so. */
.signal { background:var(--surface); border:1px solid var(--line);
          border-radius:var(--radius-card); padding:var(--space-m); }
.signal-label { font-size:var(--text-caption); letter-spacing:0.08em;
                text-transform:uppercase; color:var(--ink-faint); margin:0 0 8px; }
.signal-value { font-family:var(--font-mono); font-variant-numeric:tabular-nums;
                font-size:34px; line-height:1.1; font-weight:600; color:var(--ink);
                margin:0; }
.signal-meta { font-size:var(--text-caption); color:var(--ink-soft); margin:6px 0 0; }
.signal-unknown .signal-value { font-family:var(--font-voice); font-size:var(--text-body);
                                font-weight:400; font-style:italic; color:var(--ink-faint); }
.signal[data-state="good"]      .signal-value { color:var(--success); }
.signal[data-state="attention"] .signal-value { color:var(--warning); }
.signal[data-state="critical"]  .signal-value { color:var(--error); }
.signal-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
              gap:var(--space-s); }

/* -- ACTION: something you can do right now. One primary per view. */
.action { display:inline-flex; align-items:center; justify-content:center; gap:8px;
          min-height:48px; padding:12px 20px; border-radius:var(--radius);
          border:1px solid var(--line-strong); background:var(--surface-raised);
          color:var(--ink); font:600 var(--text-explain)/1.2 var(--font-sans);
          cursor:pointer; text-decoration:none;
          transition:border-color var(--dur-fast), background var(--dur-fast); }
.action:hover { border-color:var(--primary); }
.action:active { transform:scale(0.99); }
.action--primary { background:var(--primary); border-color:var(--primary);
                   color:var(--primary-ink); }
.action--quiet { background:none; border-color:var(--line); color:var(--ink-soft); }
.action--danger { border-color:var(--error); color:var(--error); background:none; }
.action[disabled], .action[aria-disabled="true"] { color:var(--disabled);
          border-color:var(--line); background:none; cursor:default; transform:none; }
.action-row { display:flex; flex-wrap:wrap; gap:var(--space-xs); }

/* -- OBSERVATION: Atlas noticed something. Violet is the intelligence mark and
      it appears ONLY here — the claim, then the evidence, then at most one
      action. An observation without evidence is not shipped. */
.observation { background:var(--surface); border:1px solid var(--line);
               border-left:3px solid var(--intel); border-radius:var(--radius-card);
               padding:var(--space-m); }
.observation-kicker { display:flex; align-items:center; gap:8px;
               font-size:var(--text-caption); letter-spacing:0.08em;
               text-transform:uppercase; color:var(--intel); margin:0 0 10px; }
.observation-kicker::before { content:""; width:7px; height:7px; border-radius:50%;
               background:var(--intel); flex:none; }
.observation-claim { font-size:var(--text-title); line-height:var(--leading-title);
               color:var(--ink); margin:0; }
.observation-evidence { font-family:var(--font-voice); font-size:var(--text-explain);
               line-height:var(--leading-explain); color:var(--ink-soft);
               margin:10px 0 0; }
.observation .action-row { margin-top:14px; }
.observation[data-level="fact"]           { border-left-color:var(--ink-faint); }
.observation[data-level="fact"] .observation-kicker { color:var(--ink-soft); }
.observation[data-level="fact"] .observation-kicker::before { background:var(--ink-faint); }
.observation[data-level="interpretation"] { border-left-style:dashed; }

/* -- The Atlas mark: cyan identity, restrained. A presence, not a beacon. */
.atlas-orb { width:36px; height:36px; border-radius:50%; flex:none;
             background:var(--primary-soft); border:1px solid var(--primary);
             display:inline-flex; align-items:center; justify-content:center; }
.atlas-orb::after { content:""; width:10px; height:10px; border-radius:50%;
             background:var(--primary); opacity:0.9; }
.atlas-orb[data-state="thinking"]::after { animation:atlas-breathe 2.4s var(--ease) infinite; }
@keyframes atlas-breathe { 0%,100% { opacity:0.35; transform:scale(0.8); }
                           50%     { opacity:1;    transform:scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .atlas-orb[data-state="thinking"]::after { animation:none; opacity:0.9; }
}