/* PURCEAS UI v4 — Luminous Intelligence OS (docs/BRAND-BOOK-V2.md)
   Shared foundation: tokens, base, primitives, chat grammar, generative UI,
   the Core mark, motion. Public pages add site.css; the workspace adds app.css.
   Rules inherited from WAVE3-RESET: content never depends on JS/animation;
   no decorative element may dominate a viewport; explicit colors everywhere. */

/* ================================================================
   TOKENS — Wave 7 visual foundation (docs/BRAND-BOOK-V2.md)

   The audit measured what happens when a scale is defined and then
   bypassed: 32 rendered type sizes on one page, 14 literal radii beside
   4 tokens, 20 button treatments, 14 transition durations. Every scale
   below is deliberately SHORT so that neighbouring steps are visibly
   different — a scale whose steps are indistinguishable is not a scale.
   ================================================================ */
:root {
  /* ---- ground & ink ---- */
  --bg: #F4F7FE;
  --bg-2: #EBF1FB;
  --surface: #FFFFFF;
  --surface-glass: rgba(255, 255, 255, 0.78);
  --surface-soft: rgba(255, 255, 255, 0.62);
  --ink: #0D1B3E;
  --ink-2: #2E3D61;
  --muted: #5E6E8E;

  /* ---- SURFACE LADDER (audit #04) -------------------------------
     Six levels, each defined once. Every surface in the product picks
     one; nothing invents its own combination of radius + border +
     shadow again. L5 belongs exclusively to things the AI generated. */
  --s0-bg: var(--bg);                                   /* page ground */
  --s1-bg: var(--bg-2);                                 /* ambient / recessed */
  --s2-bg: var(--surface);                              /* resting card */
  --s2-edge: var(--line);
  --s3-bg: var(--surface);                              /* interactive card */
  --s3-edge: var(--line);
  --s3-shadow: var(--shadow-1);
  --s4-edge: rgba(36, 80, 240, 0.42);                   /* selected */
  --s4-glow: 0 0 0 3px rgba(36, 80, 240, 0.10);
  --s5-edge: rgba(123, 91, 255, 0.34);                  /* AI-generated */
  --s5-shadow: 0 2px 8px rgba(13, 27, 62, 0.05), 0 18px 44px -22px rgba(123, 91, 255, 0.42);
  --s6-bg: rgba(255, 122, 89, 0.055);                   /* human */
  --s6-edge: rgba(255, 122, 89, 0.30);

  /* ---- borders: real presence, and more of it at high DPI (audit #46) ---- */
  --line: rgba(13, 27, 62, 0.14);       /* edge — objects */
  --line-soft: rgba(13, 27, 62, 0.08);  /* divider — inside a surface */

  /* ---- hues: unchanged. The palette was never the problem. ---- */
  --aqua: #0FC2B4;        /* AI signal */
  --aqua-text: #087F76;
  --aqua-deep: #0a6f68;
  --cobalt: #2450F0;      /* action */
  --cobalt-deep: #1B3CC0;
  --violet: #7B5BFF;      /* generated output — one job only (audit V2) */
  --violet-text: #5A3FD6;
  --coral: #FF7A59;       /* human */
  --coral-text: #C74A2B;
  --emerald: #0FA968;
  --emerald-text: #0B7A4C;

  --tint-aqua-08: rgba(15, 194, 180, 0.08);
  --tint-aqua-15: rgba(15, 194, 180, 0.15);
  --tint-cobalt-06: rgba(36, 80, 240, 0.06);
  --tint-violet-07: rgba(123, 91, 255, 0.07);
  --tint-coral-07: rgba(255, 122, 89, 0.07);
  --tint-emerald-08: rgba(15, 169, 104, 0.08);

  /* ---- gradients: three, one job each (audit #13) ---- */
  --grad-ai: linear-gradient(135deg, #0FC2B4 0%, #2450F0 100%);      /* the action */
  --grad-deep: linear-gradient(135deg, #2450F0 0%, #7B5BFF 100%);    /* generated */
  --grad-human: linear-gradient(135deg, #FF7A59 0%, #C86BDD 100%);   /* Florentin */
  --grad-edge: linear-gradient(90deg, var(--aqua), var(--cobalt) 55%, var(--violet));

  --shadow-1: 0 1px 2px rgba(13, 27, 62, 0.04), 0 4px 18px -8px rgba(36, 80, 240, 0.12);
  --shadow-2: 0 2px 6px rgba(13, 27, 62, 0.05), 0 14px 40px -14px rgba(36, 80, 240, 0.25);
  --shadow-human: 0 10px 30px -12px rgba(255, 122, 89, 0.45);

  /* ---- RADIUS: three, plus the pill (audit #03) ------------------
     control 8 · surface 14 · shell 24. The old four-step names are
     kept as aliases so nothing breaks while the literals migrate. */
  --r-control: 8px;
  --r-surface: 14px;
  --r-shell: 24px;
  --r-pill: 999px;
  --r-sm: var(--r-control);
  --r-md: var(--r-surface);
  --r-lg: 20px;
  --r-xl: var(--r-shell);

  /* ---- TYPE SCALE: eight steps (audit #01) -----------------------
     Everything between 0.60 and 0.95rem collapsed into three steps
     that are actually distinguishable from each other. */
  --t-label: 0.72rem;   /* eyebrows, meta, status */
  --t-small: 0.82rem;   /* captions, card meta, chips */
  --t-body: 0.94rem;    /* interface body */
  --t-lead: 1.06rem;    /* prose, ledes */
  --t-h4: 1.25rem;
  --t-h3: clamp(1.35rem, 1.6vw, 1.6rem);
  --t-h2: clamp(1.7rem, 3vw, 2.4rem);
  --t-h1: clamp(2rem, 4.2vw, 3.2rem);
  --t-hero: clamp(2.2rem, 5vw, 4rem);   /* the hero, and only the hero */

  /* ---- MEASURE (audit #09, #42) ---- */
  --m-read: 66ch;       /* prose */
  --m-ui: 48ch;         /* card body, chat bubbles */

  /* ---- MOTION: four durations with roles, three curves (audit #08) ---- */
  --d-state: 80ms;      /* hover, focus */
  --d-response: 180ms;  /* press, toggle, menu */
  --d-enter: 320ms;     /* card, panel, section */
  --d-narrative: 600ms; /* architecture assembling, estimate counting */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-ai: cubic-bezier(0.34, 1.56, 0.64, 1);  /* the AI's own output, nothing else */
  --ease-soft: var(--ease-out);

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* Monospace keeps three jobs (audit #06): machine traces, code, and exact
     figures inside generated cards. Everything that used it decoratively —
     eyebrows, statuses, prices in prose, section labels — resolves here. */
  --font-label: "Inter", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

/* A hairline at 8% resolves to almost nothing on a retina panel, which is
   where the surface ladder matters most (audit #46). */
@media (min-resolution: 2dppx) {
  :root { --line: rgba(13, 27, 62, 0.17); --line-soft: rgba(13, 27, 62, 0.10); }
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-ui);
  overflow-x: clip; /* askFlo anti-leak */
}
img, svg { max-width: 100%; display: inline-block; vertical-align: middle; }
/* One headline rhythm for every route (audit #02). Before Wave 7 the same
   document level rendered at 32 / 35.2 / 41.6 / 43.2 / 51.2px depending on
   which wave built the page, and on mobile the templates H1 was larger than
   the homepage H1. Importance is now expressed by composition, not by size. */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
p { margin: 0 0 1em; font-size: var(--t-lead); }
a { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

/* A designed focus state, pointer users never see it (audit #49). */
:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
  border-radius: var(--r-control);
  box-shadow: 0 0 0 6px rgba(36, 80, 240, 0.12);
}
[data-on-dark] :focus-visible, .msg-user :focus-visible {
  outline-color: var(--aqua);
  box-shadow: 0 0 0 6px rgba(15, 194, 180, 0.22);
}

/* ================================================================
   SURFACE LADDER (audit #04) — six levels, defined once.
   The homepage previously rendered 29 surfaces in 12 different
   combinations of radius, border, shadow and background.
   ================================================================ */
.s1 { background: var(--s1-bg); border-radius: var(--r-surface); }
.s2 { background: var(--s2-bg); border: 1px solid var(--s2-edge); border-radius: var(--r-surface); }
.s3 {
  background: var(--s3-bg); border: 1px solid var(--s3-edge); border-radius: var(--r-surface);
  box-shadow: var(--s3-shadow);
  transition: transform var(--d-state) var(--ease-state), box-shadow var(--d-state) var(--ease-state), border-color var(--d-state) var(--ease-state);
}
.s4 { border-color: var(--s4-edge); box-shadow: var(--s4-glow), var(--shadow-1); }
.s5 {
  position: relative; background: var(--s2-bg);
  border: 1px solid var(--s5-edge); border-radius: var(--r-surface);
  box-shadow: var(--s5-shadow);
}
/* the spectral edge — the mark of something the AI produced */
.s5::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px;
  border-radius: var(--r-surface) var(--r-surface) 0 0;
  background: var(--grad-edge);
}
.s6 { background: var(--s6-bg); border: 1px solid var(--s6-edge); border-radius: var(--r-surface); }

/* Tactility: interactive surfaces lift toward the cursor (audit #48). */
@media (hover: hover) {
  .s3:hover, .lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: rgba(36, 80, 240, 0.28);
  }
  .s3:active, .lift:active { transform: translateY(0); box-shadow: var(--shadow-1); transition-duration: 60ms; }
}
@media (prefers-reduced-motion: reduce) {
  .s3, .lift { transition: none; }
  .s3:hover, .lift:hover { transform: none; }
}

/* ================================================================
   LABEL STYLES (audit #07) — two, replacing nine tracking values.
   ================================================================ */
.eyebrow, .kick {
  font: 600 var(--t-label)/1.3 var(--font-ui);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua-deep);
}
.meta {
  font: 500 var(--t-label)/1.45 var(--font-ui);
  letter-spacing: 0.04em; color: var(--muted);
}

/* Measure, applied by role (audit #09, #42) — widening the viewport adds
   margin and scale, never line length. */
.read { max-width: var(--m-read); }
.ui-measure { max-width: var(--m-ui); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--surface); padding: 10px 16px; z-index: 100; border-radius: var(--r-sm); }
.skip:focus { left: 12px; top: 12px; }
.muted { color: var(--muted); }
.kick {
  font-family: var(--font-label); font-size: var(--t-label); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua-text); margin: 0 0 10px;
}

