/* RSVP form built from the researched Liquid Glass components
   (components/lg: <lg-textfield>, <lg-segmented>, <lg-slider>). Geometry and
   motion live inside the components; this sheet sets the drawer's dark
   palette through their CSS variables and lays out the guest-count card. */
#rsvp-sheet {
  --rsvp-font: Arial, 'Apple SD Gothic Neo', sans-serif;
  --rsvp-accent: #f3e3c6;
}
#rsvp-sheet .lg-label,
#rsvp-sheet .lg-group {
  display: block;
  margin: 0 0 14px;
  color: #d8d4db;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
#rsvp-sheet .lg-legend { display: block; margin-bottom: 9px; }
#rsvp-sheet lg-textfield {
  display: block;
  margin-top: 8px;
  --lg-accent: #fff4df;
  --lg-field-h: 50px;
  --lg-field-pad-x: 17px;
  --lg-field-fill: rgb(8 8 10 / .16);
  --lg-field-fill-focus: rgb(8 8 10 / .10);
  --lg-field-blur: 18px;
  --lg-field-fg: #fff;
  --lg-field-placeholder: #a9a5af;
  --lg-field-icon: #d8d4db;
  --lg-field-clear: rgb(235 235 245 / .35);
  --lg-field-font: 400 16px/1.5 var(--rsvp-font);
}
#rsvp-sheet lg-segmented {
  display: flex;
  width: 100%;
  --lg-accent: var(--rsvp-accent);
  --lg-seg-h: 44px;
  --lg-seg-pad-x: 12px;
  --lg-seg-font: 500 16px/1 var(--rsvp-font);
  --lg-seg-track: rgb(8 8 10 / .20);
  --lg-seg-fg: #bcbcc2;
  --lg-seg-fg-selected: #fff;
  --lg-seg-thumb-fill: rgb(150 150 158 / .92);
  --lg-seg-idle-veil: .12;  /* selected pill stays as clear as while held */
  --lg-seg-glass-veil: .12;
}
#rsvp-sheet lg-segmented:focus-visible { outline: 2px solid #f7e8cf; outline-offset: 3px; border-radius: 999px; }
/* Guest count card: heading row, slider, tick labels. */
#rsvp-sheet .count-label {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 0 26px;
  padding: 14px 16px 10px;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 26px;
  background: rgb(255 255 255 / .035);
  color: #d8d4db;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
#rsvp-sheet.has-webgl .count-label { background: transparent; }
#rsvp-sheet .count-label[hidden] { display: none; }
#rsvp-sheet .count-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
#rsvp-sheet #guest-count-label { font-size: 16px; letter-spacing: -.02em; line-height: 1.5; }
#rsvp-sheet .count-label small { display: inline; margin-left: 6px; font: inherit; font-size: 12px; color: #aaa6af; }
#rsvp-sheet .guest-readout { display: inline-flex; align-items: baseline; gap: 4px; color: #fff; }
#rsvp-sheet .guest-readout b { font-size: 24px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
#rsvp-sheet .guest-readout span { font-size: 13px; color: #dbd6df; }
#rsvp-sheet lg-slider {
  display: flex;
  width: 100%;
  --lg-accent: var(--rsvp-accent);
  --lg-slider-inactive: rgb(255 255 255 / .18);
  --lg-slider-tick: rgb(255 255 255 / .6);
  --lg-knob-fill: rgb(99 99 106 / .96);
  --lg-knob-w: 28px;
  --lg-knob-h: 21px;
  --lg-hit: 48px;
  color: #d8d4db;
}
#rsvp-sheet lg-slider:focus-visible { outline: none; }
#rsvp-sheet lg-slider:focus-visible::part(wrap) { outline: 2px solid #f7e8cf; outline-offset: -2px; border-radius: 999px; }
/* One label under each tick: the track is inset by half the knob width. */
#rsvp-sheet .tick-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 calc(var(--lg-knob-w, 28px) / 2);
  font-size: 12px;
  color: #aaa6af;
  font-variant-numeric: tabular-nums;
}
#rsvp-sheet .tick-labels span { display: flex; justify-content: center; width: 0; }
@media (max-width: 350px) {
  #rsvp-sheet lg-segmented { --lg-seg-font: 500 15px/1 var(--rsvp-font); --lg-seg-pad-x: 8px; }
  #rsvp-sheet #guest-count-label { font-size: 15px; }
}
@media (prefers-reduced-transparency: reduce) {
  #rsvp-sheet lg-textfield { --lg-field-fill: #2c2d32; --lg-field-fill-focus: #34353b; --lg-field-blur: 0px; }
  #rsvp-sheet lg-segmented { --lg-seg-track: #26272c; --lg-seg-thumb-fill: #6c6c71; --lg-seg-idle-veil: 1; --lg-seg-glass-veil: .85; }
  #rsvp-sheet lg-slider { --lg-knob-fill: #6c6c71; }
}
@media (forced-colors: active) {
  /* The components carry their own forced-colors styles; only the card needs an edge. */
  #rsvp-sheet .count-label { border-color: ButtonText; }
}

/* Fit the whole form before scrolling is needed. Keep the 44px touch targets.
   Overflow remains available only for keyboard/landscape or enlarged text. */
.theme-modern #rsvp-sheet[data-density] form > .lg-label,
.theme-modern #rsvp-sheet[data-density] .lg-group { margin-bottom: var(--rsvp-gap, 12px); }
#rsvp-sheet[data-density] .lg-legend { margin-bottom: var(--rsvp-legend-gap, 7px); }
#rsvp-sheet[data-density] lg-textfield { margin-top: var(--rsvp-legend-gap, 7px); --lg-field-h: 48px; }
#rsvp-sheet[data-density] .count-label { margin-bottom: var(--rsvp-count-gap, 12px); }
#rsvp-sheet[data-density="compact"],
#rsvp-sheet[data-density="tight"] { --rsvp-gap: 8px; --rsvp-legend-gap: 5px; --rsvp-count-gap: 8px; }
.theme-modern #rsvp-sheet[data-density="compact"] .sheet-header,
.theme-modern #rsvp-sheet[data-density="tight"] .sheet-header { padding-bottom: 8px; }
#rsvp-sheet[data-density="compact"] .sheet-drag-zone,
#rsvp-sheet[data-density="tight"] .sheet-drag-zone { height: 16px; }
#rsvp-sheet[data-density="compact"] lg-textfield,
#rsvp-sheet[data-density="tight"] lg-textfield { --lg-field-h: 44px; }
#rsvp-sheet[data-density="compact"] .count-label,
#rsvp-sheet[data-density="tight"] .count-label { padding-top: 8px; padding-bottom: 6px; }
.theme-modern #rsvp-sheet[data-density="tight"] { --rsvp-gap: 4px; --rsvp-legend-gap: 3px; --rsvp-count-gap: 4px; }
.theme-modern #rsvp-sheet[data-density="tight"] .sheet-header { padding-bottom: 4px; }
#rsvp-sheet[data-density="tight"] .sheet-drag-zone { height: 10px; }
.theme-modern #rsvp-sheet[data-density="tight"] #sheet-title { font-size: 23px; }
#rsvp-sheet[data-density="tight"] .count-label { padding-top: 4px; padding-bottom: 4px; }
#rsvp-sheet[data-density="tight"] .rsvp-privacy { margin: 4px 0; line-height: 1.35; }
#rsvp-sheet[data-density="tight"] .sheet-scroll { padding-bottom: 12px; }
.theme-modern #rsvp-sheet[data-density="tight"] form > .answer { min-height: 44px; padding-block: 10px; }