/* The form sheet (includes/shell/sheet.php, assets/js/shell/sheet.js): Join Sangat and RSVP.
   A bottom sheet on phones, a centred panel from 640px. Tokens only: the shell's --ds-* values where they exist, the classic
   pages' --c-* ones otherwise, so one sheet serves both (Temple Dark under .dark, Temple Dawn otherwise). The fields inside are
   the shared intake fields (css/site.css .field, .phone, .address, .segmented). */

dialog.ds-sheet--form {
  --sh-bg: var(--ds-surface-raised, var(--c-surface));
  --sh-sunken: var(--ds-surface-sunken, var(--c-sunken));
  --sh-ink: var(--ds-text, var(--c-ink));
  --sh-muted: var(--ds-text-muted, var(--c-muted));
  --sh-line: var(--ds-border, var(--c-line));
  --sh-accent: var(--ds-accent, var(--c-accent, var(--accent)));
  --sh-focus: var(--ds-focus, var(--focus, currentColor));
  --sh-pad: var(--ds-space-4, 16px);
  --sh-radius: var(--ds-radius-lg, var(--ds-radius-l, 22px));
  position: fixed; inset: auto 0 0 0; margin: 0; padding: 0;
  inline-size: 100%; max-inline-size: 100%; block-size: auto; max-block-size: 92dvh;
  border: 1px solid var(--sh-line); border-block-end: 0; border-radius: var(--sh-radius) var(--sh-radius) 0 0;
  background: var(--sh-bg); color: var(--sh-ink); box-shadow: var(--ds-shadow-3, 0 -12px 40px rgba(0, 0, 0, .35));
  overflow: hidden; overscroll-behavior: contain;
}
dialog.ds-sheet--form[open] { display: flex; flex-direction: column; animation: ds-sheet-rise var(--ds-dur-base, 220ms) var(--ds-ease-gentle, var(--ds-ease, ease-out)); }
dialog.ds-sheet--form::backdrop { background: color-mix(in srgb, var(--sh-sunken) 72%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes ds-sheet-rise { from { transform: translateY(100%); } }
@keyframes ds-sheet-fade { from { opacity: 0; transform: translateY(var(--ds-space-2, 8px)); } }

.ds-sheet--form .ds-sheet__panel { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; margin: 0; }
.ds-sheet--form .ds-sheet__grip { display: block; inline-size: 40px; block-size: 4px; margin: var(--ds-space-2, 8px) auto 0; border-radius: var(--ds-radius-pill, 999px); background: var(--sh-line); flex: none; }
.ds-sheet--form .ds-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sh-pad); padding: var(--ds-space-3, 12px) var(--sh-pad); border-block-end: 1px solid var(--sh-line); flex: none; }
.ds-sheet--form .ds-sheet__title { margin: 0; font-family: var(--ds-font-display, var(--display, var(--serif))); font-size: var(--ds-text-2xl, var(--ds-step-3, 1.75rem)); font-weight: 600; line-height: 1.1; color: var(--sh-ink); }
.ds-sheet--form .ds-sheet__title:focus, .ds-sheet--form .ds-sheet__done-title:focus { outline: none; }
.ds-sheet--form .ds-sheet__body { padding: var(--sh-pad); overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-block-size: 0; }
.ds-sheet--form .ds-sheet__intro { margin: 0 0 var(--sh-pad); color: var(--sh-muted); }
.ds-sheet--form .ds-sheet__foot { display: flex; flex-direction: column-reverse; align-items: stretch; gap: var(--ds-space-3, 12px); padding: var(--ds-space-3, 12px) var(--sh-pad) calc(var(--ds-space-3, 12px) + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--sh-line); background: var(--sh-sunken); flex: none; }
.ds-sheet--form .ds-sheet__foot .btn { inline-size: 100%; }
.ds-sheet--form .ds-sheet__fine { margin: 0; font-size: var(--ds-text-sm, var(--fs-sm)); line-height: 1.5; color: var(--sh-muted); }
.ds-sheet--form .ds-sheet__fine a { display: inline-block; padding-block: 13px; margin-block: -13px; color: var(--sh-accent); text-underline-offset: .2em; } /* a 44px tap area, same line height */
.ds-sheet--form .check { min-block-size: 44px; align-items: center; }
.ds-sheet--form .ds-sheet__event { margin: 0 0 var(--sh-pad); padding: var(--ds-space-3, 12px) var(--sh-pad); border-inline-start: 3px solid var(--sh-accent); border-radius: 0 var(--ds-radius-sm, 10px) var(--ds-radius-sm, 10px) 0; background: var(--sh-sunken); }
.ds-sheet--form .ds-sheet__event p { margin: 0; font-size: var(--ds-text-sm, var(--fs-sm)); color: var(--sh-muted); }
.ds-sheet--form .ds-sheet__event p[hidden] { display: none; }
.ds-sheet--form .ds-sheet__event .ds-sheet__event-title { margin-block-end: var(--ds-space-1, 4px); font-family: var(--ds-font-display, var(--display, var(--serif))); font-size: var(--ds-text-xl, 1.5rem); font-weight: 600; line-height: 1.2; color: var(--sh-ink); }