/* ---------------- aurora ambient (scoped, luminous, never obscuring) ---------------- */
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora i {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; display: block;
}
.aurora .au-a { width: min(52vw, 680px); height: min(52vw, 680px); left: -8%; top: -14%; background: radial-gradient(circle, rgba(15, 194, 180, 0.35), transparent 65%); animation: au-drift-a 26s var(--ease-soft) infinite alternate; }
.aurora .au-b { width: min(46vw, 620px); height: min(46vw, 620px); right: -10%; top: 8%; background: radial-gradient(circle, rgba(36, 80, 240, 0.28), transparent 65%); animation: au-drift-b 32s var(--ease-soft) infinite alternate; }
.aurora .au-c { width: min(40vw, 520px); height: min(40vw, 520px); left: 30%; bottom: -22%; background: radial-gradient(circle, rgba(123, 91, 255, 0.20), transparent 65%); animation: au-drift-a 38s var(--ease-soft) infinite alternate-reverse; }
@keyframes au-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(3%, 4%, 0) scale(1.06); } }
@keyframes au-drift-b { from { transform: translate3d(0, 0, 0) scale(1.04); } to { transform: translate3d(-4%, 3%, 0) scale(1); } }
/* Wide screens: the light must survive scale (Wave 5, rec 13) */
@media (min-width: 1600px) {
  .aurora i { opacity: 0.65; filter: blur(110px); }
  .aurora .au-a { width: min(48vw, 900px); height: min(48vw, 900px); }
  .aurora .au-b { width: min(44vw, 820px); height: min(44vw, 820px); }
  .aurora .au-c { width: min(38vw, 700px); height: min(38vw, 700px); }
}

