/* Ported from _extra/design system/design-system.html (documented form extension). Regenerate with: node tools/extract-assets.mjs */
/* Load before components.css, which carries the v2 border and focus overrides. */
.ds-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.ds-field { display: grid; gap: 7px; }
.ds-field-label { color: var(--ink); font-size: .79rem; font-weight: 700; }
.ds-field-help, .ds-field-error { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.ds-field input, .ds-field select, .ds-field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid rgba(15,23,42,.18); border-radius: 12px; background: var(--white); color: var(--ink); box-shadow: inset 0 1px 2px rgba(10,24,51,.04); transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); }
.ds-field textarea { min-height: 112px; resize: vertical; }
.ds-field input::placeholder, .ds-field textarea::placeholder { color: #9ba5a1; }
.ds-field input:hover, .ds-field select:hover, .ds-field textarea:hover { border-color: rgba(15,23,42,.32); }
.ds-field input:focus, .ds-field select:focus, .ds-field textarea:focus { outline: 0; border-color: var(--forest-700); box-shadow: 0 0 0 4px rgba(20,100,88,.13); }
.ds-field.is-error input, .ds-field.is-error select, .ds-field.is-error textarea { border-color: var(--red); box-shadow: 0 0 0 4px rgba(169,54,48,.08); }
.ds-field.is-error .ds-field-error { color: var(--red); }
.ds-choice { display: flex; gap: 10px; align-items: flex-start; color: var(--body); font-size: .83rem; line-height: 1.5; cursor: pointer; }
.ds-choice input { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--forest-700); }
.ds-form-note { padding: 15px 17px; border: 1px solid rgba(20,100,88,.16); border-radius: 13px; background: var(--forest-50); color: var(--body); font-size: .78rem; line-height: 1.55; }
.ds-field input, .ds-field select, .ds-field textarea { border-color: rgba(15,23,42,.18); box-shadow: inset 0 1px 2px rgba(10,24,51,.04); }
.ds-field input:focus, .ds-field select:focus, .ds-field textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(54,130,246,.12); }
@media (max-width: 720px) {
  .ds-form-grid { grid-template-columns: 1fr; }
}