/* Naghali portal: the storyteller look.
   Naqqali was performed in coffeehouses in front of a painted curtain (pardeh), and Persian books framed their text in gold
   rules (jadval). So: parchment paper, lacquer red, gold ornament, turquoise and lapis from the tilework, Lalezar (a Persian
   display face drawn from the cinema posters of Tehran's Lalezar Street) for headings, Markazi Text (a book serif) for the
   narration, Vazirmatn for the interface. The top bar is plain deep navy (the owner's choice, 2026-10-15). Light only.
   Logical properties (inline-start/end) so the same rules serve Persian (rtl) and English (ltr). */
:root {
  /* paper and ink */
  --bg: #f3e9d2; --card: #fbf6ea; --soft: #f7efdc; --paper-deep: #ead9b8; --line: #dcc9a2; --line-2: #e9dcc0;
  --ink: #2b1a12; --text: #46342a; --muted: #6b5646; --muted-2: #5e4b3d; --gray-bg: #ece2cc;
  /* lacquer red, gold, turquoise, lapis; the -text shades carry text (all ≥ 4.5:1), the bright ones only fill and ornament */
  --red: #9c2a22; --red-2: #84211b; --red-deep: #5e1712; --red-bg: #f4dcd3; --red-text: #8f241d;
  --gold: #b8892b; --gold-light: #d6ae55; --gold-pale: #e9c97a; --gold-bg: #f5e6bf; --gold-text: #6b4c0e;
  --turq: #2a8c84; --turq-bg: #d8ece6; --turq-text: #155f59;
  --lapis: #2f5596; --lapis-bg: #dde3f0; --lapis-text: #233f70;
  --night: #22140e; --night-2: #3a2216; --on-night: #f2e4c4;
  --navy: #0f1430; --navy-2: #1c2457;           /* the top bar */
  /* the old names the templates use for chips, banners and notices map onto this palette */
  --primary: var(--red); --primary-hover: var(--red-2);
  --coral: var(--red); --coral-text: var(--red-text); --coral-bg: var(--red-bg);
  --teal: var(--turq); --teal-text: var(--turq-text); --teal-ink: var(--turq-text); --teal-bg: var(--turq-bg);
  --indigo: var(--lapis); --indigo-ink: var(--lapis-text); --indigo-bg: var(--lapis-bg);
  --amber: var(--gold); --amber-ink: var(--gold-text); --amber-bg: var(--gold-bg);
  --fa: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  --display: 'Lalezar', 'Vazirmatn', Tahoma, sans-serif;
  --book: 'Markazi Text', 'Vazirmatn', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --r: 12px;
  --shadow: 0 1px 2px rgba(43,26,18,.08), 0 12px 32px -8px rgba(43,26,18,.18);
  /* surfaces: a warm hairline and a soft shadow; framed surfaces add the gold double rule (--frame) */
  --ring: 0 0 0 1px rgba(150,110,50,.22), 0 1px 2px rgba(43,26,18,.06), 0 3px 10px -4px rgba(43,26,18,.12);
  --ring-hover: 0 0 0 1px rgba(150,110,50,.4), 0 2px 4px rgba(43,26,18,.08), 0 14px 30px -10px rgba(43,26,18,.28);
  --frame: inset 0 0 0 1px rgba(184,137,43,.55), inset 0 0 0 5px var(--card), inset 0 0 0 6px rgba(184,137,43,.35);
  /* motion: one set of durations and curves. User-started motion stays under 300 ms; linear only for progress. */
  --t-fast: 150ms; --t-base: 200ms; --t-enter: 250ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --press: .96;
  --z-bar: 20; --z-menu: 30;
  /* ornaments, drawn once as SVG */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='14' viewBox='0 0 132 14'%3E%3Cg fill='%23b8892b'%3E%3Crect y='6.5' width='52' height='1'/%3E%3Crect x='80' y='6.5' width='52' height='1'/%3E%3Cpath d='M66 0l2.2 3.6 4.1-1.1-1.1 4.1L75 7l-3.8 1.4 1.1 4.1-4.1-1.1L66 14l-2.2-3.6-4.1 1.1 1.1-4.1L57 7l3.8-1.4-1.1-4.1 4.1 1.1z'/%3E%3Ccircle cx='54' cy='7' r='1.6'/%3E%3Ccircle cx='78' cy='7' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fa); color: var(--text); line-height: 1.75; font-size: 15px; -webkit-font-smoothing: antialiased;
  background: var(--grain), radial-gradient(ellipse 80% 60% at 50% 0%, #f8f0dc 0%, transparent 70%), var(--bg); }
h1, h2, h3 { color: var(--ink); line-height: 1.35; margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
h3 { font-weight: 800; }
p { margin: 0; }
p, li, small, .hint, .fine, .note-box, .banner, .notice { text-wrap: pretty; }
.i { flex: none; display: inline-block; vertical-align: -0.2em; }
[dir="rtl"] .i.flip { transform: scaleX(-1); }
a { color: inherit; text-decoration: none; }
a.u, .fine a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(184,137,43,.7); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid rgba(47,85,150,.5); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(214,174,85,.45); }
.mono { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; }
.num { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
.muted { color: var(--muted); }
.fine { font-size: 13px; color: var(--muted); }
.scroll-x { overflow-x: auto; }
.screen { padding-block: 34px 80px; }

/* ---------- buttons, chips, cards ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; padding: 10px 18px; font: 700 14.5px var(--fa); cursor: pointer; border: 1.5px solid transparent; white-space: nowrap;
  transition-property: background-color, border-color, box-shadow, opacity, transform; transition-duration: var(--t-fast); transition-timing-function: var(--ease-out); }
.btn:active:not([disabled]), .gbtn:active { transform: scale(var(--press)); }
.btn.is-busy { position: relative; color: transparent !important; }
.btn.is-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn-ghost.is-busy::after { border-color: rgba(43,26,18,.15); border-top-color: var(--ink); }
.btn.is-busy[disabled] { opacity: 1; }
/* the lacquer button: deep red with a fine gold inner line, like a painted panel */
.btn-primary { background: linear-gradient(180deg, #a83027, var(--red)); color: #fff; box-shadow: inset 0 0 0 1px rgba(233,201,122,.45), 0 1px 2px rgba(94,23,18,.35), 0 6px 14px -6px rgba(94,23,18,.55); }
.btn-primary:hover { background: linear-gradient(180deg, var(--red), var(--red-2)); }
.btn-dark { background: var(--night); color: var(--on-night); box-shadow: inset 0 0 0 1px rgba(233,201,122,.35); } .btn-dark:hover { background: var(--night-2); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--gold); background: #fffaf0; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.htmx-request { opacity: .55; cursor: not-allowed; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
  transition-property: background-color, color, transform; transition-duration: var(--t-fast); transition-timing-function: var(--ease-out); }
.icon-btn:hover { background: rgba(43,26,18,.07); color: var(--ink); }
.icon-btn:active { transform: scale(var(--press)); }
.hit { position: relative; }
.hit::after { content: ''; position: absolute; inset: -6px; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; }
.danger { color: var(--red-text); }
/* chips are small cartouches: a diamond marker instead of a dot */
.chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 2px 11px; font-size: 12.5px; font-weight: 700; line-height: 1.6; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(43,26,18,.08); }
.chip .dot { width: 6px; height: 6px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.chip.teal { background: var(--turq-bg); color: var(--turq-text); } .chip.coral { background: var(--red-bg); color: var(--red-text); }
.chip.gray { background: var(--gray-bg); color: var(--muted-2); } .chip.indigo { background: var(--lapis-bg); color: var(--lapis-text); }
.chip.amber { background: var(--gold-bg); color: var(--gold-text); }
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--ring); }
.framed { box-shadow: var(--frame), var(--ring); }
/* page titles: Lalezar, with a gold rule and star beneath (the ornament under a chapter heading) */
.page-h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 26px; }
.page-h h1, .v-head h1 { font-size: clamp(30px, 4vw, 42px); }
.page-h h1::after, .v-head h1::after { content: ''; display: block; width: 132px; height: 14px; margin-top: 8px; background: var(--rule) no-repeat; }
.page-h p { margin-top: 6px; color: var(--muted); }
.notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 16px; border-radius: var(--r); margin-bottom: 20px; font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(43,26,18,.07);
  transition-property: opacity, transform; transition-duration: var(--t-fast); transition-timing-function: var(--ease-in); }
