/* RSVP: a fixed optical surface, clipped by one reversible capsule silhouette.
   Geometry is animated in rsvp-island.mjs; filters and text never scale. */
@property --rsvp-dim {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

#rsvp-sheet .rsvp-privacy {
  margin: 8px 0;
  color: #cec9c2;
  font-size: 11px;
  line-height: 1.5;
}
#rsvp-sheet form[aria-busy="true"] button[type="submit"] {
  opacity: .65;
  cursor: wait;
}

.theme-modern .rsvp-accessory {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  width: 226px;
  height: 58px;
  max-width: calc(100% - 32px);
  padding: 0 17px;
  transform: translateX(-50%);
  border: 1px solid rgb(238 231 218 / .28);
  border-radius: 29px;
  background: linear-gradient(155deg, #151413, #030303 54%, #0c0b0a);
  color: #f7f6f3;
  box-shadow: inset 0 1px 1px rgb(255 252 242 / .19),
    inset 0 -1px 1px rgb(255 252 242 / .13), 0 8px 24px rgb(0 0 0 / .15);
  touch-action: none;
  text-align: left;
  transition: none;
  -webkit-user-select: none;
  user-select: none;
}
.theme-modern .rsvp-accessory:active { transform: translateX(-50%); }
.accessory-symbol { display: grid; place-items: center; flex: none; width: 29px; }
.accessory-copy { display: flex; flex: 1; flex-direction: column; gap: 1px; white-space: nowrap; }
.accessory-copy strong { font-size: 13px; line-height: 1.5; font-weight: 600; }

body:has(#rsvp-sheet[open]) .rsvp-accessory { visibility: hidden; }

.theme-modern #rsvp-sheet {
  position: fixed;
  inset: auto 0 var(--rsvp-bottom, max(18px, env(safe-area-inset-bottom)));
  width: calc(100% - 24px);
  max-width: 414px;
  height: min(var(--rsvp-content-height, 600px), calc(var(--rsvp-viewport, 100dvh) - var(--rsvp-safe-bottom, 18px) - 12px));
  max-height: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 42px;
  background: transparent;
  box-shadow: none;
  color: #f5f5f7;
  color-scheme: dark;
  --smoke-depth: 140px;
  overflow: visible;
  contain: layout style;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.theme-modern #rsvp-sheet[open] { display: block; }
.theme-modern #rsvp-sheet::backdrop {
  background: rgb(0 0 0 / var(--rsvp-dim, .12));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The shell supplies the rim while the single optics canvas paints refraction.
   The fixed-size fallback surface is clipped by the same changing silhouette. */
#rsvp-sheet .island-optics {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#rsvp-sheet .island-shell {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  overflow: hidden;
  border: 1px solid rgb(250 243 230 / .25);
  border-radius: 42px;
  background: transparent;
  box-shadow: inset 0 1px 0 rgb(255 250 239 / .22),
    inset 0 -1px 0 rgb(255 250 239 / .08), 0 18px 48px rgb(0 0 0 / .20);
  pointer-events: none;
  contain: layout style;
}
#rsvp-sheet .island-glass {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--panel-width, 100%);
  height: var(--panel-height, 100%);
  transform: translateX(-50%);
  border-radius: 41px;
  background: transparent;
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
}
#rsvp-sheet .island-scene { z-index: 0; }
#rsvp-sheet .island-glass.has-scene {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#rsvp-sheet .island-glass::before {
  z-index: 1;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* CSS fallback when WebGL is unavailable: one even tint, no black band. */
  background: rgb(2 2 3 / .34);
  -webkit-mask-image: none;
  mask-image: none;
}
#rsvp-sheet .island-glass::after {
  z-index: 2;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgb(255 248 230 / .04), transparent 26%,
    transparent 82%, rgb(255 248 230 / .015));
  box-shadow: inset 1px 0 1px rgb(255 251 239 / .11),
    inset -1px 0 1px rgb(255 251 239 / .10);
  pointer-events: none;
}
#rsvp-sheet .island-closed-ink {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #151413, #030303 54%, #0c0b0a);
  opacity: 0;
  pointer-events: none;
}
#rsvp-sheet .island-light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(130deg, rgb(255 248 230 / .10), transparent 25%,
    transparent 72%, rgb(255 248 230 / .05));
  box-shadow: inset 0 1px 0 rgb(255 250 235 / .45);
  opacity: 0;
  pointer-events: none;
}
#rsvp-sheet .island-content {
  position: relative;
  z-index: 1;
  background: transparent;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  opacity: 0;
}
#rsvp-sheet:not([data-state="open"]) .island-content { pointer-events: none; }
#rsvp-sheet .sheet-heading [data-close] { pointer-events: auto; }
#rsvp-sheet .sheet-header { flex: none; padding: 0 23px 18px; }
#rsvp-sheet .sheet-drag-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  margin: 0 -23px;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#rsvp-sheet .sheet-drag-zone > span {
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: rgb(255 255 255 / .28);
}
#rsvp-sheet .sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-shadow: 0 1px 3px rgb(0 0 0 / .72), 0 0 14px rgb(0 0 0 / .30); }

