/* ============================================================================
 * Goal-driven create chrome (take-2)
 *
 * Visual skin layered over js/create-engine.js. Mocks live in
 * mocks/drafts/goal-first-create.html. Take-2 wires the chrome into the
 * existing wizard via shared DOM contract + window.setGoalVizMode +
 * window.launchPoll bridges (see js/create-engine.js).
 *
 * Tokens: this file uses css/design-system.css tokens directly. Three
 * legacy mock-token aliases below for tokens design-system doesn't ship.
 * ========================================================================= */

:root {
  /* Chrome-local additions (no design-system equivalent) */
  --magenta-soft: rgba(217, 70, 239, 0.10);
  --cyan-soft: var(--cyan-subtle);
  --violet: #8b5cf6;
}

/* ---- Page shell --------------------------------------------------------- */

body.goal-chrome-body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-display);
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 4%, rgba(34, 211, 238, 0.08), transparent 32rem),
    radial-gradient(circle at 92% 96%, rgba(217, 70, 239, 0.06), transparent 30rem),
    var(--bg-deep);
  margin: 0;
}

.draft-toast {
  position: fixed;
  bottom: var(--sp-md);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
  z-index: 200;
  pointer-events: none;
}
.draft-toast.show { opacity: 1; }

@media (max-width: 880px) {
  /* Once a poll is saved the session action bar (#8) is pinned to the bottom
     of the screen. Lift the save toast above it so "Saved! …" never covers the
     Launch / View-on-dashboard buttons (which is how it read as "no way to get
     to the dashboard" on mobile). */
  .draft-toast {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

.create-auth-cta-bar {
  position: relative;
  z-index: 1001;
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px clamp(44px, 4vw, 56px) 9px clamp(16px, 4vw, 48px);
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.15), rgba(217, 70, 239, 0.10));
  border-bottom: 1px solid rgba(6, 182, 212, 0.18);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}
.create-auth-cta-bar.dismissed { display: none; }
.create-auth-cta-bar .cta-icon {
  flex: 0 0 auto;
  color: var(--amber-bright);
  line-height: 1;
}
.create-auth-cta-bar .cta-action {
  color: var(--cyan-bright);
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.create-auth-cta-bar .cta-action:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--cyan-bright);
}
.create-auth-cta-bar .cta-close {
  position: absolute;
  top: 50%;
  right: clamp(10px, 2vw, 22px);
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.create-auth-cta-bar .cta-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--glass-border-hover);
}
.goal-chrome-body .nav {
  position: sticky;
}

.goal-wrap { max-width: 1280px; margin: 0 auto; padding: 28px 24px 80px; }

/* Top header */
.goal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 14px;
}
.goal-brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-secondary);
}
.goal-brand-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 18%, var(--cyan-bright) 30%, #053b48 100%);
  box-shadow: 0 0 18px var(--cyan-glow);
}

/* ---- Screen state machine ---------------------------------------------- */

.goal-screen { display: none; }
.goal-screen.active { display: block; }

/* ---- Screen 1: picker -------------------------------------------------- */

.s1-header { text-align: left; margin-bottom: 14px; }
.s1-h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; }
.s1-h1 .pop {
  color: transparent;
  background: linear-gradient(135deg, var(--magenta-bright) 10%, var(--cyan-bright) 90%);
  -webkit-background-clip: text;
  background-clip: text;
}
.s1-lede { color: var(--text-secondary); font-size: 17px; margin-top: 14px; max-width: 60ch; line-height: 1.5; }

