/* The long-form vocabulary shared by /apply and /liveaboard/book.
 *
 * WHY THIS FILE EXISTS. Every rule below was in public/booking.css, where it
 * had one user. The owner's instruction on 16 Aug 2026 was that the application
 * form should carry the booking form's UI — "the UI should be same like booking
 * page like liveaboard but keep everything one page as it is now" — which gave
 * these rules a second user. Two copies of one panel is exactly the drift
 * CLAUDE.md rule 16 exists to stop, so the shared half moved here and both
 * pages load it. Nothing was retyped: every value is booking.css's, unchanged.
 *
 * WHAT STAYED IN booking.css: the wizard's show/hide behaviour, the trip card,
 * the cabin picker, the review sheet, the `.btn--line` back button, the file
 * input's own padding and the `--edge-ink` override that gives that page Ayo's
 * thinner borders. All of it is the liveaboard's alone.
 *
 * WHAT IS NOT HERE AT ALL: the `.field` vocabulary — label, hint, control,
 * focus ring, error — which has lived in site.css since the owners chose Ayo's
 * version of it, and is what /contact and the admin read too.
 *
 * ---------------------------------------------------------------------------
 * ONE BLOCK, TWO NAMES, AND IT IS DELIBERATE. Four selectors below are written
 * twice: `.form-panel, .wizard__step`, `.form-rail*, .wizard__rail*`, and
 * `.form-actions, .wizard__actions`. The `wizard__` half is Ayo's, and
 * public/booking.js reads those exact strings out of the DOM — it queries
 * `.wizard__step`, builds `.wizard__rail-btn` and toggles `.wizard--enhanced`.
 * Renaming them means editing a file this project keeps identical to the sister
 * site's. So the booking form keeps its names, /apply gets names that describe
 * a form which does not step, and this file is the one place the design lives.
 * ---------------------------------------------------------------------------
 *
 * PALETTE IS EACH PAGE'S OWN. The liveaboard pages carry `.palette-ayo`, which
 * remaps the tokens these rules read; /apply does not, so the same rules paint
 * in Barefoot's colours there. Structure shared, colour theirs — the split
 * `.date-list` in site.css already documents.
 *
 * No token block here. Tokens live in public/tokens.css and are imported once
 * by site.css, which is always loaded before this file (rule 16).
 */

/* ---------- form shell ---------- */

.form { max-width: 860px; margin-inline: auto; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }

/* `.req` — the required asterisk — IS IN site.css, not here. It is emitted by
   partials/form-field.ejs, which /contact uses too, and that page loads neither
   of the form stylesheets. The reasoning for its colour is recorded there. */

.field-label {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--txt-ink);
}

/* The line every panel opens with. booking.js focuses it on a step change — so
   it takes a tabindex at runtime and must not paint a ring for that. */
.fieldset__title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.22rem;
  color: var(--deep-900); padding: 0; margin-bottom: 6px;
}
.fieldset__title:focus { outline: none; }
.fieldset__note { color: var(--txt-ink-dim); font-size: .9rem; margin-bottom: 18px; }
.fieldset__subtitle {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  color: var(--deep-900); margin: 26px 0 4px; padding-top: 18px;
  border-top: 1px solid var(--line-ink);
}

/* Ayo's checkbox row. `accent-color` is what makes the tick their coral.
   /apply does not use this one — its tick-boxes carry hints and errors, which
   `.field--check` in site.css handles and this does not. */
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; }
.check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--clay-deep); }
.check span { font-size: .96rem; color: var(--txt-ink); }

/* ---------- the panel ----------
   On /liveaboard/book these are the wizard's steps and only one is on screen
   at a time; on /apply all six are open at once. Same box either way. */
.form-panel,
.wizard__step {
  border: 1px solid var(--line-ink); border-radius: var(--r-lg);
  padding: clamp(18px, 2.4vw, 28px); margin-bottom: 24px;
  background: rgba(255, 255, 255, .4);
}

/* ---------- the rail ----------
   Six pills across the top. On the booking form they are buttons that change
   step; on /apply they are anchors to sections already on the page, so the
   rail works with the script off and `.is-done` is the only state JS adds. */
