/* Canonical token set. Light mode adopts the "lifted card" dashboard
   aesthetic everywhere — soft white panels with a teal mist, crisp
   inner cards, and stage-coloured accents. The dark block below mirrors
   the same recipe in dark surfaces so toggling preserves the rhythm. */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg-0: var(--surface-base);
  --bg-1: var(--surface-low);
  --bg-2: #dde7e8;
  --surface-base: #f5f9fa;
  --surface-low: #eaf1f2;
  --surface-lowest: #ffffff;
  --surface-high: #e3e9ea;
  --outline-ghost: rgba(15, 32, 40, 0.06);
  /* Progress-meter tracks + undone week dots — a touch stronger than
     outline-ghost so the empty part of a meter still frames the fill */
  --meter-track: rgba(15, 32, 40, 0.08);
  --stage-num-text: #ffffff;

  /* Panels (outer container) — the "dashboard frame" */
  --panel: rgba(255, 255, 255, 0.82);
  --panel-strong: #ffffff;
  --panel-bg:
    radial-gradient(circle at top right, rgba(140, 224, 210, 0.10), transparent 45%),
    linear-gradient(180deg, #ffffff, #f5fafa);
  --panel-border: color-mix(in srgb, var(--accent-deep) 10%, transparent);
  --panel-shadow: 0 12px 40px rgba(15, 32, 40, 0.06);

  /* Cards (inner surface that sits on a panel) */
  --card-bg: #ffffff;
  --card-border: rgba(15, 32, 40, 0.06);
  --card-shadow: 0 4px 14px rgba(15, 32, 40, 0.05);
  --card-shadow-hover: 0 10px 28px rgba(15, 32, 40, 0.10);

  /* Lines */
  --line-soft: rgba(15, 32, 40, 0.08);
  --line-strong: rgba(15, 32, 40, 0.14);

  /* Text */
  --text-0: #16242a;
  --text-1: #3f4647;
  --text-2: #5d6566;

  /* Accents (teal canonical) */
  --accent-a: #006c5c;
  --accent-deep: #0f766e; /* celebration-screen deep teal (fixed across themes) */
  --accent-b: #005e51;
  --accent-c: #2d8f82;

  /* Destructive-action text (End/Delete breakthrough, error notes) */
  --danger-text: #b42318;

  /* Stage stripes (used on row ::before, current-action card, etc.) */
  --stage-activation: linear-gradient(180deg, #8ce0d2, #5b9bd5);
  --stage-momentum: linear-gradient(180deg, #7b6fff, #4f9eff);
  --stage-integrated: linear-gradient(180deg, #e5bf81, #c4a246);
  --stage-full-shift: linear-gradient(180deg, #fff0d6, #e5bf81, #b8862e);

  /* Stage pill backgrounds + text */
  --stage-pill-activation-bg: rgba(140, 224, 210, 0.22);
  --stage-pill-activation-text: #0f3530;
  --stage-pill-momentum-bg: rgba(123, 111, 255, 0.18);
  --stage-pill-momentum-text: #1e2a72;
  --stage-pill-integrated-bg: rgba(229, 191, 129, 0.32);
  --stage-pill-integrated-text: #6e4a14;
  --stage-pill-full-shift-bg: linear-gradient(135deg, rgba(229, 191, 129, 0.45), rgba(255, 240, 214, 0.7));
  --stage-pill-full-shift-text: #6e4a14;

  /* Streak chip (active state — the daily reward) */
  --streak-chip-bg: linear-gradient(135deg, rgba(229, 191, 129, 0.32), rgba(255, 240, 214, 0.6));
  --streak-chip-text: #6e4a14;
  --streak-chip-border: rgba(180, 142, 70, 0.28);

  /* Ember accents — streak flames and streak digits */
  --ember: #d97706;
  --ember-strong: #b45309;

  /* Celebration glass panels (progress panel, action card, reflection,
     next-step capture, stat tiles) */
  --glass-panel-bg: rgba(255, 255, 255, 0.8);
  --glass-panel-soft-bg: rgba(255, 255, 255, 0.72);
  --glass-panel-inset: rgba(255, 255, 255, 0.55);
  --stat-tile-bg: rgba(15, 23, 42, 0.04);

  /* Summary next-step card — the warm "do this next" surface */
  --next-step-card-bg: linear-gradient(135deg, rgba(245, 230, 195, 0.35), rgba(250, 220, 190, 0.2));
  --next-step-card-border: rgba(180, 130, 60, 0.25);

  /* Floating popovers (audio controls) — near-opaque so they read over any scene */
  --popover-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(233, 245, 241, 0.95));
  --popover-border: color-mix(in srgb, var(--accent-deep) 18%, transparent);
  --popover-shadow: 0 14px 38px rgba(15, 32, 40, 0.18);

  /* In-session "Your new beliefs" recap chips — the user's own words echoed back */
  --beliefs-review-item-bg: rgba(255, 255, 255, 0.65);
  --beliefs-review-item-border: color-mix(in srgb, var(--accent-deep) 22%, transparent);
  --beliefs-review-badge-text: #ffffff;

  /* At-risk streak nudge — the "do a step today" ember call-to-action */
  --nudge-bg: linear-gradient(135deg, #c2410c, #9a3412);
  --nudge-shadow: 0 4px 14px rgba(154, 52, 18, 0.28);
  --nudge-ring: rgba(194, 65, 12, 0.16);
  --nudge-ring-static: rgba(194, 65, 12, 0.22);

  /* Solid-green strong CTA (Start Your Breakthrough / Begin Meditation)
     plus the cue-pulse halo that breathes around a cued primary button */
  --cta-strong-bg: #0b6e43;
  --cta-strong-bg-hover: #095636;
  --cta-halo: rgba(11, 110, 67, 0.2);
  --cta-halo-static: rgba(11, 110, 67, 0.22);

  /* Effects */

  /* Radii */
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-card: 1.2rem;
  --radius-row: 1.1rem;
  --radius-pill: 999px;

  /* Typography */
  --font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;

  /* Layout */
  --width-panel: min(920px, 100%);

  /* Focus + tap targets */
  --focus-ring-color: rgba(0, 108, 92, 0.55);
  --tap-min: 44px;

  /* Scrims + top bar */
  --scrim-soft: rgba(255, 255, 255, 0.65);
  --top-bar-bg: linear-gradient(180deg, rgba(245, 247, 251, 0.92), rgba(245, 247, 251, 0.65));
  --pill-bg-strong: rgba(255, 255, 255, 0.82);

  /* Inputs */
  --input-bg: #ffffff;
  --input-border: rgba(15, 32, 40, 0.14);
  --input-focus-border: rgba(0, 108, 92, 0.42);
  --input-focus-ring: rgba(0, 108, 92, 0.10);
}

/* Dark token block — applies only when the user has explicitly toggled
   to dark via the top-bar button. Light is the default; system
   prefers-color-scheme is intentionally ignored so the app feels
   consistently bright unless the user opts in to dark. Same dashboard
   recipe, dark surfaces. */
:root[data-color-scheme="dark"] {
  color-scheme: dark;
  --bg-0: var(--surface-base);
  --bg-1: var(--surface-low);
  --bg-2: #10243d;
  --surface-base: #07111d;
  --surface-low: #0d1726;
  --surface-lowest: #0f1a2b;
  --surface-high: #1a2740;
  --outline-ghost: rgba(168, 212, 214, 0.18);
  --meter-track: rgba(168, 212, 214, 0.2);
  --stage-num-text: #08211d;

  --panel: rgba(9, 18, 30, 0.7);
  --panel-strong: rgba(13, 23, 38, 0.92);
  --panel-bg:
    radial-gradient(circle at top right, rgba(140, 224, 210, 0.10), transparent 48%),
    linear-gradient(180deg, rgba(13, 23, 38, 0.92), rgba(8, 16, 28, 0.96));
  --panel-border: rgba(140, 224, 210, 0.18);
  --panel-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);

  --card-bg: rgba(15, 26, 43, 0.88);
  --card-border: rgba(168, 212, 214, 0.14);
  --card-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
  --card-shadow-hover: 0 14px 32px rgba(0, 0, 0, 0.44);

  --line-soft: rgba(168, 212, 214, 0.18);
  --line-strong: rgba(204, 234, 223, 0.3);
  --text-0: #eef2ec;
  --text-1: rgba(238, 242, 236, 0.78);
  --text-2: rgba(238, 242, 236, 0.6);
  --accent-a: #8ce0d2;
  --accent-b: #e5bf81;
  --accent-c: #f08a6f;

  /* Destructive-action text — soft salmon: readable (~8:1 on the dark card)
     without the alarm-red glare of light mode's brick #b42318 */
  --danger-text: #f1998b;

  /* Stage stripes stay the same gradient palette — they read on both modes */
  --stage-activation: linear-gradient(180deg, #8ce0d2, #5b9bd5);
  --stage-momentum: linear-gradient(180deg, #9b8fff, #6fb0ff);
  --stage-integrated: linear-gradient(180deg, #f0cf91, #d4b256);
  --stage-full-shift: linear-gradient(180deg, #fff0d6, #e5bf81, #b8862e);

  /* Stage pill bg/text — darker bg, lighter text */
  --stage-pill-activation-bg: rgba(140, 224, 210, 0.18);
  --stage-pill-activation-text: #b8f2e5;
  --stage-pill-momentum-bg: rgba(123, 111, 255, 0.22);
  --stage-pill-momentum-text: #c9c2ff;
  --stage-pill-integrated-bg: rgba(229, 191, 129, 0.24);
  --stage-pill-integrated-text: #f0d59a;
  --stage-pill-full-shift-bg: linear-gradient(135deg, rgba(229, 191, 129, 0.3), rgba(255, 240, 214, 0.45));
  --stage-pill-full-shift-text: #f5deaa;

  /* Streak chip — warm gold over the dark surface, not the light cream */
  --streak-chip-bg: rgba(229, 191, 129, 0.2);
  --streak-chip-text: #f0d59a;
  --streak-chip-border: rgba(229, 191, 129, 0.35);

  /* Ember accents — the deep browns sink into navy, so warm them up */
  --ember: #f5a524;
  --ember-strong: #f2b25c;

  --glass-panel-bg: rgba(15, 26, 43, 0.85);
  --glass-panel-soft-bg: rgba(15, 26, 43, 0.72);
  --glass-panel-inset: rgba(168, 212, 214, 0.08);
  --stat-tile-bg: rgba(168, 212, 214, 0.07);

  /* Summary next-step card — gold tint over the dark panel, not the light cream */
  --next-step-card-bg: linear-gradient(135deg, rgba(229, 191, 129, 0.16), rgba(240, 138, 111, 0.08));
  --next-step-card-border: rgba(229, 191, 129, 0.3);

  /* Floating popovers — calm navy card instead of the light theme's white gradient */
  --popover-bg: linear-gradient(180deg, rgba(23, 36, 56, 0.97), rgba(13, 23, 38, 0.96));
  --popover-border: rgba(140, 224, 210, 0.24);
  --popover-shadow: 0 14px 38px rgba(0, 0, 0, 0.5);

  /* "Your new beliefs" recap chips — mint-washed dark surface so the words glow, not blind */
  --beliefs-review-item-bg: rgba(140, 224, 210, 0.1);
  --beliefs-review-item-border: rgba(140, 224, 210, 0.26);
  --beliefs-review-badge-text: #0b1626;

  /* At-risk streak nudge — deeper, calmer ember over navy: an invitation,
     not an alarm (light mode's bright gradient + wide glow glares here) */
  --nudge-bg: linear-gradient(135deg, #9a3412, #7c2d12);
  --nudge-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  --nudge-ring: rgba(194, 65, 12, 0.1);
  --nudge-ring-static: rgba(194, 65, 12, 0.14);

  /* Strong CTA — a touch brighter green so it lifts off the navy card,
     with a mint halo so the evening's biggest invitation glows like the
     visualizer instead of sinking flat into the launch panel */
  --cta-strong-bg: #0e7d4b;
  --cta-strong-bg-hover: #0b6e43;
  --cta-halo: rgba(140, 224, 210, 0.16);
  --cta-halo-static: rgba(140, 224, 210, 0.22);

  --radius-lg: 32px;
  --radius-md: 22px;
  --radius-card: 1.2rem;
  --radius-row: 1.1rem;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  --focus-ring-color: rgba(140, 224, 210, 0.7);
  --scrim-soft: transparent;
  --top-bar-bg: linear-gradient(180deg, rgba(8, 16, 28, 0.7), rgba(8, 16, 28, 0.4));
  --pill-bg-strong: rgba(8, 16, 28, 0.55);

  --input-bg: rgba(8, 16, 28, 0.75);
  --input-border: rgba(168, 212, 214, 0.22);
  --input-focus-border: rgba(140, 224, 210, 0.55);
  --input-focus-ring: rgba(140, 224, 210, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  min-height: 100%;
  margin: 0;
}

/* body, .shell-inner and .top-bar are styled once, in the "current look"
   layer further down (search for "Canonical shell chrome") — three historical
   restyle layers were merged there. */

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.no-script {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: var(--text-0);
}

.app-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

/* On launch/credits/generating/next-step screens the top-bar carries no
   content — hide the pill chrome so the bar is invisible there. The bar's
   HEIGHT is intentionally kept reserved (we no longer collapse min-height/
   padding/margin): the content below is centered, so toggling the eyebrow on
   and off between screens used to shift it up/down. Reserving the space on
   every screen keeps that content steady through transitions. */
.screen-launch .top-bar,
.screen-credits .top-bar,
.screen-generating .top-bar,
.screen-generation-error .top-bar,
.screen-integration-next-step .top-bar,
.app-shell.top-bar-pending .top-bar {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The eyebrow (segment nav / status chip) fades in once the outgoing screen has
   faded out, instead of popping in and shoving the content below it down. */
.segment-nav--enter,
.top-bar .status-chip {
  animation: ui-fade-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Header logo */
.header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}



.session-badge,
.status-chip,
.phase-pill,
.prompt-tag,
.preview-tag,
.launch-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: var(--pill-bg-strong);
  backdrop-filter: none;
  color: var(--text-1);
}

.session-badge strong,
.status-chip strong {
  color: var(--text-0);
  font-weight: 600;
}

.slider-field,
.summary-header,
.prompt-header,
.fields-grid,
.prompt-stack,
.belief-card,
.narrative-panel,
.field-card {
  display: grid;
  gap: 0.8rem;
}

.slider-field label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-1);
  font-size: 0.92rem;
}

.slider-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent-a);
}

.launch-main,
.session-main,
.summary-main,
.loading-main,
.credits-main {
  flex: 1;
  display: grid;
  place-items: center;
  position: relative;
}

.launch-card,
.summary-panel,
.loading-card,
.prompt-card,
.branch-card {
  width: var(--width-panel);
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  backdrop-filter: none;
}

.launch-card {
  width: min(760px, 100%);
  text-align: center;
}

.launch-card h1,
.summary-panel h1,
.loading-card h2,
.prompt-card h2,
.branch-card h2,
.transition-state h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.launch-card h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
}

.launch-card p,
.loading-card p,
.summary-intro,
.helper-text,
.prompt-intro,
.summary-note {
  color: var(--text-1);
  line-height: 1.65;
}

.launch-meta,
.phase-summary,
.prompt-actions,
.branch-actions,
.summary-actions,
.summary-title-row {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.phase-summary {
  justify-content: center;
}

.launch-meta {
  justify-content: center;
  margin-bottom: 1.6rem;
}

.secondary-button:hover,
.secondary-button:focus-visible {
  transform: translateY(-1px);
  border-color: var(--line-strong);
}

.ghost-link:hover,
.ghost-link:focus-visible {
  transform: translateY(-1px);
}

.spectrometer-stage {
  width: min(980px, 100%);
  margin-inline: auto;
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

/* --- Auto-hide session controls ---
   Hidden controls also get visibility: hidden (delayed until the opacity fade
   completes) so they leave the tab order and the accessibility tree instead of
   staying focusable while invisible. Reveal is instant (0s delay on the
   visible state) so a keydown/mousemove brings them straight back. */
.app-shell .top-bar,
.app-shell .playback-controls,
.app-shell .phase-summary {
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}

.app-shell .header-logo { transition: opacity 0.4s ease, visibility 0s linear 0s; }

.app-shell.controls-hidden .top-bar,
.app-shell.controls-hidden .playback-controls,
.app-shell.controls-hidden .phase-summary {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.app-shell.controls-hidden .header-logo {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* --- Segment navigation --- */
.segment-nav {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.segment-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--pill-bg-strong);
  backdrop-filter: none;
  color: var(--text-1);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.segment-nav-btn:disabled {
  opacity: 0.2;
  cursor: default;
}

.segment-nav-btn:not(:disabled):hover {
  background: rgba(140, 224, 210, 0.12);
  border-color: rgba(140, 224, 210, 0.35);
  color: var(--accent-a);
}

/* --- Narration Playback Controls --- */
.playback-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

.playback-transport,
.playback-utilities {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.voice-progress {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto 0.15rem;
}

.voice-progress-track {
  position: relative;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--line-soft, rgba(15, 23, 42, 0.12));
  cursor: pointer;
  touch-action: none;
  user-select: none;
  outline: none;
}

/* Invisible expanded hit area so the 8px strip is easy to grab on touch. */
.voice-progress-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--tap-min);
  transform: translateY(-50%);
}

.voice-progress-track:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring-color, rgba(0, 108, 92, 0.35));
}

.voice-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: inherit;
  background: var(--accent-a, #006c5c);
  pointer-events: none;
  transition: width 60ms linear;
}

.voice-progress-thumb {
  position: absolute;
  top: 50%;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--accent-a, #006c5c);
  border: 2px solid var(--panel, #fff);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 80ms ease, left 60ms linear;
}

.voice-progress-track:hover .voice-progress-thumb,
.voice-progress-track:focus-visible .voice-progress-thumb {
  transform: translate(-50%, -50%) scale(1.15);
}

.voice-progress.is-disabled .voice-progress-track {
  cursor: not-allowed;
  opacity: 0.55;
}

.voice-progress.is-disabled .voice-progress-thumb {
  display: none;
}

.voice-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-2, #5c6471);
  letter-spacing: 0.02em;
}

.playback-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.playback-btn:hover {
  background: var(--panel-strong);
  border-color: var(--accent-a);
  color: var(--accent-a);
}

.playback-btn--primary {
  padding: 0.6rem 1.1rem;
  background: rgba(140, 224, 210, 0.1);
  border-color: rgba(140, 224, 210, 0.35);
  color: var(--accent-a);
  font-size: 0.85rem;
}

.playback-btn--primary:hover {
  background: rgba(140, 224, 210, 0.18);
  border-color: var(--accent-a);
}

.playback-step {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}



.playback-btn--muted {
  color: var(--accent-c);
  border-color: rgba(240, 138, 111, 0.4);
}

.playback-btn--active {
  color: var(--accent-a);
  border-color: rgba(140, 224, 210, 0.4);
  background: rgba(140, 224, 210, 0.08);
}

/* --- Narration Captions --- */
.caption-strip {
  width: 100%;
  max-width: 580px;
  margin: 0.5rem auto 0;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--panel-strong);
  border: 1px solid var(--line-soft);
  text-align: center;
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.caption-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-1);
  letter-spacing: 0.01em;
  animation: caption-fade-in 260ms ease both;
}

@keyframes caption-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.spectrometer-shell {
  position: relative;
  min-height: min(48vh, 420px);
  border-radius: 42px;
  border: none;
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  opacity: 0.22;
  transform: scale(0.98);
  transition:
    opacity 360ms ease,
    transform 360ms ease;
}

.spectrometer-shell.is-active {
  opacity: 1;
  transform: scale(1);
}

.spectrometer-shell canvas,
.spectrometer-shell .spectrometer-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Safari doesn't clip the canvas's own GPU layer to the shell's rounded
     corners (overflow:hidden alone isn't enough), so the canvas shows square
     corners. Round the canvas itself so the corners match the shell. */
  border-radius: inherit;
}

.spectrometer-overlay {
  background:
    radial-gradient(circle at center, transparent 18%, rgba(7, 17, 29, 0.44) 76%),
    linear-gradient(180deg, rgba(5, 12, 22, 0.08), rgba(5, 12, 22, 0.24));
  pointer-events: none;
}

/* --- Credits screen --- */
.credits-main {
  overflow: hidden;
}

.credits-visualizer {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.credits-visualizer .spectrometer-shell {
  min-height: 100%;
  border-radius: 0;
  border: none;
  opacity: 0.55;
  transform: none;
}

.credits-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 2rem;
}

/* Base line — starts invisible, animates in */
.credits-line {
  opacity: 0;
  animation: credits-fade-in 1200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Role: eyebrow */
.credits-line--eyebrow .credits-text {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-a);
}

/* Role: title */
.credits-line--title .credits-text {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text-0);
  text-shadow: 0 0 60px rgba(140, 224, 210, 0.35);
}

/* Role: subtitle */
.credits-line--subtitle .credits-text {
  display: block;
  font-size: clamp(1rem, 2.6vw, 1.4rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--text-1);
}

/* Role: body */
.credits-line--body .credits-text {
  display: block;
  font-size: clamp(0.82rem, 1.4vw, 0.95rem);
  color: var(--text-2);
}

/* Role: tagline */
.credits-line--tagline .credits-text {
  display: block;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--accent-b);
}

