/* ─── Buttons ──────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 0.6em 1.4em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { background: var(--gold-soft); border-color: var(--gold); }
.btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;  /* blocks hover-state flicker on disabled */
}

.btn-primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--bg); }

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

.btn-danger {
  background: var(--error);
  color: white;
  border-color: var(--error);
}
.btn-danger:hover { background: #963d2e; border-color: #963d2e; color: white; }

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: inherit;
  cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.btn-link:hover { color: var(--fg); }

/* ─── Forms ───────────────────────────────────────────────── */

.auth-form, .account-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 22rem;
  margin: 0 auto;
  width: 100%;
}

.auth-form > h1 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: var(--space-md);
}
.auth-form > h2, .account-form > h2 {
  font-size: 1.4rem;
  margin-bottom: var(--space-sm);
}

.auth-form label, .account-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: 0.85rem;
  color: var(--fg-muted);
}
.auth-form label > span:first-child,
.account-form label > span:first-child {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.auth-form input, .account-form input {
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 0.6em 0.8em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--fg);
  transition: border-color var(--t-fast);
}
.auth-form input:focus, .account-form input:focus {
  outline: none;
  border-color: var(--gold);
}

.field-hint { font-size: 0.75rem; color: var(--fg-soft); }

/* Password input + Show/Hide toggle — 1:1 of Reverie's pw-toggle pattern
   (kaleidoscope-data-migration/index.html:1718-1733). Toggle sits absolute
   inside the relative wrap, right of the input; input gets right-padding
   so its content doesn't run under the button. */
.pw-wrap { position: relative; }
/* width:100% — without it the input falls back to <input>'s default
   intrinsic size (size=20 ≈ 200px). Other inputs in the form are
   direct flex-column children of <label> and get stretched via
   align-items:stretch; once we wrap the password input in .pw-wrap,
   the wrap is the flex item (stretched), the input inside isn't.
   Reverie has the same fix as inline width:100% on its login input
   (kaleidoscope-data-migration/index.html:1721). */
.pw-wrap input { width: 100%; padding-right: 3.4em; }
.pw-toggle {
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--fg-soft);
  font-family: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  padding: 4px 6px;
  letter-spacing: 0.04em;
  transition: color var(--t-fast);
}
.pw-toggle:hover { color: var(--fg); }

.checkbox-label {
  flex-direction: row !important;
  align-items: flex-start;
  gap: var(--space-sm) !important;
  font-size: 0.85rem !important;
  color: var(--fg) !important;
  line-height: 1.45;
}
.checkbox-label input[type="checkbox"] {
  margin-top: 0.25em;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  accent-color: var(--gold);
}

.auth-error {
  color: var(--error);
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2em;
}
.auth-success-line {
  color: var(--gold);
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2em;
}
.auth-success {
  text-align: center;
  padding: var(--space-lg);
}
.auth-success h2 { color: var(--gold); }

.auth-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  max-width: 26rem;
  width: 100%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.auth-links {
  text-align: center;
  font-size: 0.85rem;
  margin-top: var(--space-md);
}
.auth-links a { font-size: inherit; }

/* ─── App cards (landing, hub) ─────────────────────────────── */

.app-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: var(--bg-elev);
  margin-bottom: var(--space-md);
}
.app-card-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 0.2em;
}
.app-card-tagline {
  font-style: italic;
  color: var(--fg-muted);
  font-size: 0.95rem;
}

/* ─── Top-Bar ──────────────────────────────────────────────── */

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--ink-08);
}
.top-bar.hidden { display: none; }

/* Left side — either a BACK button (non-landing routes) or an empty
   spacer (landing). Spacer is invisible and just balances the flex. */
.top-bar-spacer { width: 0; height: 0; }

.top-bar-back {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-50);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 3px;
  transition: color var(--timing), background-color var(--timing);
}
.top-bar-back:hover {
  color: var(--ink-75);
  background: var(--ink-08);
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.top-bar-link {
  font-family: var(--font-ui);
  text-decoration: none;
  border-bottom: none;       /* base.css forces border-bottom on a; reset */
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ink-50);
  padding: 6px 12px;
  border-radius: 3px;
  transition: background-color var(--timing), color var(--timing), border-color var(--timing);
}
.top-bar-link:hover { color: var(--ink-75); }

.top-bar-create {
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-bottom: 1px solid var(--gold-dim); /* preserve top-bar-link reset */
  padding: 8px 14px;
}
.top-bar-create:hover {
  background: var(--gold-faint);
  border-color: var(--gold);
  color: var(--gold);
}

@media (max-width: 600px) {
  .top-bar { padding: 14px 18px; }
  .top-bar-actions { gap: 8px; }
  .top-bar-link { font-size: 11px; padding: 6px 8px; }
  .top-bar-create { padding: 6px 10px; }
}

