/**
 * KAB'S OWN BUTTON TREATMENT FOR FORMASSEMBLY'S SUBMIT CONTROLS.
 *
 * Hand-written and OURS — the only file in `public/vendor/` that is not generated.
 * `formassembly.css` beside it is FA's three sheets scoped by `fa:sync-css`; this
 * one overrides a handful of its declarations and nothing else.
 *
 * ── WHY IT EXISTS ───────────────────────────────────────────────────────────────
 * FA's vendor theme paints its submit button `#3aad73` with a `#ffffff` label at
 * 12.96px bold: 2.83:1, measured by axe in a real browser on 2026-09-10, against
 * the 4.5:1 that size requires. It is the control a reader presses to receive the
 * 2020 Litter Study report, so the failing element is the entire point of the band.
 * `#3aad73` is NOT a KAB brand value — it is absent from `tokens.css`,
 * `design-context.ts` and DESIGN.md, and appears only in FA's own `theme-31.css` —
 * so the standing rule about implementing the brand verbatim and never moving a
 * brand value to pass a contrast test has nothing here to protect. The client
 * instruction points the same way: the inline forms should take the place of the
 * native forms as far as styling.
 *
 * ── WHY TOKENS RATHER THAN A DARKER GREEN ───────────────────────────────────────
 * Darkening the vendor hex until it clears 4.5:1 fixes one button by tuning one
 * value, and the next synced form ships the defect again. Reading the surface CTA
 * tokens instead makes the button pass BY CONSTRUCTION: every `.kab-surface-*`
 * declares an already-accessible CTA pairing, so the control inherits whichever
 * ground its band sits on and cannot land on an unreviewed combination. On the
 * default surface that is Bright Green with a Dark Green label (4.80:1, the book's
 * own approved pairing, p.38) — the same paint as the Donate pill.
 *
 * ⚠ THE HOVER MUST RESTATE THE LABEL COLOUR. FA's theme sets `color:#fff` on
 * `:hover`. The hover rule below sets Button's own hover pair, `--surface-accent`
 * with `--surface-accent-text`, so FA's white never lands on an unreviewed fill.
 *
 * ── WHY THE SCOPE CLASS IS DOUBLED ──────────────────────────────────────────────
 * `.fa-embed.fa-embed` is one element matched twice: identical to `.fa-embed` in
 * what it selects, one class higher in specificity. The vendor rule is
 * `.fa-embed .wFormContainer .actions .primaryAction` (0,4,0) and its `:hover` is
 * (0,5,0); doubling puts these at (0,5,0) and (0,6,0) so they win WITHOUT depending
 * on which `<link>` the browser resolves last. `fa-embed.tsx` declares this sheet
 * after the vendor one and with its own `precedence` ("fa-kab-controls", so React
 * orders the group after "fa-vendor") — but a containment argument resting on order
 * alone is one React change away from silently inverting, and this defect is too
 * expensive to re-earn.
 *
 * ⚠ `precedence` ON THIS SHEET IS LOAD-BEARING, NOT TIDINESS. A plain `<link>` is
 * applied ASYNCHRONOUSLY: measured on the branch on 2026-09-11, the vendor sheet was
 * in the DOM with `.sheet` still null on the second and third FaEmbed mount, and the
 * submit control computed `rgba(0,0,0,0)` at 16px/400 — so axe read a button wearing
 * none of the CSS a reader is served and PASSED it, which is why this defect reported
 * on two stories when six carried it. An override sheet shipped as a plain link would
 * reopen that identical gap on the fix itself: not loaded when the control is read is
 * indistinguishable from not written.
 *
 * ── WHAT IS DELIBERATELY NOT RESTYLED ───────────────────────────────────────────
 * `.wfTab` (the multipage progress chip) and `input[type="file"]`'s upload button
 * carry the same `#3aad73`/`#ffffff` pair and the same failure. Neither is touched
 * here, and neither is reachable today: all three synced forms (80, 83, 196) render
 * a single `primaryAction` and no tabs, paging or file input. Restyling a progress
 * indicator is a different design decision from giving a button the button
 * treatment, and it should be made when a form that has one is actually synced. The
 * paging buttons ARE covered below — same affordance, same hex, so a multipage sync
 * cannot reintroduce the defect through a door left open.
 */

