/* ProAgri Client Portal - the two schema forms (/form/:token and /video-request).
   Owner: Forms agent. Every class is prefixed `pa-fr-`; every value is a --pa-*
   token, per the design brief - a hardcoded hex here would put one wrong red on
   the one page some clients ever see.

   These two screens render OUTSIDE the shell (see PA.standalone in
   js/form-render.js), so this file carries their own chrome as well as the form.
   It reuses .pa-input, .pa-select, .pa-textarea, .pa-btn and .pa-badge from
   components.css rather than restyling them: a client filling in a form should
   be looking at the same portal they approve their content in.

   THE BAND IS THE BRAND. /form/:token is the most exposed surface in the
   product: it is mailed to clients who may never open the portal, it carries no
   portal token, and it has no shell header or nav around it. So the page opens
   on a navy panel carrying the ProAgriMedia mark - in every state, including
   both failures - and the questions float on white below it. .pa-fr-hero is that
   panel; where it is present the generic text top bar stands down (see the :has
   rule below), because two lots of branding stacked up is worse than either.

   STATUS VOCABULARY, per the brief:
     red    error, and required-and-missing after a failed submit
     yellow required-and-not-yet-answered - the asterisk, and nothing else
     navy   answered, chosen, done
   Which is why a selected card, chip, day and slot are navy and not red: a
   client picking an option is not performing a destructive action, and red
   spent there is red that no longer means anything at the Send button.

   390px is a first-class width here, not a fallback. Every control is at least
   44px tall, nothing depends on hover, and the sticky footer keeps Send one tap
   away without a scroll hunt. */

/* ── Standalone chrome ────────────────────────────────────────────────────── */
/* The text top bar form-render.js mounts above every standalone screen. It is
   the fallback brand line for a screen that has no band of its own. Where a
   screen DOES render .pa-fr-hero, the band says everything this bar says and
   says it properly, so the bar steps aside. A browser without :has support
   keeps both, which is redundant but never broken. */
.pa-fr-topbar {
  background: var(--pa-surface);
  border-bottom: 1px solid var(--pa-border);
}

.pa-fr-topbar:has(+ .pa-fr-main .pa-fr-hero) { display: none; }

.pa-fr-topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  width: 100%;
  max-width: var(--pa-reading-max);
  min-height: var(--pa-header-h);
  margin: 0 auto;
  padding: 0 var(--pa-space-4);
}

.pa-fr-topbar-brand {
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-lg);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
  color: var(--pa-text);
}

.pa-fr-topbar-sep {
  width: 1px;
  height: 18px;
  background: var(--pa-border-strong);
}

.pa-fr-topbar-sub {
  font-size: var(--pa-text-sm);
  font-weight: 600;
  color: var(--pa-text-muted);
}

.pa-fr-topbar-note {
  max-width: var(--pa-reading-max);
  margin: 0 auto;
  padding: 0 var(--pa-space-4) var(--pa-space-3);
  font-size: var(--pa-text-sm);
  line-height: 1.5;
  color: var(--pa-text-muted);
}

.pa-fr-main {
  background: var(--pa-bg);
}

/* A footnote, not a slab. The page already ends on a floating panel; a full
   width bar bled to the viewport edge under it would undo the float. */
.pa-fr-footbar {
  background: var(--pa-bg);
}

.pa-fr-footbar-note {
  max-width: var(--pa-reading-max);
  margin: 0 auto;
  padding: 0 var(--pa-space-5) var(--pa-space-7);
  font-size: var(--pa-text-sm);
  line-height: 1.5;
  text-align: center;
  color: var(--pa-text-muted);
}

.pa-fr-page {
  width: 100%;
  max-width: var(--pa-reading-max);
  margin: 0 auto;
  padding: var(--pa-shell-inset) var(--pa-shell-inset) var(--pa-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
}

.pa-fr-center { display: flex; justify-content: center; }

/* ── The brand band ───────────────────────────────────────────────────────── */
.pa-fr-hero {
  position: relative;
  overflow: hidden;
  padding: var(--pa-space-5) var(--pa-space-5) var(--pa-space-6);
  border-radius: var(--pa-radius-xl);
  background: var(--pa-brand-accent);
  box-shadow: var(--pa-shadow-lg);
  color: var(--pa-on-dark);
}

.pa-fr-hero.is-compact { padding-bottom: var(--pa-space-5); }

/* The one red on this panel, and it is a brand rule rather than an action: the
   same 3px signature the shell header carries under its band. */
.pa-fr-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--pa-brand-primary);
}

