/* VanillaSky — one sheet for every page. Warm navy, white working surfaces and restrained peach. Tokens live in tokens.css, linked before this sheet. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--sand); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; min-height: 100vh; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 6rem; }
.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; }

.wrap { width: min(var(--shell-width), calc(100% - 2 * var(--page-gutter))); margin-inline: auto; }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; }
.h-hero { font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.08; }
.h-section { font-size: clamp(1.75rem, 4vw, 2rem); line-height: 1.18; }
.lede { font-size: 1.125rem; color: var(--ink-65); margin: 0; }
@media (min-width: 768px) { .lede { font-size: 1.25rem; } }
.muted { color: var(--ink-50); }
.small { font-size: 0.875rem; }
.highlight { background: linear-gradient(transparent 68%, var(--peach) 68%, var(--peach) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 0.04em; }
@media (min-width: 480px) { .highlight { white-space: nowrap; } }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; width: 9.75rem; height: auto; }


/* ---------- nav ---------- */
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.8125rem; font-weight: 600; color: var(--ink-50); }
.steps span { display: inline-flex; align-items: center; gap: 0.4rem; }
.steps i { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: var(--ink-10); font-style: normal; font-size: 0.7rem; }
.steps .on { color: var(--ink); }
.steps .on i { background: var(--ink); color: var(--dark-fg); }
.steps .done i { background: var(--electric); color: #fff; }
.steps .sep { width: 1.25rem; height: 1px; background: var(--ink-10); }
@media (max-width: 639px) { .steps > span:not(.on) { display: none; } }

/* ---------- buttons & fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 999px; min-height: 3rem; padding: 0.625rem 1.25rem; font-size: 1rem; font-weight: 600; background: var(--color-action); color: var(--dark-fg); transition: transform 0.2s var(--ease), opacity 0.2s; white-space: nowrap; }
.btn:hover { opacity: 0.9; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; transform: none; cursor: default; }
.btn.big { padding: 0.625rem 1.5rem; font-size: 1rem; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink-10); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.accent { background: var(--color-action); color: #fff; }
.btn.wide { width: 100%; }
.btn .arr { transition: transform 0.2s var(--ease); }
.btn:hover .arr { transform: translateX(2px); }
.field { width: 100%; min-width: 0; min-height: 3rem; border-radius: 0.75rem; border: 1px solid var(--color-field-border); background: var(--card); padding: 0.6875rem 1rem; font-size: 1rem; color: var(--ink); transition: border-color 0.2s; }
.field::placeholder { color: var(--ink-35); }
.field:focus { border-color: var(--electric); }
.field.area { border-radius: 0.75rem; min-height: 6rem; resize: vertical; line-height: 1.45; }
select.field { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23333' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink-65); margin: 0 0 0.5rem; }
.label em { font-style: normal; font-weight: 500; color: var(--ink-35); }
.msg { margin: 0.75rem 0 0 0.25rem; font-size: 0.875rem; color: var(--ink-50); min-height: 1.3em; }
.msg[data-tone="error"] { color: var(--error); }
.msg[data-tone="ok"] { color: var(--electric); }

/* ---------- surfaces ---------- */
.card { background: var(--card); border: 1px solid var(--ink-8); border-radius: 1.5rem; }
.card.pad { padding: 1.5rem; }
@media (min-width: 768px) { .card.pad { padding: 2rem; } }

/* ---------- start widget (landing) ---------- */
.start { width: 100%; max-width: 42rem; border-radius: 1.75rem; border: 1px solid var(--ink-8); background: var(--card); padding: 0.625rem; box-shadow: var(--shadow-card); text-align: left; }
.tabs { display: flex; gap: 0.25rem; border-radius: 999px; background: var(--sand); padding: 0.25rem; }
.tabs button { flex: 1; min-width: 0; min-height: 2.75rem; border-radius: 999px; padding: 0.625rem 0.5rem; font-size: 0.875rem; line-height: 1.2; font-weight: 500; color: var(--ink-50); transition: color 0.2s, background 0.2s, box-shadow 0.2s; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px oklch(0.145 0 0 / 8%); }
.start form { padding: 0.75rem; }
.listing-entry { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.listing-entry .field { flex: 1 1 17.5rem; }
.listing-entry .btn { flex: 1 1 auto; }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 1.5rem; border: 1px dashed oklch(0.145 0 0 / 18%); background: var(--sand); padding: 2rem 1rem; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.drop:hover, .drop.over { border-color: var(--electric); background: oklch(0.55 0.229 262 / 4%); }
.drop strong { font-size: 0.875rem; font-weight: 500; }
.drop .small { color: var(--ink-50); font-size: 0.75rem; }
.drop svg { color: var(--electric); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: 0.375rem; margin-top: 0.625rem; }
.thumbs .thumb { position: relative; margin: 0; }
.thumbs img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: 0.5rem; display: block; }
.thumbs .remove { position: absolute; top: -0.3rem; right: -0.3rem; width: 1.375rem; height: 1.375rem; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 0.875rem; line-height: 1; display: grid; place-items: center; box-shadow: 0 1px 3px oklch(0.145 0 0 / 25%); }
.thumbs .remove::before { content: ""; position: absolute; inset: -0.7rem; }  /* a 44 px thumb target around a 22 px mark */
.thumbs .remove:focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; }
.about { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.625rem; }
.numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (min-width: 640px) { .about { flex-direction: row; } .about > .field { flex: 1.4; } .numbers { flex: 1; } }
.preview { margin: 0.625rem 0.25rem 0; font-size: 0.875rem; color: var(--ink); }
.preview b { font-weight: 600; }
.preview .muted { color: var(--ink-50); }