@keyframes credits-fade-in {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Credits skip button */
.credits-skip {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(140, 224, 210, 0.28);
  border-radius: 999px;
  background: rgba(7, 17, 29, 0.55);
  color: rgba(140, 224, 210, 0.75);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  animation: credits-fade-in 600ms cubic-bezier(0.16, 1, 0.3, 1) 1400ms both;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.credits-skip:hover {
  background: rgba(140, 224, 210, 0.12);
  color: var(--accent-a);
  border-color: rgba(140, 224, 210, 0.5);
}

.credits-skip-label {
  text-transform: uppercase;
}

/* --- Admin: credits line editor --- */
.credits-line-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.credits-line-editor {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.credits-line-editor-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.credits-line-text {
  flex: 1;
}

.credits-line-remove {
  flex-shrink: 0;
  padding: 0.35rem 0.5rem;
  min-width: unset;
}

.credits-line-editor-meta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.credits-line-meta-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  min-width: 100px;
}

.credits-line-meta-label span {
  font-size: 0.72rem;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.credits-line-select {
  font-size: 0.82rem;
  padding: 0.35rem 0.6rem;
}

/* --- Visualizer pattern selector (lives in the playback utilities row) --- */
.visualizer-selector {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

/* The select must be able to shrink with the utilities row rather than force
   it wider than small viewports. */
.playback-utilities .visualizer-select {
  min-width: 0;
  max-width: 9.5rem;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  /* The select's value is self-explanatory next to the visualizer — drop the
     uppercase label to keep the utilities row tight on phones. */
  .playback-utilities .visualizer-selector-label {
    display: none;
  }
}

.visualizer-selector-label {
  font-size: 0.78rem;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.visualizer-select {
  appearance: none;
  background: var(--panel);
  color: var(--text-0);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
  font-family: var(--font-body);
  cursor: pointer;
  outline: none;
  transition: border-color 180ms ease;
}

.visualizer-select:hover,
.visualizer-select:focus-visible {
  border-color: var(--accent-a);
}

.prompt-card h2,
.branch-card h2,
.summary-panel h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: 0.55rem;
}

.prompt-stack {
  width: min(860px, 100%);
  animation: rise-in 420ms ease;
}

.field-card {
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.field-card label,
.belief-reference span {
  color: var(--text-1);
  font-size: 0.92rem;
}

.belief-reference strong {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-0);
}

.textarea-shell {
  position: relative;
}

.mute-with-controls {
  position: relative;
  display: inline-flex;
}

.mute-with-controls-group {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: var(--panel);
  overflow: hidden;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.mute-with-controls-group:hover {
  background: var(--panel-strong);
  border-color: var(--accent-a);
  color: var(--accent-a);
}

.mute-with-controls-group.is-muted {
  border-color: rgba(229, 191, 129, 0.55);
  color: rgba(229, 191, 129, 0.95);
}

/* iOS: standalone mute button (no slider dropdown). The `>` selector only
   matches when the mute button is a direct child — i.e. the no-group layout. */
.mute-with-controls > .mute-with-controls-mute {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: var(--panel);
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

/* Invisible hit-area extension (same pattern as .action-source-toggle::after):
   keeps the compact pill visual but grows the touch target to --tap-min (44px).
   Matters on iOS, where this standalone button is the only audio control. */
.mute-with-controls > .mute-with-controls-mute::after {
  content: "";
  position: absolute;
  inset: calc((100% - var(--tap-min)) / 2);
  border-radius: var(--radius-pill);
}

.mute-with-controls > .mute-with-controls-mute:hover {
  background: var(--panel-strong);
  border-color: var(--accent-a);
  color: var(--accent-a);
}

.mute-with-controls.is-muted > .mute-with-controls-mute {
  border-color: rgba(229, 191, 129, 0.55);
  color: rgba(229, 191, 129, 0.95);
}

.mute-with-controls-mute,
.mute-with-controls-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  transition: background 160ms ease;
}

.mute-with-controls-mute:focus-visible,
.mute-with-controls-expand:focus-visible {
  outline: 2px solid var(--accent-a);
  outline-offset: -2px;
}

.mute-with-controls-mute {
  padding: 0.5rem 0.7rem;
}

.mute-with-controls-expand {
  position: relative;
  padding: 0 0.45rem;
  min-width: 1.6rem;
}

.mute-with-controls-expand::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--line-soft);
}

.mute-with-controls-expand .roc-icon {
  transition: transform 180ms ease;
}

.mute-with-controls-expand.is-open .roc-icon {
  transform: rotate(180deg);
}

.audio-popover {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  z-index: 40;
  min-width: 240px;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--popover-border);
  border-radius: 16px;
  background: var(--popover-bg);
  box-shadow: var(--popover-shadow);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  color: var(--text-1, #3f4647);
}

.audio-popover .slider-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.audio-popover .slider-field label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-2, #5d6566);
  letter-spacing: 0.04em;
}

.audio-popover .slider-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent-a, #006c5c);
}

/* ===== Dashboard list — lifted card look ===== */

.integration-panel--dashboard {
  gap: 1.2rem;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}

.integration-panel--dashboard.integration-panel--empty {
  background:
    radial-gradient(circle at top, rgba(229, 191, 129, 0.18), transparent 45%),
    var(--panel-bg);
  border: 1px solid rgba(180, 142, 70, 0.22);
}

.integration-panel--dashboard .integration-header h1 {
  font-size: clamp(1.65rem, 3.2vw, 2.15rem);
  letter-spacing: -0.02em;
  margin: 0;
}

.integration-panel--dashboard .integration-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-a, #006c5c);
  margin: 0 0 0.4rem;
}

.integration-panel--dashboard .integration-row-list {
  gap: 1rem;
}

.integration-panel--dashboard .integration-row {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-row);
  padding: 1.15rem 1.3rem 1.15rem 1.7rem;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.integration-panel--dashboard .integration-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--stage-activation);
}

.integration-panel--dashboard .integration-row[data-stage="momentum"]::before {
  background: var(--stage-momentum);
}

.integration-panel--dashboard .integration-row[data-stage="integrated"]::before {
  background: var(--stage-integrated);
}

.integration-panel--dashboard .integration-row[data-stage="full_shift"]::before {
  background: var(--stage-full-shift);
}

.integration-panel--dashboard .integration-row:hover,
.integration-panel--dashboard .integration-row:focus-visible {
  background: var(--card-bg);
  border-color: var(--panel-border);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

.integration-panel--dashboard .integration-row-stage {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  color: var(--stage-pill-activation-text);
  background: var(--stage-pill-activation-bg);
}

.integration-panel--dashboard .integration-row[data-stage="momentum"] .integration-row-stage {
  color: var(--stage-pill-momentum-text);
  background: var(--stage-pill-momentum-bg);
}

.integration-panel--dashboard .integration-row[data-stage="integrated"] .integration-row-stage {
  color: var(--stage-pill-integrated-text);
  background: var(--stage-pill-integrated-bg);
}

.integration-panel--dashboard .integration-row[data-stage="full_shift"] .integration-row-stage {
  color: var(--stage-pill-full-shift-text);
  background: var(--stage-pill-full-shift-bg);
  box-shadow: inset 0 0 0 1px rgba(180, 142, 70, 0.25);
}

.integration-panel--dashboard .integration-row-summary {
  color: var(--text-0);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.45;
}

.integration-panel--dashboard .integration-row-date {
  color: var(--text-2);
  font-weight: 500;
}

.integration-row-topline-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  min-width: 0;
}

.integration-row-in-play {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem 0.18rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-a);
  background: color-mix(in srgb, var(--accent-a) 12%, transparent);
  white-space: nowrap;
}

.integration-row-in-play-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--accent-a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-a) 20%, transparent);
}

.integration-panel--dashboard .integration-row-meter {
  background: var(--meter-track);
  height: 0.4rem;
}

.integration-panel--dashboard .integration-row-arrow {
  color: var(--text-2);
  transition: color 180ms ease, transform 180ms ease;
}

.integration-panel--dashboard .integration-row:hover .integration-row-arrow {
  color: var(--accent-a);
  transform: translateX(3px);
}

.integration-panel--dashboard .integration-row--quiet {
  /* Softened from 0.78: the row still recedes, but the quiet-note line
     inside it has to stay legible — it's the re-engagement hook. */
  opacity: 0.9;
}

.integration-panel--dashboard .integration-tools {
  border-top: 1px solid var(--line-soft);
}

/* ===== Detail screen — lifted card look ===== */



.today-panel .detail-back,
.record-panel .detail-back {
  align-self: flex-start;
  padding-left: 0;
}

.record-panel .detail-header h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-0);
}

.record-panel .detail-progress-meter {
  background: var(--meter-track);
  height: 0.5rem;
}

/* Each section becomes a crisp inner card */

.record-panel .detail-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--card-shadow);
}







/* History (Completed Steps) — collapsible stage groups */

















/* Delete confirmation block stands apart */





.launch-logo,
.next-step-logo {
  display: block;
  margin: 0 auto 0.75rem;
  max-width: min(360px, 70%);
  height: auto;
  object-fit: contain;
}