/* The ProAgri matrix, ghosted. It is an <img> because el() prefixes src with the
   base path and a CSS url() would not be rewritten under a subpath host. The
   file draws in currentColor, which an <img> resolves to black, so it is flipped
   to white here rather than shipping a second asset. */
.pa-fr-hero-mark {
  position: absolute;
  top: 50%;
  right: -32px;
  transform: translateY(-50%);
  width: 190px;
  height: auto;
  opacity: 0.07;
  filter: brightness(0) invert(1);
  pointer-events: none;
  user-select: none;
}

.pa-fr-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
}

/* 2X clear space around the mark, per the guidelines, held as padding so it
   survives someone tightening this band later. Left padding is dropped because
   the lock-up carries its own bearing on that edge. */
.pa-fr-hero-brand {
  display: flex;
  align-items: center;
  padding: var(--pa-logo-clear) var(--pa-logo-clear) var(--pa-logo-clear) 0;
}

.pa-fr-logo {
  height: var(--pa-logo-h);
  max-height: var(--pa-logo-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.pa-fr-hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
}

.pa-fr-eyebrow {
  margin: 0;
  font-size: var(--pa-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--pa-track-eyebrow);
  color: var(--pa-on-dark-muted);
}

/* The page's one biggest title, so 700 - not the 400 the old serif display face
   forced on every display slot in this codebase. */
.pa-fr-hero-title {
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-2xl);
  font-weight: 700;
  letter-spacing: var(--pa-track-tight);
  line-height: 1.12;
  color: var(--pa-on-dark);
  overflow-wrap: anywhere;
}

.pa-fr-hero-lede {
  margin: 0;
  max-width: 52ch;
  font-size: var(--pa-text-base);
  line-height: 1.6;
  color: var(--pa-on-dark-muted);
}

.pa-fr-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-fr-hero-chip {
  padding: var(--pa-space-1) var(--pa-space-3);
  border: 1px solid color-mix(in srgb, var(--pa-on-dark) 26%, transparent);
  border-radius: var(--pa-radius-pill);
  background: color-mix(in srgb, var(--pa-on-dark) 10%, transparent);
  font-size: var(--pa-text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pa-on-dark);
}

/* ── Intro (video request keeps the plain heading block) ──────────────────── */
.pa-fr-intro {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
}

.pa-fr-title {
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-2xl);
  font-weight: 700;
  letter-spacing: var(--pa-track-tight);
  line-height: 1.15;
  color: var(--pa-text);
}

.pa-fr-lede {
  margin: 0;
  font-size: var(--pa-text-base);
  line-height: 1.6;
  color: var(--pa-text-muted);
}

.pa-fr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin: var(--pa-space-1) 0 0;
}

.pa-fr-note-soft {
  margin: 0;
  padding: var(--pa-space-4);
  /* Navy info, hairline. The tone is informational rather than warning: nothing
     is wrong, we are just saying which answers came from the booking. */
  border: 1px solid color-mix(in srgb, var(--pa-info) 24%, transparent);
  border-radius: var(--pa-radius);
  background: var(--pa-info-soft);
  font-size: var(--pa-text-sm);
  line-height: 1.5;
  color: var(--pa-text);
}

/* ── Loading, state, done ─────────────────────────────────────────────────── */
.pa-fr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pa-space-3);
  padding: var(--pa-space-7) var(--pa-space-5);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow-sm);
}

.pa-fr-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--pa-border);
  border-top-color: var(--pa-brand-accent);
  border-radius: 50%;
  animation: pa-fr-spin 700ms linear infinite;
}

@keyframes pa-fr-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pa-fr-spinner { animation-duration: 2.4s; }
}

.pa-fr-loading-note {
  margin: 0;
  font-size: var(--pa-text-sm);
  color: var(--pa-text-muted);
}

/* The failure and empty states. The headline sits in the band above; this panel
   carries the explanation and the way out. */
