/* ══════════════════════════════════════════════════════════════
   DESERT BLOOM ESTATES WEDDING PLANNING WIZARD
   Standalone step-by-step wizard that mirrors the main planner's
   palette while feeling tighter and more focused.
   ══════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts ────────────────────────────────────────
   Variable TTF files — single file per family covers all weights.
   font-display: swap prevents invisible text during load.
   ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond-Italic.ttf') format('truetype');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/NunitoSans.ttf') format('truetype');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Palette — matched to the main planner */
  --bg: #FDFAF6;
  --bg2: #F7F2EB;
  --bg3: #EDE6DB;
  --text: #3B3228;
  --textMd: #6B5E52;
  --textLt: #A69B8F;
  --gold: #C6A96C;
  --goldLt: #E8D9B5;
  --goldDk: #A88B4F;
  --sage: #8FA68A;
  --blush: #D4A0A0;
  --white: #FFFFFF;

  /* Accessible palette -- AA-compliant variants for text/status */
  --goldAA: #876B30;   /* 4.83:1 on --bg */
  --textLtAA: #7A6F63; /* 4.75:1 on --bg */
  --sageAA: #5E7A58;   /* 4.78:1 on white */
  --blushAA: #946363;  /* 4.99:1 on white */


  /* Type */
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans: 'Nunito Sans', system-ui, sans-serif;

  /* Spacing rhythm */
  --r1: 4px;  --r2: 8px;  --r3: 12px;  --r4: 16px;
  --r5: 24px; --r6: 32px; --r7: 48px; --r8: 64px;

  /* Curves */
  --br-sm: 6px;
  --br-md: 10px;
  --br-lg: 14px;

  /* Shadows */
  --shd-sm: 0 1px 3px rgba(59,50,40,.06);
  --shd-md: 0 6px 20px rgba(59,50,40,.08);
  --shd-lg: 0 18px 50px rgba(59,50,40,.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow-x: hidden; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ══════════════════════════════════════════════════════════════
   SCREEN MANAGEMENT
   Three full-viewport screens, one visible at a time.
   ══════════════════════════════════════════════════════════════ */
.screen {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}
.screen-active {
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════════════════════════
   LANDING SCREEN
   ══════════════════════════════════════════════════════════════ */
#screen-landing {
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg2) 60%, #F0E8D6 100%);
  align-items: center;
  justify-content: center;
  padding: var(--r6) var(--r4);
  text-align: center;
  position: relative;
  overflow: hidden;
}
#screen-landing::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(198,169,108,.12), transparent 70%);
  pointer-events: none;
}
#screen-landing::after {
  content: '';
  position: absolute;
  bottom: -300px;
  left: -300px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(143,166,138,.08), transparent 70%);
  pointer-events: none;
}

.landing-frame {
  position: relative;
  z-index: 2;
  max-width: 580px;
  width: 100%;
  animation: landingIn .9s ease-out;
}
@keyframes landingIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.landing-ornament {
  /* The venue logo image. width/height attribute on the <img> reserve
     the layout box so there's no shift when the file loads; object-fit
     keeps any non-square source aspect ratio rendering cleanly. */
  width: 100px;
  height: 100px;
  display: block;
  margin: 0 auto var(--r4);
  object-fit: contain;
  /* Tiny safety net: if the file is missing, the alt-text-empty img
     just collapses with a 1px outline — not a giant broken-image icon. */
}

.landing-eyebrow {
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: .35em;
  color: #876B30;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Venue name — the new hero. Two visual weights: a lighter italic
   "Desert Bloom Estates at" on top, the proper name (Desert Bloom Estates) on the
   line below at full display weight. Sizes are tuned so the ratio
   between the two lines stays around 1.5:1 — enough hierarchy to
   give the proper name primacy, without the prefix shrinking into
   visual irrelevance (italic serif tends to read optically smaller
   than upright, so the prefix needs more raw size to balance). */
.landing-venue {
  font-family: var(--serif);
  text-align: center;
  margin: 0 0 var(--r3);
  line-height: 1.05;
  color: var(--text);
}
.landing-venue-prefix {
  display: block;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 400;
  font-style: italic;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.landing-venue-name {
  display: block;
  font-size: clamp(2.2rem, 6.5vw, 3.8rem);
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* Location bar — hairline gold rules flanking the city, small italic.
   Reads as a stationery flourish, not a generic location stamp. */
.landing-location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: var(--r5);
}
.landing-location-rule {
  height: 1px;
  width: clamp(40px, 10vw, 80px);
  background: linear-gradient(90deg, transparent 0%, var(--goldLt) 50%, transparent 100%);
}
.landing-location-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: #876B30;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Tagline — replaces the old big H1 ("Plan your day, one step at a
   time"). Now positioned as functional subhead under the identity
   block. Italic serif so it feels like an invitation, not a header. */
.landing-tagline {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  font-style: italic;
  color: var(--textMd);
  text-align: center;
  margin: 0 auto var(--r4);
  max-width: 480px;
  line-height: 1.4;
}

.landing-sub {
  font-size: 1rem;
  color: var(--textMd);
  margin: 0 auto var(--r6);
  max-width: 480px;
  line-height: 1.65;
}

.landing-stats {
  display: flex;
  justify-content: center;
  gap: var(--r6);
  margin-bottom: var(--r7);
  flex-wrap: wrap;
}
.landing-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.landing-stats strong {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--goldAA);
}
.landing-stats span {
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--textLtAA);
}

.btn-begin {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--text);
  border: none;
  padding: 18px 44px;
  cursor: pointer;
  border-radius: 50px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(198,169,108,.35);
  transition: all .25s;
  min-height: 44px;
}
.btn-begin:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(198,169,108,.45);
}
.btn-begin:active { transform: translateY(0); }

.btn-resume {
  display: block;
  margin: var(--r4) auto 0;
  background: transparent;
  border: none;
  color: var(--textMd);
  font-size: .82rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--goldLt);
  text-underline-offset: 4px;
  padding: 8px 12px;
}
.btn-resume:hover { color: var(--goldDk); }

/* ══════════════════════════════════════════════════════════════
   WIZARD SCREEN
   ══════════════════════════════════════════════════════════════ */
#screen-wizard {
  background: var(--bg);
}

.wiz-head {
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--bg3);
  padding: var(--r4) var(--r5) var(--r6);
}
.wiz-head-inner {
  display: flex;
  align-items: center;
  gap: var(--r3);
  max-width: 760px;
  margin: 0 auto;
}

.wiz-exit, .wiz-help, .wiz-lock-btn {
  background: transparent;
  border: 1px solid var(--bg3);
  color: var(--textMd);
  width: 44px;
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  transition: all .15s;
}
.wiz-exit:hover, .wiz-help:hover, .wiz-lock-btn:hover {
  border-color: var(--gold);
  color: var(--goldAA);
}

.wiz-progress {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.wiz-step-indicator {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  /* Relative positioning anchors the ::after caret used to mark the
     current step (see .wiz-step-indicator.current::after near the bottom). */
  position: relative;
  padding: 0;
  font-family: inherit;
  color: inherit;
  min-width: 0;
}
.wiz-step-indicator:hover .wiz-dot { background: var(--goldLt); }
.wiz-step-indicator:hover .wiz-step-label { color: var(--text); }

.wiz-dot {
  display: block;
  width: 100%;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  position: relative;
  transition: background .25s;
}
.wiz-step-indicator.visited .wiz-dot { background: var(--goldLt); }
.wiz-step-indicator.current .wiz-dot { background: var(--gold); }
.wiz-step-indicator.skipped .wiz-dot::after {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  background: var(--blush);
  border-radius: 50%;
  transform: translateX(-50%);
}

.wiz-step-label {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--textLtAA);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  transition: color .15s;
}
.wiz-step-indicator.visited .wiz-step-label,
.wiz-step-indicator.current .wiz-step-label { color: var(--goldAA); }
.wiz-step-indicator.current .wiz-step-label { font-weight: 700; }

/* Mobile (≤540px): the bar carries 9 segments now. Squeezing labels into
   ~32px-wide slices makes them unreadable and the bar visually noisy. Drop
   the labels and beef up the dot bars instead — the eyebrow text directly
   below the bar already names the current step (e.g. "STEP 3 OF 8 · MENU
   & BAR"), so per-segment labels are redundant on small screens. The
   current step's bar gets a touch more height and saturation so the
   "you are here" position reads at a glance. */
@media (max-width: 540px) {
  .wiz-progress { gap: 3px; }
  .wiz-step-label {
    /* Visually hidden but kept for screen readers — assistive tech still
       needs to know what each segment represents when navigating with
       swipe gestures. clip-path is the modern replacement for the old
       .sr-only / .visually-hidden recipe. */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .wiz-step-indicator { gap: 0; }
  .wiz-dot { height: 5px; }
  .wiz-step-indicator.current .wiz-dot { height: 7px; box-shadow: 0 1px 0 0 rgba(198,169,108,.25); }
}

.wiz-step-meta {
  max-width: 720px;
  margin: var(--r5) auto 0;
  text-align: center;
}
.wiz-step-eyebrow {
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  margin-bottom: var(--r2);
}
.wiz-step-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 500;
  color: var(--text);
  margin: 0 0 var(--r2);
  line-height: 1.15;
}
.wiz-step-sub {
  font-size: .9rem;
  color: var(--textMd);
  margin: 0 auto;
  max-width: 540px;
  line-height: 1.55;
}

.wiz-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--r6) var(--r4) var(--r7);
  -webkit-overflow-scrolling: touch;
}
.wiz-stage {
  max-width: 760px;
  margin: 0 auto;
  animation: stageIn .35s ease-out;
}
.wiz-stage--wide {
  max-width: 1080px;
}
@keyframes stageIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.wiz-foot {
  flex-shrink: 0;
  background: var(--bg2);
  border-top: 1px solid var(--bg3);
  padding: var(--r3) var(--r5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r3);
}

/* Buttons */
.wiz-btn {
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .04em;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: var(--br-sm);
  cursor: pointer;
  transition: all .15s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.wiz-btn-primary {
  background: var(--gold);
  color: var(--text);
  border-color: var(--gold);
  box-shadow: var(--shd-sm);
}
.wiz-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.wiz-btn-primary:disabled {
  background: var(--bg3); border-color: var(--bg3); color: var(--textLtAA);
  cursor: not-allowed; transform: none; box-shadow: none;
}
.wiz-btn-secondary {
  background: transparent;
  color: var(--textMd);
  border-color: var(--bg3);
}
.wiz-btn-secondary:hover { border-color: var(--gold); color: var(--text); }
.wiz-btn-ghost {
  background: transparent;
  color: var(--textMd);
  border: none;
  padding: 11px 14px;
}
.wiz-btn-ghost:hover { color: var(--text); }
.wiz-btn-link {
  background: transparent;
  border: none;
  color: var(--textLtAA);
  text-decoration: underline;
  text-decoration-color: var(--goldLt);
  text-underline-offset: 3px;
  font-size: .76rem;
  padding: 8px 10px;
}
.wiz-btn-link:hover { color: var(--text); }
.wiz-btn-danger { color: var(--blushAA); text-decoration-color: var(--blush); }
.wiz-btn-danger:hover { color: #B57F7F; }
.wiz-btn-sm { padding: 7px 16px; font-size: .8rem; }
.wiz-btn-outline {
  background: transparent;
  border: 1px solid var(--textLt);
  color: var(--textMd);
  border-radius: var(--r2);
}
.wiz-btn-outline:hover { border-color: var(--textMd); color: var(--textDk); }
.wiz-btn-gold {
  background: var(--gold);
  color: var(--text);
  border: none;
  border-radius: var(--r2);
  font-weight: 600;
}
.wiz-btn-gold:hover { filter: brightness(1.08); }

/* ══════════════════════════════════════════════════════════════
   STAGE COMPONENTS
   Reusable pieces used by individual step renderers.
   ══════════════════════════════════════════════════════════════ */

/* Date input row */
.date-input-row {
  display: flex;
  gap: var(--r3);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--r5);
}
.date-input-row input {
  padding: 14px 18px;
  border: 1.5px solid var(--bg3);
  border-radius: var(--br-md);
  font-size: 1rem;
  background: var(--white);
  color: var(--text);
  transition: border-color .15s;
  flex: 1 1 200px;
  min-width: 180px;
}
.date-input-row input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,169,108,.15);
}

.countdown-preview {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--br-lg);
  padding: var(--r5);
  text-align: center;
  overflow: hidden;
}
.countdown-preview-eyebrow {
  font-size: .65rem;
  letter-spacing: .25em;
  color: var(--goldAA);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--r3);
}
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--r2);
  max-width: 460px;
  margin: 0 auto;
}
.countdown-cell {
  background: var(--white);
  border: 1px solid var(--goldLt);
  border-radius: var(--br-md);
  padding: var(--r2) var(--r1);
  min-width: 0;
  overflow: hidden;
}
.countdown-num {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.countdown-lbl {
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--textLtAA);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 380px) {
  .countdown-lbl {
    font-size: .58rem;
    letter-spacing: .25em;
  }
  .countdown-grid { gap: var(--r3); }
  .countdown-cell { padding: var(--r3) var(--r2); }
}

/* Countdown congrats — replaces the countdown when the date has passed */
.countdown-congrats {
  text-align: center;
  padding: var(--r4) var(--r2);
}
.countdown-congrats-icon {
  font-size: 2.5rem;
  margin-bottom: var(--r2);
}
.countdown-congrats-heading {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 600;
  color: var(--goldAA);
  line-height: 1.2;
}
.countdown-congrats-names {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3.5vw, 1.5rem);
  font-weight: 500;
  color: var(--text);
  margin-top: 4px;
}
.countdown-congrats-msg {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--textMd);
  margin-top: var(--r3);
  line-height: 1.5;
}

/* Card grids — used for menu, vendors, music moments, etc. */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--r3);
}
.choice-grid.choice-grid-empty {
  justify-content: center;
  grid-template-columns: minmax(220px, 320px);
}
.choice-card {
  background: var(--white);
  border: 1.5px solid var(--bg3);
  border-radius: var(--br-md);
  padding: 0;
  cursor: pointer;
  transition: all .2s;
  text-align: left;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.choice-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shd-md);
}
.choice-card.selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(198,169,108,.06), rgba(198,169,108,.01));
  box-shadow: 0 0 0 3px rgba(198,169,108,.12);
}
/* Inner padding wrapper — keeps text padded while image stays flush */
.choice-card-body {
  padding: var(--r4);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* "Browse" card variant — clearly distinct from selection cards. Communicates
   "this opens a new screen" via an open-menu icon, gold accent stripe,
   and an animated forward arrow on hover. */
.choice-card-browse {
  border-style: dashed;
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg) 100%);
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 220px;
  padding: var(--r4);
  position: relative;
  overflow: hidden;
}

/* "Add" card variant — simpler treatment for category tiles in a grid
   where multiple appear at once (e.g., vendor categories). Uses the
   body wrapper for consistent padding with the rest of the card system. */
.choice-card-add {
  border-style: dashed;
  border-color: var(--goldLt);
  background: var(--bg2);
}
.choice-card-add:hover {
  background: var(--bg);
  border-color: var(--gold);
}
.choice-card-add-body {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 140px;
}
/* "None" vendor card — selected state uses a muted style */
.vendor-none-card.selected {
  border-color: var(--bg3);
  background: var(--bg2);
  opacity: .75;
}
.vendor-none-card.selected:hover { opacity: 1; }

/* Results page — floral palette preview swatches (overlapping, like floral step) */
.res-palette-row {
  display: flex;
  align-items: center;
  margin-top: 6px;
  height: 26px;
}
.res-palette-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.res-palette-swatch:first-child { margin-left: 0; }

/* Results page — compact vendor category checklist */
.res-vendor-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.res-vendor-cat {
  font-size: .82rem;
  color: var(--text);
  white-space: nowrap;
}
.res-vendor-cat.is-done {
  color: var(--textLtAA);
  text-decoration: line-through;
  text-decoration-color: var(--gold);
  opacity: .6;
}
.choice-card-add-icon {
  font-size: 1.8rem;
  color: var(--goldAA);
  margin-bottom: var(--r2);
  line-height: 1;
}
.choice-card-browse::before {
  /* Soft gold accent stripe across the top — separates it visually from
     the dashed-border-everywhere "+ add" pattern users have seen elsewhere */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}
.choice-card-browse:hover {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(198,169,108,.1) 0%, var(--bg2) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(198,169,108,.18);
}
.choice-card-browse-icon {
  width: 56px; height: 56px;
  color: var(--goldAA);
  margin-bottom: var(--r3);
}
.choice-card-browse-icon svg { width: 100%; height: 100%; }
.choice-card-browse-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.choice-card-browse-sub {
  font-size: .82rem;
  color: var(--textMd);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.choice-card-browse-arrow {
  color: var(--goldAA);
  font-weight: 600;
  display: inline-block;
  transition: transform .2s;
}
.choice-card-browse:hover .choice-card-browse-arrow {
  transform: translateX(4px);
}

.choice-card-custom {
  border-style: dashed;
  border-color: var(--textLt);
  cursor: pointer;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.choice-card-custom:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 18px rgba(198,169,108,.18);
}
.choice-card-custom.is-editing {
  border-style: solid;
  border-color: var(--gold);
  cursor: default;
  text-align: left;
}
.choice-card-custom-icon {
  font-size: 1.6rem;
  margin-bottom: var(--r2);
}
.choice-card-custom-front .choice-card-name {
  font-size: 1.1rem;
}
.choice-card-custom-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--textMd);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.choice-card-custom-opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.choice-card-custom-input {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--textLt);
  border-radius: var(--r2);
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--textDk);
  background: var(--bg);
  margin-bottom: 10px;
  transition: border-color .2s;
  box-sizing: border-box;
}
.choice-card-custom-input:focus {
  outline: none;
  border-color: var(--gold);
}
.choice-card-custom-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.choice-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg3) center/cover no-repeat;
  /* Round only the top corners so the image sits flush with the card edges */
  border-radius: 0;
  margin: 0;
}
.choice-card-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.choice-card-desc {
  font-size: .8rem;
  color: var(--textMd);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.choice-card-remove {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--bg3);
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--textMd);
  z-index: 2;
  transition: all .15s;
}
.choice-card-remove:hover { background: var(--blushAA); color: var(--white); border-color: var(--blushAA); }
.choice-card-tag {
  display: inline-block;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  margin-bottom: var(--r2);
}

/* Menu trust note — sits above the card grid to set expectations */
.menu-trust-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(143,166,138,.1);
  border-left: 3px solid var(--sage);
  border-radius: var(--br-sm);
  padding: 14px 16px;
  margin-bottom: var(--r4);
  font-size: .88rem;
  color: var(--text);
  line-height: 1.5;
}
.menu-trust-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}
.menu-trust-note strong {
  color: var(--sageAA);
  font-weight: 700;
}

/* Linen swatch grid */
.swatch-section { margin-bottom: var(--r6); }
.swatch-section h3 {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--goldAA);
}
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  gap: 8px;
}
.swatch {
  background: rgba(255,255,255,.5);
  border: 1.5px solid var(--bg3);
  padding: 12px 8px;
  cursor: pointer;
  transition: all .3s;
  text-align: center;
  font-family: inherit;
  color: inherit;
  border-radius: 8px;
}
.swatch:hover { transform: translateY(-2px); box-shadow: 0 3px 12px rgba(198,169,108,.12); }
.swatch.selected {
  background: var(--white);
  border-color: var(--gold);
  box-shadow: 0 3px 12px rgba(198,169,108,.12);
}
.swatch.selected .swatch-name { color: var(--text); font-weight: 500; }
.swatch-color {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid;
  margin: 0 auto 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: box-shadow .2s;
}
.swatch-name {
  font-family: var(--sans);
  font-size: .6rem;
  color: var(--textMd);
  font-weight: 300;
  letter-spacing: .02em;
  transition: color .15s, font-weight .15s;
}
.swatch-desc {
  font-family: var(--sans);
  font-size: .65rem;
  color: var(--textLtAA);
  font-weight: 300;
  margin-top: 6px;
}
.swatch-desc strong {
  color: var(--textMd);
  font-weight: 500;
}