/* ─── Bottom-Bar ────────────────────────────────────────────────
   Post-login session-state strip. Opaque background fixes the
   transparency bug from the cookie-SSO wave (2026-05-09). */

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-elev);
  border-top: 1px solid var(--ink-08);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-50);
  z-index: 10;
}
.bottom-bar.hidden { display: none; }

.bottom-bar-label   { letter-spacing: 0.04em; }
.bottom-bar-email   { color: var(--ink-75); font-family: var(--font-mono); }
.bottom-bar-sep     { color: var(--ink-30); }
.bottom-bar-signout {
  background: none;
  border: none;
  color: var(--ink-50);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 4px;
  transition: color var(--timing);
}
.bottom-bar-signout:hover { color: var(--ink-75); }

/* Variant: route-specific info-text (e.g. /reverie-experience).
   Cormorant italic, slightly larger, no email/sign-out elements. */
.bottom-bar.is-info {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-75);
}
.bottom-bar-info { letter-spacing: 0.02em; text-align: center; }

/* ─── Landing Page (single shared / page) ───────────────────── */

/* The .screen base sets padding var(--space-xl) var(--space-lg). For
   landing we want zero padding on the section so .landing-page's own
   96px top-padding is the only spacing (clears the fixed top-bar). */
#screen-landing { padding: 0; }

/* Reverie-experience: full-bleed canvas. No padding. The canvas fills
   the screen; top-bar (z:20) + bottom-bar (z:10) sit above. */
#screen-reverie-experience {
  padding: 0;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.reverie-experience-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Info / account screens — push content below the fixed top-bar so
   .screen-back doesn't sit underneath it. */
#screen-info,
#screen-account {
  padding-top: 96px;
}

.landing-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 96px 24px 80px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hero {
  text-align: center;
  margin-bottom: 96px;
  padding-top: 32px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0 0 18px;
}

.hero-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-50);
  letter-spacing: 0.02em;
  margin: 0;
}

@media (max-width: 600px) {
  .hero-title    { font-size: 48px; }
  .hero-subtitle { font-size: 16px; }
  .hero          { margin-bottom: 64px; }
  .landing-page  { padding: 80px 18px 60px; }
}

/* ─── Tool Cards ─────────────────────────────────────────────── */

.tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-bottom: 80px;
}

.tool-card {
  background: var(--paper-soft);
  border: 1px solid var(--ink-08);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--timing);
}
.tool-card:hover { border-color: var(--gold-dim); }

.tool-visual {
  aspect-ratio: 4 / 3;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
}

/* Clickable variant — set when the tile is actionable (signed-in with
   active tier OR signed-out → leads to sign-in). Pure UX hint; the click
   handler is wired in JS (landing.js renderToolCard). */
.tool-visual-clickable {
  cursor: pointer;
  transition: filter 200ms ease;
}
.tool-visual-clickable:hover { filter: brightness(1.05); }
.tool-visual-clickable:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.visual-reverie {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(180, 200, 140, 0.55) 0%,
      rgba(120, 160, 90, 0.65) 25%,
      rgba(70, 110, 55, 0.85) 55%,
      rgba(28, 42, 24, 0.95) 100%),
    conic-gradient(from 0deg at 50% 50%,
      rgba(255, 240, 200, 0.18) 0deg,
      transparent 22deg,
      rgba(255, 240, 200, 0.10) 45deg,
      transparent 67deg,
      rgba(255, 240, 200, 0.18) 90deg,
      transparent 112deg,
      rgba(255, 240, 200, 0.10) 135deg,
      transparent 157deg,
      rgba(255, 240, 200, 0.18) 180deg,
      transparent 202deg,
      rgba(255, 240, 200, 0.10) 225deg,
      transparent 247deg,
      rgba(255, 240, 200, 0.18) 270deg,
      transparent 292deg,
      rgba(255, 240, 200, 0.10) 315deg,
      transparent 337deg);
  filter: blur(0.4px);
}
.visual-reverie::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 235, 180, 0.25) 0%,
    transparent 30%);
}

/* ─── Fold tile — mirrors Fold's actual dialog DOM/CSS  ───────────
   Class names match Fold's screens.css (.bubble-wrap, .bubble,
   .dlg-accent-stripe, .dlg-input-row, .dlg-input-wrap, .dlg-textarea,
   .send-btn) so the tile reads as the real Fold dialog at half scale.
   All rules are scoped under .visual-fold to keep them tile-local. */

.visual-fold {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  padding: 0;
  transition: opacity 600ms ease;
}
.visual-fold.is-fading-out { opacity: 0; }

