@import url('tokens.css');

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  background: #721c24;
  color: #f8d7da;
  font-size: 0.875rem;
  z-index: 9999;
  text-align: center;
}

#blazor-error-ui .reload { color: #f8d7da; font-weight: 700; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.5rem; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--bg-body);
  color: var(--text-primary);
  line-height: var(--leading-body);
  min-height: 100vh;
  /* Guard against the landing page's full-bleed sections (.landing-v2
     uses 100vw + negative margins) introducing a horizontal scrollbar.
     `clip` avoids creating a scroll container so sticky/fixed elements
     elsewhere are unaffected. */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  /* Tight tracking on display headings so large sizes feel confident
     rather than airy. Audit v1 flagged this as "two heading typefaces"
     between marketing and app; the underlying font is the same, but
     uneven scale + default tracking made marketing read looser. */
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

/* H1 scales from ~2rem on mobile to 3rem on wide viewports. Previously
   clamped to 4rem which made the landing hero dwarf every app H1 at
   ~2.5rem — the reason marketing and app felt like different faces.
   3rem keeps the marketing presence without the jarring scale cliff. */
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.375rem, 3.25vw, 2rem); }
h3 { font-size: var(--text-xl); }

a {
  color: var(--accent-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover { color: var(--accent-link-hover); }

/* Layout */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  border-bottom: 1px solid var(--border-default);
  padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--space-6) var(--space-4);
}

.app-header-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Clearing wordmark: aperture mark + "uncloud" in Fraunces italic 200.
   The mark uses currentColor; the word sits in the primary text color
   (parchment/bone on dark indigo, ink on bone). The rose accent lives
   only in the apex dot — the wordmark itself stays quiet and editorial. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary) !important;
}

.brand-mark {
  flex-shrink: 0;
  /* optical nudge so the broken ring sits on the wordmark's baseline */
  margin-top: -2px;
}

.brand-word {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 200;
  font-variation-settings: 'opsz' 72, 'SOFT' 60, 'wght' 200;
  font-size: var(--text-2xl);
  letter-spacing: 0.5px;
  line-height: 1;
}

.app-nav {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.app-nav a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}

.app-nav a:hover,
.app-nav a.active {
  color: var(--accent-link);
}

/* Nav-rendered buttons must win the color cascade against the bare .app-nav a
   rule above. Without this, the "Begin" NavLink in the public header rendered
   amber-on-amber (invisible) on /signup, /signin, /signin-unconfirmed — seen
   in audit screens 02/03/04. Matching specificity for every btn variant so a
   future ghost/warn/danger nav button behaves correctly too. */
.app-nav a.btn-primary { color: var(--text-on-accent); }
.app-nav a.btn-primary:hover { color: var(--text-on-accent); }
.app-nav a.btn-warn { color: var(--text-on-accent); }
.app-nav a.btn-danger { color: var(--clear); }
.app-nav a.btn-ghost { color: var(--text-secondary); }

.app-main {
  flex: 1;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  width: 100%;
}

.app-footer {
  border-top: 1px solid var(--border-default);
  padding: var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.app-footer a { color: var(--text-muted); }
.app-footer a:hover { color: var(--accent-link); }
.app-version { font-size: var(--text-xs, 0.75rem); opacity: 0.6; color: var(--text-muted); align-self: center; }

/* Containers */
.container { width: min(72rem, 100%); margin: 0 auto; }
.container-narrow { max-width: 40rem; }

/* Bottom-tab bar — fixed primary nav for mobile viewports. Hidden at
   ≥640px; there the top-bar primary nav does the job. */
.bottom-tabs { display: none; }

/* Mobile-first: tighten edges on narrow viewports */
@media (max-width: 640px) {
  .app-header,
  .app-footer {
    padding: var(--space-4);
  }
  .app-main {
    /* Clear both the bottom tab bar (~56px) and the crisis footer link
       above it. Old padding didn't account for the tab bar. */
    padding: var(--space-6) var(--space-4) calc(var(--space-12) + 56px);
  }
  .app-nav {
    gap: var(--space-3);
  }
  .hero {
    padding: var(--space-8) var(--space-4);
  }

  /* Hide the top-bar primary nav — the four tabs move to .bottom-tabs.
     Account nav (theme toggle, profile, logout) stays in the top bar. */
  .app-nav-primary { display: none; }

  /* Declutter the public header on phones: the hero already carries the
     primary "Begin" CTA, the version badge belongs in About, and the
     language picker is reachable from settings/footer. Leaves brand,
     theme toggle, and "Sign in" — enough to act, nothing more. */
  .app-version { display: none; }
  .app-nav .lang-picker { display: none; }
  .app-nav a.btn-primary { display: none; }

  .bottom-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--surface-elevated);
    border-top: 1px solid var(--border-default);
    padding: var(--space-2) var(--space-1) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    z-index: 60;
  }
  .bottom-tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 48px;
    padding: var(--space-2);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius);
    transition: color var(--duration-fast) var(--ease-out);
  }
  .bottom-tabs a.active {
    color: var(--accent-link);
    background: var(--sun-tint);
  }
  .bottom-tabs .icon { width: 1.25rem; height: 1.25rem; }

  /* Footer link tap targets — audit v1 flagged as under 44px.
     44px is the Apple HIG / Material minimum; use min-height + generous padding. */
  .app-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  /* Primary action rows stack full-width on mobile so the 3-button row on
     the insight page doesn't wrap awkwardly (audit screen 13). */
  .row-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .row-actions > .btn { width: 100%; }
}

/* Stack */
.stack { display: flex; flex-direction: column; gap: var(--space-6); }

/* Row */
.row { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.row-end { justify-content: flex-end; }

/* Card */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--elevation-1);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  text-decoration: none;
}

/* Primary button reads off --accent-link so it stays amber in dark but flips
   to --sun-ink on cream in light. --text-on-accent follows the same swap
   (dark ink in dark theme, white in light). */
.btn-primary {
  background: var(--accent-link);
  color: var(--text-on-accent);
}

.btn-primary:hover {
  background: var(--accent-link-hover);
  box-shadow: 0 0 0 8px var(--sun-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}

.btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--border-emphasis);
}

.btn-danger {
  background: var(--danger);
  color: var(--clear);
}

/* In dark theme the danger token is lightened to #E8786E (coral) so bone text
   at 2.68:1 fails. Switch to ink (dark) text so it reads against the lighter bg. */
:root:not([data-theme="light"]) .btn-danger,
:root:not([data-theme="light"]) .app-nav a.btn-danger {
  color: var(--ink);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn-danger,
  :root:not([data-theme="dark"]) .app-nav a.btn-danger {
    color: var(--clear);
  }
}

[data-theme="light"] .btn-danger,
[data-theme="light"] .app-nav a.btn-danger { color: var(--clear); }

.btn-danger:hover {
  background: var(--danger-hover);
}

/* Warning variant — amber fill used for recovery actions that aren't
   quite primary (resend confirmation email, send a new link). Uses the
   same --warning token family as .chip-warn, so the visual vocabulary
   stays consistent. */
.btn-warn {
  background: var(--warning);
  color: var(--text-on-accent);
}

