/* ============ chrome tokens ============ */
:root{
  --paper:#E9E0CE;
  --paper-lift:#FBF8F0;
  --ink:#20143A;
  --ink-soft:#5F5178;
  --pink:#FF3D9A;          /* fills only — too light for text on cream */
  --pink-ink:#B01260;      /* the text-safe pink */
  --blue:#1F3FE0;
  --stage:#1B1130;
  --line:#D8CCB4;
  --radius:18px;
  --shadow:0 18px 50px -24px rgba(32,20,58,.55);
  font-synthesis-weight:none;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body[data-mode="craft"] .fv-view{display:none}
body[data-mode="view"] .fv-craft{display:none}
body[data-mode="view"] .fv-tagline{display:none}

a{color:var(--blue)}
::selection{background:var(--pink);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}

/* ============ card themes ============
   Each theme is a whole look, not a recolour: ground, texture, heading
   typeface, corner shape, rule style and alignment all move together, so a
   baby shower and a poker night do not come out as the same card.
   Every palette is checked against its own ground —
   ink >= 7:1, sub >= 4.5:1, accent >= 4.5:1. */
[data-theme]{
  --card-radius:16px;
  --card-pad:34px 32px 30px;
  --card-align:left;
  --card-justify:flex-start;
  --mark-inset:0;
  --card-frame:0 0 0 0 transparent;

  --title-font:"Bricolage Grotesque",sans-serif;
  --title-weight:800;
  --title-tracking:-.02em;
  --title-case:none;
  --title-lh:1.04;
  --title-size:clamp(28px,5.4vw,38px);

  --eyebrow-font:"Space Mono",monospace;
  --eyebrow-tracking:.16em;
  --eyebrow-weight:700;

  --rule-style:solid;
  --rule-width:1.5px;
  --chip-radius:999px;

  --tex-c:color-mix(in srgb,var(--card-ink) 55%,transparent);
  --tex:radial-gradient(var(--tex-c) 21%,transparent 22%);
  --tex-size:7px 7px;
  --tex-repeat:repeat;
  --tex-fade:.22;
}

/* Letterpress — the neutral one: dinners, drinks, anything without a costume */
[data-theme="letterpress"]{
  --card-bg:#F4EDDE;--card-ink:#241733;--card-sub:#655377;--card-accent:#C4136B;
}

/* Vows — weddings, anniversaries, anything with a dress code worth naming */
[data-theme="vows"]{
  --mark-inset:auto;
  --card-bg:#FBF6EC;--card-ink:#22352C;--card-sub:#4E6B5C;--card-accent:#8A5E24;
  --card-radius:3px;--card-pad:46px 40px 40px;--card-align:center;--card-justify:center;
  --card-frame:inset 0 0 0 1px color-mix(in srgb,var(--card-ink) 30%,transparent),inset 0 0 0 6px var(--card-bg),inset 0 0 0 7px color-mix(in srgb,var(--card-ink) 18%,transparent);
  --title-font:"Playfair Display",Georgia,serif;--title-weight:600;--title-tracking:0;
  --title-lh:1.16;--title-size:clamp(27px,4.8vw,35px);
  --eyebrow-font:"Playfair Display",Georgia,serif;--eyebrow-tracking:.34em;--eyebrow-weight:500;
  --chip-radius:3px;--tex:none;--tex-fade:0;
}

/* Nursery — baby and bridal showers, christenings, gentle daytime things */
[data-theme="nursery"]{
  --mark-inset:auto;
  --card-bg:#FBE9F0;--card-ink:#3B2340;--card-sub:#6B4A6B;--card-accent:#2F6F8F;
  --card-radius:30px;--card-pad:38px 34px 32px;--card-align:center;--card-justify:center;
  --title-font:Fraunces,Georgia,serif;--title-weight:700;--title-tracking:-.008em;--title-lh:1.12;
  --eyebrow-font:Fraunces,Georgia,serif;--eyebrow-tracking:.2em;--eyebrow-weight:600;
  --rule-style:dashed;
  --tex-c:#EFB9CF;
  --tex:radial-gradient(var(--tex-c) 14%,transparent 15%);--tex-size:24px 24px;--tex-fade:.55;
}

/* Confetti — kids' birthdays, graduations, anything that wants balloons */
[data-theme="confetti"]{
  --card-bg:#FFFBF0;--card-ink:#1E2140;--card-sub:#55597F;--card-accent:#D4145A;
  --card-radius:22px;--card-pad:52px 32px 30px;
  --title-font:Fraunces,Georgia,serif;--title-weight:900;--title-tracking:-.015em;--title-lh:1.02;
  --eyebrow-font:Fraunces,Georgia,serif;--eyebrow-tracking:.18em;--eyebrow-weight:700;
  --rule-style:dashed;
  /* confetti settles along the top edge — a full field would sit under the copy */
  --tex:
    radial-gradient(circle at 12% 22%,#D4145A 0 3.5px,transparent 3.5px),
    radial-gradient(circle at 34% 62%,#1F8FD4 0 3px,transparent 3px),
    radial-gradient(circle at 55% 14%,#F0A800 0 3.5px,transparent 3.5px),
    radial-gradient(circle at 74% 48%,#2FA36B 0 3px,transparent 3px),
    radial-gradient(circle at 90% 78%,#7B3FD4 0 3px,transparent 3px),
    radial-gradient(circle at 24% 88%,#F0A800 0 2.5px,transparent 2.5px);
  --tex-size:118px 76px;--tex-repeat:repeat-x;--tex-fade:1;
}

/* Punch — loud parties, house shows, "just come over" */
[data-theme="punch"]{
  --card-bg:#FF85C0;--card-ink:#1A0A14;--card-sub:#5E1440;--card-accent:#12238F;
  --title-tracking:-.03em;--title-size:clamp(30px,5.8vw,41px);
  --rule-width:2.5px;
  --tex:repeating-linear-gradient(45deg,var(--tex-c) 0 3px,transparent 3px 15px);
  --tex-size:auto;--tex-fade:.14;
}

/* Citrus — cookouts, pool days, bright summer afternoons */
[data-theme="citrus"]{
  --card-bg:#FFD23F;--card-ink:#231A05;--card-sub:#5B4708;--card-accent:#7A1038;
  --tex-size:11px 11px;--tex-fade:.20;
}

/* Fiesta — taco night, big dinners, anything with a table and noise */
[data-theme="fiesta"]{
  --card-bg:#8A2B12;--card-ink:#FFF1DC;--card-sub:#F5CBA3;--card-accent:#FFD75E;
  --card-radius:12px;
  --title-case:uppercase;--title-tracking:.005em;--title-lh:1.0;--title-size:clamp(26px,4.9vw,34px);
  --tex:
    repeating-linear-gradient(60deg,var(--tex-c) 0 2px,transparent 2px 18px),
    repeating-linear-gradient(-60deg,var(--tex-c) 0 2px,transparent 2px 18px);
  --tex-size:auto;--tex-fade:.15;
}

/* Pistachio — brunches, garden things, baby-steps daytime plans */
[data-theme="pistachio"]{
  --card-bg:#DCE8C8;--card-ink:#243018;--card-sub:#4F5C38;--card-accent:#B0335C;
  --title-weight:700;
  --tex:linear-gradient(var(--tex-c) 1px,transparent 1px),linear-gradient(90deg,var(--tex-c) 1px,transparent 1px);
  --tex-size:24px 24px;--tex-fade:.20;
}

/* Marine — beach evenings, boat things, late-summer dinners */
[data-theme="marine"]{
  --card-bg:#0E3B45;--card-ink:#EAF4F0;--card-sub:#9DC0BC;--card-accent:#5FE3C0;
  --tex:repeating-linear-gradient(135deg,var(--tex-c) 0 1px,transparent 1px 18px);
  --tex-size:auto;--tex-fade:.16;
}

/* Midnight — cocktails, birthdays after dark, going-out plans */
[data-theme="midnight"]{
  --card-bg:#20143A;--card-ink:#F4EDDE;--card-sub:#B3A3CF;--card-accent:#FF6FB4;
  --tex-fade:.22;
}

/* Felt — poker, game night, fantasy drafts, anything around a table */
[data-theme="felt"]{
  --card-bg:#0F4430;--card-ink:#F3EBD8;--card-sub:#A9C2AE;--card-accent:#E0B54A;
  --card-radius:6px;--card-pad:36px 32px 30px;
  --card-frame:inset 0 0 0 2px color-mix(in srgb,var(--card-accent) 55%,transparent),inset 0 0 0 5px var(--card-bg),inset 0 0 0 6px color-mix(in srgb,var(--card-accent) 30%,transparent);
  --title-font:"Space Mono",monospace;--title-weight:700;--title-case:uppercase;
  --title-tracking:.02em;--title-lh:1.1;--title-size:clamp(23px,4vw,29px);
  --eyebrow-tracking:.22em;
  --rule-style:double;--rule-width:4px;--chip-radius:4px;
  --tex:repeating-linear-gradient(45deg,var(--tex-c) 0 1px,transparent 1px 10px),
        repeating-linear-gradient(-45deg,var(--tex-c) 0 1px,transparent 1px 10px);
  --tex-size:auto;--tex-fade:.14;
}

/* Noir — gallery openings, tasting menus, minimal and severe */
[data-theme="noir"]{
  --card-bg:#141414;--card-ink:#F2F0EA;--card-sub:#A8A49B;--card-accent:#E8FF5A;
  --card-radius:2px;
  --title-case:uppercase;--title-tracking:-.005em;--title-size:clamp(26px,4.9vw,34px);
  --rule-width:1px;--chip-radius:2px;
  --tex:repeating-linear-gradient(0deg,var(--tex-c) 0 1px,transparent 1px 16px);
  --tex-size:auto;--tex-fade:.14;
}

/* ============ topbar ============ */
.fv-wrap{max-width:1180px;margin:0 auto;padding:26px clamp(16px,4vw,40px) 64px}
.fv-top{margin-bottom:8px}
.fv-brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;line-height:1;cursor:pointer;background:none;border:0;padding:0;color:var(--ink)}
.fv-brand b{color:var(--pink-ink);font-weight:800}
.fv-tagline{font-size:clamp(15px,2.2vw,18px);color:var(--ink-soft);max-width:46ch;margin:2px 0 30px}
.fv-tagline b{color:var(--ink);font-weight:600}

/* ============ craft layout ============ */
.fv-craft{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:30px;align-items:start}
@media (max-width:880px){.fv-craft{grid-template-columns:minmax(0,1fr)}}

.fv-form{min-width:0;background:var(--paper-lift);border:1.5px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.fv-form__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.fv-form__head h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:21px;margin:0;letter-spacing:-.01em}
.fv-link-ex{font-family:"Space Mono",monospace;font-size:12px;background:none;border:0;color:var(--blue);cursor:pointer;text-decoration:underline;padding:4px;border-radius:6px}

/* legends sit in the normal flow; the section rule is a pseudo-element so it
   never gets punched through by the browser's legend/border behaviour */
.fv-fieldset{position:relative;border:0;margin:0;padding:20px 0 4px;min-width:0}
.fv-fieldset + .fv-fieldset::before{content:"";position:absolute;top:0;left:0;right:0;border-top:1px dashed var(--line)}
.fv-legend{float:left;width:100%;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);padding:0;margin:0 0 12px}
.fv-field{clear:both;margin-bottom:14px}
.fv-field:last-child{margin-bottom:0}
.fv-label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
.fv-input,.fv-textarea{width:100%;min-width:0;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px}
.fv-input:focus,.fv-textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(31,63,224,.16)}
.fv-textarea{resize:vertical;min-height:84px;line-height:1.5}
.fv-row{clear:both;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
/* A native date input wants ~166px and a time input ~138px; squeezed below that
   Chromium truncates the value in place ("07:3(") instead of overflowing, so
   nothing looks broken until you read it. All four across needs ~508px, which
   the 440px form column never has. Reflow keys off the form's own width because
   that is not monotonic with the viewport: the column is capped at 440px on
   desktop but runs full width on a tablet. */
.fv-form{container-type:inline-size}
.fv-times{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.fv-times .d-date{grid-column:1;grid-row:1}
.fv-times .d-start{grid-column:1;grid-row:2}
.fv-times .d-end{grid-column:1;grid-row:3}
.fv-times .d-remove{grid-column:2;grid-row:1/-1;align-self:start}
@container (min-width:336px){
  .fv-times{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .fv-times .d-date{grid-column:1/3}
  .fv-times .d-start{grid-column:1;grid-row:2}
  .fv-times .d-end{grid-column:2;grid-row:2}
  .fv-times .d-remove{grid-column:3}
}
@container (min-width:530px){
  .fv-times{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) auto}
  .fv-times .d-date{grid-column:1;grid-row:1}
  .fv-times .d-start{grid-column:2;grid-row:1}
  .fv-times .d-end{grid-column:3;grid-row:1}
  .fv-times .d-remove{grid-column:4;grid-row:1}
}
.fv-date-row{clear:both}
.fv-date-row + .fv-date-row{margin-top:10px}
.fv-mini{font-size:11.5px;color:var(--ink-soft);font-weight:500;margin:-2px 0 5px}
.fv-mini--inline{display:inline}
.fv-x{border:1.5px solid var(--line);background:#fff;border-radius:10px;width:42px;height:42px;font-size:18px;cursor:pointer;color:var(--ink-soft);line-height:1}
.fv-x:hover{border-color:var(--pink-ink);color:var(--pink-ink)}
.is-invisible{visibility:hidden}
.fv-addrow{clear:both;margin-top:10px;font-family:"Space Mono",monospace;font-size:12.5px;background:none;border:1.5px dashed var(--line);border-radius:10px;padding:9px 12px;cursor:pointer;color:var(--ink);width:100%}
.fv-addrow:hover{border-color:var(--blue);color:var(--blue)}
.fv-addrow[hidden]{display:none}

/* ============ icon picker ============ */
.fv-icons{clear:both;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
@media (max-width:420px){.fv-icons{grid-template-columns:repeat(6,minmax(0,1fr))}}
.fv-pick{display:grid;place-items:center;aspect-ratio:1;background:#fff;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;padding:0;color:var(--ink-soft)}
.fv-pick svg{width:21px;height:21px}
.fv-pick__none{font-family:"Space Mono",monospace;font-size:15px;line-height:1}
.fv-pick:hover{border-color:var(--blue);color:var(--blue)}
.fv-pick[aria-checked="true"]{border-color:var(--ink);color:var(--ink);box-shadow:0 0 0 2px var(--paper-lift),0 0 0 4px var(--ink)}
.fv-pick:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ============ theme picker ============ */
.fv-themes{clear:both;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 9px}
@media (max-width:420px){.fv-themes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fv-swatch{display:flex;flex-direction:column;align-items:stretch;gap:6px;background:none;border:0;padding:0;cursor:pointer;font:inherit;border-radius:12px;color:var(--ink-soft)}
/* the chip is a miniature of the real card: ground, texture, corner shape,
   heading face and accent rule, so the picker previews the actual difference */
.fv-swatch__chip{
  position:relative;display:block;height:56px;overflow:hidden;
  border-radius:clamp(2px,var(--card-radius),14px);
  background:var(--card-bg);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--card-ink) 22%,transparent),var(--card-frame);
  transition:transform .12s ease;
}
.fv-swatch__chip::before{content:"";position:absolute;inset:0;background-image:var(--tex);background-size:var(--tex-size);background-repeat:var(--tex-repeat);opacity:var(--tex-fade)}
.fv-swatch__aa{position:absolute;left:0;right:0;top:9px;text-align:var(--card-align);padding:0 10px;
  font-family:var(--title-font);font-weight:var(--title-weight);font-size:20px;line-height:1;
  letter-spacing:var(--title-tracking);text-transform:var(--title-case);color:var(--card-ink)}
.fv-swatch__rule{position:absolute;left:10px;right:10px;bottom:13px;height:4px;border-radius:calc(var(--chip-radius) / 2);background:var(--card-accent)}
.fv-swatch__name{font-size:11px;font-weight:600;text-align:center;line-height:1.3}
.fv-swatch:hover .fv-swatch__chip{transform:translateY(-2px)}
.fv-swatch[aria-checked="true"]{color:var(--ink)}
.fv-swatch[aria-checked="true"] .fv-swatch__chip{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--card-ink) 22%,transparent),var(--card-frame),0 0 0 2px var(--paper-lift),0 0 0 4px var(--ink)}
.fv-swatch[aria-checked="true"] .fv-swatch__name::after{content:" ✓"}
.fv-swatch:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ============ stage + card ============ */
.fv-stage{position:sticky;top:24px;min-width:0;background:radial-gradient(120% 120% at 50% 0%,#2A1B4A 0%,var(--stage) 60%);border-radius:calc(var(--radius) + 6px);padding:clamp(20px,4vw,40px);display:flex;flex-direction:column;align-items:center;gap:22px}
@media (max-width:880px){.fv-stage{position:static}}

.fv-card{
  position:relative;width:100%;max-width:420px;overflow:hidden;
  border-radius:var(--card-radius);padding:var(--card-pad);text-align:var(--card-align);
  background:var(--card-bg);color:var(--card-ink);font-family:Inter,system-ui,sans-serif;
  /* outer hairline first: it is what stops a dark card dissolving into the dark stage */
  box-shadow:0 0 0 1px color-mix(in srgb,var(--card-ink) 20%,transparent),var(--card-frame),0 26px 60px -26px rgba(0,0,0,.6);
}
.fv-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--tex);background-size:var(--tex-size);background-repeat:var(--tex-repeat);opacity:var(--tex-fade)}
.fv-card > *{position:relative;z-index:1}
/* CSS wins over the SVG presentation attribute: at this size a 2-unit stroke
   reads chunky, so the mark is drawn lighter than the small picker icons. */
.fv-card__mark{display:block;width:48px;height:48px;margin:0 0 14px;margin-inline:var(--mark-inset);color:var(--card-accent);stroke-width:1.6}
.fv-card__eyebrow{font-family:var(--eyebrow-font);font-weight:var(--eyebrow-weight);font-size:11.5px;letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:var(--card-accent);margin:0 0 12px}
.fv-card__title{font-family:var(--title-font);font-weight:var(--title-weight);font-size:var(--title-size);line-height:var(--title-lh);letter-spacing:var(--title-tracking);text-transform:var(--title-case);margin:0 0 18px;text-wrap:balance}
.fv-card__title.is-ghost{opacity:.42}
.fv-when{margin:0 0 16px;padding:13px 0;
  border-top:var(--rule-width) var(--rule-style) color-mix(in srgb,var(--card-ink) 22%,transparent);
  border-bottom:var(--rule-width) var(--rule-style) color-mix(in srgb,var(--card-ink) 22%,transparent)}
.fv-when__line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:var(--card-justify)}
.fv-when__line + .fv-when__line{margin-top:8px}
.fv-when__date{font-family:var(--title-font);font-weight:700;font-size:18px;letter-spacing:-.01em}
.fv-when__date--ghost{opacity:.42}
.fv-when__time{font-family:"Space Mono",monospace;font-size:13px;color:var(--card-sub)}
.fv-when__lead{font-family:var(--eyebrow-font);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--card-sub);margin:0 0 8px}
.fv-when__opt{font-family:"Space Mono",monospace;font-weight:700;font-size:12px;color:var(--card-accent)}
.fv-where{margin:0 0 16px}
.fv-where__name{font-weight:600;font-size:16px}
.fv-where__addr{font-size:13.5px;color:var(--card-sub)}
.fv-note{font-size:14.5px;margin:0 0 18px;color:var(--card-ink);white-space:pre-line}
.fv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;justify-content:var(--card-justify)}
.fv-chip{font-size:12px;background:var(--card-bg);border:1.5px solid color-mix(in srgb,var(--card-ink) 26%,transparent);border-radius:var(--chip-radius);padding:4px 11px}
.fv-chip b{font-family:"Space Mono",monospace;font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--card-sub);margin-right:5px}

/* ============ ticket-stub share box ============ */
.fv-stub{width:100%;max-width:420px;background:var(--paper-lift);border-radius:14px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.fv-stub__top{padding:16px 18px 14px}
.fv-stub__label{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 9px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.fv-stub__hint{color:var(--pink-ink);text-transform:none;letter-spacing:0;font-size:11px}
.fv-linkbox{display:flex;gap:8px}
.fv-link{flex:1;min-width:0;font-family:"Space Mono",monospace;font-size:12.5px;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.fv-perf{position:relative;height:0;border-top:2px dashed var(--line);margin:4px 14px}
/* the punch-outs read as holes only if they match what is actually behind the stub */
.fv-perf::before,.fv-perf::after{content:"";position:absolute;top:-13px;width:22px;height:22px;border-radius:50%;background:var(--stage)}
.fv-perf::before{left:-25px}.fv-perf::after{right:-25px}
.fv-stub__btns{display:flex;gap:8px;padding:14px 18px 16px}

/* ============ buttons ============ */
.fv-btn{font:inherit;font-weight:600;font-size:14.5px;border-radius:11px;padding:11px 16px;cursor:pointer;border:1.5px solid var(--ink);background:#fff;color:var(--ink);transition:transform .06s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.fv-btn:active{transform:translateY(2px)}
.fv-btn--primary{background:var(--pink);border-color:var(--ink);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.fv-btn--primary:active{box-shadow:0 0 0 var(--ink)}
.fv-btn--block{flex:1}
.fv-btn--ghost{background:transparent}
.fv-btn[disabled]{opacity:.5;cursor:not-allowed}
/* every inline icon, not just the ones inside buttons */
.fv-btn svg,.fv-block__h svg{width:17px;height:17px;flex:none}

/* ============ view mode ============ */
.fv-view{max-width:560px;margin:8px auto 0;display:flex;flex-direction:column;align-items:center;gap:26px}
.fv-view .fv-card{max-width:480px}
.fv-actions{width:100%;max-width:480px;display:flex;flex-direction:column;gap:18px}
.fv-block{background:var(--paper-lift);border:1.5px solid var(--line);border-radius:14px;padding:18px}
.fv-block__h{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px;display:flex;justify-content:flex-start;align-items:center;gap:8px}
.fv-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* space-between puts the pair on the right while it shares the date's line, and
   flush left once it wraps below -- margin-left:auto would strand it right */
.fv-opt__actions{display:flex;gap:8px;flex-wrap:wrap}
/* natural width so the pair sits beside the date; full width once it cannot */
.fv-opt__actions .fv-btn{flex:0 0 auto}
@media (max-width:560px){
  .fv-opt__actions{width:100%}
  .fv-opt__actions .fv-btn{flex:1 1 auto}
}
.fv-opt__hint{font-size:12.5px;color:var(--ink-soft);margin:-4px 0 12px}
.fv-opt + .fv-opt{margin-top:10px;border-top:1px dashed var(--line);padding-top:12px}
.fv-opt__when b{font-family:"Bricolage Grotesque",sans-serif;font-size:16px;display:block}
.fv-opt__when span{font-family:"Space Mono",monospace;font-size:12.5px;color:var(--ink-soft)}
.fv-rsvp__row{display:flex;gap:8px;flex-wrap:wrap}
.fv-rsvp__row .fv-btn{flex:1;min-width:120px}
.fv-rsvp__note{font-size:12.5px;color:var(--ink-soft);margin:11px 0 0}
.fv-rsvp__note--flush{margin:0}
.fv-foot{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.fv-foot__made{font-family:"Space Mono",monospace;font-size:12px;color:var(--ink-soft);width:100%;text-align:center;margin-bottom:2px}
.fv-foot__made b{color:var(--ink)}

.fv-error{max-width:460px;margin:30px auto;background:var(--paper-lift);border:1.5px solid var(--line);border-radius:14px;padding:26px;text-align:center}
.fv-error h2{font-family:"Bricolage Grotesque",sans-serif;margin:0 0 8px}

/* toast */
.fv-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-size:14px;font-weight:500;padding:11px 18px;border-radius:999px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:50}
.fv-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

.fv-card{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
noscript .fv-error{display:block}