/* cyoa-player.css
 * File purpose: StoryBlocks CYOA player styles (extracted from cyoa-player.html).
 * Primary components: tokens/themes, Home/setup, reader, Future Hand, overlays,
 * settings sheets, Creator, character library, deck builder, mobile chrome.
 * I/O: Linked from cyoa-player.html with ?v= cache-bust; no runtime inputs.
 */
:root {
  --bg: #12100e;
  --panel: #1b1815;
  --panel-2: #221e19;
  --ink: #ece6dc;
  --ink-dim: #b6ac9c;
  --ink-faint: #9a9182;   /* AA-legible caption grey (was an undeclared var falling back to #807868, which failed contrast) */
  --line: #322c25;
  --accent: #c8a45a;
  --accent-hover: #d8b569;
  --accent-ink: #1a1612;
  --signal: #c14a32;       /* pulp-noir signal red — sharp accent against the gold */
  --danger: #e08a6a;
  /* Choice surfaces are their own small stage. Keep their text/image scrims
     legible while letting the selected reading theme set the card character. */
  --choice-surface: #211b16; --choice-surface-2: #30261c;
  --choice-ink: #f5eee4; --choice-ink-muted: #cbbfaf;
  --choice-active: #d1ac61; --choice-active-ink: #1a130b;
  /* Labels placed on generated media must not inherit paper-theme dark ink. */
  --media-status-surface: rgba(8, 7, 6, 0.86);
  --media-status-ink: #f8f4ed;
  --media-status-muted: #d8d1c7;
  --media-status-line: rgba(255, 255, 255, 0.34);
  /* Two intentional faces, each with a job. Display = Fraunces (the house
     editorial serif): wordmark, titles, drop-cap, chrome labels — set with
     optical sizing so big type tightens. Body = Newsreader (a screen-tuned
     reading serif): the scene prose itself, where the reader actually lives.
     The pairing is deliberate — both are warm "new old-style" serifs, so they
     share a temperature without competing; Georgia is only the fallback now. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Newsreader', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --risk: #ecae8c;        /* armed-risk accent, AA on dark panels */
  --maxw: 46rem;
  /* Chrome scales — the structural "bones". Spacing, radius, type, sized
     once here so headers/footers/overlays stay consistent. */
  --space-1: 0.3rem; --space-2: 0.5rem; --space-3: 0.7rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2.25rem;
  --radius-sm: 0.4rem; --radius-md: 0.55rem; --radius-lg: 0.8rem;
  /* Modular type scale (~1.2 minor-third), chrome end. */
  --fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-body: 0.95rem; --fs-md: 1.1rem; --fs-lg: 1.5rem; --fs-xl: 1.9rem;
  /* Reading size: the prose multiplier the reader controls (Settings → Text
     size). Prose sizes derive from this so a reader can tune comfort without
     the chrome resizing. Default 1 = ~1.075rem (17.2px) body. */
  --reading-scale: 1;
  /* Reader CONTENT scales with the a11y text-size control (--reading-scale):
     prose, choices, the action input, the chosen-action marker. App CHROME
     (deck, settings, headers, HUD labels) stays fixed on purpose. */
  --fs-prose: calc(1.075rem * var(--reading-scale));
  --fs-choice: calc(1rem * var(--reading-scale));
  --fs-action: calc(0.95rem * var(--reading-scale));
  --fs-chosen: calc(0.92rem * var(--reading-scale));
  --chrome-pad: 0.75rem;
  --body-bg: radial-gradient(140% 100% at 50% 0%, #1c1813 0%, var(--bg) 60%);
}
/* Light "paperback page" theme — warm cream stock, ink type, deeper accents
   for AA contrast on the light ground. */
:root[data-theme="light"] {
  --bg: #f3ead9; --panel: #ece1cd; --panel-2: #e3d6bd;
  --ink: #2a2017; --ink-dim: #5f5240; --ink-faint: #6f6049;
  --line: #d6c7ab; --accent: #7e5114; --accent-hover: #99662a; --accent-ink: #f7f0e2;
  --signal: #ad3318; --danger: #a8442a; --risk: #98531f;
  --choice-surface: #3b291b; --choice-surface-2: #5a3c22;
  --choice-ink: #fff7ea; --choice-ink-muted: #ead8bc;
  --choice-active: #e0ad54; --choice-active-ink: #24160a;
  --body-bg: radial-gradient(140% 100% at 50% 0%, #faf3e6 0%, var(--bg) 60%);
}
/* High-contrast theme — maximal legibility, grain suppressed below. */
:root[data-theme="contrast"] {
  --bg: #000000; --panel: #0c0c0c; --panel-2: #161616;
  --ink: #ffffff; --ink-dim: #e6e6e6; --ink-faint: #cfcfcf;
  --line: #6f6f6f; --accent: #ffd24d; --accent-hover: #ffe07a; --accent-ink: #000000;
  --signal: #ff7a5c; --danger: #ff8a6a; --risk: #ffc299;
  --choice-surface: #000; --choice-surface-2: #151515;
  --choice-ink: #fff; --choice-ink-muted: #eee;
  --choice-active: #ffd24d; --choice-active-ink: #000;
  --body-bg: #000000;
}
:root[data-theme="contrast"] body::after { display: none; }   /* grain off in high-contrast */
:root[data-theme="light"] body::after { mix-blend-mode: multiply; opacity: 0.05; }
/* Folio — cool reading paper (slate ink, teal accent). Not warm cream/terracotta. */
:root[data-theme="folio"] {
  --bg: #e7e9ec; --panel: #f4f5f7; --panel-2: #dde1e6;
  --ink: #1a2332; --ink-dim: #3d4a5c; --ink-faint: #5a6778;
  --line: #c5ccd6; --accent: #0e7c7b; --accent-hover: #129390; --accent-ink: #f4fafa;
  --signal: #b33a2b; --danger: #a8442a; --risk: #8a5a28;
  --choice-surface: #172b3c; --choice-surface-2: #234052;
  --choice-ink: #f5f8fc; --choice-ink-muted: #c2cfdb;
  --choice-active: #50d0c9; --choice-active-ink: #081617;
  --body-bg: linear-gradient(180deg, #f0f2f5 0%, var(--bg) 42%);
}
:root[data-theme="folio"] body::after { mix-blend-mode: multiply; opacity: 0.035; }
/* Neon night — teal-black with cyan signal (not purple / acid-green defaults). */
:root[data-theme="neon"] {
  --bg: #070d10; --panel: #0f171b; --panel-2: #162126;
  --ink: #e6f2f1; --ink-dim: #9bb4b2; --ink-faint: #6f8785;
  --line: #243338; --accent: #3ecfc8; --accent-hover: #62ddd6; --accent-ink: #041012;
  --signal: #ff6b4a; --danger: #e07a62; --risk: #d4a574;
  --choice-surface: #07171b; --choice-surface-2: #0d2b30;
  --choice-ink: #e9ffff; --choice-ink-muted: #a8d5d2;
  --choice-active: #3ecfc8; --choice-active-ink: #031012;
  --body-bg: radial-gradient(120% 90% at 50% -10%, #123038 0%, var(--bg) 55%);
}
/* Moss lantern — forest-floor dark; lichen accent (not neon cyan / not cream paper). */
:root[data-theme="moss"] {
  --bg: #0c1210; --panel: #141c18; --panel-2: #1b2620;
  --ink: #e4ebe4; --ink-dim: #a3b5a8; --ink-faint: #7d9185;
  --line: #2a3830; --accent: #8fbc8f; --accent-hover: #a8cfa8; --accent-ink: #0a120e;
  --signal: #d9784a; --danger: #d0886a; --risk: #c4a574;
  --choice-surface: #142019; --choice-surface-2: #263627;
  --choice-ink: #edf5ea; --choice-ink-muted: #b9cbb8;
  --choice-active: #9bc79b; --choice-active-ink: #09110b;
  --body-bg: radial-gradient(115% 85% at 40% -5%, #1a2e24 0%, var(--bg) 58%);
}
/* Ember lounge — wine-charcoal room lit by copper; warmer than neon, darker than paperback. */
:root[data-theme="ember"] {
  --bg: #140e10; --panel: #1d1518; --panel-2: #271c20;
  --ink: #f0e6e2; --ink-dim: #b9a49c; --ink-faint: #917e76;
  --line: #3a2a2e; --accent: #d4895a; --accent-hover: #e4a078; --accent-ink: #1a100c;
  --signal: #c94b5a; --danger: #e07a6a; --risk: #d4a070;
  --choice-surface: #28171b; --choice-surface-2: #47252a;
  --choice-ink: #fff0eb; --choice-ink-muted: #d9bdb6;
  --choice-active: #e59b68; --choice-active-ink: #1b0d09;
  --body-bg: radial-gradient(110% 80% at 70% -8%, #3a1c18 0%, var(--bg) 55%);
}
:root[data-font="sans"] {
  --font-display: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
}
:root[data-font="sans"] .setup-tagline {
  font-style: normal; letter-spacing: -0.01em;
}
:root[data-font="sans"] .setup-tagline-rest { font-style: normal; }
* { box-sizing: border-box; }
/* overflow-x: clip (not hidden) — `hidden` on one axis coerces overflow-y to
   `auto` per spec, which on mobile turns body into a broken scroll container
   and stops the landing from scrolling. `clip` contains horizontal bleed
   without establishing a scroll container, so vertical page scroll stays. */
html, body { margin: 0; padding: 0; overflow-x: clip; max-width: 100%; }
img { max-width: 100%; }
p, h1, h2 { overflow-wrap: anywhere; }
body {
  background: var(--body-bg);
  color: var(--ink);
  font: 16px/1.65 var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Kill double-tap zoom and the pan-around-after-pinch behavior on mobile. */
  touch-action: manipulation;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}
/* Paper grain — a faint fractal-noise overlay over everything, like cheap
   pulp newsprint catching the light. Decorative, never intercepts input. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.25rem 5rem; }
/* Reader app-shell: the header is pinned to the top and the composer/control
   deck to the bottom, with only the story column scrolling between them — so
   the chrome stays put the whole way down a long scene history. */
#reader {
  position: fixed; top: 0; left: 0; right: 0; height: 100dvh;
  display: flex; flex-direction: column;
  max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem;
}
#story {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding-bottom: 1rem; scroll-padding-bottom: 1rem;
}
/* Story column scrolls; action-surface (choices + composer) stays pinned
   to the bottom of the reader so the dock can't float over empty space. */
#story-stack {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
#story-stack > #story {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding-bottom: 0.35rem; scroll-padding-bottom: 0.5rem;
}
#action-surface {
  flex: 0 0 auto;
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column;
  background: var(--bg);
}

/* Visually hidden, still read by assistive tech. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Scene effect flash stack — centered hero toasts (transforms, achievements,
   plot points, items, bonds). Dims the stage so they read as the beat. */
.scene-effect-backdrop {
  position: fixed; inset: 0; z-index: 88;
  background: rgba(8, 7, 6, 0.52);
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
}
.scene-effect-backdrop.is-on {
  opacity: 1;
  pointer-events: auto;
}
.portrait-flash,
.scene-effect-host {
  position: fixed;
  left: 50%;
  top: 46%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(28rem, calc(100vw - 1.75rem));
  max-width: min(28rem, calc(100vw - 1.75rem));
  pointer-events: none;
}
.portrait-flash-card,
.scene-effect-card {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  width: 100%;
  margin: 0;
  min-height: 5.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--panel) 94%, var(--accent));
  color: var(--ink);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 22px 48px rgba(0, 0, 0, 0.55);
  text-align: left;
  cursor: pointer;
  font: inherit;
  opacity: 0;
  transform: translateY(0.85rem) scale(0.94);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.2,.85,.25,1);
}
/* Transform identity beat: stacked hero modal with a large plate. */
.portrait-flash-card.portrait-flash-hero {
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  padding: 0.85rem 0.85rem 1.05rem;
  width: min(22rem, calc(100vw - 1.75rem));
  margin: 0 auto;
  min-height: 0;
}
.portrait-flash-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 0.65rem;
  overflow: hidden;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--accent) 18%, var(--panel-2)),
      color-mix(in srgb, var(--signal) 12%, var(--panel-2)));
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}
.portrait-flash-hero .portrait-flash-img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  object-fit: cover;
}
.portrait-flash-hero .portrait-flash-pending {
  width: 4.25rem;
  height: 4.25rem;
  background: color-mix(in srgb, var(--panel) 55%, transparent);
}
.portrait-flash-wait {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-dim);
}
.portrait-flash-hero .portrait-flash-body {
  padding: 0 0.35rem 0.1rem;
  text-align: center;
}
.portrait-flash-card.is-in,
.scene-effect-card.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.portrait-flash-card.is-out,
.scene-effect-card.is-out {
  opacity: 0;
  transform: translateY(0.4rem) scale(0.97);
}
.portrait-flash-img {
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 0.55rem;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.scene-effect-glyph {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent) 22%, var(--panel-2));
  color: var(--accent);
}
.scene-effect-glyph svg { width: 1.7rem; height: 1.7rem; }
.portrait-flash-body,
.scene-effect-body { min-width: 0; flex: 1 1 auto; }
.portrait-flash-name,
.scene-effect-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.portrait-flash-reason,
.scene-effect-detail {
  margin-top: 0.28rem;
  font-size: 0.92rem;
  color: var(--ink-dim);
  line-height: 1.35;
}
.scene-effect-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.2rem;
}
@media (max-width: 560px) {
  .portrait-flash,
  .scene-effect-host {
    top: 42%;
    width: min(22.5rem, calc(100vw - 1.25rem));
  }
  .portrait-flash-card,
  .scene-effect-card {
    min-height: 4.75rem;
    padding: 0.9rem 1rem;
    gap: 0.8rem;
  }
  .portrait-flash-card.portrait-flash-hero {
    width: min(20rem, calc(100vw - 1.25rem));
    padding: 0.7rem 0.7rem 0.9rem;
  }
  .portrait-flash-img { width: 4.5rem; height: 4.5rem; }
  .portrait-flash-hero .portrait-flash-img { width: 100%; height: 100%; }
  .portrait-flash-name,
  .scene-effect-title { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-flash-card,
  .scene-effect-card { transition: opacity 0.01s linear; transform: none; }
  .scene-effect-backdrop { transition: none; }
}

button {
  font-family: inherit; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 0.5rem; transition: border-color .15s, background .15s, transform .05s;
}
button:hover { border-color: var(--accent); }
button:active { transform: translateY(1px); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The StoryBlocks wordmark — pulp-paperback identity, on setup + reader.
   Fraunces display with a sharp red signal mark. */
.wordmark {
  font-family: var(--font-display); font-weight: 900; font-size: 0.82rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.4em;
}
.wordmark::before { content: ''; width: 0.34em; height: 1em; background: var(--signal); flex-shrink: 0; }

/* Header (reader): float the Menu hub only — no full-width bar that covers prose. */
header.bar {
  flex: 0 0 0;
  position: relative;
  z-index: 45;
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  pointer-events: none; /* let prose receive clicks under the float */
}
header.bar.bar-float {
  /* keep in document flow for grid area on desktop; zero height so text isn't blocked */
  overflow: visible;
}
header.bar .utility-cluster {
  position: absolute;
  top: 0.35rem;
  right: 0;
  pointer-events: auto;
}
header.bar .save-status {
  position: absolute;
  top: 0.55rem;
  left: 0;
  margin: 0;
  pointer-events: auto;
  z-index: 46;
}
/* Save-status: hidden when all saved; a quiet warning chip when degraded. */
.save-status {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
  color: var(--signal); border: 1px solid var(--signal); border-radius: 0.3rem;
  padding: 0.1rem 0.45rem; white-space: nowrap; flex-shrink: 0;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}
.text-btn { font-size: 0.78rem; padding: 0.4rem 0.7rem; color: var(--ink-dim); background: transparent; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; min-width: 44px; min-height: 44px; padding: 0; border-radius: 0.45rem;
  color: var(--ink-dim); background: transparent; border: 1px solid var(--line);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn.active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.icon-btn svg { display: block; }

/* Settings overlay rows */
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--line); min-width: 0;
}
.settings-row label, .settings-row > span { font-size: 0.9rem; color: var(--ink); min-width: 0; }
/* Checkbox: same panel/line language as buttons, not bare OS chrome. */
.settings-check {
  flex: 0 0 auto;
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 0.28rem;
  background: var(--panel);
  color: var(--accent-ink);
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  display: grid;
  place-content: center;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.settings-check:hover { border-color: var(--accent); }
.settings-check:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}
.settings-check:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.settings-check:checked::before {
  content: '';
  width: 0.32rem;
  height: 0.55rem;
  border: solid var(--accent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-0.05rem, -0.05rem);
}
.settings-hint { font-size: 0.72rem; color: var(--ink-faint); margin: 0.2rem 0 0; line-height: 1.4; }
/* Terse micro-note: a few words under a control, only where the label isn't
   self-evident. The full explanation lives in the control's title tooltip. */
.settings-note { font-size: 0.68rem; font-style: italic; color: var(--ink-faint); margin: 0.05rem 0 0; line-height: 1.3; }
.lb-provider-note {
  color: var(--ink-faint);
  font-size: 0.66rem;
  line-height: 1.3;
  margin: 0.15rem 0 0;
}
/* Grouped sections with a masthead eyebrow per concern (Reading / Rendering /
   This story / Diagnostics) — settings read like a paperback's colophon. */
.settings-section { margin-top: 1.15rem; }
.settings-section:first-of-type { margin-top: 0.5rem; }
.settings-eyebrow {
  font-family: var(--font-display); font-weight: 900; font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 0.2rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line);
}
.settings-row.no-rule { border-bottom: 0; padding-bottom: 0.15rem; }
.settings-row.muse-row { align-items: flex-start; }
/* Label above a multi-line control (remix steer, long notes). */
.settings-row-stack {
  flex-direction: column; align-items: stretch; gap: 0.35rem;
}
.settings-row-stack label { flex: 0 0 auto; }
.remix-steer-input {
  width: 100%; min-height: 4.2rem; max-height: 40vh; resize: vertical;
  line-height: 1.4; field-sizing: content;
}
/* Preferences tab: full-width taste textareas (not the short max-width style-input). */
.taste-pref-input {
  width: 100%;
  max-width: none;
  min-height: 4rem;
  max-height: 30vh;
  resize: vertical;
  line-height: 1.4;
  field-sizing: content;
}
.taste-pref-chips {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.taste-pref-chip {
  font-family: inherit;
  font-size: 0.72rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink-dim);
  cursor: pointer;
  line-height: 1.2;
}
.taste-pref-chip:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.muse-control { display: grid; gap: .28rem; flex: 1 1 auto; min-width: 0; max-width: 16rem; }
.muse-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.35rem;
  margin: 0.55rem 0;
  border-radius: 999px;
  background: var(--line);
  outline: none;
  cursor: pointer;
}
.muse-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent-ink) 25%, var(--accent));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.muse-control input[type="range"]::-moz-range-thumb {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent-ink) 25%, var(--accent));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.muse-control input[type="range"]::-moz-range-track {
  height: 0.35rem;
  border-radius: 999px;
  background: var(--line);
}
.muse-control input[type="range"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 4px;
}
#muse-intoxication-readout {
  font: 700 .78rem var(--font-display); color: var(--accent); letter-spacing: .02em;
}
.settings-actions-safe { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.55rem; }

/* Settings → This story: grouped tools (manage / fork / replace) */
.story-tools-group {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.story-tools-group:first-of-type {
  margin-top: 0.35rem;
  padding-top: 0;
  border-top: 0;
}
.story-tools-label {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.story-tools-danger .story-tools-label { color: var(--signal); }
.story-tool-warn {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--signal);
  opacity: 0.9;
}
.story-tools-row { padding-top: 0; }
.story-tool-card {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-top: 0.5rem;
  padding: 0.65rem 0.7rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--panel-2) 55%, transparent);
}
.story-tool-card:first-child { margin-top: 0; }
.story-tool-card-danger {
  border-color: color-mix(in srgb, var(--signal) 28%, var(--line));
  background: color-mix(in srgb, var(--signal) 6%, var(--panel));
}
.story-tool-card-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.story-tool-primary { font-weight: 600; }
.story-tool-blurb {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--ink-dim);
}
.story-tool-field-label {
  margin-top: 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.story-tool-card .style-input,
.story-tool-card .remix-steer-input {
  width: 100%;
  box-sizing: border-box;
}
.story-rebuild-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.story-rebuild-stack .story-tool-card { margin-top: 0; }
.settings-inline-btn {
  font-family: inherit; font-size: 0.82rem; padding: 0.4rem 0.8rem; border-radius: 0.4rem;
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line); cursor: pointer;
}
.settings-inline-btn:hover { border-color: var(--accent); }
.settings-inline-btn.danger { color: var(--danger); }
.settings-inline-btn.danger:hover { border-color: var(--danger); }
.settings-inline-btn.danger.confirm { color: var(--accent-ink); background: var(--danger); border-color: var(--danger); }
.settings-inline-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.settings-inline-btn:disabled:hover { border-color: var(--line); }
.settings-panel {
  overflow: hidden;
  padding: 0;
}
.settings-head {
  flex: 0 0 auto;
  margin: 0;
  padding: 1.15rem 3.5rem 0.85rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.settings-tabs {
  display: flex;
  gap: 0.4rem;
  flex: 0 0 auto;
  overflow-x: auto;
  padding: 0.55rem 1.4rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  scrollbar-width: thin;
}
.settings-tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0.45rem 0.8rem;
  border-radius: 0.45rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.settings-tab:hover { color: var(--ink); border-color: var(--accent); }
.settings-tab.active {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}
.settings-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.4rem 1.6rem;
}
.settings-pane[hidden] { display: none; }
.keymap-reference { display: grid; gap: .55rem; margin-top: .35rem; }
.keymap-group { margin: 0; }
.keymap-group-title {
  margin: 0 0 .28rem; color: var(--ink-faint); font: 700 .62rem var(--font-display);
  letter-spacing: .1em; text-transform: uppercase;
}
.keymap-table { width: 100%; border-collapse: collapse; }
.keymap-table th, .keymap-table td {
  padding: .38rem 0; border-bottom: 1px solid var(--line); text-align: left;
  vertical-align: top; font-size: .84rem; line-height: 1.35;
}
.keymap-table th { width: 7.5rem; color: var(--accent); font: 700 .78rem var(--font-display); white-space: nowrap; }
.keymap-table td { color: var(--ink-dim); }
.keymap-table kbd, .settings-hint kbd {
  display: inline-block; min-width: 1.15rem; padding: .08rem .34rem; margin: 0 .1rem;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: .28rem;
  background: var(--panel-2); color: var(--ink); font: 700 .72rem ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}
/* Form fields share one chrome: panel fill, 1px line, 0.4rem radius, 40px height
   — same language as .settings-inline-btn / .settings-tab. Native OS select
   chrome is stripped so dark/light themes and mobile don't diverge. */
.model-select,
.settings-row select,
select.model-select {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.3;
  max-width: 16rem;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 0.4rem 2rem 0.4rem 0.65rem;
  color: var(--ink);
  background-color: var(--panel);
  /* Dual chevron triangles in ink-dim so themes recolor without SVG. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 1.5px),
    calc(100% - 9px) calc(50% - 1.5px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.model-select:hover,
.settings-row select:hover { border-color: var(--accent); color: var(--ink); }
.model-select:focus,
.model-select:focus-visible,
.settings-row select:focus,
.settings-row select:focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: 1px;
}
.model-select:disabled,
.settings-row select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* option list: keep readable on dark themes where OS still paints white text */
.model-select option,
.settings-row select option {
  color: var(--ink);
  background: var(--panel);
}
.style-input {
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.3;
  max-width: 16rem;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0.4rem 0.65rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  transition: border-color 0.12s ease;
}
.style-input:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.style-input:focus,
.style-input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: 1px;
}
/* Settings action buttons match field height for row alignment. */
.settings-row .settings-inline-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

/* Setup — a pulp desk, not a marketing landing.
   Signature: the blank first line (seed page). Masthead + thesis sit in the
   same column as the tools; shelves recede below. */
.setup { text-align: left; padding: 1.75rem 0 2.5rem; }
.pull-refresh {
  position: fixed; top: max(.65rem, env(safe-area-inset-top)); left: 50%; z-index: 75;
  min-height: 36px; padding: .45rem .85rem; border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink); background: var(--panel);
  box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: .78rem;
  opacity: 0; transform: translate(-50%, -150%); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.pull-refresh.is-visible { opacity: 1; }
.setup h2 { font-size: 1.9rem; margin: 0 0 0.5rem; font-weight: 600; }
/* Head sits above seed/mode pills: #setup children each get an animation
   stacking context, so later siblings (`.seed`) would otherwise paint over the
   account dropdown. */
