/* ============================================================================
   BOND STREET · FORM PRIMITIVES · v2 (contact review, 29 October 2026)
   Loaded only by pages that carry a form. Replaces the v1 form sheet shipped
   with the contact demo. Reusable: nothing here names the contact page.

   TWO NEW TOKENS, both semantic, both scoped to forms:
   --line-control  #857d70  the essential boundary of a control. 4.07:1 on
                            --surface, 3.58:1 on --surface-alt (WCAG 1.4.11
                            needs 3:1). --line-strong (#cdc4b4) measured 1.73:1.
   --error         #a8401f  error text and error boundaries. 6.14:1 on
                            --surface, 5.41:1 on --surface-alt. --flag
                            (#b5630a, 4.42:1) stays the QA "to confirm" amber
                            and is no longer used for errors.
   Everything else is an existing token.
   ========================================================================== */
:root{--line-control:#857d70;--error:#a8401f}

/* --- shell ---------------------------------------------------------------- */
.frm{min-width:0}
.frm__h{font-size:var(--t-h3);font-weight:var(--fw-med);line-height:1.25;color:var(--ink);margin:0 0 var(--s-6)}
.frm__fields{min-width:0}

/* --- field ------------------------------------------------------------------ */
.fld{margin:0 0 var(--s-6)}
.fld[hidden]{display:none}
.fld__label{display:block;font-size:var(--t-body);font-weight:var(--fw-med);line-height:1.4;color:var(--ink);margin:0 0 var(--s-2)}
.fld__opt{font-weight:var(--fw-book);color:var(--muted)}
.fld__hint{display:block;font-size:var(--t-small);line-height:1.5;color:var(--muted);margin:calc(var(--s-1) * -1) 0 var(--s-2)}
.fld__hint[hidden]{display:none}
.fld__err{display:block;font-size:var(--t-body);font-weight:var(--fw-med);line-height:1.4;color:var(--error);margin:0 0 var(--s-2)}
.fld__err[hidden]{display:none}

/* --- text input and textarea ------------------------------------------------
   16px is required: iOS Safari zooms on focus below it. One focus treatment,
   the site's blue ring, so a focused field never shows two outlines. */
.ctl{display:block;width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;
  font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-control);border-radius:var(--r);
  transition:border-color var(--dur-fast) var(--ease)}
.ctl:hover{border-color:var(--ink)}
.ctl:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--ink)}
.ctl--area{min-height:10.5rem;resize:vertical}
.fld--err .ctl{border:2px solid var(--error);padding:11px 13px}

/* --- choice tiles: radios and checkboxes ------------------------------------
   The whole tile is the label. The native control is kept, so forced-colours
   modes still draw it. Selected = ink boundary at 2px plus the warm surface,
   so the state never depends on colour alone. */
.chs{border:0;margin:0 0 var(--s-6);padding:0;min-width:0}
.chs__legend{display:block;float:none;width:100%;max-width:none;padding:0;font-size:var(--t-body);font-weight:var(--fw-med);line-height:1.4;color:var(--ink);margin:0 0 var(--s-2)}
.chs__legend--lg{font-size:var(--t-h4);margin-bottom:var(--s-3)}
.chs__list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);margin:0;padding:0;list-style:none}
.chs__list--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.chs .fld__hint{margin:0 0 var(--s-3)}
.chs .fld__err{margin-bottom:var(--s-3)}
.choice{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:14px;align-items:start;height:100%;box-sizing:border-box;
  min-height:56px;padding:15px 16px;background:var(--surface);border:1px solid var(--line-control);border-radius:var(--r-md);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.choice input{width:22px;height:22px;margin:0;accent-color:var(--ink);cursor:pointer}
.choice input:focus{outline:2px solid var(--focus);outline-offset:2px}
.choice__t{display:block;font-size:var(--t-body);font-weight:var(--fw-med);line-height:1.4;color:var(--ink)}
.choice__h{display:block;font-size:var(--t-small);line-height:1.5;color:var(--body);margin-top:2px}
.choice:hover{border-color:var(--ink)}
.choice:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--surface-alt)}
@supports selector(:has(*)){
  .choice input:focus{outline:none}
  .choice:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
}
.chs--err .choice{border-color:var(--error)}
/* inside a warm panel the selected tile turns white instead, so it still
   differs from its ground */