/* Custom hex color input row — sits below the swatch grid. Lets couples
   type any #RRGGBB value for tablecloth or napkin. The preview swatch
   appears when a valid hex is entered; it disappears otherwise. */
.swatch-custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--r3);
}
.swatch-custom-preview {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bg3);
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.swatch-custom-input {
  flex: 1;
  max-width: 180px;
  padding: 8px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .85rem;
  letter-spacing: .08em;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--bg3);
  border-radius: var(--br-sm);
  outline: none;
  transition: border-color .15s;
}
.swatch-custom-input::placeholder {
  color: var(--textLtAA);
  font-family: var(--sans);
  letter-spacing: .02em;
}
.swatch-custom-input:focus {
  border-color: var(--gold);
}
.swatch-custom-input.is-active {
  border-color: var(--gold);
  background: rgba(198,169,108,.04);
}

/* Music moment list */
.music-moments {
  display: flex;
  flex-direction: column;
  gap: var(--r3);
}
.music-moment {
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-md);
  padding: var(--r4);
  display: flex;
  flex-direction: column;
  gap: var(--r3);
}
.music-moment-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.music-moment-reorder {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.music-moment-arrow {
  background: none;
  border: 1px solid var(--bg3);
  border-radius: 4px;
  color: var(--textMd);
  font-size: .55rem;
  line-height: 1;
  min-width: 28px; min-height: 28px;
  padding: 6px 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.music-moment-arrow:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--goldAA);
}
.music-moment-arrow:disabled {
  opacity: .3;
  cursor: default;
}
.music-moment-label {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--text);
  flex: 1;
}
.music-moment-hide {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-left: auto;
  background: var(--bg);
  color: var(--textLtAA);
  border: 1px solid var(--bg3);
  border-radius: var(--br-sm);
  cursor: pointer;
  font-family: var(--sans);
  font-size: .85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.music-moment-hide:hover {
  background: var(--blush);
  color: var(--white);
  border-color: var(--blush);
}
.music-moment-hide:focus-visible {
  outline: 2px solid var(--blush);
  outline-offset: 2px;
}
.music-moment-input {
  padding: 10px 14px;
  border: 1px solid var(--bg3);
  border-radius: var(--br-sm);
  font-size: .9rem;
  background: var(--bg2);
  color: var(--text);
}
.music-moment-input:focus {
  outline: none; border-color: var(--gold); background: var(--white);
}

/* Add custom moment */
.music-moment-add-wrap {
  margin-top: var(--r3);
}
.music-moment-add-btn {
  background: none;
  border: 1px dashed var(--textLt);
  border-radius: var(--br-md);
  color: var(--textMd);
  font-family: var(--sans);
  font-size: .88rem;
  padding: 12px;
  width: 100%;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.music-moment-add-btn:hover {
  border-color: var(--gold);
  color: var(--goldAA);
}
.music-moment-add-form {
  margin-top: var(--r3);
  display: flex;
  gap: 8px;
  align-items: center;
}
.music-moment-add-form[hidden] {
  display: none;
}
.music-moment-add-form .choice-card-custom-input {
  flex: 1;
  margin-bottom: 0;
}

/* Hidden moments restore */
.music-hidden-wrap {
  margin-top: var(--r4);
  padding: var(--r3) var(--r4);
  background: var(--bg2);
  border-radius: var(--br-md);
  text-align: center;
}
.music-hidden-label {
  font-size: .82rem;
  color: var(--textMd);
  margin-bottom: 8px;
}
.music-hidden-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}
.music-hidden-chip {
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .78rem;
  color: var(--textMd);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.music-hidden-chip:hover {
  border-color: var(--gold);
  color: var(--goldAA);
}
.music-restore-all {
  margin-top: 4px;
}

@media (max-width: 540px) {
  .music-moment-label { font-size: .9rem; }
  .music-moment-add-form { flex-direction: column; }
  .music-moment-add-form .choice-card-custom-actions { width: 100%; justify-content: flex-end; }
}

/* Floral month picker */
.month-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: var(--r5);
}
@media (max-width: 540px) {
  .month-picker { grid-template-columns: repeat(4, 1fr); }
}
.month-btn {
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-sm);
  padding: 10px 6px;
  font-size: .78rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--textMd);
  transition: all .15s;
}
.month-btn:hover { border-color: var(--gold); color: var(--text); transform: translateY(-1px); }
.month-btn.selected {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(198,169,108,.3);
}

/* ══════════════════════════════════════════════════════════════
   FLORAL — selected month panel
   Hero (month name + flavor tip) → blooms grid → palette cards.
   Soft cream-to-blush gradient with a subtle sage glow in the corner.
   ══════════════════════════════════════════════════════════════ */
.floral-panel {
  background: linear-gradient(135deg, var(--bg) 0%, #FAF4EB 60%, #F5EBE3 100%);
  border: 1px solid var(--goldLt);
  border-radius: var(--br-lg);
  padding: var(--r6) var(--r5);
  position: relative;
  overflow: hidden;
}
/* Soft sage glow in the top-right corner */
.floral-panel::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle at top right, rgba(143,166,138,.18), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* Soft blush glow in the bottom-left */
.floral-panel::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -100px;
  width: 280px; height: 280px;
  background: radial-gradient(circle at bottom left, rgba(212,160,160,.15), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.floral-panel > * { position: relative; z-index: 1; }

.floral-hero {
  text-align: center;
  margin-bottom: var(--r6);
  padding-bottom: var(--r5);
  border-bottom: 1px dashed rgba(198,169,108,.35);
}
.floral-hero-eyebrow {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  margin-bottom: var(--r2);
}
.floral-hero-month {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1;
  margin-bottom: var(--r3);
}
.floral-hero-tip {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--textMd);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.5;
}

.floral-section-eyebrow {
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  margin: var(--r5) 0 var(--r3);
  text-align: center;
}

/* Blooms */
.floral-blooms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.floral-bloom-pill {
  background: var(--white);
  border: 1px solid var(--goldLt);
  border-radius: 50px;
  padding: 8px 16px 8px 12px;
  font-size: .88rem;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: transform .15s;
}
.floral-bloom-pill:hover { transform: translateY(-2px); }
.floral-bloom-icon {
  font-size: 1.05rem;
  line-height: 1;
}

/* Palettes — clickable cards with overlapping color "bouquet" swatches */
.floral-palettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--r3);
}
.floral-palette-card {
  background: var(--white);
  border: 1.5px solid var(--bg3);
  border-radius: var(--br-md);
  padding: var(--r4) var(--r3);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  color: inherit;
  text-align: center;
  position: relative;
}
.floral-palette-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(198,169,108,.18);
}
.floral-palette-card.selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(198,169,108,.08), rgba(198,169,108,.02));
  box-shadow: 0 0 0 3px rgba(198,169,108,.18);
}
.floral-palette-swatches {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  height: 44px;
}
.floral-palette-swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  transition: transform .2s;
}
.floral-palette-swatch:first-child { margin-left: 0; }
.floral-palette-card:hover .floral-palette-swatch:nth-child(1) { transform: rotate(-4deg) translateY(-1px); }
.floral-palette-card:hover .floral-palette-swatch:nth-child(2) { transform: rotate(2deg) translateY(-1px); }
.floral-palette-card:hover .floral-palette-swatch:nth-child(3) { transform: rotate(-1deg) translateY(-1px); }
.floral-palette-card:hover .floral-palette-swatch:nth-child(4) { transform: rotate(3deg) translateY(-1px); }
.floral-palette-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.2;
}
.floral-palette-tag {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: .56rem;
  letter-spacing: .25em;
  color: var(--goldAA);
  font-weight: 700;
}

/* Floral custom entries */
.floral-custom-section {
  margin-top: var(--r5);
}
.floral-custom-desc {
  font-size: .88rem;
  color: var(--textMd);
  margin: 0 0 var(--r4);
}
.floral-custom-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--r4);
}
.floral-custom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-sm);
  padding: 10px 12px;
}
.floral-custom-item-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.floral-custom-item-name {
  font-family: var(--serif);
  font-size: .95rem;
  color: var(--text);
}
.floral-custom-item-type {
  font-size: .72rem;
  color: var(--textMd);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.floral-custom-item-remove {
  background: none;
  border: none;
  color: var(--textLtAA);
  cursor: pointer;
  padding: 4px 6px;
  font-size: .8rem;
  border-radius: 4px;
  transition: color .2s, background .2s;
  flex-shrink: 0;
}
.floral-custom-item-remove:hover {
  color: var(--blushAA);
  background: rgba(181,127,127,.08);
}
.floral-custom-add-wrap {
  margin-bottom: var(--r4);
}
.floral-custom-add-form {
  margin-top: var(--r3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.floral-custom-add-form[hidden] {
  display: none;
}
.floral-custom-add-row {
  display: flex;
  gap: 10px;
}
.floral-custom-add-field {
  flex: 1;
  min-width: 0;
}
.floral-custom-add-field .choice-card-custom-input {
  margin-bottom: 0;
}
.floral-type-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.floral-custom-notes-wrap {
  margin-top: var(--r3);
}
.floral-custom-notes {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bg3);
  border-radius: var(--br-sm);
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--text);
  background: var(--bg2);
  resize: vertical;
  min-height: 60px;
  transition: border-color .2s;
  box-sizing: border-box;
}
.floral-custom-notes:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--white);
}

@media (max-width: 540px) {
  .floral-custom-add-row { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════
   STEP 7: BUDGET — ALL-INCLUSIVE PACKAGE CALCULATOR
   Three sections: guest-count package grid → optional add-ons → live summary.
   Quotes only what the venue actually charges for; no third-party estimates.
   ══════════════════════════════════════════════════════════════ */

.bp-section-eyebrow {
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  margin: var(--r5) 0 var(--r3);
  text-align: center;
}
.bp-section-eyebrow:first-child { margin-top: 0; }

/* ── Guest-count packages ───────────────────────────────────── */
.bp-pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: var(--r4);
  padding-top: 12px; /* clearance for the Best Value badge that overhangs the top of one card */
}
.bp-pkg-card {
  background: var(--white);
  border: 1.5px solid var(--bg3);
  border-radius: var(--br-md);
  padding: var(--r4) var(--r3);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  color: inherit;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bp-pkg-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(198,169,108,.18);
}
.bp-pkg-card.selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(198,169,108,.1), rgba(198,169,108,.02));
  box-shadow: 0 0 0 3px rgba(198,169,108,.18);
}
.bp-pkg-guests {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.bp-pkg-guests span {
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--textLtAA);
  font-weight: 600;
}
.bp-pkg-price {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--goldAA);
  font-weight: 500;
}
/* Per-guest cost — replaces the old percentage-savings tag.
   Pricing-psychology research (Rule of 100, skepticism studies)
   showed that for purchases above $100 dollar amounts feel larger
   than percentages, and small percentages on big purchases (the
   4.68% callout at 80 guests) damaged trust. The per-guest figure
   is descriptive rather than promotional, lets couples compare
   tiers naturally, and matches how the wedding industry talks
   about budget ("we're aiming for $X per head"). */
.bp-pkg-perguest {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--textMd);
  font-weight: 500;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.bp-pkg-perguest span {
  color: var(--textLtAA);
  font-weight: 400;
  font-size: .76rem;
}
.bp-pkg-card.selected .bp-pkg-perguest { color: var(--text); }

/* Best Value badge — single social-proof nudge on the 140-guest tier
   (where the per-guest curve flattens). Replaces the per-tier
   percentage-savings ladder with one modest, defensible signal.
   Gold pill, top-edge of the card so it overlaps the border. */
.bp-pkg-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--text);
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(198,169,108,.3);
}
/* Subtle gold tint on the Best Value card so it stands apart even
   when not selected. Combines with .selected for the picked state.
   Just a hair more pop than a regular card; not so much that it
   reads as already-selected. */
.bp-pkg-card-best {
  background: linear-gradient(135deg, rgba(198,169,108,.04), rgba(198,169,108,.01));
  border-color: rgba(198,169,108,.35);
}

/* ── Add-on rows (TV / Photo Booth / Cocktail Hour) ──────────── */
.bp-addons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--r4);
}
.bp-addon-row {
  display: flex;
  align-items: center;
  gap: var(--r3);
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-md);
  padding: var(--r3) var(--r4);
}
.bp-addon-info { flex: 1; min-width: 0; }
.bp-addon-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 2px;
}
.bp-addon-desc {
  font-family: var(--sans);
  font-size: .76rem;
  color: var(--textMd);
  line-height: 1.4;
}
.bp-addon-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.bp-addon-price {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--goldAA);
  font-weight: 500;
}

/* Custom toggle switch (TV rental) */
.bp-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  cursor: pointer;
  flex-shrink: 0;
}
.bp-toggle input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.bp-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--bg3);
  border-radius: 13px;
  transition: background .2s;
}
.bp-toggle-track::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  transition: transform .2s;
}
.bp-toggle input:checked + .bp-toggle-track { background: var(--gold); }
.bp-toggle input:checked + .bp-toggle-track::before { transform: translateX(20px); }
.bp-toggle input:focus-visible + .bp-toggle-track {
  box-shadow: 0 0 0 3px rgba(198,169,108,.25);
}

/* Custom-styled select (Photo Booth, Cocktail Hour) — matches mp-select */
.bp-addon-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--bg);
  border: 1px solid var(--goldLt);
  border-radius: var(--br-sm);
  padding: 8px 30px 8px 12px;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='%23C6A96C' d='M1 3l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 180px;
}
.bp-addon-select:hover  { border-color: var(--gold); }
.bp-addon-select:focus  {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,169,108,.18);
}

/* ── Live total summary ──────────────────────────────────────── */
.bp-summary {
  background: linear-gradient(135deg, rgba(198,169,108,.12), rgba(198,169,108,.02));
  border: 1.5px solid rgba(198,169,108,.4);
  border-radius: var(--br-lg);
  padding: var(--r5);
  margin-top: var(--r4);
  /* Smooth color/opacity shift between empty and selected states.
     border-style (dashed→solid) is a discrete property in CSS — it
     can't animate — but the surrounding color/background transition
     reads as the dominant cue, so the style snap goes unnoticed. */
  transition: border-color .3s ease, background .3s ease;
}
.bp-summary.is-empty {
  /* Empty state — dashed gold border, slightly faded. Reads as a
     frame awaiting input rather than a final result. */
  border-style: dashed;
  border-color: rgba(198,169,108,.45);
  background: linear-gradient(135deg, rgba(198,169,108,.06), rgba(198,169,108,.01));
}
.bp-summary.is-selected {
  /* Solid gold border once a guest count is picked — confirms the
     numbers are locked in for the picked configuration. */
  border-style: solid;
  border-color: rgba(198,169,108,.55);
}
/* Prompt state — shown inside the always-visible summary card when no
   guest count has been picked yet. Sits where the line-item breakdown
   and total normally sit. The ↑ arrow points up at the guest-count
   grid above the card to direct the user's eye. Visually distinct from
   the populated state — softer styling, italic text, no hard numbers
   — so the user reads it as "here's where your numbers will go" rather
   than as actual data. */
.bp-summary-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--r4) var(--r3);
  margin-bottom: var(--r3);
  text-align: center;
  background: rgba(198,169,108,.04);
  border: 1px dashed rgba(198,169,108,.4);
  border-radius: var(--br-sm);
}
.bp-summary-prompt-arrow {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--goldAA);
  font-weight: 600;
  /* Small bounce so the arrow draws the user's eye to the picker
     above. Pauses between bounces (animation-iteration-count:infinite
     with delay built into the keyframe). */
  animation: bpPromptArrowBounce 2.4s ease-in-out infinite;
}
@keyframes bpPromptArrowBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-summary-prompt-arrow { animation: none; }
}
.bp-summary-prompt-text {
  font-family: var(--serif);
  font-style: italic;
  color: var(--textMd);
  font-size: .95rem;
  line-height: 1.4;
  max-width: 36ch;
}
.bp-summary-eyebrow {
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--r3);
}
/* Inclusions block — sits inside .bp-summary, between the eyebrow and
   the numeric line breakdown. Visually pairs the package contents with
   the price the user is paying, so the calculator reads as "your money
   covers all this stuff" rather than "here's a price, separately, here's
   a list of things you get." Borderless on top, dashed separator on
   bottom, transitioning naturally into the line items below. */
.bp-summary-includes {
  margin-bottom: var(--r3);
  padding-bottom: var(--r3);
  border-bottom: 1px dashed rgba(198,169,108,.35);
}
.bp-summary-includes-label {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
  opacity: .85;
}
.bp-summary-includes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
}
.bp-summary-includes-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--text);
  line-height: 1.3;
}
.bp-summary-includes-icon {
  flex-shrink: 0;
  font-size: 1rem;
  width: 20px;
  text-align: center;
}
@media (max-width: 540px) {
  /* Single column on narrow phones — two emoji+label columns get cramped */
  .bp-summary-includes-list { grid-template-columns: 1fr; gap: 6px; }
  .bp-summary-includes-label { text-align: left; }
}

.bp-summary-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--r3);
}
.bp-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--textMd);
}
.bp-summary-line span:last-child {
  font-family: var(--serif);
  color: var(--text);
  font-weight: 500;
}
.bp-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--r3);
  border-top: 1px dashed rgba(198,169,108,.5);
  font-family: var(--serif);
}
.bp-summary-total span:first-child {
  font-size: 1rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
}
.bp-summary-total span:last-child {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  color: var(--goldAA);
  font-weight: 500;
}
.bp-summary-note {
  margin-top: var(--r3);
  text-align: center;
  font-family: var(--sans);
  font-size: .72rem;
  color: var(--textLtAA);
  font-style: italic;
  line-height: 1.5;
}

/* Mobile tightening for add-on rows */
@media (max-width: 540px) {
  .bp-addon-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .bp-addon-control { justify-content: space-between; }
  .bp-addon-select { width: 100%; min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════
   PICKER OVERLAY (shown when a + card is tapped to choose an item)
   ══════════════════════════════════════════════════════════════ */
.picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,15,10,.55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--r4);
  animation: pickerFadeIn .2s ease-out;
}
@keyframes pickerFadeIn { from { opacity: 0; } to { opacity: 1; } }
.picker-card {
  background: var(--bg);
  border-radius: var(--br-lg);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shd-lg);
  overflow: hidden;
}
.picker-head {
  padding: var(--r4);
  border-bottom: 1px solid var(--bg3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.picker-head h3 {
  font-family: var(--serif);
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
}
.picker-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--r4);
}
.picker-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 1.2rem; color: var(--textLtAA); padding: 4px 8px;
}
.picker-close:hover { color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   RESULTS SCREEN
   ══════════════════════════════════════════════════════════════ */
#screen-results {
  background: var(--bg);
}
.res-head {
  padding: var(--r6) var(--r5) var(--r5);
  text-align: center;
  border-bottom: 1px solid var(--bg3);
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg2) 100%);
}
.res-eyebrow {
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  margin-bottom: var(--r3);
}
.res-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 500;
  margin: 0 0 var(--r3);
  line-height: 1.15;
}
.res-sub {
  color: var(--textMd);
  font-size: .92rem;
  margin: 0 auto var(--r5);
  max-width: 520px;
}
.res-actions {
  display: flex;
  gap: var(--r3);
  justify-content: center;
  flex-wrap: wrap;
}
.res-body {
  padding: var(--r6) var(--r5) var(--r7);
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}
.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--r4);
  margin-bottom: var(--r6);
}
.res-card {
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-lg);
  padding: var(--r5);
  position: relative;
  transition: all .2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.res-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shd-md);
}
.res-card-status-empty {
  background: var(--bg2);
  border-style: dashed;
}
.res-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--r3);
  gap: var(--r2);
}
.res-card-icon { font-size: 1.6rem; }
.res-card-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: var(--r2);
}
.res-card-body {
  font-size: .85rem;
  color: var(--textMd);
  line-height: 1.55;
  flex: 1;
}
.res-card-body strong { color: var(--text); font-weight: 600; }
.res-card-empty-msg {
  font-size: .82rem;
  color: var(--textLtAA);
  font-style: italic;
}
.res-card-status {
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: var(--r2);
}
.res-card-status.complete { background: rgba(143,166,138,.15); color: var(--sageAA); }
.res-card-status.empty { background: rgba(212,160,160,.15); color: var(--blushAA); }
.res-card-status.skipped { background: var(--bg3); color: var(--textLtAA); }