.pa-fr-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pa-space-4);
  padding: var(--pa-space-6) var(--pa-space-5) var(--pa-space-7);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
  text-align: center;
}

.pa-fr-state-mark {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-info-soft);
  color: var(--pa-brand-accent);
}

.pa-fr-state.is-alert .pa-fr-state-mark {
  background: var(--pa-danger-soft);
  color: var(--pa-danger);
}

.pa-fr-state-note {
  margin: 0;
  max-width: 46ch;
  font-size: var(--pa-text-base);
  line-height: 1.6;
  color: var(--pa-text-muted);
}

.pa-fr-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pa-space-4);
  padding: var(--pa-space-6) var(--pa-space-5) var(--pa-space-7);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
  text-align: center;
}

/* Navy, in a navy halo. There is no green in this CI and settled is navy. */
.pa-fr-done-mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
  box-shadow: 0 0 0 10px var(--pa-info-soft);
}

.pa-fr-done-title {
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-xl);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
  color: var(--pa-text);
}

.pa-fr-done-note {
  margin: 0;
  max-width: 44ch;
  font-size: var(--pa-text-base);
  line-height: 1.6;
  color: var(--pa-text-muted);
}

/* What happens now. Left aligned inside a centred panel on purpose: a list of
   three sentences centred is a list nobody reads. */
.pa-fr-next {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  width: 100%;
  max-width: 46ch;
  margin: var(--pa-space-1) 0 0;
  padding: var(--pa-space-4);
  border-radius: var(--pa-radius);
  background: var(--pa-surface-2);
  list-style: none;
  text-align: left;
}

.pa-fr-next-item {
  display: flex;
  align-items: flex-start;
  gap: var(--pa-space-3);
  font-size: var(--pa-text-sm);
  line-height: 1.5;
  color: var(--pa-text);
}

.pa-fr-next-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-info-soft);
  color: var(--pa-brand-accent);
}

/* ── Form shell ───────────────────────────────────────────────────────────── */
.pa-fr-root {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
}

.pa-fr-body {
  display: flex;
  flex-direction: column;
}

/* A floating white panel per step. Depth from shadow, not from a hairline
   outline drawn round everything. */
.pa-fr-step {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-6);
  padding: var(--pa-space-5) var(--pa-space-4);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
}

.pa-fr-step + .pa-fr-step { margin-top: var(--pa-space-4); }

.pa-fr-section-title {
  margin: 0;
  padding-bottom: var(--pa-space-3);
  border-bottom: 1px solid var(--pa-border);
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-md);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
  color: var(--pa-text);
}

/* ── Step rail ────────────────────────────────────────────────────────────── */
/* form-render.js emits an <ol> of steps above the step header. On a phone it is
   numbered circles only - the step's NAME is already the big line directly
   underneath, and repeating it twice at 390px costs a whole screen of height.
   The name is hidden the accessible way rather than with display:none, because
   the number is aria-hidden and removing the name would leave each of these
   buttons with no accessible name at all. */
.pa-fr-steps-nav { min-width: 0; }

.pa-fr-steps {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  margin: 0;
  padding: 0 0 var(--pa-space-1);
  list-style: none;
  /* Many steps scroll inside this rail. The page body never scrolls sideways. */
  overflow-x: auto;
  scrollbar-width: none;
}

.pa-fr-steps::-webkit-scrollbar { display: none; }

.pa-fr-steps-item {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  flex: none;
  min-width: 0;
}

/* The connector between two steps, drawn by the step it leads INTO. */
.pa-fr-steps-item + .pa-fr-steps-item::before {
  content: '';
  flex: none;
  width: 18px;
  height: 2px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-border-strong);
}

.pa-fr-steps-item.is-done + .pa-fr-steps-item::before,
.pa-fr-steps-item.is-current + .pa-fr-steps-item::before {
  background: var(--pa-brand-accent);
}

.pa-fr-steps-btn {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--pa-radius-pill);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.pa-fr-steps-btn:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 4px var(--pa-accent-ring);
}