.setup-head {
  position: relative;
  z-index: 20;
  max-width: 38rem; margin: 0 auto var(--space-5);
  text-align: left;
}
.setup-head-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  flex-wrap: nowrap;
}
.setup-head .wordmark {
  display: inline-flex; font-size: 0.92rem; letter-spacing: 0.16em;
}
/* Account menu — only home chrome for Settings (no second gear). */
.account-menu {
  position: relative;
  flex: 0 0 auto;
  z-index: 1;
}
.account-menu[hidden] { display: none !important; }
.account-menu-trigger {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.4rem; max-width: min(12rem, 46vw); padding: 0.28rem 0.55rem 0.28rem 0.35rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink);
  font: 600 0.78rem/1 var(--font-display); letter-spacing: 0.02em;
  cursor: pointer;
}
.account-menu-trigger:hover,
.account-menu-trigger:focus-visible,
.account-menu.is-open .account-menu-trigger {
  border-color: var(--accent); color: var(--accent); outline: none;
}
.account-menu-avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
  color: var(--accent); font: 700 0.72rem/1 var(--font-display);
  text-transform: uppercase;
}
.account-menu-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-menu-caret {
  flex: 0 0 auto; width: 0.55rem; height: 0.55rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.1rem); opacity: 0.7;
}
.account-menu.is-open .account-menu-caret { transform: rotate(225deg) translateY(0.05rem); }
.account-menu-panel {
  position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 30;
  min-width: 12.5rem; padding: 0.4rem;
  border: 1px solid var(--line); border-radius: 0.6rem;
  background: var(--panel);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column; gap: 0.08rem;
}
.account-menu-panel[hidden] { display: none !important; }
.account-menu-item {
  display: flex; align-items: center; gap: 0.45rem;
  width: 100%; min-height: 2.55rem; padding: 0.45rem 0.7rem;
  border: 0; border-radius: 0.45rem; background: transparent;
  color: var(--ink); font: 500 0.88rem/1.2 inherit; text-align: left; cursor: pointer;
}
.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); outline: none;
}
.account-menu-item.is-danger { color: var(--ink-dim); }
.account-menu-item.is-danger:hover,
.account-menu-item.is-danger:focus-visible { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.account-menu-sep {
  height: 1px; margin: 0.25rem 0.35rem; background: var(--line); border: 0;
}
/* Dim the page under an open menu so pills can't compete and taps dismiss cleanly. */
.account-menu-backdrop {
  position: fixed; inset: 0; z-index: 15;
  background: rgba(8, 7, 6, 0.45);
  border: 0; padding: 0; margin: 0; cursor: default;
}
.account-menu-backdrop[hidden] { display: none !important; }
/* Thesis line: first clause is the command; rest is the promise. */
.setup-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-size: clamp(1.35rem, 3.6vw, 1.75rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-style: normal;
  margin: var(--space-4) 0 0;
  max-width: 22em;
}
.setup-tagline-rest {
  display: inline;
  color: var(--ink-dim);
  font-weight: 500;
  font-style: italic;
}
.setup-footer {
  max-width: 38rem; margin: 2.5rem auto 0; padding: 1.25rem 0 0.25rem;
  border-top: 1px solid var(--line); text-align: left;
}
.setup-footer-label {
  margin: 0 0 0.45rem; font: 700 0.62rem/1 var(--font-display);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}
.setup-footer-nav {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: baseline;
}
.setup-footer-nav a {
  color: var(--ink-dim); font-size: 0.82rem; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.setup-footer-nav a:hover, .setup-footer-nav a:focus-visible {
  color: var(--accent); border-bottom-color: var(--accent); outline: none;
}
/* One orchestrated reveal on the front door — a staggered rise, like a title
   sequence. Disabled under prefers-reduced-motion by the global block. */
@keyframes riseIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
#setup > * { animation: riseIn 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
#setup .seed { animation-delay: 0.05s; }
#setup .library-section { animation-delay: 0.14s; }
header.bar { animation: riseIn 0.5s ease both; }
.begin {
  font-size: 1rem; padding: 0.7rem 1.8rem; font-weight: 600;
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.begin:hover { background: var(--accent-hover); }

.or { display: flex; align-items: center; gap: 0.75rem; max-width: 30rem; margin: 2rem auto 1rem; color: var(--ink-dim); font-size: 0.8rem; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* z-index under .setup-head so the account menu paints above mode pills. */
.seed { position: relative; z-index: 1; max-width: 38rem; margin: 0 auto 2.25rem; text-align: left; }
.seed label { display: block; font-size: 0.88rem; color: var(--ink-dim); margin-bottom: 0.5rem; }
/* Lead label for the manuscript page — not a form-field caption. */
.seed-lead {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.55rem;
}
/* Quick seed as a manuscript page: first line of the story, not a chat bar.
   No left accent rail — the field is a clean page, not a callout strip. */
.seed-chatbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 0.45rem 0.55rem;
  align-items: end;
  padding: 0.9rem 0.9rem 0.7rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 55%, var(--panel)) 0%, var(--panel) 100%);
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  box-shadow: 0 14px 36px -22px rgba(0, 0, 0, 0.55);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.seed-chatbar:focus-within {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  box-shadow: 0 18px 42px -20px color-mix(in srgb, var(--accent) 35%, transparent);
}
.seed-chatbar #seed-input,
.seed-chatbar textarea {
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  width: 100%;
  min-height: 5.25rem;
  max-height: 14rem;
  resize: vertical;
  box-sizing: border-box;
  margin: 0;
  padding: 0.15rem 0.2rem 0.35rem;
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  outline: none;
}
.seed-chatbar #seed-input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
  opacity: 0.92;
}
.seed-chatbar-acts {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.seed-enhance-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 2.5rem; margin-right: auto; padding: 0.35rem 0.75rem;
  border: 1px solid var(--line); border-radius: 0.5rem;
  background: transparent; color: var(--ink-dim);
  font: 600 0.74rem/1 var(--font-display); letter-spacing: 0.04em;
  cursor: pointer;
}
.seed-enhance-btn:hover,
.seed-enhance-btn:focus-visible {
  color: var(--accent); border-color: var(--accent); outline: none;
}
.seed-enhance-btn:disabled {
  opacity: 0.55; cursor: wait;
}
.seed-enhance-btn svg { display: block; flex: 0 0 auto; }
.seed-chatbar .seed-pin-add {
  width: 2.5rem; height: 2.5rem; min-width: 44px; min-height: 44px;
  padding: 0;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  cursor: pointer;
}
.seed-chatbar .seed-pin-add:hover,
.seed-chatbar .seed-pin-add[aria-expanded="true"] {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--accent);
}
.seed-chatbar .seed-btn.send {
  width: 2.5rem; height: 2.5rem; min-width: 44px; min-height: 44px;
  padding: 0;
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.seed-chatbar .seed-btn.send:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}
/* Cast size + length knobs shared by Quick seed and Build-with-cards. */
.seed-setup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.55rem;
}
.seed-setup-field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
  margin: 0;
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.seed-setup-label {
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.seed-setup-select {
  width: 100%;
  min-height: 40px;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.seed-setup-select:focus {
  outline: none;
  border-color: var(--accent);
}
.seed-pins { position: relative; margin-top: 0.55rem; }
.seed-pins-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.seed-pins-chips:empty { display: none; }
.seed-pin-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%;
  padding: 0.28rem 0.35rem 0.28rem 0.55rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); font-size: 0.78rem; line-height: 1.2;
}
.seed-pin-chip[data-kind="character"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.seed-pin-chip[data-kind="artStyle"] { border-color: color-mix(in srgb, color-mix(in srgb, var(--accent) 55%, var(--ink-dim)) 50%, var(--line)); }
.seed-pin-chip[data-kind="special"] { border-color: color-mix(in srgb, var(--signal) 40%, var(--line)); }
.seed-pin-chip[data-kind="location"] { border-color: color-mix(in srgb, color-mix(in srgb, var(--accent) 35%, var(--ink)) 45%, var(--line)); }
.seed-pin-chip .seed-pin-kind {
  font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.seed-pin-chip .seed-pin-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem;
}
.seed-pin-chip .seed-pin-x {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border: none; border-radius: 50%;
  background: transparent; color: var(--ink-dim); cursor: pointer; font-size: 1rem; line-height: 1;
}
.seed-pin-chip .seed-pin-x:hover { color: var(--ink); background: var(--panel-2); }
.seed-pins-hint {
  margin: 0.35rem 0 0; font-size: 0.72rem; color: var(--ink-faint); line-height: 1.35;
}
.seed-pin-sheet {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end;
  justify-content: center; background: rgba(0,0,0,.52); padding: 0;
  overscroll-behavior: none; touch-action: none;
}
.seed-pin-sheet[hidden] { display: none; }
.seed-pin-sheet-card {
  width: min(26rem, 100%); max-height: min(88vh, calc(100dvh - 0.75rem));
  max-height: min(88dvh, calc(100dvh - 0.75rem));
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 0.9rem 0.9rem 0 0;
  padding: 0.45rem 1rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px rgba(0,0,0,.25);
}
.seed-pin-sheet-grab {
  width: 2.4rem; height: 0.28rem; margin: 0.2rem auto 0.65rem;
  border-radius: 999px; background: var(--line);
}
.seed-pin-sheet-card h3 { margin: 0 0 0.55rem; font-size: 1.05rem; font-family: var(--font-display); }
.seed-pin-pick {
  display: flex; flex-direction: column; gap: 0.4rem; margin: 0.2rem 0 0.35rem;
}
.seed-pin-pick button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  width: 100%; text-align: left; min-height: 3.1rem;
  padding: 0.7rem 0.8rem; border-radius: 0.55rem; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font: inherit;
}
.seed-pin-pick button strong {
  font-family: var(--font-display); font-size: 0.92rem; font-weight: 700;
}
.seed-pin-pick button span {
  font-size: 0.78rem; color: var(--ink-dim); line-height: 1.35;
}
.seed-pin-pick button:hover, .seed-pin-pick button:focus-visible {
  border-color: var(--accent); outline: none;
}
.seed-pin-sheet-card[data-mode="pick"] .seed-pin-sheet-modes,
.seed-pin-sheet-card[data-mode="pick"] .seed-pin-save { display: none; }
.seed-pin-sheet-card .seed-pin-sheet-note {
  margin: 0 0 0.55rem; font-size: 0.82rem; color: var(--ink-dim); line-height: 1.4;
}
.seed-pin-sheet-card .seed-pin-sheet-note:empty { display: none; }
.seed-pin-sheet-card label {
  display: block; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0.55rem 0 0.25rem;
}
.seed-pin-sheet-card input,
.seed-pin-sheet-card textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 0.45rem; padding: 0.55rem 0.65rem;
}
.seed-pin-style-chips {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin: 0.35rem 0 0.55rem; max-height: 9rem; overflow: auto;
}
.seed-pin-style-chip {
  font: inherit; font-size: 0.78rem; padding: 0.3rem 0.55rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2); color: var(--ink-dim); cursor: pointer;
}
.seed-pin-style-chip:hover,
.seed-pin-style-chip:focus-visible {
  border-color: var(--accent); color: var(--ink); outline: none;
}
.seed-pin-sheet-card textarea { min-height: 4.5rem; resize: vertical; }
.seed-pin-sheet-modes { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.seed-pin-sheet-modes button {
  flex: 1; font: inherit; font-size: 0.82rem; padding: 0.45rem 0.5rem;
  border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg);
  color: var(--ink-dim); cursor: pointer;
}
.seed-pin-sheet-modes button[aria-pressed="true"] {
  border-color: var(--accent); color: var(--ink); background: var(--panel-2);
}
.seed-pin-sheet-actions {
  display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem;
}
.seed-pin-sheet-actions button {
  font: inherit; font-weight: 600; padding: 0.55rem 0.9rem; border-radius: 0.45rem;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer;
}
.seed-pin-sheet-actions .seed-pin-save {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #1a150c);
}
.seed-char-pick-list {
  display: flex; flex-direction: column; gap: 0.45rem;
  max-height: min(58vh, 58dvh); overflow-y: auto; overscroll-behavior: contain;
  margin: 0.15rem 0 0.25rem; padding-right: 0.1rem;
}
.seed-char-pick {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.7rem;
  align-items: center; width: 100%; text-align: left;
  min-height: 4.1rem; padding: 0.45rem 0.55rem; border-radius: 0.55rem; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit;
}
.seed-char-pick:hover:not(:disabled),
.seed-char-pick:focus-visible:not(:disabled) {
  border-color: var(--accent); outline: none;
}
.seed-char-pick:disabled { opacity: 0.55; cursor: default; }
.seed-char-pick-thumb {
  width: 3.4rem; height: 3.4rem; border-radius: 0.4rem; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font: 700 1.15rem var(--font-display); color: var(--ink-dim);
}
.seed-char-pick-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.seed-char-pick-thumb.empty { background: color-mix(in srgb, var(--panel-2) 80%, var(--accent)); }
.seed-char-pick-meta { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.seed-char-pick-meta strong {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seed-char-pick-meta span {
  font-size: 0.76rem; color: var(--ink-dim); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.seed-status { min-height: 1.2rem; margin-top: 0.6rem; font-size: 0.85rem; color: var(--accent); font-style: italic; }

/* Desktop stage (>=1100px): the reader becomes a two-column spread — prose
   keeps its book measure on the left, the current scene's plate rides a
   persistent right rail. The plate wrapper is MOVED (not cloned) into
   #stage-slot by hoistArtToStage(), so pending/carry/regenerate behavior
   travels with it; superseded plates return inline to their scene block,
   keeping the scrollback an illustrated transcript. */
#stage { display: none; }
@media (min-width: 1100px) {
  #reader.has-stage {
    max-width: min(98rem, calc(100vw - 2rem));
    display: grid;
    /* Cap stage column so cover crop does not side-slice faces on ultrawide. */
    grid-template-columns: minmax(28rem, 43rem) minmax(26rem, min(34rem, 1fr));
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "bar bar"
      "stack stage"
      "action stage";
    justify-content: center;
    column-gap: 1.25rem;
    overflow: hidden;
  }
  #reader.has-stage > header.bar {
    grid-area: bar;
    column-gap: 0.85rem;
  }
  /* The one-line mobile summary is desktop-redundant: the Stage rail owns state. */
  #reader.has-stage > .state-toggle { display: none; }
  #reader.has-stage > #story-stack {
    grid-area: stack; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
  }
  #reader.has-stage > #action-surface { grid-area: action; }
  #reader.has-stage > #stage {
    grid-area: stage; display: flex; flex-direction: column; min-height: 0;
    padding: 0;
  }
  .stage-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .stage-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
  /* Hide scrollbar only on the plate (full-bleed image). Cast/ledger keep a thin cue. */
  #reader.has-stage #story,
  #reader.has-stage #stage-plate.stage-panel {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #reader.has-stage #story::-webkit-scrollbar,
  #reader.has-stage #stage-plate.stage-panel::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  #reader.has-stage #stage-cast.stage-panel,
  #reader.has-stage #stage-ledger.stage-panel {
    scrollbar-width: thin;
    padding: 0.25rem 0.2rem 0.75rem;
  }
  #stage-cast.stage-panel, #stage-ledger.stage-panel { padding-top: 0.2rem; }
  /* IMAGE mode: full-bleed. The panel gives its whole height to the plate and
     the plate fills it, minimal chrome — the picture owns the column. */
  #stage-plate.stage-panel { overflow: hidden; padding: 0; }
  .stage-slot {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    align-items: stretch;
    background: #0c0b0a;
  }
  .stage-slot:empty {
    min-height: 12rem;
    background: var(--panel, #141210);
    border: 1px dashed rgba(218, 205, 180, 0.28);
  }
  #stage .scene-plate {
    flex: 1 1 auto; min-height: 0;
    width: 100%; max-width: none; margin: 0;
    display: flex; flex-direction: column;
    background: #0c0b0a;
  }
  #stage .scene-art {
    flex: 1 1 auto; min-height: 0;
    margin: 0; width: 100%; height: auto; max-width: none; max-height: none;
    aspect-ratio: auto;
    display: block;
    overflow: hidden;
    border: 0; border-radius: 0; box-shadow: none;
    background: #0c0b0a;
  }
  /* Ready plates hug the rail; cover fills the tall column.
     Portrait generation (effectiveSceneAspect → 3:4 on stage) minimizes crop. */
  #stage .scene-art.ready {
    width: 100%; height: 100%; max-width: none;
  }
  #stage .scene-art img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%; max-width: none; max-height: none;
    object-fit: cover;
    object-position: center 35%;
  }
  #stage .scene-art.ready.fit-mismatch::before {
    content: '';
    position: absolute; inset: -1rem; z-index: 0;
    background: var(--scene-art-backdrop) center 35% / cover no-repeat;
    filter: blur(18px) brightness(0.34) saturate(0.72);
    transform: scale(1.08);
  }
  #stage .scene-art.ready.fit-mismatch img { object-fit: contain; object-position: center; }
  #stage .scene-art.carry {
    background-size: cover;
    background-position: center 35%;
  }
  /* Pending/failed: fill the slot; center status copy on the tall rail. */
  #stage .scene-art.pending,
  #stage .scene-art.failed {
    width: 100%; height: 100%; max-width: none;
    aspect-ratio: auto;
    min-height: 0;
    position: relative;
  }
  #stage .scene-art.pending::after,
  #stage .scene-art.failed::after {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    padding: 1rem;
    pointer-events: none;
    text-align: center;
  }
  #stage .scene-vitals {
    flex: 0 0 auto;
    max-height: min(16rem, 38vh);
    overflow-y: auto;
    border-radius: 0;
    border-width: 1px 0 0;
    border-color: rgba(218, 205, 180, 0.34);
  }
  #stage .scene-vitals-people { grid-template-columns: 1fr; }
  #stage .scene-vitals.is-expanded { max-height: min(22rem, 52vh); }
}

/* --- Colophon mode-rail: a printed tab strip (roving tablist) --- */
.stage-rail {
  flex: 0 0 auto; display: flex; align-items: center;
  margin: 0 0 0.45rem; padding: 0 0 0.35rem;
  border-bottom: 1px solid rgba(218, 205, 180, 0.42);
}
.stage-tabs { display: flex; gap: 0.1rem; }
.mode-pin {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  margin-left: auto; padding: 0.3rem 0.45rem 0.45rem;
  display: inline-flex; align-items: center; color: var(--ink-faint);
}
.mode-pin:hover { color: var(--ink-dim); }
.mode-pin[aria-pressed="true"] { color: var(--signal); }
.mode-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.stage-folio {
  margin-left: auto;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mode-pin:not([hidden]) + .stage-folio { margin-left: 0.35rem; }
.mode-tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  padding: 0.35rem 0.7rem 0.5rem; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-variant: small-caps; color: var(--ink-faint);
}
.mode-tab:hover { color: var(--ink-dim); }
.mode-tab[aria-selected="true"] { color: var(--accent); }
/* The active mark: a sharp signal-red underline nib, pulp-colophon. */
.mode-tab[aria-selected="true"]::after {
  content: ''; position: absolute; left: 0.7rem; right: 0.7rem; bottom: -1px;
  height: 2px; background: var(--signal);
}
.mode-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* CAST — a portrait grid of tiles (lead line = bond TIER, not looks) */
.cast-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.55rem; padding: 0.1rem 0.1rem 0.4rem;
}
.cast-tile {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem;
  padding: 0.5rem; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0.6rem;
  color: var(--ink); font: inherit;
}
.cast-tile:hover { border-color: var(--accent); }
.cast-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cast-portrait {
  width: 100%; aspect-ratio: 3 / 4; border-radius: 0.4rem; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.cast-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cast-portrait .char-initial { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--ink-dim); }
.cast-portrait.char-you-mark { color: var(--accent); }
.cast-name { font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; color: var(--ink); line-height: 1.1; }
.cast-lead { font-size: 0.74rem; color: var(--accent); }
.cast-mood { font-size: 0.72rem; color: var(--ink-dim); font-style: italic; }
.cast-you-line { font-size: 0.72rem; color: var(--ink-dim); }
/* Doing-now: the character's in-scene ACTION (pose), never their look. */
.cast-doing { font-size: 0.72rem; color: var(--ink-faint); line-height: 1.35; }
.cast-tile.cast-you { border-color: rgba(200,164,90,0.5); }
/* Known cast with a portrait who are not in this scene — still listed, muted. */
.cast-tile.is-offstage {
  opacity: 0.48;
  filter: grayscale(0.4);
}
.cast-tile.is-offstage .cast-lead { color: var(--ink-dim); }
.cast-tile.is-offstage:hover,
.cast-tile.is-offstage:focus-visible {
  opacity: 0.78;
  filter: grayscale(0.15);
}
@media (prefers-reduced-motion: reduce) {
  .cast-tile.is-offstage:hover,
  .cast-tile.is-offstage:focus-visible { filter: grayscale(0.4); opacity: 0.7; }
}

/* Pull-down character detail card over the stage/sheet */
.char-pulldown {
  position: absolute; inset: 0; z-index: 5; overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 0.6rem;
  padding: 1rem; animation: pulldownIn .18s ease;
}
@keyframes pulldownIn { from { transform: translateY(-8%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .char-pulldown { animation: none; } }
.char-pulldown-close { position: absolute; top: 0.5rem; right: 0.5rem; }
#stage, .state-sheet-body { position: relative; }

/* LEDGER — glance strip + tabbed readouts */
.glance-strip {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: baseline;
  padding: 0.4rem 0.55rem; margin-bottom: 0.55rem;
  background: rgba(27,24,21,0.6); border: 1px solid var(--line); border-radius: 0.45rem;
  font-size: 0.74rem; color: var(--ink-dim);
}
.glance-item { display: inline-flex; align-items: baseline; gap: 0.28rem; }
.glance-item .glance-k {
  font-family: var(--font-display); font-weight: 600; font-size: 0.58rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint);
}
.glance-item .glance-delta { color: var(--accent); font-variant-numeric: tabular-nums; }
.glance-item .glance-delta.down { color: var(--danger); }
.ledger-tabs { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.15rem; margin-bottom: 0.55rem; border-bottom: 1px solid var(--line); }
.ledger-tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  padding: 0.3rem 0.55rem 0.45rem; position: relative;
  letter-spacing: 0.04em; color: var(--ink-faint); font: inherit; font-size: 0.72rem;
}
.ledger-tab:hover { color: var(--ink-dim); }
.ledger-tab[aria-selected="true"] { color: var(--accent); }
.ledger-tab[aria-selected="true"]::after {
  content: ''; position: absolute; left: 0.55rem; right: 0.55rem; bottom: -1px; height: 2px; background: var(--accent);
}
.ledger-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ledger-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ledger-empty { color: var(--ink-faint); font-style: italic; font-size: 0.78rem; padding: 0.4rem 0; }
.ledger-note { color: var(--ink-dim); font-size: 0.8rem; line-height: 1.45; margin: 0 0 0.65rem; }
.arc-ending-line { padding: 0.35rem 0 0.5rem; border-bottom: 1px solid rgba(218, 205, 180, 0.28); margin-bottom: 0.65rem; }
.ledger-image-card { display: flex; flex-direction: column; gap: 0.5rem; }
.ledger-image-meta { font-size: 0.72rem; color: var(--accent); }
.ledger-image-prompt { font-size: 0.76rem; line-height: 1.45; color: var(--ink-dim); overflow-wrap: anywhere; }
.ledger-change { display: flex; gap: 0.4rem; align-items: baseline; font-size: 0.78rem; color: var(--ink-dim); }
.ledger-change .ledger-delta { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger-change .ledger-delta.down { color: var(--danger); }
/* Bonds ledger rows */
.bond-row { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.bond-row:last-child { border-bottom: 0; }
.bond-row-head { display: flex; align-items: baseline; gap: 0.4rem; }
.bond-row-name { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--ink); }
.bond-row-tier { font-size: 0.72rem; color: var(--accent); }
.bond-row-delta { margin-left: auto; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.bond-row-delta.down { color: var(--danger); }
.bond-row-mood { font-size: 0.72rem; color: var(--ink-dim); font-style: italic; }
/* Arc timeline */
.arc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; padding: 0.28rem 0; }
.arc-beat { flex-basis: 100%; margin-left: 1.05rem; font-size: 0.72rem; color: var(--ink-dim); line-height: 1.4; }
.arc-mark { flex: 0 0 auto; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--line); align-self: center; }
.arc-row.found .arc-mark { background: var(--accent); }
.arc-row.current .arc-mark { background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 30%, transparent); }
.arc-role { font-family: var(--font-display); font-weight: 600; font-size: 0.76rem; text-transform: capitalize; color: var(--ink); }
.arc-row.locked .arc-role { color: var(--ink-faint); }
.arc-status { margin-left: auto; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.arc-row.current .arc-status { color: var(--signal); }
/* Inventory / achievements cards */
.ledger-card { padding: 0.4rem 0.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0.4rem; }
.ledger-card + .ledger-card { margin-top: 0.35rem; }
.ledger-card-title { font-weight: 600; font-size: 0.78rem; color: var(--ink); }
.ledger-card-val { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger-card.ledger-risk { border-color: rgba(196,92,72,0.5); }
.ledger-card.ledger-risk .ledger-card-val { color: var(--risk); }
.ledger-card.ledger-author { border-color: rgba(200,164,90,0.45); }
details.ledger-card > summary { cursor: pointer; }
.char-pulldown-body { display: flex; flex-direction: column; gap: 0.6rem; }
.ledger-card-desc { font-size: 0.72rem; color: var(--ink-dim); line-height: 1.4; margin-top: 0.15rem; }
.ach-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 0.3rem; }
.ach-bar > span { display: block; height: 100%; background: var(--accent); }
.ach-locked .ledger-card-title { color: var(--ink-faint); }

/* Mobile bottom-sheets for CAST / LEDGER (<1100px) */
.state-sheet { position: fixed; inset: 0; z-index: 61; background: rgba(6,5,4,0.6); display: flex; align-items: flex-end; }
.state-sheet-inner {
  width: 100%; max-height: min(92vh, calc(100vh - 0.75rem)); max-height: min(92dvh, calc(100dvh - 0.75rem));
  display: flex; flex-direction: column;
  background: var(--panel-2); border-top: 1px solid var(--line);
  border-radius: 0.9rem 0.9rem 0 0; padding: 0.9rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
  animation: sheetUp .2s ease;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .state-sheet-inner { animation: none; } }
.state-sheet-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.state-sheet-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); margin: 0; }
.state-sheet-close { position: static; }
.state-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Image-history filmstrip inside Ledger -> Image. */
.filmstrip { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.4rem; }
.filmstrip button { flex: 0 0 auto; width: 4.5rem; height: 6rem; padding: 0; border: 1px solid var(--line); border-radius: 0.4rem; overflow: hidden; background: var(--panel); cursor: pointer; }
.filmstrip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 1100px) { .deck-state { display: none; } }

/* Reader — inline scroll of scene blocks */
.scene { margin: 0 0 2.25rem; }
/* Loading uses the same art/prose/dock footprint as a finished scene — no center-only spinner. */
.scene.loading { padding: 0; text-align: left; }

:root { --scene-art-aspect: 16 / 9; }
/* Fixed plate size for pending AND ready so image land does not reflow the column.
   Ratio follows Settings → Scene aspect; image letterboxes with object-fit: contain. */
.scene-plate {
  width: 100%;
  max-width: min(100%, 34rem);
  margin: 0 auto 1.2rem;
}
.scene-art {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: var(--scene-art-aspect, 16 / 9);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.22);
}
.art-opener {
  appearance: none;
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: transparent; color: inherit;
}
.scene-art.ready .art-opener { cursor: zoom-in; }
.art-opener:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.art-opener:disabled { cursor: default; }
.scene-art img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  margin: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.scene-art.ready img { opacity: 1; }
.scene-art.pending, .scene-art.failed {
  display: block;
}
.scene-art.pending img, .scene-art.failed img { opacity: 0; pointer-events: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* Pending full-bleed slideshow: superseded branch plates crossfade while the
   real plate generates. Decorative only — the canonical image still owns the
   opener, alt text, gallery, and saved scene. */
.art-collage {
  position: absolute; inset: 0; z-index: 0;
  display: none;
  background: #0b0a09; overflow: hidden; pointer-events: none;
}
.scene-art.pending.has-art-collage .art-collage { display: block; }
.art-collage.is-crossfade .art-collage-tile {
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  filter: saturate(0.88) contrast(0.96);
  transition: opacity 0.72s ease;
  will-change: opacity;
}
.art-collage.is-crossfade .art-collage-tile.is-active { opacity: 0.9; }
.art-collage::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 7, 6, 0.18), rgba(8, 7, 6, 0.48));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}
@media (prefers-reduced-motion: reduce) {
  .art-collage.is-crossfade .art-collage-tile { transition: none; }
}
/* Carry the previous image forward as a dimmed fallback when no unused pregen
   has landed yet, so the reader never drops to a blank frame. */
.scene-art.carry { background-size: cover; background-position: center; background-repeat: no-repeat; }
.scene-art.pending.carry { background-color: rgba(0, 0, 0, 0.52); background-blend-mode: darken; }
.scene-art.pending.has-art-collage { background-blend-mode: normal; }
/* Debug: which model produced this image (the picker only shows the current
   selection; LoRA routing can override per-prompt). Subtle bottom-left tag. */
.art-model-tag {
  position: absolute; left: 0.35rem; bottom: 0.35rem; z-index: 3; pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.56rem; line-height: 1.15;
  max-width: calc(100% - 0.7rem); padding: 0.08rem 0.26rem; border-radius: 0.22rem;
  color: rgba(255, 255, 255, 0.46); background: rgba(8, 7, 6, 0.22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  opacity: 0.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scene-art.ready:hover .art-model-tag { opacity: 0.78; color: rgba(255, 255, 255, 0.7); }
.scene-art.pending .art-model-tag, .scene-art.failed .art-model-tag { display: none; }
.art-status {
  position: absolute; inset: 0; z-index: 2;
  display: none; place-items: center;
  padding: 1rem;
  pointer-events: none;
  color: var(--media-status-ink); font-size: 0.8rem; font-style: italic;
  text-align: center; line-height: 1.4;
}
.scene-art.pending .art-status,
.scene-art.failed .art-status { display: grid; }
.art-status-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: .48rem;
  max-width: min(30rem, calc(100% - 1rem)); padding: .52rem .72rem;
  border: 1px solid var(--media-status-line); border-radius: 999px;
  color: var(--media-status-ink); background: var(--media-status-surface);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .34); backdrop-filter: blur(5px);
}
.art-status-label { min-width: 0; overflow-wrap: anywhere; }
.art-status-dots { display: inline-flex; align-items: center; gap: .2rem; flex: 0 0 auto; }
.art-status-dot {
  display: block; width: .25rem; height: .25rem; border-radius: 50%;
  background: currentColor; animation: art-status-dot 1.1s ease-in-out infinite;
}
.art-status-dot:nth-child(2) { animation-delay: .14s; }
.art-status-dot:nth-child(3) { animation-delay: .28s; }
.scene-art.failed .art-status-dots { display: none; }
@keyframes art-status-dot {
  0%, 70%, 100% { opacity: .35; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-.16rem); }
}

/* The single on-scene image control: an icon-only "new image" button,
   bottom-right. Contrast-aware so it reads on ANY illustration — a translucent
   scrim + light hairline border carry it on light images, while the white glyph
   with a hard dark drop-shadow carries it on dark ones. Steering / model /
   download live in the lightbox (tap the image). Signal-red hover marks it as
   discard-and-redraw. */
.art-fresh {
  position: absolute; bottom: 0.5rem; right: 0.5rem; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(8, 7, 6, 0.5); border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: color .15s, border-color .15s, background .15s;
}
.art-fresh::before { content: ''; position: absolute; inset: -5px; } /* expand to 46px touch target */
.art-fresh:hover { color: var(--signal); border-color: var(--signal); background: rgba(8, 7, 6, 0.72); }
.art-fresh svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95)); }
.scene-art.pending .art-fresh { display: none; }
.art-video {
  position: absolute; bottom: 0.5rem; right: calc(0.5rem + 36px + 0.4rem); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(8, 7, 6, 0.5); border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: color .15s, border-color .15s, background .15s;
}
.art-video::before { content: ''; position: absolute; inset: -5px; }
.art-video:hover { color: var(--accent); border-color: var(--accent); background: rgba(8, 7, 6, 0.72); }
.art-video svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95)); }
.art-video:disabled { opacity: 0.55; cursor: wait; }
.scene-art.pending .art-video { display: none; }

/* Travelling scene caption: state belongs to the image it explains. This reads
   like a film contact-sheet note, not a detached game HUD. */
