/* Shared styles for the 10 poster creation flows (/create/). Mobile-first.
   Light is default; dark follows the site's html[data-mode="batman"]. */
:root {
  --bg: #faf7f2; --panel: #ffffff; --ink: #1d1b17; --muted: #5c564c;
  --line: #e5ded2; --accent: #2c5f4e; --accent-ink: #ffffff;
  --accent-soft: #e7f0ec; --danger: #a4262c; --chip: #f1ece3;
  --focus: #1a4a8a;
}
html[data-mode="batman"] {
  --bg: #14161b; --panel: #1d2026; --ink: #f0ede6; --muted: #b3ada1;
  --line: #33373f; --accent: #8fd0b4; --accent-ink: #10231c;
  --accent-soft: #223129; --danger: #ff9d9d; --chip: #262a31;
  --focus: #9cc4ff;
}
* { box-sizing: border-box; }
body.kcx { margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Montserrat", system-ui, sans-serif; line-height: 1.5; }
.kcx a { color: var(--accent); }
/* (no batman re-declaration needed: --accent itself switches per mode, and the
   old `html[data-mode="batman"] .kcx a` rule out-specified a.kcx-btn, turning
   button labels accent-on-accent in dark mode) */
:where(.kcx) button:focus-visible, :where(.kcx) a:focus-visible,
:where(.kcx) input:focus-visible, :where(.kcx) [tabindex]:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* header */
.kcx-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--panel);
  position: sticky; top: 0; z-index: 20; }
.kcx-top__back { text-decoration: none; font-weight: 600; font-size: 14px; }
.kcx-top__title { font-weight: 800; font-size: 15px; letter-spacing: .04em; margin: 0 auto; }
.kcx-top__tries { margin-left: auto; }

.kcx-wrap { max-width: 560px; margin: 0 auto; padding: 20px 16px 90px; }
.kcx-h1 { font-size: 24px; font-weight: 800; margin: 8px 0 4px; }
.kcx-sub { color: var(--muted); font-size: 15px; margin: 0 0 18px; }
.kcx-note { color: var(--muted); font-size: 13px; }
.kcx-error { color: var(--danger); font-weight: 600; font-size: 14px; margin: 10px 0; }

/* inputs */
.kcx-label { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 6px; }
.kcx-input { width: 100%; font: inherit; font-weight: 600; padding: 13px 14px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); }
.kcx-input:focus { border-color: var(--accent); }
.kcx-prefix { font-weight: 800; letter-spacing: .06em; font-size: 13px; color: var(--muted); margin-bottom: 4px; display: block; }

/* buttons */
.kcx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; border: 0; border-radius: 999px; cursor: pointer;
  padding: 14px 22px; background: var(--accent); color: var(--accent-ink); font-size: 16px; }
.kcx-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Links styled as buttons: `.kcx a` (specificity 0-1-1) beats `.kcx-btn`
   (0-1-0), which painted accent-on-accent text (an invisible "Sign in" on
   every flow's signed-out gate). Re-assert the button inks for anchors. */
.kcx a.kcx-btn { color: var(--accent-ink); text-decoration: none; }
.kcx-btn--ghost { background: transparent; color: var(--ink); border: 2px solid var(--line); }
.kcx a.kcx-btn--ghost { color: var(--ink); }
.kcx-btn--big { width: 100%; padding: 18px 22px; font-size: 18px; }
.kcx-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }

/* chips (genres, moods, occasions) */
.kcx-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0 16px; }
.kcx-chips--3 { grid-template-columns: repeat(3, 1fr); }
.kcx-chip { font: inherit; font-weight: 700; font-size: 15px; padding: 14px 10px;
  border: 2px solid var(--line); border-radius: 14px; background: var(--panel);
  color: var(--ink); cursor: pointer; text-align: center; }
.kcx-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.kcx-chip__emoji { display: block; font-size: 24px; margin-bottom: 4px; }

/* tries countdown */
.kcx-tries { display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
  font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--chip); }
.kcx-tries__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.kcx-tries__dot--off { background: var(--line); }