.visual-fold .dlg-message-area {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.visual-fold .dlg-accent-stripe {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 4px;
  width: 3px;
  border-radius: 2px;
  background: #c1b2d4;     /* lavender — default for active-part */
  transition: left 0.8s ease, background-color 0.8s ease;
  z-index: 2;
  pointer-events: none;
}
.visual-fold .dlg-accent-stripe.is-right {
  left: calc(100% - 7px);
}
/* Color follows active role on the parent message-area. */
.visual-fold .dlg-message-area.active-self .dlg-accent-stripe { background: #c8a96e; }
.visual-fold .dlg-message-area.active-part .dlg-accent-stripe { background: #c1b2d4; }

.visual-fold .dlg-messages {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: flex-end;
}

.visual-fold .bubble-wrap {
  display: flex;
  width: 100%;
}
.visual-fold .bubble-wrap.is-right { justify-content: flex-end; }
.visual-fold .bubble-wrap.is-left  { justify-content: flex-start; }

.visual-fold .bubble {
  max-width: 82%;
  padding: 4px 8px 3px;
  border: 1px solid rgba(40, 30, 18, 0.10);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  position: relative;
  transition: opacity 0.5s ease;
}
/* Dim inactive-side bubbles — same idea as Fold's bubble-dim-overlay,
   simpler implementation since the tile doesn't need the half-veil
   wipe effect. */
.visual-fold .dlg-message-area.active-self .bubble.is-left  { opacity: 0.42; }
.visual-fold .dlg-message-area.active-part .bubble.is-right { opacity: 0.42; }
.visual-fold .bubble.is-right {
  border-radius: 10px 10px 2px 10px;
  background: #d4b88a;
  color: rgba(30, 22, 12, 0.88);
}
.visual-fold .bubble.is-left {
  border-radius: 10px 10px 10px 2px;
  background: #c1b2d4;
  color: rgba(30, 22, 12, 0.88);
}
.visual-fold .bubble-text {
  display: inline;
  word-break: break-word;
  white-space: pre-wrap;
}

.visual-fold .dlg-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 8px;
  border-top: 1px solid var(--ink-08);
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

.visual-fold .dlg-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #e7decd;       /* Fold's --input-bg, opaque so stripe doesn't bleed through */
  border: 1px solid rgba(177, 138, 82, 0.40);
  border-radius: 8px;
  padding: 4px 8px;
  min-height: 22px;
  transition: border-color 0.8s ease;
}
.visual-fold .dlg-input-wrap.is-self { border-color: rgba(177, 138, 82, 0.60); }
.visual-fold .dlg-input-wrap.is-part { border-color: rgba(149, 128, 178, 0.70); }

.visual-fold .dlg-textarea {
  flex: 1;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(40, 30, 18, 0.92);
  word-break: break-word;
  white-space: pre-wrap;
  min-height: 14px;
}
.visual-fold .dlg-textarea.is-typing::after {
  content: '|';
  display: inline-block;
  margin-left: 1px;
  color: var(--ink-50);
  animation: fold-tile-cursor-blink 1s steps(1) infinite;
}
@keyframes fold-tile-cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.visual-fold .send-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(177, 138, 82, 0.10);
  color: #c8a96e;
  border: 1px solid rgba(177, 138, 82, 0.40);
  transition: color 0.8s ease, background-color 0.8s ease, border-color 0.8s ease;
}
.visual-fold .send-btn.is-self {
  color: #c8a96e;
  background: rgba(177, 138, 82, 0.10);
  border-color: rgba(177, 138, 82, 0.40);
}
.visual-fold .send-btn.is-part {
  color: #8a7aa4;
  background: rgba(193, 178, 212, 0.18);
  border-color: rgba(149, 128, 178, 0.55);
}
.visual-fold .send-btn svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
}
.demo-bubble {
  max-width: 78%;
  padding: 5px 10px 4px;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid rgba(40, 30, 18, 0.10);
}
.demo-bubble.is-part {
  align-self: flex-start;
  background: #c1b2d4;
  color: rgba(30, 22, 12, 0.85);
  border-radius: 10px 10px 10px 2px;
}
.demo-bubble.is-self {
  align-self: flex-end;
  background: #d4b88a;
  color: rgba(30, 22, 12, 0.88);
  border-radius: 10px 10px 2px 10px;
}

.tool-info {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.tool-name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
}

.tool-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-50);
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}

.tool-description {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-75);
  margin: 0;
  flex: 1;
}

.tool-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}
/* CTA always right-aligned: when the row has a sibling on the left
   (try-sample link or tier-pill), the auto-margin pushes the CTA
   to the far edge; when it's the only child (Fold pre-login), the
   CTA still sits on the right. */
.tool-actions .tool-cta { margin-left: auto; }

.tool-cta {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  background: none;
  cursor: pointer;
  transition: background-color var(--timing), border-color var(--timing);
}
.tool-cta:hover { background: var(--gold-faint); border-color: var(--gold); }

