/* ============================================================
   Vora V2 — "Editorial" (Swiss typographic × Garamond voice)
   All color lives in the shader plates. Chrome is paper + ink
   + hairlines. No grey slabs. No gradient UI fills.
   ============================================================ */

:root {
  --paper:   #FBF8F3;         /* V3: warmed one step toward Hermès */
  --ink:     #141210;         /* V3: brutalist conviction for display type */
  --char:    #313131;         /* V3: Aman charcoal for secondary text */
  --block:   #2B2724;         /* V3: square button fill */
  --hearth:  #161310;
  --cream:   #EFE7DC;

  /* the signature: hairlines structure everything */
  --rule:      rgba(28,26,23,.14);
  --rule-soft: rgba(28,26,23,.07);
  --cream-rule: rgba(239,231,220,.16);

  /* the one chromatic thread — used ONLY on the boundary sweep + crossing hairline */
  --thread: linear-gradient(90deg,#A9C6E3,#C5BFDF,#E9C9D2,#CBBFDF);

  --radius-plate: 10px;
  --radius-hero: 12px;
  --radius-sheet: 30px;
  --radius-pill: 999px;

  --sab: env(safe-area-inset-bottom, 0px);
  --sat: env(safe-area-inset-top, 0px);

  --ease-screen: cubic-bezier(.22,.61,0,1);
  --ease-sheet:  cubic-bezier(.34,1.18,.42,1);

  --ink-92: rgba(20,18,16,.92);
  --ink-82: rgba(20,18,16,.82);
  --ink-70: rgba(20,18,16,.70);
  --ink-60: rgba(20,18,16,.60);
  --ink-55: rgba(20,18,16,.55);
  --ink-50: rgba(20,18,16,.50);
  --ink-45: rgba(20,18,16,.45);
  --ink-40: rgba(20,18,16,.40);
  --ink-35: rgba(20,18,16,.35);
  --ink-25: rgba(20,18,16,.25);
  --ink-32: rgba(20,18,16,.32);

  --cream-88: rgba(239,231,220,.88);
  --cream-80: rgba(239,231,220,.80);
  --cream-70: rgba(239,231,220,.70);
  --cream-55: rgba(239,231,220,.55);
  --cream-45: rgba(239,231,220,.45);
  --cream-10: rgba(239,231,220,.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #E9E6E0;
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

/* ---------- Stage / phone shell ---------- */
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--paper); }
#app { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--paper); }

@media (min-width: 520px) {
  #stage { background: #E9E6E0; }
  #app {
    width: 390px; height: 844px; border-radius: 44px;
    box-shadow: 0 40px 90px rgba(28,26,23,.26), 0 8px 24px rgba(28,26,23,.12);
    overflow: hidden;
  }
}

/* ambient kept as a no-op paper wash (color now lives in plates) */
.ambient { display: none; }

/* ============================================================
   Router / screens
   ============================================================ */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden; background: var(--paper); z-index: 1;
}
.screen.dark { background: var(--hearth); color: var(--cream); }
.screen .scroll {
  position: relative; z-index: 2;
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
  padding: calc(var(--sat) + 16px) 24px calc(var(--sab) + 24px);
}
.screen .scroll::-webkit-scrollbar { display: none; }

