/* Celebration invitations and shared RSVP components. */
:root { color-scheme: light; }
:root, [data-event-type] {
    --accent: #844456; --accent-hover: #6c3444; --ink: #493439;
    --paper: #fffaf4; --border: #d8bda2; --backdrop-color: #faf5ef;
    --backdrop: radial-gradient(ellipse at top left, #efd1d3, transparent 55%),
        radial-gradient(ellipse at bottom right, #f2e1bd, transparent 60%);
    --banner: radial-gradient(ellipse at 15% 100%, #a9b2a1 0 9%, transparent 10%),
        radial-gradient(ellipse at 85% 100%, #b4bca8 0 9%, transparent 10%),
        radial-gradient(circle at 30% 35%, #b08c48 0 2px, transparent 3px),
        radial-gradient(circle at 75% 20%, #b08c48 0 2px, transparent 3px),
        linear-gradient(120deg, #f4dedc, #fff5e5, #f2d9d8);
    --symbol: "❀"; --symbol-color: #a9576b; --symbol-size: 90px;
    --symbol-bottom: -16px; --symbol-left: 4%; --symbol-right: 4%;
    --symbol-width: auto; --symbol-height: auto; --symbol-border: 0;
    --symbol-after: var(--symbol); --symbol-after-color: #bb7482;
    --symbol-after-size: var(--symbol-size); --symbol-after-bottom: var(--symbol-bottom);
    --symbol-radius: 0; --heading-font: Georgia, "Times New Roman", serif; --heading-weight: 400;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-image: var(--category-image, var(--backdrop));
    background-color: var(--backdrop-color);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--ink, #493439);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100svh;
}
.wrap {
    width: min(100%, 560px);
    margin: 0 auto;
    padding: clamp(36px, 8vh, 84px) 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.rsvp-card {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background: var(--paper, #fffaf4);
    border: 1px solid var(--border, #d8bda2);
    border-radius: 20px;
    overflow: hidden;
    padding-bottom: 24px;
    box-shadow: 0 20px 60px #8c566521;
    color: var(--ink, #493439);
}
.rsvp-banner {
    height: 110px;
    position: relative;
    background: var(--rsvp-banner-image, var(--category-banner, var(--banner)));
    background-color: var(--rsvp-banner-color, transparent);
    background-size: cover;
    background-position: center;
}
.rsvp-banner::before, .rsvp-banner::after {
    content: var(--rsvp-symbol, var(--image-symbol, var(--symbol)));
    position: absolute;
    color: var(--symbol-color);
    font: var(--symbol-size)/1 Georgia, serif;
    bottom: var(--symbol-bottom);
    left: var(--symbol-left);
    width: var(--symbol-width); height: var(--symbol-height);
    border: var(--symbol-border); border-radius: var(--symbol-radius);
}
.rsvp-banner::after {
    content: var(--rsvp-symbol, var(--image-symbol, var(--symbol-after))); color: var(--symbol-after-color);
    font-size: var(--symbol-after-size); bottom: var(--symbol-after-bottom);
    left: auto; right: var(--symbol-right); transform: rotate(30deg);
}
.rsvp-head { padding: 14px 20px 0; text-align: center; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.9rem; line-height: 1.25; overflow-wrap: anywhere; }
h1 { font-family: var(--heading-font); font-size: clamp(2.2rem, 8vw, 3rem); font-weight: var(--heading-weight); }
.brand { color: var(--accent, #825f2d); font-weight: 600; margin-bottom: 12px; letter-spacing: 2px; font-size: .8rem; text-transform: uppercase; }
.rsvp-head > p:last-child, .page-head > p:last-child { color: #70565b; margin-top: 12px; }
.invitation { text-align: center; }
#invitationText, .invitation-editor { white-space: pre-wrap; overflow-wrap: anywhere; font-family: Georgia, serif; line-height: 1.9; }
#invitationText { padding: 28px 16px; border: 1px solid #dcc6a5; margin: 8px 0 24px; font-size: 1.15rem; background: #fffdf9; }
#invitationHelp, #contactHint { margin: 16px 0; }
#shareInvitation { overflow-wrap: anywhere; margin-top: 16px; }
#invitationMusic { margin: 16px 0; }
#musicPlayer { width: 100%; max-width: 360px; }
#sendOptions .rsvp-btn { margin: 12px 8px 0 0; text-decoration: none; }
.rsvp-section { padding: 18px 24px 0; }
label { display: block; margin-bottom: 6px; font-weight: 600; }
input, select, textarea {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font: inherit;
    font-size: 1rem;
    color: var(--card-text, #493439);
    background: var(--card-surface, #fffdf9);
    border: 1px solid var(--btn-border, #b99e98);
    border-radius: 12px;
}
input::placeholder, textarea::placeholder { color: currentColor; opacity: .7; }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
textarea { resize: vertical; }
small { display: block; margin: -10px 0 16px; color: #70565b; }
.muted { color: #70565b; font-weight: 400; }
.rsvp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    max-width: 100%;
    padding: 10px 14px;
    font: inherit;
    font-weight: 600;
    /* Secondary buttons sit on the card surface; every colour comes from the category's saved tokens. */
    color: var(--card-text, var(--ink));
    background: var(--card-surface, var(--paper));
    border: 2px solid var(--btn-border, var(--accent));
    border-radius: 12px;
    cursor: pointer;
}
.rsvp-btn:hover:not(:disabled) { background: var(--btn-bg, var(--accent)); color: var(--btn-text, #fff); }
.rsvp-btn.primary { background: var(--btn-bg, var(--accent)); color: var(--btn-text, #fff); border-color: var(--btn-border, var(--accent)); }
.rsvp-btn.primary:hover:not(:disabled) {
    background: var(--btn-hover-bg, var(--accent-hover)); color: var(--btn-text, #fff);
    text-decoration: underline; text-underline-offset: 3px;
}
.rsvp-btn:disabled { opacity: 0.55; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--accent, #844456); outline-offset: 3px; }
[hidden] { display: none !important; }
#message { overflow-wrap: anywhere; }
#message:not(:empty) { margin-top: 12px; }
.error { color: inherit; font-weight: 700; border-left: 4px solid currentColor; padding-left: 12px; }
nav, .page-head { text-align: center; }
a { color: var(--accent, #774b25); }
nav a { display: inline-block; padding: 10px 4px; }
.responses { display: grid; gap: 24px; }
.response p { white-space: pre-wrap; overflow-wrap: anywhere; }
.events-list { display: grid; gap: 16px; margin: 18px 0; }
.event-item { border: 1px solid var(--btn-border, var(--border, #d8bda2)); border-radius: 12px; padding: 12px; overflow-wrap: anywhere; }
.event-item h3 { font-family: Georgia, serif; }
.event-item .rsvp-btn { margin: 8px 4px 0 0; }
dt { color: var(--accent); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px; }
dd { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 12px; }
.occasion-chooser { text-align: center; padding: 24px 0; }
.occasion-chooser h2 { font-size: 1.6rem; margin-bottom: 12px; }
.occasion-chooser nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
[data-event-type="events"] {
    --accent: #326477; --accent-hover: #244c5b; --ink: #2e4650;
    --paper: #faffff; --border: #b5cdd1;
    --backdrop-color: #0d0d11;
    --backdrop: radial-gradient(ellipse at top left, #d3e9ed, transparent 60%),
        radial-gradient(ellipse at bottom right, #f2e1bd, transparent 60%);
    --banner:
        radial-gradient(circle at 20% 25%, #a18243 0 2px, transparent 3px),
        radial-gradient(circle at 80% 70%, #a18243 0 2px, transparent 3px),
        linear-gradient(120deg, #d3e9ed, #fff5de, #d3e9ed);
    --symbol: "✧"; --symbol-color: #326477; --symbol-size: 64px; --symbol-bottom: 12px;
    --symbol-after-color: #326477;
}
[data-event-type="weddings"] {
    --accent: #47634d; --accent-hover: #354b3a; --ink: #34463a;
    --paper: #fffdf7; --border: #c6cbb4;
    --backdrop-color: #faf7ef;
    --backdrop: radial-gradient(ellipse at top left, #dce7d7, transparent 60%);
    --banner:
        radial-gradient(ellipse at 8% 95%, #9ead8c 0 12%, transparent 13%),
        radial-gradient(ellipse at 92% 95%, #bdc9a9 0 12%, transparent 13%),
        linear-gradient(120deg, #e2eadb, #fff9e7, #e2eadb);
    --symbol: ""; --symbol-width: 56px; --symbol-height: 56px; --symbol-border: 3px solid #a18243;
    --symbol-radius: 50%; --symbol-left: calc(50% - 46px); --symbol-right: calc(50% - 46px); --symbol-bottom: 24px;
}
[data-event-type="parties"] {
    --accent: #743b8f; --accent-hover: #58266f; --ink: #422751;
    --paper: #fffaff; --border: #d6b7e1;
    --backdrop-color: #fff7f5;
    --backdrop: radial-gradient(ellipse at top left, #ead3fc, transparent 60%),
        radial-gradient(ellipse at bottom right, #ffdfbd, transparent 60%);
    --banner:
        radial-gradient(circle, #a34a88 0 2px, transparent 3px) 0 0 / 33px 37px,
        radial-gradient(circle, #b07b27 0 3px, transparent 4px) 16px 12px / 47px 43px,
        linear-gradient(120deg, #ead3fc, #ffe5cf);
    --symbol: "✦"; --symbol-color: #743b8f; --symbol-size: 64px; --symbol-bottom: 12px;
    --symbol-after-color: #743b8f;
    --heading-font: inherit; --heading-weight: 700;
}
[data-event-type="engagements"] {
    --accent: #84502c; --accent-hover: #663b1e; --ink: #563b35;
    --paper: #fffcf8; --border: #dec5aa;
    --backdrop-color: #fff9f2;
    --backdrop: radial-gradient(ellipse at top left, #f4d9d4, transparent 60%),
        radial-gradient(ellipse at bottom right, #efdfb9, transparent 60%);
    --banner:
        radial-gradient(circle at 20% 25%, #aa8349 0 2px, transparent 3px),
        radial-gradient(circle at 80% 70%, #aa8349 0 2px, transparent 3px),
        linear-gradient(120deg, #f4d9d4, #fff3d8, #f4d9d4);
    --symbol: "◇"; --symbol-color: #95692c; --symbol-left: calc(50% - 32px);
    --symbol-right: 18%; --symbol-bottom: 10px; --symbol-size: 80px;
    --symbol-after: "✧"; --symbol-after-color: #95692c; --symbol-after-size: 32px; --symbol-after-bottom: 26px;
}
/* Opaque surfaces keep copy and controls readable over any chosen image. */
.page-head, .occasion-chooser, .wrap > nav, .wrap > #sendOptions,
.landing-nav, .landing-copy, .landing-footer, .preview-label {
    background: var(--paper); color: var(--ink); border-radius: 16px; padding: 20px;
}
.rsvp-card, .page-head, .occasion-chooser, .wrap > nav, .wrap > #sendOptions,
.landing-nav, .landing-copy, .landing-footer, .preview-label, .landing-details {
    background: var(--card-surface, var(--paper));
    color: var(--card-text, var(--ink));
    overflow-wrap: anywhere;
}
.rsvp-card {
    font-size: calc(1rem * var(--card-body-scale, 1));
    line-height: var(--card-line-height, 1.6);
    text-align: var(--card-alignment, center);
}
.rsvp-card h1, .rsvp-card h2 {
    color: var(--card-heading, var(--ink));
    font-size: calc(1.9rem * var(--card-heading-scale, 1));
    line-height: var(--card-line-height, 1.6);
}
.rsvp-card h1 { font-size: calc(2.5rem * var(--card-heading-scale, 1)); }
.page-head h1, .occasion-chooser h2, .landing-copy h1, .landing-details h2, .landing-details h3 {
    color: var(--card-heading, var(--ink));
}
.rsvp-head, .invitation { text-align: var(--card-alignment, center); }
.rsvp-head, .rsvp-section, .sample-invitation {
    padding-left: var(--card-spacing, 24px);
    padding-right: var(--card-spacing, 24px);
}
.rsvp-card .brand, .rsvp-card .rsvp-head > p:last-child,
.page-head > p:last-child, .rsvp-card small, .rsvp-card .muted,
.rsvp-card dt, .rsvp-card dd, .rsvp-card a:not(.rsvp-btn),
.landing-nav a, .landing-copy .brand, .landing-footer a, .wrap > nav a,
.occasion-chooser a, .page-head .brand {
    color: inherit;
}
.rsvp-card a:not(.rsvp-btn) { text-decoration: underline; }
#invitationText, #previewInvitationText {
    background: transparent;
    color: inherit;
    border-color: currentColor;
    font-size: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
[data-copy] { white-space: pre-line; overflow-wrap: anywhere; }
:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #111;
}
.rsvp-card .error { color: inherit; font-weight: 700; }
.field-error:empty { display: none; }
.field-error { margin: -8px 0 16px; font-weight: 700; border-left: 4px solid currentColor; padding-left: 12px; }
.appearance-status:not(:empty) { margin-top: 12px; }
.appearance-status[data-state="error"] { font-weight: 700; border-left: 4px solid currentColor; padding-left: 12px; }
.appearance-status[data-state="success"] { font-weight: 700; }
.preview-note { margin-top: 12px; font-size: .9rem; }
.appearance-preview .rsvp-btn { margin: 8px 4px; }
.rsvp-card input, .rsvp-card select, .rsvp-card textarea { font-size: inherit; }
.appearance-preview {
    margin-top: 20px;
    padding: 20px;
    border-radius: 16px;
    background: var(--category-image, var(--backdrop)) center / cover;
}
.appearance-preview > p { background: var(--card-surface); color: var(--card-text); padding: 12px; }
details { margin: 20px 0; }
summary { cursor: pointer; font-weight: 600; margin-bottom: 16px; }
.admin-options {
    padding: 12px 14px;
    border: 1px solid var(--btn-border, var(--border, #d8bda2));
    border-radius: 12px;
}
.admin-options > summary { margin-bottom: 0; }
.admin-options[open] > summary { margin-bottom: 16px; }
#editorMode, #eventBackgroundHint, #invitationStatus, .admin-shortcuts { margin: 12px 0; }
@media (max-width: 480px) {
    .wrap { padding-right: 16px; padding-left: 16px; gap: 14px; }
}
/* Static HTML starts neutral, even before modules load or when JavaScript is unavailable.
   Only decoration is withheld; content and controls remain visible and usable. */
:is(body, .appearance-preview):is(.rsvp-theme-loading, .rsvp-theme-neutral) {
    background-image: none !important;
    background-color: #f5f5f5 !important;
}
.rsvp-theme-loading, .rsvp-theme-neutral {
    --rsvp-banner-image: none;
    --rsvp-banner-color: #f5f5f5;
    --rsvp-symbol: none;
}
.rsvp-theme-ready {
    --rsvp-banner-image: initial;
    --rsvp-banner-color: initial;
    --rsvp-symbol: initial;
}
/* While an invitation link loads, only a neutral card with the status message is shown: the stock
   copy, default colours, decoration and occasion links never paint before the invitation's own. */
.rsvp-invitation-pending .rsvp-card {
    --rsvp-banner-image: none;
    --rsvp-banner-color: #f5f5f5;
    --rsvp-symbol: none;
    background: #fff;
    color: #222;
    border-color: #ddd;
    box-shadow: none;
}
.rsvp-invitation-pending .rsvp-card > :not(.rsvp-banner, #message),
.rsvp-invitation-pending .wrap > :not(.rsvp-card) { display: none; }
.rsvp-invitation-pending #message:empty::before { content: "Opening your invitation…"; }