/* Brief 164: switch school from the top (public/school-switch.js). On the twin the school's name is a label
   (landing.css); with more than one school on the account it becomes the switch, with its little arrow back. */
body.on-twin.has-school-switch .topbar-school { pointer-events: auto; cursor: pointer; display: inline-flex; }
body.on-twin.has-school-switch .topbar-school::after { content: '\25BE'; font-size: 10px; opacity: 0.55; }
body.on-twin.has-school-switch .topbar-school[aria-expanded="true"] { background: var(--badge-bg); color: var(--text-primary); }

.school-switch {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 210;
  width: 360px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  max-height: min(560px, calc(100vh - 96px));
  text-align: left;
  background: var(--on-accent); /* solid: over the twin's right card, a see-through list read as two pages at once */
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--popover-shadow);
  overflow: hidden;
  animation: school-switch-in 180ms ease-out;
}
.school-switch[hidden] { display: none; }
@keyframes school-switch-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .school-switch { animation: none; } }

/* The head stays put; only the list scrolls (frozen headers, Linzie 3 Nov). */
.school-switch-head { flex: none; padding: 14px 14px 10px; border-bottom: 1px solid var(--divider); }
.school-switch-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 15px; color: var(--text-primary); margin-bottom: 10px;
}
.school-switch-count {
  font-family: var(--font-detail); font-size: var(--size-micro); color: var(--text-secondary);
  background: var(--badge-bg); border-radius: 999px; padding: 1px 8px;
}
.school-switch-search {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: 14px; color: var(--text-primary);
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--on-accent);
}
.school-switch-search:focus { outline: 2px solid var(--green); outline-offset: -1px; }

.school-switch-list { flex: 1 1 auto; overflow-y: auto; scrollbar-gutter: stable; list-style: none; margin: 0; padding: 6px; }
.school-switch-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-body); color: var(--text-primary);
  transition: background-color 120ms ease;
}
.school-switch-row:hover, .school-switch-row:focus-visible { background: var(--card-hover); outline: none; }
.school-switch-row:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }
.school-switch-icon {
  flex: none; width: 28px; height: 28px; border-radius: 7px; background: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.school-switch-icon img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.school-switch-words { min-width: 0; display: flex; flex-direction: column; }
.school-switch-name { font-size: 14px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.school-switch-meta { font-family: var(--font-detail); font-size: 12px; line-height: 16px; color: var(--text-secondary); }
/* The school on screen: orange is "selected", always with white words. */
.school-switch-row.is-current { background: var(--orange); color: var(--on-accent); cursor: default; }
.school-switch-row.is-current .school-switch-meta { color: var(--on-accent); }
.school-switch-row.is-current .school-switch-icon { background: rgba(255, 255, 255, 0.22); }
.school-switch-row.is-going { opacity: 0.6; }
.school-switch-empty { padding: 14px 10px; font-size: 13px; color: var(--text-secondary); }
/* Brief 245: the projects for the school on screen, above the schools. */
.school-switch-group {
  padding: 8px 10px 4px; font-family: var(--font-detail); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-secondary);
}
.school-switch-project { padding-left: 12px; }
/* Brief 245: whose project is open, beside the school's name, when it is not the school's own. */
.topbar-project {
  display: inline-flex; align-items: center; height: 22px; margin-left: 6px; padding: 0 8px; border-radius: 999px;
  background: var(--card-hover, #F1EEE8); color: var(--text-primary); font-family: var(--font-body); font-size: 12px;
  font-weight: 600; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.topbar-project[hidden] { display: none; }
@media (max-width: 640px) { .topbar-project { display: none; } }

.school-switch-foot {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--divider);
  font-family: var(--font-body); font-size: 14px; color: var(--green); text-decoration: none;
}
.school-switch-foot:hover { background: var(--card-hover); }
.school-switch-foot img { width: 16px; height: 16px; }