/* Fill PDF form: field list beside a preview of the page, each field numbered as its box. Loaded only on /tools/fill-pdf-form/. */
.form-view { display: grid; gap: var(--matrix-space-16); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .form-view { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
  .form-preview { position: sticky; top: var(--matrix-space-12); }
}
@media (max-width: 899px) { .form-preview { order: -1; } }
.form-fields { display: grid; gap: var(--matrix-space-12); }
.form-field { display: grid; gap: 4px; }
.form-field--checkbox { grid-template-columns: auto 1fr; align-items: center; gap: 4px var(--matrix-space-8); }
.form-field--checkbox .form-field__meta { grid-column: 2; }
.form-field__head { display: flex; gap: var(--matrix-space-8); align-items: baseline; }
.form-field label { font-weight: 500; word-break: break-word; }
.form-field__meta { color: var(--matrix-muted, inherit); font-size: 0.875em; word-break: break-word; }
/* the number badges, here and on the preview: the theme's on-brand colour on its brand colour, at least 4.5:1 in both themes (review
   R4b93906e, I630b9123: white on the dark theme's brand colour was 3.0:1) */
.form-field__number { display: inline-block; min-width: 1.6em; padding: 0 4px; border-radius: 999px; background: var(--matrix-brand); color: var(--matrix-on-brand); text-align: center; font-size: 0.8em; font-weight: 600; }
.form-field input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--matrix-brand); }
.form-preview { display: grid; gap: var(--matrix-space-8); }
.form-preview__nav { display: flex; align-items: center; gap: var(--matrix-space-8); flex-wrap: wrap; }
.form-preview__frame { position: relative; width: fit-content; max-width: 100%; border: 1px solid var(--matrix-border); background: #ffffff; }
.form-preview__page { display: block; max-width: 100%; height: auto; }
/* the saved page in the result (Jack 2026-10-12, appendix 9b) */
.form-result-preview { margin: var(--matrix-space-12) 0 0; display: grid; gap: var(--matrix-space-8); }
.form-result-preview__page { display: block; max-width: min(100%, 720px); height: auto; border: 1px solid var(--matrix-border); }
.form-preview__boxes { position: absolute; inset: 0; }
/* a field's box on the page: outlined, its number on a badge at its corner, as in the list; the current field's in the brand colour. Sized
   as its widget, it holds the field's own control (T09-02, below); the list beside it is the full-size way to each field (WCAG 2.5.8's
   equivalent control) and the Tab order. The badge is opaque, so its number is read against it and not against whatever the page shows
   under the box; it is hidden from assistive technology, as the label names each field */
.form-preview__boxes .form-box { position: absolute; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--matrix-brand) 55%, transparent); background: color-mix(in srgb, var(--matrix-brand) 6%, transparent); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; overflow: visible; }
.form-preview__boxes .form-box.is-current { border-color: var(--matrix-brand); background: color-mix(in srgb, var(--matrix-brand) 18%, transparent); }
.form-preview__boxes .form-box__number { position: absolute; top: 0; left: 0; min-width: 1.4em; padding: 1px 3px; box-sizing: border-box; border-radius: 999px; background: var(--matrix-brand); color: var(--matrix-on-brand); text-align: center; }
/* a box's own control (Jack's T09-02): it fills the box over the page, so what is typed sits where the form shows it, at the box's size (the site's inputs are at least 40 px high and at most
   their container wide, by rules as specific as .options input[type=text]; a box's control is neither). The page is always
   drawn white, so the text is black at any theme; its size follows the box's height (container units), so it fits at any zoom */
.form-preview__boxes .form-box { container-type: size; }
/* its side padding, room for the number, shrinks with the box, so the control is never wider or taller than the box however short
   the field (hub R36b021f5 V3, If7f3ef1f: a 1.8 em padding made a short box's input 16 px wide in an 8 px box, over the tick box beside
   it); and a text box clips what it holds, so nothing of it takes a click outside it. The focus ring is drawn inside, so the clip
   never hides it */
.form-preview .form-preview__boxes .form-box:not(.form-box--checkbox):not(.form-box--radio) { overflow: clip; }
.form-preview .form-preview__boxes .form-box__input { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: none; max-height: none; box-sizing: border-box; margin: 0; padding: 0 min(2px, 4cqw) 0 min(1.8em, 35cqw); border: 0; background: transparent; color: #000000; font: inherit; font-size: clamp(8px, 70cqh, 16px); line-height: 1; resize: none; cursor: text; }
.form-preview .form-preview__boxes textarea.form-box__input { padding-top: min(2px, 10cqh); font-size: clamp(8px, 12px, 16px); line-height: 1.2; }
.form-preview .form-preview__boxes .form-box__input:focus { outline: 2px solid var(--matrix-brand); outline-offset: -2px; background: color-mix(in srgb, #ffffff 80%, transparent); }
/* a tick box or radio button stays inside its box at any size, on a touch screen too: the site's 40 px (48 px for a coarse pointer)
   minimum for inputs is lifted here, or it would reach over a neighbouring box and take its clicks (hub R36b021f5, Ia76fc06d). The
   list beside the page is the full-size way to the same field (WCAG 2.5.8's equivalent control) */
.form-preview .form-preview__boxes .form-box__check { position: absolute; inset: 0; margin: auto; width: min(100%, 18px); height: min(100%, 18px); min-width: 0; min-height: 0; max-width: none; max-height: none; padding: 0; accent-color: var(--matrix-brand); cursor: pointer; }
/* its number sits beside the box, and only shows: a click there is not taken by it, so it never lands on another box's control */
.form-preview__boxes .form-box--checkbox .form-box__number, .form-preview__boxes .form-box--radio .form-box__number { left: auto; right: calc(100% + 2px); pointer-events: none; }
.form-preview__boxes .form-box__number { cursor: pointer; z-index: 1; } /* above the box's control, so the number still goes to the list */
/* a number inside its box stays inside it both ways, whatever the box's height and width (a narrow box on a turned page is a few
   pixels wide), so a click on it is always one on its own field: bounded by the box, sized by its smaller side, and clipped to it
   (Ia76fc06d's class; hub R36b021f5 V2, If3eea3dc: its width was not bounded and it took a neighbouring tick box's click) */
.form-preview__boxes .form-box:not(.form-box--checkbox):not(.form-box--radio) .form-box__number { font-size: clamp(5px, min(75cqh, 70cqw), 11px); min-width: min(1.4em, 100%); max-width: 100%; max-height: 100%; padding: 1px min(3px, 8cqw); overflow: hidden; line-height: 1; }
/* a field's text on a turned page runs with the page (less the widget's own turn): its control is turned the same way, at the box's
   length, so what is typed runs along the field as the saved file shows it */
.form-preview .form-preview__boxes .form-box__input.is-turned-90, .form-preview .form-preview__boxes .form-box__input.is-turned-270 { inset: auto; left: 50%; top: 50%; width: 100cqh; height: 100cqw; translate: -50% -50%; padding-left: min(1.8em, 35cqh); padding-right: min(2px, 4cqh); font-size: clamp(8px, 70cqw, 16px); }
.form-preview .form-preview__boxes .form-box__input.is-turned-90 { rotate: 90deg; }
.form-preview .form-preview__boxes .form-box__input.is-turned-180 { rotate: 180deg; }
.form-preview .form-preview__boxes .form-box__input.is-turned-270 { rotate: 270deg; }