.res-footer {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--r3);
  justify-content: center;
  flex-wrap: wrap;
  padding-top: var(--r5);
  border-top: 1px solid var(--bg3);
}

/* ── Results footer action buttons ──
   Replaces the old underline-only .wiz-btn-link text links with visible,
   tappable buttons that have icons + labels. Three actions:
     · Recover RSVP (restore arrow icon)
     · Download plan (download arrow icon)
     · Wipe all data (trash icon — danger variant with red accent)
   All three use the same pill shape. The first two use the neutral
   palette (cream bg, gold-on-hover); the danger one uses a red-toned
   treatment so it reads as destructive at a glance. */
.res-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--textMd);
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-sm);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.res-footer-btn:hover {
  border-color: var(--gold);
  color: var(--text);
  background: rgba(198,169,108,.04);
}
.res-footer-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.res-footer-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* Danger variant — red-toned so "Wipe all data" reads as destructive */
.res-footer-btn-danger {
  color: #B57F7F;
  border-color: rgba(181,127,127,.3);
}
.res-footer-btn-danger:hover {
  color: #8B4C4C;
  border-color: rgba(181,127,127,.6);
  background: rgba(181,127,127,.06);
}
@media (max-width: 540px) {
  .res-footer { gap: 8px; }
  .res-footer-btn { padding: 8px 14px; font-size: .76rem; }
}

/* ══════════════════════════════════════════════════════════════
   HELP PANEL
   ══════════════════════════════════════════════════════════════ */
.help-panel {
  position: fixed;
  inset: 0;
  background: rgba(20,15,10,.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--r4);
}
.help-panel[hidden] { display: none; }
.help-panel-card {
  background: var(--bg);
  border-radius: var(--br-lg);
  padding: var(--r5);
  max-width: 460px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  text-align: center;
  box-shadow: var(--shd-lg);
}
.help-panel-card h3 {
  font-family: var(--serif);
  margin: 0 0 var(--r3);
  font-size: 1.3rem;
  font-weight: 500;
}
.help-panel-card p {
  color: var(--textMd);
  margin: 0 0 var(--r5);
  line-height: 1.65;
  font-size: .9rem;
}

/* Empty/loading states */
.empty-state {
  text-align: center;
  padding: var(--r7) var(--r4);
  color: var(--textLtAA);
}
.empty-state-icon { font-size: 2.5rem; margin-bottom: var(--r3); }

/* Mobile refinements */
@media (max-width: 720px) {
  .wiz-head { padding: var(--r3) var(--r4) var(--r5); }
  .wiz-body { padding: var(--r4) var(--r3) var(--r6); }
  .wiz-foot { padding: var(--r3) var(--r3); }
  .wiz-btn { padding: 10px 14px; font-size: .76rem; }
  .res-head { padding: var(--r5) var(--r4) var(--r4); }
  .res-body { padding: var(--r5) var(--r4); }
}

/* ══════════════════════════════════════════════════════════════
   CUSTOM VENDOR FORM (vendor sub-page)
   ══════════════════════════════════════════════════════════════ */
.custom-vendor-form {
  margin-top: var(--r6);
  padding-top: var(--r6);
  border-top: 1px dashed var(--bg3);
}
.custom-vendor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--r2);
}
@media (max-width: 540px) {
  .custom-vendor-grid { grid-template-columns: 1fr; }
}
.custom-vendor-input,
.custom-vendor-textarea {
  padding: 11px 14px;
  border: 1px solid var(--bg3);
  border-radius: var(--br-sm);
  font-size: .88rem;
  font-family: inherit;
  background: var(--white);
  color: var(--text);
  transition: border-color .15s;
}
.custom-vendor-input:focus,
.custom-vendor-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,169,108,.15);
}
.custom-vendor-textarea {
  margin-top: var(--r2);
  width: 100%;
  min-height: 70px;
  resize: vertical;
}

/* ══════════════════════════════════════════════════════════════
   LINENS — LIVE PREVIEW
   Two-column layout: pickers on left, table-setting preview on right.
   Stylized plate, napkin, and silverware render via pure CSS.
   ══════════════════════════════════════════════════════════════ */
.linen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--r5);
}
@media (max-width: 720px) {
  .linen-grid { grid-template-columns: 1fr; }
}
.linen-pickers { min-width: 0; }

/* Preview container */
.linen-preview {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--br-lg);
  padding: var(--r4);
  position: sticky;
  top: var(--r4);
  align-self: start;
}
@media (max-width: 720px) {
  .linen-preview { position: static; }
}
.linen-preview-eyebrow {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--r3);
}

/* Tablecloth area (driven by --lp-cl, --lp-cb CSS vars set on .linen-preview) */
.linen-cloth-area {
  background: var(--lp-cl);
  border: 2px solid var(--lp-cb);
  border-radius: var(--br-lg);
  padding: 36px 24px;
  position: relative;
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background .25s, border-color .25s;
}
.linen-cloth-pattern {
  position: absolute; inset: 0;
  opacity: .04;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, var(--lp-cb) 10px, var(--lp-cb) 11px);
  pointer-events: none;
}

.linen-center {
  position: relative; z-index: 1; text-align: center;
}

/* Plate */
.linen-plate {
  width: 130px; height: 130px;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 5px 18px rgba(0,0,0,.1), 0 2px 5px rgba(0,0,0,.05);
}
.linen-rim-gold {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid #C6A96C;
  box-shadow: inset 0 0 0 1px rgba(198,169,108,.3);
}
.linen-rim-surface {
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: linear-gradient(145deg, #FEFEFE, #F5F0EA);
  border: 1px solid #E8E0D4;
}
.linen-rim-ridge {
  position: absolute; inset: 13px;
  border-radius: 50%;
  border: 1px solid #E0D8CC;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(255,255,255,.8);
}
.linen-well {
  position: absolute; inset: 16px;
  border-radius: 50%;
  background: linear-gradient(160deg, #FFFFFF, #FAF8F4);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.04);
}
.linen-well-ring {
  position: absolute; inset: 22px;
  border-radius: 50%;
  border: 1px solid rgba(198,169,108,.15);
}
.linen-shine {
  position: absolute; top: 26%; left: 24%;
  width: 40%; height: 20%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
  transform: rotate(-15deg);
}

/* Napkin tucked under the plate */
.linen-napkin {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 36px;
  background: var(--lp-nk);
  border: 1px solid var(--lp-nb);
  border-radius: 3px;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
  z-index: 1;
  transition: background .25s, border-color .25s;
}

/* Silverware area — flanks the plate at low opacity */
.linen-sw-area {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 240px; height: 150px;
  pointer-events: none;
}
.linen-sw-fork {
  position: absolute; left: 8px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  opacity: .35;
}
.linen-sw-knife {
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  opacity: .35;
}
.linen-sw-spoon {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  opacity: .28;
}
.linen-sw-handle {
  width: 5px; height: 50px;
  background: linear-gradient(to right, #C0B8AD, #A69B8F, #B8AFA4);
  border-radius: 2px;
}
.linen-sw-handle-50 {
  width: 5px; height: 48px;
  background: linear-gradient(to right, #C0B8AD, #A69B8F, #B8AFA4);
  border-radius: 2px;
}
.linen-sw-handle-4 {
  width: 4px; height: 48px;
  background: linear-gradient(to right, #C0B8AD, #A69B8F, #B8AFA4);
  border-radius: 2px;
}
.linen-knife-blade {
  width: 10px; height: 22px;
  background: linear-gradient(to right, #D0C8BC, #C0B8AD);
  border-radius: 2px 2px 0 0;
  border-right: 1.5px solid #D8D0C4;
  position: relative;
}
.linen-knife-edge {
  position: absolute; right: 0; top: 0; bottom: 4px;
  width: 1.5px;
  background: linear-gradient(to bottom, #E0D8CC, #C0B8AD);
}
.linen-spoon-bowl {
  width: 12px; height: 17px;
  background: linear-gradient(to bottom, #D0C8BC, #C0B8AD);
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
}
.linen-spoon-base {
  width: 7px; height: 10px;
  background: linear-gradient(to bottom, #A69B8F, #B8AFA4);
  border-radius: 0 0 4px 4px;
}
.linen-fork-neck {
  width: 8px; height: 8px;
  background: linear-gradient(to bottom, #B8AFA4, #A69B8F);
  border-radius: 0 0 3px 3px;
}
.linen-fork-tines {
  display: flex; gap: 1.5px; margin-bottom: 1px;
}
.fork-tine {
  width: 1.5px; height: 8px;
  background: linear-gradient(to bottom, #D0C8BC, #B8AFA4);
  border-radius: 1px 1px 0 0;
}

/* Summary bar below the cloth area */
.linen-summary { margin-top: var(--r4); text-align: center; }
.linen-summary-bar {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 18px;
  border-radius: 50px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border: 1px solid var(--bg3);
}
.linen-summary-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid;
  flex-shrink: 0;
  transition: background .25s, border-color .25s;
}
.linen-summary-label {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .15em;
  font-weight: 600;
  color: var(--text);
}
.linen-summary-divider {
  color: var(--bg3);
  font-size: .9rem;
}
.linen-summary-meta {
  font-family: var(--sans);
  font-size: .72rem;
  color: var(--textLtAA);
  margin-top: 8px;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   VENDOR IMAGES (with monogram fallback)
   .vendor-img is a 16:10 block sitting at the top of vendor cards.
   - If the <img> loads, it covers the block.
   - If the <img> fails (onerror hides it) or is missing, the
     ::before pseudo renders the vendor's initials over the
     name-derived background tint.
   ══════════════════════════════════════════════════════════════ */
.vendor-img {
  position: relative;
  width: 84px;
  height: 84px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* Top margin matches the body wrapper's padding so the avatar has breathing
     room from the card edge (cards now use padding: 0; padding lives in
     .choice-card-body, but vendor-img sits OUTSIDE that wrapper) */
  margin: var(--r4) auto var(--r3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.vendor-img::before {
  /* Monogram fallback — sits underneath the <img>. If the image loads
     and covers the block, the monogram is invisible. If the image
     fails (display:none from onerror), the monogram shows through. */
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: rgba(59,50,40,.55);
  letter-spacing: .04em;
  z-index: 0;
}
.vendor-img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* When the image loads successfully, hide the monogram initials.
   This prevents letters showing through transparent-background logos.
   The background-color stays — only the text pseudo-element is
   suppressed. Works for both vendor logos and music artist photos. */
.vendor-img.img-loaded::before,
.mp-art.img-loaded::before { content: none; }

/* ══════════════════════════════════════════════════════════════
   VENDOR CARD DETAILS
   Rich info inside vendor cards: contact rows, action links,
   price tag, "tap to" CTA.
   ══════════════════════════════════════════════════════════════ */

/* Card container — same look as .choice-card but uses div+role=button so
   anchor links inside (action row) are valid HTML. */
.vendor-pick-card {
  outline: none;
  display: flex;
  flex-direction: column;
}
.vendor-pick-card:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,169,108,.18);
}

/* Contact rows: phone / email / web hostname stacked, each prefixed with an icon */
.vendor-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--r3);
  padding-top: var(--r3);
  border-top: 1px solid var(--bg3);
}
.vendor-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  color: var(--textMd);
  line-height: 1.35;
}
.vendor-meta-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  opacity: .75;
  line-height: 1;
}
.vendor-meta-svg {
  width: 14px;
  height: 14px;
  display: block;
}
.vendor-meta-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Price tag pill — shown only when v.priceRange is present */
.vendor-price-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--bg2);
  border: 1px solid var(--goldLt);
  color: var(--goldDk);
  font-size: .68rem;
  letter-spacing: .12em;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 50px;
  margin-top: var(--r3);
  text-transform: uppercase;
}

/* Action row — small icon links: web/map/book/order/socials */
.vendor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--r3);
  padding-top: var(--r3);
  border-top: 1px solid var(--bg3);
}
.vendor-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  color: var(--textMd);
  text-decoration: none;
  font-size: .92rem;
  font-family: var(--sans);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.vendor-action:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
  transform: translateY(-1px);
}
.vendor-action.is-social {
  /* Social links use a slightly different style so they read as 'find them on...' */
  font-size: .82rem;
  background: var(--white);
  color: var(--goldAA);
}
.vendor-action.is-social:hover {
  background: var(--goldLt);
  color: var(--text);
  border-color: var(--gold);
}

/* "Tap to select" / "Tap to change" CTA at the bottom of each card.
   margin-top: auto pushes the CTA to the bottom of the flex-column card,
   so all CTAs in a row align to the same baseline regardless of how
   much vendor detail sits above them. */
.vendor-pick-cta {
  margin-top: auto;
  padding-top: var(--r3);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--textLtAA);
  font-weight: 600;
  text-align: center;
  border-top: 1px dashed var(--bg3);
}
.vendor-pick-card:hover .vendor-pick-cta { color: var(--goldAA); }

/* ══════════════════════════════════════════════════════════════
   VENDOR CARDS — LARGER TYPE
   Scoped to .vendor-pick-card so menu cards keep their tighter sizing.
   Font sizes only — physical dimensions stay as defined elsewhere.
   ══════════════════════════════════════════════════════════════ */
.vendor-pick-card .choice-card-tag {
  font-size: .72rem;
  letter-spacing: .18em;
}
.vendor-pick-card .choice-card-name {
  font-size: 1.35rem;
  line-height: 1.25;
}
.vendor-pick-card .choice-card-desc {
  font-size: .95rem;
  line-height: 1.55;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.vendor-pick-card .vendor-meta-row {
  font-size: .9rem;
  line-height: 1.45;
}
.vendor-pick-card .vendor-meta-svg {
  width: 16px;
  height: 16px;
}
.vendor-pick-card .vendor-price-tag {
  font-size: .78rem;
}
.vendor-pick-card .vendor-action { font-size: 1.05rem; }
.vendor-pick-card .vendor-action.is-social { font-size: .95rem; }
.vendor-pick-card .vendor-pick-cta {
  font-size: .76rem;
  letter-spacing: .16em;
}

/* ══════════════════════════════════════════════════════════════
   SELECTED VENDOR CARD — shown on relevant step pages
   ══════════════════════════════════════════════════════════════ */

.step-vendor-card {
  margin-top: var(--r5);
  max-width: 100%;
  overflow: hidden;
}
.step-vendor-card-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--goldAA);
  margin-bottom: var(--r2);
}
.step-vendor-card-inner {
  display: flex;
  align-items: center;
  gap: var(--r3);
  background: var(--bg2);
  border: 1px solid var(--goldLt);
  border-radius: var(--br-lg);
  padding: var(--r3) var(--r4);
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.step-vendor-card-inner .vendor-img {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: var(--br-md);
  font-size: .85rem;
}
.step-vendor-card-inner .vendor-img img {
  width: 56px;
  height: 56px;
}
.step-vendor-card-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.step-vendor-card-name {
  font-family: var(--fSans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-vendor-card .vendor-meta {
  margin-top: 2px;
}
.step-vendor-card .vendor-meta-row {
  font-size: .82rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-vendor-card .vendor-meta-svg {
  width: 14px;
  height: 14px;
}
.step-vendor-card .vendor-actions {
  margin-top: 4px;
  gap: 6px;
}
.step-vendor-card .vendor-action {
  font-size: .95rem;
}

/* ══════════════════════════════════════════════════════════════
   MUSIC STEP — EMBEDDED MINI-PLAYER + TRACK LIST
   ══════════════════════════════════════════════════════════════ */

.mp-player {
  background: linear-gradient(135deg, var(--bg2) 0%, #F0E8D6 100%);
  border: 1px solid var(--goldLt);
  border-radius: var(--br-lg);
  padding: var(--r4);
  margin-bottom: var(--r5);
  box-shadow: 0 6px 18px rgba(198,169,108,.08);
  overflow: hidden;
}
/* Now-playing row: photo on the left, title + artist stacked on the right */
.mp-now-playing {
  display: flex;
  align-items: center;
  gap: var(--r3);
  margin-bottom: var(--r3);
  min-width: 0;
}
.mp-player-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

/* On wider screens, hug the image+info content widths and center the
   whole group within the player card — looks more deliberate than
   left-flushed when there's lots of horizontal real estate. */
@media (min-width: 540px) {
  .mp-now-playing { justify-content: center; }
  .mp-player-info { flex: 0 1 auto; }
}
.mp-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-artist {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--textMd);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-controls {
  /* 3-column grid: empty spacer | centered playback buttons | right-justified volume.
     The two 1fr columns balance each other so the playback group is truly
     centered relative to the player, while the volume button sits flush right. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--r3);
}
.mp-controls-spacer { /* empty — just balances the right column for centering */ }
.mp-controls-center {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mp-vol-wrap {
  /* This div sits in the right column; justify-self pushes it to the right edge */
  justify-self: end;
}
.mp-ctrl-btn {
  background: var(--white);
  border: 1px solid var(--goldLt);
  color: var(--goldAA);
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  font-family: var(--sans);
}
.mp-ctrl-btn:hover {
  background: var(--gold);
  color: var(--white);
  transform: translateY(-1px);
}
.mp-ctrl-play {
  width: 52px; height: 52px;
  font-size: 1.05rem;
  background: var(--gold);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(198,169,108,.35);
  /* Reset the inherited padding from .mp-ctrl-btn since we're rendering SVG
     icons that are pixel-perfect centered via viewBox/path coordinates */
  padding: 0;
}
/* Inline SVG icons (instead of unicode ▶/❚❚): guaranteed centering across
   all browsers/fonts. Both SVGs are in the DOM at all times — visibility
   toggles based on the .is-playing class set by _mpUpdateUI(). */
.mp-ctrl-play .mp-ico-play,
.mp-ctrl-play .mp-ico-pause {
  width: 22px;
  height: 22px;
  display: block;
}
.mp-ctrl-play .mp-ico-pause { display: none; }
.mp-ctrl-play.is-playing .mp-ico-play { display: none; }
.mp-ctrl-play.is-playing .mp-ico-pause { display: block; }
.mp-ctrl-play:hover { filter: brightness(1.08); }

.mp-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mp-seek {
  width: 100%;
  accent-color: var(--gold);
  cursor: pointer;
}
.mp-times {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: .65rem;
  color: var(--textLtAA);
  font-variant-numeric: tabular-nums;
}

/* Section headers between player / tracks / moments */
.mp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--r2);
  gap: 12px;
  flex-wrap: wrap;
}
.mp-section-eyebrow {
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
}
.mp-section-meta {
  font-family: var(--sans);
  font-size: .72rem;
  color: var(--textLtAA);
}

/* Track list */
.mp-track-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-bottom: var(--r3);
}
@media (min-width: 540px) {
  /* Two-column grid on tablet+ — halves the vertical footprint */
  .mp-track-list { grid-template-columns: 1fr 1fr; gap: 6px; }
}
.mp-track {
  display: grid;
  grid-template-columns: 26px 28px 1fr;
  gap: 8px;
  align-items: center;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-sm);
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
  transition: all .15s;
}
.mp-track:hover {
  border-color: var(--gold);
  background: var(--bg2);
}
.mp-track.is-current {
  border-color: var(--gold);
  background: var(--bg2);
  box-shadow: 0 0 0 2px rgba(198,169,108,.18);
}
.mp-track-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg2);
  color: var(--goldAA);
  font-size: .68rem;
  flex-shrink: 0;
  transition: all .15s;
}
.mp-track:hover .mp-track-play,
.mp-track.is-current .mp-track-play {
  background: var(--gold);
  color: var(--white);
}
.mp-track-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.mp-track-song {
  font-family: var(--serif);
  font-size: .92rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-track-artist {
  font-family: var(--sans);
  font-size: .7rem;
  color: var(--textMd);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Moment input row — text input + "Use current" pill button */
.music-moment-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.music-moment-input-row .music-moment-input {
  flex: 1;
  min-width: 0;
}
.mp-use-current {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--bg);
  /* Deeper gold (--goldDk) instead of mid-gold so the text reads cleanly
     against the cream button background. The previous --gold was too close
     in luminance to the cream to be legible. */
  color: var(--goldDk);
  border: 1px solid var(--goldLt);
  padding: 0 12px;
  border-radius: var(--br-sm);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.mp-use-current:hover:not(:disabled) {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}
.mp-use-current:disabled {
  /* Was opacity:.4 — that crushed the already-light gold into invisibility.
     Instead, swap to a desaturated warm grey at full opacity. Still reads
     as "passive/disabled" but stays legible. */
  color: var(--textLtAA);
  border-color: var(--bg3);
  background: var(--bg2);
  cursor: not-allowed;
}

/* Brief flash on the input when "Use current" fills it */
@keyframes mpFlash {
  0%, 100% { background: var(--bg2); }
  30%      { background: var(--goldLt); }
}
.music-moment-input.mp-flash {
  animation: mpFlash .6s ease-out;
}

/* Mobile: stack the input + button on small screens */
@media (max-width: 540px) {
  .music-moment-input-row { flex-direction: column; }
  .mp-use-current { padding: 8px 12px; }
  .mp-ctrl-btn { width: 36px; height: 36px; }
  .mp-ctrl-play { width: 48px; height: 48px; }
}

/* ══════════════════════════════════════════════════════════════
   MP3 PLAYER — TRACK SELECTOR DROPDOWN
   Sits between the now-playing info and the playback controls.
   Custom-styled <select> with a gold caret instead of the default arrow.
   ══════════════════════════════════════════════════════════════ */
.mp-select-wrap {
  position: relative;
  margin-top: var(--r3);
}
/* Gold caret on the right — sits inside the wrap, behind pointer events */
.mp-select-wrap::after {
  content: '\25BE';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--goldAA);
  font-size: .9rem;
  pointer-events: none;
  font-family: var(--sans);
}
.mp-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--goldLt);
  border-radius: var(--br-sm);
  padding: 9px 36px 9px 14px;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
  /* Truncate long artist · song lines instead of wrapping */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.mp-select:hover {
  border-color: var(--gold);
}
.mp-select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,169,108,.18);
}
.mp-select option {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--text);
  background: var(--white);
}
.mp-select option:disabled {
  color: var(--textLtAA);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   ARTIST PHOTOS — circular avatars in the track list + the player.
   Uses the same monogram-fallback pattern as vendor cards.
   ══════════════════════════════════════════════════════════════ */
.mp-art {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.mp-art::before {
  /* Monogram fallback — sits underneath the <img>; visible if image is hidden */
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 500;
  color: rgba(59,50,40,.55);
  letter-spacing: .04em;
  font-size: .8em; /* relative to the box → scales with `width` */
  z-index: 0;
}
.mp-art img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* "No track loaded" placeholder — emoji centered, no monogram fallback */
.mp-art-empty {
  background: var(--bg2);
  border-color: var(--goldLt);
}
.mp-art-empty span {
  position: relative;
  z-index: 1;
  font-size: 1.6em;
  opacity: .6;
}
.mp-art-empty::before { content: none; }

/* Player's art block — sits to the left of the now-playing info row */
.mp-player-art {
  flex-shrink: 0;
}
.mp-player-art .mp-art {
  border: 2px solid var(--goldLt);
  box-shadow: 0 4px 12px rgba(198,169,108,.2);
}
.mp-player.is-playing .mp-player-art .mp-art {
  border-color: var(--gold);
}

/* ══════════════════════════════════════════════════════════════
   STEP 2: PACKAGE — informational, what's included in every wedding
   6-item inclusions grid → 3-item optional add-ons row.
   No interactive state on this step; pure content presentation.
   ══════════════════════════════════════════════════════════════ */

.pkg-section-eyebrow {
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  margin: var(--r5) 0 var(--r3);
  text-align: center;
}

/* "What's included" — 6 items in a 2-column grid (1 col mobile) */
.pkg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: var(--r4);
}
@media (min-width: 540px) {
  .pkg-grid { grid-template-columns: 1fr 1fr; }
}
.pkg-item {
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-md);
  padding: var(--r3) var(--r4);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all .15s;
}
.pkg-item:hover {
  border-color: var(--goldLt);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(198,169,108,.08);
}
.pkg-item-icon {
  font-size: 2.1rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.pkg-item-body { min-width: 0; flex: 1; }
.pkg-item-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 5px;
}
.pkg-item-desc {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--textMd);
  line-height: 1.5;
}

