.school-picker { position: relative; min-width: 0; width: 100%; }
.school-picker input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #bfcbd0; border-radius: 10px; background: #fff; color: var(--color-text, #172c36); font: inherit; font-size: 1rem; }
.school-picker input:focus { outline: 3px solid rgba(22,125,127,.18); border-color: var(--color-primary, #167d7f); }
.school-picker-popup { position: absolute; inset: 100% 0 auto; z-index: 50; margin-top: 4px; border: 1px solid #bfcbd0; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(20,34,44,.16); }
.school-picker-popup[hidden] { display: none; }
.school-picker-popup ul { list-style: none; margin: 0; padding: 4px; max-height: min(22rem, 40vh); overflow-y: auto; overscroll-behavior: contain; }
.school-picker-popup [role="option"] { padding: 11px 10px; border-radius: 6px; cursor: pointer; color: var(--color-text, #172c36); font-size: .95rem; line-height: 1.4; overflow-wrap: anywhere; touch-action: manipulation; }
.school-picker-popup [role="option"]:hover, .school-picker-popup [aria-selected="true"] { background: #e4f2f1; }
.school-picker-popup small { display: block; font-weight: 400; color: #52616a; }
.school-picker-note { margin: 0; padding: 8px 10px 4px; color: #52616a; font-size: .8rem; line-height: 1.4; font-weight: 400; }
.school-picker-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }