/* The reservation form (components/reserve-form.js): the stepper's hairline
   card, two fields to a row on desktop, the guardian box, the success state
   (the student's confirmation: the summary rows, the steps, the motto). */

.reserve {
  container-type: inline-size;   /* the field pairs stack by the form's own width, whatever page it sits on */
  border: var(--hair);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--bg);
}

.reserve-heading { font-size: 1.5rem; margin-bottom: 0.3rem; }
.reserve-confirm { margin: var(--sm) 0 var(--md); }
.reserve-intro { color: var(--text-2); margin-bottom: var(--md); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--md); }
@container (max-width: 30rem) { .field-grid { grid-template-columns: 1fr; } }

.reserve-guardian { border: var(--hair); padding: var(--md) var(--md) 0; margin: 0 0 var(--md); }
.reserve-guardian .field-hint { margin: 0 0 var(--md); }

.reserve .form-message[hidden] { display: none; }

.reserve[data-sending] [data-send] { opacity: 0.6; pointer-events: none; }
.reserve.is-done .reserve-fields, .reserve.is-done .reserve-intro, .reserve.is-done .reserve-heading { display: none; }

.reserve-done h3 { font-size: 1.5rem; font-weight: var(--light); margin: 0.3rem 0 0.5rem; }
.reserve-done-heading { display: flex; align-items: center; gap: 0.5rem; }
.reserve-done-heading svg { color: var(--accent); flex: none; }
.reserve-done .lede { font-size: var(--body); }
.reserve-summary { margin-top: var(--md); }
.reserve-summary li { padding: 0.75rem 0; }
.reserve-done h4 { margin: var(--lg) 0 var(--sm); font-weight: var(--regular); }
.reserve-steps { margin: 0; }
.reserve-steps li { margin-bottom: var(--sm); color: var(--text-2); font-weight: var(--light); line-height: var(--relaxed); }
.reserve-motto {
  margin-top: var(--lg);
  padding-top: var(--md);
  border-top: var(--hair);
  text-align: center;
  font-family: var(--mono);
  font-size: var(--kicker);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-2);
}
.reserve-invite { margin-top: var(--xl); }
.reserve-invite p { color: var(--text-2); margin-bottom: var(--sm); }
.reserve-invite-text { cursor: copy; margin-bottom: var(--sm); }