/* School picker (school_picker.js): the student setup step, Settings, the
   admin merge row, and the educator app's organization fields. Scoped to
   .sp-*; reads either app's tokens (the educator app's are --e-*). The list
   sits in the page flow, never absolute: cards and dialogs clip overflow. */
.sp-list, .sp-status, .sp-form, .sp-exists {
  --sp-ink: var(--e-text, var(--text));
  --sp-ink-2: var(--e-text-2, var(--text-dim));
  --sp-surface: var(--e-surface, var(--bg-elev-1, var(--surface, #fff)));
  --sp-hair: var(--e-hair, var(--border));
}
.sp-list {
  list-style: none; margin: 6px 0 0; padding: 4px;
  background: var(--sp-surface); border: 1px solid var(--sp-hair);
  border-radius: var(--r-card, var(--e-radius-card, 16px));
  max-height: 320px; overflow-y: auto; box-sizing: border-box; width: 100%;
}
.sp-list[hidden] { display: none; }
.sp-opt {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; cursor: pointer;
  border-radius: var(--r-md, 12px); color: var(--sp-ink); text-align: left;
}
.sp-opt.is-active, .sp-opt:hover {
  background: var(--e-accent-soft, rgb(var(--accent-rgb, 31 95 130) / 0.10)); color: var(--sp-ink);
}
.sp-name { font-weight: 600; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.sp-place { font-size: 12.5px; line-height: 1.3; color: var(--sp-ink-2); }
.sp-add { border-top: 1px solid var(--sp-hair); margin-top: 2px; }
.sp-add .sp-name { font-weight: 600; color: var(--sp-ink); }
.sp-addlink {
  display: inline-block; background: none; border: 0; padding: 0; margin: 8px 0 0;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--e-accent, var(--accent));
  text-decoration: underline; text-underline-offset: 2px;
}
.sp-addlink[hidden] { display: none; }
.sp-status:not(.is-visible) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sp-status.is-visible { font-size: 12.5px; color: var(--sp-ink-2); margin: 6px 0 0; }
.sp-form { display: grid; gap: 12px; }
.sp-field { display: grid; gap: 6px; min-width: 0; }
.sp-label { font-size: 13px; font-weight: 600; color: var(--sp-ink); }
.sp-form input, .sp-form select { width: 100%; box-sizing: border-box; min-width: 0; }
.sp-back { justify-self: start; }
.sp-exists { display: grid; gap: 8px; color: var(--sp-ink); }
.sp-exists-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* A phone at 320 wraps the names and the "Add it" row to two lines each, and
   320px of list cut the last row in half until it was scrolled. The list
   is in the page flow, so on a narrow screen it may be as tall as it needs. */
@media (max-width: 400px) {
  .sp-list { max-height: min(76vh, 560px); }
}
/* At 320 the "Can't find your school? Add it" row still took two lines (and
   pushed the open list's bottom edge past a 640px screen): a narrow phone
   keeps it on one line, a touch smaller, with the row's side padding eased. */
@media (max-width: 360px) {
  .sp-add { padding-left: 8px; padding-right: 8px; }
  .sp-add .sp-name { font-size: 13px; white-space: nowrap; letter-spacing: -0.01em; }
}