/* THE SETUP WIZARD'S LOOK. Landing page tokens, scoped to the wizard only.
 *
 * The wizard borrows the landing page's design language (Outfit headings, the
 * warm dark background, amber primary buttons with dark ink, the same pill
 * radii) so sign-up and setup read as one product. It is declared inside .wiz
 * and .wiz-back so that NOTHING here reaches the app after the wizard, which
 * keeps its own look. Values are from css/landing.css :root. Amber is a fill,
 * never text on a light surface. */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-600-latin.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

.wiz, .wiz-back, .wiz-hold {
  --wz-night: #120e0b;
  --wz-night-2: #19140f;
  --wz-night-3: #241d17;
  --wz-cream: #f3eee8;
  --wz-cream-2: #c3b7aa;
  --wz-cream-3: #a99c90;
  --wz-amber: #ffb627;
  --wz-violet: #8f55e8;
  --wz-violet-2: #a566ee;
  --wz-violet-3: #bc7af2;
  --wz-ink: #1c1406;
  --wz-line: rgba(243, 238, 232, .14);
  --wz-good: #7fd6a0;
  --wz-warn: #ffd27a;
  --wz-bad: #ff9c8f;
  --wz-head: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wz-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wz-ease: cubic-bezier(.2, .8, .2, 1);
  font-family: var(--wz-body);
}

section[data-view="welcome"] { padding: 0; }

.wiz {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  background: radial-gradient(120% 60% at 50% 0%, #241a10 0%, var(--wz-night) 60%);
  background-color: var(--wz-night);
  color: var(--wz-cream);
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.wiz *, .wiz *::before, .wiz *::after { box-sizing: border-box; }
.wiz > * { width: 100%; max-width: 520px; }

.wiz-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.wiz-logo { display: block; width: 150px; line-height: 0; }
.wiz-logo svg { width: 100%; height: auto; }
.wiz-close {
  width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--wz-line);
  background: transparent; color: var(--wz-cream); font-size: 26px; line-height: 1; cursor: pointer;
}

.wiz-progress { margin: 18px 0 14px; }
.wiz-progress-say { display: block; font-size: 14px; color: var(--wz-cream-2); margin-bottom: 8px; }
.wiz-progress-track { display: block; height: 6px; border-radius: 999px; background: var(--wz-night-3); overflow: hidden; }
.wiz-progress-track i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--wz-violet-2), var(--wz-violet-3));
  transition: width .35s var(--wz-ease);
}
.wiz-progress-say { color: var(--wz-cream-2); }

.wiz-card {
  background: var(--wz-night-2);
  border: 1px solid var(--wz-line);
  border-top: 3px solid var(--wz-violet-2);
  border-radius: 24px;
  padding: 22px 18px 20px;
  flex: 1 1 auto;
}
.wiz-card h1 {
  font: 600 28px/1.15 var(--wz-head);
  letter-spacing: -.01em;
  margin: 0 0 6px;
  outline: none;
}
.wiz-line { margin: 0 0 20px; color: var(--wz-cream-2); font-size: 16px; }

.wiz-field { margin: 0 0 18px; }
.wiz-label, .wiz-field label { display: block; font-weight: 600; font-size: 15px; margin: 0 0 6px; color: var(--wz-cream); }
.wiz-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wiz-label-row label, .wiz-label-row .wiz-label { margin: 0; }
.wiz-label-row { margin-bottom: 6px; }
.wiz-hint { margin: 6px 0 0; font-size: 14px; color: var(--wz-cream-2); }
.wiz-field input[type="text"] {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 14px;
  border: 1.5px solid rgba(243, 238, 232, .5); background: var(--wz-night); color: var(--wz-cream);
  font: 400 17px/1.2 var(--wz-body);
}
.wiz-field input::placeholder { color: var(--wz-cream-3); }

.wiz-help {
  flex: none; width: 44px; height: 44px; margin: -8px -8px -8px 0; border-radius: 999px; border: 0;
  background: transparent; color: var(--wz-cream); font: 600 16px/1 var(--wz-body); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; position: relative; isolation: isolate;
}
.wiz-help::before {
  content: ""; position: absolute; inset: 8px; border-radius: 999px; z-index: -1;
  border: 1.5px solid var(--wz-violet-3);
}
.wiz-help span, .wiz-help { z-index: 0; }
.wiz-copy .wiz-help { display: inline-flex; vertical-align: middle; margin: -12px 0 -12px 2px; }
.wiz-help[aria-expanded="true"]::before { background: var(--wz-night-3); border-color: var(--wz-violet-3); }
.wiz-help { color: var(--wz-violet-3); }
.wiz-help-panel {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--wz-night-3);
  border: 1px solid var(--wz-line); font-size: 15px; color: var(--wz-cream);
}

