/* ============================================================================
   Mirror — reimagined mobile-first experience (branch: explore-reimagine)
   A self-contained design system + layout. Loaded AFTER style.css so the
   shared chrome (deploy badge / dev controls) and the standalone portrait
   page keep working untouched. New token + class namespaces — no collisions.
   Tokens extracted from docs/research/prototypes/mobile-redesign-v1/.
   ============================================================================ */

:root {
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:  'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --w-serif:500; --w-sans-medium:500; --w-sans-semibold:600; --w-sans-bold:700; --w-sans-black:800;

  /* Signature accent (amber) */
  --accent:#3A4A6B; --accent-deep:#26344D; --on-accent:#FFFFFF;
  --accent-soft-amber:#C7D2E2;

  /* Warm CREAM base (question screens) */
  --cream-bg:#F0F2F5; --cream-raised:#FFFFFF; --cream-raised-hi:#FFFFFF;

  /* Warm INK base (landing, reveal, building) */
  --ink-900:#F0F2F5; --ink-850:#F0F2F5; --ink-800:#F0F2F5; --ink-750:#F0F2F5;
  --ink-700:#F0F2F5; --ink-650:#F0F2F5; --ink-600:#F0F2F5; --ink-550:#F0F2F5;
  --ink-500:#F0F2F5; --ink-450:#F0F2F5;

  /* Text on dark */
  --text-cream:#1C2331; --text-cream-hi:#141A26; --text-cream-warm:#3F4A5D;
  --text-cream-72:rgba(28,35,49,.80); --text-cream-50:rgba(28,35,49,.68);
  --text-cream-45:rgba(28,35,49,.64); --text-cream-18:rgba(28,35,49,.25);
  --text-cream-06:rgba(20,26,38,.06); --text-cream-03:rgba(20,26,38,.035);

  /* Text on cream */
  --ink-text:#1C2331; --ink-text-strong:#141A26;
  --muted-ink:#525D6E; --muted-ink-2:#5E6A7C; --muted-ink-3:#5E6A7C; --muted-ink-4:#3F4A5D; --muted-ink-5:#5E6A7C;
  --eyebrow-ink:#525D6E;

  /* Reveal card palettes — NEUTRAL SURFACES (founder rule 2026-07-02): every
     background is white or grey (two neutrals distinguish area types on a page);
     color exists only on buttons, type, labels and bars. Rooms alternate
     white/grey; each room's character rides its accent-colored label/display
     (card-accent = primary display accent, terracotta-accent = the blind spot's
     second hue, forest-accent = data bars). */
  --plum-1:#FFFFFF; --plum-2:#FFFFFF; --plum-3:#FFFFFF;
  --on-plum:#1C2331; --on-plum-hi:#141A26; --on-plum-65:rgba(28,35,49,.72);
  --on-plum-60:rgba(28,35,49,.66); --on-plum-50:rgba(28,35,49,.62);
  --forest-1:#F0F2F5; --forest-2:#F0F2F5; --forest-3:#F0F2F5; --forest-accent:#52719B; --on-forest:#1C2331;
  --terracotta:#FFFFFF; --on-terracotta:#1C2331; --terracotta-accent:#26344D;
  --line-card-bg:#F0F2F5; --on-line-card:#1C2331;

  /* Misc */
  --hairline-ink:rgba(28,35,49,.10); --hairline-ink-12:rgba(28,35,49,.12); --hairline-ink-20:rgba(28,35,49,.22);
  --amber-glow-18:rgba(107,140,174,.18); --amber-glow-12:rgba(107,140,174,.11);
  /* Previously hardcoded surfaces, tokenized for the theme bake-off (2026-07-01).
     --cream-page-3 was referenced but never DEFINED (posters silently fell back to
     transparent — the "empty cream box" look partly came from this). */
  --cream-page-3:#F0F2F5;
  --landing-glow:#F0F2F5;
  --canvas-wash-1:#F0F2F5; --canvas-wash-2:#F0F2F5; --canvas-wash-3:#F0F2F5;
  --card-accent:#3A4A6B;   /* the deep display accent (accent-colored text; themes override) */
  --line-card-accent:var(--card-accent);  /* pattern-room label (notion overrides with its sand-gold) */

  /* Type scale */
  --fs-hero:44px; --fs-interim:31px; --fs-question:29px; --fs-essence:22px;
  --fs-quote:17.5px; --fs-tagline:18.5px; --fs-composing:23px;
  --fs-archetype:54px; --fs-archetype-share:40px; --fs-stat-key:17px;
  --fs-btn-lg:18px; --fs-btn:16px; --fs-either:18px; --fs-lead:16.5px;
  --fs-body:15px; --fs-meta:13.5px; --eyebrow:11px;

  /* Spacing / radius / shadow / motion */
  --r-pill:100px; --r-card:22px; --r-card-lg:18px; --r-choice:16px;
  --shadow-amber-btn:0 12px 30px -10px rgba(58,74,107,.45);
  --shadow-amber-btn-sm:0 10px 24px -10px rgba(58,74,107,.45);
  --shadow-choice:0 1px 2px rgba(40,30,15,.04);
  --shadow-share-card:0 24px 50px -20px rgba(0,0,0,.6);
  --shadow-fab:0 8px 24px -8px rgba(0,0,0,.5);
  --ease-spring:cubic-bezier(.2,.8,.2,1); --ease-slide:cubic-bezier(.4,0,.2,1);
  --dur-fade:.19s; --dur-track:.45s; --dur-progress:.5s;
}

@keyframes rmFadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes rmFadeIn { from{opacity:0} to{opacity:1} }
@keyframes rmBreathe { 0%,100%{opacity:.5} 50%{opacity:1} }
@media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important;} }

/* ---- helpers ---- */
.serif-italic{font-family:var(--font-serif);font-style:italic;font-weight:var(--w-serif);letter-spacing:-0.01em;}

/* ===========================================================================
   APP LAYOUT — full-bleed mobile; centered phone-column on wider screens.
   Scoped to the reimagine bodies so other pages are untouched.
   =========================================================================== */
body.rm-body, body.rm-landing-body{
  margin:0; background:var(--ink-900); color:var(--text-cream);
  font-family:var(--font-sans); -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
body.rm-body #main-content, body.rm-landing-body #main-content{ display:block; }

.rm-app, .rm-landing{ position:relative; }

/* a screen = one full-viewport surface */
.rm-screen{
  min-height:100dvh; width:100%; box-sizing:border-box;
  display:flex; flex-direction:column;
}
.rm-col{ width:100%; max-width:460px; margin:0 auto; }

/* ===========================================================================
   LANDING (dark, value-upfront)
   =========================================================================== */
.rm-landing{ background:radial-gradient(120% 60% at 75% 0%, var(--landing-glow) 0%, var(--ink-900) 55%); }
.rm-landing-inner{ width:100%; max-width:460px; margin:0 auto; padding:64px 30px 40px;
  display:flex; flex-direction:column; min-height:100dvh; box-sizing:border-box; }
.rm-wordmark{ font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:0.4em;
  text-transform:uppercase; color:var(--card-accent); display:flex; align-items:center; gap:9px; }
.rm-wordmark::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--attn); display:inline-block; }
.rm-hero{ font-size:var(--fs-hero); line-height:1.08; color:var(--text-cream-hi); margin:32px 0 0; }
.rm-lede{ font-family:var(--font-sans); font-size:var(--fs-lead); line-height:1.5; color:var(--text-cream-72); margin:18px 0 0; max-width:34ch; }
.rm-eyebrow{ font-family:var(--font-sans); font-size:var(--eyebrow); font-weight:600; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--text-cream-45); margin:34px 0 14px; }
.pill-row{ display:flex; flex-wrap:wrap; gap:9px; }
.pill{ font-family:var(--font-sans); font-size:13.5px; font-weight:500; padding:9px 14px; border-radius:var(--r-pill);
  color:var(--text-cream-72); border:1px solid var(--text-cream-18); background:var(--text-cream-03); }
.rm-sample{ margin-top:30px; padding:22px; border-radius:var(--r-card-lg);
  background:var(--cream-bg);
  border:1px solid var(--amber-glow-18); }
.rm-sample-label{ font-family:var(--font-sans); font-size:var(--eyebrow); font-weight:700; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--card-accent); margin:0 0 12px; }
.rm-sample-line{ font-size:var(--fs-quote); line-height:1.5; color:var(--text-cream-warm); margin:0; }
.rm-landing-actions{ margin-top:auto; padding-top:34px; }
.rm-resume{ text-align:center; margin:18px 0 0; }
.rm-resume-card{ display:block; box-sizing:border-box; margin:0 0 14px; padding:14px 16px;
  border:1px solid var(--amber-glow-18); border-radius:14px;
  background:linear-gradient(135deg, var(--wash-a), var(--wash-b)); text-align:left; }
.rm-resume-card a{ display:block; font-family:var(--font-sans); font-weight:700; font-size:15px;
  color:var(--card-accent); text-decoration:none; }
.rm-resume-card .rm-resume-note{ display:block; margin-top:3px; font-family:var(--font-sans);
  font-size:12px; color:var(--text-cream-50); }
.rm-resume a{ color:var(--text-cream-72); font-family:var(--font-sans); font-size:var(--fs-meta); text-decoration:none; }
.rm-resume a:hover{ color:var(--card-accent); }
/* cross-device Google return door (ported from main) — a quiet secondary line under Begin */
.rm-signin-line{ margin:14px 0 0; text-align:center; }
.rm-signin-link{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans);
  font-size:12.5px; color:var(--text-cream-72); text-decoration:none; }
.rm-signin-link:hover{ color:var(--card-accent); }
.rm-google-g{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px;
  border-radius:50%; background:var(--cream-bg); color:var(--ink-text-strong); font-weight:700; font-size:11px; }
.rm-landing-error{ margin:16px 0 0; padding:12px 14px; border-radius:12px; font-size:var(--fs-meta);
  background:var(--cream-bg); border:1px solid var(--terracotta-accent); color:var(--ink-text); }
.rm-landing-error.rm-status-ok{ background:var(--amber-glow-12); border-color:var(--amber-glow-18); color:var(--text-cream-warm); }
.rm-footnote{ font-family:var(--font-sans); font-size:12px; color:var(--text-cream-45); text-align:center; margin:22px 0 0; }
.rm-privacy-link{ color:var(--text-cream-72); text-decoration:underline; }
.rm-privacy-link:hover{ color:var(--card-accent); }

/* ===========================================================================
   QUESTION FLOW (cream)
   =========================================================================== */
.rm-quiz{ background:var(--cream-bg); color:var(--ink-text); }
.rm-quiz-inner{ width:100%; max-width:460px; margin:0 auto;
  padding:54px 26px calc(var(--tabbar-clearance, 88px) + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; flex:1; box-sizing:border-box; min-height:100dvh; }

/* progress chrome */
.progress-row{ display:flex; align-items:center; gap:14px; }
/* An explicit "Review" affordance, not a ← glyph: it opens a read-only review of the
   answers so far, NOT browser-back navigation (the glyph mis-implied the latter). */
.progress-back{ border:none; background:transparent; cursor:pointer; color:var(--muted-ink-2);
  font-family:var(--font-sans); font-size:12px; font-weight:600; line-height:1; padding:0;
  white-space:nowrap; letter-spacing:.01em; }
.progress-back:hover{ color:var(--ink-text); text-decoration:underline; }
.progress-track{ flex:1; height:6px; background:var(--hairline-ink); border-radius:var(--r-pill); overflow:hidden; }
.progress-fill{ height:100%; width:var(--pct,0%); background:var(--attn-text); border-radius:var(--r-pill);
  transition:width var(--dur-progress) var(--ease-spring); }
.progress-count{ font-family:var(--font-sans); font-size:12.5px; font-weight:600; color:var(--muted-ink-3); min-width:34px; text-align:right; }
.progress-eta{ font-family:var(--font-sans); font-size:11.5px; color:var(--muted-ink-3); margin-top:7px; padding-left:38px; }

/* the give / preamble (content-bearing) */
.rm-give{ font-family:var(--font-serif); font-style:italic; font-size:16px; line-height:1.5;
  color:var(--muted-ink-4); margin:0 0 18px; animation:rmFadeIn var(--dur-fade) ease; }
.rm-give strong{ font-style:normal; font-weight:600; color:var(--ink-text); }

/* question body fills the middle */
.rm-quiz-body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:24px 0; }
.q-heading{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:var(--fs-question);
  line-height:1.18; letter-spacing:-0.01em; margin:0; color:var(--ink-text-strong); animation:rmFadeUp .3s ease; }