/* Optional add-ons — compact stack */
.pkg-optional {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--r4);
}
.pkg-optional-item {
  display: grid;
  grid-template-columns: 32px auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--br-sm);
  font-family: var(--sans);
}
.pkg-optional-icon {
  font-size: 1.4rem;
  line-height: 1;
}
.pkg-optional-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 500;
}
.pkg-optional-desc {
  font-size: .9rem;
  color: var(--textMd);
}
@media (max-width: 540px) {
  .pkg-optional-item {
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
  }
  .pkg-optional-title { grid-column: 2; }
  .pkg-optional-desc  { grid-column: 2; }
}

.pkg-footer-note {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  color: var(--textLtAA);
  padding-top: var(--r3);
  border-top: 1px dashed var(--bg3);
}

/* ══════════════════════════════════════════════════════════════
   BUDGET STEP — CUSTOM-QUOTE CALLOUT
   Shown below the calculator on every render. For couples whose guest
   count falls outside the 60–200 package range — we still want them
   to feel welcomed, not bounced.
   ══════════════════════════════════════════════════════════════ */
.bp-custom-quote {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(135deg, rgba(143,166,138,.1) 0%, rgba(143,166,138,.03) 100%);
  border: 1px solid rgba(143,166,138,.35);
  border-left: 4px solid var(--sage);
  border-radius: var(--br-md);
  padding: var(--r4);
  margin-top: var(--r4);
}
.bp-custom-quote-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.bp-custom-quote-body { flex: 1; min-width: 0; }
.bp-custom-quote-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 4px;
}
.bp-custom-quote-text {
  font-family: var(--sans);
  font-size: .87rem;
  color: var(--textMd);
  line-height: 1.55;
  margin-bottom: 8px;
}
.bp-custom-quote-link {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--sageAA);
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
}
.bp-custom-quote-link:hover { opacity: .75; text-decoration: underline; }
@media (max-width: 540px) {
  .bp-custom-quote { flex-direction: column; gap: 8px; }
}

/* Brochure download button — sits below the custom-quote callout on the
   Pricing step. Gold accent (vs the sage of custom-quote) so the two
   callouts read as distinct: the sage one is "contact us for custom
   needs", the gold one is "take this pricing info offline as a PDF."
   Visually mirrors the bp-summary card's gradient + gold border. */
.bp-brochure-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: var(--r3);
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(198,169,108,.12), rgba(198,169,108,.02));
  border: 1.5px solid rgba(198,169,108,.4);
  border-radius: var(--br-md);
  text-decoration: none;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.bp-brochure-btn:hover {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(198,169,108,.2), rgba(198,169,108,.05));
}
.bp-brochure-btn:active {
  transform: translateY(1px);
}
.bp-brochure-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.bp-brochure-icon {
  flex-shrink: 0;
  font-size: 1.6rem;
  line-height: 1;
}
.bp-brochure-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bp-brochure-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 2px;
}
.bp-brochure-sub {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--textMd);
  line-height: 1.4;
}
.bp-brochure-arrow {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--goldAA);
  font-weight: 600;
  transition: transform .15s;
}
.bp-brochure-btn:hover .bp-brochure-arrow {
  transform: translateY(2px);
}
@media (max-width: 540px) {
  /* Tighten on narrow viewports but keep all three regions visible —
     icon + text + arrow — since the arrow communicates download intent. */
  .bp-brochure-btn { gap: 10px; padding: 12px 14px; }
  .bp-brochure-icon { font-size: 1.3rem; }
  .bp-brochure-title { font-size: .98rem; }
  .bp-brochure-sub { font-size: .78rem; }
}

/* ══════════════════════════════════════════════════════════════
   RESULTS PAGE — IN-TILE COUNTDOWN
   The Date tile on the results grid hosts the live countdown grid
   directly. Reuses .countdown-grid / .countdown-cell / .countdown-num /
   .countdown-lbl from the date step — same single tick refreshes both.
   The .res-card-countdown class scales those cells down to fit the
   narrower tile context.
   ══════════════════════════════════════════════════════════════ */
.res-card-date-line {
  font-size: .92rem;
  color: var(--text);
  margin-bottom: var(--r3);
}
.res-card-date-line strong { color: var(--text); font-weight: 600; }

.res-card-countdown {
  /* Tile context — tighter gap, no max-width override (lets the grid fill
     the tile width naturally), smaller cells */
  gap: 6px !important;
  max-width: none !important;
}
.res-card-countdown .countdown-cell {
  padding: 8px 4px;
  border-color: var(--goldLt);
  background: linear-gradient(135deg, var(--bg2) 0%, #F5EBE3 100%);
}
.res-card-countdown .countdown-num {
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 600;
  color: var(--goldAA);
}
.res-card-countdown .countdown-lbl {
  font-size: .5rem;
  letter-spacing: .18em;
}

.res-card-countdown-caption {
  margin-top: var(--r2);
  font-family: var(--serif);
  font-style: italic;
  font-size: .8rem;
  color: var(--textLtAA);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   RESULTS PAGE — LINEN SWATCHES
   Small circular color chips next to the cloth/napkin labels in the
   Linens tile. Reuses the cloth option's `color` + `border` hex values
   directly from the data so the swatches always reflect actual choices.
   ══════════════════════════════════════════════════════════════ */
.res-linen-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: .9rem;
}
.res-linen-row:last-child { margin-bottom: 0; }
.res-linen-swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
/* Empty state — dashed circle for an unpicked half */
.res-linen-swatch-empty {
  background: var(--bg2);
  border: 1.5px dashed var(--bg3);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════
   MP3 PLAYER — VOLUME BUTTON + POPOVER SLIDER
   The volume button lives inline with the playback controls; clicking
   it pops a small panel above with a horizontal slider and a mute toggle.
   ══════════════════════════════════════════════════════════════ */
.mp-vol-wrap {
  position: relative;
  display: inline-flex;
}
.mp-vol-btn {
  /* Inherits .mp-ctrl-btn sizing (38×38) — no overrides needed */
}
.mp-vol-svg {
  width: 18px;
  height: 18px;
  display: block;
}
.mp-vol-mute .mp-vol-svg {
  width: 16px;
  height: 16px;
}
.mp-vol-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  right: -6px;
  transform: translateY(6px);
  background: var(--white);
  border: 1px solid var(--goldLt);
  border-radius: var(--br-md);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(59,50,40,.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .15s;
  z-index: 10;
  /* Width sized for slider + mute button */
  width: 200px;
}
.mp-vol-pop.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Hide the volume button icon when popup is open to avoid duplicate mute icons */
.mp-vol-pop.is-open ~ .mp-vol-btn .mp-vol-svg { visibility: hidden; }
/* Little arrow pointing down to the volume button */
.mp-vol-pop::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 14px;
  border: 6px solid transparent;
  border-top-color: var(--white);
  /* Small notch from border-color */
  filter: drop-shadow(0 2px 1px rgba(59,50,40,.08));
}
.mp-vol-mute {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  border-radius: 50%;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--goldAA);
  transition: background .15s;
  flex-shrink: 0;
}
.mp-vol-mute:hover { background: var(--bg2); }
.mp-vol-slider {
  flex: 1;
  accent-color: var(--gold);
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   PROGRESS BAR — "RESULTS" SEGMENT
   The 9th, terminal segment. Three plan-states (after the user has
   reached results at least once):
     blank        — user hasn't reached results yet (default segment look)
     .incomplete  — visited but plan still has gaps (sage tint)
     .celebrate   — visited and plan complete (gold dot)
   The state is set on the segment as a whole; the dot inherits the
   styling from `.wiz-step-indicator .wiz-dot` like all other segments.
   ══════════════════════════════════════════════════════════════ */

/* Incomplete: muted sage signal that there's still work to do.
   No animation — when the user is mid-step, a pulsing reminder is just
   nagging. The color shift alone communicates the state. */
.wiz-step-indicator.wiz-step-results.incomplete .wiz-dot {
  background: var(--sage);
}
.wiz-step-indicator.wiz-step-results.incomplete .wiz-step-label {
  color: var(--sageAA);
  font-weight: 600;
}

/* Celebrate: gold dot, slightly heavier, soft glow.
   Reads as "your plan is done" without flashing or animating. */
.wiz-step-indicator.wiz-step-results.celebrate .wiz-dot {
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,169,108,.22);
}
.wiz-step-indicator.wiz-step-results.celebrate .wiz-step-label {
  color: var(--goldAA);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   WIZARD STEP — "HELPFUL TIP" LINK
   Sits under the step subtitle. Opens the existing help panel.
   Muted terracotta color so it reads as friendly (not alarm-red),
   blends with the cream/gold palette without disappearing.
   ══════════════════════════════════════════════════════════════ */
.wiz-tip-link {
  /* Strip default button chrome so it reads as a link */
  background: transparent;
  border: none;
  padding: 4px 0 0 0;
  cursor: pointer;
  display: inline-block;
  margin-top: 4px;
  /* Muted brick-red — warm, friendly, distinct from the gold/sage palette
     without screaming for attention. About 60% opacity by default so it
     genuinely blends; full opacity on hover. */
  color: #B0625A;
  opacity: .72;
  font-family: var(--sans);
  font-size: .8rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .01em;
  /* Subtle dotted underline — link affordance without visual noise */
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(176, 98, 90, .35);
  transition: opacity .15s, color .15s, text-decoration-color .15s;
}
.wiz-tip-link:hover {
  opacity: 1;
  color: #8E4A43;
  text-decoration-color: #8E4A43;
}
.wiz-tip-link:focus-visible {
  outline: 2px solid rgba(176, 98, 90, .4);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════
   MUSIC MOMENTS — CLEAR BUTTON
   Small ✕ to the right of "Use current". Removes the song from this
   moment's input and from saved state. Same height/border-radius as
   .mp-use-current so they form a tidy pair.
   ══════════════════════════════════════════════════════════════ */
.mp-clear-moment {
  flex-shrink: 0;
  width: 36px;
  background: var(--bg);
  color: var(--textLtAA);
  border: 1px solid var(--bg3);
  border-radius: var(--br-sm);
  cursor: pointer;
  font-family: var(--sans);
  font-size: .85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.mp-clear-moment:hover {
  background: var(--blush);
  color: var(--white);
  border-color: var(--blush);
}
.mp-clear-moment:focus-visible {
  outline: 2px solid var(--blush);
  outline-offset: 2px;
}

/* On narrow screens the .music-moment-input-row already stacks, so let
   the clear button align right alongside "Use current" instead of going
   full-width below it */
@media (max-width: 540px) {
  .music-moment-input-row { flex-wrap: wrap; }
  .music-moment-input-row .music-moment-input { flex: 1 1 100%; }
  .mp-use-current { flex: 1; }
  .mp-clear-moment { width: 44px; padding: 8px; }
}

/* ══════════════════════════════════════════════════════════════
   RESULTS PAGE — STATUS PILL + CARD VARIANTS
   Added 2026-04-26 to give the results tracker accurate completion
   states. Five states total: complete / partial / empty / skipped / info.
   The 'info' state renders no pill (used for purely informational steps
   like the Package overview that have no per-couple state).
   ══════════════════════════════════════════════════════════════ */
.res-card-status.partial {
  background: rgba(212, 184, 106, .18);  /* warm amber tint */
  color: #8C7332;                        /* readable amber on cream */
}

/* Card-level visual treatment for non-default states. The plain 'complete'
   state uses the default card styling. */
.res-card-status-skipped {
  /* Skipped — looks present but visually de-emphasized so the eye skips
     past it just like the user did. Subtle muted tone. */
  background: var(--bg2);
  border-color: var(--bg3);
}
.res-card-status-skipped .res-card-title,
.res-card-status-skipped .res-card-body { opacity: .55; }
.res-card-status-skipped .res-card-icon { opacity: .5; }

.res-card-partial {
  /* (legacy class — kept harmless; new status accent comes from the
     left-edge border on .res-card-status-partial, defined below) */
}

/* ══════════════════════════════════════════════════════════════
   IN-HOUSE VENDOR HIGHLIGHTS
   Marks vendor cards where the service is provided by the venue itself
   and is included in the all-inclusive package (Desert Bloom
   Estates as venue and catering).
   ══════════════════════════════════════════════════════════════ */

/* Card-level treatment — gold border + subtle warm glow so the card reads
   as "this one's special" without overpowering the rest of the grid */
.vendor-pick-card.vendor-inhouse {
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(198, 169, 108, .12),
              0 4px 14px rgba(198, 169, 108, .08);
  position: relative;
}
/* Top ribbon — gold pill anchored to the upper-right of the card */
.vendor-inhouse-ribbon {
  background: linear-gradient(135deg, var(--gold), var(--goldDk));
  color: var(--white);
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
  padding: 5px 14px;
  margin: 0 auto;
  width: fit-content;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(168, 139, 79, .35);
  white-space: nowrap;
  pointer-events: none;
}

/* Top-of-page notice for categories where everything is in-house. Sage tinted
   so it reads as "info" rather than "alert" — softer than the gold ribbon. */
.vendor-inhouse-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  margin-bottom: var(--r4);
  background: linear-gradient(135deg, rgba(143, 166, 138, .08), rgba(198, 169, 108, .06));
  border: 1px solid rgba(143, 166, 138, .25);
  border-left: 3px solid var(--sage);
  border-radius: var(--br-md);
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--textMd);
}
.vendor-inhouse-notice-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.vendor-inhouse-notice strong { color: var(--text); font-weight: 600; }

/* On narrow screens, scale ribbon down so it doesn't overflow the card width */
@media (max-width: 540px) {
  .vendor-inhouse-ribbon {
    font-size: .52rem;
    padding: 4px 8px;
  }
}

/* SVG variant of social icons (currently just Instagram). Sizes the SVG
   to roughly match the visual weight of the text-based icons (f, P, in)
   so the row of action chips stays consistent. currentColor on the paths
   inherits whatever color the parent .vendor-action sets, so hover
   states (gold → text color) carry through automatically. */
.vendor-action-svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   RESULTS PAGE — STYLISH HERO COUNTDOWN
   The big countdown announcement above the title. Uses a unified frame
   with vertical gold dividers between time units (instead of separate
   boxed cells) for a more refined, "wedding invitation" feel.
   Adds corner sparkles, an ambient breathing glow, and a tick animation
   on each digit change.
   ══════════════════════════════════════════════════════════════ */

/* Wrapper — provides the decorative frame, sparkles, and breathing glow */
.res-head-countdown-wrap {
  position: relative;
  margin: var(--r4) auto var(--r5);
  max-width: 560px;
  padding: 22px 18px 18px;
  background:
    radial-gradient(ellipse at top, rgba(232, 217, 181, .35) 0%, transparent 60%),
    linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
  border: 1px solid var(--goldLt);
  border-radius: var(--br-lg);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .6) inset,
    0 4px 24px rgba(168, 139, 79, .15),
    0 1px 3px rgba(168, 139, 79, .08);
  /* Gentle "breathing" — the wedding day feels alive on the page */
  animation: cdBreathe 5s ease-in-out infinite;
}
@keyframes cdBreathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, 0 4px 24px rgba(168, 139, 79, .15), 0 1px 3px rgba(168, 139, 79, .08); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, 0 6px 32px rgba(168, 139, 79, .25), 0 1px 3px rgba(168, 139, 79, .12); }
}

