/* rsvp.css — the reply section.

   Loaded only for a personalised invitation (/i/<token>). It borrows the
   page's own tokens: ivory card, maroon ink, gold hairline. Nothing here
   introduces a new colour — a form that looks like a form from a different
   website is the fastest way to make an invitation feel like software. */

#rsvp { background: var(--paper-2); text-align: center; }
#rsvp .lede { margin-top: .8rem; color: var(--ink-2); font-size: 1.02rem; }
#rsvp .lede b { color: var(--maroon); font-weight: 400; }
#rsvp .deadline { margin-top: .45rem; font-family: var(--sans); font-weight: 300;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }

/* the whole party, one card */
#rsvp .card { text-align: left; }

#rsvp .allin { display: block; width: 100%; margin: 0 0 1.1rem; padding: .7rem;
  border: 1px dashed var(--line); border-radius: 3px; background: none; cursor: pointer;
  font-family: var(--sans); font-weight: 400; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--maroon); }
#rsvp .allin:hover { background: rgba(138,98,52,.06); }

/* A fieldset is the right grouping element here, but its own border draws
   THROUGH the legend. The rule belongs to the name instead: each person is a
   heading with a hairline under it, then their answers. */
#rsvp .who { border: none; padding: 1.5rem 0 .3rem; margin: 0; }
#rsvp .who:first-of-type { padding-top: 0; }
#rsvp .who legend { display: block; width: 100%; padding: 0 0 .5rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: 1.12rem; color: var(--maroon); }
#rsvp .who .kid { font-family: var(--sans); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2); margin-left: .5rem; }
#rsvp .who input[type=text] { margin: .55rem 0 .2rem; }

/* one row per function: label left, yes/no right */
#rsvp .fn { display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding: .5rem 0; }
#rsvp .fn > span { font-size: .98rem; color: var(--ink); }
#rsvp .seg { display: flex; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; }
#rsvp .seg button { appearance: none; border: none; background: none; cursor: pointer;
  padding: .42rem .95rem; font-family: var(--sans); font-weight: 400; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
#rsvp .seg button + button { border-left: 1px solid var(--line); }
#rsvp .seg button[aria-pressed=true] { background: var(--maroon); color: #fdf9f0; }
#rsvp .seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* meal + notes appear only once someone is actually coming */
#rsvp .extras[hidden] { display: none; }
#rsvp .extras { margin-top: .55rem; display: grid; gap: .5rem; }

#rsvp .err { margin-top: .8rem; padding: .7rem .85rem; border-radius: 3px;
  background: rgba(138,34,51,.08); color: var(--maroon-deep); font-size: .92rem; }
#rsvp .err[hidden] { display: none; }

#rsvp .sent { margin-top: .9rem; font-style: italic; color: var(--maroon); }
#rsvp .review { margin-top: .5rem; font-family: var(--sans); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* the functions this household is not invited to are simply absent; this is
   the line that explains the absence without naming what is missing */
#rsvp .scope { margin-top: 1rem; font-size: .9rem; color: var(--ink-2); font-style: italic; }

#rsvp .optin { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem;
  font-size: .92rem; color: var(--ink-2); cursor: pointer; line-height: 1.45; }
#rsvp .optin input { margin-top: .25rem; accent-color: var(--maroon); }
#rsvp .pass { margin-top: 1.2rem; text-align: center; }
#rsvp .pass img { display: inline-block; border: 1px solid var(--line); border-radius: 3px;
  padding: .4rem; background: var(--card); }
#rsvp .passnote { margin-top: .5rem; font-family: var(--sans); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
#rsvp .rooms { margin-top: .6rem; }
#rsvp .rooms input[type=number] { margin-top: .5rem; max-width: 12rem; }
#live { background: var(--paper); text-align: center; }
#live .lede { margin-top: .8rem; color: var(--ink-2); }
#live .tile { margin-top: 1.4rem; }