.q-sub{ margin:12px 0 0; font-size:var(--fs-body); color:var(--muted-ink); line-height:1.45; }
.rm-answer{ margin-top:8px; }

/* starter chooser (option B) — a compact, mobile-tidy pre-question screen */
.rm-starter-inner{ width:100%; max-width:460px; margin:0 auto; padding:54px 26px 40px;
  display:flex; flex-direction:column; justify-content:center; flex:1; box-sizing:border-box; min-height:100dvh; }
.rm-starter-head{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:var(--fs-question);
  line-height:1.18; letter-spacing:-0.01em; margin:0; color:var(--ink-text-strong); }
.rm-starter-sub{ margin:12px 0 0; font-size:var(--fs-body); color:var(--muted-ink); line-height:1.45; }
.rm-starter-doors{ margin-top:26px; display:flex; flex-direction:column; gap:11px; }
.rm-door{ text-align:left; cursor:pointer; background:var(--func-clickable); border:1.5px solid var(--hairline-ink);
  border-radius:var(--r-choice); padding:15px 16px; display:flex; align-items:center; gap:14px;
  box-shadow:var(--shadow-choice); transition:border-color .15s ease, background .15s ease; }
.rm-door:hover, .rm-door:focus-visible{ border-color:var(--card-accent); background:var(--cream-raised-hi); outline:none; }
.rm-door.chosen{ border-color:var(--attn-text); background:var(--func-chosen); }
.rm-door-ic{ flex:0 0 auto; font-size:22px; line-height:1; width:26px; text-align:center; }
.rm-door-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rm-door-label{ font-family:var(--font-sans); font-size:15.5px; font-weight:600; color:var(--ink-text);
  display:flex; align-items:baseline; gap:8px; }
.rm-door-rec{ font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--attn-text); border:1px solid var(--attn-text); border-radius:var(--r-pill); padding:1px 7px; }
.rm-door-desc{ font-family:var(--font-sans); font-size:13px; color:var(--muted-ink-3); line-height:1.35; }
.rm-starter-begin{ align-self:center; margin-top:28px; }

/* signin-gate arm (2026-07-20, measurement split) — starter-screen family */
.rm-gate-inner{ width:100%; max-width:460px; margin:0 auto; padding:54px 26px 40px;
  display:flex; flex-direction:column; justify-content:center; flex:1; box-sizing:border-box; min-height:100dvh; }
.rm-gate-eyebrow{ font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-ink-3); margin:0 0 10px; }
.rm-gate-head{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:var(--fs-question);
  line-height:1.18; letter-spacing:-0.01em; margin:0; color:var(--ink-text-strong); }
.rm-gate-sub{ margin:14px 0 0; font-size:var(--fs-body); color:var(--muted-ink); line-height:1.5; }
.rm-gate-btns{ margin-top:28px; display:flex; flex-direction:column; gap:11px; }
.rm-gate-btn{ display:block; text-align:center; text-decoration:none; cursor:pointer;
  background:var(--func-clickable); border:1.5px solid var(--hairline-ink); border-radius:var(--r-choice);
  padding:14px 16px; font-family:var(--font-sans); font-size:15.5px; font-weight:600; color:var(--ink-text);
  box-shadow:var(--shadow-choice); transition:border-color .15s ease, background .15s ease; }
.rm-gate-btn:hover, .rm-gate-btn:focus-visible{ border-color:var(--card-accent); background:var(--cream-raised-hi); outline:none; }
.rm-gate-note{ margin:18px 0 0; font-size:13px; color:var(--muted-ink-3); line-height:1.45; }
.rm-gate-back{ align-self:flex-start; margin-top:26px; background:none; border:none; cursor:pointer;
  font-family:var(--font-sans); font-size:14px; color:var(--muted-ink-3); padding:6px 0; }
.rm-gate-back:hover{ color:var(--ink-text); }

/* this-or-that slider (binary_set) */
.scale{ margin-top:32px; }
.scale + .scale{ margin-top:34px; }
.scale-ends{ display:flex; justify-content:space-between; font-family:var(--font-sans); font-size:13.5px;
  font-weight:600; color:var(--muted-ink-4); margin-bottom:14px; }
.scale-ends span{ max-width:42%; } .scale-ends span:last-child{ text-align:right; }
.scale-input{ width:100%; height:28px; cursor:pointer; accent-color:var(--accent); -webkit-appearance:none; appearance:none; background:transparent; }
.scale-input::-webkit-slider-runnable-track{ height:6px; border-radius:var(--r-pill); background:var(--hairline-ink); }
.scale-input::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; margin-top:-9px; width:24px; height:24px;
  border-radius:50%; background:var(--accent); box-shadow:var(--shadow-amber-btn-sm); cursor:pointer; }
.scale-input::-moz-range-track{ height:6px; border-radius:var(--r-pill); background:var(--hairline-ink); }
.scale-input::-moz-range-thumb{ width:24px; height:24px; border:none; border-radius:50%; background:var(--accent); }

/* choice radio cards */
.choice-list{ margin-top:24px; display:flex; flex-direction:column; gap:11px; }
.choice-card{ text-align:left; cursor:pointer; background:var(--func-clickable); border:1.5px solid var(--hairline-ink);
  border-radius:var(--r-choice); padding:17px 18px; font-family:var(--font-sans); font-size:16px; font-weight:500;
  color:var(--ink-text); line-height:1.35; display:flex; align-items:center; gap:13px; box-shadow:var(--shadow-choice);
  transition:border-color .15s ease, background .15s ease; }
.choice-card:hover, .choice-card:focus-visible{ border-color:var(--card-accent); background:var(--cream-raised-hi); }
.choice-radio{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--text-cream-45); }
.choice-card[aria-checked="true"]{ border-color:var(--attn-text); background:var(--func-chosen); }
.choice-card[aria-checked="true"] .choice-radio{ border-color:var(--attn-text); background:var(--attn-text);
  box-shadow:inset 0 0 0 4px var(--cream-raised); }
.rm-elsewrap{ margin-top:11px; }
/* C12 multi-select hint (Epoch 2) */
.rm-choice-hint{ margin:9px 2px 0; font-family:var(--font-sans); font-size:12px;
  font-style:italic; color:var(--muted-ink-3); opacity:.85; }
/* C13 (Epoch 2, founder #8): the quick give's provisional register — lighter than the
   question it precedes, so a fast take never reads as the considered verdict. */
.rm-give-quick{ opacity:.88; }
.rm-give-frame{ font-family:var(--font-sans); font-size:.82em; font-style:italic;
  color:var(--muted-ink-3); opacity:.8; }
/* B6 (Epoch 2, founder #20): the deck-top maturity line — one honest frame over the
   whole reveal; the cards below stay unhedged. Part of the reveal's overlay chrome
   (the viewport is absolute and would paint over a static element), sitting in the
   quiet band between the dots (top:54, z:40) and the card content. */
.rm-maturity-line{ position:absolute; top:70px; left:0; right:0; z-index:40;
  margin:0 auto; max-width:520px; padding:0 22px; pointer-events:none;
  font-family:var(--font-sans); font-size:12px; font-style:italic; text-align:center;
  line-height:1.45; color:var(--muted-ink-3); opacity:.9; }
.rm-else{ width:100%; box-sizing:border-box; border:1.5px dashed var(--hairline-ink-20); background:transparent;
  border-radius:var(--r-choice); padding:14px 16px; font-family:var(--font-sans); font-size:15px; color:var(--ink-text);
  /* it's a textarea now — grows with the answer instead of trapping it on one line (2026-07-27) */
  resize:none; overflow:hidden; line-height:1.4; }

/* text input */
.rm-textarea::placeholder, .media-search input::placeholder, .rm-else::placeholder{ color:var(--muted-ink); opacity:1; }
.rm-textarea{ width:100%; box-sizing:border-box; margin-top:24px; min-height:120px; resize:none;
  border:1.5px solid var(--hairline-ink); border-radius:var(--r-card-lg); padding:16px 18px;
  font-family:var(--font-serif); font-style:italic; font-size:18px; line-height:1.45; color:var(--ink-text-strong);
  background:var(--cream-raised); }
.rm-textarea:focus{ outline:none; border-color:var(--card-accent); background:var(--cream-raised-hi); }

/* footer / continue */
.rm-quiz-foot{ padding-top:18px; }
.btn-continue-wrap{ text-align:center; }
.btn-continue{ display:inline-block; cursor:pointer; background:var(--accent); color:var(--on-accent); border:none;
  border-radius:var(--r-pill); padding:15px 44px; font-family:var(--font-sans); font-weight:700; font-size:16px;
  box-shadow:var(--shadow-amber-btn-sm); transition:filter .15s ease, opacity .15s ease; }
.btn-continue:hover{ filter:brightness(1.05); }
.btn-continue[disabled]{ opacity:.4; cursor:default; box-shadow:none; }
/* the redirect family: ONE group of doors under one label ("or change direction:").
   Pill chips matching the funnel's chip language; flex-wrap folds them to two clean
   lines at 375px. Lives INSIDE #rm-answer, so it never collides with Continue. */
.rm-redirect{ margin-top:26px; }
.rm-redirect .lab{ display:block; font-family:var(--font-sans); font-size:13px; color:var(--muted-ink-3); }
.rm-redirect-chips{ margin-top:9px; display:flex; flex-wrap:wrap; gap:8px; }
.rm-redirect-btn{ cursor:pointer; border:1px solid var(--hairline-ink-20); background:var(--func-clickable);
  border-radius:var(--r-pill); padding:8px 13px; font-family:var(--font-sans); font-size:13px; color:var(--ink-text);
  display:inline-flex; align-items:center; gap:6px; }
.rm-redirect-btn:hover{ border-color:var(--card-accent); background:var(--cream-raised-hi); }

/* the "say anything" floor page (LEAD CHANNEL) — a FULL-PAGE same-document surface,
   pattern-matched to the review overlay. Sits UNDER the loading overlay (z60) so the
   wait covers it the moment a send goes out. Back retains the draft. */
.rm-floor{ position:fixed; inset:0; z-index:58; background:var(--cream-bg); color:var(--ink-text);
  overflow-y:auto; -webkit-overflow-scrolling:touch; animation:rmFadeIn .2s ease; }
.rm-floor-inner{ width:100%; max-width:460px; margin:0 auto; padding:54px 26px 40px; box-sizing:border-box; }
.rm-floor-back{ display:block; background:none; border:none; cursor:pointer; padding:0; margin:0 0 26px;
  font-family:var(--font-sans); font-size:14px; color:var(--card-accent); }
.rm-floor-head{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:26px;
  margin:0; color:var(--ink-text-strong); }
