/* style.css - the snpz look. Aiden, 2026-10-01 on Grady's PC: "that ui looks like shit. it should obviously make it look like snpz ui."
   The front page is law (Grady; snpz-hub marketing/index.html): cream ground, ink, yellow, cyan, orange, Outfit 900 headlines with
   the yellow-to-blue sweep, soft colour blobs behind the page, a breath of edge glow, rounded white cards on cream. The feed is
   one full-height card per format that snaps like Instagram (William's drawing of the app, origin/site-social, is the shape).
   No green anywhere, no looping video, no text walls.
   Phone first, one-handed in a bright shop: --tap 52px stays, and the shot list still prints as the paper card.
   Outfit comes from Google Fonts (index.html, privacy.html, terms.html); the stack below is the fallback. No inline style anywhere:
   the CSP forbids it, so every look is a class here. selfcheck-screens.js reads the first --bg below for the manifest colours. */
:root {
  --bg: #fbf4ea; --surface: #fffdf9; --field: #ffffff; --ink: #111111; --muted: #4a4744;
  --line: #11111120; --line-strong: #11111140; --bar: #fbf4eacc; --ground: linear-gradient(180deg, #fffaf1 0%, #fbf4ea 30%);
  --cream: #fbf4ea; --black: #111111; --yellow: #ffc629; --cyan: #5bc8e8; --orange: #f26b3a;
  --g1: #9c6500; --g2: #b98000; --g3: #1f86bd; --g4: #155d92;
  --warn-soft: #ffc62942; --bad: #b3261e; --bad-soft: #c4271a1a;
  --blob-y: #ffc629d0; --blob-c: #5bc8e8c0; --glow: .3;
  --poster-base: #fbf4ea;
  --poster-a: radial-gradient(95% 52% at 12% 0%, #ffc629 0%, #ffc62900 72%), radial-gradient(80% 46% at 100% 104%, #5bc8e8d0 0%, #5bc8e800 72%);
  --poster-b: radial-gradient(95% 52% at 90% 0%, #5bc8e8 0%, #5bc8e800 72%), radial-gradient(80% 40% at 0% 80%, #ffc629b0 0%, #ffc62900 72%);
  --barh: 58px;   /* the sticky bar's height; reel-card.js sets the real one, the feed's cards are sized from it */
  --cardh: max(460px, min(calc(100vh - var(--barh) - 32px), 760px));   /* one reel = the screen under the bar */
  --shadow: 0 18px 36px -22px rgba(30, 24, 10, .38), 0 6px 16px -10px rgba(30, 24, 10, .16);
  --radius: 24px; --tap: 52px;
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 17px; line-height: 1.45;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111111; --surface: #1c1d20; --field: #26272b; --ink: #fbf4ea; --muted: #bdb6ab;
    --line: #fbf4ea26; --line-strong: #fbf4ea55; --bar: #111111cc; --ground: linear-gradient(180deg, #17171a 0%, #111111 30%);
    --g1: #ffc629; --g2: #ffd45e; --g3: #5bc8e8; --g4: #a4e2f6;
    --warn-soft: #ffc6292e; --bad: #ff9b8f; --bad-soft: #ff9b8f24;
    --blob-y: #ffc62938; --blob-c: #5bc8e832; --glow: .34;
    --poster-base: #161618;
    --poster-a: radial-gradient(95% 52% at 12% 0%, #ffc629b8 0%, #ffc62900 72%), radial-gradient(80% 46% at 100% 104%, #5bc8e890 0%, #5bc8e800 72%);
    --poster-b: radial-gradient(95% 52% at 90% 0%, #5bc8e8a8 0%, #5bc8e800 72%), radial-gradient(80% 40% at 0% 80%, #ffc62990 0%, #ffc62900 72%);
    --shadow: 0 18px 36px -20px rgba(0, 0, 0, .8), 0 6px 16px -10px rgba(0, 0, 0, .6); }
}
@supports (height: 100svh) { :root { --cardh: max(460px, min(calc(100svh - var(--barh) - 32px), 760px)); } }
* { box-sizing: border-box; }
html { background: var(--ground) fixed; background-color: var(--bg); }
body { --pad: max(16px, calc((100vw - 560px) / 2)); margin: 0; min-height: 100vh; padding: 0 var(--pad) calc(32px + env(safe-area-inset-bottom));
  color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
main:focus { outline: none; }
[hidden] { display: none !important; }   /* label.field and the other display rules must not beat the hidden attribute */

/* the ground: four soft blobs behind the page (html::before), grain over them and the ground (body::before: noise.svg, soft-light, so a
   dark gradient has no visible bands; Grady, 10-01: "the black, yellow, and blue gradient is really choppy"), and an edge glow that says
   hello once and settles (the front page's two moves) */
html::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--blob-y), transparent) -18vmax -14vmax / 62vmax 50vmax no-repeat,
    radial-gradient(closest-side, var(--blob-c), transparent) calc(100% + 16vmax) 10% / 56vmax 46vmax no-repeat,
    radial-gradient(closest-side, var(--blob-c), transparent) -24vmax 60% / 60vmax 48vmax no-repeat,
    radial-gradient(closest-side, var(--blob-y), transparent) calc(100% + 18vmax) 98% / 62vmax 50vmax no-repeat; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(noise.svg) 0 0 / 256px 256px;
  mix-blend-mode: soft-light; }
@property --ga { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
body::after { content: ""; position: fixed; inset: -22px; z-index: 60; pointer-events: none; border: 26px solid transparent; border-radius: 36px;
  background: conic-gradient(from var(--ga), var(--yellow), var(--cyan), #ff9a4d, var(--cyan), var(--yellow)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  filter: blur(12px) saturate(1.3); opacity: var(--glow); animation: hello 2.6s cubic-bezier(.37, 0, .63, 1) 1 both; }
@keyframes hello { 0% { opacity: 0; --ga: 0deg; } 35% { opacity: .85; } 100% { opacity: var(--glow); --ga: 140deg; } }

h1 { margin: 22px 0 10px; width: fit-content; max-width: 100%; font-size: clamp(2rem, 9.6vw, 2.9rem); font-weight: 900; line-height: .98;
  letter-spacing: -.045em; text-wrap: balance; }
h2 { font-size: 1.3rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin: 18px 0 8px; }
h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
p { margin: 6px 0; }
a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
/* the yellow-to-blue sweep on every headline: a gradient three times the width of the words, parked on the ink end, slid across once */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 { padding-bottom: .12em; margin-bottom: -.02em; color: transparent; -webkit-text-fill-color: transparent;
    background: linear-gradient(100deg, var(--g1) 0%, var(--g2) 14%, var(--g3) 22%, var(--g4) 33.3%, var(--ink) 50.01%, var(--ink) 100%) 0 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text; animation: arrive 1.3s cubic-bezier(.37, 0, .63, 1) both; }
}
@keyframes arrive { from { background-position-x: 100%; } to { background-position-x: 0%; } }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
/* messages sit on a solid white or ink base with a coloured edge, so the blobs behind never tint them (yellow over cyan reads green) */
.error { color: var(--bad); background: linear-gradient(var(--bad-soft), var(--bad-soft)), var(--surface); border: 1.5px solid var(--bad); padding: 11px 16px; border-radius: 18px; font-weight: 600; }
.note { background: var(--surface); border: 2px solid var(--cyan); padding: 11px 16px; border-radius: 18px; }
.warnbox { background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--surface); border: 2px solid var(--yellow); color: var(--ink); padding: 11px 16px; border-radius: 18px; }

/* the top bar: the snpz wordmark, then who is signed in and the few links */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 0 8px; flex-wrap: wrap; margin: 0 calc(-1 * var(--pad));
  padding: calc(6px + env(safe-area-inset-top)) var(--pad) 6px; background: var(--bar); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { font-size: 1.75rem; font-weight: 900; line-height: 1; letter-spacing: -.055em; color: var(--ink); text-decoration: none; padding: 8px 0; }
.who { color: var(--muted); font-size: .9rem; font-weight: 600; flex: 1; min-width: 3.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 4px; align-items: center; }   /* Saved, My reels and Settings stay one row on a 375 px phone: the name gives way first (.who) */
.navlink { font-size: .88rem; font-weight: 800; text-decoration: none; padding: 12px 4px; }
.badge { font-size: .7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--cyan); color: var(--black);
  text-transform: uppercase; letter-spacing: .07em; }
.badge.warn { background: var(--yellow); }

fieldset { border: 0; padding: 0; margin: 14px 0 6px; min-width: 0; }
legend { font-weight: 800; padding: 0; margin-bottom: 4px; }
.logo-preview { display: block; max-width: 160px; max-height: 96px; margin: 8px 0; border-radius: 14px; }
details.card > summary { min-height: 32px; }

/* buttons: yellow is the one that does the thing, cyan is everything else, a ghost is the quiet one. Pills, 52 px tall. */
button, .button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--tap); padding: 12px 22px;
  margin: 10px 0 0; border-radius: 999px; border: 2px solid transparent; background: var(--cyan); color: var(--black); font: inherit;
  font-weight: 800; letter-spacing: -.01em; text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 10px 20px -12px rgba(21, 93, 146, .7); transition: transform .12s, box-shadow .12s; }