/* ---------------- buttons / pills ---------------- */
/* ================================================================
   BUTTON ROLES (audit #05) — five, replacing twenty treatments.
   The homepage rendered 51 button-like elements in 20 distinct
   signatures, with heights from 30 to 52px and five different fills.

     PRIMARY     gradient pill, 44px — ONE per viewport
     SECONDARY   solid ink, 44px
     TERTIARY    hairline ghost, 40px
     CONTEXTUAL  chip, 36px — only inside a conversation
     HUMAN       coral, 44px — only when Florentin is the destination
   ================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  min-height: 44px; padding: 0 22px;
  font: 600 var(--t-body)/1 var(--font-ui); color: var(--ink); background: var(--surface);
  position: relative; overflow: hidden; text-decoration: none;
  transition: transform var(--d-state) var(--ease-state), box-shadow var(--d-state) var(--ease-state), border-color var(--d-state) var(--ease-state);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); transition-duration: 60ms; }

/* PRIMARY — the gradient is scarce on purpose (audit #13). */
.btn-primary { background: var(--grad-ai); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover { box-shadow: var(--shadow-2); }

/* SECONDARY — solid ink; carries weight without spending the gradient. */
.btn-secondary { background: var(--ink); color: #fff; }
.btn-secondary:hover { background: var(--cobalt-deep); }

/* TERTIARY — hairline ghost, one step down in height. */
.btn-ghost { min-height: 40px; border-color: var(--line); background: var(--surface-glass); }
.btn-ghost:hover { border-color: rgba(36, 80, 240, 0.35); }

/* CONTEXTUAL — chip, only inside a conversation. */
.btn-chip {
  min-height: 36px; padding: 0 14px; font-size: var(--t-small); font-weight: 500;
  border-color: var(--line); background: var(--surface);
}
.btn-chip:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* HUMAN — the only coral control in the product. */
.btn-human { background: var(--grad-human); color: #fff; box-shadow: var(--shadow-human); }

.btn-sm { min-height: 38px; padding: 0 16px; font-size: var(--t-small); }
@media (pointer: coarse) { .btn-sm, .btn-chip { min-height: 44px; } }
/* Intelligence Signal — light sweep (Wave 2 salvage E1) */
.btn-primary::after, .btn-human::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform var(--d-narrative) var(--ease-out);
}
.btn-primary:hover::after, .btn-human:hover::after { transform: translateX(120%); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface-glass);
  font: 500 var(--t-small)/1.3 var(--font-ui); color: var(--ink-2); white-space: nowrap;
}
.pill-accent { border-color: rgba(15, 194, 180, 0.5); background: rgba(15, 194, 180, 0.10); color: var(--aqua-text); }

/* ---------------- the Core mark — small living brand symbol ---------------- */
.core-mark {
  width: 22px; height: 22px; border-radius: 50%; flex: none; position: relative;
  background: var(--grad-ai);
  box-shadow: 0 0 0 3px rgba(15, 194, 180, 0.14), 0 2px 8px rgba(36, 80, 240, 0.35);
}
.core-mark::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  animation: core-breathe 3.4s var(--ease-soft) infinite;
}
[data-core-state="thinking"] .core-mark::after { animation-duration: 1.1s; }
[data-core-state="responding"] .core-mark { box-shadow: 0 0 0 5px rgba(15, 194, 180, 0.20), 0 2px 10px rgba(36, 80, 240, 0.45); }
[data-core-state="human"] .core-mark { background: var(--grad-human); box-shadow: 0 0 0 4px rgba(255, 122, 89, 0.18), 0 2px 8px rgba(255, 122, 89, 0.4); }
@keyframes core-breathe { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(0.62); opacity: 1; } }