.wiz-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.wiz-seg-btn {
  flex: 1 1 0; min-width: 96px; min-height: 48px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid rgba(243, 238, 232, .5); background: transparent; color: var(--wz-cream);
  font: 600 15px/1.1 var(--wz-body); cursor: pointer;
  transition: background .2s var(--wz-ease), border-color .2s ease;
}
.wiz-seg-btn[aria-checked="true"] { background: var(--wz-violet-2); color: var(--wz-ink); border-color: var(--wz-violet-2); }
.wiz-seg-btn[aria-disabled="true"] { opacity: .7; cursor: not-allowed; }

.wiz-copy { margin: 0 0 14px; font-size: 15px; color: var(--wz-cream-2); }
.wiz-note { margin: 14px 0 0; font-size: 14px; color: var(--wz-cream-2); }
.wiz-note.is-good { color: var(--wz-good); }
.wiz-note.is-warn {
  color: var(--wz-warn); margin: 0 0 14px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(255, 210, 122, .4); background: rgba(255, 182, 39, .08);
}
.wiz-note.is-good { margin-bottom: 14px; }
.wiz-error { margin: 12px 0 0; font-size: 15px; color: var(--wz-bad); }
.wiz-skipnote { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--wz-cream-2); }

.wiz-status {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 14px;
  border-radius: 14px; background: var(--wz-night-3); border: 1px solid var(--wz-line); font-size: 15px;
}
.wiz-status-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--wz-cream-3); }
.wiz-status.is-started .wiz-status-dot, .wiz-status.is-reviewing .wiz-status-dot { background: var(--wz-warn); }
.wiz-status.is-ready .wiz-status-dot { background: var(--wz-good); }

.wiz-count { margin: 0 0 12px; font-weight: 600; color: var(--wz-cream); }
.wiz-routes { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.wiz-routes li {
  display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--wz-night-3);
  border: 1px solid var(--wz-line); font-size: 15px;
}
.wiz-routes li span { color: var(--wz-cream-2); font-size: 14px; }
.wiz-field-mode { margin-top: 20px; }

.wiz-address {
  margin: 0; padding: 14px; border-radius: 14px; background: var(--wz-night-3);
  border: 1px solid var(--wz-line); font: 600 17px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.wiz-checks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.wiz-checks li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--wz-night-3); border: 1px solid var(--wz-line);
}
.wiz-tick {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(243, 238, 232, .4);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--wz-ink);
}
.wiz-checks li.is-done .wiz-tick { background: var(--wz-good); border-color: var(--wz-good); }
.wiz-tick-say { margin-left: auto; font-size: 14px; color: var(--wz-cream-2); white-space: nowrap; }

.wiz-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1.5px solid transparent; font: 600 16px/1 var(--wz-body); cursor: pointer;
  white-space: nowrap; transition: transform .2s var(--wz-ease), box-shadow .2s ease, border-color .2s ease;
}
.wiz-btn:active { transform: scale(.97); }
.wiz-btn:disabled, .wiz-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.wiz-btn-primary { background: var(--wz-amber); color: var(--wz-ink); box-shadow: 0 8px 22px -14px rgba(255, 182, 39, .7); }
.wiz-btn-ghost { background: rgba(243, 238, 232, .04); color: var(--wz-cream); border-color: rgba(243, 238, 232, .45); }
.wiz-btn-block { width: 100%; }
.wiz-btn-go { min-height: 56px; font-size: 18px; }

.wiz-nav {
  display: flex; gap: 10px; margin-top: 12px; position: sticky; bottom: 0; z-index: 2;
  padding: 12px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--wz-night);
  border-top: 1px solid var(--wz-line);
}
.wiz-nav .wiz-btn { flex: 1 1 0; padding: 0 12px; }
.wiz-nav #wizNext { flex: 1.4 1 0; }

.wiz button:focus-visible, .wiz input:focus-visible, .wiz-back a:focus-visible, .wiz-hold button:focus-visible {
  outline: 3px solid var(--wz-amber); outline-offset: 2px;
}

.wiz-enter { animation: wiz-in .28s var(--wz-ease); }
@keyframes wiz-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wiz-enter { animation: none; }
  .wiz-btn, .wiz-seg-btn { transition: none; }
  .wiz-btn:active { transform: none; }
}