.pa-fr-steps-dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 2px solid var(--pa-border-strong);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  color: var(--pa-text-muted);
  font-variant-numeric: tabular-nums;
  transition: background var(--pa-dur) var(--pa-ease),
              border-color var(--pa-dur) var(--pa-ease),
              color var(--pa-dur) var(--pa-ease);
}

/* Done is navy filled, here is navy ringed, still to come is a grey outline.
   Navy throughout: a step you have finished is settled, not an alarm. */
.pa-fr-steps-item.is-done .pa-fr-steps-dot {
  border-color: var(--pa-brand-accent);
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
}

.pa-fr-steps-item.is-current .pa-fr-steps-dot {
  border-color: var(--pa-brand-accent);
  background: var(--pa-surface);
  color: var(--pa-brand-accent);
  box-shadow: 0 0 0 4px var(--pa-accent-soft-strong);
}

.pa-fr-steps-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Step header ──────────────────────────────────────────────────────────── */
.pa-fr-step-head {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
}

.pa-fr-step-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pa-space-3);
}

.pa-fr-step-title {
  margin: 0;
  min-width: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-lg);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
  line-height: 1.3;
  color: var(--pa-text);
}

.pa-fr-step-count {
  flex: none;
  margin: 0;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  color: var(--pa-text-muted);
  font-variant-numeric: tabular-nums;
}

.pa-fr-step-bar,
.pa-fr-bar,
.pa-fr-subbar {
  height: 6px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-3);
  overflow: hidden;
}

/* THE FILLS ANIMATE transform, NOT width, AND THAT MATTERS HERE.
   Animating width forces layout on every tick. Two of these three are UPLOAD
   progress bars, so they tick continuously while the browser is already reading
   files off disk and pushing bytes over what may be a farm's mobile connection.
   That is the worst possible moment to make the page re-lay-out every frame.

   scaleX would distort a radius on the fill itself, so the fill is square and
   the pill shape lives on the TRACK, which clips it with overflow: hidden.

   Navy, not red: a progress bar is not an action, it is work already done. */
.pa-fr-step-bar-fill,
.pa-fr-bar-fill,
.pa-fr-subbar-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  background: var(--pa-brand-accent);
  transition: transform var(--pa-dur) var(--pa-ease);
}

/* ── Fields ───────────────────────────────────────────────────────────────── */
.pa-fr-field {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
  scroll-margin-top: var(--pa-space-6);
}

.pa-fr-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  font-size: var(--pa-text-base);
  font-weight: 600;
  line-height: 1.4;
  color: var(--pa-text);
}

/* Yellow, not red. An unanswered required question is waiting on the client,
   which is exactly the one thing yellow is spent on in this CI; red here would
   say "you got this wrong" to somebody who has not typed anything yet. Red
   arrives on the same field the moment it is actually in error - see
   .has-error below. --pa-warning is the darkened yellow that clears 4.5:1. */
.pa-fr-req {
  font-size: var(--pa-text-md);
  font-weight: 700;
  line-height: 1;
  color: var(--pa-warning);
}

.pa-fr-lock {
  padding: var(--pa-space-1) var(--pa-space-2);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-3);
  font-size: var(--pa-text-xs);
  font-weight: 600;
  color: var(--pa-text-muted);
}

.pa-fr-help {
  margin: 0;
  font-size: var(--pa-text-sm);
  line-height: 1.55;
  color: var(--pa-text-muted);
}

.pa-fr-err {
  display: flex;
  gap: var(--pa-space-2);
  margin: 0;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--pa-danger);
}

/* Red marks the field that is in error. The tint goes on the CONTROL only: a
   whole radio group washed pink shouts far louder than the one thing that is
   actually wrong, and the message under it already says what to do. */
.pa-fr-field.has-error .pa-input,
.pa-fr-field.has-error .pa-select,
.pa-fr-field.has-error .pa-textarea {
  border-color: var(--pa-danger);
  background: var(--pa-danger-soft);
}

.pa-fr-field.has-error .pa-fr-choices,
.pa-fr-field.has-error .pa-fr-picker {
  border-color: var(--pa-danger);
}

.pa-fr-field .pa-input.is-locked,
.pa-fr-field .pa-select.is-locked,
.pa-fr-field .pa-textarea.is-locked {
  background: var(--pa-surface-3);
  color: var(--pa-text-muted);
}

