/* ============================================================
   Arbori — Main Stylesheet
   Imports all design tokens, resets, and component styles.
   This is the single LESS entry point.
   ============================================================ */
/* ── Foundation ──────────────────────────────────────────── */
/* ============================================================
   Arbori Design Tokens
   Single source of truth for all design values.
   Ref: docs/component_design_principles.md §1
   ============================================================ */
:root {
  /* ── Core palette ──────────────────────────────────────── */
  /* Warm throughout — see docs/design_character_audit.md §3.1.
     Semantic tokens are the durable contract; these hex values are
     the swappable skin. Components must reference tokens only. */
  --color-bg: #f4efe6;
  /* Page background — warm cream */
  --color-surface: #fdfbf6;
  /* Cards, panels, modals — warm white, never pure #fff */
  --color-ink: #20251f;
  /* Primary text — green-cast ink */
  --color-muted: #6b6a5d;
  /* Secondary text, timestamps, metadata — warm olive-gray */
  --color-border: #d9d0bf;
  /* Borders, dividers — visible enough to carry elevation */
  /* Soft tints must read as deliberate color against the cream bg
     (#f4efe6), not as a slightly-off page background */
  --color-accent: #1d6a5a;
  /* Brand accent, primary buttons, links — pine */
  --color-accent-strong: #145245;
  /* Hover / pressed states */
  --color-accent-soft: #dcebe2;
  /* Accent backgrounds, subtle highlights */
  --color-danger: #a93f33;
  /* Errors, destructive actions, overdue */
  --color-danger-soft: #f5e3df;
  /* Danger background */
  --color-success: #4a7040;
  /* Success states — same family as canopy; success = growth */
  --color-success-soft: #e4eeda;
  /* Success background */
  --color-warning: #b07818;
  /* Warning states */
  --color-warning-soft: #f7ecd2;
  /* Warning background */
  /* ── Product colors ────────────────────────────────────── */
  /* Desaturated, warm "pigments" — identity only (eyebrows, icons,
     accent stripes, active-nav tint). Never buttons; all primary
     actions are accent, everywhere. */
  --color-roots: #8a6238;
  /* Second Brain — soil / raw umber */
  --color-compass: #44608b;
  /* Goals — denim indigo (the one cool pole) */
  --color-pulse: #b04a3f;
  /* Coaching — madder red, a heartbeat */
  --color-canopy: #4a7040;
  /* Research — leaf green, muted */
  --color-rings: #7d5a45;
  /* Timeline — heartwood */
  --color-grove: #2f5d50;
  /* Settings — pine, harmonizes with accent */
  /* ── Typography scale ──────────────────────────────────── */
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  /* Label face is skin (audit §3.3) — retiring the mono is this one line */
  --font-label: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;
  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.8125rem;
  /* 13px */
  --text-base: 1rem;
  /* 16px */
  --text-md: 1.125rem;
  /* 18px */
  --text-lg: 1.25rem;
  /* 20px */
  --text-xl: 1.5rem;
  /* 24px */
  --text-2xl: 1.875rem;
  /* 30px */
  --text-3xl: 2.25rem;
  /* 36px */
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  /* ── Spacing ───────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  /* ── Radii ─────────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  /* Inputs, buttons, tags */
  --radius-md: 14px;
  /* Secondary panels, message bubbles */
  --radius-lg: 14px;
  /* Cards, modals, major panels (24 + big shadow = "soft SaaS") */
  --radius-full: 9999px;
  /* Pills, avatars */
  /* ── Shadows / Elevation ───────────────────────────────── */
  /* Resting content does not float — edges are drawn (1px border +
     --shadow-xs). --shadow-soft is reserved for true overlays
     (modals, popovers). Audit §3.2. */
  --shadow-xs: 0 1px 2px rgba(32, 37, 31, 0.05);
  --shadow-card: 0 1px 2px rgba(32, 37, 31, 0.05);
  --shadow-soft: 0 12px 32px rgba(32, 37, 31, 0.14);
  /* ── Transitions ───────────────────────────────────────── */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* ── Layout ────────────────────────────────────────────── */
  --max-width-chat: 920px;
  --max-width-dashboard: 1400px;
  --max-width-auth: 980px;
  --header-height: 64px;
  --bottom-nav-height: 0px;
  /* overridden at mobile breakpoint */
  /* ── Focus ring ────────────────────────────────────────── */
  --focus-ring: 2px solid var(--color-accent);
  --focus-ring-offset: 2px;
  /* ── Current product (overridden by .product-* classes) ─ */
  --current-product-color: var(--color-accent);
}
/* ============================================================
   CSS Reset — Minimal, clean-slate foundation
   No legacy grid, no Overlock, no conflicting resets.
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  min-height: 100vh;
  line-height: var(--leading-normal);
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: none;
}
/* ── Touch / Mobile ──────────────────────────────────────── */
/* Eliminate 300ms tap delay on all interactive elements */
a,
button,
input,
select,
textarea,
[role="button"],
[tabindex],
[data-action],
.btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/* Remove default focus styles — we apply our own */
:focus {
  outline: none;
}
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
/* Reduced motion — respect user preference but keep essential loaders */
@media (prefers-reduced-motion: reduce) {
  *:not(.spinner),
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============================================================
   Typography — Manrope body, Fraunces headings
   Ref: docs/component_design_principles.md §1 Typography
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-ink);
}
/* ── Headings (Fraunces display) ─────────────────────────── */
/* Large display sizes use Fraunces' optical-size + SOFT/WONK axes —
   the wonky a/g/y glyphs read as hand-set type (audit §3.3) */
h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
}
h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
}
h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
/* h4–h6: Manrope (not display font) */
h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
h5 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
h6 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* ── Body text variants ──────────────────────────────────── */
.text-sm {
  font-size: var(--text-sm);
}
.text-xs {
  font-size: var(--text-xs);
}
.text-lg {
  font-size: var(--text-lg);
}
/* ── Caption: small metadata text ────────────────────────── */
.caption {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  letter-spacing: 0.02em;
}
/* ── Eyebrow: product section label ──────────────────────── */
.eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--current-product-color);
}
/* ── Specimen label: mono metadata label (audit §3.3) ────────
   For event types, timestamps, tag chips, eyebrows. The mono face
   itself is skin — it lives only in --font-label. Do not use the
   mono for headings, body, or buttons. */
.specimen-label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
/* ── Paragraph spacing ───────────────────────────────────── */
p + p {
  margin-top: var(--space-4);
}
/* ── Strong and emphasis ─────────────────────────────────── */
strong,
b {
  font-weight: var(--weight-semibold);
}
em,
i {
  font-style: italic;
}
/* ── Code (inline) ───────────────────────────────────────── */
code {
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 0.9em;
  padding: 2px 6px;
  background: var(--color-accent-soft);
  border-radius: var(--radius-xs);
}
/* ── Mobile adjustments ──────────────────────────────────── */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }
  h1 {
    font-size: var(--text-2xl);
  }
  h2 {
    font-size: var(--text-xl);
  }
  h3 {
    font-size: var(--text-lg);
  }
}
/* ============================================================
   Arbori — Utility Classes
   Ref: docs/component_design_principles.md §1
   ============================================================ */
/* ── Visibility ──────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hidden {
  display: none !important;
}
/* ── Text helpers ────────────────────────────────────────── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.muted {
  color: var(--color-muted);
}
.danger {
  color: var(--color-danger);
}
.accent {
  color: var(--color-accent);
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
/* ── Spacing helpers ─────────────────────────────────────── */
.mt-1 {
  margin-top: var(--space-1);
}
.mt-2 {
  margin-top: var(--space-2);
}
.mt-3 {
  margin-top: var(--space-3);
}
.mt-4 {
  margin-top: var(--space-4);
}
.mt-6 {
  margin-top: var(--space-6);
}
.mt-8 {
  margin-top: var(--space-8);
}
.mb-1 {
  margin-bottom: var(--space-1);
}
.mb-2 {
  margin-bottom: var(--space-2);
}
.mb-3 {
  margin-bottom: var(--space-3);
}
.mb-4 {
  margin-bottom: var(--space-4);
}
.mb-6 {
  margin-bottom: var(--space-6);
}
.mb-8 {
  margin-bottom: var(--space-8);
}
.gap-2 {
  gap: var(--space-2);
}
.gap-3 {
  gap: var(--space-3);
}
.gap-4 {
  gap: var(--space-4);
}
.gap-6 {
  gap: var(--space-6);
}
/* ── Flex helpers ────────────────────────────────────────── */
.flex {
  display: flex;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-1 {
  flex: 1;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
/* ── Misc ────────────────────────────────────────────────── */
.no-select {
  user-select: none;
}
.pointer {
  cursor: pointer;
}
/* ── Component styles ────────────────────────────────────── */
/* ============================================================
   Buttons — Primary, secondary, ghost, danger
   Ref: docs/component_design_principles.md §1
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 12px 24px;
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  /* Icon inside button */
}
.btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
/* ── Primary ─────────────────────────────────────────────── */
/* States are pure color steps — no scale, no inset shading
   (audit §3.9). The 1px-dark border keeps buttons in the same
   drawn-edge language as cards. */
.btn-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent-strong);
  color: var(--color-surface);
}
.btn-primary:hover {
  background-color: var(--color-accent-strong);
}
.btn-primary:active {
  background-color: var(--color-accent-strong);
  filter: brightness(0.92);
}
/* ── Secondary (outlined) ────────────────────────────────── */
.btn-secondary {
  background-color: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn-secondary:hover {
  background-color: var(--color-accent-soft);
}
.btn-secondary:active {
  background-color: var(--color-accent-soft);
  filter: brightness(0.96);
}
/* ── Ghost ───────────────────────────────────────────────── */
.btn-ghost {
  background-color: transparent;
  color: var(--color-muted);
}
.btn-ghost:hover {
  background-color: color-mix(in srgb, var(--color-ink) 4%, transparent);
  color: var(--color-ink);
}
.btn-ghost:active {
  background-color: color-mix(in srgb, var(--color-ink) 6%, transparent);
}
/* ── Danger ──────────────────────────────────────────────── */
.btn-danger {
  background-color: var(--color-danger);
  color: var(--color-surface);
}
.btn-danger:hover {
  filter: brightness(0.92);
}
.btn-danger:active {
  filter: brightness(0.85);
}
/* ── Size variants ───────────────────────────────────────── */
.btn-sm {
  font-size: var(--text-sm);
  padding: 8px 16px;
  min-height: 44px;
}
.btn-sm svg {
  width: 16px;
  height: 16px;
}
.btn-lg {
  font-size: var(--text-md);
  padding: 14px 32px;
  min-height: 52px;
}
/* ── Full width ──────────────────────────────────────────── */
.btn-block {
  width: 100%;
}
/* ── Link style button ───────────────────────────────────── */
.btn-link {
  background: none;
  border: none;
  color: var(--color-accent);
  padding: 0;
  min-height: auto;
  font-weight: var(--weight-medium);
}
.btn-link:hover {
  color: var(--color-accent-strong);
  text-decoration: underline;
}
/* ============================================================
   Forms — Input, select, textarea, labels, inline errors
   Ref: docs/component_design_principles.md §1, §13
   ============================================================ */
/* ── Form group ──────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-group + .form-group {
  margin-top: var(--space-5);
}
/* ── Labels ──────────────────────────────────────────────── */
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}
/* ── Shared input styles ─────────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-ink);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.form-input::placeholder,
.form-select::placeholder,
.form-textarea::placeholder {
  color: var(--color-muted);
  opacity: 0.7;
}
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--color-muted);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
  outline: none;
}
.form-input.has-error,
.form-select.has-error,
.form-textarea.has-error {
  border-color: var(--color-danger);
}
.form-input.has-error:focus,
.form-select.has-error:focus,
.form-textarea.has-error:focus {
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-bg);
}
/* ── Textarea ────────────────────────────────────────────── */
.form-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: var(--leading-normal);
}
/* ── Select ──────────────────────────────────────────────── */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236b6a5d%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}
/* ── Inline error ────────────────────────────────────────── */
.form-error {
  font-size: var(--text-sm);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.form-error svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
/* ── Helper text ─────────────────────────────────────────── */
.form-hint {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
/* ── Password field with toggle ──────────────────────────── */
.password-wrapper {
  position: relative;
}
.password-wrapper .form-input {
  padding-right: 48px;
}
.password-wrapper .password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default);
}
.password-wrapper .password-toggle:hover {
  color: var(--color-ink);
}
.password-wrapper .password-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.password-wrapper .password-toggle svg {
  width: 18px;
  height: 18px;
}
/* ── Form actions (button row) ───────────────────────────── */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
/* ============================================================
   Cards — Standard card surface with accent border
   Ref: docs/component_design_principles.md §5
   ============================================================ */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  /* the drawn edge carries elevation */
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  position: relative;
  transition: border-color var(--duration-normal) var(--ease-default);
  /* Left accent border — colored by product */
}
.card.card-accented {
  border-left: 3px solid var(--current-product-color);
}
/* ── Card hover (for clickable cards) ────────────────────── */
/* Hover = the edge darkens toward ink; resting content never lifts */
.card-interactive {
  cursor: pointer;
}
.card-interactive:hover {
  border-color: var(--color-ink);
}
.card-interactive:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
/* ── Card layout: [ left | center | right ] ──────────────── */
.card-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.card-left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-body {
  flex: 1;
  min-width: 0;
}
.card-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* ── Card content blocks ─────────────────────────────────── */
.card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.card-description {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--space-1);
}
.card-meta {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* ── Card padding variants ───────────────────────────────── */
.card-compact {
  padding: var(--space-4);
}
/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .card {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }
}
/* ============================================================
   Modal — Warm backdrop, white card, fade + scale
   Ref: docs/component_design_principles.md §14
   ============================================================ */
/* ── Backdrop ────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  /* Pin height to the DYNAMIC viewport. With plain `inset: 0` the overlay's
     bottom sits at layout-100vh, which on mobile browsers extends below the
     visible area while the address bar is shown — so the mobile bottom-sheet
     (align-items: flex-end below) lands off-screen and you have to scroll to
     find it. 100dvh tracks the actually-visible viewport. */
  height: 100vh;
  height: 100dvh;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--color-ink) 45%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.modal-backdrop.modal-open {
  opacity: 1;
}
.modal-backdrop.modal-closing {
  opacity: 0;
}
/* ── Card ────────────────────────────────────────────────── */
.modal-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  width: min(600px, 90vw);
  max-height: 85vh;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  transform: scale(0.98);
  transition: transform var(--duration-normal) var(--ease-default);
  overflow: hidden;
}
.modal-open .modal-card {
  transform: scale(1);
}
.modal-closing .modal-card {
  transform: scale(0.98);
}
.modal-card-wide {
  width: min(760px, 90vw);
}
/* ── Header ──────────────────────────────────────────────── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  padding-bottom: var(--space-4);
  flex-shrink: 0;
}
.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.modal-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  color: var(--color-muted);
  transition: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.modal-close:hover {
  background-color: color-mix(in srgb, var(--color-ink) 4%, transparent);
  color: var(--color-ink);
}
.modal-close svg {
  width: 20px;
  height: 20px;
}
.modal-close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
/* ── Body ────────────────────────────────────────────────── */
.modal-body {
  padding: 0 var(--space-6);
  overflow-y: auto;
  flex: 1;
}
/* ── Footer ──────────────────────────────────────────────── */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-6);
  padding-top: var(--space-4);
  flex-shrink: 0;
}
/* ── Destructive modal variant ───────────────────────────── */
.modal-destructive .modal-footer .btn-primary {
  background-color: var(--color-danger);
}
.modal-destructive .modal-footer .btn-primary:hover {
  background-color: color-mix(in srgb, var(--color-danger) 88%, var(--color-ink));
}
@media (max-width: 600px) {
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .modal-card,
  .modal-card-wide {
    width: 100vw;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(18px);
  }
  .modal-open .modal-card,
  .modal-open .modal-card-wide {
    transform: translateY(0);
  }
  .modal-closing .modal-card,
  .modal-closing .modal-card-wide {
    transform: translateY(18px);
  }
  .modal-header,
  .modal-footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .modal-body {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}
/* ============================================================
   Product System — Icons, badges, headers, per-product colors
   Ref: docs/component_design_principles.md §1, §2
   ============================================================ */
/* ── Per-product color classes ────────────────────────────── */
.product-roots {
  --current-product-color: var(--color-roots);
}
.product-compass {
  --current-product-color: var(--color-compass);
}
.product-pulse {
  --current-product-color: var(--color-pulse);
}
.product-canopy {
  --current-product-color: var(--color-canopy);
}
.product-rings {
  --current-product-color: var(--color-rings);
}
.product-grove {
  --current-product-color: var(--color-grove);
}
/* ── Product icon ────────────────────────────────────────── */
.product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--current-product-color);
  flex-shrink: 0;
}
.product-icon svg {
  width: 20px;
  height: 20px;
}
.product-icon.product-icon-sm svg {
  width: 16px;
  height: 16px;
}
.product-icon.product-icon-lg svg {
  width: 24px;
  height: 24px;
}
/* ── Product badge (pill) ────────────────────────────────── */
.product-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 10px;
  height: 22px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--color-surface);
  background-color: var(--current-product-color);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.product-badge svg {
  width: 12px;
  height: 12px;
}
/* ── Product header ──────────────────────────────────────── */
.product-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.product-header .product-header-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.product-header .product-header-eyebrow .product-icon svg {
  width: 16px;
  height: 16px;
}
.product-header .product-header-eyebrow .eyebrow {
  color: color-mix(in srgb, var(--current-product-color) 32%, var(--color-ink));
}
.product-header .product-header-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
.product-header .product-header-subtitle {
  font-size: var(--text-base);
  color: var(--color-muted);
  max-width: 600px;
}
/* ============================================================
   Toasts — Non-blocking notification toasts
   ============================================================ */
.toast-container {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  min-width: 280px;
  max-width: 420px;
  pointer-events: auto;
  /* Entrance */
  animation: toast-in var(--duration-normal) var(--ease-default) forwards;
}
.toast.toast-exiting {
  animation: toast-out var(--duration-fast) var(--ease-default) forwards;
}
.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.toast-icon svg {
  width: 20px;
  height: 20px;
}
.toast-message {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}
.toast-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.toast-close:hover {
  background-color: color-mix(in srgb, var(--color-ink) 4%, transparent);
  color: var(--color-ink);
}
.toast-close svg {
  width: 16px;
  height: 16px;
}
/* ── Variants ────────────────────────────────────────────── */
.toast-success .toast-icon {
  color: var(--color-success);
}
.toast-error .toast-icon {
  color: var(--color-danger);
}
.toast-info .toast-icon {
  color: var(--color-accent);
}
.toast-warning .toast-icon {
  color: var(--color-warning);
}
/* ── Animations ──────────────────────────────────────────── */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}
/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .toast-container {
    top: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
  }
  .toast {
    min-width: 0;
    max-width: none;
  }
}
/* ============================================================
   Loading — Spinner, skeleton placeholders, pulse
   ============================================================ */
/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
  display: block;
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.spinner-lg {
  width: 36px;
  height: 36px;
  border-width: 3px;
}
/* ── Full-page loading ───────────────────────────────────── */
.loading-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  text-align: center;
  gap: var(--space-4);
}
.loading-page .loading-text {
  display: block;
  width: 100%;
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-weight: var(--weight-medium);
  text-align: center;
}
/* ── Skeleton placeholder ────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-border) 0%, var(--color-bg) 50%, var(--color-border) 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-xs);
}
.skeleton-text {
  height: 16px;
  width: 100%;
  margin-bottom: var(--space-2);
}
.skeleton-text:last-child {
  width: 60%;
}
.skeleton-title {
  height: 24px;
  width: 40%;
  margin-bottom: var(--space-3);
}
.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.skeleton-card {
  height: 80px;
  border-radius: var(--radius-lg);
}
/* ── Animations ──────────────────────────────────────────── */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ── Fade-in utility ─────────────────────────────────────── */
.fade-in {
  animation: fade-in var(--duration-normal) var(--ease-default) forwards;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.empty-state {
  position: relative;
  padding: var(--space-8) 0 var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
/* Faint line-drawing watermark, not a gray glyph (audit §3.11).
   The transition is the settle half of the draw-on: components/empty-state.js
   lifts opacity so the strokes are visible while they draw, then clears the
   inline value and this carries it back down to the resting watermark. */
.empty-state-icon {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-ink);
  opacity: 0.05;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-default);
}
/* The coach's voice — Fraunces italic one-liner */
.empty-state-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}
.empty-state-message {
  margin: 0;
  max-width: 56ch;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}
.empty-state-cta {
  margin-top: var(--space-1);
}
@media (max-width: 820px) {
  .empty-state {
    padding: var(--space-6) 0 var(--space-7);
    gap: var(--space-4);
  }
  .empty-state-title {
    font-size: var(--text-xl);
  }
  .empty-state-message {
    font-size: var(--text-base);
  }
}
/* ============================================================
   Celebrate — Effort-reward animations
   Leaf particles, success glow, milestone celebrations.
   Ref: docs/effort-reward-design-philosophy.md
   ============================================================ */