.form-rail,
.wizard__rail { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 26px; padding: 0; }
.form-rail__btn,
.wizard__rail-btn {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 1px solid var(--edge-ink); border-radius: 999px;
  padding: 7px 15px 7px 8px; cursor: pointer;
  color: var(--txt-ink); font: inherit; font-size: .84rem;
  /* 44px floor (rule 21) — Ayo's pill is 38px tall and this is a real control. */
  min-height: 44px;
  transition: border-color .25s, background .25s, color .25s;
}
.wizard__rail-btn:disabled { cursor: default; opacity: .55; }
.form-rail__num,
.wizard__rail-num {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  border-radius: 50%; background: var(--shell-3); color: var(--deep-900);
  font-family: var(--font-mono); font-size: .76rem;
  transition: background .25s, color .25s;
}
/* THE CURRENT PILL IS THE SAME DESIGN WITH TWO MEASURED SUBSTITUTIONS, both of
   which Ayo's own version fails. Its border is the only thing marking the step
   you are on, and `--clay-deep` under `.palette-ayo` is Ayo's coral at 2.78:1
   against this cream — under 1.4.11's 3:1 for a component boundary. And Ayo
   sets the step number `#fff` on that coral, which is 3.05:1 and under AA for
   text this size. `--hover-ink` (5.72:1) draws the edge; `--on-coral` is the
   label colour this project already measured on coral at 6.22:1, and it is what
   every Apply button on the site uses. The fills are untouched. */
.is-current .form-rail__btn,
.is-current .wizard__rail-btn { border-color: var(--hover-ink); background: rgba(255, 90, 56, .08); color: var(--deep-900); font-weight: 600; }
/* `--coral`, NOT `--clay-deep`, AND THAT ONE WORD IS A MEASURED FIX RATHER
   THAN A TIDY-UP. The pairing "`--on-coral` on `--clay-deep`" was solved on the
   BOOKING page, where `.palette-ayo` remaps `--clay-deep` to Ayo's #FF5A38 and
   it measures 6.22:1. /apply carries no such remap, so the identical
   declaration landed `--on-coral` on Barefoot's own darker clay #A33F1D and
   measured **3.02:1** on a 12px numeral — under AA, and only visible on the
   pill the reader is currently looking at. `--coral` is #FF5A38 on BOTH pages
   (the Ayo scope remaps `--clay-deep` and leaves `--coral` alone), so this is
   6.22:1 here and pixel-identical there. Verified in the browser, both pages. */
.is-current .form-rail__num,
.is-current .wizard__rail-num { background: var(--coral); color: var(--on-coral); }
.is-done .form-rail__btn,
.is-done .wizard__rail-btn { border-color: var(--seagrass-deep); color: var(--seagrass-deep); }
.is-done .form-rail__num,
.is-done .wizard__rail-num { background: var(--seagrass-deep); color: var(--shell); }
/* The rail is a link list on /apply, so it inherits the site's underline on
   hover unless it is told not to — the pill's own border is the affordance. */
.form-rail__btn { text-decoration: none; }
.form-rail__btn:hover { border-color: var(--hover-ink); color: var(--hover-ink); }

/* ---------- equipment reveal ----------
   Unscoped, where booking.css had these under `.equipment`. That prefix only
   ever matched inside the equipment step, so dropping it changes nothing there
   and lets /apply's rental list read the same rules. */
.rental { padding: 2px 0; }
.rental .check,
.rental .field--check { padding: 10px 0; }
.rental__size { margin: 0 0 14px 30px; max-width: 300px; }
/* The UA sheet's `[hidden] { display: none }` loses to any author `display`
   rule, and both `.field` and `.check` set one. State it. */
.rental__size[hidden] { display: none; }

/* ---------- day / month / year on a phone ----------
   public/date-fields.js swaps every `<input type="date">` for these three
   below 700px and puts the input back above it — the owner's instruction on
   16 Aug 2026, and the only construction that is a scrolling list on iOS,
   Android and a phone in desktop mode alike. Read that file's header before
   changing anything here; the input is still the control that submits.

   THE THREE COLUMNS ARE SIZED, NOT EQUAL. A day is at most two digits, a year
   always four, and a month is a word — "September" is what decides the middle
   track, and giving all three a third of the row each would truncate it while
   leaving the day box mostly empty. `minmax(0, …)` on every track because a
   `<select>` has a large intrinsic minimum width and will otherwise push the
   row wider than its column. */
.datesel {
  display: grid;
  grid-template-columns: minmax(0, 3.1fr) minmax(0, 5fr) minmax(0, 3.6fr);
  gap: 8px;
}
/* The controls themselves are already the site's — `.field select` in site.css
   paints the box, the focus ring and the 44px floor. Only the width is ours. */
.datesel__part { width: 100%; }
/* The real input, while the picker stands in for it. `display: none` is safe
   here ONLY because date-fields.js strips `required`, `min` and `max` off it
   first: a hidden control that fails validation makes the browser refuse the
   submit and refuse to say why. */
