/* Choice cards: every form answer group on the site (SELECTION-CONTROLS.md, Alex 2026-10-22). Its own file with its own colours, so
   pages that do not load site.css (video quote, commercial assessment) use the same cards. Each option is a bordered card holding the real
   radio or checkbox, a left mark and left text. data-layout is row2 (2 options, each 12 characters or fewer), grid2x2 (4 options,
   each 14 or fewer) or stack (anything else); test/choice-cards.test.ts holds every page to it, so no row is ever partial. */
.choice-cards{--cc-ink:#2b0a4a;--cc-hint:#5b3a86;--cc-error:#b91c1c;--cc-off:#f5f7fb;--cc-line:#c9d3e3;--cc-mark:#8f9ab0;--cc-hover:#9b8fb6;--cc-picked:#f6f1fd;--cc-focus:#8e44e0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
.choice-cards[data-layout=row2],.choice-cards[data-layout=grid2x2]{grid-template-columns:repeat(2,minmax(0,1fr))}
.choice-cards .choice-card{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;margin:0;padding:14px 16px;border:1.5px solid var(--cc-line);border-radius:12px;background:#fff;color:var(--cc-ink);font-size:16px;font-weight:600;line-height:1.3;text-align:left;cursor:pointer;transition:border-color 120ms,background-color 120ms,box-shadow 120ms}
.choice-cards .choice-card input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.choice-mark{flex:none;width:22px;height:22px;border:2px solid var(--cc-mark);border-radius:50%;background:#fff;display:grid;place-items:center;transition:border-color 120ms,background-color 120ms}
.choice-mark::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--cc-ink);transform:scale(0);transition:transform 120ms}
.choice-card:has(input[type=checkbox]) .choice-mark{border-radius:6px}
.choice-card:has(input[type=checkbox]) .choice-mark::after{width:10px;height:6px;border-radius:0;background:none;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(-45deg) scale(0)}
.choice-text{min-width:0;overflow-wrap:anywhere}.choice-aside{margin-left:auto;padding-left:8px;font-weight:700;white-space:nowrap}.choice-hint{display:block;margin-top:2px;font-size:14px;font-weight:400;color:var(--cc-hint)}
@media(hover:hover){.choice-cards .choice-card:hover{border-color:var(--cc-hover)}}
.choice-cards .choice-card:has(input:checked){border-color:var(--cc-ink);box-shadow:inset 0 0 0 1px var(--cc-ink);background:var(--cc-picked)}
.choice-card:has(input:checked) .choice-mark{border-color:var(--cc-ink)}.choice-card:has(input:checked) .choice-mark::after{transform:scale(1)}
.choice-card:has(input[type=checkbox]:checked) .choice-mark{background:var(--cc-ink)}.choice-card:has(input[type=checkbox]:checked) .choice-mark::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.choice-cards .choice-card:has(input:focus-visible){outline:3px solid var(--cc-focus);outline-offset:2px}
.choice-cards .choice-card:has(input[aria-invalid=true]){border-color:var(--cc-error)}
.choice-cards .choice-card:has(input:disabled){border-style:dashed;background:var(--cc-off);color:var(--cc-hint);cursor:not-allowed}.choice-card input:disabled{cursor:not-allowed}
/* Without :has() the card cannot change, so the mark carries picked, focus and the checkbox square on its own. */
.choice-card input:checked+.choice-mark{border-color:var(--cc-ink)}.choice-card input[type=radio]:checked+.choice-mark::after{transform:scale(1)}.choice-card input[type=checkbox]+.choice-mark{border-radius:6px}.choice-card input:focus-visible+.choice-mark{outline:3px solid var(--cc-focus);outline-offset:2px}
.choice-cards .choice-card:has(input:focus-visible) .choice-mark{outline:0}
@media(min-width:761px){.choice-cards .choice-card{min-height:52px}}
@media(prefers-reduced-motion:reduce){.choice-cards .choice-card,.choice-mark,.choice-mark::after{transition:none}}