.credits-logo {
  display: block;
  margin: 0 auto;
  max-width: min(420px, 72vw);
  max-height: 32vh;
  height: auto;
  object-fit: contain;
}

.beliefs-review {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--accent-deep) 18%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-deep) 6%, transparent);
}

.beliefs-review-label {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-a, var(--text-1));
}

.prompt-context-recall-body {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-0);
}

.beliefs-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: belief-review;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.beliefs-review-item {
  counter-increment: belief-review;
  position: relative;
  padding: 0.7rem 0.9rem 0.7rem 2.6rem;
  border: 1px solid var(--beliefs-review-item-border);
  border-radius: 12px;
  background: var(--beliefs-review-item-bg);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text-0);
}

.beliefs-review-item::before {
  content: counter(belief-review);
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--accent-a, #006c5c);
  color: var(--beliefs-review-badge-text, #fff);
  font-family: var(--font-body, system-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
}

.field-card textarea {
  width: 100%;
  min-height: 108px;
  resize: none;
  padding: 1rem 1.25rem;
  border-radius: 18px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-0);
  line-height: 1.5;
}

.field-card textarea:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 4px var(--input-focus-ring);
}

.field-card:focus-within {
  border-color: var(--input-focus-border);
  transition: border-color 300ms ease, box-shadow 300ms ease;
  box-shadow: 0 0 0 3px var(--input-focus-ring), var(--card-shadow-hover);
}

.prompt-actions,
.branch-actions,
.summary-actions {
  margin-top: 1.2rem;
}

.draft-error {
  font-size: 0.8rem;
  color: var(--danger-text);
  margin: 0.4rem 0 0;
  opacity: 0.85;
}

.helper-text.launch-install-hint {
  font-style: italic;
}

.helper-text.launch-error {
  color: var(--danger-text);
}

.primary-button,
.secondary-button,
.ghost-link {
  min-height: 52px;
  padding: 0.9rem 1.35rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease;
}

.primary-button {
  background:
    linear-gradient(135deg, rgba(229, 191, 129, 0.95), rgba(140, 224, 210, 0.9));
  color: #081019;
  font-weight: 700;
}

.secondary-button {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-soft);
  color: var(--text-0);
}

.ghost-link {
  background: transparent;
  border-color: transparent;
  color: var(--text-1);
  padding-inline: 0;
}

.primary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Launch / begin-session button: a normal-shaped primary button in solid dark
   green for high attention, replacing the old press-and-hold circle. */
.launch-actions {
  width: 100%;
  margin-top: 0.5rem;
}

/* Step 7 "I'm not ready" landing — calmer type than the launch hero, which
   wraps badly at headline scale on this longer sentence. Doubled class keeps
   this ahead of the later .launch-card h1 theme rule. */
.launch-card.not-ready-card h1 {
  /* The launch hero caps its h1 at 10ch for the big "Shift Up" treatment —
     undo that here or this sentence wraps into a narrow left-pinned column. */
  max-width: none;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}

.launch-card.not-ready-card p {
  max-width: 52ch;
  margin: 0 auto 0.85rem;
}

.not-ready-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.not-ready-actions .primary-button,
.not-ready-actions .secondary-button {
  width: min(380px, 100%);
}

.launch-start-button {
  width: 100%;
}

.primary-button.launch-start-button {
  background: var(--cta-strong-bg);
  color: #ffffff;
}

.primary-button.launch-start-button:hover:not(:disabled) {
  background: var(--cta-strong-bg-hover);
}

.primary-button.launch-start-button:active:not(:disabled) {
  transform: translateY(1px);
}

/* Returning user with an active step: the continue card leads the launch
   screen, so starting a NEW breakthrough steps back to a quiet secondary
   surface. Tokens keep it readable in both themes. */
.primary-button.launch-start-button.launch-start-button--secondary {
  background: var(--card-bg);
  border-color: var(--line-soft);
  color: var(--text-0);
  font-weight: 600;
}

.primary-button.launch-start-button.launch-start-button--secondary:hover:not(:disabled) {
  background: var(--card-bg);
  border-color: var(--line-strong);
}

/* Soft attention pulse on a primary button. Used to cue the Start button ~30s
   into the first-visit intro audio, and the "Integrate" button after the
   first-breakthrough wrap-up audio. Gentle scale + green glow that breathes;
   respects reduced-motion preferences. */
@keyframes launch-cue-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    /* Gentle breath — obvious enough to draw the eye, calm enough not to nag. */
    transform: scale(1.035);
  }
}

/* The soft green halo lives on a ::after ring with the shadow baked at full
   spread; only opacity animates, so the loop stays compositor-only instead of
   repainting the button every frame (matters on iOS launch, where it runs
   alongside the intro-audio decode/start). */
@keyframes launch-cue-halo {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.primary-button.is-cue-pulsing {
  /* Slow, eased loop reads as "breathing" rather than blinking. */
  position: relative;
  animation: launch-cue-pulse 2.3s ease-in-out infinite;
  will-change: transform;
}

.primary-button.is-cue-pulsing::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 13px var(--cta-halo);
  opacity: 0;
  pointer-events: none;
  animation: launch-cue-halo 2.3s ease-in-out infinite;
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
  /* No motion, but keep a steady ring so the cue is still visible. */
  .primary-button.is-cue-pulsing {
    animation: none;
    box-shadow: 0 0 0 4px var(--cta-halo-static);
  }

  /* Dark strong CTA: keep the steady cue ring on top of its resting glow
     (the dark glow rule would otherwise out-rank the ring above). */
  :root[data-color-scheme="dark"] .primary-button.launch-start-button.is-cue-pulsing:not(.launch-start-button--secondary) {
    box-shadow: 0 0 0 4px var(--cta-halo-static), 0 10px 32px rgba(140, 224, 210, 0.14);
  }

  .primary-button.is-cue-pulsing::after {
    animation: none;
    opacity: 0;
  }
}

.transition-state {
  width: min(460px, 100%);
  margin-inline: auto;
  text-align: center;
  color: var(--text-1);
  animation: pulse-glow 1.2s ease-in-out infinite;
  background: radial-gradient(ellipse 70% 50% at center, rgba(140, 224, 210, 0.05) 0%, transparent 72%);
}

.transition-state h2 {
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  color: var(--text-0);
  text-shadow: 0 0 40px rgba(140, 224, 210, 0.18);
}

.loading-card {
  text-align: center;
}

.loading-ring {
  width: 84px;
  height: 84px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--accent-b);
  animation: spin 1.2s linear infinite;
}

.summary-panel {
  width: min(920px, 100%);
  max-height: calc(100vh - 3rem);
  overflow: auto;
}

.summary-panel::-webkit-scrollbar {
  width: 10px;
}

.summary-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.summary-title-row {
  justify-content: space-between;
  align-items: flex-start;
}

.preview-tag {
  border-color: rgba(229, 191, 129, 0.32);
  background: rgba(229, 191, 129, 0.1);
  color: var(--accent-b);
}

.narrative-panel p,
.belief-card p {
  margin: 0;
  line-height: 1.75;
}

.narrative-panel p {
  animation: rise-in 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--para-index, 0) * 90ms + 100ms);
}

.narrative-panel + .belief-grid {
  margin-top: 2rem;
}

.belief-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@keyframes belief-reveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.belief-grid .belief-card {
  animation: belief-reveal 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--card-index, 0) * 130ms + 280ms);
}

.belief-card {
  padding: 1.15rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

/* Eyebrow above each new-belief statement — a quiet label, not a pill,
   so the card reads as a statement rather than an empty input. */
.belief-card-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-a);
}

.belief-card-label + h3 {
  margin: 0.55rem 0 0;
}

/* Next step card */
.evidence-card {
  margin-top: 1.5rem;
  padding: 1.3rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(99, 210, 188, 0.3);
  border-left: 3px solid rgba(99, 210, 188, 0.6);
  background:
    linear-gradient(135deg, rgba(99, 210, 188, 0.08), rgba(56, 178, 172, 0.05));
  display: grid;
  gap: 0.55rem;
}

.evidence-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-a);
}

.evidence-text {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-0);
}

.next-step-card {
  margin-top: 1.5rem;
  padding: 1.3rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(229, 191, 129, 0.3);
  border-left: 3px solid rgba(229, 191, 129, 0.6);
  background:
    linear-gradient(135deg, rgba(229, 191, 129, 0.08), rgba(240, 138, 111, 0.05));
  display: grid;
  gap: 0.55rem;
}

.next-step-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-b);
}

.next-step-text {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-0);
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

.top-actions,
.admin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.session-badge,
.status-chip,
.phase-pill,
.prompt-tag,
.preview-tag,
.launch-meta span {
  background: var(--pill-bg-strong);
  border: 1px solid var(--line-soft);
  color: var(--text-1);
  backdrop-filter: none;
}

.session-badge strong,
.status-chip strong,
.prompt-tag,
.preview-tag {
  color: var(--text-0);
}

/* Outer panels — the "dashboard frame" recipe everywhere */
.launch-card,
.summary-panel,
.loading-card,
.prompt-card,
.branch-card,
.admin-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  backdrop-filter: none;
}

/* Inner cards — crisp surface sitting on a panel */
.field-card,
.belief-card,
.segment-card,
.field-settings-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  backdrop-filter: none;
}

.spectrometer-shell {
  background: transparent;
  border: none;
  box-shadow: none;
}

.slider-field input[type="range"] {
  accent-color: var(--accent-a);
}

.launch-main,
.session-main,
.summary-main,
.loading-main,
.admin-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(0.75rem, 2vw, 1.5rem) 0 2rem;
}

.launch-card {
  width: min(760px, 100%);
}

.launch-card h1,
.summary-panel h1,
.loading-card h2,
.prompt-card h2,
.branch-card h2,
.transition-state h2,
.admin-panel h1,
.admin-panel h2,
.admin-panel h3 {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  color: var(--text-0);
}

.launch-card h1 {
  font-size: clamp(2.75rem, 8vw, 5rem);
}

.launch-card p,
.loading-card p,
.summary-intro,
.helper-text,
.prompt-intro,
.summary-note,
.admin-intro,
.section-heading p,
.setting-hint,
.admin-banner,
.segment-kicker {
  color: var(--text-1);
}

.belief-reference strong {
  font-family: var(--font-display);
}

.spectrometer-stage,
.prompt-stack {
  width: min(920px, 100%);
}

.spectrometer-shell {
  min-height: min(46vh, 400px);
  border-radius: 32px;
  opacity: 1;
  transform: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96)),
    linear-gradient(180deg, rgba(79, 124, 255, 0.06), rgba(107, 184, 201, 0.04));
}

.spectrometer-overlay {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(226, 232, 240, 0.18)),
    radial-gradient(circle at center, transparent 18%, rgba(255, 255, 255, 0.14) 76%);
}

.field-card {
  padding: 1.15rem;
  background: rgba(248, 250, 252, 0.98);
}

.field-card label,
.belief-reference span {
  color: var(--text-1);
}

.field-card textarea,
.text-input,
.text-area {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-0);
  line-height: 1.55;
  padding: 0.95rem 1rem;
}

.field-card textarea {
  min-height: 108px;
  padding-right: 1.25rem;
}

.field-card textarea:focus,
.text-input:focus,
.text-area:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 4px var(--input-focus-ring);
}

.primary-button,
.secondary-button,
.ghost-link {
  min-height: 50px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.primary-button {
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  color: #ffffff;
}

.secondary-button {
  background: var(--card-bg);
  border-color: var(--card-border);
  color: var(--text-0);
}

.ghost-link {
  color: var(--text-1);
}

.summary-panel {
  width: min(960px, 100%);
  max-height: none;
  overflow: visible;
}

.summary-title-row {
  align-items: flex-start;
}

.preview-tag {
  color: var(--accent-a);
  background: var(--stage-pill-activation-bg);
  border-color: var(--panel-border);
}

.belief-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.belief-card {
  background: var(--card-bg);
}

.next-step-card {
  background: var(--next-step-card-bg);
  border-color: var(--next-step-card-border);
}

.loading-ring {
  border: 2px solid var(--outline-ghost);
  border-top-color: var(--accent-a);
}

.transition-state {
  width: min(520px, 100%);
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  color: var(--text-1);
  animation: none;
}

.admin-panel {
  width: min(1120px, 100%);
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: 30px;
}

.admin-header,
.section-heading,
.settings-stack,
.segment-stack,
.field-settings,
.field-settings-grid {
  display: grid;
  gap: 1rem;
}

.admin-header {
  margin-bottom: 1.2rem;
}

.admin-eyebrow {
  margin: 0 0 0.35rem;
  color: var(--text-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.admin-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-soft);
}

.admin-tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 160ms ease;
}

.admin-tab:hover {
  background: var(--stage-pill-activation-bg);
  color: var(--text-0);
}

.admin-tab--active {
  background: var(--stage-pill-activation-bg);
  color: var(--accent-a);
  border-color: var(--panel-border);
  font-weight: 600;
}

.admin-tab--active:hover {
  background: var(--stage-pill-activation-bg);
  color: var(--accent-a);
}

.admin-tab-content {
  min-height: 300px;
}

.admin-tab-content > .admin-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.admin-banner {
  margin-bottom: 1.25rem;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  color: var(--text-1);
}

.admin-section {
  padding-top: 1.4rem;
  margin-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}

.settings-grid,
.field-settings-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setting-row,
.toggle-row {
  display: grid;
  gap: 0.55rem;
}

.setting-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-0);
}

.toggle-row {
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.toggle-input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent-a);
}

.color-setting-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.color-input {
  width: 2.4rem;
  height: 2.2rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.1rem;
  background: var(--bg-2);
  cursor: pointer;
  flex-shrink: 0;
}

.color-clear-btn {
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.segment-card,
.field-settings-card {
  border-radius: 24px;
  padding: 1rem;
}

.segment-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
  border-radius: 16px;
  padding: 0.35rem;
  transition: background 140ms ease;
}

.segment-card-header:hover {
  background: rgba(140, 224, 210, 0.04);
}

.segment-card--expanded .segment-card-header {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 0.75rem;
}

.segment-card-summary {
  min-width: 0;
  flex: 1;
}

.segment-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.segment-card-title-row h3 {
  margin: 0;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.segment-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  background: rgba(140, 224, 210, 0.12);
  color: var(--accent-a);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.segment-expand-icon {
  font-size: 0.6rem;
  color: var(--text-1);
  opacity: 0.5;
  flex-shrink: 0;
  margin-left: auto;
}

.segment-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
  padding-left: 0.1rem;
}

.seg-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.seg-badge--audio {
  background: rgba(140, 224, 210, 0.1);
  color: var(--accent-a);
}

.seg-badge--prompt {
  background: rgba(220, 196, 130, 0.12);
  color: var(--accent-b);
}

.seg-badge--script {
  background: rgba(160, 170, 200, 0.1);
  color: var(--text-1);
}

.seg-badge--none {
  background: rgba(160, 170, 200, 0.06);
  color: var(--text-1);
  opacity: 0.5;
}

.segment-card-body {
  display: grid;
  gap: 1.25rem;
}

.segment-detail-group {
  padding-top: 0.25rem;
}

.segment-group-title {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-a);
}

.segment-toolbar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.field-list {
  margin-top: 0.75rem;
}

.field-list-title {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-1);
}

.field-inline-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}

.segment-card-meta {
  min-width: 0;
}