.scene-vitals {
  padding: 0.7rem 0.8rem 0.75rem;
  color: var(--ink-dim);
  background: color-mix(in srgb, var(--panel) 92%, #080706);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 0.7rem 0.7rem;
}
.scene-plate:has(.scene-vitals) .scene-art { border-radius: 0.7rem 0.7rem 0 0; }
.scene-vitals-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.55rem; }
.scene-vitals-folio {
  font-family: var(--font-display); font-size: 0.61rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal);
}
.scene-vitals-title {
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 650;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink);
}
.scene-vitals-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.7rem; }
.scene-vital-person { min-width: 0; }
.scene-vital-name {
  margin: 0 0 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: 0.78rem; color: var(--ink); font-weight: 650;
}
.scene-vital-person.is-you .scene-vital-name { color: var(--accent); }
.scene-vital-reading + .scene-vital-reading { margin-top: 0.35rem; }
.scene-vital-reading-head { display: flex; gap: 0.35rem; align-items: baseline; font-size: 0.66rem; }
.scene-vital-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); }
.scene-vital-value { margin-left: auto; white-space: nowrap; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.scene-vital-meter {
  position: relative; display: block; width: 100%; height: 4px; margin-top: 0.16rem;
  overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--line) 72%, transparent);
}
.scene-vital-meter.is-signed { overflow: visible; }
.scene-vital-meter.is-signed::after {
  content: ''; position: absolute; left: 50%; top: -1px; width: 1px; height: 6px;
  background: color-mix(in srgb, var(--ink-faint) 72%, transparent);
}
.scene-vital-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--accent); }
.scene-vital-fill.is-negative { background: var(--danger); }
.scene-vital-arousal .scene-vital-fill { background: var(--signal); }
.scene-vital-energy .scene-vital-fill { background: #7fbf87; }
.scene-vital-shields .scene-vital-fill { background: #75a7d8; }
.scene-vital-quiet, .scene-vital-empty { color: var(--ink-faint); font-size: 0.68rem; font-style: italic; }
.scene-vitals-more {
  appearance: none; margin: 0.6rem 0 0; padding: 0; border: 0; background: transparent;
  color: var(--accent); font: inherit; font-size: 0.68rem; cursor: pointer;
}
.scene-vitals-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.scene-vitals-changes {
  display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
  margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.scene-vitals-changes-label { margin-right: 0.1rem; font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); }
.scene-vitals-change { padding: 0.1rem 0.36rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.62rem; color: var(--ink-dim); }

.scene-prose { position: relative; }
/* Only Listen / in-flight undo float on the prose — not Back/Again/Branch. */
.scene-prose .scene-text { padding-right: 2.6rem; }
/* Move toolbar: full-width row under the prose so body text is never side-compressed. */
.scene-move-tools {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  width: 100%;
  margin: 0.45rem 0 0.15rem;
  padding: 0;
  position: static;
  z-index: auto;
}
.scene-move-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; min-width: 44px; min-height: 44px; padding: 0;
  border-radius: 0.45rem; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--ink-dim); cursor: pointer;
  box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.45);
}
.scene-move-btn:hover {
  color: var(--accent); border-color: var(--accent); background: var(--panel-2);
}
.scene-move-tools .scene-undo-btn:hover { color: var(--ink); }
.scene-move-tools .scene-redo-btn:hover { color: var(--accent); }
.scene-move-tools .scene-branch-btn:hover { color: var(--signal); }
/* Listen + in-flight stop stay corner controls on the prose itself. */
.scene-prose-btn {
  position: absolute; bottom: 0.05rem; right: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; min-width: 44px; min-height: 44px; padding: 0;
  border-radius: 0.4rem; border: 1px solid transparent; background: transparent;
  color: var(--ink-faint); cursor: pointer;
}
.scene-prose-btn:hover { color: var(--accent); border-color: var(--line); background: var(--panel); }
.scene-prose-btn.scene-listen-btn { right: 0; bottom: 0.05rem; }
.scene-prose-btn.scene-undo-btn.is-inflight {
  position: absolute; right: 0; bottom: 0.05rem;
}
/* God-steer beat: next turn in the transcript after Again (not a modal / not in prose chrome). */
.scene.scene-god-steer {
  margin: 0.35rem 0 1.1rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.god-steer-marker {
  display: flex; align-items: baseline; gap: 0.4rem;
  color: var(--accent); font-style: italic; font-size: var(--fs-chosen, 0.95rem);
  padding: 0.45rem 0 0.55rem; border-top: 1px solid var(--line); width: 100%;
}
.god-steer-arrow { align-self: center; flex: 0 0 auto; opacity: 0.9; }
.god-steer-marker-text strong {
  font-style: normal; font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700;
}
.god-steer-body {
  margin: 0;
  padding: 0.65rem 0.85rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius-md, 0.55rem);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel-2));
  display: flex; flex-direction: column; gap: 0.5rem;
}
.god-steer-copy {
  margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--ink-dim);
}
.god-steer-input {
  width: 100%; min-height: 4rem; resize: vertical;
  font-family: inherit; font-size: var(--fs-action, 0.9rem);
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 0.45rem;
  padding: 0.6rem 0.7rem; line-height: 1.45;
}
.god-steer-input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-color: var(--accent);
}
.god-steer-acts {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0.4rem;
}
.god-steer-acts .begin {
  min-height: 36px; padding: 0.4rem 0.85rem; font-size: 0.84rem;
}
.scene-prose-skip {
  margin: 0.45rem 0 0; display: inline-flex;
  font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.03em;
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.35rem 0.65rem; min-height: 34px; cursor: pointer;
}
.scene-prose-skip:hover { color: var(--accent); border-color: var(--accent); }


/* The reading hero: scene prose in the body face at the reader-controlled
   size, with generous leading and a touch of optical sizing. This is where
   the player spends every second between choices, so it gets the care. */
.scene-text {
  font-family: var(--font-body); font-size: var(--fs-prose); line-height: 1.72;
  font-optical-sizing: auto; letter-spacing: 0.003em;
}
/* Changing the a11y text-size EASES rather than snapping — including mid-stream.
   Scoped to reader content; gated off under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .scene-text, .loading-prose, .choice, .chosen-marker,
  .composer-form input, .director-form input { transition: font-size 0.2s ease; }
}
.scene-text p { margin: 0 0 1rem; }
.scene-text p:last-child { margin-bottom: 0; }
.scene-text em, .scene-text i { font-style: italic; }
.narration-cast-link {
  display: inline; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: inherit; font: inherit; line-height: inherit;
  text-decoration: underline dotted color-mix(in srgb, var(--accent) 72%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 0.18em; cursor: pointer;
}
.narration-cast-link:hover { color: var(--accent); text-decoration-style: solid; }
.narration-cast-link:focus-visible {
  color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px;
  text-decoration-style: solid;
}
.scene-text p:first-child::first-letter {
  font-family: var(--font-display); font-weight: 900; font-optical-sizing: auto;
  font-size: 3.1rem; line-height: 0.72; float: left; padding: 0.2rem 0.5rem 0 0;
  color: var(--accent);
}
/* Inline text editing — the co-authoring affordance. Subtle until wanted. */
.scene-undo-btn { color: var(--ink); }
.scene-editor { margin: 0.2rem 0; }
.scene-edit-area {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-prose); line-height: 1.6;
  color: var(--ink); background: var(--panel); border: 1px solid var(--accent);
  border-radius: var(--radius-md); padding: 0.7rem 0.85rem; resize: vertical; min-height: 6rem;
}
.scene-edit-area:focus { outline: none; border-color: var(--accent-hover); }
.scene-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.scene-edit-btn {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  padding: 0.4rem 0.9rem; border-radius: var(--radius-sm); cursor: pointer;
  color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent);
}
.scene-edit-btn.ghost { color: var(--ink-dim); background: transparent; border-color: var(--line); }
.scene-edit-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.scene-edit-btn.ghost:hover { color: var(--ink); border-color: var(--ink-dim); background: transparent; }

/* Journey overlay — history timeline (This run) + discoveries (Discovered). */
.journey-tabs { display: flex; gap: 0.5rem; margin: 0.2rem 0 1rem; border-bottom: 1px solid var(--line); }
.journey-tab {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink-dim); background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 0.4rem 0.2rem; margin-bottom: -1px; cursor: pointer;
}
.journey-tab:hover { color: var(--ink); }
.journey-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.journey-empty { color: var(--ink-faint); font-style: italic; padding: 1rem 0; }
.journey-head-line { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--ink-dim); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 0.8rem; }
.journey-head-line .ending-badge { color: var(--accent-ink); background: var(--signal); border-radius: 0.3rem; padding: 0.08rem 0.4rem; font-size: 0.85em; margin-left: 0.5rem; }
/* Timeline cards (This run) */
.jrow {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 0.6rem 0.75rem; margin: 0 0 0.55rem; color: var(--ink);
}
.jrow-wrap {
  display: flex; gap: 0.4rem; align-items: stretch; margin-bottom: 0.55rem;
}
.jrow-wrap .jrow { flex: 1; min-width: 0; margin: 0; }
.jrow-branch {
  flex: 0 0 auto; font: inherit; font-size: 0.75rem; padding: 0.4rem 0.65rem;
  border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--panel);
  color: var(--ink-dim); cursor: pointer; align-self: center;
}
.jrow-branch:hover { border-color: var(--accent); color: var(--accent); }
.jrow:hover { border-color: var(--accent); }
.jrow-head { display: flex; align-items: baseline; gap: 0.5rem; }
.jrow-num { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: var(--fs-sm); flex: 0 0 auto; }
.jrow-beat { font-size: var(--fs-body); line-height: 1.4; }
.jrow-choice { color: var(--ink-dim); font-size: var(--fs-sm); font-style: italic; margin-top: 0.25rem; }
.jrow-choice::before { content: '→ '; color: var(--accent); font-style: normal; }
.jrow-diffs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.jrow-fire { color: var(--accent); font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 0.25rem; }
/* Discovered: plot-beat checklist + endings */
.journey-section-h { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; margin: 1.1rem 0 0.55rem; }
.journey-section-h:first-child { margin-top: 0; }
.beat-row {
  display: flex; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0.2rem;
  border-bottom: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.4;
}
.beat-row .beat-mark { flex: 0 0 1.2rem; }
.beat-row.found .beat-mark { color: var(--accent); }
.beat-row.locked { color: var(--ink-faint); font-style: italic; }
.beat-row.locked .beat-mark { color: var(--ink-faint); }
.ending-item { padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--line); }
.ending-item .ending-when { color: var(--ink-faint); font-size: var(--fs-xs); display: block; margin-top: 0.15rem; }
/* Achievement rows in the Journey "Discovered" pane reuse .beat-row. */
.beat-row .beat-text .ach-title { display: block; font-weight: 600; font-style: normal; }
.beat-row.locked .beat-text .ach-title { font-weight: 500; }
.beat-row .beat-text .ach-desc { display: block; color: var(--ink-dim); font-size: var(--fs-xs); font-style: normal; }
.beat-row .beat-text .ach-progress { display: inline-block; margin-top: 0.15rem; color: var(--accent); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* Character bond bar (cast rows). A thin tinted meter + tier label. */
/* Engaged condition bars (arousal / pressured resolve) — Cast tiles only when salient. */
.cast-cond { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; width: 100%; }
.cast-cond-bar { position: relative; flex: 1 1 auto; max-width: 7rem; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.cast-cond-fill { display: block; height: 100%; border-radius: 2px; background: var(--signal); transition: width .3s ease; }
.cast-cond-resolve .cast-cond-fill { background: var(--accent); }
.cast-cond-energy .cast-cond-fill { background: var(--accent-hover, var(--accent)); }
.cast-cond-shields .cast-cond-fill { background: var(--ink-dim); }
.cast-cond-label { color: var(--ink-dim); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }

.char-bond { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; }
.char-bond-bar { position: relative; flex: 1 1 auto; max-width: 7rem; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.char-bond-fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 2px; background: var(--accent); transition: width .3s ease; }
.char-bond-fill.bond-neutral { background: var(--ink-faint); }
.char-bond-fill.bond-acquaintance { background: var(--ink-dim); }
.char-bond-fill.bond-friend { background: var(--accent); }
.char-bond-fill.bond-close { background: var(--accent-hover); }
.char-bond-fill.bond-intimate { background: var(--signal); }
.char-bond-tier { color: var(--ink-dim); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Creator: achievement editor rows — title + description on one grid line, the
   requirement grammar (kind · target · threshold) on the next, controls last.
   Mirrors the .cfg-var-row grid idiom; inputs share the .cfg-var-* chrome. */
.cfg-ach { display: flex; flex-direction: column; gap: 0.6rem; }
.cfg-ach-row {
  display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 1.4fr);
  gap: 0.4rem; align-items: center;
  padding: 0.5rem; border: 1px solid var(--line); border-radius: 0.5rem;
}
.cfg-ach-req {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto minmax(5rem, 1fr) 5rem;
  gap: 0.4rem; align-items: center;
}
.cfg-ach-ctrls { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cfg-ach-hidden { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ink-dim); font-size: var(--fs-xs); }
/* Per-card discovery badge in the stories gallery */
.story-badge.is-discovery { color: var(--ink); background: var(--panel); border-color: var(--accent); top: auto; bottom: 0.45rem; left: 0.45rem; }

/* Future Hand — 2–4 direct choice cards dealt above the bottom prompt. */
.scene-choices { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.35rem; }
.icon { vertical-align: -0.14em; flex: 0 0 auto; }
#choice-dock {
  flex: 0 0 auto;
  z-index: 1;
  padding: 0;
  background: transparent;
  position: relative;
}
#choice-dock[hidden] { display: none !important; }
.choice-refresh-btn {
  position: absolute;
  top: -.2rem;
  right: .15rem;
  z-index: 80;
  min-height: 2rem;
  padding: .3rem .48rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--media-status-ink);
  background: var(--media-status-surface);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .24);
  font: 650 .62rem/1 var(--font-display);
  letter-spacing: .035em;
  opacity: .86;
  cursor: pointer;
  transition: opacity .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}
.choice-refresh-btn:hover,
.choice-refresh-btn:focus-visible {
  color: var(--choice-active);
  border-color: var(--media-status-line);
  background: var(--media-status-surface);
  opacity: 1;
  outline: none;
}
.choice-refresh-btn:disabled { cursor: wait; opacity: .78; }
#choice-dock.is-refreshing .choice-refresh-btn .icon { animation: choice-refresh-spin .9s linear infinite; }
@keyframes choice-refresh-spin { to { transform: rotate(360deg); } }
/* Universal full-bleed choice tiles: image fills the card; copy rides a
   bottom scrim. Applies to production Future Hand and every preview mode.
   Visual + body share one grid cell so split-column / stacked layouts cannot
   resurrect a side-by-side or image-above-text card. */
html.choice-overlay-cards .future-choice,
html.choice-overlay-cards .future-hand[data-count] .future-choice,
html.choice-overlay-cards .future-hand[data-count] > .future-choice,
html.choice-overlay-cards.touch-ui .future-choice,
html.choice-overlay-cards.touch-ui .future-hand[data-count] .future-choice,
html.choice-overlay-cards.touch-ui .future-hand[data-count] .future-choice.is-mobile-current {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  isolation: isolate;
  overflow: hidden !important;
  padding: 0 !important;
  background: #0c0b0a;
}
html.choice-overlay-cards .future-choice-visual,
html.choice-overlay-cards.touch-ui .future-choice-visual {
  grid-area: 1 / 1 !important;
  position: relative !important;
  inset: auto !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  border-radius: inherit;
  display: block !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 55% 30%, rgba(200,164,90,0.16), transparent 52%),
    linear-gradient(160deg, #1a1714, #0c0b0a);
}
html.choice-overlay-cards .future-choice-visual::after {
  content: none !important;
}
html.choice-overlay-cards .future-choice-image,
html.choice-overlay-cards .future-choice-portrait,
html.choice-overlay-cards.touch-ui .future-choice-image,
html.choice-overlay-cards.touch-ui .future-choice-portrait {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 28% !important;
  display: block !important;
}
html.choice-overlay-cards .future-choice.has-portrait:not(.has-forecast):not(.has-ambient-forecast) .future-choice-portrait,
html.choice-overlay-cards .future-choice.is-forecasting.has-portrait:not(.has-forecast):not(.has-ambient-forecast) .future-choice-portrait {
  opacity: 1 !important;
  filter: saturate(.9) contrast(1.04);
}
html.choice-overlay-cards .future-choice.has-forecast .future-choice-portrait,
html.choice-overlay-cards .future-choice.has-ambient-forecast .future-choice-portrait { opacity: 0 !important; }
html.choice-overlay-cards .future-choice.has-forecast .future-choice-image {
  opacity: 1 !important;
  filter: saturate(.95) contrast(1.05);
}
html.choice-overlay-cards .future-choice.has-ambient-forecast:not(.has-forecast) .future-choice-image {
  opacity: .72 !important;
  filter: saturate(.75) contrast(1.02);
}
html.choice-overlay-cards .future-choice.has-portrait .future-choice-glyph,
html.choice-overlay-cards .future-choice.has-forecast .future-choice-glyph,
html.choice-overlay-cards .future-choice.has-ambient-forecast .future-choice-glyph,
html.choice-overlay-cards .future-choice.is-forecasting .future-choice-glyph {
  opacity: 0 !important;
}
html.choice-overlay-cards .future-choice-body,
html.choice-overlay-cards.touch-ui .future-choice-body {
  grid-area: 1 / 1 !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 / -1 !important;
  position: relative !important;
  z-index: 2 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  justify-content: flex-end !important;
  padding: 1.6rem .55rem .48rem !important;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--choice-surface) 96%, transparent) 0%,
    color-mix(in srgb, var(--choice-surface) 76%, transparent) 42%,
    color-mix(in srgb, var(--choice-surface) 20%, transparent) 72%,
    transparent 100%
  ) !important;
  pointer-events: none;
}
html.choice-overlay-cards .future-choice-body > * { pointer-events: auto; }
html.choice-overlay-cards .future-choice .choice-label {
  color: #f4efe6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
html.choice-overlay-cards .future-choice-intent,
html.choice-overlay-cards .future-choice-signals,
html.choice-overlay-cards .future-choice-forecast,
html.choice-overlay-cards .future-choice .choice-lock {
  color: rgba(244, 239, 230, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
html.choice-overlay-cards .future-choice-forecast {
  display: block !important;
  position: absolute !important;
  left: .45rem; right: .45rem; bottom: auto; top: .35rem;
  z-index: 3;
  pointer-events: none;
}
/* Production / preview Future Hand fan: keep card size, force single-cell overlay. */
html.choice-overlay-cards.dealt-hand-ui .future-hand[data-count] .future-choice {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
html.choice-overlay-cards.dealt-hand-ui .future-choice-body,
html.choice-overlay-cards.dealt-hand-ui .future-choice-visual {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
html.choice-overlay-cards.dealt-hand-ui .future-choice .choice-label {
  -webkit-line-clamp: 3;
  font-size: .72rem;
}
html.choice-overlay-cards.dealt-hand-ui .future-choice.is-drawn .choice-label {
  -webkit-line-clamp: 4;
}
.future-hand {
  position: relative;
  display: block;
  height: 10.8rem;
  max-width: 42rem;
  margin: 0 auto;
  perspective: 900px;
}
.future-choice {
  position: absolute;
  left: var(--card-left, 50%);
  bottom: -1.35rem;
  z-index: calc(2 + var(--card-index));
  width: min(12.3rem, 28%);
  height: 12rem;
  padding: 0;
  overflow: hidden;
  transform: translateX(-50%) rotate(var(--card-turn));
  transform-origin: 50% 125%;
  border: 1px solid var(--line);
  border-radius: 0.78rem;
  color: var(--choice-ink);
  background: var(--choice-surface);
  box-shadow: 0 7px 20px rgba(0,0,0,0.48);
  cursor: pointer;
  text-align: left;
  opacity: 0.92;
  transition: transform .18s cubic-bezier(.2,.85,.25,1), opacity .12s ease,
              border-color .12s ease, box-shadow .12s ease;
}
.future-hand:hover .future-choice { opacity: 0.82; }
.future-choice:hover,
.future-choice:focus-visible {
  z-index: 30;
  opacity: 1;
  transform: translateX(-50%) translateY(-0.7rem) rotate(0);
  border-color: var(--choice-active);
  box-shadow: 0 14px 32px rgba(0,0,0,0.62);
  outline: none;
}
.future-choice:active {
  transform: translateX(-50%) translateY(-0.55rem) rotate(0);
}
/* First click draws a card high from the dealt hand; a second click uses it. */
.future-choice.is-drawn {
  z-index: 40;
  opacity: 1;
  transform: translateX(-50%) translateY(-2.35rem) rotate(0);
  border-color: var(--choice-active);
  box-shadow: 0 19px 42px rgba(0,0,0,0.68);
}
.future-choice[data-risk="high"] { border-color: var(--signal); }
.future-choice[data-risk="med"] { border-color: var(--risk); }
.future-choice.choice-safety { border-color: var(--choice-active); border-style: dashed; }
.future-hand[data-count="2"] .future-choice { width: min(15.5rem, 44%); }
.future-hand[data-count="3"] .future-choice { width: min(13.5rem, 34%); }
.future-choice.locked { opacity: 0.72; cursor: not-allowed; }
/* Locked cards still expand-to-read on ribbon/hand/accordion — dim less when drawn. */
.future-choice.locked.is-drawn {
  opacity: 0.92;
  cursor: pointer;
}
.future-choice-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 6.35rem;
  overflow: hidden;
  color: var(--choice-active);
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--choice-active) 22%, transparent), transparent 48%),
    linear-gradient(135deg, var(--choice-surface-2), var(--choice-surface));
}
.future-choice-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 42%, var(--choice-surface));
  pointer-events: none;
}
.future-choice-image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.04);
  opacity: 0;
  transition: opacity .3s ease, transform .55s ease, filter .18s ease;
}
.future-choice-portrait {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 24%;
  filter: saturate(.72) contrast(1.02);
  opacity: 0;
  transition: opacity .25s ease;
}
.future-choice.has-portrait:not(.has-forecast):not(.has-ambient-forecast) .future-choice-portrait { opacity: .62; }
.future-choice.has-forecast .future-choice-portrait,
.future-choice.has-ambient-forecast .future-choice-portrait { opacity: 0; }
.future-choice.has-forecast .future-choice-image { opacity: .72; }
/* Untaken sibling pregens cycling while this card's real forecast is still cooking. */
.future-choice.has-ambient-forecast:not(.has-forecast) .future-choice-image { opacity: .5; filter: saturate(.7); }
.future-choice:hover .future-choice-image,
.future-choice:focus-visible .future-choice-image { transform: scale(1.06); filter: saturate(1); }
.future-choice.has-forecast .future-choice-glyph,
.future-choice.has-ambient-forecast .future-choice-glyph,
.future-choice.has-portrait .future-choice-glyph { opacity: 0; }
.future-choice-glyph { position: relative; z-index: 1; transition: opacity .2s ease; }
.future-choice-forecast {
  position: absolute;
  left: .45rem; bottom: .2rem;
  z-index: 2;
  max-width: calc(100% - .9rem); padding: .16rem .34rem; border-radius: .3rem;
  color: var(--media-status-ink); background: var(--media-status-surface);
  box-shadow: 0 0 0 1px var(--media-status-line);
  font: italic .65rem/1.25 var(--font-display);
  letter-spacing: .02em;
}
.future-choice-forecast:empty { display: none; }
.future-choice.is-forecasting .future-choice-visual {
  background:
    linear-gradient(110deg, transparent 25%, rgba(255,255,255,.06) 40%, transparent 55%) 0/250% 100%,
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--choice-active) 22%, transparent), transparent 48%),
    var(--choice-surface-2);
  animation: forecastShimmer 1.8s linear infinite;
}
@keyframes forecastShimmer { to { background-position: -250% 0, 0 0, 0 0; } }
.future-choice-body {
  display: flex;
  flex-direction: column;
  min-height: 5.65rem;
  padding: .42rem .55rem .5rem;
}
.future-choice-top { display: flex; align-items: center; gap: .35rem; }
.future-choice .choice-key {
  flex: 0 0 auto;
  width: 1rem; height: 1rem;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  color: var(--choice-active-ink);
  background: var(--choice-active);
  font: 700 .62rem var(--font-display);
}
.future-choice-intent {
  color: var(--choice-active);
  font: 700 .58rem var(--font-display);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.future-choice .choice-label {
  display: -webkit-box;
  margin-top: .24rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: calc(.78rem * var(--reading-scale));
  line-height: 1.24;
}
.future-choice-signals {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  margin-top: auto;
  padding-top: .3rem;
  color: var(--choice-ink-muted);
}
.future-choice-signals .choice-sig { opacity: .82; }
.future-choice .choice-lock {
  display: inline-flex; align-items: center; gap: .25rem;
  margin-top: .25rem;
  color: var(--choice-ink-muted);
  font-size: .62rem;
  line-height: 1.2;
}
.scene-choices.resolved { margin-top: 0.7rem; }
.choice-signals { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink-faint); }
.choice-lock-icon { color: var(--ink-faint); }
.choice-pager { display: none; }
@media (max-width: 620px), (hover: none) {
  #choice-dock {
    min-width: 0;
    width: 100%;
  }
  .future-hand {
    display: block;
    gap: .5rem;
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: .35rem 0 1rem;
    overflow: visible;
  }
  .future-choice {
    position: relative;
    left: auto; bottom: auto;
    display: none;
    width: 100%;
    min-width: 0;
    height: 6.6rem;
    transform: none;
    grid-template-columns: minmax(0, 1fr);
    opacity: 1;
    min-height: 8.5rem;
    height: 8.5rem;
  }
  .future-choice.is-mobile-current { display: grid; }
  /* The desktop 2/3-card width selectors are more specific than the base
     mobile card rule. Reset them at equal specificity or a three-choice
     scene collapses every card to 34% of its grid cell. */
  .future-hand[data-count] .future-choice { width: 100%; }
  .future-hand:hover .future-choice { opacity: 1; }
  .future-choice:hover,
  .future-choice:focus-visible { transform: translateY(-1px); }
  .future-choice:active { transform: translateY(1px); }
  .future-choice.is-drawn {
    transform: translateY(-0.8rem);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
  }
  .future-choice-visual { height: 100%; }
  .future-choice-body { min-height: 0; padding: .42rem .5rem; }
  .future-choice .choice-label { -webkit-line-clamp: 3; font-size: .74rem; }
  .future-choice-signals { gap: .2rem; padding-top: .15rem; }
  .future-choice-forecast { display: none; }
  .choice-pager {
    display: block;
    position: absolute;
    inset: .35rem 0 auto;
    height: 6.6rem;
    pointer-events: none;
  }
  .choice-pager-btn {
    position: absolute;
    top: 50%;
    width: 2.4rem;
    min-height: 44px;
    padding: 0;
    transform: translateY(-50%);
    color: var(--ink-dim);
    background: var(--panel);
    border-radius: 999px;
    font: 700 1.45rem/1 var(--font-display);
    pointer-events: auto;
  }
  .choice-pager-btn:first-child { left: 0; }
  .choice-pager-btn:last-child { right: 0; }
  .choice-pager-status {
    position: absolute;
    left: 50%;
    bottom: -.7rem;
    min-width: 2.8rem;
    transform: translateX(-50%);
    color: var(--accent);
    text-align: center;
    font: 700 .7rem var(--font-display);
    font-variant-numeric: tabular-nums;
  }
  #choice-dock .future-hand { width: calc(100% - 5.4rem); margin-inline: auto; }
}
@media (max-width: 340px) {
  .future-hand { padding-bottom: .4rem; }
  .future-choice {
    height: 6rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .future-choice-body { padding: .45rem; }
  .future-choice .choice-label { -webkit-line-clamp: 3; font-size: .75rem; }
}
/* Hardware fallback for Safari's "desktop website" viewport. iOS may fail
   both mobile media-query branches while still exposing maxTouchPoints. */
html.touch-ui #choice-dock { min-width: 0; width: 100%; }
html.touch-ui .future-hand {
  display: block; width: 100%; height: auto; min-height: 0; max-width: none;
  margin: 0; padding: .35rem 0 1rem; overflow: visible;
}
html.touch-ui .future-choice,
html.touch-ui .future-hand[data-count] .future-choice {
  position: relative; left: auto; bottom: auto; display: none;
  width: 100%; min-width: 0; height: 6.6rem; transform: none;
  grid-template-columns: minmax(0, 1fr); opacity: 1;
}
html.touch-ui .future-hand[data-count] .future-choice.is-mobile-current { display: grid; }
html.touch-ui .future-choice:hover,
html.touch-ui .future-choice:focus-visible { transform: translateY(-1px); opacity: 1; }
html.touch-ui .future-choice:active { transform: translateY(1px); }
html.touch-ui .future-choice.is-drawn {
  transform: translateY(-0.8rem);
  box-shadow: 0 15px 30px rgba(0,0,0,0.6);
}
html.touch-ui .future-choice-visual { height: 100%; }
html.touch-ui .future-choice-body { min-height: 0; padding: .42rem .5rem; }
html.touch-ui .future-choice .choice-label { -webkit-line-clamp: 3; font-size: .74rem; }
html.touch-ui .future-choice-signals { gap: .2rem; padding-top: .15rem; }
html.touch-ui .future-choice-forecast { display: none; }
html.touch-ui .choice-pager {
  display: block; position: absolute; inset: .35rem 0 auto; height: 6.6rem;
  pointer-events: none;
}
html.touch-ui .choice-pager-btn {
  position: absolute; top: 50%; width: 2.4rem; min-height: 44px; padding: 0;
  transform: translateY(-50%); color: var(--ink-dim); background: var(--panel);
  border-radius: 999px; font: 700 1.45rem/1 var(--font-display); pointer-events: auto;
}
html.touch-ui .choice-pager-btn:first-child { left: 0; }
html.touch-ui .choice-pager-btn:last-child { right: 0; }
html.touch-ui .choice-pager-status {
  position: absolute; left: 50%; bottom: -.7rem; min-width: 2.8rem;
  transform: translateX(-50%); color: var(--accent); text-align: center;
  font: 700 .7rem var(--font-display); font-variant-numeric: tabular-nums;
}
html.touch-ui #choice-dock .future-hand { width: calc(100% - 5.4rem); margin-inline: auto; }

/* Production keeps the expressive dealt-hand direction on touch too. The
   /preview/ route now retains the former compact one-card pager above as a
   comparison and rollback lane. */
html.dealt-hand-ui #choice-dock .future-hand {
  position: relative; display: block; width: 100%; height: 7.5rem;
  max-width: 30rem; margin: 0 auto; padding: 0; overflow: visible;
}
html.dealt-hand-ui .future-hand[data-count] .future-choice {
  position: absolute; bottom: -.7rem; display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(11rem, 48vw); height: 7.3rem; min-width: 0;
  transform: translateX(-50%) rotate(var(--card-turn));
  transform-origin: 50% 125%;
}
html.dealt-hand-ui .future-hand[data-count] .future-choice.is-drawn {
  z-index: 40;
  transform: translateX(-50%) translateY(-1.25rem) rotate(0);
}
html.dealt-hand-ui .future-hand[data-count="2"] .future-choice:nth-child(1) { left: 34%; }
html.dealt-hand-ui .future-hand[data-count="2"] .future-choice:nth-child(2) { left: 66%; }
html.dealt-hand-ui .future-hand[data-count="3"] .future-choice:nth-child(1) { left: 24%; }
html.dealt-hand-ui .future-hand[data-count="3"] .future-choice:nth-child(2) { left: 50%; }
html.dealt-hand-ui .future-hand[data-count="3"] .future-choice:nth-child(3) { left: 76%; }
html.dealt-hand-ui .future-hand[data-count="4"] .future-choice:nth-child(1) { left: 18%; }
html.dealt-hand-ui .future-hand[data-count="4"] .future-choice:nth-child(2) { left: 39%; }
html.dealt-hand-ui .future-hand[data-count="4"] .future-choice:nth-child(3) { left: 61%; }
html.dealt-hand-ui .future-hand[data-count="4"] .future-choice:nth-child(4) { left: 82%; }
html.dealt-hand-ui .future-choice-body {
  grid-column: 1; grid-row: 1; min-height: 0; height: 100%;
  justify-content: flex-end; padding: 1.4rem .4rem .45rem .45rem;
}
html.dealt-hand-ui .future-choice-visual {
  grid-column: 1; grid-row: 1; height: 100%;
}
html.dealt-hand-ui .future-choice .choice-label { -webkit-line-clamp: 4; }
html.dealt-hand-ui .choice-pager,
html.touch-ui.dealt-hand-ui .choice-pager {
  display: none !important;
}
html.dealt-hand-ui #choice-dock .future-hand,
html.touch-ui.dealt-hand-ui #choice-dock .future-hand {
  width: 100%;
  margin-inline: auto;
}

/* Preview card lab — real choices, alternate surfaces. The selectors are
   inert on production because only /preview/ receives preview-card-lab. */
/* Faithful Figma concept structures. One block owns layout per mode (no
   dual skin/faithful eras). Tokens keep radius/signal chrome aligned. */
html.preview-card-lab {
  --preview-card-radius: 0.78rem;
  --preview-chip-radius: 0.55rem;
  --preview-shell-radius: 0.72rem;
  --preview-tab-radius: 0.42rem;
  --preview-gap: 0.38rem;
}
html.preview-card-lab .future-choice {
  border-radius: var(--preview-card-radius);
}

/* Shared corner signal chrome (accordion / reveal / gallery / open ribbon). */
html.preview-card-lab .preview-corner-signals,
html[data-preview-card-mode="accordion"] .future-choice-signals,
html[data-preview-card-mode="reveal"] .future-choice-signals,
html[data-preview-card-mode="gallery"] .future-choice-signals {
  position: absolute; inset: .32rem .32rem auto auto; z-index: 4;
  width: auto; margin: 0; padding: .12rem; gap: .12rem;
  justify-content: flex-end; align-items: flex-start;
  background: none; border: 0; transform: none !important; pointer-events: none;
  color: var(--ink-dim);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
html[data-preview-card-mode="accordion"] .future-choice-signals .choice-sig,
html[data-preview-card-mode="reveal"] .future-choice-signals .choice-sig,
html[data-preview-card-mode="gallery"] .future-choice-signals .choice-sig {
  opacity: .92; width: 1rem; height: 1rem;
}

/* :where() gate contributes zero specificity so mode rules win layout. */
html:where(.preview-card-lab:not([data-preview-card-mode="compact"]):not([data-preview-card-mode="hand"]):not([data-preview-card-mode="deck"]):not([data-preview-card-mode="oracle"])) #choice-dock .future-hand {
  display: flex; position: relative; width: 100%; height: auto; min-height: 0;
  max-width: 42rem; margin: 0 auto; padding: .35rem; overflow: visible;
}
html:where(.preview-card-lab:not([data-preview-card-mode="compact"]):not([data-preview-card-mode="hand"]):not([data-preview-card-mode="deck"]):not([data-preview-card-mode="oracle"])) .future-hand[data-count] .future-choice {
  position: relative; left: auto; bottom: auto; display: grid; width: auto;
  min-width: 0; height: auto; min-height: 6.5rem; opacity: 1;
  transform: none; transform-origin: center;
}
/* Multi-card experiments must beat touch one-up hide of non-current cards. */
html.preview-card-lab[data-preview-card-mode]:not([data-preview-card-mode="compact"]):not([data-preview-card-mode="stack"]):not([data-preview-card-mode="hand"]):not([data-preview-card-mode="deck"]):not([data-preview-card-mode="oracle"]) .future-hand[data-count] .future-choice {
  display: grid !important;
}
html.preview-card-lab[data-preview-card-mode]:not([data-preview-card-mode="compact"]):not([data-preview-card-mode="stack"]):not([data-preview-card-mode="hand"]):not([data-preview-card-mode="deck"]):not([data-preview-card-mode="oracle"]) #choice-dock .future-hand {
  width: 100%;
}
/* Lift is mode-owned; generic gate only supplies a tiny hover cue for static grids. */
html:where(.preview-card-lab:not([data-preview-card-mode="compact"]):not([data-preview-card-mode="hand"]):not([data-preview-card-mode="deck"]):not([data-preview-card-mode="oracle"]):not([data-preview-card-mode="accordion"]):not([data-preview-card-mode="ribbon"]):not([data-preview-card-mode="ribbon-portrait"]):not([data-preview-card-mode="stack"])) .future-choice:hover,
html:where(.preview-card-lab:not([data-preview-card-mode="compact"]):not([data-preview-card-mode="hand"]):not([data-preview-card-mode="deck"]):not([data-preview-card-mode="oracle"]):not([data-preview-card-mode="accordion"]):not([data-preview-card-mode="ribbon"]):not([data-preview-card-mode="ribbon-portrait"]):not([data-preview-card-mode="stack"])) .future-choice:focus-visible {
  transform: translateY(-2px); opacity: 1;
}

/* Must beat html.touch-ui .choice-pager { display:block }. Compact alone keeps the pager. */
html.preview-card-lab:not([data-preview-card-mode="compact"]) .choice-pager,
html.touch-ui.preview-card-lab:not([data-preview-card-mode="compact"]) .choice-pager {
  display: none !important;
}
html.preview-card-lab:not([data-preview-card-mode="compact"]) #choice-dock .future-hand,
html.touch-ui.preview-card-lab:not([data-preview-card-mode="compact"]) #choice-dock .future-hand {
  width: 100% !important;
  margin-inline: 0;
}

html.preview-card-lab #choice-dock .future-hand > [data-preview-chrome="1"] { box-sizing: border-box; }
html.preview-card-lab .preview-summary-copy { display: flex; min-width: 0; flex-direction: column; gap: .16rem; }
html.preview-card-lab .preview-summary-copy strong {
  color: var(--accent); font: 700 .66rem var(--font-display); letter-spacing: .08em; text-transform: uppercase;
}
html.preview-card-lab .preview-summary-copy > span { color: var(--ink); font-size: .8rem; line-height: 1.25; }
html.preview-card-lab #action-surface #choice-dock:not([hidden]) + .composer { margin-top: 0; }
@keyframes preview-commit { 40% { transform: translateY(-.4rem) scale(1.02); opacity: 1; } 100% { transform: translateY(-.12rem) scale(.99); opacity: .3; } }
html.preview-card-lab .future-hand.is-preview-committing { pointer-events: none; }
html.preview-card-lab .future-choice.is-preview-committing { z-index: 50 !important; animation: preview-commit .1s ease-out both; }

/* Shared selected ring for multi-step staging (combo/market/zone/deck). */
html[data-preview-card-mode="combo"] .future-choice.is-preview-selected,
html[data-preview-card-mode="market"] .future-choice.is-preview-selected,
html[data-preview-card-mode="zone"] .future-choice.is-preview-selected,
html[data-preview-card-mode="deck"] .future-choice.is-preview-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
  opacity: 1;
}

/* A · accordion: one expanding row; touch expands via .is-drawn (peek-then-commit). */
html[data-preview-card-mode="accordion"] #choice-dock .future-hand {
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch;
  gap: var(--preview-gap); width: 100% !important; margin-inline: 0;
}
html[data-preview-card-mode="accordion"] .future-hand[data-count] > .future-choice {
  flex: 1 1 12%; grid-template-columns: minmax(0, 1fr); min-height: 5.2rem !important;
  opacity: .72; overflow: hidden;
  transition: flex .18s cubic-bezier(.2,.85,.25,1), opacity .1s ease, border-color .1s ease;
}
html[data-preview-card-mode="accordion"] .future-hand:hover > .future-choice,
html[data-preview-card-mode="accordion"] .future-hand:has(.is-drawn) > .future-choice { opacity: .35; }
html[data-preview-card-mode="accordion"] .future-hand > .future-choice:hover,
html[data-preview-card-mode="accordion"] .future-hand > .future-choice:focus-visible,
html[data-preview-card-mode="accordion"] .future-hand > .future-choice.is-drawn {
  flex: 2.6 1 42%; opacity: 1; transform: none;
}
html[data-preview-card-mode="accordion"] .future-choice-visual { height: 100%; }
html[data-preview-card-mode="accordion"] .future-choice-body { min-height: 0; justify-content: flex-end !important; }
/* Collapsed chips keep a one-line ellipsis (parity with ribbon), not icon-only. */
html[data-preview-card-mode="accordion"] .future-choice:not(.is-drawn):not(:hover):not(:focus-visible) .choice-label {
  white-space: nowrap; -webkit-line-clamp: 1; display: block; overflow: hidden; text-overflow: ellipsis;
}
html[data-preview-card-mode="accordion"] .future-choice:not(.is-drawn):not(:hover):not(:focus-visible) .future-choice-signals {
  display: none !important;
}
/* Same corner affordances as reveal — no footer strip covering expanded label text. */
html[data-preview-card-mode="accordion"] .future-choice.is-drawn .choice-label,
html[data-preview-card-mode="accordion"] .future-choice:hover .choice-label,
html[data-preview-card-mode="accordion"] .future-choice:focus-visible .choice-label {
  white-space: normal; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}

/* B · reveal: 2×2 faces when count is 4; otherwise a 1×N row (usually 1×3). */
html[data-preview-card-mode="reveal"] #choice-dock .future-hand {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .42rem;
  width: 100% !important; margin-inline: 0;
}
html[data-preview-card-mode="reveal"] #choice-dock .future-hand[data-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-preview-card-mode="reveal"] #choice-dock .future-hand[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-preview-card-mode="reveal"] #choice-dock .future-hand[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}
html[data-preview-card-mode="reveal"] .future-hand[data-count] > .future-choice {
  position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
  min-height: 7.2rem !important; overflow: hidden;
}
html[data-preview-card-mode="reveal"] .future-choice-visual { height: 100%; }
html[data-preview-card-mode="reveal"] .future-choice-body { min-height: 0; }
/* Stat affordances sit as corner icons — no footer drawer covering the label. */

/* C · ribbon: chips and the real composer read as one fused control.
   Collapsed chips truncate; touch must expand via .is-drawn before commit. */
html[data-preview-card-mode="ribbon"] #choice-dock {
  padding: .38rem .38rem 0; border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--preview-shell-radius) var(--preview-shell-radius) 0 0; background: var(--panel);
}
html[data-preview-card-mode="ribbon"] #choice-dock .future-hand {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: .3rem; max-width: none; padding: 0;
  align-items: stretch; width: 100% !important; margin-inline: 0;
}
html[data-preview-card-mode="ribbon"] .future-hand[data-count] > .future-choice {
  flex: 1 1 10%; display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
  width: auto; min-height: 3.4rem !important; min-width: 0;
  border-radius: var(--preview-chip-radius); overflow: hidden;
  transition: flex .18s cubic-bezier(.2,.85,.25,1), border-radius .12s ease, opacity .1s ease,
              width .18s cubic-bezier(.2,.85,.25,1), min-width .18s cubic-bezier(.2,.85,.25,1);
}
html[data-preview-card-mode="ribbon"] .future-hand:hover > .future-choice,
html[data-preview-card-mode="ribbon"] .future-hand:has(.is-drawn) > .future-choice { opacity: .46; }
html[data-preview-card-mode="ribbon"] .future-hand > .future-choice:hover,
html[data-preview-card-mode="ribbon"] .future-hand > .future-choice:focus-visible,
html[data-preview-card-mode="ribbon"] .future-hand > .future-choice.is-drawn {
  flex: 3.2 1 48%; border-radius: var(--preview-chip-radius); opacity: 1; transform: none;
}
html[data-preview-card-mode="ribbon"] .future-choice-visual {
  min-width: 0; border-radius: inherit; height: 100%;
}
html[data-preview-card-mode="ribbon"] .future-choice-forecast { display: none !important; }
html[data-preview-card-mode="ribbon"] .future-choice-body {
  padding: 1.1rem .5rem .35rem !important; min-height: 0; justify-content: flex-end !important;
}
html[data-preview-card-mode="ribbon"] .future-choice:not(.is-drawn):not(:hover):not(:focus-visible) .choice-label {
  white-space: nowrap; -webkit-line-clamp: 1; display: block; overflow: hidden; text-overflow: ellipsis;
}
html[data-preview-card-mode="ribbon"] .future-choice .future-choice-signals { display: none; }
html[data-preview-card-mode="ribbon"] .future-choice.is-drawn .choice-label,
html[data-preview-card-mode="ribbon"] .future-choice:hover .choice-label,
html[data-preview-card-mode="ribbon"] .future-choice:focus-visible .choice-label {
  white-space: normal; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
/* Open ribbon uses the same corner signals as accordion/reveal. */
html[data-preview-card-mode="ribbon"] .future-choice.is-drawn .future-choice-signals,
html[data-preview-card-mode="ribbon"] .future-choice:hover .future-choice-signals,
html[data-preview-card-mode="ribbon"] .future-choice:focus-visible .future-choice-signals {
  display: flex;
  position: absolute; inset: .32rem .32rem auto auto; z-index: 4;
  width: auto; margin: 0; padding: .12rem; gap: .12rem;
  justify-content: flex-end; align-items: flex-start;
  background: none; border: 0; transform: none !important; pointer-events: none;
  color: var(--ink-dim);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
html[data-preview-card-mode="ribbon"] .composer {
  margin-top: 0; padding-top: .38rem; border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--preview-shell-radius) var(--preview-shell-radius); background: var(--panel);
}
html[data-preview-card-mode="ribbon"] .composer-form input { background: var(--bg); }

/* C2 · ribbon-portrait: same expand-then-commit fuse to the composer as C, but
   EVERY choice is a compact 3:4 portrait plate (not landscape bars that only
   go tall when drawn). Horizontal ribbon of equal tall cards; active peeks
   slightly larger without dominating the dock. */
html[data-preview-card-mode="ribbon-portrait"] #choice-dock {
  padding: .38rem .38rem 0; border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--preview-shell-radius) var(--preview-shell-radius) 0 0; background: var(--panel);
}
html[data-preview-card-mode="ribbon-portrait"] #choice-dock .future-hand {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: .35rem;
  max-width: none; padding: .1rem 0 .15rem; align-items: stretch;
  justify-content: center; width: 100% !important; margin-inline: 0;
}
html[data-preview-card-mode="ribbon-portrait"] .future-hand[data-count] > .future-choice {
  position: relative;
  flex: 1 1 0; display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  /* Compact portrait: all cards share 3:4; cap height so 3–4 fit the dock. */
  width: auto !important;
  max-width: 7.4rem;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  max-height: 10rem;
  aspect-ratio: 3 / 4;
  border-radius: var(--preview-card-radius, 0.78rem); overflow: hidden;
  align-self: stretch;
  transition: flex .18s cubic-bezier(.2,.85,.25,1), max-width .18s cubic-bezier(.2,.85,.25,1),
              max-height .18s cubic-bezier(.2,.85,.25,1), opacity .1s ease, box-shadow .12s ease;
}
html[data-preview-card-mode="ribbon-portrait"] .future-hand:hover > .future-choice,
html[data-preview-card-mode="ribbon-portrait"] .future-hand:has(.is-drawn) > .future-choice { opacity: .55; }
html[data-preview-card-mode="ribbon-portrait"] .future-hand > .future-choice:hover,
html[data-preview-card-mode="ribbon-portrait"] .future-hand > .future-choice:focus-visible,
html[data-preview-card-mode="ribbon-portrait"] .future-hand > .future-choice.is-drawn {
  opacity: 1; transform: none;
  flex: 1.35 1 0;
  max-width: 8.6rem;
  max-height: 11.5rem;
  aspect-ratio: 3 / 4;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
}
/* Plate always visible under copy (portrait deck, not bar-then-expand). */
html[data-preview-card-mode="ribbon-portrait"] .future-choice-visual {
  min-width: 0; border-radius: inherit;
  display: block; position: absolute; inset: 0; z-index: 0; height: 100%;
}
html[data-preview-card-mode="ribbon-portrait"] .future-choice-image,
html[data-preview-card-mode="ribbon-portrait"] .future-choice-portrait {
  object-fit: cover;
  object-position: center 22%;
}
html[data-preview-card-mode="ribbon-portrait"] .future-choice-forecast { display: none !important; }
html[data-preview-card-mode="ribbon-portrait"] .future-choice-body {
  position: relative; z-index: 1;
  padding: 1.6rem .4rem .4rem !important; min-height: 0; height: 100%;
  justify-content: flex-end !important;
  background: linear-gradient(to top, color-mix(in srgb, var(--panel) 92%, transparent) 0%,
    color-mix(in srgb, var(--panel) 48%, transparent) 42%, transparent 100%);
}
html[data-preview-card-mode="ribbon-portrait"] .future-choice.is-drawn .future-choice-body,
html[data-preview-card-mode="ribbon-portrait"] .future-choice:hover .future-choice-body,
html[data-preview-card-mode="ribbon-portrait"] .future-choice:focus-visible .future-choice-body {
  padding: 1.8rem .45rem .45rem !important;
}
html[data-preview-card-mode="ribbon-portrait"] .future-choice .choice-label {
  white-space: normal; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical;
  overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-size: .82em;
}
html[data-preview-card-mode="ribbon-portrait"] .future-choice.is-drawn .choice-label,
html[data-preview-card-mode="ribbon-portrait"] .future-choice:hover .choice-label,
html[data-preview-card-mode="ribbon-portrait"] .future-choice:focus-visible .choice-label {
  -webkit-line-clamp: 4;
}
html[data-preview-card-mode="ribbon-portrait"] .future-choice .future-choice-signals {
  display: flex;
  position: absolute; inset: .28rem .28rem auto auto; z-index: 4;
  width: auto; margin: 0; padding: .1rem; gap: .1rem;
  justify-content: flex-end; align-items: flex-start;
  background: none; border: 0; transform: none !important; pointer-events: none;
  color: var(--ink-dim);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
html[data-preview-card-mode="ribbon-portrait"] .composer {
  margin-top: 0; padding-top: .38rem; border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--preview-shell-radius) var(--preview-shell-radius); background: var(--panel);
}
html[data-preview-card-mode="ribbon-portrait"] .composer-form input { background: var(--bg); }

/* E · branch gallery · full-bleed tile, copy on scrim, signals in free corner. */
html[data-preview-card-mode="gallery"] #choice-dock .future-hand {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem;
  width: 100% !important; max-width: 42rem !important; margin-inline: auto !important;
  height: auto !important; min-height: 0 !important; padding: .35rem !important;
}
html[data-preview-card-mode="gallery"] #choice-dock .future-hand[data-count="3"] > .future-choice:nth-child(3) {
  grid-column: 1 / -1;
}
html[data-preview-card-mode="gallery"] .future-choice,
html[data-preview-card-mode="gallery"] .future-hand[data-count] .future-choice,
html[data-preview-card-mode="gallery"] .future-hand[data-count] > .future-choice,
html.touch-ui[data-preview-card-mode="gallery"] .future-choice,
html.touch-ui[data-preview-card-mode="gallery"] .future-hand[data-count] .future-choice,
html.touch-ui[data-preview-card-mode="gallery"] .future-hand[data-count] .future-choice.is-mobile-current {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(11rem, 14rem) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 11rem !important;
  height: 14rem !important;
  max-height: none !important;
  transform: none !important;
  isolation: isolate;
  overflow: hidden !important;
  padding: 0 !important;
  opacity: 1 !important;
  background: #0c0b0a !important;
  border-radius: var(--preview-card-radius);
}
html[data-preview-card-mode="gallery"] .future-choice-visual,
html.touch-ui[data-preview-card-mode="gallery"] .future-choice-visual {
  grid-area: 1 / 1 !important;
  position: relative !important;
  inset: auto !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  border-radius: inherit;
  display: block !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 55% 30%, rgba(200,164,90,0.16), transparent 52%),
    linear-gradient(160deg, #1a1714, #0c0b0a);
}
html[data-preview-card-mode="gallery"] .future-choice-visual::after {
  content: none !important;
}
html[data-preview-card-mode="gallery"] .future-choice-image,
html[data-preview-card-mode="gallery"] .future-choice-portrait,
html.touch-ui[data-preview-card-mode="gallery"] .future-choice-image,
html.touch-ui[data-preview-card-mode="gallery"] .future-choice-portrait {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 28% !important;
  display: block !important;
}
html[data-preview-card-mode="gallery"] .future-choice.has-portrait:not(.has-forecast):not(.has-ambient-forecast) .future-choice-portrait,
html[data-preview-card-mode="gallery"] .future-choice.is-forecasting.has-portrait:not(.has-forecast):not(.has-ambient-forecast) .future-choice-portrait {
  opacity: 1 !important;
  filter: saturate(.9) contrast(1.04);
}
html[data-preview-card-mode="gallery"] .future-choice.has-forecast .future-choice-portrait,
html[data-preview-card-mode="gallery"] .future-choice.has-ambient-forecast .future-choice-portrait { opacity: 0 !important; }
html[data-preview-card-mode="gallery"] .future-choice.has-forecast .future-choice-image {
  opacity: 1 !important;
  filter: saturate(.95) contrast(1.05);
}
html[data-preview-card-mode="gallery"] .future-choice.has-ambient-forecast:not(.has-forecast) .future-choice-image {
  opacity: .72 !important;
  filter: saturate(.75) contrast(1.02);
}
html[data-preview-card-mode="gallery"] .future-choice.has-portrait .future-choice-glyph,
html[data-preview-card-mode="gallery"] .future-choice.has-forecast .future-choice-glyph,
html[data-preview-card-mode="gallery"] .future-choice.has-ambient-forecast .future-choice-glyph,
html[data-preview-card-mode="gallery"] .future-choice.is-forecasting .future-choice-glyph {
  opacity: 0 !important;
}
html[data-preview-card-mode="gallery"] .future-choice-body,
html.touch-ui[data-preview-card-mode="gallery"] .future-choice-body {
  grid-area: 1 / 1 !important;
  position: relative !important;
  z-index: 2 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  justify-content: flex-end !important;
  padding: 2.4rem .7rem .65rem !important;
  background: linear-gradient(
    to top,
    rgba(8, 7, 6, 0.92) 0%,
    rgba(8, 7, 6, 0.72) 42%,
    rgba(8, 7, 6, 0.18) 72%,
    rgba(8, 7, 6, 0) 100%
  ) !important;
  pointer-events: none;
}
html[data-preview-card-mode="gallery"] .future-choice-body > * {
  pointer-events: auto;
}
html[data-preview-card-mode="gallery"] .future-choice .choice-label {
  color: #f4efe6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  -webkit-line-clamp: 4;
}
html[data-preview-card-mode="gallery"] .future-choice-intent,
html[data-preview-card-mode="gallery"] .future-choice-forecast {
  color: rgba(244, 239, 230, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
html[data-preview-card-mode="gallery"] .future-choice-forecast,
html.touch-ui[data-preview-card-mode="gallery"] .future-choice-forecast {
  display: block !important;
  position: absolute !important;
  left: .55rem; right: 2.4rem; bottom: auto; top: .4rem;
  z-index: 3;
  pointer-events: none;
}

/* F · decision stack: icon tabs select the front card; confirmation is explicit. */
html[data-preview-card-mode="stack"] #choice-dock .future-hand.preview-stack-surface {
  display: block; width: 100%; max-width: 42rem; height: auto; padding: .35rem;
}
.preview-stack-shell { display: grid; grid-template-columns: 2.8rem minmax(0,1fr); gap: .42rem; min-height: 9rem; }
.preview-stack-tabs { display: flex; flex-direction: column; gap: .28rem; justify-content: center; }
.preview-stack-tab {
  display: grid; place-items: center; width: 2.55rem; height: 2.2rem; padding: 0;
  border: 1px solid var(--line); border-radius: var(--preview-tab-radius); color: var(--ink-faint); background: var(--panel); cursor: pointer;
}
.preview-stack-tab.is-active { color: var(--accent); border-color: var(--accent); background: var(--panel-2); }
.preview-stack-cards { position: relative; min-height: 9rem; }
html[data-preview-card-mode="stack"] .preview-stack-cards > .future-choice {
  position: absolute !important; inset: .15rem .55rem .15rem 0 !important; left: 0 !important; bottom: .15rem !important;
  display: grid !important; grid-template-columns: minmax(0,1fr) !important; width: auto !important; height: auto !important;
  min-height: 8.5rem !important; z-index: calc(20 - var(--preview-stack-depth)); pointer-events: none;
  opacity: calc(1 - var(--preview-stack-depth) * .1);
  transform: translate(calc(var(--preview-stack-depth) * .48rem),calc(var(--preview-stack-depth) * -.22rem)) rotate(calc(var(--preview-stack-depth) * -.55deg)) !important;
  transition: transform .16s cubic-bezier(.2,.85,.25,1), opacity .1s ease;
  border-radius: var(--preview-card-radius);
}
html[data-preview-card-mode="stack"] .preview-stack-cards > .future-choice.is-preview-active { pointer-events: auto; border-color: var(--accent); }
html[data-preview-card-mode="stack"] .future-choice-visual { height: 100%; }
html[data-preview-card-mode="stack"] .future-choice-body { min-height: 0; justify-content: flex-end !important; }

/* G · retro command: list + inspector; commit is Choose this / Enter, not list click. */
html[data-preview-card-mode="retro"] #choice-dock .future-hand.preview-retro-surface {
  display: block; width: 100%; max-width: 42rem; padding: .3rem; background: transparent; border: 0;
}
.preview-retro-shell {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(12rem,.78fr);
  border: 1px solid #728072; background: #090d0a; color: #d9e5d6;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  border-radius: 0;
}
.preview-retro-list { border-right: 1px solid #728072; }
html[data-preview-card-mode="retro"] .preview-retro-list > .future-choice {
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100%; min-height: 4.2rem !important;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
html[data-preview-card-mode="retro"] .preview-retro-list > .future-choice + .future-choice { border-top: 1px dashed #314331; }
html[data-preview-card-mode="retro"] .preview-retro-list > .future-choice.is-preview-active { background: #172217; }
html[data-preview-card-mode="retro"] .future-choice-visual { height: 100%; }
html[data-preview-card-mode="retro"] .future-choice-body { min-height: 0; padding: .38rem; }
.preview-retro-inspector {
  display: grid; grid-template-columns: 2.5rem minmax(0,1fr); gap: .55rem; align-content: center;
  min-height: 10rem; padding: .75rem;
}
.preview-retro-inspector > .future-choice-glyph { color: #59d7d1; }
.preview-retro-inspector .preview-summary-copy strong { color: #59d7d1; }
.preview-retro-inspector .preview-summary-copy > span { color: #d9e5d6; }

/* Card-mode HUD. */
.preview-card-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem; padding: .35rem .5rem .55rem; color: var(--ink-dim);
  font: 600 .7rem var(--font-display); letter-spacing: .035em;
}
.preview-card-controls button { min-height: 36px; }
/* Cost badge sits top-left so corner signals can keep top-right. */
.preview-card-cost {
  position: absolute; top: .4rem; left: .4rem; z-index: 5; display: grid;
  place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font: 700 .68rem var(--font-display);
}

/* 1 · deckbuilder: selectable fan; Play commits (card tap only selects). */
html[data-preview-card-mode="deck"] #choice-dock .future-hand.preview-deck-surface {
  display: block; width: 100%; max-width: 42rem; height: auto; padding: .3rem;
}
.preview-deck-hand { display: flex; justify-content: center; align-items: flex-end; gap: .35rem; min-height: 9rem; padding: .6rem 0 .3rem; }
html[data-preview-card-mode="deck"] .preview-deck-hand > .future-choice {
  position: relative !important; left: auto !important; bottom: auto !important; display: grid !important;
  grid-template-columns: 1fr; width: 7.4rem !important; height: 9.2rem !important; min-height: 0 !important;
  flex: 0 1 7.4rem; transform: rotate(calc((var(--preview-deck-index) - 1.5) * 2.5deg)) translateY(.4rem) !important;
  transform-origin: 50% 120%; overflow: hidden; border-radius: var(--preview-card-radius);
  transition: transform .14s cubic-bezier(.2,.85,.25,1), border-color .1s ease, opacity .1s ease, box-shadow .1s ease;
}
html[data-preview-card-mode="deck"] .preview-deck-hand > .future-choice:hover,
html[data-preview-card-mode="deck"] .preview-deck-hand > .future-choice:focus-visible,
html[data-preview-card-mode="deck"] .preview-deck-hand > .future-choice.is-preview-selected {
  transform: rotate(0) translateY(-.75rem) !important;
}
html[data-preview-card-mode="deck"] .future-choice-visual { height: 100% !important; }
html[data-preview-card-mode="deck"] .future-choice-body {
  min-height: 0 !important;
  justify-content: flex-end !important;
  padding: 2.2rem .42rem .42rem !important;
}
html[data-preview-card-mode="deck"] .future-choice .choice-label {
  font-size: .68rem; line-height: 1.2; -webkit-line-clamp: 3;
  color: #f4efe6; text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.preview-deck-hud { display: flex; justify-content: space-between; color: var(--ink-faint); font: 700 .68rem var(--font-display); }

/* 2 · combo chain: three explicit slots above compact move chips. */
html[data-preview-card-mode="combo"] #choice-dock .future-hand.preview-combo-surface {
  display: block; width: 100%; max-width: 42rem; padding: .35rem;
}
.preview-combo-slots { display: flex; align-items: center; gap: .38rem; min-height: 3.8rem; margin-bottom: .42rem; }
.preview-combo-slot {
  display: grid; place-items: center; flex: 1; min-width: 0; min-height: 3.7rem; padding: .3rem;
  border: 1px dashed var(--line); border-radius: var(--preview-chip-radius); color: var(--ink-faint); background: var(--panel);
  font: 700 .6rem var(--font-display); letter-spacing: .06em; text-align: center; text-transform: uppercase;
}
.preview-combo-slot.is-filled { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--panel-2); }
.preview-combo-plus { color: var(--ink-faint); }
.preview-combo-choices { display: flex; flex-wrap: wrap; gap: .3rem; }
html[data-preview-card-mode="combo"] .preview-combo-choices > .future-choice {
  position: relative; display: inline-grid !important; grid-template-columns: minmax(0, 1fr) !important; width: auto; min-height: 3.4rem !important;
  flex: 1 1 9.5rem; border-radius: var(--preview-chip-radius);
}
html[data-preview-card-mode="combo"] .future-choice-visual { height: 100%; }
html[data-preview-card-mode="combo"] .future-choice-body { min-height: 0; padding: .32rem .45rem; gap: .12rem; }
html[data-preview-card-mode="combo"] .future-choice .choice-label {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; margin-top: .1rem; font-size: .72rem; line-height: 1.25;
}
html[data-preview-card-mode="combo"] .future-choice .future-choice-signals { display: none; }
/* Selected = accent ring (shared rule); never dim as if spent. */

/* 3 · oracle: face-down back, flip to reveal, second activate commits. */
html[data-preview-card-mode="oracle"] #choice-dock .future-hand { perspective: 900px; }
html[data-preview-card-mode="oracle"] .future-hand[data-count] > .future-choice {
  transform-style: preserve-3d; border-radius: var(--preview-card-radius);
  transition: transform .2s cubic-bezier(.2,.85,.25,1), border-color .1s ease !important;
}
html[data-preview-card-mode="oracle"] .future-choice:not(.is-preview-revealed) {
  transform: rotateY(180deg) !important;
}
html[data-preview-card-mode="oracle"] .future-choice:not(.is-preview-revealed) .future-choice-visual,
html[data-preview-card-mode="oracle"] .future-choice:not(.is-preview-revealed) .future-choice-body { visibility: hidden; }
html[data-preview-card-mode="oracle"] .future-choice:not(.is-preview-revealed)::after {
  content: '🜲'; position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  visibility: visible; transform: rotateY(180deg);
  color: var(--accent); font-size: 1.6rem;
  background: radial-gradient(circle,color-mix(in srgb,var(--accent) 13%,transparent),transparent 58%),var(--panel);
  border-radius: inherit;
}
html[data-preview-card-mode="oracle"] .future-choice.is-preview-revealed { transform: none !important; }

/* 4 · market: open row + drafted hand; both keep readable labels. */
html[data-preview-card-mode="market"] #choice-dock .future-hand.preview-market-surface {
  display: block; width: 100%; max-width: 42rem; padding: .35rem;
}
.preview-mode-section { margin: .1rem 0 .32rem; color: var(--ink-faint); font: 700 .61rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.preview-market-row { display: flex; gap: .35rem; margin-bottom: .48rem; }
html[data-preview-card-mode="market"] .preview-market-row > .future-choice {
  display: grid !important; grid-template-columns: 1fr; flex: 1 1 0; width: auto; min-height: 5.5rem !important;
  border-radius: var(--preview-card-radius);
}
html[data-preview-card-mode="market"] .preview-market-row .future-choice-visual { height: 100% !important; }
html[data-preview-card-mode="market"] .preview-market-row .future-choice-body {
  min-height: 0; padding: 1.4rem .35rem .35rem !important; text-align: left; justify-content: flex-end !important;
}
html[data-preview-card-mode="market"] .preview-market-row .future-choice .choice-label,
html[data-preview-card-mode="market"] .preview-market-hand .future-choice .choice-label {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; color: #f4efe6;
}
/* Signals only — never hide labels on hand chips. */
html[data-preview-card-mode="market"] .future-choice .future-choice-signals { display: none; }
.preview-market-hand {
  display: flex; flex-wrap: wrap; gap: .3rem; min-height: 2.7rem; padding: .34rem;
  border: 1px solid var(--line); border-radius: var(--preview-chip-radius); background: var(--panel);
}
html[data-preview-card-mode="market"] .preview-market-hand > .future-choice {
  display: inline-grid !important; grid-template-columns: minmax(0, 1fr) !important; width: auto; min-height: 3.4rem !important; flex: 0 1 12rem;
  border-color: var(--accent); border-radius: var(--preview-chip-radius);
  animation: riseIn .22s ease-out both;
}
html[data-preview-card-mode="market"] .preview-market-hand .future-choice-visual { height: 100%; }
html[data-preview-card-mode="market"] .preview-market-hand .future-choice-body { min-height: 0; padding: .3rem; }
.preview-market-empty { align-self: center; color: var(--ink-faint); font: italic .7rem var(--font-display); }

/* 5 · zone cast: named board + move palette. */
html[data-preview-card-mode="zone"] #choice-dock .future-hand.preview-zone-surface {
  display: block; width: 100%; max-width: 42rem; padding: .35rem;
}
.preview-zone-board { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; margin-bottom: .42rem; }
.preview-zone {
  display: flex; min-height: 4.2rem; flex-direction: column; justify-content: space-between; padding: .45rem .5rem;
  border: 1px dashed var(--line); border-radius: var(--preview-chip-radius); color: var(--ink-faint); background: var(--panel); text-align: left;
}
.preview-zone strong { color: inherit; font: 700 .62rem var(--font-display); letter-spacing: .09em; text-transform: uppercase; }
.preview-zone span { font-size: .73rem; }
.preview-zone.is-ready { border-style: solid; border-color: var(--accent); color: var(--accent); cursor: pointer; background: var(--panel-2); }
.preview-zone.is-filled { border-style: solid; color: var(--ink); background: color-mix(in srgb,var(--accent) 8%,var(--panel)); }
.preview-zone-choices { display: flex; flex-wrap: wrap; gap: .3rem; }
html[data-preview-card-mode="zone"] .preview-zone-choices > .future-choice {
  display: inline-grid !important; grid-template-columns: minmax(0,1fr) !important; width: auto; min-height: 3.6rem !important; flex: 1 1 8rem;
  border-radius: var(--preview-chip-radius);
}
html[data-preview-card-mode="zone"] .preview-zone-choices .future-choice-visual { height: 100%; }
html[data-preview-card-mode="zone"] .preview-zone-choices .future-choice-body { min-height: 0; padding: .32rem .42rem; }
/* Intent stays visible; full text still on the button for the AT tree via intent + data. */
html[data-preview-card-mode="zone"] .preview-zone-choices .choice-label,
html[data-preview-card-mode="zone"] .preview-zone-choices .future-choice-signals { display: none; }

@media (max-width: 620px) {
  html[data-preview-card-mode="accordion"] .future-choice,
  html[data-preview-card-mode="ribbon"] .future-choice,
  html[data-preview-card-mode="ribbon-portrait"] .future-choice,
  html[data-preview-card-mode="reveal"] .future-choice,
  html[data-preview-card-mode="gallery"] .future-choice {
    display: grid !important;
  }
  html[data-preview-card-mode="gallery"] .future-choice,
  html[data-preview-card-mode="gallery"] .future-hand[data-count] .future-choice,
  html[data-preview-card-mode="gallery"] .future-hand[data-count] > .future-choice,
  html.touch-ui[data-preview-card-mode="gallery"] .future-choice,
  html.touch-ui[data-preview-card-mode="gallery"] .future-hand[data-count] .future-choice,
  html.touch-ui[data-preview-card-mode="gallery"] .future-hand[data-count] .future-choice.is-mobile-current {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(10rem, 12.5rem) !important;
    min-height: 10rem !important;
    height: 12.5rem !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
  }
  html[data-preview-card-mode="gallery"] .future-choice-visual,
  html[data-preview-card-mode="gallery"] .future-choice-body,
  html.touch-ui[data-preview-card-mode="gallery"] .future-choice-visual,
  html.touch-ui[data-preview-card-mode="gallery"] .future-choice-body {
    grid-area: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
  }
  html[data-preview-card-mode="gallery"] .future-choice-image,
  html[data-preview-card-mode="gallery"] .future-choice-portrait,
  html.touch-ui[data-preview-card-mode="gallery"] .future-choice-image,
  html.touch-ui[data-preview-card-mode="gallery"] .future-choice-portrait {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  html[data-preview-card-mode="gallery"] #choice-dock .future-hand,
  html.touch-ui[data-preview-card-mode="gallery"] #choice-dock .future-hand {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .4rem !important;
    width: 100% !important;
    margin-inline: 0 !important;
    height: auto !important;
  }
  html[data-preview-card-mode="gallery"] #choice-dock .future-hand[data-count="3"] > .future-choice:nth-child(3),
  html.touch-ui[data-preview-card-mode="gallery"] #choice-dock .future-hand[data-count="3"] > .future-choice:nth-child(3) {
    grid-column: 1 / -1;
  }
  html[data-preview-card-mode="accordion"] #choice-dock .future-hand {
    display: flex !important; flex-direction: row; flex-wrap: nowrap; gap: var(--preview-gap);
    overflow: hidden; width: 100% !important;
  }
  html[data-preview-card-mode="accordion"] .future-hand[data-count] > .future-choice {
    flex: 1 1 12%; width: auto !important; min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important; min-height: 4rem !important;
    opacity: .72; overflow: hidden;
  }
  html[data-preview-card-mode="accordion"] .future-hand:has(.is-drawn) > .future-choice { opacity: .35; }
  html[data-preview-card-mode="accordion"] .future-hand[data-count] > .future-choice.is-drawn,
  html[data-preview-card-mode="accordion"] .future-hand[data-count] > .future-choice:focus-visible {
    flex: 2.6 1 42%; opacity: 1; transform: none; border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  html[data-preview-card-mode="reveal"] #choice-dock .future-hand {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  html[data-preview-card-mode="reveal"] #choice-dock .future-hand[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-preview-card-mode="reveal"] #choice-dock .future-hand[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-preview-card-mode="reveal"] #choice-dock .future-hand[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-preview-card-mode="ribbon"] #choice-dock .future-hand {
    display: flex !important; flex-direction: row; flex-wrap: nowrap; grid-template-columns: none;
    gap: .3rem; overflow: hidden; width: 100% !important; margin-inline: 0;
    padding: .05rem 0 .2rem;
  }
  html[data-preview-card-mode="ribbon"] .future-hand[data-count] > .future-choice {
    flex: 1 1 10%; width: auto !important; min-width: 0; max-width: none;
    grid-template-columns: minmax(0, 1fr) !important; min-height: 3.15rem !important;
    border-radius: var(--preview-chip-radius); opacity: .72; overflow: hidden;
  }
  html[data-preview-card-mode="ribbon"] .future-hand:has(.is-drawn) > .future-choice { opacity: .42; }
  html[data-preview-card-mode="ribbon"] .future-hand[data-count] > .future-choice:focus-visible,
  html[data-preview-card-mode="ribbon"] .future-hand[data-count] > .future-choice.is-drawn {
    flex: 3.2 1 48%; min-width: 0; border-radius: var(--preview-chip-radius); opacity: 1; border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
  }
  html[data-preview-card-mode="ribbon"] .future-choice .future-choice-intent {
    font-size: .62rem; letter-spacing: .04em;
  }
  html[data-preview-card-mode="ribbon"] .future-choice:not(.is-drawn):not(:focus-visible) .choice-label {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block; -webkit-line-clamp: unset;
  }
  html[data-preview-card-mode="ribbon"] .future-choice.is-drawn .choice-label,
  html[data-preview-card-mode="ribbon"] .future-choice:focus-visible .choice-label {
    white-space: normal; -webkit-line-clamp: 3; display: -webkit-box;
    -webkit-box-orient: vertical; text-overflow: clip;
  }
  /* Portrait ribbon: keep the horizontal deck of compact 3:4 cards on touch. */
  html[data-preview-card-mode="ribbon-portrait"] #choice-dock .future-hand {
    display: flex !important; flex-direction: row; flex-wrap: nowrap;
    gap: .3rem; overflow: hidden; width: 100% !important; margin-inline: 0;
    padding: .05rem 0 .15rem; align-items: stretch; justify-content: center;
  }
  html[data-preview-card-mode="ribbon-portrait"] .future-hand[data-count] > .future-choice {
    flex: 1 1 0; width: auto !important; max-width: 6.8rem;
    min-height: 0 !important; max-height: 9.2rem; height: auto !important;
    aspect-ratio: 3 / 4; opacity: .78; overflow: hidden;
  }
  html[data-preview-card-mode="ribbon-portrait"] .future-hand:has(.is-drawn) > .future-choice { opacity: .48; }
  html[data-preview-card-mode="ribbon-portrait"] .future-hand[data-count] > .future-choice:focus-visible,
  html[data-preview-card-mode="ribbon-portrait"] .future-hand[data-count] > .future-choice.is-drawn {
    flex: 1.35 1 0; max-width: 7.8rem; max-height: 10.5rem;
    aspect-ratio: 3 / 4; opacity: 1; border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
  }
  html[data-preview-card-mode="ribbon-portrait"] .future-choice .choice-label {
    white-space: normal; -webkit-line-clamp: 3; display: -webkit-box;
    -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip;
  }
  html[data-preview-card-mode="ribbon-portrait"] .future-choice.is-drawn .choice-label,
  html[data-preview-card-mode="ribbon-portrait"] .future-choice:focus-visible .choice-label {
    -webkit-line-clamp: 4;
  }
  .preview-deck-hand { gap: 0; justify-content: space-around; min-height: 8rem; }
  html[data-preview-card-mode="deck"] .preview-deck-hand > .future-choice {
    width: 6.3rem !important; height: 8rem !important; flex-basis: 6.3rem; margin-inline: -.22rem;
  }
  .preview-combo-slots { gap: .22rem; }
  .preview-combo-plus { display: none; }
  .preview-stack-shell { grid-template-columns: 1fr; }
  .preview-stack-tabs { flex-direction: row; justify-content: center; }
  .preview-stack-cards { min-height: 8.5rem; }
  html[data-preview-card-mode="combo"] .preview-combo-choices > .future-choice { width: auto !important; min-height: 3.4rem !important; }
  html[data-preview-card-mode="zone"] .preview-zone-choices > .future-choice { width: auto !important; min-height: 2.55rem !important; }
  .preview-market-row { display: flex; }
  .preview-retro-shell { grid-template-columns: 1fr; }
  .preview-retro-list { border-right: 0; border-bottom: 1px solid #728072; }
  .preview-retro-inspector { min-height: 7.5rem; }
}

/* Preview lab motion: honor reduced-motion for expand/flip/stack/commit. */
@media (prefers-reduced-motion: reduce) {
  html.preview-card-lab .future-choice,
  html.preview-card-lab .future-choice::after,
  html.preview-card-lab .preview-stack-cards > .future-choice,
  html.preview-card-lab .preview-deck-hand > .future-choice {
    transition: none !important;
    animation: none !important;
  }
  html.preview-card-lab .future-choice.is-preview-committing { animation: none !important; opacity: .45; }
  html[data-preview-card-mode="oracle"] .future-choice:not(.is-preview-revealed) {
    transform: none !important;
  }
  html[data-preview-card-mode="oracle"] .future-choice:not(.is-preview-revealed)::after {
    transform: none;
  }
  html[data-preview-card-mode="stack"] .preview-stack-cards > .future-choice {
    transform: none !important;
    opacity: 0;
  }
  html[data-preview-card-mode="stack"] .preview-stack-cards > .future-choice.is-preview-active {
    opacity: 1;
  }
  html[data-preview-card-mode="deck"] .preview-deck-hand > .future-choice {
    transform: none !important;
  }
  html[data-preview-card-mode="market"] .preview-market-hand > .future-choice {
    animation: none !important;
  }
}

.chosen-marker {
  display: flex; align-items: baseline; gap: 0.4rem; color: var(--accent); font-style: italic; font-size: var(--fs-chosen);
  padding: 0.35rem 0; border-top: 1px solid var(--line); width: 100%;
}
.chosen-arrow { align-self: center; flex: 0 0 auto; }

.scene-error { color: var(--danger); font-style: italic; }

/* Loading dots */
.loading { color: var(--ink-dim); }
.loading .dot {
  display: inline-block; width: 0.5rem; height: 0.5rem; margin: 0 0.15rem;
  border-radius: 50%; background: var(--accent); animation: bounce 1.2s infinite ease-in-out;
}
.loading .dot:nth-child(2) { animation-delay: 0.15s; }
.loading .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%,80%,100% { transform: scale(0.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.loading-label { display: block; margin-top: 0.7rem; font-style: italic; font-size: 0.9rem; }
/* "What's generating this" line — undo/stop lives on the prior scene's prose icon. */
.loading-meta { margin: 0 0 0.55rem; }
/* Live narration streamed into the loading block (visual-only; aria-hidden).
   Must match .scene-text typography EXACTLY (family, reader-scaled size,
   leading) or the prose visibly snaps to size when the final fill swaps in. */
.loading-prose-slot {
  min-height: 7.5rem; /* reserve ~3–4 lines so stream start does not grow the page */
  margin: 0 0 0.9rem;
}
.loading-status {
  margin: 0 0 0.55rem;
  text-align: center;
}
.loading-status.is-quiet .dot { display: none; }
.loading-status.is-quiet .loading-label { margin-top: 0; }
.loading-prose {
  text-align: left; margin: 0;
  font-family: var(--font-body); font-size: var(--fs-prose); line-height: 1.72;
  font-optical-sizing: auto; letter-spacing: 0.003em; color: var(--ink);
}
/* Choice-dock shimmer while the hand generates — matches Future Hand height. */
#choice-dock.is-skeleton { pointer-events: none; }
.choice-skeleton-hand { opacity: 0.92; }
.choice-skeleton {
  min-height: 5.5rem;
  border: 1px solid var(--line) !important;
  background: var(--choice-surface-2) !important;
  cursor: default !important;
  overflow: hidden;
}
.choice-skeleton .future-choice-visual,
.choice-skeleton-shimmer {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
  padding: 0.85rem 1rem !important;
  min-height: 5.5rem;
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--panel) 70%, transparent) 25%,
    color-mix(in srgb, var(--accent) 12%, var(--panel)) 37%,
    color-mix(in srgb, var(--panel) 70%, transparent) 63%
  );
  background-size: 200% 100%;
  animation: choice-shimmer 1.35s ease-in-out infinite;
}
.choice-skeleton-bar {
  display: block;
  height: 0.55rem;
  width: 72%;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.choice-skeleton-bar.short { width: 44%; }
@keyframes choice-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .choice-skeleton-shimmer { animation: none; }
}
/* "Illustrating… Xs" status row: muted, matches the model-meta treatment. */
.loading-models {
  font-size: 0.72rem; letter-spacing: 0.02em; color: var(--ink-dim);
  font-variant: small-caps; font-style: normal;
}
/* Each cast member is a full-width tappable row → opens the readout dialog. */
.char-row {
  display: block; width: 100%; padding: 0.45rem 0.55rem; min-height: 44px;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: 0.5rem; background: var(--panel-2);
  -webkit-tap-highlight-color: transparent;
}
.char-row:hover { border-color: var(--accent); }
.char-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.char-row-face { display: flex; gap: 0.55rem; align-items: center; width: 100%; min-width: 0; text-align: left; }
.char-row-chevron { flex: 0 0 1rem; margin-left: auto; color: var(--ink-faint); font-size: 1rem; user-select: none; }
.char-meta { font-size: 0.7rem; color: var(--ink-faint); }
.char-detail-section-label { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
/* Narrator-owned, of-the-moment state — a faint gold ghost panel, clearly not an input. */
.char-live-state {
  background: rgba(200,164,90,0.06); border: 1px solid rgba(200,164,90,0.18);
  border-radius: 0.35rem; padding: 0.4rem 0.5rem; display: flex; flex-direction: column; gap: 0.2rem;
}
.char-detail-row { display: flex; gap: 0.4rem; font-size: 0.72rem; line-height: 1.35; }
.char-detail-k { flex: 0 0 4.2rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.64rem; padding-top: 0.05rem; }
.char-detail-v { flex: 1 1 auto; color: var(--ink-dim); min-width: 0; }
/* Editable rows stack (label above, full-width input below) so long text — a
   bio/look/personality — gets the whole panel width and is comfortable to edit. */
.char-edit-row { flex-direction: column; align-items: stretch; gap: 0.25rem; }
.char-edit-row .char-detail-k { flex: 0 0 auto; padding-top: 0; }
.char-edit-input {
  width: 100%; box-sizing: border-box; min-width: 0; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 0.35rem; padding: 0.4rem 0.55rem; resize: vertical;
}
textarea.char-edit-input {
  min-height: 4.2rem; max-height: 45vh; line-height: 1.45;
  field-sizing: content; /* grow with prose where supported */
}
.char-edit-input:focus { border-color: var(--accent); outline: none; }
.char-mini-btn {
  font: inherit; font-size: 0.7rem; padding: 0.28rem 0.6rem; border-radius: 0.35rem; min-height: 32px;
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line); cursor: pointer;
}
.char-mini-btn:hover { color: var(--accent); border-color: var(--accent); }
.char-mini-btn:disabled { opacity: 0.55; cursor: default; }
.char-protagonist { border-color: rgba(200,164,90,0.4); }
.char-you-mark { color: var(--accent); font-size: 1.2rem; background: var(--panel); }
.char-portrait {
  flex: 0 0 auto; width: 2.4rem; height: 3rem; border-radius: 0.35rem; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.char-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.char-initial { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink-dim); }
.char-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.char-name { font-weight: 600; font-size: 0.82rem; color: var(--ink); }
.char-look {
  font-size: 0.72rem; color: var(--ink-dim); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Protagonist's signature ability, surfaced on the in-play character row. */
.char-special { font-size: 0.72rem; color: var(--accent); line-height: 1.3; margin-top: 0.05rem; display: inline-flex; align-items: center; gap: 0.28rem; }
.char-special .special-icon { flex: 0 0 auto; }
/* While the composer is classifying a typed line (act vs steer). */
.composer-form.thinking { opacity: 0.6; pointer-events: none; }

/* Gallery overlay */
/* The overlay is pinned to the viewport and NEVER scrolls itself. An overlay
   that scrolls (flex-start + padding + tall content) is what drifts/wobbles
   on mobile. Scrolling lives INSIDE the panel (below) instead. */
.gallery-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(8, 7, 6, 0.88);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem;
  overflow: hidden; overscroll-behavior: none;
}
/* Freeze the page underneath while any overlay is open (toggled by the
   MutationObserver in JS) so nothing scrolls behind the modal. */
