/* patient_picker_html — the form's stylesheet. THIS FILE IS DELIBERATELY NOT :where()-SCOPED, and that is load-bearing. pxPatientPickerOpen moves the out of the form root and onto while the modal is open (patient_picker.mjs, _pxPickerRestore puts it back on close), so for the whole time the modal is visible neither it nor any node inside it has a .px-picker ancestor. Scoping under :where(.px-picker) would leave the open modal with no width, no max-height, no backdrop, no scrolling body and no list rows, so the rules are unscoped. That is safe because every selector already carries the component-private .px-picker stem, which appears nowhere else in this repo and in none of the four host themes. No rule here needs a second class: the only competitors are bare-element rules at (0,0,2) or less. There is no root rule for .px-picker: adding one would be a visible change. */ .px-picker-actions { display: flex; gap: var(--px-space-sm); flex-wrap: wrap; align-items: center; } .px-picker-choose, .px-picker-cancel { min-height: 44px; padding: 10px 16px; font-size: 14px; font-weight: 500; border: 1px solid var(--px-border); border-radius: var(--px-radius); background: var(--px-bg-elevated); color: var(--px-text-primary); cursor: pointer; } .px-picker-choose:hover:not(:disabled), .px-picker-cancel:hover:not(:disabled) { color: var(--px-accent); border-color: var(--px-accent); } .px-picker-choose:disabled { opacity: 0.55; cursor: not-allowed; } .px-picker-selected { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--px-border); border-radius: var(--px-radius); background: var(--px-bg-elevated); display: none; align-items: center; justify-content: space-between; gap: var(--px-space-sm); } .px-picker-selected.px-picker-visible { display: flex; } .px-picker-remove { min-width: 32px; min-height: 32px; border: none; background: transparent; color: var(--px-text-muted); font-size: 18px; cursor: pointer; } .px-picker-modal { border: none; border-radius: var(--px-radius-xl); box-shadow: var(--px-shadow-lg); padding: 0; max-width: 640px; width: 92vw; max-height: 86vh; background: var(--px-bg-card); color: var(--px-text-primary); } .px-picker-modal::backdrop { background: var(--px-backdrop); } .px-picker-modal-inner { display: flex; flex-direction: column; max-height: 86vh; } .px-picker-modal-header, .px-picker-modal-footer { padding: var(--px-space-md); border-bottom: 1px solid var(--px-border); display: flex; justify-content: space-between; gap: var(--px-space-sm); } .px-picker-modal-footer { border-top: 1px solid var(--px-border); border-bottom: none; justify-content: flex-end; } .px-picker-modal-title { font-size: 18px; font-weight: 600; margin: 0; } .px-picker-modal-close { width: 36px; height: 36px; border: none; background: transparent; color: var(--px-text-muted); cursor: pointer; font-size: 20px; } .px-picker-modal-controls { padding: var(--px-space-sm) var(--px-space-md); border-bottom: 1px solid var(--px-border); } .px-picker-search { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 14px; border: 1px solid var(--px-border); border-radius: var(--px-radius); background: var(--px-bg-input); color: var(--px-text-primary); } .px-picker-modal-body { overflow-y: auto; flex: 1 1 auto; } .px-picker-list { list-style: none; margin: 0; padding: 0; } .px-picker-list li { border-bottom: 1px solid var(--px-border); } .px-picker-list button { width: 100%; min-height: 48px; padding: 10px var(--px-space-md); border: none; background: transparent; text-align: left; cursor: pointer; color: var(--px-text-primary); } .px-picker-list button:hover { background: var(--px-bg-elevated); } .px-picker-empty { padding: var(--px-space-lg); text-align: center; color: var(--px-text-muted); }