/* ==========================================================================================================
   YAML form engine, design v2 (stage 4b). Kit source: design/redesign/kit/css/forms.css, REPLACES static/css/forms.css.
   Linked by templates/partials/form.html next to every rendered form (form pages, order pages, forms inside
   support articles and release notes), i.e. after every other stylesheet: these rules win over components.css
   (.form, .form-field, .form-label, .form-input, .form-check, .form-error(s), .form-success, .form-note, .form-hp)
   and gp-base.css. Class names unchanged (tests_forms, static/js/forms.js). docs/forms.md.
   Spec §6.9: labels 15/600 heading, inputs 48 / radius 12 / 1.5 px line-strong (3.37), focus = action border +
   a 3 px tint halo, errors in --gp-error (6.5 on white) with a mark, never colour alone; radios and checkboxes are
   real inputs, drawn 20 px; a choice group's options are rows that show the selection; submit = primary, full width.
   ========================================================================================================== */

.form-engine { --form-gap: 20px; }
.form-engine__heading { margin: 0 0 8px; color: var(--gp-heading); font-size: var(--gp-fs-card-h3); line-height: var(--gp-lh-card-h3); font-weight: 600; letter-spacing: -.01em; }
.form-engine__intro { margin-bottom: 20px; color: var(--gp-ink); }
.form-engine > .form-errors, .form-engine > .form-success { margin-bottom: 24px; }
.form-engine > .form-errors:focus, .form-engine > .form-success:focus { outline: 2px solid var(--gp-focus); outline-offset: 3px; }
.form-engine .form { display: grid; gap: var(--form-gap); }
.form-engine__required { margin: 0; color: var(--gp-muted); font-size: 14px; }

/* ---- fields ---- */
.form-engine .form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-engine .form-label { color: var(--gp-heading); font-family: var(--gp-font-sans); font-size: 15px; line-height: 21px; font-weight: 600; }
.form-engine .form-label .req { margin-left: 3px; color: var(--gp-muted); font-weight: 500; }
.form-engine .form-help { margin: -2px 0 2px; color: var(--gp-muted); font-size: 14px; line-height: 20px; }
.form-engine .form-input {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--gp-line-strong); border-radius: var(--gp-radius-input);
  background: var(--gp-page); color: var(--gp-ink); font-family: var(--gp-font-sans); font-size: 16px; line-height: 22px; box-shadow: none;
  transition: border-color var(--gp-dur-colour) var(--gp-ease), box-shadow var(--gp-dur-colour) var(--gp-ease);
}
.form-engine .form-input::placeholder { color: var(--gp-muted); opacity: 1; }
.form-engine .form-input:hover { border-color: var(--gp-heading); }
.form-engine .form-input:focus { outline: none; border-color: var(--gp-focus); box-shadow: 0 0 0 3px rgba(36, 95, 212, .22); }
.form-engine .form-textarea { min-height: 140px; resize: vertical; }
.form-engine select.form-input { -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
  background: var(--gp-page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2305264c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat; }
.form-engine .form-note { margin: 0; color: var(--gp-muted); font-size: 14px; line-height: 20px; }
.form-engine .form-note a, .form-engine .form-text a, .form-engine .form-check a { color: var(--gp-link); text-decoration: underline; }

/* ---- sections (fieldsets with a heading) and the two-column grid (width: half) ---- */
.form-section { display: grid; gap: var(--form-gap); min-width: 0; margin: 0; padding: 0; border: 0; }
.form-section + .form-section, .form-fields + .form-section, .form-section + .form-fields { margin-top: 8px; }
.form-section + .form-section, .form-fields + .form-section { padding-top: 28px; border-top: 2px solid var(--gp-hairline); }
.form-section__title { margin: 0 0 4px; padding: 0; color: var(--gp-heading); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.form-section__intro { color: var(--gp-muted); font-size: 15px; line-height: 22px; }
.form-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--form-gap); }
.form-fields > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 480px) {
  .form-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-fields > .form-field--half { grid-column: auto; }
}
.form-engine [hidden] { display: none !important; }          /* show_if: [hidden] wins over display: flex */