html.modal-open, html.modal-open body { overflow: hidden; }
.gallery-panel {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  /* Thumbnail floor defaults to ~300px (2× the old 150px tiles). Size control
     overrides via data-thumb-size on this panel. */
  --gallery-thumb-min: 18.75rem;
  width: 100%;
  /* Bounded to the viewport; the panel body scrolls internally, not the overlay.
     overflow-x:hidden + overscroll containment kill the horizontal scroll/bounce. */
  max-height: 100%; overflow-y: auto; overflow-x: hidden; max-width: min(56rem, 100vw);
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 1.25rem 1.4rem 1.6rem;
}
.gallery-panel[data-thumb-size="sm"] { --gallery-thumb-min: 9.375rem; max-width: min(52rem, 100vw); }
.gallery-panel[data-thumb-size="md"] { --gallery-thumb-min: 18.75rem; max-width: min(56rem, 100vw); }
.gallery-panel[data-thumb-size="lg"] { --gallery-thumb-min: 26.25rem; max-width: min(72rem, 100vw); }
.gallery-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.75rem; padding-right: 2.6rem; }
.gallery-head h2 { font-family: var(--font-display); font-weight: 600; margin: 0; font-size: 1.3rem; }
.gallery-head a { color: var(--ink-dim); font-size: var(--fs-sm); }
/* One consistent close affordance across every overlay: an X, top-right. */
.sheet-close {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; min-width: 44px; min-height: 44px; padding: 0;
  border-radius: var(--radius-sm); color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line); cursor: pointer;
}
.sheet-close:hover { color: var(--accent); border-color: var(--accent); }
.gallery-grid { display: flex; flex-direction: column; gap: 1.1rem; }
.gallery-summary { margin: -0.35rem 0 0.75rem; color: var(--ink-dim); font-size: 0.78rem; }
.gallery-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.7rem; margin-bottom: 1rem; }
.gallery-tabs {
  display: flex; flex: 1 1 auto; gap: 0.15rem; margin: 0; border-bottom: 1px solid var(--line); min-width: 0;
}
.gallery-tab {
  font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.45rem 0.7rem 0.55rem;
  border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-dim); cursor: pointer;
  margin-bottom: -1px;
}
.gallery-tab:hover { color: var(--ink); }
.gallery-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.gallery-tab .tab-count {
  margin-left: 0.3rem; font-size: 0.68rem; font-weight: 700; color: var(--ink-faint);
}
.gallery-tab.active .tab-count { color: var(--accent); }
.gallery-toolbar-tools { display: flex; flex: 0 0 auto; align-items: center; gap: 0.45rem; }
.gallery-character {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 34px;
  padding: 0.15rem 0.3rem 0.15rem 0.55rem; border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink-faint); background: var(--panel);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
}
.gallery-character select {
  max-width: 9.5rem; border: 0; padding: 0.2rem 1.25rem 0.2rem 0.1rem;
  color: var(--ink-dim); background: transparent; font: inherit; font-size: 0.72rem;
  text-transform: none; cursor: pointer;
}
.gallery-size {
  display: inline-flex; align-items: stretch; border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; background: var(--panel);
}
.gallery-size button {
  font: inherit; font-size: 0.72rem; font-weight: 700; min-height: 34px; min-width: 2rem;
  padding: 0.3rem 0.55rem; border: 0; border-right: 1px solid var(--line);
  background: transparent; color: var(--ink-dim); cursor: pointer;
}
.gallery-size button:last-child { border-right: 0; }
.gallery-size button:hover { color: var(--accent); }
.gallery-size button.is-on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.gallery-refresh, .gallery-curate, .media-run-actions button {
  font: inherit; font-size: 0.74rem; min-height: 34px; padding: 0.3rem 0.65rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-dim); cursor: pointer;
}
.gallery-refresh:hover, .gallery-curate:hover, .media-run-actions button:hover { color: var(--accent); border-color: var(--accent); }
.gallery-curate {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}
.gallery-curate:disabled { opacity: 0.48; cursor: default; }
.media-flat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--gallery-thumb-min), 1fr));
  gap: 0.85rem;
}
.media-tile { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.media-tile-cap {
  display: flex; flex-direction: column; gap: 0.1rem; min-width: 0;
  font-size: 0.68rem; line-height: 1.3; color: var(--ink-faint);
}
.media-tile-cap strong {
  font: 600 0.74rem/1.25 var(--font-display); color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media-tile-cap button {
  align-self: flex-start; margin: 0; padding: 0; border: 0; background: none;
  color: var(--accent); font: inherit; font-size: 0.68rem; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.media-proof {
  display: flex; align-items: center; gap: 0.35rem; min-width: 0; margin-top: 0.15rem;
}
.media-proof-mark {
  flex: 0 0 auto; padding: 0.12rem 0.35rem; border: 1px solid var(--line);
  border-radius: 0.22rem; color: var(--ink-dim); background: var(--panel-2);
  font: 700 0.62rem/1.2 var(--font-display); letter-spacing: 0.045em; text-transform: uppercase;
}
.media-proof-mark[data-verdict="review"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); }
.media-proof-mark[data-verdict="reject"], .media-proof-mark[data-decision="hide"] { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 55%, var(--line)); }
.media-proof-mark[data-decision="keep"] { color: var(--ink-dim); border-color: var(--line); }
.media-proof-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-faint); }
.media-cast-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); }
.media-tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-top: 0.12rem; }
.media-tile-actions button { align-self: auto; }
.media-tile-actions button[aria-pressed="true"] { color: var(--ink); text-decoration: none; font-weight: 700; }
.media-run { display: flex; flex-direction: column; gap: 0.55rem; }
.media-run + .media-run { border-top: 1px solid var(--line); padding-top: 1rem; }
.media-run-head { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.media-run-copy { min-width: 0; display: flex; align-items: baseline; gap: 0.55rem; }
.media-run-copy h3 { margin: 0; font: 600 0.94rem/1.3 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-run-copy span { flex: 0 0 auto; color: var(--ink-faint); font-size: 0.7rem; }
.media-run-actions { display: flex; flex: 0 0 auto; gap: 0.35rem; }
.media-run-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--gallery-thumb-min), 1fr));
  gap: 0.75rem;
}
.gallery-item { display: block; padding: 0; border: 1px solid var(--line); border-radius: 0.5rem; overflow: hidden; aspect-ratio: 3 / 2; background: var(--panel); cursor: zoom-in; width: 100%; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-video { cursor: default; background: #000; }
/* Letterbox — cover was cropping Seedance clips that match the scene still. */
.gallery-video video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.gallery-video-pending {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.7rem; text-align: center; cursor: default;
  color: var(--media-status-ink); background: #080706; border-color: var(--media-status-line);
}
.gallery-video-pending .pending-title { font-size: 0.82rem; color: var(--media-status-ink); font-weight: 600; }
.gallery-video-pending .pending-meta { font-size: 0.68rem; color: var(--media-status-muted); line-height: 1.35; }
.gallery-video-pending button {
  font: inherit; font-size: 0.74rem; min-height: 34px; padding: 0.3rem 0.65rem;
  border-radius: 0.35rem; border: 1px solid var(--media-status-line); background: var(--media-status-surface); color: var(--media-status-ink);
}
.gallery-video-pending button:hover { color: var(--choice-active); border-color: var(--choice-active); }
.gallery-empty { color: var(--ink-dim); font-style: italic; }
.gallery-sub { color: var(--ink-dim); font-size: 0.82rem; font-style: italic; }

/* Saved-stories gallery */
.stories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.7rem; }
.story-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 0.6rem; background: var(--panel-2);
}
.story-card:focus-within { border-color: var(--accent); }
.story-thumb { aspect-ratio: 3 / 2; background: var(--bg); }
.story-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-thumb.empty { display: flex; align-items: center; justify-content: center; color: var(--ink-dim); font-size: 0.8rem; font-style: italic; }
.story-thumb.empty::after { content: 'no art yet'; }
.story-body { padding: 0.6rem 0.7rem 0.75rem; display: flex; flex-direction: column; gap: 0.2rem; }
.story-title { font-weight: 600; font-size: 0.95rem; }
.story-tone {
  color: var(--ink-dim); font-size: 0.78rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.story-meta { color: var(--ink-dim); font-size: 0.74rem; margin-top: 0.1rem; }
.story-open { position: absolute; inset: 0; z-index: 1; background: transparent; border: 0; cursor: pointer; }
.story-open:hover { background: rgba(200, 164, 90, 0.06); }
.story-del {
  position: absolute; top: 0.4rem; right: 0.4rem; z-index: 2;
  width: 1.8rem; height: 1.8rem; padding: 0; border-radius: 50%; line-height: 1; font-size: 0.8rem;
  color: var(--ink-dim); background: rgba(8, 7, 6, 0.72); border: 1px solid var(--line);
}
/* small visual circle, full 44px touch target (it deletes a saved story) */
.story-del::before { content: ''; position: absolute; inset: -8px; }
.story-del.confirm { color: var(--danger); border-color: var(--danger); width: auto; padding: 0 0.5rem; border-radius: 0.9rem; font-size: 0.72rem; }
.story-del:hover { color: var(--danger); border-color: var(--danger); }
/* Secondary actions live in a tidy inline row in the card body, above the
   full-card open button (which it must out-rank to stay clickable). */
.story-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.story-act {
  font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: 0.4rem;
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line); cursor: pointer;
}
.story-act:hover { color: var(--accent); border-color: var(--accent); }
/* The state bookmark: where this story's reading sits. Color encodes lifecycle. */
.story-badge {
  position: absolute; top: 0.45rem; left: 0.45rem; z-index: 2;
  font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  padding: 0.15rem 0.45rem; border-radius: 0.3rem;
  color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent);
  display: inline-flex; align-items: center; gap: 0.28rem;
}
.badge-star { flex: 0 0 auto; }
.story-act { display: inline-flex; align-items: center; gap: 0.28rem; }
.story-act .act-check { flex: 0 0 auto; }
.story-badge.is-draft { color: var(--ink-dim); background: var(--panel); border-color: var(--line); }
.story-badge.is-playing { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.story-badge.is-finished { color: var(--accent-ink); background: var(--signal); border-color: var(--signal); }
.story-badge.is-featured { color: var(--accent-ink); background: var(--signal); border-color: var(--signal); }
/* Sectioned gallery (Featured + My stories): the outer #stories-grid becomes a
   column of [heading + inner grid] pairs; each .story-grid-inner is the grid. */
#stories-grid { display: block; }
.story-grid-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.7rem; }
.gallery-section-head { margin: 1.1rem 0 0.55rem; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); }
.gallery-section-head:first-child { margin-top: 0; }
.story-card.is-featured { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset; }
.story-act:disabled { opacity: 0.6; cursor: default; color: var(--signal); border-color: var(--signal); }
.story-act.danger:hover { color: var(--danger); border-color: var(--danger); }

/* --- Story Creator --- */
.settings-actions { display: inline-flex; gap: 0.5rem; }

.creator-stage-slot:empty { display: none; }
.wrap:has(.creator-surface:not([hidden])) { max-width: 88rem; }
.seed:has(.creator-surface:not([hidden])) { max-width: 84rem; }
/* When Full editor is open, hide the quick-start modes so the edit surface owns the page. */
.seed:has(.creator-surface:not([hidden])) .dk-modebar,
.seed:has(.creator-surface:not([hidden])) #quick-seed,
.seed:has(.creator-surface:not([hidden])) #deck-builder,
.seed:has(.creator-surface:not([hidden])) #seed-pin-sheet {
  display: none !important;
}
.creator-surface {
  margin-top: 0.15rem;
  animation: creator-surface-in 180ms ease-out both;
}
.creator-panel {
  position: relative; width: 100%;
  padding: 1.05rem 1.15rem 0;
  border: 1px solid var(--line); border-radius: 0.85rem;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent) inset,
    0 1.2rem 3rem rgba(0, 0, 0, 0.18);
}
.creator-panel .gallery-head {
  padding: 0 3rem 0.85rem 0; margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.creator-panel .gallery-head h2 {
  font: 650 1.15rem/1.2 var(--font-display); letter-spacing: -0.015em;
}
.creator-panel .sheet-close { position: absolute; top: 0.75rem; right: 0.75rem; }
@keyframes creator-surface-in {
  from { opacity: 0; transform: translateY(0.35rem); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .creator-surface { animation: none; } }
.creator-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: 1rem; align-items: start; }
.creator-config {
  display: grid; grid-template-columns: minmax(9.5rem, 12rem) minmax(0, 1fr); gap: 0;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-2); overflow: clip;
}
.creator-panel .gallery-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.creator-panel .gallery-head h2 { margin-bottom: 0.12rem; }
.editor-save-state {
  display: inline-flex; align-items: center; gap: 0.35rem; flex: 0 0 auto;
  min-height: 1.8rem; padding: 0.25rem 0.65rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-dim); background: var(--panel-2); font: 700 0.68rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
}
.editor-save-state::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ink-faint); }
.editor-save-state[data-state="dirty"] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
.editor-save-state[data-state="dirty"]::before { background: var(--danger); }
.editor-save-state[data-state="saving"] { color: var(--accent); border-color: var(--accent); }
.editor-save-state[data-state="saving"]::before { background: var(--accent); animation: editor-state-pulse 900ms ease-in-out infinite alternate; }
@keyframes editor-state-pulse { to { opacity: 0.35; } }
.creator-spine {
  position: sticky; top: 0.6rem; align-self: start; display: flex; flex-direction: column;
  padding: 0.75rem 0.6rem; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 82%, var(--panel-2));
}
.creator-spine-link {
  position: relative; display: flex; flex-direction: column; gap: 0.08rem; padding: 0.55rem 0.55rem 0.55rem 0.75rem;
  color: var(--ink-dim); text-decoration: none; border-radius: 0.4rem;
}
.creator-spine-link::before { content: ''; position: absolute; left: 0; top: 0.55rem; bottom: 0.55rem; width: 2px; background: transparent; }
.creator-spine-link strong { color: inherit; font: 650 0.82rem/1.2 var(--font-display); }
.creator-spine-link span { font-size: 0.66rem; line-height: 1.25; color: var(--ink-faint); }
.creator-spine-link:hover, .creator-spine-link:focus-visible, .creator-spine-link.is-current { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); outline: none; }
.creator-spine-link.is-current::before { background: var(--accent); }
.creator-canvas { min-width: 0; padding: 0 1rem 1rem; }
.creator-section { scroll-margin-top: 1rem; padding-top: 1rem; }
.creator-section + .creator-section { margin-top: 0.5rem; border-top: 1px solid var(--line); }
.creator-section-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; margin-bottom: 0.65rem; }
.creator-section-head h3 { margin: 0; color: var(--ink); font: 650 1rem/1.2 var(--font-display); }
.creator-section-head span { color: var(--ink-faint); font-size: 0.7rem; text-align: right; }
.creator-section-body { display: flex; flex-direction: column; gap: 0.5rem; }
.creator-section-body > .cfg-group:first-child { border-top: 0; padding-top: 0; }
.creator-margin { position: sticky; top: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.creator-margin-kicker { display: block; margin-bottom: 0.4rem; color: var(--accent); font: 700 0.66rem/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.creator-margin .creator-prompt, .creator-margin .creator-log-wrap { margin: 0; padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-2); }
.creator-margin .creator-row { display: flex; flex-direction: column; align-items: stretch; }
.creator-margin .creator-send { width: 100%; }
.creator-margin .creator-log { max-height: 14rem; overflow-y: auto; }
.creator-actions { position: sticky; bottom: 0; z-index: 6; margin-top: 1rem; }
.creator-actions-sub { flex-wrap: wrap; }
.creator-actions-sub .settings-inline-btn { width: auto; min-width: 0; }
.cfg-pacing-block {
  display: flex; flex-direction: column; gap: 0.45rem;
  margin: 0.35rem 0 0.75rem; padding: 0.65rem 0.75rem;
  border: 1px solid rgba(218, 205, 180, 0.32); border-radius: 0.55rem;
  background: rgba(20, 18, 16, 0.35);
}
.cfg-section-label {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim);
}
.cfg-hint { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--ink-faint); }
.cfg-field { display: flex; gap: 0.75rem; align-items: baseline; }
.cfg-field.editable {
  display: grid; grid-template-columns: minmax(6.5rem, 0.72fr) minmax(0, 1fr) auto;
  gap: 0.35rem 0.6rem; align-items: start;
}
.cfg-field.editable.wide { grid-template-columns: minmax(6.5rem, 0.4fr) minmax(0, 1fr) auto; }
.cfg-label {
  flex: 0 0 6.5rem; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 600;
}
.cfg-fact-input, .cfg-special-label-input, .cfg-special-desc-input,
.cfg-var-name-input, .cfg-var-type-sel, .cfg-var-value-input, .cfg-var-desc-input,
.cfg-ach-title-input, .cfg-ach-desc-input, .cfg-ach-kind-sel, .cfg-ach-name-input, .cfg-ach-val-input {
  font-family: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 0.35rem; padding: 0.35rem 0.5rem;
  min-height: 32px; width: 100%; min-width: 0;
}
.cfg-fact-textarea, .cfg-special-desc-input, .cfg-ach-desc-input { resize: vertical; line-height: 1.4; }
.cfg-fact-input:focus, .cfg-special-label-input:focus, .cfg-special-desc-input:focus,
.cfg-var-name-input:focus, .cfg-var-type-sel:focus, .cfg-var-value-input:focus, .cfg-var-desc-input:focus,
.cfg-ach-title-input:focus, .cfg-ach-desc-input:focus, .cfg-ach-kind-sel:focus, .cfg-ach-name-input:focus, .cfg-ach-val-input:focus {
  border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px;
}
.cfg-fact-input::placeholder, .cfg-special-label-input::placeholder, .cfg-special-desc-input::placeholder,
.cfg-var-name-input::placeholder, .cfg-var-value-input::placeholder, .cfg-var-desc-input::placeholder,
.cfg-ach-title-input::placeholder, .cfg-ach-desc-input::placeholder, .cfg-ach-name-input::placeholder, .cfg-ach-val-input::placeholder { color: var(--ink-faint); }
.cfg-field-acts { display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }
.cfg-field-hint {
  grid-column: 2 / -1; margin: -0.15rem 0 0; font-size: 0.72rem; line-height: 1.35; color: var(--ink-dim);
}
select.cfg-fact-input { cursor: pointer; }
.cfg-group { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.cfg-group .cfg-label { flex: none; }
/* Cast group: header with an add control, then interactive rows. */
.cfg-group-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.cfg-mini-btn {
  font-family: inherit; font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: 0.35rem;
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line); cursor: pointer; white-space: nowrap;
}
.cfg-mini-btn { min-height: 30px; display: inline-flex; align-items: center; } /* WCAG 2.5.8 target size */
.cfg-mini-btn:hover { color: var(--accent); border-color: var(--accent); }
.cfg-mini-btn.danger:hover { color: var(--danger); border-color: var(--danger); }
.cfg-mini-btn:disabled { opacity: 0.6; cursor: default; }
.cfg-empty-note { color: var(--ink-faint); font-size: 0.8rem; font-style: italic; }
.cfg-special-row { display: grid; grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1fr); gap: 0.45rem; }
.cfg-vars { display: flex; flex-direction: column; gap: 0.4rem; }
.cfg-var-row {
  display: grid; grid-template-columns: minmax(7rem, 1fr) 5rem 5.5rem minmax(8rem, 1.25fr) auto;
  gap: 0.4rem; align-items: center;
}
.cfg-cast { display: flex; flex-direction: column; gap: 0.6rem; }
/* Each cast member is now a small editor card: a head row then a field grid. */
.cfg-cast-row { display: block; padding: 0.55rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--panel-2); }
.cfg-cast-row[open] { display: flex; flex-direction: column; gap: 0.55rem; }
.cfg-cast-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; cursor: pointer; list-style: none; }
.cfg-cast-head::-webkit-details-marker { display: none; }
.cfg-cast-head::after {
  content: 'Details'; margin-left: auto; color: var(--ink-faint); font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.cfg-cast-row[open] .cfg-cast-head::after { content: 'Hide'; }
.cfg-cast-thumb {
  flex: 0 0 auto; width: 2.9rem; height: 3.87rem; border-radius: 0.35rem; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.cfg-cast-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.cfg-cast-thumb.has-image { cursor: zoom-in; }
.cfg-cast-thumb.empty { color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.cfg-cast-ident { flex: 1 1 10rem; min-width: 0; display: flex; flex-direction: column; gap: 0.18rem; }
.cfg-cast-summary {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-dim); font-size: 0.74rem;
}
.cfg-cast-summary.empty { color: var(--ink-faint); font-style: italic; }
.cfg-cast-name-input { width: 100%; min-width: 0; font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 0.35rem; padding: 0.35rem 0.5rem; min-height: 32px; }
.cfg-cast-name-input:focus { border-color: var(--accent); outline: none; }
.cfg-cast-acts { display: flex; gap: 0.3rem; flex-shrink: 0; flex-wrap: wrap; }
/* Detail grid: two columns on wide panels, single column when narrow. */
.cfg-cast-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.6rem; }
.cfg-cast-field { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cfg-cast-field.wide { grid-column: 1 / -1; }
.cfg-cast-field-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.35rem;
  min-height: 1.4rem;
}
.cfg-cast-field-head .cfg-field-acts { flex-shrink: 0; }
.cfg-cast-field-label { font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }
.cfg-cast-input, .cfg-cast-textarea, .cfg-cast-select {
  font-family: inherit; font-size: 0.85rem; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.4rem 0.55rem; width: 100%; box-sizing: border-box;
  min-height: 40px;
}
.cfg-cast-select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 1.85rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 1.5px),
    calc(100% - 9px) calc(50% - 1.5px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  background-color: var(--panel);
}
.cfg-cast-input { min-height: 30px; }
.cfg-cast-textarea { resize: vertical; min-height: 2.4rem; line-height: 1.4; }
.cfg-cast-input:focus, .cfg-cast-textarea:focus, .cfg-cast-select:focus { border-color: var(--accent); outline: none; }
.cfg-cast-input::placeholder, .cfg-cast-textarea::placeholder { color: var(--ink-faint); }
@media (max-width: 640px) {
  .cfg-field.editable, .cfg-field.editable.wide, .cfg-special-row, .cfg-var-row { grid-template-columns: 1fr; }
  .cfg-field-acts { justify-content: flex-start; }
  .cfg-cast-head::after { flex-basis: 100%; margin-left: 3.4rem; }
}
@media (max-width: 520px) { .cfg-cast-fields { grid-template-columns: 1fr; } }
/* Inline saved-character picker, floated over the Creator panel. */
.char-picker {
  position: absolute; top: 3.4rem; right: 1.4rem; z-index: 5; max-width: 16rem; width: calc(100% - 2.8rem);
  display: flex; flex-direction: column; gap: 0.3rem; max-height: 60vh; overflow-y: auto;
  padding: 0.7rem; border: 1px solid var(--accent); border-radius: var(--radius-md);
  background: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.char-picker-title { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }
.char-pick-item {
  font-family: inherit; font-size: 0.85rem; text-align: left; padding: 0.45rem 0.6rem; border-radius: 0.35rem;
  color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); cursor: pointer;
}
.char-pick-item:hover { border-color: var(--accent); color: var(--accent); }
.char-pick-close { margin-top: 0.2rem; font-family: inherit; font-size: 0.78rem; padding: 0.35rem; border-radius: 0.35rem; color: var(--ink-dim); background: transparent; border: 1px solid var(--line); cursor: pointer; }
.cfg-plot { display: flex; flex-direction: column; gap: 0.4rem; }
.cfg-plot-row { display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; flex-wrap: wrap; }
/* Editable plot-point fields (inline add/edit/remove in the Creator). */
.cfg-plot-at-input, .cfg-plot-beat-input, .cfg-plot-strength-sel, .cfg-plot-role-input {
  font-family: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 0.35rem; padding: 0.3rem 0.45rem; min-height: 30px;
}
.cfg-plot-at-input { flex: 0 0 4rem; width: 4rem; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.cfg-plot-beat-input { flex: 1 1 9rem; min-width: 0; font-size: 0.85rem; font-family: inherit; resize: vertical; min-height: 32px; line-height: 1.4; }
.cfg-plot-strength-sel { flex: 0 0 auto; font-size: 0.72rem; cursor: pointer; }
.cfg-plot-role-input { flex: 0 1 6rem; min-width: 4rem; font-size: 0.78rem; }
.cfg-plot-advanced {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  margin: 0.1rem 0 0.05rem;
}
.cfg-plot-resolve-kind, .cfg-plot-resolve-axis, .cfg-plot-resolve-op,
.cfg-plot-strength-sel,
.cfg-plot-resolve-name, .cfg-plot-resolve-value, .cfg-plot-min-open, .cfg-plot-expires {
  font-family: inherit; color: var(--ink); background-color: var(--panel);
  border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.3rem 0.45rem; min-height: 36px; font-size: 0.78rem;
  box-sizing: border-box;
}
.cfg-plot-resolve-kind, .cfg-plot-resolve-axis, .cfg-plot-resolve-op, .cfg-plot-strength-sel {
  flex: 0 0 auto; cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1.65rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position:
    calc(100% - 12px) calc(50% - 1.5px),
    calc(100% - 7px) calc(50% - 1.5px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.cfg-plot-resolve-kind:hover, .cfg-plot-resolve-axis:hover, .cfg-plot-resolve-op:hover,
.cfg-plot-strength-sel:hover { border-color: var(--accent); }
.cfg-plot-resolve-kind:focus-visible, .cfg-plot-resolve-axis:focus-visible,
.cfg-plot-resolve-op:focus-visible, .cfg-plot-strength-sel:focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: 1px;
}
.cfg-plot-resolve-name, .cfg-plot-resolve-value { flex: 0 1 6rem; min-width: 4rem; }
.cfg-plot-min-open, .cfg-plot-expires { flex: 0 0 5rem; width: 5rem; font-variant-numeric: tabular-nums; }
/* Grants drop to their own full-width line under the beat (flex-basis 100%). */
.cfg-plot-grants-input {
  flex: 1 1 100%; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 0.35rem; padding: 0.3rem 0.45rem;
  resize: vertical; min-height: 30px; line-height: 1.4;
}
.cfg-plot-grants-input:focus { border-color: var(--accent); outline: none; }
.cfg-plot-at-input:focus, .cfg-plot-beat-input:focus, .cfg-plot-strength-sel:focus,
.cfg-plot-role-input:focus, .cfg-plot-resolve-kind:focus, .cfg-plot-resolve-name:focus,
.cfg-plot-resolve-axis:focus, .cfg-plot-resolve-op:focus, .cfg-plot-resolve-value:focus,
.cfg-plot-min-open:focus, .cfg-plot-expires:focus { border-color: var(--accent); outline: none; }
.cfg-plot-at-input::placeholder, .cfg-plot-beat-input::placeholder, .cfg-plot-grants-input::placeholder,
.cfg-plot-role-input::placeholder, .cfg-plot-resolve-name::placeholder, .cfg-plot-resolve-value::placeholder,
.cfg-plot-min-open::placeholder, .cfg-plot-expires::placeholder { color: var(--ink-faint); }

.creator-prompt label { display: block; font-size: 0.88rem; color: var(--ink-dim); margin-bottom: 0.45rem; }
.creator-row { display: flex; gap: 0.5rem; align-items: stretch; }
.creator-input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 0.92rem; line-height: 1.45; resize: vertical;
  padding: 0.6rem 0.75rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 0.5rem;
}
.creator-input::placeholder { color: var(--ink-faint); }
.creator-input:focus { border-color: var(--accent); outline: none; }
.creator-send { white-space: nowrap; align-self: flex-end; padding: 0.6rem 1.2rem; }
.creator-prompt-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.5rem; }
.creator-prompt-foot .settings-inline-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.creator-hint { color: var(--ink-faint); font-size: 0.72rem; }

.creator-log-title {
  font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 600; margin: 0 0 0.5rem;
}
.creator-log { display: flex; flex-direction: column; gap: 0.6rem; max-height: 16rem; overflow-y: auto; }
.creator-log-entry {
  position: relative; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); border-left: 2px solid var(--accent);
}
.creator-log-entry.undone { opacity: 0.5; border-left-color: var(--line); }
.cl-summary { font-size: 0.88rem; color: var(--ink); margin-bottom: 0.3rem; }
.cl-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.cl-list li { font-size: 0.82rem; color: var(--ink-dim); }
.cl-empty { font-size: 0.82rem; color: var(--ink-faint); font-style: italic; }
.cl-undo {
  margin-top: 0.45rem; font-family: inherit; font-size: 0.74rem; padding: 0.2rem 0.55rem; border-radius: 0.35rem;
  min-height: 30px; display: inline-flex; align-items: center; /* WCAG 2.5.8 target size */
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line); cursor: pointer;
}
.cl-undo:hover { color: var(--signal); border-color: var(--signal); }
/* Sticky action footer: Start is the prominent primary; secondary actions
   (Save / Fill gaps / Close) sit beneath it. Sticks to the bottom of the
   scrolling overlay so the primary action and Close are always reachable on a
   phone without hunting for the corner X. */