.rm-floor-sub{ margin:10px 0 0; font-family:var(--font-sans); font-size:14.5px; line-height:1.5; color:var(--muted-ink); }
.rm-floor-ta{ width:100%; box-sizing:border-box; margin-top:22px; min-height:40vh; resize:none;
  border:1.5px solid var(--hairline-ink); border-radius:var(--r-card-lg); padding:16px 18px;
  font-family:var(--font-serif); font-style:italic; font-size:18px; line-height:1.45;
  color:var(--ink-text-strong); background:var(--cream-raised); }
.rm-floor-ta:focus{ outline:none; border-color:var(--card-accent); background:var(--cream-raised-hi); }
.rm-floor-ta::placeholder{ color:var(--muted-ink); opacity:1; }
.rm-floor-actions{ margin-top:18px; text-align:center; }
.rm-floor-note{ margin:12px 0 0; text-align:center; font-family:var(--font-sans); font-size:12.5px;
  color:var(--muted-ink-3); }

/* primary button (landing) */
.btn-primary{ width:100%; border:none; cursor:pointer; background:var(--accent); color:var(--on-accent);
  font-family:var(--font-sans); font-weight:700; font-size:var(--fs-btn-lg); padding:18px; border-radius:var(--r-pill);
  letter-spacing:0.01em; box-shadow:var(--shadow-amber-btn); transition:filter .15s ease; }
.btn-primary:hover{ filter:brightness(1.05); }
/* Wave 1 Tier 0: Begin demoted to a quiet secondary when Continue is the primary. */
.btn-demoted{ background:transparent !important; color:var(--text-cream-50) !important;
  border:1.5px solid color-mix(in srgb, currentColor 35%, transparent) !important;
  font-weight:600 !important; margin-top:10px; }
.btn-primary[disabled]{ opacity:.5; cursor:default; }

/* ===========================================================================
   LOADING / COMPOSING overlay
   =========================================================================== */
.rm-loading{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:var(--cream-bg); animation:rmFadeIn var(--dur-fade) ease; }
.rm-loading.dark{ background:radial-gradient(120% 70% at 50% 0%, var(--ink-700), var(--ink-900)); }
.rm-composing{ font-size:var(--fs-composing); color:var(--muted-ink); text-align:center; padding:0 30px;
  animation:rmBreathe 2.4s ease-in-out infinite; }
.rm-loading.dark .rm-composing{ color:var(--text-cream-72); }

/* ===========================================================================
   INTERIM early-read (plum overlay)
   =========================================================================== */
/* Scrollable when content exceeds a short (desktop) viewport, so the "Keep going"
   button is always reachable. The inner is >= viewport tall (button pinned to the
   bottom via margin-top:auto on a tall screen); on a short screen it grows past the
   viewport and .interim scrolls to it. */
.interim{ position:fixed; inset:0; z-index:55; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:radial-gradient(120% 80% at 50% 0%, var(--plum-1), var(--plum-2) 55%, var(--plum-3));
  color:var(--on-plum); animation:rmFadeIn .3s ease; }
.interim-inner{ width:100%; max-width:460px; margin:0 auto; padding:78px 30px 34px; min-height:100dvh;
  display:flex; flex-direction:column; box-sizing:border-box; }
.interim-eyebrow{ font-family:var(--font-sans); font-size:12px; letter-spacing:0.3em; text-transform:uppercase;
  font-weight:700; color:var(--card-accent); }
.interim-read{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:var(--fs-interim);
  line-height:1.2; margin:24px 0 0; color:var(--on-plum-hi); }
.type-chip{ display:inline-flex; align-items:center; gap:10px; padding:11px 16px; border-radius:var(--r-pill);
  background:var(--amber-glow-12); border:1px solid var(--amber-glow-18); margin-top:26px; align-self:flex-start; }
.type-chip .label{ font-family:var(--font-sans); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--on-plum-65); font-weight:600; }
.type-chip .value{ font-family:var(--font-sans); font-weight:700; font-size:15px; color:var(--card-accent); }
.interim-dims{ margin-top:30px; display:flex; flex-direction:column; gap:13px; }
.interim-dim{ display:flex; align-items:center; gap:12px; }
.interim-dim .pips{ display:flex; gap:4px; }
.interim-dim .pip{ width:18px; height:4px; border-radius:var(--r-pill); background:var(--on-plum-50); opacity:.8; }
.interim-dim .pip.on{ opacity:1; background:var(--attn-text); }
.interim-dim .dlabel{ font-family:var(--font-sans); font-size:13.5px; color:var(--on-plum-65); }
.interim-foot{ margin-top:auto; padding-top:28px; }
.btn-ghost-light{ width:100%; cursor:pointer; background:var(--text-cream-06); color:var(--text-cream);
  border:1px solid var(--text-cream-18); border-radius:var(--r-pill); padding:16px; font-family:var(--font-sans);
  font-weight:600; font-size:16px; }
.btn-ghost-light:hover{ background:var(--text-cream-03); }

/* ===========================================================================
   REVEAL deck (swipeable full-bleed cards)
   =========================================================================== */
.reveal{ position:fixed; inset:0; z-index:50; overflow:hidden; background:var(--ink-800); animation:rmFadeIn .3s ease; }
.reveal-viewport{ position:absolute; inset:0; overflow:hidden; }
.reveal-track{ display:flex; height:100%; transform:translateX(calc(var(--idx,0) * -100%));
  transition:transform var(--dur-track) var(--ease-slide); will-change:transform; }
.reveal-card{ flex:0 0 100%; height:100%; overflow-y:auto; position:relative; box-sizing:border-box;
  /* F2: --deck-top is measured from the rendered maturity line (JS) — the 92px constant was a
     guess its wrapped copy outgrows at 390px, painting card content under the line. */
  padding:max(92px, var(--deck-top, 92px)) 30px 40px; display:flex; flex-direction:column; }
.reveal-card .inner{ width:100%; max-width:460px; margin:0 auto; display:flex; flex-direction:column; flex:1; }
.card-archetype{ background:radial-gradient(120% 70% at 50% 0%, var(--plum-1), var(--plum-2) 60%, var(--plum-3)); color:var(--on-plum); }
.card-line-ink{ background:var(--line-card-bg); color:var(--on-line-card); }
.card-stats{ background:radial-gradient(120% 70% at 50% 0%, var(--forest-1), var(--forest-2) 60%, var(--forest-3)); color:var(--on-forest); }
.card-blindspot{ background:var(--terracotta); color:var(--on-terracotta); }
.card-share{ background:radial-gradient(120% 80% at 50% 10%, var(--ink-550), var(--ink-800) 70%); color:var(--text-cream); }
.card-label{ font-family:var(--font-sans); font-size:12px; letter-spacing:0.3em; text-transform:uppercase; font-weight:700; color:var(--card-accent); }
.card-blindspot .card-label{ color:var(--terracotta-accent); }
.card-read{ font-family:var(--font-sans); font-size:13px; color:inherit; opacity:.78; margin:26px 0 4px; letter-spacing:0.04em; }
.card-archetype .name{ font-family:var(--font-sans); font-weight:800; font-size:var(--fs-archetype); line-height:0.98;
  letter-spacing:-0.02em; margin:6px 0 0; color:var(--card-accent); }
/* C2 (sim round 2026-07-14): the held name slot — quiet + lighter than a real archetype, so a
   thin-overview read never masquerades as a confident identity. The meter above carries motion. */
.card-archetype .name-forming, .share-card .name-forming{ font-weight:600; font-style:italic;
  font-size:var(--fs-lead, 20px); line-height:1.2; letter-spacing:normal; opacity:.7;
  color:var(--on-plum-hi, var(--card-accent)); animation:none; }
.card-archetype .essence{ margin:22px 0 0; font-family:var(--font-serif); font-style:italic; font-size:var(--fs-essence);
  line-height:1.35; color:var(--on-plum-hi); max-width:26ch; }
.card-line .body{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:var(--fs-question);
  line-height:1.3; margin:0; letter-spacing:-0.01em; }
.card-mid{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.card-foot{ font-family:var(--font-sans); font-size:12.5px; opacity:.72; margin-top:18px; }
.swipe-hint{ display:flex; align-items:center; gap:7px; }
.stat{ margin-top:22px; }
.stat-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.stat-key{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-stat-key); }
.stat-poles{ font-family:var(--font-sans); font-size:12px; opacity:.75; }
.stat-track{ height:8px; background:rgba(0,0,0,.14); border-radius:var(--r-pill); overflow:hidden; position:relative; }
.stat-bar{ height:100%; width:var(--w,0%); background:var(--forest-accent); border-radius:var(--r-pill);
  transition:width .6s var(--ease-spring); }

.dots{ position:absolute; top:54px; left:0; right:0; z-index:40; display:flex; justify-content:center; gap:7px;
  pointer-events:none; mix-blend-mode:difference; }
.dot{ width:5px; height:5px; border-radius:var(--r-pill); background:rgba(255,255,255,.55); transition:width .3s; }
.dot.active{ width:22px; background:#fff; }
.reveal-fab{ position:absolute; bottom:26px; z-index:50; width:52px; height:52px; border-radius:50%; border:none;
  cursor:pointer; color:var(--ink-text); backdrop-filter:blur(8px); font-size:22px; box-shadow:var(--shadow-fab); }
.reveal-fab.prev{ left:22px; background:rgba(0,0,0,.06); }
.reveal-fab.next{ right:22px; background:rgba(0,0,0,.09); }
.reveal-fab[hidden]{ display:none; }

/* share card */
.share-card{ width:100%; box-sizing:border-box; border-radius:var(--r-card); padding:30px 26px;
  background:linear-gradient(165deg, var(--ink-500), var(--ink-750)); border:1px solid var(--amber-glow-18);
  box-shadow:var(--shadow-share-card); }
.share-card .mirror{ font-family:var(--font-sans); font-size:11px; letter-spacing:0.4em; text-transform:uppercase; color:var(--card-accent); }
.share-card .name{ font-family:var(--font-sans); font-weight:800; font-size:var(--fs-archetype-share); line-height:1;
  letter-spacing:-0.02em; margin:14px 0 0; color:var(--card-accent); }
.share-card .tagline{ margin:18px 0 0; font-family:var(--font-serif); font-style:italic; font-size:var(--fs-tagline);
  line-height:1.4; color:var(--text-cream-warm); }
.share-actions{ display:flex; flex-direction:column; gap:10px; margin-top:26px; }
.btn-save{ width:100%; cursor:pointer; background:var(--accent); color:var(--on-accent); border:none;
  border-radius:var(--r-pill); padding:16px; font-family:var(--font-sans); font-weight:700; font-size:16px; }
.btn-secondary-row{ display:flex; gap:10px; }
.btn-secondary{ flex:1; cursor:pointer; background:var(--text-cream-06); color:var(--text-cream);
  border:1px solid var(--text-cream-18); border-radius:var(--r-pill); padding:14px; font-family:var(--font-sans);
  font-weight:600; font-size:15px; }
.btn-secondary:hover{ background:var(--text-cream-03); }
.rm-savelink{ margin-top:14px; font-family:var(--font-sans); font-size:12.5px; color:var(--text-cream-50);
  word-break:break-all; text-align:center; }
.rm-savelink a{ color:var(--card-accent); }
.rm-continue-portrait{ display:block; text-align:center; margin-top:20px; font-family:var(--font-sans);
  font-size:14px; color:var(--text-cream-72); text-decoration:none; }
.rm-continue-portrait:hover{ color:var(--card-accent); }

/* review (back) overlay */
.rm-review{ position:fixed; inset:0; z-index:58; background:var(--cream-bg); color:var(--ink-text);
  overflow-y:auto; animation:rmFadeIn .2s ease; }
.rm-review-inner{ width:100%; max-width:460px; margin:0 auto; padding:54px 26px 40px; box-sizing:border-box; }
.rm-review h3{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:24px; margin:0 0 22px; }
.rm-review-item{ margin-bottom:20px; }
.rm-review-q{ font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--ink-text-strong); margin:0; }
.rm-review-a{ font-family:var(--font-sans); font-size:14px; color:var(--muted-ink); margin:6px 0 0; }
.rm-review-close{ display:block; margin:8px auto 24px; background:none; border:none; cursor:pointer;
  font-family:var(--font-sans); font-size:14px; color:var(--card-accent); }

