/* Tap buttons for a choice, one style for the site: Registration (program, Online / In person) and Tuition and fees
   (program, attendance). A real radio input inside each label (keyboard and screen readers work as usual); the label
   is the button: at least 64 px tall, name + a smaller second line. Chosen: navy with white text and a check mark
   (never color alone); keyboard focus: navy outline + gold glow. Colors from css/ctec-brand.css. */
.ctec-choice-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
.ctec-choice { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 64px; margin: 0;
               padding: .65rem 1rem .65rem 2.6rem; border: 2px solid var(--ctec-line-strong); border-radius: 10px;
               background: #fff; color: var(--ctec-navy); cursor: pointer; line-height: 1.3; }
.ctec-choice input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ctec-choice::before { content: ""; position: absolute; left: .85rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem;
                       border: 2px solid var(--ctec-line-strong); border-radius: 50%; background: #fff; }
.ctec-choice-name { font-weight: 700; font-size: 1.05rem; }
.ctec-choice-meta { font-size: .9rem; font-weight: 400; color: var(--ctec-ink-soft); } /* Registration bolds every label */
.ctec-choice:hover { border-color: var(--ctec-navy); }
.ctec-choice:has(input:checked) { background: var(--ctec-navy); border-color: var(--ctec-navy); color: #fff; }
.ctec-choice:has(input:checked) .ctec-choice-meta { color: #DCEAF3; }
.ctec-choice:has(input:checked)::before { content: "\2713"; border-color: #fff; background: #fff; color: var(--ctec-navy);
                                          font-size: .8rem; font-weight: 800; line-height: .95rem; text-align: center; }
.ctec-choice:has(input:focus-visible) { outline: 3px solid var(--ctec-navy); outline-offset: 2px; box-shadow: var(--ctec-focus-ring); }