/* ── Overlay container (full viewport, pointer-transparent) ─ */
.celebrate-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}
/* ── Leaf particle ───────────────────────────────────────── */
.celebrate-leaf {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  animation-fill-mode: forwards;
}
.celebrate-leaf svg {
  display: block;
}
@keyframes celebrate-leaf-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(0.3);
  }
  20% {
    opacity: 1;
    transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)) rotate(calc(var(--r) * 0.3)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), calc(var(--ty) + 40px)) rotate(var(--r)) scale(0.6);
  }
}
/* ── Success glow ────────────────────────────────────────── */
.celebrate-glow {
  animation: celebrate-glow-pulse 600ms var(--ease-bounce) forwards;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 0%, transparent) !important;
}
@keyframes celebrate-glow-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 40%, transparent), 0 0 20px color-mix(in srgb, var(--color-success) 15%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-success) 15%, transparent), 0 0 30px color-mix(in srgb, var(--color-success) 20%, transparent);
  }
  100% {
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-success) 0%, transparent), 0 0 0 color-mix(in srgb, var(--color-success) 0%, transparent);
  }
}
/* ── Success button state ────────────────────────────────── */
.celebrate-success-btn {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: var(--color-surface) !important;
  transition: background-color 200ms var(--ease-default), border-color 200ms var(--ease-default);
}
.celebrate-success-btn .celebrate-checkmark {
  animation: celebrate-checkmark-draw 400ms var(--ease-bounce) forwards;
}
@keyframes celebrate-checkmark-draw {
  0% {
    stroke-dashoffset: 24;
    stroke-dasharray: 24;
    opacity: 0;
    transform: scale(0.5);
  }
  40% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 24;
    opacity: 1;
    transform: scale(1);
  }
}
/* ── Reduced-motion overrides ────────────────────────────── */
/* Note: Global prefers-reduced-motion in reset.less handles
   animation-duration reduction. These add explicit fallbacks. */
@media (prefers-reduced-motion: reduce) {
  .celebrate-leaf {
    display: none !important;
  }
  .celebrate-glow {
    /* Simple opacity flash instead of expanding glow */
    animation: none !important;
    outline: 3px solid var(--color-success);
    outline-offset: 2px;
    transition: outline-color 200ms;
  }
  .celebrate-success-btn .celebrate-checkmark {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}
/* ── Progressive form button ─────────────────────────────── */
/* Button transitions from muted grey to the success/accent
   color as the user fills out form fields.
   JS sets --form-progress (0→1) and toggles .btn-progress
   and .btn-progress-complete classes. */
.btn-progress {
  /* Interpolate from muted grey toward accent via a gradient overlay.
     The gradient stop position tracks --form-progress. */
  --progress-pct: calc(var(--form-progress, 0) * 100%);
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent) var(--progress-pct), var(--color-muted) var(--progress-pct), var(--color-muted) 100%) !important;
  border-color: transparent !important;
  transition: none;
  /* gradient handles the visual transition smoothly via JS */
}
.btn-progress-complete {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  /* Subtle pulse to signal "ready to go!" */
  animation: btn-ready-pulse 1.5s ease-in-out infinite;
}
@keyframes btn-ready-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 15%, transparent);
  }
}
/* ── Tier 4 — Milestone Celebration ──────────────────────── */
.celebrate-milestone {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-ink) 60%, transparent);
  backdrop-filter: blur(4px);
  animation: celebrate-milestone-enter 400ms ease-out forwards;
  cursor: pointer;
}
.celebrate-milestone__content {
  text-align: center;
  color: var(--color-surface);
  animation: celebrate-milestone-scale 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.celebrate-milestone__icon {
  margin-bottom: 12px;
  animation: celebrate-milestone-icon-pop 600ms 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.celebrate-milestone__heading {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.celebrate-milestone__subtext {
  font-size: 1rem;
  opacity: 0.8;
  margin: 0;
}
.celebrate-milestone--exit {
  animation: celebrate-milestone-exit 300ms ease-in forwards;
}
@keyframes celebrate-milestone-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes celebrate-milestone-scale {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes celebrate-milestone-icon-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes celebrate-milestone-exit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* ── Tier 2 — Receipt Chip ───────────────────────────────── */
.celebrate-receipt {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--color-ink);
  border: 1px solid var(--color-border);
  color: var(--color-surface);
  font-size: 0.875rem;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-ink) 25%, transparent);
  animation: celebrate-receipt-enter 300ms ease-out forwards;
}
.celebrate-receipt__product {
  font-weight: 600;
  color: var(--color-accent-soft);
}
.celebrate-receipt__message {
  opacity: 0.9;
}
.celebrate-receipt--exit {
  animation: celebrate-receipt-exit 300ms ease-in forwards;
}
@keyframes celebrate-receipt-enter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes celebrate-receipt-exit {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
}
/* ── Reduced-motion: milestone & receipt ─────────────────── */
.celebrate-milestone--reduced {
  animation: none !important;
}
.celebrate-milestone--reduced .celebrate-milestone__content {
  animation: none !important;
  opacity: 1;
  transform: none;
}
.celebrate-milestone--reduced .celebrate-milestone__icon {
  animation: none !important;
  opacity: 1;
  transform: none;
}
.celebrate-receipt--reduced {
  animation: none !important;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* ============================================================
   Icon animations — the wrapper `animatedIcon()` renders.

   Structural only: every motion is driven frame-by-frame in JS
   (components/icon-animations.js), never by CSS keyframes. All this
   file does is stop the box from clipping glyphs that move outside
   their 24×24 viewBox — the wobble skews past it, and sprout-burst
   throws leaves well clear of it.
   ============================================================ */
.icon-anim {
  display: inline-flex;
}
.icon-anim svg {
  overflow: visible;
}
/* ============================================================
   Arbori — Header Component Styles
   Dual mode: onboarding (stepper) and full (nav).
   Ref: docs/component_design_principles.md §2 Navigation
   ============================================================ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Same paper as the page, edged by a double hairline — a running-head
     rule, not a floating app shell (audit §3.10) */
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
  /* Own compositor layer — without this, the mask-image on the chat
     scroll list squashes layers and nav tooltips render translucent
     behind the header rules */
  transform: translateZ(0);
}
.app-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background-color: var(--color-border);
  pointer-events: none;
}
.app-header--full {
  overflow: visible;
}
.header-inner {
  max-width: var(--max-width-dashboard);
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
/* ── Brand ────────────────────────────────────────────────── */
.header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  flex-shrink: 0;
}
.header-brand-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-ink);
  line-height: 1;
}
/* ── Onboarding Stepper ───────────────────────────────────── */
.onboarding-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
}
.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  position: relative;
  min-width: 60px;
}
.stepper-dot {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-normal) var(--ease-default);
  font-size: 0;
}
.stepper-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  transition: color var(--duration-normal) var(--ease-default);
  white-space: nowrap;
}
.stepper-connector {
  width: 32px;
  height: 2px;
  background-color: var(--color-border);
  flex-shrink: 0;
  margin-bottom: 18px;
  /* align with dots, not labels */
  transition: background-color var(--duration-normal) var(--ease-default);
}
/* Stepper states */
.stepper-completed .stepper-dot {
  background-color: var(--color-accent);
  border: 2px solid var(--color-accent);
}
.stepper-completed .stepper-label {
  color: var(--color-accent);
}
.stepper-completed + .stepper-connector {
  background-color: var(--color-accent);
}
.stepper-current .stepper-dot {
  background-color: var(--color-surface);
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.stepper-current .stepper-label {
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}
.stepper-pending .stepper-dot {
  background-color: var(--color-bg);
  border: 2px solid var(--color-border);
}
.stepper-pending .stepper-label {
  color: var(--color-muted);
}
/* ── Full Navigation ──────────────────────────────────────── */
.header-nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  justify-content: center;
  /* Allow the nav to shrink — never push credits/logout off-screen */
  min-width: 0;
}
.header-nav-group {
  display: flex;
  align-items: center;
  gap: 2px;
}
.header-nav-divider {
  width: 1px;
  height: 18px;
  background-color: var(--color-border);
  margin: 0 var(--space-3);
  flex-shrink: 0;
}
.header-nav-link {
  --nav-item-color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  transition: all var(--duration-fast) var(--ease-default);
  position: relative;
  white-space: nowrap;
}
.header-nav-link svg {
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-default);
}
.header-nav-link:hover {
  color: var(--nav-item-color);
  /* Header bg is --color-bg, so the hover tint must be a real step */
  background-color: color-mix(in srgb, var(--color-ink) 5%, transparent);
}
.header-nav-link:hover svg {
  color: var(--nav-item-color);
}
.header-nav-link--active {
  color: var(--nav-item-color);
  /* Product-color underline instead of a filled pill (audit §3.10) */
  box-shadow: inset 0 -2px 0 0 var(--nav-item-color);
  border-radius: 0;
  font-weight: var(--weight-semibold);
}
.header-nav-link--active svg {
  color: var(--nav-item-color);
}
.header-nav-link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-ink);
  color: var(--color-surface);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  /* No opacity transition: animating a pseudo-element's opacity
         makes the compositor render the tooltip translucent/stale
         behind the header rules on pages with scroll containers */
  z-index: 200;
}
.header-nav-link[data-tooltip]::before {
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: var(--color-ink);
  pointer-events: none;
  opacity: 0;
  z-index: 200;
}
.header-nav-link[data-tooltip]:hover::after,
.header-nav-link[data-tooltip]:hover::before {
  opacity: 1;
}
/* Dense mode (admin: many nav items) — icons + tooltips only, so the
   right-side actions stay on screen. Mobile bottom tray keeps labels. */
@media (min-width: 821px) {
  .app-header--dense .header-nav-link .header-nav-label {
    display: none;
  }
  .app-header--dense .header-nav-link {
    padding: 6px var(--space-2);
  }
}
/* Badge on nav items */
.header-nav-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background-color: var(--nav-item-color);
  color: var(--color-surface);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  line-height: 18px;
  text-align: center;
  margin-left: 2px;
}
/* ── Header Actions (right side) ──────────────────────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
/* ── Credit meter (live balance) ── */
/* The slot is now just a positioning context — the pill lives on
   .header-chip-trigger inside it, shared with the coach chip. */
.header-credit-meter {
  display: inline-flex;
  align-items: center;
}
.header-credit-meter[hidden] {
  display: none;
}
.header-credit-meter .header-chip-trigger:hover,
.header-credit-meter .header-chip-trigger:focus-visible {
  border-color: var(--color-accent);
}
.credit-meter-icon {
  display: inline-flex;
  color: var(--color-accent);
}
.credit-meter-bar {
  position: relative;
  width: 48px;
  height: 5px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  overflow: hidden;
}
.credit-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  transition: width 0.3s ease;
}
.header-credit-meter--low {
  border-color: var(--color-warning);
  color: var(--color-warning);
}
.header-credit-meter--low .credit-meter-icon,
.header-credit-meter--low .credit-meter-fill {
  color: var(--color-warning);
  background-color: var(--color-warning);
}
.header-credit-meter--empty {
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.header-credit-meter--empty .credit-meter-icon,
.header-credit-meter--empty .credit-meter-fill {
  color: var(--color-danger);
  background-color: var(--color-danger);
}
.header-menu-toggle {
  display: none;
  /* shown on mobile */
}
.header-logout {
  flex-shrink: 0;
}
/* ── Mobile Nav Drawer ────────────────────────────────────── */
.header-mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4) var(--space-4);
  z-index: 98;
  box-shadow: var(--shadow-card);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
}
.header-mobile-nav--open {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.header-mobile-nav-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted);
  padding: var(--space-3) var(--space-2) var(--space-1);
  margin-top: var(--space-2);
}
.header-mobile-nav-label:first-child {
  margin-top: 0;
}
.header-mobile-nav-link {
  --nav-item-color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  transition: all var(--duration-fast) var(--ease-default);
}
.header-mobile-nav-link:hover {
  background-color: var(--color-bg);
}
.header-mobile-nav-link:hover .header-mobile-nav-name {
  color: var(--nav-item-color);
}
.header-mobile-nav-link--active {
  background-color: color-mix(in srgb, var(--nav-item-color) 10%, transparent);
}
.header-mobile-nav-link--active .header-mobile-nav-name {
  color: var(--nav-item-color);
  font-weight: var(--weight-semibold);
}
.header-mobile-nav-link--active .header-mobile-nav-icon svg {
  color: var(--nav-item-color);
}
.header-mobile-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
}
.header-mobile-nav-icon svg {
  color: var(--nav-item-color);
}
.header-mobile-nav-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.header-mobile-nav-name {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  line-height: 1.2;
}
.header-mobile-nav-desc {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-muted);
  line-height: 1.3;
}
.header-mobile-nav-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-2) 0;
}
/* Credit meter inside the mobile menu — keep the pill shape, don't stretch */
.header-credit-meter--menu {
  align-self: flex-start;
  margin: var(--space-1) var(--space-3) var(--space-2);
}
/* Shared row button in the mobile menu (feedback, logout) */
.header-mobile-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  justify-content: flex-start;
  text-align: left;
}
.header-mobile-action:hover {
  background-color: var(--color-bg);
  color: var(--color-ink);
}
.header-mobile-action:hover svg {
  color: var(--color-ink);
}
.header-mobile-logout:hover {
  color: var(--color-danger);
}
.header-mobile-logout:hover svg {
  color: var(--color-danger);
}
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1090px) {
  /* The translateZ(0) compositor hack on .app-header makes the header the
     CONTAINING BLOCK for position: fixed descendants — so the fixed bottom
     tray and the drawer pin to the header box instead of the viewport (the
     tray rendered at the TOP of the page, covering the brand/hamburger row,
     and left a dead gap at the bottom). The hack only exists for desktop
     nav tooltips, which are display: none at this width — drop it here. */
  .app-header {
    transform: none;
  }
  .header-inner {
    padding: 0 var(--space-4);
  }
  /* Hide the desktop nav */
  .header-nav {
    display: none;
  }
  /* Show hamburger menu toggle */
  .header-menu-toggle {
    display: flex;
  }
  /* Tooltips don't make sense on touch/narrow viewports */
  .header-nav-link[data-tooltip]::after,
  .header-nav-link[data-tooltip]::before {
    display: none;
  }
  /* Full-mode logout lives in the hamburger; the chips do NOT. A status chip
     inside a closed menu cannot do a status chip's job, so they stay in the
     header and shed their text labels instead (below) to fit. */
  .app-header--full .header-logout {
    display: none;
  }
  /* Keep onboarding logout visible on mobile (no nav drawer in onboarding) */
  .app-header--onboarding .header-logout {
    display: flex;
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-2);
  }
  .header-brand-name {
    font-size: var(--text-base);
  }
  /* Stepper adjustments (onboarding) */
  .stepper-label {
    display: none;
  }
  .stepper-step {
    min-width: 36px;
  }
  .stepper-connector {
    width: 20px;
    margin-bottom: 0;
  }
}
@media (max-width: 820px) {
  :root {
    --bottom-nav-height: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .app-header--full {
    position: sticky;
    top: 0;
  }
  .app-header--full + *:not(.chat-with-sidebar) {
    padding-bottom: var(--bottom-nav-height);
  }
  .header-inner {
    min-height: var(--header-height);
  }
  /* The fixed bottom tray overlays the bottom edge of the open menu — pad so
     the last items (feedback, logout) stay reachable when scrolled. */
  .header-mobile-nav {
    padding-bottom: calc(var(--space-4) + var(--bottom-nav-height));
  }
  /* Onboarding logout stays visible (no hamburger menu in onboarding) */
  .app-header--onboarding .header-logout {
    display: flex !important;
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-2);
  }
  .header-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface);
    box-shadow: 0 -6px 22px color-mix(in srgb, var(--color-ink) 8%, transparent);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .header-nav-group {
    display: contents;
  }
  .header-nav-divider {
    display: none;
  }
  .header-nav-link {
    display: none;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border-radius: 0;
    padding: 8px 4px;
    font-size: 11px;
    text-align: center;
  }
  /* Primary destinations only — everything else lives in the hamburger menu so
     the tray never crams. Which ones those are is decided in header.js from
     the items THIS user can see (mobilePriority), not from a list of keys
     here: the previous hardcoded set named three admin-only pages, so a beta
     user's tray held two items and omitted the pages they actually had. */
  .header-nav-link--tray {
    display: inline-flex;
  }
  .header-nav-link[data-tooltip]::after,
  .header-nav-link[data-tooltip]::before {
    display: none;
  }
  .header-nav-link .header-nav-label {
    font-size: 10px;
  }
  .header-nav-badge {
    margin-left: 0;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 9px;
  }
}
/* ── Admin-Only Badge ─────────────────────────────────────── */
.header-nav-link--admin-only {
  opacity: 0.7;
  border-style: dashed;
}
.header-nav-admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  margin-left: 2px;
  color: var(--color-warning);
  vertical-align: middle;
}
/* ── Coach meter (coach posture) ──────────────────────────────────────────
   Sibling of the credit meter. The cadence indicator is a DIAL POSITION, not
   a fill: four pips with one marked. A bar filling toward a maximum would
   imply that daily is the target and weekly a shortfall, which is exactly the
   "engagement score" reading this product avoids. */
.header-coach-meter {
  display: inline-flex;
  align-items: center;
}
.header-coach-meter[hidden] {
  display: none;
}
.coach-meter-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.coach-meter-link:hover,
.coach-meter-link:focus-visible {
  border-color: var(--color-pulse);
  outline: none;
}
.coach-meter-icon {
  display: inline-flex;
  color: var(--color-pulse);
}
.coach-dial {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.coach-dial-pip {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-border);
}
/* Steps below the current one stay dim: they mark where the dial sits, they do
   not accumulate into a total. */
.coach-dial-pip--past {
  background-color: color-mix(in srgb, var(--color-pulse) 35%, transparent);
}
.coach-dial-pip--on {
  width: 6px;
  height: 6px;
  background-color: var(--color-pulse);
}
.coach-meter-label {
  color: var(--color-muted);
}
/* ── Chips on small screens ───────────────────────────────────────────────
   Both chips stay visible; they drop their text label and keep the part that
   carries the signal — the dial for the coach, the bar for credits. The panel
   is what the label was for, and it is one tap away. */
@media (max-width: 1090px) {
  .coach-meter-label,
  .credit-meter-label {
    display: none;
  }
  .header-chip-trigger {
    padding: 4px 8px;
    gap: var(--space-1);
  }
  .header-actions {
    gap: var(--space-2);
  }
  /* Anchored to the right edge so a panel opened from the last chip cannot
     run off-screen. */
  .header-chip-panel {
    right: 0;
    left: auto;
    min-width: 208px;
  }
}
/* ── Header chips (shared trigger + expand panel) ──────────────────────────
   Both the coach and credit chips use this. The trigger is the pill you see;
   the panel is the breakdown behind it, with one link out to the page where
   the thing is actually managed. */
.header-chip {
  position: relative;
  display: inline-flex;
}
.header-chip-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.header-chip-trigger:hover,
.header-chip-trigger:focus-visible {
  border-color: var(--color-pulse);
  outline: none;
}
.header-chip-trigger[aria-expanded="true"] {
  border-color: var(--color-pulse);
}
.header-chip-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 210;
  min-width: 224px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-ink) 12%, transparent);
}
.header-chip-panel[hidden] {
  display: none;
}
.chip-panel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 3px 0;
  font-size: var(--text-sm);
}
.chip-panel-row-label {
  color: var(--color-muted);
}
.chip-panel-row-value {
  color: var(--color-ink);
  font-weight: var(--weight-medium);
  text-align: right;
}
/* Secondary facts (renewal date, mood) sit back so the numbers lead. */
.chip-panel-row--muted .chip-panel-row-value {
  color: var(--color-muted);
  font-weight: 400;
}
.chip-panel-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-muted);
  font-style: italic;
}
.chip-panel-link {
  display: inline-block;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  width: 100%;
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
}
.chip-panel-link:hover,
.chip-panel-link:focus-visible {
  text-decoration: underline;
}
/* ============================================================
   Arbori — Activity Sidebar
   Collapsible right panel showing agent session overview and
   step-by-step run progress. Power-user feature, hidden by default.
   Ref: docs/app_rebuild_todo.md §4 Activity Stream → Sidebar, §3.2
   ============================================================ */
/* ── Layout: Chat + sidebar wrapper ──────────────────────── */
.chat-with-sidebar {
  display: flex;
  flex: 1;
  height: calc(100vh - var(--header-height));
  min-height: 0;
  gap: 0;
  overflow: hidden;
}
/* On mobile, the chat area = visible height − header − bottom nav.
   `--vvh` is the visualViewport height set by the JS driver (visual-viewport.js);
   it shrinks when the on-screen keyboard opens, so the chat area (and its
   internal thread) shrinks with it while the sticky header stays pinned. When
   the driver isn't mounted it falls back to 100dvh (the visible viewport minus
   browser chrome), with 100vh as the last resort for browsers without dvh. */