/* Decorative four-pointed star sparkles in each corner.
   Twinkle on a gentle stagger so the eye doesn't catch a pattern. */
.res-cd-sparkle {
  position: absolute;
  width: 14px;
  height: 14px;
  color: var(--goldAA);
  opacity: .7;
  pointer-events: none;
  animation: cdTwinkle 3.5s ease-in-out infinite;
}
.res-cd-sparkle-tl { top: -7px; left: 14px; animation-delay: 0s; }
.res-cd-sparkle-tr { top: -7px; right: 14px; animation-delay: 1.2s; }
.res-cd-sparkle-bl { bottom: -7px; left: 14px; animation-delay: 2.4s; width: 10px; height: 10px; }
.res-cd-sparkle-br { bottom: -7px; right: 14px; animation-delay: 0.6s; width: 10px; height: 10px; }
@keyframes cdTwinkle {
  0%, 100% { opacity: .25; transform: scale(.85) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(45deg); }
}

/* Inner grid — drop the per-cell boxes for a unified "marquee" with
   gold vertical dividers between time units. Reads as one announcement
   rather than four separate data points. */
.res-head-countdown-wrap .res-head-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: none;
  margin: 0;
  background: transparent;
}
.res-head-countdown-wrap .countdown-cell {
  position: relative;
  background: transparent;
  border: none;
  padding: 6px 8px 4px;
  text-align: center;
  /* Vertical gold divider on the right of every cell except the last */
}
.res-head-countdown-wrap .countdown-cell + .countdown-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--goldLt) 25%,
    var(--gold) 50%,
    var(--goldLt) 75%,
    transparent 100%);
  opacity: .55;
}

/* Numerals — bigger, italic serif, deeper gold, with a subtle text glow */
.res-head-countdown-wrap .countdown-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--goldDk);
  margin-bottom: 6px;
  text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 2px 12px rgba(198, 169, 108, .25);
  transform-origin: center bottom;
}

/* Labels — refined, all-caps, generous tracking */
.res-head-countdown-wrap .countdown-lbl {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--textMd);
  font-weight: 500;
}

/* Tick animation — fires on each cell only when its value actually changes.
   Number scales briefly + a soft gold flash, like the digit was "minted". */
.res-head-countdown-wrap .countdown-cell.is-ticking .countdown-num {
  animation: cdTick .55s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes cdTick {
  0%   { transform: translateY(-4px) scale(1.18); color: var(--goldAA); text-shadow: 0 0 22px rgba(198, 169, 108, .6), 0 1px 0 rgba(255,255,255,.6); }
  60%  { transform: translateY(0)    scale(1.04); }
  100% { transform: translateY(0)    scale(1); }
}

/* Respect reduced-motion preference — disable the breathing + twinkle but
   keep the tick animation muted (it conveys information). */
@media (prefers-reduced-motion: reduce) {
  .res-head-countdown-wrap { animation: none; }
  .res-cd-sparkle { animation: none; opacity: .55; }
  .res-head-countdown-wrap .countdown-cell.is-ticking .countdown-num {
    animation-duration: .2s;
  }
}

/* ══════════════════════════════════════════════════════════════
   RESULTS PAGE — TOP-OF-PAGE PROGRESS TRACKER
   Same .wiz-progress bar as every other step. The Results segment is
   marked "current" via shape (a small caret beneath the bar) so the
   distinction works for color-blind users — color is reinforced, not
   relied upon.
   ══════════════════════════════════════════════════════════════ */
.res-progress {
  margin: 0 auto var(--r4);
  max-width: 720px;
  padding: 0 var(--r3);
}
/* Caret marker for the current segment — small triangle pointing up at the
   bar so users instantly see "you are here" by shape, not color. Applies to
   any .current indicator: the active wizard step on wizard pages AND the
   Results segment on the results page. Color-blind safe (shape-based). */
.res-progress-current {
  cursor: default;
}
.wiz-step-indicator.current::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid var(--gold);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   DATE CARD ON RESULTS — replaces the dropped inline countdown's
   layout with a clean serif date / time stack.
   ══════════════════════════════════════════════════════════════ */
.res-card-date-line strong {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 500;
}
.res-card-time-line {
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--textMd);
  margin-top: 4px;
}

/* Mobile — chip row gets cozier */
@media (max-width: 540px) {
  .res-progress { gap: var(--r3); }
}

/* ══════════════════════════════════════════════════════════════
   AUXILIARY SCREEN — shared shell for all aux pages
   The header itself is styled in the AUX PAGE HEADER section
   further down. This block keeps the screen container's layout
   constraints and the body padding rule.
   ══════════════════════════════════════════════════════════════ */
.aux-body {
  /* Matches .wiz-body's container model exactly. flex:1 makes this fill
     the screen-aux flex column, which keeps the footer at the bottom
     instead of floating up under short content. The 760px content column
     is set on direct-child .aux-stage elements (one is auto-injected via
     CSS below since aux pages don't have an explicit stage wrapper). */
  flex: 1;
  overflow-y: auto;
  padding: var(--r6) var(--r4) var(--r7);
  -webkit-overflow-scrolling: touch;
}

/* Auto-stage: aux pages render content directly into .aux-body (no wrapper
   div). Constrain the readable column by giving the aux-body's *contents*
   a max-width via a flex inner-wrap pattern: we use display:flex on the
   body with a single column and centered alignment, so child blocks
   inherit a 760px effective max-width via max-inline-size on the body
   itself — but that would constrain the body and break flex:1. Instead,
   constrain individual top-level content blocks with a CSS-only "stage"
   selector. */
.aux-body > * {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (max-width: 540px) {
  /* Match the responsive .wiz-body override. */
  .aux-body { padding: var(--r4) var(--r3) var(--r6); }
}

/* ══════════════════════════════════════════════════════════════
   RECOVERY AUX PAGE — list of past versions
   ══════════════════════════════════════════════════════════════ */
.aux-recovery-list {
  display: flex;
  flex-direction: column;
  gap: var(--r3);
  margin-bottom: var(--r5);
}
.aux-recovery-card {
  background: var(--white);
  border: 1px solid var(--goldLt);
  border-radius: var(--br-lg);
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(168, 139, 79, .06);
}
.aux-recovery-card.is-expired {
  background: var(--bg2);
  border-color: var(--bg3);
  opacity: .75;
}
.aux-recovery-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(168, 139, 79, .2);
}
.aux-recovery-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--goldAA);
  font-weight: 600;
}
.aux-recovery-date {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--textMd);
  flex: 1;
}
.aux-recovery-countdown {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(143, 166, 138, .15);
  color: var(--sageAA);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.aux-recovery-countdown.urgent {
  background: rgba(212, 184, 106, .2);
  color: #8C7332;
}
.aux-recovery-countdown.expired {
  background: var(--bg3);
  color: var(--textLtAA);
}

.aux-recovery-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
  margin: 0;
}
.aux-recovery-fields > div { min-width: 0; }
.aux-recovery-fields dt {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--textLtAA);
  font-weight: 600;
  margin-bottom: 3px;
}
.aux-recovery-fields dd {
  margin: 0;
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--text);
}
.aux-recovery-fields dd code {
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: .9rem;
  background: var(--bg);
  border: 1px solid var(--bg3);
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--goldDk);
  letter-spacing: .04em;
  user-select: all;
}

/* Instructions block — always shown, helps when codeHistory is empty too */
.aux-recovery-instructions {
  background: linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
  border: 1px solid var(--goldLt);
  border-left: 3px solid var(--gold);
  border-radius: var(--br-lg);
  padding: 22px 26px;
}
.aux-recovery-instructions h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 12px;
}
.aux-recovery-instructions ol {
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.7;
  color: var(--textMd);
  margin: 0 0 12px;
  padding-left: 22px;
}
.aux-recovery-instructions li { margin-bottom: 6px; }
.aux-recovery-instructions a {
  color: var(--goldDk);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.aux-recovery-instructions a:hover { color: var(--goldAA); }
.aux-recovery-note {
  margin: 12px 0 0;
  font-size: .82rem;
  color: var(--textLtAA);
  font-style: italic;
}

@media (max-width: 540px) {
  .aux-recovery-card { padding: 14px 16px; }
  .aux-recovery-fields { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   BASICS STEP — couple names + date inputs
   Shared label/field styling for the two field blocks (names, date+time).
   ══════════════════════════════════════════════════════════════ */
.basics-field-block {
  max-width: 480px;
  margin: 0 auto var(--r4);
}
.basics-label {
  display: block;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  margin-bottom: 8px;
}
.basics-hint {
  display: inline;
  letter-spacing: 0;
  text-transform: none;
  color: var(--textLtAA);
  font-size: .92em;
  font-weight: 400;
  font-style: italic;
}
.basics-text-input {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.15rem;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-md);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.basics-text-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198, 169, 108, .18);
}
.basics-text-input::placeholder {
  color: var(--textLtAA);
  font-style: italic;
}

/* Couple line on the results Date card — slightly larger serif so the
   name reads as the headline, with the date as supporting info below. */
.res-card-couple-line strong {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 500;
  font-style: italic;
}
.res-card-couple-line + .res-card-date-line {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--textMd);
}

/* ══════════════════════════════════════════════════════════════
   RESULTS PAGE — HEAD ROW
   The wiz-head-inner pattern with back button on left + progress bar.
   Spacer on the right matches the back button's footprint so the
   progress bar sits visually centered, not pushed left.
   ══════════════════════════════════════════════════════════════ */
.res-head-inner {
  margin-bottom: var(--r3);
}
.res-head-spacer {
  /* Same width as .wiz-exit so the progress bar reads centered */
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
/* The progress bar itself keeps its own margin/max-width rules from
   .res-progress; this just puts it inside the flex row. */
.res-head-inner .res-progress {
  margin: 0;
  flex: 1;
}

/* ══════════════════════════════════════════════════════════════
   GUEST LIST CARD (on results grid)
   Same shape as the wizard-step cards so it feels integrated, with a
   subtle sage accent on the left edge that signals "this is an action,
   not a planning state." Sage matches the in-house ribbon palette
   already used on the venue and catering cards.
   ══════════════════════════════════════════════════════════════ */
.res-card-guests {
  border-left: 3px solid var(--sage);
  /* The card is a div but acts as a button — explicit cursor + hover */
  cursor: pointer;
}
.res-card-guests:hover { transform: translateY(-2px); }
/* Status pill variant for the empty/awaiting states on this card */
.res-card-status.guest-pending {
  background: rgba(143, 166, 138, .12);
  color: var(--sageAA);
}

/* ══════════════════════════════════════════════════════════════
   GUEST LIST AUX PAGE
   Three states, same container:
     1. No magic link yet  → empty state + "what you'll see here" preview
     2. Link live, 0 RSVPs → minimal empty state
     3. Link live, ≥1 RSVP → stats strip + filterable list
   ══════════════════════════════════════════════════════════════ */

/* "What you'll see here" preview block — informative, not interactive */
.aux-guests-preview {
  margin-top: var(--r5);
  padding: 22px 26px;
  background: linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
  border: 1px solid var(--goldLt);
  border-left: 3px solid var(--gold);
  border-radius: var(--br-lg);
}
.aux-guests-preview-eyebrow {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  margin-bottom: 14px;
}
.aux-guests-preview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aux-guests-preview-list li {
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--textMd);
  padding-left: 18px;
  position: relative;
}
.aux-guests-preview-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
}
.aux-guests-preview-list li strong {
  color: var(--text);
  font-weight: 600;
}

/* Stats strip — 4 metric tiles when responses exist */
.aux-guests-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: var(--r4);
}
.aux-guests-stat {
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-md);
  padding: 14px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aux-guests-stat-num {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
  line-height: 1;
}
.aux-guests-stat-lbl {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--textLtAA);
  font-weight: 600;
}
.aux-guests-stat.is-yes     { border-color: var(--sage); }
.aux-guests-stat.is-yes     .aux-guests-stat-num { color: var(--sageAA); }
.aux-guests-stat.is-no      { border-color: var(--blush); }
.aux-guests-stat.is-no      .aux-guests-stat-num { color: var(--blushAA); }
.aux-guests-stat.is-pending { border-color: var(--bg3); }
.aux-guests-stat.is-pending .aux-guests-stat-num { color: var(--textLtAA); }

/* Response list — one row per guest */
.aux-guests-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aux-guests-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 18px;
  align-items: center;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--bg3);
  border-left: 3px solid var(--bg3);
  border-radius: var(--br-md);
}
.aux-guests-row.is-yes     { border-left-color: var(--sage); }
.aux-guests-row.is-no      { border-left-color: var(--blush); }
.aux-guests-row.is-pending { border-left-color: var(--goldLt); }
.aux-guests-row-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 500;
}
.aux-guests-row-meta {
  grid-column: 1 / 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--textMd);
}
.aux-guests-row-status {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.aux-guests-row-status.is-yes     { color: var(--sageAA); }
.aux-guests-row-status.is-no      { color: var(--blushAA); }
.aux-guests-row-status.is-pending { color: var(--textLtAA); }

@media (max-width: 540px) {
  .aux-guests-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Filter tabs — All / Confirmed / Declined / Plus-Ones */
.aux-guests-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--r4);
}
.aux-guests-tab {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--bg3);
  border-radius: 999px;
  background: var(--white);
  color: var(--textMd);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.aux-guests-tab:hover { border-color: var(--lavender); color: var(--text); }
.aux-guests-tab.is-active {
  background: var(--lavender, #A692B8);
  border-color: var(--lavender, #A692B8);
  color: #fff;
}
.aux-guests-tab-count {
  font-weight: 700;
  margin-left: 2px;
}

/* Meal breakdown */
.aux-guests-meals {
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-md);
  padding: 16px 18px;
  margin-bottom: var(--r4);
}
.aux-guests-meals-title {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--textLtAA);
  margin-bottom: 10px;
}
.aux-guests-meal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--bg2, #f4f2ef);
}
.aux-guests-meal-row:last-child { border-bottom: none; }
.aux-guests-meal-name {
  font-family: var(--serif);
  font-size: .95rem;
  color: var(--text);
}
.aux-guests-meal-count {
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 700;
  color: var(--sageAA);
  min-width: 28px;
  text-align: right;
}

/* Allergy / dietary summary */
.aux-guests-allergy-summary {
  margin-bottom: var(--r4);
}
.aux-guests-allergy-title {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--textLtAA);
  margin-bottom: 8px;
}
.aux-guests-allergy-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--textMd);
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 6px 6px 0;
}
.aux-guests-allergy-tag strong {
  color: var(--blushAA);
  margin-left: 2px;
}

/* ══════════════════════════════════════════════════════════════
   RSVP SETUP MINI-WIZARD (aux page)
   5-step flow walking the user through confirming names, menu, the
   credentials they're about to receive, and how data is handled.
   Uses the aux page shell; this CSS scopes the body content.
   ══════════════════════════════════════════════════════════════ */

/* Step pip indicators — small dots BELOW the body, one per step.
   Margin-top creates breathing room above the pips (separating them
   from the body content); margin-bottom keeps them clear of the nav. */
.rsvp-setup-pips {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--r4);
  margin-bottom: var(--r3);
}
.rsvp-setup-pip {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bg3);
  transition: background .2s, transform .2s;
}
.rsvp-setup-pip.is-done    { background: var(--goldLt); }
.rsvp-setup-pip.is-current { background: var(--gold); transform: scale(1.4); }

/* Body container — gives content room to breathe */
.rsvp-setup-body { min-height: 240px; margin-bottom: var(--r5); }

/* Bottom nav row — Back left, Continue/Generate right */
.rsvp-setup-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--r3);
  padding-top: var(--r4);
  border-top: 1px dashed var(--bg3);
}

/* Step 1: Names preview block */
.rsvp-setup-preview {
  background: linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
  border: 1px solid var(--goldLt);
  border-radius: var(--br-lg);
  padding: 32px 24px;
  text-align: center;
  margin-bottom: var(--r4);
}
.rsvp-setup-preview-label {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  margin-bottom: 12px;
}
.rsvp-setup-preview-value {
  /* Roman (non-italic) reads cleaner for names with ampersands, initials,
     and unusual punctuation that italics can mangle visually. */
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--text);
  font-weight: 500;
  margin-bottom: 6px;
}
.rsvp-setup-preview-caption {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--textMd);
  font-style: italic;
}
.rsvp-setup-actions-inline {
  text-align: center;
  margin-bottom: var(--r3);
}

/* Step 2: Menu list */
.rsvp-setup-menu-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--r3) 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rsvp-setup-menu-list li {
  background: var(--white);
  border: 1px solid var(--goldLt);
  border-left: 3px solid var(--gold);
  border-radius: var(--br-md);
  padding: 14px 18px;
}
.rsvp-setup-menu-name {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 4px;
}
.rsvp-setup-menu-desc {
  display: block;
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--textMd);
  line-height: 1.5;
}

/* Steps 3 + 4: Feature lists with icon + body */
.rsvp-setup-feature-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: var(--r4);
}
.rsvp-setup-feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.rsvp-setup-feature-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: var(--bg);
  border: 1px solid var(--goldLt);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--goldAA);   /* SVG uses currentColor for stroke + fill */
}
/* SVGs inside the gold circle — sized to look balanced against the
   emoji baseline (44px circle, ~22px content). */
.rsvp-setup-feature-icon svg {
  width: 22px;
  height: 22px;
}
/* Text-based icon for the wedding code — a stylized letter+number pair
   that visually represents what the code looks like (alphanumeric, all
   caps, monospace). Sized to fit comfortably in the 44px bubble. */
.rsvp-feature-icon-code {
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--goldAA);
  line-height: 1;
}
.rsvp-setup-feature strong {
  display: block;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
}
.rsvp-setup-feature p {
  margin: 0;
  font-family: var(--sans);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--textMd);
}
.rsvp-setup-feature p code {
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: .88em;
  background: var(--bg);
  border: 1px solid var(--bg3);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--goldDk);
}

/* Trust line at the bottom of step 3 */
.rsvp-setup-trust {
  margin-top: var(--r4);
  padding: 12px 16px;
  background: var(--bg);
  border-left: 3px solid var(--sage);
  border-radius: var(--br-md);
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--textMd);
  line-height: 1.55;
}

/* Warning block — for missing names / menu */
.rsvp-setup-warning {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: rgba(212, 160, 160, .08);
  border: 1px solid rgba(212, 160, 160, .35);
  border-left: 3px solid var(--blush);
  border-radius: var(--br-md);
}
.rsvp-setup-warning-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.rsvp-setup-warning strong {
  display: block;
  font-family: var(--sans);
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
}
.rsvp-setup-warning p {
  margin: 0;
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--textMd);
  line-height: 1.55;
}

