/**
 * Forms — Designer Brief §7 (Form Designs — Three Specialized Inquiry Forms).
 *
 * Enqueued by en_form_styles() in inc/forms.php, not by the glob in
 * functions.php: that callback drops every sheet outside a three-name
 * allow-list unless is_preview(), and the allow-list belongs to whoever owns
 * functions.php. Same handle, same dependency resolution, priority 31 — so if
 * the allow-list is ever widened this becomes a silent no-op rather than a
 * second copy.
 *
 * Loads after the core sheets, so every rule here wins at equal specificity.
 * Nothing in this file uses !important.
 */

/* ==========================================================================
   1. The error summary has to be seen

   A failed submission returned the page at scrollY 0 with the banner ~750px
   down the document — below the fold at 1440x695 and far below it at 375x812.
   The visitor pressed Send and nothing appeared to happen.

   Three things carry the fix, and the first two need no JavaScript:
   the fragment in the form action (inc/forms.php, en_form_action) scrolls the
   response to the banner; scroll-margin-top keeps the 65px sticky header off
   it; and en_form_focus_script() moves focus there as well.
   ========================================================================== */
.notice--form {
  scroll-margin-top: 84px;
}

/* Focus lands here after a failed submit, so it has to be visible. The banner
   already sits on --err-bg, where the error red measures 3.4:1. */
.notice--form:focus {
  outline: 3px solid var(--err-text);
  outline-offset: 3px;
}

.errlist {
  margin: var(--s-3) 0 0;
  padding-left: var(--s-4);
}

.errlist li {
  margin: 0 0 var(--s-1);
}