.segment-card-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.segment-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text-1);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  white-space: nowrap;
}

.segment-action-btn:hover:not(:disabled) {
  background: rgba(140, 224, 210, 0.1);
  color: var(--accent-a);
  border-color: rgba(140, 224, 210, 0.35);
}

.segment-action-btn:disabled {
  opacity: 0.28;
  cursor: default;
}

.segment-action-btn--delete:hover:not(:disabled) {
  background: rgba(240, 138, 111, 0.1);
  color: var(--accent-c);
  border-color: rgba(240, 138, 111, 0.35);
}

.segment-action-btn--confirm-delete {
  background: rgba(240, 138, 111, 0.12);
  color: var(--accent-c);
  border-color: rgba(240, 138, 111, 0.4);
  font-weight: 600;
}

.segment-action-btn--confirm-delete:hover {
  background: rgba(240, 138, 111, 0.22);
}

.segment-add-row {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-start;
}

/* Field card header (inside prompt fields) */
.field-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.field-settings-header h4 {
  margin: 0;
}

.field-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.field-key-label {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.segment-card h3,
.field-settings h4 {
  margin: 0;
}

.field-settings {
  margin-top: 1rem;
}

.code-area {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

.top-button {
  min-width: 92px;
}

@media (max-width: 900px) {
  .settings-grid,
  .field-settings-grid,
  .belief-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* Scale spacing/sizing tokens down ~1/3 without touching font sizes */
  :root {
    --radius-lg: 20px;
    --radius-md: 14px;
  }

  /* .top-bar mobile spacing lives in the reskin layer's 640px block further
     down, together with .shell-inner etc. — rules here would be defeated by
     the reskin's later unconditional declarations. */

  /* .shell-inner, .launch-card, .summary-panel and .field-card mobile spacing
     lives in the reskin layer's 640px block further down — rules here would be
     defeated by the reskin's later unconditional declarations. */
  .loading-card,
  .prompt-card,
  .branch-card,
  .admin-panel,
  .segment-card {
    padding: clamp(0.9rem, 2vw, 1.3rem);
    border-radius: var(--radius-lg);
  }

  .session-badge,
  .status-chip {
    padding: 0.4rem 0.65rem;
    gap: 0.35rem;
  }

  .playback-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    width: min(100%, 28rem);
    margin-inline: auto;
  }

  .playback-transport,
  .playback-utilities {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
  }

  .playback-transport {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
  }

  .playback-utilities {
    justify-content: center;
  }

  .playback-btn {
    min-width: 0;
    min-height: 40px;
    justify-content: center;
    padding: 0.5rem;
  }

  .playback-transport .playback-btn {
    width: 100%;
  }

  .playback-transport .playback-btn--primary {
    padding-inline: 0.5rem;
  }

  .playback-step {
    font-size: 0.68rem;
  }

  .spectrometer-stage,
  .prompt-stack {
    padding: 0.65rem;
    border-radius: var(--radius-lg);
  }

  .admin-actions {
    width: 100%;
  }

  .narrative-panel,
  .belief-card {
    padding: 0.75rem;
  }

  .prompt-actions,
  .branch-actions,
  .summary-actions {
    gap: 0.55rem;
    margin-top: 0.75rem;
  }
}


/* ===== Canonical shell chrome =====
   Single merged definitions for body / .shell-inner / .top-bar. These were
   historically defined three times (base look → lifted-card reskin → current
   look) relying on cascade order; the merged rules live HERE, at the last
   layer's position, so later media-query overrides keep winning exactly as
   before. */
body {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
  background:
    radial-gradient(circle at top left, rgba(0, 108, 92, 0.045), transparent 32%),
    linear-gradient(180deg, var(--surface-base), var(--surface-low));
  color: var(--text-0);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shell-inner {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: visible;
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.75rem);
}

.top-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 80px;
  width: 100%;
  margin: 0 auto 1.25rem;
  padding: 0.7rem 0.85rem 0.85rem;
  border-radius: 999px;
  background: var(--top-bar-bg);
  /* Grid items default to min-width:auto and refuse to shrink below their
     content, which let a long segment title push the whole page wider than
     the viewport on phones. min-width:0 on the children (below) plus
     ellipsis on the badge lets the bar compress instead. */
  box-shadow: 0 0 0 1px var(--line-soft);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.top-bar > *,
.segment-nav .session-badge {
  min-width: 0;
}

.session-badge strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-badge,
.status-chip,
.phase-pill,
.prompt-tag,
.preview-tag,
.launch-meta span {
  background: var(--pill-bg-strong);
  border: 1px solid var(--line-soft);
  color: var(--text-1);
}

.spectrometer-shell {
  border: none;
}

.launch-main,
.session-main,
.summary-main,
.loading-main,
.admin-main {
  padding-top: 0.4rem;
}

.launch-card {
  width: min(980px, 100%);
  padding: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

.launch-meta {
  justify-content: space-between;
  margin-bottom: 2.2rem;
}

.launch-card h1 {
  max-width: 10ch;
  margin-bottom: 0.85rem;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.launch-card p,
.helper-text {
  max-width: 44rem;
  margin-inline: auto;
  line-height: 1.7;
}

.field-card:focus-within {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.integration-row:hover,
.integration-row:focus-visible {
  border-color: rgba(0, 108, 92, 0.22);
  background: rgba(0, 108, 92, 0.03);
  box-shadow: -3px 0 0 0 rgba(0, 108, 92, 0.3), 0 4px 20px rgba(15, 23, 42, 0.06);
}

.spectrometer-stage {
  width: min(980px, 100%);
  padding: clamp(1.25rem, 3vw, 1.8rem);
  border-radius: 2rem;
  background: transparent;
}

/* All visualizers now share the light theme: a transparent shell + overlay so
   the pattern emerges from the light page instead of a dark green box. (Dark
   mode is intentionally out of scope.) */
.spectrometer-shell {
  background: transparent;
  box-shadow: none;
}

.spectrometer-overlay {
  background: none;
}

/* In dark mode the visualizer canvas is hardcoded to dark teal RGB
   (designed for light bg). Use screen blend + brightness boost so those
   dark teals render as luminous cyan against the navy bg. The light
   white-wash overlay also gets replaced by a soft teal radial. */
:root[data-color-scheme="dark"] .spectrometer-shell canvas,
:root[data-color-scheme="dark"] .credits-visualizer canvas {
  mix-blend-mode: screen;
  filter: brightness(3.2) saturate(1.15);
}

:root[data-color-scheme="dark"] .spectrometer-overlay {
  background:
    radial-gradient(circle at center, transparent 22%, rgba(8, 16, 28, 0.35) 78%),
    linear-gradient(180deg, rgba(140, 224, 210, 0.04), rgba(8, 16, 28, 0.18));
}

.prompt-stack {
  width: var(--width-panel);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}

.prompt-header,
.summary-header {
  gap: 0.6rem;
}

.prompt-card h2,
.branch-card h2,
.summary-panel h1 {
  letter-spacing: -0.035em;
}

.fields-grid {
  gap: 1.2rem;
}

.field-card {
  padding: 1.1rem 1.2rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-card);
  gap: 0.55rem;
}

.field-card label,
.belief-reference span {
  color: var(--text-2);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field-card textarea {
  min-height: 118px;
  /* Balanced horizontal padding so typed text fills the pill left-to-right and
     reads as left-aligned. The old 2.5rem left indent made short, early-wrapping
     lines look centered in the narrow box. This is the rule that actually wins
     (latest of three .field-card textarea definitions in this file). */
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--input-border);
  border-radius: 14px;
  background: var(--input-bg);
  box-shadow: none;
  resize: none;
}

.field-card textarea:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.primary-button,
.secondary-button,
.ghost-link {
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 220ms ease,
    opacity 220ms ease;
}

.primary-button:hover,
.primary-button:focus-visible,
.secondary-button:hover,
.secondary-button:focus-visible,
.ghost-link:hover,
.ghost-link:focus-visible {
  transform: scale(0.985);
}

.primary-button {
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  color: #ffffff;
}

.secondary-button {
  background: var(--surface-high);
  color: var(--text-0);
}

.summary-panel {
  padding: clamp(1.4rem, 3vw, 2rem);
}

.narrative-panel,
.belief-card {
  padding: 1.3rem;
  border-radius: var(--radius-card);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.belief-reference strong,
.belief-card h3 {
  letter-spacing: -0.02em;
}

.preview-tag {
  background: rgba(0, 108, 92, 0.1);
  color: var(--accent-a);
}

.transition-state {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  backdrop-filter: none;
}

.admin-section {
  border-top: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}

.segment-card,
.field-settings-card,
.toggle-row {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.text-input,
.text-area {
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  box-shadow: none;
}

.text-input:focus,
.text-area:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

@media (max-width: 900px) {
  .launch-meta {
    justify-content: flex-start;
  }

  .launch-card {
    text-align: center;
  }

  .launch-card h1,
  .launch-card p,
  .helper-text {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  .top-bar {
    border-radius: 2rem;
    padding: 0.7rem;
    gap: 0.5rem;
    min-height: 48px;
    /* On mobile collapse to just left + right; no dedicated center column */
    grid-template-columns: 1fr auto;
  }

  /* Hide the empty center logo slot on mobile — logo is decorative and
     would be covered by status chips anyway */
  .header-logo {
    display: none;
  }

  /* Status chips and session badge: truncate rather than overflow */
  .status-chip,
  .session-badge {
    max-width: 100%;
    overflow: hidden;
  }

  .status-chip strong,
  .session-badge strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .status-chip span {
    display: none;
  }

  .prompt-stack,
  .spectrometer-stage {
    padding: 1rem;
    border-radius: 1.5rem;
  }

  /* Tighter mobile spacing for panels whose 640px rules in the primary media
     block above would be defeated by this reskin layer's later unconditional
     declarations — they must live here, after those rules, to win. */
  .shell-inner {
    padding: 0.6rem;
  }

  .launch-card,
  .summary-panel {
    padding: clamp(0.9rem, 2vw, 1.3rem);
    border-radius: var(--radius-lg);
  }

  .field-card {
    padding: 0.75rem;
    border-radius: var(--radius-md);
  }

  /* Prompt actions: stack vertically on narrow screens */
  .prompt-actions,
  .branch-actions {
    flex-direction: column;
  }

  .prompt-actions .primary-button,
  .prompt-actions .secondary-button,
  .branch-actions .primary-button,
  .branch-actions .secondary-button {
    width: 100%;
    justify-content: center;
  }

  /* Summary actions: stack too */
  .summary-actions {
    flex-direction: column;
  }

  .summary-actions .primary-button,
  .summary-actions .secondary-button {
    width: 100%;
    justify-content: center;
  }
}

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

.roc-icon {
  display: block;
  flex: none;
}

.button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.button-label {
  display: inline-flex;
  align-items: center;
}

.primary-button,
.secondary-button,
.ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.ghost-link {
  gap: 0.55rem;
}

.top-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.top-button {
  width: 2.9rem;
  min-width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border-radius: 999px;
}

.top-button .roc-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.screen-fade-switch,
.session-fade-switch {
  width: 100%;
}

/* The app moves focus here programmatically after integration screen
   transitions (tabindex="-1"); never show a focus ring on the wrapper. */
.screen-fade-switch:focus {
  outline: none;
}

.dashboard-entry-button {
  min-height: 2.9rem;
  padding-inline: 1rem;
}

.ghost-link--danger {
  color: var(--danger-text);
}

.integration-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0.6rem 0 2.25rem;
}

.integration-panel {
  width: var(--width-panel);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}

.celebration-panel {
  gap: 1.35rem;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}

.integration-panel--empty {
  align-items: center;
  text-align: center;
  padding-block: 2.6rem;
}

.integration-empty-icon {
  color: var(--text-2);
}

.integration-empty-copy,
.integration-tools-copy,
.action-panel-copy,
.current-action-empty-copy {
  color: var(--text-1);
  line-height: 1.65;
}

.integration-header,
.detail-header,
.action-panel-header {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.integration-header {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.celebration-hero {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
  text-align: center;
  padding: 1rem 1rem 0.35rem;
}

.celebration-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  /* The gradient variants paint glyphs via background-clip: text, and the
     background box does not extend below the line box — pad the bottom so
     descenders (g, y) keep their gradient instead of getting cut off. */
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

.celebration-copy {
  max-width: 42rem;
  margin: 0;
  color: var(--text-1);
  font-size: 1.03rem;
  line-height: 1.7;
}

.celebration-motion-shell {
  position: relative;
  width: 13rem;
  height: 12rem;
  display: grid;
  place-items: center;
  margin: 0 auto 0.2rem;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.72) translateY(18px);
  transform-origin: 50% 58%;
}

.celebration-motion-shell.is-sequenced {
  animation: celebration-burst-in var(--celebration-burst-duration, 620ms) cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* #3 Entry bloom flash — expands from medallion centre and fades out */
.celebration-motion-shell.is-sequenced::after {
  content: "";
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(140, 224, 210, 0.12) 30%, transparent 70%);
  animation: celebration-bloom 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: none;
  z-index: 0;
}

/* #4 Medallion idle pulse — kicks in after pop completes */
.celebration-motion-shell.is-sequenced .celebration-medallion {
  animation:
    celebration-medallion-pop var(--celebration-burst-duration, 620ms) cubic-bezier(0.2, 0.8, 0.2, 1) both,
    celebration-medallion-idle 3s ease-in-out var(--celebration-burst-duration, 620ms) infinite;
}

.celebration-motion {
  position: absolute;
  inset: 0;
}

.celebration-motion-picker {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: center;
  padding-top: 0.25rem;
}

.celebration-motion-picker-label {
  color: var(--text-2);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.celebration-motion-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.celebration-motion-button {
  min-height: 2.2rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-deep) 14%, transparent);
  background: var(--pill-bg-strong);
  color: var(--text-1);
  font: inherit;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

.celebration-motion-button:hover,
.celebration-motion-button:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-deep) 30%, transparent);
  outline: none;
}

.celebration-motion-button.is-active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-deep) 16%, transparent), rgba(79, 124, 255, 0.14));
  border-color: color-mix(in srgb, var(--accent-deep) 35%, transparent);
  color: var(--text-0);
  font-weight: 600;
}

.celebration-orbit-ring {
  position: absolute;
  inset: 1.15rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-deep) 12%, transparent);
}

.celebration-orbit-ring--a {
  animation: celebration-spin 14s linear infinite;
}

.celebration-orbit-ring--b {
  inset: 2rem;
  border-style: dashed;
  opacity: 0.7;
  animation: celebration-spin-reverse 18s linear infinite;
}

.celebration-orbit-dot {
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-deep) 6%, transparent);
}

.celebration-orbit-dot--a {
  top: 1rem;
  left: 2.2rem;
  animation: celebration-float 2200ms ease-in-out infinite;
}

.celebration-orbit-dot--b {
  top: 1.9rem;
  right: 1.6rem;
  animation: celebration-float 2200ms ease-in-out 180ms infinite;
}

.celebration-orbit-dot--c {
  bottom: 1.4rem;
  left: 1.4rem;
  animation: celebration-float 2200ms ease-in-out 360ms infinite;
}

.celebration-orbit-dot--d {
  right: 1rem;
  bottom: 2rem;
  animation: celebration-float 2200ms ease-in-out 540ms infinite;
}