.btn-warn:hover {
  background: var(--warning-hover);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-sm {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
}

/* Chips — compact status badges used in admin tables */
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--space-2);
  border-radius: 999px;
  border: 1px solid transparent;
}
.chip-success { color: var(--success); background: var(--success-tint); border-color: var(--success); }
.chip-warn    { color: var(--dawn);    background: var(--warning-tint); border-color: var(--dawn); }
.chip-danger  { color: var(--danger);  background: var(--danger-tint);  border-color: var(--danger); }
.chip-muted   { color: var(--text-muted); background: var(--surface-2); border-color: var(--border-subtle); }

/* Chip Grid — selectable option chips used in onboarding */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

/* Interactive chip buttons for selection (onboarding context) */
button.chip {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  gap: var(--space-2);
  min-height: 60px;
}

button.chip:hover {
  border-color: var(--accent-link);
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

button.chip:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

button.chip-selected {
  background: var(--sun-glow);
  border-color: var(--accent-link);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--sun-glow);
}

button.chip-selected:hover {
  background: var(--sun-glow);
  border-color: var(--sun);
}

.chip-icon {
  font-size: var(--text-xl);
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* Goal-chip line icons read as quiet secondary marks until the chip is
   selected, when they pick up the rose accent. Keeps the grid calm. */
button.chip .chip-icon { color: var(--text-secondary); }
button.chip.chip-selected .chip-icon { color: var(--accent-link); }

/* Forms */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.field input,
.field textarea,
.field select {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-link);
  box-shadow: 0 0 0 3px var(--sun-glow);
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

/* Wins composer collapses to a single-line input and grows on focus.
   Audit: the 8rem default is way too big for "got out of bed before noon"
   moments. Keeps the size on blur if the user has typed something. */
.field.win-composer textarea {
  min-height: 2.5rem;
  transition: min-height var(--duration-base) var(--ease-out);
}
.field.win-composer-open textarea { min-height: 7rem; }

.field-error {
  background: var(--danger-tint);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  color: var(--danger);
  font-size: var(--text-sm);
}

/* Attention-needed surface (amber tint + left rule). Use for "confirm your
   email first" / "this link looks incomplete" states — signals attention
   without mimicking a primary CTA, which caused the unconfirmed-email
   banner in the audit to read as a button rather than a warning. */
.alert-warn {
  background: var(--warning-tint);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  padding: var(--space-4);
  color: var(--text-primary);
}
.alert-warn h3 { font-size: var(--text-base); margin: 0 0 var(--space-2); }
.alert-warn p { color: var(--text-secondary); margin: 0; }

/* Wrapping a .card in <fieldset disabled> to disable every input underneath
   at once. The fieldset itself needs zero chrome so the visual stays a card. */
.fieldset-card { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset-card[disabled] .card { opacity: 0.55; cursor: not-allowed; }

/* Text utilities */
.text-meta { color: var(--text-muted); font-size: var(--text-sm); }
.text-center { text-align: center; }
.numeric { font-family: var(--font-numeric); font-variant-numeric: tabular-nums slashed-zero; }

/* Icons — inline SVG, inherit color, scale with font-size */
.icon { width: 1.25em; height: 1.25em; display: inline-block; flex-shrink: 0; }

/* Theme toggle — header button. Uses ghost-style borderless chrome so it
   reads as a utility rather than a primary CTA. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover {
  color: var(--accent-link);
  border-color: var(--border-subtle);
}

/* Crisis banner close button — top-right absolute so it's discoverable
   for keyboard and mouse users without pushing the copy around. */
.crisis-card { position: relative; }
.crisis-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius);
}
.crisis-close:hover { color: var(--text-primary); }

/* ========== Admin ========== */
.admin-shell {
  display: grid;
  grid-template-columns: 16rem 1fr;
  min-height: 100vh;
}

.admin-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  background: var(--surface-1);
  border-right: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  height: 100vh;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--accent-link);
  padding: 0 var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-2);
}
.admin-brand .icon { width: 1.5em; height: 1.5em; }

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.admin-nav-item:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}

.admin-nav-item.active {
  color: var(--accent-link);
  background: var(--sun-tint);
}

.admin-nav-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-3) var(--space-2);
}

.admin-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.admin-content {
  padding: var(--space-8);
  max-width: 80rem;
  width: 100%;
  margin: 0 auto;
}

/* Admin tables — inter-column gutter. Narrow numeric columns otherwise butt
   up against the next cell (e.g. "7d" next to a short date). !important
   because each page sets a `padding: ... 0` shorthand inline that would
   otherwise zero this out. */
.admin-content table td:not(:last-child),
.admin-content table th:not(:last-child) {
  padding-right: var(--space-4) !important;
}

/* Stat cards */
.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--elevation-1);
}

.stat-card-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat-card-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: var(--space-1);
}

.stat-card-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* Sparkline (inherits currentColor; caller sets color) */
.sparkline {
  width: 100%;
  height: auto;
  color: var(--chart-1);
  display: block;
}

/* Range picker */
.range-picker {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

.range-pill {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: var(--space-1) var(--space-3);
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.range-pill:hover { color: var(--text-primary); }

.range-pill.active {
  color: var(--text-on-accent);
  background: var(--accent-link);
}

/* Admin narrow breakpoint — collapse sidebar to top bar */
@media (max-width: 900px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .admin-brand { border-bottom: none; padding: 0 var(--space-2) 0 0; margin-bottom: 0; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 auto; }
  .admin-nav-divider { display: none; }
  .admin-sidebar-footer { flex-direction: row; padding: 0; border-top: none; }
  .admin-content { padding: var(--space-6) var(--space-4); }
}

/* Hero */
.hero {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.hero h1 {
  color: var(--accent-link);
  margin-bottom: var(--space-6);
  /* Distribute lines evenly so the centered heading doesn't end with
     a stub like "you're / missing." on narrow phones. */
  text-wrap: balance;
}

.hero .lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 36rem;
  margin: 0 auto var(--space-8);
  text-wrap: pretty;
}

/* Flow demo — three stacked panels showing entry → pattern → suggestion.
   Different visual treatment from the cream .card blocks below so the
   landing page has rhythm rather than two repeated card stacks. */
.flow-demo {
  padding: 0 var(--space-6) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.flow-demo-intro {
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
  margin: 0 0 var(--space-2);
}

/* Body is forced dark by index.html regardless of OS theme, so these
   panels can't pull from --surface-2/--text-primary (which flip to
   light-theme values when prefers-color-scheme: light is active and
   render dark-text-on-dark — invisible). Use explicit dark-surface
   colors so the panels are stable against the forced body. */
.flow-step {
  position: relative;
  background: rgba(250, 249, 255, 0.05);
  border: 1px solid rgba(168, 168, 200, 0.15);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}

/* Connector tick between panels — small accent line that draws the eye
   from one step to the next without screaming for attention. */
.flow-step + .flow-step::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--space-3) - 1px);
  width: 1px;
  height: var(--space-3);
  background: var(--accent-link);
  opacity: 0.5;
}

.flow-step-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-link);
  margin-bottom: var(--space-2);
}

.flow-step p {
  margin: 0;
  color: #faf9ff;
  font-size: var(--text-base);
  line-height: 1.5;
}

.flow-step-quote {
  font-style: italic;
  color: #c8c8e0 !important;
}

/* "What Uncloud isn't" — quiet honesty section. Plain list rather than
   another card so it reads as a footnote-style aside, not a third claim
   block. Bullet markers are amber to tie back to the brand accent. */
.not-this {
  padding: var(--space-8) var(--space-6) var(--space-6);
}

.not-this-eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-link);
  margin: 0 0 var(--space-3);
}