.ai-prompt { margin: 2px 0 14px; }
.ai-prompt-ring {
  position: relative;
  border-radius: var(--r-lg);
  padding: 1.5px;
  background: linear-gradient(135deg, var(--cyan-bright), var(--magenta-bright) 75%);
  box-shadow:
    0 22px 70px -28px var(--magenta-glow),
    0 10px 36px -18px var(--cyan-glow);
  transition: box-shadow var(--duration) var(--ease-out);
}
.ai-prompt-ring:focus-within {
  box-shadow:
    0 26px 80px -26px var(--magenta-glow),
    0 14px 44px -16px var(--cyan-glow);
}
.ai-prompt-inner {
  position: relative;
  border-radius: calc(var(--r-lg) - 1.5px);
  padding: 11px 18px 10px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(6, 182, 212, 0.10), transparent 45%),
    radial-gradient(120% 140% at 100% 0%, rgba(217, 70, 239, 0.10), transparent 45%),
    var(--bg-surface);
  overflow: hidden;
}
.ai-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--cyan-bright), var(--magenta-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.ai-eyebrow .spark { font-size: 0.85rem; -webkit-text-fill-color: initial; color: var(--cyan-bright); }
.ai-textarea {
  display: block;
  width: 100%;
  min-height: 34px;
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.55vw, 1.3rem);
  font-weight: 500;
  line-height: 1.3;
}
.ai-textarea::placeholder { color: var(--text-tertiary); font-weight: 400; }
.ai-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ai-examples { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-examples-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  align-self: center;
  margin-right: 2px;
}
.ai-chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  padding: 6px 11px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.ai-chip:hover { color: var(--text-primary); background: var(--glass-bg-hover); border-color: var(--glass-border-hover); }
.ai-generate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bg-deep);
  background: linear-gradient(135deg, var(--cyan-bright), var(--magenta-bright));
  border: 0;
  border-radius: var(--r-md);
  padding: 11px 20px;
  cursor: pointer;
  box-shadow: 0 10px 30px -12px var(--cyan-glow), 0 8px 24px -14px var(--magenta-glow);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.ai-generate:hover { transform: translateY(-1px); box-shadow: 0 14px 38px -12px var(--cyan-glow), 0 10px 30px -12px var(--magenta-glow); }
.ai-generate:disabled { opacity: .6; cursor: default; transform: none; }
.ai-prompt.is-generating .ai-textarea { opacity: .55; }
.ai-shimmer {
  display: none;
  height: 3px;
  border-radius: 3px;
  margin-top: 14px;
  overflow: hidden;
  background: var(--glass-bg-hover);
  position: relative;
}
.ai-prompt.is-generating .ai-shimmer { display: block; }
.ai-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, var(--cyan-bright), var(--magenta-bright), transparent);
  animation: aishim 1.05s ease-in-out infinite;
}
@keyframes aishim { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.ai-error {
  display: none;
  margin-top: 10px;
  color: var(--danger);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.ai-error.visible { display: block; }
.ai-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 2px 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ai-or::before,
.ai-or::after { content: ''; height: 1px; flex: 1; background: var(--glass-border); }

.goal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-bottom: 24px;
}
@media (max-width: 980px) { .goal-grid { grid-template-columns: 1fr; } }

.goal-card {
  display: flex; flex-direction: column;
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--glass-border-hover);
  border-radius: 22px;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.goal-card:hover {
  transform: translateY(-3px);
  border-color: var(--cyan-bright);
  box-shadow: 0 14px 36px rgba(34, 211, 238, 0.18);
}
.goal-card:hover .goal-card-mech { opacity: 1; }
.goal-card:focus-visible {
  outline: 2px solid var(--cyan-bright);
  outline-offset: 2px;
}

.goal-card-poster {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.20), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(217, 70, 239, 0.16), transparent 55%),
    var(--bg-midnight);
  border-bottom: 1px solid var(--glass-border);
}
.goal-card-poster-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; color: var(--text-primary);
  opacity: 0.85;
}
/* Looping muted preview video that fills the goal-card poster. Sits above the
   gradient + glyph (the glyph is the fallback if the video can't load). */