.theme-modern #sheet-title { margin: 0; font-size: 27px; font-weight: 600; line-height: 1.25; letter-spacing: -.045em; }
.theme-modern #sheet-title:focus { outline: none; }
.theme-modern #rsvp-sheet .sheet-heading .close {
  position: static;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgb(255 250 240 / .15);
  border-radius: 50%;
  background: linear-gradient(150deg, rgb(255 255 255 / .10), rgb(255 255 255 / .025) 55%, rgb(255 249 235 / .055));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 -1px 0 rgb(255 255 255 / .04);
  color: #dedbdf;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  transition: opacity 120ms;
  touch-action: manipulation;
}
#rsvp-sheet .sheet-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1px 23px 25px;
  scroll-padding: 18px;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
#rsvp-sheet .sheet-scroll::-webkit-scrollbar { display: none; }
.theme-modern #rsvp-sheet form > label {
  display: block;
  margin: 0 0 17px;
  color: #d8d4db;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

/* A single trough keeps the two choices related. The selected choice is a
   shallow glass lens; unselected choices remain clear. No nested blur passes. */

.theme-modern #rsvp-sheet .answer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  margin-top: 2px;
  padding: 13px 19px;
  border: 1px solid rgb(255 246 228 / .41);
  border-radius: 27px;
  background: linear-gradient(160deg, rgb(255 252 242 / .12),
    rgb(255 249 235 / .045) 52%, rgb(255 249 235 / .08));
  box-shadow: inset 0 1px 0 rgb(255 253 245 / .20),
    inset 0 -1px 0 rgb(255 252 242 / .06), 0 3px 10px rgb(0 0 0 / .08);
  color: #fff9ef;
  text-shadow: 0 1px 3px rgb(0 0 0 / .35);
  font-size: 14px;
  font-weight: 500;
  transition: opacity 120ms;
  touch-action: manipulation;
}
.theme-modern #rsvp-sheet .answer > span { font-size: 20px; line-height: 1; }
.theme-modern #rsvp-sheet :is(.answer, .close):active { transform: none; opacity: .75; }

.theme-modern #rsvp-sheet .form-success { padding: 29px 0 8px; }
.theme-modern #rsvp-sheet .form-success .eyebrow { color: #b9b1ba; }
.theme-modern #rsvp-sheet .form-success h2 { margin: 19px 0; font-size: 30px; line-height: 1.3; }
.theme-modern #rsvp-sheet .form-success p { margin: 20px 0; color: #d2cdd7; font-size: 12px; line-height: 1.9; }
.theme-modern #rsvp-sheet .form-success .answer { margin-top: 29px; }
.theme-modern #rsvp-sheet :is(button, input):focus-visible { outline: 2px solid #f7e8cf; outline-offset: 3px; }

#rsvp-sheet .island-echo {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 226px;
  height: 58px;
  padding: 0 17px;
  transform: translateX(-50%);
  color: #f7f6f3;
  pointer-events: none;
}