.celebration-halo-core {
  position: absolute;
  inset: 2.3rem;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-deep) 28%, transparent), rgba(79, 124, 255, 0.08) 58%, transparent 72%);
  filter: blur(8px);
}

.celebration-ring {
  position: absolute;
  inset: 2.05rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-deep) 18%, transparent);
  animation: celebration-ring-pulse 2200ms ease-out infinite;
}

.celebration-ring--b {
  animation-delay: 360ms;
}

.celebration-ring--c {
  animation-delay: 720ms;
}

.celebration-ray {
  position: absolute;
  top: 0.45rem;
  left: 50%;
  width: 0.34rem;
  height: 3.25rem;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-deep) 0%, transparent), color-mix(in srgb, var(--accent-deep) 78%, transparent), rgba(79, 124, 255, 0));
  transform-origin: 50% 6rem;
  transform: translateX(-50%) rotate(var(--ray-rotate));
  animation: celebration-ray-pulse 1800ms ease-in-out infinite;
  animation-delay: var(--ray-delay);
}

.celebration-spark {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-b), var(--accent-a));
  box-shadow: 0 0 0 7px rgba(79, 124, 255, 0.06);
}

.celebration-spark--a {
  top: 1.1rem;
  left: 2rem;
  animation: celebration-float 2000ms ease-in-out infinite;
}

.celebration-spark--b {
  top: 2.1rem;
  right: 1.5rem;
  animation: celebration-float 2000ms ease-in-out 220ms infinite;
}

.celebration-spark--c {
  bottom: 1.45rem;
  left: 1.35rem;
  animation: celebration-float 2000ms ease-in-out 420ms infinite;
}

.celebration-ribbon {
  position: absolute;
  inset: 2rem;
  border-radius: 999px;
  filter: blur(2px);
  opacity: 0.92;
}

.celebration-ribbon--a {
  inset: 1.4rem 0.8rem 3.7rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-deep) 0%, transparent), color-mix(in srgb, var(--accent-deep) 28%, transparent), rgba(79, 124, 255, 0.08), color-mix(in srgb, var(--accent-deep) 0%, transparent));
  --ribbon-rotate-start: -16deg;
  --ribbon-rotate-mid: -10deg;
  transform: rotate(var(--ribbon-rotate-start));
  animation: celebration-ribbon-sway 3800ms ease-in-out infinite;
}

.celebration-ribbon--b {
  inset: 4.1rem 0.9rem 1.4rem;
  background: linear-gradient(90deg, rgba(79, 124, 255, 0), rgba(79, 124, 255, 0.22), color-mix(in srgb, var(--accent-deep) 12%, transparent), rgba(79, 124, 255, 0));
  --ribbon-rotate-start: 13deg;
  --ribbon-rotate-mid: 8deg;
  transform: rotate(var(--ribbon-rotate-start));
  animation: celebration-ribbon-sway 4200ms ease-in-out 260ms infinite;
}

.celebration-ribbon--c {
  inset: 2.8rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--accent-deep) 14%, transparent);
  background: transparent;
  transform: rotate(6deg);
  animation: celebration-spin 22s linear infinite;
}

.celebration-particle {
  position: absolute;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  opacity: 0.7;
}

.celebration-particle--a {
  top: 1.2rem;
  right: 1.6rem;
  animation: celebration-float 2100ms ease-in-out infinite;
}

.celebration-particle--b {
  bottom: 1.6rem;
  left: 1.5rem;
  animation: celebration-float 2100ms ease-in-out 220ms infinite;
}

.celebration-particle--c {
  top: 3.2rem;
  left: 1.1rem;
  animation: celebration-float 2100ms ease-in-out 420ms infinite;
}

/* Dark-mode celebration ambience: the halo, rings, rays and ribbons are tinted
   with --accent-deep teal and pale blues that read against white but sink into
   the navy card, leaving the medallion popping on a flat black field. Lift them
   with the dark mint/gold accents and give the hero a soft radial backdrop so
   the win still lands in an ambient glow. Colors and opacity only — no new
   animation, so reduced-motion behavior is unchanged. */
:root[data-color-scheme="dark"] .celebration-hero {
  background: radial-gradient(circle at 50% 38%, rgba(140, 224, 210, 0.1), transparent 62%);
}

/* The candlelit gold milestone panels get a warm glow instead of mint. */
:root[data-color-scheme="dark"] .celebration-panel--stage-changed .celebration-hero,
:root[data-color-scheme="dark"] .celebration-panel--streak-milestone .celebration-hero {
  background: radial-gradient(circle at 50% 38%, rgba(229, 191, 129, 0.12), transparent 62%);
}

:root[data-color-scheme="dark"] .celebration-halo-core {
  background: radial-gradient(circle, rgba(140, 224, 210, 0.4), rgba(140, 224, 210, 0.14) 58%, transparent 74%);
}

:root[data-color-scheme="dark"] .celebration-ring {
  border-color: rgba(140, 224, 210, 0.34);
}

:root[data-color-scheme="dark"] .celebration-orbit-ring {
  border-color: rgba(140, 224, 210, 0.3);
}

:root[data-color-scheme="dark"] .celebration-ray {
  background: linear-gradient(180deg, rgba(140, 224, 210, 0), rgba(140, 224, 210, 0.85), rgba(140, 224, 210, 0));
}

:root[data-color-scheme="dark"] .celebration-spark,
:root[data-color-scheme="dark"] .celebration-orbit-dot {
  box-shadow: 0 0 0 7px rgba(140, 224, 210, 0.12);
}

:root[data-color-scheme="dark"] .celebration-ribbon--a {
  background: linear-gradient(90deg, rgba(140, 224, 210, 0), rgba(140, 224, 210, 0.34), rgba(229, 191, 129, 0.16), rgba(140, 224, 210, 0));
}

:root[data-color-scheme="dark"] .celebration-ribbon--b {
  background: linear-gradient(90deg, rgba(229, 191, 129, 0), rgba(229, 191, 129, 0.3), rgba(140, 224, 210, 0.18), rgba(229, 191, 129, 0));
}

:root[data-color-scheme="dark"] .celebration-ribbon--c {
  border-color: rgba(140, 224, 210, 0.28);
}

/* Vestibular safety (WCAG 2.3.3): stop the continuous spin/float/pulse loops
   when the user prefers reduced motion. The static gradients, rings, and dots
   stay visible; only the endless movement is removed. */
@media (prefers-reduced-motion: reduce) {
  .transition-state,
  .celebration-orbit-ring--a,
  .celebration-orbit-ring--b,
  .celebration-orbit-dot--a,
  .celebration-orbit-dot--b,
  .celebration-orbit-dot--c,
  .celebration-orbit-dot--d,
  .celebration-ring,
  .celebration-ray,
  .celebration-spark--a,
  .celebration-spark--b,
  .celebration-spark--c,
  .celebration-ribbon--a,
  .celebration-ribbon--b,
  .celebration-ribbon--c,
  .celebration-particle--a,
  .celebration-particle--b,
  .celebration-particle--c,
  .celebration-motion-shell.is-sequenced,
  .celebration-motion-shell.is-sequenced::after,
  .celebration-motion-shell.is-sequenced .celebration-medallion {
    animation: none;
  }

  /* The entry burst/bloom rely on animation fill to reveal the medallion —
     pin their final states so the content still appears without the motion. */
  .celebration-motion-shell {
    opacity: 1;
    transform: none;
  }

  .celebration-motion-shell.is-sequenced::after {
    opacity: 0;
  }
}

.celebration-medallion {
  position: relative;
  z-index: 1;
  width: 5.6rem;
  height: 5.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  box-shadow:
    0 22px 48px color-mix(in srgb, var(--accent-deep) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.celebration-progress-panel,
.celebration-action-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.1rem 1.15rem;
  border-radius: 1.4rem;
  border: 1px solid color-mix(in srgb, var(--accent-deep) 14%, transparent);
  background: var(--glass-panel-bg);
  box-shadow: inset 0 1px 0 var(--glass-panel-inset);
}

/* #8 Action card shimmer */
.celebration-action-card {
  position: relative;
  overflow: hidden;
}

.celebration-action-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 80%
  );
  transform: translateX(-200%);
  pointer-events: none;
  animation: celebration-shimmer 850ms 500ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.celebration-progress-topline,
.celebration-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.celebration-stage-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.78rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-deep) 12%, transparent);
  color: var(--accent-a);
  font-size: 0.84rem;
  font-weight: 700;
  overflow: clip;
}

.celebration-stage-pill-text {
  display: inline-block;
  transform-origin: left center;
  will-change: transform, opacity;
}

.celebration-stage-pill.is-popped {
  animation: celebration-chip-pulse var(--celebration-pop-duration, 420ms) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.celebration-progress-label {
  color: var(--text-1);
  font-size: 0.9rem;
}

.celebration-progress-label strong {
  color: var(--text-0);
  font-weight: 700;
}

.celebration-progress-meter {
  width: 100%;
  height: 0.9rem;
  border-radius: 999px;
  background: var(--meter-track);
  overflow: hidden;
}

.celebration-progress-fill {
  --celebration-progress-start-ratio: calc(var(--celebration-progress-start, 0) / 100);
  --celebration-progress-end-ratio: calc(var(--celebration-progress-end, 0) / 100);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  transform: scaleX(var(--celebration-progress-start-ratio));
  transform-origin: left center;
}

.celebration-progress-fill.is-sequenced {
  animation: celebration-fill var(--celebration-meter-duration, 920ms) var(--celebration-meter-delay, 200ms) cubic-bezier(0.2, 0.8, 0.2, 1) both;
  box-shadow: 0 0 14px rgba(140, 224, 210, 0.45), 0 0 4px rgba(140, 224, 210, 0.6);
}

.celebration-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.celebration-stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.95rem 1rem;
  border-radius: 1.1rem;
  background: var(--stat-tile-bg);
  overflow: clip;
}

.celebration-stat-value {
  display: inline-block;
  align-self: flex-start;
  color: var(--text-0);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  transform-origin: left center;
  will-change: transform, opacity;
}

.celebration-pop-style--grow .celebration-stage-pill-text.is-popped,
.celebration-pop-style--grow .celebration-stat-value.is-popped {
  animation: celebration-value-grow var(--celebration-pop-duration, 420ms) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.celebration-pop-style--bounce .celebration-stage-pill-text.is-popped,
.celebration-pop-style--bounce .celebration-stat-value.is-popped {
  animation: celebration-value-bounce var(--celebration-pop-duration, 420ms) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.celebration-pop-style--snap .celebration-stage-pill-text.is-popped,
.celebration-pop-style--snap .celebration-stat-value.is-popped {
  animation: celebration-value-snap var(--celebration-pop-duration, 420ms) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.celebration-stat-label,
.celebration-action-eyebrow {
  color: var(--text-2);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.celebration-action-text {
  margin: 0;
  color: var(--text-0);
  font-size: 1.08rem;
  line-height: 1.6;
  font-weight: 600;
}

.celebration-primary {
  min-width: min(100%, 18rem);
}

.integration-eyebrow {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.integration-row-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.integration-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-row);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  text-align: left;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.integration-row:hover,
.integration-row:focus-visible {
  border-color: var(--panel-border);
  background: var(--card-bg);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

.integration-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.integration-row-topline,
.detail-header-topline,
.current-action-meta,
.detail-section-topline,
.integration-tools-actions,
.detail-delete-actions,
.composer-actions,
.action-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.integration-row-date,
.integration-row-stage,
.detail-date,
.detail-progress-copy,
.detail-history-date {
  font-size: 0.8rem;
  color: var(--text-2);
}

.integration-row-summary {
  color: var(--text-0);
  font-size: 0.98rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Current step surfaced on the row itself — the "what do I do next" line. */
.integration-row-step {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
  color: var(--text-1);
  font-size: 0.88rem;
  line-height: 1.4;
}

.integration-row-step-icon {
  flex: none;
  display: inline-flex;
  margin-top: 0.12rem;
  color: var(--accent-a);
}

.integration-row-step-text {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.integration-row-progress {
  width: 100%;
}

.integration-row-meter,
.detail-progress-meter {
  width: 100%;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--meter-track);
  overflow: hidden;
}

.integration-row-meter-fill,
.detail-progress-meter-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
}

.integration-row-arrow {
  color: var(--text-2);
}

.integration-tools {
  padding-top: 0.35rem;
  border-top: 1px solid var(--line-soft);
}

.integration-tools-toggle {
  min-height: auto;
  padding-inline: 0;
}

.integration-tools-panel {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-top: 0.5rem;
}

.action-panel h1 {
  margin: 0;
}

.detail-section,
.reference-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.05rem;
  border-radius: var(--radius-card);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.detail-section h2,
.reference-panel summary {
  margin: 0;
  color: var(--text-0);
}

.detail-belief-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.detail-belief-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem;
  border-radius: var(--radius-card);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.detail-belief-card p,
.detail-belief-card-text,
.reference-block p,
.detail-history-body p {
  margin: 0;
  color: var(--text-0);
  line-height: 1.6;
}

.detail-belief-card--compact {
  padding: 0.8rem 0.9rem;
}

.current-action-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem 1.15rem 1.15rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  text-align: left;
  box-shadow: var(--card-shadow);
}

.current-action-text,
.detail-history-text {
  color: var(--text-0);
  line-height: 1.52;
}

.current-action-text {
  font-size: 1.12rem;
  font-weight: 600;
}

.current-action-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--accent-a);
  font-size: 0.88rem;
}

.detail-action-beliefs,
.detail-action-criteria {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.detail-action-belief-chip,
.detail-action-criteria-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-1);
  font-size: 0.84rem;
  line-height: 1.35;
}

.detail-action-criteria-chip {
  background: color-mix(in srgb, var(--accent-deep) 12%, transparent);
  color: var(--text-0);
  font-weight: 600;
  border: 1px solid rgba(0, 108, 92, 0.28);
}

.detail-action-cta-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.detail-action-primary {
  min-width: min(100%, 18rem);
}

.detail-action-secondary {
  min-width: min(100%, 16rem);
}

.detail-action-aux-row {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.detail-action-calendar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-1);
}

.detail-action-calendar:hover,
.detail-action-calendar:focus-visible {
  color: var(--text-0);
}

.calendar-form {
  margin-top: 0.85rem;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid var(--panel-border, rgba(15, 23, 42, 0.08));
  background: rgba(15, 23, 42, 0.02);
  display: grid;
  gap: 0.85rem;
}

.calendar-form-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2, #5c6471);
}

.calendar-form-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.calendar-form-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-2);
}

.calendar-form-input {
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.85rem;
  padding: 0.7rem 0.85rem;
}

textarea.calendar-form-input {
  min-height: 4.5rem;
  padding: 0.7rem 0.85rem;
  resize: vertical;
}

.calendar-form-row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

.calendar-form-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: var(--text-0);
  cursor: pointer;
  padding: 0.25rem 0;
}

.calendar-form-toggle input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--accent-a, #006c5c);
}

.calendar-form-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.calendar-form-submit {
  width: 100%;
  justify-content: center;
}

.calendar-form-actions .ghost-link {
  align-self: center;
  padding: 0.5rem 0.75rem;
}

@media (min-width: 540px) {
  .calendar-form-actions {
    flex-direction: row;
    align-items: center;
  }

  .calendar-form-submit {
    width: auto;
    min-width: 14rem;
  }
}