@media (min-width: 720px) {
  .wiz { padding-top: 40px; justify-content: flex-start; }
  .wiz > * { max-width: 600px; }
  .wiz-nav { position: static; background: none; border-top: 0; padding: 16px 0 0; }
  .wiz-card { padding: 28px 28px 24px; flex: 0 1 auto; }
  .wiz-card h1 { font-size: 34px; }
}

/* The bar on Stripe, songs and print when the wizard sent somebody there.
   Sticky and never fixed: section[data-view] carries container-type, which in
   WebKit makes fixed positioning resolve against the wrong box (CLAUDE.md). */
.wiz-back {
  position: sticky; top: 0; z-index: 60;
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, calc((100% - 600px) / 2)) 8px;
  background: var(--wz-night); border-bottom: 1px solid var(--wz-line);
}
.wiz-back.has-continue { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.wiz-back.has-continue .wiz-back-link { background: transparent; color: var(--wz-cream); border: 1.5px solid rgba(243, 238, 232, .5); }
.wiz-continue-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--wz-amber); color: var(--wz-ink); font: 600 16px/1 var(--wz-body); text-decoration: none; box-shadow: 0 8px 22px -14px rgba(255, 182, 39, .8); }
.wiz-back-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--wz-amber); color: var(--wz-ink); font: 600 16px/1 var(--wz-body); text-decoration: none;
}

/* THE DASHBOARD SETUP CARD. A brand card, not a grey one: the landing page's
   warm dark with the logo's violet and the amber of the primary button, and
   fixed whatever the app theme is, so it reads the same in Dark, Light and
   Stage. It is the one thing on the dashboard that asks for something, so it
   is the one thing that looks different. Contrast: cream on #1d1630 is above
   13:1, cream-2 above 8:1, violet text #BC7AF2 above 6:1, ink on amber above
   10:1. Only layout and look here; nothing else in the app is restyled. */