.goal-card-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.goal-card-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.goal-card-title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 8px; }
.goal-card-desc { color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
.goal-card-best {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  letter-spacing: 0;
  margin-top: auto;
}
.goal-card-best b {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-right: 8px;
}
.goal-card-mech {
  position: absolute; top: 12px; right: 14px;
  padding: 4px 9px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
  letter-spacing: 0.06em;
  z-index: 3;
}
.goal-card-mech b { color: var(--cyan-bright); }

/* ---- Screen 2: composer (shared) --------------------------------------- */

.s2-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 16px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--glass-border-hover);
  border-radius: 16px;
  margin-bottom: 24px;
}
.s2-titlebar-l { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.s2-titlebar-icon { font-size: 24px; line-height: 1; }
.s2-titlebar-goal { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.s2-titlebar-sep { color: var(--text-ghost); margin: 0 6px; }
.s2-titlebar-viz {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--cyan-bright);
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 999px;
  background: var(--cyan-soft);
}
.s2-titlebar-r { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.s2-titlebar-link {
  background: transparent;
  border: 1px solid var(--glass-border-hover);
  color: var(--text-secondary);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.s2-titlebar-link:hover { color: var(--text-primary); background: var(--glass-bg); }

/* Format alternates strip (Choose between options) */
.fmt-strip {
  display: none;
  padding: 14px 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  margin-bottom: 24px;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.fmt-strip.open { display: flex; }
.fmt-strip-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 6px;
}
.fmt-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--glass-border-hover);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  transition: all 0.2s var(--ease-out);
}
.fmt-chip:hover { color: var(--text-primary); border-color: var(--cyan-bright); }
.fmt-chip.cur {
  background: var(--cyan-soft);
  border-color: var(--cyan-bright);
  color: var(--cyan-bright);
  font-weight: 600;
}
.fmt-chip-icon { font-size: 15px; }

/* Composer layout */
.composer-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; }
@media (max-width: 980px) { .composer-grid { grid-template-columns: 1fr; } }