/* ===========================================================================
   DESKTOP — ambient centered column.
   On wide screens the single mobile column reads as a deliberate floating "card"
   on a designed warm-dark canvas, rather than a narrow strip on a flat fill.
   Mobile (< 860px) is untouched / full-bleed. The reveal deck's translateX is
   relative to its own track width, so it keeps working at card width.
   =========================================================================== */
@media (min-width: 860px) {
  /* the designed canvas behind every surface */
  body.rm-body, body.rm-landing-body {
    background:
      radial-gradient(58% 42% at 50% -4%, var(--canvas-wash-1) 0%, rgba(238,239,241,0) 62%),
      radial-gradient(80% 60% at 50% 116%, var(--canvas-wash-2) 0%, rgba(238,239,241,0) 72%),
      var(--canvas-wash-3);
  }

  /* FLOW surfaces (landing, quiz): the full-width colored fill goes transparent and the
     COLUMN becomes a centered card on the ambient canvas. Stays in normal page flow, so
     the Begin / Continue CTA is always reachable (page scrolls if content is tall) — no
     internal-scroll clipping. */
  .rm-quiz, .rm-landing { background: transparent; }
  .rm-quiz-inner, .rm-landing-inner {
    max-width: 484px; margin: 36px auto; min-height: calc(100dvh - 72px);
    border-radius: 34px;
    box-shadow: 0 50px 110px -38px rgba(0,0,0,.74), 0 0 0 1px rgba(38,38,43,.05);
  }
  .rm-quiz-inner { background: var(--cream-bg); padding: 48px 36px 34px; }
  .rm-landing-inner {
    background: radial-gradient(120% 60% at 75% 0%, var(--landing-glow) 0%, var(--ink-900) 55%);
    padding: 56px 40px 40px;
  }

  /* FIXED overlays (interim, reveal, review, floor, loading): centered cards over a dimmed
     canvas. They can't page-scroll, so they keep a bounded height + internal scroll. The
     100vmax spread shadow is the dim layer (not clipped by the card's own overflow). */
  .interim, .reveal, .rm-review, .rm-floor, .rm-loading {
    inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 484px; max-width: 484px; height: min(88dvh, 880px);
    border-radius: 34px; overflow: hidden;
    box-shadow: 0 50px 110px -38px rgba(0,0,0,.74), 0 0 0 100vmax rgba(8,6,5,.58);
  }
  .interim, .rm-review, .rm-floor { overflow-y: auto; }   /* keep the short-window scroll fix */
  .rm-review-inner, .rm-floor-inner { max-width: none; }
  /* .rm-chat was REMOVED from this block (F3, founder R2-#2): its base rules are appended
     LATER in this file, so per-property cascade clobbered inset while keeping the transform —
     a 484px card translated up-left off-screen. The chat's own desktop block now lives after
     its base rules (see M1 section). */
}

/* ===========================================================================
   MEDIA — movie/music/book questions (grid when asked; the user-opened doors
   live in the redirect family, .rm-redirect above).
   =========================================================================== */
.media-tools{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.media-back{ background:none; border:none; cursor:pointer; align-self:flex-start; padding:0;
  font-family:var(--font-sans); font-size:13px; color:var(--muted-ink); }
.media-back:hover{ color:var(--card-accent); }
.media-search{ display:flex; gap:8px; }
.media-search input{ flex:1; box-sizing:border-box; border:1.5px solid var(--hairline-ink); border-radius:var(--r-pill);
  padding:11px 16px; font-family:var(--font-sans); font-size:14px; color:var(--ink-text); background:var(--cream-raised); }
.media-search input:focus{ outline:none; border-color:var(--card-accent); background:var(--cream-raised-hi); }
.media-grid{ margin-top:4px; display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.media-grid .media-empty{ grid-column:1 / -1; }   /* the empty state spans the row, never a squeezed first column */
.media-card{ cursor:pointer; border:none; background:none; padding:0; text-align:left; display:flex; flex-direction:column; gap:6px; }
.media-poster{ width:100%; aspect-ratio:2/3; border-radius:12px; overflow:hidden; background:var(--cream-page-3);
  box-shadow:var(--shadow-choice); display:flex; align-items:flex-end; transition:outline .12s ease; outline:2px solid transparent; }
.media-poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-poster.noimg{ background:linear-gradient(160deg, var(--ink-650), var(--ink-800)); }
.media-poster.noimg span{ padding:10px; font-family:var(--font-serif); font-style:italic; font-size:13px; color:var(--text-cream-72); line-height:1.3; }
.media-card:hover .media-poster, .media-card:focus-visible .media-poster{ outline-color:var(--card-accent); }
.media-title{ font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--ink-text); line-height:1.25; }
.media-sub{ font-family:var(--font-sans); font-size:11.5px; color:var(--muted-ink-3); }
.media-empty{ font-family:var(--font-serif); font-style:italic; color:var(--muted-ink); font-size:15px; padding:14px 2px; }

/* ===========================================================================
   A→B port additions (branch: reimagine-enriched)
   =========================================================================== */
/* P6 — binary_set as compact tap-cards (two buttons per pair), not a slider */
.binpairs{ margin-top:24px; display:flex; flex-direction:column; gap:11px; }
.binpair{ display:flex; gap:9px; }
.binbtn{ flex:1 1 0; min-width:0; cursor:pointer; text-align:center; background:var(--func-clickable); color:var(--ink-text);
  border:1.5px solid var(--hairline-ink-12); border-radius:var(--r-choice); padding:16px 12px;
  font-family:var(--font-sans); font-size:15px; font-weight:600; line-height:1.25; box-shadow:var(--shadow-choice);
  transition:border-color .12s ease, background .12s ease; }
.binbtn:hover, .binbtn:focus-visible{ border-color:var(--card-accent); background:var(--cream-raised-hi); outline:none; }
.binbtn.chosen{ border-color:var(--attn-text); background:var(--func-chosen); color:var(--ink-text); }
/* "both" — a compact third state per pair (ambivalence parity with classic); not a pole, so it
   doesn't take equal width. */
.binboth{ flex:0 0 auto; cursor:pointer; background:transparent; color:var(--muted-ink-3);
  border:1.5px solid var(--hairline-ink-12); border-radius:var(--r-choice); padding:16px 13px;
  font-family:var(--font-sans); font-size:13px; font-weight:600; line-height:1.25;
  transition:border-color .12s ease, background .12s ease, color .12s ease; }
.binboth:hover, .binboth:focus-visible{ border-color:var(--card-accent); color:var(--ink-text); outline:none; }
.binboth.chosen{ border-color:var(--attn-text); background:var(--func-chosen); color:var(--ink-text); }
/* alt_offer — the "road not taken" pill under a question; muted until hover. */
.rm-alt-offer{ margin:14px 0 2px; cursor:pointer; border:1px solid var(--hairline-ink-20);
  background:var(--func-clickable); border-radius:var(--r-pill); padding:8px 13px;
  font-family:var(--font-sans); font-size:13px; color:var(--muted-ink-3);
  display:inline-flex; align-items:center; gap:6px;
  transition:border-color .12s ease, background .12s ease, color .12s ease; }
.rm-alt-offer:hover, .rm-alt-offer:focus-visible{ border-color:var(--card-accent);
  background:var(--cream-raised-hi); color:var(--ink-text); outline:none; }

/* P2 — text-question thinking-aloud line + tap-to-prefill chips */
.rm-wondering{ margin:12px 2px 0; font-family:var(--font-serif); font-style:italic; font-size:15px; line-height:1.45; color:var(--muted-ink); }
.rm-chips{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.rm-chip{ cursor:pointer; border:1px solid var(--hairline-ink-20); background:var(--func-clickable); border-radius:var(--r-pill);
  padding:8px 14px; font-family:var(--font-sans); font-size:13.5px; color:var(--ink-text); }
.rm-chip:hover{ border-color:var(--card-accent); background:var(--cream-raised-hi); }

/* P3 — content-bearing "noticing" wait steps (revealed one at a time) */
.rm-steps{ display:flex; flex-direction:column; gap:11px; max-width:340px; margin:0 auto; text-align:left; }
.rm-step{ display:flex; align-items:flex-start; gap:10px; font-family:var(--font-sans); font-size:14.5px;
  line-height:1.4; color:var(--muted-ink); animation:rmFadeUp .3s ease; }
.rm-step-ic{ flex:0 0 auto; width:18px; text-align:center; color:var(--card-accent); font-size:14px; }
.rm-step.pending{ color:var(--ink-text-strong); }
.rm-step.pending .rm-step-ic{ animation:rmBreathe 1.6s ease-in-out infinite; }
.rm-step.concepts .rm-step-lab{ color:var(--muted-ink-3); }
.rm-step.concepts .rm-step-kw{ color:var(--ink-text); font-weight:500; }
.rm-loading.dark .rm-step{ color:var(--text-cream-72); }
.rm-loading.dark .rm-step.pending{ color:var(--text-cream); }
.rm-loading.dark .rm-step.concepts .rm-step-lab{ color:var(--text-cream-50); }

/* P5a — confidence/calibration cue on the archetype card */
.card-calib{ font-family:var(--font-sans); font-size:12.5px; color:var(--on-plum-50); margin:0 0 8px; }

/* P1 — the written-portrait reveal card (the depth payoff + reliable spine) */
.card-portrait{ background:radial-gradient(120% 80% at 50% 0%, var(--ink-700), var(--ink-900)); color:var(--text-cream); }
.card-portrait .card-label{ color:var(--card-accent); }
.portrait-body{ margin:16px 0 6px; }
.portrait-sec{ font-family:var(--font-sans); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  font-weight:700; color:var(--card-accent); margin:22px 0 8px; }
.portrait-p{ font-family:var(--font-serif); font-size:17px; line-height:1.6; color:var(--text-cream-warm); margin:0 0 14px; }
.card-portrait .share-actions{ margin-top:20px; }

/* ===========================================================================
   Walkthrough wave (2026-07-01): structured wait surface (status line + early
   give + steps), staged terminal composing, poster skeletons, shape-pole
   emphasis, and the save sheet (the return path at the reveal).
   =========================================================================== */
.rm-waitline{ display:block; transition:opacity .26s ease; }
.rm-waitline.fading{ opacity:0; }
.rm-waitdots::after{ content:'…'; animation:rmDots 1.6s ease-in-out infinite; }
@keyframes rmDots{ 0%,100%{opacity:.25;} 50%{opacity:.9;} }
/* terminal-wait orientation (2026-07-08): what's happening + the session ladder */
.rm-orient{ margin:26px auto 0; max-width:340px; text-align:left; }
.rm-orient-what{ margin:0 0 12px; font-family:var(--font-sans); font-size:12.5px; line-height:1.5;
  color:var(--text-cream-50); }
.rm-orient-ladder{ border-top:1px solid var(--amber-glow-12); padding-top:10px; }
.rm-orient-row{ margin:0 0 5px; font-family:var(--font-sans); font-size:12px; line-height:1.45;
  color:var(--text-cream-50); }
.rm-orient-row strong{ color:var(--text-cream-warm); font-weight:600; }

/* the "next session" block (ending experiment, variant b) */
.rm-nextsess{ margin-top:22px; padding:14px 16px; border:1px solid var(--amber-glow-18);
  border-radius:14px; background:var(--cream-bg); text-align:left; }
.rm-nextsess-label{ margin:0 0 4px; font-family:var(--font-sans); font-weight:700; font-size:11.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--card-accent); }
.rm-nextsess-intro{ margin:0 0 10px; font-family:var(--font-sans); font-size:13px; line-height:1.45;
  color:var(--ink-text); }
.rm-nextsess-chips{ display:flex; flex-direction:column; gap:7px; }
.rm-nextsess-chip{ cursor:pointer; text-align:left; border:1px solid var(--hairline-ink-20);
  background:var(--func-clickable); border-radius:11px; padding:9px 12px;
  font-family:var(--font-sans); font-size:13px; color:var(--ink-text); line-height:1.35; }
.rm-nextsess-chip:hover{ border-color:var(--card-accent); }
.rm-nextsess-chip.chosen{ border-color:var(--attn-text); background:var(--func-chosen); }
.rm-nextsess-row{ margin-top:9px; display:flex; gap:7px; }
.rm-nextsess-input{ flex:1; min-width:0; box-sizing:border-box; border:1px dashed var(--hairline-ink-20);
  background:transparent; border-radius:11px; padding:8px 11px; font-family:var(--font-sans);
  font-size:13px; color:var(--ink-text); }
.rm-nextsess-set{ cursor:pointer; border:1px solid var(--hairline-ink-20); background:var(--func-clickable);
  border-radius:11px; padding:8px 13px; font-family:var(--font-sans); font-size:12.5px; font-weight:600;
  color:var(--ink-text); }
.rm-nextsess-done{ margin:9px 0 0; font-family:var(--font-sans); font-size:12.5px; font-weight:600;
  color:var(--card-accent); }

/* permission-to-leave release line (variant b) */
.rm-release{ margin:14px 0 0; text-align:center; font-family:var(--font-sans); font-size:12px;
  line-height:1.5; color:var(--text-cream-50); }

.rm-earlygive{ display:block; margin:22px auto 0; max-width:52ch; font-size:16.5px; line-height:1.55;
  color:var(--ink-text); animation:none; }
.rm-loading.dark .rm-earlygive{ color:var(--text-cream-warm); }
/* Riskless-latency item 2: the quiet one-line echo of what was just submitted. */
.rm-answerecho{ display:block; margin:10px auto 0; max-width:52ch; font-family:var(--font-sans);
  font-size:13px; line-height:1.5; color:var(--ink-text); opacity:.55; }
.rm-loading.dark .rm-answerecho{ color:var(--text-cream-warm); }

.media-poster img{ transition:opacity .25s ease; }
.media-poster.loading{ background:linear-gradient(100deg, var(--cream-page-3) 40%, var(--cream-raised-hi) 50%, var(--cream-page-3) 60%);
  background-size:200% 100%; animation:rmShimmer 1.2s linear infinite; }
.media-poster.loading img{ opacity:0; }
@keyframes rmShimmer{ to{ background-position:-200% 0; } }

.stat-poles{ opacity:1; }
.stat-poles .pole{ opacity:.70; }
.stat-poles .pole.lean{ opacity:1; font-weight:650; }

.rm-savesheet{ display:block; margin-top:16px; padding:14px 16px; border:1px solid var(--amber-glow-18);
  border-radius:14px; background:var(--cream-bg); text-align:left; }
.rm-savesheet .save-head{ margin:0 0 6px; font-family:var(--font-sans); font-weight:700; font-size:12.5px;
  letter-spacing:.05em; color:var(--card-accent); }
.rm-savesheet .save-url{ display:block; word-break:break-all; color:var(--card-accent); font-size:12.5px; margin-bottom:9px; }
.rm-savesheet .save-copy{ font-family:var(--font-sans); font-size:12px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--amber-glow-18); background:transparent; color:var(--text-cream-warm); cursor:pointer; }
.rm-savesheet .save-google{ display:block; margin-top:10px; font-family:var(--font-sans);
  font-size:12.5px; font-weight:600; color:var(--card-accent); }