/* ---------------- chat grammar (shared: public stage + workspace thread) ---------------- */
.msg { display: flex; gap: 10px; margin: 14px 0; animation: rise 0.3s var(--ease-out) both; }
.msg-user { flex-direction: row-reverse; }
.msg-avatar {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-control);
  display: grid; place-items: center; font: 700 var(--t-label)/1 var(--font-label);
  background: var(--grad-ai); color: #fff; letter-spacing: 0.04em;
}
.msg-user .msg-avatar { background: var(--ink); }
.msg-body {
  max-width: 82%; padding: 12px 16px; border-radius: var(--r-lg);
  font-size: var(--t-body); line-height: 1.62; overflow-wrap: break-word;
}
.msg-ai .msg-body { background: var(--surface); border: 1px solid var(--line-soft); border-top-left-radius: var(--r-control); box-shadow: var(--shadow-1); color: var(--ink-2); }
.msg-user .msg-body { background: linear-gradient(135deg, #22439C, #0D1B3E); color: #fff; border-bottom-right-radius: var(--r-control); }
.msg-body p { margin: 0 0 0.7em; } .msg-body p:last-child { margin: 0; }
.msg-body ul { margin: 0 0 0.7em; padding-left: 18px; } .msg-body li { margin: 3px 0; }
.msg-state {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 10px 40px;
  font: 600 var(--t-label)/1 var(--font-label); letter-spacing: 0.12em; color: var(--aqua-text);
  animation: statepulse 1.6s ease-in-out infinite;
}
@keyframes statepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* composer */
.composer-shell {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-1); padding: 10px 10px 10px 16px;
  display: flex; align-items: flex-end; gap: 10px;
  transition: border-color var(--d-response), box-shadow var(--d-enter) var(--ease-out);
}
.composer-shell:focus-within { border-color: rgba(36, 80, 240, 0.45); box-shadow: 0 0 0 4px rgba(36, 80, 240, 0.10), var(--shadow-2); }
.chat-input {
  flex: 1; border: 0; background: transparent; resize: none; color: var(--ink);
  font: 400 var(--t-body)/1.5 var(--font-ui); padding: 8px 0; max-height: 160px; min-height: 24px;
}
.chat-input:focus { outline: none; }
.chat-input::placeholder { color: var(--muted); }
.chat-send {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: var(--r-surface);
  background: var(--grad-ai); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-1); transition: transform var(--d-response) var(--ease-out), box-shadow var(--d-response);
}
.chat-send:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.chat-send:active { transform: scale(0.94); }
.chat-send:disabled { opacity: 0.5; transform: none; box-shadow: none; cursor: default; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick button {
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-glass);
  padding: 8px 14px; font: 500 var(--t-small)/1.3 var(--font-ui); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 7px;
  transition: transform var(--d-response) var(--ease-out), border-color var(--d-response), box-shadow var(--d-response);
}
.quick button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-ai); flex: none; }
.quick button:hover { transform: translateY(-1px); border-color: rgba(15, 194, 180, 0.5); box-shadow: var(--shadow-1); }
.quick .q-human::before { background: var(--grad-human); }