.not-this-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.not-this-list li {
  position: relative;
  padding-left: var(--space-5);
  color: #c8c8e0;
  font-size: var(--text-sm);
  line-height: 1.55;
}

.not-this-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-link);
}

/* ============================================================
   Landing page ("Clearing" redesign) CSS lives at end of file
   under the .landing-v2 scope (appended 2026-06-03). The prior
   2026-05-10 landing rules (amber-on-dark) were removed in favor
   of the Clearing token-based system.
   ============================================================ */

@media (max-width: 640px) {
  /* Add bottom padding to the page so the sticky CTA doesn't cover
     the footer when scrolled to the bottom. */
  .app-main {
    padding-bottom: calc(var(--space-12) + 4.5rem);
  }
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-6);
}

.modal {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: 32rem;
  width: 100%;
  box-shadow: var(--elevation-3);
}

/* Toast */
.toast-region {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 200;
}

.toast {
  background: var(--accent-link);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-weight: 600;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  box-shadow: var(--elevation-2);
}

/* Crisis banner */
.crisis-card {
  max-width: 28rem;
}

.crisis-card h2 {
  color: var(--accent-link);
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.crisis-card ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

/* Mood picker */
.mood-picker {
  display: flex;
  gap: var(--space-2);
}

.mood-picker button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  background: var(--surface-1);
  color: var(--text-secondary);
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
}

/* Micro-label under each mood icon — audit flagged icon-only radios as
   accessibility-thin even though the aria-label is present; sighted users
   still couldn't tell the icons apart at a glance. */
.mood-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.mood-picker button[aria-checked="true"] .mood-label { color: var(--accent-link); }

.mood-picker button:hover {
  color: var(--text-primary);
  border-color: var(--sun-glow);
}

.mood-picker button[aria-pressed="true"],
.mood-picker button[aria-checked="true"] {
  color: var(--accent-link);
  border-color: var(--accent-link);
  background: var(--sun-tint);
}

.mood-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}

/* Language picker — compact select in the anonymous nav bar. */
.lang-picker select {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: pointer;
}
.lang-picker select:focus {
  outline: none;
  border-color: var(--accent-link);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  z-index: 999;
}

.skip-link:focus {
  left: var(--space-4);
  background: var(--accent-link);
  color: var(--text-on-accent);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
}

/* Share-with-therapist preview dialog — lives on the insight page. */
.share-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  z-index: 100;
}
.share-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - var(--space-6)));
  max-height: calc(100vh - var(--space-8));
  display: flex;
  flex-direction: column;
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-4);
  padding: var(--space-6);
  z-index: 101;
}
.share-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.share-dialog-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: 0;
}
.share-preview {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: var(--space-3) 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.share-preview .entry-body { font-size: var(--text-base); }
.share-preview-section { margin-top: var(--space-4); }
.share-preview-section h4 {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-link);
  margin: 0 0 var(--space-2);
}
.share-preview-section p {
  margin: 0;
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
}
.share-edit {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.share-edit:focus {
  outline: none;
  border-color: var(--accent-link);
  box-shadow: 0 0 0 3px var(--sun-glow);
}

/* Inline text-link styled button for secondary actions inside paragraph
   copy (e.g. "Reset to AI original" inside the share preview blurb). */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--space-2);
  color: var(--accent-link);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.btn-link:hover { color: var(--accent-link-hover); }
.btn-link:disabled { opacity: 0.4; cursor: not-allowed; }
.share-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Journal index — JournalScreen.png reference layout. */
.journal-page { gap: var(--space-6); }

/* The day's greeting reads as an intimate editorial moment — Fraunces
   italic light weight rather than the bold UI display face. */
.journal-greeting h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 72, 'SOFT' 60, 'wght' 300;
  font-size: 2.25rem;
  letter-spacing: 0;
  margin: 0;
  color: var(--text-primary);
}

.greeting-date {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 var(--space-3);
}

/* Streak chip — desaturated to muted neutral so it doesn't compete with the
   amber primary-button and (compact) pattern banner. Audit flagged two
   amber surfaces fighting for attention; the streak is informational, not
   CTA-weight. */
.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.streak-chip .icon { color: var(--accent-link); }

/* Pattern banner — observation card below the composer. Expanded form
   gets the full sun-tinted gradient; compact form (default) is a
   single-line row with a left rule so it doesn't dominate the page.
   Audit: the banner used to lead the page; users come here to write. */
.pattern-banner {
  background: linear-gradient(180deg, var(--sun-tint), var(--surface-1) 70%);
  border: 1px solid var(--accent-link);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
}
.pattern-banner-compact {
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-link);
  padding: var(--space-3) var(--space-4);
}
.pattern-banner-line {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.pattern-banner-line .icon { color: var(--accent-link); flex-shrink: 0; }
.pattern-banner-line strong { color: var(--text-primary); font-weight: 700; }
.pattern-banner-dismiss { color: var(--text-muted); margin-left: auto; }
.pattern-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.pattern-banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-link);
}
.pattern-banner-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}
.pattern-banner-body {
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Today's prompt — warm, eyebrow-led card between mood check-in and composer.
   Lightly tinted with the info/sky accent so it doesn't fight the sun-
   tinted streak chip above it.
   -soft variant: used after moving this card below the composer. Drops the
   full gradient fill for a thin info-colored left rule so it no longer
   competes with the composer for attention. */
.daily-prompt-card {
  background: linear-gradient(180deg, var(--info-tint), var(--surface-1) 70%);
  border: 1px solid var(--info);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
}
.daily-prompt-card.daily-prompt-card-soft {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--info);
}
.daily-prompt-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--info);
  margin-bottom: var(--space-2);
}
/* The daily prompt is something the user reads and reflects on — give it
   the Newsreader reading serif so it feels written, not chrome. */
.daily-prompt-body {
  color: var(--text-primary);
  font-family: var(--font-read);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-3);
}
.daily-prompt-actions {
  justify-content: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.mood-check {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.mood-check-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.composer-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  display: block;
}
.composer textarea {
  width: 100%;
  min-height: 9rem;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.composer textarea:focus {
  outline: none;
  border-color: var(--accent-link);
  box-shadow: 0 0 0 3px var(--sun-glow);
}
.composer-footer {
  margin-top: var(--space-3);
  align-items: center;
}

.past-entries-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-6) 0 0;
}

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

.entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  transition: background var(--duration-base) var(--ease-out);
}
.entry-row:hover { background: var(--surface-2); }

.entry-row-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.entry-row-date {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.entry-row-excerpt {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.chip-insight {
  color: var(--accent-link);
  background: var(--sun-tint);
  border-color: var(--accent-link);
}

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Back link — used on the insight page above the entry body. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.back-link:hover { color: var(--accent-link); }

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.row-secondary {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.btn-ghost-danger { color: var(--danger); }
.btn-ghost-danger:hover { color: var(--danger-hover); border-color: var(--danger); }

/* Overflow menu — dropdown under a "More" button on the insight page
   so Edit / Delete don't sit as one-click primary actions. */
.entry-actions { position: relative; display: inline-block; }
.entry-actions-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--elevation-2);
  padding: var(--space-1);
  min-width: 12rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
}
.entry-actions-menu a,
.entry-actions-menu button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  text-align: left;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  border-radius: var(--radius);
  text-decoration: none;
}
.entry-actions-menu a:hover,
.entry-actions-menu button:hover { background: var(--surface-2); }