@media (max-width: 820px) {
  .chat-with-sidebar {
    height: calc(100vh - var(--header-height) - var(--bottom-nav-height));
    height: calc(var(--vvh, 100dvh) - var(--header-height) - var(--bottom-nav-height));
  }
}
/* When sidebar is open, the chat-layout shrinks */
.chat-with-sidebar .chat-layout {
  flex: 1;
  min-width: 0;
  padding-right: 0;
  /* sidebar takes the right space */
}
/* ── Sidebar Shell ────────────────────────────────────────── */
.activity-sidebar {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 0;
  transition: width var(--duration-normal) var(--ease-default);
  border-left: 1px solid var(--color-border);
  background-color: var(--color-surface);
  display: flex;
  flex-direction: column;
}
.activity-sidebar--open {
  width: 280px;
}
.activity-sidebar-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* ── Header ───────────────────────────────────────────────── */
.activity-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.activity-sidebar-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.activity-sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-1);
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}
.activity-sidebar-close:hover {
  color: var(--color-ink);
  background-color: var(--color-bg);
}
.activity-sidebar-close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
/* ── Body (scrollable session list) ──────────────────────── */
.activity-sidebar-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.activity-sidebar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.activity-sidebar-empty svg {
  opacity: 0.4;
}
/* ── Session Card ─────────────────────────────────────────── */
.sidebar-session {
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  overflow: hidden;
}
.sidebar-session--expanded {
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
  background-color: color-mix(in srgb, var(--color-accent-soft) 40%, var(--color-surface));
}
.sidebar-session-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.sidebar-session-header:hover {
  background-color: var(--color-surface);
}
.sidebar-session-header:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.sidebar-session-header--expanded {
  background-color: color-mix(in srgb, var(--color-accent-soft) 65%, var(--color-surface));
}
.sidebar-session-header--static {
  cursor: default;
}
.sidebar-session-info {
  flex: 1;
  min-width: 0;
}
.sidebar-session-topic {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-session-meta {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: 3px;
}
.sidebar-session-caret {
  transition: transform var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
}
.sidebar-session-caret--expanded {
  transform: rotate(0deg);
}
/* Session status badges */
.sidebar-status-badge {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}
.sidebar-status-badge--active {
  color: var(--color-success);
  background-color: var(--color-success-soft);
}
.sidebar-status-badge--running {
  color: var(--color-warning);
  background-color: var(--color-warning-soft);
  animation: sidebar-pulse 1.5s ease-in-out infinite;
}
.sidebar-status-badge--completed {
  color: var(--color-muted);
  background-color: var(--color-bg);
}
.sidebar-status-badge--failed {
  color: var(--color-danger);
  background-color: var(--color-danger-soft);
}
@keyframes sidebar-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
/* ── Run Items within a session ───────────────────────────── */
.sidebar-session-runs {
  border-top: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sidebar-session-runs-head {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: color-mix(in srgb, var(--color-accent) 70%, var(--color-ink));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sidebar-run {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-2);
}
.sidebar-run-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.sidebar-run-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.sidebar-run-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}
.sidebar-run-action:hover {
  border-color: var(--color-muted);
  background-color: var(--color-bg);
}
.sidebar-run-action:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.sidebar-run-action[disabled] {
  cursor: default;
}
.sidebar-run-action[disabled]:hover {
  border-color: var(--color-border);
  background-color: var(--color-surface);
}
.sidebar-run-prompt {
  font-size: var(--text-xs);
  color: var(--color-ink);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
.sidebar-run-summary-text {
  font-size: var(--text-xs);
  color: var(--color-ink);
  line-height: 1.45;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sidebar-run-origin {
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sidebar-run-meta {
  font-size: 11px;
  color: var(--color-muted);
  white-space: normal;
  flex-shrink: 0;
}
.sidebar-run-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.sidebar-run-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
  background-color: color-mix(in srgb, var(--color-accent-soft) 65%, var(--color-surface));
  color: var(--color-accent);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  line-height: 1.2;
}
.sidebar-run-link:hover {
  border-color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent-soft) 80%, var(--color-surface));
}
.sidebar-run-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.sidebar-run-link svg {
  flex-shrink: 0;
}
/* ── User-visible intents ────────────────────────────────── */
.sidebar-intents {
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-success) 18%, var(--color-border));
  background-color: color-mix(in srgb, var(--color-success-soft) 45%, var(--color-surface));
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sidebar-intents-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: color-mix(in srgb, var(--color-success) 72%, var(--color-ink));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sidebar-intents-copy {
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.45;
}
.sidebar-intents-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sidebar-intent {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}
.sidebar-intent--active {
  border-color: color-mix(in srgb, var(--color-success) 28%, var(--color-border));
}
.sidebar-intent--deferred {
  border-color: color-mix(in srgb, var(--color-warning) 26%, var(--color-border));
}
.sidebar-intent-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.sidebar-intent-copy {
  min-width: 0;
  flex: 1;
}
.sidebar-intent-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  line-height: 1.4;
}
.sidebar-intent-rationale {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.45;
}
.sidebar-intent-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  flex-shrink: 0;
}
.sidebar-intent-status--active {
  color: var(--color-success);
  background-color: var(--color-success-soft);
}
.sidebar-intent-status--pending {
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
}
.sidebar-intent-status--deferred {
  color: var(--color-warning);
  background-color: var(--color-warning-soft);
}
.sidebar-intent-meta {
  font-size: 10px;
  color: var(--color-muted);
  line-height: 1.35;
}
.sidebar-intent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sidebar-intent-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--color-success) 24%, var(--color-border));
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--color-success-soft) 55%, var(--color-surface));
  color: color-mix(in srgb, var(--color-success) 84%, var(--color-ink));
  font-size: 11px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}
.sidebar-intent-action:hover {
  border-color: var(--color-success);
  background-color: color-mix(in srgb, var(--color-success-soft) 75%, var(--color-surface));
}
.sidebar-intent-action:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.sidebar-intent-action--ghost {
  border-color: var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-muted);
}
.sidebar-intent-action--ghost:hover {
  border-color: var(--color-muted);
  color: var(--color-ink);
  background-color: var(--color-bg);
}
/* ── Upcoming scheduled work ─────────────────────────────── */
.sidebar-upcoming {
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
  background-color: color-mix(in srgb, var(--color-accent-soft) 32%, var(--color-surface));
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sidebar-upcoming-head {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: color-mix(in srgb, var(--color-accent) 75%, var(--color-ink));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sidebar-upcoming-head--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.sidebar-upcoming-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sidebar-upcoming-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}
.sidebar-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sidebar-upcoming-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}
.sidebar-upcoming-item--compact {
  gap: 2px;
  padding: 8px 10px;
}
.sidebar-upcoming-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.sidebar-upcoming-title-wrap {
  min-width: 0;
  flex: 1;
}
.sidebar-upcoming-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
/* "Do it now" while the handler is working. `spin` is declared globally in
   components/loading.less. */
.sidebar-upcoming-spinner {
  animation: spin 1s linear infinite;
}
.sidebar-upcoming-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.sidebar-upcoming-inline-meta {
  margin-top: 2px;
  font-size: 10px;
  color: var(--color-muted);
  line-height: 1.35;
}
.sidebar-upcoming-summary {
  font-size: var(--text-xs);
  color: var(--color-ink);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sidebar-upcoming-meta {
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.4;
}
.sidebar-upcoming-more {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  font-size: 11px;
  font-weight: var(--weight-medium);
  cursor: pointer;
}
/* Active run step list */
.sidebar-run-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-3);
  border-left: 1.5px solid var(--color-border);
}
.sidebar-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1.4;
}
.sidebar-step svg {
  flex-shrink: 0;
}
.sidebar-step--active {
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}
.sidebar-step--done {
  color: var(--color-muted);
  opacity: 0.7;
}
.sidebar-step--error {
  color: var(--color-danger);
}
/* ── Toggle button (shown in chat thread header) ──────────── */
.chat-activity-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}
.chat-activity-toggle:hover {
  color: var(--color-ink);
  border-color: var(--color-muted);
}
.chat-activity-toggle--active {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
}
/* ── "Back to Chat" bridge (shown on product pages) ──────── */
.back-to-chat-bridge {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-default);
}
.back-to-chat-bridge:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.back-to-chat-bridge svg {
  color: var(--color-accent);
}
/* ── Mobile: slide-out panel ──────────────────────────────── */
@media (max-width: 1100px) {
  .activity-sidebar {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    width: 0;
    border-left: none;
    box-shadow: none;
    z-index: 80;
    transition: width var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
  }
  .activity-sidebar--open {
    width: min(300px, 80vw);
    box-shadow: -8px 0 32px color-mix(in srgb, var(--color-ink) 12%, transparent);
  }
  /* Backdrop for mobile sidebar */
  .activity-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 79;
    background-color: color-mix(in srgb, var(--color-ink) 30%, transparent);
  }
  .activity-sidebar-backdrop--visible {
    display: block;
  }
}
/* ============================================================
   Status Banner — Founder-set status/maintenance strip (VAL-08)
   Mounted on <body> above the app root; dismissible per session.
   ============================================================ */
.status-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent-soft);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.status-banner--warning {
  background-color: var(--color-warning-soft);
  color: var(--color-warning);
}
.status-banner-message {
  text-align: center;
}
.status-banner-dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-xs);
  opacity: 0.7;
}
.status-banner-dismiss:hover {
  opacity: 1;
}
/* ============================================================
   Feedback — Floating feedback button + modal bits (VAL-09)
   ============================================================ */
.feedback-button {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.feedback-button:hover {
  background-color: var(--color-accent-strong);
}
/* On mobile the pill would overlap the chat composer / bottom nav tray —
   hide it; "Send feedback" lives in the header hamburger menu instead
   (same breakpoint the header switches to the menu). */
@media (max-width: 900px) {
  .feedback-button {
    display: none;
  }
}
.feedback-intro {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.feedback-textarea {
  width: 100%;
  resize: vertical;
}
.feedback-error {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-warning);
}
.feedback-thanks {
  padding: var(--space-4) 0;
  text-align: center;
}
/* First-reply push notification prompt — a floating, dismissible pill. */
.push-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-4);
  max-width: min(calc(100vw - var(--space-6)), 24rem);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.push-prompt-text {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.push-prompt-actions {
  display: inline-flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.push-prompt-btn {
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
.push-prompt-enable {
  background: var(--color-accent);
  color: var(--color-surface);
}
.push-prompt-enable:hover {
  background: var(--color-accent-strong);
}
.push-prompt-dismiss {
  background: transparent;
  color: var(--color-muted);
}
.push-prompt-dismiss:hover {
  color: var(--color-ink);
}
/* ── Page styles ─────────────────────────────────────────── */
/* ============================================================
   Auth Pages — Login, Signup, Email Verify, Password Reset
   Ref: docs/component_design_principles.md §13
   ============================================================ */
/* ── Full-page auth layout ───────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: linear-gradient(160deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 92%, var(--color-border)) 50%, var(--color-bg) 100%);
}
/* ── Auth card (two-panel) ───────────────────────────────── */
.auth-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--max-width-auth);
  width: 100%;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  min-height: 560px;
}
/* ── Hero panel (left) ───────────────────────────────────── */
.auth-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
  background: linear-gradient(135deg, var(--color-accent-soft) 0%, color-mix(in srgb, var(--color-accent-soft) 82%, var(--color-surface)) 100%);
  position: relative;
  overflow: hidden;
  /* Subtle pattern overlay */
}
.auth-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--color-accent) 6%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.auth-brand .auth-brand-icon {
  color: var(--color-accent);
}
.auth-brand .auth-brand-icon svg {
  width: 28px;
  height: 28px;
}
.auth-brand .auth-brand-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
.auth-headline {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-8);
}
/* ── Feature bullets ─────────────────────────────────────── */
.auth-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.auth-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}
.auth-feature .auth-feature-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.auth-feature .auth-feature-icon svg {
  width: 20px;
  height: 20px;
}
/* ── Form panel (right) ──────────────────────────────────── */
.auth-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
}
.auth-form-header {
  margin-bottom: var(--space-8);
}
.auth-form-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}
.auth-form-header p {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.auth-form {
  display: flex;
  flex-direction: column;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.form-row .form-group {
  margin-top: 0;
}
.form-group + .form-row {
  margin-top: var(--space-5);
}
.form-row + .form-group {
  margin-top: var(--space-5);
}
.auth-form-footer {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.auth-form-footer a {
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}
.auth-form-footer a:hover {
  text-decoration: underline;
}
.auth-form-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}
.auth-form-link:hover {
  text-decoration: underline;
}
/* ── Single-panel auth (verify, reset confirmation) ──────── */
.auth-card-single {
  display: flex;
  flex-direction: column;
  max-width: 480px;
  width: 100%;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-12) var(--space-8);
  text-align: center;
}
.auth-status-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto var(--space-6);
}
.auth-status-icon svg {
  width: 28px;
  height: 28px;
}
.auth-status-icon.status-success {
  background-color: var(--color-success-soft);
  color: var(--color-success);
}
.auth-status-icon.status-error {
  background-color: var(--color-danger-soft);
  color: var(--color-danger);
}
.auth-status-icon.status-pending {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .auth-page {
    padding: var(--space-4);
    align-items: flex-start;
    padding-top: var(--space-10);
  }
  .auth-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .auth-hero {
    padding: var(--space-8) var(--space-6);
    display: none;
    /* Hide hero on mobile — form is more important */
  }
  .auth-form-panel {
    padding: var(--space-8) var(--space-6);
  }
}
/* ── Google Sign-In ──────────────────────────────────────── */
.google-auth-container {
  width: 100%;
  margin-top: var(--space-4);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border);
}
.google-auth-wrapper {
  width: 100%;
}
.google-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  height: 44px;
  padding: 0 var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all 0.15s ease;
}
.google-auth-btn:hover {
  background-color: var(--color-bg);
  border-color: var(--color-muted);
  box-shadow: var(--shadow-xs);
}
.google-auth-btn:active {
  transform: translateY(1px);
}
.google-auth-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
/* ============================================================
   Landing Page
   Public hero + product showcase + CTA.
   ============================================================ */
/* ── Hero ────────────────────────────────────────────────── */
.landing-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.landing-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-6);
  text-align: center;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--color-accent-soft) 0%, transparent 70%), var(--color-bg);
}
.landing-hero-inner {
  max-width: 680px;
}
.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.landing-brand-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  color: var(--color-accent);
}
.landing-headline {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  margin-bottom: var(--space-5);
}
.landing-subheadline {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  max-width: 540px;
  margin: 0 auto var(--space-10);
}
.landing-cta-group {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}
/* ── Product Suite Grid ──────────────────────────────────── */
.landing-products {
  padding: var(--space-16) var(--space-6);
  background: var(--color-surface);
}
.landing-products-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.landing-section-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  text-align: center;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.landing-section-subtitle {
  text-align: center;
  font-size: var(--text-md);
  color: var(--color-muted);
  max-width: 580px;
  margin: 0 auto var(--space-12);
  line-height: var(--leading-relaxed);
}
.landing-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.landing-product-card {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  text-align: center;
  transition: border-color var(--duration-normal) var(--ease-default);
}
.landing-product-card:hover {
  border-color: var(--color-ink);
}
.landing-product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-4);
}
.landing-product-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.landing-product-tagline {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-normal);
}
/* ── Differentiator ───────────────────────────────────────── */
.landing-differentiator {
  padding: var(--space-16) var(--space-6);
  background: var(--color-bg);
}
.landing-differentiator-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.landing-diff-text {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
}
/* ── Privacy Callout ─────────────────────────────────────── */
.landing-privacy {
  padding: var(--space-10) var(--space-6);
  background: var(--color-surface);
}
.landing-privacy-inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.landing-privacy-icon {
  flex-shrink: 0;
  margin-top: var(--space-1);
}
.landing-privacy-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.landing-privacy-text {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-relaxed);
}
/* ── Bottom CTA ──────────────────────────────────────────── */
.landing-bottom-cta {
  padding: var(--space-16) var(--space-6);
  text-align: center;
}
.landing-bottom-cta h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
.landing-bottom-cta p {
  font-size: var(--text-md);
  color: var(--color-muted);
  margin-bottom: var(--space-8);
}
/* ── Footer ──────────────────────────────────────────────── */
.landing-footer {
  padding: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .landing-hero {
    padding: var(--space-12) var(--space-4);
  }
  .landing-headline {
    font-size: var(--text-2xl);
  }
  .landing-subheadline {
    font-size: var(--text-base);
  }
  .landing-cta-group {
    flex-direction: column;
    align-items: stretch;
  }
  .landing-product-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .landing-product-grid {
    grid-template-columns: 1fr;
  }
  .landing-products {
    padding: var(--space-10) var(--space-4);
  }
  .landing-bottom-cta {
    padding: var(--space-10) var(--space-4);
  }
}
/* ============================================================
   Plan Selection — Tier cards, comparison, payment modal
   Ref: docs/component_design_principles.md §13
   ============================================================ */
.plan-select-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-12) var(--space-6);
  background: linear-gradient(160deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 92%, var(--color-border)) 50%, var(--color-bg) 100%);
}
.plan-select-header {
  text-align: center;
  margin-bottom: var(--space-8);
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.plan-select-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  margin: 0;
}
.plan-select-header p {
  font-size: var(--text-md);
  color: var(--color-muted);
  margin: 0;
}
/* ── Billing interval toggle ─────────────────────────────── */
.plan-billing-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: var(--space-8);
}
.plan-billing-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: calc(var(--radius-sm) - 2px);
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}
.plan-billing-btn--active {
  background-color: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-xs);
}
.plan-billing-save-badge {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--color-success);
  background-color: var(--color-success-soft);
  padding: 2px 6px;
  border-radius: var(--radius-full);
}
/* ── Tier card grid ──────────────────────────────────────── */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  max-width: 960px;
  width: 100%;
  margin-bottom: var(--space-10);
}
.plan-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 2px solid var(--color-border);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-normal) var(--ease-default);
}
.plan-card:hover {
  border-color: var(--color-ink);
}
.plan-card.plan-recommended {
  border-color: var(--color-accent);
  border-top-width: 3px;
  position: relative;
}
.plan-card.plan-recommended::before {
  content: "Recommended";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-accent);
  color: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.plan-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: var(--space-2);
}
.plan-price-currency {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  align-self: flex-start;
  margin-top: 6px;
}
.plan-price-number {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  line-height: 1;
}
.plan-interval {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-muted);
  margin-left: var(--space-1);
}
.plan-description {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}
.plan-features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.plan-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.plan-feature svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 2px;
}
.plan-feature.plan-feature-missing {
  color: var(--color-muted);
}
.plan-feature.plan-feature-missing svg {
  color: var(--color-border);
}
/* ── Feature comparison table ────────────────────────────── */
.plan-comparison {
  max-width: 800px;
  width: 100%;
  margin-bottom: var(--space-8);
}
.plan-comparison-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  text-align: center;
  margin-bottom: var(--space-6);
}
.plan-comparison-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.plan-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.plan-comparison-table thead th {
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.plan-comparison-table thead th.plan-comparison-feature-col {
  text-align: left;
}
.plan-comparison-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-fast) var(--ease-default);
}
.plan-comparison-table tbody tr:last-child {
  border-bottom: none;
}
.plan-comparison-table tbody tr:hover {
  background-color: var(--color-bg);
}
.plan-comparison-table tbody td {
  padding: var(--space-3) var(--space-5);
  text-align: center;
  vertical-align: middle;
}
.plan-comparison-table tbody td.plan-comparison-feature-label {
  text-align: left;
  color: var(--color-ink);
  font-weight: var(--weight-medium);
}
.plan-comparison-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.plan-comparison-check svg {
  color: var(--color-accent);
}
.plan-comparison-minus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.plan-comparison-minus svg {
  color: var(--color-border);
}
/* ── Skip link ───────────────────────────────────────────── */
.plan-skip {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.plan-skip a {
  color: var(--color-accent);
  font-weight: var(--weight-medium);
  text-underline-offset: 2px;
}
.plan-skip a:hover {
  text-decoration: underline;
}
/* ── Payment modal overrides ─────────────────────────────── */
.payment-modal-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-soft);
  margin-bottom: var(--space-5);
}
.payment-modal-product-name {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.payment-modal-product-price {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}
.payment-modal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.payment-modal-form .form-label {
  margin-bottom: var(--space-1);
}
/* Stripe Card Element container */
.payment-card-element {
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-default);
  min-height: 44px;
}
.payment-card-element.StripeElement--focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}
.payment-card-element.StripeElement--invalid {
  border-color: var(--color-danger);
}
.payment-card-error {
  font-size: var(--text-sm);
  color: var(--color-danger);
  min-height: 20px;
  margin-top: var(--space-1);
}
.payment-modal-trust {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.payment-modal-trust svg {
  opacity: 0.6;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .plan-select-page {
    padding: var(--space-8) var(--space-4);
  }
  .plan-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .plan-comparison-table-wrap {
    border-radius: var(--radius-md);
  }
}
/* ============================================================
   Settings Page
   ============================================================ */
.settings-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-8) var(--space-4);
  background: var(--color-bg);
}
.settings-container {
  max-width: 920px;
  margin: 0 auto;
}
/* ── Header ──────────────────────────────────────────────── */
.settings-header {
  margin-bottom: var(--space-6);
}
.settings-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
/* ── Tab Navigation ──────────────────────────────────────── */
.settings-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}
.settings-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}
.settings-tab:hover {
  color: var(--color-ink);
}
.settings-tab--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.settings-tab svg {
  opacity: 0.7;
}
.settings-tab--active svg {
  opacity: 1;
}
/* ── Content Sections ────────────────────────────────────── */
.settings-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.settings-section {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
}
.settings-section-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.settings-section-desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-5);
  line-height: var(--leading-relaxed);
}
.settings-coach-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.settings-coach-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-grove);
}
/* ── Field Display ───────────────────────────────────────── */
.settings-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.settings-field:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.settings-field:first-of-type {
  padding-top: 0;
}
.settings-field-label {
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-weight: var(--weight-medium);
}
.settings-field-value {
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.settings-readonly-input {
  background: var(--color-bg);
  color: var(--color-muted);
}
/* ── Provider Badges ─────────────────────────────────────── */
.settings-providers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.settings-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border: 1px solid var(--color-border);
}
.settings-badge--password {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-color: var(--color-accent-soft);
}
.settings-badge--password svg {
  color: var(--color-accent);
}
.settings-badge--google {
  background: var(--color-surface);
  color: var(--color-ink);
}
.settings-badge--google svg {
  flex-shrink: 0;
}
/* ── Set Password Form ───────────────────────────────────── */
.settings-form {
  width: 100%;
}
.settings-form--compact {
  max-width: 420px;
}
.settings-inline-actions {
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.settings-inline-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.settings-radio-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.settings-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
}
.settings-radio:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.settings-radio input[type="radio"] {
  accent-color: var(--color-accent);
}
.settings-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
}
.settings-toggle:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.settings-toggle input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}
.settings-toggle span {
  line-height: 1.4;
}
.settings-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.settings-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 75%, var(--color-bg));
  padding: var(--space-4);
}
.settings-preview p {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.settings-preview-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.settings-preview-desc {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}
.settings-preview-tone {
  display: inline-block;
  margin-top: var(--space-1);
  font-style: italic;
  color: var(--color-muted);
  font-size: var(--text-xs);
}
.settings-advanced {
  margin-top: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
}
.settings-advanced-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  list-style: none;
}
.settings-advanced-summary::-webkit-details-marker {
  display: none;
}
.settings-advanced[open] .settings-advanced-summary {
  border-bottom: 1px solid var(--color-border);
}
.settings-advanced-content {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}
.settings-advanced-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--color-danger-soft);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, var(--color-danger-soft));
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.settings-advanced-warning p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-danger);
}
.settings-advanced-hint {
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}
/* ── Security Subsection ─────────────────────────────────── */
.settings-security-subsection {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.settings-subsection-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}
/* ── Billing Plan Card ───────────────────────────────────── */
.billing-plan-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.billing-plan-card--paid {
  border-color: var(--color-accent-soft);
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-accent-soft) 200%);
}
.billing-plan-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.billing-plan-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.billing-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  background: var(--color-success-soft);
  color: var(--color-success);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.billing-plan-free-note {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.billing-plan-desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}
