/* Forms: choice groups with a CSS-only count, text fields, error and success states.
   Reads the semantic --cnx-* layer, so it works in any area scope. No script. */

.form-lede { max-width: 62ch; margin: 0 0 20px; color: var(--cnx-text-muted); }
.groups { display: grid; grid-template-columns: repeat(4, 1fr); }
.groups--1 { grid-template-columns: 1fr; }
.groups fieldset { min-width: 0; margin: 0; padding: 24px 24px 8px 0; border: 0; scroll-margin-top: 90px; }
.groups fieldset + fieldset { padding-left: 24px; border-left: 1px solid var(--cnx-border); }
.groups legend { float: left; width: 100%; margin: 0 0 14px; padding: 0; font: 600 1.0625rem/1.25 var(--cnx-font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.groups--1 .opt { display: inline-flex; margin-right: 28px; }
.opt { clear: both; display: flex; align-items: center; gap: 12px; min-height: var(--cnx-touch); font-size: 0.9375rem; cursor: pointer; touch-action: manipulation; }
.opt input { display: grid; flex: none; place-items: center; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--cnx-border-input); border-radius: 4px; background: var(--cnx-field-bg); appearance: none; cursor: pointer; }
.opt input:checked { border-color: var(--cnx-primary); background: var(--cnx-primary); }
.opt input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--cnx-on-primary); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.opt input:focus-visible { outline: 3px solid var(--cnx-focus-ring); outline-offset: 2px; }
.opt:has(input:checked) { font-weight: 600; }

/* The live count of marked options: a CSS counter, no script. */
.selcount { counter-reset: sel; }
.selcount input[type="checkbox"]:checked { counter-increment: sel; }
.tally { display: flex; align-items: center; gap: 14px; margin: 24px 0 0; padding: 14px 0; border-top: 1px solid var(--cnx-border); border-bottom: 1px solid var(--cnx-border); font: 500 0.8125rem/1 var(--cnx-font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.tally::before { content: counter(sel); color: var(--cnx-primary); font: 700 2rem/1 var(--cnx-font-display); font-variant-numeric: tabular-nums; }

.contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; margin-top: 28px; }
.field label { display: block; margin-bottom: 6px; font: 500 0.875rem/1.3 var(--cnx-font-display); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--cnx-border-input); border-radius: 4px; background: var(--cnx-field-bg); color: var(--cnx-text); font: 400 1rem/1.4 var(--cnx-font-display); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--cnx-focus-ring); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--cnx-error); box-shadow: inset 0 0 0 1px var(--cnx-error); }
.field--wide { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; }
.submit { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; }
.privacy { max-width: 62ch; margin: 0; color: var(--cnx-text-muted); font-size: 0.875rem; }

.form-errors { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--cnx-error); border-radius: 8px; color: var(--cnx-error); }
.form-errors ul { margin: 6px 0 0; padding-left: 20px; }
.form-errors:focus-visible { outline: 3px solid var(--cnx-focus-ring); }
.proposal-sent [role="status"] { padding: 28px 0; }
.proposal-sent h3 { margin: 0 0 8px; font: 700 1.5rem/1.2 var(--cnx-font-display); }
.proposal-sent p { margin: 0; color: var(--cnx-text-muted); }

@media (max-width: 56.25rem) {
  .groups, .contact { grid-template-columns: 1fr; }
  .groups--1 .opt { display: flex; }
  .groups fieldset, .groups fieldset + fieldset { padding: 20px 0 8px; border-left: 0; border-bottom: 1px solid var(--cnx-border); }
}
.field-error { margin: 6px 0 0; color: var(--cnx-error); font-size: 0.875rem; }
.form-errors a { color: inherit; }

/* Single choice (contact routes): a round control with an inner dot. */
.opt input[type="radio"] { border-radius: 50%; }
.opt input[type="radio"]:checked::after { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--cnx-on-primary); transform: none; }