.composer-pane,
.preview-pane {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--glass-border-hover);
  border-radius: 20px;
  padding: 26px;
}
.composer-pane h3,
.preview-pane h3 {
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.q-label { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.q-label-text { font-size: 14px; color: var(--text-secondary); }
.q-label-optional { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
/* Locale chip sits at the top-right of the compose pane, aligned with the
   "COMPOSE" header — deliberately away from the question's "required" label so
   it doesn't read as part of it. */
.composer-locale-slot { position: absolute; top: 20px; right: 24px; display: inline-flex; align-items: center; }

/* ---- Audience-locale picker (ported from create-page.css for create2) ----
   Single instance, relocated into the active composer's slot by goal-chrome.js
   on the first poll only. Uses design-system tokens so it matches the take-2
   dark chrome. */
.audience-locale-compact { position: relative; flex: 0 0 auto; }
.locale-icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.locale-icon-btn:hover,
.locale-icon-btn[aria-expanded="true"] {
  color: var(--text-primary);
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.06);
}
.locale-icon-btn svg { width: 14px; height: 14px; opacity: 0.8; }
.locale-icon-btn__label { text-transform: uppercase; }
.locale-popover {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  min-width: 220px; padding: 8px;
  background: #131826;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.locale-popover[hidden] { display: none; }
.locale-popover__title {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding: 4px 8px 2px;
}
.locale-popover__hint { font-size: 11px; color: var(--text-tertiary); opacity: 0.7; padding: 0 8px 6px; }
.locale-popover button[role="menuitemradio"] {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: none; border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit; font-size: 14px; text-align: left;
  cursor: pointer; transition: background 0.12s;
}
.locale-popover button[role="menuitemradio"]:hover,
.locale-popover button[role="menuitemradio"]:focus-visible { background: rgba(255, 255, 255, 0.04); outline: none; }
.locale-popover button[role="menuitemradio"][aria-checked="true"] { background: rgba(6, 182, 212, 0.10); color: var(--cyan-bright); }
.locale-popover__tag { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); letter-spacing: 0.04em; }
.locale-popover button[role="menuitemradio"][aria-checked="true"] .locale-popover__tag { color: var(--cyan-bright); }
.q-input {
  width: 100%;
  padding: 16px 18px;
  font-size: 17px;
  font-family: inherit;
  background: var(--bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--glass-border-hover);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.q-input:focus { border-color: var(--cyan-bright); box-shadow: 0 0 0 3px var(--cyan-soft); }

/* Sample-prompt chips */
.sample-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* The [hidden] attr must win over the flex display above (author rule beats the
   UA [hidden] rule), else the Choice/Quadrant chip groups can't be toggled. */
.sample-chips[hidden] { display: none; }
/* When a composer is reached via the AI prompt the question is already filled,
   so the static sample-question chips are redundant — suppress them. Cleared on
   every setScreen() transition; re-applied only by the AI-landing path. */
.goal-screen.chips-suppressed .sample-chips { display: none !important; }
.sample-chip {
  padding: 6px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.sample-chip:hover { color: var(--text-primary); border-color: var(--glass-border-hover); }

/* Cross-goal hint */
.xhint {
  margin-top: 14px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-tertiary);
  border-left: 2px solid var(--glass-border);
  line-height: 1.5;
}
.xhint a {
  color: var(--cyan-bright);
  text-decoration: underline;
  cursor: pointer;
}
.xhint a:hover { color: var(--cyan); }
.xhint-x {
  float: right;
  color: var(--text-ghost);
  cursor: pointer;
  font-family: var(--font-mono);
  padding-left: 10px;
}

/* Launch row */
.launch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--glass-border);
}
.launch-row-actions { display: flex; gap: 10px; align-items: center; }
.cancel-link {
  color: var(--text-tertiary);
  font-size: 13px;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
}
.cancel-link:hover { color: var(--text-primary); }
.save-next-btn {
  background: transparent;
  border: 1px solid var(--glass-border-hover);
  color: var(--text-secondary);
  padding: 11px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.save-next-btn:hover { color: var(--text-primary); border-color: var(--cyan-bright); }
.goal-launch-btn {
  padding: 13px 24px;
  background: linear-gradient(135deg, var(--cyan-bright), var(--cyan));
  color: var(--bg-deep);
  font-weight: 700;
  font-family: inherit;
  font-size: 15px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.3);
  transition: transform 0.15s var(--ease-out);
}
.goal-launch-btn:hover { transform: translateY(-1px); }
.goal-launch-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Preview pane */
.preview-pane { display: flex; flex-direction: column; gap: 20px; }
.video-card {
  background: var(--bg-deep);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.video-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(34, 211, 238, 0.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(217, 70, 239, 0.14), transparent 50%);
}
.video-play {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.video-play::after { content: '▶'; color: white; font-size: 22px; margin-left: 4px; }
.video-card-label {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.video-caption { font-size: 13px; color: var(--text-secondary); text-align: center; padding: 0 14px; line-height: 1.5; }

/* Static video preview filling the composer card (e.g. Q&A, which has no live
   in-process sim). Covers the card above the ::before gradient backdrop. */
.video-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* ---- Live viz sim in the composer preview card ---------------------------
 * goal-chrome.js relocates the engine's #viz-preview-container into the active
 * composer's .video-card (word + choose). Suppress the static play/label
 * placeholder and let the live sim fill the card. The .video-card::before
 * gradient stays as a backdrop so the card is never visually empty during the
 * brief async init before the canvas/svg renders. */
.video-card.has-live-sim .video-play,
.video-card.has-live-sim .video-card-label { display: none; }
/* Faithful-miniature scaling: the viz renderers size typography in rem/vw units
 * tuned for a full presenter screen, so rendering them directly at the small
 * card width (~400px) makes labels huge and wrap. Instead we render at a fixed
 * 16:10 logical "stage" (760×475 — clientWidth the engine reads), then uniformly
 * scale the whole stage down to fit the card. --sim-scale (= cardWidth/760) is
 * set reactively by goal-chrome.js via a ResizeObserver; the 0.5 fallback covers
 * the first frame before JS runs. */
.video-card.has-live-sim > #viz-preview-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 760px;
  height: 475px;
  transform-origin: top left;
  transform: scale(var(--sim-scale, 0.5));
  z-index: 1;
}

/* ---- Engine-owned builder container --------------------------------------
 * The legacy create-engine.js mounts all viz-specific row builders into
 * #builder-container (line 341). For column-drift the chrome wraps it
 * inside the composer-pane so it looks like part of the chrome. For
 * other goals (qa, word-cloud) the engine renders into the same node
 * but the column-builder-only styles don't trigger.
 * ----------------------------------------------------------------------- */

.engine-mount-wrap {
  margin-top: 22px;
}
.engine-mount-wrap > #builder-container {
  display: block;
}
.engine-mount-wrap > #builder-container:empty {
  /* While the engine is initializing the builder, give it visual
     breathing room rather than collapsing to zero height. */
  min-height: 80px;
}