.billing-plan-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .settings-page {
    padding: var(--space-4) var(--space-3);
  }
  .settings-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .settings-tabs::-webkit-scrollbar {
    display: none;
  }
  .settings-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .settings-section {
    padding: var(--space-4);
  }
  .settings-field {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  .settings-radio-group {
    flex-direction: column;
  }
  .settings-advanced-content {
    padding: var(--space-3);
  }
}
/* ── Features Tab ─────────────────────────────────────────── */
.features-tab .features-notice {
  font-size: var(--text-sm, 13px);
  color: var(--color-muted);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-border);
}
.features-table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.features-table th,
.features-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.features-table th {
  font-size: var(--text-xs, 11px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  font-weight: 600;
}
.features-table td {
  font-size: var(--text-sm, 13px);
  vertical-align: middle;
}
.features-source-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.features-source-badge--default {
  background: var(--color-border);
  color: var(--color-muted);
}
.features-source-badge--role {
  background: color-mix(in srgb, var(--color-compass) 15%, transparent);
  color: var(--color-compass);
}
.features-source-badge--user {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
}
/* Toggle switch — same as admin but scoped to app */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-switch-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-border);
  border-radius: 10px;
  transition: background 0.2s ease;
}
.toggle-switch-slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: var(--color-surface);
  border-radius: 50%;
  transition: transform 0.2s ease;
}
input:checked + .toggle-switch-slider {
  background: var(--color-accent);
}
input:checked + .toggle-switch-slider::before {
  transform: translateX(16px);
}
input:focus-visible + .toggle-switch-slider {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.features-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.features-reset-btn {
  font-size: var(--text-xs, 11px);
  color: var(--color-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.features-reset-btn:hover {
  color: var(--color-ink);
  border-color: var(--color-muted);
}
/* ── Privacy Tab ── */
.privacy-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.privacy-block h3,
.privacy-block h4 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.privacy-note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}
.privacy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.privacy-list li {
  font-size: var(--text-sm);
  color: var(--color-muted);
  padding-left: var(--space-4);
  position: relative;
}
.privacy-list li::before {
  content: "•";
  position: absolute;
  left: var(--space-1);
  color: var(--color-border);
}
.privacy-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.privacy-status {
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.settings-section--danger {
  border: 1px solid var(--color-danger);
  border-left: 3px solid var(--color-danger);
}
.privacy-confirm {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-danger) 5%, transparent);
  border-radius: var(--radius-md);
}
.privacy-confirm-text {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}
/* ── Settings Logout ──────────────────────────────────────── */
.settings-logout-section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
  margin-top: var(--space-2);
}
.settings-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}
.settings-logout-btn:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 6%, transparent);
}
.settings-logout-btn:hover svg {
  color: var(--color-danger);
}
/* ── How we're working together (cadence) ──────────────────────────────────
   State first, evidence second, control third. No score anywhere: the fatigue
   number is a scheduling trigger with hysteresis, not a measure of the person,
   and rendering it as a level would imply a precision that isn't there. */
.cadence-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.cadence-row:last-of-type {
  border-bottom: 0;
}
.cadence-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.cadence-goal {
  font-weight: var(--weight-medium);
}
.cadence-status {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.cadence-status--running {
  background: color-mix(in srgb, var(--color-pulse) 10%, transparent);
  color: var(--color-pulse);
}
/* Easing off and paused are states to understand, not failures to alarm
   about — muted, never red. */
.cadence-status--easing,
.cadence-status--paused,
.cadence-status--not_ready {
  background: color-mix(in srgb, var(--color-muted) 12%, transparent);
  color: var(--color-muted);
}
.cadence-evidence {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.cadence-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.cadence-control select {
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.billing-section {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.billing-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.billing-current-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
}
.billing-current-card--paid {
  border-color: color-mix(in srgb, var(--color-accent) 46%, var(--color-border));
  background: linear-gradient(145deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-accent-soft) 65%, var(--color-surface)) 100%);
}
.billing-current-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.billing-current-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}
.billing-current-price {
  margin: 2px 0 0;
  font-size: var(--text-md);
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}
.billing-current-price span {
  color: var(--color-muted);
  font-weight: var(--weight-medium);
}
.billing-current-meta {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.billing-current-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  border: 1px solid transparent;
}
.billing-current-status--paid {
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));
  background: var(--color-success-soft);
}
.billing-current-status--free {
  color: var(--color-muted);
  border-color: var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 60%, var(--color-surface));
}
.billing-current-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.billing-upgrade-inline {
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent-soft) 32%, var(--color-surface));
  padding: var(--space-4);
}
.billing-upgrade-inline h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.billing-upgrade-inline ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.billing-upgrade-inline li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
}
.billing-upgrade-inline li svg {
  color: var(--color-accent);
  flex-shrink: 0;
}
.billing-methods-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.billing-method-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.billing-method-main {
  min-width: 0;
}
.billing-method-brand {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: var(--radius-full);
  padding: 0 var(--space-2);
  background: color-mix(in srgb, var(--color-ink) 8%, var(--color-surface));
  color: var(--color-ink);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
}
.billing-method-number {
  margin: var(--space-1) 0 0;
  font-size: var(--text-base);
  color: var(--color-ink);
}
.billing-method-meta {
  margin: 2px 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.billing-method-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.billing-method-default {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: var(--radius-full);
  padding: 0 var(--space-2);
  color: var(--color-accent-strong);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  background: var(--color-accent-soft);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}
.billing-empty-row {
  min-height: 70px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.billing-history-table-wrap {
  overflow-x: auto;
}
.billing-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.billing-history-table th,
.billing-history-table td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3);
  text-align: left;
  white-space: nowrap;
}
.billing-history-table th {
  color: var(--color-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-semibold);
}
.billing-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
}
.billing-status--succeeded,
.billing-status--paid {
  border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));
  color: var(--color-success);
  background: var(--color-success-soft);
}
.billing-status--failed {
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));
  color: var(--color-danger);
  background: var(--color-danger-soft);
}
.billing-status--pending {
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
  color: var(--color-warning);
  background: var(--color-warning-soft);
}
.billing-modal-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.billing-modal-copy {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.billing-loss-list {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.billing-plan-option {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  cursor: pointer;
}
.billing-plan-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.billing-plan-option--active {
  border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border));
  background: var(--color-accent-soft);
}
.billing-plan-option-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.billing-plan-option-content strong {
  font-size: var(--text-base);
  color: var(--color-ink);
}
.billing-plan-option-content span {
  font-size: var(--text-sm);
  color: var(--color-accent-strong);
}
.billing-plan-option-content small {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-normal);
}
.billing-card-element {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-height: 44px;
  padding: 12px;
}
.billing-modal-error {
  min-height: 20px;
  margin: 0;
  color: var(--color-danger);
  font-size: var(--text-sm);
}
/* ── Usage panel ─────────────────────────────────────────── */
.billing-usage-meter {
  margin-top: var(--space-3);
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.billing-usage-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.billing-usage-remaining {
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-ink);
}
.billing-usage-total {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.billing-usage-bar {
  position: relative;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}
.billing-usage-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  transition: width 0.3s ease;
}
.billing-usage-meter--low .billing-usage-bar-fill {
  background: var(--color-warning);
}
.billing-usage-meter--low .billing-usage-remaining {
  color: var(--color-warning);
}
.billing-usage-meter--empty .billing-usage-bar-fill {
  background: var(--color-danger);
}
.billing-usage-meter--empty .billing-usage-remaining {
  color: var(--color-danger);
}
/* ── Non-expiring credit balance (sits under the period meter) ────────── */
.billing-perpetual-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.billing-perpetual-row svg {
  color: var(--color-accent);
  flex-shrink: 0;
}
.billing-perpetual-value {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.billing-perpetual-label {
  color: var(--color-muted);
}
/* ── Proactive budget control ─────────────────────────────────────────── */
.billing-proactive {
  margin-top: var(--space-3);
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.billing-proactive-controls {
  margin-top: 14px;
}
.billing-proactive-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  /* the number field only ever holds a small integer — don't stretch it */
}
.billing-proactive-input-row .form-input {
  width: 120px;
  flex: 0 0 auto;
}
/* ── Credits-per-action legend (Usage panel subtitle) ─────────────────── */
.credit-cost-legend {
  margin: 10px 0 4px;
}
.credit-cost-legend-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: 6px;
}
.credit-cost-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.credit-cost-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-xs);
  cursor: help;
  /* the help glyph sits muted until the chip is hovered/focused */
}
.credit-cost-chip svg {
  color: var(--color-muted);
  flex-shrink: 0;
}
.credit-cost-chip:hover,
.credit-cost-chip:focus-visible {
  border-color: var(--color-accent);
  outline: none;
}
.credit-cost-chip:hover svg,
.credit-cost-chip:focus-visible svg {
  color: var(--color-accent);
}
.credit-cost-chip-label {
  color: var(--color-ink);
}
.credit-cost-chip-value {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}
/* CSS-only tooltip: the example copy, revealed above the chip on hover/focus.
   No JS, no library. Constrained width + wrapping so it never widens the page. */
.credit-cost-chip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.credit-cost-chip[data-tooltip]:hover::after,
.credit-cost-chip[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}
.billing-usage-breakdown {
  margin-top: 16px;
}
.billing-usage-breakdown-title {
  margin: 0 0 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.billing-usage-row {
  margin-bottom: 12px;
}
.billing-usage-row:last-child {
  margin-bottom: 0;
}
.billing-usage-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 5px;
}
.billing-usage-row-label {
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.billing-usage-row-value {
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.billing-usage-row-value small {
  color: var(--color-muted);
}
.billing-usage-rowbar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}
.billing-usage-rowbar span {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-accent) 70%, var(--color-surface));
}
/* ── Tier comparison ─────────────────────────────────────── */
.billing-tier-compare {
  margin-top: 20px;
}
.billing-tier-compare-title {
  margin: 0 0 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.billing-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.billing-tier-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.billing-tier-card--current {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
}
.billing-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.billing-tier-name {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.billing-tier-badge {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-surface);
}
.billing-tier-price {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.billing-tier-price span {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-muted);
}
.billing-tier-credits {
  margin: 2px 0 12px;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.billing-tier-features {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.billing-tier-features li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.billing-tier-features li svg {
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.billing-tier-cta {
  width: 100%;
  margin-top: auto;
}
@media (max-width: 780px) {
  .billing-section-head,
  .billing-current-main,
  .billing-method-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .billing-method-actions {
    justify-content: flex-start;
  }
  .billing-current-actions {
    width: 100%;
  }
  .billing-current-actions .btn {
    width: 100%;
  }
}
.billing-bundle-note {
  margin: 0 0 12px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.billing-bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.billing-bundle-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.billing-bundle-credits {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.billing-bundle-name {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.billing-bundle-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.billing-bundle-price {
  margin-top: 4px;
  font-weight: var(--weight-semibold);
}
.billing-bundle-buy {
  margin-top: 10px;
}
/* ── Automatic top-up ───────────────────────────────────────────────────────
   Standing authorization to charge a card, so the layout stays plain and the
   consequence line sits directly above the Save button rather than being
   tucked under the heading where it would be read before it matters. */
.billing-topup-row {
  margin-bottom: var(--space-3);
}
.billing-topup-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--color-ink);
  font-size: 14px;
}
.billing-topup-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
/* Kept in the DOM rather than removed: the values stay put while the switch is
   off, so turning it back on restores what was chosen instead of resetting. */
.billing-topup-fields--off {
  opacity: 0.45;
  pointer-events: none;
}
.billing-topup-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 200px;
  flex: 1 1 200px;
}
.billing-topup-note {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: 13px;
}
.billing-topup-actions {
  display: flex;
  justify-content: flex-start;
}
/* A failed automatic charge. Tinted rather than muted: the switch may have
   turned ITSELF off, and finding that out by noticing the toggle moved would be
   its own unpleasant surprise. */
.billing-topup-error {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-warning, var(--color-accent));
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 13px;
}
.billing-topup-error-when {
  color: var(--color-muted);
  margin-left: var(--space-1);
}
/* ============================================================
   Roots — Second Brain
   All styles for the Roots product surface.
   Uses --color-roots (soil/umber pigment) as the identity accent.
   Ref: docs/app_rebuild_todo.md §5 Second Brain
   ============================================================ */
/* ── Page Shell ──────────────────────────────────────────── */
.roots-page {
  min-height: 100vh;
  background: var(--color-bg);
}
.roots-body {
  display: flex;
  flex-direction: column;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  gap: var(--space-6);
}
.roots-body .empty-state {
  padding: var(--space-7) 0 var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.roots-body .empty-state-title {
  margin: 0;
}
.roots-body .empty-state-message {
  margin: 0;
  line-height: var(--leading-relaxed);
  max-width: 48ch;
}
.roots-body .empty-state-cta {
  margin-top: var(--space-1);
}
/* ── Page Header ─────────────────────────────────────────── */
.roots-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.roots-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-roots);
}
.roots-page-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  line-height: var(--leading-tight);
}
.roots-page-subtitle {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-relaxed);
}
/* ── Tab Bar ─────────────────────────────────────────────── */
.roots-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
  /* Room at the end so the last tab clears the fade when scrolled fully right. */
  padding-right: var(--space-8);
  /* Scroll affordance: fade the right edge so it's obvious the row continues
     past the viewport when the tabs overflow (the scrollbar is hidden). The
     fade sits over the trailing padding when nothing overflows, so it never
     clips a tab's label. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.roots-tabs::-webkit-scrollbar {
  display: none;
}
.roots-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}
.roots-tab:hover {
  color: var(--color-ink);
}
.roots-tab--active {
  color: var(--color-roots);
  border-bottom-color: var(--color-roots);
}
.roots-tab .roots-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  background: var(--color-roots);
  color: var(--color-surface);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 1;
}
.roots-tab:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
/* ── Toolbar ─────────────────────────────────────────────── */
.roots-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
@media (pointer: coarse) {
  .roots-toolbar .roots-card-action-btn {
    width: 44px;
    height: 44px;
  }
}
.roots-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.roots-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.roots-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
  /* Filter controls are accent everywhere (audit §4.3) — product
     colors are identity, never controls */
}
.roots-filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.roots-filter-btn--active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.roots-search-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-ink);
  min-width: 200px;
  max-width: 280px;
}
.roots-search-input:focus-within {
  border-color: var(--color-roots);
  outline: 2px solid color-mix(in srgb, var(--color-roots) 20%, transparent);
  outline-offset: 1px;
}
.roots-search-input input {
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-family: var(--font-body);
  width: 100%;
}
.roots-search-input input::placeholder {
  color: var(--color-muted);
}
/* ── Two-Panel Layout ────────────────────────────────────── */
.roots-two-panel {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-4);
  min-height: 600px;
  align-items: start;
}
.roots-panel-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  padding-right: var(--space-1);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.roots-panel-list .empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-5);
}
.roots-panel-list .empty-state-title {
  margin: 0;
}
.roots-panel-list .empty-state-message {
  margin: 0;
  line-height: var(--leading-relaxed);
  max-width: 30ch;
}
.roots-panel-list .empty-state-cta {
  margin-top: var(--space-1);
}
.roots-panel-detail {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  min-height: 400px;
  overflow: hidden;
}
.roots-panel-detail--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
}
.roots-panel-detail-content {
  min-height: inherit;
}
.roots-detail-back-btn {
  display: none;
}
/* ── Item Cards (shared bucket card pattern) ─────────────── */
.roots-item-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-roots);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-default);
}
.roots-item-card:hover {
  border-color: var(--color-ink);
  border-left-color: var(--color-roots);
}
.roots-item-card:hover .roots-card-actions {
  opacity: 1;
}
.roots-item-card--selected {
  border-left-color: var(--color-roots);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-roots) 20%, transparent);
}
.roots-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-roots) 10%, var(--color-surface));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-roots);
  margin-top: 2px;
}
.roots-card-body {
  flex: 1;
  min-width: 0;
}
.roots-card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.roots-card-desc {
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--leading-relaxed);
}
.roots-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.roots-card-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.roots-card-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  background: transparent;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.roots-card-action-btn:hover {
  background: var(--color-bg);
  color: var(--color-ink);
}
.roots-card-action-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
@media (pointer: coarse) {
  .roots-card-action-btn {
    width: 44px;
    height: 44px;
  }
}
/* ── Group Header ────────────────────────────────────────── */
.roots-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 1;
}
.roots-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  background: var(--color-border);
  border-radius: var(--radius-full);
  font-size: 10px;
  color: var(--color-muted);
}
/* ── Status / Priority Badges ────────────────────────────── */
.roots-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}
.roots-badge--overdue {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.roots-badge--today {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
.roots-badge--done {
  background: var(--color-success-soft);
  color: var(--color-success);
}
.roots-badge--default {
  background: var(--color-bg);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}
/* ── Checkbox (Tasks) ────────────────────────────────────── */
.roots-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--color-border);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast);
  margin-top: 3px;
}
.roots-checkbox:checked {
  background: var(--color-roots);
  border-color: var(--color-roots);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%2720 6 9 17 4 12%27%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.roots-checkbox:hover:not(:checked) {
  border-color: var(--color-roots);
}
/* ── Detail Panel Header ─────────────────────────────────── */
.roots-detail-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.roots-detail-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-roots) 10%, var(--color-surface));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-roots);
}
.roots-detail-title-group {
  flex: 1;
  min-width: 0;
}
.roots-detail-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}
.roots-detail-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.roots-detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.roots-detail-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.roots-detail-body {
  padding: var(--space-6);
  overflow-y: auto;
  max-height: calc(100vh - 400px);
}
.roots-detail-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}
/* ── Detail Sections ─────────────────────────────────────── */
.roots-detail-section {
  margin-bottom: var(--space-6);
}
.roots-detail-section:last-child {
  margin-bottom: 0;
}
.roots-detail-section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.roots-detail-section-content {
  font-size: var(--text-sm);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
}
/* ── Dashboard: Summary Cards ────────────────────────────── */
.roots-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}
.roots-summary-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast);
}
.roots-summary-card:hover {
  border-color: var(--color-ink);
}
.roots-summary-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-roots) 10%, var(--color-surface));
  color: var(--color-roots);
}
.roots-summary-count {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  line-height: 1;
}
.roots-summary-label {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
/* ── Dashboard: Recent Captures Feed ────────────────────── */
.roots-recent-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.roots-feed-section-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
/* ── Projects: Kanban Board ──────────────────────────────── */
.roots-kanban {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.roots-kanban-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.roots-kanban-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.roots-kanban-header .roots-kanban-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.roots-kanban-header .roots-kanban-count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-muted);
}
/* ── Ideas: Card Grid ────────────────────────────────────── */
.roots-ideas-grid {
  display: grid;
  /* Cap the column width (max 360px) instead of letting a lone card stretch to
     `1fr` of the whole row — that's what made cards look "way too wide" when
     few ideas existed or only one column fit. `min(100%, 260px)` keeps a single
     card from overflowing on very narrow viewports. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 360px));
  justify-content: start;
  gap: var(--space-4);
  align-items: start;
}
.roots-idea-card {
  /* min-width:0 lets the card shrink to its grid track instead of being held
     open by its (white-space:nowrap) title's min-content width — without it a
     long unbroken word/URL blows the column past the viewport on mobile. */
  min-width: 0;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-roots);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  cursor: pointer;
  transition: border-color var(--duration-fast);
}
.roots-idea-card:hover {
  border-color: var(--color-ink);
  border-left-color: var(--color-roots);
}
.roots-idea-card:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-roots) 22%, transparent);
}
.roots-idea-card--pinned {
  border-top: 2px solid var(--color-warning);
}
.roots-idea-maturity {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
  width: auto;
  padding: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
}
.roots-idea-maturity .icon {
  flex: 0 0 auto;
}
.roots-idea-maturity .icon svg {
  max-width: none;
}
/* ── Inbox: Resolution Grid ──────────────────────────────── */
.roots-resolution-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
.roots-resolution-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.roots-resolution-btn:hover {
  border-color: var(--color-roots);
  background: color-mix(in srgb, var(--color-roots) 5%, var(--color-surface));
}
.roots-resolution-btn--tasks:hover {
  border-color: var(--color-roots);
}
.roots-resolution-btn--people:hover {
  border-color: var(--color-compass);
}
.roots-resolution-btn--projects:hover {
  border-color: var(--color-canopy);
}
.roots-resolution-btn--ideas:hover {
  border-color: var(--color-rings);
}
.roots-resolution-btn--archive:hover {
  border-color: var(--color-muted);
}
.roots-resolution-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.roots-resolution-icon .icon svg {
  display: block;
}
.roots-resolution-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.roots-resolution-desc {
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.3;
}
/* ── Progress Bar ────────────────────────────────────────── */
.roots-progress-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}
.roots-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-roots);
  transition: width 0.3s var(--ease-default);
}
/* ── Avatar Badge (People) ───────────────────────────────── */
.roots-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-surface);
  flex-shrink: 0;
  background: var(--color-roots);
}
/* ── Inbox Zero State ────────────────────────────────────── */
.roots-inbox-zero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-8);
  gap: var(--space-4);
  text-align: center;
}
.roots-inbox-zero-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--color-success-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-success);
}
.roots-inbox-zero-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.roots-inbox-zero-subtitle {
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 280px;
  line-height: var(--leading-relaxed);
}
/* ── Add Item Button ─────────────────────────────────────── */
/* All primary actions are accent, everywhere — product colors are
   identity, never buttons (audit §3.1 / §4.4) */