.btn .icon { width: 1em; height: 1em; margin-right: 0.3em; }
.btn > .icon:last-child { margin-right: 0; margin-left: 0.3em; }

/* Insight stack — dedicated page layout (InsightScreen.png reference). */
.insight-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.insight-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-link);
  margin: var(--space-4) 0 0;
}

.insight-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.chip-mood {
  color: var(--accent-link);
  background: var(--sun-tint);
  border-color: var(--accent-link);
}

.chip-info-soft {
  color: var(--info);
  background: var(--info-tint);
  border-color: var(--info);
}

.insight-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--elevation-1);
}

.insight-card > header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.insight-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}

.insight-card p {
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  margin: 0;
  white-space: pre-wrap;
}

.insight-card-accent {
  border-color: var(--accent-link);
  background: linear-gradient(180deg, var(--sun-tint), var(--surface-1) 60%);
}

.insight-icon {
  color: var(--accent-link);
  flex-shrink: 0;
}

.insight-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.insight-disclaimer {
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: center;
  margin-top: var(--space-8);
}

/* Journal entry reading text — Newsreader serif per the Clearing spec.
   The reading surface should feel like a private journal page, not UI. */
.entry-body {
  color: var(--text-primary);
  font-family: var(--font-read);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
  font-size: var(--text-lg);
}

.entry-timestamp {
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

/* Legacy insight-panel details style — kept for any lingering callers. */
.insight-panel details summary {
  cursor: pointer;
  color: var(--accent-link);
  font-family: var(--font-display);
  font-weight: 600;
  margin-top: var(--space-4);
}

/* --- Progress page --- */

/* Stat-card grid — auto-fills to 2 across on mobile, 4 across on desktop. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4);
}

/* Progress section head — H2 scoped down so it sits in the same weight
   class as the stat-card values rather than dominating the page like the
   default clamp()-sized H2 does. The audit flagged the old "Patterns" H2
   as larger than the stat cards it was summarising. */
.progress-section { display: flex; flex-direction: column; gap: var(--space-3); }
.progress-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.section-heading {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Mood panel — trend sparkline left, distribution histogram right. Wraps
   to stacked on narrow viewports. */
.mood-panel {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(8rem, 1fr);
  gap: var(--space-6);
  align-items: end;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
}
.mood-panel-trend { color: var(--chart-1); display: flex; flex-direction: column; gap: var(--space-2); }
.mood-panel-dist { display: flex; flex-direction: column; gap: var(--space-2); }
@media (max-width: 640px) {
  .mood-panel { grid-template-columns: 1fr; }
}

/* Mood distribution — 5 bars, tonal ramp. Fixed height so empty buckets
   still register as present. */
.mood-dist {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  align-items: end;
  height: 80px;
}
.mood-dist-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-1); height: 100%; }
.mood-dist-bar {
  width: 100%;
  min-height: 2px; /* Show a stub even at zero so the shape stays. */
  border-radius: calc(var(--radius) / 2);
  background: currentColor;
  transition: height var(--duration-base) var(--ease-out);
}
.mood-dist-1 { color: var(--mood-1); }
.mood-dist-2 { color: var(--mood-2); }
.mood-dist-3 { color: var(--mood-3); }
.mood-dist-4 { color: var(--mood-4); }
.mood-dist-5 { color: var(--mood-5); }
.mood-dist-tick {
  font-family: var(--font-numeric);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Entry-cadence heatmap — 7 rows (day of week), 12 columns (weeks). */
.heatmap {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  aspect-ratio: 12 / 7;
  max-width: 32rem;
}
.heatmap-cell {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: var(--border-subtle);
}
.heatmap-pad { background: transparent; }
.heatmap-lvl-0 { background: var(--border-subtle); }
.heatmap-lvl-1 { background: var(--sun-tint); }
.heatmap-lvl-2 { background: color-mix(in srgb, var(--accent-link) 30%, var(--surface-1)); }
.heatmap-lvl-3 { background: color-mix(in srgb, var(--accent-link) 60%, var(--surface-1)); }
.heatmap-lvl-4 { background: var(--accent-link); }
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.heatmap-legend .heatmap-cell {
  display: inline-block;
  width: 12px;
  height: 12px;
  aspect-ratio: auto;
}

/* Pattern list — compact rows instead of full cards. Dismissed items
   desaturate so they're still scannable but clearly archived. */
.pattern-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pattern-row {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--accent-link);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.pattern-row.is-dismissed { border-left-color: var(--border-default); opacity: 0.7; }
.pattern-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.pattern-row-head h3 { font-size: var(--text-base); font-weight: 600; }
.pattern-row-body { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }

/* Small text-xs utility used by meta labels on this page. */
.text-xs { font-size: var(--text-xs); }

/* --- Health strip (ADR-016) ---
   Sits above the past-entries list on /app/journal. Two equal columns
   (Yesterday / Today) on desktop; stacks on narrow viewports. Tiles use
   the same visual weight as the stat-card row on Progress so the two
   surfaces read as siblings. */
.health-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
}
@media (max-width: 640px) {
  .health-strip { grid-template-columns: 1fr; }
}
.health-strip-col { display: flex; flex-direction: column; gap: var(--space-3); }
.health-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.health-strip-empty {
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
}
.health-strip-tiles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.health-tile-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.health-tile-btn:hover { border-color: var(--border-strong); }
.health-tile-icon { width: 20px; height: 20px; color: var(--accent-link); flex-shrink: 0; }
.health-tile-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.health-tile-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.health-tile-value {
  font-family: var(--font-numeric);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.health-tile-sub { margin-top: 1px; }

/* Empty-state "connect your phone" chip shown when user has never uploaded
   from mobile. Deliberately tiny — web is the secondary surface for this
   feature and we don't want to nag. */
.health-connect-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--accent-link);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.health-connect-chip .icon {
  color: var(--accent-link);
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.health-connect-chip p { margin: 0; }
.health-connect-chip p + p { margin-top: 2px; }

/* Drawer for per-metric 7-day sparkline. Reuses .modal-backdrop + .modal
   primitives; just adds a wider width for the chart. */
.health-drawer {
  max-width: 32rem;
  width: 100%;
}
.health-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
}
.health-drawer-head .row { gap: var(--space-3); align-items: center; }
.health-drawer-icon {
  width: 32px;
  height: 32px;
  color: var(--accent-link);
}
.health-drawer-axis { margin-top: var(--space-2); }

/* Settings → Health section. Per-metric checkbox rows + "hide activity"
   master + danger row for remove-all. */
.health-settings-metrics {
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.health-settings-metrics legend {
  margin-bottom: var(--space-2);
}
.health-settings-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-2) 0;
  cursor: pointer;
}
.health-settings-row input[type="checkbox"] {
  margin-top: 3px;
  cursor: pointer;
}
.health-settings-row input[type="checkbox"]:disabled {
  cursor: not-allowed;
}
.health-settings-label { display: flex; flex-direction: column; gap: 2px; }
.health-settings-label strong { font-weight: 600; }
.health-settings-master {
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}
.health-settings-danger-row { margin-top: var(--space-3); }

/* Health insight card — soft observation after ≥28 paired days of
   health + mood data. Sits next to the pattern banner; dismissible. */