.datesel__native { display: none; }

/* ---------- payment ----------
   Ayo's dark panel, in Ayo's place. What it SAYS is different — rule 12 puts
   no payment anywhere on this site — but the block is theirs, and both forms
   have to answer the same question before somebody sends personal details. */
.payment-box {
  background: var(--deep-900); color: var(--shell);
  border-radius: var(--r-lg); padding: clamp(20px, 3vw, 30px); margin-bottom: 24px;
}
.payment-box h3, .payment-box .h3 { font-family: var(--font-display); margin-bottom: 10px; color: var(--shell); }
.payment-box p { color: var(--txt-light); }
.payment-box p + p { margin-top: 12px; }
.payment-box__lead { margin-top: 16px; font-weight: 600; }

/* ---------- the bank transfer block ---------- */
/* A description list, because that is what six labelled values are: the label
   is the term and the number is its definition, which is also what lets a
   screen reader read "Sort Code, forty forty-four twenty" as one pair instead
   of two loose strings.

   `--txt-light-dim` on the labels and full `--txt-light` on the values: the
   figure is the thing being copied and the label is scaffolding around it. On
   this box's solid `--deep-900` that dim token measures 5.30:1 (tokens.css's
   own recorded figure — this is a flat background, not a scrim, so the 15 Aug
   `.prog__s` problem does not arise here). */
.payment-details { margin-top: 10px; }
.payment-details__row {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 4px 16px;
  padding: 7px 0; border-top: 1px solid rgba(244, 237, 225, .14);
}
.payment-details__row:first-child { border-top: 0; }
.payment-details dt { color: var(--txt-light-dim); }
.payment-details dd {
  color: var(--txt-light); margin: 0;
  /* An IBAN is 22 characters with no space to break at, and the bank address
     is longer still. Without this the box overflows its own rounded corner at
     320px — measured, not guessed. `anywhere` rather than `break-word` so the
     break is allowed to count toward the intrinsic minimum width, which is the
     half that actually stops the overflow. */
  overflow-wrap: anywhere;
}
/* The figures a visitor copies into a banking app by hand. DM Mono is rule 17,
   and here it also stops 1/l and 0/O reading alike in an account number. */
.payment-details dd.mono { font-family: var(--font-mono); letter-spacing: .01em; }

@media (max-width: 520px) {
  /* Two columns put the IBAN in ~9rem at this width, which breaks it across
     three lines. Stacked, each figure gets the full box. */
  .payment-details__row { grid-template-columns: 1fr; gap: 2px; }
  .payment-details dt { font-size: .875rem; }
}

@media (max-width: 360px) {
  /* AN IBAN MUST NOT BREAK MID-STRING, and on the narrowest phones it did.
     Measured at 320px: the 22 characters want 219px and the stacked value
     column offers 202px, so the last four digits wrapped onto their own line —
     harmless to copy-and-paste, and an invitation to mistype for the many
     people who read a number off a screen and key it into a banking app.
     Dropping the tracking and a little size buys the 17px back with room over;
     re-measure rather than adjusting by eye if this ever changes. */
  .payment-details dd.mono { font-size: .9rem; letter-spacing: 0; }
}

/* ---------- declaration ---------- */
.declaration { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-ink); }
/* UNDERLINED INK, NOT `--seagrass-deep`. Under `.palette-ayo` that token is
   Ayo's lighter teal (#0c7d70) and measures 4.49:1 on this cream — one
   hundredth under AA, which is still under. These two links are the terms and
   the privacy notice inside a declaration somebody is agreeing to, so they are
   the last links on the site that should be borderline. Ink is 7.01:1 and the
   underline is what marks them as links. */
.declaration .fieldset__note a,
.declaration .field--check label a { color: var(--txt-ink); text-decoration: underline; }
.declaration .fieldset__note a:hover,
.declaration .field--check label a:hover { color: var(--hover-ink); }

/* ---------- the submit row ---------- */
.form-actions,
.wizard__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; align-items: center; flex-wrap: wrap; }

@media (max-width: 600px) {
  .form-rail__label,
  .wizard__rail-label { display: none; }
  .form-rail,
  .wizard__rail { gap: 8px; }
  .form-rail__btn,
  .wizard__rail-btn { padding: 6px; min-width: 44px; justify-content: center; }
  .form-actions,
  .wizard__actions { gap: 10px; }
  .form-actions .btn,
  .wizard__actions .btn { flex: 1 1 auto; justify-content: center; }
}