/* top fade mask so content dissolves before the boundary row */
.screen::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: calc(var(--sat) + 40px); z-index: 20; pointer-events: none;
  background: linear-gradient(to bottom, var(--paper) 40%, rgba(250,249,246,0));
}
.screen.dark::before { background: linear-gradient(to bottom, var(--hearth) 40%, rgba(22,19,16,0)); }
.screen.messages::before { background: linear-gradient(to bottom, #fff 40%, rgba(255,255,255,0)); }

/* transitions (transform/opacity only) */
.scr-enter-push   { animation: pushIn 460ms var(--ease-screen) both; }
.scr-exit-push    { animation: pushOutBack 460ms var(--ease-screen) both; }
.scr-enter-back   { animation: pushInBack 460ms var(--ease-screen) both; }
.scr-exit-back    { animation: pushOut 460ms var(--ease-screen) both; }
.scr-enter-fade   { animation: fadeScale 420ms var(--ease-screen) both; }
.scr-exit-fade    { animation: fadeOut 300ms ease both; }
@keyframes pushIn      { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pushOutBack { from { transform: translateX(0); } to { transform: translateX(-22px); opacity:.55; } }
@keyframes pushInBack  { from { transform: translateX(-22px); opacity:.55; } to { transform: translateX(0); opacity:1; } }
@keyframes pushOut     { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes fadeScale   { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeOut     { from { opacity: 1; } to { opacity: 0; } }

/* ============================================================
   Glass — ONLY on sheets (flawless, no white-border glow)
   ============================================================ */
.glass {
  background: rgba(250,249,246,.72);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--rule);
}
.glass-dark {
  background: rgba(22,19,16,.62);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--cream-rule);
}

/* ============================================================
   The plates
   ============================================================ */
.plate-frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius-plate);
  background: #cfc9d6;                 /* until the shader paints */
  box-shadow: inset 0 0 0 1px rgba(28,26,23,.06);
}
.plate-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plate-cap { margin-top: 9px; }
.plate-cap .t { font-family: 'Inter'; font-weight: 500; font-size: 12px; color: var(--ink-82); letter-spacing: .1px; }
.plate-cap .d { font-size: 12px; color: var(--ink-45); margin-top: 2px; line-height: 1.35; }

/* ============================================================
   Boundary line (was: the capsule)
   typographic status row + full-width hairline that lights up
   ============================================================ */
.capsule {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 30; padding-top: calc(var(--sat) + 16px);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  pointer-events: none; background: transparent; transition: none;
}
.capsule .bstatus {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Inter'; font-weight: 600; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink-45);
  transition: color 400ms ease;
}
.capsule .bstatus svg { width: 12px; height: 12px; flex: none; opacity: .8; }
.capsule .brule {
  position: relative; width: 100%; height: 1px; background: var(--rule);
  overflow: hidden;
}
.capsule .bsweep {
  position: absolute; top: 0; left: 0; height: 100%; width: 42%;
  background: var(--thread); opacity: 0;
  transform: translateX(-120%);
}
.capsule.crossing .bstatus { color: var(--ink-82); }
.capsule.crossing .bsweep { opacity: 1; animation: bsweep 1.15s var(--ease-screen) infinite; }
@keyframes bsweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(240%); }
}
.capsule.dark .bstatus { color: var(--cream-55); }
.capsule.dark .brule { background: var(--cream-rule); }

/* the plate "becomes" the boundary — a 2px gradient sliver under the rule */
.plate-sliver {
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 29;
  opacity: 0; transition: opacity 300ms ease;
}

/* back affordance — top-left chevron everywhere */
.backbtn, .flows-chip {
  position: absolute; top: calc(var(--sat) + 10px); left: 12px; z-index: 33;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-55); background: transparent; box-shadow: none; border: none;
}
.backbtn svg, .flows-chip svg { width: 20px; height: 20px; }
.flows-chip span { display: none; }
.screen.dark .backbtn { color: var(--cream-55); }

/* ============================================================
   Typography
   ============================================================ */
.serif { font-family: 'EB Garamond', Georgia, serif; }
.num { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; letter-spacing: .2px; }
.microlabel {
  font-family: 'Inter'; font-weight: 600; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink-45);
}
.kicker {
  font-family: 'Inter'; font-weight: 600; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink-82);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: var(--radius-pill);
  font-size: 16px; font-weight: 500; letter-spacing: .1px;
  transition: transform 120ms ease, opacity 200ms ease;
  width: 100%;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(.98); }
.btn-ink { background: var(--ink); color: var(--paper); }

/* secondary = text button */
.btn-glass, .btn-quiet { color: var(--ink-55); min-height: 46px; background: none; box-shadow: none; }
.btn-glass { color: var(--ink-82); }
.btn[disabled] { pointer-events: none; }
.btn-ink[disabled] { background: rgba(28,26,23,.09); color: rgba(28,26,23,.32); }