/* Delegate-render-restyle of column-drift builder (rendered by engine):
   the engine emits .col-card / .col-name DOM; chrome restyles via CSS only,
   never replaces rows. See findings/codebase-expert-bridge-blockers.md. */

/* Tighten card spacing inside take-2 composer. Legacy /create has a wider
   builder area (no rail, no preview pane) so its 16px-all-around padding
   works there. Inside the narrower take-2 composer pane the same padding
   pushes the launch CTA below the fold. */
.composer-pane .col-card {
  padding: 10px 14px;
  border-radius: 12px;
}
.composer-pane .col-card-header {
  margin-bottom: 0;
}
.composer-pane #builder-container {
  /* Engine ships builder with 32px bottom margin; the composer pane already
     pads, so the engine spacing doubles up. */
  margin-bottom: 12px;
}

/* ---- Page-level grid (rail + screen stack) ----------------------------

   Defaults to single column (rail hidden). Once the user saves their
   first poll via "+ Save & next", JS adds .has-saved to flip to a
   2-column layout with the sticky session rail on the left. The rail
   then stays visible across ALL screens (picker + composers) so users
   bouncing back to the picker for poll #2, #3 keep their session
   context in view. */

.page-grid { display: block; }
.page-grid .session-rail { display: none; }

.page-grid.has-saved {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}
.page-grid.has-saved .session-rail { display: block; }

/* Pre-paint rail reservation for the add-to-session arrival (?session= without
   ?edit). The inline script in create2.html sets body[data-add-reserve] when a
   warm cache says the session has polls, so the two-column rail layout is
   reserved on the FIRST paint — no late flash while the engine hydrates.
   Desktop only (mobile rail is a fixed bottom bar). goal-chrome.js renders the
   stations on hydrate, adds .has-saved, and clears data-add-reserve. */
@media (min-width: 881px) {
  body[data-add-reserve] .page-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
  }
  body[data-add-reserve] .page-grid .session-rail { display: block; }
}

/* At narrow viewports the rail's context list (header/meta/track/suggest)
   crowds out the composer, so we drop it — BUT the session-level Launch +
   Dashboard actions live inside the rail too, and were previously hidden
   with it, leaving mobile users no way to launch the session or reach the
   dashboard (#8). Instead, collapse the rail to just its launch group and
   pin it to the bottom as a sticky mobile action bar. Reuses the existing
   #rail-launch-btn / #rail-dashboard-btn (and their JS wiring) verbatim. */
@media (max-width: 880px) {
  .page-grid.has-saved { grid-template-columns: 1fr; }
  .page-grid.has-saved .session-rail {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    z-index: 40;
    margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border: none;
    border-top: 1px solid var(--glass-border);
    border-radius: 0;
    background: rgba(10, 14, 26, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 1;
  }
  /* Desktop-only rail context — not shown in the mobile action bar. */
  .page-grid.has-saved .session-rail-header,
  .page-grid.has-saved .session-rail-meta,
  .page-grid.has-saved .rail-track,
  .page-grid.has-saved .rail-suggest,
  .page-grid.has-saved .rail-divider { display: none; }
  /* Lay the two CTAs side by side so the bar stays one row tall. */
  .page-grid.has-saved #rail-launch-group {
    display: flex; gap: 8px; align-items: stretch;
    max-width: 640px; margin: 0 auto;
  }
  .page-grid.has-saved #rail-launch-btn { flex: 2; margin: 0; }
  .page-grid.has-saved #rail-dashboard-btn { flex: 1; margin: 0; }
  /* Reserve space so the fixed bar never covers the composer footer. */
  .page-grid.has-saved { padding-bottom: 88px; }
}