.setup-card {
  --sc-night: #1d1630; --sc-night-2: #2a1f47; --sc-cream: #f3eee8; --sc-cream-2: #cfc6dc;
  --sc-violet: #8f55e8; --sc-violet-2: #a566ee; --sc-violet-3: #bc7af2; --sc-amber: #ffb627; --sc-ink: #1c1406;
  scroll-margin-top: 72px;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--sc-night-2) 0%, var(--sc-night) 62%);
  color: var(--sc-cream);
  border: 1px solid rgba(188, 122, 242, .45);
  border-radius: 20px; padding: 18px 16px 14px;
  box-shadow: 0 14px 34px -22px rgba(143, 85, 232, .9);
}
.setup-card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sc-violet), var(--sc-amber));
}
.setup-card[hidden] { display: none; }
.setup-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.setup-card-heading { margin: 0; font: 600 22px/1.1 "Outfit", ui-sans-serif, system-ui, sans-serif; color: var(--sc-cream); }
.setup-continue {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--sc-amber); color: var(--sc-ink); font: 600 15px/1 ui-sans-serif, system-ui, sans-serif;
  text-decoration: none; box-shadow: 0 8px 22px -14px rgba(255, 182, 39, .9);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
}
.setup-continue:hover { box-shadow: 0 12px 26px -12px rgba(255, 182, 39, 1); transform: translateY(-1px); }
.setup-continue:active { transform: scale(.97); }
.setup-continue .setup-chev { width: 16px; height: 16px; }
.setup-bar { height: 10px; border-radius: 999px; background: rgba(243, 238, 232, .14); overflow: hidden; margin: 0 0 14px; }
.setup-bar span {
  display: block; height: 100%; width: var(--setup-fill, 0%); border-radius: 999px;
  background: linear-gradient(90deg, var(--sc-violet-2), var(--sc-amber));
  animation: setup-fill .9s cubic-bezier(.2, .8, .2, 1);
}
@keyframes setup-fill { from { width: 0; } to { width: var(--setup-fill, 0%); } }
.setup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.setup-list li { display: flex; align-items: stretch; gap: 8px; }
.setup-link {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 8px 14px; border-radius: 14px; color: var(--sc-cream); text-decoration: none;
  background: rgba(243, 238, 232, .06); border: 1px solid rgba(188, 122, 242, .3);
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.setup-link:hover { background: rgba(165, 102, 238, .22); border-color: var(--sc-violet-3); }
.setup-link:active { transform: scale(.985); }
.setup-link-main { display: grid; gap: 2px; min-width: 0; }
.setup-link-label { font-weight: 600; font-size: 16px; }
.setup-link-sub { font-size: 13px; color: var(--sc-cream-2); }
.setup-chev { flex: none; width: 18px; height: 18px; color: var(--sc-violet-3); }
.setup-skip {
  flex: none; min-height: 52px; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(207, 198, 220, .55);
  background: transparent; color: var(--sc-cream-2); font: inherit; font-size: 13px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.setup-skip:hover { background: rgba(243, 238, 232, .1); color: var(--sc-cream); }
.setup-card a:focus-visible, .setup-card button:focus-visible { outline: 3px solid var(--sc-amber); outline-offset: 2px; }
.setup-flash { animation: setup-flash 1.8s ease-out; }
@keyframes setup-flash { 0%, 55% { box-shadow: 0 0 0 3px #ffb627; } 100% { box-shadow: 0 0 0 3px rgba(255, 182, 39, 0); } }
@media (prefers-reduced-motion: reduce) {
  .setup-flash { animation: none; }
  .setup-bar span { animation: none; }
  .setup-continue, .setup-link, .setup-skip { transition: none; }
  .setup-continue:hover, .setup-continue:active, .setup-link:active { transform: none; }
}


/* ---- the extra field kinds (violet for what is chosen, amber for the main button) ---- */
.wiz-card h1 { color: var(--wz-cream); }
.wiz-field select {
  width: 100%; min-height: 48px; padding: 0 12px; border-radius: 14px; border: 1.5px solid rgba(243, 238, 232, .5);
  background: var(--wz-night); color: var(--wz-cream); font: 400 17px/1.2 var(--wz-body);
}
.wiz-prefixed { display: flex; align-items: center; border: 1.5px solid rgba(243, 238, 232, .5); border-radius: 14px; background: var(--wz-night); overflow: hidden; }
.wiz-prefixed:focus-within { outline: 3px solid var(--wz-amber); outline-offset: 2px; }
.wiz-prefix { padding: 0 0 0 14px; color: var(--wz-cream-2); font-size: 15px; white-space: nowrap; }
.wiz-prefixed input { border: 0 !important; min-height: 48px; min-width: 0; flex: 1 1 auto; background: transparent !important; outline: none !important; padding-left: 2px !important; }
.wiz-hint.is-bad { color: var(--wz-bad); }
.wiz-confirm { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 182, 39, .08); border: 1px solid rgba(255, 210, 122, .4); }
.wiz-warn-text { margin: 0 0 8px; font-size: 14px; color: var(--wz-warn); }
.wiz-check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 15px; }
.wiz-check input { width: 22px; height: 22px; accent-color: var(--wz-violet-2); }

.wiz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid rgba(243, 238, 232, .5); background: transparent; color: var(--wz-cream);
  font: 600 14px/1 var(--wz-body); cursor: pointer;
}
.wiz-chip[aria-checked="true"] { background: var(--wz-violet-2); color: var(--wz-ink); border-color: var(--wz-violet-2); }
.wiz-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(243, 238, 232, .6); flex: none; }

.wiz-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.wiz-switch { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; flex: 1 1 auto; font-size: 16px; }
.wiz-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wiz-switch-track { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--wz-night-3); border: 1.5px solid rgba(243, 238, 232, .5); position: relative; transition: background .2s ease; }
.wiz-switch-knob { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--wz-cream); transition: transform .2s var(--wz-ease); }
.wiz-switch input:checked + .wiz-switch-track { background: var(--wz-violet-2); border-color: var(--wz-violet-2); }
.wiz-switch input:checked + .wiz-switch-track .wiz-switch-knob { transform: translateX(18px); background: var(--wz-ink); }
.wiz-switch input:focus-visible + .wiz-switch-track { outline: 3px solid var(--wz-amber); outline-offset: 2px; }
.wiz-switch-row.is-off .wiz-switch-label, .wiz-switch input:disabled ~ .wiz-switch-label { color: var(--wz-cream-2); }
.wiz-switch-row.is-off .wiz-switch-track, .wiz-switch input:disabled + .wiz-switch-track { opacity: .6; }
.wiz-switch-row .wiz-help-panel { flex: 1 1 100%; }
.wiz-state-note { margin: 0 0 12px; font-size: 14px; color: var(--wz-cream-2); }
.wiz-card .pro-pill { margin-left: 6px; }
.wiz-card .pro-locked-line { margin: 0 0 12px; font-size: 14px; color: var(--wz-cream-2); }

