/* ========================================================================= forms.css — submission states for the three live forms. Loaded by: index.html, eligibility.html, contact.html Owns ONLY: the honeypot, the Turnstile slot, the inline error line and the post-submit confirmation panel. Field styling stays in base.css (.form .field), which this sheet does not touch. ⚠️ All colour reads from base.css tokens — no hex here. The accent scheme is under review and this sheet must follow it either way. --accent-deep is the only accent permitted on text (base.css §accent). ========================================================================= */ /* Honeypot — must be reachable by a bot parsing the DOM and invisible to everyone else. display:none is skipped by some bots, so move it out of view instead, and take it out of the tab order and the a11y tree. */ /* ------------------------------------------------------------------------- Canonical assessment form — shared helpers The block on index.html and eligibility.html is identical, so anything it needs lives here rather than as an inline style on one copy. Both classes replaced inline `style=` attributes when the two forms were consolidated on 8 Aug 2026. ------------------------------------------------------------------------- */ /* A field that spans the full width of a .row grid — the message textarea. */ .form .row .field-full { grid-column: 1 / -1; } /* "(optional)" inside a field label. Labels are uppercase and tracked; this qualifier must not be, or it reads as part of the field name. */ .form .field label .opt { text-transform: none; letter-spacing: 0; color: var(--slate-mid); } .form .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Turnstile widget slot. The iframe is a fixed 300x65 at normal size; the wrapper just gives it breathing room in the form's flex column. */ .form .form-verify { min-height: 65px; } .form .form-verify:empty { min-height: 0; } /* Inline error line. Hidden until the handler returns a message. */ .form .form-status { font-family: var(--font-sans); font-size: var(--fs-note); line-height: var(--lh-note); margin: 0; } .form .form-status:empty { display: none; } .form .form-status[data-state='error'] { color: var(--accent-deep); border-left: 2px solid var(--accent-deep); padding-left: 12px; } /* ------------------------------------------------------------------------- Cross-border consent. docs/work-order-privacy-forms.md §1. 🔴 Must render as ordinary visible copy. ⛔ Never display:none, visibility:hidden, zero-height, or behind a disclosure toggle — this label now carries BOTH the collection notice and the consent, so hiding it voids the disclosure the forms depend on. `[DECISION — Jacob, 10 Aug 2026]` The separate notice paragraph above it was removed; one statement, on the label. Atkinson Hyperlegible per chrome spec §4: forms are one of the three places the accessibility face is assigned, and this is the highest-consequence sentence on the page for a reader with low vision. ------------------------------------------------------------------------- */ .form .form-consent { display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 0 8px; margin: 0 0 6px; } /* ⚠️ This previously set width/height: 44px with scale(1.15) on the input, under the comment "a 44px box around an 18px control". That is not what those properties do to a checkbox: the browser draws the control at the size you give it, so all three forms rendered a 51x51px box, 12px above its own first line of label text. `[Jacob, 10 Aug 2026]` 🔴 The 44px target was already satisfied and still is —