button.primary, .button.primary { background: var(--yellow); box-shadow: 0 10px 22px -12px rgba(185, 122, 0, .85); }
button.ghost, .button.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
button.danger { background: transparent; color: var(--bad); border-color: var(--bad); box-shadow: none; }
button.link { width: auto; min-height: 44px; margin: 0; padding: 4px 8px; border: 0; background: none; color: var(--ink); box-shadow: none;
  font-weight: 800; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
button:active, .button:active { transform: scale(.98); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
button:focus-visible, a:focus-visible, label.chip:focus-within, .check:focus-within, summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.row.center { align-items: center; }
.row.center > img { flex: none; }
.row > button { padding-left: 8px; padding-right: 8px; overflow-wrap: normal; }   /* "Approve" never splits mid-word */

/* cards: white on cream, a soft shadow, big corners */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 14px 0; box-shadow: var(--shadow); }
.card.done { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow), var(--shadow); }
.card.problem { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange), var(--shadow); }
.kv { margin: 4px 0; }
.kv b { font-weight: 800; }
.say { padding: 10px 14px; border-radius: 16px; background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--surface); border-left: 5px solid var(--yellow); font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.tag { display: inline-block; font-size: .78rem; font-weight: 800; padding: 3px 11px; border-radius: 999px; background: var(--orange); color: var(--black);
  letter-spacing: .02em; margin: 4px 0; }

