/* editor.css — the DIY video-invite page (cardsforknots.in house style: violet → blue actions, ink, soft lilac page).
   Desktop: form left, sticky phone-shaped preview right. Phone: preview first, steps below, a PiP while you scroll. */

:root {
  --ink: #2E1B3B;
  --ink-2: #57466B;
  --muted: #6F6287;           /* ≥ 4.5:1 on white, the page and the soft panels */
  --page: #F3EEF7;
  --card: #FFFFFF;
  --soft: #F8F5FC;
  --tint: #F1EAFE;
  --line: #ECE5F3;
  --line-2: #DCD0E9;
  --field-line: #9A8CB2;      /* field + checkbox outlines: ≥ 3:1 on white */
  --violet: #7C3AED;
  --violet-ink: #5B21B6;
  --blue: #2563EB;
  --grad: linear-gradient(135deg, #7C3AED 0%, #2563EB 100%);
  --ring: #7C3AED;
  --ok: #157F3C;
  --ok-bg: #EAF7EF;
  --err: #B42318;
  --r-card: 18px;
  --r-field: 12px;
  --shadow-card: 0 1px 2px rgba(46, 27, 59, .04), 0 22px 50px -32px rgba(46, 27, 59, .32);
  --shadow-cta: 0 12px 26px -12px rgba(91, 33, 182, .62);
  --f-head: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --f-body: "Manrope", "Noto Sans Tamil", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-ta: "Noto Sans Tamil", "Tamil Sangam MN", "Latha", "Manrope", sans-serif;
  /* preview size: desktop ≈ min(78vh, 760 px), short enough for the whole card (one-line label, frame, transport,
     chips: 250 px with the header) to fit on the first screen; the card stays close around the frame, but never
     narrower than the one-line label and the seven chapter chips (~390 px inside) */
  --pv-h: max(320px, min(760px, 78vh, calc(100vh - 250px)));
  --pv-w: calc(var(--pv-h) * 9 / 16);
  /* the design's first frame behind the preview while it loads (another design's page sets its own) */
  --pv-poster: url("../web/temple/poster.webp");
  --stage-w: max(calc(var(--pv-w) + 40px), clamp(432px, 40vw, 440px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.vi-noscroll { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background-color: var(--page);
  background-image:
    radial-gradient(1100px 520px at 88% -160px, rgba(124, 58, 237, .11), transparent 62%),
    radial-gradient(900px 460px at -12% -40px, rgba(37, 99, 235, .08), transparent 60%);
  background-repeat: no-repeat;
  font: 400 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
[lang="ta"] { font-family: var(--f-ta); }
.vi-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.vi-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; }
.vi-skip:focus { top: 12px; }

/* ── header ─────────────────────────────────────────────────────── */
.vi-top-in { max-width: 1240px; margin: 0 auto; padding: 18px 28px 14px; display: flex; align-items: center; gap: 14px; }
.vi-brand { font: 800 24px/1 var(--f-head); letter-spacing: -.025em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.vi-brand span { color: var(--blue); padding-bottom: 5px; background: linear-gradient(var(--blue), var(--blue)) left bottom / 100% 3px no-repeat; border-radius: 1px; }
.vi-crumb { padding-left: 14px; border-left: 1.5px solid var(--line-2); color: var(--ink-2); font-weight: 600; font-size: 14px; white-space: nowrap; }
.vi-saved { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; min-height: 20px; transition: opacity .3s; }
.vi-saved:empty { opacity: 0; }
.vi-saved svg { color: var(--ok); }

/* ── page grid ──────────────────────────────────────────────────── */
/* the stage's area runs into the bottom gutter too, so the sticky card never slides up off the screen at the end */
.vi-main {
  max-width: 1240px; margin: 0 auto; padding: 10px 28px 0;
  display: grid; gap: 26px 44px; align-items: start;
  grid-template-columns: minmax(0, 1fr) var(--stage-w);
  grid-template-rows: auto auto 54px;
  grid-template-areas: "intro stage" "form stage" ". stage";
}
.vi-intro { grid-area: intro; max-width: 720px; padding-top: 10px; }
.vi-stage { grid-area: stage; }
.vi-form { grid-area: form; max-width: 720px; }

/* ── product heading ────────────────────────────────────────────── */
.vi-eyebrow { margin: 0 0 8px; color: var(--violet-ink); font: 800 12px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; }
.vi-intro h1 { margin: 0; font: 800 clamp(34px, 4.4vw, 50px)/1.02 var(--f-head); letter-spacing: -.035em; }
.vi-lede { margin: 14px 0 0; max-width: 60ch; color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.vi-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.vi-facts li { padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .78); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 700; }

/* ── preview card ───────────────────────────────────────────────── */
.vi-stage {
  position: sticky; top: 16px;
  padding: 16px 18px 14px; border-radius: var(--r-card);
  background: var(--card); box-shadow: var(--shadow-card);
  transition: box-shadow .3s;
}
.vi-stage.is-final { box-shadow: 0 0 0 3px rgba(124, 58, 237, .32), var(--shadow-card); }
.vi-pvlabel { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.45; white-space: nowrap; }
.vi-pvlabel b { color: var(--ink); font-weight: 800; }
.vi-pvlabel-m { display: none; }
.vi-live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); transform: translateY(-1px); animation: vi-live 2.4s ease-in-out infinite; }
@keyframes vi-live { 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } }
/* no live preview: no live dot, and no controls that cannot do anything */
html[data-preview="loading"] .vi-live, html[data-preview="error"] .vi-live, html[data-preview="lost"] .vi-live { background: #B8AFC6; box-shadow: none; animation: none; }
html[data-preview="error"] .vi-transport, html[data-preview="error"] .vi-looprow, html[data-preview="error"] .vi-chips { display: none; }

.vi-frame {
  box-sizing: content-box; width: var(--pv-w); margin: 0 auto; padding: 7px;
  border-radius: 31px; background: linear-gradient(160deg, #2C1F3A, #120B1A);
  box-shadow: 0 28px 56px -30px rgba(46, 27, 59, .7), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.vi-slot {
  position: relative; width: 100%; height: var(--pv-h); border-radius: 24px; overflow: hidden; isolation: isolate;
  background: #1A1222 var(--pv-poster) center / cover no-repeat;
}
.vi-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.vi-loading { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding: 0 18px 20%; background: #1A1222; transition: opacity .6s ease; }
.vi-loading-poster { position: absolute; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); object-fit: cover; filter: blur(3px) saturate(1.05) brightness(.85); }
.vi-loading::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: linear-gradient(rgba(18, 11, 26, 0), rgba(18, 11, 26, .78)); }
.vi-loading-box { position: relative; z-index: 1; width: min(100%, 250px); text-align: center; color: #fff; }
.vi-loading-text { margin: 0 0 11px; font: 700 13px/1.45 var(--f-body); text-shadow: 0 1px 10px rgba(0, 0, 0, .55); font-variant-numeric: tabular-nums; }
.vi-loading.is-preparing .vi-bar > i { width: 100% !important; animation: vi-breathe 1.3s ease-in-out infinite; }
.vi-loading.is-done { opacity: 0; pointer-events: none; }
@keyframes vi-breathe { 50% { opacity: .45; } }

.vi-pverror { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 22px; text-align: center; color: #fff; background: rgba(22, 13, 30, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vi-pverror-title { margin: 0 0 8px; font: 800 16px/1.3 var(--f-head); }
.vi-pverror-text { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .84); }
.vi-pverror .vi-btn-light { margin-top: 14px; }

.vi-bar { height: 6px; border-radius: 999px; background: #E9E1F3; overflow: hidden; }
.vi-bar > i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--grad); transition: width .25s linear; }
.vi-bar-light { background: rgba(255, 255, 255, .22); }
.vi-bar-light > i { background: linear-gradient(90deg, #C4B5FD, #FFFFFF); }

/* controls */
.vi-controls { margin-top: 12px; }
.vi-stagefinal { margin: 0 0 6px; text-align: center; font-size: 13px; color: var(--ink-2); }
.vi-stagefinal b { color: var(--violet-ink); }
.vi-transport { display: flex; align-items: center; gap: 12px; }
.vi-play {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--grad); color: #fff; box-shadow: var(--shadow-cta); cursor: pointer; transition: transform .15s, opacity .2s;
}
.vi-play:active { transform: scale(.94); }
.vi-play:disabled { opacity: .4; box-shadow: none; cursor: default; transform: none; }
.vi-play .i-play { margin-left: 2px; }
.vi-play .i-pause, .vi-play.is-playing .i-play { display: none; }
.vi-play.is-playing .i-pause { display: block; }
.vi-time { flex: none; min-width: 76px; text-align: right; color: var(--ink-2); font: 700 13px/1 var(--f-body); font-variant-numeric: tabular-nums; }
/* sound on/off (a design with sound: template 04). Off by default; on = the violet ring */
.vi-sound {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line-2); border-radius: 50%;
  background: #fff; color: var(--ink-2); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.vi-sound .i-on, .vi-sound[aria-pressed="true"] .i-off { display: none; }
.vi-sound[aria-pressed="true"] .i-on { display: block; }
.vi-sound[aria-pressed="true"] { border-color: var(--violet); color: #4C1D95; box-shadow: 0 0 0 3px rgba(124, 58, 237, .16); }
.vi-sound[aria-busy="true"] { opacity: .6; cursor: progress; }
.vi-sound:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.vi-sound-light { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); color: #fff; }
.vi-sound-light[aria-pressed="true"] { border-color: #fff; color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }

/* scrubber: our own track (fill, loop band, chapter notches) under a transparent range input.
   Positions follow the thumb centre: 9px + (100% − 18px) × fraction. */
.vi-scrub { --p: 0; --a: 0; --b: 0; position: relative; flex: 1; min-width: 0; height: 44px; }
.vi-scrub-track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 999px; background: #E7DEF2; }
.vi-scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(9px + (100% - 18px) * var(--p)); border-radius: inherit; background: var(--grad); }
.vi-scrub-loop { position: absolute; top: -4px; bottom: -4px; left: calc(9px + (100% - 18px) * var(--a)); width: calc((100% - 18px) * (var(--b) - var(--a))); border-radius: 999px; background: rgba(124, 58, 237, .18); box-shadow: inset 0 0 0 1.5px rgba(124, 58, 237, .45); opacity: 0; transition: opacity .2s; }
.vi-scrub.is-looping .vi-scrub-loop { opacity: 1; }
.vi-scrub-ticks i { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: #fff; }
.vi-scrub input[type="range"] { position: relative; z-index: 1; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.vi-scrub input[type="range"]:disabled { cursor: default; }
.vi-scrub input[type="range"]:focus-visible { outline: none; }
.vi-scrub input[type="range"]::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
.vi-scrub input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: 13px; border: 2.5px solid var(--violet); border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(46, 27, 59, .28); transition: transform .12s; }
.vi-scrub input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
.vi-scrub input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(124, 58, 237, .5); }
.vi-scrub input[type="range"]:disabled::-webkit-slider-thumb { border-color: #CBBCE0; box-shadow: none; }
.vi-scrub input[type="range"]::-moz-range-track { height: 44px; background: transparent; border: 0; }
.vi-scrub input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border: 2.5px solid var(--violet); border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(46, 27, 59, .28); }
.vi-scrub input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(124, 58, 237, .5); }

.vi-looprow { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; margin: 4px 0 6px; }
.vi-looprow:empty { min-height: 0; margin: 0 0 4px; }
.vi-loopchip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 12px; border-radius: 999px; background: var(--tint); color: var(--violet-ink); font: 700 13px/1 var(--f-body); }
.vi-loopchip svg { margin-right: 2px; }
.vi-loopchip button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(124, 58, 237, .13); color: var(--violet-ink); font-size: 13px; line-height: 1; cursor: pointer; }
.vi-loopchip button:hover { background: rgba(124, 58, 237, .22); }

.vi-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.vi-chip { min-height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-2); font: 700 13px/1 var(--f-body); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.vi-chip:hover { border-color: #BDA6E6; color: var(--ink); }
.vi-chip:disabled { opacity: .5; cursor: default; }
.vi-chip.is-now { border-color: #CDB9F4; background: var(--tint); color: var(--violet-ink); }
.vi-chip.is-loop { border-color: transparent; background: var(--grad); color: #fff; }
.vi-stage.is-final .vi-looprow, .vi-stage.is-final .vi-chips { visibility: hidden; pointer-events: none; }
.vi-stage.is-final .vi-scrub { pointer-events: none; opacity: .6; }
/* 16 · phones: under the chips, the way into the form far below */
.vi-controls .vi-start { display: none; }
/* desktop: one even row of chapters under the frame (the card is ~440 px wide; wrapping is the last resort) */
@media (min-width: 980px) {
  .vi-chips { gap: 4px; }
  .vi-chip { flex: 1 1 auto; padding: 0 6px; font-size: 12px; }
}

/* ── form card ──────────────────────────────────────────────────── */
.vi-form { padding: 24px 28px 26px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); scroll-margin-top: 12px; container-type: inline-size; }

/* five steps, in the video's order; the two long labels ("Venue & closing", "Check & order") get extra width, and
   narrow forms set the labels smaller, under the number, and drop their "& …" part */
.vi-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr) minmax(0, 1.3fr); gap: 4px; margin: 0 0 24px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.vi-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); font: 700 14px/1.2 var(--f-body); text-align: center; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.vi-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.vi-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(46, 27, 59, .06), 0 8px 18px -10px rgba(46, 27, 59, .32); }
.vi-tab-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #E6DDF0; color: var(--ink-2); font: 800 12px/1 var(--f-head); }
.vi-tab[aria-selected="true"] .vi-tab-n { background: var(--grad); color: #fff; }
.vi-tab.is-done:not([aria-selected="true"]) .vi-tab-n { background: #DDF3E5; color: transparent; position: relative; }
.vi-tab.is-done:not([aria-selected="true"]) .vi-tab-n::after { content: ""; position: absolute; left: 8px; top: 7px; width: 8px; height: 5px; border: solid var(--ok); border-width: 0 0 2.2px 2.2px; transform: rotate(-45deg); }
.vi-tab-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 2px var(--soft); display: none; }
.vi-tab[aria-selected="true"] .vi-tab-dot { box-shadow: 0 0 0 2px #fff; }
.vi-tab.has-err .vi-tab-dot { display: block; }
/* the form column on a laptop (~640 px) and narrower: number above the label, numbers level even when a label wraps */
@container (max-width: 700px) {
  .vi-tabs { gap: 2px; padding: 4px; }
  .vi-tab { flex-direction: column; justify-content: flex-start; gap: 5px; min-height: 60px; padding: 8px 2px; font-size: 12.5px; }
  .vi-tab-dot { top: 6px; right: 6px; }
}
/* phones: "Venue" and "Check" (screen readers still hear "Venue & closing"), five even one-line labels */
@container (max-width: 440px) {
  .vi-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .vi-tab-l { white-space: nowrap; }
  .vi-tab-more { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@container (max-width: 340px) {
  .vi-tabs { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); }
  .vi-tab { font-size: 11.5px; letter-spacing: -.01em; }
}

/* 14 · steps 1–4: the final preview counts as watched (or a change undid that) */
.vi-watchnote { display: flex; gap: 8px; margin: -12px 0 18px; padding: 9px 12px; border-radius: 12px; background: var(--ok-bg); color: #145A2E; font-size: 13px; font-weight: 650; line-height: 1.45; }
.vi-watchnote::before { content: "✓"; flex: none; font-weight: 800; }
.vi-watchnote.is-recheck { background: #FFF6E6; color: #7A4B00; }
.vi-watchnote.is-recheck::before { content: "!"; }

.vi-panel-head h2 { margin: 0; font: 800 26px/1.15 var(--f-head); letter-spacing: -.02em; outline: none; }
.vi-panel-head p { margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; }

/* fields */
.vi-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin-top: 18px; }
.vi-field > label { color: var(--ink); font: 700 14px/1.3 var(--f-body); }
.vi-opt { color: var(--muted); font-weight: 600; }
.vi-input {
  display: block; width: 100%; min-width: 0; min-height: 50px; margin: 0; padding: 12px 14px;
  border: 1.5px solid var(--field-line); border-radius: var(--r-field); background: #fff; color: var(--ink);
  font: 600 15px/1.4 var(--f-body); -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.vi-input[lang="ta"] { font-family: var(--f-ta); font-weight: 500; }
.vi-input::placeholder { color: #968AAB; font-weight: 500; opacity: 1; }
.vi-input:hover { border-color: #7F6F9A; }
.vi-input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124, 58, 237, .15); }
.vi-input[type="date"], .vi-input[type="time"] { line-height: 1.4; }
.vi-textarea { resize: none; overflow: hidden; }
.vi-input::-webkit-date-and-time-value { min-height: 1.4em; text-align: left; }
.vi-input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.is-invalid .vi-input { border-color: var(--err); }
/* an invalid field keeps its red border; focus adds a violet ring so it still stands out (Next / Pay focus it) */
.is-invalid .vi-input:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .13); outline: 2px solid var(--violet); outline-offset: 3px; }
.vi-err { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--err); font: 650 13px/1.4 var(--f-body); }
.vi-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--err); color: #fff; font: 800 11px/1 var(--f-body); }
.vi-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.vi-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
/* narrow phones: "(optional)" moves from the label into the hint, so both labels of a row stay one line */
.vi-opt-sm { display: none; }
@media (max-width: 420px) { .vi-opt { display: none; } .vi-opt-sm { display: inline; } }

.vi-group { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.vi-group + .vi-group { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
/* a floated legend flows like a heading instead of sitting on the fieldset border */
.vi-group legend { float: left; width: 100%; margin: 0; padding: 0; color: var(--violet-ink); font: 800 12px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.vi-group legend + .vi-field, .vi-group legend + .vi-grid2 { clear: both; margin-top: 0; padding-top: 12px; }
.vi-group legend + .vi-grid2 > .vi-field { margin-top: 0; }
@media (max-width: 640px) { .vi-group legend + .vi-grid2-wide > .vi-field + .vi-field { margin-top: 18px; } }
/* the closing slide after the venue's "shows as" box; its keep-or-rewrite tip right under the legend */
.vi-group.vi-group-sep { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.vi-group.vi-group-sep legend { padding-bottom: 12px; }   /* (padding, not margin: the tip below clears the float) */
.vi-group legend + .vi-tip-group { clear: both; margin-top: 0; }

/* the slides' wording: the label and "Use our wording" share a row, so the link never moves the field */
.vi-labelrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; min-height: 20px; }
.vi-labelrow > label { color: var(--ink); font: 700 14px/1.3 var(--f-body); }
.vi-reset { display: flex; }   /* (not a line box: the page's 1.55 line-height would make the row taller) */
.vi-reset:empty { display: none; }
.vi-reset .vi-linkbtn { gap: 5px; margin-left: auto; padding: 1px 2px; font-size: 12.5px; }
.vi-caps { text-transform: uppercase; }   /* the English title: set in capitals in the video */
/* under a slide's line: "left empty, the video keeps our line", or its count near / over the limit */
.vi-wordnote { justify-content: space-between; min-height: 18px; }
.vi-wordnote .vi-count { margin-left: auto; }
.vi-wordwarn { color: var(--err); font-weight: 650; }
/* the Opening step's shortcut for couples who keep the design's wording */
.vi-keep { margin-top: 10px; }
.vi-keep .vi-linkbtn { padding: 4px 0; font-size: 14px; }

/* couple */
.vi-names { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; margin-top: 4px; }
.vi-person { min-width: 0; }
.vi-tanote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }
.vi-tanote:empty, .vi-altbox:empty { display: none; }
.vi-auto { display: inline-flex; align-items: center; gap: 5px; color: #6D28D9; font-weight: 700; }
.vi-autohint { color: var(--muted); }
.vi-rough { padding: 3px 10px; border-radius: 999px; border: 1px solid #F4DDB0; background: #FFF6E6; color: #7A4B00; font-weight: 700; }
.vi-count { margin-left: auto; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.vi-count.is-over { color: var(--err); }
.vi-longnote { flex-basis: 100%; color: var(--ink-2); }
.vi-linkbtn svg, .vi-btn-soft svg { flex: none; }
.vi-linkbtn { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; border: 0; background: none; color: var(--blue); font: 700 13px/1.2 var(--f-body); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; border-radius: 4px; }
.vi-linkbtn:hover { color: #1D4ED8; }

/* Tamil chips — .ta-sugg / .ta-opt / .ta-key come from translit.js (typing) and from the auto-spelling picker */
.ta-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid #E3D8F7; border-radius: 12px; background: #FAF7FF; }
.ta-opt { min-height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font: 600 15px/1 var(--f-ta); cursor: pointer; transition: background .15s, border-color .15s; }
.ta-opt:hover { background: var(--tint); }
.ta-opt.is-first, .ta-opt.is-on { border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); color: #4C1D95; }
.ta-key { margin-left: auto; color: var(--muted); font-size: 11.5px; letter-spacing: .02em; }
.vi-alt { margin-top: 2px; padding: 6px 7px; gap: 5px; }
.vi-alt .ta-opt { min-height: 30px; padding: 0 10px; font-size: 14px; }
.vi-alt-k { color: var(--muted); font-size: 12px; font-weight: 700; margin: 0 2px 0 4px; }

.vi-order { margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.vi-order-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vi-order-k { color: var(--ink-2); font-size: 13.5px; font-weight: 700; }
.vi-order-v { padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--ink); font-size: 13px; font-weight: 800; }
.vi-order-row .vi-btn-soft { margin-left: auto; }
.vi-shows-inline { margin: 10px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.vi-shows-inline .k { display: block; color: var(--muted); font-weight: 700; }
.vi-names-en { display: block; margin: 2px 0; font-family: "Great Vibes", cursive; font-size: 23px; color: var(--ink); line-height: 1.15; }
.vi-names-ta { display: block; font-family: "Arima", var(--f-ta); font-weight: 700; color: var(--ink); }
.vi-name { display: inline-block; max-width: 100%; }   /* a name moves to the next line whole; only a too-long one breaks */
/* with a degree (names round, 2026-10-06): one name per line, the degree after it in small capitals, "&" between */
.vi-names-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.vi-names-line > .vi-names-en, .vi-names-line > .vi-names-ta { display: inline; margin: 0; }
.vi-names-deg { font: 600 11.5px/1.3 "Cinzel", var(--f-body); letter-spacing: .05em; color: var(--ink-2); white-space: nowrap; }
.vi-inv-l .vi-names-deg { margin-left: 2px; font-family: "Cinzel", serif; color: #9A6614; }
.vi-names-amp { display: block; font: 400 19px/1 "Great Vibes", cursive; color: var(--ink); }
.vi-names-sub { display: block; margin-top: 2px; font: 600 10.5px/1.4 "Cinzel", var(--f-body); letter-spacing: .12em; color: var(--muted); }
.vi-softnote { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; }

.vi-tip { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--soft); color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.vi-tip svg { flex: none; margin-top: 1px; color: var(--violet); }

/* "shows in the video as" — set in the video's own fonts */
.vi-shows { margin-top: 24px; padding: 16px 18px; border: 1px solid #E6DCF6; border-radius: 16px; background: linear-gradient(180deg, #FCFAFF, #F5EFFD); }
.vi-shows-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 8px; }
.vi-shows-k { color: var(--violet-ink); font: 800 11.5px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.vi-sample { padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.vi-shows p { margin: 0; overflow-wrap: anywhere; }
.vi-shows .big { font: 700 21px/1.3 "Cinzel", serif; letter-spacing: .06em; color: var(--ink); }
.vi-shows .line { margin-top: 4px; font: 500 14px/1.5 "Cinzel", serif; letter-spacing: .04em; color: var(--ink); }
.vi-shows .line [lang="ta"] { font-family: "Noto Serif Tamil", var(--f-ta); font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.vi-shows .ev { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 2px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #DCCDF2; font-size: 14px; }
.vi-shows .ev + .ev { margin-top: 0; border-top: 0; padding-top: 6px; }
.vi-shows .ev-k { font: 700 12.5px/1.6 "Cinzel", serif; letter-spacing: .08em; color: var(--violet-ink); }
.vi-shows .ev-k [lang="ta"] { display: block; font: 600 12.5px/1.5 "Noto Serif Tamil", var(--f-ta); letter-spacing: 0; color: var(--ink-2); }
.vi-shows .ev-v { font: 500 17px/1.4 "Cormorant Garamond", serif; color: var(--ink); }
.vi-shows .venue { font: 500 19px/1.35 "Cormorant Garamond", serif; color: var(--ink); }
.vi-shows .venue-ta { margin-top: 6px; font: 600 15px/1.55 "Noto Serif Tamil", var(--f-ta); color: var(--ink); }
.vi-shows .venue-ta.is-small { font-size: 13px; }   /* the video sets this line smaller too */

/* buttons */
.vi-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.vi-nav > span:empty { display: none; }
.vi-nav [data-next] { margin-left: auto; }
.vi-nav .vi-btn-primary { min-width: 0; }
.vi-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--grad); color: #fff; font: 800 15px/1 var(--f-head); letter-spacing: -.005em;
  box-shadow: var(--shadow-cta); cursor: pointer; transition: transform .15s, box-shadow .2s, opacity .2s; white-space: nowrap;
}
.vi-btn-primary:hover { box-shadow: 0 16px 30px -12px rgba(91, 33, 182, .7); }
.vi-btn-primary:active { transform: scale(.97); }
.vi-btn-primary:disabled { opacity: .45; box-shadow: none; cursor: default; transform: none; }
.vi-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font: 700 15px/1 var(--f-body); cursor: pointer; transition: border-color .15s, background .15s; white-space: nowrap; }
.vi-btn-ghost:hover { border-color: #BFAEDA; background: var(--soft); }
.vi-btn-soft { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border: 1px solid #D9C9F6; border-radius: 999px; background: #fff; color: var(--violet-ink); font: 800 13.5px/1 var(--f-body); cursor: pointer; transition: background .15s, border-color .15s; }
.vi-btn-soft:hover { background: var(--tint); border-color: #C4ACF2; }
.vi-nw { white-space: nowrap; }   /* a time range never breaks inside ("6:00 / – 7:30 AM") */
.vi-btn-light { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 800 14px/1 var(--f-head); cursor: pointer; }

/* ── step 5: check & order ──────────────────────────────────────── */
.vi-summary { display: grid; gap: 12px; margin-top: 20px; }
.vi-sum-group { padding: 4px 16px 6px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.vi-sum-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; padding: 10px 0 8px; }
.vi-sum-head h3 { margin: 0; font: 800 16px/1.2 var(--f-head); }
.vi-sum-list { margin: 0; }
.vi-sum-row { display: grid; grid-template-columns: minmax(110px, 36%) minmax(0, 1fr); gap: 2px 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.vi-sum-row dt { color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.5; }
.vi-sum-row dd { margin: 0; color: var(--ink); font-size: 14.5px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.vi-sum-row dd[lang="ta"] { font-weight: 600; }
.vi-sum-row .is-missing { color: var(--err); font-weight: 650; }
.vi-sum-lines > span { display: block; }
.vi-sum-lines > [lang="ta"] { font-weight: 600; }
/* each line of a slide marked at its start, so a line that wraps on a narrow phone still reads as one line */
.vi-ln { position: relative; padding-left: 11px; }
.vi-ln + .vi-ln { margin-top: 3px; }
.vi-ln::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 3px; border-radius: 2px; background: var(--line-2); }
.vi-sum-lines > .vi-ours { display: inline-block; margin-top: 4px; padding: 1px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--soft); color: var(--muted); font: 700 11.5px/1.5 var(--f-body); }
.vi-sum-err { display: block; margin-top: 2px; color: var(--err); font-size: 12.5px; font-weight: 650; font-family: var(--f-body); }
.vi-sum-rough { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font: 12.5px/1.3 var(--f-body); }
.vi-sum-row.is-flash { animation: vi-flash .9s ease 2; border-radius: 8px; }

.vi-final { margin-top: 18px; padding: 18px; border: 1px solid #E2D6F7; border-radius: 16px; background: linear-gradient(135deg, rgba(124, 58, 237, .07), rgba(37, 99, 235, .06)); transition: background .3s, border-color .3s; }
.vi-final.is-watched { border-color: #BFE3CC; background: #fff; }
.vi-final.is-watched .vi-final-btn { background: #fff; color: var(--violet-ink); border: 1.5px solid #CDB9F4; box-shadow: none; }
.vi-final.is-watched .vi-final-btn:hover { background: var(--tint); border-color: #B79CF3; box-shadow: none; }
.vi-final-title { margin: 0; font: 800 18px/1.2 var(--f-head); }
.vi-final-text { margin: 6px 0 14px; color: var(--ink-2); font-size: 14px; }
.vi-final-warn { margin: -4px 0 14px; padding: 9px 12px; border-radius: 10px; background: #FFF6E6; color: #7A4B00; font-size: 13px; font-weight: 600; line-height: 1.45; }
.vi-final-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.vi-final-ic svg { display: block; }
.vi-final-progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.vi-final-progress .vi-bar { flex: 1; }
.vi-final.is-watched .vi-bar > i { background: #22A35A; }
.vi-final-status { flex: 0 1 auto; min-width: 9.5em; max-width: 62%; overflow-wrap: anywhere; text-align: right; color: var(--ink-2); font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vi-final.is-watched .vi-final-status { color: var(--ok); }

.vi-recheck { margin: 14px 0 0; padding: 11px 14px; border-radius: 12px; background: #FFF6E6; border: 1px solid #F4DDB0; color: #7A4B00; font-size: 13.5px; font-weight: 600; line-height: 1.5; }

.vi-tick { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; align-items: start; margin-top: 16px; padding: 16px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; transition: border-color .2s, background .2s; }
.vi-tick input { display: grid; place-items: center; width: 26px; height: 26px; margin: 0; border: 2px solid var(--field-line); border-radius: 8px; background: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .15s, border-color .15s; }
.vi-tick input::after { content: ""; width: 11px; height: 6px; margin-top: -3px; border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(-45deg) scale(0); transition: transform .15s; }
.vi-tick input:checked { border-color: transparent; background: var(--grad); }
.vi-tick input:checked::after { transform: rotate(-45deg) scale(1); }
.vi-tick input:disabled { border-color: #DDD3E8; background: #F3EEF8; cursor: not-allowed; }
.vi-tick label { padding-top: 2px; color: var(--ink); font: 750 15.5px/1.4 var(--f-body); cursor: pointer; }
.vi-tick .vi-hint { grid-column: 2; }
.vi-tick.is-disabled label { color: var(--muted); cursor: not-allowed; }
.vi-tick.is-checked { border-color: #B79CF3; background: #FBF9FF; }
.vi-tick.is-flash { animation: vi-flash .9s ease 2; }
@keyframes vi-flash { 50% { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124, 58, 237, .14); } }
.vi-final.is-flash { animation: vi-flash .9s ease 2; }

.vi-promise { margin-top: 16px; padding: 14px 18px 16px; border: 1px solid #E2D6F7; border-radius: 16px; background: linear-gradient(135deg, rgba(124, 58, 237, .06), rgba(37, 99, 235, .05)); color: var(--ink); }
.vi-promise-k { margin: 0 0 8px; color: var(--violet-ink); font: 800 11.5px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.vi-promise-line { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; }
/* the question on its own line, then the answer: the same even break at every width (no lead split across lines,
   no lone "within 12 hours.") */
.vi-promise-line > span { max-width: 52ch; text-wrap: pretty; }
.vi-promise-line strong { font-weight: 800; }
.vi-promise-lead { display: block; }
.vi-promise-ic { font-size: 17px; line-height: 1.35; text-align: center; }
.vi-promise-note { margin: 0; padding-left: 34px; color: var(--ink-2); font-size: 14px; text-wrap: pretty; }
.vi-promise-intro { max-width: 60ch; margin-top: 18px; background-color: rgba(255, 255, 255, .6); }
.vi-dialog .vi-promise { margin-top: 16px; }

.vi-buy { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.vi-price-k { display: block; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vi-price-v { font: 800 26px/1.15 var(--f-head); letter-spacing: -.01em; }
.vi-price-v small { color: var(--muted); font: 600 13px var(--f-body); letter-spacing: 0; }
.vi-btn-pay { min-height: 56px; padding: 0 34px; border: 0; border-radius: 999px; background: var(--grad); color: #fff; font: 800 17px/1 var(--f-head); box-shadow: 0 16px 32px -14px rgba(91, 33, 182, .72); cursor: pointer; transition: transform .15s, background .2s, box-shadow .2s; white-space: nowrap; }
.vi-btn-pay:active { transform: scale(.97); }
/* still pressable (it leads to what is missing), so its text keeps a readable contrast */
.vi-btn-pay[aria-disabled="true"] { background: #E9E2F2; color: #5E4F75; box-shadow: none; }
.vi-pay-why { margin: 10px 0 0; color: var(--ink-2); font-size: 13.5px; text-align: right; }

/* ── picture-in-picture (phones) ────────────────────────────────── */
.vi-pip {
  position: fixed; z-index: 60; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
  width: 92px; height: 164px; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: #1A1222 var(--pv-poster) center / cover no-repeat;
  box-shadow: 0 0 0 2px #fff, 0 16px 34px -10px rgba(20, 10, 40, .6); cursor: pointer;
  animation: vi-pip-in .22s ease-out;
}
.vi-pip-up { position: absolute; z-index: 2; right: 5px; bottom: 5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.vi-pip { transform-origin: top right; }
.vi-pip.is-low { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform-origin: bottom right; }   /* the step tabs are under its usual spot */
.vi-pip.is-left { right: auto; left: 12px; transform-origin: top left; }   /* the right-hand corners are taken */
.vi-pip.is-low.is-left { transform-origin: bottom left; }
.vi-pip.is-left .vi-pip-up { right: auto; left: 5px; }
.vi-pip.is-at { top: var(--pip-y, 12px); bottom: auto; }
.vi-pip.is-small { width: 72px; height: 128px; }
.vi-pip.is-off { visibility: hidden; pointer-events: none; }
@keyframes vi-pip-in { from { opacity: 0; transform: scale(.85); } }

/* ── final preview sheet (phones) ───────────────────────────────── */
.vi-sheet { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #120B1A; color: #fff; overflow: hidden; }
.vi-sheet[open] { display: flex; flex-direction: column; }
.vi-sheet::backdrop { background: #120B1A; }
.vi-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 8px 20px; }
.vi-sheet-top h2 { margin: 0; font: 800 18px/1.2 var(--f-head); }
.vi-sheet-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.vi-sheet-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 4px 16px; }
/* 202 px = the title bar (62) + the bottom bar with its Done button (132) + the stage padding (8) */
.vi-sheet-slot { position: relative; height: min(calc(100vh - 202px), calc((100vw - 32px) * 16 / 9)); aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #000 var(--pv-poster) center / cover no-repeat; }
@supports (height: 1dvh) { .vi-sheet-slot { height: min(calc(100dvh - 202px), calc((100vw - 32px) * 16 / 9)); } }
.vi-sheet-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
.vi-sheet-row { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 440px; }
.vi-play-light { background: #fff; color: var(--ink); box-shadow: none; }
.vi-sheet-meter { flex: 1; min-width: 0; }
.vi-sheet-meta { display: flex; justify-content: space-between; gap: 4px 12px; margin-top: 7px; color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vi-sheet-meta > span { min-width: 0; overflow-wrap: anywhere; }
.vi-sheet-meta > span:last-child { flex: none; }
.vi-sheet-done { width: 100%; max-width: 440px; min-height: 50px; }
.vi-sheet-done.is-pending { visibility: hidden; }
@media (min-width: 980px) {
  /* 150 px = the title bar (62) + the one-row bottom bar (80) + the stage padding (8) */
  .vi-sheet-slot { height: min(calc(100vh - 150px), calc((100vw - 32px) * 16 / 9)); }
  .vi-sheet-bottom { flex-direction: row; justify-content: center; gap: 18px; }
  .vi-sheet-row { max-width: 460px; }
  .vi-sheet-done { width: auto; min-width: 250px; max-width: none; }
}

/* ── order dialog ───────────────────────────────────────────────── */
.vi-dialog { width: min(600px, calc(100vw - 32px)); max-height: min(88vh, 900px); padding: 0; border: 0; border-radius: var(--r-card); background: #fff; color: var(--ink); box-shadow: 0 40px 90px -30px rgba(46, 27, 59, .6); }
.vi-dialog::backdrop { background: rgba(32, 18, 46, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.vi-dialog[open] { display: flex; }
.vi-dialog-in { display: flex; flex-direction: column; width: 100%; max-height: inherit; }
.vi-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 12px 22px; border-bottom: 1px solid var(--line); }
.vi-dialog-head h2 { margin: 0; font: 800 21px/1.2 var(--f-head); }
.vi-x { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); cursor: pointer; }
.vi-dialog-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 22px 18px; -webkit-overflow-scrolling: touch; }
.vi-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.vi-osum { margin: 0; }
.vi-osum div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vi-osum dt { color: var(--muted); font-size: 13px; font-weight: 700; }
.vi-osum dd { margin: 0; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.vi-osum dd span { display: block; }
.vi-osum dd .vi-nw { display: inline; }
.vi-osum dd [lang="ta"] { font-weight: 600; }
.vi-json-k { margin: 18px 0 8px; color: var(--violet-ink); font: 800 11.5px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.vi-json { margin: 0; max-height: 300px; overflow: auto; padding: 14px 16px; border-radius: 12px; background: #1E1529; color: #EDE6F7; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Tamil", monospace; white-space: pre; tab-size: 2; }
.vi-phase { margin: 16px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--tint); color: var(--violet-ink); font-size: 14px; font-weight: 700; text-align: center; }

/* ── phones & tablets ───────────────────────────────────────────── */
@media (max-width: 979.98px) {
  /* the frame's width, from the screen's: the page gutters (32), the card's padding (28) and the frame's own (10) */
  :root { --pv-h: min(56vh, calc((100vw - 70px) * 16 / 9)); }
  @supports (height: 1svh) { :root { --pv-h: min(56svh, calc((100vw - 70px) * 16 / 9)); } }
  .vi-top-in { padding: 14px 16px 10px; }
  .vi-brand { font-size: 22px; }
  .vi-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "stage" "intro" "form"; gap: 22px; padding: 4px 16px 56px; }
  .vi-intro, .vi-form { max-width: none; }
  .vi-intro { padding: 4px 4px 0; }
  .vi-stage { position: static; padding: 14px 14px 12px; }
  .vi-pvlabel { justify-content: flex-start; white-space: normal; font-size: 13px; }
  .vi-pvlabel-d { display: none; }
  .vi-pvlabel-m { display: inline; }
  .vi-controls .vi-start { display: flex; justify-content: center; width: 100%; margin-top: 10px; }
  .vi-frame { padding: 5px; border-radius: 26px; }
  .vi-slot { border-radius: 21px; }
  .vi-form { padding: 18px 18px 22px; }
}
/* iOS zooms into fields under 16 px (also iPads in the desktop layout) */
@media (max-width: 979.98px), (pointer: coarse) {
  .vi-input, .vi-input[lang="ta"] { font-size: 16px; }
  /* touch: 44 px targets; small text links get an invisible larger hit area */
  .vi-chip, .vi-btn-soft { min-height: 44px; }
  .vi-x { width: 44px; height: 44px; }
  .vi-loopchip { height: 40px; }
  .vi-loopchip button { position: relative; width: 34px; height: 34px; }
  .vi-loopchip button::after, .vi-linkbtn::after { content: ""; position: absolute; inset: -8px; }
  .ta-opt { min-height: 40px; }
  .vi-alt .ta-opt { min-height: 36px; }
}
/* tablets: the card sits close around the frame instead of a wide white band */
@media (min-width: 641px) and (max-width: 979.98px) { .vi-stage { width: fit-content; max-width: 100%; margin-inline: auto; } }
/* desktop windows too short for the whole card: let it scroll with the page */
@media (min-width: 980px) and (max-height: 560px) { .vi-stage { position: static; } }
@media (max-width: 640px) {
  .vi-crumb { display: none; }
  .vi-names { grid-template-columns: minmax(0, 1fr); }
  .vi-person + .vi-person { margin-top: 4px; }
  .vi-grid2-wide { grid-template-columns: minmax(0, 1fr); }
  .vi-panel-head h2 { font-size: 23px; }
  .vi-intro h1 { font-size: 34px; }
  .vi-lede { font-size: 15px; }
  /* the label on its own line, then the order and Swap (which wrap below each other only when they must) */
  .vi-order-k { flex-basis: 100%; }
  .vi-order-v { white-space: nowrap; }
  .vi-order-row .vi-btn-soft { margin-left: 0; }
  .vi-shows .ev { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* label | value stays two columns (13 stacked rows push the final preview far down); the Tamil venue stacks */
  .vi-sum-row { grid-template-columns: minmax(92px, 36%) minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; }
  .vi-sum-row dt { font-size: 12.5px; }
  .vi-sum-row.is-stack { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vi-buy { flex-direction: column; align-items: stretch; text-align: center; }
  .vi-btn-pay { width: 100%; }
  .vi-pay-why { text-align: center; }
  .vi-final-progress { flex-wrap: wrap; row-gap: 8px; }
  .vi-final-status { flex: 1 1 100%; min-width: 0; max-width: none; text-align: left; }
  .vi-final-btn { width: 100%; }
  .vi-nav .vi-btn-primary { flex: 1; }
  .vi-dialog { width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  /* the order: each label over its value, so a Tamil line has the whole width */
  .vi-osum div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .vi-dialog-foot > * { flex: 1; }
}
/* narrow phones: "Next: Check & order" becomes "Next: Check" ("Next: Venue & closing" → "Next: Venue"), a slimmer Back;
   320 px may wrap the label */
@media (max-width: 400px) {
  .vi-more { display: none; }
  .vi-nav .vi-btn-ghost { padding: 0 14px; }
}
@media (max-width: 340px) { .vi-nav .vi-btn-primary { white-space: normal; line-height: 1.15; } }
@media (max-width: 380px) {
  .vi-time { min-width: 0; font-size: 12px; }
  .vi-transport { gap: 8px; }
  /* two time fields side by side: room for "06:00 AM" next to the clock icon */
  .vi-grid2 .vi-input { padding-left: 10px; padding-right: 6px; }
  .vi-input::-webkit-calendar-picker-indicator { margin-left: 2px; }
}

/* calmer UI for people who ask for less motion (the video itself still plays) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .vi-live { animation: none; }
}

/* ---------- style: font sets + text size ---------- */
/* each card previews its font set with the couple's names, gold on a night swatch like the video itself */
.vi-group-sets .vi-grouphint { clear: both; margin: 0; padding-top: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.vi-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.vi-set { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; text-align: left; cursor: pointer; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.vi-set:hover { border-color: #BDA6E6; }
.vi-set[aria-checked="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, .16); }
.vi-set-swatch { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 82px; padding: 8px 10px;
  background: radial-gradient(130% 100% at 50% 0%, #563217 0%, #2a160a 62%, #1d0f07 100%); color: #F6DC92; text-shadow: 0 1px 6px rgba(20, 6, 0, .85); }
.vi-set-line { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; line-height: 1.3; }
/* design 02 is a light video: maroon script and capitals on its cream */
[data-design="vector"] .vi-set-swatch, [data-design="garden"] .vi-set-swatch { gap: 2px; background: radial-gradient(130% 100% at 50% 0%, #FFFBF2 0%, #FBF0DC 64%, #F3E2C4 100%);
  color: #7E1628; text-shadow: 0 1px 3px rgba(255, 251, 242, .9); }
[data-design="vector"] .vi-set-line + .vi-set-line, [data-design="garden"] .vi-set-line + .vi-set-line { color: #9A6614; }
.vi-set-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 11px 0; color: var(--ink); font: 800 13.5px/1.25 var(--f-body); }
.vi-set-note { padding: 2px 11px 10px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.vi-set[aria-checked="true"] .vi-set-name::after { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--grad) center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* text size: A− 100% A+ per slide, in a small, safe range */
.vi-size { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; clear: both; margin-top: 16px; }
.vi-size-label { margin-right: auto; color: var(--ink-2); font-size: 13.5px; font-weight: 700; }
.vi-size-ctl { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; }
.vi-size-btn { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 46px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--violet-ink); font: 800 15px/1 var(--f-body); cursor: pointer; }
.vi-size-btn > span { line-height: 1; }
.vi-size-btn:hover:not(:disabled) { background: var(--tint); }
.vi-size-btn:disabled { color: #B9AECB; cursor: default; }
.vi-size-a { font-size: 17px; }
.vi-size-a-sm { font-size: 13px; }
.vi-size-val { min-width: 50px; color: var(--ink); text-align: center; font: 800 14px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.vi-size-reset { font-size: 12.5px; }
.vi-order .vi-size { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.vi-sizes { margin-top: 18px; padding: 4px 16px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.vi-sizes .vi-size { margin-top: 10px; }
@media (pointer: coarse), (max-width: 979.98px) {
  .vi-size-btn { min-height: 44px; min-width: 48px; }
}
@media (max-width: 380px) {
  .vi-sets { grid-template-columns: 1fr 1fr; gap: 8px; }
  .vi-set-swatch { height: 74px; }
}

/* ---------- choices: a field picked from a few buttons (design 02: who is inviting) ---------- */
.vi-group-choice .vi-grouphint { clear: both; }
.vi-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; }
/* three short choices on one row (the video's languages); on a phone the tick gives way to the label */
.vi-choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vi-choices-3 .vi-choice { justify-content: center; padding: 8px 10px; text-align: center; }
@media (max-width: 479.98px) { .vi-choices-3 .vi-choice[aria-checked="true"]::after { display: none; } .vi-choices-3 .vi-choice { font-size: 13.5px; } }
.vi-choice { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; color: var(--ink); font: 700 14.5px/1.25 var(--f-body); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.vi-choice:hover { border-color: #BDA6E6; }
.vi-choice:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.vi-choice[aria-checked="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, .16); color: #4C1D95; }
.vi-choice[aria-checked="true"]::after { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--grad) center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.vi-group-choice + .vi-order { margin-top: 16px; }

/* design 02's "shows in the video as": the formal invitation in its own type, the event slides' labels */
.vi-inv { display: grid; gap: 3px; text-align: center; color: var(--ink); }
.vi-inv-l { overflow-wrap: anywhere; }
.vi-inv-it { font: italic 600 16px/1.35 "Cormorant Garamond", serif; }
.vi-inv-sm { font-size: 15px; }
.vi-inv-caps { margin: 3px 0; font: 700 12.5px/1.4 "Cinzel", serif; letter-spacing: .05em; color: #6E1423; }
.vi-inv-script { font: 400 28px/1.15 "Great Vibes", cursive; color: #7E1628; }
.vi-shows .vi-ev-label { margin-bottom: 4px; font: 700 12px/1.4 "Cinzel", serif; letter-spacing: .14em; color: var(--violet-ink); }
.vi-shows .vi-ev-serif { margin-top: 4px; font: 500 17px/1.4 "Cormorant Garamond", serif; color: var(--ink); }
.vi-shows .vi-ev-it { margin-top: 2px; font: italic 600 17px/1.4 "Cormorant Garamond", serif; color: var(--ink); }

/* ---------- template 04 "Word Tiles": names and the date as little letter tiles ---------- */
.vi-tiles { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }
.vi-tile {
  display: inline-grid; place-items: center; width: 24px; height: 26px; border-radius: 5px;
  background: linear-gradient(160deg, #f6dcaa, #e8c38a); box-shadow: inset 0 -2px 0 rgba(120, 80, 30, .25), 0 1px 2px rgba(60, 35, 10, .2);
  color: #2b1b10; font: 800 14px/1 "Bricolage Grotesque", var(--f-body);
}
.vi-tile-heart { color: #e2457c; }
.vi-tiles-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 4px; }
.vi-tiles-x { color: var(--muted); font-weight: 800; }
.vi-tiles-note { display: block; color: var(--muted); font-size: 12.5px; }
.vi-tiles-date { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }

/* ---------- template 05 "Bollywood Blockbuster": its "shows in the video as" blocks in the film's own type (painted
   Gajraj One capitals, condensed Khand), on a cream card like its poster's credits ---------- */
.vi-filmi { font-family: "Gajraj One", "Bricolage Grotesque", sans-serif; font-weight: 400; letter-spacing: .02em; color: #C1121F; text-shadow: 1px 1px 0 #8A0C18, 2px 2px 0 #6E0914; }
.vi-names-line > .vi-names-en.vi-filmi { font-size: 22px; color: #E4A21C; text-shadow: 1px 1px 0 #C1121F, 2px 2px 0 #8A0C18, 3px 3px 0 #520610; }
.vi-inv-poster { padding: 12px 10px; border-radius: 12px; background: #FFF3D6; }
.vi-inv-kh { font: 700 14px/1.35 "Khand", "Manrope", sans-serif; color: #6E0914; letter-spacing: .02em; }
.vi-inv-kh.vi-inv-caps { font-size: 13px; letter-spacing: .06em; }
.vi-inv-filmi { margin: 2px 0; font: 400 24px/1.15 "Gajraj One", "Bricolage Grotesque", sans-serif; color: #E4A21C; text-shadow: 1px 1px 0 #C1121F, 2px 2px 0 #8A0C18; }
.vi-inv-filmi .vi-names-deg { font-family: "Khand", sans-serif; font-weight: 700; color: #6E0914; text-shadow: none; }
.vi-show-card { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(193, 18, 31, .06); border: 1px solid rgba(193, 18, 31, .16); text-align: center; }
.vi-show-card .vi-ev-label { margin: 0 0 2px; font-size: 20px; letter-spacing: .03em; }
.vi-show-card .vi-ev-serif, .vi-show-card .vi-ev-it, .vi-show-card .venue { font-family: "Khand", "Manrope", sans-serif; font-weight: 700; letter-spacing: .04em; font-style: normal; }
.vi-shows .vi-ev-label.vi-filmi { font: 400 18px/1.3 "Gajraj One", "Bricolage Grotesque", sans-serif; letter-spacing: .03em; color: #C1121F; }
/* 05's six steps (its special shows have one of their own) while there is no Music step; with one, section 17's
   .vi-tabs-7 takes over. Phones: one-word labels ("Shows", "Wedding"), each column as wide as its word */
.vi-tabs.vi-tabs-shows:not(.vi-tabs-7) { grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 1.35fr) minmax(0, 1.1fr); }
@container (max-width: 440px) {
  .vi-tabs.vi-tabs-shows:not(.vi-tabs-7) { grid-template-columns: repeat(6, auto); }
  .vi-tabs-shows:not(.vi-tabs-7) .vi-tab { font-size: 11.5px; letter-spacing: -.015em; }
}
@container (max-width: 360px) {
  .vi-tabs.vi-tabs-shows:not(.vi-tabs-7) { gap: 1px; padding: 3px; }
  .vi-tabs-shows:not(.vi-tabs-7) .vi-tab { padding: 8px 0; font-size: 10.5px; }
}
@container (max-width: 300px) {
  .vi-tabs.vi-tabs-shows:not(.vi-tabs-7) { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .vi-tabs.vi-tabs-shows:not(.vi-tabs-7)::-webkit-scrollbar { display: none; }
  .vi-tabs-shows:not(.vi-tabs-7) .vi-tab { padding: 8px 4px; }
}

/* ---------- template 06 "Truck-Art Mela": its "shows in the video as" blocks in the film's own type (Shrikhand truck
   lettering with an ink-edged drop, Khand capitals), the invitation on a cream signboard, each event a stall card.
   Its six steps share 05's tab layout (.vi-tabs-shows: "Events" is one word too) ---------- */
.vi-truck { font-family: "Shrikhand", "Bricolage Grotesque", sans-serif; font-weight: 400; letter-spacing: .01em; color: #E8186F; text-shadow: 1px 1px 0 #FFC300, 2px 2px 0 #FFC300, 3px 3px 0 #140808; }
.vi-names-line > .vi-names-en.vi-truck { font-size: 21px; color: #FFC300; -webkit-text-stroke: .6px #140808; text-shadow: 1px 1px 0 #E8186F, 2px 2px 0 #E8186F, 3px 3px 0 #140808; }
.vi-inv-board { padding: 12px 10px; border-radius: 12px; background: #FBE8C4; border: 3px solid #E8186F; box-shadow: inset 0 0 0 2px #FFF4DC; }
.vi-inv-board .vi-inv-kh { font: 500 14px/1.35 "Khand", "Manrope", sans-serif; color: #6E0914; letter-spacing: .02em; }
.vi-inv-board .vi-inv-kh.vi-inv-caps { font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.vi-inv-board .vi-inv-ours { font-weight: 700; font-size: 11px; letter-spacing: .18em; color: #C0152D; }
.vi-inv-truck { margin: 2px 0; font: 400 22px/1.2 "Shrikhand", "Bricolage Grotesque", sans-serif; color: #E8186F; text-shadow: 1px 1px 0 #FFC300, 2px 2px 0 #140808; }
.vi-inv-truck .vi-names-deg { font-family: "Khand", sans-serif; font-weight: 700; color: #6E0914; text-shadow: none; }
.vi-stall-card { background: rgba(14, 124, 123, .07); border-color: rgba(14, 124, 123, .22); }
.vi-shows .vi-ev-label.vi-truck { font: 400 19px/1.3 "Shrikhand", "Bricolage Grotesque", sans-serif; letter-spacing: .01em; }
.vi-stall-no { margin: 0 0 4px; font: 700 11px/1.2 "Khand", "Manrope", sans-serif; letter-spacing: .16em; color: #0A5C5C; }
.vi-shows .vi-truck-date { font-family: "Khand", "Manrope", sans-serif; font-weight: 700; letter-spacing: .04em; color: #6E0914; }

/* ── 17 · the Music step (music.js; owner, 2026-10-06 "add audio field") ─────────────────────── */
/* the step tabs with Music before the check: six (01–03), five (Word Tiles) or seven (05: its shows); the long labels
   keep their width */
.vi-tabs.vi-tabs-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr) minmax(0, .85fr) minmax(0, 1.3fr); }
.vi-tabs.vi-tabs-5 { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, 1.55fr) minmax(0, .85fr) minmax(0, 1.3fr); }
.vi-tabs.vi-tabs-7 { grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, 1.1fr); }
/* phones: each column at least as wide as its one-word label ("Invitation" needs more than "Style"), the rest shared */
@container (max-width: 440px) {
  .vi-tabs.vi-tabs-5 { grid-template-columns: repeat(5, auto); }
  .vi-tabs.vi-tabs-6 { grid-template-columns: repeat(6, auto); }
  .vi-tabs-6 .vi-tab { font-size: 11.5px; letter-spacing: -.015em; }
  /* seven one-word labels do not fit every phone: the bar scrolls sideways (the open step is kept in view) */
  .vi-tabs.vi-tabs-7 { grid-template-columns: repeat(7, auto); gap: 1px; padding: 3px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .vi-tabs.vi-tabs-7::-webkit-scrollbar { display: none; }
  .vi-tabs-7 .vi-tab { padding: 8px 3px; font-size: 11px; letter-spacing: -.015em; }
}
@container (max-width: 360px) {
  .vi-tabs.vi-tabs-6 { gap: 1px; padding: 3px; }
  .vi-tabs-6 .vi-tab { padding: 8px 0; font-size: 10.5px; }
}
/* the narrowest screens (a folded phone, ~280 px): the tabs scroll sideways inside their bar rather than overlap */
@container (max-width: 300px) {
  .vi-tabs.vi-tabs-5, .vi-tabs.vi-tabs-6 { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .vi-tabs.vi-tabs-5::-webkit-scrollbar, .vi-tabs.vi-tabs-6::-webkit-scrollbar { display: none; }
  .vi-tabs-5 .vi-tab, .vi-tabs-6 .vi-tab { padding: 8px 4px; }
}

/* the choices: a radio group of cards (one obvious action per screen) */
.vi-mcards { display: grid; gap: 10px; margin-top: 18px; }
.vi-mcard { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; width: 100%; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.vi-mcard:hover { border-color: #C4ACF2; }
.vi-mcard[aria-checked="true"] { border-color: #A98AF0; background: #FBF9FF; box-shadow: inset 0 0 0 1px #A98AF0; }
.vi-mcard-dot { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--field-line); border-radius: 50%; }
.vi-mcard[aria-checked="true"] .vi-mcard-dot { border-color: var(--violet); }
.vi-mcard[aria-checked="true"] .vi-mcard-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--grad); }
.vi-mcard-t { font: 800 15.5px/1.25 var(--f-body); }
.vi-mcard-tag { grid-row: 1; grid-column: 3; padding: 3px 9px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font: 800 11px/1.25 var(--f-body); }
.vi-mcard-d { grid-column: 2 / 4; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.vi-merr, .vi-mferr { margin-top: 12px; }
.vi-msrc { margin-top: 16px; }
.vi-mpick { width: 100%; }
.vi-mfine { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; text-align: center; }
.vi-mreading { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--ink-2); font-weight: 700; }
.vi-mspin { flex: none; width: 18px; height: 18px; border: 2.5px solid var(--line-2); border-top-color: var(--violet); border-radius: 50%; animation: vi-mspin .8s linear infinite; }
@keyframes vi-mspin { to { transform: rotate(360deg); } }

/* the part: the song's waveform and a box as long as the video */
.vi-msong { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 16px; padding: 12px; border-radius: 14px; background: var(--soft); }
.vi-msong-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--grad); color: #fff; font-size: 19px; }
.vi-msong-txt { min-width: 0; }
.vi-msong-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.vi-msong-sub { display: block; color: var(--ink-2); font-size: 12.5px; }
.vi-mh { margin: 20px 0 4px; font: 800 18px/1.25 var(--f-head); }
.vi-mhint { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.vi-wave { position: relative; height: 92px; margin-top: 12px; border-radius: 14px; background: #F6F2FB; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.vi-wave-c { position: absolute; inset: 0; width: 100%; height: 100%; }
.vi-wave-box { position: absolute; top: 0; bottom: 0; border: 3px solid var(--violet); border-radius: 12px; background: rgba(124, 58, 237, .08); box-shadow: 0 0 0 9999px rgba(246, 242, 251, .55); cursor: grab; }
.vi-wave.is-grabbing .vi-wave-box { cursor: grabbing; }
.vi-wave-box::before, .vi-wave-box::after { content: ""; position: absolute; top: 50%; width: 4px; height: 26px; margin-top: -13px; border-radius: 2px; background: var(--violet); }
.vi-wave-box::before { left: 5px; }
.vi-wave-box::after { right: 5px; }
.vi-wave-box:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.vi-wave-head { position: absolute; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; border-radius: 1px; background: #E5484D; pointer-events: none; }
.vi-mtimes { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.vi-mpart { flex: 1; font: 800 15px/1.2 var(--f-body); font-variant-numeric: tabular-nums; text-align: center; }
.vi-mpart small { display: block; color: var(--ink-2); font: 600 12px/1.35 var(--f-body); }
.vi-mnudge { flex: none; min-width: 64px; min-height: 40px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font: 800 13px/1 var(--f-body); cursor: pointer; }
.vi-mnudge:disabled { opacity: .45; cursor: default; }
.vi-mplay { width: 100%; justify-content: center; min-height: 46px; margin-top: 14px; font-size: 14.5px; }
.vi-mplay-ic svg { display: block; }
.vi-msilent { margin-top: 6px; }
.vi-mtick { margin-top: 14px; }
.vi-muse { width: 100%; margin-top: 14px; }
.vi-mback { margin: 12px 0 0; }

/* the chosen song: its part, the upload, change / remove */
.vi-mset { margin-top: 16px; }
.vi-mset > .vi-msong { margin-top: 0; }
.vi-mup { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.vi-mup .vi-bar { flex: 1; }
.vi-mup.is-done { color: var(--ok); }
.vi-mup.is-err { color: var(--err); }
.vi-mup.is-err .vi-bar { display: none; }
.vi-mnote { text-align: left; }
.vi-mset .vi-err { margin-top: 10px; }
.vi-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 14px; }
.vi-mremove { color: var(--err); }
.vi-sum-wait { display: block; margin-top: 2px; color: var(--ink-2); font-size: 12.5px; font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .vi-mspin { animation-duration: 2.4s; } }