.ds-sheet--form .ds-sheet__done { display: grid; justify-items: center; align-content: center; gap: var(--ds-space-2, 8px); padding: var(--ds-space-8, 40px) var(--ds-space-6, 24px) calc(var(--ds-space-6, 24px) + env(safe-area-inset-bottom, 0px)); text-align: center; overflow-y: auto; }
.ds-sheet--form .ds-sheet__done[hidden], .ds-sheet--form form[hidden] { display: none; }
.ds-sheet--form .ds-sheet__done img { inline-size: 64px; block-size: 64px; margin-block-end: var(--ds-space-2, 8px); }
.ds-sheet--form .ds-sheet__done-title { margin: 0; font-family: var(--ds-font-display, var(--display, var(--serif))); font-size: var(--ds-text-3xl, 2.25rem); font-weight: 600; line-height: 1.1; color: var(--sh-ink); }
.ds-sheet--form .ds-sheet__done p { margin: 0; max-inline-size: 28rem; color: var(--sh-muted); }
.ds-sheet--form .ds-sheet__done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-3, 12px); margin-block-start: var(--ds-space-3, 12px); inline-size: 100%; }
.ds-sheet--form .ds-sheet__done-actions .btn { flex: 1 1 10rem; max-inline-size: 16rem; }

.ds-sheet--form :focus-visible { outline: 2px solid var(--sh-focus); outline-offset: 2px; }

@media (min-width: 640px) {
  dialog.ds-sheet--form {
    inset: 0; margin: auto; inline-size: min(44rem, calc(100% - var(--ds-space-6, 24px))); max-block-size: min(90dvh, 60rem);
    border-block-end: 1px solid var(--sh-line); border-radius: var(--sh-radius);
  }
  dialog.ds-sheet--form[open] { animation-name: ds-sheet-fade; }
  .ds-sheet--form .ds-sheet__grip { display: none; }
  .ds-sheet--form .ds-sheet__head { padding: var(--ds-space-4, 16px) var(--ds-space-6, 24px); }
  .ds-sheet--form .ds-sheet__body { padding: var(--ds-space-5, 20px) var(--ds-space-6, 24px); }
  .ds-sheet--form .ds-sheet__foot { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--ds-space-3, 12px) var(--ds-space-6, 24px); }
  .ds-sheet--form .ds-sheet__foot .btn { inline-size: auto; flex: none; }
  .ds-sheet--form .ds-sheet__done { padding: var(--ds-space-10, 56px) var(--ds-space-6, 28px); }
}

@media (prefers-reduced-motion: reduce) {
  dialog.ds-sheet--form[open] { animation: none; }
}

/* The cause note above the Join fields: the initiative whose button opened the sheet (the shell has no site.css) */
.ds-sheet .cause-note { display: flex; gap: var(--ds-space-3, .75rem); align-items: flex-start; margin: 0 0 var(--ds-space-4, 1rem); padding: var(--ds-space-3, .75rem) var(--ds-space-4, 1rem);
  border: 1px solid var(--ds-border, var(--c-line)); border-radius: var(--ds-radius-md, 12px); background: var(--ds-surface-sunken, var(--c-sunken)); font-size: var(--ds-text-sm, .9rem); }
.ds-sheet .cause-note[hidden] { display: none; }
.ds-sheet .cause-note strong { color: var(--ds-accent, var(--c-accent)); }