.roots-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-surface);
  border: 1px solid var(--color-accent-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--duration-fast);
}
.roots-add-btn:hover {
  background: var(--color-accent-strong);
}
/* ── Task group ──────────────────────────────────────────── */
.roots-task-group {
  margin-bottom: var(--space-4);
}
/* ── Kanban wrapper (full-width) ─────────────────────────── */
.roots-kanban-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-4);
}
/* ── Avatar large variant ────────────────────────────────── */
.roots-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: var(--text-lg);
  flex-shrink: 0;
}
/* ── Idea card extras ────────────────────────────────────── */
.roots-idea-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.roots-idea-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.roots-idea-card--pinned {
  border: 1.5px solid var(--color-roots);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-roots) 12%, transparent);
}
.roots-idea-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-xs);
}
.roots-idea-detail-text {
  font-size: var(--text-sm);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
  white-space: normal;
  word-break: break-word;
}
.roots-idea-detail-text--empty {
  color: var(--color-muted);
}
/* ── Random-idea spotlight overlay ──────────────────────── */
.roots-spotlight-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-ink) 50%, transparent);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-6);
  animation: fadeIn 0.2s ease;
}
.roots-spotlight-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-8) var(--space-6);
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.roots-spotlight-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted);
}
.roots-spotlight-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-ink);
  line-height: 1.2;
}
.roots-spotlight-desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-relaxed);
}
.roots-spotlight-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
/* ── Inbox processor ─────────────────────────────────────── */
.roots-inbox-wrapper {
  margin-top: var(--space-6);
}
.roots-inbox-processor {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.roots-inbox-queue-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.roots-inbox-queue-info strong {
  color: var(--color-ink);
}
.roots-inbox-item-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: var(--shadow-xs);
}
.roots-inbox-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.roots-inbox-item-content {
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
}
.roots-inbox-resolution {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.roots-inbox-resolution-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.roots-inbox-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
}
/* ── Inbox zero message ──────────────────────────────────── */
.roots-inbox-zero-message {
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 280px;
  line-height: var(--leading-relaxed);
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .roots-two-panel {
    grid-template-columns: 1fr;
  }
  .roots-panel-list {
    max-height: 400px;
  }
  .roots-resolution-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1100px) {
  .roots-body {
    padding: var(--space-6) var(--space-5);
  }
  .roots-two-panel {
    grid-template-columns: 320px 1fr;
  }
}
@media (max-width: 820px) {
  .roots-two-panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .roots-two-panel:not(.roots-two-panel--detail) .roots-panel-detail {
    display: none;
  }
  .roots-two-panel--detail .roots-panel-list {
    display: none;
  }
  .roots-panel-list {
    max-height: none;
    padding-right: 0;
  }
  .roots-panel-detail {
    min-height: calc(100vh - 220px);
  }
  .roots-detail-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-muted);
    text-align: left;
  }
  .roots-panel-detail--empty .roots-detail-back-btn {
    display: none;
  }
}
@media (max-width: 640px) {
  .roots-body {
    padding: var(--space-4) var(--space-3);
  }
  .roots-dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .roots-ideas-grid {
    /* minmax(0, …) (not the default `1fr` = minmax(auto,1fr)) so the single
       column can shrink below its content's min-content and stay inside the
       viewport. */
    grid-template-columns: minmax(0, 1fr);
  }
  .roots-resolution-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .roots-kanban {
    grid-template-columns: 1fr;
  }
  .roots-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .roots-search-input {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
}
.compass-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
}
.compass-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}
/* What the user steers by — replaced the two summary-card stats. Quiet by
   design: this frames the goal list, it does not compete with it. */
.compass-principles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.compass-principles-eyebrow {
  margin: 0;
}
.compass-principles-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.compass-principle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--color-ink);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  /* Drawn edges, not float: hover darkens the border toward ink rather than
     lifting the chip off the page. */
}
.compass-principle:hover {
  border-color: var(--color-ink);
}
.compass-principle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
/* An inferred principle is stated more quietly than one the user confirmed —
   the product is less sure, and should look it. */
.compass-principle--unconfirmed {
  border-style: dashed;
  color: var(--color-muted);
}
.compass-principle-marker {
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--color-compass);
}
.compass-principles-empty {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.compass-principles-more {
  font-size: var(--text-sm);
  color: var(--color-muted);
  background: none;
  border: 0;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}
.compass-principles-more:hover {
  color: var(--color-ink);
}
.compass-principles-more:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.compass-principles-empty {
  margin: 0;
}
.compass-principle-detail {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.compass-principle-commits {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.compass-principle-provenance {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.compass-principle-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.compass-principle-ask {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.compass-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.compass-filter-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
  /* Filter controls are accent everywhere (audit §4.3) — product
     colors are identity, never controls */
}
.compass-filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.compass-filter-btn--active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}
/* ── "Here's what we organized" notice (TKT-112) ──
   The system groups goals into areas without asking, so it has to say what it
   did. Quiet and informational — this is a receipt, not an alert: nothing here
   is a warning, and the user did nothing wrong. */
.compass-area-notice {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-compass);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.compass-area-notice-lead {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
}
.compass-area-notice-areas {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.compass-area-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
/* Areas need real air between them. At a uniform gap the last row of one area
   and the heading of the next sit as close as two rows inside one area, so the
   page reads as a single long table with bold lines in it rather than as four
   separate parts of a life. */
.compass-outline {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.compass-area {
  position: relative;
}
/* Areas are named in the person's own words, so the name is set in the display
   face and given room — this is the reader's table of contents for their own
   life, and it has to be scannable in one pass.

   No bottom rule. It was a 1px border identical to the hairlines between rows,
   which is exactly what made a heading look like one more row: same colour,
   same weight, same full-bleed left and right edges. The heading is now set
   apart by weight, size and the indent of everything beneath it instead. */
.compass-area-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}
.compass-area-count {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
}
/* ── Outline rows (TKT-120, Direction A) ──
   A row is ~40px where the old card was ~140px. That ratio IS the feature: a
   whole life on one screen instead of 1,200px of scrolling. The rich card was
   not deleted — it moved one click down, into .compass-row-detail. */
/* Indented under the heading, and hanging off a single quiet rule that runs the
   height of the group. Both edges of every row used to line up exactly with the
   area heading's, so heading and rows formed one flush block — the indent is
   what makes the list read as belonging TO the heading rather than sitting
   beside it. The rule is the outline's one piece of structural chrome; it
   replaces the border under the heading rather than adding to it. */
.compass-rows {
  display: flex;
  flex-direction: column;
  margin-left: var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border);
}
.compass-row-wrap + .compass-row-wrap {
  border-top: 1px solid var(--color-border);
}
/* Hairline separators, no per-row border or fill. Ten bordered boxes read as
   ten things to deal with; ten ruled lines read as one list. */
.compass-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-1);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.compass-row:hover .compass-row-title {
  color: var(--color-compass);
}
.compass-row--child {
  padding-left: var(--space-5);
}
.compass-row-lead {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}
/* The title is the anchor and must win its row outright. When title and marker
   sit at similar weight the eye has nothing to land on and the list reads as
   paragraph text — which is exactly how this page failed on a phone. */
.compass-row-title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  line-height: var(--leading-tight);
  min-width: 0;
}
/* Finish line vs ongoing practice. Muted and small: it identifies the row's
   kind at a glance without competing with the title for attention, and it is
   the key that tells you which measure the health mark is showing. */
.compass-row-type {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-muted);
  /* Nudge onto the title's optical baseline — flex baseline alignment puts an
     inline-flex box on its own bottom edge, not the glyph's. */
  transform: translateY(2px);
}
.compass-row-marks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}
/* One fixed footprint, and LAST in the row, so the health marks form a clean
   column down the right edge. Placed before the rung chip they drifted with
   every change in label width ("In motion" vs "Still a thought"), which is
   precisely the ragged edge that stops a column being scannable. */
.compass-health {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* Recency of an ongoing practice: filled, outlined, dashed. Weight carries the
   state — no red/amber/green, because product colours are identity and a habit
   you have not done this week is not an error (arbori-design-system §1). */
.compass-health:not(.compass-health--arc) {
  border-radius: 50%;
  box-sizing: border-box;
}
.compass-health--fresh {
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
}
.compass-health--recent {
  background: none;
  border: 2px solid var(--color-ink);
}
.compass-health--quiet {
  background: none;
  border: 1px dashed var(--color-muted);
}
.compass-row-detail {
  padding: 0 var(--space-1) var(--space-4);
}
.compass-row-children {
  border-top: 1px solid var(--color-border);
}
.compass-area-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin: 0;
}
/* The standard an area is kept to — never a target, never a number. */
.compass-area-standard {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: var(--space-1) 0 0;
  max-width: 52ch;
}
/* An area with nothing in it is shown, not hidden — it is true information
   about a part of your life. One quiet line, no card, no call to action. */
/* Sits on the same indent as a row would, so an empty area still reads as a
   heading with something under it rather than as loose text. */
.compass-area-empty {
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-style: italic;
  margin: 0 0 0 var(--space-2);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 1px solid var(--color-border);
}
/* Goals with no area yet, and Roots thoughts. Both are trailing material and
   read quieter than a real area — a dashed rule instead of a solid one. */
.compass-area--unfiled .compass-area-header,
.compass-area--thoughts .compass-area-header {
  border-bottom-style: dashed;
}
.compass-area--unfiled .compass-area-name,
.compass-area--thoughts .compass-area-name {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
/* ── "Right now" (TKT-120) ──
   Sits above the outline and answers a different question than the outline
   does: not "what is my life made of" but "what should I look at today". The
   two must be visibly separate or the page reads as one long list again.

   Bordered and inked, but deliberately no number and no rank — §6.5's rule.
   A priority score here would be the exact stress this effort removes. */
.compass-now {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}
.compass-now-label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-compass);
  margin: 0 0 var(--space-2);
}
.compass-now-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.compass-now-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-1) 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.compass-now-link:hover .compass-now-title {
  color: var(--color-compass);
}
.compass-now-link {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.compass-now-title {
  font-size: var(--text-base);
  color: var(--color-ink);
}
/* The MOVE, not the state. "In motion" belongs on the outline row below; up
   here the only useful sentence is what to actually do. */
.compass-now-do {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
/* The principle that lifted this goal (TKT-121). Quieter than the move — it
   explains the ordering, it is not the thing to act on. Italic rather than a
   chip or a badge: §10 bans anything that reads as a score or an award. */
.compass-now-because {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-muted);
}
/* ── Caught in passing (TKT-114) ──
   Roots thoughts that could become goals. Below every rung, and quieter than a
   goal card: these are not commitments and must not look like ones. */
.compass-thoughts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.compass-thought {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
/* Dashed, not solid: the product is less sure about these than about a goal,
   and should look it — same language the unconfirmed principle chip uses. */
.compass-thought-text {
  color: var(--color-muted);
  font-size: var(--text-sm);
}
/* "Looks finished — close it out?" — a proposal, never an automatic archive.
   A goal at 100% is not always over, so this asks rather than acts. */
.compass-goal-done-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: 13px;
}
.compass-goal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.compass-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  background: var(--color-bg);
  border-radius: var(--radius-full);
  padding: 4px 10px;
}
.compass-goal-expanded {
  border-top: 1px solid var(--color-border);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.compass-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.compass-section-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.compass-section-count {
  color: var(--color-muted);
  font-weight: var(--weight-medium);
}
.compass-motivation {
  margin: 0;
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
}
.compass-action-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.compass-action-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: var(--space-2);
  align-items: center;
  text-align: left;
  cursor: pointer;
}
.compass-action-item--done {
  opacity: 0.75;
}
.compass-action-check {
  color: var(--color-compass);
  display: inline-flex;
}
.compass-action-text {
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.compass-action-item--done .compass-action-text {
  text-decoration: line-through;
  color: var(--color-muted);
}
.compass-action-deadline {
  font-size: 11px;
  color: var(--color-muted);
}
.compass-action-divider {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: var(--space-2);
}
/*
 * Projects serving a goal (TKT-129). Deliberately quieter than the challenge
 * and action lists: this is context about work that lives elsewhere, not
 * something to act on here. One row per project, title then why, wrapping to a
 * second line on a phone rather than truncating the reason.
 */
.compass-project-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.compass-project-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}
.compass-project-title {
  font-weight: var(--weight-medium);
}
.compass-project-why {
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.compass-challenge-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.compass-challenge-item {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: var(--space-2);
  align-items: center;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.compass-challenge-item--resolved {
  opacity: 0.65;
}
.compass-challenge-severity {
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}
.compass-challenge-severity--blocking {
  background: var(--color-danger);
}
.compass-challenge-severity--significant {
  background: var(--color-warning);
}
.compass-challenge-severity--moderate {
  background: var(--color-accent);
}
.compass-challenge-severity--minor {
  background: var(--color-muted);
}
.compass-challenge-text {
  font-size: var(--text-sm);
}
.compass-visions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.compass-vision-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.compass-vision-card {
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.compass-vision-card--success {
  background: color-mix(in srgb, var(--color-roots) 12%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-roots) 28%, var(--color-surface));
}
.compass-vision-card--warning {
  background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-warning) 32%, var(--color-surface));
}
.compass-vision-label {
  display: inline-flex;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}
.compass-vision-content {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.compass-vision-emotions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.compass-emotion-tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  padding: 2px 8px;
  font-size: 11px;
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.compass-vision-empty {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.compass-progress-slider-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
}
.compass-progress-slider {
  width: 100%;
  accent-color: var(--color-compass);
}
.compass-progress-slider-value {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}
.compass-loading,
.compass-error {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: var(--space-7);
  text-align: center;
  color: var(--color-muted);
}
.compass-error {
  color: var(--color-danger);
}
.compass-main > .empty-state {
  padding: var(--space-7) 0 var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.compass-main > .empty-state .empty-state-icon {
  margin-bottom: var(--space-2);
}
.compass-main > .empty-state .empty-state-title {
  margin: 0;
}
.compass-main > .empty-state .empty-state-message {
  margin: 0;
  line-height: var(--leading-relaxed);
  max-width: 48ch;
}
.compass-main > .empty-state .empty-state-cta {
  margin-top: var(--space-1);
}
.compass-create-goal-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 900px) {
  .compass-visions-grid,
  .compass-create-goal-row {
    grid-template-columns: 1fr;
  }
  /* The chip row already wraps; on narrow screens let each principle take the
     full width so a long statement doesn't shrink to a two-word column. */
  .compass-principle {
    width: 100%;
  }
  .compass-main > .empty-state {
    padding: var(--space-6) 0 var(--space-7);
    gap: var(--space-4);
  }
}
/* ── Goal comment box — TKT-109 ──
   Freeform input scoped to one goal. Quiet: it sits at the bottom of an
   expanded card as an invitation, not a form to complete. */
.compass-comment-input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  padding: var(--space-3);
  resize: vertical;
  /* Drawn edges, not float — hover/focus darken the border toward ink. */
}
.compass-comment-input:hover {
  border-color: var(--color-ink);
}
.compass-comment-input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.compass-comment-input::placeholder {
  color: var(--color-muted);
}
.compass-comment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.compass-comment-status {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
/* The receipt. Inked rather than coloured: this is an acknowledgment, not a
   status alert — nothing here is a success/warning semantic. */
.compass-comment-status--done {
  color: var(--color-ink);
}
.compass-comment-status--error {
  color: var(--color-danger);
}
/* ── Rung chip (goal card) — TKT-108 ──
   Replaces the old depth badge, which showed a 0-100% score in red/amber/
   green. Monochrome on purpose: product colours are identity, never state, and
   a colour-coded ladder is a grade wearing a different costume. */
.compass-rung-chip {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
  white-space: nowrap;
  /* Never squeezed by a long title — a marker that changes width row to row
     stops being scannable, which is the one job it has in the outline. */
  flex-shrink: 0;
}
/* ── Completeness section (expanded view) ──
   The percentage that used to sit beside this title is gone (TKT-108). The
   checklist below says what is and isn't filled in, which is actionable; the
   number on top of it was only ever a grade. */
.compass-completeness-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-3);
}
.compass-completeness-dim {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 13px;
  color: var(--color-muted);
}
.compass-completeness-dim--done {
  color: var(--color-ink);
}
.compass-completeness-hint {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--color-muted);
  font-style: italic;
}
.compass-classification-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border: 1px solid;
  border-radius: var(--radius-sm, 4px);
  white-space: nowrap;
  margin-left: auto;
}
.compass-next-action .compass-next-action-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-roots);
  border-radius: var(--radius-md);
}
.compass-next-action .compass-next-action-card .compass-action-text {
  flex: 1;
  font-weight: 500;
}
.compass-context-hint {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 12px;
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning) 20%, transparent);
  border-radius: var(--radius-sm, 4px);
  font-style: italic;
}
/* ── Mobile (phone) ──────────────────────────────────────── */
@media (max-width: 640px) {
  .compass-main {
    padding: var(--space-5) var(--space-3);
    gap: var(--space-4);
  }
  /* An area name in the display face at 24px wraps to two lines on a phone
     ("Business Success and Pivoting Strategy"), and a two-line Fraunces block
     reads as body copy rather than as a heading. Dropping one step keeps it a
     heading — it still outranks the rows, which is all it has to do. */
  .compass-area-name {
    font-size: var(--text-lg);
  }
  /* Shallower indent — the hanging rule still shows the rows belong to the
     heading, and on a 390px screen every reclaimed pixel is a title that does
     not wrap. */
  .compass-rows,
  .compass-area-empty {
    margin-left: 0;
    padding-left: var(--space-3);
  }
  .compass-completeness-list {
    grid-template-columns: 1fr;
  }
  .compass-goal-expanded {
    padding: 0 var(--space-3) var(--space-4);
  }
}
/* ── Suggestions (medium-confidence extractions awaiting confirm/dismiss) ── */
.compass-suggestions {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-compass, var(--color-accent));
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.compass-suggestions-hint {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}
.compass-suggestion-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.compass-suggestion-summary {
  font-weight: 600;
  color: var(--color-ink);
  font-size: 14px;
}
.compass-suggestion-items {
  margin: 0;
  padding-left: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  /* Must stay LARGER than the row-gap inside an item (see below). */
  gap: var(--space-2);
}
/* Each row names what the change IS, so the kind tag has to survive a long
   title wrapping underneath it — hence align-items: baseline over center. */
.compass-suggestion-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--space-2);
  /* No row gap. On a narrow screen a long title pushes the "for <goal>"
     qualifier onto its own line, and it has to stay visually attached to ITS
     row: with a row gap matching the list's, the qualifier sat closer to the
     next item and read as a heading for it. */
  row-gap: 0;
}
.compass-suggestion-kind {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-1);
}
.compass-suggestion-item-text {
  color: var(--color-ink);
  min-width: 0;
}
.compass-suggestion-item-context {
  color: var(--color-muted);
  font-size: 12px;
}
.compass-suggestion-more {
  color: var(--color-muted);
  font-size: 12px;
  font-style: italic;
}
.compass-suggestion-actions {
  display: flex;
  gap: var(--space-2);
}
/* ── Derived progress bar (finish-line goals) ── */
.compass-progress-bar {
  height: 8px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.compass-progress-bar-fill {
  height: 100%;
  background: var(--color-compass, var(--color-accent));
  border-radius: 999px;
  transition: width 0.3s ease;
}
.compass-progress-empty,
.compass-habit-empty {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}
/* ── Habit consistency (continuous goals) ── */
.compass-habit-stats {
  display: flex;
  gap: var(--space-3);
}
.compass-habit-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-2);
}
.compass-habit-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink);
}
.compass-habit-label {
  font-size: 11px;
  color: var(--color-muted);
  text-align: center;
}
.compass-habit-last {
  font-size: 13px;
  color: var(--color-muted);
  margin: var(--space-2) 0 0;
}
/* ── Goal edit affordance + edit modal ── */
.compass-goal-edit-row {
  display: flex;
  justify-content: flex-end;
}
.compass-goal-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-size: 12px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.compass-goal-edit-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.compass-edit-goal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.compass-edit-target {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.compass-edit-target legend {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  padding: 0 var(--space-2);
}
.compass-edit-measurements {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Add/edit reading form */
.compass-obs-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.compass-obs-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr 1.2fr;
  gap: var(--space-2);
}
.compass-obs-input {
  width: 100%;
}
.compass-obs-form-actions {
  display: flex;
  gap: var(--space-2);
}
/* Observation list */
.compass-obs-empty {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}
.compass-obs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.compass-obs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.compass-obs-value {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.compass-obs-metric {
  font-size: 12px;
  color: var(--color-muted);
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compass-obs-date {
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}
.compass-obs-actions {
  display: inline-flex;
  gap: var(--space-1);
}
.compass-obs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-xs);
}
.compass-obs-btn:hover {
  color: var(--color-ink);
  background: var(--color-bg);
}
.compass-obs-btn--danger:hover {
  color: var(--color-danger);
}
.compass-obs-more {
  margin-top: var(--space-2);
}
@media (max-width: 560px) {
  .compass-obs-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* ── Recent activity (occurrence log) ── */
.compass-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.compass-activity-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.compass-activity-row:last-child {
  border-bottom: none;
}
.compass-activity-title {
  font-size: 13px;
  color: var(--color-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compass-activity-date {
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.rings-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  position: relative;
}
.rings-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.rings-filters {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: end;
}
.rings-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rings-filter-field select,
.rings-filter-field input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-height: 40px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  background: var(--color-surface);
  color: var(--color-ink);
}
.rings-filter-field select:focus-visible,
.rings-filter-field input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.rings-filter-field--search {
  grid-column: span 2;
}
.rings-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  font-weight: var(--weight-semibold);
}
.rings-toggle {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.rings-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-rings);
}
.rings-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--space-2);
}
.rings-loading,
.rings-error {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-muted);
}
.rings-error {
  color: var(--color-danger);
}
.rings-timeline {
  position: relative;
  padding-left: var(--space-12);
}
.rings-timeline::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--color-rings) 30%, transparent);
}
.rings-track-marker {
  position: relative;
  padding: var(--space-4) 0 var(--space-2);
}
.rings-track-dot {
  position: absolute;
  left: -30px;
  top: 20px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-rings);
}
.rings-track-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-rings) 12%, var(--color-surface));
  color: var(--color-rings);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: 0 var(--space-3);
}
.rings-today-marker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  position: relative;
}
.rings-today-dot {
  position: absolute;
  left: -30px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-rings);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-rings) 18%, transparent);
}
.rings-today-label {
  color: var(--color-rings);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-semibold);
}
.rings-today-line {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--color-rings) 35%, transparent);
}
.rings-event-card {
  position: relative;
  margin-bottom: var(--space-3);
}
.rings-event-stem {
  position: absolute;
  left: -24px;
  top: 28px;
  width: 24px;
  height: 2px;
  background: color-mix(in srgb, var(--color-rings) 30%, transparent);
}
.rings-event-body {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-left-color: var(--rings-event-color, var(--color-rings));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rings-event-card--cross .rings-event-body {
  border-style: dashed;
  background: color-mix(in srgb, var(--color-rings) 6%, var(--color-surface));
}
/* ─── Meta entries: compact observer insight annotations ─── */
.rings-meta-entry {
  position: relative;
  margin-bottom: var(--space-1);
  padding: var(--space-1) 0;
}
.rings-meta-dot {
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-rings) 40%, transparent);
}
.rings-meta-body {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full, 999px);
  background: color-mix(in srgb, var(--color-rings) 6%, transparent);
  max-width: 100%;
  overflow: hidden;
}
.rings-meta-icon {
  display: inline-flex;
  align-items: center;
  color: color-mix(in srgb, var(--color-rings) 60%, transparent);
  flex-shrink: 0;
}
.rings-meta-label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--color-rings) 70%, transparent);
  white-space: nowrap;
  flex-shrink: 0;
}
.rings-meta-text {
  font-size: var(--text-xs, 12px);
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rings-meta-time {
  font-size: 10px;
  color: color-mix(in srgb, var(--color-muted) 60%, transparent);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
/* ─── End meta entries ─── */
.rings-event-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.rings-event-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rings-event-color, var(--color-rings));
}
.rings-event-date {
  color: var(--color-muted);
  font-size: 11px;
}
.rings-event-title {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}
.rings-event-summary,
.rings-event-detail,
.rings-event-expanded {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  white-space: pre-wrap;
}
.rings-event-expanded {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
  color: var(--color-ink);
}
.rings-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--color-rings);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  padding: 0;
  cursor: pointer;
}
.rings-expand-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}
.rings-event-card--personal {
  --rings-event-color: var(--color-compass);
}
.rings-event-card--work {
  --rings-event-color: var(--color-accent);
}
.rings-event-card--health {
  --rings-event-color: var(--color-danger);
}
.rings-event-card--relationship,
.rings-event-card--family,
.rings-event-card--social {
  --rings-event-color: var(--color-roots);
}
.rings-event-card--achievement,
.rings-event-card--education,
.rings-event-card--financial {
  --rings-event-color: var(--color-warning);
}
.rings-event-card--travel,
.rings-event-card--other,
.rings-event-card--loss,
.rings-event-card--task,
.rings-event-card--project_milestone,
.rings-event-card--followup {
  --rings-event-color: var(--color-rings);
}
.rings-jump-btn {
  position: fixed;
  right: var(--space-6);
  min-height: 44px;
  padding: 0 var(--space-4);
  background: var(--color-rings);
  color: var(--color-surface);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.rings-jump-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.rings-jump-btn:hover {
  background: color-mix(in srgb, var(--color-rings) 85%, black);
}
.rings-jump-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
@media (max-width: 980px) {
  .rings-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rings-filter-field--search {
    grid-column: 1 / -1;
  }
}
@media (max-width: 820px) {
  .rings-main {
    padding: var(--space-6) var(--space-4) var(--space-10);
  }
  .rings-timeline {
    padding-left: var(--space-8);
  }
  .rings-timeline::before {
    left: 16px;
  }
  .rings-track-dot,
  .rings-today-dot {
    left: -22px;
  }
  .rings-event-stem {
    left: -16px;
    width: 16px;
  }
  .rings-jump-btn {
    right: var(--space-4);
    bottom: var(--space-4);
  }
}
.canopy-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
}
.canopy-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.canopy-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 64vh;
}
.canopy-list-panel,
.canopy-reader-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.canopy-list-scroll {
  max-height: 70vh;
  overflow: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.canopy-list-card {
  width: 100%;
  border: 1px solid var(--color-border);
  border-left: 3px solid color-mix(in srgb, var(--color-canopy) 60%, var(--color-surface));
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  cursor: pointer;
}
.canopy-list-card:hover {
  border-color: color-mix(in srgb, var(--color-canopy) 40%, var(--color-border));
  background: color-mix(in srgb, var(--color-canopy) 4%, var(--color-surface));
}
.canopy-list-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.canopy-list-card--active {
  border-color: color-mix(in srgb, var(--color-canopy) 70%, var(--color-border));
  background: color-mix(in srgb, var(--color-canopy) 8%, var(--color-surface));
}
.canopy-list-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.canopy-origin-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  border-radius: var(--radius-full);
  padding: 0 10px;
  font-size: 11px;
  color: var(--color-canopy);
  background: color-mix(in srgb, var(--color-canopy) 12%, var(--color-surface));
  font-weight: var(--weight-semibold);
}
.canopy-list-date {
  font-size: 11px;
  color: var(--color-muted);
}
.canopy-list-title {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}
.canopy-list-summary {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.canopy-reader-empty,
.canopy-list-loading,
.canopy-error {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-muted);
  padding: var(--space-6);
}
.canopy-error {
  color: var(--color-danger);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.canopy-reader-article {
  display: flex;
  flex-direction: column;
  min-height: 70vh;
}
.canopy-mobile-back {
  display: none;
}
.canopy-reader-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.canopy-reader-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.canopy-reader-title {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.canopy-reader-date {
  font-size: 12px;
  color: var(--color-muted);
}
.canopy-reader-actions {
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.canopy-reader-content {
  padding: var(--space-6);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
}
.canopy-reader-content > *:first-child {
  margin-top: 0;
}
.canopy-reader-content > *:last-child {
  margin-bottom: 0;
}
.canopy-reader-content h1,
.canopy-reader-content h2,
.canopy-reader-content h3,
.canopy-reader-content h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  line-height: var(--leading-snug);
}
.canopy-reader-content h1 {
  font-size: var(--text-2xl);
  margin: var(--space-8) 0 var(--space-4);
}
.canopy-reader-content h2 {
  font-size: var(--text-xl);
  margin: var(--space-7) 0 var(--space-3);
}
.canopy-reader-content h3 {
  font-size: var(--text-lg);
  margin: var(--space-6) 0 var(--space-3);
}
.canopy-reader-content h4 {
  font-size: var(--text-md);
  margin: var(--space-5) 0 var(--space-2);
}
.canopy-reader-content p {
  margin: 0 0 var(--space-4);
}
.canopy-reader-content ul,
.canopy-reader-content ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}
.canopy-reader-content li + li {
  margin-top: var(--space-2);
}
.canopy-reader-content blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid color-mix(in srgb, var(--color-canopy) 60%, var(--color-surface));
  background: color-mix(in srgb, var(--color-canopy) 6%, var(--color-surface));
  border-radius: var(--radius-sm);
}
.canopy-reader-content hr {
  margin: var(--space-6) 0;
  border: none;
  border-top: 1px solid var(--color-border);
}
.canopy-reader-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
}
.canopy-reader-content th,
.canopy-reader-content td {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.canopy-reader-content th {
  background: color-mix(in srgb, var(--color-canopy) 5%, var(--color-surface));
  font-weight: var(--weight-semibold);
}
.canopy-reader-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9em;
  background: color-mix(in srgb, var(--color-canopy) 8%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0 4px;
}
.canopy-reader-content pre {
  white-space: pre-wrap;
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-canopy) 4%, var(--color-ink));
  border: 1px solid var(--color-border);
  overflow-x: auto;
}
.canopy-reader-content pre code {
  background: transparent;
  border: none;
  padding: 0;
}
.canopy-details {
  border-top: 1px solid var(--color-border);
}
.canopy-details-toggle {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-4) var(--space-6);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.canopy-details--open .canopy-details-toggle .icon {
  transform: rotate(180deg);
}
.canopy-details-body {
  padding: 0 var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.canopy-details-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.canopy-details-grid dt {
  font-size: 11px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.canopy-details-grid dd {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
}
.canopy-source-block h4 {
  margin: 0 0 var(--space-2);
}
.canopy-source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.canopy-source-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  min-height: 44px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.canopy-source-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.canopy-source-main a,
.canopy-source-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-ink);
  font-size: var(--text-sm);
}
.canopy-source-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
}
.canopy-source-favicon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}
.canopy-details-muted {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
@media (max-width: 1100px) {
  .canopy-layout {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  }
  .canopy-reader-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 820px) {
  .canopy-main {
    padding: var(--space-6) var(--space-4) var(--space-8);
  }
  .canopy-layout {
    grid-template-columns: 1fr;
  }
  .canopy-layout:not(.canopy-layout--detail) .canopy-reader-panel {
    display: none;
  }
  .canopy-layout.canopy-layout--detail .canopy-list-panel {
    display: none;
  }
  .canopy-list-panel,
  .canopy-reader-panel {
    min-height: auto;
  }
  .canopy-list-scroll {
    max-height: none;
  }
  .canopy-mobile-back {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    padding: 0 var(--space-4);
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-align: left;
  }
  .canopy-reader-content,
  .canopy-details-toggle,
  .canopy-details-body {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .canopy-details-grid {
    grid-template-columns: 1fr;
  }
}
.search-page {
  min-height: 100vh;
  background: var(--color-bg);
}
.search-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.search-title-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.search-title-block h1 {
  margin: 0;
  font-size: clamp(var(--text-xl), 3.8vw, var(--text-3xl));
  line-height: var(--leading-snug);
}
.search-title-block p {
  margin: 0;
  color: var(--color-muted);
  max-width: 680px;
  margin-inline: auto;
}
.search-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--color-ink);
}
.search-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.search-hero-input-wrap {
  display: flex;
  align-items: center;
  min-height: 62px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  background: color-mix(in srgb, var(--color-bg) 32%, var(--color-surface));
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.search-hero-input-wrap:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 24%, transparent);
}
.search-hero-icon {
  color: var(--color-muted);
  display: inline-flex;
  margin-right: var(--space-2);
}
.search-hero-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
.search-hero-input::placeholder {
  color: color-mix(in srgb, var(--color-muted) 78%, var(--color-surface));
}
.search-hero-input:focus-visible {
  outline: none;
}
.search-clear-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.search-clear-btn:hover {
  background: color-mix(in srgb, var(--color-border) 68%, var(--color-surface));
  color: var(--color-ink);
}
.search-clear-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.search-hero-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.search-filter-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.search-filter-pill {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  min-height: 44px;
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-muted);
  cursor: pointer;
}
.search-filter-pill:hover {
  border-color: color-mix(in srgb, var(--search-pill-color) 45%, var(--color-border));
  color: color-mix(in srgb, var(--search-pill-color) 68%, var(--color-ink));
}
.search-filter-pill--active {
  border-color: color-mix(in srgb, var(--search-pill-color) 74%, var(--color-border));
  background: color-mix(in srgb, var(--search-pill-color) 10%, white);
  color: color-mix(in srgb, var(--search-pill-color) 72%, var(--color-ink));
  font-weight: var(--weight-semibold);
}
.search-semantic-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  padding: 0 var(--space-3);
  min-height: 44px;
  color: var(--color-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  user-select: none;
}
.search-semantic-toggle input {
  accent-color: var(--color-accent);
}
.search-semantic-toggle:hover {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  color: var(--color-accent-strong);
}
.search-semantic-toggle:focus-within {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.search-loading-state,
.search-error-state,
.search-no-results {
  min-height: 220px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  color: var(--color-muted);
  text-align: center;
}
.search-error-state {
  color: var(--color-danger);
}
.search-error-state p {
  margin: 0;
}
.search-tips-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.search-example-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-bg) 54%, var(--color-surface));
}
.search-example-block h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}
.search-example-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.search-example-chip {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
  min-height: 44px;
  padding: 0 var(--space-3);
  cursor: pointer;
}
.search-example-chip:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.search-example-chip:hover {
  border-color: color-mix(in srgb, var(--color-accent) 44%, var(--color-border));
  color: var(--color-accent-strong);
}
.search-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.search-results-header h2 {
  margin: 0;
  font-size: var(--text-md);
}
.search-semantic-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-full);
  min-height: 24px;
  padding: 0 var(--space-2);
  font-size: 11px;
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}
.search-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.search-result-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-start;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-left: 3px solid color-mix(in srgb, var(--search-result-color) 70%, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--color-ink);
}
.search-result-card:hover {
  border-color: color-mix(in srgb, var(--search-result-color) 56%, var(--color-border));
  background: color-mix(in srgb, var(--search-result-color) 4%, white);
}
.search-result-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.search-result-marker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--search-result-color) 45%, var(--color-border));
  background: color-mix(in srgb, var(--search-result-color) 10%, white);
  color: color-mix(in srgb, var(--search-result-color) 74%, var(--color-ink));
  padding: 0 var(--space-2);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.search-result-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.search-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.search-result-title {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}
.search-result-meta {
  display: inline-flex;
  gap: var(--space-2);
  font-size: 11px;
  color: var(--color-muted);
}
.search-result-snippet {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}
.search-result-snippet mark {
  background: color-mix(in srgb, var(--color-accent) 24%, var(--color-surface));
  color: var(--color-ink);
  border-radius: 3px;
  padding: 0 2px;
}
.search-result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.search-relevance {
  width: 120px;
  height: 6px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-border) 70%, var(--color-surface));
  overflow: hidden;
}
.search-relevance-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--search-result-color) 72%, var(--color-accent));
}
.search-result-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.search-result-tags span {
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  padding: 2px 8px;
  font-size: 11px;
  color: var(--color-muted);
  background: color-mix(in srgb, var(--color-bg) 58%, var(--color-surface));
}
.search-result-arrow {
  color: color-mix(in srgb, var(--search-result-color) 60%, var(--color-muted));
  margin-top: 2px;
}
.search-load-more {
  display: flex;
  justify-content: center;
}
@media (max-width: 920px) {
  .search-main {
    padding: var(--space-6) var(--space-4) var(--space-8);
  }
  .search-hero {
    padding: var(--space-4);
  }
  .search-hero-input-wrap {
    min-height: 56px;
  }
  .search-result-card {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .search-result-arrow {
    display: none;
  }
}
.memory-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
}
.memory-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.memory-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.memory-hero-title h1 {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}
.memory-hero-title p {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  max-width: 760px;
}
.memory-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  font-weight: var(--weight-medium);
}
.memory-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.memory-stat-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.memory-stat-icon {
  color: var(--color-accent);
}
.memory-stat-value {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.memory-stat-label {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.memory-toolbar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.memory-search-wrap {
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  background: color-mix(in srgb, var(--color-bg) 60%, var(--color-surface));
}
.memory-search-wrap:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.memory-search-icon {
  color: var(--color-muted);
  display: inline-flex;
}
.memory-search-input {
  border: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  font-size: var(--text-base);
  color: var(--color-ink);
}
.memory-search-input:focus-visible {
  outline: none;
}
.memory-search-clear {
  border: none;
  background: transparent;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.memory-search-clear:hover {
  background: color-mix(in srgb, var(--color-border) 70%, var(--color-surface));
  color: var(--color-ink);
}
.memory-search-clear:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.memory-filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.memory-filter-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.memory-filter-pill {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  min-height: 44px;
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-muted);
  font-size: var(--text-sm);
  cursor: pointer;
}
.memory-filter-pill:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
  color: var(--color-accent-strong);
}
.memory-filter-pill--active {
  border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border));
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-weight: var(--weight-semibold);
}
.memory-advanced-toggle {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg) 50%, var(--color-surface));
  overflow: hidden;
}
.memory-advanced-toggle summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.memory-advanced-toggle summary::-webkit-details-marker {
  display: none;
}
.memory-advanced-toggle summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.memory-checkbox-row {
  padding: 0 var(--space-3) var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
}
.memory-checkbox-row input {
  accent-color: var(--color-accent);
}
.memory-layout {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 62vh;
}
.memory-list-panel,
.memory-detail-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.memory-list-scroll {
  max-height: 65vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}