.wiz-file { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wiz-file-btn { cursor: pointer; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wiz-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wiz-amount { display: flex; align-items: center; gap: 4px; border: 1.5px solid rgba(243, 238, 232, .5); border-radius: 14px; background: var(--wz-night); padding-left: 10px; }
.wiz-amount:focus-within { outline: 3px solid var(--wz-amber); outline-offset: 2px; }
.wiz-pound { color: var(--wz-cream-2); }
.wiz-amount input { width: 100%; min-width: 0; min-height: 48px; border: 0 !important; background: transparent !important; color: var(--wz-cream); font: 400 17px/1.2 var(--wz-body); outline: none !important; padding: 0 4px !important; }
@media (max-width: 380px) { .wiz-amounts { grid-template-columns: repeat(2, 1fr); } }

/* the preview of the audience page: the page's own theme tokens, drawn small */
@media (prefers-reduced-motion: reduce) { .wiz-progress-track i, .wiz-switch-track, .wiz-switch-knob { transition: none; } }


/* ---- round one fixes ---- */
.wiz-field .wiz-file-btn, .wiz-field .wiz-amount { display: flex; margin: 0; }
.wiz-field .wiz-file-btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; color: var(--wz-cream); }
.wiz-seg { align-items: stretch; }
.wiz-seg-btn { padding: 8px 12px; line-height: 1.2; white-space: normal; }
.wiz-field.is-off .wiz-seg-btn, .wiz-field.is-off .wiz-chip { opacity: .6; }
.wiz-field.is-off .wiz-seg-btn { opacity: .85; }
.wiz-field.is-off .wiz-seg-btn[aria-checked="true"] { background: rgba(165, 102, 238, .3); color: var(--wz-cream); border-color: var(--wz-violet-3); }
.wiz-switch input:disabled:checked + .wiz-switch-track { background: rgba(243, 238, 232, .22); border-color: rgba(243, 238, 232, .5); }
.wiz-switch input:disabled:checked + .wiz-switch-track .wiz-switch-knob { background: var(--wz-cream-2); }
.wiz-card .pro-pill { background: var(--wz-violet-2); color: var(--wz-ink); font-style: normal; }
.wiz-card { flex: 0 0 auto; }
.wiz-nav { margin-top: auto; }
.wiz-field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23bc7af2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* The switch is a <label>, and inside a .wiz-field the generic label rule made
   it a block and hid its track: keep it a flex row. */
.wiz-field .wiz-switch { display: flex; margin: 0; font-weight: 400; }

.wiz-file input:focus-visible + .wiz-file-btn { outline: 3px solid var(--wz-amber); outline-offset: 2px; }
.wiz-card .pro-locked > * { opacity: .8; }
.wiz-card .pro-locked .pro-pill { opacity: 1; }
.wiz-subfield { margin-top: 12px; }
.wiz-subfield label { display: block; font-size: 15px; margin: 0 0 6px; }
.wiz-subfield input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1.5px solid rgba(243, 238, 232, .5); background: var(--wz-night); color: var(--wz-cream); font: 400 17px/1.2 var(--wz-body); }
.wiz-group { margin: 0 0 18px; }

@media (min-width: 720px) { .wiz-nav { margin-top: 16px; } }

/* Option cards: a larger radio choice with a title and one line. */
.wiz-cards { display: grid; gap: 10px; }
.wiz-card-option { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 16px; min-height: 64px; }
.wiz-card-option-title { font: 600 17px/1.2 var(--wz-head); }
.wiz-card-option-line { font-weight: 400; font-size: 14px; line-height: 1.35; color: var(--wz-cream-2); }
.wiz-card-option[aria-checked="true"] .wiz-card-option-line { color: var(--wz-ink); }
@media (min-width: 720px) { .wiz-cards { grid-template-columns: 1fr 1fr; } }