.session-rail {
  /* Background context, not a hero. Subtle neutral panel, no cyan tint,
     reduced overall opacity so the composer remains the visual focus. */
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 16px 14px;
  position: sticky;
  top: 22px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.session-rail:hover,
.session-rail:focus-within { opacity: 1; }
.session-rail-header {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.session-rail-header-icon { font-size: 12px; opacity: 0.7; }
.session-rail-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  font-weight: 400;
}
.session-rail-meta b { color: var(--text-secondary); font-weight: 600; }

/* ---- Train-station track + station list -------------------------------

   Visual model (signed-off mock at mocks/drafts/session-rail-states.html):
     - One vertical cyan gradient line down the rail
     - Each saved poll is a "station" with a dot that sits ON the line
     - Done = filled cyan dot + ✓ glyph; now = pulsing bright cyan dot;
       next = dashed empty dot
     - The gradient progresses with --track-fill (set inline by JS)
     - Add-station at the end has a + dot affordance

   See mock for the dot/line centering math — left-of-track positions are
   load-bearing. Do not change without verifying against the rail mock. */

.rail-track {
  position: relative;
  padding-left: 28px;
}
.rail-track::before {
  content: '';
  position: absolute;
  /* Line runs from first dot center to last (add-station) dot center.
     Station dots use left:-21 with 12px width so their centers align with
     this 2px track line center. */
  left: 13px;
  top: 21px;
  bottom: 21px;
  width: 2px;
  /* Subtle track — uses cyan-dim instead of cyan-bright so it doesn't glow. */
  background: linear-gradient(180deg,
    var(--cyan-dim) 0%,
    var(--cyan-dim) var(--track-fill, 0%),
    var(--text-ghost) var(--track-fill, 0%),
    var(--text-ghost) 100%);
  border-radius: 1px;
  opacity: 0.55;
}
.rail-track.no-line::before { display: none; }

.rail-station {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  /* Removed bg-deep — let the rail panel show through so stations don't
     feel like raised cards competing with the composer's pane. */
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 9px 32px 8px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.2s var(--ease, ease), background 0.2s var(--ease, ease);
}
.rail-station:hover { border-color: var(--glass-border-hover); background: rgba(255,255,255,0.02); }
.rail-station::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--text-ghost);
  z-index: 1;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.rail-station.done::before {
  /* Done = muted cyan dot, no glow — done is past context, not a beacon. */
  background: var(--cyan-dim);
  border-color: var(--cyan-dim);
  box-shadow: none;
}
.rail-station.done .rail-station-check::after { content: '✓'; }
.rail-station.now {
  /* Now = subtle accent border + a touch of ambient cyan so the eye knows
     where you are, but it shouldn't outshine the composer panes. */
  border-color: rgba(34, 211, 238, 0.35);
  background: rgba(34, 211, 238, 0.04);
  box-shadow: none;
}
.rail-station.now::before {
  background: var(--cyan);
  border-color: var(--cyan-bright);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
  animation: rail-station-pulse 1.8s ease-in-out infinite;
}
.rail-station.next::before {
  background: transparent;
  border-style: dashed;
  border-color: var(--text-ghost);
}
.rail-station.next { opacity: 0.55; }

/* Editing = the in-place "you are here" station while editing a saved poll.
   Distinct from .now (a new draft): a saved/done station that gains a cyan
   ring + ambient wash so the eye lands on the poll being edited without it
   leaving its real position in the session order. */
.rail-station.done.editing {
  border-color: rgba(34, 211, 238, 0.5);
  background: rgba(34, 211, 238, 0.06);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 4px 18px rgba(34, 211, 238, 0.12);
}
.rail-station.done.editing::before {
  background: var(--cyan);
  border-color: var(--cyan-bright);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
}
.rail-station.done.editing .rail-station-title {
  color: var(--text-primary);
  font-weight: 500;
}
/* The editing station carries no check (it's the active one, not "past"). */
.rail-station.done.editing .rail-station-check::after { content: ''; }

@keyframes rail-station-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14); }
  50%      { box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.06); }
}

.rail-station-goal {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  margin-bottom: 2px;
  display: flex; align-items: center; gap: 4px;
  opacity: 0.85;
}
.rail-station-title {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.3;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rail-station.now .rail-station-title {
  color: var(--text-primary);
  font-weight: 500;
}
.rail-station-title.empty {
  color: var(--text-tertiary);
  font-style: italic;
  font-weight: 400;
}
.rail-station-check {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan-dim);
  opacity: 0.7;
}

