/* ═══════════════════════════════════════════════════════════════
   forms.css — secondary pages that carry a form (apply, thanks)
   Night theme only; leans on the tokens declared in style.css
   ═══════════════════════════════════════════════════════════════ */

/* stretched over the document rather than background-attachment:fixed,
   which janks on mobile Safari and bands in full-page capture */
body {
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(120% 40rem at 50% 0, #241226 0%, transparent 70%),
    linear-gradient(180deg, var(--ink-night) 0%, #120a10 100%);
  color: var(--paper-night);
}

/* ─────────────────────────── chrome ─────────────────────────── */

.page-head {
  padding: clamp(1.4rem, 3vh, 2.4rem) var(--pad-x);
}
.page-home {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--gold-bright);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: opacity 0.4s var(--ease-out);
}
.page-home:hover { opacity: 0.7; }
.page-home svg { width: 14px; flex: none; }

.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1rem, 4vh, 3rem) var(--pad-x) clamp(4rem, 10vh, 7rem);
}

.page-intro { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.page-intro .chapter-title { margin: 0.6rem 0 1.4rem; }
.page-intro .chapter-lede { max-width: 34rem; }

.page-foot {
  padding: 0 var(--pad-x) clamp(2rem, 5vh, 3.5rem);
  text-align: center;
}
.page-foot .foot-fine { margin-top: 1.6rem; }

/* ─────────────────────────── form shell ─────────────────────────── */

.form { display: grid; gap: clamp(2rem, 5vh, 3.2rem); }

.form-set {
  border: 0;
  border-top: 1px solid var(--hairline-night);
  margin: 0;
  padding: clamp(1.6rem, 4vh, 2.4rem) 0 0;
  display: grid;
  gap: 1.6rem;
}
.form-legend {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0 1.1rem 0 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}

.field { display: grid; gap: 0.6rem; }

.field label,
.field-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-night-dim);
}
.req { color: var(--gold); margin-left: 0.15em; }
.opt {
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  color: rgba(233, 226, 210, 0.42);
  margin-left: 0.5em;
}

/* ─────────────────────────── inputs ─────────────────────────── */

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="time"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--paper-night);
  background: rgba(233, 226, 210, 0.04);
  border: 1px solid var(--hairline-night);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out);
}
.field textarea { resize: vertical; line-height: 1.7; min-height: 6rem; }

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(233, 226, 210, 0.3);
  font-style: italic;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.form-submit:focus-visible,
.page-home:focus-visible {
  outline: none;
  border-color: var(--gold);
  background: rgba(233, 226, 210, 0.07);
  box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.22);
}

/* the native arrow renders near-black on the dark field, so draw our own */
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) calc(50% + 2px),
                       calc(100% - 1rem) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.field select option { background: var(--ink-night-2); color: var(--paper-night); }

/* date/time inputs ship a dark-on-dark glyph in webkit */
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(28%) saturate(560%) hue-rotate(1deg);
  cursor: pointer;
}

/* visually-hidden label — keeps the field labelled for a11y without
   repeating "Address line 2 / City / State" as visible clutter next to
   the visible "Address" label above the group */
.sr-only-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────── availability grid ─────────────────────────── */

.avail-grid {
  display: grid;
  gap: 0.6rem;
}
.avail-row {
  display: grid;
  grid-template-columns: 6rem 1fr 1fr;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline-night);
}
.avail-row:last-child { border-bottom: none; }
.avail-day {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-night-dim);
}
.avail-time {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(233, 226, 210, 0.42);
}
.avail-time input {
  flex: 1;
  min-width: 0;
}

@media (max-width: 640px) {
  .avail-row { grid-template-columns: 1fr; gap: 0.4rem; }
}

.field input[type="file"] {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--paper-night-dim);
  padding: 0.7rem 0;
}
.field input[type="file"]::file-selector-button {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  margin-right: 1rem;
  cursor: pointer;
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.field input[type="file"]::file-selector-button:hover {
  background: var(--gold);
  color: var(--ink-night);
}

/* ─────────────────────────── checkboxes ─────────────────────────── */

.checks { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.check {
  position: relative;
  display: inline-flex;
}
.check input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.check span {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-night-dim);
  border: 1px solid var(--hairline-night);
  border-radius: 999px;
  padding: 0.62rem 1.2rem;
  transition: border-color 0.4s var(--ease-out), color 0.4s var(--ease-out),
              background 0.4s var(--ease-out);
}
.check input:checked + span {
  color: var(--ink-night);
  background: var(--gold);
  border-color: var(--gold);
}
.check input:focus-visible + span {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.22);
}

/* ─────────────────────────── submit ─────────────────────────── */

.form-foot {
  border-top: 1px solid var(--hairline-night);
  padding-top: clamp(1.6rem, 4vh, 2.4rem);
  display: grid;
  justify-items: start;
  gap: 1.4rem;
}
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 2.2rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-bright);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out);
}
.form-submit:hover {
  background: var(--gold);
  color: var(--ink-night);
  box-shadow: 0 0 40px rgba(201, 164, 92, 0.35);
}
.form-submit svg { width: 13px; flex: none; }

.form-fine {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: 1.9;
  color: rgba(233, 226, 210, 0.45);
  max-width: 30rem;
}

/* honeypot — off-screen rather than display:none, which some bots skip */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─────────────────────────── thanks ─────────────────────────── */

.thanks {
  min-height: 72vh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 1.3rem;
}
.thanks-mark { width: clamp(70px, 9vw, 100px); color: var(--gold); }
.thanks-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.15;
}
.thanks-title em { font-style: italic; color: var(--gold-bright); }
.thanks-copy {
  max-width: 30rem;
  color: var(--paper-night-dim);
  line-height: 1.9;
}

/* ─────────────────────────── narrow ─────────────────────────── */

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home,
  .field input,
  .field select,
  .field textarea,
  .check span,
  .form-submit,
  .field input[type="file"]::file-selector-button {
    transition: none;
  }
}