/* Links: Setup's own field (js/link-rows.js), drawn in the wizard's look. */
.wiz-links { display: grid; gap: 12px; }
.wiz-link-row { padding: 12px; border-radius: 14px; background: var(--wz-night-3); border: 1px solid var(--wz-line); }
.wiz-link-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 600; }
.wiz-link-name { flex: 1 1 auto; }
.wiz-link-glyph { width: 18px; height: 18px; fill: var(--wz-violet-3); flex: none; }
.wiz-link-remove { width: 44px; height: 44px; margin: -10px -6px -10px 0; border: 0; border-radius: 999px; background: transparent; color: var(--wz-cream-2); font-size: 22px; cursor: pointer; }
.wiz .link-entry { display: flex; align-items: center; border: 1.5px solid rgba(243, 238, 232, .5); border-radius: 14px; background: var(--wz-night); overflow: hidden; }
.wiz .link-entry:focus-within { outline: 3px solid var(--wz-amber); outline-offset: 2px; }
.wiz .link-affix { padding: 0 2px 0 12px; color: var(--wz-cream-2); font-size: 15px; white-space: nowrap; }
.wiz .link-entry .link-affix + input, .wiz .link-entry input + .link-affix { padding-left: 0; }
.wiz .link-entry input { flex: 1 1 auto; min-width: 0; min-height: 48px; border: 0; background: transparent; color: var(--wz-cream); font: 400 17px/1.2 var(--wz-body); padding: 0 12px; outline: none; }
.wiz .link-entry input::placeholder { color: var(--wz-cream-3); }
.wiz-link-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wiz-link-pick .wiz-link-glyph { width: 16px; height: 16px; }