.subset .choice:has(input:checked){background:var(--surface)}

/* --- conditional sub-section --------------------------------------------------
   Appears directly under the control that reveals it. A warm panel, no rule,
   no second heading: the first question inside it is its title. */
.subset{background:var(--surface-alt);border-radius:var(--r-lg);padding:var(--s-7);margin:0 0 var(--s-6)}
.subset[hidden]{display:none}
.subset>:last-child{margin-bottom:0}
.subset__aside{font-size:var(--t-small);line-height:1.5;margin:calc(var(--s-1) * -1) 0 var(--s-3)}
.subset .chs{margin-bottom:var(--s-7)}

/* --- character count: shown only near the limit ------------------------------ */
.cnt{display:block;font-size:var(--t-small);line-height:1.5;color:var(--muted);margin-top:var(--s-2)}
.cnt[hidden]{display:none}
.cnt--over{color:var(--error);font-weight:var(--fw-med)}

/* --- error summary ----------------------------------------------------------- */
.esum{border:2px solid var(--error);border-radius:var(--r-md);padding:var(--s-5) var(--s-6);margin:0 0 var(--s-7);background:var(--surface)}
.esum[hidden]{display:none}
.esum:focus{outline:2px solid var(--focus);outline-offset:2px}
.esum__h{font-size:var(--t-h4);font-weight:var(--fw-med);line-height:1.35;color:var(--ink);margin:0 0 var(--s-3)}
.esum__list{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-2)}
main .esum .esum__list li>a{color:var(--error);font-weight:var(--fw-med);text-decoration:underline;text-underline-offset:3px}
main .esum .esum__list li>a:hover{color:var(--ink)}

/* --- actions ----------------------------------------------------------------- */
.frm__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);margin-top:var(--s-7)}
.frm__actions .btn{min-width:12rem}
.frm__status{font-size:var(--t-small);line-height:1.5;color:var(--body)}
.frm__actions .btn--primary[aria-disabled="true"]{cursor:progress}
.frm__actions .btn--primary[aria-disabled="true"]:hover{transform:none;background:var(--ink);border-color:var(--ink)}
.frm__legal{font-size:var(--t-small);line-height:1.55;color:var(--muted);margin:var(--s-5) 0 0}
.frm__verify:not(:empty){min-height:70px;margin-top:var(--s-6)}
.frm__fields[aria-busy="true"]{cursor:progress}

/* --- outcome panels ---------------------------------------------------------- */
.outcome{background:var(--surface-alt);border-radius:var(--r-lg);padding:var(--s-8)}
.outcome[hidden]{display:none}
.outcome:focus{outline:2px solid var(--focus);outline-offset:2px}
.outcome__h{font-size:var(--t-h3);font-weight:var(--fw-med);line-height:1.25;color:var(--ink);margin:0 0 var(--s-4)}
.outcome p{font-size:var(--t-body);line-height:var(--lh-body);color:var(--body);margin:0 0 var(--s-3)}
.outcome__ref{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--ink);font-weight:var(--fw-med)}
.outcome__acts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.outcome--fail{background:var(--surface);border:2px solid var(--error);padding:calc(var(--s-8) - 2px)}

@media(max-width:540px){
  .chs__list--2{grid-template-columns:minmax(0,1fr)}
  .subset{padding:var(--s-5);margin-left:calc(var(--s-2) * -1);margin-right:calc(var(--s-2) * -1)}
  .outcome{padding:var(--s-6)}.outcome--fail{padding:calc(var(--s-6) - 2px)}
  .frm__actions .btn{width:100%}
}
@media(forced-colors:active){
  .choice:has(input:checked){outline:2px solid CanvasText}
}