/* ============================================================
   School picker (home stage + films page): one block, two panes.
   Left: the selected school's details. Right: a compact list that drives it.
   On the home page the block is the top band of the stage box (same columns as the
   player + queue below it); on the films page it stands alone as a light box.
   Tokens from clone-fixes.css.
   ============================================================ */
.schools{
  display:grid; grid-template-columns:minmax(0,1fr) 360px; align-items:stretch;
  background:var(--s-card); color:var(--s-ink); border:1px solid var(--s-line); border-radius:2px; overflow:hidden;
  box-shadow:none; margin:0 0 2.25rem;
}
.rot-stage > .schools{ grid-column:1 / -1; margin:0; border:0; border-radius:0; box-shadow:none; border-bottom:1px solid rgba(17, 26, 34,.12); }

.schools-detail{ padding:1.6rem 1.9rem 1.7rem; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.schools-logo{ height:48px; display:flex; align-items:center; margin:0 0 .8rem; color:var(--s-accent); }
.schools-logo img{ max-height:44px; max-width:180px; width:auto; height:auto; object-fit:contain; display:block; }
.schools-logo-all svg{ width:40px; height:40px; }
.schools-name{ font-size:clamp(1.35rem,2.2vw,1.75rem); line-height:1.15; margin:0 0 .25rem; color:var(--s-ink); }
.schools-meta{ margin:0; font-size:.88rem; color:var(--s-muted); }
.schools-tag{ margin:.7rem 0 0; font-size:1.02rem; line-height:1.55; color:var(--ink); max-width:58ch; }

.schools-list{ list-style:none; margin:0; padding:.6rem; border-left:1px solid var(--s-line); background:var(--s-bg); display:flex; flex-direction:column; gap:.15rem; justify-content:center; }
.schools-list button{
  appearance:none; width:100%; display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.7rem .95rem; border:0; border-radius:2px; background:transparent; color:var(--s-ink); font-family:inherit;
  font-size:.95rem; font-weight:500; text-align:left; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.schools-list-n{ color:var(--s-muted); font-weight:500; font-size:.82rem; flex-shrink:0; font-variant-numeric:tabular-nums; }
.schools-list button:hover{ background:rgba(17, 26, 34,.06); }
.schools-list button[aria-pressed="true"]{ background:var(--s-card); color:var(--s-accent2); box-shadow:inset 3px 0 0 var(--s-accent), 0 8px 18px -14px rgba(17, 26, 34,.5); }
.schools-list button[aria-pressed="true"] .schools-list-n{ color:var(--s-accent2); }
.schools-list button:focus-visible{ outline:3px solid var(--s-accent); outline-offset:-3px; }

@media(max-width:960px){
  .schools{ grid-template-columns:1fr; }
  .schools-list{ border-left:0; border-top:1px solid var(--s-line); flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:.35rem; padding:.75rem .9rem; }
  .schools-list li{ flex:0 1 auto; }
  .schools-list button{ width:auto; padding:.5rem .85rem; border-radius:2px; border:1px solid var(--s-line); font-size:.88rem; }
  .schools-list button[aria-pressed="true"]{ box-shadow:none; border-color:var(--s-accent); }
  .schools-detail{ padding:1.25rem 1.2rem 1.3rem; }
}
@media(prefers-reduced-motion:reduce){ .schools-list button{ transition:none; } }

/* ---------- brand, 2026-09-16 ---------- */
.schools{ border-radius:var(--r); background:var(--paper); border-color:var(--line); }
.rot-stage > .schools{ background:var(--paper-2); color:var(--ink); border-bottom:0; }
.schools-name{ font-family:var(--display); font-weight:500; }
.schools-meta{ font-family:var(--display); }
.schools-tag{ font-family:var(--text); color:var(--ink); }
.schools-logo img{ filter:grayscale(1) contrast(1.1); mix-blend-mode:multiply; }
.schools-list{ background:transparent; }
.schools-list button{ font-family:var(--display); border-radius:var(--r-sm); }
.schools-list button:hover{ background:rgba(17, 26, 34,.05); }
.schools-list button[aria-pressed="true"]{ background:var(--paper); color:var(--rust); box-shadow:none; }
@media(max-width:960px){
  .schools-list button{ border-radius:var(--r-pill); }
  .schools-list button[aria-pressed="true"]{ box-shadow:none; border-color:var(--rust); }
}
/* Phones: with every school selected, the details pane repeated the chips below it behind a
   generic film icon. The icon goes, the pane tightens; a school's own logo still shows. */
@media(max-width:640px){
  .schools-logo-all{ display:none; }
  .schools-detail{ padding:1rem 1.1rem 1.05rem; }
  .schools-tag{ margin-top:.45rem; font-size:.96rem; }
}
/* phone audit 2026-10-06: the school chips were 38px tall, under the 44px touch size */
@media(max-width:960px){ .schools-list button{ min-height:44px; } }