.btn-cream { background: var(--cream); color: var(--hearth); }
.btn-quiet-cream { color: var(--cream-70); min-height: 46px; background: none; }

/* crossing button = ink pill + 1.5px live gradient hairline along the bottom edge */
.btn-crossing {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper);
}
.btn-crossing::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 1.5px;
  background: var(--thread); background-size: 220% 100%;
  opacity: var(--wash, .9); border-radius: 2px;
  animation: threadShimmer 2.6s linear infinite;
}
@keyframes threadShimmer { from { background-position: 0 0; } to { background-position: 220% 0; } }

/* outline button */
.btn-outline { border: 1px solid var(--ink); color: var(--ink-92); background: none; }

/* small chip / inline text options */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 4px;
  font-size: 15px; font-weight: 400; color: var(--ink-70);
  font-family: 'EB Garamond', serif;
  transition: color 160ms ease, transform 120ms ease; background: none !important;
}
.chip:active { transform: scale(.97); }

/* ============================================================
   Editorial lists — hairline-ruled rows on paper (no slabs)
   ============================================================ */
.card {
  background: none; border-radius: 0; box-shadow: none;
  padding: 4px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.card.glass { background: none; border: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 16px 0; }
.card-tap { transition: opacity 160ms ease; }
.card-tap:active { opacity: .55; }

/* list rows: content + right value + hairline */
.row { display: flex; align-items: center; gap: 12px; }
.row + .row { border-top: 1px solid var(--rule); }
.rowpad { padding: 14px 0; }
.leadglyph { width: 20px; height: 20px; flex: none; color: var(--ink-55); }
.leadglyph.aur { color: var(--ink-82); }
.livedot { width: 6px; height: 6px; border-radius: 50%; background: transparent; position: relative; flex: none; }
.livedot::after { content:''; position:absolute; inset:-1px; border-radius:50%; background: var(--thread); }
.stamp { font-family: 'Inter'; font-weight: 600; font-size: 9.5px; letter-spacing: .8px; color: var(--ink-32); text-transform: uppercase; }

/* trace / "how I got here" — hairline rule, no grey inset */
.inset { background: none; border-radius: 0; padding: 0; border-top: 1px solid var(--rule); }

/* staggered entrance */
.rise { opacity: 0; transform: translateY(10px); }
.rise.in { animation: rise 420ms var(--ease-screen) forwards; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   Chat / guardian
   ============================================================ */
.guardian { font-family: 'EB Garamond', Georgia, serif; font-size: 19px; line-height: 1.5; color: var(--ink-82); }
.guardian.big { font-weight: 500; font-size: 30px; line-height: 1.12; color: var(--ink-92); }
.guardian p { margin-bottom: 14px; }
.guardian p:last-child { margin-bottom: 0; }
.dark .guardian { color: var(--cream-88); font-size: 19.5px; }

.userbubble {
  align-self: flex-end; max-width: 82%;
  background: var(--ink); color: var(--paper);
  font-size: 15px; line-height: 1.4;
  padding: 11px 16px; border-radius: 18px 18px 5px 18px;
}
.dark .userbubble { background: var(--cream-10); color: var(--cream); }

.thinking { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; }
.thinking svg { width: 14px; height: 14px; color: var(--ink-55); }
.thinking .shimmer {
  background: linear-gradient(90deg, var(--ink-45) 0%, var(--ink-45) 35%, var(--ink-82) 50%, var(--ink-45) 65%, var(--ink-45) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 1.8s linear infinite;
}
.dark .thinking .shimmer {
  background: linear-gradient(90deg, var(--cream-45) 0%, var(--cream-45) 35%, var(--cream-88) 50%, var(--cream-45) 65%, var(--cream-45) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.word { opacity: 0; animation: wordin 240ms ease forwards; }
@keyframes wordin { to { opacity: 1; } }

/* ============================================================
   Composer — hairline-ruled field (no rounded slab)
   ============================================================ */
.composer {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; margin-top: 4px;
  border: none !important; border-bottom: 1px solid var(--rule) !important; border-radius: 0 !important;
  background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.dark .composer { border-bottom: 1px solid var(--cream-rule) !important; }
.composer input { flex: 1; border: none; background: none; outline: none; font-family: 'Inter'; font-size: 16px; color: var(--ink); min-height: 40px; }
.composer input::placeholder { font-family: 'EB Garamond', serif; font-style: italic; font-size: 18px; color: var(--ink-45); }
.composer .send {
  width: 40px; height: 40px; border-radius: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--block); color: var(--paper); transition: transform 120ms ease;
}
.composer .send:active { transform: scale(.94); }
.composer .send svg { width: 18px; height: 18px; }
.dark .composer input { color: var(--cream); }
.dark .composer input::placeholder { color: var(--cream-45); }
.dark .composer .send { background: var(--cream); color: var(--hearth); }

/* ============================================================
   Sheets (glass, hairline-ruled interior)
   ============================================================ */
.scrim { position: absolute; inset: 0; z-index: 40; background: rgba(28,26,23,.30); opacity: 0; animation: fadeIn 300ms ease forwards; }
.scrim.dark-scrim { background: rgba(8,6,5,.55); }
@keyframes fadeIn { to { opacity: 1; } }
.scrim.out { animation: fadeOut 280ms ease forwards; }

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 41;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 12px 24px calc(var(--sab) + 22px);
  max-height: 92%; overflow-y: auto;
  animation: sheetUp 480ms var(--ease-sheet) both;
}
.sheet::-webkit-scrollbar { display: none; }
.sheet.dark-sheet { color: var(--cream); }
.sheet.out { animation: sheetDown 320ms var(--ease-screen) both; }
@keyframes sheetUp   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheetDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
.grabber { width: 38px; height: 4px; border-radius: 3px; background: var(--ink-25); margin: 0 auto 18px; }
.dark-sheet .grabber { background: var(--cream-45); }

/* ============================================================
   Segmented control -> three text options + sliding underline
   ============================================================ */
.segmented { position: relative; display: flex; background: none; padding: 0; border-bottom: 1px solid var(--rule); }
.segmented .thumb {
  position: absolute; bottom: -1px; height: 1.5px; background: var(--ink);
  transition: transform 340ms var(--ease-sheet), width 340ms var(--ease-sheet); z-index: 1;
}
.segmented button {
  position: relative; z-index: 0; flex: 1;
  min-height: 44px; font-size: 15px; font-weight: 500; font-family: 'EB Garamond', serif;
  color: var(--ink-45); transition: color 300ms ease;
}
.segmented button.on { color: var(--ink-92); }

/* toggles — iOS-grade, 44x26, ink track */
.toggle-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; }
.toggle-row .txt { flex: 1; }
.toggle-row .txt .t { font-size: 14.5px; font-weight: 500; }
.toggle-row .txt .s { font-size: 12px; color: var(--ink-45); margin-top: 2px; }
.toggle { flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--ink-25); position: relative; transition: background 260ms ease; margin-top: 2px; }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(28,26,23,.3); transition: transform 260ms var(--ease-sheet); }
.toggle.on { background: var(--ink); }
.toggle.on .knob { transform: translateX(18px); }

/* ============================================================
   Rings / marks
   ============================================================ */
.glow { display: none; }
.sweep { display: none; }
.aflash { animation: aflash 1.6s ease-out; }
@keyframes aflash {
  0% { background: rgba(169,198,227,0); }
  16% { background: rgba(169,198,227,.24); }
  100% { background: rgba(169,198,227,0); }
}

.pawstamp { width: 26px; height: 26px; color: var(--ink-55); }
.draftcard { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.draftcard + .draftcard { border-top: 1px solid var(--rule); }
.draftcard .tick { width: 20px; height: 20px; color: var(--ink); opacity: 0; transition: opacity 300ms ease; }
.draftcard .tick.in { opacity: 1; }

/* tab bar — hairline top, text + glyph, no glass pill */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; padding: 10px 24px calc(var(--sab) + 12px);
  border-top: 1px solid var(--rule);
  background: linear-gradient(to top, var(--paper) 70%, rgba(250,249,246,0));
  backdrop-filter: none;
}
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; justify-content: center; font-size: 10px; font-weight: 500; letter-spacing: .3px; color: var(--ink-40); text-transform: uppercase; }
.tabbar button svg { width: 19px; height: 19px; }
.tabbar button.active { color: var(--ink-92); }