.pa-fr-unsupported {
  display: flex;
  align-items: flex-start;
  gap: var(--pa-space-2);
  margin: 0;
  padding: var(--pa-space-3) var(--pa-space-4);
  border: 1px solid color-mix(in srgb, var(--pa-warning) 30%, transparent);
  border-radius: var(--pa-radius);
  background: var(--pa-warning-soft);
  font-size: var(--pa-text-sm);
  line-height: 1.5;
  color: var(--pa-text);
}

.pa-fr-unsupported .pa-icon { flex: none; margin-top: 2px; color: var(--pa-warning); }

/* ── Choices ──────────────────────────────────────────────────────────────── */
.pa-fr-choices {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-1);
  padding: var(--pa-space-2);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-surface-2);
}

.pa-fr-choice {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  min-height: 48px;
  padding: var(--pa-space-2) var(--pa-space-3);
  border-radius: var(--pa-radius-sm);
  font-size: var(--pa-text-base);
  line-height: 1.4;
  color: var(--pa-text);
  cursor: pointer;
  transition: background var(--pa-dur-fast) var(--pa-ease);
}

.pa-fr-choice:hover { background: var(--pa-surface-3); }

.pa-fr-choice:has(input:focus-visible) {
  outline: 2px solid var(--pa-accent-ring);
  outline-offset: 1px;
}

/* Chosen is navy, everywhere on this form. */
.pa-fr-choice input {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--pa-brand-accent);
}

.pa-fr-choice-solo {
  border: 1px solid var(--pa-border);
  background: var(--pa-surface);
}

/* Radio cards. */
.pa-fr-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pa-space-2);
}

.pa-fr-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-3);
  min-height: 60px;
  padding: var(--pa-space-3) var(--pa-space-4);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-surface-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--pa-dur) var(--pa-ease),
              background var(--pa-dur) var(--pa-ease),
              box-shadow var(--pa-dur) var(--pa-ease);
}

.pa-fr-card:hover:not(:disabled) { border-color: var(--pa-border-strong); background: var(--pa-surface); }

.pa-fr-card:focus-visible {
  outline: 2px solid transparent;
  border-color: var(--pa-brand-accent);
  box-shadow: 0 0 0 4px var(--pa-accent-ring);
}

.pa-fr-card.is-on {
  border-color: var(--pa-brand-accent);
  background: var(--pa-accent-soft);
}

.pa-fr-card:disabled { opacity: 0.6; cursor: not-allowed; }

.pa-fr-card-title {
  min-width: 0;
  font-size: var(--pa-text-base);
  font-weight: 600;
  color: var(--pa-text);
}

.pa-fr-card-dot {
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--pa-border-strong);
  border-radius: 50%;
}

.pa-fr-card.is-on .pa-fr-card-dot {
  border-color: var(--pa-brand-accent);
  background:
    radial-gradient(circle at center, var(--pa-brand-accent) 0 6px, transparent 6px);
}

/* Quick-pick chips. */
.pa-fr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
}

.pa-fr-chip {
  min-height: 44px;
  padding: 0 var(--pa-space-4);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-2);
  font: inherit;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  color: var(--pa-text-muted);
  cursor: pointer;
  transition: border-color var(--pa-dur) var(--pa-ease),
              color var(--pa-dur) var(--pa-ease),
              background var(--pa-dur) var(--pa-ease);
}

.pa-fr-chip:hover { border-color: var(--pa-border-strong); color: var(--pa-text); }

.pa-fr-chip:focus-visible {
  outline: 2px solid transparent;
  border-color: var(--pa-brand-accent);
  box-shadow: 0 0 0 4px var(--pa-accent-ring);
}

.pa-fr-chip.is-on {
  border-color: var(--pa-brand-accent);
  background: var(--pa-accent-soft);
  color: var(--pa-brand-accent);
}

/* ── Groups ───────────────────────────────────────────────────────────────── */
.pa-fr-group {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-5);
  min-width: 0;
  margin: 0;
  padding: var(--pa-space-4);
  border: 0;
  border-radius: var(--pa-radius);
  background: var(--pa-surface-2);
}

.pa-fr-group-title {
  padding: 0 var(--pa-space-2);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--pa-track-eyebrow);
  color: var(--pa-text-muted);
}