.creator-actions {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; flex-direction: column; gap: 0.55rem;
  margin: 1.2rem -1.2rem 0; padding: 0.9rem 1.2rem 1.1rem;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Without backdrop-filter the translucent footer would seam against the
   94%-translucent panel — keep it fully opaque there. */
@supports not (backdrop-filter: blur(1px)) {
  .creator-actions { background: var(--panel); }
}
.creator-actions #creator-start { width: 100%; }
.creator-actions-sub { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.creator-actions-sub .settings-inline-btn { flex: 1 1 auto; min-height: 40px; justify-content: center; display: inline-flex; align-items: center; }
.creator-start-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; }
.creator-start-btn .btn-label { line-height: 1; }
.creator-send { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.cfg-icon-btn {
  min-width: 2rem;
  padding-inline: 0.4rem;
  justify-content: center;
}
.cfg-icon-btn .icon { display: block; }

/* App-wide action icons (Settings tools, home shelves, sheets, cast readout). */
.ui-icon-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.4rem !important;
}
.ui-icon-btn .icon { display: block; margin: 0 auto; flex: 0 0 auto; }
.ui-icon-label-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.ui-icon-label-btn .icon { flex: 0 0 auto; }
.ui-icon-label-btn .btn-label { line-height: 1.1; white-space: nowrap; }
.settings-inline-btn.ui-icon-label-btn,
.settings-inline-btn.ui-icon-btn,
.home-refresh.ui-icon-btn,
.gallery-refresh.ui-icon-btn,
.char-mini-btn.ui-icon-btn,
.char-mini-btn.ui-icon-label-btn,
.dk-mode-btn.ui-icon-label-btn,
.lb-btn.ui-icon-label-btn,
.cfg-mini-btn.ui-icon-label-btn,
.seed-btn.begin.ui-icon-label-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-refresh.ui-icon-btn,
.gallery-refresh.ui-icon-btn {
  width: 2.5rem;
  min-width: 2.5rem;
  padding: 0.35rem;
}
.dk-mode-btn.ui-icon-label-btn { gap: 0.35rem; }
.story-tool-card-acts .settings-inline-btn.ui-icon-label-btn { min-width: 0; }
.char-readout-acts .char-mini-btn.ui-icon-btn { flex: 0 0 auto; min-width: 2.5rem; }
.edit-more-btn.ui-icon-btn { min-width: 2.5rem; }

/* Fullscreen image lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 60; background: #060504;
  display: block; padding: 0;
}
.lightbox-inner {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: 100%; height: 100%;
  padding: 0;
  box-sizing: border-box;
}
/* Character readout — sheet on phone, compact card on desktop. */
.char-readout {
  position: fixed; inset: 0; z-index: 62; background: rgba(6, 5, 4, 0.94);
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
.char-readout-inner {
  background: var(--panel-2); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 0.9rem 0.9rem 0 0;
  width: min(100vw, 30rem); max-height: min(92vh, calc(100dvh - 0.5rem));
  max-height: min(92dvh, calc(100dvh - 0.5rem));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
}
@media (min-width: 621px) {
  .char-readout { align-items: center; padding: 1rem; }
  .char-readout-inner {
    border-radius: 0.75rem; border-bottom: 1px solid var(--line);
    padding: 1.1rem; max-height: min(92dvh, 52rem);
  }
}
.char-readout-body { display: flex; flex-direction: column; gap: 0.7rem; }
/* Persist-scope one-liner shared by Creator, char-lib, cards sheet, readout. */
.editor-scope-chrome {
  margin: 0.15rem 0 0.5rem;
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0.78;
  max-width: 42rem;
}
.creator-start-checklist {
  list-style: none;
  margin: 0 0 0.45rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--accent));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-dim);
}
.creator-start-checklist[hidden] { display: none !important; }
.creator-start-checklist .creator-start-gap {
  font-weight: 600;
  color: var(--ink);
  margin-left: 0.6rem;
}
.char-readout-section {
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  padding: 0.15rem 0.55rem 0.45rem;
}
.char-readout-section + .char-readout-section { margin-top: 0.15rem; }
.char-readout-section-summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 0.4rem 0.15rem;
  list-style: none;
}
.char-readout-section-summary::-webkit-details-marker { display: none; }
.char-readout-section-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.25rem;
}
.char-readout-section-summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  color: var(--ink-faint);
  transition: transform 0.12s ease;
}
.char-readout-section[open] > .char-readout-section-summary::before {
  transform: rotate(90deg);
}
.char-readout-section-note {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-dim);
}
.char-readout-section-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-bottom: 0.2rem;
}
.char-readout-section.is-cheat {
  border-color: color-mix(in srgb, var(--danger, #c44) 35%, var(--line));
  background: color-mix(in srgb, var(--danger, #c44) 6%, var(--panel));
}
/* Upload-won't-carry note: a photo is set but the current model/identity-lock
   won't bring the face into scene art. Quiet accent-tinted callout. */
.char-readout-hint {
  margin-top: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-dim);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--accent));
}
.char-readout-portrait {
  width: 100%; max-width: 11rem; aspect-ratio: 3 / 4; margin: 0 auto; align-self: center;
  border-radius: 0.6rem; overflow: hidden; background: var(--bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.char-readout-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.char-readout-portrait.empty .char-initial { font-size: 3rem; }
.char-readout-portrait.char-you-mark { color: var(--accent); font-size: 3rem; }
.char-readout-head { display: flex; flex-direction: column; gap: 0.15rem; text-align: center; }
.char-readout-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink); }
.char-readout-acts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.25rem; align-items: stretch; }
.char-readout-acts-top { margin-top: 0.15rem; margin-bottom: 0.15rem; }
.char-readout-acts-foot { margin-top: 0.55rem; margin-bottom: 0.1rem; }
.char-readout-acts-foot .char-mini-btn { flex: 1 1 100%; }
.char-readout-acts .char-mini-btn { flex: 1 1 auto; min-height: 40px; text-align: center; justify-content: center; }
/* Inline save confirmation when a field commits (or library save lands). */
.char-edit-status {
  margin: 0.1rem 0 0.15rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.4rem;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--accent-ink, var(--ink));
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
}
.char-edit-status[hidden] { display: none !important; }
.char-edit-status.is-flash {
  animation: charEditSavedFlash 0.55s ease;
}
@keyframes charEditSavedFlash {
  from { filter: brightness(1.25); transform: translateY(-1px); }
  to { filter: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .char-edit-status.is-flash { animation: none; }
}
/* You readout — multi-slot inventory editor */
.you-inventory-editor { display: flex; flex-direction: column; gap: 0.4rem; }
.you-inv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 0.35rem; align-items: center; }
.you-inv-row .char-edit-input { width: 100%; min-width: 0; }
.you-inventory-editor > .char-mini-btn { align-self: flex-start; }
.char-cheat-row { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 0.35rem; padding-inline: 0.4rem; }
.char-preset-row .char-preset-controls { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 auto; min-width: 0; }
.char-preset-row .char-preset-select { width: 100%; cursor: pointer; }
.char-preset-row .char-preset-custom[hidden] { display: none !important; }
.lightbox-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lightbox-inner img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: contain; border-radius: 0; border: 0;
  transition: opacity .2s ease;
}
.lightbox-inner > .sheet-close {
  position: absolute; top: max(.75rem, env(safe-area-inset-top)); right: .75rem;
  z-index: 4; background: rgba(8,7,6,.78); backdrop-filter: blur(10px);
}
/* "Redrawing…" overlay while a regenerate is in flight — keeps the player in
   the studio to iterate instead of bouncing them back to the scene. */
.lightbox-working {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0.45rem 0.9rem; border-radius: 0.5rem; font-size: 0.85rem;
  color: var(--accent-ink); background: var(--accent); display: none;
}
.lightbox.lb-working .lightbox-working { display: block; }
.lightbox.lb-working #lightbox-img { opacity: 0.4; }
.lightbox-provenance {
  position: relative; z-index: 3; align-self: flex-start;
  max-width: min(78vw, 38rem); margin: max(.75rem, env(safe-area-inset-top)) 3.5rem 0 .75rem;
  padding: .5rem .7rem; border-radius: .45rem;
  color: var(--media-status-ink); background: rgba(8,7,6,.82);
  font-size: .78rem; line-height: 1.4;
}
/* The image-studio cluster: edit prompt + model picker, stacked. */
.lightbox-edit {
  position: relative; z-index: 3; display: flex; flex-direction: column; gap: 0.5rem;
  width: min(92vw, 40rem); margin-top: auto; padding-top: .75rem;
}
.lb-model-row { display: flex; align-items: center; gap: 0.6rem; }
.lb-model-label { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); flex: 0 0 auto; }
/* Pin the lightbox model select to one line. The base .model-select uses
   flex:1 1 Xrem for horizontal Settings rows (incl. a mobile `flex:1 1 8rem`);
   inside the lightbox's flex COLUMN that flex-basis becomes a HEIGHT, ballooning
   the select to ~128px. The descendant selector outranks the bare .model-select
   rules (incl. the one in the mobile media query) so it holds on every width. */
.lightbox-inner .lb-model { flex: 1 1 auto; min-width: 0; width: auto; max-width: none; min-height: 44px; height: 44px; }
/* A single action bar holds every image control so the lightbox is the one
   place to regenerate/steer/download/close — reachable on a phone. */
.lightbox-bar {
  position: relative; z-index: 3; display: flex; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center; width: min(92vw, 40rem); margin-bottom: max(.85rem, env(safe-area-inset-bottom));
}
.lb-btn {
  flex: 1 1 auto; justify-content: center; min-width: 6rem;
  font-family: inherit; font-size: 0.88rem; padding: 0.55rem 1.1rem; min-height: 44px;
  display: inline-flex; align-items: center; border-radius: 0.5rem; cursor: pointer;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line); text-decoration: none;
}
.lb-btn:hover { border-color: var(--accent); }
.lb-btn.lb-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.lb-btn.lb-primary:hover { background: var(--accent-hover); }
.lightbox-steer { display: flex; gap: 0.4rem; width: min(92vw, 40rem); }
.lightbox-steer input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 0.9rem; padding: 0.6rem 0.8rem;
  border-radius: 0.5rem; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
.lightbox-steer button { font-family: inherit; padding: 0.5rem 1rem; border-radius: 0.5rem; background: var(--panel); color: var(--ink); border: 1px solid var(--line); cursor: pointer; }

/* Debug log */
.debug {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 69; max-height: 38vh;
  display: flex; flex-direction: column;
  background: rgba(10, 9, 8, 0.96); border-top: 1px solid var(--line);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.debug-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.35rem 0.7rem; font-size: 0.72rem; color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
}
.debug-actions { display: flex; gap: 0.4rem; }
.debug-head button {
  font-family: inherit; font-size: 0.7rem; padding: 0.2rem 0.55rem; border-radius: 0.3rem;
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line); cursor: pointer;
}
.debug-body {
  margin: 0; padding: 0.5rem 0.7rem; overflow-y: auto;
  font-size: 0.7rem; line-height: 1.45; color: var(--ink-dim); white-space: pre-wrap; word-break: break-word;
}

/* Mobile state summary (one line under the header; opens the Ledger sheet).
   The old vertical drawer this used to toggle is gone — see the Stage rail. */
.state-toggle {
  display: none !important;
}
.state-sheet-tabs {
  display: flex; gap: 0.35rem; align-items: center; flex: 1;
}
.state-sheet-tab {
  font: inherit; font-size: 0.85rem; padding: 0.35rem 0.7rem; border-radius: 0.4rem;
  color: var(--ink-dim); background: transparent; border: 1px solid transparent; cursor: pointer;
}
.state-sheet-tab.active, .state-sheet-tab[aria-selected="true"] {
  color: var(--ink); border-color: var(--line); background: var(--panel);
}
/* min-width:0 + overflow guards: a long summary truncates instead of
   widening the page (the flexbox min-width:auto overflow). */
.state-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.state-caret { color: var(--accent); flex-shrink: 0; }
/* Journey diff chips (also used to be the drawer's stat chips). */
.stat-chip {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem;
  padding: 0.3rem 0.6rem; border-radius: 1rem; min-height: 32px; max-width: 100%;
  font-size: 0.78rem; color: var(--ink-dim); overflow-wrap: anywhere;
  background: var(--panel); border: 1px solid var(--line);
}
.stat-chip.author { border-color: rgba(200,164,90,0.45); }
.stat-chip.has-desc { cursor: pointer; }
.stat-chip .stat-name { text-transform: capitalize; }
.stat-chip .stat-val { color: var(--accent); font-weight: 600; }
.stat-chip .chip-desc { display: none; flex-basis: 100%; font-size: 0.72rem; color: var(--ink-faint); line-height: 1.4; }
.stat-chip.expanded .chip-desc { display: block; }
.stat-chip.expanded { background: var(--panel-2); }
/* Armed risks read warmer than ordinary stats — a standing danger, not a number. */
.stat-chip.risk { border-color: rgba(196,92,72,0.5); }
.stat-chip.risk .stat-val { color: var(--risk); font-weight: 600; }

/* A fired trigger: a terse marker above the choices on the scene it struck. */
.scene-fired {
  display: flex; align-items: center; gap: 0.45rem; margin: 1.1rem 0 0;
  padding: 0.45rem 0.7rem; border-radius: 0.45rem;
  background: rgba(196,92,72,0.12); border: 1px solid rgba(196,92,72,0.4);
  font-size: 0.82rem; color: var(--risk);
  animation: firedIn 0.4s ease;
}
.scene-fired .fired-mark { font-size: 0.95rem; }
.scene-fired .fired-text { letter-spacing: 0.01em; }
@keyframes firedIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* The epilogue card shown when a story reaches its ending. */
.scene-ending {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  margin: 1.75rem 0 0.5rem; padding: 1.75rem 1rem;
  border-top: 1px solid var(--line); text-align: center;
  animation: firedIn 0.5s ease;
}
.scene-ending .ending-mark {
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.7rem;
  letter-spacing: 0.02em; color: var(--accent);
}
.scene-ending .ending-again { text-align: center; max-width: 16rem; }