/* the poster (3:4, same ratio as the 900x1200 studio canvas) */
.kcx-poster { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  background: var(--pc, #2c5f4e); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.kcx-poster video, .kcx-poster img.kcx-poster__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kcx-poster__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.30) 45%, rgba(0,0,0,.56)); }
.kcx-poster__lock { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: #fff;
  padding: 8%; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.kcx-poster__crown { width: 18%; margin-bottom: 4%; }
.kcx-poster__kc { font-weight: 800; letter-spacing: .1em; font-size: clamp(22px, 9cqw, 54px); line-height: 1.06; }
.kcx-poster__and { font-weight: 600; letter-spacing: .3em; font-size: clamp(11px, 3.4cqw, 20px); margin: 4% 0; }
.kcx-poster__ph { font-weight: 800; letter-spacing: .06em; font-size: clamp(15px, 5.6cqw, 34px); line-height: 1.2; text-transform: uppercase; overflow-wrap: anywhere; }
.kcx-poster { container-type: inline-size; }
.kcx-poster__src { position: absolute; left: 8px; bottom: 8px; font-size: 10px; font-weight: 600;
  color: #fff; background: rgba(0,0,0,.45); padding: 3px 8px; border-radius: 999px; }

/* option grids */
.kcx-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 4px; }
.kcx-vopt { position: relative; padding: 0; border: 3px solid transparent; border-radius: 12px;
  overflow: hidden; cursor: pointer; background: var(--chip); aspect-ratio: 3 / 4; }
.kcx-vopt video, .kcx-vopt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kcx-vopt[aria-pressed="true"] { border-color: var(--accent); }
.kcx-vopt__check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); display: none; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.kcx-vopt[aria-pressed="true"] .kcx-vopt__check { display: flex; }

.kcx-songs { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 4px; }
.kcx-sopt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left;
  border: 3px solid transparent; border-radius: 14px; background: var(--panel); cursor: pointer;
  font: inherit; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.kcx-sopt[aria-pressed="true"] { border-color: var(--accent); }
.kcx-sopt__play { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: var(--accent); color: var(--accent-ink); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.kcx-sopt__meta { min-width: 0; }
.kcx-sopt__title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcx-sopt__sub { font-size: 12px; color: var(--muted); }

.kcx-srclab { font-size: 12px; color: var(--muted); margin: 6px 0 14px; }

/* chat flow */
.kcx-chat { display: flex; flex-direction: column; gap: 10px; }
.kcx-bub { max-width: 85%; padding: 12px 15px; border-radius: 16px; font-size: 15px; }
.kcx-bub--bot { background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.kcx-bub--me { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; align-self: flex-end; font-weight: 600; }

/* slot machine */
.kcx-reels { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.kcx-reel { background: var(--panel); border: 2px solid var(--line); border-radius: 14px;
  padding: 14px; text-align: center; font-weight: 800; font-size: 17px; min-height: 56px;
  display: flex; align-items: center; justify-content: center; }
.kcx-reel--spin { animation: kcxreel .5s linear infinite; color: var(--muted); }
@keyframes kcxreel { 0% { opacity: 1 } 50% { opacity: .35 } 100% { opacity: 1 } }

/* swipe deck */
.kcx-deckwrap { position: relative; }
.kcx-deckhint { text-align: center; }

/* result + publish bar */
.kcx-result { margin-top: 18px; }
.kcx-publishbar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--panel);
  border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; z-index: 30; }
.kcx-publishbar .kcx-btn { flex: 1; }

/* steps indicator */
.kcx-steps { display: flex; gap: 6px; margin: 6px 0 16px; }
.kcx-step { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.kcx-step--on { background: var(--accent); }

.kcx-hide { display: none !important; }
.kcx-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin: 14px 0; }

/* index (tour) page */
.kcx-tourgrid { display: grid; gap: 12px; margin-top: 18px; }
.kcx-tour { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.kcx-tour:hover { border-color: var(--accent); }
.kcx-tour__emoji { font-size: 30px; }
.kcx-tour__name { font-weight: 800; font-size: 16px; }
.kcx-tour__desc { color: var(--muted); font-size: 13.5px; }

@media (min-width: 700px) { .kcx-wrap { max-width: 640px; } .kcx-h1 { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) {
  .kcx-reel--spin { animation: none; }
  .kcx * { transition: none !important; }
}

/* Background video picker: a phrase-matched grid of calming loop STILLS (the
   full clip plays only in the preview, so the grid stays fast). Themed via the
   vars above, so it is WCAG AA in both light and dark. */
.kcx-bgwrap { margin: 4px 0 10px; }
.kcx-bggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 8px 0; }
.kcx-bgopt { position: relative; padding: 0; margin: 0; border: 3px solid transparent; border-radius: 12px;
  overflow: hidden; cursor: pointer; background: var(--chip); aspect-ratio: 3 / 4; }
.kcx-bgopt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kcx-bgopt.is-on { border-color: var(--accent); }
.kcx-bgopt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.kcx-bgopt__check { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); display: none; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.kcx-bgopt.is-on .kcx-bgopt__check { display: flex; }
.kcx-bgbar { justify-content: center; margin-top: 4px; }
.kcx-bgshuffle { font-size: 14px; padding: 8px 16px; }
.kcx-bgstatus { text-align: center; min-height: 1em; }

/* Advanced options panel (shared by all 10 flows; collapsed by default so the
   simple path is untouched). Themed via the vars above, so it is WCAG AA in both
   light and dark. */
.kcx-adv { margin: 6px 0 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.kcx-adv__sum { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer;
  font-weight: 700; font-size: 15px; list-style: none; color: var(--ink); }
.kcx-adv__sum::-webkit-details-marker { display: none; }
.kcx-adv__sum::after { content: "＋"; margin-left: auto; font-weight: 800; color: var(--muted); }
.kcx-adv[open] .kcx-adv__sum::after { content: "－"; }
.kcx-adv__hint { font-weight: 600; font-size: 12px; color: var(--muted); background: var(--chip);
  padding: 2px 8px; border-radius: 999px; }
.kcx-adv__body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.kcx-adv__primary { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 12px;
  padding: 10px 14px 14px; margin: 12px 0 8px; }
.kcx-adv__ptitle { font-weight: 800; font-size: 14px; margin: 2px 0 0; color: var(--ink); }
.kcx-adv__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px; }
@media (max-width: 460px) { .kcx-adv__grid { grid-template-columns: 1fr; } }
.kcx-adv__section { font-weight: 800; font-size: 13px; letter-spacing: .02em; margin: 16px 0 2px;
  padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); }
.kcx-field { margin: 4px 0 8px; }
.kcx-field .kcx-label { margin: 10px 0 5px; }
textarea.kcx-input { resize: vertical; min-height: 46px; line-height: 1.4; }

/* Opt-in custom AI video control (paid tiers only). */
.kcx-cv { border: 2px dashed var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0 4px; }
.kcx-cv__row { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; cursor: pointer; }
.kcx-cv__cb { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
.kcx-cv .kcx-btn { margin-top: 10px; }

/* Optional washed text-over-video caption on the poster preview. */
.kcx-poster__cap { margin-top: 5%; font-weight: 700; font-size: clamp(10px, 3.2cqw, 16px);
  letter-spacing: .02em; line-height: 1.25; max-width: 86%; padding: 4px 10px; border-radius: 8px;
  background: rgba(0,0,0,.42); color: #fff; text-transform: none; }