.current-action-empty {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.current-action-empty p {
  margin: 0;
}

.current-action-empty-title {
  color: var(--text-0);
  font-size: 1.02rem;
  font-weight: 700;
}

.current-action-empty-copy {
  max-width: 62ch;
  color: var(--text-1);
  line-height: 1.6;
}

.current-action-empty-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.1rem;
}

.current-action-primary {
  min-width: min(100%, 18rem);
}

.detail-history-list,
.action-form-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Stage groups for completed actions */
.detail-history-stages {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.detail-history-stage {
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.025);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}

.detail-history-stage-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-weight: 600;
  color: var(--text-0);
}

.detail-history-stage-summary::-webkit-details-marker {
  display: none;
}

.detail-history-stage-summary::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg);
  transition: transform 200ms ease;
}

.detail-history-stage[open] > .detail-history-stage-summary::after {
  transform: rotate(-135deg);
}

.detail-history-stage-name {
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}

.detail-history-stage-count {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  margin-left: auto;
  padding-right: var(--space-3);
}

.detail-history-stage > .detail-history-list {
  padding: 0 var(--space-3) var(--space-3);
}

.detail-history-item {
  border-radius: 1rem;
  background: var(--surface-lowest);
  border: 1px solid rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.detail-history-item summary {
  list-style: none;
  cursor: pointer;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.detail-history-item summary::-webkit-details-marker {
  display: none;
}

.detail-history-summary {
  flex: 1;
  min-width: 0;
}

.detail-history-item--empty {
  padding: 0.9rem 1rem;
}

.detail-history-expand-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-2);
  opacity: 0.85;
  transition: color 180ms ease, opacity 180ms ease;
}

.detail-history-expand-hint::after {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.detail-history-item:hover .detail-history-expand-hint,
.detail-history-item:focus-within .detail-history-expand-hint {
  color: var(--accent-a);
  opacity: 1;
}

.detail-history-item[open] > summary .detail-history-expand-hint::after {
  transform: rotate(-135deg);
}

.detail-history-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1rem 1rem;
}

.detail-history-summary {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-history-body strong,
.reference-block strong,
.action-field span {
  color: var(--text-0);
  font-size: 0.88rem;
}

.reference-panel summary {
  cursor: pointer;
  list-style: none;
}

.reference-panel summary::-webkit-details-marker {
  display: none;
}

.reference-panel-body,
.detail-delete {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.integration-nudge {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.95rem 1rem;
  border-radius: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--accent-deep) 18%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-deep) 10%, transparent), color-mix(in srgb, var(--accent-deep) 4%, transparent));
}

.integration-nudge strong {
  color: var(--text-0);
}

.integration-nudge p {
  margin: 0;
  color: var(--text-1);
  line-height: 1.55;
}

.reference-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.detail-footer-actions {
  display: flex;
  justify-content: flex-start;
}

.detail-delete p {
  margin: 0;
  color: var(--text-1);
}

.action-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.logaction-input,
.logaction-textarea {
  width: 100%;
  /* iOS WebKit gives date inputs an intrinsic min-width that ignores
     width:100% and spills past the card — min-width:0 + border-box let it
     shrink to the container. */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line-soft);
  border-radius: 1rem;
  background: var(--surface-lowest);
  color: var(--text-0);
  padding: 0.82rem 0.95rem;
  font: inherit;
}

.logaction-input:focus,
.logaction-textarea:focus {
  outline: none;
  border-color: var(--accent-a);
}





@media (max-width: 900px) {
  .integration-row {
    grid-template-columns: 1fr;
  }

  .detail-belief-list {
    grid-template-columns: 1fr;
  }

  .celebration-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dashboard-entry-button {
    width: 100%;
    justify-content: center;
  }

  .integration-header,
  .detail-header-topline,
  .detail-section-topline,
  .integration-row-topline,
  .current-action-meta,
  .detail-action-cta-row,
  .current-action-cta,
  .integration-tools-actions,
  .detail-delete-actions,
  .current-action-empty-actions,
  .composer-actions,
  .action-submit-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .integration-row {
    padding: 0.95rem;
  }

  /* On narrow screens a single-line ellipsis chops the preview mid-word;
     let it wrap to two lines instead. */
  .integration-row-summary {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .detail-action-primary,
  .detail-action-secondary,
  .current-action-primary,
  .celebration-primary {
    width: 100%;
  }

  .celebration-motion-buttons {
    justify-content: flex-start;
  }
}

@keyframes celebration-burst-in {
  from {
    transform: scale(0.72) translateY(14px);
    opacity: 0;
  }

  65% {
    transform: scale(1.05) translateY(-2px);
    opacity: 1;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes celebration-medallion-pop {
  from {
    transform: scale(0.62);
  }

  58% {
    transform: scale(1.12);
  }

  78% {
    transform: scale(0.96);
  }

  to {
    transform: scale(1);
  }
}

@keyframes celebration-fill {
  from {
    transform: scaleX(var(--celebration-progress-start-ratio));
  }

  to {
    transform: scaleX(var(--celebration-progress-end-ratio));
  }
}

@keyframes celebration-value-grow {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }

  45% {
    transform: scale(1.24);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes celebration-value-bounce {
  0% {
    transform: scale(0.86);
    opacity: 0;
  }

  35% {
    transform: scale(1.28);
    opacity: 1;
  }

  62% {
    transform: scale(0.96);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes celebration-value-snap {
  0% {
    transform: scale(0.9);
    filter: blur(4px);
    opacity: 0;
  }

  30% {
    transform: scale(1.18);
    filter: blur(0);
    opacity: 1;
  }

  65% {
    transform: scale(1.04);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes celebration-chip-pulse {
  0% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-deep) 16%, transparent);
  }

  60% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-deep) 0%, transparent);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-deep) 0%, transparent);
  }
}

@keyframes celebration-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes celebration-spin-reverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes celebration-ring-pulse {
  0% {
    transform: scale(0.74);
    opacity: 0;
  }

  25% {
    opacity: 0.55;
  }

  100% {
    transform: scale(1.28);
    opacity: 0;
  }
}

@keyframes celebration-ray-pulse {
  0%,
  100% {
    opacity: 0.32;
    transform: translateX(-50%) rotate(var(--ray-rotate)) scaleY(0.84);
  }

  50% {
    opacity: 0.95;
    transform: translateX(-50%) rotate(var(--ray-rotate)) scaleY(1.08);
  }
}

@keyframes celebration-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.5;
  }

  50% {
    transform: translateY(-7px) scale(1.08);
    opacity: 0.82;
  }
}

@keyframes celebration-ribbon-sway {
  0%,
  100% {
    transform: rotate(var(--ribbon-rotate-start, -16deg)) translateY(0);
  }

  50% {
    transform: rotate(var(--ribbon-rotate-mid, -10deg)) translateY(-0.22rem);
  }
}

.fade-switch {
  width: 100%;
}

.fade-switch--entering {
  animation: ui-fade-in var(--fade-in-duration, 320ms) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.fade-switch--exiting {
  animation: ui-fade-out var(--fade-out-duration, 260ms) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.fade-switch--steady,
.fade-switch--static {
  opacity: 1;
  transform: none;
}

/* ===== Stage-change celebration ===== */

/* #5a Larger motion shell for stage-level moments */
.celebration-panel--stage-changed .celebration-motion-shell {
  width: 16rem;
  height: 16rem;
}

/* #5b Shockwave ring — single expanding ring that radiates from the medallion */
.celebration-panel--stage-changed .celebration-motion-shell.is-sequenced::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 2px solid rgba(140, 224, 210, 0.85);
  animation: celebration-shockwave 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: none;
  z-index: 2;
}

.celebration-panel--stage-changed {
  background:
    linear-gradient(175deg, rgba(229, 191, 129, 0.18) 0%, transparent 45%),
    linear-gradient(180deg, #fff8ec, #f3e3c2);
  border: 1px solid rgba(180, 142, 70, 0.20);
}

/* Dark mode: same warm gold recipe over a candlelit dark surface — the cream
   slab would otherwise leak into dark and turn every theme-ink text on it
   invisible (white-on-cream). */
:root[data-color-scheme="dark"] .celebration-panel--stage-changed {
  background:
    linear-gradient(175deg, rgba(229, 191, 129, 0.14) 0%, transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, #e5bf81 10%, #0d1726), color-mix(in srgb, #e5bf81 4%, #081018));
  border-color: rgba(229, 191, 129, 0.28);
}

.celebration-panel--stage-changed h1 {
  background: linear-gradient(120deg, #b8862e 0%, #6e4a14 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark mode: lift the gold gradient — the light-mode deep browns vanish on
   the dark surface. */
:root[data-color-scheme="dark"] .celebration-panel--stage-changed h1 {
  background: linear-gradient(120deg, #f0d59a 0%, #d9a94f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.celebration-panel--stage-changed .celebration-stage-pill.is-popped {
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  color: var(--bg-0);
  font-weight: 700;
  animation: stage-level-up var(--celebration-pop-duration, 420ms) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* #6 Stage-change meter: fill to 100% (victory), hold and glow, then fade out
   and refill from zero into the new tier so the bar reads as a fresh chapter
   instead of regressing. */
.celebration-panel--stage-changed .celebration-progress-fill.is-sequenced {
  animation: celebration-fill-stage-change 2000ms var(--celebration-meter-delay, 200ms) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.celebration-panel--unlocked h1 {
  background: linear-gradient(120deg, var(--accent-b) 0%, var(--accent-c) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes stage-level-up {
  from { transform: scale(0.55) translateY(6px); opacity: 0; filter: blur(6px); }
  to   { transform: scale(1); opacity: 1; filter: none; }
}

/* #9 Stage-specific medallion gradient per level */
.celebration-panel--stage-activation .celebration-medallion {
  background: linear-gradient(135deg, #8ce0d2, #5b9bd5);
  box-shadow: 0 22px 48px rgba(91, 155, 213, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.celebration-panel--stage-momentum .celebration-medallion {
  background: linear-gradient(135deg, #7b6fff, #4f9eff);
  box-shadow: 0 22px 48px rgba(123, 111, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.celebration-panel--stage-integrated .celebration-medallion {
  background: linear-gradient(135deg, #e5bf81, #c4a246);
  box-shadow: 0 22px 48px rgba(229, 191, 129, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.celebration-panel--stage-full-shift .celebration-medallion {
  background: linear-gradient(135deg, #fff8f0, #e5d0a8, #fff0e0);
  color: #8a6d3b;
  box-shadow: 0 22px 48px rgba(229, 191, 129, 0.45), 0 0 0 2px rgba(229, 191, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

@keyframes ui-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes ui-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  to {
    opacity: 0;
    transform: translateY(-10px);
    filter: blur(8px);
  }
}

/* #3 Entry bloom — radial flash that expands from the medallion */
@keyframes celebration-bloom {
  from { transform: scale(0.2); opacity: 1; }
  to   { transform: scale(1); opacity: 0; }
}

/* #4 Medallion idle — slow breathing pulse after pop lands */
@keyframes celebration-medallion-idle {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0px  rgba(140, 224, 210, 0)); }
  50%       { transform: scale(1.04); filter: drop-shadow(0 0 14px rgba(140, 224, 210, 0.35)); }
}

/* #5b Shockwave ring — single outward ring for stage advances */
@keyframes celebration-shockwave {
  from { transform: scale(0.4); opacity: 1; }
  to   { transform: scale(3); opacity: 0; }
}

/* #6 Stage-change meter: fill → hold/glow → fade out → silently reset to 0 →
   fade back in and fill into the new tier. The opacity dip masks the snap
   back to zero so it doesn't read as the bar emptying. */
@keyframes celebration-fill-stage-change {
  0%   { transform: scaleX(var(--celebration-progress-start-ratio)); opacity: 1; filter: brightness(1); }
  35%  { transform: scaleX(1);                                       opacity: 1; filter: brightness(1.05); }
  55%  { transform: scaleX(1);                                       opacity: 1; filter: brightness(1.18); }
  60%  { transform: scaleX(1);                                       opacity: 0; filter: brightness(1.05); }
  61%  { transform: scaleX(0);                                       opacity: 0; filter: brightness(1); }
  100% { transform: scaleX(var(--celebration-progress-end-ratio));   opacity: 1; filter: brightness(1); }
}

/* #8 Action card shimmer — single left-to-right highlight sweep */
@keyframes celebration-shimmer {
  from { transform: translateX(-200%); }
  to   { transform: translateX(200%); }
}

/* ===== Quiet streak surface ===== */
.integration-row--quiet {
  border-left: 3px solid rgba(229, 191, 129, 0.55);
  background: rgba(229, 191, 129, 0.04);
}

/* Forgiving re-entry nudge on quiet rows: names the lapse out loud instead
   of letting the row silently fade. Warm amber mixed toward the theme's
   text color so it reads on both light and dark panels — deliberately not
   the loud .streak-hint gradient. */
.integration-row-quiet-note {
  font-size: 0.78rem;
  line-height: 1.4;
  font-weight: 600;
  color: color-mix(in srgb, rgb(229, 191, 129) 45%, var(--text-1));
}

/* ===== Pattern insight ("What I'm seeing") ===== */



.celebration-pattern-insight {
  width: 100%;
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent-a);
  border-radius: var(--radius-md);
  background: rgba(0, 108, 92, 0.06);
  text-align: left;
}

.celebration-pattern-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-a);
}

.celebration-pattern-text {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-0);
  line-height: 1.5;
}

/* ===== Belief echo (celebration quotes the user's own belief words) ===== */
.celebration-belief-echo {
  width: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent-b) 34%, transparent);
  background: color-mix(in srgb, var(--accent-b) 9%, transparent);
  text-align: center;
  /* Same late-beat family as the action-card shimmer (500ms in). */
  animation: rise-in 480ms 500ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.celebration-belief-echo-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-a);
}

.celebration-belief-echo-text {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-0);
}

@media (prefers-reduced-motion: reduce) {
  .celebration-belief-echo {
    animation: none;
  }
}

/* ===== Action completion: quick / deep mode ===== */
.action-deep-toggle {
  align-self: flex-start;
  margin-top: var(--space-2);
  font-size: 0.92rem;
  color: var(--text-1);
}

.action-deep-toggle:hover,
.action-deep-toggle:focus-visible {
  color: var(--accent-a);
}

.action-milestone-note {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent-b);
  border-radius: var(--radius-md);
  background: rgba(229, 191, 129, 0.08);
  color: var(--text-1);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ===== First-action coaching (empty state on detail) ===== */
.current-action-empty-coaching {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-a);
  letter-spacing: -0.01em;
}

.current-action-belief-seed {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

.current-action-belief-hint {
  margin: 0 0 var(--space-3);
  font-size: 0.92rem;
  color: var(--text-1);
}

.current-action-belief-list {
  display: grid;
  gap: var(--space-2);
}

.current-action-belief-chip {
  display: grid;
  gap: 0.2rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-lowest, #fff);
  text-align: left;
  font: inherit;
  color: var(--text-0);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.current-action-belief-chip:hover,
.current-action-belief-chip:focus-visible {
  border-color: rgba(0, 108, 92, 0.32);
  background: rgba(0, 108, 92, 0.04);
  transform: translateX(3px);
  box-shadow: -3px 0 0 0 rgba(0, 108, 92, 0.4), 0 4px 18px rgba(15, 23, 42, 0.05);
}

.current-action-belief-chip-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-a);
}

/* Composer "drafting an action for" indicator */
.integration-nudge--seed {
  border-left: 3px solid var(--accent-a);
  padding-left: var(--space-3);
}

.detail-belief-card--compact.is-seeded {
  border-color: var(--accent-a);
  box-shadow: 0 0 0 2px rgba(0, 108, 92, 0.18);
}

/* In the composer the compact belief cards are real buttons: tapping one
   drafts an AI step for that belief (same path as the Today empty-state
   chips). Reset the button chrome back to the card look, then layer the tap
   affordance on top. */
.detail-belief-card--tappable {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.detail-belief-card--tappable:hover:not(:disabled) {
  border-color: var(--line-strong);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}

.detail-belief-card--tappable:active:not(:disabled) {
  transform: translateY(0);
}

.detail-belief-card--tappable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color, rgba(0, 108, 92, 0.35));
}

.detail-belief-card--tappable:disabled {
  cursor: default;
}

/* ===== Audio debug panel (admin-only) ===== */
.audio-debug-panel {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) 0.9rem;
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  color: var(--text-1);
  font-size: 0.82rem;
  line-height: 1.35;
}

.audio-debug-panel-title {
  margin-bottom: 0.35rem;
  color: var(--text-0);
  font-weight: 700;
}

/* ===== Unified focus ring =====
   One source of truth for keyboard focus across the app. Uses outline so
   it composes cleanly with components that already set box-shadow. */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
details > summary:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}


/* ===== Guided Next Step Meditation ===== */
.next-step-landing .launch-card {
  max-width: 640px;
}

.next-step-landing-back {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.next-step-landing-context {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  text-align: left;
}

.next-step-landing-context h3 {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-1);
}

.next-step-landing-context h3 + h3 {
  margin-top: var(--space-3);
}

.next-step-landing-context ul {
  margin: 0 0 0.4rem;
  padding-left: 1.1rem;
  color: var(--text-0);
}

.next-step-landing-context ul li {
  margin: 0.2rem 0;
  line-height: 1.45;
}

.next-step-landing-last {
  margin: 0;
  color: var(--text-0);
  line-height: 1.45;
}

.next-step-session-main {
  position: relative;
}



.next-step-prompt-card {
  max-width: 760px;
}

.next-step-context {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.next-step-context-block {
  padding: var(--space-3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.next-step-context-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-1);
}

.next-step-context-block ul {
  margin: 0;
  padding-left: 1.1rem;
}

.next-step-context-block ul li {
  margin: 0.2rem 0;
  line-height: 1.45;
}

.next-step-context-block p {
  margin: 0;
  line-height: 1.45;
}

@media (min-width: 720px) {
  .next-step-context {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== Next-step session: top segment-nav + auto-hide ===== */
.next-step-top-nav {
  display: flex;
  justify-content: center;
  padding: 0.6rem 0 0.4rem;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}

.next-step-session-main.controls-hidden .next-step-top-nav,
.next-step-session-main.controls-hidden .playback-controls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* ===== End-session confirmation modal ===== */
.end-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 12, 22, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  z-index: 100;
}

.end-confirm-card {
  width: min(440px, 100%);
  padding: 1.6rem 1.5rem 1.4rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  text-align: center;
}

.end-confirm-card h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-0);
}

.end-confirm-card p {
  margin: 0 0 1.3rem;
  color: var(--text-1);
  line-height: 1.5;
}

.end-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: stretch;
}

.end-confirm-actions .primary-button,
.end-confirm-actions .ghost-link {
  justify-content: center;
}

/* End-session button: same circular shape as music/captions, danger tint. */
.playback-btn--danger {
  color: rgba(255, 168, 168, 0.85);
  border-color: rgba(255, 120, 120, 0.28);
}

.playback-btn--danger:hover,
.playback-btn--danger:focus-visible {
  color: #ffd1d1;
  border-color: rgba(255, 120, 120, 0.55);
  background: rgba(255, 90, 90, 0.18);
}

/* AI Finish (test-only): amber tint so it stands out as a non-production
   control. Same shape as the other playback buttons. */
.playback-btn--ai-finish {
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(252, 211, 77, 0.18);
  border-style: dashed;
}

.playback-btn--ai-finish:hover,
.playback-btn--ai-finish:focus-visible {
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.6);
  background: rgba(252, 211, 77, 0.32);
}

.playback-btn--ai-finish[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Review overlay during the next-step "review & capture" segment.
   Fades in over the spectrometer; spectrometer dims behind it. */
.spectrometer-canvas {
  position: relative;
  width: 100%;
  transition: opacity 600ms ease, filter 600ms ease;
}

.spectrometer-canvas--dimmed {
  opacity: 0.18;
  filter: blur(2px);
}

.next-step-review-overlay,
.recall-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  pointer-events: none;
  animation: nsReviewFadeIn 600ms ease both;
}

.next-step-review-overlay .next-step-context,
.recall-overlay .next-step-context {
  width: min(640px, 100%);
  margin: 0 auto;
  pointer-events: auto;
  justify-self: center;
  /* Override the desktop two-column layout: overlays often hold a single
     block, which would otherwise sit in the left column and look off-center. */
  grid-template-columns: 1fr;
}

.next-step-review-overlay .next-step-context-block,
.recall-overlay .next-step-context-block {
  text-align: center;
}

@keyframes nsReviewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Breakthrough — Root Memory segment: overlays the user's stuck belief over
   the spectrometer ~12s into the audio, mirroring NSM's review overlay. */
.recall-stage {
  position: relative;
  width: 100%;
  transition: opacity 600ms ease, filter 600ms ease;
}

.recall-stage--dimmed > .spectrometer-shell {
  opacity: 0.18;
  filter: blur(2px);
}

.recall-overlay .next-step-context-block p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-0);
}

/* Secondary action row under prompt-actions (e.g. "Cancel meditation").
   Keeps the destructive/tertiary action on its own line so it never crowds
   or overflows the primary buttons above it. */




/* Launch "continue" card: a returning user with a step still waiting sees it
   FIRST, right under the logo, and can tap through straight to Today. It is
   the lead surface for returning users (the Start button demotes itself to
   secondary weight below), so it gets a mint-tinted border and an explicit
   "Continue" row to read as tappable. Tokens keep it correct in both themes. */
.launch-continue-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  width: min(30rem, 100%);
  margin: var(--space-4) auto;
  padding: 0.9rem 1.05rem;
  border-radius: var(--radius-card);
  border: 1px solid color-mix(in srgb, var(--accent-a) 30%, var(--card-border));
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.launch-continue-card:hover,
.launch-continue-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent-a) 55%, var(--card-border));
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}