/* Bottom action composer (always present) */
.composer {
  flex: 0 0 auto;
  position: relative;
  z-index: 40;
  margin: 0; padding: 0.35rem 0 calc(var(--space-2) + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(12,11,10,.96), var(--bg) .9rem);
  box-shadow: 0 -9px 20px rgba(8,7,6,.58);
  display: flex; flex-direction: column; gap: 0.4rem;
}
#action-surface #choice-dock:not([hidden]) + .composer {
  border-top: 1px solid var(--line);
  margin-top: -0.8rem;
  padding-top: 0.65rem;
}
/* Single Menu hub → dropdown with Cast, Gallery, nav, and Look. */
.utility-cluster {
  position: relative; z-index: 60;
  display: flex; align-items: center; justify-content: flex-end;
  gap: .28rem; flex-shrink: 0;
}
.utility-hub {
  position: relative;
  z-index: 62;
  width: auto;
  flex-direction: column;
  gap: .12rem;
  padding: 0 .42rem;
  color: var(--ink-dim);
  /* Soft plate so the icon stays legible over scene art/prose without a full bar. */
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
.utility-hub .ctrl-label {
  display: block;
  font: 600 .58rem var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.utility-hub svg { transition: transform .22s ease; }
.utility-hub[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.utility-hub[aria-expanded="true"] svg { transform: rotate(45deg); }
.utility-menu {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  width: min(20rem, calc(100vw - 1.4rem));
  z-index: 61;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .55rem;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 12px 30px rgba(0,0,0,.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform-origin: 100% 0;
  animation: utilityOrbitIn .2s cubic-bezier(.25,1,.5,1);
}
.utility-menu[hidden] { display: none !important; }
.utility-menu-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
}
@keyframes utilityOrbitIn {
  from { opacity: 0; transform: scale(.96) translateY(-.2rem); }
  to { opacity: 1; transform: none; }
}
.utility-menu .deck-btn {
  position: static;
  width: 100%; height: 3rem;
  min-width: 44px; min-height: 44px;
  justify-content: flex-start;
  gap: .5rem;
  padding: 0 .65rem;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: .45rem;
  box-shadow: none;
}
/* Look / image quick controls under Menu (synced with Settings → Rendering). */
.utility-look {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .5rem .45rem .35rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.utility-look-kicker {
  margin: 0;
  font: 600 .62rem var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.utility-look-field {
  display: grid;
  gap: .2rem;
  font-size: .72rem;
  color: var(--ink-dim);
}
.utility-look-field > span {
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .62rem;
  color: var(--ink-faint);
}
.utility-look-select {
  width: 100%;
  font: inherit;
  font-size: .82rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: .4rem;
  padding: .4rem .5rem;
  min-height: 2.35rem;
}
.utility-look-select:focus,
.utility-look-select:focus-visible {
  outline: none;
  border-color: var(--accent);
}
.utility-look-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem .45rem;
  margin-top: .1rem;
}
.utility-look-check {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--ink-dim);
  cursor: pointer;
  min-height: 1.75rem;
}
.utility-look-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.utility-menu .deck-btn:hover,
.utility-menu .deck-btn:focus-visible {
  color: var(--accent); border-color: var(--accent); background: var(--panel-2);
}
.utility-menu .ctrl-label {
  position: static;
  transform: none;
  display: block;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font: 600 .66rem var(--font-display);
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 1;
  pointer-events: none;
}
.composer-form, .director-form { display: flex; gap: 0.5rem; align-items: stretch; min-width: 0; }
/* Special as the left bookend of the action bar: outlined gold (an ability the
   player spends) against send's filled gold (the primary action). */
.composer-special {
  flex: 0 0 auto; width: auto; padding: 0 0.85rem; min-width: 44px; min-height: 44px;
  color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 0.5rem;
}
.composer-special .ctrl-label { display: none; }
.composer-special:hover { background: var(--accent); color: var(--accent-ink); }
.composer-form input, .director-form input {
  flex: 1; min-width: 0; font-family: inherit; font-size: var(--fs-action); padding: 0.6rem 0.8rem;
  border-radius: 0.5rem; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
.icon-btn.send {
  width: auto; padding: 0 0.85rem; min-width: 44px; min-height: 44px;
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.icon-btn.send:hover { background: var(--accent-hover); border-color: var(--accent); color: var(--accent-ink); }

/* Director pop-out */
.director-dock {
  position: fixed; z-index: 56; right: 1rem; bottom: 1rem;
  width: min(24rem, calc(100vw - 2rem)); max-height: 72vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0.7rem;
  box-shadow: 0 16px 44px rgba(0,0,0,0.55);
}
.director-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 0.95rem; color: var(--ink); font-weight: 600;
}
.director-form { padding: 0.6rem; border-top: 1px solid var(--line); }
@media (max-width: 620px) {
  .director-dock {
    right: 0; left: 0; bottom: 0; width: 100%;
    max-height: min(78vh, calc(100vh - 0.75rem));
    max-height: min(78dvh, calc(100dvh - 0.75rem));
    border-radius: 0.7rem 0.7rem 0 0;
  }
  .director-form { padding-bottom: calc(0.6rem + env(safe-area-inset-bottom)); }
}
.chat-log {
  flex: 1; overflow-y: auto; padding: 0.6rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.chat-msg { display: flex; }
.chat-msg.you { justify-content: flex-end; }
.chat-bubble {
  max-width: 85%; padding: 0.5rem 0.7rem; border-radius: 0.6rem;
  font-size: 0.88rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.chat-msg.you .chat-bubble { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 0.2rem; }
.chat-msg.director .chat-bubble { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 0.2rem; }

/* Lane heads — a hairline-ruled label that names each shelf of the setup. */
.lane-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
  max-width: 38rem; margin: 0 auto 0.75rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line); text-align: left;
}
.lane-head > span:first-child {
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  letter-spacing: 0.01em; color: var(--ink);
}
.lane-sub { font-size: 0.74rem; color: var(--ink-faint); font-style: italic; }
.lane-tools { display: inline-flex; align-items: center; gap: .55rem; }
.home-refresh {
  min-height: 32px; padding: .25rem .55rem; border: 1px solid var(--line);
  border-radius: .4rem; color: var(--ink-dim); background: transparent;
  font: inherit; font-size: .72rem; cursor: pointer;
}
.home-refresh:hover, .home-refresh:focus-visible { color: var(--accent); border-color: var(--accent); }
.home-refresh:disabled { opacity: .55; cursor: wait; }

/* Home shelves share one column width with the seed tools above. */
.library-section,
#setup .home-shelf { max-width: 38rem; margin: 2.5rem auto 0; text-align: left; }
.library-first { margin-bottom: 2.5rem; }

/* Home Seeds — taste-driven Begin-ready openings between Quick seed and Library. */
.seeds-section { margin-top: 2rem; }
.seeds-hint {
  margin: 0 0 0.75rem; font-size: 0.84rem; line-height: 1.45; color: var(--ink-dim);
}
.seeds-grid { display: flex; flex-direction: column; gap: 0.65rem; }
.home-seed-card {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.75rem 0.8rem; border: 1px solid var(--line); border-radius: 0.65rem;
  background: color-mix(in srgb, var(--panel-2) 88%, var(--panel));
}
.home-seed-card:focus-within { border-color: var(--accent); }
.home-seed-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
}
.home-seed-title {
  margin: 0; font: 600 1rem/1.25 var(--font-display); color: var(--ink);
}
.home-seed-angle {
  flex: 0 0 auto; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0.15rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--line);
}
.home-seed-angle.is-core { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.home-seed-angle.is-adjacent { color: var(--ink-dim); }
.home-seed-angle.is-curveball {
  color: color-mix(in srgb, var(--accent) 70%, #c45);
  border-color: color-mix(in srgb, var(--accent) 35%, #c45);
}
.home-seed-prompt {
  margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--ink);
  white-space: pre-wrap;
}
.home-seed-acts {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
}
.home-seed-acts .cfg-mini-btn,
.home-seed-acts .settings-inline-btn { min-height: 32px; }
.home-seed-steer-row {
  display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.15rem;
  padding-top: 0.55rem; border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.home-seed-steer-label {
  font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint);
}
.home-seed-steer {
  width: 100%; min-height: 2.6rem; resize: vertical;
  padding: 0.45rem 0.55rem; border: 1px solid var(--line); border-radius: 0.45rem;
  background: var(--panel); color: var(--ink); font: 0.84rem/1.4 var(--font-body, inherit);
}
.home-seed-steer:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.home-seed-steer-acts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.library-controls {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.lib-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.lib-chip {
  font-size: 0.76rem; padding: 0.32rem 0.75rem; border-radius: 1rem; min-height: 32px;
  color: var(--ink-dim); background: transparent; border: 1px solid var(--line); cursor: pointer;
}
.lib-chip:hover { border-color: var(--accent); color: var(--accent); }
.lib-chip.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.lib-chip:focus-visible,
.library-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.library-sort-label {
  flex: 0 0 auto; display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em;
}
.library-sort {
  min-height: 34px; max-width: 11.5rem; padding: 0.3rem 1.7rem 0.3rem 0.55rem;
  border: 1px solid var(--line); border-radius: 0.45rem;
  background: var(--panel); color: var(--ink); font: 500 0.76rem var(--font-display);
}
.library-overlay-controls {
  flex: 0 0 auto; padding-bottom: 0.75rem; margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

/* Compressed row index: a long library scans as a list, not a tile wall. */
.library-bulkbar {
  display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem;
  padding: 0.3rem 0.1rem; min-height: 32px;
}
.library-bulkbar input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); cursor: pointer; }
.bulk-all-label { font-size: 0.78rem; color: var(--ink-dim); }
.bulk-count { font-size: 0.76rem; color: var(--ink-faint); margin-left: auto; }
.bulk-del {
  font-size: 0.74rem; padding: 0.28rem 0.7rem; border-radius: 0.4rem; min-height: 32px;
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line); cursor: pointer;
}
.bulk-del:disabled { opacity: 0.45; cursor: default; }
.bulk-del:not(:disabled):hover { color: var(--danger); border-color: var(--danger); }
.bulk-del.confirm { color: var(--danger); border-color: var(--danger); }

/* Home library — roomy list rows with a real cover plate (not a tile wall). */
#library-grid,
.library-list { display: flex; flex-direction: column; gap: 0.5rem; }
.library-stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}
.library-zone {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.library-zone-pinned {
  padding: 0.55rem 0.55rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.library-zone-head {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.library-zone-label {
  margin: 0;
  font: 600 0.68rem var(--font-display);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.library-zone-pinned .library-zone-label {
  color: var(--accent);
}
.library-zone-note {
  margin: 0;
  font-size: 0.72rem;
  color: var(--ink-faint);
  line-height: 1.3;
}
.library-pinned-list { gap: 0.4rem; }
.row-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.story-row {
  position: relative; display: flex; align-items: stretch; gap: 0.7rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 0.65rem;
  background: color-mix(in srgb, var(--panel-2) 88%, var(--panel));
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.story-row:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: 0 8px 22px -18px rgba(0, 0, 0, 0.55);
}
.story-row:focus-within { border-color: var(--accent); }
.story-pick { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: 1.15rem; accent-color: var(--accent); cursor: pointer; }
.story-pick-spacer { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: 1.15rem; }
/* The whole thumb-and-title block is one generous open target — clicking
   anywhere on it resumes the story (deletion lives in the bulk bar). */
.row-open {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.75rem;
  text-align: left; background: transparent; border: 0; padding: 0.15rem; border-radius: 0.45rem;
  cursor: pointer; color: inherit; font: inherit;
}
.row-open:hover { background: rgba(200, 164, 90, 0.07); }
.row-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.row-thumb {
  flex: 0 0 auto; width: 3.4rem; height: 3.4rem; border-radius: 0.45rem; overflow: hidden;
  background: var(--bg); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row-thumb.empty { border-style: dashed; display: grid; place-items: center; }
.row-thumb-mark {
  color: var(--ink-faint); font: 600 0.75rem var(--font-display); letter-spacing: 0.08em;
}
.row-thumb.kind-story { background: color-mix(in srgb, var(--accent) 9%, var(--bg)); }
.row-thumb.kind-draft { background: color-mix(in srgb, var(--ink-dim) 7%, var(--bg)); }
.row-thumb.kind-playthrough { background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.row-body { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; padding: 0.1rem 0; }
.row-title { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-summary {
  color: var(--ink-dim); font-size: 0.76rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.05rem; }
.row-meta .story-badge { position: static; top: auto; left: auto; }
.story-row .row-actions { align-self: center; }
.library-badge {
  display: inline-flex; align-items: center; min-height: 1.15rem; padding: 0.05rem 0.38rem;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-dim); background: var(--panel); font-size: 0.62rem; line-height: 1;
}
.library-badge.is-story { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.library-badge.is-draft { color: var(--ink-dim); }
.library-badge.is-playthrough,
.library-badge.is-progress { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.library-badge.is-finished { color: var(--accent); }
.library-badge.is-pinned { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.library-badge.is-public { color: var(--accent); }
.library-badge.is-starter,
.library-badge.is-mine { color: var(--ink-faint); }
.row-date { font-size: 0.72rem; color: var(--ink-faint); }
.story-act.is-danger { color: var(--danger); }
.master-library-list { width: 100%; }
#stories-grid.master-library-list { display: flex; flex-direction: column; gap: 0.4rem; }
.library-more {
  align-self: center; min-height: 40px; margin-top: 0.45rem; padding: 0.45rem 1rem;
  border: 1px solid var(--line); border-radius: 0.5rem; background: transparent;
  color: var(--accent); font: inherit; font-size: 0.8rem; cursor: pointer;
}
.library-more:hover { border-color: var(--accent); }

@media (max-width: 560px) {
  .library-controls { align-items: stretch; flex-direction: column; }
  .library-sort-label { justify-content: space-between; }
  .library-sort { min-height: 44px; max-width: none; }
  .lib-chip { min-height: 44px; }
  .story-row { flex-wrap: wrap; }
  .story-row .row-actions {
    display: flex; width: 100%; padding-left: 3.6rem; justify-content: flex-end;
    flex-wrap: wrap;
  }
  .story-row .row-actions .story-act {
    min-height: 44px; padding-inline: 0.85rem;
  }
  .account-menu-trigger { max-width: min(10.5rem, 52vw); min-height: 44px; }
  .account-menu-trigger .account-menu-name { max-width: 5.5rem; }
  /* Fixed panel escapes any residual overflow/stacking from mode pills. */
  .account-menu.is-open .account-menu-panel {
    position: fixed;
    top: max(3.75rem, calc(env(safe-area-inset-top, 0px) + 3.35rem));
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    left: auto;
    width: min(18rem, calc(100vw - 1.5rem));
    min-width: 0;
    z-index: 80;
  }
  .account-menu-backdrop { z-index: 70; }
  .setup-head { z-index: 75; }
  .account-menu-item { min-height: 48px; font-size: 0.95rem; }
  .seed-enhance-btn { min-height: 44px; }
  .seed-chatbar-acts { gap: 0.4rem; }
  .dk-modebar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dk-modebar::-webkit-scrollbar { display: none; }
  .dk-mode-btn {
    flex: 1 0 auto;
    min-height: 44px;
    padding-inline: 0.75rem;
    white-space: nowrap;
  }
}


/* Home shelves — collapsible lanes (details/summary), collapsed by default. */
.home-shelf > summary.home-shelf-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: none;
  width: 100%;
  margin: 0 0 0.75rem;
}
.home-shelf > summary.home-shelf-summary::-webkit-details-marker { display: none; }
.home-shelf > summary.home-shelf-summary::after {
  content: '▸';
  color: var(--ink-faint);
  font-size: 0.75rem;
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.home-shelf[open] > summary.home-shelf-summary::after { transform: rotate(90deg); }
.home-shelf > summary .lane-tools { pointer-events: auto; }
.home-shelf-body { padding-bottom: 0.15rem; }

/* Shared character library on Home — portrait tiles with clearer name plate. */
.characters-section { margin-top: 0; margin-bottom: 1.5rem; }
.characters-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.15rem;
}
@media (min-width: 520px) {
  .characters-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
}
.char-lib-card {
  position: relative;
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line); border-radius: 0.65rem;
  background: color-mix(in srgb, var(--panel-2) 70%, var(--panel));
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.char-lib-card:hover, .char-lib-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.6);
}
.char-lib-open {
  display: flex; flex-direction: column; gap: 0;
  padding: 0; width: 100%; min-width: 0;
  border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.char-lib-open:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.char-lib-del {
  position: absolute; top: 0.35rem; right: 0.35rem; z-index: 2;
  width: 1.75rem; height: 1.75rem; min-height: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 999px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 90%, transparent);
  color: var(--ink-dim); cursor: pointer;
  backdrop-filter: blur(4px);
}
.char-lib-del:hover, .char-lib-del:focus-visible { color: var(--danger); border-color: var(--danger); outline: none; }
.char-lib-del.confirm {
  width: auto; padding: 0 0.45rem; border-radius: 0.9rem;
  font-size: 0.68rem; font-weight: 600; color: var(--danger); border-color: var(--danger);
}
.char-lib-thumb {
  aspect-ratio: 3 / 4; background: var(--bg); overflow: hidden;
  display: grid; place-items: center;
}
.char-lib-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.char-lib-thumb.empty {
  color: var(--ink-faint); font: 700 1.5rem var(--font-display);
  background: linear-gradient(160deg, var(--panel-2), var(--bg));
}
.char-lib-meta {
  display: flex; flex-direction: column; gap: 0.12rem;
  padding: 0.5rem 0.5rem 0.55rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.char-lib-name { font-weight: 600; font-size: 0.82rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-lib-sub { font-size: 0.68rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-lib-empty {
  grid-column: 1 / -1; margin: 0; padding: 1rem 0.35rem;
  color: var(--ink-dim); font-size: 0.88rem; line-height: 1.45;
  border: 1px dashed var(--line); border-radius: 0.55rem; text-align: center;
}
.char-lib-overlay .gallery-panel {
  max-width: 64rem;
  max-height: min(92vh, 52rem);
  max-height: min(92dvh, 52rem);
  overflow: auto;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.char-lib-overlay .gallery-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.char-lib-editor { display: flex; flex-direction: column; gap: 0.75rem; }
.char-lib-dossier { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.char-lib-dossier-rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.char-lib-dossier-details { min-width: 0; }
.char-lib-scope-note { margin: 0 0 0.8rem; padding: 0.65rem 0.75rem; border-left: 2px solid var(--accent); color: var(--ink-dim); background: color-mix(in srgb, var(--accent) 7%, transparent); font-size: 0.78rem; line-height: 1.4; }
.char-lib-editor-portrait {
  width: min(12rem, 100%); aspect-ratio: 3 / 4; margin: 0 auto;
  border-radius: 0.55rem; overflow: hidden; background: var(--bg);
  display: grid; place-items: center; border: 1px solid var(--line);
}
.char-lib-editor-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.char-lib-editor-portrait.empty { color: var(--ink-faint); font: 700 2rem var(--font-display); }
.char-lib-editor .cfg-cast-fields { margin: 0; }
.char-lib-editor-acts {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: stretch;
  justify-content: center;
}
.char-lib-editor-tools {
  padding: 0.35rem 0; background: transparent;
}
.char-lib-editor-foot {
  position: sticky; bottom: 0; z-index: 3; justify-content: flex-end;
  margin-top: 0.35rem; padding: 0.7rem 0 0.2rem;
  border-top: 1px solid var(--line);
  background: linear-gradient(to top, var(--panel) 78%, transparent);
}
.char-lib-editor-foot .char-lib-pill.primary {
  min-width: 8rem; min-height: 2.75rem; font-size: 0.88rem;
}
.char-lib-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.4rem; padding: 0.4rem 0.85rem;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink-dim);
  font: 600 0.78rem/1 var(--font-display); letter-spacing: 0.01em;
  cursor: pointer; white-space: nowrap;
}
.char-lib-pill:hover, .char-lib-pill:focus-visible {
  color: var(--accent); border-color: var(--accent); outline: none;
}
.char-lib-pill.primary {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}
.char-lib-pill.primary:hover, .char-lib-pill.primary:focus-visible {
  color: var(--accent-ink); background: var(--accent-hover); border-color: var(--accent-hover);
}
.char-lib-pill.danger { color: var(--danger); }
.char-lib-pill.danger:hover, .char-lib-pill.danger:focus-visible {
  color: var(--danger); border-color: var(--danger);
}
.char-lib-pill:disabled { opacity: 0.6; cursor: default; }
.char-lib-editor-status { min-height: 0; font-size: 0.78rem; color: var(--ink-dim); }
.char-lib-editor-status:empty { display: none; }

/* Overflow menu for secondary editing actions — keeps primary buttons visible. */
.edit-more { position: relative; flex: 0 0 auto; }
.edit-more-btn { min-width: 2.6rem; }
.edit-more-menu {
  position: absolute; right: 0; bottom: calc(100% + 0.3rem); z-index: 8;
  min-width: 11.5rem; padding: 0.3rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0.5rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.edit-more-menu[hidden] { display: none; }
.edit-more-menu button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 0.82rem;
  color: var(--ink); background: transparent; border: 0; border-radius: 0.35rem;
  padding: 0.55rem 0.65rem; cursor: pointer; min-height: 40px;
}
.edit-more-menu button:hover, .edit-more-menu button:focus-visible {
  background: var(--panel-2); outline: none; color: var(--accent);
}
.edit-more-menu button.danger { color: var(--danger); }
.edit-more-menu button.danger:hover { color: var(--danger); }

@media (display-mode: standalone) {
  header.bar .utility-cluster { top: max(0.35rem, env(safe-area-inset-top)); }
  #setup { padding-top: max(0.5rem, env(safe-area-inset-top)); }
}

.preset-hidden-row { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.preset-hidden-row .phr-label { font-size: 0.78rem; color: var(--ink-dim); }

/* Locked (gated) choice */
.choice.locked:not(.future-choice) {
  opacity: 0.6; cursor: not-allowed; border-style: dashed;
  display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start;
}
.choice.locked:not(.future-choice):hover { background: var(--panel); border-color: var(--line); }
.choice .choice-lock { font-size: 0.78rem; font-style: italic; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 620px) {
  .gallery-toolbar { align-items: stretch; flex-direction: column; }
  .gallery-toolbar-tools { flex-wrap: wrap; }
  .gallery-character { flex: 1 0 100%; }
  .gallery-character select { max-width: none; flex: 1 1 auto; }
  .wrap { padding: 1rem 0.9rem 4rem; }
  #reader { padding: 0 0.9rem; }
  #story { scroll-padding-bottom: 1.75rem; }
  .setup { padding: 1.5rem 0; }
  .setup h2 { font-size: 1.6rem; }
  .seed-chatbar { padding: 0.5rem; }
  .seed-chatbar #seed-input,
  .seed-chatbar textarea { min-height: 5rem; font-size: 16px; }
  .home-refresh,
  .lib-chip,
  .library-more,
  .story-row .row-actions .story-act { min-height: 44px; }
  header.bar { /* float hub — no padded strip */ }
  .composer {
    margin-top: 0.35rem;
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom));
  }
  .utility-menu { right: -.25rem; }
  .model-select,
  .settings-row select { max-width: 100%; flex: 1 1 8rem; min-height: 44px; height: 44px; }
  .scene { margin-bottom: 1.75rem; }
  /* Cap the art so the opening prose is visible on load instead of a
     full-viewport-tall illustration pushing all the text off-screen. The
     base object-fit:contain preserves the complete frame. */
  .scene-plate { max-width: 100%; margin-bottom: 1rem; }
  .scene-art { max-width: 100%; max-height: 56vh; margin-bottom: 0; }
  .scene-art img { max-height: 56vh; }
  .scene-vitals-people { grid-template-columns: 1fr; }
  .scene-text p:first-child::first-letter { font-size: 2.2rem; }
  /* One input at a time on a phone: the director dock replaces the composer. */
  body.director-open .composer { display: none; }
  .media-run-head { align-items: flex-start; flex-direction: column; }
  .media-run-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .stories-grid, .story-grid-inner { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .choice, .seed-btn, .begin, .text-btn, .icon-btn { min-height: 44px; }
  /* Overlays go near-fullscreen on a phone so the panel content and its
     sticky footer use the whole screen; less wasted backdrop, easier reach. */
  .gallery-overlay { padding: 0; align-items: stretch; }
  .gallery-panel {
    max-width: none;
    max-height: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    min-height: 100%;
  }
  .settings-overlay {
    align-items: flex-end;
    justify-content: center;
    background: rgba(8, 7, 6, 0.72);
  }
  .settings-panel {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: min(84vh, calc(100vh - 0.75rem));
    max-height: min(84dvh, calc(100dvh - 0.75rem));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 0.9rem 0.9rem 0 0;
  }
  .settings-panel::before {
    content: '';
    position: absolute;
    top: 0.45rem;
    left: 50%;
    width: 2.6rem;
    height: 0.22rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--line);
    z-index: 5;
  }
  .settings-head {
    padding: 1rem 3.25rem 0.65rem 1rem;
  }
  .settings-panel .sheet-close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 6;
  }
  .settings-tabs {
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    scroll-snap-type: x proximity;
  }
  .settings-tab {
    min-height: 40px;
    padding: 0.45rem 0.75rem;
    scroll-snap-align: start;
  }
  .settings-scroll {
    padding: 0.7rem 0.9rem calc(1rem + env(safe-area-inset-bottom));
  }
  .settings-section { margin-top: 0; }
  .settings-eyebrow { display: none; }
  /* Editing real estate: hide guiding chrome on phones; titles + controls remain.
     Keep .seed-pins-hint — it's the only on-page cue for the Quick seed + control. */
  .settings-hint, .settings-note:not(#model-provider-status):not(#model-select-note), .creator-hint, .dk-eyebrow, .dk-start-note:empty { display: none; }
  .dk-start-note { min-height: 0; margin: 0.35rem 0 0; font-size: 0.68rem; }
  .settings-row {
    display: grid;
    grid-template-columns: minmax(6.8rem, 38%) minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem 0.7rem;
    padding: 0.55rem 0;
  }
  .settings-row label,
  .settings-row > span { font-size: 0.84rem; }
  .settings-check {
    justify-self: end;
    width: 1.45rem;
    height: 1.45rem;
  }
  .settings-row .model-select,
  .settings-row select,
  .settings-row .style-input {
    width: 100%;
    max-width: none;
    min-height: 44px;
    height: auto;
  }
  .settings-row .model-select,
  .settings-row select { height: 44px; }
  .settings-note {
    margin: 0.25rem 0 0.35rem;
  }
  .settings-hint {
    margin-top: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--panel-2) 74%, transparent);
  }
  .settings-actions-safe,
  .story-tools-row,
  .story-tool-card-acts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
  .settings-actions-safe .settings-inline-btn,
  .settings-row .settings-inline-btn,
  .story-tool-card-acts .settings-inline-btn {
    min-height: 44px;
    justify-content: center;
  }
  .story-tool-blurb { font-size: 0.7rem; }
  /* Keep group labels visible on the sheet (eyebrow is hidden). */
  .story-tools-label { display: block; }
  .creator-panel { padding-bottom: 0; }
  /* Bigger close target, away from the very corner. */
  .sheet-close {
    position: fixed;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 60;
    width: 2.6rem;
    height: 2.6rem;
  }
  .state-sheet-close { position: static; }
  /* Saved-character picker becomes a bottom sheet — reachable + dismissable. */
  .char-picker {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: 100%;
    max-height: 72vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0; padding: 1rem 1rem 1.4rem;
  }
  .char-pick-item, .char-pick-close { min-height: 44px; }
  .lightbox {
    padding: 0;
    background: #060504;
  }
  .lightbox-inner {
    width: 100%;
    height: 100%; max-height: none;
    overflow: hidden;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0 .85rem;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .lightbox-inner .sheet-close {
    position: absolute;
    top: max(0.65rem, env(safe-area-inset-top));
    right: max(0.65rem, env(safe-area-inset-right));
    z-index: 6;
  }
  .lightbox-stage {
    width: auto;
  }
  .lightbox-inner img {
    width: 100%; height: 100%; max-width: none; max-height: none;
    object-fit: contain;
    background: #060504;
  }
  .lightbox-edit,
  .lightbox-bar,
  .lightbox-steer {
    width: 100%;
  }
  .lightbox-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 380px) {
  .settings-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.35rem;
  }
  .settings-check { justify-self: start; }
  .lightbox-bar { grid-template-columns: 1fr; }
}
/* Touch devices: iOS Safari zooms the viewport whenever you focus a field
   whose text is under 16px, which drifts the layout and never fully resets.
   Pin every text control to 16px on coarse pointers so tapping into one
   can't shift the viewport. Desktop keeps its denser sizing; pinch-zoom and
   double-tap behavior are untouched (touch-action: manipulation already
   suppresses double-tap zoom on the body), so WCAG 1.4.4 still holds. */
@media (pointer: coarse) {
  .seed input,
  .seed-chatbar textarea,
  .creator-input,
  .model-select,
  .settings-row select,
  .style-input,
  .lightbox-steer input,
  .composer-form input,
  .director-form input,
  .char-edit-input,
  .seed-pin-sheet-card input,
  .seed-pin-sheet-card textarea,
  .dk-field input,
  .dk-field textarea,
  .dk-own-input input,
  .auth-field input,
  .char-lib-editor input,
  .char-lib-editor textarea,
  .cfg-cast-fields input,
  .cfg-cast-fields textarea,
  .cfg-field input,
  .cfg-field textarea {
    font-size: 16px;
  }
  /* Comfortable touch targets for the small in-flow action buttons (WCAG
     2.5.8 / 2.5.5). Card-corner buttons stay smaller but AA-compliant to
     avoid overlapping on a narrow card. */
  .cfg-mini-btn, .char-lib-pill, .cl-undo, .char-pick-item, .char-pick-close { min-height: 44px; }
  .dk-mode-btn { min-height: 44px; }
  .story-edit, .story-enrich, .story-copy { min-height: 28px; display: inline-flex; align-items: center; }
}
/* ===== Build-with-cards deck builder (dk- namespace) ===== */
/* Mode path: secondary to the thesis + manuscript page — quiet segment, not three equal CTAs. */
.dk-modebar {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  margin: 0 0 1.15rem; padding: 0.28rem;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.dk-mode-btn {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint); background: transparent; border: 1px solid transparent;
  border-radius: 999px; padding: 0.48rem 0.65rem; cursor: pointer;
}
.dk-mode-btn[aria-pressed="true"] {
  color: var(--ink); background: var(--panel-2);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent);
}
.dk-mode-btn.dk-mode-editor:hover,
.dk-mode-btn.dk-mode-editor:focus-visible {
  color: var(--accent); border-color: var(--accent); outline: none;
}

.dk-builder-wrap { display: block; }
.dk-eyebrow {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 0.7rem;
}
.dk-premise {
  font-family: var(--font-display); font-size: 1.2rem; line-height: 1.55; margin: 0 0 0.5rem;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--signal) 7%, transparent));
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.dk-premise-line { display: block; min-width: 0; }
/* Hide the special clause until a Special chip is picked — keeps the summary clean. */
.dk-special-clause.empty { display: none; }
.dk-slot { color: var(--accent); border-bottom: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); padding: 0 1px; }
.dk-slot.empty { color: var(--ink-faint); font-style: italic; border-bottom: 2px dashed var(--ink-faint); }
.dk-slot.dk-setting { color: var(--ink); }
.dk-slot.dk-premise-slot { color: var(--ink); }
.dk-slot.dk-special { color: var(--signal); border-bottom-color: color-mix(in srgb, var(--signal) 40%, transparent); }
.dk-row-nav { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
.dk-row-remix {
  font-size: 0.68rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem !important;
}
.dk-slot.dk-tone, .dk-slot.dk-style { color: var(--signal); border-bottom-color: color-mix(in srgb, var(--signal) 40%, transparent); }
.dk-slot.dk-flash { animation: dkPop .45s ease; }
@keyframes dkPop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.dk-cast-line { font-size: 0.82rem; color: var(--ink-dim); margin: 0 0 1.1rem; }
.dk-cast-line b { color: var(--accent); font-weight: 700; }
.dk-taste-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.45rem 0.75rem; margin: 0 0 0.85rem;
}
.dk-taste-note {
  flex: 1 1 12rem; min-width: 0; margin: 0;
  font-size: 0.72rem; line-height: 1.35; color: var(--ink-faint);
}
.dk-taste-bar .cfg-mini-btn { flex: 0 0 auto; }

.dk-rows { margin-bottom: 0.5rem; }
.dk-player-gender { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0.85rem 0 1rem; }
.dk-row { margin-bottom: 1rem; }
.dk-row-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0 0.1rem 0.5rem; }
.dk-row-label-col { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.dk-row-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.dk-row-blurb { font-size: 0.72rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-faint); line-height: 1.35; max-width: 36rem; }
.dk-row-nav { display: inline-flex; align-items: center; gap: 0.25rem; flex: 0 0 auto; }
.dk-row-hint { font-size: 0.7rem; color: var(--ink-faint); }
/* Special chips: two-line name + effect. Must not clip inside the horizontal rail. */
.dk-row-special .dk-cards {
  align-items: stretch;
  padding-top: 0.25rem;
  padding-bottom: 0.65rem;
}
.dk-chip-rich {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 0.28rem; white-space: normal; height: auto; min-height: 4.75rem;
  min-width: 11.5rem; max-width: 16rem; width: max-content;
  text-align: left; line-height: 1.3; padding: 0.75rem 0.9rem;
  overflow: visible; box-sizing: border-box;
}
.dk-chip-rich .dk-chip-name {
  font-weight: 700; font-size: 0.86rem; line-height: 1.25;
  white-space: normal; overflow-wrap: anywhere; max-width: 100%;
}
.dk-chip-rich .dk-chip-desc {
  font-weight: 400; font-size: 0.72rem; color: var(--ink-dim);
  line-height: 1.35; white-space: normal; overflow-wrap: anywhere;
  max-width: 100%; display: block;
}
.dk-chip-rich[aria-pressed="true"] .dk-chip-desc { color: var(--ink); }
.dk-own-special { flex-direction: column; align-items: stretch; gap: 0.35rem; min-width: 14rem; }
.dk-own-special input { min-width: 12rem; }
.dk-scroll-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; min-width: 1.85rem; padding: 0;
  border-radius: 0.4rem; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink-dim);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.dk-scroll-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.dk-scroll-btn:disabled { opacity: 0.35; cursor: default; }
.dk-cards {
  display: flex; gap: 0.55rem; overflow-x: auto; padding: 0.1rem 0.1rem 0.5rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  cursor: grab; outline: none;
}
.dk-cards.is-scrollable { padding-bottom: 0.55rem; }
.dk-cards.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.dk-cards.is-dragging .dk-chip { pointer-events: none; }
.dk-cards:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); border-radius: 0.45rem; }
.dk-cards::-webkit-scrollbar { height: 8px; }
.dk-cards::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-faint) 70%, var(--line)); border-radius: 6px; }
.dk-cards::-webkit-scrollbar-track { background: transparent; }
@media (pointer: coarse) {
  .dk-scroll-btn { display: none; }
  .dk-row-hint { display: inline; }
  .dk-row-hint::after { content: none; }
}
@media (pointer: fine) {
  .dk-row-hint { display: none; }
}
.dk-chip {
  scroll-snap-align: start; flex: 0 0 auto; font-size: 0.84rem; font-weight: 500;
  color: var(--ink); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 0.75rem; padding: 0.65rem 0.85rem; white-space: nowrap;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.dk-chip:hover { transform: translateY(-2px); border-color: var(--ink-faint); }
.dk-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 20%, var(--panel-2));
  border-color: var(--accent); color: var(--ink); font-weight: 600;
}
.dk-chip.dk-own { border-style: dashed; color: var(--ink-dim); }
.dk-chip.dk-chip-rich { white-space: normal; }
.dk-own-input { flex: 0 0 auto; display: none; align-items: center; gap: 0.4rem; }
.dk-own-input.show { display: inline-flex; }
.dk-own-input.dk-own-special.show { display: flex; }
.dk-own-input input {
  font-size: 0.84rem; background: var(--panel); border: 1px solid var(--accent);
  border-radius: 0.6rem; padding: 0.55rem 0.7rem; color: var(--ink); width: 11rem;
}

.dk-cast-section { margin-top: 0.5rem; }
.dk-sec-head { display: flex; align-items: end; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap; margin: 1.5rem 0.1rem 0.7rem; }
.dk-sec-copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.dk-sec-head h2 { font-family: var(--font-display); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 0; }
.dk-sec-copy span { font-size: 0.7rem; color: var(--ink-faint); }
.dk-quickadd { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0 0.1rem 0.7rem; scroll-snap-type: x mandatory; }
.dk-quickadd .dk-chip { scroll-snap-align: start; }
.dk-role-chip { display: inline-flex; flex-direction: column; align-items: flex-start; white-space: normal; max-width: 15rem; text-align: left; }
.dk-role-chip-main { font-weight: 650; }
.dk-role-chip-detail { margin-top: 0.16rem; color: var(--ink-dim); font-size: 0.7rem; line-height: 1.25; }
.dk-cast-grid { display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; }
.dk-char {
  position: relative; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 0.85rem; padding: 0.75rem; overflow: hidden;
}
.dk-char .dk-av {
  width: 38px; height: 38px; border-radius: 999px; margin-bottom: 0.5rem;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden; background: var(--panel-2);
}
.dk-char .dk-av.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-char h4 { font-family: var(--font-display); margin: 0 0 0.1rem; font-size: 1.05rem; }
.dk-char .dk-meta { font-size: 0.72rem; color: var(--ink-dim); line-height: 1.4; }
.dk-char .dk-role {
  display: inline-block; margin-top: 0.45rem; font-size: 0.62rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); padding: 0.18rem 0.45rem; border-radius: 999px;
}
.dk-char-actions { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.dk-char-actions button {
  flex: 1; font-size: 0.7rem; font-weight: 600; color: var(--ink-dim);
  background: var(--panel); border: 1px solid var(--line); border-radius: 0.55rem; padding: 0.45rem 0.25rem;
}
.dk-char-actions button:hover { color: var(--ink); border-color: var(--ink-faint); }
.dk-char.dk-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  border-style: dashed; color: var(--ink-dim); min-height: 7rem; background: transparent;
  font-size: 0.84rem; font-weight: 600;
}
.dk-char.dk-add:hover { border-color: var(--accent); color: var(--ink); }
.dk-char.dk-add .dk-plus { font-size: 1.5rem; line-height: 1; color: var(--accent); }

.dk-setup-row { margin: 0.65rem 0 0.15rem; }
.dk-start-btn { width: 100%; margin-top: 1.1rem; padding: 0.85rem; font-weight: 700; font-size: 1rem; }
.dk-start-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.dk-start-note { font-size: 0.72rem; text-align: center; color: var(--ink-faint); margin: 0.5rem 0 0; min-height: 1rem; }

/* character editor sheet */
.dk-sheet { position: fixed; inset: 0; z-index: 120; background: rgba(8,8,13,0.6); display: flex; align-items: flex-end; }
.dk-sheet[hidden] { display: none; }
.dk-sheet-card {
  width: 100%; max-width: 64rem; margin: 0 auto; background: var(--panel);
  border-top-left-radius: 1.3rem; border-top-right-radius: 1.3rem; border: 1px solid var(--line); border-bottom: none;
  padding: 0.9rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0,0,0,.6);
  animation: dkSheetUp .25s ease; max-height: 92vh; max-height: 92dvh; overflow-y: auto; display: flex; flex-direction: column;
}
@keyframes dkSheetUp { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.dk-sheet-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--line); margin: 0.1rem auto 0.9rem; }
.dk-sheet h3 { font-family: var(--font-display); margin: 0 0 0.45rem; font-size: 1.25rem; }
.dk-sheet-heading { order: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dk-sheet-note {
  margin: 0 0 0.65rem; font-size: 0.82rem; line-height: 1.4; color: var(--ink-dim);
}
.dk-sheet-body { order: 3; margin-bottom: 0.75rem; }
#dk-sheet-status { order: 2; }
.dk-sheet-portrait {
  width: 5.5rem; height: 7.2rem; border-radius: 0.75rem; margin: 0 auto 0.75rem;
  border: 1px solid var(--line); background: var(--panel-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.8rem; color: var(--ink-faint);
}
.dk-sheet-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-sheet-portrait.empty { background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }
.dk-sheet-toolbar { margin-bottom: 0.85rem; }
.dk-portrait-angle { max-width: 22rem; margin: 0 auto 0.85rem; }
.dk-portrait-angle label { display: block; margin-bottom: 0.35rem; color: var(--ink-dim); font: 700 0.68rem/1.2 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.dk-portrait-angle select { width: 100%; }
.dk-sheet-quick { margin-bottom: 0.35rem; }
.dk-import-list { max-height: 50vh; overflow-y: auto; }
.dk-field { margin-bottom: 0.9rem; }
.dk-field label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.4rem; }
.dk-field input, .dk-field textarea {
  width: 100%; font-family: inherit; font-size: 0.95rem; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 0.6rem; padding: 0.7rem 0.75rem; color: var(--ink);
}
.dk-field textarea { min-height: 3.75rem; resize: vertical; }
.dk-seg { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.dk-seg button {
  font-size: 0.82rem; color: var(--ink-dim); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 0.8rem;
}
.dk-seg button[aria-pressed="true"] { color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
.dk-sheet-actions { order: 4; position: sticky; bottom: 0; z-index: 4; display: flex; gap: 0.5rem; margin: 0; padding: 0.7rem 0 0.2rem; flex-wrap: wrap; background: linear-gradient(to top, var(--panel) 78%, transparent); }
.dk-sheet-actions button { flex: 1; min-width: 5.5rem; font-size: 0.9rem; font-weight: 700; border-radius: 0.75rem; padding: 0.75rem; }
.dk-sheet-actions .dk-sheet-save { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.dk-sheet-actions .dk-sheet-cancel,
.dk-sheet-actions .dk-sheet-import { color: var(--ink-dim); background: transparent; border: 1px solid var(--line); }
.dk-sheet-actions .dk-sheet-import:hover { border-color: var(--accent); color: var(--ink); }

@media (min-width: 560px) { .dk-cast-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 540px) { .dk-sheet-card input, .dk-sheet-card textarea, .dk-own-input input { font-size: 16px; } }

@media (min-width: 760px) {
  .dk-sheet { align-items: center; padding: 1rem; }
  .dk-sheet-card { border-radius: 1.3rem; border-bottom: 1px solid var(--line); }
  .dk-sheet-body:not(:has(.dk-import-list)) { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); gap: 0.75rem 1.25rem; align-items: start; }
  .dk-sheet-body:not(:has(.dk-import-list)) .dk-sheet-portrait,
  .dk-sheet-body:not(:has(.dk-import-list)) .dk-sheet-toolbar,
  .dk-sheet-body:not(:has(.dk-import-list)) .dk-portrait-angle { grid-column: 1; }
  .dk-sheet-body:not(:has(.dk-import-list)) .dk-sheet-quick { grid-column: 2; grid-row: 1 / span 2; }
  .dk-sheet-body:not(:has(.dk-import-list)) > .cfg-cast-fields { grid-column: 2; }
}

@media (max-width: 900px) {
  .creator-body { grid-template-columns: 1fr; }
  .creator-margin { position: static; grid-row: 1; }
  .creator-margin .creator-prompt { position: sticky; top: 0.5rem; z-index: 4; }
  .creator-margin .creator-log-wrap { display: none; }
}

@media (max-width: 680px) {
  .creator-panel { padding-left: 0.7rem; padding-right: 0.7rem; }
  .creator-config { grid-template-columns: 1fr; overflow: visible; }
  .creator-spine { position: sticky; top: 0; z-index: 3; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 0.4rem; }
  .creator-spine-link { flex: 0 0 auto; min-width: 6.4rem; padding: 0.5rem; }
  .creator-spine-link::before { left: 0.5rem; right: 0.5rem; top: auto; bottom: 0; width: auto; height: 2px; }
  .creator-spine-link span { display: none; }
  .creator-canvas { padding: 0 0.7rem 0.8rem; }
  .creator-actions { margin-left: -0.7rem; margin-right: -0.7rem; padding-left: 0.7rem; padding-right: 0.7rem; }
  .creator-actions-sub { width: 100%; }
  .creator-actions-sub .settings-inline-btn { flex: 1 1 auto; }
  .char-lib-overlay .gallery-panel { width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .char-lib-dossier { grid-template-columns: 1fr; }
  .char-lib-dossier-rail { position: static; }
  .char-lib-editor-portrait { width: min(10rem, 42vw); }
}

.creator-panel :is(input, textarea, select, button):focus-visible,
.char-lib-overlay :is(input, textarea, select, button):focus-visible,
.dk-sheet :is(input, textarea, select, button):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Accounts — sign-in/register panel (DOM built in JS) + the signed-in row.
   Same backdrop/panel vocabulary as .gallery-overlay, sized as a card. */
.auth-overlay {
  /* Above EVERY other overlay (.dk-sheet is 120): a mid-session 401 can fire
     while the cards sheet is open, and the sign-in form must not render
     underneath it with focus trapped in an invisible input. */
  position: fixed; inset: 0; z-index: 130; background: rgba(8, 7, 6, 0.88);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem;
  overflow-y: auto; overscroll-behavior: contain;
}
.auth-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  width: 100%; max-width: 22rem;
  padding: 1.5rem 1.4rem calc(1.6rem + env(safe-area-inset-bottom)); text-align: left;
}
.auth-panel h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 0.9rem 0 0.25rem; }
.auth-sub { color: var(--ink-dim); font-size: var(--fs-sm); margin: 0 0 1rem; }
.auth-field { margin-bottom: 0.8rem; }
.auth-field label { display: block; font-size: var(--fs-sm); color: var(--ink-dim); margin-bottom: 0.25rem; }
.auth-field input {
  width: 100%; font: inherit; color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.6rem 0.7rem;
}
.auth-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.auth-error { min-height: 1.2rem; margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--danger); font-style: italic; }
.auth-submit { width: 100%; padding: 0.7rem 1.1rem; font-weight: 600; }
.auth-toggle, .auth-browse {
  display: block; margin: 0.9rem auto 0; background: none; border: 0;
  color: var(--ink-dim); font-size: var(--fs-sm); text-decoration: underline; cursor: pointer;
}
.auth-browse { margin-top: 0.45rem; }
.auth-toggle:hover, .auth-browse:hover { color: var(--accent); }
/* Legacy auth-status row retired — account lives in .account-menu. */
.auth-status { display: none !important; }
@media (max-width: 540px) { .auth-field input { font-size: 16px; } }

[hidden] { display: none !important; }