/* ---------------- architecture grammar (HTML nodes — Wave 3 lineage) ---------------- */
.arch { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 12px 0 4px; }
.a-node {
  border: 1px solid rgba(36, 80, 240, 0.22); border-radius: var(--r-control); padding: 6px 13px;
  font: 600 var(--t-label)/1.3 var(--font-label); letter-spacing: 0.08em; color: var(--ink-2);
  background: var(--surface); box-shadow: 0 1px 4px rgba(36, 80, 240, 0.08);
  animation: rise 0.4s var(--ease-out) both;
}
.a-core { background: var(--grad-ai); border-color: transparent; color: #fff; box-shadow: 0 3px 12px rgba(15, 194, 180, 0.35); }
.a-ai { border-color: rgba(15, 194, 180, 0.5); color: var(--aqua-text); }
.a-human { background: var(--grad-human); border-color: transparent; color: #fff; box-shadow: 0 3px 12px rgba(255, 122, 89, 0.35); }
.a-arrow { color: rgba(36, 80, 240, 0.45); font-size: var(--t-label); line-height: 1; }
.a-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
/* staggered assembly (Wave 2 salvage C1 — data-driven, content visible without it) */
.arch > :nth-child(2) { animation-delay: 0.05s; } .arch > :nth-child(3) { animation-delay: 0.1s; }
.arch > :nth-child(4) { animation-delay: 0.15s; } .arch > :nth-child(5) { animation-delay: 0.2s; }
.arch > :nth-child(6) { animation-delay: 0.25s; } .arch > :nth-child(7) { animation-delay: 0.3s; }
.arch > :nth-child(8) { animation-delay: 0.35s; } .arch > :nth-child(9) { animation-delay: 0.4s; }
.arch > :nth-child(10) { animation-delay: 0.45s; } .arch > :nth-child(11) { animation-delay: 0.5s; }

/* ---------------- generative UI cards ---------------- */
.ui-card {
  margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(244, 247, 254, 0.9), var(--surface));
  padding: 16px; box-shadow: var(--shadow-1); animation: rise 0.35s var(--ease-out) both;
}
.ui-card h4 {
  font: 600 var(--t-label)/1.3 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--aqua-text); margin: 0 0 10px;
}
.ui-range { font: 600 1.5rem/1.2 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.ui-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ui-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ui-handoff { border-color: rgba(255, 122, 89, 0.35); background: linear-gradient(180deg, rgba(255, 122, 89, 0.06), var(--surface)); }
.ui-handoff h4 { color: var(--coral-text); }
.ui-handoff textarea {
  width: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; font: 400 var(--t-small)/1.5 var(--font-ui); color: var(--ink); background: var(--surface);
}
/* timeline block */
.ui-timeline { display: flex; flex-wrap: wrap; gap: 0; margin-top: 6px; align-items: center; }
.tl-step { display: flex; align-items: center; gap: 0; }
.tl-node { text-align: center; padding: 4px 2px; min-width: 74px; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grad-ai); margin: 0 auto 6px; box-shadow: 0 0 0 3px rgba(15, 194, 180, 0.15); }
.tl-label { font: 600 var(--t-label)/1.2 var(--font-label); letter-spacing: 0.06em; color: var(--ink-2); text-transform: uppercase; }
.tl-weeks { font-size: var(--t-label); color: var(--muted); }
.tl-line { width: 26px; height: 2px; background: linear-gradient(90deg, rgba(15, 194, 180, 0.5), rgba(36, 80, 240, 0.5)); flex: none; }