.notice.htmx-swapping, .leaving { opacity: 0; transform: translateY(-4px); }
.src { transition-property: opacity, transform; transition-duration: var(--t-fast); transition-timing-function: var(--ease-in); }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
.v-main.enter > * { animation: enter var(--t-enter) var(--ease-out) both; }
.v-main.enter > :nth-child(2) { animation-delay: 50ms; }
.v-main.enter > :nth-child(n+3) { animation-delay: 100ms; }
.vcard.enter { animation: enter var(--t-enter) var(--ease-out) both; }
.notice b { color: var(--ink); }
.notice.teal { background: var(--turq-bg); color: var(--turq-text); }
.notice.amber { background: var(--gold-bg); color: var(--gold-text); }
.notice.coral { background: var(--red-bg); color: var(--red-text); }
.notice.indigo { background: var(--lapis-bg); color: var(--lapis-text); }
.notice ul { margin: 4px 0 0; padding-inline-start: 20px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.logo img { width: 34px; height: 34px; display: block; }
.logo b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; }
.logo span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .12em; }

/* ---------- test strip and the top bar: plain deep navy with a gold double rule (no pattern, the owner's choice) ---------- */
.testbar { background: #0a0d22; color: #c9cde6; font-size: 12.5px; }
.testbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-block: 6px; }
.testbar b { color: var(--gold-pale); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin-inline-end: 8px; }
.testbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-bar); color: var(--on-night);
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  box-shadow: 0 1px 0 var(--gold), 0 4px 0 -1px var(--navy), 0 4px 0 0 rgba(184,137,43,.55), 0 10px 24px -12px rgba(0,0,0,.5); }
.topbar .wrap { position: relative; display: flex; align-items: center; gap: 22px; padding-block: 11px; }
.topbar .logo { color: var(--on-night); }
.topbar .logo b { color: var(--gold-pale); }
.tnav { display: flex; gap: 2px; flex: 1; min-width: 0; }
.tnav a { position: relative; padding: 7px 13px; border-radius: 8px; font-weight: 600; font-size: 14.5px; color: #dfe2f2; white-space: nowrap; }
.tnav a:hover { color: #fff; background: rgba(242,228,196,.08); }
.tnav a.on { color: #fff; }
.tnav a.on::after { content: ''; position: absolute; inset-inline: 13px; bottom: 1px; height: 2px; background: var(--gold-light); border-radius: 2px; }
.tright { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.credits-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 6px; border-radius: 999px; background: rgba(242,228,196,.08); box-shadow: inset 0 0 0 1px rgba(214,174,85,.5); font-weight: 700; color: var(--on-night); font-size: 14px; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-out); }
.credits-pill i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f3d98f, var(--gold) 70%); display: grid; place-items: center; color: var(--navy); font-style: normal; }
.credits-pill:hover { background: rgba(242,228,196,.16); }
.lang-switch { font-weight: 600; font-size: 13.5px; color: #dfe2f2; padding: 6px 10px; border-radius: 8px; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.lang-switch:hover { color: #fff; background: rgba(242,228,196,.08); }
.signin-top .lang-switch { color: var(--on-night); }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gold-bg); color: var(--gold-text); display: grid; place-items: center; font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--gold-light); }
.menu-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); min-width: 230px; background: var(--card); color: var(--text); border-radius: 14px; box-shadow: var(--frame), var(--shadow); padding: 8px; display: grid; gap: 2px; z-index: var(--z-menu); }
.menu-pop .who { padding: 6px 10px 8px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.menu-pop .who b { display: block; color: var(--ink); font-size: 14px; }
.menu-pop a, .menu-pop button { display: block; width: 100%; text-align: start; padding: 7px 10px; border-radius: 6px; background: none; border: 0; cursor: pointer; font-weight: 600; font-size: 14px; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--gray-bg); }
.mobile-nav { display: none; }