.rm-savesheet .save-note{ margin:9px 0 0; font-family:var(--font-sans); font-size:11.5px;
  color:var(--text-cream-50); line-height:1.45; }
/* the earned-upgrade reframe (2026-07-06): named benefits + Google one-tap primary + anon link */
.rm-savesheet .save-benefits{ list-style:none; margin:0 0 12px; padding:0; display:flex;
  flex-direction:column; gap:5px; }
.rm-savesheet .save-benefits li{ font-family:var(--font-sans); font-size:12.5px;
  color:var(--text-cream-warm); line-height:1.4; display:flex; align-items:baseline; gap:8px; }
.rm-savesheet .save-benefit-ic{ flex:0 0 auto; }
.rm-savesheet .save-google-primary{ display:block; box-sizing:border-box; text-align:center;
  margin:0 0 12px; padding:11px 16px; border-radius:999px; background:var(--accent);
  color:var(--on-accent); font-family:var(--font-sans); font-weight:700; font-size:13.5px;
  text-decoration:none; }
.rm-savesheet .save-or{ margin:0 0 6px; font-family:var(--font-sans); font-size:11.5px;
  color:var(--text-cream-50); }
/* Sign in with Apple (task #14): same shape as the Google primary, Apple-black. Renders
   only when the server has the console values (no-dead-controls). */