/* Step 5: Final review summary */
.rsvp-setup-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: var(--r4);
}
.rsvp-setup-summary-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--goldLt);
  border-left: 3px solid var(--sage);
  border-radius: var(--br-md);
}
/* Middle content cluster (label + value or label + input). flex:1 so it
   absorbs leftover row width, pushing the pencil button to the far right. */
.rsvp-setup-summary-content {
  flex: 1;
  min-width: 0; /* prevents overflow on long values that contain
                   no break opportunities (e.g. unbroken couple-name strings) */
}
/* Pencil edit button — quiet, compact, lifts gold on hover so it reads as
   "edit" rather than "delete." Positioned as a flex child of the row so
   it self-aligns with the icon column on the left. */
.rsvp-setup-summary-edit {
  flex-shrink: 0;
  background: none;
  border: 1px solid transparent;
  color: var(--textLtAA);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s, border-color .15s;
  /* Nudge up so the pencil aligns with the label baseline rather than
     the row's flex-start top edge — looks centered against the label. */
  margin-top: -2px;
}
.rsvp-setup-summary-edit:hover,
.rsvp-setup-summary-edit:focus-visible {
  color: var(--goldAA);
  background: rgba(198,169,108,.08);
  border-color: var(--goldLt);
  outline: none;
}
/* Inline edit input that replaces the .rsvp-setup-summary-value when
   editingNames is true. Visually styled to read as an editable text
   field while staying compact in the row. */
.rsvp-setup-summary-input {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.4;
  width: 100%;
  padding: 6px 10px;
  border: 1.5px solid var(--goldLt);
  border-radius: var(--br-sm);
  background: var(--bg);
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
}
.rsvp-setup-summary-input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--white);
}
/* When the row is in edit mode, hide its quirky "missing" tinting so
   the input has clean contrast. */
.rsvp-setup-summary-row.is-editing {
  background: var(--white);
  border-left-color: var(--gold);
}
.rsvp-setup-summary-row.is-missing {
  border-left-color: var(--blush);
  background: rgba(212, 160, 160, .05);
}
.rsvp-setup-summary-row.is-info {
  border-left-color: var(--gold);
  background: linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
}
.rsvp-setup-summary-icon {
  flex-shrink: 0;
  width: 28px;
  font-size: 1.1rem;
  text-align: center;
}
.rsvp-setup-summary-label {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--textLtAA);
  font-weight: 600;
  margin-bottom: 4px;
}
.rsvp-setup-summary-value {
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.4;
}
.rsvp-setup-summary-row.is-missing .rsvp-setup-summary-value {
  color: var(--blushAA);
  font-style: normal;
  font-family: var(--sans);
  font-size: .92rem;
}

.rsvp-setup-note {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--textMd);
  font-style: italic;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   RSVP SETUP — INLINE EDIT BLOCKS
   Step 1's editable name input + step 2's add/remove menu controls.
   These keep the user in the rsvpSetup flow instead of redirecting
   to the wizard's Basics or Menu steps.
   ══════════════════════════════════════════════════════════════ */

/* Step 1: empty preview state — italic placeholder when no name set */
.rsvp-setup-preview.is-empty .rsvp-setup-preview-value {
  color: var(--textLtAA);
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
}

/* Wrapper around the inline name input */
.rsvp-setup-edit-block {
  max-width: 480px;
  margin: 0 auto;
}
.rsvp-setup-edit-hint {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--textLtAA);
  font-style: italic;
  margin: 8px 0 0;
  text-align: center;
}

/* Step 2: empty-pick prompt — no longer used (replaced by reassurance
   banner) but the class might be referenced elsewhere; kept harmless. */

/* Section eyebrows — small uppercase headers between the picked grid,
   reassurance, and addable grid. Match the visual language of the
   .menu-trust-note treatment used on the main Menu step. */
.rsvp-setup-section-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: var(--r4) 0 var(--r2);
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
}
.rsvp-setup-section-count {
  color: var(--textLtAA);
  font-weight: 500;
  letter-spacing: .14em;
}

/* Reassurance banner — adapts wording based on pick count. The whole point:
   make it visually obvious the user can stop here. Two states:
     is-required (red-ish) → "you must pick at least one"
     is-optional (gold-soft) → "more is welcome but you're set" */
.rsvp-setup-reassure {
  margin: var(--r2) 0 var(--r3);
  padding: 14px 18px;
  border-radius: var(--br-md);
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--textMd);
  text-align: center;
}
.rsvp-setup-reassure strong { color: var(--text); font-weight: 600; }
.rsvp-setup-reassure.is-optional {
  background: linear-gradient(180deg, rgba(143,166,138,.10) 0%, rgba(143,166,138,.05) 100%);
  border: 1px solid rgba(143,166,138,.35);
  border-left: 3px solid var(--sage);
}
.rsvp-setup-reassure.is-required {
  background: rgba(212, 184, 106, .12);
  border: 1px solid rgba(212, 184, 106, .4);
  border-left: 3px solid var(--gold);
}

/* "Add" variant of the choice card — visually similar to the picked
   .choice-card.selected but with a softer treatment so picked vs
   addable is unambiguous. Hover lifts and brightens the CTA. */
.choice-card.choice-card-add {
  cursor: pointer;
  border: 1px dashed var(--bg3);
  background: var(--white);
  transition: all .18s;
}
.choice-card.choice-card-add:hover,
.choice-card.choice-card-add:focus-visible {
  border-style: solid;
  border-color: var(--sage);
  background: rgba(143, 166, 138, .04);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(143, 166, 138, .15);
}
.choice-card.choice-card-add:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.choice-card-add-cta {
  /* align-self + margin-top:auto pushes the pill to the bottom-left of the
     card body regardless of description length. .choice-card-body is a flex
     column, so this gives every card the same CTA baseline. */
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg);
  border: 1px solid var(--sage);
  border-radius: 999px;
  color: var(--sageAA);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: all .15s;
}
/* Guarantee a gap above the CTA even when the description is long enough
   that the auto-margin collapses to zero. Scoped to add cards so picked
   cards (which don't have this CTA) aren't affected. */
.choice-card.choice-card-add .choice-card-desc { margin-bottom: 14px; }
.choice-card-add-cta span {
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
}
.choice-card.choice-card-add:hover .choice-card-add-cta {
  background: var(--sage);
  color: var(--white);
}

/* Picker-mode header — eyebrow on the left, "Done" link on the right.
   Used when the user has tapped the "+ Add another entrée" browse card
   and the aux body has expanded to show the full available list. */
.rsvp-setup-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--r3);
  margin: var(--r4) 0 var(--r2);
}

/* ══════════════════════════════════════════════════════════════
   RESULTS PAGE — SORT + FILTER CONTROLS (dropdown pattern)
   Two pill-buttons side by side with icons (sort arrows / filter
   funnel), each opens a popover menu. Selected option in each menu
   shows a check. Click outside or ESC to close.
   ══════════════════════════════════════════════════════════════ */
.res-controls {
  max-width: 760px;
  margin: 0 auto var(--r4);
}
.res-ctrl-bar {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-lg);
  overflow: visible; /* allows the dropdown menus to escape the bar */
  box-shadow: 0 2px 8px rgba(20, 18, 13, .04);
  position: relative;
}

/* Each button + its dropdown menu live inside a wrap so the menu can
   absolute-position itself to the button. */
.res-ctrl-wrap {
  position: relative;
  flex: 1;
  display: flex;
}

/* The trigger button — full width inside its wrap, transparent base, */
/* highlights on hover or when its dropdown is open. */
.res-ctrl-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--text);
  font-weight: 500;
  transition: background .15s;
  position: relative;
  text-align: left;
}
.res-ctrl-btn:hover {
  background: var(--bg);
}
.res-ctrl-btn.is-open {
  background: var(--bg);
  color: var(--text);
}
.res-ctrl-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--textMd);
}
.res-ctrl-btn.has-active .res-ctrl-icon { color: var(--goldAA); }
.res-ctrl-btn-label {
  font-weight: 600;
  flex-shrink: 0;
}
.res-ctrl-btn-value {
  font-size: .82rem;
  color: var(--textMd);
  font-weight: 400;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.res-ctrl-chev {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--textLtAA);
  transition: transform .2s;
}
.res-ctrl-btn.is-open .res-ctrl-chev { transform: rotate(180deg); }
/* Tiny gold dot — visible indicator that this control has a non-default
   value applied. Sits in the upper-right of the button. */
.res-ctrl-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white);
}
.res-ctrl-btn.is-open .res-ctrl-dot {
  box-shadow: 0 0 0 2px var(--bg);
}

/* Vertical divider between buttons */
.res-ctrl-divider {
  width: 1px;
  background: var(--bg3);
  margin: 8px 0;
  flex-shrink: 0;
}

/* Dropdown menu — positioned below its button */
.res-ctrl-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-md);
  box-shadow: 0 8px 24px rgba(20, 18, 13, .12);
  padding: 6px;
  z-index: 100;
  animation: resMenuIn .15s ease-out;
}
@keyframes resMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.res-ctrl-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--text);
  text-align: left;
  transition: background .12s;
}
.res-ctrl-menu-item:hover {
  background: var(--bg);
}
.res-ctrl-menu-item.is-active {
  background: rgba(212, 184, 106, .08);
  color: var(--goldAA);
  font-weight: 600;
}
.res-ctrl-menu-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.res-ctrl-check {
  width: 14px;
  height: 14px;
  color: var(--goldAA);
}
.res-ctrl-menu-label { flex: 1; }

/* Conditional Clear button — only renders when sort or filter is non-default */
.res-ctrl-clear {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--bg3);
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--textMd);
  cursor: pointer;
  font-weight: 500;
  transition: color .15s, background .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.res-ctrl-clear:hover {
  background: var(--bg);
  color: var(--blushAA);
}

/* Empty state — when filter excludes every card */
.res-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--r6) var(--r4);
  background: var(--bg);
  border: 1px dashed var(--bg3);
  border-radius: var(--br-lg);
}
.res-empty-icon {
  font-size: 2rem;
  margin-bottom: var(--r2);
  opacity: .6;
}
.res-empty-text {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--textMd);
  margin-bottom: var(--r3);
}

/* Mobile — hide the active-value display so the button doesn't get crowded;
   the value still appears in the dropdown menu (with check), and the
   gold dot indicator still shows when something's active. */
@media (max-width: 640px) {
  .res-ctrl-btn-value { display: none; }
  .res-ctrl-btn { padding: 10px 14px; gap: 6px; font-size: .85rem; }
  .res-ctrl-clear { padding: 0 12px; font-size: .78rem; }
  .res-ctrl-menu { min-width: 180px; }
}

/* ══════════════════════════════════════════════════════════════
   RESULTS CARDS — STRONGER STATUS VISIBILITY
   Adds a colored left-edge accent so card status reads at a glance
   without having to focus on the pill. Each status has a distinct
   color AND a distinct glyph (in the pill) for color-blind safety.
   ══════════════════════════════════════════════════════════════ */
/* Reserve room for the absolute-positioned pencil button at bottom-right */
.res-card { position: relative; padding-bottom: 56px; }

/* Status accent — 5px left border, applied on the card itself
   (e.g. .res-card-status-complete) so the border sits flush. */
.res-card-status-complete  { border-left: 5px solid var(--sage); }
.res-card-status-partial   { border-left: 5px solid var(--gold); }
.res-card-status-empty     { border-left: 5px solid var(--blush); }
.res-card-status-skipped   { border-left: 5px solid var(--bg3); }
.res-card-status-info      { border-left: 5px solid var(--goldLt); }

/* Slightly bolder status pill — bumps font weight + adds icon emphasis
   so the status reads quickly even from a scrolling glance. */
.res-card-status {
  font-weight: 600;
  letter-spacing: .04em;
}

/* Pencil / eye action button — bottom-right corner of every card.
   Sized to be an obvious tap target (40x40) without dominating the card.
   The whole card remains clickable; this is just a visual affordance. */
.res-card-action {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--goldLt);
  background: var(--white);
  border-radius: 50%;
  color: var(--goldAA);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  padding: 0;
}
.res-card-action svg {
  width: 18px;
  height: 18px;
}
.res-card-action:hover {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
  transform: scale(1.05);
}
.res-card:hover .res-card-action {
  border-color: var(--gold);
}

/* CONTROLS HEADER ROW — title on the left, conditional Clear on the right.
   Sits above the SORT and SHOW rows. The Clear button only renders when
   the user has a non-default sort or filter applied. */
.res-controls-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.res-controls-title {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .04em;
}
.res-controls-clear {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--goldAA);
  background: transparent;
  border: 1px solid var(--goldLt);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
  transition: all .15s;
}
.res-controls-clear:hover {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}

/* ══════════════════════════════════════════════════════════════
   JOURNAL AUX PAGE
   Tagged free-form planning entries. Tags mirror the wizard's planning
   sections (Vendors, Menu, Music, etc.) so the journal feels native.
   Each entry: date stamp + tag select + textarea + delete. New entries
   inherit the active filter as their tag. Autosave on every keystroke.
   ══════════════════════════════════════════════════════════════ */

/* Wedding context strip — "X days until your wedding" at the top of
   the page when S.weddingDate is set. Sets temporal frame for entries. */
.journal-context {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--white) 100%);
  border: 1px solid var(--goldLt);
  border-radius: var(--br-md);
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--textMd);
  margin-bottom: var(--r3);
}
.journal-context strong {
  color: var(--goldDk);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.journal-context-icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* Toolbar */
.journal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--r3);
  padding-bottom: var(--r3);
  border-bottom: 1px solid var(--bg3);
}
.journal-count {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--textMd);
  letter-spacing: 0.04em;
}

/* Filter pills — only shown when 2+ distinct tags are in use. Each
   pill includes a count so distribution is visible at a glance. */
.journal-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--r3);
}
.journal-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  color: var(--textMd);
  cursor: pointer;
  transition: all .15s;
  line-height: 1.2;
}
.journal-filter-pill:hover {
  background: var(--bg);
  border-color: var(--goldLt);
}
.journal-filter-pill.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}
.journal-filter-pill.is-active .journal-filter-count {
  background: rgba(255, 255, 255, 0.25);
  color: var(--white);
}
.journal-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
  height: 18px;
  background: var(--bg);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--textMd);
}

/* Filtered empty state — user filtered to a tag with no matching entries */
.journal-filter-empty {
  text-align: center;
  padding: var(--r5) var(--r3);
  color: var(--textMd);
  font-family: var(--sans);
}
.journal-filter-empty p {
  margin: 0 0 var(--r3) 0;
  font-size: .92rem;
}

/* Entry list */
.journal-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.journal-entry {
  background: var(--white);
  border: 1px solid var(--bg3);
  border-left: 3px solid var(--gold);
  border-radius: var(--br-md);
  padding: 14px 16px;
  transition: border-color .15s, box-shadow .15s;
}
.journal-entry:focus-within {
  border-left-color: var(--goldDk);
  box-shadow: 0 2px 8px rgba(184, 154, 94, .12);
}

.journal-entry-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.journal-entry-date {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--textMd);
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: 1 1 auto;
  min-width: 0;
}
.journal-entry-time {
  color: var(--textLtAA);
  font-weight: 400;
  font-size: .76rem;
}

/* Tag select — native <select> styled to look like a pill. Native
   widget gives free keyboard nav, screen reader support, and mobile
   native picker UI. */
.journal-entry-tag {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23a78a4f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center;
  background-size: 8px 5px;
  border: 1px solid var(--goldLt);
  border-radius: 999px;
  padding: 3px 22px 3px 10px;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  color: var(--goldDk);
  letter-spacing: 0.03em;
  cursor: pointer;
  outline: none;
  line-height: 1.4;
  transition: border-color .15s, background-color .15s;
}
.journal-entry-tag:hover {
  border-color: var(--gold);
}
.journal-entry-tag:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 154, 94, .15);
}

.journal-entry-delete {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--bg3);
  width: 26px;
  height: 26px;
  border-radius: 4px;
  color: var(--textLtAA);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.journal-entry-delete:hover {
  background: var(--blush);
  color: var(--white);
  border-color: var(--blush);
}

/* Textarea — looks like body text, not a form field. Tag-specific
   placeholder doubles as a writing prompt. */
.journal-entry-body {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  resize: vertical;
  min-height: 80px;
  outline: none;
  padding: 0;
}
.journal-entry-body::placeholder {
  color: var(--textLtAA);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   CHECKLIST AUX PAGE
   30 planning milestones across 6 phases. Each phase is a card with
   its own progress, items, and current-phase highlight. Items have
   optional cross-links into the wizard so the checklist works as
   a navigation hub, not just a static list.
   ══════════════════════════════════════════════════════════════ */

/* Overall progress strip — under the wedding context line */
.checklist-progress {
  margin-bottom: var(--r4);
}
.checklist-progress-bar {
  height: 8px;
  background: var(--bg);
  border: 1px solid var(--bg3);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.checklist-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--goldDk) 100%);
  border-radius: 999px;
  transition: width .3s ease;
}
.checklist-progress-text {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--textMd);
  text-align: right;
  letter-spacing: 0.04em;
}

/* Phase cards */
.checklist-phases {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checklist-phase {
  background: var(--white);
  border: 1px solid var(--bg3);
  border-left: 3px solid var(--bg3);
  border-radius: var(--br-md);
  padding: 14px 16px;
  transition: border-color .15s, box-shadow .15s;
}
/* Current-phase highlight — subtle gold accent + shadow so the user's
   eye lands here first when scanning the page. */
.checklist-phase.is-current {
  border-left-color: var(--gold);
  box-shadow: 0 2px 12px rgba(184, 154, 94, .15);
}
/* Completed phase — sage accent for "this whole phase is done" */
.checklist-phase.is-complete {
  border-left-color: var(--sage, #8FA68A);
  background: linear-gradient(180deg, var(--white) 0%, rgba(143, 166, 138, .04) 100%);
}

.checklist-phase-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.checklist-phase-icon {
  font-size: 1.2rem;
  line-height: 1;
}
.checklist-phase-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
}
.checklist-phase-badge {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);
  background: var(--gold);
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
.checklist-phase-ratio {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  color: var(--textMd);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.checklist-phase-ratio.is-complete {
  color: var(--sage, #8FA68A);
}

/* Items — checkbox row pattern */
.checklist-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checklist-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
  flex-wrap: wrap;
}
.checklist-item:hover {
  background: var(--bg);
}
.checklist-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.checklist-item-text {
  flex: 1 1 auto;
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--text);
  line-height: 1.4;
  min-width: 0;
}
/* Done state — strike through + dim. Strike on text only, not the link. */
.checklist-item.is-done .checklist-item-text {
  text-decoration: line-through;
  color: var(--textLtAA);
}

/* Inert note (e.g., "Already at Desert Bloom Estates ✓") — no button affordance,
   just a small label so the user knows nothing's required here. */
.checklist-item-note {
  font-family: var(--sans);
  font-size: .74rem;
  color: var(--sage, #8FA68A);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 480px) {
  .checklist-item-note {
    margin-left: 28px;
    font-size: .68rem;
  }
}

/* Consolidated nudge bar — sits at the bottom of each phase card,
   collects all navigational shortcuts with duplicates removed. */
.checklist-nudge-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--r3);
  padding-top: var(--r3);
  border-top: 1px solid var(--bg3);
}
.checklist-nudge-btn {
  background: transparent;
  border: 1px solid var(--goldLt);
  color: var(--goldDk);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.checklist-nudge-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}
.checklist-nudge-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   RESULTS — TOOLS / PLANNING SEPARATION
   When default sort is active and both groups are present, the grid
   splits into two sections with eyebrow labels. Each section renders
   its cards in the same auto-fill grid as the original .res-grid so
   spacing and breakpoints match exactly.
   ══════════════════════════════════════════════════════════════ */