.fa-embed.fa-embed .wFormContainer .actions .primaryAction,
.fa-embed.fa-embed .wFormContainer .wfPagingButtons .wfPageNextButton,
.fa-embed.fa-embed .wFormContainer .wfPagingButtons .wfPagePreviousButton {
  background-color: var(--surface-cta-primary);
  color: var(--surface-cta-primary-text);
  /* The rest is `<Button size="lg">` as the native form bands draw it (KAB-112):
     the Dark Green edge that makes a Bright Green pill perceivable on White
     (1.4.11), uppercase tracked label at text-lg, px-10 py-5. */
  border: 1px solid var(--surface-cta-primary-edge);
  border-radius: var(--radius-pill);
  font-size: 1.125rem;
  line-height: 1.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 1.25rem 2.5rem;
  /* Form 83's own style block pulls the button 30px into the space below it.
     At the native button's height that pushes it out past the bottom of FA's card. */
  margin-bottom: 0;
  transition:
    background-color 150ms ease-out,
    color 150ms ease-out;
}

/* Button's own hover: the ground's accent pairing. */
.fa-embed.fa-embed .wFormContainer .actions .primaryAction:hover,
.fa-embed.fa-embed .wFormContainer .wfPagingButtons .wfPageNextButton:hover,
.fa-embed.fa-embed .wFormContainer .wfPagingButtons .wfPagePreviousButton:hover {
  background-color: var(--surface-accent);
  color: var(--surface-accent-text);
}

/* FA's theme draws no focus indicator on these at all. 2px at a 2px offset in the
   surface's own ring token — the same ring Button and ActionLink use. */
.fa-embed.fa-embed .wFormContainer .actions .primaryAction:focus-visible,
.fa-embed.fa-embed .wFormContainer .wfPagingButtons .wfPageNextButton:focus-visible,
.fa-embed.fa-embed .wFormContainer .wfPagingButtons .wfPagePreviousButton:focus-visible {
  outline: 2px solid var(--surface-focus-ring);
  outline-offset: 2px;
}

/* FA holds the button disabled until the "Verify you are human" sum is answered.
   The rule above outranks the vendor's grey `:disabled` paint, so the disabled
   state is Button's own: the same pill at half opacity, not pressable. */
.fa-embed.fa-embed .wFormContainer .actions .primaryAction:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ── THE FIELDS SIT ON THE BAND'S LEFT EDGE ────────────────────────────────────
 * FA's theme pads the form `0 3rem 2rem 3rem` and each `.oneField` `2px 6px`
 * inside a 2px transparent border, so an inline form's fields started 56px right
 * of the band heading above them (measured 2026-10-07 on retreet-planting-request,
 * FA 127: heading x=59, first input x=115; gac-toolkit-request, FA 69, the same).
 * The heading, the intro and our native forms all start on the band edge; the
 * vendor's inset reads as a second, misaligned column. Only the horizontal inset
 * goes: FA's bottom padding stays, and its error state draws on the input itself
 * (`.errFld … border-color`), not on this border. */
.fa-embed.fa-embed .wFormContainer .wForm form {
  padding-left: 0;
  padding-right: 0;
}

.fa-embed.fa-embed .wForm .oneField {
  padding-left: 0;
  padding-right: 0;
  border-left-width: 0;
  border-right-width: 0;
}

/* ── ON A PAINTED BAND THE CARD IS VISIBLE, SO IT KEEPS AN INSET ──────────────
 * The rule above holds while FA's white `.wForm` card is invisible, which is only
 * on the White ground. On Sky, Bright Green or Dark Green the card shows, and with
 * no inset its labels and submit sat on the card's own edge (KAB-104: form 83 and
 * form 69, both on Sky, 2026-10-21). The inset is the painted colour-edge token.
 * `!important` because form 83 ships its own `.wFormContainer .wForm form
 * { padding: 0 !important }` in FA's markup, which stays byte-identical. */