.rm-savesheet .save-apple-primary{ background:#000; color:#fff; margin-top:-4px; }
.rm-signin-apple{ margin-left:14px; }

/* B5 (Epoch 2): the post-save next step — the commitment moment earns a confident
   continuation, not a full stop. */
.rm-savesheet .save-next-step{ display:block; margin:10px 0 2px; text-align:center;
  font-family:var(--font-sans); font-weight:600; font-size:13px; color:var(--accent);
  text-decoration:none; }
.rm-savesheet .save-next-step:hover{ text-decoration:underline; }

/* Wave 1 (2026-07-08): the no-account link at EQUAL BILLING — same shape as the Google
   primary, outline treatment; a peer option, not a footnote. */
.rm-savesheet .save-link-primary{ display:block; box-sizing:border-box; width:100%; text-align:center;
  margin:0 0 10px; padding:11px 16px; border-radius:999px; background:transparent;
  border:1.5px solid var(--accent); color:var(--card-accent); font-family:var(--font-sans);
  font-weight:700; font-size:13.5px; cursor:pointer; }

/* Wave 1 Tier 1: the back-trap leave row at the top of the review overlay. */
.rm-review-leave{ display:flex; flex-direction:column; gap:8px; margin:0 0 14px; padding:12px;
  border-radius:12px; background:color-mix(in srgb, var(--accent) 8%, transparent); }
.rm-review-stay{ font-family:var(--font-sans); font-weight:700; font-size:13.5px; padding:10px 16px;
  border-radius:999px; border:none; background:var(--accent); color:var(--on-accent); cursor:pointer; }
.rm-review-leavelink{ font-family:var(--font-sans); font-size:12px; color:var(--text-cream-50);
  text-align:center; text-decoration:underline; }

/* ===========================================================================
   DESIGN SYSTEM v3 (2026-07-02) — settled direction, two dials:
   MODE  (html[data-mode="light|dark"]) — one identity, light + dark twins.
     Light = main's register: white cards on pale metallic blue-grey #F0F2F5,
     slate-navy #3A4A6B primary, metallic-glass material (shimmer display text,
     slate washes). Dark = the night twin on #141A26.
   ARM   (html[data-theme=...]) — the attention-color bake-off on the FIXED
     slate base: which second color marks significant moments, and how widely.
     slate      = control, no attention color (attention tokens resolve to slate)
     amber      = slate + amber attention, minimal scope (Begin / Save / next)
     coral      = slate + coral attention, minimal scope   (hue variant)
     green      = slate + green attention, minimal scope   (hue variant)
     amber-plus = slate + amber, GENEROUS scope (also progress, chosen states,
                  pips)                                    (scope variant)
   Factorial on purpose: arms differ from `amber` by exactly one aspect.
   =========================================================================== */

/* ---- metallic display ramp (per mode) + attention tokens (per arm) -------- */
:root{
  --metal-1:#26344D; --metal-2:#3A4A6B; --metal-3:#52719B;   /* text-clip ramp, light */
  /* functional greys (winner branch, 2026-07-02): the grey's hue-cast encodes function —
     slate-cast = clickable, achromatic = inactive/disabled, attention-cast = chosen. */
  --func-clickable:#EDF1F7; --func-inactive:#ECEDEF; --func-chosen:#E9F2EC;
  --wash-a:rgba(58,74,107,.05); --wash-b:rgba(107,140,174,.08);
  --attn:var(--accent); --attn-g1:var(--accent-deep); --attn-g2:#52719B;
  --on-attn:#FFFFFF; --attn-text:var(--card-accent);
  --amber-text:#8A6511; --coral-text:#B54A0E; --green-text:#1E5A38;
}

/* ---- DARK twin ------------------------------------------------------------ */
html[data-mode="dark"]{
  --accent:#46587D; --accent-deep:#3A4A6B; --on-accent:#FFFFFF; --accent-soft-amber:#4A5C7E;
  --cream-bg:#141A26; --cream-raised:#1E2939; --cream-raised-hi:#243144; --cream-page-3:#141A26;
  --ink-900:#141A26; --ink-850:#141A26; --ink-800:#141A26; --ink-750:#141A26; --ink-700:#141A26;
  --ink-650:#141A26; --ink-600:#141A26; --ink-550:#141A26; --ink-500:#141A26; --ink-450:#141A26;
  --text-cream:#E8EDF3; --text-cream-hi:#F4F7FA; --text-cream-warm:#CBD5E1;
  --text-cream-72:rgba(232,237,243,.82); --text-cream-50:rgba(232,237,243,.70);
  --text-cream-45:rgba(232,237,243,.64); --text-cream-18:rgba(232,237,243,.25);
  --text-cream-06:rgba(232,237,243,.07); --text-cream-03:rgba(232,237,243,.04);
  --ink-text:#E8EDF3; --ink-text-strong:#F4F7FA;
  --muted-ink:#AAB6C6; --muted-ink-2:#9FACBE; --muted-ink-3:#9FACBE; --muted-ink-4:#C4CEDB; --muted-ink-5:#9FACBE;
  --eyebrow-ink:#AAB6C6;
  --plum-1:#1E2939; --plum-2:#1E2939; --plum-3:#1E2939;
  --on-plum:#E8EDF3; --on-plum-hi:#F4F7FA; --on-plum-65:rgba(232,237,243,.74);
  --on-plum-60:rgba(232,237,243,.68); --on-plum-50:rgba(232,237,243,.62);
  --line-card-bg:#141A26; --on-line-card:#E8EDF3;
  --terracotta:#1E2939; --on-terracotta:#E8EDF3; --terracotta-accent:#A9BEDC;
  --forest-1:#141A26; --forest-2:#141A26; --forest-3:#141A26; --forest-accent:#7E99BD; --on-forest:#E8EDF3;
  --hairline-ink:rgba(232,237,243,.12); --hairline-ink-12:rgba(232,237,243,.14); --hairline-ink-20:rgba(232,237,243,.26);
  --amber-glow-18:rgba(107,140,174,.26); --amber-glow-12:rgba(107,140,174,.15);
  --landing-glow:#141A26; --canvas-wash-1:#141A26; --canvas-wash-2:#141A26; --canvas-wash-3:#141A26;
  --card-accent:#8FA9C9; --line-card-accent:var(--card-accent);
  --shadow-amber-btn:0 12px 30px -10px rgba(0,0,0,.55); --shadow-amber-btn-sm:0 10px 24px -10px rgba(0,0,0,.55);
  --shadow-choice:0 1px 2px rgba(0,0,0,.3);
  --metal-1:#6B8CAE; --metal-2:#8FA9C9; --metal-3:#C9D6E4;
  --func-clickable:#233044; --func-inactive:#1B222E; --func-chosen:#1E3229;
  --wash-a:rgba(107,140,174,.12); --wash-b:rgba(160,180,200,.16);
  --attn-g2:#6B8CAE; --attn-text:var(--card-accent);
  --amber-text:#E5C06B; --coral-text:#F5A06B; --green-text:#7FC79A;
}

/* ---- attention arms (fixed slate base; one change each vs "amber") -------- */
html[data-theme="amber"], html[data-theme="amber-plus"]{
  --attn:#E8B24C; --attn-g1:#C98A3A; --attn-g2:#F2CA7A; --on-attn:#1A1206; --attn-text:var(--amber-text);
  --func-chosen:#F7F0E2;
}
html[data-theme="slate"]{ --func-chosen:#EDF1F7; }
html[data-theme="coral"]{
  --attn:#F47D31; --attn-g1:#D96420; --attn-g2:#F79A5C; --on-attn:#351B0B; --attn-text:var(--coral-text);
  --func-chosen:#F9EDE4;
}
html[data-theme="green"]{
  --attn:#3E9463; --attn-g1:#2E7D4F; --attn-g2:#5FAF7F; --on-attn:#0B2417; --attn-text:var(--green-text);
}

/* ---- metallic-glass material (main's signature, both modes) --------------- */
.rm-hero, .card-archetype .name, .share-card .name{
  background:linear-gradient(135deg, var(--metal-1), var(--metal-2) 35%, var(--metal-3) 55%, var(--metal-2) 75%, var(--metal-1));
  background-size:200% 200%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--metal-2);
  animation:rmShimmer 7s ease-in-out infinite;
}
@keyframes rmShimmer{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@media (prefers-reduced-motion: reduce){ .rm-hero, .card-archetype .name, .share-card .name{ animation:none; } }
.rm-sample, .type-chip, .share-card{
  background:linear-gradient(135deg, var(--wash-a), var(--wash-b)); border-color:var(--amber-glow-18);
}

/* ---- attention scope: MINIMAL (all arms) — the one significant action ----- */
.btn-primary, .btn-save{
  background:linear-gradient(135deg, var(--attn-g1), var(--attn) 45%, var(--attn-g2));
  color:var(--on-attn);
}
.reveal-fab.next{ background:var(--attn); color:var(--on-attn); }

/* functional-grey: inactive/disabled = achromatic (no hue = no affordance) */
.btn-primary:disabled, .btn-save:disabled{
  background:var(--func-inactive); color:var(--muted-ink); opacity:1; }

/* ---- attention scope: GENEROUS (amber-plus only) --------------------------- */
html[data-theme="amber-plus"] .choice-card[aria-checked="true"]{ border-color:var(--attn-text); }
html[data-theme="amber-plus"] .choice-card[aria-checked="true"] .choice-radio{
  border-color:var(--attn-text); background:var(--attn-text); }
html[data-theme="amber-plus"] .binbtn.chosen{ border-color:var(--attn-text); }
html[data-theme="amber-plus"] .card-blindspot .card-label{ color:var(--attn-text); }
html[data-theme="amber-plus"] .stat-bar{ background:var(--attn-text); }

/* (theme picker UI removed on this branch — appearance is fixed in code; see reimagine-theme.js) */

/* ===========================================================================
   UNIFY additions: the reveal hinge (B2) + the wide-screen place rail (1d)
   =========================================================================== */
.rm-fixwrap{ margin-top:14px; }
.rm-fix{ border:none; background:transparent; cursor:pointer; font-family:var(--font-sans);
  font-size:12.5px; color:var(--muted-ink); text-decoration:underline dotted; padding:0; }
.rm-fix:hover{ color:var(--attn-text); }
.rm-fix-row{ display:flex; gap:8px; margin-top:8px; }
.rm-fix-input{ flex:1; box-sizing:border-box; border:1.5px solid var(--hairline-ink-12);
  border-radius:10px; padding:9px 12px; font-family:var(--font-sans); font-size:13.5px;
  color:var(--ink-text); background:var(--cream-raised); }
.rm-fix-input:focus{ outline:none; border-color:var(--card-accent); }
.rm-fix-send{ border:none; border-radius:10px; padding:9px 14px; cursor:pointer;
  background:var(--attn); color:var(--on-attn); font-family:var(--font-sans); font-weight:700; font-size:13px; }
.rm-fix-done{ margin:8px 0 0; font-family:var(--font-sans); font-size:12.5px; color:var(--muted-ink); }
.rm-fix-done a{ color:var(--attn-text); font-weight:600; }

#rm-rail{ display:none; }
@media (min-width:1280px){
  #rm-rail{ display:block; position:fixed; z-index:40;
    top:50px; right:max(24px, calc(50vw - 242px - 340px - 48px));
    width:340px; max-height:calc(100dvh - 100px); overflow-y:auto; box-sizing:border-box;
    padding:20px 22px; border-radius:var(--r-card-lg);
    background:var(--cream-raised); border:1px solid var(--amber-glow-18);
    box-shadow:0 18px 40px -24px rgba(20,26,38,.25); }
  #rm-rail .rm-rail-label{ margin:0 0 10px; font-family:var(--font-sans); font-size:11px;
    font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--card-accent); }
  #rm-rail .rm-rail-read{ font-family:var(--font-sans); font-size:13.5px; line-height:1.55; color:var(--ink-text); }
  #rm-rail .rm-rail-p{ margin:0 0 10px; }
  #rm-rail .rm-rail-links{ margin-top:14px; padding-top:12px; border-top:1px solid var(--hairline-ink);
    display:flex; flex-direction:column; gap:8px; }
  #rm-rail .rm-rail-links a{ font-family:var(--font-sans); font-size:13px; font-weight:600;
    color:var(--card-accent); text-decoration:none; }
  #rm-rail .rm-rail-links a:hover{ text-decoration:underline; }
}

/* ============================== Tier-1 repairs (2026-07-04) ==============================
   Carousel clearance + FAB fade-while-reading, session chip, welcome toast, wait escape,
   error back-link, media rationale line. See docs/reachability-audit.md §4 moves 4+5 and
   the flow graph §5 (the verified FAB-overlap + a11y findings). */

/* Clear the FAB band on phones: cards reserve enough bottom padding that the end-action
   rows sit ABOVE the 26–78px arrow zone (measured overlap: Share/Start-fresh corners). */
@media (max-width:859px){
  .reveal-card{ padding-bottom:110px; }
}
/* Fade the arrows out while a long card (the prose portrait) is being read. */
.reveal-fab{ transition:opacity .25s ease; }
#rm-reveal.reading .reveal-fab{ opacity:0; pointer-events:none; }
/* F2: the maturity line joins the reading fade — scrolled card text passed under its
   backgroundless 12px copy (text-on-text). It returns at card top (applyIdx clears .reading). */
.rm-maturity-line{ transition:opacity .25s ease; }
#rm-reveal.reading .rm-maturity-line{ opacity:0; }

/* Session-N chip beside the progress count — returning sessions only. */
.rm-session-chip{ font-family:var(--font-sans); font-size:11px; font-weight:600;
  color:var(--muted-ink-2); border:1px solid var(--muted-ink-5); border-radius:999px;
  padding:2px 8px; margin-right:8px; vertical-align:1px; white-space:nowrap; }

/* Welcome-back toast (signed-in return). */
.rm-toast{ position:fixed; top:14px; left:50%; transform:translate(-50%,-8px);
  background:var(--ink-text-strong); color:#F0F2F5; font-family:var(--font-sans);
  font-size:13.5px; padding:10px 16px; border-radius:10px; z-index:80; opacity:0;
  pointer-events:none; transition:opacity .3s ease, transform .3s ease; max-width:88vw; }
.rm-toast.on{ opacity:1; transform:translate(-50%,0); }

/* Quiet escape on the terminal/reveal waits. */
.rm-wait-escape{ display:block; margin:26px auto 0; background:none; border:none;
  font-family:var(--font-sans); font-size:13.5px; color:var(--muted-ink-2);
  text-decoration:underline; cursor:pointer; }

/* Error screen: the second way out. */
.rm-err-back{ display:block; margin:14px auto 0; background:none; border:none;
  font-family:var(--font-sans); font-size:13.5px; color:var(--muted-ink-2);
  text-decoration:underline; cursor:pointer; }

/* The curator's "why this might fit you" — one quiet line on a few grid cards. */
.media-why{ font-family:var(--font-sans); font-size:11px; font-style:italic;
  color:var(--muted-ink-3); margin-top:2px; line-height:1.35; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ===========================================================================
   GRADUATED repairs (2026-07-04): M1 "Talk it through" + M3 read sheet —
   permanent, ever-present features (the repairs-rig mockups, made real).
   =========================================================================== */

/* M1 — the quiet entry link under the question/answer area */
.rm-talk{ display:block; margin:14px 0 0; background:none; border:none; padding:0; cursor:pointer;
  text-align:left; font-family:var(--font-sans); font-size:13px; color:var(--card-accent); }
.rm-talk:hover{ text-decoration:underline; }

/* M1 — the full-page open-chat surface (#rm-floor pattern: z58, UNDER the z60 loading) */
.rm-chat{ position:fixed; inset:0; z-index:58; background:var(--cream-bg); color:var(--ink-text);
  overflow-y:auto; -webkit-overflow-scrolling:touch; animation:rmFadeIn .2s ease; }
.rm-chat[hidden]{ display:none !important; }
.rm-chat-inner{ width:100%; max-width:460px; margin:0 auto; box-sizing:border-box;
  padding:54px 26px calc(24px + env(safe-area-inset-bottom,0px));   /* home-bar-safe input row */
  display:flex; flex-direction:column; min-height:100dvh; }
.rm-chat-back{ display:block; background:none; border:none; cursor:pointer; padding:0; margin:0 0 18px;
  text-align:left; font-family:var(--font-sans); font-size:14px; color:var(--card-accent); }
.rm-chat-eyebrow{ font-family:var(--font-sans); font-size:var(--eyebrow); font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--card-accent); margin:0 0 8px; }
.rm-chat-log{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column;
  gap:10px; padding:8px 0; }
.rm-chat-msg{ max-width:86%; padding:10px 14px; border-radius:16px; font-family:var(--font-sans);
  font-size:14.5px; line-height:1.45; }
.rm-chat-msg.mirror{ align-self:flex-start; background:var(--cream-raised); border:1px solid var(--hairline-ink); color:var(--ink-text); }
.rm-chat-msg.user{ align-self:flex-end; background:var(--accent); color:var(--on-accent); }
.rm-chat-msg.rm-chat-typing{ color:var(--muted-ink-3); animation:rmBreathe 1.6s ease-in-out infinite; }
.rm-chat-row{ display:flex; gap:8px; padding-top:10px; align-items:flex-end; }
.rm-chat-row input, .rm-chat-row textarea{ flex:1; box-sizing:border-box; border:1.5px solid var(--hairline-ink-12); border-radius:10px;
  padding:10px 12px; font-family:var(--font-sans); font-size:14px; color:var(--ink-text); background:var(--cream-raised); }