/* the poster: a drawn stand-in until we film an example, never a grey box: cream with a yellow glow and a cyan glow, the format's name
   in Outfit 900 on it. The feed alternates the two glows card to card. Footage, when there is some, goes over it. Two radial glows on a
   flat colour, and grain on top (noise.svg, soft-light): no linear base layer, no bands. */
.poster, .reel-item .thumb.blank { background: url(noise.svg) 0 0 / 256px 256px, var(--poster-a); background-color: var(--poster-base);
  background-blend-mode: soft-light, normal, normal; }
.poster { position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 62vh; border-radius: 20px; overflow: hidden; margin: 0 auto 10px;
  display: flex; align-items: flex-end; justify-content: flex-start; padding: 14px; color: var(--ink); font-weight: 900; font-size: 1.25rem;
  line-height: .98; letter-spacing: -.035em; border: 1px solid var(--line); }
.poster.small { max-height: 220px; width: auto; font-size: 1rem; }
video.reel { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 72vh; background: #000; border-radius: 22px; margin: 8px auto; object-fit: contain; }
img.cover { width: 96px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: var(--line); }

/* the feed (reel-card.js), read like Instagram (Grady, 10-01): each reel is one card the height of the screen under the bar, the video
   playing on it, Save top right, the words over the video bottom-left in a dark glass chip (a chip, not a fade: a scrim is a gradient),
   and a big Create at the bottom of every card. On a phone the page snaps card to card; on a desktop it is a phone-wide column. */
.fmt { position: relative; display: grid; overflow: hidden; padding: 0; margin: 0 auto 12px; max-width: 430px; height: var(--cardh); border-radius: 30px;
  background: #000; }
.fmt > * { grid-area: 1 / 1; }   /* poster, player, tap layer and words share one cell: the poster fills the card, the rest sit on it in this order */
.fmt .poster { z-index: 0; } .fmt .stage { z-index: 1; } .fmt .tap { z-index: 2; } .fmt .panel { z-index: 3; }   /* explicit: a positioned box would otherwise paint over the tap layer */
.fmt .poster { margin: 0; border: 0; border-radius: 0; max-height: none; aspect-ratio: auto; }
.fmt:nth-of-type(even) .poster { background: url(noise.svg) 0 0 / 256px 256px, var(--poster-b); background-color: var(--poster-base);
  background-blend-mode: soft-light, normal, normal; }
/* TikTok's player is 9:16 and draws its own author, logo and counters at its edges, so it is shown whole, never cropped or covered at the top:
   as wide as the card, or as tall as the card less a 56 px band at the top (where our sound chip and Save sit), sitting on the card's floor */
.fmt .stage { position: relative; overflow: hidden; container-type: size; }
.fmt .stage .player { position: absolute; bottom: 0; left: 50%; width: min(100cqw, (100cqh - 56px) * 9 / 16); height: auto; aspect-ratio: 9 / 16;
  transform: translateX(-50%); border-radius: 0; }
button.tap { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; }
button.tap:active { transform: none; }
button.tap:focus-visible { outline-offset: -6px; }
.fmt .panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 10px calc(12px + env(safe-area-inset-bottom)) 10px; pointer-events: none; }
.fmt .pbot { display: flex; flex-direction: column; gap: 10px; }   /* the words, then this card's own Create under them */
.fmt .panel button, .fmt .panel a { pointer-events: auto; }   /* the panel lets taps through to the player's tap layer; only its own buttons and links catch them */
.fmt .ptop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fmt .sound { margin-top: 8px; padding: 7px 13px; border-radius: 999px; background: rgba(251, 244, 234, .16); color: #fbf4ea; font-size: .85rem; font-weight: 800; }
button.save { flex: none; width: 44px; min-height: 44px; height: 44px; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: rgba(251, 244, 234, .16);
  color: #fbf4ea; box-shadow: none; }
button.save svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
button.save[aria-pressed="true"] svg { fill: var(--yellow); stroke: var(--yellow); }
.fmt .info { align-self: flex-start; max-width: 100%; padding: 12px 14px; border-radius: 20px; background: rgba(17, 17, 17, .6); color: #fbf4ea;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fmt .info h2 { margin: 0 0 2px; color: #fff; font-size: 1.3rem; font-weight: 900; line-height: 1.02; letter-spacing: -.035em; }
.fmt .info p { margin: 3px 0; font-size: .95rem; }
.fmt .by { font-weight: 800; opacity: .8; }
.fmt .fsound { font-weight: 700; }
.fmt .fmeta { font-weight: 700; }
.fmt .info a { color: #fbf4ea; }
.fmt:not(.live) .info, .fmt:not(.live) .sound, .fmt:not(.live) button.save { background: rgba(17, 17, 17, .84); }   /* on the poster (cream in light mode) the glass has to be darker to read */
.fmt .orig { display: inline-block; margin-top: 4px; padding: 4px 0; }
.lvl { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-weight: 800; font-size: .95rem; }
.lvl i { width: 13px; height: 13px; border-radius: 50%; background: rgba(251, 244, 234, .22); border: 1.5px solid rgba(251, 244, 234, .55); }
.lvl i.on { background: var(--yellow); border-color: var(--yellow); }
.lvl span { margin-left: 4px; }
/* Create: big and yellow, at the bottom of EVERY card, inside it (Grady, 10-02: "the create button wasn't on each individual card"); the note
   about a reel we are building floats just above the bottom of the screen */
button.create { width: 100%; min-height: 62px; margin: 0; font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, .35), 0 16px 30px -10px rgba(0, 0, 0, .6); }
.fmt .cant { margin: 6px 0 2px; font-weight: 800; color: var(--yellow); }
.notice.bad { background: var(--surface); color: var(--bad); border: 1.5px solid var(--bad); }
.notice { position: fixed; left: 0; right: 0; bottom: calc(94px + env(safe-area-inset-bottom)); z-index: 10; width: min(360px, calc(100vw - 32px)); margin: 0 auto;
  padding: 12px 16px; border-radius: 18px; background: var(--ink); color: var(--bg); font-weight: 700; text-align: center; box-shadow: var(--shadow); }
.notice a { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
  html:has(.fmt) { scroll-snap-type: y mandatory; scroll-padding-top: var(--barh); }
  main:has(> .fmt) > .fmt { scroll-snap-align: start; }   /* cards only: the note is fixed, and a fixed box would make a snap point of its own */
  main:has(> .fmt) > .fmt:first-child { scroll-margin-top: 30px; }   /* the page can rest at the very top, with its gap under the bar */
  html:has(.fmt) .foot { scroll-snap-align: end; }   /* Privacy and Terms stay reachable under the last card */
}


.bar { position: relative; height: 38px; border-radius: 999px; background: #fffdf9; border: 1px solid var(--line-strong); overflow: hidden; margin: 10px 0 4px; }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--yellow), var(--cyan)); transition: width .25s; }
.bar-text { position: relative; display: block; line-height: 36px; padding: 0 14px; font-size: .9rem; font-weight: 800; color: var(--black); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
label.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--line-strong);
  background: var(--field); font-weight: 700; cursor: pointer; }
label.chip input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
label.chip.on { border-color: var(--black); background: var(--yellow); color: var(--black); box-shadow: 0 8px 16px -10px rgba(185, 122, 0, .9); }
label.chip.on input { accent-color: var(--black); }
label.chip.off { opacity: .6; }

label.field { display: block; font-weight: 700; margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], textarea, select { width: 100%; font: inherit; font-weight: 600; color: var(--ink);
  background: var(--field); border: 1.5px solid var(--line-strong); border-radius: 16px; padding: 12px 16px; min-height: var(--tap); outline: none;
  transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { border-color: var(--ink); box-shadow: 0 0 0 4px #ffc62977; }
::placeholder { color: var(--muted); opacity: .75; }
textarea { min-height: 150px; resize: vertical; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 12px 0; border-radius: 18px; border: 2px solid var(--line-strong); background: var(--field); cursor: pointer; }
.check:has(input:checked) { border-color: var(--ink); background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--field); }
.check input { width: 26px; height: 26px; flex: none; margin: 2px 0 0; accent-color: var(--ink); }
.radios label { display: flex; gap: 10px; align-items: center; min-height: 46px; padding: 6px 4px; font-weight: 600; }
.radios input { width: 22px; height: 22px; accent-color: var(--ink); }
@media (prefers-color-scheme: dark) { label.chip input, .check input, .radios input { accent-color: var(--yellow); } }

.result { padding: 10px 14px; border-radius: 16px; background: var(--field); border: 1px solid var(--line); margin: 8px 0; }
.result b { display: block; }
details { margin: 10px 0; }
summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 800; }
pre { white-space: pre-wrap; font-size: .78rem; background: var(--line); padding: 10px; border-radius: 14px; max-height: 320px; overflow: auto; }

.bubble { padding: 10px 16px; border-radius: 20px; margin: 8px 0; max-width: 88%; }
.bubble.me { margin-left: auto; background: var(--yellow); color: var(--black); border-bottom-right-radius: 6px; font-weight: 600; }
.bubble.them { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bubble.them.warn { background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--surface); }
.bubble p { margin: 6px 0 0; }
.mic-row { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; }
button.mic { width: 84px; min-width: 84px; height: 84px; margin: 0; border-radius: 50%; padding: 8px; font-size: .85rem; line-height: 1.15;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button.mic.on { background: var(--orange); border-color: var(--black); color: var(--black); }
.rec-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.voice-note audio { width: 100%; margin: 4px 0; }

.strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; }
.strip a { flex: 0 0 132px; scroll-snap-align: start; text-decoration: none; color: var(--ink); }
.strip .poster { max-height: none; height: 200px; font-size: .9rem; padding: 10px; margin: 0 0 4px; }
.strip img { width: 100%; height: 200px; object-fit: cover; border-radius: 20px; display: block; margin-bottom: 4px; }

.sheet-wrap { position: fixed; inset: 0; z-index: 20; background: rgba(17, 17, 17, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 560px; background: var(--surface); border-radius: 30px 30px 0 0; padding: 22px 18px calc(20px + env(safe-area-inset-bottom)); }
.toast-box { position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { background: var(--ink); color: var(--bg); font-weight: 700; padding: 12px 20px; border-radius: 18px; max-width: 520px; }
.loading .spin { display: inline-block; width: 14px; height: 14px; border: 3px solid var(--line-strong); border-top-color: var(--ink); border-radius: 50%;
  animation: spin 1s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loading .spin { animation: none; } .bar-fill, button, .button { transition: none; } h1 { animation: none; }
  body::after { animation: none; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the shot list on paper: no ground, no glow, no buttons, plain black headlines, a ruled box per shot */
@media print {
  :root { --bg: #fff; --surface: #fff; --field: #fff; --ink: #000; --muted: #444; --line: #0003; --line-strong: #0006; --warn-soft: #0000; --bad: #8f1d16; --bad-soft: #0000; }
  html { background: #fff; }
  html::before, body::before, body::after { display: none; }
  .top, button, .button, .noprint, .toast-box { display: none !important; }
  body { --pad: 0px; color: #000; }
  h1 { background: none; -webkit-text-fill-color: #000; color: #000; animation: none; }
  .card { break-inside: avoid; background: #fff; border-color: #999; box-shadow: none; }
  .say { background: none; border: 1px solid #999; }
  .tag { background: none; border: 1px solid #000; color: #000; }
  .note, .warnbox, .error { border-color: #666; }
  .fmt { height: auto; background: #fff; }
  .fmt .poster { display: none; }
}
/* a creator's original, in its own platform's player, loaded on tap (embed.js) */
.player { width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 18px; background: #000; display: block; }

/* My reels (view-reels.js): the poster at the left, the words at the right, two small links under */
.reel-item { display: flex; gap: 14px; align-items: flex-start; color: var(--ink); text-decoration: none; font-weight: 500; }
.reel-item .thumb { flex: none; width: 76px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: var(--line); }
.reel-item .thumb.blank { border: 1px solid var(--line); }
.reel-item .words { flex: 1; min-width: 0; }
.reel-item h2 { font-size: 1.1rem; margin: 0 0 2px; }
.reel-item .go { font-weight: 800; margin-top: 8px; }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.links .button { flex: 1 1 140px; width: auto; min-height: 46px; margin: 0; padding: 8px 14px; font-size: .92rem; background: transparent; color: var(--ink);
  border-color: var(--line-strong); box-shadow: none; }

/* the shell's footer (app.js) and the Privacy and Terms pages, which use this stylesheet on their own */
.foot { margin: 28px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: .88rem; }
.foot a { display: inline-block; padding: 12px 6px; }
.doc h2 { margin-top: 26px; }
.doc ul { padding-left: 22px; margin: 6px 0; }
.doc li { margin: 4px 0; }

/* Plans (view-plan.js): the monthly / yearly switch, the price big */
.seg { margin: 14px 0 4px; }
.seg button { margin: 0; }
.plan-card .price { font-size: 1.05rem; margin: 2px 0 6px; }
.plan-card .price b { font-size: 2.1rem; font-weight: 900; letter-spacing: -.04em; }

/* film it in the app (view-film.js; Grady, 2026-10-02: "it pulls up the camera and there's like an outline of where the client's head
   should be ... the prompt would be on the screen underneath the outline"). A full-screen dark stage above the page: the camera on
   top with the white head outline over it, the prompt on a cream card under it, one big Record button. Same tokens as the rest:
   cream, ink, yellow for the thing you press, cyan for the quiet ones. The stage is always dark, whatever the phone's theme. */
body.filming { overflow: hidden; }
body.filming .foot { display: none; }
.film { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; background: #0d0d0f; color: var(--cream);
  padding-top: env(safe-area-inset-top); }
.film-col { width: 100%; max-width: 480px; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.film-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px 8px; }
.film-count { font-weight: 900; font-size: 1.15rem; letter-spacing: -.03em; }
.film-role { color: #fbf4eab3; font-weight: 600; font-size: .95rem; }
.film a.film-what.gone { visibility: hidden; }   /* gone from Record on, but its row stays, so the preview does not jump */
.film a.film-what { display: inline-block; padding: 8px 0 4px; color: #fbf4eab3; font-size: .85rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.film .film-x { width: auto; min-height: 44px; margin: 0; padding: 6px 16px; background: transparent; color: var(--cream); border-color: #fbf4ea55; box-shadow: none; }
.film-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.film-view { position: relative; flex: 1 1 0; min-height: 150px; margin: 0 10px; border-radius: 22px; overflow: hidden; background: #000; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
video.film-video[controls] { object-fit: contain; }
.film-video.mirror { transform: scaleX(-1); }
/* the head guide is drawn at the preview's full height (each file is one 460 x 400 box at twice the size with the head 60% of it, scripts/outlines_3d.py), centred;
   a preview narrower than the box crops the shoulders, which is how a head-and-shoulders shape should run off the frame */
.film-outline { position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; transform: translateX(-50%); pointer-events: none; }
.film-outline.flip { transform: translateX(-50%) scaleX(-1); }
.film .film-flip { position: absolute; top: 10px; right: 10px; width: auto; min-height: 40px; margin: 0; padding: 4px 16px; font-size: .9rem; background: #0d0d0fb3;
  color: var(--cream); border-color: #fbf4ea66; box-shadow: none; }
.film-badge { position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px; background: #0d0d0fcc; color: var(--cream); font-weight: 800;
  font-variant-numeric: tabular-nums; }
.film-panel { flex: 0 1 auto; min-height: 0; padding: 8px 10px calc(12px + env(safe-area-inset-bottom)); overflow-y: auto; }
.film-prompt { background: var(--cream); color: var(--black); border-radius: 20px; padding: 12px 16px; margin: 0 0 6px; }
.film-prompt p { margin: 3px 0; }
.film-p0 { font-size: 1.55rem; font-weight: 900; line-height: 1.1; letter-spacing: -.035em; }
.film-p1 { font-size: 1.3rem; font-weight: 900; line-height: 1.12; letter-spacing: -.03em; }
.film-p2 { font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.film-p3 { font-size: .92rem; font-weight: 500; color: #4a4744; }
.film-panel > .film-consent { margin: 0 4px 6px; font-size: .88rem; font-weight: 600; line-height: 1.3; color: var(--cream); }
.film-consent b { color: var(--orange); font-weight: 900; }
.film-panel > .film-p2, .film-panel > .error, .film-panel > .kv { color: var(--cream); }
.film-panel > .error { color: var(--bad); }
.film-who { font-size: .85rem; font-weight: 700; color: #4a4744; }
.film-who .chip { display: inline-block; padding: 2px 11px; margin-right: 4px; border-radius: 999px; font-weight: 800; color: var(--black); background: var(--yellow); }
.film-beat.client .film-who .chip { background: var(--cyan); }
.film-actions { position: sticky; bottom: 0; background: #0d0d0f; padding-top: 2px; }
.film-panel > .film-p2 { font-size: .95rem; }
.film-aim { margin: 4px 2px; font-size: .85rem; color: #fbf4eab3; text-align: center; }
.film-rec { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; }
.film .film-recbtn { width: 78px; height: 78px; min-height: 78px; margin: 0; padding: 0; border-radius: 50%; background: transparent; border: 5px solid var(--cream); box-shadow: none; }
.film-recbtn .dot { width: 54px; height: 54px; border-radius: 50%; background: var(--orange); transition: border-radius .15s, transform .15s; }
.film-recbtn.on .dot { width: 30px; height: 30px; border-radius: 8px; }
.film-reclabel { font-weight: 800; font-size: .9rem; }
.film .film-next { min-height: 64px; font-size: 1.2rem; margin-top: 8px; }
.film .row > button { margin-top: 8px; }
.film .ghost { color: var(--cream); border-color: #fbf4ea55; }
.film .warnbox, .film .error { margin: 6px 0; }
.film .bar { margin: 8px 0; }
.film .kv { color: var(--cream); }
.film-end { padding-top: 16px; }
.film-rotate { position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; text-align: center; padding: 24px;
  background: #0d0d0f; font-size: 1.4rem; font-weight: 900; letter-spacing: -.03em; }
@media (orientation: landscape) and (max-height: 520px) { .film-rotate { display: flex; } }
@media (prefers-reduced-motion: no-preference) { .film-badge { animation: film-pulse 1.6s ease-in-out infinite; } }
@keyframes film-pulse { 50% { opacity: .6; } }