:is(.kab-surface-sky, .kab-surface-green, .kab-surface-jungle)
  .fa-embed.fa-embed
  .wFormContainer
  .wForm
  form {
  padding: var(--spacing-inset) !important;
}

/* FA's 15px field margin would stack on the inset above the first field only. */
:is(.kab-surface-sky, .kab-surface-green, .kab-surface-jungle)
  .fa-embed.fa-embed
  .wFormContainer
  .wForm
  form
  > .oneField:first-child {
  margin-top: 0;
}

/* ── AN EMPTY SUPPORT LINE TAKES NO SPACE ─────────────────────────────────────
 * Every captured form ends in FA's footer, `<p class="supportInfo"><br></p>`: the
 * slot FA fills with the form's support contact, which none of KAB's forms sets.
 * FA's layout sheet pads it 17px all round, so each inline form closed on a 56px
 * blank block under its submit button. Only a footer whose sole element is that
 * line break is hidden; support text added in FA moves the form's version, which
 * `fa:sync-embed`'s drift check reports before the new markup is served. */
.fa-embed.fa-embed .wFormContainer .wFormFooter:has(> .supportInfo > br:only-child) {
  display: none;
}

/* ── THE LABELS AND FIELDS ARE THE NATIVE FORM'S (KAB-112) ────────────────────
 * FieldLabel, TextField, Select and TextArea, in CSS: a 14px bold Dark Green
 * label, and a square field with a 12px inset, 16px text and the ground's
 * control border, ringed on focus like every other control on the site. FA's
 * own field rule (`.required:not(…)`) marks each declaration `!important`,
 * which is why these do too. Where the labels sit, beside the fields or above
 * them, is FA's layout and is not changed here. */
.fa-embed.fa-embed .wFormContainer .wForm {
  color: var(--surface-text);
}

/* A fieldset's legend ("Address") is FieldLabel as a legend, so it matches too. */
.fa-embed.fa-embed .wFormContainer .wForm label.preField,
.fa-embed.fa-embed .wFormContainer .wForm fieldset legend {
  font-family: var(--font-family-body);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  color: var(--surface-text) !important;
}

/* FA's theme forces black on every span of a text block (the consent line) and
   of a label (form 69's "Subscribe to the newsletter" is set in one). */
.fa-embed.fa-embed .wFormContainer .htmlSection .htmlContent span {
  color: var(--surface-text) !important;
}

.fa-embed.fa-embed .wFormContainer .oneField .label span {
  font-size: inherit !important;
  color: inherit !important;
}

.fa-embed.fa-embed
  .wFormContainer
  .wForm
  .inputWrapper
  :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="password"],
    select,
    textarea
  ) {
  font-family: var(--font-family-body) !important;
  font-size: 1rem !important;
  line-height: 1.5rem;
  color: var(--surface-text) !important;
  background-color: var(--surface-background) !important;
  border: 1px solid var(--surface-border-control) !important;
  border-radius: 0 !important;
  padding: 0.75rem !important;
}

/* FA fixes single-line controls at 30px (the email field `!important`), which
   would clip the inset above. A textarea keeps FA's height: its rows are the
   form author's choice. */
.fa-embed.fa-embed
  .wFormContainer
  .wForm
  .inputWrapper
  :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="password"],
    select
  ) {
  height: auto !important;
}

/* FA swaps the border for a 2px grey one on focus and draws no outline. */
.fa-embed.fa-embed
  .wFormContainer
  .wForm
  .inputWrapper
  :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="password"],
    select,
    textarea
  ):focus {
  border: 1px solid var(--surface-border-control) !important;
  outline: 2px solid var(--surface-focus-ring);
  outline-offset: 2px;
}

/* An invalid field keeps the native error boundary: 2px in the error ink. */
.fa-embed.fa-embed
  .wFormContainer
  .oneField.errFld
  .inputWrapper
  :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="password"],
    select,
    textarea
  ) {
  border: 2px solid var(--surface-border-error) !important;
}