/* the chat box grows with the message (one-line-trap fix, 2026-07-27) */
.rm-chat-row textarea{ resize:none; overflow:hidden; line-height:1.45; max-height:180px; }
.rm-chat-row input:focus, .rm-chat-row textarea:focus{ outline:none; border-color:var(--card-accent); }
.rm-chat-row input::placeholder, .rm-chat-row textarea::placeholder{ color:var(--muted-ink); opacity:1; }
.rm-chat-row button{ border:none; border-radius:10px; padding:10px 15px; cursor:pointer; background:var(--attn);
  color:var(--on-attn); font-family:var(--font-sans); font-weight:700; font-size:13px; }
.rm-chat-row button[disabled]{ opacity:.4; cursor:default; }
.rm-chat-note{ margin:10px 0 0; text-align:center; font-family:var(--font-sans); font-size:12px;
  color:var(--muted-ink-3); }
/* F3: always-visible close (the founder was TRAPPED with the only exit off-screen) — sticky
   inside the scrolling column so it survives a scrolled log on both mobile and desktop. */
.rm-chat-close{ position:sticky; top:0; align-self:flex-end; z-index:2; margin:0 0 -26px;
  background:none; border:none; cursor:pointer; font-family:var(--font-sans); font-size:22px;
  line-height:1; color:var(--muted-ink); padding:4px 8px; }
.rm-chat-close:hover{ color:var(--ink-text); }
/* F3 (founder R2-#2 BLOCKER): the desktop chat card, placed AFTER the .rm-chat base rules so
   source order can never per-property clobber it again. The .rm-sheet wrapper pattern — a
   flex-centered child capped at 100% of a padded full-viewport backdrop — is geometrically
   incapable of leaving the screen at any viewport; the root doubles as the click-to-close
   backdrop (wired in wireChat). */
@media (min-width: 860px) {
  .rm-chat{ background:rgba(8,6,5,.58); display:flex; align-items:center; justify-content:center;
    padding:24px; overflow:hidden; }
  .rm-chat-inner{ background:var(--cream-bg); width:min(484px, 100%); max-width:none;
    height:min(88dvh, 880px); max-height:100%; min-height:0; border-radius:34px;
    box-shadow:0 50px 110px -38px rgba(0,0,0,.74); overflow-y:auto;
    padding:28px 26px 24px; }
}

/* M3 — the "what I see so far" strip (question screens only; JS pads the quiz
   bottom by calc(56px + safe-area) while shown so Skip/Continue stay reachable) */
.rm-strip{ position:fixed; left:0; right:0; bottom:var(--tabbar-h, 58px); z-index:45; border:none; cursor:pointer;
  background:var(--cream-raised); border-top:1px solid var(--hairline-ink); color:var(--card-accent);
  font-family:var(--font-sans); font-size:13px; font-weight:600; text-align:center;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px)); }
.rm-strip[hidden]{ display:none !important; }

/* M3 — the read sheet (scrim + ~70vh bottom card, scrollable; Close + tap-out).
   z59: above the strip/quiz and the z58 full-page surfaces, UNDER the z60 loading —
   the loading overlay must cover every surface (the surface-matrix rule). */
.rm-sheet{ position:fixed; inset:0; z-index:59; background:rgba(20,26,38,.45); display:flex;
  align-items:flex-end; justify-content:center; animation:rmFadeIn .19s ease; }