.pa-fr-subgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pa-space-5);
}

.pa-fr-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
}

.pa-fr-count {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
  margin-bottom: var(--pa-space-4);
}

.pa-fr-count .pa-select { max-width: 200px; }

/* ── Files ────────────────────────────────────────────────────────────────── */
.pa-fr-picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pa-space-3);
  padding: var(--pa-space-5) var(--pa-space-4);
  border: 1px dashed var(--pa-border-strong);
  border-radius: var(--pa-radius);
  background: var(--pa-surface-2);
}

/* Adding a file IS an action, so this one stays red. */
.pa-fr-pick {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-height: 44px;
  padding: 0 var(--pa-space-4);
  border: 1px solid var(--pa-brand-primary);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  font-size: var(--pa-text-sm);
  font-weight: 700;
  color: var(--pa-brand-primary);
  cursor: pointer;
  transition: background var(--pa-dur) var(--pa-ease);
}

.pa-fr-pick:hover { background: var(--pa-brand-soft); }

.pa-fr-pick-note {
  margin: 0;
  font-size: var(--pa-text-sm);
  line-height: 1.45;
  color: var(--pa-text-muted);
}

/* The real input stays in the DOM for the label to drive and for assistive tech
   to reach. It is visually hidden, never display:none. */
.pa-fr-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The hidden input is what actually takes keyboard focus, so the ring has to be
   moved onto the visible label that drives it. */
.pa-fr-field:has(.pa-fr-file-input:focus-visible) .pa-fr-pick {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 4px var(--pa-brand-ring);
}

.pa-fr-files {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-fr-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2) var(--pa-space-3);
  min-height: 56px;
  padding: var(--pa-space-2) var(--pa-space-3);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-surface);
}

/* The name takes the whole first line, the size and Remove sit under it. A
   filename clipped to "goo..." tells the client nothing about which file they
   are about to remove. */
.pa-fr-file .pa-fr-file-name { flex: 1 1 calc(100% - 34px); }
.pa-fr-file .pa-btn { margin-left: auto; }

.pa-fr-file .pa-icon { flex: none; color: var(--pa-brand-accent); }

.pa-fr-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  color: var(--pa-text);
}

.pa-fr-file-meta {
  flex: none;
  font-size: var(--pa-text-xs);
  color: var(--pa-text-muted);
  font-variant-numeric: tabular-nums;
}

.pa-fr-bar-note,
.pa-fr-subnote {
  margin: 0;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  color: var(--pa-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Booking calendar ─────────────────────────────────────────────────────── */
.pa-fr-booking {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pa-space-4);
}

.pa-fr-cal,
.pa-fr-slots-card {
  min-width: 0;
  padding: var(--pa-space-4);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-surface);
}

.pa-fr-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-2);
  margin-bottom: var(--pa-space-3);
}

.pa-fr-cal-title {
  min-width: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-base);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
  color: var(--pa-text);
}

.pa-fr-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.pa-fr-cal-dow {
  padding: var(--pa-space-1) 0;
  font-size: var(--pa-text-xs);
  font-weight: 700;
  text-align: center;
  color: var(--pa-text-faint);
}

.pa-fr-cal-pad { min-height: 44px; }

.pa-fr-cal-day {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--pa-radius-sm);
  background: transparent;
  font: inherit;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  color: var(--pa-text);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background var(--pa-dur-fast) var(--pa-ease);
}

.pa-fr-cal-day:hover:not(:disabled) { background: var(--pa-surface-3); }

.pa-fr-cal-day:disabled { color: var(--pa-text-faint); cursor: not-allowed; }

.pa-fr-cal-day.is-on {
  background: var(--pa-brand-accent);
  border-color: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
}

.pa-fr-slots-title {
  margin: 0 0 var(--pa-space-3);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--pa-track-eyebrow);
  color: var(--pa-text-muted);
}

.pa-fr-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--pa-space-2);
}

.pa-fr-slot {
  min-height: 44px;
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-2);
  font: inherit;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  color: var(--pa-text);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.pa-fr-slot:disabled { color: var(--pa-text-faint); cursor: not-allowed; }