/* ---------- start page ---------- */
.hero { position: relative; overflow: hidden; padding: 3rem var(--page-gutter) 3rem; text-align: center; }
@media (min-width: 768px) { .hero { padding-top: 6rem; } }
.hero-body { position: relative; max-width: 48rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.hero .lede { max-width: 36rem; margin-top: 1.5rem; }
.hero .start { margin-top: 2.25rem; }
.bullets { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.75rem; margin: 1.75rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; font-weight: 500; color: var(--ink-65); }
.bullets li { display: flex; align-items: center; gap: 0.5rem; }

footer { padding-bottom: 2.5rem; }
footer .wrap { font-size: 0.875rem; color: var(--ink-50); }
.foot-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 1.5rem; padding-top: 2rem; border-top: 1px solid var(--ink-8); }
@media (max-width: 480px) { .foot-cols > div:first-child { grid-column: 1 / -1; } }
@media (min-width: 768px) { .foot-cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot-cols nav:not(.regions):not(.vv-social-links) { display: flex; flex-direction: column; gap: 0.5rem; }
.foot-cols .nav-group-title { margin: 0 0 0.25rem; font-weight: 600; color: var(--ink-65); }
.foot-cols nav a:hover { color: var(--ink); }
.foot-tagline { margin: .5rem 0 0; max-width: 18rem; }
.foot-cols .region-picker { margin-top: .75rem; }
.foot-copy { margin: 2rem 0 0; }
/* ---------- create page ---------- */
.create { padding-block: 2.5rem 7rem; }
.create-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; align-items: start; }
@media (min-width: 1024px) { .create-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.sticky { position: sticky; top: 5.5rem; }
.go-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--ink-10); box-shadow: var(--shadow-nav); }
@media (min-width: 1024px) { .go-bar { display: none !important; } }
.block + .block { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--ink-8); }
.block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.block-head h3 { font-size: 1.125rem; }
.block-head .small { color: var(--ink-50); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem; }
/* The photos at the top: one row, the rest behind a +N tile that opens them all. */
.photos.strip { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0.375rem; margin-top: 1rem; overflow: hidden; }
.photos.strip.expanded { flex-wrap: wrap; }
.photos.strip .photo { flex: 0 0 4.5rem; border-radius: 0.5rem; }
.photo.more { display: grid; place-items: center; aspect-ratio: 4 / 3; min-height: 0; height: auto; border: 0; padding: 0; font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1; color: var(--ink); background: var(--bone); cursor: pointer; }
.photo.more:hover { background: var(--ink-10); }
.photos > *, .fields > * { min-width: 0; }
.photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.75rem; background: var(--sand); cursor: pointer; }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s, filter 0.2s; }
.photo.fixed { cursor: default; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 0.75rem; }
@media (min-width: 640px) { .fields { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fields .span-2 { grid-column: span 2; }
.fields .span-4 { grid-column: 1 / -1; }
.fields .field { padding: 0.6875rem 1rem; font-size: 1rem; }
.join { display: flex; gap: 0.375rem; }
.join .field:first-child { flex: 1; min-width: 0; }
.join select.field { width: auto; flex: none; min-width: 5.75rem; }
.locked { border-radius: 1rem; background: var(--peach); padding: 0.875rem 1.125rem; font-size: 0.875rem; }
.cuts { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.cut { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: 1rem; background: var(--sand); padding: 0.75rem 1rem; font-size: 0.875rem; }
.cut .status { font-weight: 600; color: var(--ink-50); }
.cut .status.done { color: var(--electric); }
.cut .status.failed { color: var(--error); }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 480px) { .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice { position: relative; display: block; border-radius: 1rem; border: 2px solid transparent; background: var(--sand); padding: 0.75rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.choice:hover { background: var(--bone); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--ink); background: var(--card); }
.choice .name { display: block; font-size: 0.875rem; font-weight: 600; }
.choice .desc { display: block; margin-top: 0.125rem; font-size: 0.75rem; color: var(--ink-50); line-height: 1.35; }
.pills { display: flex; gap: 0.375rem; border-radius: 999px; background: var(--sand); padding: 0.25rem; }
.pills label { position: relative; flex: 1; text-align: center; border-radius: 999px; padding: 0.5rem 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--ink-50); cursor: pointer; transition: background 0.2s, color 0.2s; }
.pills label:has(input:checked) { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px oklch(0.145 0 0 / 8%); }
.pills input { position: absolute; opacity: 0; pointer-events: none; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
.switch .desc { display: block; font-size: 0.8125rem; color: var(--ink-50); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { flex: none; width: 2.75rem; height: 1.625rem; border-radius: 999px; background: var(--ink-10); position: relative; transition: background 0.2s; }
.switch .track::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px oklch(0 0 0 / 20%); transition: transform 0.2s var(--ease); }
.switch:has(input:checked) .track { background: var(--electric); }
.switch:has(input:checked) .track::after { transform: translateX(1.125rem); }
.logo-row { display: flex; align-items: center; gap: 0.75rem; }
.logo-box { display: grid; place-items: center; width: 5rem; height: 3.5rem; border-radius: 0.75rem; border: 1px dashed oklch(0.145 0 0 / 18%); background: var(--sand); overflow: hidden; }
.logo-box img { max-width: 90%; max-height: 80%; object-fit: contain; }
.logo-row .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.btn.sm { min-height: 2.75rem; padding: 0.625rem 1rem; font-size: 0.8125rem; }
.cost { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--ink-50); text-align: center; }

/* ---------- video page ---------- */
.result { padding-block: 2.5rem 7rem; }
.result-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2rem; align-items: start; }
@media (min-width: 900px) { .result-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.stage { position: relative; width: 100%; max-width: 24rem; margin-inline: auto; aspect-ratio: 9 / 16; border-radius: 1.75rem; overflow: hidden; background: var(--night); box-shadow: 0 30px 60px -30px oklch(0.145 0 0 / 50%); }
.stage.landscape { max-width: none; aspect-ratio: 16 / 9; }
.stage.portrait { aspect-ratio: 4 / 5; }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--night); }
.stage .tag { position: absolute; top: 0.875rem; left: 0.875rem; border-radius: 999px; background: oklch(1 0 0 / 90%); color: var(--ink); padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; }
.stage .waiting { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--dark-fg); text-align: center; padding: 2rem; }
.stage .waiting p { margin: 0; font-size: 0.875rem; opacity: 0.7; }
.spinner { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 3px solid oklch(1 0 0 / 15%); border-top-color: var(--electric); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.progress li { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border-radius: 0.875rem; font-size: 0.9375rem; color: var(--ink-50); }
.progress li i { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--ink-10); font-style: normal; font-size: 0.75rem; flex: none; }
.progress li.on { background: var(--card); color: var(--ink); font-weight: 600; }
.progress li.on i { background: var(--electric); color: #fff; animation: pulse 1.2s ease-in-out infinite; }
.progress li.done { color: var(--ink); }
.progress li.done i { background: var(--ink); color: var(--dark-fg); }
@keyframes pulse { 50% { transform: scale(0.85); } }
.actions-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.result .meta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.result .meta span { border-radius: 999px; background: var(--card); padding: 0.375rem 0.875rem; font-size: 0.8125rem; font-weight: 500; color: var(--ink-65); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }


/* The four photos the video is built on. A slot shows its photo and role; tapping it arms the grid below to pick another. */
/* While the photos are being read the storyboard's placeholder frames breathe instead of sitting empty. */
.shot.skeleton .frame { background: linear-gradient(100deg, var(--sand) 35%, var(--bone) 50%, var(--sand) 65%) 0 0 / 250% 100%; animation: shimmer 1.6s linear infinite; }
.shot.skeleton .meta b { display: block; height: 0.8125rem; width: 60%; border-radius: 999px; background: var(--ink-8); }
.shot.skeleton .meta { height: 2.4rem; }
@keyframes shimmer { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .shot.skeleton .frame { animation: none; } }
/* The picker under the scenes: the photos that fit the part stand out, the one in use is marked. */
.picker { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ink-8); }
.picker .photo:not(.fits) img { opacity: 0.45; }
.picker .photo:hover img { opacity: 1; }
.photo.current { outline: 3px solid var(--electric); outline-offset: 2px; }