/* message feedback (thumbs) */
.fb-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--t-label); color: var(--muted); }
.fb-btn {
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-glass);
  padding: 3px 8px; font-size: var(--t-small); line-height: 1.2; cursor: pointer; color: var(--ink-2);
  transition: transform var(--d-response) var(--ease-out), border-color var(--d-response);
}
.fb-btn:hover { transform: translateY(-1px); border-color: rgba(36, 80, 240, 0.4); }
.fb-up:hover { border-color: rgba(15, 169, 104, 0.5); }
.fb-down:hover { border-color: rgba(255, 122, 89, 0.5); }
.fb-reason {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-control); padding: 4px 9px;
  font: 400 var(--t-small)/1.4 var(--font-ui); color: var(--ink);
}
.fb-reason:focus { outline: none; border-color: rgba(36, 80, 240, 0.45); }

/* memory signal (workspace: fact flowed to the intelligence panel) */
.mem-signal {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font: 600 var(--t-label)/1 var(--font-label); letter-spacing: 0.1em; color: var(--aqua-text);
  animation: rise 0.4s var(--ease-out) both;
}
.mem-signal::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad-ai); }

/* ---------------- reduced motion — full kill, states still legible ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .msg, .ui-card, .a-node { opacity: 1; transform: none; }
}

/* ================================================================
   WAVE 5 — PURCEAS mascot integration (Brand Book V3)
   The mascot head is THE brand mark; coral remains the human register.
   ================================================================ */
.brand-head { width: 24px; height: 24px; flex: none; object-fit: contain; }
.ws-bar .brand-head { width: 18px; height: 18px; }
/* chat state lives on the head now: violet glow when thinking/responding */
[data-core-state="thinking"] .stage-head .brand-head,
[data-core-state="thinking"] .ws-bar .brand-head { animation: head-think 1.1s ease-in-out infinite; }
@keyframes head-think {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(123, 91, 255, 0.25)); }
  50% { filter: drop-shadow(0 0 9px rgba(123, 91, 255, 0.85)); }
}
[data-core-state="responding"] .stage-head .brand-head { filter: drop-shadow(0 0 7px rgba(123, 91, 255, 0.6)); }
/* AI message avatar = the mascot (site + workspace share these classes) */
.msg-ai .msg-avatar {
  background: var(--surface) url("/brand/purceas/mascot/head/96.webp") center/92% no-repeat;
  border: 1px solid var(--line-soft); color: transparent; box-shadow: var(--shadow-1);
}

/* audit #19 — generative cards arrive as if assembled, not pasted. */
.ui-reveal { opacity: 0; transform: translateY(8px); }
.ui-reveal.in { opacity: 1; transform: none; transition: opacity var(--d-enter) ease, transform var(--d-enter) cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) {
  .ui-reveal, .ui-reveal.in { opacity: 1; transform: none; transition: none; }
}