/* Per-station hover actions — stacked vertical so the title gets full width. */
.rail-station-actions {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 3px;
}
.rail-station:hover .rail-station-actions { display: flex; }
.rail-station:hover .rail-station-check { display: none; }
.rail-station.now .rail-station-actions { display: flex; }
.rail-station-act {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rail-station-act:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  border-color: var(--glass-border-hover);
}
.rail-station-act.danger:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}
.rail-station-act:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rail-station-act:disabled:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border-color: var(--glass-border);
}

/* Add-poll station (also has a station dot for visual continuity) */
.rail-add-station {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 11px 12px;
  border: 1px dashed var(--glass-border-hover);
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  display: flex; align-items: center; gap: 8px;
}
.rail-add-station::before {
  content: '+';
  position: absolute;
  left: -21px;
  top: 14px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 2px dashed var(--text-ghost);
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.rail-add-station:hover {
  color: var(--cyan-bright);
  border-color: var(--cyan-bright);
}
.rail-add-station:hover::before {
  border-color: var(--cyan-bright);
  color: var(--cyan-bright);
}
.rail-add-station-icon { font-size: 14px; }

/* ---- Suggested next (rule-engine output, magenta AI card) -------------- */

.rail-suggest {
  margin-top: 14px;
  padding-left: 28px;
}
.rail-suggest:empty { display: none; }
.rail-suggest-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 5px;
}
.rail-suggest-label .sparkle { color: var(--magenta-bright); font-size: 10px; }

.rail-suggest-ai {
  padding: 9px 11px;
  background: rgba(217, 70, 239, 0.04);
  border: 1px solid rgba(217, 70, 239, 0.18);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.rail-suggest-ai:hover {
  background: rgba(217, 70, 239, 0.07);
  border-color: rgba(217, 70, 239, 0.30);
}
.rail-suggest-ai b { color: var(--magenta-bright); font-weight: 500; }

.rail-suggest-rec { margin-bottom: 0; }

.rail-suggest-why {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 6px;
  margin-bottom: 8px;
  line-height: 1.4;
  font-style: italic;
}
.rail-suggest-why::before {
  content: "WHY · ";
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--magenta-bright);
  font-weight: 600;
  vertical-align: 1px;
}

.rail-suggest-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 2px;
}
.rail-suggest-act {
  padding: 4px 9px;
  font-size: 11px;
  font-family: inherit;
  background: rgba(217, 70, 239, 0.10);
  border: 1px solid rgba(217, 70, 239, 0.35);
  border-radius: 999px;
  color: var(--magenta-bright);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.rail-suggest-act:hover {
  background: rgba(217, 70, 239, 0.20);
  border-color: var(--magenta-bright);
}
.rail-suggest-act.primary {
  background: var(--magenta);
  color: #fff;
  border-color: var(--magenta);
}
.rail-suggest-act.primary:hover {
  background: var(--magenta-bright);
  border-color: var(--magenta-bright);
}
.rail-suggest-act.dismiss {
  background: transparent;
  border-color: var(--glass-border);
  color: var(--text-tertiary);
  font-weight: 500;
}
.rail-suggest-act.dismiss:hover {
  color: var(--text-secondary);
  border-color: var(--text-tertiary);
}

/* ---- Bottom rail divider + CTAs ---------------------------------------- */

.rail-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 16px -4px;
}
.rail-launch {
  width: 100%;
  padding: 10px;
  /* Solid cyan-dim instead of gradient — still clearly the primary CTA but
     not a glow-emitting beacon. Brightens on hover so users get feedback. */
  background: var(--cyan-dim);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 12.5px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: none;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.rail-launch:hover {
  background: var(--cyan);
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.18);
}
.rail-launch.dim {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-tertiary);
  box-shadow: none;
  cursor: not-allowed;
}
.rail-secondary {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-weight: 600;
  font-size: 12.5px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  cursor: pointer;
}
.rail-secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

/* ---- Error bar (engine surface, mocked into chrome aesthetic) ---------- */

#error-bar:not(:empty) {
  margin: 16px 0;
  padding: 12px 16px;
  background: rgba(255, 107, 138, 0.12);
  border: 1px solid var(--danger);
  border-radius: 10px;
  color: var(--danger);
  font-size: 14px;
}