.health-insight-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--sky);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.health-insight-icon {
  color: var(--sky);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.health-insight-body {
  flex: 1;
  line-height: var(--leading-body);
}
.health-insight-body em {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-style: normal;
  /* Put the "Based on N days" footer on its own line so the observation
     sentence + disclosure read as separate beats. Also prevents the awkward
     mid-phrase wrap at 375px audit v4 flagged. */
  display: block;
  margin-top: var(--space-1);
}
.health-insight-dismiss { flex-shrink: 0; }

/* H-24: Silent-drift banner for health permission recovery.
   Shows when health reads are failing despite past consent. Alert-triangle
   icon + orange-yellow left rule to convey urgency without alarm. */
.health-drift-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--warning);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.health-drift-content {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.health-drift-icon {
  color: var(--warning);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.health-drift-body {
  flex: 1;
  line-height: var(--leading-body);
}
.health-drift-title {
  font-weight: 600;
  margin: 0 0 var(--space-1) 0;
}
.health-drift-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.health-drift-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ============================================================
   LANDING PAGE — "Clearing" redesign (appended 2026-06-03)
   Scoped under .landing-v2. Pins the Clearing LIGHT (bone) register
   regardless of app theme; Deep-Indigo + parchment sections supply
   contrast. Colors are Clearing tokens (tokens.css). The site nav +
   footer come from MainLayout — this stylesheet covers content only.

   Full-bleed: .landing-v2 cancels the .app-main max-width + horizontal
   padding so its sections run edge-to-edge; per-section .lp-wrap
   re-introduces the centered 1100px column + responsive page padding.
   ============================================================ */
.landing-v2 {
  --lp-bone:        #FAF7F2;
  --lp-ink:         #1C1C1A;
  --lp-deep-indigo: #1A2744;
  --lp-mark-indigo: #2B3A5A;
  --lp-mist:        #8C9CC2;  /* muted text on dark indigo — lightened to meet WCAG AA (was #4A5F82 ≈2:1) */
  --lp-parchment:   #EDE4D0;
  --lp-dusk:        #C4828A;
  --lp-dawn:        #E8A0A8;
  --lp-ash:         #5E5E59;  /* muted neutral on LIGHT (bone) sections — darkened to meet WCAG AA (was #8A8A85 ≈2.7:1) */
  --lp-rose-text:   #A55C66;  /* rose for NORMAL text on bone (4.55:1) — lp-dusk is too light at 2.85:1 */
  --lp-rose-large:  #BE7880;  /* rose for LARGE text on bone (3.18:1, meets the 3.0 large-text threshold) */
  --lp-f-display: var(--font-serif);
  --lp-f-body:    var(--font-read);
  --lp-page-pad: clamp(24px, 5vw, 80px);

  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: calc(-1 * var(--space-8));
  margin-bottom: calc(-1 * var(--space-8));

  background: var(--lp-bone);
  color: var(--lp-ink);
  font-family: var(--lp-f-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (max-width: 640px) {
  .landing-v2 { margin-bottom: calc(-1 * (var(--space-12) + 56px)); }
}

.landing-v2 a { color: inherit; text-decoration: none; }
/* Button-links must keep their own text color. `.landing-v2 a` (specificity 0,1,1)
   is more specific than the single-class `.lp-btn-*` rules (0,1,0) and was silently
   overriding them via `color: inherit`, leaving the dark body color on the dark-navy
   primary CTA (≈1.15:1, invisible). Restore each button's intended foreground. */
.landing-v2 a.lp-btn-primary { color: var(--lp-parchment); }
.landing-v2 a.lp-btn-primary-light { color: var(--lp-deep-indigo); }
.landing-v2 *, .landing-v2 *::before, .landing-v2 *::after { box-sizing: border-box; }
.landing-v2 svg { display: block; max-width: 100%; }

.lp-wrap {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--lp-page-pad);
  padding-right: var(--lp-page-pad);
}
.lp-wrap--narrow { max-width: calc(760px + 2 * var(--lp-page-pad)); }

.lp-section { padding: clamp(72px, 10vw, 120px) 0; }
.lp-section--dark { background: var(--lp-deep-indigo); color: var(--lp-parchment); }
.lp-section--health { background: var(--lp-parchment); }

.lp-eyebrow {
  font-family: var(--lp-f-display);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 300;
  color: var(--lp-ash);
  margin-bottom: 18px;
  display: block;
}
.lp-eyebrow--light { color: var(--lp-mist); }

.lp-title {
  font-family: var(--lp-f-display);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 72, 'SOFT' 60, 'wght' 200;
  color: var(--lp-deep-indigo);
}
.lp-title--light { color: var(--lp-parchment); }

.lp-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  color: var(--lp-ash);
  font-family: var(--lp-f-body);
  font-size: 14px;
  letter-spacing: 6px;
  opacity: 0.55;
  user-select: none;
}

.lp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lp-deep-indigo);
  color: var(--lp-parchment);
  font-family: var(--lp-f-display);
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 400;
  padding: 16px 32px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.lp-btn-primary:hover { background: var(--lp-mark-indigo); color: var(--lp-parchment); transform: translateY(-1px); }

.lp-btn-ghost {
  display: inline-flex;
  align-items: center;
  font-family: var(--lp-f-display);
  font-size: 13px;
  letter-spacing: 1.5px;
  font-variation-settings: 'opsz' 9, 'wght' 350;
  color: var(--lp-ash);
  padding: 16px 4px;
  transition: color var(--duration-base) var(--ease-out);
}
.lp-btn-ghost:hover { color: var(--lp-ink); }

.lp-btn-primary-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lp-dawn);
  color: var(--lp-deep-indigo);
  font-family: var(--lp-f-display);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 500;
  padding: 16px 36px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.lp-btn-primary-light:hover { background: var(--lp-dusk); color: var(--lp-bone); transform: translateY(-1px); }