.launch-continue-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color, rgba(0, 108, 92, 0.35)), var(--card-shadow-hover);
}

.launch-continue-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* The step itself — clamp to two lines so a long saved step can't push the
   Start CTA area around. */
.launch-continue-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-0);
}

/* Streak chip + optional at-risk hint reuse the shared .streak-chip /
   .streak-hint styles; this row just lets them wrap cleanly on narrow
   screens. */
.launch-continue-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

/* Explicit tap affordance so the card reads as a button, not a status panel.
   Accent token flips per theme (deep teal on light, mint on dark). */
.launch-continue-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-a);
}

/* Small text link below the hold button on the launch screen */
.launch-dashboard-link {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

/* ===== Today / Record split (replaces the old Detail page) ===== */

.today-panel,
.record-panel {
  gap: 1.2rem;
}

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

.today-view-record {
  padding-right: 0;
}

/* Compact ladder readout on Today: stage pill + thin meter + next-stage
   countdown, reusing the dashboard-row meter and practice-card pill styles. */
.today-stage-progress {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.today-stage-progress-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.6rem;
  flex-wrap: wrap;
}

.today-stage-progress-label {
  font-size: 0.8rem;
  color: var(--text-2);
}

.today-stage-progress-label strong {
  color: var(--text-1);
}

.today-stage-progress[data-stage="full_shift"] .integration-row-meter-fill {
  background: linear-gradient(135deg, #e5bf81, #b8862e);
}

.today-action-card .today-action-textrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Implementation-intention echo: the user's own "when and where" plan shown
   under the step text so the abstract intention reads as a concrete trigger. */
.today-plan-line {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.today-plan-line-label {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.today-plan-line-text {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-1);
}

/* Inline belief re-exposure: one belief quoted under the step text, rotating
   by local day. Quiet by design — it should read as a whisper next to the
   step, not compete with it. */
.today-belief-line {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.today-belief-line-label {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.today-belief-line-text {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-1);
}

/* The user's own most recent noticing (reflection / evidence) echoed under
   the action card — self-generated proof re-read at the moment they face
   today's step. No card chrome on purpose: it should read as a quiet aside. */
.today-last-reflection {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0 0.2rem;
}

.today-last-reflection-label {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.today-last-reflection-text {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-1);
}

.action-source-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

/* Invisible hit-area extension: keeps the 2rem visual circle but grows the
   touch target to --tap-min (44px) for iOS. 100% = the padding box, so the
   calc stays correct regardless of the 1px border. */
.action-source-toggle::after {
  content: "";
  position: absolute;
  inset: calc((100% - var(--tap-min)) / 2);
  border-radius: 999px;
}

.action-source-toggle:hover,
.action-source-toggle:focus-visible,
.action-source-toggle[aria-expanded="true"] {
  color: var(--accent-a);
  border-color: var(--panel-border);
  background: var(--stage-pill-activation-bg);
}

.action-source-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  font-size: 0.82rem;
  color: var(--text-2);
}

.today-empty {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.today-empty-prompt {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.35;
  color: var(--text-0);
}

.today-why-disclosure {
  border-top: 1px solid var(--line-soft);
  padding-top: 0.85rem;
}

.today-why-disclosure > summary {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent-a);
  list-style: none;
}

.today-why-disclosure > summary::-webkit-details-marker {
  display: none;
}

.today-why-disclosure > summary::after {
  content: " →";
  transition: transform 180ms ease;
  display: inline-block;
}

.today-why-disclosure[open] > summary::after {
  transform: rotate(90deg);
}

.today-why-body {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  color: var(--text-1);
  line-height: 1.6;
}

.today-why-body p {
  margin: 0;
}

.record-header {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.record-progress-copy {
  color: var(--text-2);
  font-size: 0.85rem;
}

.record-insight-inline {
  margin: 0;
  color: var(--text-1);
  font-size: 0.95rem;
  line-height: 1.55;
}

.record-insight-inline em {
  font-style: italic;
  color: var(--accent-a);
  font-weight: 600;
}

.record-beliefs-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.record-beliefs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.record-belief-item {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 1.1rem;
  border-radius: var(--radius-row, 14px);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow: hidden;
}

.record-belief-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--outline-ghost);
}

.record-belief-text {
  margin: 0;
  color: var(--text-0);
  font-size: 0.98rem;
  line-height: 1.45;
}

/* Integration ladder — first-time intro card and dashboard reference */

.ladder-intro {
  margin: 1.5rem auto 0.25rem;
  width: min(620px, 100%);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border-radius: var(--radius-lg, 18px);
  border: 1px solid var(--panel-border, rgba(15, 23, 42, 0.08));
  background: var(--surface-lowest, #ffffff);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
  text-align: left;
}

.ladder-intro-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2, #5c6471);
}

.ladder-intro-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  letter-spacing: -0.01em;
  color: var(--text-0);
}

.ladder-intro-body {
  margin: 0 0 1.1rem;
  color: var(--text-1);
  line-height: 1.55;
}

.ladder-intro-actions {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
}

.ladder-stage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.ladder-stage-card {
  position: relative;
  padding: 0.85rem 1rem 0.95rem;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.ladder-stage-card-header {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.ladder-stage-card-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--accent-a, #006c5c);
  /* --accent-a is deep teal in light (white number reads) but a pale mint in
     dark (white number vanishes) — pin the badge ink per theme. */
  color: var(--stage-num-text, #ffffff);
  font-size: 0.78rem;
  font-weight: 700;
}

.ladder-stage-card-name {
  font-weight: 600;
  color: var(--text-0);
}

.ladder-stage-card-threshold {
  margin-left: auto;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.ladder-stage-card-description {
  margin: 0;
  color: var(--text-1);
  font-size: 0.92rem;
  line-height: 1.5;
}

.ladder-reference-disclosure {
  margin: 0.25rem 0 1.25rem;
  border-radius: 14px;
  border: 1px solid var(--panel-border, rgba(15, 23, 42, 0.08));
  background: rgba(15, 23, 42, 0.02);
  padding: 0.4rem 0.9rem;
}

.ladder-reference-disclosure > summary {
  cursor: pointer;
  padding: 0.45rem 0;
  font-weight: 500;
  color: var(--text-1);
  list-style: none;
}

.ladder-reference-disclosure > summary::-webkit-details-marker {
  display: none;
}

.ladder-reference-disclosure > summary::before {
  content: "▸";
  display: inline-block;
  width: 1.1em;
  margin-right: 0.15rem;
  transition: transform 0.18s ease;
  color: var(--text-2);
}

.ladder-reference-disclosure[open] > summary::before {
  transform: rotate(90deg);
}

.ladder-reference-body {
  padding: 0.4rem 0 0.6rem;
}

.integration-panel--empty .ladder-reference-disclosure {
  margin-top: 1.4rem;
  text-align: left;
  width: min(520px, 100%);
}

/* ===== Full Shift = achieved: gold, full meters =====
   stageProgress() keeps fraction at 1 once Full Shift is reached (the 365
   bonus track lives in the label, not the bar). Tint those full bars gold so
   a maxed breakthrough reads as trophy, not as "barely started". */
.integration-row[data-stage="full_shift"] .integration-row-meter-fill,
.detail-progress-meter-fill.is-full-shift,
.celebration-panel--stage-full-shift .celebration-progress-fill {
  background: linear-gradient(135deg, #e5bf81, #b8862e);
}

/* Crossing INTO Full Shift: the generic stage-change meter animation fills to
   100%, dips out, then refills into the new tier — which reads as a reset.
   Full Shift's new tier IS full, so use the plain grow-to-end fill instead
   and let the bar stay at victory. */
.celebration-panel--stage-changed.celebration-panel--stage-full-shift .celebration-progress-fill.is-sequenced {
  animation: celebration-fill var(--celebration-meter-duration, 920ms) var(--celebration-meter-delay, 200ms) cubic-bezier(0.2, 0.8, 0.2, 1) both;
  box-shadow: 0 0 14px rgba(229, 191, 129, 0.55), 0 0 4px rgba(229, 191, 129, 0.7);
}

/* ===== Daily streak (global, derived from completed steps) ===== */

.streak-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.1rem;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--streak-chip-border);
  background: var(--streak-chip-bg);
  color: var(--streak-chip-text);
  font-size: 0.86rem;
  font-weight: 700;
}

.streak-chip.is-empty {
  border-color: var(--line-soft);
  background: var(--card-bg);
  color: var(--text-1);
  font-weight: 500;
}

.streak-flame {
  display: inline-flex;
  align-items: center;
  color: var(--ember);
}

.streak-chip.is-empty .streak-flame {
  color: var(--text-2);
}

/* Only "breathes" when today's step is already done — the reward state. */
.streak-chip.is-active .streak-flame {
  animation: streak-flame-pulse 2.4s ease-in-out infinite;
}

@keyframes streak-flame-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .streak-chip.is-active .streak-flame {
    animation: none;
  }
}

/* At-risk nudge: the streak is alive from yesterday but today's step isn't
   done yet. This is deliberately a call-to-action, not ambient copy — deep
   warm ember, white text, and a soft breathing glow so it never blends in.
   Both gradient stops keep white text >= 5:1 (WCAG AA). */
.streak-hint {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  background: var(--nudge-bg);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--nudge-shadow);
  animation: streak-nudge-pulse 2.3s ease-in-out infinite;
  will-change: transform, box-shadow;
}

@keyframes streak-nudge-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: var(--nudge-shadow), 0 0 0 0 transparent;
  }
  50% {
    transform: scale(1.04);
    box-shadow: var(--nudge-shadow), 0 0 0 9px var(--nudge-ring);
  }
}