/* audit #35 — what Purceas still has to learn, beside what it already knows. */
.intel-gaps { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 10px; }
.intel-gaps .ig-k { font: 600 var(--t-label)/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); width: 100%; margin-bottom: 3px; }
.intel-gaps .ig-chip { font: 500 var(--t-label)/1 var(--font-label); color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 4px 8px; }

/* audit #36 — the promotion card, and #01's landing banner. */
.promote-card { border-left: 3px solid var(--violet, #7B5BFF); }
.promote-card h4 { margin: 0 0 4px; }
.promote-card p { margin: 0 0 10px; font-size: var(--t-small); color: var(--ink-2); }
.claim-banner { display: grid; gap: 2px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--r-surface);
  background: rgba(15, 194, 180, .10); border: 1px solid rgba(15, 194, 180, .28); }
.claim-banner strong { font-size: var(--t-body); }
.claim-banner span { font-size: var(--t-small); color: var(--ink-2); }

/* ================================================================
   SHARED CONVERSATION + GENERATED SURFACE (visual audit #31, #34)

   This lived in site.css, which the workspace does not load — so the
   signature that is supposed to identify Purceas output "across
   marketing, chat and workspace" was absent from the workspace, which
   is where clients spend their time. It belongs in the foundation.
   ================================================================ */

/* L5 — anything the AI generated, and nothing else. */
.ui-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--s5-edge);
  border-radius: var(--r-surface);
  box-shadow: var(--s5-shadow);
}
.ui-card::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px;
  border-radius: var(--r-surface) var(--r-surface) 0 0;
  background: var(--grad-edge);
}
.ui-card > h4 { display: flex; align-items: center; gap: 7px; }
.ui-card > h4::before {
  content: ""; width: 13px; height: 13px; flex: none; border-radius: 3px;
  background: var(--grad-deep); opacity: .85;
}
/* the human handoff is the one generated surface that is coral, not violet */
.ui-handoff { border-color: var(--s6-edge); box-shadow: var(--shadow-human); }
.ui-handoff::before, .ui-handoff > h4::before { background: var(--grad-human); }
/* Purceas speaking, rather than generating */
.resume-card::before, .promote-card::before { background: var(--grad-ai); }

/* The estimate range is the card's headline, in tabular figures. */
.ui-estimate .ui-range {
  font: 700 clamp(1.7rem, 3.4vw, 2.2rem)/1.05 var(--font-display);
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  margin: 2px 0 6px;
}

/* Two voices. The user's message was a near-black slab; the AI's was a
   plain white box with no relationship to the cards it produces. */
.msg-user .msg-body {
  background: rgba(13, 27, 62, 0.055); color: var(--ink);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-surface) var(--r-surface) 4px var(--r-surface);
}
.msg-ai .msg-body {
  position: relative; background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-surface) var(--r-surface) var(--r-surface) 4px;
  box-shadow: 0 1px 2px rgba(13, 27, 62, .04), 0 10px 30px -18px rgba(123, 91, 255, .35);
}
.msg-ai .msg-body::before {
  content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px;
  border-radius: 2px; background: var(--grad-edge); opacity: .75;
}
/* A comfortable measure for reading a reply (audit #09). */
.msg-body { max-width: min(100%, 60ch); }

/* A three-stage figure instead of a monospace ticker (audit #33). */
.msg-state { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: var(--t-small); }
.msg-state::before {
  content: ""; width: 42px; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--aqua), var(--cobalt), var(--violet));
  background-size: 300% 100%; animation: think-sweep 1.4s var(--ease-state) infinite;
}
@keyframes think-sweep { 0% { background-position: 100% 0; opacity: .5 } 50% { opacity: 1 } 100% { background-position: 0 0; opacity: .5 } }
@media (prefers-reduced-motion: reduce) { .msg-state::before { animation: none; opacity: .8; } }

/* The composer acknowledges you (audit #32). */
.composer-shell, .compose-shell {
  transition: box-shadow var(--d-response) var(--ease-state), border-color var(--d-response) var(--ease-state);
}
.composer-shell:focus-within, .compose-shell:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 1.5px var(--cobalt), 0 0 0 7px rgba(36, 80, 240, 0.14), var(--shadow-2);
}

/* One arrival rhythm for the whole site (visual audit #47). */
.rv { opacity: 0; transform: translateY(10px); }
.rv.in { opacity: 1; transform: none; transition: opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .rv, .rv.in { opacity: 1; transform: none; transition: none; } }
.no-js .rv { opacity: 1; transform: none; }