.errlist a {
  color: var(--err-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Every entry is a jump link to a field, so each is a target in its own
     right rather than a link inside running text. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.errlist a:focus-visible {
  outline: 2px solid var(--err-text);
  outline-offset: 2px;
}

/* Fields the summary links to get the same clearance as the summary itself. */
.f,
.fset-bare {
  scroll-margin-top: 84px;
}

/* ==========================================================================
   2. Consent checkbox — a real target and a real focus ring

   .f input:focus in style.css sets outline:none and substitutes a border and
   a box-shadow. A native checkbox paints neither, so focused and unfocused
   were identical: measured at 1.19:1, on a required field that appears on
   three forms.

   appearance:none moves the mark into ::before, which does accept a border
   and an outline — and lets the pointer target (44px) and the drawn box
   (22px) be set independently. Brief §7 asks for a custom control with a
   green checked state and 18x18px; the touch-target rule in the same brief
   asks for 44px. Both are satisfied: the input is 44x44, the mark is 22px.
   ========================================================================== */
/* display:flex is not a repeat of the .consent rule in style.css — it is the
   whole point of this one. A consent label nested in .f is matched by
   `.f label{display:block}` (0,1,1), which outranks `.consent{display:flex}`
   (0,1,0), so the checkbox and its text stack instead of sitting on one row.
   Restating display here at (0,2,0) is what puts them back on a row. */
.f .consent {
  display: flex;
  gap: 0;
  align-items: center;
  min-height: 44px;
}

.f .consent input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.f .consent input[type="checkbox"]::before {
  content: "";
  grid-area: 1 / 1;
  place-self: center;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.f .consent input[type="checkbox"]::after {
  content: "";
  grid-area: 1 / 1;
  place-self: center;
  width: 6px;
  height: 11px;
  margin-top: -2px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.f .consent input[type="checkbox"]:checked::before {
  background: var(--sage);
  border-color: var(--sage);
}

.f .consent input[type="checkbox"]:checked::after {
  border-color: #fff;
}

.f .consent input[type="checkbox"][aria-invalid="true"]::before {
  border: 2px solid var(--err);
}

/* Higher specificity than .f input:focus (0,2,1), so the outline:none there
   cannot win whatever the load order turns out to be. The ring is the primary
   green, 7.65:1 on white — the brief's 3:1 floor with room to spare. */
.f .consent input[type="checkbox"]:focus,
.f .consent input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.f .consent input[type="checkbox"]:focus::before,
.f .consent input[type="checkbox"]:focus-visible::before {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ==========================================================================
   3. Chip groups — product, application, requirement

   The visible box is the label; the input inside it is 0x0 and transparent,
   so the focus ring has to be drawn on the label. style.css already does
   that at 2px; the brief asks for the ring to read clearly, and these groups
   now carry the two required questions rather than one optional one.
   ========================================================================== */
.chip input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* An invalid group marks every option in it, not one arbitrary box. */
.fset-bare[aria-invalid="true"] .chip span {
  border-color: var(--err);
}

.f-legend .req {
  color: var(--ink);
}

/* ==========================================================================
   4. Field spec — Designer Brief §7, "General Form Design Standards"
   ========================================================================== */
/* "Placeholder text: #999, smaller font (13px)".

   The 13px is kept verbatim. The colour is not: #999 measures 2.85:1 on white
   (2.71 on --card, 2.61 on --band, 2.53 on --mist), and placeholder text is
   text, so 1.4.3 asks 4.5:1 of it. Every field here does carry a real label
   above it, but the placeholder still states the format the field wants, and a
   hint nobody can read is not a hint.

   This is the same treatment the mandated semantic pair already gets in
   style.css: the Brief's value is kept where it is a mark, and a darkened
   variant of the same neutral carries the text. #6e6e6e is the lightest grey
   on the 4px-rounded ramp that clears 4.5:1 on all four light grounds this
   site uses — 5.10 paper / 4.84 --card / 4.68 --band / 4.53 --mist — so the
   field reads whether it sits on white today or on a card tomorrow. #767676
   (4.54 on white) would clear only the ground the fields happen to be on now.
   Requires client sign-off as a deviation from the Brief's #999. */
.f input::placeholder,
.f textarea::placeholder {
  color: #6e6e6e;
  font-size: 13px;
  opacity: 1;
}

/* "Error state: Border 2px solid #f44336". Drawn as a 1px border plus a 1px
   shadow ring so the field does not shift by a pixel when it goes invalid. */
.f input[aria-invalid="true"],
.f select[aria-invalid="true"],
.f textarea[aria-invalid="true"] {
  border-color: var(--err);
  box-shadow: 0 0 0 1px var(--err);
}

/* "Success indicator: Green checkmark after validation" — set by the blur
   handler in inc/forms.php once a field validates, cleared as soon as it
   does not. */
.f[data-en-ok] > label::after {
  content: " ✓";
  color: var(--sage);
  font-weight: 700;
}

/* ==========================================================================
   5. Form container and submit — Designer Brief §7

   "Form Container: white with subtle gray border, padding 40px (desktop) /
   20px (mobile), border radius 4px." The 600px max-width in the same block is
   deliberately not applied: this page is a two-column enquiry layout with the
   "what happens next" panel beside the form, and 600px would leave the column
   half empty rather than centring anything.
   ========================================================================== */
.formwrap form {
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 40px);
}

/* "Size: Full width of form, 44px height." .btn already carries the brief's
   green, its 16px bold label, its 44px floor and its #1e4620 hover. */
.formwrap form > button[type="submit"] {
  width: 100%;
}

/* "Disabled: Gray background, lighter text, no cursor change." Applied while
   the submission is in flight so the form cannot be sent twice. */
.formwrap form > button[type="submit"]:disabled {
  background: #e0e0e0;
  border-color: #e0e0e0;
  color: #6b6b6b;
  cursor: default;
}

.formwrap form > button[type="submit"]:active:not(:disabled) {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22);
}

@media (max-width: 760px) {
  /* One column below the tablet break, and the summary links stay reachable
     without a horizontal scroll. */
  .errlist {
    padding-left: var(--s-3);
  }
}