/* HERO */
.lp-hero { padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 9vw, 120px); overflow: hidden; }
.lp-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lp-hero__text { max-width: 520px; }
.lp-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--lp-f-display);
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 300;
  color: var(--lp-ash); margin-bottom: 28px;
}
.lp-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-dusk); flex-shrink: 0; }
.lp-hero__h1 {
  font-family: var(--lp-f-display);
  font-style: italic; font-weight: 200;
  font-size: clamp(42px, 5.5vw, 72px);
  line-height: 1.08; letter-spacing: -0.5px;
  font-variation-settings: 'opsz' 72, 'SOFT' 60, 'wght' 200;
  color: var(--lp-deep-indigo); margin-bottom: 28px;
}
.lp-hero__h1 em { font-style: italic; color: var(--lp-rose-large); } /* lp-dusk was 2.85:1, need 3.0 for large; --lp-rose-large = 3.18:1 */
.lp-hero__lead { font-size: 19px; line-height: 1.65; color: #3A3A36; margin-bottom: 40px; max-width: 460px; }
.lp-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.lp-trust-note {
  margin-top: 20px;
  font-family: var(--lp-f-display);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 300;
  color: var(--lp-ash);
}
.lp-hero__visual { position: relative; display: flex; justify-content: center; align-items: center; }
.lp-hero__glow {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,130,138,0.12) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.lp-phone {
  width: 300px; background: var(--lp-deep-indigo);
  border-radius: 44px; padding: 14px;
  box-shadow: 0 40px 80px rgba(26,39,68,0.36), 0 8px 20px rgba(26,39,68,0.22), inset 0 0 0 1px rgba(237,228,208,0.08);
  position: relative; z-index: 1;
}
.lp-phone::before {
  content: ''; position: absolute; top: 20px; left: 50%;
  transform: translateX(-50%); width: 80px; height: 20px;
  background: rgba(26,39,68,0.9); border-radius: 0 0 12px 12px; z-index: 3;
}
.lp-phone__screen {
  background: var(--lp-deep-indigo); border-radius: 32px; overflow: hidden;
  padding: 44px 20px 20px; min-height: 560px;
  color: var(--lp-parchment); font-family: var(--lp-f-body);
}
.lp-ps-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.lp-ps-wordmark {
  font-family: var(--lp-f-display); font-style: italic; font-weight: 200;
  font-size: 20px; letter-spacing: 0.5px;
  font-variation-settings: 'opsz' 72, 'SOFT' 60, 'wght' 200;
  color: var(--lp-parchment); display: flex; align-items: center; gap: 8px;
}
.lp-ps-date {
  font-family: var(--lp-f-display); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 300; color: var(--lp-mist);
}
.lp-ps-greeting {
  font-family: var(--lp-f-display); font-style: italic; font-size: 13px; letter-spacing: 0.3px;
  font-variation-settings: 'opsz' 36, 'SOFT' 60, 'wght' 300; color: var(--lp-mist); margin-bottom: 10px;
}
.lp-ps-prompt {
  font-family: var(--lp-f-display); font-style: italic; font-weight: 300;
  font-size: 21px; line-height: 1.35;
  font-variation-settings: 'opsz' 36, 'SOFT' 40, 'wght' 300;
  color: var(--lp-parchment); margin-bottom: 22px;
}
.lp-ps-entry {
  background: rgba(237,228,208,0.06); border: 1px solid rgba(237,228,208,0.10);
  border-radius: 14px; padding: 14px 15px; margin-bottom: 10px;
}
.lp-ps-entry-meta {
  font-family: var(--lp-f-display); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 300; color: var(--lp-mist);
  margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center;
}
.lp-ps-entry-mood { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-dawn); display: inline-block; }
.lp-ps-entry-mood--neutral { background: rgba(74,95,130,0.5); }
.lp-ps-entry-snip { font-size: 13px; line-height: 1.5; color: rgba(237,228,208,0.82); }
.lp-ps-insight {
  background: rgba(196,130,138,0.12); border: 1px solid rgba(232,160,168,0.25);
  border-radius: 14px; padding: 14px 15px; margin-top: 14px;
}
.lp-ps-insight-label {
  font-family: var(--lp-f-display); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 300; color: var(--lp-dawn);
  margin-bottom: 7px; display: flex; align-items: center; gap: 6px;
}
.lp-ps-insight-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lp-dawn); }
.lp-ps-insight-text { font-size: 13px; line-height: 1.55; color: var(--lp-parchment); }
@media (max-width: 900px) {
  .lp-hero__inner { grid-template-columns: 1fr; gap: 56px; }
  .lp-hero__visual { order: -1; }
  .lp-hero__text, .lp-hero__lead { max-width: 100%; }
  .lp-phone { width: 260px; }
}
@media (max-width: 480px) { .lp-phone { width: 240px; } }

/* FLOW */
.lp-flow { border-left: 1.5px solid rgba(74,95,130,0.2); margin-left: 8px; margin-top: 56px; display: flex; flex-direction: column; }
.lp-flow-row { display: grid; grid-template-columns: 130px 1fr; gap: 28px; padding: 22px 0 22px 32px; position: relative; }
.lp-flow-row::before {
  content: ''; position: absolute; left: -5px; top: 32px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--lp-bone); border: 1.5px solid rgba(74,95,130,0.35);
}
.lp-flow-row--rose::before { background: var(--lp-dusk); border-color: var(--lp-dusk); }
.lp-flow-label {
  font-family: var(--lp-f-display); font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 350; color: var(--lp-ash); padding-top: 2px;
}
.lp-flow-content { font-size: 18px; line-height: 1.6; color: var(--lp-ink); }
.lp-flow-content--italic { font-style: italic; color: #3A3A36; }
.lp-flow-content--hi { color: var(--lp-mark-indigo); font-weight: 450; }
.lp-flow-content--cta { display: inline-flex; flex-direction: column; gap: 4px; }
.lp-flow-try { font-size: 18px; color: var(--lp-ink); }
.lp-flow-meta {
  font-family: var(--lp-f-display); font-size: 11px; letter-spacing: 1.5px;
  font-variation-settings: 'opsz' 9, 'wght' 300; color: var(--lp-ash); margin-top: 4px;
}
@media (max-width: 560px) { .lp-flow-row { grid-template-columns: 1fr; gap: 8px; padding-bottom: 28px; } }
.lp-claude-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(74,95,130,0.12); border: 1px solid rgba(74,95,130,0.2);
  border-radius: 100px; padding: 6px 14px;
  font-family: var(--lp-f-display); font-size: 13px;
  font-variation-settings: 'opsz' 9, 'wght' 350; color: var(--lp-mark-indigo); margin-top: 28px;
}
.lp-claude-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-dusk); flex-shrink: 0; }