/* ================================================================
   GENERATED-OUTPUT CHIPS (visual audit #22, #20)

   The vocabulary a template's output is drawn in: product options with
   prices, real availability, a qualified profile, a cited answer. Used by
   the template gallery, the outcome theatre and the mega-menu preview.

   These lived in site.css and were destroyed by a block extraction in
   Wave 7b, which shipped the gallery as unstyled running text. They belong
   in the foundation because three different surfaces draw them — the same
   lesson as flow.js and the generated surface.
   ================================================================ */
.tb-ask {
  display: block; max-width: 84%; margin-bottom: 9px; padding: 6px 10px;
  background: var(--ink); color: #fff; border-radius: 10px 10px 10px 3px;
  font: 400 var(--t-label)/1.35 var(--font-ui);
}
.tb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.tb-c {
  display: grid; gap: 3px; align-content: start; padding: 7px 8px; min-height: 52px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-control);
}
.tb-c.pick { border-color: var(--s4-edge); box-shadow: var(--s4-glow); }
.tb-ct { font: 500 0.66rem/1.25 var(--font-ui); color: var(--ink-2); }
.tb-cp { font: 600 var(--t-label)/1 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }

.tb-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-s {
  padding: 7px 11px; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-control); font: 600 var(--t-label)/1 var(--font-ui);
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.tb-s.pick { border-color: var(--s4-edge); color: var(--cobalt); box-shadow: var(--s4-glow); }

.tb-check { display: grid; gap: 5px; }
.tb-k {
  display: flex; align-items: center; gap: 7px; padding: 6px 9px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-control);
  font: 500 0.68rem/1.3 var(--font-ui); color: var(--ink-2);
}
.tb-k::before {
  content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--line);
}
.tb-k.ok::before { border-color: var(--emerald); background: var(--emerald); box-shadow: inset 0 0 0 2px var(--surface); }

.tb-answer { display: grid; gap: 6px; }
.tb-a {
  padding: 8px 10px; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-control); font: 400 0.68rem/1.45 var(--font-ui); color: var(--ink-2);
}
.tb-src {
  justify-self: start; padding: 4px 8px; border-radius: var(--r-control);
  background: var(--tint-aqua-08); color: var(--aqua-deep);
  font: 600 0.62rem/1 var(--font-ui); letter-spacing: .04em;
}

/* The 16:10 frame the gallery draws them in. */
.tpl-thumb {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 16 / 10;
  padding: 14px 15px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 90% 0%, var(--tpl-tint, rgba(36, 80, 240, .10)) 0%, transparent 62%),
    var(--bg-2);
  border-bottom: 1px solid var(--line-soft);
}
.tpl-thumb > :last-child { margin-top: auto; }
.tpl-card[data-accent="violet"]  { --tpl-tint: rgba(123, 91, 255, .14); }
.tpl-card[data-accent="cobalt"]  { --tpl-tint: rgba(36, 80, 240, .12); }
.tpl-card[data-accent="aqua"]    { --tpl-tint: rgba(15, 194, 180, .14); }
.tpl-card[data-accent="coral"]   { --tpl-tint: rgba(255, 122, 89, .13); }
.tpl-card[data-accent="emerald"] { --tpl-tint: rgba(15, 169, 104, .13); }

/* Text below the image, not inside it; the scenario is clamped so the grid
   cannot go ragged again (audit #23). */
.tpl-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; text-decoration: none; color: inherit; }
.tpl-card:hover { text-decoration: none; }
.tpl-body { display: grid; gap: 4px; align-content: start; padding: 15px 17px 17px; flex: 1; }
.tpl-body h2 { font-size: var(--t-h4); margin: 2px 0 0; }
.tpl-body .sr-meta { margin: 0; font-size: var(--t-label); color: var(--muted); }
.tpl-cmoment {
  margin: 4px 0 0; font-size: var(--t-small); color: var(--ink-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2 * 1.5 * var(--t-small));
}
.tpl-tier {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font: 500 var(--t-label)/1.3 var(--font-ui); color: var(--muted);
}

/* A human node that is not last keeps its connector (visual audit #27). */
.sr-node[data-kind="human"]:not(:last-child)::after { display: block; }