/* ---- Hidden engine elements -------------------------------------------- */

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

/* ---- Edit mode (single existing poll) ------------------------------------
   Entered via ?poll=…&edit=1. The engine (create-engine.js) loads the poll
   and fires 'crowdhum:editloaded'; goal-chrome.js sets body[data-edit-mode]
   plus a transient [data-edit-loading] while the async fetch is in flight.
   In edit mode the page focuses on one poll: the session rail and
   "Save & next" are hidden, and goal/format switching is locked (viz can't
   change after creation). Cancel = browser back (no explicit affordance yet —
   follow-up). */

/* Loading placeholder while the engine fetches the poll (auth + Firestore,
   ~1–3s cold). Hide the picker/composers + rail and show a centered note so
   the user isn't staring at the goal picker mid-load. */
body[data-edit-loading] .goal-screen,
body[data-edit-loading] .session-rail { visibility: hidden; }
body[data-edit-loading] .screen-stack { position: relative; min-height: 320px; }
body[data-edit-loading] .screen-stack::after {
  content: 'Loading your poll…';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

/* Deep-link prefill (homepage use-case pills): same pre-paint guard so the
   goal picker doesn't flash before goal-chrome switches to the pre-filled
   composer on 'crowdhum:prefillloaded'. */
body[data-prefill-loading] .goal-screen,
body[data-prefill-loading] .session-rail { visibility: hidden; }
body[data-prefill-loading] .screen-stack { position: relative; min-height: 320px; }
body[data-prefill-loading] .screen-stack::after {
  content: 'Setting up your poll…';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

/* Persistent edit-mode chrome simplification. The rail stays hidden in edit
   mode UNTIL the session is hydrated (JS adds .has-saved once sibling polls
   load); a legacy poll / failed load never gets .has-saved so the rail stays
   hidden and the composer keeps full width. */
body[data-edit-mode] .page-grid:not(.has-saved) .session-rail { display: none; }
body[data-edit-mode] .page-grid:not(.has-saved) { grid-template-columns: 1fr; }
body[data-edit-mode] .save-next-btn { display: none; }
body[data-edit-mode] #fmt-strip { display: none; }
body[data-edit-mode] .s2-titlebar-link { display: none; }

/* ---- Save & switch dialog (3-way confirm when switching polls mid-edit) ---
   Built by goal-chrome.js openEditSwitchDialog(). Glass-morphism modal on a
   blurred midnight scrim, on-brand with the design system. */
.edit-switch-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-md);
  background: rgba(6, 10, 20, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: editSwitchFade var(--duration) var(--ease-out);
}
@keyframes editSwitchFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.edit-switch-dialog {
  width: min(440px, 100%);
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  padding: var(--sp-md);
  animation: editSwitchRise var(--duration) var(--ease-spring);
}
@keyframes editSwitchRise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.edit-switch-title {
  margin: 0 0 var(--sp-xs);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}
.edit-switch-copy {
  margin: 0 0 var(--sp-md);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}
.edit-switch-copy strong {
  color: var(--text-primary);
  font-weight: 600;
}
.edit-switch-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-sm);
}
.btn-edit-switch {
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out),
              color var(--duration) var(--ease-out);
}
.btn-edit-switch.cancel,
.btn-edit-switch.discard {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}
.btn-edit-switch.cancel:hover,
.btn-edit-switch.discard:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  color: var(--text-primary);
}
.btn-edit-switch.save {
  background: var(--cyan);
  border: 1px solid var(--cyan);
  color: var(--bg-deep);
}
.btn-edit-switch.save:hover {
  background: var(--cyan-bright);
  border-color: var(--cyan-bright);
}
@media (max-width: 480px) {
  .edit-switch-actions { justify-content: stretch; }
  .btn-edit-switch { flex: 1 1 auto; }
  /* The AI prompt placeholder wraps to ~2 lines on phone widths; the empty
     textarea (rows=1) only auto-grows once the user types, so give it enough
     height up front to show the full placeholder without clipping. */
  .ai-textarea { min-height: 3em; }
}