@media (prefers-reduced-motion: reduce) {
  .streak-hint {
    animation: none;
    box-shadow: var(--nudge-shadow), 0 0 0 3px var(--nudge-ring-static);
  }
}

.streak-best {
  font-size: 0.8rem;
  color: var(--text-2);
  white-space: nowrap;
}

/* Last-7-days dot row: filled = a step was completed that day. */
.week-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  margin-left: auto;
}

.week-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--meter-track);
}

.week-dot.is-done {
  background: linear-gradient(135deg, #e5bf81, #d97706);
}

.week-dot.is-today {
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.35);
}

.week-dot.is-today:not(.is-done) {
  background: var(--card-bg);
  border: 1px solid rgba(217, 119, 6, 0.5);
}

/* Dark surfaces swallow the mid-orange ring — brighten today's marker so
   the current day stands out in the week row and the 30-day grid. */
:root[data-color-scheme="dark"] .week-dot.is-today {
  box-shadow: 0 0 0 2px rgba(240, 168, 60, 0.6);
}

:root[data-color-scheme="dark"] .week-dot.is-today:not(.is-done) {
  border-color: rgba(240, 168, 60, 0.75);
}

@media (max-width: 640px) {
  .week-dots {
    margin-left: 0;
    width: 100%;
  }
}

/* ===== "Your practice" stats card ===== */

.streak-practice-link {
  min-height: auto;
  padding-block: 0.25rem;
  font-size: 0.82rem;
  gap: 0.3rem;
}

.practice-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.practice-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.practice-card-topline .integration-eyebrow {
  color: var(--accent-a);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.practice-dots-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.practice-range-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.practice-dots {
  display: grid;
  grid-template-columns: repeat(15, 0.9rem);
  gap: 0.35rem;
  justify-items: center;
}

@media (max-width: 640px) {
  .practice-dots {
    grid-template-columns: repeat(10, 0.9rem);
  }
}

.practice-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.practice-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 0.9rem;
  border-radius: 0.9rem;
  background: var(--stat-tile-bg);
}

.practice-stat-value {
  color: var(--text-0);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.1;
}

.practice-stat-value--streak {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ember-strong);
}

.practice-stat-label {
  color: var(--text-2);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.practice-stages {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.practice-stage-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.62rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-1);
}

.practice-stage-pill[data-stage="activation"] {
  background: var(--stage-pill-activation-bg);
  color: var(--stage-pill-activation-text);
}

.practice-stage-pill[data-stage="momentum"] {
  background: var(--stage-pill-momentum-bg);
  color: var(--stage-pill-momentum-text);
}

.practice-stage-pill[data-stage="integrated"] {
  background: var(--stage-pill-integrated-bg);
  color: var(--stage-pill-integrated-text);
}

.practice-stage-pill[data-stage="full_shift"] {
  background: var(--stage-pill-full-shift-bg);
  color: var(--stage-pill-full-shift-text);
  box-shadow: inset 0 0 0 1px rgba(180, 142, 70, 0.25);
}

.practice-insight {
  margin: 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line-soft);
}

.practice-panel {
  gap: 1.1rem;
}

@media (max-width: 640px) {
  .practice-stats {
    grid-template-columns: 1fr;
  }
}

/* Today card: collapsed belief chips */
.today-beliefs-disclosure {
  border-top: 1px solid var(--line-soft);
  padding-top: 0.75rem;
}

.today-beliefs-disclosure > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  list-style: none;
}

.today-beliefs-disclosure > summary::-webkit-details-marker {
  display: none;
}

.today-beliefs-disclosure > summary::before {
  content: "▸";
  display: inline-block;
  width: 1.1em;
  transition: transform 0.18s ease;
  color: var(--text-2);
}

.today-beliefs-disclosure[open] > summary::before {
  transform: rotate(90deg);
}

.today-beliefs-disclosure .detail-action-beliefs {
  margin-top: 0.6rem;
}

.detail-action-reflect {
  font-size: 0.85rem;
}

/* ===== Celebration: streak stat + milestone + inline next step ===== */

.celebration-stats--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .celebration-stats--triple {
    grid-template-columns: 1fr;
  }
}

.celebration-stat-value--streak {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ember-strong);
}

.celebration-stat-value--streak .streak-flame {
  color: var(--ember);
}

/* Streak milestone flair — warm gold recipe, same family as stage changes. */
.celebration-panel--streak-milestone {
  background:
    linear-gradient(175deg, rgba(229, 191, 129, 0.16) 0%, transparent 45%),
    linear-gradient(180deg, #fffaf0, #f7ead0);
  border: 1px solid rgba(180, 142, 70, 0.2);
}

/* Dark mode: candlelit dark gold instead of the cream slab (see the
   stage-changed dark override for the rationale). */
:root[data-color-scheme="dark"] .celebration-panel--streak-milestone {
  background:
    linear-gradient(175deg, rgba(229, 191, 129, 0.12) 0%, transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, #e5bf81 9%, #0d1726), color-mix(in srgb, #e5bf81 4%, #081018));
  border-color: rgba(229, 191, 129, 0.26);
}

.celebration-panel--streak-milestone h1 {
  background: linear-gradient(120deg, #b8862e 0%, #6e4a14 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:root[data-color-scheme="dark"] .celebration-panel--streak-milestone h1 {
  background: linear-gradient(120deg, #f0d59a 0%, #d9a94f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.celebration-panel--streak-milestone .celebration-medallion {
  background: linear-gradient(135deg, #f2b25c, #d97706);
  box-shadow: 0 22px 48px rgba(217, 119, 6, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Milestone reuses the stage-change shockwave ring. */
.celebration-panel--streak-milestone .celebration-motion-shell.is-sequenced::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 2px solid rgba(229, 191, 129, 0.9);
  animation: celebration-shockwave 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: none;
  z-index: 2;
}

/* Optional one-line reflection after a quick complete */
.celebration-reflection {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  border-radius: 1.4rem;
  border: 1px solid color-mix(in srgb, var(--accent-deep) 12%, transparent);
  background: var(--glass-panel-soft-bg);
}

.celebration-reflection-save {
  align-self: flex-start;
  min-height: var(--tap-min);
  padding-block: 0.25rem;
  color: var(--accent-a);
}

.celebration-reflection-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--accent-a);
}

/* Inline next-step capture — the loop now ends on the celebration screen */
.celebration-next-step {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.1rem 1.15rem;
  border-radius: 1.4rem;
  border: 1px solid color-mix(in srgb, var(--accent-deep) 16%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-deep) 8%, var(--glass-panel-soft-bg)),
    var(--glass-panel-soft-bg)
  );
}

.celebration-next-eyebrow {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-a);
}

.celebration-next-copy {
  margin: 0;
  color: var(--text-1);
  font-size: 0.92rem;
  line-height: 1.5;
}

.celebration-next-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.celebration-next-actions .celebration-primary {
  min-width: min(100%, 14rem);
}

@media (max-width: 640px) {
  .celebration-next-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .celebration-next-actions .primary-button,
  .celebration-next-actions .secondary-button {
    width: 100%;
    justify-content: center;
  }
}

/* ===== iOS safe-area insets (standalone PWA) =====
   index.html sets viewport-fit=cover with a "default" status-bar style
   (dark text on a light bar — the app is light-only). The page may still
   extend under the Dynamic Island / home indicator on notched iPhones, so
   pad the outer shell by the device insets (env() resolves to 0 everywhere
   else, including when the opaque status bar eats the top inset) — additive
   at the wrapper level so the responsive .shell-inner / .top-bar padding
   variants stay untouched — and keep the sticky top bar pinned below the
   notch instead of under it. */
.app-shell {
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

.top-bar {
  top: env(safe-area-inset-top, 0px);
}

.end-confirm-overlay {
  padding: max(var(--space-3), env(safe-area-inset-top, 0px))
    max(var(--space-3), env(safe-area-inset-right, 0px))
    max(var(--space-3), env(safe-area-inset-bottom, 0px))
    max(var(--space-3), env(safe-area-inset-left, 0px));
}

/* ===== Mobile launch screen: keep the Start CTA above the fold =====
   On phones the hero logo, the full intro paragraph and its generous spacing
   pushed the primary button below an iPhone-sized viewport, so a first-time
   visitor saw only a wall of text. Tighten the hero on narrow screens —
   smaller logo, compact paragraph type, less dead space — so the button
   lands on the first screen. Lives at the end of the file so it wins over
   every earlier reskin layer. */
@media (max-width: 480px) {
  .launch-meta {
    margin-bottom: 0.9rem;
  }

  .launch-logo {
    max-width: min(240px, 58%);
    margin-bottom: 0.5rem;
  }

  .launch-card p {
    margin-block: 0.7rem;
    font-size: 0.95rem;
    line-height: 1.55;
  }
}

/* Speaker toggle for the one-time first-breakthrough wrap-up pitch. Sits in
   the summary title row, pushed to the right edge, while the pitch is active:
   tap to mute the narration, tap again to resume it. */
.summary-mute-pitch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  align-self: flex-start;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--pill-bg-strong);
  color: var(--text-1);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.summary-mute-pitch:hover,
.summary-mute-pitch:focus-visible {
  color: var(--accent-deep);
  border-color: color-mix(in srgb, var(--accent-deep) 35%, var(--line-soft));
}

.summary-mute-pitch[aria-pressed="true"] {
  color: color-mix(in srgb, var(--text-1) 55%, transparent);
}

.detail-footer-actions {
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Dark-mode enablement fixes: the wordmark is black ink on transparency, so
   invert it to white on dark grounds; and the accent CTA gradient turns pale
   (mint -> gold) in dark, so its label needs ink instead of white. */
:root[data-color-scheme="dark"] .launch-logo,
:root[data-color-scheme="dark"] .next-step-logo,
:root[data-color-scheme="dark"] .credits-logo {
  filter: invert(1);
  opacity: 0.92;
}

:root[data-color-scheme="dark"] .primary-button {
  color: #08211d;
}

/* Exception: the demoted returning-user Start button sits on a card surface,
   not the pale mint->gold gradient, so its label keeps the theme ink. */
:root[data-color-scheme="dark"] .primary-button.launch-start-button--secondary {
  color: var(--text-0);
}

/* The solid-green strong CTA keeps its white label in dark (the global ink
   rule above would paint it near-invisible on green) and gets a soft mint
   resting glow so the evening's biggest invitation lifts off the navy card
   like the rest of the dark scene. The demoted secondary variant stays quiet. */
:root[data-color-scheme="dark"] .primary-button.launch-start-button:not(.launch-start-button--secondary) {
  color: #ffffff;
  box-shadow: 0 10px 32px rgba(140, 224, 210, 0.14);
}

/* Disabled primary buttons: fading the pale mint->gold gradient to 45% over
   navy reads as a muddy khaki smear with grey ink. Dark mode gets a real
   resting state instead — a quiet raised-navy pill with dimmed theme ink —
   so "not yet available" looks designed rather than broken. The solid-green
   launch/meditation start buttons are excluded: they only disable for a
   moment while starting, and green dims cleanly with the opacity fade. */
:root[data-color-scheme="dark"] .primary-button:disabled:not(.launch-start-button) {
  opacity: 1;
  background: var(--surface-high);
  border-color: var(--line-soft);
  color: rgba(238, 242, 236, 0.45);
}

/* ============================================================
   Auth gate (sign-in wall) — token-driven so both themes work.
   ============================================================ */
.auth-main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card {
  max-width: 430px;
  text-align: center;
}

.auth-logo {
  margin-bottom: 8px;
}

/* Doubled selector: .launch-card h1 outranks a lone class and would blow the
   heading up to hero size. */
.launch-card h1.auth-heading,
.auth-heading {
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text-0);
  /* Fully opt out of the launch hero's h1 treatment (10ch column, tight
     tracking) — this is a form heading, not a display headline. */
  max-width: none;
  letter-spacing: 0;
  margin: 0 auto 10px;
  text-align: center;
}

.auth-copy {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-1);
  margin: 0 0 18px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 16px;
}

.auth-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 13px 16px;
  font-size: 1rem;
  color: var(--text-0);
  background: var(--card-bg);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  outline: none;
}

.auth-input:focus {
  border-color: var(--accent-a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-a) 18%, transparent);
}

.auth-submit {
  width: 100%;
}

.auth-notice {
  font-size: 0.92rem;
  line-height: 1.5;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 14px;
}

.auth-notice--error {
  color: var(--danger-text);
  background: color-mix(in srgb, var(--danger-text) 8%, transparent);
}

.auth-notice--info {
  color: var(--text-1);
  background: var(--surface-high);
}

.auth-register-link {
  color: var(--accent-a);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-footnote {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}

.auth-secondary {
  appearance: none;
  border: none;
  background: none;
  color: var(--accent-a);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 8px;
}

.auth-loading {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--line-soft);
  border-top-color: var(--accent-a);
  animation: auth-spin 0.9s linear infinite;
}

@keyframes auth-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   Paywall overlay (free tier) — blurred dashboard + upsell card.
   ============================================================ */
.paywall-blur {
  filter: blur(9px) saturate(0.85);
  pointer-events: none;
  user-select: none;
}

.paywall-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--surface-base) 34%, transparent);
  overflow-y: auto;
}

.paywall-card {
  max-width: 430px;
  width: 100%;
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 32, 40, 0.28);
  padding: 30px 28px;
  text-align: center;
  margin: auto;
}

.paywall-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-a);
  margin: 0 0 10px;
}

.paywall-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--text-0);
  margin: 0 0 12px;
}

.paywall-copy {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--text-1);
  margin: 0 0 16px;
}

.paywall-benefits {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.paywall-benefits li {
  position: relative;
  padding-left: 26px;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--text-1);
}

.paywall-benefits li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.36em;
  width: 13px;
  height: 7px;
  border-left: 2.5px solid var(--accent-a);
  border-bottom: 2.5px solid var(--accent-a);
  transform: rotate(-45deg);
}

.paywall-cta {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

.paywall-price {
  font-size: 0.9rem;
  color: var(--text-2);
  margin: 12px 0 18px;
}

.paywall-refresh-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--text-1);
}

.paywall-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent-a);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.paywall-note {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-2);
  margin: 10px 0 0;
}

.paywall-account {
  font-size: 0.82rem;
  color: var(--text-2);
  margin: 16px 0 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}