/* Provider onboarding (/apply) — layered on associate.css's shared tokens, buttons and dialogs. */

main { max-width: 720px; margin: 0 auto; padding: 16px; }
fieldset { border: none; padding: 0; margin: 0; }
fieldset legend { font-weight: 700; padding: 0 0 8px; width: 100%; }
.card.intro { background: linear-gradient(135deg, var(--accent-soft), var(--panel)); }

input[type=email], input[type=url], input[type=search] {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); width: 100%;
}

/* "Bubble" MCQ chips — real <input type=radio|checkbox> so Tab/arrow-keys/Space/Enter all work
   natively; the input itself is visually reduced to a dot but stays in the tab order and keeps focus
   visible via :focus-visible on the wrapping label. No custom keyboard handling anywhere here. */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); cursor: pointer; font-size: .92rem; user-select: none;
}
.chip input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; margin: 0; }
.chip:hover { border-color: var(--accent); }
.chip.checked, .chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.chip:has(input:focus-visible), .chip.chip-focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip-group.empty::after { content: 'Nothing here yet.'; color: var(--muted); font-style: italic; }

#success h2 { margin-top: 0; }