.res-section {
  margin-bottom: var(--r5);
}
.res-section:last-child {
  margin-bottom: 0;
}

/* Section header — small uppercase eyebrow + horizontal rule. The
   rule extends to the right of the eyebrow so the label feels
   grounded without visually overpowering the cards below. */
.res-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--r3);
}
.res-section-eyebrow {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--goldDk);
  text-transform: uppercase;
  white-space: nowrap;
}
.res-section-rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--goldLt) 0%, transparent 100%);
}

/* Section grid — same layout as .res-grid (auto-fill, 280px min) */
.res-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--r4);
}

/* When the parent .res-grid is holding sections (rather than bare cards),
   it must NOT impose its own multi-column layout on those sections —
   otherwise the two .res-section divs render side-by-side as grid items.
   Switch to block flow so the sections stack vertically; each section's
   internal grid handles its own card layout. */
.res-grid.has-sections {
  display: block;
}


/* ══════════════════════════════════════════════════════════════
   SITE FOOTER (persistent across all screens)
   Slim by default — just a centered copyright line + privacy link.
   The richer venue block (address, contact, explore) lives on the
   results page where it has room to breathe.
   ══════════════════════════════════════════════════════════════ */

.site-foot {
  background: var(--bg);
  border-top: none;
}
#main-content:has(#screen-landing.screen-active) ~ .site-foot {
  background: #F0E8D7;
  font-family: var(--sans);
  color: var(--textMd);
}

/* Copyright bar — single centered row across the bottom of every
   screen. The privacy link sits next to the copyright so the whole
   footer reads as one quiet statement. */
.site-foot-bar {
  padding: 16px 24px;
  text-align: center;
  font-size: .76rem;
  color: var(--textLtAA);
  letter-spacing: 0.04em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.site-foot-sep {
  color: var(--bg3);
}

/* Privacy link — button styled to look like inline text so it sits
   naturally in the copyright bar without breaking the visual rhythm. */
.site-foot-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--goldDk);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--goldLt);
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.site-foot-link:hover {
  color: var(--goldAA);
  text-decoration-color: var(--gold);
}
.site-foot-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 720px) {
  .site-foot-bar {
    padding: 14px 20px;
    font-size: .72rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   PRIVACY MODAL
   Full disclosure dialog triggered from the footer link. Same overlay
   pattern as the helpPanel but sized larger and with a scrollable
   body so the substantive content fits. Close via ✕ button, backdrop
   click, ESC key (handled in wizard.js), or the "Got it" CTA.
   ══════════════════════════════════════════════════════════════ */
.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 250;       /* above helpPanel (200) and wizard chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.privacy-modal[hidden] { display: none; }

.privacy-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 10, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.privacy-modal-card {
  position: relative;
  background: var(--white);
  border-radius: var(--br-lg);
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(20, 15, 10, .25);
  overflow: hidden;
}

.privacy-modal-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--bg3);
}
.privacy-modal-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}
.privacy-modal-close {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--bg3);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--textMd);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all .15s;
}
.privacy-modal-close:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--gold);
}

/* Body scrolls if content exceeds max-height; head + foot stay fixed. */
.privacy-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 24px;
}
.privacy-modal-body p {
  font-family: var(--sans);
  font-size: .88rem;
  line-height: 1.65;
  margin: 0 0 14px;
  color: var(--textMd);
}
.privacy-modal-body p:last-child {
  margin-bottom: 0;
}
.privacy-modal-body strong {
  color: var(--text);
  font-weight: 600;
}
.privacy-modal-body code {
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: .82em;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--goldDk);
}
.privacy-modal-body a {
  color: var(--goldDk);
  text-decoration: underline;
  text-decoration-color: var(--goldLt);
  text-underline-offset: 2px;
  transition: color .15s, text-decoration-color .15s;
}
.privacy-modal-body a:hover {
  color: var(--goldAA);
  text-decoration-color: var(--gold);
}

.privacy-modal-foot {
  flex-shrink: 0;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--bg3);
  display: flex;
  justify-content: flex-end;
}

/* Mobile — full-screen-ish modal so all content has room to breathe. */
@media (max-width: 600px) {
  .privacy-modal { padding: 12px; }
  .privacy-modal-card { max-height: 92vh; }
  .privacy-modal-head { padding: 16px 18px 12px; }
  .privacy-modal-title { font-size: 1.2rem; }
  .privacy-modal-body { padding: 16px 18px; }
  .privacy-modal-body p { font-size: .85rem; }
  .privacy-modal-foot { padding: 12px 18px 16px; }
}

/* ══════════════════════════════════════════════════════════════
   RESULTS-PAGE VENUE BLOCK
   Lives at the bottom of #screen-results only — sits below the
   action footer (recover/download/wipe) as a "destination" for
   couples who finish their plan: book a tour, ask questions,
   browse the gallery. Three columns on desktop (visit / contact /
   explore), stacks on mobile.
   ══════════════════════════════════════════════════════════════ */

.res-venue {
  margin-top: var(--r6);
  padding: var(--r6) var(--r4) var(--r5);
  background: transparent;
  border: none;
  border-radius: var(--br-lg);
  text-align: center;
}

/* Head — venue mark + name + tagline, centered. The gold logo
   matches the landing screen so couples see the same identity bookend
   on both ends of the planning experience. */
.res-venue-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--r4);
}
.res-venue-mark {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}
.res-venue-headtext {
  text-align: center;
}
.res-venue-name {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 500;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.005em;
}
.res-venue-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  color: var(--textMd);
  margin: 4px 0 0;
}

/* Three-column info grid — visit, contact, explore. auto-fit lets it
   collapse to two cols at medium widths and one col on phones. */
.res-venue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--r5);
  padding: var(--r4) 0;
  margin: 0 auto;
  max-width: 720px;
  border-top: 1px solid var(--bg3);
  border-bottom: 1px solid var(--bg3);
  text-align: left;
}

.res-venue-block {
  min-width: 0;
}
.res-venue-label {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--goldDk);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.res-venue-text {
  font-family: var(--sans);
  font-size: .88rem;
  line-height: 1.7;
  color: var(--textMd);
  font-style: normal;
  margin: 0;
}
.res-venue-text a {
  color: var(--goldDk);
  text-decoration: none;
  border-bottom: 1px dotted var(--goldLt);
  transition: color .15s, border-color .15s;
}
.res-venue-text a:hover {
  color: var(--goldAA);
  border-bottom-color: var(--gold);
}
/* Hint text (e.g. "Tours by appointment") — quieter than the
   actionable links above it. */
.res-venue-hint {
  display: inline-block;
  margin-top: 4px;
  font-size: .8rem;
  color: var(--textLtAA);
  font-style: italic;
}

/* CTA row — "Have questions about your plan?" + Get-in-touch button.
   Sits below the info grid as the natural "what's next" action. */
.res-venue-cta {
  margin-top: var(--r4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.res-venue-cta-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--text);
  margin: 0;
}

/* Mobile — center-align text inside info blocks since cards stack */
@media (max-width: 600px) {
  .res-venue-grid {
    text-align: center;
    gap: var(--r4);
    padding: var(--r3) 0 var(--r4);
  }
  .res-venue {
    padding: var(--r5) var(--r3) var(--r4);
  }
}

/* ══════════════════════════════════════════════════════════════
   GUEST LIST AUX PAGE — SYNC HEADER + ERROR BANNER
   The guests page polls rsvp-fetch.php every 30s while open. The
   sync header tells the user when data was last fetched, signals
   in-flight requests, and offers a manual "Sync now" button. The
   error banner appears below it if the last fetch failed.
   ══════════════════════════════════════════════════════════════ */

.aux-guests-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r2);
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: var(--br-sm);
  margin-bottom: var(--r3);
  font-size: .82rem;
  color: var(--textMd);
}
.aux-guests-sync-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.aux-guests-sync-dot {
  font-size: .55rem;
  color: var(--sageAA);
  line-height: 1;
}
.aux-guests-sync-dot.is-pending {
  color: var(--textLtAA);
}
.aux-guests-sync-spinner {
  display: inline-block;
  font-weight: 700;
  color: var(--goldAA);
  animation: aux-guests-spin 1s linear infinite;
}
@keyframes aux-guests-spin {
  to { transform: rotate(360deg); }
}
/* Sync-now button — overrides default link-button padding so it sits
   neatly inside the header bar without becoming visually heavy. */
.aux-guests-sync-btn {
  flex-shrink: 0;
  font-size: .82rem;
  padding: 4px 10px;
  margin: 0;
}

.aux-guests-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(212, 160, 160, 0.12);
  border: 1px solid var(--blush);
  border-radius: var(--br-sm);
  margin-bottom: var(--r3);
  font-size: .85rem;
  color: var(--text);
  line-height: 1.5;
}
.aux-guests-error-icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* Row note — quieter italic text for guest-supplied notes */
.aux-guests-row-note {
  font-style: italic;
  color: var(--textLtAA);
}

/* ══════════════════════════════════════════════════════════════════
   PIN_LOCK — Privacy & Safety lock screen + settings modal
   ────────────────────────────────────────────────────────────────
   Two top-level components:
   1. .pin-lock-overlay — full-screen takeover shown on boot when the
      planner is locked. body.pin-lock-active hides everything else.
   2. .pin-settings-modal — opened from the lock-icon button in the
      header. Centered card on a backdrop.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Full-screen lock overlay ── */
.pin-lock-overlay {
  position: fixed; inset: 0; z-index: 99998;
  display: none; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f5efe6 0%, #e8d9b5 100%);
  padding: 24px; overflow-y: auto;
}
.pin-lock-overlay-visible { display: flex; }
/* When the lock is active, hide the rest of the planner so nothing
   leaks through. The overlay is visually opaque but this is defense
   in depth — also prevents background clicks/keystrokes reaching
   focused planner inputs. Uses the .pin-lock-overlay class so both
   the boot-time lock overlay (#pinLockOverlay) and dynamically
   created modals (wipe, export, confirm, alert) remain visible. */