/* The place picker: the plate of each place — a car-free photograph of it — and the seller's hero photo for "your photos". */
.choice-grid.looks { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.choice .tile { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 0.625rem; margin-bottom: 0.625rem; background: var(--night); }
.choice .tile img, .choice .tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The format cards: two 9:16 loops of the whole example, muted and only moving while the row is open. */
/* The format and music rows page like the places; a format card is a 9:16 loop, a track card a tile with its play button. */
.choice-grid.looks .format { flex: 0 0 8.5rem; scroll-snap-align: start; }
.choice.format .tile { background-size: cover; background-position: center; }  /* the poster stays under the loop: a video the browser let go still shows its frame */
.choice-grid.looks .track { flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.875rem 0.5rem 0.5rem; }
.choice.track .text { display: flex; flex-direction: column; min-width: 0; }
.choice.track .name, .choice.track .desc { white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.choice.track .desc { margin-top: 0; }
/* A voice is a name and a short character line, five to a row: the line wraps to two rows instead of running wide. */
.choice-grid.looks .voice { flex: 0 0 10.5rem; align-items: flex-start; padding: 0.5rem 0.625rem 0.5rem 0.5rem; }
.choice.voice .desc { white-space: normal; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }

/* The progress page shows each scene as generation completes. */
.landing { margin-top: 1.25rem; }
.scenes { margin-top: 1.25rem; }
/* Launch support and confirmation use the existing type and spacing tokens. */
.create > .wrap > .small a, .result .small a { text-decoration: underline; text-underline-offset: .15em; }

/* The setup page as steps: one card per step, a numbered head, a summary line where the detail is folded away. */
.create-steps { display: grid; gap: 1rem; margin-top: 1.25rem; width: 100%; }
/* The load line only takes room while it says something. */
#load-msg:empty { display: none; }
.step-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.step-head i { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--ink); color: var(--dark-fg); font-style: normal; font-size: 0.8125rem; font-weight: 700; flex: none; }
.step-head h3 { font-size: 1.125rem; margin: 0; }
.step-head .small { color: var(--ink-50); }
.step-head .summary { flex: 1 1 12rem; min-width: 0; font-size: 0.9375rem; color: var(--ink-65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-head .btn, .step-head .switch { margin-left: auto; }
.step-body { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ink-8); }
.step .hero-strip { margin-top: 1rem; }
.step .choice-grid { margin-top: 1rem; }
.sound { margin-top: 1rem; display: grid; gap: 0.75rem; }
.brand-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
#logo-msg:empty { display: none; }
@media (min-width: 768px) { .brand-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
/* The storyboard: the scenes the look will make, before anything is bought — and the same cards on the progress page. */
/* The headline faces a seller can pick for the video: the same files the render uses, so the frame on the page is the frame in the film. */
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fonts/Inter-500.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/Inter-600.ttf") format("truetype"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("/fonts/Outfit-500.ttf") format("truetype"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("/fonts/Outfit-600.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url("/fonts/Nunito-600.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("/fonts/Nunito-700.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/fonts/BarlowCondensed-600.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/BarlowCondensed-700.ttf") format("truetype"); }
@font-face { font-family: "Fraunces"; font-weight: 500; font-display: swap; src: url("/fonts/Fraunces72-500.ttf") format("truetype"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-display: swap; src: url("/fonts/Fraunces72-600.ttf") format("truetype"); }
:root { --video-face: "Inter", -apple-system, sans-serif; --video-tracking: -.025em; --video-lh: 1.1; --video-light: 500; --video-bold: 600; }

.story { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.story:empty::before { content: attr(data-empty); grid-column: 1 / -1; font-size: 0.875rem; color: var(--ink-50); }
.shot { display: grid; grid-template-rows: auto 1fr; gap: 0.5rem; }
.shot .frame { position: relative; aspect-ratio: 9 / 16; border-radius: 0.75rem; overflow: hidden; background: var(--night); }
.story[data-orientation=landscape] .shot .frame { aspect-ratio: 16 / 9; }
.shot .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The words as the video sets them: the frame scaled to the card, sizes from its short side (1080 px in either shape, so cqmin), the left edge and the safe bottom per shape. */
.shot .frame { container-type: size; }
.shot .frame:has(.copy:not(:empty))::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 42%, rgba(0,0,0,.45) 72%, rgba(0,0,0,.62) 100%); pointer-events: none; }
.shot .frame .copy { position: absolute; left: 6.67cqmin; width: 76.7cqmin; bottom: 21.9cqh; z-index: 1; display: flex; flex-direction: column; gap: 0.74cqmin; color: #fff; font-family: var(--video-face); letter-spacing: var(--video-tracking); line-height: var(--video-lh); text-shadow: 0 0.1cqmin 0.55cqmin rgba(0,0,0,.3); }
.story[data-orientation=landscape] .shot .frame .copy { left: 6.9cqw; width: 72cqw; bottom: 11.1cqh; }
.shot .frame .copy b { display: block; font-weight: var(--video-light); }
.shot .frame .copy b.bold { font-weight: var(--video-bold); }
.shot .frame .copy b.xl { font-size: 8.9cqmin; }
.shot .frame .copy b.l { font-size: 7.04cqmin; }
.shot .frame .copy b.m { font-size: 5.56cqmin; }
.shot .frame .copy b.s, .shot .frame .copy b.sub { font-size: 2.96cqmin; font-weight: 500; letter-spacing: 0; line-height: 1.2; color: rgba(245,245,242,.85); }
.shot .frame .copy b.sub { letter-spacing: .04em; line-height: 1.3; }
.shot .frame:has(.copy:empty) .copy, .shot .frame .copy:empty { display: none; }
.shot .frame .badge { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: rgba(255,255,255,.9); color: var(--ink); }
.shot .frame .badge.move { background: var(--accent, #1769FF); color: #fff; }
.shot .frame .state { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(17,17,17,.55); color: #fff; font-size: 0.75rem; font-weight: 600; text-align: center; padding: 0.5rem; }
.shot .frame .state::before { content: ""; width: 1.25rem; height: 1.25rem; border-radius: 999px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: shot-spin 0.9s linear infinite; margin-bottom: 0.375rem; }
.shot.done .frame .state, .shot.waiting .frame .state::before { display: none; }
.shot.waiting .frame .state { background: rgba(17,17,17,.35); }
@keyframes shot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .shot .frame .state::before { animation: none; } }
.shot .meta { font-size: 0.75rem; color: var(--ink-50); line-height: 1.35; }
.shot .meta b { display: block; color: var(--ink); font-weight: 600; font-size: 0.8125rem; }
.shot .meta .when { display: block; }
.shot .meta .say { display: block; }
/* The words the video carries, above the scene cards: what is on screen and what the voice says. */
.lines { display: grid; gap: 0.5rem; margin-top: 1rem; padding: 1rem 1.25rem; border-radius: 1rem; background: var(--sand); font-size: 0.875rem; }
.lines .line { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; }
.lines .line .label { margin: 0; }
.lines .text.muted { color: var(--ink-50); }
.lines .text.error { color: var(--error); }
.lines .btn { justify-self: start; }
@media (max-width: 479px) { .lines .line { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; } }
.go { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-8); max-width: 28rem; }
/* The frame, two cards: a drawn 16:9 and 9:16 box, the name, where that shape goes. */
.shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.75rem; }
.shapes .shape { position: relative; display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: 0.875rem; border: 1px solid var(--color-field-border); background: var(--card); cursor: pointer; }
.shapes .shape:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.shapes .shape input { position: absolute; opacity: 0; pointer-events: none; }
.shapes .box { flex: none; border-radius: 0.1875rem; background: var(--night); }
.shapes .box.wide { width: 2rem; height: 1.125rem; }
.shapes .box.tall { width: 1.125rem; height: 2rem; }
.shapes .text { display: flex; flex-direction: column; min-width: 0; }
.shapes .name { font-size: 0.875rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.shapes .desc { font-size: 0.75rem; color: var(--ink-50); line-height: 1.3; }

/* The done page: the caption folded under the buttons, the 12 s cut as a small second tile with its own buttons. */
.caption { margin-top: 1rem; }
.caption-text { margin: 0.75rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.875rem; line-height: 1.5; color: var(--ink-65); }
.short { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ink-10); }
.short h3 { margin: 0; }
.short p { margin: 0.25rem 0 0; }
.short-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.75rem; }
.stage.small { flex: none; max-width: 7rem; margin-inline: 0; border-radius: 1rem; box-shadow: none; }

/* The setup page's email, a small line under the button; the progress page's email, the way back while it renders. */
.go > .field { margin-top: 0; }
.go > .btn { margin-top: 0.75rem; }
.email-me { margin-top: 1.25rem; }
.email-me .btn { flex: none; }
.email-set { margin: 1.25rem 0 0; }
.email-set a { text-decoration: underline; text-underline-offset: .15em; }

/* ---------- the setup page as one page ---------- */
/* The car and its four photos share the first card: one line about the car, the four as small frames, the buttons that open the detail. */
.car-row { display: flex; align-items: baseline; gap: 0.25rem 0.75rem; flex-wrap: wrap; }
.car-row .summary { min-width: 0; font-size: 0.9375rem; color: var(--ink-65); }
.car-row .link { flex: none; }
.go, .go .cost { text-align: left; }
.go .msg { text-align: left; }

.after { display: grid; gap: 1rem; }

/* Where: the places as tiles, a tick on the chosen one. */
/* The places as one row: scroll-snap, swipe on a phone, arrows on a desktop, no scrollbar. Wider than the card so the row bleeds to its padding edge. */
/* A grid item grows to its content unless told not to; the row must stay the card's width and scroll inside it. */
.create-steps > *, .after > * { min-width: 0; }
.choice-grid.looks { display: flex; gap: 0.625rem; overflow-x: auto; max-width: calc(100% + 0.5rem); scroll-snap-type: x mandatory; scroll-padding-inline: 0.25rem; padding: 0.25rem 0.25rem 0.75rem; margin: 1rem -0.25rem 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.choice-grid.looks::-webkit-scrollbar { display: none; }
.choice-grid.looks .look { flex: 0 0 11rem; scroll-snap-align: start; }
@media (max-width: 480px) { .choice-grid.looks .look { flex-basis: 9.5rem; } }
/* Paging a row: two filled grey circles under the row at its right end, the way Apple does it; a phone swipes and never sees them. */
.row-arrows { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; }
.row-arrows[hidden] { display: none; }
.arrow { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 0; background: var(--ink-8); color: var(--ink); font-size: 1.375rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 0.125rem; transition: background 0.15s; }
.arrow:hover { background: var(--ink-10); }
.arrow:disabled { opacity: 0.3; cursor: default; }
@media (pointer: coarse) { .row-arrows { display: none; } }
.choice.look .tile { aspect-ratio: 4 / 3; }
.choice .tile .tick { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: oklch(1 0 0 / 40%); }
.choice:has(input:checked) .tile .tick { background: #fff; }
.choice:has(input:checked) .tile .tick::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: var(--ink); }

/* Everything else: one line per choice — the name, what is set, the way in — and the controls under it when opened. */
.row-body { padding: 1rem 0 0; }
.voice-language { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.voice-language .label { margin: 0; flex: none; }
/* A filter row: the pills only as wide as their words. */
.pills.compact { display: inline-flex; width: auto; margin-top: 1rem; }
.pills.compact label { flex: 0 0 auto; padding: 0.375rem 0.875rem; min-height: 2.75rem; }
.voice-language .field { width: auto; min-height: 2.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* The storyboard as cards with the words as fields: the frame, then what is on screen and what the voice says. */
/* The scenes as one row of frames big enough to read the words as they will be set — swipe on a phone, arrows on a desktop; the fields sit under each frame. */
.story.cards { display: flex; gap: 0.75rem; overflow-x: auto; max-width: calc(100% + 0.5rem); scroll-snap-type: x mandatory; scroll-padding-inline: 0.25rem; padding: 0.25rem 0.25rem 0.75rem; margin: 1rem -0.25rem 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.story.cards::-webkit-scrollbar { display: none; }
.story.cards:empty { display: block; }
.story.cards .shot { flex: 0 0 15rem; scroll-snap-align: start; grid-template-rows: auto 1fr; gap: 0.75rem; padding: 0.75rem; border-radius: 1.125rem; background: var(--sand); }
.story.cards .shot .frame { border-radius: 0.625rem; }
.story.cards[data-orientation=landscape] .shot { flex-basis: 20rem; }
.story.cards .shot .meta { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.faces { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.faces .face { position: relative; padding: 0.5rem 0.875rem; border-radius: 999px; border: 1px solid var(--color-field-border); background: var(--card); font-size: 1.125rem; line-height: 1.2; color: var(--ink); cursor: pointer; }
.faces .face:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.faces .face input { position: absolute; opacity: 0; pointer-events: none; }
/* Under a frame: the spoken line as a caption with the speaker glyph — seen is on the frame, heard is under it. 'Edit words' opens the labelled fields (labels 14px, editable text 16px, per the system). */
.shot .shown, .shot .said { display: flex; gap: 0.5rem; margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--ink); }
.shot .shown svg, .shot .said svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.2rem; color: var(--ink-50); fill: currentColor; }
.shot .shown svg { fill: none; }
.shot .said.muted { color: var(--ink-50); }
.shot.editing .shown, .shot.editing .said { display: none; }
.shot .fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.shot .edit { align-self: flex-start; margin-top: auto; }
/* Nothing on the picture until the scene is in Edit: then its note and its photo button show. */
.shot:not(.editing) .frame .badge, .shot:not(.editing) .frame .cast { display: none; }
.shot .frame.castable { cursor: pointer; }
.shot .frame.castable:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; }
.link { border: 0; padding: 0; background: none; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--ink-65); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; cursor: pointer; }
.link:hover { color: var(--ink); }
/* The add tile in the picker: a dashed thumb that takes a file. */
.photo.add { display: grid; place-items: center; text-align: center; padding: 0.25rem; border: 1.5px dashed var(--ink-10); background: var(--card); font-size: 0.75rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.photo.add.busy { opacity: 0.6; cursor: progress; }
.photo.add:has(input:focus-visible) { outline: 2px solid var(--electric); outline-offset: 3px; }
/* The photo's own button sits on the picture, a light pill at its foot. */
.shot .frame .cast { position: absolute; right: 0.5rem; bottom: 0.5rem; z-index: 2; border-radius: 999px; padding: 0.3rem 0.625rem; font-size: 0.75rem; font-weight: 600; color: var(--ink); background: rgba(255,255,255,.92); pointer-events: none; }
.words { display: block; }
.words span { display: block; font-size: 0.875rem; font-weight: 500; color: var(--ink-50); margin-bottom: 0.375rem; }
.words textarea { display: block; width: 100%; resize: none; font-style: normal; border-radius: 0.75rem; border: 1px solid var(--color-field-border); background: var(--card); padding: 0.625rem 0.75rem; font: inherit; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.words textarea:disabled { color: var(--ink-50); }
.words textarea:focus { outline: 2px solid var(--electric); outline-offset: 3px; border-color: var(--electric); box-shadow: 0 0 0 3px var(--electric-10); }
.words textarea:disabled { background: var(--bone); color: var(--ink-65); }
.words em { display: block; font-size: 0.8125rem; color: var(--ink-50); }


/* Focus follows the visible surface of native controls, including file pickers. */
.choice:has(input:focus-visible), .pills label:has(input:focus-visible), .switch:has(input:focus-visible), .drop:has(input:focus-visible), .btn:has(input:focus-visible) { outline: 2px solid var(--electric); outline-offset: 3px; }
.pills label, .switch { min-height: 2.75rem; }
.pills label { display: grid; place-items: center; }
.about > *, .numbers > * { min-width: 0; }

@media (max-width: 479px) {
  .fields { grid-template-columns: minmax(0, 1fr); }
  .fields .span-2 { grid-column: auto; }
  .story.cards .shot { flex-basis: calc(100% - 1rem); }
  .btn { white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* A finished player includes transport controls below its complete frame. */
.stage:has(> .vv-player:not([hidden])){aspect-ratio:auto;overflow:visible;background:transparent;box-shadow:none}
.stage.small:has(> .vv-player){width:18rem;max-width:100%}

/* Contextual actions stay with the task, outside the global header. */
.task-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.task-heading h1{flex:1 1 20rem}
.task-heading>.btn{flex:none;white-space:normal;text-align:center;max-width:100%}