/* Your code: the QR large, black on white, scannable from across a table. */
.wiz-code { width: min(100%, 240px, 34vh); margin: 0 auto 12px; padding: 14px; border-radius: 18px; background: #fff; }
.wiz-code svg { display: block; width: 100%; height: auto; }
.wiz .wiz-address { text-align: center; margin: 0 0 14px; }
.wiz-code-print { margin-top: 12px; }
.wiz-code-line { text-align: center; }
.wiz-hold { position: fixed; inset: 0; z-index: 200; background: #120e0b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px)); color: #f3eee8; }
.wiz-hold-img { width: min(86vw, 70vh); height: auto; background: #fff; border-radius: 12px; -webkit-touch-callout: default; }
.wiz-hold-hint { margin: 0; text-align: center; font: 400 16px/1.4 ui-sans-serif, system-ui, sans-serif; }
.wiz-hold-close { min-width: 160px; }

/* Ready to go live: each row is a button to the place it names. */
.wiz-ready-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; border-radius: 14px; background: var(--wz-night-3); border: 1px solid var(--wz-line); color: var(--wz-cream); font: inherit; text-align: left; cursor: pointer; }
.wiz-ready-row:hover { border-color: var(--wz-violet-3); }
.wiz-checks li.is-done .wiz-tick { background: var(--wz-good); border-color: var(--wz-good); }
.wiz-checks li.is-skipped .wiz-tick { border-style: dashed; }
.wiz-ready-label { flex: 1 1 auto; }
.wiz-ready-chev { width: 18px; height: 18px; fill: none; stroke: var(--wz-violet-3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wiz-checks li { padding: 0; background: none; border: 0; }

/* Skip the rest: a quiet text button under the bar, never a second primary. */
.wiz-nav { flex-wrap: wrap; }
.wiz-skiprest { flex: 1 1 100%; display: block; margin: 0 auto; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(165, 102, 238, .12); border: 1.5px solid rgba(188, 122, 242, .6); color: var(--wz-cream); font: 600 15px/1 var(--wz-body); cursor: pointer; }
.wiz-skiprest:focus-visible { outline: 3px solid var(--wz-amber); outline-offset: 2px; }

@media (max-width: 360px) {
  .wiz .link-affix { font-size: 13px; padding-left: 10px; }
  .wiz .link-entry input { font-size: 16px; padding: 0 8px; }
  .wiz-ready-row { font-size: 15px; gap: 8px; padding: 8px 10px; }
  .wiz-tick-say { font-size: 13px; }
}

/* Required fields: Next waits (aria-disabled, still focusable) and a plain line says what is missing. */
.wiz-btn[aria-disabled="true"].is-waiting { opacity: .7; cursor: not-allowed; box-shadow: none; }
.wiz-missing { margin: 12px 0 0; font-size: 15px; color: var(--wz-warn); min-height: 0; }
.wiz-missing:empty { margin: 0; }

/* With the app's own bar and header hidden on a screen the wizard sent somebody
   to, the print pack's phone layout has no bottom bar to leave room for. */
.app-shell.chromeless { --nav-size: 0px; --golive-rise: 0px; }
/* A held account cannot wander off from these screens: the songbooks tab (it
   would only bounce back) and the print shop's outside link are not offered. */
body.wizard-held [data-songs-view="books"], body.wizard-away [data-songs-view="books"] { display: none; }
body.wizard-held #ppVista, body.wizard-away #ppVista { display: none; }

/* THE LAST SCREEN: the open items are the loud part, the done count is one quiet line. */
.wiz-ready-count { color: var(--wz-cream-2); font-weight: 500; }
.wiz-ready-sub { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--wz-cream); }
.wiz-ready-plain { cursor: default; }
.wiz-ready-plain:hover { border-color: var(--wz-line); }

/* A focused row is never left under the sticky bar, and on a very short
   screen (200 per cent zoom) the bar scrolls with the page. */
.wiz-ready-row { scroll-margin-bottom: 120px; }
@media (max-height: 500px) { .wiz-nav { position: static; } }

/* A small picture of what was chosen or is already saved, beside its button. */
.wiz-thumb { height: 44px; max-width: 96px; border-radius: 10px; border: 1px solid var(--wz-line); object-fit: contain; background: var(--wz-night-3); padding: 3px; }
.wiz-thumb-header { object-fit: cover; padding: 0; width: 96px; }
.wiz-more-line { margin-top: 14px; }

/* LINKS: a row eases in and out, by height and opacity (a grid row from zero
   to its own height, so the rows below follow without a jump), and does not
   move at all with reduced motion. */
.wiz-links { gap: 0; }
.wiz-link-slot { display: grid; grid-template-rows: 1fr; opacity: 1; padding-bottom: 12px; transition: grid-template-rows .22s ease, opacity .22s ease, padding-bottom .22s ease; }
.wiz-link-slot-inner { min-height: 0; overflow: hidden; }
.wiz-link-slot.is-entering, .wiz-link-slot.is-leaving { grid-template-rows: 0fr; opacity: 0; padding-bottom: 0; }
.wiz-link-slot.is-entering .wiz-link-row { transform: translateY(8px); }
.wiz-link-slot .wiz-link-row { transition: transform .22s ease; }
@media (prefers-reduced-motion: reduce) {
  .wiz-link-slot, .wiz-link-slot .wiz-link-row { transition: none; }
}
.wiz-link-star { min-height: 44px; padding: 0 12px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.wiz-link-star[aria-pressed="true"] { background: var(--wz-violet-2); color: var(--wz-ink); border-color: var(--wz-violet-2); }
.wiz-link-star:disabled { opacity: .5; }
.wiz-highlight-line { margin-top: 14px; }

/* A line under a switch (what it does, or why it is locked) goes on its own row
   beneath it, not squeezed beside the label. */
.wiz-switch-row { flex-wrap: wrap; }
.wiz-switch-row .wiz-state-note { flex: 1 1 100%; margin: 2px 0 0; }


/* ============ THE EXCERPT OF THE AUDIENCE PAGE (round 7) ============
   The audience page's own look, drawn small (the .phone / .pv-* rules in
   css/dashboard.css), in a quiet frame in the wizard's own look. Beside the
   fields on a wide screen; the floating thumbnail (as on Setup) up to 900px. */
.wiz-split { display: block; width: 100%; }
.wiz-excerpt { margin-top: 14px; }
.wiz-excerpt-panel { margin-top: 10px; padding: 12px; border-radius: 16px; background: var(--wz-night-3); border: 1px solid var(--wz-line); }
.wiz-excerpt-caption { margin: 0; font-weight: 600; color: var(--wz-cream); font-size: 15px; }
.wiz-excerpt-sample { margin: 8px 0 0; font-size: 13px; color: var(--wz-cream-2); }
.wiz-excerpt-frame { display: flex; justify-content: center; }
.wiz-excerpt .wiz-phone { border: 0; border-radius: 14px; width: var(--pv-w); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.wiz-excerpt .wiz-phone .phone-screen { height: auto; }
.wiz-excerpt .wiz-phone .pv-viewport { height: auto; }
.wiz-excerpt .wiz-phone .pv-page { min-height: 0; }
.wiz-phone .pv-page, .wiz-phone .pv-page * { pointer-events: none; user-select: none; }
.wiz-phone .tip-inline.is-not-yet { opacity: .65; }
.wiz-phone .pv-footer .handover-note { margin: 0 auto 8px; max-width: 34ch; font-size: .8125rem; line-height: 1.45; opacity: .72; text-align: center; }
.wiz-phone .pv-footer .handover-note[hidden] { display: none; }

/* Which part of the page each screen is about: the rest is left out, so a short
   window shows what changed. */
.wiz-excerpt .wiz-phone[data-focus="name"] .pv-card > :not(.tip-inline),
.wiz-excerpt .wiz-phone[data-focus="name"] .pv-links,
.wiz-excerpt .wiz-phone[data-focus="name"] .pv-footer { display: none; }
.wiz-excerpt .wiz-phone[data-focus="look"] .pv-top, .wiz-excerpt .wiz-phone[data-focus="images"] .pv-top,
.wiz-excerpt .wiz-phone[data-focus="look"] .tip-inline, .wiz-excerpt .wiz-phone[data-focus="images"] .tip-inline,
.wiz-excerpt .wiz-phone[data-focus="look"] .pv-footer, .wiz-excerpt .wiz-phone[data-focus="images"] .pv-footer { display: none; }
.wiz-excerpt .wiz-phone[data-focus="links"] .pv-card,
.wiz-excerpt .wiz-phone[data-focus="links"] .pv-footer { display: none; }
.wiz-excerpt .wiz-phone[data-focus="requests"] .pv-header,
.wiz-excerpt .wiz-phone[data-focus="requests"] .pv-head,
.wiz-excerpt .wiz-phone[data-focus="requests"] .pv-links,
.wiz-excerpt .wiz-phone[data-focus="requests"] .pv-footer,
.wiz-excerpt .wiz-phone[data-focus="requests"] .tip-inline { display: none; }
.wiz-excerpt .wiz-phone[data-focus="play"] .pv-header,
.wiz-excerpt .wiz-phone[data-focus="play"] .pv-head,
.wiz-excerpt .wiz-phone[data-focus="play"] .pv-links,
.wiz-excerpt .wiz-phone[data-focus="play"] .pv-explainer,
.wiz-excerpt .wiz-phone[data-focus="play"] .pv-browse,
.wiz-excerpt .wiz-phone[data-focus="play"] .pv-forlabel,
.wiz-excerpt .wiz-phone[data-focus="play"] .pv-fornote,
.wiz-excerpt .wiz-phone[data-focus="play"] .pv-note,
.wiz-excerpt .wiz-phone[data-focus="play"] .pv-top,
.wiz-excerpt .wiz-phone[data-focus="play"] .tip-inline,
.wiz-excerpt .wiz-phone[data-focus="play"] .pv-footer p:not(.handover-note),
.wiz-excerpt .wiz-phone[data-focus="play"] [data-pv="ForField"] { display: none; }

/* Up to 900px (Setup's own breakpoint) the audience page is the floating
   thumbnail (js/preview-bubble.js, the html[data-pvbubble] and #pvBubble rules
   in css/dashboard.css), so the beside-the-fields panel is not drawn, and the
   bar with Back, Skip and Next stays pinned to the foot of the screen, which is
   what the thumbnail keeps clear of. */
@media (max-width: 900px) {
  .wiz-excerpt { display: none; }
  .wiz-link-star { padding: 0 10px; gap: 4px; }
  .wiz-link-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 720px) and (max-width: 900px) {
  .wiz[data-has-excerpt="1"] .wiz-nav { position: sticky; bottom: 0; background: var(--wz-night); border-top: 1px solid var(--wz-line); padding: 12px 0 calc(8px + env(safe-area-inset-bottom, 0px)); }
}
/* Wider than that it sits beside the fields, always open. */
@media (min-width: 901px) {
  .wiz[data-has-excerpt="1"] .wiz-split { display: grid; grid-template-columns: minmax(0, 600px) 372px; gap: 28px; max-width: 1000px; align-items: start; }
  .wiz[data-has-excerpt="1"] > .wiz-top, .wiz[data-has-excerpt="1"] > .wiz-progress, .wiz[data-has-excerpt="1"] > .wiz-nav { max-width: 1000px; padding-right: 400px; }
  .wiz[data-has-excerpt="1"] .wiz-excerpt { position: sticky; top: 24px; margin-top: 0; }
}

/* The caption under the open thumbnail. */
.wiz-bubble-caption { position: absolute; left: 0; right: 0; top: calc(100% + 8px); box-sizing: border-box; padding: 6px 8px; border-radius: 10px; background: rgba(23, 16, 10, .94); border: 1px solid var(--wz-line); text-align: center; pointer-events: none; }
.wiz-bubble-caption p { margin: 0; font-size: 13px; line-height: 1.3; color: var(--wz-cream); }
.wiz-bubble-caption p:first-child { font-weight: 600; }
.wiz-bubble-caption p + p { color: var(--wz-cream-2); font-size: 12px; }

/* On the narrowest phones the Highlight button is just its star (its name stays
   for assistive technology), so the link's own name is not squeezed out. */
@media (max-width: 360px) {
  .wiz-link-star span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wiz-link-star { min-width: 44px; justify-content: center; padding: 0 10px; }
}