/* ---- choices: radio / checkbox groups as rows, single checkboxes and consents ---- */
.form-choices { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.form-choices > legend.form-label { margin-bottom: 8px; padding: 0; }
.form-choices > .form-help { margin-bottom: 10px; }
.form-engine .form-check {
  position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; cursor: pointer;
  border: 1.5px solid var(--gp-hairline); border-radius: var(--gp-radius-input); background: var(--gp-page);
  color: var(--gp-ink); font-size: 15px; line-height: 22px;
  transition: border-color var(--gp-dur-colour) var(--gp-ease), background-color var(--gp-dur-colour) var(--gp-ease);
}
.form-engine .form-check + .form-check { margin-top: 8px; }
.form-engine .form-check:hover { border-color: var(--gp-line-strong); }
.form-engine .form-check:has(input:checked) { border-color: var(--gp-action); background: var(--gp-accent-tint); }
.form-engine .form-check:has(input:focus-visible) { outline: 2px solid var(--gp-focus); outline-offset: 2px; }
.form-engine .form-check > span { min-width: 0; }
/* a single checkbox / consent statement: the same row */
div.form-choices > .form-check { margin: 0; }

/* the inputs themselves: 20 px, drawn (still real, focusable, announced) */
.form-engine .form-check input {
  -webkit-appearance: none; appearance: none; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 1px 0 0;
  border: 1.5px solid var(--gp-line-strong); border-radius: 6px; background: var(--gp-page); cursor: pointer;
  transition: border-color var(--gp-dur-colour) var(--gp-ease), background-color var(--gp-dur-colour) var(--gp-ease);
}
.form-engine .form-check input[type="radio"] { border-radius: 50%; }
.form-engine .form-check input:focus { outline: none; }
.form-engine .form-check input:checked { border-color: var(--gp-action); background: var(--gp-action); }
.form-engine .form-check input[type="checkbox"]:checked {
  background: var(--gp-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.form-engine .form-check input[type="radio"]:checked { background: var(--gp-page); box-shadow: inset 0 0 0 4px var(--gp-page), inset 0 0 0 10px var(--gp-action); border-color: var(--gp-action); }
@media (forced-colors: active) { .form-engine .form-check input { -webkit-appearance: auto; appearance: auto; } }

/* ---- errors: summary (role=alert, links to the fields) and per field ---- */
.form-errors {
  padding: 16px 20px; border: 0; border-left: 0; border-radius: 16px; background: var(--error-tint); color: var(--gp-ink); font-size: 15px; line-height: 22px;
}
.form-errors > p:first-child { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--gp-error); font-weight: 600; }
.form-errors > p:first-child::before { /* the error mark: a circle with "!" (with the text, never colour alone) */
  content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--gp-error); color: #fff; font-size: 13px; line-height: 1; font-weight: 700;
}
.form-errors > p + p { margin-top: 6px; }
.form-errors__list { margin: 8px 0 0 30px; padding: 0; }
.form-errors__list li + li { margin-top: 2px; }
.form-errors__list a { color: var(--gp-error); font-weight: 500; text-decoration: underline; }
.form-errors__list a:hover { text-decoration-thickness: 2px; }
.form-engine .form-error { display: flex; gap: 6px; align-items: flex-start; color: var(--gp-error); font-size: 14px; line-height: 20px; font-weight: 500; }
.form-engine .form-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 2px;
  border-radius: 50%; background: var(--gp-error); color: #fff; font-size: 11px; line-height: 1; font-weight: 700; }
.form-error p { margin: 0; }
.form-error p + p { margin-top: 2px; }
.form-engine .form-field.has-error .form-input, .form-engine .form-input[aria-invalid="true"] { border-color: var(--gp-error); box-shadow: inset 0 0 0 1px var(--gp-error); }
.form-engine .form-field.has-error .form-input:focus { box-shadow: inset 0 0 0 1px var(--gp-error), 0 0 0 3px rgba(180, 35, 24, .18); }
.form-choices.has-error .form-check { border-color: var(--gp-error); }
.form-choices.has-error .form-check input { outline: 0; border-color: var(--gp-error); }

/* ---- success (after the POST-redirect-GET; the functional status green) ---- */
.form-success { display: flex; gap: 10px; align-items: flex-start; padding: 16px 20px; border: 0; border-radius: 16px; background: var(--gp-status-bg);
  color: var(--gp-status-text); font-weight: 500; }
.form-success::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; background: currentColor;
  -webkit-mask: var(--gp-tick) center / contain no-repeat; mask: var(--gp-tick) center / contain no-repeat; }

/* ---- notes (type: note), the file input, the submit ---- */
.form-text { color: var(--gp-muted); font-size: 15px; line-height: 22px; }
.form-text > :first-child { margin-top: 0; }
.form-text > :last-child { margin-bottom: 0; }
.form-engine .form-file { padding: 9px 12px; border-style: dashed; cursor: pointer; }
.form-engine .form-file:hover { border-style: solid; }
.form-engine .form-file::file-selector-button {
  margin-right: 12px; padding: 6px 12px; border: 1.5px solid var(--gp-line-strong); border-radius: 8px;
  background: var(--gp-stone); color: var(--gp-heading); font: inherit; font-weight: 600; cursor: pointer;
}
.form-engine .form .btn, .form-engine .btn--primary-dark { width: 100%; min-height: var(--gp-btn-h-lg); margin-top: 4px; padding-inline: var(--gp-btn-px-lg);
  background: var(--gp-action); color: var(--gp-action-text); border-color: transparent; font-size: var(--gp-fs-button-lg); white-space: normal; }
.form-engine .btn--primary-dark:hover { background: var(--gp-action-hover); color: var(--gp-action-text); }
.form-engine .btn[disabled] { opacity: .55; cursor: not-allowed; }
.form-engine .btn[aria-busy="true"] { cursor: progress; }  /* the browser check before sending (static/js/forms.js) */
.form-note--preview { margin-top: 8px; }
.form-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
:root { --gp-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10.5l4 4 9-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .form-engine .form-input, .form-engine .form-check, .form-engine .form-check input { transition: none; } }