/* School bus smarts (js/school.js): the card, the late line and the struck-through timetable time. Spacing 4/8/12/16/20,
   radius 20 for the card; only tokens from app.css, so every theme colour and dark mode follow. One main button per screen:
   the card's Walk is an outline pill, never the primary. */
.sch-late { color: var(--warn); }
.sch-why { color: var(--muted); font-weight: 500; }
.sch-may { color: var(--warn); font-weight: 700; }
.sch-ut { color: var(--muted); font-weight: 600; }
.nr-t .sch-was { display: block; margin: 2px 0 0; font-size: var(--fs-cap); font-weight: 500; color: var(--muted); letter-spacing: 0; text-align: right; }
.nr-t .sch-was s { text-decoration-thickness: 1.5px; }
.nr.is-live .nr-t:has(.sch-was) { color: var(--warn); }

.sch-card { display: flex; gap: 12px; align-items: flex-start; padding: 20px; margin: 0 0 12px; border-radius: 20px; background: var(--surface-2); color: var(--text); }
.sch-card.may { background: var(--warn-soft); }
.sch-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--surface); }
.sch-card.may .sch-ic { color: var(--warn); }
.sch-ic svg { width: 18px; height: 18px; }
.sch-b { min-width: 0; flex: 1; }
.sch-b b { display: block; font-size: var(--fs-row); font-weight: 600; line-height: 1.3; }
.sch-b p { margin: 8px 0 0; font-size: var(--fs-sub); line-height: 1.5; }
.sch-b .sch-alt { font-size: var(--fs-body); }
.sch-walk { margin-top: 16px; min-height: 48px; border-radius: 999px; }
.sch-walk svg { width: 18px; height: 18px; margin-right: 8px; }
@media (max-width: 360px) { .sch-card { padding: 16px; } }
@media (prefers-reduced-motion: no-preference) { .sch-card { animation: appear .3s var(--ease) both; } }
.sch-b .sch-alt b { display: inline; font-size: inherit; font-weight: 700; }
/* the reason may be a few words long: the line under the name wraps instead of being cut off */
.nr .grow small:has(.sch-late) { white-space: normal; overflow: visible; text-overflow: clip; display: block; }