/* /apply only — what is left after the form took the booking form's UI.
 *
 * MOST OF THIS FILE MOVED OUT ON 16 AUGUST 2026. The panel, the rail pills,
 * the `.fieldset__*` headings, the required asterisk, the rental reveal, the
 * payment box, the declaration and the submit row are now in
 * public/form-shell.css, which /liveaboard/book loads too — one implementation
 * of one design, per the owner's instruction that the two forms match. The
 * sticky left-hand rail and the two-column layout went with them: the booking
 * form puts its rail across the top, and that is what this page does now.
 *
 * What is here is the handful of things only an application has: the published
 * start-date chips, and a note beside the submit button.
 *
 * Loaded from the route's `headExtra` AFTER form-shell.css. No token block —
 * tokens live in public/tokens.css and are imported once by site.css, which is
 * always loaded before both (CLAUDE.md rule 16).
 */

/* An anchor jump from the rail must not land the panel's heading under the
   sticky header. */
.form-panel { scroll-margin-top: calc(var(--hdr) + var(--s-5)); }

/* ---------- published start dates ---------- */

.apply-dates { margin-bottom: var(--s-5); }
.apply-dates .field-label { display: block; margin-bottom: var(--s-3); }

/* ---------- the submit row ----------
   `.form-actions` is a right-aligned flex row shared with the booking form.
   The note is pushed to the far left of it rather than stacked underneath, so
   the row reads as one line on a desktop and wraps to two on a phone. */

.form-actions__note { margin-right: auto; max-width: 44ch; }

@media (max-width: 600px) {
  /* Under the shared narrow rule every child of the row stretches; a sentence
     is not a button and should not. */
  .form-actions .form-actions__note { flex: 1 1 100%; margin-right: 0; max-width: none; }
}