/* WebGL owns the directional rim and the glass body. CSS only keeps a faint
   one-pixel contour; duplicate inset highlights would turn it into a gray ring. */
#rsvp-sheet.has-webgl .island-glass {
  opacity: 0;
  visibility: hidden;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#rsvp-sheet.has-webgl .island-scene { display: none; }
#rsvp-sheet.has-webgl .island-shell {
  border-color: rgb(250 243 230 / .09);
  box-shadow: 0 12px 32px rgb(0 0 0 / .13);
}

#rsvp-sheet.has-webgl .sheet-heading .close {
  background: transparent;
  border-color: rgb(255 250 239 / .10);
  box-shadow: none;
}

#rsvp-sheet.has-webgl .answer {
  background: transparent;
  border-color: rgb(255 250 239 / .12);
  box-shadow: none;
}

/* VisualViewport can shrink without changing layout viewport media queries. */
.theme-modern #rsvp-sheet.is-compact { --smoke-depth: 140px; }
#rsvp-sheet.is-compact .sheet-header { padding-bottom: 10px; }
#rsvp-sheet.is-compact .sheet-drag-zone { height: 23px; }
.theme-modern #rsvp-sheet.is-compact #sheet-title { font-size: 24px; }
.theme-modern #rsvp-sheet.is-compact form > label,
.theme-modern #rsvp-sheet.is-compact fieldset { margin-bottom: 12px; }

@media (max-width: 350px) {
  #rsvp-sheet .sheet-header { padding-right: 19px; padding-left: 19px; }
  #rsvp-sheet .sheet-drag-zone { margin-right: -19px; margin-left: -19px; }
  #rsvp-sheet .sheet-scroll { padding-right: 19px; padding-left: 19px; }
  
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #rsvp-sheet .island-glass { background: #1c1b1a; }
}
@media (prefers-reduced-transparency: reduce) {
  .theme-modern #rsvp-sheet .island-glass { opacity: 1; visibility: visible; background: #151416; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #rsvp-sheet .island-optics { display: none; }
  #rsvp-sheet .island-glass::before, #rsvp-sheet .island-glass::after, #rsvp-sheet .island-light, #rsvp-sheet .island-scene { display: none; }
  .theme-modern #rsvp-sheet input:not([type="radio"]), .theme-modern #rsvp-sheet .sheet-heading .close { background: #29272b; }
  .theme-modern #rsvp-sheet fieldset label:has(:checked), .theme-modern #rsvp-sheet .answer { background: #45403b; }
}
@media (prefers-reduced-motion: reduce) {
  #rsvp-sheet .island-light { display: none; }
  .theme-modern #rsvp-sheet :is(button, input), .theme-modern #rsvp-sheet fieldset label { transition: none; }
}
@media (forced-colors: active) {
  #rsvp-sheet .island-shell, .theme-modern .rsvp-accessory {
    border: 1px solid ButtonText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
  #rsvp-sheet .island-optics, #rsvp-sheet .island-glass, #rsvp-sheet .island-light, #rsvp-sheet .island-closed-ink,
  #rsvp-sheet .glass-field::after, .theme-modern #rsvp-sheet fieldset::before { display: none; }
  .theme-modern #rsvp-sheet { color: CanvasText; }
  
  .theme-modern #rsvp-sheet :is(p, legend, label, input, button, .eyebrow, .demo-notice),
  .theme-modern #rsvp-sheet fieldset label:has(:checked) { color: CanvasText; text-shadow: none; }
  .theme-modern #rsvp-sheet input:not([type="radio"]), .theme-modern #rsvp-sheet .sheet-heading .close,
  .theme-modern #rsvp-sheet fieldset label, .theme-modern #rsvp-sheet .answer { border: 1px solid ButtonText; background: Canvas; box-shadow: none; }
  
  
  
}

/* High-detail V2 backdrops keep light placeholder text readable. */

