/* A · information technology composition; surfaces and controls come from ui/. */
.school-view { overflow-wrap: anywhere; }
.school-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-5); }
.school-metrics .card { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.school-metrics .number { font-size: 32px; }
.school-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); align-items: start; gap: var(--space-5); }
.class-list { display: grid; gap: var(--space-2); max-height: 680px; overflow: auto; padding: var(--space-2); margin: calc(-1 * var(--space-2)); }
.class-list .button { justify-content: space-between; min-height: 55px; text-align: left; }
.class-list .button span { min-width: 0; }
.class-list small { flex-shrink: 0; }
.school-view .tabs { flex-wrap: wrap; }
.school-content { padding-top: var(--space-6); }
@media (max-width: 1100px) {
 .school-layout { grid-template-columns: 200px minmax(0, 1fr); }
 .school-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
 .school-metrics { gap: var(--space-3); }
 .school-metrics .card { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
 .school-metrics .number { font-size: 28px; }
 .school-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
 .school-layout > aside { padding: var(--space-4); }
 .class-list { display: flex; max-height: none; }
 .class-list .button { flex-shrink: 0; max-width: 100%; min-height: 44px; }
}