.memory-load-more {
  width: 100%;
  min-height: 44px;
  margin-top: var(--space-1);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: all var(--duration-fast) var(--ease-default);
}
.memory-load-more:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent-soft) 30%, transparent);
}
.memory-load-more:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.memory-load-more:disabled {
  cursor: default;
  opacity: 0.7;
}
.memory-list-card {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: left;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  cursor: pointer;
}
.memory-list-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent-soft) 45%, var(--color-surface));
}
.memory-list-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.memory-list-card--selected {
  border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent-soft) 55%, var(--color-surface));
}
.memory-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.memory-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 21px;
  border-radius: var(--radius-full);
  padding: 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--weight-semibold);
}
.memory-type-chip--conversation,
.memory-type-chip--knowledge {
  color: var(--color-compass);
  background: color-mix(in srgb, var(--color-compass) 12%, var(--color-surface));
}
.memory-type-chip--research {
  color: var(--color-canopy);
  background: color-mix(in srgb, var(--color-canopy) 12%, var(--color-surface));
}
.memory-card-date {
  color: var(--color-muted);
  font-size: 11px;
}
.memory-card-title {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-ink);
}
.memory-card-preview {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.memory-card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.memory-deleted-flag,
.memory-score-chip {
  min-height: 20px;
  border-radius: var(--radius-full);
  padding: 0 8px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
}
.memory-deleted-flag {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}
.memory-score-chip {
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}
.memory-detail-card {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.memory-mobile-back {
  display: none;
}
.memory-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.memory-detail-header h2 {
  margin: var(--space-2) 0 0;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
.memory-detail-header p {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.memory-detail-actions {
  display: inline-flex;
  gap: var(--space-2);
}
.memory-detail-block {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}
.memory-detail-block h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}
.memory-detail-content {
  margin: 0;
  color: var(--color-ink);
  white-space: pre-wrap;
  line-height: var(--leading-relaxed);
}
.memory-tag-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.memory-tag-list span {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
  color: var(--color-muted);
  background: color-mix(in srgb, var(--color-bg) 50%, var(--color-surface));
  display: inline-flex;
  align-items: center;
}
.memory-source-list {
  margin: 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.memory-source-list a,
.memory-source-list span {
  font-size: var(--text-sm);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.memory-detail-muted {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.memory-panel-state {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-muted);
  text-align: center;
  padding: var(--space-4);
}
.memory-panel-state--error {
  color: var(--color-danger);
}
@media (max-width: 1100px) {
  .memory-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .memory-layout {
    grid-template-columns: 1fr;
  }
  .memory-list-scroll {
    max-height: none;
  }
}
@media (max-width: 820px) {
  .memory-layout {
    grid-template-columns: 1fr;
  }
  .memory-layout:not(.memory-layout--detail) .memory-detail-panel {
    display: none;
  }
  .memory-layout.memory-layout--detail .memory-list-panel {
    display: none;
  }
  .memory-mobile-back {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    padding: 0 var(--space-4);
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-align: left;
  }
}
@media (max-width: 640px) {
  .memory-main {
    padding: var(--space-6) var(--space-4) var(--space-8);
  }
  .memory-stats-grid {
    grid-template-columns: 1fr;
  }
  .memory-toolbar {
    padding: var(--space-3);
  }
}
/* ── Knowledge / "What You've Told Me" page ────────────── */
.knowledge-page {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-12);
}
.knowledge-page__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.knowledge-page__intro {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}
.knowledge-loading,
.knowledge-error {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-muted);
}
.knowledge-error {
  color: var(--color-danger);
}
/* Category group */
.knowledge-group {
  margin-bottom: var(--space-6);
}
.knowledge-group__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.knowledge-group__count {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-muted);
  background: var(--color-accent-soft);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  margin-left: auto;
}
.knowledge-group__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Individual knowledge item */
.knowledge-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.knowledge-item--goal {
  border-left: 3px solid var(--color-compass);
}
.knowledge-item__key {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  text-transform: capitalize;
  margin-bottom: 2px;
}
.knowledge-item__value {
  font-size: var(--text-sm);
  color: var(--color-ink);
  line-height: 1.45;
}
.knowledge-item__meta {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: 4px;
}
/* ── Confidence & verification (P1.1) ─────────────────────── */
/* A user-confirmed fact reads as settled, not as a number. */
.knowledge-item__meta--verified {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-success);
}
/* Low confidence is stated, not hidden — the honesty is the point. */
.knowledge-item__meta--low {
  color: var(--color-warning);
}
.knowledge-item--busy {
  opacity: 0.6;
  pointer-events: none;
}
/* ── Contradictions ───────────────────────────────────────── */
.knowledge-contradiction {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
}
.knowledge-contradiction__title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-warning);
  margin-bottom: var(--space-2);
}
.knowledge-contradiction__values {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.knowledge-contradiction__value {
  display: flex;
  flex-direction: column;
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.knowledge-contradiction__label {
  font-size: var(--text-xs);
  color: var(--color-muted);
}
/* ── Actions, editing, provenance ─────────────────────────── */
.knowledge-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.knowledge-action {
  font-size: var(--text-xs);
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
.knowledge-action:hover {
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.knowledge-action--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.knowledge-action--primary:hover {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: #fff;
}
.knowledge-action--danger:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.knowledge-link {
  font-size: var(--text-xs);
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
}
.knowledge-edit__input {
  width: 100%;
  font-size: var(--text-sm);
  padding: 6px 8px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
}
/* The user's own words, quoted back as proof of where a fact came from. */
.knowledge-source {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-border);
  background: var(--color-surface-sunken, transparent);
}
.knowledge-source__meta {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: 2px;
}
.knowledge-source__text {
  font-size: var(--text-sm);
  color: var(--color-ink);
  line-height: 1.45;
}
.knowledge-page__alert {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-warning);
  margin-top: var(--space-2);
}
/* ============================================================
   Arbori — Onboarding Page Styles
   Welcome hero, profile form, coach configuration.
   Ref: docs/component_design_principles.md §9, §13, §14
   ============================================================ */
/* ── Onboarding Shell ─────────────────────────────────────── */
.onboarding-shell {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
}
/* ── Welcome Page ─────────────────────────────────────────── */
.welcome-page {
  max-width: 620px;
  width: 100%;
  text-align: center;
  animation: onb-fade-up 0.5s var(--ease-default) both;
}
.welcome-hero {
  margin-bottom: var(--space-10);
}
.welcome-brand {
  margin-bottom: var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-accent) 6%, transparent);
}
.welcome-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  color: var(--color-ink);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}
.welcome-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-muted);
  line-height: var(--leading-normal);
  max-width: 460px;
  margin: 0 auto;
}
/* ── Welcome Features ─────────────────────────────────────── */
.welcome-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
  text-align: left;
}
.welcome-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border);
  transition: transform var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
  animation: onb-fade-up 0.5s var(--ease-default) both;
}
.welcome-feature:nth-child(1) {
  animation-delay: 0.1s;
}
.welcome-feature:nth-child(2) {
  animation-delay: 0.2s;
}
.welcome-feature:nth-child(3) {
  animation-delay: 0.3s;
}
.welcome-feature:hover {
  border-color: var(--color-ink);
}
.welcome-feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.welcome-feature-text {
  flex: 1;
  min-width: 0;
}
.welcome-feature-title {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}
.welcome-feature-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-normal);
}
/* ── Welcome CTA ──────────────────────────────────────────── */
.welcome-cta {
  animation: onb-fade-up 0.5s var(--ease-default) 0.4s both;
}
.welcome-cta .btn {
  min-width: 200px;
}
.welcome-cta-note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--space-3);
}
/* ── Onboarding Card (Profile & Coach) ────────────────────── */
.onboarding-card {
  max-width: 560px;
  width: 100%;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-10) var(--space-8);
  animation: onb-fade-up 0.4s var(--ease-default) both;
}
.onboarding-card--wide {
  max-width: 720px;
}
.onboarding-card-header {
  text-align: center;
  margin-bottom: var(--space-8);
}
.onboarding-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  margin-bottom: var(--space-4);
}
.onboarding-card-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  color: var(--color-ink);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}
.onboarding-card-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-normal);
  max-width: 440px;
  margin: 0 auto;
}
/* ── Onboarding Form ──────────────────────────────────────── */
.onboarding-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.onboarding-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.onboarding-form-footer .btn:only-child {
  margin-left: auto;
}
/* ── Cadence Options (Radio Cards) ────────────────────────── */
.cadence-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cadence-option {
  cursor: pointer;
  display: block;
}
.cadence-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cadence-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-default);
}
.cadence-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: var(--weight-regular);
}
.cadence-check {
  opacity: 0;
  color: var(--color-accent);
  transition: opacity var(--duration-fast) var(--ease-default);
}
.cadence-option:hover .cadence-card {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.cadence-selected .cadence-card {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.cadence-selected .cadence-text {
  font-weight: var(--weight-medium);
  color: var(--color-accent-strong);
}
.cadence-selected .cadence-check {
  opacity: 1;
}
/* ── Personality Grid ─────────────────────────────────────── */
.personality-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.personality-card {
  position: relative;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  outline: none;
}
.personality-card:hover {
  border-color: var(--color-ink);
}
.personality-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.personality-icon {
  margin-bottom: var(--space-3);
}
.personality-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.personality-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-3);
}
.personality-tone {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-muted);
  line-height: var(--leading-normal);
  opacity: 0.8;
}
.personality-check {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--duration-fast) var(--ease-bounce);
}
.personality-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.personality-selected .personality-check {
  opacity: 1;
  transform: scale(1);
}
.personality-selected .personality-name {
  color: var(--color-accent-strong);
}
/* ── Intensity Options ────────────────────────────────────── */
.intensity-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.intensity-option {
  cursor: pointer;
  display: block;
}
.intensity-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.intensity-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-default);
}
.intensity-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}
.intensity-desc {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: var(--leading-normal);
}
.intensity-option:hover .intensity-card {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.intensity-selected .intensity-card {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.intensity-selected .intensity-label {
  color: var(--color-accent-strong);
}
/* ── Avatar Name Generator ───────────────────────────────── */
.avatar-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.avatar-name-row .form-input {
  flex: 1;
  min-width: 0;
}
.avatar-name-generate-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.avatar-name-generate-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.avatar-name-generate-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
/* ── Icon flip helper ─────────────────────────────────────── */
.icon-flip-h {
  transform: scaleX(-1);
}
/* ── Animations ───────────────────────────────────────────── */
@keyframes onb-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 820px) {
  .onboarding-shell {
    padding: var(--space-6) var(--space-4);
    align-items: flex-start;
  }
  .onboarding-card {
    padding: var(--space-8) var(--space-5);
  }
  .welcome-title {
    font-size: var(--text-2xl);
  }
  .personality-grid {
    grid-template-columns: 1fr;
  }
  .onboarding-form-footer {
    flex-direction: column-reverse;
    gap: var(--space-3);
  }
  .onboarding-form-footer .btn {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .onboarding-shell {
    padding: 0;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100dvh - var(--header-height));
  }
  .onboarding-card--profile {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-6) var(--space-4) var(--space-10);
  }
  .onboarding-card--wide {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-6) var(--space-4) var(--space-10);
  }
}
@media (max-width: 480px) {
  .onboarding-card {
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-md);
  }
  .welcome-brand {
    width: 72px;
    height: 72px;
  }
}
/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .welcome-page,
  .welcome-feature,
  .welcome-cta,
  .onboarding-card {
    animation: none;
  }
}
/* ============================================================
   Arbori — Chat Page Styles
   The primary conversational interface.
   Ref: docs/app_rebuild_todo.md §3 Chat UI, §4 Activity Stream
   ============================================================ */
/* ── Chat Layout ─────────────────────────────────────────── */
.chat-layout {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height));
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  padding: 0 16px;
}
/* When inside the sidebar wrapper, let the parent control height */
.chat-with-sidebar .chat-layout {
  height: 100%;
}
.chat-layout--onboarding {
  max-width: 780px;
}
@media (max-width: 1100px) {
  .chat-layout {
    max-width: none;
    padding: 0 12px;
  }
}
@media (max-width: 820px) {
  .chat-layout {
    padding: 0 10px;
    /* --vvh (visualViewport height, set by visual-viewport.js) shrinks when the
       keyboard opens so the composer stays above it and the thread squeezes;
       100dvh is the fallback (visible viewport minus browser chrome), 100vh the
       last resort. Governs onboarding chat (not wrapped in .chat-with-sidebar). */
    height: calc(100vh - var(--header-height) - var(--bottom-nav-height));
    height: calc(var(--vvh, 100dvh) - var(--header-height) - var(--bottom-nav-height));
  }
  .chat-thread-header {
    align-items: flex-start;
    gap: var(--space-2);
  }
  .chat-thread-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
.chat-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* Critical for flex scroll containment */
}
/* ── Thread Header ───────────────────────────────────────── */
.chat-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  flex-shrink: 0;
}
.chat-thread-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.chat-thread-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  min-width: 0;
  overflow: hidden;
}
.chat-thread-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  display: inline-block;
}
.chat-chain-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-muted);
}
/* ── Status Pill ─────────────────────────────────────────── */
.chat-status-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-default);
}
.chat-status-pill--idle {
  color: var(--color-muted);
  background: var(--color-bg);
}
.chat-status-pill--processing {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}
.chat-status-pill--connected {
  color: var(--color-success);
  background: var(--color-success-soft);
}
.chat-status-pill--disconnected {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}
.chat-status-pill--error {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}
/* ── Message Thread ──────────────────────────────────────── */
.chat-thread {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
  /* No mask-image fade here: a mask on the scroller breaks compositor
     layering and header nav tooltips render translucent (Chromium
     layer squashing). It also ghosted the top messages. */
}
.chat-chain-loader {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 5px 10px;
  margin: 6px auto 10px;
  position: sticky;
  top: 2px;
  z-index: 1;
}
.chat-chain-loader-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-chain-loader--loading {
  color: var(--color-accent);
  border-color: var(--color-accent-soft);
}
.chat-chain-loader--start {
  opacity: 0.85;
}
.chat-session-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
}
.chat-session-divider-line {
  flex: 1;
  min-width: 24px;
  height: 1px;
  background: var(--color-border);
}
.chat-session-divider-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 6px 10px;
  background: var(--color-surface);
  max-width: min(100%, 560px);
}
.chat-session-divider-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-session-divider-date {
  font-size: 11px;
  color: var(--color-muted);
  white-space: nowrap;
}
/* ── Message Bubbles ─────────────────────────────────────── */
.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  /* Flex items default to min-width: auto, which lets a wide child (a long
     code line in a <pre>) expand the message past max-width and drag the
     whole bubble off-screen. Pin to 0 so max-width actually caps us and the
     pre's own overflow-x: auto engages. */
  min-width: 0;
  animation: chat-message-in 200ms var(--ease-default) both;
}
.chat-message--user {
  align-self: flex-end;
  align-items: flex-end;
}
.chat-message--failed {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.chat-message--assistant {
  align-self: flex-start;
  align-items: flex-start;
}
.chat-message--system {
  align-self: center;
  max-width: 90%;
  margin: 8px 0;
}
/* Inline clarification card — a paused agent run asking the user a question. */
.chat-clarification {
  align-self: flex-start;
  max-width: 88%;
  padding: 14px 16px;
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
}
.chat-clarification-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-warning);
  margin-bottom: 6px;
}
.chat-clarification-question {
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: 1.5;
  margin-bottom: 12px;
}
.chat-clarification-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.chat-clarification-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
}
.chat-clarification-input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.chat-clarification-input:disabled {
  opacity: 0.6;
}
/* Inline approval card — the coach proposing an autonomous run (P2.3). */
/* Goal-grouping proposal — rendered inside the coach's own message rather than
   as a separate card, because it IS the question that message is asking. */
.chat-regroup {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.chat-regroup-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-regroup-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.chat-regroup-text {
  font-size: var(--text-sm);
  color: var(--color-ink);
  line-height: 1.4;
}
.chat-regroup-under {
  color: var(--color-muted);
  margin: 0 4px;
}
.chat-regroup-note {
  margin: 10px 0 0;
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1.4;
}
.chat-regroup-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.chat-approval {
  align-self: flex-start;
  max-width: 88%;
  padding: 14px 16px;
  border: 1px solid var(--color-accent-soft);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
}
.chat-approval-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-strong);
  margin-bottom: 6px;
}
.chat-approval-message {
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: 1.5;
  margin-bottom: 12px;
}
.chat-approval-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* Bubble */
.chat-bubble {
  position: relative;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.55;
  font-size: var(--text-base);
  /* Same min-width: auto trap as .chat-message — without this, a wide <pre>
     stretches the bubble instead of scrolling inside it. */
  min-width: 0;
  max-width: 100%;
}
.chat-bubble-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.chat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
/* Pulse chip as a specimen label — madder, not neon green */
.chat-badge--pulse {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--weight-medium);
  background: color-mix(in srgb, var(--color-pulse) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-pulse) 30%, transparent);
  color: var(--color-pulse);
}
/* "Getting started" — the intro-phase counterpart to the Pulse badge, and
   deliberately NOT it (TKT-87). Same shape so the two read as siblings, accent
   green rather than pulse red because this is growth, not a nudge. A user only
   ever sees one of the two on a given message; they are mutually exclusive in
   messages.js. */
.chat-badge--tutorial {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--weight-medium);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: var(--color-accent);
}
/* "Why now?" — deliberately the quietest thing in the bubble. It answers a
   question the user may never ask, so it should be findable without competing
   with what the coach actually said. */
.chat-why-btn {
  background: none;
  border: 0;
  padding: 0;
  font-size: 11px;
  color: var(--color-muted);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.chat-why-btn:hover,
.chat-why-btn:focus-visible {
  color: var(--color-pulse);
}
.chat-why {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 2px solid color-mix(in srgb, var(--color-pulse) 40%, transparent);
  background: color-mix(in srgb, var(--color-pulse) 5%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  color: var(--color-muted);
}
.chat-why-headline {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  color: var(--color-pulse);
  margin-bottom: 4px;
}
.chat-why-reason {
  margin: 0;
  color: var(--color-text);
}
/* The classifier's own words, set apart from the composed facts above. */
.chat-why-rationale {
  margin: 6px 0 0;
  font-style: italic;
}
/* User speech: soft accent paper with an ink voice — the saturated
   accent slab was too heavy on cream (audit §3.7). One square corner =
   speech, not pill. */
.chat-message--user .chat-bubble {
  background: var(--color-accent-soft);
  color: var(--color-ink);
  border: 1px solid var(--color-accent);
  border-bottom-right-radius: var(--radius-xs);
}
.chat-message--user .chat-bubble-content {
  white-space: wrap;
}
.chat-message--user .chat-bubble a {
  color: var(--color-accent-strong);
  text-decoration: underline;
}
/* Anai speaks from the page itself — calm text with an accent rule
   in the margin, like an annotation (audit §3.7) */
.chat-message--assistant .chat-bubble {
  background: transparent;
  color: var(--color-ink);
  border-left: 2px solid var(--color-accent);
  border-radius: 0;
  padding: 4px 16px;
}
/* Bubble content — Markdown rendered */
.chat-bubble-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.chat-bubble-content > *:first-child {
  margin-top: 0;
}
.chat-bubble-content > *:last-child {
  margin-bottom: 0;
}
.chat-bubble-content p {
  margin: 0.4em 0;
}
.chat-bubble-content ul,
.chat-bubble-content ol {
  padding-left: 1.4em;
  margin: 0.5em 0;
}
.chat-bubble-content li {
  margin: 0.15em 0;
}
.chat-bubble-content code {
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 0.88em;
  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
  padding: 2px 5px;
  border-radius: 4px;
}
.chat-bubble-content pre {
  background: var(--color-ink);
  color: var(--color-surface);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  max-width: 100%;
  overflow-x: auto;
  margin: 0.6em 0;
  font-size: 0.85em;
  line-height: 1.5;
}
.chat-bubble-content pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
.chat-bubble-content blockquote {
  border-left: 3px solid var(--color-border);
  padding: 4px 12px;
  margin: 0.5em 0;
  color: var(--color-muted);
  font-style: italic;
}
.chat-bubble-content strong {
  font-weight: 600;
}
.chat-bubble-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Message user — ink code on soft accent */
.chat-message--user .chat-bubble-content code {
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
  color: var(--color-ink);
}
/* System pill — a logbook line, not a gray chip */
.chat-pill {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  text-align: center;
}
/* Meta (sender + time) */
.chat-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 0;
  font-size: 11px;
  color: var(--color-muted);
}
.chat-sender {
  font-weight: 500;
}
.chat-message-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 0;
}
.chat-message-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  opacity: 0;
}
.chat-message-action:hover {
  color: var(--color-ink);
  border-color: var(--color-accent);
  background: var(--color-surface);
}
.chat-message--user:hover .chat-message-action {
  opacity: 1;
}
.chat-message--editing .chat-message-action {
  opacity: 0 !important;
  pointer-events: none;
}
/* Editing: the bubble shrinks to fit its content, so without an
   explicit width the textarea collapses thin and grows tall. Ink on
   paper to match the light bubble (was white-on-accent). */