.rm-sheet[hidden]{ display:none !important; }
.rm-sheet-card{ width:100%; max-width:460px; box-sizing:border-box; background:var(--cream-bg); color:var(--ink-text);
  border-radius:22px 22px 0 0; padding:12px 22px calc(24px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -18px 50px -20px rgba(0,0,0,.4);
  height:70vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.rm-sheet-handle{ width:44px; height:4px; border-radius:var(--r-pill); background:var(--hairline-ink-20); margin:0 auto 6px; }
.rm-sheet-close{ display:block; margin:0 auto 8px; background:none; border:none; cursor:pointer;
  font-family:var(--font-sans); font-size:13px; color:var(--card-accent); }
.rm-sheet-eyebrow{ font-family:var(--font-sans); font-size:var(--eyebrow); font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--card-accent); margin:16px 0 8px; }
.rm-sheet-eyebrow-first{ margin-top:0; }
.rm-sheet-p{ font-family:var(--font-serif); font-size:15.5px; line-height:1.55; color:var(--ink-text); margin:0 0 4px; }
.rm-sheet-sec{ font-family:var(--font-sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--card-accent); margin:16px 0 6px; }
.rm-sheet-nq{ display:block; background:none; border:none; padding:0; margin:0 0 14px; cursor:pointer;
  font-family:var(--font-sans); font-size:12px; color:var(--muted-ink); text-decoration:underline dotted; }
.rm-sheet-nq:hover{ color:var(--attn-text); }
.rm-sheet-fixwrap .rm-fix-row{ margin:0 0 14px; }
.rm-sheet-noted{ margin:0 0 14px; font-family:var(--font-sans); font-size:12px; color:var(--muted-ink); }
.rm-sheet-dims{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
/* Return-link affordance: a Copy button is the primary action; the raw URL sits below,
   smaller + muted, still selectable as a fallback (was the bare URL as the only element). */
.rm-sheet-copy{ display:inline-block; margin-top:2px; padding:8px 16px; cursor:pointer;
  font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--ink-text);
  background:var(--func-clickable); border:1px solid var(--hairline-ink-20); border-radius:var(--r-pill); }
.rm-sheet-copy:hover{ border-color:var(--ink-text); }
.rm-sheet-return{ display:block; font-family:var(--font-sans); font-size:11px; color:var(--muted-ink-3);
  word-break:break-all; -webkit-user-select:all; user-select:all; margin-top:6px; }
/* the possibilities fragment (its own styles ship with the classic tab include —
   restated here so the fragment reads correctly inside the sheet) */
.rm-sheet-poss .poss-intro{ font-family:var(--font-sans); font-size:12.5px; line-height:1.5;
  color:var(--muted-ink); margin:0 0 10px; }
.rm-sheet-poss .poss-card{ border:1px solid var(--hairline-ink-12); border-radius:10px;
  padding:10px 12px; margin:8px 0; background:var(--cream-raised); }
.rm-sheet-poss .poss-card > summary.poss-card-head{ list-style:none; cursor:pointer; }
.rm-sheet-poss .poss-card > summary.poss-card-head::-webkit-details-marker{ display:none; }
.rm-sheet-poss .poss-card-head{ display:flex; flex-direction:column; gap:3px; }
.rm-sheet-poss .poss-card-headrow{ display:flex; align-items:center; gap:8px; }
.rm-sheet-poss .poss-handle{ font-family:var(--font-sans); font-weight:600; font-size:14px;
  color:var(--ink-text); margin-right:auto; }
.rm-sheet-poss .poss-expand{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto;
  font-family:var(--font-sans); font-size:11px; color:var(--muted-ink-3);
  border:1px solid var(--hairline-ink-20); border-radius:6px; padding:1px 7px; white-space:nowrap; }
.rm-sheet-poss .poss-card[open] > .poss-card-head .poss-expand-txt{ display:none; }
.rm-sheet-poss .poss-card[open] > .poss-card-head .poss-teaser{ display:none; }
.rm-sheet-poss .poss-teaser{ font-family:var(--font-sans); font-size:12px; line-height:1.4;
  color:var(--muted-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rm-sheet-poss .poss-sketch{ font-family:var(--font-serif); font-style:italic; font-size:14px;
  line-height:1.5; color:var(--muted-ink-4); margin:8px 0 0; }
.rm-sheet-poss .poss-empty{ font-family:var(--font-serif); font-style:italic; font-size:13.5px;
  color:var(--muted-ink-3); }

/* AGE FLOOR (2026-07-09): the kind full-stop card. */
.rm-agegate{ max-width:520px; margin:16vh auto 0; padding:26px 24px; border-radius:16px;
  background:var(--card-bg, #fff); box-shadow:0 2px 14px rgba(20,30,45,.10); }
.rm-agegate-msg{ margin:0; font-family:var(--font-serif, Georgia, serif); font-size:17px;
  line-height:1.65; color:var(--text-main, #1c2331); }

/* Ending-copy wave (2026-07-09): continuity subline + the Advisor next-step chip. */
.rm-savesheet .save-sub{ margin:-6px 0 10px; font-family:var(--font-sans); font-size:12px;
  color:var(--text-cream-50); }
.rm-nextsess-chip.rm-nextsess-adv{ border-style:dashed; }

/* SCRATCHPAD reveal (latency lab 2026-07-10, founder design): the first-seen deck is the
   scratchpad read with an honest integration meter; the final synthesis lands as visible
   sharpening (lineage + fresh highlights + the dealt cards). */
.scratch-meter{ margin:14px 0 4px; }
.scratch-meter .scratch-line{ margin-bottom:9px; font-family:var(--font-sans);
  font-size:14px; line-height:1.45; color:var(--text-cream); }
.scratch-meter .scratch-count{ font-size:16px; font-weight:700;
  color:var(--amber, #e8b566); white-space:nowrap; }
.scratch-meter .scratch-dot{ display:inline-block; width:8px; height:8px;
  border-radius:50%; background:var(--amber, #e8b566); margin-right:8px;
  vertical-align:1px; animation:rmBreathe 1.8s ease-in-out infinite; }
.scratch-meter .stat-track{ max-width:300px; margin:0 auto; height:6px; }
.scratch-meter .stat-bar{ transition:width .9s var(--ease-spring, ease); }
.scratch-meter .scratch-sub, .card-calib.scratch-sub{ margin-top:7px;
  font-family:var(--font-sans); font-size:12px; color:var(--text-cream-50); }
.scratch-meter.as-head{ margin:0 0 14px; }
.scratch-meter.as-head .scratch-line{ font-size:14px; margin-bottom:9px; }
.scratch-meter.as-head .stat-track{ max-width:260px; }
.scratch-ticks{ display:flex; gap:5px; justify-content:center; margin-top:8px; }
/* C9 (Epoch 2): the ticks + activity line are the layer that MOVES between overview
   commits — made a touch more visible so honest motion reads (founder #19). */
.scratch-tick{ width:16px; height:5px; border-radius:2.5px;
  background:color-mix(in srgb, var(--amber, #e8b566) 22%, transparent);
  transition:background .5s ease; }
.scratch-tick.done{ background:var(--amber, #e8b566); }
.scratch-activity{ margin-top:7px; font-family:var(--font-sans); font-size:12.5px;
  color:var(--text-cream-72, var(--text-cream-50)); min-height:16px; }
.scratch-meter.working .stat-bar{ position:relative; overflow:hidden; }
.scratch-meter.working .stat-bar::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  animation:rmShimmer 1.6s linear infinite; }
.card-lineage{ margin:8px 0 6px; font-family:var(--font-sans); font-size:12px;
  /* was margin-top:-4px — the 54px/0.98 archetype name's descenders kissed this line
     (the last text-collision-audit hit on the deck, F-batch 2026-07-15) */
  color:var(--text-cream-50); text-decoration:line-through; opacity:.7;
  animation:rmFadeIn .8s ease; }
.card-forming .inner{ opacity:.92; }
.card-forming .card-label{ animation:rmBreathe 2.4s ease-in-out infinite; }
.fresh-swap{ animation:rmFreshIn 2s ease; border-radius:6px; }
@keyframes rmFreshIn{
  0%{ background:rgba(255,205,120,.28); }
  100%{ background:transparent; } }
@media (prefers-reduced-motion: reduce){
  .fresh-swap, .card-lineage, .card-forming .card-label, .scratch-meter .scratch-dot{ animation:none; }
  .scratch-meter.working .stat-bar::after{ animation:none; }
  .scratch-meter .stat-bar{ transition:none; } }

/* ============================== F-batch (2026-07-15) ==============================
   F1/F4/F5 global fixes — appended so they win by source order at equal specificity. */

/* F1 (founder R1-#1 "pinch to fit"): iOS Safari auto-zooms on focusing ANY sub-16px input and
   the zoom PERSISTS across every later screen of the SPA. 16px is the exact no-zoom threshold;
   scoped to the mobile breakpoint so the desktop type scale is untouched. (The viewport meta is
   correct and no structural >390px element exists — this was the confirmed mechanism.) */
@media (max-width: 859px) {
  .media-search input, .rm-chat-row input, .rm-chat-row textarea, .rm-else, .rm-fix-input, .rm-nextsess-input {
    font-size: 16px;
  }
}
/* F1 belt-and-suspenders: content-driven overflow (a long unbroken word in LLM prose) must
   never widen the document. Safe: the one sticky element in this file (.rm-chat-close)
   resolves against .rm-chat/.rm-chat-inner, not the viewport, and body-level overflow-x
   propagates to the viewport (html sets no overflow), so body's used overflow stays visible;
   the only horizontal mechanism (the reveal track) is a transform inside a fixed
   overflow:hidden viewport. */
body.rm-body, body.rm-landing-body { overflow-x: hidden; }

/* F4: sub-100ms tactile floor on the async controls (there were ZERO :active rules). */
.btn-save:active, .btn-secondary:active, .save-google-primary:active, .rm-nextsess-chip:active {
  transform: translateY(1px); filter: brightness(.94);
}

/* F5: the persistent signed-in chip beside the progress count (the Session-N chip's home). */
.rm-signed-chip{ font-family:var(--font-sans); font-size:11px; font-weight:700;
  color:var(--forest-accent, #2E7D5B); border:1px solid var(--muted-ink-5); border-radius:999px;
  padding:2px 7px; margin-right:6px; vertical-align:1px; white-space:nowrap; }

/* F5: the landing acknowledgment where the sign-in ask sat (same quiet register, not a link —
   the landing card is dark, so it takes the sign-in line's cream). */
.rm-signedin-ack{ font-family:var(--font-sans); font-size:13px; color:var(--text-cream-72); }

/* F4: navigation-pending state for sign-in anchors (class added on click, never preventDefault).
   Namespaced rm- (diff-review fix): a bare .working collided with the scratch meter's
   pre-existing `working` state class, dimming the live integration meter mid-run. */
.rm-navworking{ opacity:.6; pointer-events:none; }

/* ============================== Sitting batch Track 3 (2026-07-16) ============================== */
/* Decision 1 (C): the escape row's contract line — quiet, under the chips. */
.rm-redirect-note{ margin:6px 0 0; font-family:var(--font-sans); font-size:11px; font-style:italic;
  color:var(--muted-ink-3); }
/* Decision 3 (B): the session-2 tease at the commitment point (share card, above Save). */
.rm-save-tease{ margin:0 0 12px; padding:8px 12px; border:1px solid var(--hairline-ink-20);
  border-radius:10px; font-family:var(--font-sans); font-size:12.5px; line-height:1.5;
  color:var(--text-cream-72, inherit); opacity:.92; }

/* ============================== Track 1 — the one-loop floor thread (2026-07-16) ========== */
.rm-floor-log{ display:flex; flex-direction:column; gap:8px; margin:0 0 12px; max-height:44vh;
  overflow-y:auto; -webkit-overflow-scrolling:touch; }
.rm-floor-log[hidden]{ display:none !important; }
.rm-floor-msg{ max-width:88%; padding:9px 13px; border-radius:14px; font-family:var(--font-sans);
  font-size:14.5px; line-height:1.45; }
.rm-floor-msg.user{ align-self:flex-end; background:var(--accent); color:var(--on-accent); }
.rm-floor-msg.mirror{ align-self:flex-start; background:var(--cream-raised);
  border:1px solid var(--hairline-ink); color:var(--ink-text); }
.rm-floor-msg.rm-floor-typing{ color:var(--muted-ink-3); animation:rmBreathe 1.6s ease-in-out infinite; }
.rm-floor-offer{ display:flex; gap:8px; margin:2px 0 0 0; }
.rm-floor-offer-btn{ border:1.5px solid var(--hairline-ink-20); background:var(--cream-raised);
  border-radius:999px; padding:7px 14px; cursor:pointer; font-family:var(--font-sans);
  font-size:13px; color:var(--ink-text); }
.rm-floor-offer-stay{ border-color:var(--card-accent); color:var(--card-accent); }
.rm-floor-handback{ display:block; margin:10px 0 0; background:none; border:none; padding:0;
  cursor:pointer; text-align:left; font-family:var(--font-sans); font-size:13px;
  color:var(--card-accent); }
.rm-floor-handback:hover{ text-decoration:underline; }

/* ============================== P1 round-wave (2026-07-16) ==============================
   Founder-round pass 1 — floor wait liveness (P1-6), interim in-viewport exit (P1-8),
   grid-tail search tile (P1-7b), ending map v0 (P1-13). Appended to win at equal
   specificity by source order. */
/* P1-6: the wait indicator must CARRY the screen — bigger, readable, breathing; the
   stage-line text changes are the reduced-motion liveness signal (global animation kill). */
.rm-floor-msg.rm-floor-typing{ color:inherit; opacity:.85; font-size:15px;
  padding:11px 16px; letter-spacing:.06em; animation:rmBreathe 1.6s ease-in-out infinite; }
/* Send morphs to "listening…" — alive, never the dead grey of :disabled. */
.btn-continue.rm-floor-listening:disabled{ opacity:1; background:var(--cream-raised);
  color:var(--muted-ink-3); animation:rmBreathe 1.6s ease-in-out infinite; cursor:default; }
/* P1-8: an interrupting overlay's only exit must never sit below the fold — sticky foot
   inside the scrolling interim (short-viewport case; tall phones unchanged). */
.interim-foot{ position:sticky; bottom:0; padding-bottom:14px;
  background:linear-gradient(to top, var(--plum-3) 60%, transparent); }
/* P1-7b: the grid-tail search tile — the none-of-these out where scanning ends. */
.media-search-tile{ display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; min-height:120px; border:1.5px dashed var(--hairline-ink);
  border-radius:10px; background:transparent; cursor:pointer; }
.media-search-tile-t{ font-family:var(--font-sans); font-size:13.5px; font-weight:600; }
.media-search-tile-s{ font-family:var(--font-sans); font-size:12.5px; color:var(--muted-ink-3); }
/* P1-13: the ending's compact "what's here now" map (v0). */
.rm-endmap{ margin-top:22px; padding-top:16px; border-top:1px solid var(--hairline-ink);
  text-align:left; }
.rm-endmap-head{ font-family:var(--font-sans); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 8px; opacity:.75; }
.rm-endmap-item{ display:block; font-family:var(--font-sans); font-size:14px; padding:7px 0;
  text-decoration:none; color:inherit; border-bottom:1px dashed var(--hairline-ink); }
.rm-endmap-item:last-child{ border-bottom:none; }
.rm-endmap-item:hover{ text-decoration:underline; text-underline-offset:3px; }

/* P2-B (overnight 2026-07-17): the interim is a passing beat — staging matched to its
   weight (one notch below the question, no longer display-scale on a thin read). */
.interim-read{ font-size:24px; }
.interim-eyebrow::after{ content:" · a quick pause"; letter-spacing:normal; text-transform:none; opacity:.7; }
/* F3b: the off-the-record toggle in the chat note. */
.rm-chat-otr{ background:none; border:none; padding:0; margin-left:6px; cursor:pointer;
  font-family:var(--font-sans); font-size:12px; color:var(--card-accent);
  text-decoration:underline; text-underline-offset:2px; }
/* P2-J: the referent chip — a tiny persistent anchor while a picked work is the thread. */
.rm-anchor-chip{ display:flex; align-items:center; gap:7px; margin:0 0 7px;
  font-family:var(--font-sans); font-size:12.5px; color:var(--muted-ink-3); }
.rm-anchor-chip img{ width:18px; height:26px; object-fit:cover; border-radius:3px; }

/* Q&A batch (2026-07-17) — the founder's question round, low-risk fixes. */
/* #6: reserve the fixed strip's height on the question screen's scroll flow, so the
   last content (the escapes note) can never end up under the strip regardless of how
   tall a question renders. The clearance was previously incidental. */
#rm-quiz{ padding-bottom:56px; }
/* #10a: the lineage line decays after the settle beat (JS adds the class at ~12s). */
.card-lineage.lineage-decay{ opacity:0; transition:opacity .9s ease; }


/* ===== B1 (bug batch 2026-07-28): tab-bar clearance tokens ==========================
   One source of truth for "how much room the fixed five-tabs bar needs".
   --tabbar-h    = the bar's own height band (bottom-anchored siblings sit above it)
   --tabbar-clearance = content padding so the last control clears the bar.
   The bar itself HIDES while a modal overlay (review/interim/reveal/floor/chat/sheet)
   is up — modality beats chrome — see stripUpdate() in reimagine.js. These paddings
   are the fallback so nothing is buried even if an overlay shows with the bar up. */
:root { --tabbar-h: 58px; --tabbar-clearance: 88px; }
.rm-sheet-card{ padding-bottom: calc(24px + var(--tabbar-h)); }
.rm-review-inner{ padding-bottom: calc(40px + var(--tabbar-h)); }
.interim-foot{ padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }


/* ===== Option A tester door (2026-08-05): the email form on the gate ============== */
.rm-gate-email{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.rm-gate-email-lead{ margin:2px 0; text-align:center; font-size:12px; color:var(--muted-ink-3);
  letter-spacing:.04em; }
.rm-gate-email input{ box-sizing:border-box; width:100%; border:1.5px solid var(--hairline-ink-12);
  border-radius:10px; padding:11px 12px; font-family:var(--font-sans); font-size:16px;
  color:var(--ink-text); background:var(--cream-raised); }
.rm-gate-email input:focus{ outline:none; border-color:var(--card-accent); }
.rm-gate-btn-email[disabled]{ opacity:.5; }
.rm-gate-email-err{ margin:0; font-size:12.5px; color:#a33f2e; text-align:center; }


/* ===== THE WAIT: the writing desk (W1+W2, 2026-08-06) ============================== */
.rm-wdesk{ width:min(360px, 84vw); margin-top:26px; }
.rm-wrow{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:7px 2px; border-bottom:1px solid var(--hairline-ink-12); font-family:var(--font-sans);
  font-size:13.5px; color:var(--muted-ink-3); transition:color .4s ease; }
.rm-wrow.done{ color:var(--ink-text); }
.rm-wrow .wtick{ color:#3E9463; font-size:12.5px; opacity:0; transition:opacity .4s ease; }
.rm-wrow.done .wtick{ opacity:1; }
.rm-wrow.writing .wtick{ opacity:1; color:var(--muted-ink-3); }
.rm-wfirst{ margin:20px 2px 0; font-size:16.5px; line-height:1.55; color:var(--ink-text);
  opacity:0; transition:opacity .9s ease; }
.rm-wfirst.show{ opacity:1; }
@media (prefers-reduced-motion: reduce) {
  .rm-wrow, .rm-wrow .wtick, .rm-wfirst { transition:none; }
}