/* FEATURES */
.lp-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 56px;
  background: rgba(28,28,26,0.06); border: 1px solid rgba(28,28,26,0.06);
}
.lp-feature { background: #fff; padding: 36px 32px; transition: background var(--duration-base) var(--ease-out); }
.lp-feature:hover { background: #fdfaf7; }
.lp-feature--accent { background: var(--lp-deep-indigo); color: var(--lp-parchment); }
.lp-feature--accent:hover { background: var(--lp-mark-indigo); }
.lp-feature-icon { width: 36px; height: 36px; margin-bottom: 20px; opacity: 0.85; }
.lp-feature--accent .lp-feature-icon { opacity: 0.75; }
.lp-feature-name {
  font-family: var(--lp-f-display); font-style: italic; font-weight: 300;
  font-size: 22px; line-height: 1.2;
  font-variation-settings: 'opsz' 36, 'SOFT' 40, 'wght' 300;
  color: var(--lp-deep-indigo); margin-bottom: 12px;
}
.lp-feature--accent .lp-feature-name { color: var(--lp-parchment); }
.lp-feature-desc { font-size: 16px; line-height: 1.6; color: #4A4A45; }
.lp-feature--accent .lp-feature-desc { color: rgba(237,228,208,0.72); }
@media (max-width: 800px) { .lp-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lp-features { grid-template-columns: 1fr; } .lp-feature { padding: 28px 24px; } }

/* HEALTH */
.lp-health { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lp-health__text { max-width: 460px; }
.lp-health__body { margin-top: 20px; font-size: 17px; line-height: 1.65; color: #4A4A45; }
.lp-health__note { margin-top: 16px; font-size: 15px; color: var(--lp-ash); line-height: 1.6; }
.lp-health__visual { display: flex; flex-direction: column; gap: 12px; }
.lp-health-card { background: var(--lp-deep-indigo); border-radius: 16px; padding: 20px 24px; color: var(--lp-parchment); }
.lp-health-card-label {
  font-family: var(--lp-f-display); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 300; color: var(--lp-mist); margin-bottom: 12px;
}
.lp-health-bars { display: flex; gap: 5px; align-items: flex-end; height: 44px; margin-bottom: 6px; }
.lp-hbar { flex: 1; background: rgba(74,95,130,0.4); border-radius: 3px; min-height: 4px; }
.lp-hbar--hi { background: rgba(232,160,168,0.65); }
.lp-hbar--lo { background: rgba(74,95,130,0.25); }
.lp-health-bar-labels {
  display: flex; justify-content: space-between;
  font-family: var(--lp-f-display); font-size: 9px; letter-spacing: 1.5px;
  font-variation-settings: 'opsz' 9, 'wght' 300; color: var(--lp-mist);
}
.lp-health-insight { background: rgba(196,130,138,0.12); border: 1px solid rgba(232,160,168,0.22); border-radius: 12px; padding: 16px 18px; }
.lp-health-insight-label {
  font-family: var(--lp-f-display); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 300; color: var(--lp-deep-indigo);
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
/* The insight card is a LIGHT rose tile — its label/text must use dark ink, not the
   light parchment/rose used on the dark cards (was 1.1:1 / 1.51:1). The rose dot keeps
   the accent. */
.lp-health-insight-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lp-dawn); }
.lp-health-insight-text { font-size: 14px; line-height: 1.55; color: var(--lp-ink); }
@media (max-width: 800px) { .lp-health { grid-template-columns: 1fr; gap: 48px; } .lp-health__text { max-width: 100%; } }

/* COMPARISON */
.lp-diff-lead { font-size: 18px; line-height: 1.65; color: rgba(237,228,208,0.60); max-width: 600px; margin-top: 16px; }
.lp-table-scroll { overflow-x: auto; }
.lp-table { width: 100%; border-collapse: collapse; margin-top: 56px; font-size: 16px; }
.lp-table th {
  font-family: var(--lp-f-display); font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 350; color: var(--lp-mist);
  padding: 0 0 18px; text-align: left; font-weight: 400; border-bottom: 1px solid rgba(237,228,208,0.10);
}
.lp-table th.lp-col-uncloud { color: var(--lp-dawn); }
.lp-table td {
  padding: 18px 0; vertical-align: top; border-bottom: 1px solid rgba(237,228,208,0.07);
  color: rgba(237,228,208,0.70); line-height: 1.5;
}
.lp-table td:first-child { color: rgba(237,228,208,0.55); font-size: 14px; padding-right: 24px; width: 180px; } /* alpha 0.45→0.55: was 3.54:1, now 4.58:1 on deep-indigo */
.lp-table td.lp-col-others { padding-right: 32px; font-size: 15px; }
.lp-table td.lp-col-uncloud { color: var(--lp-parchment); font-size: 15px; }
.lp-check, .lp-cross { display: inline-flex; align-items: baseline; gap: 8px; }
.lp-check::before, .lp-cross::before {
  content: ''; display: inline-block; width: 14px; height: 14px; flex-shrink: 0;
  background-size: contain; background-repeat: no-repeat; transform: translateY(2px);
}
.lp-check::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6.5' stroke='%23E8A0A8' stroke-width='1' fill='none'/%3E%3Cpath d='M4 7l2 2 4-4' stroke='%23E8A0A8' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lp-cross::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6.5' stroke='rgba(237,228,208,0.2)' stroke-width='1' fill='none'/%3E%3Cpath d='M5 5l4 4M9 5l-4 4' stroke='rgba(237,228,208,0.3)' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (max-width: 640px) {
  .lp-table td:first-child { width: 120px; }
  .lp-table td.lp-col-others, .lp-table th.lp-col-others { display: none; }
}

/* TRUST */
.lp-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 80px; margin-top: 56px; align-items: start; }
.lp-trust-item-label {
  font-family: var(--lp-f-display); font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 350; color: var(--lp-rose-text); margin-bottom: 14px; /* lp-dusk was 2.85:1 on bone; --lp-rose-text = 4.55:1 */
}
.lp-trust-item-heading {
  font-family: var(--lp-f-display); font-style: italic; font-weight: 300;
  font-size: 24px; line-height: 1.2;
  font-variation-settings: 'opsz' 36, 'SOFT' 50, 'wght' 300; color: var(--lp-deep-indigo); margin-bottom: 12px;
}
.lp-trust-item-body { font-size: 16px; line-height: 1.65; color: #4A4A45; }
@media (max-width: 700px) { .lp-trust-grid { grid-template-columns: 1fr; gap: 40px; } }

/* PROMISES */
.lp-promises {
  list-style: none; margin: 48px 0 0; padding: 0; display: flex; flex-direction: column;
  border-top: 1px solid rgba(28,28,26,0.08);
}
.lp-promises li {
  display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid rgba(28,28,26,0.08);
  font-size: 17px; line-height: 1.6; color: #3A3A36;
}
.lp-promises li strong { font-weight: 600; color: var(--lp-ink); }
.lp-promise-num {
  font-family: var(--lp-f-display); font-size: 11px; letter-spacing: 1px;
  font-variation-settings: 'opsz' 9, 'wght' 300; color: var(--lp-rose-text); padding-top: 3px; /* lp-dusk was 2.85:1; --lp-rose-text = 4.55:1 */
}

/* ICP */
.lp-icp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin-top: 56px; }
.lp-icp-card {
  padding: 32px 36px; background: rgba(237,228,208,0.04); border: 1px solid rgba(237,228,208,0.06);
  display: flex; align-items: flex-start; gap: 16px;
}
.lp-icp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-dawn); flex-shrink: 0; margin-top: 9px; }
.lp-icp-text { font-size: 17px; line-height: 1.6; color: rgba(237,228,208,0.72); margin: 0; }
@media (max-width: 640px) { .lp-icp { grid-template-columns: 1fr; } .lp-icp-card { padding: 24px 28px; } }

/* PRICING */
.lp-section--pricing .lp-pricing-head { text-align: center; }
.lp-pricing-lead { margin-top: 16px; font-size: 17px; line-height: 1.65; color: rgba(237,228,208,0.55); max-width: 520px; margin-left: auto; margin-right: auto; }
.lp-pricing-card {
  max-width: 560px; margin: 56px auto 0; background: rgba(237,228,208,0.05);
  border: 1px solid rgba(237,228,208,0.12); border-radius: 8px; padding: 48px 52px; text-align: center;
}
.lp-pricing-trial {
  font-family: var(--lp-f-display); font-style: italic; font-weight: 200;
  font-size: 48px; line-height: 1;
  font-variation-settings: 'opsz' 72, 'SOFT' 60, 'wght' 200; color: var(--lp-parchment); margin-bottom: 8px;
}
.lp-pricing-trial-note {
  font-family: var(--lp-f-display); font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 300; color: var(--lp-mist); margin-bottom: 32px;
}
.lp-pricing-divider { border: none; border-top: 1px solid rgba(237,228,208,0.12); margin: 0 0 32px; }
.lp-pricing-amounts { display: flex; justify-content: center; align-items: baseline; gap: 24px; margin-bottom: 12px; flex-wrap: wrap; }
.lp-pricing-amount { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lp-pricing-price {
  font-family: var(--lp-f-display); font-style: italic; font-weight: 200;
  font-size: 36px; line-height: 1;
  font-variation-settings: 'opsz' 36, 'SOFT' 40, 'wght' 200; color: var(--lp-parchment);
}
.lp-pricing-cadence {
  font-family: var(--lp-f-display); font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 300; color: var(--lp-mist);
}
.lp-pricing-sep { color: rgba(237,228,208,0.15); font-size: 28px; font-weight: 100; align-self: center; }
.lp-pricing-annual-note { font-size: 13px; color: var(--lp-dawn); margin-bottom: 32px; font-style: italic; }
.lp-pricing-card .lp-btn-primary-light { margin-bottom: 20px; }
.lp-pricing-assurances { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 16px; }
.lp-pricing-assurance {
  font-family: var(--lp-f-display); font-size: 11px; letter-spacing: 1.5px;
  font-variation-settings: 'opsz' 9, 'wght' 300; color: var(--lp-mist);
  display: flex; align-items: center; gap: 6px;
}
.lp-pricing-assurance::before { content: '\00B7'; color: rgba(74,95,130,0.5); font-size: 18px; line-height: 0; }
.lp-pricing-assurance:first-child::before { display: none; }
@media (max-width: 580px) { .lp-pricing-card { padding: 40px 28px; } }

/* CLOSING CTA */
.lp-cta { text-align: center; padding-bottom: clamp(80px, 12vw, 140px); }
.lp-cta-mark { margin: 0 auto 36px; display: flex; justify-content: center; }
.lp-cta-headline {
  font-family: var(--lp-f-display); font-style: italic; font-weight: 200;
  font-size: clamp(36px, 5vw, 64px); line-height: 1.1;
  font-variation-settings: 'opsz' 72, 'SOFT' 60, 'wght' 200;
  color: var(--lp-deep-indigo); margin: 0 auto 20px; max-width: 640px;
}
.lp-cta-body { font-size: 18px; line-height: 1.65; color: #4A4A45; max-width: 480px; margin: 0 auto 40px; }
.lp-cta-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* ============================================================
   CLEARING IN-APP EDITORIAL LAYER  (.cl-* — appended 2026-06-04)
   The themed, in-shell counterpart of .landing-v2. Brings the
   Clearing editorial register — Fraunces italic display titles,
   letter-spaced eyebrows, the aperture brand mark, generous
   vertical rhythm — to the functional pages that render inside
   .app-main (auth, billing, legal, health, in-app, admin).

   Unlike .landing-v2 (which pins the bone register regardless of
   theme), every .cl-* primitive resolves against the ACTIVE theme
   tokens, so a converted page reads correctly in both dark (the
   product default) and light. Apply page-by-page; nothing here
   restyles the existing .card/.btn/.field primitives, so partially
   converted pages keep working.
   ============================================================ */

/* Page scaffold — a centered editorial reading column. Default width
   suits auth / transactional forms; --prose widens for legal + long
   reading, --wide for in-app dashboards that still want the rhythm. */
.cl-page {
  max-width: 34rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.cl-page--prose { max-width: 44rem; }
.cl-page--wide  { max-width: 64rem; }

/* Editorial page header — mark + eyebrow + Fraunces title + lede.
   Centered by default for hero/auth moments; --left aligns it for
   content pages where a centered hero would feel like marketing. */
.cl-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8) 0 var(--space-2);
}
.cl-head--left {
  align-items: flex-start;
  text-align: left;
  padding-top: var(--space-2);
}

.cl-mark { color: var(--text-primary); margin-bottom: var(--space-2); line-height: 0; }

/* Eyebrow — Fraunces whisper-weight, wide tracking. The quiet label
   that sits above the title, lifted straight from the landing register. */
.cl-eyebrow {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 300;
  color: var(--text-muted);
}
.cl-eyebrow--accent { color: var(--accent-link); }

/* Title — the signature Fraunces italic display face. Overrides the
   global h1/h2 (display sans) when applied to a heading element. */
.cl-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 72, 'SOFT' 60, 'wght' 200;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
.cl-title em { font-style: italic; color: var(--accent-link); }
.cl-title--sm { font-size: clamp(1.625rem, 3.5vw, 2.25rem); }

/* Lede — Newsreader reading serif, so the supporting line feels written
   rather than chrome. Constrained measure; centers inside a centered head. */
.cl-lede {
  font-family: var(--font-read);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 34rem;
  margin: var(--space-1) 0 0;
}
.cl-head .cl-lede { margin-inline: auto; }

/* Editorial buttons — themed adaptation of the landing's .lp-btn:
   Fraunces label, uppercase, wide tracking, soft lift on hover. Use for
   the primary moment on a converted page; the existing .btn family still
   serves dense in-form actions. */
.cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 450;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.cl-btn-primary { background: var(--accent-link); color: var(--text-on-accent); }
.cl-btn-primary:hover {
  background: var(--accent-link-hover);
  color: var(--text-on-accent);
  transform: translateY(-1px);
  box-shadow: 0 0 0 8px var(--sun-glow);
}
.cl-btn-ghost { color: var(--text-secondary); border-color: var(--border-strong); }
.cl-btn-ghost:hover { color: var(--text-primary); border-color: var(--border-emphasis); }
.cl-btn-quiet { color: var(--text-muted); padding-left: 6px; padding-right: 6px; }
.cl-btn-quiet:hover { color: var(--accent-link); }
.cl-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.cl-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.cl-btn-row--center { justify-content: center; }

/* Editorial surface — a calmer, roomier card than .card for the converted
   pages' content blocks. Reads as a composed panel rather than app chrome. */
.cl-card {
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--elevation-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (max-width: 640px) { .cl-card { padding: var(--space-6); } }

/* Status medallion — circular icon badge for confirm / success / error
   moments (confirm-email, billing result). Neutral by default; semantic
   variants tint to success/danger. */
.cl-status {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  color: var(--accent-link);
}
.cl-status .icon { width: 2rem; height: 2rem; }
.cl-status--success { color: var(--success); background: var(--success-tint); border-color: var(--success); }
.cl-status--danger  { color: var(--danger);  background: var(--danger-tint);  border-color: var(--danger); }

/* Readable editorial section heading for prose pages (legal, long
   explanatory content). Fraunces italic at a real heading size — keep
   this on an actual <h2>/<h3> so the document outline survives. Use this
   (not .cl-section-label) wherever the text is a genuine content heading
   rather than a quiet eyebrow label. */
.cl-subhead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: 0;
  font-variation-settings: 'opsz' 36, 'SOFT' 50, 'wght' 300;
  color: var(--text-primary);
  margin: 0;
}
.cl-subhead--sm { font-size: var(--text-xl); }

/* Eyebrow-led section divider for longer converted pages (settings) —
   a small uppercase label with a hairline rule, echoing .lp-eyebrow.
   Apply to an <h2>/<h3> (not a <div>) so it stays a heading for a11y. */
.cl-section-label {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'wght' 300;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-3);
}
.cl-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* Meta line under a centered head action row (e.g. "Back to sign in"). */
.cl-foot-note {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* STICKY MOBILE CTA */
.lp-sticky-cta { display: none; }
@media (max-width: 640px) {
  .lp-sticky-cta {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: var(--lp-deep-indigo); border-top: 1px solid rgba(237,228,208,0.08);
    padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    align-items: center; justify-content: space-between; gap: 14px;
  }
  .lp-sticky-cta__text {
    font-family: var(--lp-f-display); font-size: 11px; letter-spacing: 1.5px;
    font-variation-settings: 'opsz' 9, 'wght' 300; color: var(--lp-mist); line-height: 1.4;
  }
  .lp-sticky-cta__text strong { display: block; color: var(--lp-parchment); font-size: 14px; letter-spacing: 0.5px; font-weight: 400; margin-bottom: 1px; }
  .lp-sticky-cta__btn { font-size: 11px; padding: 12px 20px; white-space: nowrap; }
  .lp-cta { padding-bottom: 110px; }
}