.chat-message--editing {
  width: 85%;
}
.chat-message--editing .chat-bubble {
  width: 100%;
}
.chat-inline-edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-inline-edit-textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  line-height: 1.55;
  padding: 10px 12px;
  white-space: pre-wrap;
}
.chat-inline-edit-textarea::placeholder {
  color: var(--color-muted);
}
.chat-inline-edit-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}
.chat-inline-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.chat-inline-edit-btn {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}
.chat-inline-edit-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.chat-inline-edit-btn--cancel {
  color: var(--color-muted);
}
.chat-inline-edit-btn--save {
  background: var(--color-accent);
  border-color: var(--color-accent-strong);
  color: var(--color-surface);
}
.chat-inline-edit-btn--save:hover {
  background: var(--color-accent-strong);
  color: var(--color-surface);
}
@media (hover: none) {
  .chat-message-action {
    opacity: 1;
    min-height: 36px;
    min-width: 36px;
    padding: 8px 12px;
    font-size: 12px;
    justify-content: center;
  }
}
/* ── Artifact Link ────────────────────────────────────── */
.chat-artifact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}
.chat-artifact-link:hover {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  text-decoration: none;
}
.chat-artifact-link span {
  line-height: 1;
}
/* ── Reasoning Indicator ─────────────────────────────────── */
.chat-reasoning-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
  padding: 4px;
  border-radius: var(--radius-xs);
}
.chat-reasoning-btn:hover {
  background: color-mix(in srgb, var(--color-ink) 5%, transparent);
  opacity: 1;
}
.chat-message--assistant:hover .chat-reasoning-btn {
  opacity: 0.6;
}
.reasoning-modal-content {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-muted);
}
.reasoning-modal-content pre.reasoning-json {
  background: var(--color-bg);
  padding: 12px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: var(--text-xs);
  white-space: pre-wrap;
}
/* ── Code Copy Button ────────────────────────────────────── */
.code-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: color-mix(in srgb, var(--color-surface) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-surface) 15%, transparent);
  border-radius: var(--radius-xs);
  padding: 4px 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
  color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.code-copy-btn:hover {
  background: color-mix(in srgb, var(--color-surface) 18%, transparent);
  opacity: 1;
}
pre:hover .code-copy-btn {
  opacity: 0.8;
}
@media (hover: none) {
  .code-copy-btn {
    opacity: 0.8;
    min-height: 36px;
    min-width: 36px;
    padding: 8px;
  }
}
/* ── Product Attribution Tags ────────────────────────────── */
.chat-attribution-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 4px 0;
}
.chat-attribution-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--color-muted);
  background: var(--color-bg);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-default);
  white-space: nowrap;
}
.chat-attribution-tag:hover {
  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.chat-attribution-name {
  font-weight: 600;
}
.chat-attribution-desc {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ── Inline Activity Stream ──────────────────────────────── */
.chat-activity-stream {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0 8px 20px;
  position: relative;
  margin-left: 4px;
  transition: opacity 300ms var(--ease-default);
  /* Vertical connecting line */
}
.chat-activity-stream::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: 12px;
  width: 1.5px;
  background: var(--color-border);
}
.chat-activity-stream--fading {
  opacity: 0;
}
/* ── Progress Header ── */
.activity-progress-header {
  margin-bottom: 8px;
  padding: 0 0 6px;
}
.activity-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-muted);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.activity-progress-steps {
  font-weight: 500;
}
.activity-progress-time {
  display: flex;
  align-items: center;
  gap: 4px;
}
.activity-progress-time .icon {
  display: inline-flex;
  vertical-align: middle;
}
.activity-progress-bar {
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}
.activity-progress-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 400ms var(--ease-default);
  min-width: 2px;
}
/* ── Activity Steps ── */
.activity-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  padding: 3px 0;
  animation: activity-step-in 150ms var(--ease-default) both;
}
.activity-step-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.activity-step-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-step--expandable {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 3px 4px;
  margin: 0 -4px;
  transition: background-color 120ms var(--ease-default);
}
.activity-step--expandable:hover {
  background: color-mix(in srgb, var(--color-ink) 5%, transparent);
}
.activity-step--expanded {
  background: color-mix(in srgb, var(--color-ink) 3%, transparent);
}
.activity-step-expand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0.5;
  transition: opacity 120ms var(--ease-default);
}
.activity-step-expand:hover {
  opacity: 1;
}
.activity-step--active {
  color: var(--color-accent);
  font-weight: 500;
}
.activity-step--active .icon.spin svg {
  animation: spin 1s linear infinite;
}
.activity-step--done {
  color: var(--color-muted);
  opacity: 0.7;
}
.activity-step--error {
  color: var(--color-danger);
}
.activity-step--pending {
  color: var(--color-muted);
  opacity: 0.5;
}
/* ── Reasoning Block ── */
.activity-reasoning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-muted);
  padding: 4px 6px;
  margin: 2px 0 1px 20px;
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  animation: activity-step-in 150ms var(--ease-default) both;
}
.activity-reasoning .icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.activity-reasoning span {
  min-width: 0;
  word-break: break-word;
}
.activity-reasoning--thinking {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border-left-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}
/* ── Thinking & Token Usage Step Variants ── */
.activity-step--thinking {
  opacity: 0.8;
  font-style: italic;
}
.activity-step--token-usage {
  opacity: 0.6;
  font-size: 11px;
}
/* ── Expandable Detail Panel ── */
.activity-detail-panel {
  margin: 0 0 4px 24px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--color-ink) 3%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  animation: activity-detail-in 120ms var(--ease-default) both;
}
.activity-detail-section + .activity-detail-section {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
.activity-detail-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 3px;
}
.activity-detail-code {
  font-family: var(--font-mono, "SF Mono", "Cascadia Code", "Fira Code", monospace);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-ink) 5%, transparent);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  max-height: 180px;
  overflow-y: auto;
}
.activity-detail-meta {
  color: var(--color-muted);
  font-size: 11px;
}
@keyframes activity-detail-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ── Composer ────────────────────────────────────────────── */
.chat-composer {
  flex-shrink: 0;
  padding: 12px 0 16px;
  border-top: 1px solid var(--color-border);
}
.chat-composer-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 10px 8px 14px;
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.chat-composer-inner:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.chat-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  resize: none;
  max-height: 200px;
  min-height: 24px;
  line-height: 1.5;
  padding: 2px 0;
}
.chat-input:focus,
.chat-input:focus-visible {
  outline: none;
}
.chat-input::placeholder {
  color: var(--color-muted);
  opacity: 0.6;
}
.chat-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.chat-send-btn,
.chat-stop-btn,
.chat-mic-btn,
.chat-more-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.chat-send-btn {
  background: var(--color-accent);
  border: none;
  color: var(--color-surface);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}
.chat-send-btn:hover {
  background: var(--color-accent-strong);
  transform: scale(1.04);
}
.chat-send-btn:active {
  transform: scale(0.96);
}
/* Mic — the second way to write a message, so it sits beside send as a
   drawn-edge peer rather than a second filled button competing with it. */
.chat-mic-btn {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}
.chat-mic-btn:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
  transform: scale(1.04);
}
.chat-mic-btn:active {
  transform: scale(0.96);
}
/* Listening: a live microphone is the one state in this composer where the
   user needs to be certain at a glance, so it goes full accent and breathes. */
.chat-mic-btn--listening {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface);
  animation: chat-mic-pulse 1.6s var(--ease-default) infinite;
}
.chat-mic-btn--listening:hover {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-surface);
}
@keyframes chat-mic-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--color-accent-soft);
  }
  50% {
    box-shadow: 0 0 0 5px var(--color-accent-soft);
  }
}
/* ── Composer "more" menu ────────────────────────────────── */
.chat-more {
  position: relative;
  flex-shrink: 0;
}
.chat-more-btn {
  background: transparent;
  border: 1.5px solid transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.chat-more-btn:hover,
.chat-more-btn[aria-expanded="true"] {
  border-color: var(--color-border);
  color: var(--color-ink);
}
.chat-more-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 200px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.chat-more-menu[hidden] {
  display: none;
}
.chat-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
}
.chat-more-item:hover {
  background: var(--color-bg);
}
.chat-more-item svg {
  flex-shrink: 0;
  color: var(--color-accent);
}
/* ── Voice status bar ────────────────────────────────────── */
/* Sits above the composer for the two moments voice input takes over: while
   listening, and during the grace period before the transcript sends itself. */
.chat-voice-bar {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 7px 12px;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.chat-voice-bar[hidden] {
  display: none;
}
.chat-voice-label {
  flex: 1;
}
.chat-voice-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  animation: chat-voice-blink 1.2s var(--ease-default) infinite;
}
@keyframes chat-voice-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
.chat-voice-undo {
  flex-shrink: 0;
  padding: 3px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  cursor: pointer;
}
.chat-voice-undo:hover {
  background: var(--color-accent);
  color: var(--color-surface);
}
/* The countdown to auto-send, drained by CSS. Its duration is written from JS
   (VOICE_SEND_DELAY_MS) so the bar and the real timer cannot disagree. */
.chat-voice-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--color-accent);
  transform-origin: left center;
  animation: chat-voice-countdown linear forwards;
}
@keyframes chat-voice-countdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-mic-btn--listening,
  .chat-voice-dot {
    animation: none;
  }
}
.chat-stop-btn {
  background: transparent;
  border: 1.5px solid var(--color-danger);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
}
.chat-stop-btn:hover {
  background: var(--color-danger-soft);
}
.chat-composer-hint {
  font-size: 11px;
  color: var(--color-muted);
  opacity: 0.6;
  padding: 4px 4px 0;
  text-align: right;
}
/* ── Onboarding Welcome Banner ───────────────────────────── */
.chat-onboarding-welcome {
  display: flex;
  justify-content: center;
  padding: 40px 20px 32px;
}
.chat-onboarding-welcome-inner {
  text-align: center;
  max-width: 480px;
}
.chat-onboarding-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin: 12px 0 8px;
  font-weight: 500;
}
.chat-onboarding-welcome .text-muted {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 4px 0;
}
.chat-onboarding-welcome .text-sm {
  font-size: var(--text-xs);
  margin-top: 12px;
}
.chat-product-intro-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.chat-product-intro-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--current-product-color, var(--color-accent));
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.chat-product-intro-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-product-intro-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink);
}
.chat-product-intro-copy {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-muted);
}
/* ── Onboarding Completion Celebration ───────────────────── */
.chat-avatar-setup {
  display: flex;
  justify-content: center;
  padding: 24px 20px;
  animation: chat-message-in 400ms var(--ease-default) both;
}
.chat-avatar-setup-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  box-shadow: var(--shadow-card);
}
.chat-avatar-setup-inner p {
  font-size: var(--text-sm);
  margin: 0;
}
/* The waiting sprout. Motion is the JS wind-wobble (icon-animations.js), so
   there is nothing to animate here — just a fixed box so the swaying glyph
   doesn't shift the copy beside it. */
.chat-avatar-setup-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.chat-onboarding-complete {
  display: flex;
  justify-content: center;
  padding: 32px 20px;
  animation: chat-message-in 400ms var(--ease-default) both;
}
/* Holds the sprout→mark burst. The height is reserved for the taller mark the
   sprout becomes, so the heading below it doesn't jump when the tree appears. */
.onboarding-complete-mark {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  height: 52px;
}
.onboarding-complete-celebration {
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: visible;
}
.onboarding-complete-celebration h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin: 12px 0 8px;
  font-weight: 500;
}
.onboarding-complete-celebration p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  max-width: 360px;
  margin: 0 auto;
}
/* ── Header Transition ───────────────────────────────────── */
.header-transitioning {
  animation: header-morph 400ms var(--ease-default) both;
}
/* ── Animations ──────────────────────────────────────────── */
@keyframes chat-message-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes activity-step-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes header-morph {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .chat-layout {
    padding: 0 8px;
  }
  .chat-message {
    max-width: 92%;
  }
  .chat-bubble {
    padding: 10px 14px;
    font-size: 15px;
  }
  .chat-composer-inner {
    padding: 6px 8px 6px 12px;
  }
  .chat-composer-hint {
    display: none;
  }
  .chat-onboarding-welcome {
    padding: 24px 12px 20px;
  }
  .chat-onboarding-title {
    font-size: var(--text-lg);
  }
  .chat-session-divider {
    gap: 8px;
  }
  .chat-session-divider-pill {
    max-width: 100%;
    padding: 5px 8px;
  }
  .chat-session-divider-title {
    max-width: 160px;
  }
  .onboarding-complete-celebration {
    padding: 24px 20px;
  }
}
/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .chat-message,
  .activity-step,
  .chat-onboarding-complete,
  .chat-avatar-setup {
    animation: none;
  }
  .chat-activity-stream {
    transition: none;
  }
  .icon.spin svg {
    animation: none !important;
  }
  .header-transitioning {
    animation: none;
  }
}
/* ============================================================
   Arbori — Coming Soon Page
   Stub placeholder for unbuilt product sections.
   ============================================================ */
.coming-soon-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
  padding: var(--space-8) var(--space-6);
}
.coming-soon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  max-width: 480px;
  width: 100%;
}
.coming-soon-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.coming-soon-icon svg {
  opacity: 0.8;
}
.coming-soon-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.coming-soon-title {
  font-size: var(--text-3xl);
  color: var(--color-ink);
  margin: 0;
  line-height: 1.2;
}
.coming-soon-tagline {
  font-size: var(--text-base);
  color: var(--color-muted);
  font-weight: var(--weight-medium);
  margin: 0;
}
.coming-soon-body {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
}
.coming-soon-actions .coming-soon-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-6);
}
/* ============================================================
   Posts (public)
   /posts index + /posts/:slug article. Public, unauthenticated.
   ============================================================ */
.posts-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg);
}
/* ── Top bar ──────────────────────────────────────────────── */
.posts-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}
.posts-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-ink);
}
.posts-brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
}
.posts-topbar-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.posts-topbar-link {
  color: var(--color-muted);
  text-decoration: none;
  font-size: var(--text-sm);
}
.posts-topbar-link:hover {
  color: var(--color-ink);
}
.posts-topbar-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-surface);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
}
.posts-topbar-cta:hover {
  background: var(--color-accent-strong);
}
/* ── Main / header ────────────────────────────────────────── */
.posts-main {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}
.posts-header {
  margin-bottom: var(--space-8);
}
.posts-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}
.posts-subtitle {
  color: var(--color-muted);
  font-size: var(--text-md);
  margin: 0;
}
/* ── Filter chips ─────────────────────────────────────────── */
.posts-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.posts-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-sm);
  cursor: pointer;
}
.posts-chip:hover {
  color: var(--color-ink);
  border-color: var(--color-accent);
}
.posts-chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface);
}
/* ── List / cards ─────────────────────────────────────────── */
.posts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.posts-loading,
.posts-empty {
  color: var(--color-muted);
  font-size: var(--text-md);
  padding: var(--space-6) 0;
}
.posts-card {
  display: block;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.posts-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.posts-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.posts-card-date {
  color: var(--color-muted);
  font-size: var(--text-xs);
}
.posts-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}
.posts-card-excerpt {
  color: var(--color-muted);
  font-size: var(--text-md);
  margin: 0 0 var(--space-3);
  line-height: 1.5;
}
.posts-card-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
}
/* ── Type badge (colored per content type) ────────────────── */
.posts-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}
.posts-badge[data-type="research"] {
  background: color-mix(in srgb, var(--color-compass) 16%, transparent);
  color: var(--color-compass);
}
.posts-badge[data-type="fun"] {
  background: color-mix(in srgb, var(--color-pulse) 16%, transparent);
  color: var(--color-pulse);
}
.posts-badge[data-type="product"] {
  background: color-mix(in srgb, var(--color-canopy) 16%, transparent);
  color: var(--color-canopy);
}
.posts-badge[data-type="guide"] {
  background: color-mix(in srgb, var(--color-rings) 16%, transparent);
  color: var(--color-rings);
}
/* ── Article ──────────────────────────────────────────────── */
.posts-article-main {
  max-width: 720px;
}
.posts-article-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}
.posts-article-back:hover {
  color: var(--color-ink);
}
.posts-article-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.15;
  margin: var(--space-3) 0 var(--space-3);
}
.posts-article-excerpt {
  font-size: var(--text-lg);
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0 0 var(--space-6);
}
.posts-article-body {
  color: var(--color-ink);
  font-size: var(--text-md);
  line-height: 1.7;
}
.posts-article-body h1,
.posts-article-body h2,
.posts-article-body h3 {
  font-family: var(--font-display);
  color: var(--color-ink);
  margin: var(--space-8) 0 var(--space-3);
  line-height: 1.25;
}
.posts-article-body h2 {
  font-size: var(--text-2xl);
}
.posts-article-body h3 {
  font-size: var(--text-xl);
}
.posts-article-body p {
  margin: 0 0 var(--space-4);
}
.posts-article-body a {
  color: var(--color-accent);
  text-decoration: underline;
}
.posts-article-body ul,
.posts-article-body ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}
.posts-article-body li {
  margin-bottom: var(--space-2);
}
.posts-article-body img {
  max-width: 100%;
  border-radius: var(--radius-md);
}
.posts-article-body blockquote {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-border);
  color: var(--color-muted);
}
.posts-article-body code {
  font-family: var(--font-label);
  font-size: 0.9em;
  background: var(--color-surface);
  padding: 2px 4px;
  border-radius: var(--radius-xs);
}
.posts-article-body pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  margin: 0 0 var(--space-4);
}
.posts-article-body pre code {
  background: none;
  padding: 0;
}
.posts-article-missing {
  text-align: center;
  padding: var(--space-12) 0;
}
.posts-article-missing h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}
.posts-article-missing p {
  color: var(--color-muted);
  margin: 0 0 var(--space-6);
}
/* ── Footer ───────────────────────────────────────────────── */
.posts-footer {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-xs);
  border-top: 1px solid var(--color-border);
}
/* ============================================================
   Invite Friends — BETA-ACCESS (temporary, see docs/beta-access-teardown.md)
   Delete alongside js/pages/invite.js when beta gating is removed.
   ============================================================ */
.invite-page {
  min-height: calc(100vh - var(--header-height));
  background: var(--color-bg);
}
.invite-inner {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.invite-title {
  margin: 0;
}
.invite-lede {
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
}
.invite-muted {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.invite-error {
  color: var(--color-danger);
}
.invite-locked {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.invite-create {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
}
.invite-subhead {
  margin: var(--space-2) 0 0;
}
.invite-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.invite-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.invite-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.invite-row-target {
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.invite-row-status {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  white-space: nowrap;
}
.invite-row-status--redeemed {
  color: var(--color-success);
}
.invite-row-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.invite-row-link .invite-link-input {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
@media (max-width: 600px) {
  .invite-inner {
    padding: var(--space-6) var(--space-4) var(--space-12);
  }
}
/* BETA-ACCESS — delete with invite page */
/* ============================================================
   Arbori — Icon & Animation Index (dev/QA surface, /dev/animations)
   Layout only. All motion is driven from JS (lib/animate.js) — there are
   deliberately no @keyframes here.
   ============================================================ */
/* `.icon-anim` itself now lives in components/icon-anim.less — animatedIcon is
   used on production surfaces (chat setup, thinking indicator), so its clipping
   rules can't sit in a dev page's stylesheet. */
.anim-gallery {
  max-width: var(--max-width-content, 960px);
  margin: 0 auto;
  padding: var(--space-8, 2rem) var(--space-4, 1rem) var(--space-16, 4rem);
}
.anim-header {
  margin-bottom: var(--space-8, 2rem);
}
.anim-heading {
  font-size: var(--text-3xl);
  color: var(--color-ink);
  margin: 0 0 var(--space-2, 0.5rem);
}
.anim-sub {
  color: var(--color-muted);
  margin: 0 0 var(--space-4, 1rem);
}
.anim-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  flex-wrap: wrap;
}
.anim-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
}
.anim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4, 1rem);
}
.anim-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.anim-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-accent);
}
.anim-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-4, 1rem);
}
.anim-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
}
.anim-title {
  font-size: var(--text-lg);
  color: var(--color-ink);
  margin: 0;
}
.anim-kind {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.5rem;
}
.anim-desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
  line-height: var(--leading-normal);
}
.anim-picker {
  display: flex;
  gap: var(--space-2, 0.5rem);
}
.anim-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default);
}
.anim-picker-btn:hover {
  border-color: var(--color-ink);
}
.anim-picker-btn.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.anim-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-1, 0.25rem);
}
.anim-loop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-sm);
  color: var(--color-muted);
  cursor: pointer;
}
.anim-section-title {
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin: var(--space-10, 2.5rem) 0 var(--space-4, 1rem);
}
.anim-section-title:first-of-type {
  margin-top: 0;
}
/* Machine facts about an animation — id, duration, target icon. */
.anim-spec {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: 0;
}
.anim-spec code {
  font-family: inherit;
  color: var(--color-ink);
}
/* Where the animation is wired in production. An empty list is a finding, not
   an oversight — it is rendered explicitly rather than hidden. */
.anim-usage {
  margin: 0;
  padding-left: var(--space-4, 1rem);
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: var(--leading-relaxed);
}
.anim-usage--none {
  padding-left: 0;
  font-style: italic;
  color: var(--color-warning);
}
/* ── Icon index ───────────────────────────────────────────── */
.icon-index-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  flex-wrap: wrap;
  margin-bottom: var(--space-2, 0.5rem);
}
.icon-filter {
  flex: 1;
  min-width: 220px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-family: inherit;
}
.icon-index-summary {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
}
.icon-index-hint {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0 0 var(--space-6, 1.5rem);
}
.icon-group {
  margin-bottom: var(--space-8, 2rem);
}
.icon-group-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 0.5rem);
}
.icon-group-title {
  font-size: var(--text-lg);
  color: var(--color-ink);
  margin: 0;
}
.icon-group-count {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.icon-group-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: var(--space-1, 0.25rem) 0 var(--space-3, 0.75rem);
}
.icon-group-empty {
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-style: italic;
  margin: var(--space-3, 0.75rem) 0 0;
}
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--space-2, 0.5rem);
}
.icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--duration-fast) var(--ease-default);
}
.icon-tile:hover {
  border-color: var(--color-ink);
}
.icon-tile[hidden] {
  display: none;
}
.icon-tile-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.icon-tile-name {
  font-family: var(--font-label);
  font-size: 10px;
  color: var(--color-muted);
  word-break: break-all;
  line-height: 1.3;
}
.icon-tile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
}
/* Every icon carries the universal Draw On badge; a mark with an animation of
   its own gets the accent treatment so the brand set stands out at a glance. */
.icon-badge {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0 5px;
  line-height: 15px;
}
.icon-badge--own {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
/* /dev/animations — icon animation gallery */
/* ── Global layout ───────────────────────────────────────── */
body {
  background-color: var(--color-bg);
  color: var(--color-ink);
  /* dvh tracks the visible viewport on mobile (100vh is the larger
     toolbar-retracted height, which overshoots and lets the fixed bottom nav
     overlap page content). vh first as a fallback for browsers without dvh. */
  min-height: 100vh;
  min-height: 100dvh;
}
.app-root {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* ── Mobile viewport lock ────────────────────────────────── */
/* Lock body scroll ONLY for chat — chat uses its own internal scroll container.
   All other pages (settings, onboarding, compass, roots, etc.) scroll normally. */
@media (max-width: 820px) {
  body:has(.chat-layout) {
    height: var(--vvh, 100dvh);
    overflow: hidden;
  }
  body:has(.chat-layout) .app-root {
    /* Size to the VISIBLE viewport (set by the visualViewport driver), not the
       layout viewport — so when the keyboard opens the whole chat column
       shrinks and its internal flex thread squeezes, keeping the sticky header
       pinned. overflow:hidden means there's nothing to scroll, so the browser
       can't push the header off-screen to reveal the composer. Falls back to
       100dvh when the driver isn't mounted. */
    height: var(--vvh, 100dvh);
    min-height: 0;
    overflow: hidden;
  }
}
/* ── Links ───────────────────────────────────────────────── */
a {
  color: var(--color-accent);
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover {
  color: var(--color-accent-strong);
}
a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}
/* ── Global a11y interaction baseline ───────────────────── */
:where( button, [type="button"], [type="submit"], [type="reset"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
/* ── Selection ───────────────────────────────────────────── */
::selection {
  background-color: var(--color-accent-soft);
  color: var(--color-ink);
}
/* ── Scrollbar (subtle) ──────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-muted);
}