/* ---------- sign in: a storybook cover on plain navy (no patterns: the owner's rule) ---------- */
.signin { position: relative; min-height: calc(100vh - 40px); display: grid; place-items: center; padding: 48px 20px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--navy-2), var(--navy)); }
.signin::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 45% 55% at 50% 45%, rgba(233,201,122,.16), transparent 70%); }
.signin .grid { display: none; }
.signin-top { position: absolute; top: 14px; inset-inline-end: 20px; }
.signin-card { position: relative; width: min(460px, 100%); background: var(--grain), var(--card); border-radius: 18px; padding: 38px 32px 26px; text-align: center; display: grid; gap: 16px;
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 7px var(--card), inset 0 0 0 8px rgba(184,137,43,.6), 0 30px 60px -20px rgba(0,0,0,.6); }
.signin-card::before { content: ''; justify-self: center; width: 44px; height: 44px; margin-bottom: -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b8892b' d='M12 1l2.8 4.6 5.3-1.4-1.4 5.3L23 12l-4.3 2.5 1.4 5.3-5.3-1.4L12 23l-2.8-4.6-5.3 1.4 1.4-5.3L1 12l4.3-2.5-1.4-5.3 5.3 1.4z'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%239c2a22'/%3E%3C/svg%3E") center / contain no-repeat; }
.signin-card .logo { justify-self: center; }
.signin-card .logo b { font-size: 30px; color: var(--red); }
.signin-card h1 { font-size: 36px; }
.signin-card h1 .mk { color: var(--red); }
.signin-card h1::after { content: ''; display: block; width: 132px; height: 14px; margin: 10px auto 0; background: var(--rule) no-repeat; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.three div { background: var(--soft); border-radius: 10px; padding: 9px 6px; font-size: 12.5px; color: var(--muted); line-height: 1.5; box-shadow: inset 0 0 0 1px var(--line-2); }
.three b { display: block; color: var(--ink); font-size: 13.5px; }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font: 700 16px var(--fa); color: var(--ink); cursor: pointer;
  transition-property: border-color, box-shadow, transform; transition-duration: var(--t-fast); transition-timing-function: var(--ease-out); }
.gbtn:hover { border-color: var(--gold); box-shadow: 0 6px 16px -10px rgba(43,26,18,.45); }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); }
.email-form { display: grid; gap: 10px; text-align: start; }
.email-form summary { cursor: pointer; text-align: center; list-style: none; }
.email-form summary::-webkit-details-marker { display: none; }
.gift { display: flex; gap: 14px; align-items: center; text-align: start; background: var(--gold-bg); border-radius: 10px; padding: 12px 14px; color: var(--gold-text); font-size: 14px; box-shadow: inset 0 0 0 1px rgba(184,137,43,.35); }
.gift b { color: var(--ink); }
.gift .big { font-family: var(--display); font-size: 34px; color: var(--red); line-height: 1; }

/* ---------- form controls ---------- */
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field > .lbl { font-weight: 700; color: var(--ink); font-size: 14px; }
.hint { font-size: 12.5px; color: var(--muted); }
.err { font-size: 13px; color: var(--red-text); font-weight: 600; }
textarea, input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="number"], select {
  width: 100%; font: 500 15px/1.8 var(--fa); color: var(--ink); background: #fffcf3; border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 12px; outline: none;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
textarea:focus, input:focus, select:focus { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px rgba(214,174,85,.22); }
textarea { resize: vertical; min-height: 96px; }
textarea[aria-invalid="true"], input[aria-invalid="true"] { border-color: var(--red); }
input.url, input[type="email"] { font-family: var(--mono); font-size: 13.5px; direction: ltr; text-align: start; }
[dir="rtl"] input.url, [dir="rtl"] input[type="email"] { text-align: right; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--gray-bg); border-radius: 12px; width: fit-content; max-width: 100%; box-shadow: inset 0 1px 2px rgba(43,26,18,.08); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 6px 13px; min-height: 32px; border-radius: 8px; font-weight: 600; font-size: 13.5px; color: var(--muted-2); white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.seg label:hover input:not(:checked) + span { color: var(--ink); }
.seg input:checked + span { background: var(--gold); color: var(--ink); box-shadow: 0 1px 2px rgba(43,26,18,.2); }
.seg input:focus-visible + span { outline: 3px solid rgba(47,85,150,.5); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; color: var(--ink); font-weight: 600; }
.check input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--red); flex: none; }
.check small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }

/* ---------- my videos ---------- */
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vcard { display: flex; flex-direction: column; overflow: hidden; padding: 6px; transition-property: box-shadow, transform; transition-duration: var(--t-base); transition-timing-function: var(--ease-out); }
.vcard:hover { box-shadow: var(--ring-hover); }
.vcard:active { transform: scale(.98); }
/* the picture sits in a small gold-ruled frame inside the card (outer radius 12 = inner 6 + padding 6) */
.vcard .th { position: relative; aspect-ratio: 16/9; background: var(--night); overflow: hidden; border-radius: 6px; }
.vcard .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard .th::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(214,174,85,.55), inset 0 0 0 4px rgba(34,20,14,.25); }
.player video { outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
.vcard .th .chip { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 1; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.vcard .th .dur { position: absolute; bottom: 9px; inset-inline-end: 9px; z-index: 1; background: rgba(34,20,14,.82); color: var(--on-night); font-family: var(--mono); font-size: 11.5px; padding: 1px 7px; border-radius: 5px; }
/* a video that is not ready yet shows the painted curtain, with what is happening written on it */
.th-ph { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 7px; color: #f0dcc0; font-size: 13px; padding: 16px; text-align: center;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 5px, transparent 5px 18px, rgba(255,255,255,.05) 18px 21px, transparent 21px 30px),
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(233,201,122,.22), transparent 70%),
    linear-gradient(180deg, #8b261f, var(--red-deep)); }
.th-ph b { font-family: var(--display); font-weight: 400; color: #fff4dc; font-size: 20px; line-height: 1.3; }
.th-ph .bar { width: 70%; background: rgba(255,244,220,.2); }
.bar { height: 6px; border-radius: 99px; background: var(--gray-bg); overflow: hidden; box-shadow: inset 0 1px 1px rgba(43,26,18,.12); }
/* progress is the one place for linear motion; the bar keeps its id between polls so it glides to each new value */
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-light), var(--red)); border-radius: 99px; transition: width 2s linear; }
#cards .bar i { transition-duration: 3s; }
[dir="rtl"] .bar i { background: linear-gradient(270deg, var(--gold-light), var(--red)); }
.vcard .meta { padding: 12px 10px 8px; display: grid; gap: 8px; flex: 1; }
.vcard .meta b { color: var(--ink); font-size: 16px; line-height: 1.55; }
.vcard .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.vcard .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.plus { color: var(--turq-text) !important; } .minus { color: var(--red-text) !important; }
.empty { padding: 56px 24px; text-align: center; display: grid; gap: 12px; justify-items: center; box-shadow: var(--frame), var(--ring); }
.empty h2 { font-size: 28px; }
.empty h2::after { content: ''; display: block; width: 132px; height: 14px; margin: 8px auto 0; background: var(--rule) no-repeat; }
.empty p { max-width: 46ch; color: var(--muted); }

/* ---------- new video ---------- */
.new-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; }
.step-h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.step-h .n { display: grid; place-items: center; width: 30px; height: 30px; flex: none; font-family: var(--display); font-size: 16px; letter-spacing: 0; color: var(--gold-pale); background: var(--night); transform: rotate(45deg); border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(214,174,85,.6); }
.step-h .n > span { transform: rotate(-45deg); line-height: 1; }
.step-h h2 { font-size: 24px; }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 26px; border: 0; padding: 0; }
.mode { position: relative; display: grid; gap: 4px; align-content: start; padding: 18px 16px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card); cursor: pointer;
  transition-property: border-color, box-shadow, transform; transition-duration: var(--t-fast); transition-timing-function: var(--ease-out); }