/* toast */
.toast {
  position: absolute; left: 50%; bottom: calc(var(--sab) + 96px);
  transform: translateX(-50%) translateY(10px); z-index: 60;
  padding: 12px 20px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500; color: var(--ink-82);
  background: rgba(250,249,246,.82); border: 1px solid var(--rule);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  opacity: 0; animation: toastIn 240ms ease forwards; max-width: 84%; text-align: center;
}
.toast.dark-toast { color: var(--cream-88); background: rgba(22,19,16,.7); border-color: var(--cream-rule); }
@keyframes toastIn { to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.toast.out { animation: toastOut 260ms ease forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(-50%) translateY(8px); } }

/* ============================================================
   Launcher — the 2x2 plate grid
   ============================================================ */
.lch-top { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.lch-top .wm { font-family: 'Inter'; font-weight: 600; font-size: 12px; letter-spacing: 2px; color: var(--ink-92); }
.lch-top .rt { font-family: 'Inter'; font-weight: 600; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-40); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.tile { text-align: left; width: 100%; background: none; padding: 0; }
.tile .plate-frame { aspect-ratio: 3 / 4; width: 100%; }
.tile-cap { margin-top: 9px; }
.tile-cap .t { font-family: 'Inter'; font-weight: 500; font-size: 12px; color: var(--ink-82); letter-spacing: .1px; }
.tile-cap .d { font-size: 11.5px; color: var(--ink-45); margin-top: 2px; line-height: 1.3; }
.lch-foot { margin-top: auto; padding-top: 22px; }
.lch-foot .r { height: 1px; background: var(--rule); }
.lch-foot .l { text-align: center; font-size: 12px; color: var(--ink-45); margin-top: 14px; }

/* ============================================================
   Cover (plate hero + title + first CTA on paper)
   ============================================================ */
.cover { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 2; }
.cover-hero { position: relative; width: 100%; height: 62%; flex: none; }
.cover-title { position: absolute; left: 24px; bottom: 22px; right: 24px; z-index: 2; }
.cover-title .n { font-family: 'Inter'; font-weight: 600; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; }
.cover-title .h { font-family: 'EB Garamond', serif; font-weight: 500; font-size: 42px; line-height: 1.02; margin-top: 6px; }
.cover-title.ink .n { color: var(--ink-55); } .cover-title.ink .h { color: var(--ink); }
.cover-title.cream .n { color: var(--cream-70); } .cover-title.cream .h { color: var(--cream); }
.cover-title .mask { overflow: hidden; }
.cover-title .mask .h { transform: translateY(105%); }
.cover-body { flex: 1; padding: 26px 24px calc(var(--sab) + 24px); display: flex; flex-direction: column; background: var(--paper); }

/* the morph plate overlay — above screens, below the cover title + boundary */
.morph-plate {
  position: absolute; z-index: 2; overflow: hidden; will-change: transform;
  transform-origin: 0 0; pointer-events: none;
}

/* cover-layer: transparent so the morph plate shows through the hero region */
.cover-layer { z-index: 3; background: transparent; }
.cover-layer::before { display: none; }

/* ============================================================
   Flow 1 specifics
   ============================================================ */
.centerstack { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; position: relative; z-index: 2; }

/* naming field: single EBG input, 1px bottom rule only */
.nameField {
  width: 100%; background: none; border: none; border-bottom: 1.5px solid var(--rule);
  border-radius: 0; padding: 10px 2px;
  font-family: 'EB Garamond', serif; font-weight: 500; font-size: 30px;
  color: var(--ink); outline: none; transition: border-color 220ms ease;
}
.nameField::placeholder { color: var(--ink-35); }
.nameField:focus { border-color: var(--ink); }

.ceremonyWrap { position: relative; width: 216px; height: 216px; display:flex; align-items:center; justify-content:center; }

/* ============================================================
   Flow 4 · Messages mock (stays iOS-plain, another world)
   ============================================================ */
.screen.messages { background: #fff; }
.msg-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: calc(var(--sat) + 16px) 0 12px; border-bottom: 1px solid rgba(0,0,0,.08); }
.msg-avatar { width: 50px; height: 50px; border-radius: 50%; background: #d6d4d0; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; }
.msg-name { font-size: 12px; font-weight: 500; color: #333; }
.msg-time { text-align: center; font-size: 11px; color: #8a8a8e; margin: 14px 0 6px; font-weight: 500; }
.imsg { max-width: 74%; padding: 9px 14px; border-radius: 19px; font-size: 15.5px; line-height: 1.32; margin-bottom: 6px; }
.imsg.them { align-self: flex-start; background: #E9E9EB; color: #000; border-bottom-left-radius: 5px; }
.imsg.me { align-self: flex-end; background: #0A84FF; color: #fff; border-bottom-right-radius: 5px; }
.imsg-composer { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(0,0,0,.14); border-radius: 999px; padding: 8px 8px 8px 16px; color: #8a8a8e; font-size: 15px; margin: 4px 0 6px; }
.imsg-composer .send { width: 30px; height: 30px; border-radius: 50%; background:#0A84FF; color:#fff; display:flex;align-items:center;justify-content:center;flex:none;}
.imsg-composer .send svg{width:16px;height:16px;}

.leash-pill {
  display: inline-flex; align-items: center; gap: 8px; align-self: center;
  padding: 10px 18px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500; color: var(--ink-82);
  background: rgba(250,249,246,.9); border: 1px solid var(--rule);
  animation: breathePill 3.4s ease-in-out infinite;
}
.leash-pill svg { width: 16px; height: 16px; color: var(--ink-55); }
@keyframes breathePill { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }

/* link card in thread — paper-toned, hairline */
.linkcard { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-plate); padding: 15px 17px; }
.linkcard .lc-head { display: flex; align-items: center; gap: 11px; }
.linkcard .lc-mark { width: 24px; height: 24px; color: var(--ink); flex: none; }
.linkcard hr { border: none; border-top: 1px solid var(--rule); margin: 12px 0; }
.linkcard .lc-perm { font-size: 13px; color: var(--ink-70); font-weight: 500; }
.linkcard .lc-perm b { font-weight: 600; color: var(--ink-92); }

/* countdown ring card */
.countdown { display: flex; align-items: center; gap: 16px; }
.countRing { width: 56px; height: 56px; flex: none; }

/* ============================================================
   Press-and-hold ring (D2) — dark plate backdrop
   ============================================================ */
.holdScreen {
  position: absolute; inset: 0; z-index: 45;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 30px; color: var(--cream);
  opacity: 0; animation: fadeIn 500ms ease forwards; overflow: hidden;
}
.holdScreen .hs-plate { position: absolute; inset: 0; z-index: 0; }
.holdScreen .hs-plate::after { content:''; position:absolute; inset:0; background: rgba(22,19,16,.62); }
.holdScreen > * { position: relative; z-index: 1; }
.holdRing { width: 180px; height: 180px; position: relative; touch-action: none; cursor: pointer; margin-bottom: 34px; }
.holdRing .lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--cream-80); font-weight: 500; }

/* ============================================================
   V3 — THE PRINTED INTERVIEW
   No bubbles. Eyebrow speaker labels + typeset utterances.
   ============================================================ */
.feed { display: flex; flex-direction: column; }
.turn { margin-top: 36px; }
.turn:first-child { margin-top: 0; }
.turn-user { margin-top: 52px; }
.feed > .turn-user:first-child { margin-top: 0; }

/* eyebrow — micro-caps speaker + right-aligned timestamp */
.eyebrow { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.eyebrow .spk {
  display: inline-flex; align-items: center;
  font-family: 'Inter'; font-weight: 600; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink-45);
  opacity: 0;
}
.eyebrow .spk svg { width: 13px; height: 13px; color: var(--ink-45); display: block; }
.eyebrow .ts {
  font-family: 'Inter'; font-weight: 500; font-size: 10px; letter-spacing: 1px;
  color: var(--ink-25); font-variant-numeric: tabular-nums; flex: none;
}
.turn.in .eyebrow .spk { animation: trackIn 300ms var(--ease-screen) both; }
@keyframes trackIn { from { letter-spacing: 4px; opacity: 0; } to { letter-spacing: 2px; opacity: 1; } }

/* utterances */
.turn-guardian .utterance {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 22px; line-height: 1.45; font-weight: 440; color: var(--ink-92);
  font-feature-settings: "onum" 1; max-width: 32ch;
}
.turn-guardian .utterance p { margin-bottom: 14px; }
.turn-guardian .utterance p:last-child { margin-bottom: 0; }
.turn-guardian .utterance p.big { font-size: 30px; font-weight: 500; line-height: 1.12; }
.turn-guardian .utterance p.italic { font-style: italic; }
.turn-guardian .utterance.small { font-size: 19px; }

.turn-user .eyebrow { margin-left: 44px; }
.turn-user .utterance {
  margin-left: 44px;
  font-family: 'Inter'; font-size: 16px; line-height: 1.5; color: var(--ink-70);
}

/* dark (dwelling) register */
.dark .turn-guardian .utterance { color: var(--cream-88); }
.dark .turn-user .utterance { color: var(--cream-70); }
.dark .eyebrow .spk, .dark .eyebrow .spk svg { color: var(--cream-45); }
.dark .eyebrow .ts { color: var(--cream-45); }

/* streaming caret — 1px x 1em ink block, blinks 1s */
.caret {
  display: inline-block; width: 1px; height: 1em; vertical-align: -0.12em;
  background: var(--ink); margin-left: 2px; animation: caretBlink 1s step-end infinite;
}
.dark .caret { background: var(--cream); }
@keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* generalized shimmer (thinking micro-cap) */
.shimmer {
  background: linear-gradient(90deg, var(--ink-45) 0%, var(--ink-45) 35%, var(--ink-82) 50%, var(--ink-45) 65%, var(--ink-45) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 1.8s linear infinite;
}
.dark .shimmer {
  background: linear-gradient(90deg, var(--cream-45) 0%, var(--cream-45) 35%, var(--cream-88) 50%, var(--cream-45) 65%, var(--cream-45) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.thinking-cap { font-family: 'Inter'; font-weight: 600; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }

/* ============================================================
   V3 action grammar — caps-links + square blocks
   ============================================================ */
.caps-row { display: flex; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.caps-link {
  position: relative; display: inline-block; background: none;
  font-family: 'Inter'; font-weight: 600; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-82); padding: 4px 0 9px;
  transition: color 120ms ease;
}
.caps-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor;
  transform: scaleX(1); transform-origin: left; opacity: .5;
  transition: height 120ms ease, opacity 120ms ease;
}
.caps-link.draw::after { animation: underdraw 340ms var(--ease-screen) both; }
@keyframes underdraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.caps-link:active, .caps-link.tapped { color: var(--ink); }
.caps-link:active::after, .caps-link.tapped::after { height: 2px; opacity: 1; }
.caps-sep { padding: 0 14px; color: var(--ink-25); font-family: 'Inter'; font-size: 11px; }
.dark .caps-link, .dark-sheet .caps-link { color: var(--cream-88); }
.dark .caps-link.tapped, .dark-sheet .caps-link.tapped { color: var(--cream); }
.dark .caps-sep, .dark-sheet .caps-sep { color: var(--cream-45); }

/* square block button — radius 0 (the V3 signature) */
.block-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 56px; border-radius: 0;
  background: var(--block); color: var(--paper);
  font-family: 'Inter'; font-weight: 500; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase;
  transition: transform 120ms ease, background 120ms ease;
  position: relative; overflow: hidden;
}
.block-btn svg { width: 17px; height: 17px; }
.block-btn:active { background: var(--ink); transform: scale(.985); }
.block-btn[disabled] { background: rgba(20,18,16,.12); color: rgba(20,18,16,.32); pointer-events: none; }
.block-btn.crossing::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--thread); background-size: 220% 100%; opacity: var(--wash, .9);
  animation: threadShimmer 2.6s linear infinite;
}
.block-outline { background: none; color: var(--ink-92); border: 1px solid var(--ink-45); }
.block-outline:active { background: rgba(20,18,16,.04); }
.block-cream { background: var(--cream); color: var(--hearth); }
.block-cream:active { background: #fff; }
.block-cream-outline { background: none; color: var(--cream); border: 1px solid var(--cream-55); }
.block-cream-outline:active { background: rgba(239,231,220,.06); }

/* editorial option rows (S4) */
.opt-row { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; background: none; padding: 16px 2px; border-bottom: 1px solid var(--rule); }

/* subscriptions ledger */
.ledger .lrow { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ledger .lrow:first-child { border-top: 1px solid var(--rule); }
.ledger .lname { font-size: 14.5px; font-weight: 500; color: var(--ink-92); }
.ledger .lsub { font-size: 12px; color: var(--ink-45); margin-top: 1px; }
.ledger .lprice { font-family: 'EB Garamond', serif; font-weight: 500; font-size: 18px; color: var(--ink-70); font-feature-settings: "onum" 1; }

/* room-offer note */
.offer { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 18px 0; display: flex; flex-direction: column; }

/* day / session rule with centered date micro-cap */
.day-rule { display: flex; align-items: center; gap: 14px; margin: 34px 0; }
.day-rule::before, .day-rule::after { content: ''; flex: 1; height: 1px; background: var(--rule-soft); }
.day-rule .d { font-family: 'Inter'; font-weight: 600; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-45); }
.dark .day-rule::before, .dark .day-rule::after { background: var(--cream-rule); }
.dark .day-rule .d { color: var(--cream-45); }

/* ============================================================
   Chat home — the flagship (title page + running interview)
   ============================================================ */
.chat-title { padding-top: calc(var(--sat) + 58px); }
.chat-title .date { font-family: 'Inter'; font-weight: 600; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-45); }
.chat-title .greet { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 440; font-size: 44px; line-height: 1.05; color: var(--ink); margin-top: 14px; }
.chat-title .tp-rule { height: 1px; background: var(--rule); margin-top: 26px; }

.chat-composer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 12px 24px calc(var(--sab) + 12px);
  background: linear-gradient(to top, var(--paper) 74%, rgba(251,248,243,0));
}
.chat-composer .rule { height: 1px; background: var(--rule); margin-bottom: 8px; }
.chat-composer .row { display: flex; align-items: center; gap: 12px; }
.chat-composer input { flex: 1; border: none; background: none; outline: none; font-family: 'Inter'; font-size: 16px; color: var(--ink); min-height: 44px; }
.chat-composer input::placeholder { font-family: 'EB Garamond', serif; font-style: italic; font-size: 18px; color: var(--ink-45); }
.chat-composer .sq-send { width: 40px; height: 40px; border-radius: 0; flex: none; display: flex; align-items: center; justify-content: center; background: var(--block); color: var(--paper); transition: transform 120ms ease; }
.chat-composer .sq-send:active { transform: scale(.94); }
.chat-composer .sq-send svg { width: 18px; height: 18px; }

/* ============================================================
   Reduced motion — morphs collapse to 200ms fades
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: 120ms !important; }
  .scr-enter-push, .scr-enter-back, .scr-enter-fade { animation: fadeIn 200ms ease both !important; }
  .scr-exit-push, .scr-exit-back, .scr-exit-fade { animation: fadeOut 160ms ease both !important; }
  .rise { opacity: 1; transform: none; }
  .sheet { animation: fadeIn 200ms ease both !important; }
  .word { opacity: 1 !important; animation: none !important; }
  .leash-pill, .btn-crossing::after { animation: none !important; }
  .capsule.crossing .bsweep { animation: none !important; opacity: .6; }
  .eyebrow .spk { opacity: 1 !important; }
  .turn.in .eyebrow .spk { animation: none !important; letter-spacing: 2px !important; }
  .caret { animation: none !important; opacity: 0 !important; }
  .caps-link.draw::after { animation: none !important; }
  .block-btn.crossing::after { animation: none !important; }
}