/* Plain-text "experience without login" link on the left of pre-login
   tool-cards. Sentence-case, Cormorant italic — soft offer, contrasts
   with the gold-bordered .tool-cta button on the right. */
.tool-secondary {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-50);
  padding: 4px 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--timing);
}
.tool-secondary:hover { color: var(--ink-75); }
.tool-secondary.is-disabled,
.tool-secondary[disabled] {
  color: var(--ink-30);
  cursor: not-allowed;
}

.tool-tier-pill {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-50);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ─── Landing Footer ────────────────────────────────────────── */

.landing-footer {
  margin-top: auto;
  padding-top: 48px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.landing-footer a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-75);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: none;      /* base.css forces border-bottom on a; reset */
  transition: color var(--timing);
}
.landing-footer a:hover { color: var(--gold); }
.landing-footer .sep { color: var(--ink-50); font-style: italic; font-size: 15px; }

/* ─── Demo Modal ──────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 22, 14, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--timing);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }

.modal-panel {
  background: var(--paper);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gold-dim);
}

.modal-header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--ink-08);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
}

.modal-tag {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--ink-50);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--ink-08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.modal-footer-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-50);
  flex: 1;
  min-width: 200px;
  margin: 0;
}

.modal-cta {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  background: none;
  cursor: pointer;
  transition: background-color var(--timing), border-color var(--timing);
}
.modal-cta:hover { background: var(--gold-faint); border-color: var(--gold); }

.modal-close {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-50);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--timing);
}
.modal-close:hover { color: var(--ink-75); }

/* Reverie still — radial + conic gradient kaleidoscope-suggestive */
.demo-reverie {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(180, 200, 140, 0.55) 0%,
      rgba(120, 160, 90, 0.65) 25%,
      rgba(70, 110, 55, 0.85) 55%,
      rgba(28, 42, 24, 0.95) 100%),
    conic-gradient(from 0deg at 50% 50%,
      rgba(255, 240, 200, 0.20) 0deg,
      transparent 22deg,
      rgba(255, 240, 200, 0.12) 45deg,
      transparent 67deg,
      rgba(255, 240, 200, 0.20) 90deg,
      transparent 112deg,
      rgba(255, 240, 200, 0.12) 135deg,
      transparent 157deg,
      rgba(255, 240, 200, 0.20) 180deg,
      transparent 202deg,
      rgba(255, 240, 200, 0.12) 225deg,
      transparent 247deg,
      rgba(255, 240, 200, 0.20) 270deg,
      transparent 292deg,
      rgba(255, 240, 200, 0.12) 315deg,
      transparent 337deg);
}
.demo-reverie::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 235, 180, 0.30) 0%,
    transparent 30%);
}
.demo-reverie-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-50);
  text-align: center;
  margin-top: 16px;
}

/* Fold dialog bubbles in modal */
.demo-dialog { display: flex; flex-direction: column; gap: 4px; }
.demo-msg-wrap { display: flex; width: 100%; }
.demo-msg-wrap.is-right { justify-content: flex-end; }
.demo-msg-wrap.is-left  { justify-content: flex-start; }
.demo-msg {
  max-width: 78%;
  padding: 7px 11px 5px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid rgba(40, 30, 18, 0.10);
  position: relative;
}
.demo-msg.is-part {
  background: #c1b2d4;
  color: rgba(30, 22, 12, 0.88);
  border-radius: 12px 12px 12px 3px;
}
.demo-msg.is-self {
  background: #d4b88a;
  color: rgba(30, 22, 12, 0.88);
  border-radius: 12px 12px 3px 12px;
}
.demo-msg-ts {
  display: inline-block;
  float: right;
  margin-left: 8px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0.5;
}

/* ─── Auth-screen paper-card wrapper (sign-in / sign-up / forgot /
       set-password). Mirrors the prototype's signin-modal styling
       but used as a centered card on a full-view screen, not a
       modal overlay. */

/* Auth screens use .screen base (display:flex column align:center).
   Override padding for top breathing room (top-bar overlap) and add
   justify-content:center so the auth-card centers vertically. */
#screen-signin,
#screen-signup,
#screen-forgot,
#screen-set-password {
  justify-content: center;
  padding: 96px 24px 80px;
}

#screen-signin > *,
#screen-signup > *,
#screen-forgot > *,
#screen-set-password > * {
  width: 100%;
  max-width: 380px;
}

#screen-signin .auth-card,
#screen-signup .auth-card,
#screen-forgot .auth-card,
#screen-set-password .auth-card {
  background: var(--paper-soft);
  border: 1px solid var(--ink-08);
  border-radius: 4px;
  padding: 36px 32px;
}

#screen-signin h1,
#screen-signup h1,
#screen-forgot h1,
#screen-set-password h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  margin: 0 0 6px;
}