/* 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;
  --f-ml: "Manjari", "Noto Sans Malayalam", "Malayalam Sangam MN", "Kartika", "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); }
[lang="ml"] { font-family: var(--f-ml); }
.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[lang="ml"] { font-family: var(--f-ml); font-weight: 400; }
.ta-opt:lang(ml), .ta-sugg:lang(ml) .ta-opt, .ta-opt[lang="ml"] { font-family: var(--f-ml); font-weight: 700; }
.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); }
/* a line never clips itself: editor.js fits it to the card, and script swashes reach into the swatch's padding */
.vi-set-line { display: block; max-width: 100%; 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; }

/* ---------- template 07 "Royal Rajwada Utsav": its "shows in the video as" blocks in the film's own type (Rozha One
   titles and names, Cinzel capitals), maroon and antique gold on the ivory of its royal scroll, sealed in red wax; each
   event a kite card, the wedding's date on a gold seal. Its six steps share 05's tab layout (.vi-tabs-shows) ---------- */
.vi-royal { font-family: "Rozha One", "Bricolage Grotesque", serif; font-weight: 400; color: #7A0E2E; }
.vi-royal-caps { font: 700 12.5px/1.45 "Cinzel", "Manrope", serif; letter-spacing: .06em; color: #5A0A22; }
.vi-names-line > .vi-names-en.vi-royal { font-size: 22px; }
.vi-names-amp.vi-royal-amp { font: 400 18px/1.1 "Rozha One", serif; color: #A8701A; }
.vi-names-sub.vi-royal-caps { color: #A8701A; letter-spacing: .12em; }
.vi-inv-scroll { padding: 12px 10px; border-radius: 12px; background: #FFF6E6; border: 2px solid #C9962B; box-shadow: inset 0 0 0 3px #F6E2A8; }
.vi-inv-scroll .vi-inv-rz { font: 400 14px/1.4 "Rozha One", "Manrope", serif; color: #5A0A22; }
.vi-inv-scroll .vi-inv-title { color: #7A0E2E; }
.vi-inv-scroll .vi-inv-name { margin: 2px 0; font: 400 24px/1.2 "Rozha One", "Manrope", serif; color: #7A0E2E; }
.vi-inv-scroll .vi-inv-conn { font: 700 12px/1.3 "Cinzel", "Manrope", serif; letter-spacing: .08em; text-transform: uppercase; color: #A8701A; }
.vi-inv-scroll .vi-names-deg { font-family: "Cinzel", serif; font-weight: 700; color: #A8701A; }
.vi-shows .vi-inv-seal { justify-self: center; display: grid; place-items: center; width: 44px; height: 44px; margin: 6px 0 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C8283C, #9A1426 60%, #6A0A18); font: 400 12px/1 "Rozha One", serif; color: #F9C9CF; }
.vi-kite-card { background: rgba(214, 36, 110, .06); border-color: rgba(214, 36, 110, .2); }
.vi-shows .vi-ev-label.vi-royal { font: 400 20px/1.3 "Rozha One", "Bricolage Grotesque", serif; letter-spacing: .01em; color: #7A0E2E; }
.vi-shows .vi-royal-date { font: 400 18px/1.35 "Rozha One", serif; color: #7A0E2E; }
.vi-shows .vi-royal-venue { color: #A8701A; }
.vi-shows .vi-royal-seal { display: inline-grid; place-items: center; min-width: 132px; margin: 12px 6px 14px; padding: 12px 18px; border-radius: 999px;
  background: radial-gradient(circle at 50% 40%, #8A1538, #4A0818); box-shadow: 0 0 0 4px #E2B04A, 0 0 0 6px #8A6214; }
.vi-royal-seal-d { font: 400 17px/1.25 "Rozha One", serif; color: #F3D27C; }
.vi-royal-seal-w { font: 700 10.5px/1.4 "Cinzel", serif; letter-spacing: .16em; color: #FFF3D6; }

/* ---------- template 08 "Kovil Kalyanam": its "shows in the video as" blocks in the film's own type (Allura script for
   the names, Cormorant SC capitals, Cormorant Garamond lines; Tamil in Arima and Noto Serif Tamil), maroon ink on the
   cream of its courtyard wall ---------- */
.vi-kovil-script { font-family: "Allura", "Cormorant Garamond", serif; font-weight: 400; color: #7A1626; }
.vi-kovil-script:lang(ta), .vi-inv-kovil:lang(ta) .vi-kovil-script { font-family: "Arima", "Noto Serif Tamil", sans-serif; font-weight: 700; }
.vi-names-line > .vi-names-en.vi-kovil-script { font-size: 24px; }
.vi-names-line > .vi-names-en.vi-kovil-script:lang(ta) { font-size: 19px; }
.vi-inv-kovil { padding: 12px 10px; border-radius: 12px; background: #FBF1DE; }
.vi-inv-kovil .vi-inv-l { font: 600 14px/1.35 "Cormorant Garamond", "Manrope", serif; color: #4A2516; }
.vi-inv-kovil:lang(ta) .vi-inv-l { font-family: "Noto Serif Tamil", "Arima", serif; font-weight: 500; font-size: 13px; line-height: 1.55; }
.vi-inv-kovil .vi-inv-k-caps { font-family: "Cormorant SC", "Cormorant Garamond", serif; font-weight: 700; letter-spacing: .04em; color: #7A1626; }
.vi-inv-kovil:lang(ta) .vi-inv-k-caps { letter-spacing: 0; }
.vi-inv-kovil .vi-inv-k-name { margin: 2px 0; font-size: 26px; line-height: 1.15; }
.vi-inv-kovil:lang(ta) .vi-inv-k-name { font-size: 18px; }
.vi-inv-kovil .vi-inv-k-sm { font-size: 13px; }
.vi-inv-kovil .vi-names-deg { font-family: "Cormorant SC", serif; font-weight: 700; color: #7A1626; }
.vi-shows .vi-venue-hall { font-weight: 700; }

/* ---------- template 09 "Kerala Kalyanam": its "shows in the video as" blocks in the film's own type (Great Vibes
   script for the names, Cinzel capitals, Cormorant Garamond lines; Malayalam in Manjari and Noto Serif Malayalam — the
   video's own faces, from web/kerala/fonts.css), maroon ink on the pale palm leaf ---------- */
.vi-kerala-script { font-family: "Great Vibes", "Cormorant Garamond", serif; font-weight: 400; color: #7A1626; }
.vi-kerala-script:lang(ml), .vi-inv-kerala:lang(ml) .vi-kerala-script { font-family: "Manjari", var(--f-ml); font-weight: 700; }
.vi-names-line > .vi-names-en.vi-kerala-script { font-size: 25px; }
.vi-names-line > .vi-names-en.vi-kerala-script:lang(ml) { font-size: 19px; }
.vi-names-line.vi-kerala-intro { display: grid; justify-items: center; gap: 1px; margin-bottom: 8px; }
.vi-kerala-intro .vi-names-sub { font-family: "Cinzel", "Manrope", serif; font-weight: 700; letter-spacing: .1em; }
.vi-kerala-intro .vi-names-sub:lang(ml) { font-family: "Noto Serif Malayalam", var(--f-ml); letter-spacing: 0; }
.vi-kerala-from { font: italic 600 13.5px/1.35 "Cormorant Garamond", "Manrope", serif; color: #4A2516; text-align: center; }
.vi-kerala-from:lang(ml) { font: 500 12.5px/1.6 "Noto Serif Malayalam", var(--f-ml); }
.vi-kerala-then { display: block; margin: 4px 0 2px; font: 600 11.5px/1.4 "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3, #6B6478); }
.vi-inv-kerala { padding: 12px 10px; border-radius: 12px; background: #F6EBCB; }
.vi-inv-kerala .vi-inv-l { font: italic 600 14px/1.35 "Cormorant Garamond", "Manrope", serif; color: #3A1C0E; }
.vi-inv-kerala:lang(ml) .vi-inv-l { font: 500 13px/1.6 "Noto Serif Malayalam", var(--f-ml); }
.vi-inv-kerala .vi-inv-k-caps { font-family: "Cinzel", "Cormorant Garamond", serif; font-style: normal; font-weight: 700; font-size: 12.5px; letter-spacing: .05em; color: #7A1626; }
.vi-inv-kerala:lang(ml) .vi-inv-k-caps { font-family: "Noto Serif Malayalam", var(--f-ml); font-weight: 600; letter-spacing: 0; }
.vi-inv-kerala .vi-inv-k-name { margin: 2px 0; font-style: normal; font-size: 27px; line-height: 1.15; }
.vi-inv-kerala:lang(ml) .vi-inv-k-name { font-size: 18px; }
.vi-inv-kerala .vi-inv-k-sm { font-size: 13px; }

/* ── 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; } }