.theme-modern #rsvp-sheet.has-webgl :is(input:not([type="radio"]), fieldset label, .answer) { text-shadow: 0 1px 2px rgb(0 0 0 / .45); }

/* Centered close symbol; its optical body is drawn by WebGL. */
.theme-modern #rsvp-sheet .sheet-heading .close {
  text-shadow: none;
  color: #fff;
}
.theme-modern #rsvp-sheet .sheet-heading .close > svg {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  transform: none;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .5));
}
@media (forced-colors: active) {
  
  
  .theme-modern #rsvp-sheet .sheet-heading .close { color: ButtonText; }
}

/* Native radio groups presented as one sliding capsule. */

/* Keep native radios focusable, required and arrow-key operable. */

/* Compact RSVP composition. */
.theme-modern .rsvp-accessory, #rsvp-sheet .island-echo {
  width: 178px; height: 50px; padding: 0 18px; gap: 10px;
  justify-content: center; border-radius: 25px;
}
.accessory-copy { flex: none; }
.accessory-copy strong { font-size: 14px; line-height: 1; font-weight: 600; }
.accessory-symbol { width: 24px; }
.theme-modern .accessory-symbol svg { width: 23px; height: 23px; }
#rsvp-sheet .sheet-header { padding-bottom: 12px; }
#rsvp-sheet .sheet-drag-zone { height: 23px; }
#rsvp-sheet .sheet-scroll { padding-bottom: 16px; }

#rsvp-sheet .count-label { margin: 0 0 12px; color: #d8d4db; font-size: 12px; font-weight: 500; }
#rsvp-sheet .count-label[hidden] { display: none; }
#rsvp-sheet .count-label small { margin-left: 5px; font: inherit; color: #aaa6af; }

.theme-modern #rsvp-sheet form > .answer { min-height: 48px; font-size: 15px; justify-content: center; gap: 10px; }
#rsvp-sheet .form-error { color: #ffd7cd; font-size: 12px; line-height: 1.5; }

/* Compact count control with its label alongside the wheel. */
.theme-modern .accessory-copy strong { font-size: 15px; }

.theme-modern #rsvp-sheet form > .answer { font-size: 16px; }
#rsvp-sheet .count-label { display: grid; grid-template-columns: minmax(0,1fr) 124px; gap: 16px; align-items: center; }
#rsvp-sheet .count-label[hidden] { display: none; }
#rsvp-sheet #guest-count-label { font-size: 14px; line-height: 1.5; }
#rsvp-sheet .count-label small { display: block; margin: 4px 0 0; font-size: 12px; }

@media (max-width:350px) {
  
  #rsvp-sheet .count-label { gap: 10px; }
}

/* One shared glass row, rather than a detached count box. */
#rsvp-sheet .count-label {
  grid-template-columns: minmax(0,1fr) 88px; gap: 8px; height: 96px;
  padding: 0 16px; border: 1px solid rgb(255 255 255 / .14); border-radius: 26px;
  background: rgb(255 255 255 / .035);
}
#rsvp-sheet.has-webgl .count-label { background: transparent; }

#rsvp-sheet .count-label:has(:focus-visible) { outline: 2px solid #f7e8cf; outline-offset: 2px; }

#rsvp-sheet .count-label { grid-template-columns: 104px 88px; justify-content: center; gap: 18px; }

/* One type scale for form choices and the input placeholder. */
#rsvp-sheet { --rsvp-control-font-size: 16px; }
.theme-modern #rsvp-sheet input[name="name"],
.theme-modern #rsvp-sheet .capsule-toggle label,
.theme-modern #rsvp-sheet #guest-count-label {
  font-size: var(--rsvp-control-font-size); letter-spacing: -.02em;
}
#rsvp-sheet .count-label {
  width: calc(100% - 24px); max-width: 280px; height: 88px; margin: 0 auto 12px;
  grid-template-columns: 100px 80px; gap: 12px; padding: 0 12px;
}

/* Keep room between the count picker and the primary action. */
#rsvp-sheet .count-label { margin-bottom: 26px; }