/**
 * Forms: the three structured experiences, in the modal and as pages.
 */

/*
 * The panel is bounded by the sheet, which is the viewport less its padding,
 * and lays out as a column so the body takes whatever height the head leaves.
 * Sizing the body against the viewport instead let the head push the panel off
 * a short screen: a phone held in landscape is 375 tall, and 76vh of body plus
 * a head does not fit in it.
 */
.pa-panel {
  width: min(620px, 100%);
  max-height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  color: var(--pa-text);
  box-shadow: var(--pa-shadow-panel);
  overflow: hidden;
}

.pa-panel__head {
  flex: 0 0 auto;
  padding: 16px clamp(18px, 2.4vw, 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--pa-border);
}
.pa-panel__title {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: var(--pa-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pa-panel__close {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--pa-border-strong);
  border-radius: var(--pa-radius-sm);
  background: transparent;
  color: var(--pa-text-muted);
  font-family: var(--pa-font);
  font-size: var(--pa-meta);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--pa-dur-fast) ease, color var(--pa-dur-fast) ease;
}
.pa-panel__close:hover { border-color: var(--pa-text); color: var(--pa-text); }

.pa-panel__body { flex: 1 1 auto; min-height: 0; padding: clamp(20px, 3vw, 34px); overflow-y: auto; }

/* ---- Form itself ---------------------------------------------------------- */

.pa-form__title {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: var(--pa-tracking-tight);
}
.pa-form__intro { margin: 14px 0 0; max-width: 46ch; color: var(--pa-text-muted); font-size: var(--pa-body); line-height: 1.65; }
.pa-form__lede { margin: 12px 0 0; max-width: 48ch; color: var(--pa-text-muted); font-size: var(--pa-body-sm); line-height: 1.65; }

.pa-field--separate { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--pa-border); }

.pa-chips { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

.pa-form__actions { margin-top: 30px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pa-form__sending { color: var(--pa-text-warm); font-size: var(--pa-body-sm); font-weight: 600; }
.pa-form__sending[hidden] { display: none; }
.pa-form__privacy { margin: 18px 0 0; color: var(--pa-text-warm); font-size: var(--pa-meta); line-height: 1.6; }

.pa-error[hidden], .pa-form-error[hidden] { display: none; }

.pa-noscript-option { display: block; margin-top: 8px; font-size: var(--pa-body-sm); }

/* Turnstile takes no room unless Cloudflare needs a click. */
.pa-turnstile--asking { margin-top: 24px; }

/* ---- Success -------------------------------------------------------------- */

.pa-form-success[hidden] { display: none; }
.pa-form-success__ref { margin: 16px 0 0; color: var(--pa-text-warm); font-size: var(--pa-meta); }
.pa-form-success__ref[hidden] { display: none; }
.pa-form-success__actions { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--pa-border); }
.pa-form-success__nudge { margin: 0 0 18px; color: var(--pa-text); font-family: var(--pa-font); font-size: 16px; font-weight: 600; }
.pa-form-success__buttons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- Standalone form pages ------------------------------------------------ */

.pa-form-page { padding-block: clamp(120px, 12vw, 180px) var(--pa-section-y); }
.pa-form-page__inner { max-width: 620px; }
.pa-form-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pa-text-muted);
  font-family: var(--pa-font);
  font-size: var(--pa-body-sm);
  font-weight: 600;
}
.pa-form-page__back:hover { color: var(--pa-text); }
.pa-form-page .pa-form-wrap { margin-top: 26px; }

/*
 * Full screen rather than a centred dialog: on a narrow screen, and on a short
 * one, which is the same phone turned on its side.
 */
@media (max-width: 640px), (max-height: 560px) {
  .pa-sheet--form { padding: 0; }
  .pa-panel { width: 100%; height: 100%; margin: 0; border-radius: 0; }
  .pa-panel__close { min-height: 44px; }
}

/*
 * Touch sized controls, on a narrow screen only. A submit button stretched the
 * width of a landscape screen would be a target nobody asked for.
 */
@media (max-width: 640px) {
  .pa-form__actions .pa-btn { width: 100%; justify-content: center; min-height: 48px; }
}