/* RSVP (js/rsvp.js): "¿Cuántas personas vendrán?" on the happy end screen, the returning guest's
   answer on the envelope screen, and the "Cambiar respuesta" sheet. Same ivory / ink / rose system. */
.rsvp-slot:empty { display: none; }
.yes-end-actions[hidden] { display: none; }
/* Short screens: while the question is up, the guest's name at the top fades so the end text and
   the question card have the room (they would overlap it on a 320 x 568 phone). */
@media (max-height: 740px) {
  .title { transition: opacity 0.4s ease; }
  [data-rsvp="ask"] .title { opacity: 0; }
}

.rsvp-form {
  display: grid; justify-items: center; gap: 0.625rem; width: 100%; max-width: 22rem; margin: 0;
  padding: var(--space-2) var(--space-2) 0.875rem; text-align: center;
  background: rgba(255, 253, 248, 0.96); border: 1px solid rgba(var(--gold-rgb), 0.75); border-radius: 18px;
  box-shadow: 0 16px 34px -20px rgba(var(--ink-rgb), 0.6);
}
.rsvp-q { margin: 0; font: 700 var(--text-xl)/1.2 var(--serif); color: var(--ink); text-wrap: balance; }
.rsvp-sub { margin: 0; font-size: var(--text-base); line-height: 1.35; color: var(--ink-soft); text-wrap: balance; }
.rsvp-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0.25rem 0;
}
.rsvp-chip { position: relative; cursor: pointer; }
.rsvp-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rsvp-chip span {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), 0.9); background: var(--paper); color: var(--ink);
  font: 700 var(--text-xl)/1 var(--serif); transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.rsvp-chip input:checked + span { background: var(--rose); border-color: var(--rose); color: var(--paper); transform: scale(1.06); }
.rsvp-chip input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 3px; }
@media (hover: hover) { .rsvp-chip:hover input:not(:checked) + span { background: var(--ivory-deep); } }
.rsvp-go {
  min-height: 48px; min-width: 11rem; padding: 0 var(--space-3) 0 calc(var(--space-3) + var(--track));
  border: 0; border-radius: 999px; cursor: pointer; background: var(--rose); color: var(--paper);
  font: 700 var(--text-sm)/1 var(--serif); letter-spacing: var(--track); text-transform: uppercase;
}
.rsvp-go:disabled { opacity: 0.4; cursor: default; }
.rsvp-go:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.rsvp-msg { margin: 0; min-height: 1.35em; font: italic 600 var(--text-base)/1.35 var(--serif); color: var(--rose); }
.rsvp-msg:empty { min-height: 0; }
.rsvp-note {
  margin: 0; max-width: 24ch; padding: 0.75rem var(--space-2); border-radius: 14px; text-align: center;
  background: rgba(255, 253, 248, 0.96); font: italic 600 var(--text-lg)/1.35 var(--serif); color: var(--ink);
}

/* envelope screen: the returning guest's answer + "Cambiar respuesta" */
.rsvp-status { display: grid; justify-items: center; gap: 0.375rem; margin-top: var(--space-3); text-align: center; }
.rsvp-status[hidden] { display: none; }
.rsvp-status-line { margin: 0; font: 600 var(--text-lg)/1.3 var(--serif); color: var(--ink); }
.rsvp-change {
  min-height: 44px; padding: 0 var(--space-2) 0 calc(var(--space-2) + var(--track)); cursor: pointer;
  border: 1px solid rgba(var(--gold-rgb), 0.9); border-radius: 999px; background: var(--paper); color: var(--rose);
  font: 700 var(--text-sm)/1 var(--serif); letter-spacing: var(--track); text-transform: uppercase;
}
.rsvp-change:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

/* "Cambiar respuesta" sheet */
.rsvp-sheet {
  width: min(24rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto;
  padding: var(--space-2) 0.75rem 0.75rem; border: 1px solid rgba(var(--gold-rgb), 0.8);
  border-radius: 20px; background: var(--ivory); color: var(--ink); text-align: center;
}
.rsvp-sheet[open] { display: grid; justify-items: center; gap: 0.5rem; }
.rsvp-sheet::backdrop { background: rgba(var(--ink-rgb), 0.5); }
.rsvp-sheet .rsvp-form { box-shadow: none; }
.rsvp-sheet-title { margin: 0 2.25rem; font: 400 clamp(1.75rem, 8vw, 2.25rem)/1.1 var(--script); color: var(--rose); overflow-wrap: anywhere; text-wrap: balance; }
.rsvp-sheet-status { margin: 0; font: 600 var(--text-lg)/1.3 var(--serif); }
.rsvp-sheet-status:empty { display: none; }
.rsvp-close {
  position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); font: 400 1.75rem/1 var(--serif); cursor: pointer;
}
.rsvp-close:focus-visible { outline: 2px solid var(--rose); }
.rsvp-decline {
  min-height: 44px; padding: 0 var(--space-2); border: 0; background: transparent; cursor: pointer;
  color: var(--rose); font: 600 var(--text-base)/1.2 var(--serif); text-decoration: underline; text-underline-offset: 3px;
}
.rsvp-decline:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
/* warning before a confirmed guest's "No" (after Dec 5) */
.rsvp-warn-title { margin: 0; font: 700 var(--text-xl)/1.2 var(--serif); color: var(--rose); text-wrap: balance; }
.rsvp-warn-text { margin: 0 0 0.25rem; font-size: var(--text-lg); line-height: 1.35; text-wrap: balance; }
.rsvp-stay {
  min-width: 0; width: 100%; min-height: 52px; padding: 0.5rem var(--space-2); line-height: 1.2;
  letter-spacing: 0.06em; white-space: normal; text-wrap: balance;
}
/* inside the sheet: same form, tighter, so everything fits a 320 x 568 phone without scrolling */
.rsvp-compact { gap: 0.5rem; padding: 0.75rem 0.625rem 0.625rem; }
.rsvp-compact .rsvp-q { font-size: var(--text-lg); }
.rsvp-compact .rsvp-sub { font-size: var(--text-sm); }
.rsvp-compact .rsvp-chips { gap: 0.375rem; margin: 0; }
.rsvp-compact .rsvp-chip span { width: 44px; height: 44px; font-size: var(--text-lg); }
@media (prefers-reduced-motion: reduce) { .rsvp-chip span { transition: none; } }