.mode:hover { border-color: var(--gold-light); }
.mode:active { transform: scale(.98); }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode:has(input:checked) { border-color: var(--gold); box-shadow: inset 0 0 0 4px var(--gold-bg), inset 0 0 0 5px rgba(184,137,43,.7), 0 10px 24px -14px rgba(94,23,18,.45); background: var(--gold-bg); }
.mode:has(input:focus-visible) { outline: 3px solid rgba(47,85,150,.5); outline-offset: 2px; }
.mode .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 8px; }
.mode b { font-family: var(--display); font-weight: 400; color: var(--ink); font-size: 20px; }
.mode small { color: var(--muted); font-size: 13px; line-height: 1.6; }
.mode .tick { position: absolute; top: 14px; inset-inline-end: 14px; width: 18px; height: 18px; border-radius: 3px; transform: rotate(45deg); border: 1.5px solid var(--line); transition: border-width var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.mode:has(input:checked) .tick { border-color: var(--red); background: var(--red); box-shadow: inset 0 0 0 3px var(--card); }
.ic.coral { background: var(--red-bg); color: var(--red-text); } .ic.teal { background: var(--turq-bg); color: var(--turq-text); } .ic.indigo { background: var(--lapis-bg); color: var(--lapis-text); } .ic.gold { background: var(--gold-bg); color: var(--gold-text); }
.panel { padding: 20px; display: grid; gap: 16px; margin-bottom: 26px; }
[data-panel], [data-for] { display: none !important; }
#new-form:has([name="mode"][value="topic"]:checked) [data-panel~="topic"],
#new-form:has([name="mode"][value="sources"]:checked) [data-panel~="sources"],
#new-form:has([name="mode"][value="script"]:checked) [data-panel~="script"],
#new-form:has([name="mode"][value="article"]:checked) [data-panel~="article"] { display: grid !important; }
#new-form:has([name="mode"][value="topic"]:checked) [data-for~="topic"],
#new-form:has([name="mode"][value="sources"]:checked) [data-for~="sources"],
#new-form:has([name="mode"][value="script"]:checked) [data-for~="script"],
#new-form:has([name="mode"][value="article"]:checked) [data-for~="article"] { display: revert !important; }
.src-list { display: grid; gap: 8px; }
.src-list:empty::before { content: attr(data-empty); color: var(--muted); font-size: 13.5px; padding: 12px; border: 1.5px dashed var(--line); border-radius: 10px; text-align: center; }
.src { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #fffcf3; box-shadow: inset 0 0 0 1px var(--line-2); }
.src .ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; }
.src .ic.yt { background: var(--red-bg); color: var(--red-text); } .src .ic.web { background: var(--lapis-bg); color: var(--lapis-text); } .src .ic.txt { background: var(--gold-bg); color: var(--gold-text); }
.src .ic.note { background: var(--gray-bg); color: var(--muted-2); }
.src .t { min-width: 0; }
.src .t b { display: block; color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src .t small { display: block; color: var(--muted); font-size: 12px; font-family: var(--mono); direction: ltr; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[dir="rtl"] .src .t small { text-align: right; }
.add-row { display: flex; gap: 8px; }
.add-row input { flex: 1; min-width: 0; }
.note-box { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; padding: 11px 13px; border-radius: 10px; line-height: 1.65; }
.note-box.amber { background: var(--gold-bg); color: var(--gold-text); }
.note-box.teal { background: var(--turq-bg); color: var(--turq-text); }
.note-box b { color: var(--ink); }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
/* the summary is the bill of the story: framed in gold, with the price set large in Lalezar */
.summary { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); padding: 22px; display: grid; gap: 14px; box-shadow: var(--frame), var(--shadow); }
.summary h3 { font-family: var(--display); font-weight: 400; font-size: 22px; }
.sum-lines { display: grid; gap: 7px; font-size: 13.5px; margin: 0; }
.sum-lines div { display: flex; justify-content: space-between; gap: 10px; }
.sum-lines dt { color: var(--muted); } .sum-lines dd { margin: 0; color: var(--ink); font-weight: 600; text-align: end; }
.cost { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.cost .big { font-family: var(--display); font-size: 46px; color: var(--red); line-height: 1; }
.after { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.after b { color: var(--ink); }
.after b.short { color: var(--red-text); }

/* ---------- one video ---------- */
.v-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.crumb { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.crumb a:hover { color: var(--red-text); }
.v-head h1 { font-size: clamp(28px, 3.6vw, 40px); }
.v-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.v-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 26px; align-items: start; }
.v-main { display: grid; gap: 18px; min-width: 0; }
.banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(43,26,18,.07); }
.banner.amber { background: var(--gold-bg); color: var(--gold-text); }
.banner.indigo { background: var(--lapis-bg); color: var(--lapis-text); }
.banner.teal { background: var(--turq-bg); color: var(--turq-text); }
.banner.coral { background: var(--red-bg); color: var(--red-text); }
.banner.gray { background: var(--gray-bg); color: var(--muted-2); }
.banner b { font-family: var(--display); font-weight: 400; color: var(--ink); display: block; font-size: 21px; line-height: 1.4; }
/* the script reads like a page of a story: framed, in a book serif, each part numbered in the margin */
.v-main > .card:has(.beat) { box-shadow: var(--frame), var(--ring); }
.script-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 22px 12px; border-bottom: 1px solid var(--line-2); }
.script-h b { font-family: var(--display); font-weight: 400; color: var(--ink); font-size: 22px; }
.beat { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--line-2); }
.beat:last-of-type { border-bottom: 0; }
.beat .bn { font-family: var(--display); font-size: 16px; color: var(--gold); padding-top: 9px; text-align: center; }
.beat p { font-family: var(--book); color: var(--ink); font-size: 21px; line-height: 1.85; padding: 4px 0; }
.beat textarea { font-family: var(--book); font-size: 21px; line-height: 1.85; min-height: 0; resize: none; field-sizing: content; background: transparent; border-color: transparent; padding: 4px 8px; margin-inline: -8px; width: calc(100% + 16px); box-shadow: none; }
.beat textarea:hover { background: #fffaf0; border-color: var(--line-2); }
.beat textarea:focus { background: #fffbea; border-color: var(--gold-light); box-shadow: 0 0 0 4px rgba(214,174,85,.2); }
.cl { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.cl a { display: inline-grid; place-items: center; min-width: 26px; height: 22px; font-family: var(--mono); font-size: 11.5px; color: var(--turq-text); box-shadow: inset 0 0 0 1px rgba(21,95,89,.3); border-radius: 6px; padding: 0 6px;
  transition: background-color var(--t-fast) var(--ease-out); }
.cl a:hover { background: var(--turq-bg); }
.cl a.hit::after { inset: -11px -3px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--line); background: #f8efdb; border-radius: 0 0 var(--r) var(--r); }
.actions form { display: contents; }
.actions .fine { margin-inline-start: auto; }
.saved-flash { color: var(--turq-text); font-weight: 700; }
.side { display: grid; gap: 18px; min-width: 0; }
.side .card { padding: 18px; }
.side h3, .side-h { font-family: var(--display); font-weight: 400; font-size: 19px; margin-bottom: 12px; }
/* the timeline is a gold thread with diamond knots */
.tl { list-style: none; margin: 0; padding: 0; display: grid; }
.tl li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; position: relative; padding-bottom: 14px; align-items: start; }
.tl li::before { content: ''; position: absolute; inset-inline-start: 10px; top: 24px; bottom: 2px; width: 2px; background: linear-gradient(var(--gold-light), rgba(214,174,85,.35)); }
.tl li:last-child::before { display: none; }
.tl .d { width: 22px; height: 22px; border-radius: 4px; transform: rotate(45deg) scale(.86); display: grid; place-items: center; background: var(--gray-bg); color: var(--muted); box-shadow: inset 0 0 0 1px rgba(43,26,18,.1); }
.tl .d .i { transform: rotate(-45deg); }
.tl .done .d { background: var(--turq-bg); color: var(--turq-text); }
.tl .note .d { background: var(--gray-bg); color: var(--muted); }
.tl .wait .d { background: var(--gold); color: #fff; }
.tl .block .d { background: var(--red); color: #fff; }
.tl .run .d { background: var(--night); color: var(--gold-pale); }
.tl b { display: block; color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.tl small { display: block; color: var(--muted); font-size: 12px; line-height: 1.55; }
.tl .meta { display: grid; justify-items: end; gap: 4px; text-align: end; white-space: nowrap; }
.tl .meta b { font-size: 12px; font-weight: 700; line-height: 1.4; }
.tl .tok { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink); background: var(--gold-bg); border-radius: 999px; padding: 2px 8px; line-height: 1.6; }
.flags { display: grid; gap: 10px; }
.flags ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.flags li { display: grid; gap: 4px; }
.flags q { margin: 0; color: var(--ink); font-size: 13.5px; }
.flags small { color: var(--muted); }
.flag-mark { color: var(--gold-text); background: var(--gold-bg); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.tl .todo b { color: var(--muted); font-weight: 600; }
.tl .bar { margin-top: 6px; }
.srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.srcs li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; scroll-margin-top: 100px; border-radius: 8px; transition: background-color var(--t-base) var(--ease-out); }
.srcs li:target { background: var(--gold-bg); }
.srcs .k { font-family: var(--mono); font-size: 11px; color: var(--turq-text); background: var(--turq-bg); border-radius: 5px; text-align: center; height: 20px; line-height: 20px; }
.srcs li > div { min-width: 0; }
.srcs a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.srcs a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.srcs small { display: block; color: var(--muted); font-family: var(--mono); font-size: 11px; direction: ltr; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[dir="rtl"] .srcs small { text-align: right; }
.kv { margin: 0; display: grid; gap: 7px; font-size: 13.5px; }
.kv div { display: flex; justify-content: space-between; gap: 8px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; color: var(--ink); font-weight: 700; }
.stages { list-style: none; margin: 0; padding: 10px; display: grid; gap: 2px; }
.stages .stage-end { display: flex; align-items: center; gap: 8px; }
.stages li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 10px; border-radius: 9px; }
.stages li.run { background: #f8efdb; box-shadow: inset 0 0 0 1px var(--line-2); }
.stages .n { width: 34px; height: 34px; border-radius: 6px; transform: rotate(45deg) scale(.82); display: grid; place-items: center; font-family: var(--display); font-size: 16px; background: var(--gray-bg); color: var(--muted); }
.stages .n > span { transform: rotate(-45deg); line-height: 1; display: grid; place-items: center; }
.stages .done .n { background: var(--turq-bg); color: var(--turq-text); }
.stages .run .n { background: var(--night); color: var(--gold-pale); }
.stages .todo { opacity: .55; }
.stages b { display: block; color: var(--ink); font-size: 15px; }
.stages small { color: var(--muted); font-size: 12.5px; }
.stages .bar { width: min(240px, 100%); margin-top: 7px; }
.spin { width: 16px; height: 16px; border: 2px solid var(--red-bg); border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
/* the screen: the finished film in a dark lacquer frame with a gold rule */
.player { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 8px; padding: 10px; align-items: start; margin: 8px; border-radius: 8px;
  background: var(--night); box-shadow: inset 0 0 0 1px rgba(214,174,85,.55); }
.player.one { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.player video { display: block; width: 100%; border-radius: 4px; background: #000; }
.player .land { aspect-ratio: 16/9; }
.player .vert { aspect-ratio: 9/16; }
.player.one .vert { width: min(320px, 100%); }
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 6px 14px 14px; }
.dl a { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #fffcf3; box-shadow: inset 0 0 0 1px var(--line-2); }
.dl a:hover { box-shadow: inset 0 0 0 1px var(--gold); background: #fffaf0; }
.dl .ic { width: 42px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-size: 10.5px; font-weight: 600; }
.dl b { display: block; color: var(--ink); font-size: 14px; }
.dl small { color: var(--muted); font-size: 12px; }
.fixbox { padding: 14px 18px; border-top: 1px solid var(--line-2); display: grid; gap: 10px; }
.fixbox summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.inline-form { display: grid; gap: 10px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- account ---------- */
.acc-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 26px; align-items: start; }
.acc-side { display: grid; gap: 18px; }
/* the purse: dark lacquer, gold frame, the balance in Lalezar */
.balance { padding: 24px; color: #e3d2ae; position: relative; overflow: hidden; display: grid; gap: 4px;
  background: linear-gradient(160deg, var(--night-2), var(--night));
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 6px var(--night), inset 0 0 0 7px rgba(214,174,85,.5), var(--shadow); }
.balance::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 85% 0%, rgba(233,201,122,.25), transparent 60%), linear-gradient(180deg, rgba(34,20,14,.4), rgba(34,20,14,.75)); }
.balance > * { position: relative; }
.balance .mono, .balance .fine { color: var(--gold-pale) !important; }
.balance .big { font-family: var(--display); font-size: 64px; color: #fff4dc; line-height: 1.1; }
.balance .held { font-size: 13px; }
.rates { padding: 18px; display: grid; gap: 8px; }
.rates h3 { font-family: var(--display); font-weight: 400; font-size: 19px; }
.rates table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rates td { padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.rates tr:last-child td { border-bottom: 0; }
.rates td:last-child { text-align: end; color: var(--ink); font-weight: 700; white-space: nowrap; }
.launch { justify-content: center; font-weight: 700; }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
.pack { padding: 18px; display: grid; gap: 4px; position: relative; align-content: start; }
.pack.best { box-shadow: var(--frame), 0 0 0 1.5px var(--gold), 0 14px 30px -12px rgba(94,23,18,.4); }
.pack .tag { position: absolute; top: -11px; inset-inline-end: 14px; }
.pack .c { font-family: var(--display); font-size: 38px; color: var(--ink); line-height: 1.2; }
.pack .p { font-family: var(--mono); font-size: 15px; color: var(--red-text); font-weight: 600; }
.pack .p .was { color: var(--muted); font-weight: 400; font-size: 13px; margin-inline-end: 6px; text-decoration-color: var(--red); }
.pack small { color: var(--muted); font-size: 12.5px; }
.pack form { margin-top: 10px; }
.sec-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.sec-t h2 { font-size: 24px; }
table.ledger { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.ledger th { text-align: start; font-weight: 700; color: var(--muted-2); font-size: 12.5px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: #f5ead2; }
.ledger td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); color: var(--ink); vertical-align: top; }
.ledger tbody tr:nth-child(even) td { background: rgba(245,234,210,.35); }
.ledger tr:last-child td { border-bottom: 0; }
.ledger td small { display: block; color: var(--muted); font-size: 12px; }
.ledger td a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.ledger .amt { font-weight: 800; text-align: end; white-space: nowrap; }
.ledger th.amt { text-align: end; }
.settings { padding: 20px; display: grid; gap: 16px; margin-top: 30px; scroll-margin-top: 100px; }
.delete-box { border-top: 1px solid var(--line-2); padding-top: 14px; display: grid; gap: 10px; }
.delete-box summary { cursor: pointer; color: var(--red-text); font-weight: 600; font-size: 14px; width: fit-content; }

/* ---------- legal, 404 ---------- */
.plain { max-width: 640px; margin: 0 auto; padding-block: 64px; display: grid; gap: 14px; }
.plain h1 { font-size: 40px; }

/* ---------- htmx ---------- */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ---------- narrow screens ---------- */
@media (max-width: 980px) {
  .new-grid, .v-grid, .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .tnav { display: none; }
  .mobile-nav { position: relative; display: flex; gap: 4px; overflow-x: auto; padding: 8px 20px; border-top: 1px solid rgba(214,174,85,.3); }
  .mobile-nav a { padding: 5px 12px; border-radius: 8px; font-weight: 600; font-size: 14px; white-space: nowrap; color: #dfe2f2; }
  .mobile-nav a.on { background: rgba(242,228,196,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(214,174,85,.5); }
  .logo span { display: none; }
  .vgrid, .modes, .packs, .opts, .dl { grid-template-columns: minmax(0, 1fr); }
  .player { grid-template-columns: minmax(0, 1fr); }
  .three { grid-template-columns: minmax(0, 1fr); }
  .signin { padding-inline: 14px; }
  .signin-card { padding: 30px 20px 22px; }
  .beat { padding-inline: 14px; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
  .beat textarea, .beat p { font-size: 19px; }
  .page-h h1, .v-head h1 { font-size: 30px; }
}
.tnav a, .mobile-nav a, .menu-pop a, .menu-pop button, .dl a, .srcs a { transition: background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.note-box .i, .notice .i { margin-top: 4px; }
.mode .ic .i, .src .ic .i { vertical-align: 0; }

/* touch screens: every target reaches 44 px */
@media (pointer: coarse) {
  .hit::after { inset: -8px; }
  .seg span { min-height: 40px; padding-block: 9px; }
  .icon-btn { width: 36px; height: 36px; }
}

/* ---------- accessibility helpers ---------- */
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--navy); color: var(--on-night); padding: 8px 14px; border-radius: 8px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--gold);
  transition: top var(--t-fast) var(--ease-out); }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- script review ---------- */
.script-h .edit-hint { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.beat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.edited-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--gold-text); }
.edited-tag .link-btn { font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.beat:has(.edited-tag:not([hidden])) textarea { background-image: linear-gradient(transparent 72%, rgba(233,201,122,.5) 72%); }
.sticky-actions { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -12px 20px -16px rgba(43,26,18,.45); }
[data-armed] { color: var(--red-text); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- new video: the optional settings ---------- */
.more { border-top: 1px solid var(--line-2); padding-top: 14px; display: grid; gap: 16px; }
.more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); font-size: 14px; width: fit-content; }
.more summary::-webkit-details-marker { display: none; }
.more summary .i { transition: transform var(--t-fast) var(--ease-out); }
.more[open] summary .i { transform: rotate(90deg); }
[dir="rtl"] .more[open] summary .i.flip { transform: scaleX(-1) rotate(90deg); }

/* ---------- sign in: the one orchestrated entrance (a page people land on, not one they work in) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.signin-card > * { animation: rise 280ms var(--ease-out) both; }
.signin-card > :nth-child(2) { animation-delay: 40ms; } .signin-card > :nth-child(3) { animation-delay: 80ms; }
.signin-card > :nth-child(4) { animation-delay: 120ms; } .signin-card > :nth-child(5) { animation-delay: 160ms; }
.signin-card > :nth-child(6) { animation-delay: 200ms; } .signin-card > :nth-child(n+7) { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .btn:active, .gbtn:active, .icon-btn:active, .vcard:active, .mode:active { transform: none; }
  .spin { animation: none; }
  .signin-card > * { animation: none; }
}

/* ---------- sign in, simplified: logo, title, one line, Google; the gift as a single line ---------- */
.gift-line { font-size: 13.5px; font-weight: 600; color: var(--gold-text); }
.signin-card .email-form summary { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); width: fit-content; justify-self: center; }
.signin-card details[open] summary { margin-bottom: 6px; }

/* ---------- new video, step 1: once a start is chosen, the other two step back (still clickable) ---------- */
.mode { transition-property: border-color, box-shadow, background-color, transform, opacity, filter; }
.modes:has(input:checked) .mode:not(:has(input:checked)) { opacity: .45; filter: saturate(.15); box-shadow: none; }
.modes:has(input:checked) .mode:not(:has(input:checked)):hover { opacity: .8; filter: none; }

/* ---------- picture choices: format, style, voice ---------- */
fieldset.pick { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.pick > legend { padding: 0; margin-bottom: 8px; }
.fmt-grid, .style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.voice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pick-card { position: relative; display: grid; gap: 4px; align-content: start; padding: 10px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card); cursor: pointer;
  transition-property: border-color, box-shadow, background-color, transform; transition-duration: var(--t-fast); transition-timing-function: var(--ease-out); }
.pick-card:hover { border-color: var(--gold-light); }
.pick-card:active { transform: scale(.98); }
.pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card:has(input:checked) { border-color: var(--gold); background: var(--gold-bg); box-shadow: inset 0 0 0 3px var(--gold-bg), inset 0 0 0 4px rgba(184,137,43,.7), 0 8px 20px -12px rgba(94,23,18,.4); }
.pick-card:has(input:checked)::after { content: ''; position: absolute; top: 14px; inset-inline-end: 14px; width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg);
  background: var(--red); box-shadow: 0 0 0 2px var(--card); }
.pick-card:has(input:focus-visible) { outline: 3px solid rgba(47,85,150,.5); outline-offset: 2px; }
.pick-card b { color: var(--ink); font-size: 14px; line-height: 1.45; }
.pick-card small { color: var(--muted); font-size: 12px; line-height: 1.5; }
/* format: the shape drawn to scale, a phone and a screen */
.fmt-pic { height: 66px; display: flex; align-items: flex-end; justify-content: center; gap: 8px; color: var(--muted-2); margin-bottom: 4px; }
.fmt-pic i { display: block; border: 2px solid currentColor; border-radius: 5px; background: var(--gray-bg); transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.fmt-pic .r9x16 { width: 33px; height: 58px; }
.fmt-pic .r16x9 { width: 82px; height: 46px; }
.pick-card:has(input:checked) .fmt-pic { color: var(--red); }
.pick-card:has(input:checked) .fmt-pic i { background: var(--red-bg); }
/* style: a frame rendered by the engine in that style */
.style-pic { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; background: var(--gray-bg); outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; margin-bottom: 4px; }
.style-pic.auto { display: grid; place-items: center; background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: var(--gold-pale); outline: 0; }
/* voice: a row per voice */
.pick-card.voice { grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 10px; }
.pick-card.voice > span:last-child { display: grid; min-width: 0; }
.voice-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-bg); color: var(--gold-text); }
.pick-card.voice:has(input:checked) .voice-ic { background: var(--red); color: #fff; }
.pick-card.voice:has(input:checked)::after { top: 50%; margin-top: -7px; }
@media (max-width: 980px) { .style-grid, .voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .fmt-grid { gap: 8px; } .fmt-pic .r16x9 { width: 64px; height: 36px; } .fmt-pic .r9x16 { width: 26px; height: 46px; } }
@media (max-width: 420px) { .voice-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- inside the app: the sign-in page's vibe. Navy all around, the content on one light parchment sheet with
   the same gold double frame as the sign-in card. Everything inside the sheet keeps its own styles. ---------- */
body.app { background: linear-gradient(180deg, var(--navy-2), var(--navy) 520px) var(--navy); background-attachment: fixed; }
body.app .screen.wrap { width: calc(100% - 32px); margin-block: 28px 40px; padding: 36px clamp(18px, 3vw, 40px) 52px; border-radius: 18px;
  background: var(--grain), var(--bg);
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 7px var(--bg), inset 0 0 0 8px rgba(184,137,43,.6), 0 30px 60px -24px rgba(0,0,0,.65); }
body.app .topbar { box-shadow: 0 1px 0 rgba(214,174,85,.45), 0 10px 24px -14px rgba(0,0,0,.6); }
@media (max-width: 680px) {
  body.app .screen.wrap { width: calc(100% - 16px); margin-block: 12px 24px; padding: 26px 14px 40px; border-radius: 14px; }
}

/* admin: grid children may shrink, so wide tables scroll inside their cards instead of widening the page */
main.admin > *, .admin-grid > * { min-width: 0; }

/* the numbers inside the diamond markers, larger (step numbers on the new-video page, stage numbers while building) */
.step-h .n { width: 36px; height: 36px; font-size: 22px; }
.stages .n { transform: rotate(45deg) scale(.9); font-size: 20px; }

/* previews while a video is built (worker.py): frames in a plain wrapping grid, one small heading per kind */
.pv { padding: 18px 20px 20px; }
.pv-group + .pv-group { margin-top: 18px; }
.pv-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pv-strip, .pv-strip.wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pv-strip a {
  display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; box-shadow: var(--ring); cursor: zoom-in;
  background:
    linear-gradient(var(--line), var(--line)) center / 22px 1px no-repeat,
    linear-gradient(var(--line), var(--line)) center / 1px 22px no-repeat,
    var(--soft);
}
.pv-strip a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pv-strip img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; }
.pv-strip img.is-in { opacity: 1; }
/* the same frames, large, on this page: arrows and the arrow keys move through the strip */
.pv-view { width: min(1080px, calc(100vw - 28px)); max-height: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--on-night); overflow: visible; }
.pv-view::backdrop { background: rgba(15, 20, 48, .84); }
.pv-frame { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center; gap: 12px; }
.pv-view figure { margin: 0; min-width: 0; }
.pv-view img { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 130px); margin-inline: auto; border-radius: 10px; background: var(--night); }
.pv-view figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; }
.pv-nav, .pv-x { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; box-shadow: var(--ring); }
.pv-nav:hover, .pv-x:hover { background: var(--gold-bg); }
.pv-nav[hidden] { display: none; }
.pv-nav[data-pv-step="-1"] .i { transform: scaleX(-1); }
[dir="rtl"] .pv-nav[data-pv-step="-1"] .i { transform: none; }
[dir="rtl"] .pv-nav[data-pv-step="1"] .i { transform: scaleX(-1); }
.pv-x { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
@media (max-width: 680px) {
  .pv-frame { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 6px; }
  .pv-nav, .pv-x { width: 40px; height: 40px; }
}