body.pin-lock-active:not(.modal-blur-active) > *:not(.pin-lock-overlay):not(#pinSettingsModal) {
  display: none !important;
}
.pin-lock-card {
  width: 100%; max-width: 420px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff; border-radius: 18px;
  padding: 36px 28px 32px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.12);
  text-align: center;
}
.pin-lock-icon { font-size: 3rem; line-height: 1; margin-bottom: 12px; }
.pin-lock-title { margin: 0 0 6px; font-size: 1.5rem; color: #3b3228; }
.pin-lock-sub   { margin: 0 0 22px; color: #6b5b5b; font-size: 0.95rem; }
.pin-lock-input-wrap { margin: 0 0 14px; }
.pin-lock-input {
  width: 100%; padding: 14px 16px;
  border: 1.5px solid #e8d9b5; border-radius: 10px;
  background: #fff; font-size: 1.4rem; font-weight: 600;
  text-align: center; letter-spacing: 0.4em;
  color: #3b3228; box-sizing: border-box;
  transition: border-color 0.2s;
}
.pin-lock-input-text {
  font-size: 1rem; letter-spacing: 0.15em; font-weight: 500;
}
.pin-lock-input:focus { outline: none; border-color: #c6a96c; }
.pin-lock-btn {
  width: 100%; padding: 12px 20px;
  background: var(--gold); color: var(--text); border: none; border-radius: 10px;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.pin-lock-btn:hover:not(:disabled) { background: #b29658; }
.pin-lock-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pin-lock-btn-danger { background: #c94c4c; }
.pin-lock-btn-danger:hover:not(:disabled) { background: #a83838; }
.pin-lock-msg {
  min-height: 1.2em; margin: 12px 0 0;
  font-size: 0.9rem; color: #6b5b5b;
}
.pin-lock-links {
  margin-top: 18px; display: flex; justify-content: center;
}
.pin-lock-link {
  background: none; border: none; padding: 6px 8px;
  color: #6bAABD; font-family: inherit; font-size: 0.9rem;
  text-decoration: underline; cursor: pointer;
}
.pin-lock-link:hover { color: #4d8ba0; }
.pin-lock-recovery { margin-top: 16px; text-align: center; }
.pin-lock-divider {
  border: none; border-top: 1px solid #e8d9b5; margin: 18px 0;
}
.pin-lock-h3 { margin: 0 0 8px; font-size: 1.1rem; color: #3b3228; }
.pin-lock-helptext {
  margin: 0 0 12px; font-size: 0.85rem; color: #6b5b5b; line-height: 1.5;
}
.pin-lock-label {
  display: block; margin: 10px 0 4px;
  font-size: 0.85rem; font-weight: 500; color: #6b5b5b;
}

/* ── 2. Settings modal ── */
.pin-settings-modal {
  position: fixed; inset: 0; z-index: 99997;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pin-settings-modal[hidden] { display: none; }
.pin-settings-backdrop {
  position: absolute; inset: 0;
  background: rgba(59, 50, 40, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.pin-settings-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px; max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff; border-radius: 16px;
  padding: 32px 28px 28px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  text-align: center;
}
.pin-settings-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 1.8rem; line-height: 1; color: #6b5b5b;
  padding: 4px 10px;
}
.pin-settings-close:hover { color: #3b3228; }
.pin-settings-title { margin: 0 0 6px; font-size: 1.4rem; color: #3b3228; }
.pin-settings-sub   { margin: 0 0 18px; color: #6b5b5b; font-size: 0.92rem; line-height: 1.5; }
.pin-settings-status {
  padding: 10px 14px; border-radius: 8px; margin-bottom: 18px;
  font-size: 0.92rem; line-height: 1.45;
  text-align: left;
}
.pin-settings-status-on  { background: #e8f4ec; color: #2c5f2d; border: 1px solid #c5dec8; }
.pin-settings-status-off { background: #fdf5e6; color: #8a6d3b; border: 1px solid #f0dfb3; }
.pin-settings-h3 { margin: 0 0 8px; font-size: 1.05rem; color: #3b3228; }
.pin-settings-label {
  display: block; margin: 10px 0 4px;
  font-size: 0.85rem; font-weight: 500; color: #6b5b5b;
}
.pin-settings-input {
  width: 100%; max-width: 280px;
  padding: 10px 12px; box-sizing: border-box;
  border: 1.5px solid #e8d9b5; border-radius: 8px;
  background: #fff; font-size: 1.1rem; font-weight: 600;
  text-align: center; letter-spacing: 0.3em;
  color: #3b3228; transition: border-color 0.2s;
  margin: 0 auto 6px;
  display: block;
}
.pin-settings-input:focus { outline: none; border-color: #c6a96c; }
.pin-settings-btn {
  display: inline-block; padding: 10px 18px;
  margin-top: 8px;
  background: var(--gold); color: var(--text); border: none; border-radius: 8px;
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.pin-settings-btn:hover:not(:disabled) { background: #b29658; }
.pin-settings-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pin-settings-btn-danger { background: #c94c4c; }
.pin-settings-btn-danger:hover:not(:disabled) { background: #a83838; }
.pin-settings-msg {
  min-height: 1.2em; margin: 8px 0 0;
  font-size: 0.85rem; color: #6b5b5b;
}
.pin-settings-divider {
  border: none; border-top: 1px solid #e8d9b5; margin: 22px 0;
}
.pin-settings-helptext {
  margin: 0 0 12px; font-size: 0.85rem; color: #6b5b5b; line-height: 1.5;
}
.pin-settings-helptext-warn {
  background: #fdf5e6; border: 1px solid #f0dfb3;
  border-radius: 8px; padding: 10px 14px;
  color: #8a6d3b;
  text-align: left;
}
.pin-settings-input-text {
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  max-width: 280px;
}
.pin-settings-recovery-box {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 0.1em;
  background: #f5efe6; color: #3b3228;
  border: 1.5px dashed #c6a96c; border-radius: 10px;
  padding: 16px 12px; margin: 12px 0;
  text-align: center; user-select: all;
  overflow-wrap: break-word;
}
.pin-settings-recovery-actions {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
  justify-content: center;
}
.pin-settings-confirm {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; margin: 12px 0;
  font-size: 0.9rem; color: #3b3228; cursor: pointer;
  text-align: left;
  justify-content: center;
  max-width: 340px; margin-left: auto; margin-right: auto;
}
.pin-settings-confirm input { margin-top: 3px; flex-shrink: 0; }

/* ── Lock-icon button (host HTML must add this — see deploy notes) ── */
.pin-lock-icon-btn {
  background: none; border: none; padding: 8px 10px;
  cursor: pointer; font-size: 1.1rem; line-height: 1;
  color: #6b5b5b; border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.pin-lock-icon-btn:hover { background: rgba(198, 169, 108, 0.15); color: #3b3228; }
.pin-lock-icon-btn[aria-pressed="true"] { color: var(--goldAA); }

/* ── Mobile tweaks ── */
@media (max-width: 480px) {
  .pin-lock-card     { padding: 28px 20px 24px; }
  .pin-lock-title    { font-size: 1.3rem; }
  .pin-settings-card { padding: 24px 20px 20px; }
  .pin-settings-title{ font-size: 1.2rem; }
}

/* Lock SVG in the aux header — small inline icon */
.pin-lock-icon-svg-sm {
  width: 18px; height: 18px;
  display: block;
  stroke: currentColor;
}
/* Lock SVG inline with footer text */
.pin-lock-icon-svg-inline {
  width: 14px; height: 14px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 2px;
  stroke: currentColor;
}

/* ══════════════════════════════════════════════════════════════════
   AUX PAGE HEADER — branded navbar
   ────────────────────────────────────────────────────────────────
   Used on screen-aux only. Replaces the wizard-style header
   (back-arrow + progress bar + ?) with a brand-anchored navbar.

   Row order, left → right:
     1. Return-to-plan button (back action, primary)
     2. Eyebrow context indicator ("RSVP SETUP · STEP 1 OF 5")
     3. Flexible spacer (pushes right cluster to the edge)
     4. Lock icon (privacy / safety settings)
     5. Brand mark (horse + "Desert Bloom Estates")

   Below that row sits the wiz-step-meta block (title + subtitle).
   ══════════════════════════════════════════════════════════════════ */

.aux-head {
  background: var(--bg2);
  border-bottom: 1px solid var(--bg3);
  padding: 14px var(--r5) 18px;
}
.aux-head-inner {
  /* 3-column grid: back button (left), eyebrow (center), lock icon (right).
     Each column is 1fr wide regardless of its content's intrinsic width.
     This is the only reliable way to keep the eyebrow truly centered in
     the navbar — flexbox + flex:1 only centers in the *leftover* space,
     which biases off-center when the flanking elements have unequal
     widths (the wide "Return to your plan" button vs. the narrow lock
     icon). */
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
/* Each cluster's children align toward their own edge so the
   composition reads as: back-flush-left | centered-eyebrow | lock-flush-right */
.aux-head-inner > .aux-return-btn { justify-self: start; }
.aux-head-inner > .wiz-lock-btn   { justify-self: end; }
/* The legacy .aux-head-spacer div is no longer used (grid replaces its
   role). Hide it to keep DOM-vs-layout legible — without this, the
   spacer would still occupy a grid track and shift the layout. */
.aux-head-inner > .aux-head-spacer { display: none; }
/* aux-head-spacer used to push the right cluster outward; the centered
   eyebrow (flex:1) now fills that role. The spacer div in the HTML is
   harmless but unstyled — kept for backwards-compat in case someone
   wants to re-introduce a non-centered eyebrow layout later. */

/* ── Return-to-plan button (leftmost) ──
   Visual treatment comes from .wiz-btn + .wiz-btn-secondary on the
   element itself, so this button matches the wizard's Back button
   exactly (transparent bg over cream navbar, gray border that turns
   gold on hover). The rules below only add the bits the base
   classes don't cover: inline-flex for the arrow+text layout, the
   arrow-shift hover micro-animation, and the mobile collapse to a
   round icon-only button. */
.aux-return-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.aux-return-arrow {
  font-size: 1rem;
  line-height: 1;
  transition: transform .15s;
}
.aux-return-btn:hover .aux-return-arrow {
  transform: translateX(-2px);
}

/* ── Eyebrow context (immediately after back button) ──
   Reuses the look of .wiz-step-eyebrow (uppercase gold label) but
   sits inline in the navbar rather than below it. */
.aux-head-eyebrow {
  /* Sits in the center column of the 3-column grid above. Each grid
     column is 1fr wide, so the eyebrow's center IS the navbar's center
     regardless of flanking element widths. text-align:center centers
     the text within its (auto-width) cell. */
  text-align: center;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── Brand mark (rightmost) ── */
.aux-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 4px 4px 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  flex-shrink: 0;
  transition: background .15s;
}
.aux-brand:hover { background: rgba(198,169,108,.08); }
.aux-brand:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.aux-brand-icon {
  width: 36px;
  height: 36px;
  display: block;
  flex-shrink: 0;
}
.aux-brand-name {
  font-family: var(--display, Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ── Mobile (≤540px) ──
   Tight viewport — drop the wordmark (icon alone holds brand presence)
   and collapse the return button to icon-only. The eyebrow stays
   visible but truncates with ellipsis if long. The right cluster
   becomes two equally-sized round buttons + the icon, so the visual
   weight on each side is balanced. */
@media (max-width: 540px) {
  .aux-head { padding: 10px var(--r4) 14px; }
  .aux-head-inner { gap: 10px; }
  .aux-brand-name { display: none; }
  .aux-brand-icon { width: 32px; height: 32px; }
  .aux-return-label { display: none; }
  .aux-return-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .aux-return-btn .aux-return-arrow { font-size: 1.05rem; }
  .aux-head-eyebrow { font-size: .65rem; letter-spacing: .1em; }
}

/* ── Very narrow (≤360px) — extreme small phones ──
   Hide the eyebrow text in the navbar entirely. The page title
   below the navbar still names the aux page. */
@media (max-width: 360px) {
  .aux-head-eyebrow { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   RSVP "your link is live" — final step of the rsvp-setup wizard.
   Replaces the old browser alert with an in-app credentials view.
   Sections:
     1. Live banner (✨ + couple names)
     2. Credential cards (wedding code, magic link, code-entry link)
     3. QR code with download
     4. Couple-key disclosure (collapsed by default)
   ══════════════════════════════════════════════════════════════════ */

/* ── Live banner ── */
.rsvp-live-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(198,169,108,.12) 0%, rgba(143,166,138,.08) 100%);
  border: 1px solid var(--goldLt);
  border-left: 3px solid var(--gold);
  border-radius: var(--br-md);
  margin-bottom: var(--r5);
}
.rsvp-live-banner-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.rsvp-live-banner-content { flex: 1; min-width: 0; }
.rsvp-live-banner-eyebrow {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 700;
  margin-bottom: 4px;
}
.rsvp-live-banner-couple {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--text);
  line-height: 1.2;
}

/* ── Credential cards ── */
.rsvp-live-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: var(--r5);
}
.rsvp-live-card {
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-md);
  padding: 16px 18px;
}
.rsvp-live-card-head { margin-bottom: 10px; }
.rsvp-live-card-label {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 700;
  margin-bottom: 2px;
}
.rsvp-live-card-hint {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--textMd);
  font-style: italic;
}
.rsvp-live-card-value {
  background: var(--bg);
  border: 1px solid var(--bg3);
  border-radius: var(--br-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  user-select: all;
  overflow-wrap: break-word;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92rem;
  color: var(--text);
  line-height: 1.4;
}
/* Wedding code — bigger, more letter-spacing, looks like a code */
.rsvp-live-card-value-code {
  font-size: 1.25rem;
  letter-spacing: .15em;
  font-weight: 600;
  text-align: center;
  color: var(--text);
}
/* URLs — smaller for length, allows wrapping */
.rsvp-live-card-value-link {
  font-size: .85rem;
}
/* Couple secret — same as link but with a subtle redaction-style
   warning treatment so users feel its sensitivity */
.rsvp-live-card-value-secret {
  font-size: .85rem;
  background: var(--bg2);
  border-color: var(--goldLt);
  color: var(--textMd);
}
.rsvp-live-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
}
.rsvp-live-copy-btn.is-copied {
  border-color: var(--sage) !important;
  color: var(--sageAA) !important;
}
.rsvp-live-copy-icon { font-size: 1rem; line-height: 1; }

/* ── QR code section ── */
.rsvp-live-qr {
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-md);
  padding: 18px 18px 20px;
  margin-bottom: var(--r5);
  text-align: center;
}
.rsvp-live-qr-head { margin-bottom: 14px; }
.rsvp-live-qr-label {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--goldAA);
  font-weight: 700;
  margin-bottom: 4px;
}
.rsvp-live-qr-hint {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--textMd);
  font-style: italic;
  line-height: 1.45;
  max-width: 44ch;
  margin: 0 auto;
}
.rsvp-live-qr-canvas-wrap {
  position: relative;
  display: inline-block;
  margin: 6px auto 14px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--bg3);
  border-radius: var(--br-sm);
}
.rsvp-live-qr-canvas {
  display: block;
  width: 240px;
  height: 240px;
}
.rsvp-live-qr-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--textMd);
  background: var(--bg);
  border-radius: var(--br-sm);
  padding: 14px;
  text-align: center;
}
/* The [hidden] attribute's UA-stylesheet display:none is overridden by
   the explicit display:flex above. This selector restores it so the
   overlay actually disappears after the QR code renders. */
.rsvp-live-qr-status[hidden] { display: none; }
.rsvp-live-qr-actions {
  display: flex;
  justify-content: center;
}

/* ── Couple key disclosure ── */
.rsvp-live-secret {
  background: var(--bg);
  border: 1px solid var(--bg3);
  border-radius: var(--br-md);
  margin-bottom: var(--r4);
}
.rsvp-live-secret-summary {
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
}
.rsvp-live-secret-summary::-webkit-details-marker { display: none; }
.rsvp-live-secret-summary::before {
  content: '\25B8';
  display: inline-block;
  transition: transform .15s;
  color: var(--textLtAA);
  font-size: .75rem;
}
.rsvp-live-secret[open] .rsvp-live-secret-summary::before {
  transform: rotate(90deg);
}
.rsvp-live-secret-summary-hint {
  font-weight: 400;
  font-style: italic;
  color: var(--textMd);
  font-size: .82rem;
}
.rsvp-live-secret-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--bg3);
  margin-top: 4px;
  padding-top: 14px;
}
.rsvp-live-secret-note {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--textMd);
  line-height: 1.55;
  margin: 0 0 12px;
}

/* ── Mobile (≤540px) ── */
@media (max-width: 540px) {
  .rsvp-live-banner { padding: 14px 16px; gap: 12px; }
  .rsvp-live-banner-icon { font-size: 1.6rem; }
  .rsvp-live-banner-couple { font-size: 1.2rem; }
  .rsvp-live-card { padding: 14px; }
  .rsvp-live-card-value-code { font-size: 1.1rem; letter-spacing: .12em; }
  .rsvp-live-qr-canvas { width: 200px; height: 200px; }
}

/* ══════════════════════════════════════════════════════════════════
   WAVE 4 — RESPONSIVE ENHANCEMENTS
   Added: additional breakpoints for small devices, large-screen
   widening, stats bar stacking, footer button wrapping, and
   silverware border visibility improvements.
   ══════════════════════════════════════════════════════════════════ */

/* ── 4e: Silverware utensil borders ──
   Subtle outline so the fork/knife/spoon read clearly against any
   linen color, including whites and ivories. Raise opacity slightly
   from the base values (.35/.28) so the borders are perceivable. */
.linen-sw-fork,
.linen-sw-knife {
  opacity: .45;
}
.linen-sw-spoon {
  opacity: .38;
}
.linen-sw-handle,
.linen-sw-handle-50,
.linen-sw-handle-4 {
  border: 0.5px solid rgba(120, 110, 95, .35);
}
.linen-knife-blade {
  border: 0.5px solid rgba(120, 110, 95, .3);
  border-right-width: 1.5px;
}
.linen-spoon-bowl {
  border: 0.5px solid rgba(120, 110, 95, .3);
}
.linen-spoon-base {
  border: 0.5px solid rgba(120, 110, 95, .25);
  border-top: none;
}
.linen-fork-neck {
  border: 0.5px solid rgba(120, 110, 95, .25);
  border-top: none;
}
.fork-tine {
  border: 0.5px solid rgba(120, 110, 95, .25);
  border-bottom: none;
}

/* ── 4c: Landing stats bar — flex-wrap fix + narrow stacking ── */
.landing-stats {
  flex-wrap: wrap;
}
@media (max-width: 375px) {
  .landing-stats {
    gap: var(--r3) var(--r5);
  }
  .landing-stats strong {
    font-size: 1.3rem;
  }
  .landing-stats span {
    font-size: .6rem;
  }
}

/* ── 4d: Results footer buttons — 2×2 grid on narrow screens ── */
@media (max-width: 480px) {
  .res-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .res-footer-btn {
    justify-content: center;
    padding: 10px 12px;
    font-size: .74rem;
    white-space: normal;
    text-align: center;
  }
}
@media (max-width: 340px) {
  .res-footer {
    grid-template-columns: 1fr;
  }
}

/* ── 4b: Large screen — widen results, add visual framing ── */
@media (min-width: 1200px) {
  .res-body {
    max-width: 1280px;
  }
  .res-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
@media (min-width: 1600px) {
  .res-body {
    max-width: 1440px;
  }
  .res-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--r5);
  }
  .res-card {
    padding: var(--r6);
  }
}

/* Widen wizard content area slightly on large screens */
@media (min-width: 1200px) {
  .linen-grid {
    gap: var(--r6);
  }
}

/* ── 4a: Small device breakpoints (≤375px, ≤340px) ── */
@media (max-width: 375px) {
  /* Tighten overall padding */
  .wiz-body {
    padding-left: var(--r3);
    padding-right: var(--r3);
  }
  .res-body {
    padding-left: var(--r3);
    padding-right: var(--r3);
  }
  .aux-body {
    padding: var(--r4) var(--r3) var(--r7);
  }

  /* Smaller headings */
  .wiz-title {
    font-size: 1.5rem;
  }
  .landing-title {
    font-size: 2rem;
  }
  .res-title {
    font-size: 1.4rem;
  }

  /* Tighter swatch grid */
  .swatch-grid {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 4px;
  }
  .swatch {
    padding: 4px 2px;
  }

  /* Result cards tighter */
  .res-card {
    padding: var(--r4);
  }

  /* RSVP credential cards more compact */
  .rsvp-live-card {
    padding: 12px;
  }
  .rsvp-live-card-value-code {
    font-size: 1rem;
    letter-spacing: .08em;
  }
  .rsvp-live-qr-canvas {
    width: 180px;
    height: 180px;
  }

  /* Music moment cards tighter */
  .mm-card {
    padding: var(--r3);
  }

  /* Vendor cards */
  .ven-card {
    padding: var(--r3);
  }
}

/* Extreme small (≤340px) — iPhone SE first-gen, older Androids */
@media (max-width: 340px) {
  .landing-title {
    font-size: 1.7rem;
  }
  .wiz-title {
    font-size: 1.3rem;
  }

  /* Stack stats bar vertically */
  .landing-stats {
    flex-direction: column;
    gap: var(--r2);
    align-items: center;
  }
  .landing-stats > div {
    flex-direction: row;
    gap: 6px;
    align-items: baseline;
  }
  .landing-stats strong {
    font-size: 1.1rem;
  }

  /* RSVP QR code even smaller */
  .rsvp-live-qr-canvas {
    width: 160px;
    height: 160px;
  }

  /* Hide silverware on very tiny screens — plate is enough */
  .linen-sw-area {
    display: none;
  }
}

/* ── 4e: Linen preview — scale down gracefully ── */
@media (max-width: 375px) {
  .linen-cloth-area {
    padding: 24px 16px;
    min-height: 220px;
  }
  .linen-plate {
    width: 110px;
    height: 110px;
  }
  .linen-sw-area {
    width: 200px;
    height: 130px;
  }
}

/* ── 5b: RSVP generation spinner overlay ── */
.rsvp-gen-spinner {
  position: absolute;
  inset: 0;
  background: rgba(253, 250, 246, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: var(--br-lg);
  animation: rsvpSpinnerIn .25s ease-out;
}
@keyframes rsvpSpinnerIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.rsvp-gen-spinner-card {
  text-align: center;
  padding: var(--r5);
}
.rsvp-gen-spinner-ring {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border: 3px solid var(--bg3);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: rsvpSpinnerSpin .8s linear infinite;
}
@keyframes rsvpSpinnerSpin {
  to { transform: rotate(360deg); }
}
.rsvp-gen-spinner-label {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--textMd);
  font-weight: 500;
}

/* ── 5d: Offline connectivity banner ── */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #3B3228, #4A3F32);
  color: #F5F0E8;
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.4;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .3s ease-out, opacity .3s ease-out;
}
.offline-banner-visible {
  transform: translateY(0);
  opacity: 1;
}
.offline-banner-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.offline-banner-text strong {
  color: var(--goldAA);
}
@media (max-width: 375px) {
  .offline-banner {
    padding: 8px 14px;
    font-size: .76rem;
    gap: 8px;
  }
}

/* ── A3: Skip-to-content link ── */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--gold);
  color: var(--text);
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 600;
  border-radius: var(--br-sm);
  text-decoration: none;
  transition: top .2s;
}
.skip-to-content:focus {
  top: 8px;
}

/* ── A4: Screen-reader only (aria-live announcements) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── A5: Global focus-visible indicator (WCAG 2.4.7 / 2.4.11) ── */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
a:focus-visible {
  outline: 2px solid var(--goldAA);
  outline-offset: 2px;
}

/* ── A6: Reduced motion (WCAG 2.3.3) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   B2: PRINT STYLESHEET
   Optimized for printing the results page as a clean, branded PDF
   via the browser's native print dialog.
   ══════════════════════════════════════════════════════════════════ */
@media print {
  /* Hide non-printable UI */
  .skip-to-content,
  .site-foot,
  .privacy-modal-wrap,
  .help-modal-wrap,
  .pin-lock-overlay,
  .offline-banner,
  .res-footer,
  .res-controls,
  .res-actions,
  .wiz-header,
  .wiz-footer,
  .wiz-progress,
  #screen-landing,
  #screen-wizard,
  #screen-aux { display: none !important; }

  /* Force results screen visible */
  #screen-results { display: block !important; }
  #screen-results.screen { opacity: 1 !important; }

  /* Reset backgrounds and colors for print */
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  .res-body {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Card grid — 2 columns on paper, no background tinting */
  .res-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
  }
  .res-card {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    padding: 10px !important;
    background: #fff !important;
  }

  /* Show a branded header for the printed page */
  .res-header {
    text-align: center;
    padding: 20px 0 10px;
    border-bottom: 2px solid #C6A96C;
    margin-bottom: 16px;
  }
  .res-header .res-title {
    font-size: 18pt;
    color: #3B3228;
  }

  /* Linen swatches — ensure borders print */
  .res-linen-swatch {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Force color printing for key visual elements */
  .res-card-status,
  .res-linen-swatch,
  .swatch-color {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Links — show URL */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #666;
  }
  a[href^="tel"]::after,
  a[href^="mailto"]::after,
  a[href^="javascript"]::after,
  a[href^="#"]::after { content: ""; }
}

/* ══════════════════════════════════════════════════════════════════
   CSP-COMPLIANT UTILITY CLASSES
   Replacements for inline style="" attributes so style-src can
   drop 'unsafe-inline'. Dynamic values (colors, widths, bg-images)
   use data-* attributes applied via CSSOM in _applyDynStyles().
   ══════════════════════════════════════════════════════════════════ */

/* ── Modal backdrop blur (alert/confirm, NOT the PIN lock screen) ── */
.modal-backdrop-blur {
  background: rgba(59, 50, 40, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-backdrop-blur .pin-lock-card { position: relative; }

/* ── Modal close × button ── */
.modal-close-x {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: #9a8e80;
  width: 44px; height: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.15s, color 0.15s;
}
.modal-close-x:hover { background: rgba(0,0,0,0.06); color: #3b3228; }

/* ── Modal layout helpers ── */
.modal-card-narrow { max-width: 420px; }
.modal-body-text { text-align: left; line-height: 1.55; }
.modal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.modal-actions-col { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.modal-export-list { text-align: left; margin: 16px 0 8px; }

/* ── Modal button variants ── */
.btn-modal-secondary { background: var(--bg3, #EDE6DB); color: var(--text, #3B3228); }
.btn-modal-danger { background: #B57F7F; border-color: #B57F7F; color: #fff; }
.btn-modal-full { width: 100%; text-align: center; }
.btn-export-option { width: 100%; text-align: left; padding: 12px 16px; }
.btn-export-option + .btn-export-option { margin-top: 0; }
.btn-export-first { margin-bottom: 8px; }
.btn-export-detail { font-size: .85em; opacity: .75; }
.btn-export-option + .btn-export-option { margin-top: 6px; }

/* Data load status messages */
.data-load-status {
  margin-top: var(--r3);
  padding: 8px 12px;
  border-radius: var(--br-sm);
  font-size: .85rem;
  font-family: var(--sans);
  text-align: center;
}
.data-load-success {
  background: rgba(143, 166, 138, .15);
  color: var(--sage, #8FA68A);
  font-weight: 600;
}
.data-load-error {
  background: rgba(181, 127, 127, .15);
  color: #B57F7F;
  font-weight: 600;
}

/* ── Text helpers ── */
.text-lt { color: var(--textLtAA); }
.text-gold { color: var(--goldAA); }
.text-strong { font-weight: 600; color: var(--text); }

/* ── Specific component overrides ── */
.is-taken { opacity: .55; cursor: not-allowed; }
.choice-redirect-msg { text-align: center; padding: var(--r6); color: var(--textMd); font-style: italic; }
.entree-picker-taken { font-size: .7rem; color: var(--goldAA); margin-top: 8px; font-weight: 600; }
.entree-picker-count { text-align: center; font-size: .82rem; color: var(--textLtAA); margin-top: 24px; }
.menu-status-saved { text-align: center; font-size: .85rem; color: var(--sageAA); margin-top: 24px; font-weight: 500; }
.menu-status-empty { text-align: center; font-size: .85rem; color: var(--textLtAA); margin-top: 24px; }
.custom-vendor-heading { font-family: var(--serif); margin: 0 0 6px; font-size: 1.15rem; font-weight: 500; color: var(--text); }
.custom-vendor-desc { font-size: .82rem; color: var(--textMd); margin: 0 0 16px; }
.custom-vendor-err { color: var(--blushAA); font-size: .78rem; margin-top: 8px; min-height: 18px; }
.basics-date-hint { font-size: .78rem; color: var(--textLtAA); margin: 18px auto 0; max-width: 380px; line-height: 1.5; }
.vendor-add-label { font-weight: 600; color: var(--text); }
.vendor-add-hint { font-size: .76rem; color: var(--textLtAA); margin-top: 4px; }
.rsvp-eyebrow-flush { margin: 0; }
.link-gold { color: var(--goldAA); }

/* ── Spacing helpers ── */
.mt-1 { margin-top: 6px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 18px; }
.mb-1 { margin-bottom: 4px; }
.mt-2 { margin-top: 8px; }

/* ── Hidden by default (replaces style="display:none") ── */
.is-hidden { display: none; }