.pa-fr-slot.is-on {
  border-color: var(--pa-brand-accent);
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
}

.pa-fr-cal-summary {
  margin: var(--pa-space-3) 0 0;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  color: var(--pa-text-muted);
}

/* ── Heading field ────────────────────────────────────────────────────────── */
.pa-fr-heading {
  padding-top: var(--pa-space-2);
  border-top: 1px solid var(--pa-border);
}

.pa-fr-field:first-child .pa-fr-heading { padding-top: 0; border-top: 0; }

.pa-fr-heading-title {
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-md);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
  color: var(--pa-text);
}

.pa-fr-heading-note {
  margin: var(--pa-space-1) 0 0;
  font-size: var(--pa-text-sm);
  line-height: 1.5;
  color: var(--pa-text-muted);
}

/* ── Error summary ────────────────────────────────────────────────────────── */
.pa-fr-summary {
  padding: var(--pa-space-4);
  border: 1px solid var(--pa-danger);
  border-radius: var(--pa-radius);
  background: var(--pa-danger-soft);
}

.pa-fr-summary-title {
  margin: 0;
  font-size: var(--pa-text-base);
  font-weight: 700;
  color: var(--pa-text);
}

.pa-fr-summary-note {
  margin: var(--pa-space-1) 0 0;
  font-size: var(--pa-text-sm);
  color: var(--pa-text-muted);
}

.pa-fr-summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-1);
  margin: var(--pa-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.pa-fr-summary-link {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--pa-space-2) 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--pa-text-sm);
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  color: var(--pa-danger);
  cursor: pointer;
}

/* ── Footer nav ───────────────────────────────────────────────────────────── */
/* Sticky so Send is always one tap away on a phone, and a floating card in its
   own right rather than a bar bled to the viewport edge, because it sits inside
   the reading column and a full-bleed bar would not line up with it. */
.pa-fr-foot {
  position: sticky;
  bottom: var(--pa-space-3);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
  padding: var(--pa-space-3);
  padding-bottom: calc(var(--pa-space-3) + env(safe-area-inset-bottom, 0px));
  /* The one place a hairline earns its keep: this card floats OVER a white step
     panel, and shadow alone leaves no edge between two whites. */
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow-lg);
}

.pa-fr-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-3);
}

.pa-fr-nav-right {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  margin-left: auto;
}

.pa-fr-nav .pa-btn { min-height: 52px; }

/* ui.button always emits icon-then-label. On Next the chevron points forward,
   so it belongs after the word; form-render.js marks the button for exactly
   this rule. */
.pa-fr-nav-next { flex-direction: row-reverse; }

.pa-fr-nav > .pa-fr-nav-right:only-child { width: 100%; }
.pa-fr-nav > .pa-fr-nav-right:only-child > .pa-btn { flex: 1 1 auto; justify-content: center; }

/* ── Wider than a phone ───────────────────────────────────────────────────── */
@media (min-width: 700px) {
  .pa-fr-page {
    padding: var(--pa-space-5) var(--pa-space-5) var(--pa-space-7);
    gap: var(--pa-space-5);
  }
  .pa-fr-hero { padding: var(--pa-space-6) var(--pa-space-7) var(--pa-space-7); }
  .pa-fr-hero.is-compact { padding-bottom: var(--pa-space-6); }
  .pa-fr-hero-mark { width: 280px; }
  .pa-fr-hero-title { font-size: var(--pa-text-3xl); }
  .pa-fr-steps-name {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    padding-right: var(--pa-space-2);
    font-size: var(--pa-text-sm);
    font-weight: 600;
    color: var(--pa-text-muted);
  }
  .pa-fr-steps-item.is-current .pa-fr-steps-name { color: var(--pa-text); }
  .pa-fr-step { padding: var(--pa-space-6); }
  .pa-fr-state,
  .pa-fr-done { padding: var(--pa-space-7) var(--pa-space-6); }
  .pa-fr-subgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-fr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-fr-file .pa-fr-file-name { flex: 1 1 auto; }
  .pa-fr-file .pa-btn { margin-left: 0; }
  .pa-fr-booking { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .pa-fr-foot { padding: var(--pa-space-4); padding-bottom: var(--pa-space-4); }
}