/* ========================================================================================
 * picker.css - .picker, the Patients screening picker (L2 layer).
 * Ported from the patients page SCREENING section's inline pattern (docs/design-source/
 * patients-template.html, search 'section id="screening"'): three pressable option cards
 * (adult/child/pain), a child-only age sub-picker, and a result banner whose label/CTA
 * text site.js's initPicker() swaps per state from data-* attributes on the options.
 * ======================================================================================== */

.picker__options{display:grid;gap:var(--cd-4);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.picker__option{
	all:unset;box-sizing:border-box;cursor:pointer;
	display:flex;flex-direction:column;gap:var(--cd-3);padding:var(--cd-6);
	border-radius:var(--cd-r-lg);background:var(--cd-ground-raised);border:2px solid var(--cd-line);
	transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.picker__option:hover{transform:translateY(-3px)}
.picker__option[aria-pressed="true"]{border-color:var(--cd-accent);box-shadow:var(--cd-shadow-2)}
.picker__option-icon{
	width:44px;height:44px;border-radius:var(--cd-r-pill);background:var(--cd-ground-tint);
	display:grid;place-items:center;color:var(--cd-teal-600);
}
.picker__option-title{font-size:var(--cd-h4);font-weight:800;color:var(--cd-ink-strong)}
.picker__option-desc{font-size:var(--cd-small);line-height:1.55;color:var(--cd-ink)}

/* --- child age sub-picker, shown only once "child" is picked --------------------------- */
.picker__sub{display:none;flex-direction:column;gap:var(--cd-4);margin-top:var(--cd-4);padding:var(--cd-6);border-radius:var(--cd-r-lg);background:var(--cd-ground-tint)}
.picker__sub[data-active]{display:flex}
.picker__sub-title{font-size:var(--cd-h4);font-weight:800;color:var(--cd-ink-strong)}
.picker__sub-note{font-size:var(--cd-small);color:var(--cd-ink)}
.picker__sub-options{display:flex;gap:var(--cd-3);flex-wrap:wrap}
.picker__age{
	all:unset;box-sizing:border-box;cursor:pointer;min-height:48px;padding:var(--cd-3) var(--cd-6);
	border-radius:var(--cd-r-pill);font-weight:700;background:var(--cd-ground);color:var(--cd-ink-strong);
	border:2px solid var(--cd-line);transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.picker__age[aria-pressed="true"]{background:var(--cd-accent);color:var(--cd-accent-ink);border-color:var(--cd-accent)}

/* --- result banner ----------------------------------------------------------------------- */
.picker__result{
	display:flex;align-items:center;gap:var(--cd-5);flex-wrap:wrap;margin-top:var(--cd-5);
	padding:var(--cd-5) var(--cd-6);border-radius:var(--cd-r-lg);background:var(--cd-ground-deep);
}
.picker__result-label{flex:1 1 320px;font-size:var(--cd-body-lg);font-weight:700;color:var(--cd-white)}