:root {
  --font: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --navy-950: #0b192b;
  --navy-900: #10243a;
  --navy-800: #19395b;
  --navy-700: #265588;
  --ink: #18283d;
  --slate: #596a7e;
  --muted: #748397;
  --line: #e2e7ee;
  --line-strong: #cdd6e1;
  --canvas: #f4f6f9;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  /* Existing components use the teal semantic slot for the primary brand
     accent. Map it to CVCA royal blue while preserving status colors. */
  --teal: #285da1;
  --teal-dark: #214f89;
  --teal-soft: #edf3fb;
  --gold: #c6a45c;
  --gold-soft: #fbf4e5;
  /* School branding. The switcher in the bottom right sets data-school on
     <html> and the blocks near the bottom of this file repaint these; every
     rule that paints a school color reads a token here, never a literal.
     Defaults are CVCA, so the page looks right before any script runs. */
  --brand-chrome: var(--navy-900);
  --brand-chrome-2: var(--navy-800);
  --brand-button: var(--navy-800);
  --brand-button-hover: var(--navy-900);
  --brand-accent: #e8c77d;
  --brand-accent-rgb: 232, 199, 125;
  --brand-highlight: #dec691;
  --brand-highlight-rgb: 222, 198, 145;
  --brand-art-from: #0966bd;
  --brand-art-mid: #00549e;
  --brand-art-to: #003f7e;
  --brand-art-glow: 74, 158, 240;
  --brand-art-shade: 0, 30, 76;
  --brand-art-meta: #bcdcff;
  --brand-wash-1: #e3edf9;
  --brand-wash-2: #f2f6fb;
  --brand-deep-1: #03152f;
  --brand-deep-2: #062a59;
  --brand-deep-3: #0752a8;
  --brand-watermark: url("/assets/cvca-lion.png");
  --brand-watermark-ratio: 1173 / 1417;
  --brand-watermark-opacity: .07;
  --red: #c24f4a;
  --red-soft: #fcebea;
  --blue: #2d72c7;
  --blue-soft: #e8f2ff;
  --purple: #725da7;
  --purple-soft: #f0ecf8;
  --green: #328165;
  --green-soft: #e9f4ef;
  --shadow-sm: 0 2px 3px rgba(16,36,58,.015), 0 5px 18px rgba(16,36,58,.025);
  --shadow-lg: 0 22px 60px rgba(10, 31, 54, .18);
  --radius: 16px;
  --sidebar: 258px;
  /* Elevation ramp. The two ad-hoc shadows above are kept so existing rules
     keep working; new surfaces should pick a step from this scale so depth
     reads consistently across the app. */
  --elev-1: 0 1px 2px rgba(16,36,58,.04), 0 1px 3px rgba(16,36,58,.03);
  --elev-2: 0 2px 4px rgba(16,36,58,.04), 0 4px 12px rgba(16,36,58,.05);
  --elev-3: 0 4px 8px rgba(16,36,58,.05), 0 10px 26px rgba(16,36,58,.07);
  --elev-4: 0 10px 20px rgba(16,36,58,.07), 0 22px 48px rgba(16,36,58,.10);
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 16px;
  /* One motion vocabulary, disabled wholesale under reduced-motion below. */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur-1: .12s;
  --dur-2: .2s;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--teal);
}

/* A single focus treatment everywhere, so keyboard users get an obvious,
   consistent ring instead of the browser default on some controls and
   nothing at all on others. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }
html { color-scheme: light; background: var(--canvas); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.supporting { color: var(--slate); margin: 7px 0 24px; }
.eyebrow { margin: 0 0 8px; color: var(--teal); font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow.light { color: var(--brand-highlight); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--font); line-height: 1.18; }
h1 { font-size: 32px; font-weight: 700; letter-spacing: -.04em; }
h2 { font-size: 23px; font-weight: 700; letter-spacing: -.03em; }
h3 { font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
p { margin-top: 0; }

/* Login */
.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.08fr) minmax(420px, .92fr); background: var(--surface); }
.login-art { position: relative; min-height: 100vh; overflow: hidden; color: #fff; background: radial-gradient(ellipse 70% 60% at 12% 16%, rgba(var(--brand-art-glow), .42), transparent 70%), radial-gradient(ellipse 65% 55% at 96% 104%, rgba(var(--brand-art-shade), .55), transparent 70%), linear-gradient(155deg, var(--brand-art-from) 0%, var(--brand-art-mid) 48%, var(--brand-art-to) 100%); box-shadow: inset -1px 0 0 rgba(var(--brand-accent-rgb), .3); }
.login-art::after { content: ""; position: absolute; z-index: 0; width: min(72%, 76vh); aspect-ratio: var(--brand-watermark-ratio); right: 3%; bottom: 9%; background: var(--brand-watermark) center / contain no-repeat; opacity: var(--brand-watermark-opacity); border: 0; border-radius: 0; box-shadow: none; pointer-events: none; mask-image: linear-gradient(to right, transparent, #000 75%); }
.art-content { position: absolute; z-index: 1; left: clamp(40px, 5.4vw, 92px); right: 40px; top: 50%; max-width: 660px; transform: translateY(-50%); }
.cvca-logo { display: block; width: auto; object-fit: contain; }
.login-logo { height: 118px; margin-bottom: 42px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.2)); }
.art-eyebrow { margin: 0 0 16px; color: var(--brand-accent); font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.art-content h1 { margin: 0; color: #fff; font-size: clamp(40px, 4vw, 76px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; white-space: nowrap; text-shadow: 0 2px 30px rgba(0, 24, 64, .25); }
.art-rule { display: block; width: 72px; height: 3px; margin: 28px 0 36px; border-radius: 3px; background: linear-gradient(90deg, var(--brand-accent), rgba(var(--brand-accent-rgb), .12)); }
.art-today { display: inline-flex; align-items: center; gap: 20px; padding: 16px 26px 16px 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; background: rgba(255, 255, 255, .07); box-shadow: 0 24px 50px -32px rgba(0, 16, 48, .7); backdrop-filter: blur(8px); }
.art-today-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--brand-accent); border-radius: 12px; background: rgba(var(--brand-accent-rgb), .14); }
.art-time { color: #fff; font-size: clamp(28px, 2.3vw, 42px); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.art-today-divider { align-self: stretch; width: 1px; background: rgba(255, 255, 255, .18); }
.art-date strong, .art-date span { display: block; white-space: nowrap; }
.art-date strong { color: #fff; font-size: 15px; font-weight: 650; }
.art-date span { margin-top: 5px; color: var(--brand-art-meta); font-size: 11px; letter-spacing: .04em; }
.art-stat { display: flex; align-items: center; gap: 9px; width: fit-content; margin-top: 22px; padding: 7px 14px 7px 11px; color: var(--brand-accent); border: 1px solid rgba(var(--brand-accent-rgb), .35); border-radius: 999px; background: rgba(var(--brand-accent-rgb), .12); font-size: 11px; font-weight: 650; letter-spacing: .02em; }
.art-stat[hidden] { display: none; }
.live-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-highlight); box-shadow: 0 0 0 4px rgba(var(--brand-highlight-rgb), .1); }
.login-main { position: relative; display: grid; place-items: center; padding: 64px 48px; background: radial-gradient(ellipse 80% 60% at 78% 8%, var(--brand-wash-1), transparent 70%), var(--brand-wash-2); }
.login-card { width: min(100%, 440px); padding: 38px 38px 30px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px rgba(16, 36, 58, .05), 0 30px 70px -34px rgba(16, 36, 58, .35); }
.login-card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.login-card-crest { flex: 0 0 auto; width: 50px; height: auto; }
@media (min-width: 1800px) { .login-card { width: 480px; } .art-eyebrow { font-size: 13px; } }
.login-card h2 { font-size: 30px; letter-spacing: -.04em; }
.login-card label, .field { display: grid; gap: 8px; margin-bottom: 20px; color: var(--slate); font-size: 12px; font-weight: 650; }
input, select, textarea { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ink); outline: 0; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); transition: border .15s, box-shadow .15s; }
textarea { min-height: 88px; resize: vertical; }
/* A plain checkbox/radio shouldn't inherit the text-input sizing above -
   every boolean toggle elsewhere in the app uses the hidden-checkbox-plus-
   .switch pattern instead (its own input rule further below still wins
   there), which is why this never surfaced before now. */
input[type="checkbox"], input[type="radio"] { width: 16px; min-height: 0; height: 16px; padding: 0; accent-color: var(--teal); }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(7, 89, 189, .14); }
.form-error { min-height: 20px; margin: -3px 0 8px; color: var(--red); font-size: 12px; font-weight: 600; }
.demo-credentials { display: grid; gap: 13px; margin-top: 24px; padding: 16px; color: var(--slate); border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--surface-soft); font-size: 11px; }
.demo-head { display: flex; align-items: center; gap: 12px; }
.demo-head strong, .demo-head span { display: block; }
.demo-head strong { color: var(--ink); font-size: 12px; }
.demo-head span { margin-top: 2px; color: var(--muted); }
.demo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-account { display: grid; gap: 3px; min-width: 0; padding: 11px 13px; color: var(--ink); text-align: left; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.demo-account strong { font-size: 12px; }
.demo-account span { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.demo-account:hover, .demo-account:focus-visible { border-color: var(--teal); box-shadow: 0 6px 18px -10px rgba(40, 93, 161, .5); transform: translateY(-1px); }
.icon-chip { display: grid; place-items: center; flex: 0 0 29px; height: 29px; color: var(--teal-dark); border-radius: 8px; background: var(--teal-soft); font-weight: 800; }

/* Buttons */
.button, .icon-button, .profile-button, .nav-link { border: 0; cursor: pointer; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 15px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); font-size: 12px; font-weight: 650; text-decoration: none; transition: transform .12s, border .12s, background .12s, box-shadow .12s; }
.button:hover { border-color: #b8c3cf; background: #f9fbfc; }
.button:active { transform: translateY(1px); }
.button.primary { color: #fff; border-color: var(--brand-button); background: var(--brand-button); box-shadow: 0 2px 3px rgba(16,36,58,.08); }
.button.primary:hover { border-color: var(--brand-button-hover); background: var(--brand-button-hover); box-shadow: 0 3px 8px rgba(16,36,58,.14); }
.button.danger { color: var(--red); border-color: #ebc7c5; background: var(--red-soft); }
.button.soft { color: var(--ink); border-color: var(--line); background: var(--surface); }
.button.ghost { color: var(--slate); border-color: transparent; background: transparent; }
.button.wide { width: 100%; }
.button.large { min-height: 49px; font-size: 14px; }
.button.compact { min-height: 34px; padding: 7px 11px; }
.button:disabled { cursor: not-allowed; opacity: .48; }
.icon-button { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 37px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 18px; }
.icon-button:hover { background: var(--surface-soft); }

/* Shell */
.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; display: flex; flex-direction: column; width: var(--sidebar); color: #e6eef8; background: var(--brand-chrome); }
.brand-block { display: flex; align-items: center; gap: 11px; min-height: 88px; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand-logo { width: 40px; height: 46px; flex: 0 0 40px; }
.brand-block strong { display: block; color: #fff; font-size: 16px; font-weight: 750; letter-spacing: -.03em; white-space: nowrap; }
.brand-block span { display: block; margin-top: 3px; color: #94a6bd; font-size: 9px; }
.primary-nav { flex: 1; padding: 6px 13px 20px; overflow: auto; scrollbar-width: thin; scrollbar-color: #3c5068 transparent; }
.nav-section { margin: 18px 12px 7px; color: #83a4c9; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav-section:first-child { margin-top: 2px; }
.nav-row { display: flex; align-items: center; gap: 2px; }
.nav-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 41px; margin: 2px 0; padding: 0 12px; color: #b7c5d7; border-radius: 8px; background: transparent; text-align: left; font-size: 12px; font-weight: 500; transition: background .15s, color .15s; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav-link.active { color: var(--brand-accent); background: rgba(255,255,255,.085); box-shadow: inset 3px 0 0 var(--gold); font-weight: 650; }
.nav-icon { display: grid; place-items: center; flex: 0 0 19px; width: 19px; color: #8ba0b9; }
.nav-link.active .nav-icon { color: var(--brand-highlight); }
.nav-pin { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 28px; padding: 0; border: 0; border-radius: 6px; color: #8396ae; background: transparent; opacity: 0; cursor: pointer; transition: opacity .12s, color .12s, background .12s; }
.nav-row:hover .nav-pin, .nav-pin.pinned { opacity: 1; }
.nav-pin:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-pin.pinned { color: #f2c774; }
.nav-group-toggle { display: flex; align-items: center; gap: 7px; width: 100%; margin: 21px 0 7px; padding: 0 12px; color: #7f95b0; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nav-group-toggle:first-child { margin-top: 2px; }
.nav-group-toggle:hover { color: #b7cde6; }
.nav-group-chevron { display: inline-flex; transition: transform .15s; }
.nav-group-toggle.collapsed .nav-group-chevron { transform: rotate(-90deg); }
@media (hover: none) { .nav-pin { opacity: 1; } }
.sidebar-foot { padding: 12px 15px; border-top: 1px solid rgba(255,255,255,.08); }
.privacy-note { display: flex; align-items: center; gap: 10px; padding: 9px 8px; color: #8399b3; font-size: 9px; }
.privacy-note strong, .privacy-note span { display: block; }
.privacy-note strong { color: #c6d4de; font-size: 10px; }
.privacy-note .shield { display: grid; place-items: center; flex: 0 0 28px; height: 30px; color: #d8bd83; border-radius: 8px; background: rgba(216,189,131,.08); }
.nav-link.logout { color: #9fb0bf; }
.workspace { grid-column: 2; min-width: 0; }
.topbar { position: sticky; z-index: 30; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 88px; padding: 14px 32px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(16px); }
.menu-button { display: none; }
.school-clock { display: flex; align-items: center; gap: 14px; }
.clock-time { min-width: 78px; color: var(--navy-900); font-size: 23px; font-weight: 700; letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.clock-divider { width: 1px; height: 30px; background: var(--line); }
.school-clock strong, .school-clock span { display: block; }
.school-clock strong { font-size: 12px; }
.school-clock div span { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.connection-pill { display: flex; align-items: center; gap: 6px; padding: 5px 8px; color: var(--green); border-radius: 99px; background: var(--green-soft); font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.connection-pill span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.connection-pill.offline { color: var(--red); background: var(--red-soft); }
/* Live capture survives navigation, so this is the only thing telling a
   teacher the reader is still recording. It is a button: click to stop. */
.capture-pill { display: flex; align-items: center; gap: 8px; padding: 5px 9px; color: var(--teal-dark); border: 1px solid var(--teal); border-radius: 99px; background: var(--teal-soft); }
.capture-pill:hover { filter: brightness(.96); }
.capture-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: capture-pulse 1.6s ease-in-out infinite; }
.capture-copy { text-align: left; }
.capture-copy strong, .capture-copy small { display: block; }
.capture-copy strong { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.capture-copy small { font-size: 9.5px; font-variant-numeric: tabular-nums; opacity: .85; }
.capture-stop { font-size: 11px; opacity: .7; }
.capture-pill.expiring { color: var(--red); border-color: var(--red); background: var(--red-soft); }
@keyframes capture-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.notification-button { position: relative; }
.notification-button b { position: absolute; top: -4px; right: -5px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; color: #fff; border: 2px solid #fff; border-radius: 99px; background: var(--red); font-size: 9px; }
.profile-button { display: flex; align-items: center; gap: 10px; margin-left: 3px; padding: 4px 0 4px 14px; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
.profile-button:hover { background: var(--surface-soft); }
.profile-copy { min-width: 78px; text-align: left; }
.profile-copy strong, .profile-copy small { display: block; }
.profile-copy strong { font-size: 11.5px; }
.profile-copy small { color: var(--muted); font-size: 9.5px; text-transform: capitalize; }
.avatar { display: grid; place-items: center; width: 42px; height: 42px; color: var(--navy-800); border-radius: 50%; background: #e9eff4; font-family: var(--font); font-size: 12px; font-weight: 750; }
.avatar.small { width: 35px; height: 35px; flex: 0 0 35px; border-radius: 50%; font-size: 10px; }
.avatar.teal { color: var(--teal-dark); background: var(--teal-soft); }
.avatar.gold { color: #95671f; background: var(--gold-soft); }
.avatar.purple { color: var(--purple); background: var(--purple-soft); }
/* --corner-stack is the school switcher's height, set when it mounts; without
   it the last row of a page could never scroll clear of the pill. */
.main-content { width: min(100%, 1560px); margin: 0 auto; padding: 31px 32px calc(48px + var(--corner-stack, 0px)); }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: 75px; margin-bottom: 27px; }
.page-subtitle { max-width: 680px; margin: 8px 0 0; color: var(--slate); font-size: 12px; line-height: 1.6; }
.page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.page-content { outline: 0; }
/* Focus moves to the page after navigation so screen readers start there; it
   is not a control, so no ring around the whole page. */
.page-content:focus-visible { box-shadow: none; }

/* Brand details and navigation */
.ui-icon { display: block; flex: 0 0 auto; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.nav-pin:focus-visible, .nav-row:focus-within .nav-pin { opacity: 1; }
.nav-pin.pinned .ui-icon { fill: currentColor; }
.brand-block strong b { font-size: 12px; font-weight: 500; letter-spacing: -.015em; }
.nav-search { position: relative; display: flex; align-items: center; margin: 20px 20px 15px; }
.nav-search > span { position: absolute; left: 10px; color: #7e94af; pointer-events: none; }
.nav-search .ui-icon { width: 16px; height: 16px; }
.nav-search input { min-height: 35px; padding: 8px 10px 8px 34px; border: 1px solid #35465c; border-radius: 7px; background: rgba(255,255,255,.025); color: #eaf0f8; font-size: 10.5px; }
.nav-search input::placeholder { color: #90a3bc; }
.nav-search input:focus { border-color: #b79b65; box-shadow: 0 0 0 3px rgba(198,164,92,.1); }
.nav-empty { padding: 20px 12px; color: #a7b9ce; font-size: 12px; }
.profile-button > [data-icon] .ui-icon { width: 14px; height: 14px; color: var(--muted); }
#profile-avatar { background: var(--gold-soft); color: #896a30; border: 1px solid rgba(198,164,92,.25); }
.card > .card-header:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.card > .toolbar:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.table-wrap { border-radius: 0 0 var(--radius) var(--radius); }
.search-box::after { content: ""; position: absolute; left: 24px; top: 23px; width: 5px; height: 1.5px; transform: rotate(45deg); transform-origin: left; background: var(--muted); pointer-events: none; }

/* Welcome screen */
.login-school { position: absolute; top: 40px; left: clamp(40px, 5.4vw, 92px); z-index: 1; display: flex; align-items: center; gap: 14px; }
.login-school img { width: 48px; height: 57px; }
.login-school strong, .login-school span { display: block; }
.login-school strong { font-size: 21px; letter-spacing: .08em; font-weight: 700; }
.login-school span { margin-top: 3px; color: #d4eaff; font-size: 10px; }
.login-art-footer { position: absolute; z-index: 1; bottom: 31px; left: clamp(40px, 5.4vw, 92px); right: 40px; display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); color: var(--brand-art-meta); font-size: 10px; }
.login-art-footer > span:first-child { letter-spacing: .06em; text-transform: uppercase; }
.login-art-footer span:first-child { font-size: 9px; letter-spacing: .16em; }
.login-theme-toggle { position: absolute; top: 30px; right: 32px; }
.login-card .supporting { margin: 4px 0 0; font-size: 13px; }
.login-card .form-error { min-height: 18px; margin: -10px 0 8px; }
.login-card input { min-height: 48px; background: var(--surface-soft); }
.input-icon { position: relative; display: block; }
.input-icon > [data-icon] { position: absolute; top: 50%; left: 15px; display: grid; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.input-icon .ui-icon { width: 18px; height: 18px; }
.login-card .input-icon input { padding-left: 44px; }
.login-card .input-icon #login-password { padding-right: 72px; }
.input-action { position: absolute; top: 50%; right: 7px; padding: 7px 11px; color: var(--teal); border: 0; border-radius: 8px; background: transparent; font-size: 11px; font-weight: 700; transform: translateY(-50%); cursor: pointer; }
.input-action:hover, .input-action:focus-visible { background: var(--teal-soft); }
.login-card .button.primary { justify-content: space-between; padding-left: 20px; padding-right: 18px; }
.login-card .button.primary { background: var(--brand-art-from); border-color: var(--brand-art-from); }
.login-card .button.primary:hover { background: var(--brand-art-mid); border-color: var(--brand-art-mid); }
.demo-credentials .icon-chip { background: var(--gold-soft); color: #957239; }
.demo-credentials .ui-icon { width: 17px; height: 17px; }
.login-help { display: flex; align-items: flex-start; gap: 7px; margin: 24px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.login-help .ui-icon { margin-top: 2px; width: 13px; height: 13px; }

/* Shared cards/data */
.stack { display: grid; gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.layout-aside { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .72fr); gap: 18px; align-items: start; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; min-height: 73px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.card-header p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.card-body { padding: 22px; }
.card-body.flush { padding: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 14px; }
.metric-card { position: relative; min-height: 120px; padding: 19px 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s, border-color .15s; }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--slate); font-size: 11px; font-weight: 600; }
.metric-icon { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 9px; background: var(--surface-soft); color: var(--slate); }
.metric-value { margin-top: 4px; color: var(--navy-900); font-size: 31px; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; line-height: 1.25; }
.metric-sub { margin-top: 5px; color: var(--muted); font-size: 10px; }
.metric-card.teal { --metric-color: var(--teal); --metric-bg: var(--teal-soft); }
.metric-card.gold { --metric-color: var(--gold); --metric-bg: var(--gold-soft); }
.metric-card.red { --metric-color: var(--red); --metric-bg: var(--red-soft); }
.metric-card.blue { --metric-color: var(--blue); --metric-bg: var(--blue-soft); }
.metric-card.purple { --metric-color: var(--purple); --metric-bg: var(--purple-soft); }
.metric-card.green { --metric-color: var(--green); --metric-bg: var(--green-soft); }
.metric-card .metric-icon { color: var(--metric-color, var(--slate)); background: var(--metric-bg, var(--surface-soft)); }
.metric-card[role="button"]:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 7px 22px rgba(16,36,58,.07); }
.metric-open { display: none; }
.live-metric-grid { grid-template-columns: minmax(205px, 1.12fr) repeat(3, minmax(0, 1fr)); }
.live-metric-grid > .metric-card:first-child { grid-row: span 2; display: flex; flex-direction: column; min-height: 260px; padding: 24px; color: #fff; border-color: var(--brand-chrome-2); background: linear-gradient(145deg, var(--brand-chrome-2), var(--brand-chrome)); }
.live-metric-grid > .metric-card:first-child::before { content: ""; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(var(--brand-highlight-rgb), .12); border-radius: 50%; bottom: -60px; right: -100px; pointer-events: none; box-shadow: 0 0 0 36px rgba(var(--brand-highlight-rgb), .03); }
.live-metric-grid > .metric-card:first-child .metric-top { color: #cbd8e8; font-size: 12px; }
.live-metric-grid > .metric-card:first-child .metric-icon { background: rgba(var(--brand-highlight-rgb), .1); color: var(--brand-highlight); }
.live-metric-grid > .metric-card:first-child .metric-value { margin-top: 22px; color: #fff; font-size: 56px; font-weight: 650; line-height: 1.1; }
.live-metric-grid > .metric-card:first-child .metric-sub { color: #a4b9d2; font-size: 11px; }
.live-metric-grid > .metric-card:first-child .metric-open { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 24px; color: var(--brand-highlight); font-size: 10px; font-weight: 600; }
.class-metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 4px 9px; border-radius: 6px; font-size: 9px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill.present, .status-pill.active, .status-pill.returned, .status-pill.online { color: var(--green); background: var(--green-soft); }
.status-pill.tardy, .status-pill.unaccounted, .status-pill.warning, .status-pill.transition { color: #a66c13; background: var(--gold-soft); }
.status-pill.absent, .status-pill.overdue, .status-pill.high, .status-pill.offline { color: var(--red); background: var(--red-soft); }
.status-pill.bathroom, .status-pill.hall, .status-pill.purple { color: var(--purple); background: var(--purple-soft); }
.status-pill.nurse, .status-pill.office, .status-pill.info, .status-pill.classroom { color: var(--blue); background: var(--blue-soft); }
.status-pill.unknown, .status-pill.disabled { color: var(--slate); background: #edf1f4; }
.status-pill.demo { color: #97601a; background: var(--gold-soft); }
.status-pill.color-teal { color: var(--teal-dark); background: var(--teal-soft); }
.status-pill.color-purple { color: var(--purple); background: var(--purple-soft); }
.status-pill.color-blue { color: var(--blue); background: var(--blue-soft); }
.status-pill.color-gold { color: #a66c13; background: var(--gold-soft); }
.status-pill.color-red { color: var(--red); background: var(--red-soft); }
.status-pill.color-green { color: var(--green); background: var(--green-soft); }
.status-pill.color-slate { color: var(--slate); background: #edf1f4; }
.table-wrap { width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; }

/* Charts (inline SVG, see stackedBarChart/lineChart/hBarChart in components.js) */
.chart-scroll { width: 100%; overflow-x: auto; }
.chart-svg { display: block; min-width: 100%; height: auto; }
.chart-hbar { max-width: 640px; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-axis-label { fill: var(--muted); font-size: 9px; font-family: var(--font); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--slate); font-size: 10.5px; font-weight: 600; }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }
.chart-empty { padding: 40px 0; color: var(--muted); font-size: 11px; text-align: center; }
.chart-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface-soft); }
.chart-tabs button { padding: 7px 16px; color: var(--slate); border: 0; border-radius: 7px; background: transparent; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.chart-tabs button.active { color: var(--teal-dark); background: var(--surface); box-shadow: var(--shadow-sm); }
.data-table th { position: sticky; top: 0; z-index: 1; height: 38px; padding: 0 20px; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--surface-soft); font-size: 9px; font-weight: 700; letter-spacing: .075em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 10px 20px; border-bottom: 1px solid var(--line); font-size: 12px; vertical-align: middle; }
.data-table td:has(.student-cell), .data-table td:has(.avatar) { padding-top: 8px; padding-bottom: 8px; }
.data-table tbody tr { transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr[data-action] { cursor: pointer; }
.data-table tbody tr[data-action]:hover { background: var(--teal-soft); box-shadow: inset 3px 0 0 var(--teal); }
.data-table tbody tr[data-action]:active { background: #e4eefb; }
/* Counts and IDs line up when they share a tabular figure width. */
.data-table td b, .data-table td .metric-value, .data-table .code-value { font-variant-numeric: tabular-nums; }
/* The change summary is up to 120 characters of JSON with no spaces to break
   at, so on auto layout it claimed the table's width and squeezed Time and
   Action until "auth.login" wrapped as "aut / h.log / in". */
.audit-table td:first-child { white-space: nowrap; }
.audit-table .code-value { white-space: nowrap; word-break: normal; }
.audit-table .audit-summary { max-width: 340px; overflow-wrap: anywhere; font-family: ui-monospace, monospace; font-size: 11px; }
.student-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.student-cell strong, .student-cell small { display: block; }
.student-cell strong { font-size: 12px; }
.student-cell small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.search-box { position: relative; min-width: min(280px, 100%); }
.search-box::before { content: ""; position: absolute; z-index: 1; left: 13px; top: 11px; width: 12px; height: 12px; border: 1.5px solid var(--muted); border-radius: 50%; pointer-events: none; }
.search-box input { min-height: 36px; padding: 8px 10px 8px 32px; }
.toolbar select { width: auto; min-width: 130px; min-height: 36px; padding: 7px 30px 7px 10px; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 55px; padding: 10px 15px; border-top: 1px solid var(--line); color: var(--slate); font-size: 10.5px; }
.empty-state { display: grid; place-items: center; min-height: 230px; padding: 32px 24px; color: var(--slate); text-align: center; }
.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 16px; color: var(--green); border: 1px solid var(--line); border-radius: 50%; background: var(--surface-soft); }
.empty-state h3 { margin-bottom: 6px; }
.empty-state p { max-width: 370px; margin: 0; font-size: 11.5px; }
.skeleton { position: relative; overflow: hidden; min-height: 90px; border-radius: 12px; background: #edf1f4; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Live school map */
/* Blueprint grid rather than faint dots: fine lines every 13px with a
   stronger major line every 5 cells, so the frame actually reads as a
   floor plan in light mode the way it already did in dark. */
.school-map { position: relative; width: 100%; aspect-ratio: var(--map-aspect, 2.12 / 1); min-height: 240px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 11px; background-color: #eef3f9;
  background-image:
    linear-gradient(rgba(88,124,166,.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88,124,166,.26) 1px, transparent 1px),
    linear-gradient(rgba(88,124,166,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88,124,166,.10) 1px, transparent 1px);
  background-size: 65px 65px, 65px 65px, 13px 13px, 13px 13px; }
/* Multi-value filter dropdown (components.js::multiFilterHtml). Styled to
   sit inline with the plain <select>s already in these toolbars. */
.multi-filter { position: relative; display: inline-block; }
.multi-filter-toggle { display: inline-flex; align-items: center; gap: 8px; height: 34px; max-width: 230px; padding: 0 10px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: 12px; cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.multi-filter-toggle:hover { border-color: var(--teal); }
.multi-filter-toggle [data-multi-summary] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-filter.active .multi-filter-toggle { color: var(--teal-dark); border-color: var(--teal); background: var(--teal-soft); font-weight: 600; }
.multi-filter-caret { color: var(--muted); font-size: 10px; }
.multi-filter-menu { position: absolute; z-index: 20; top: calc(100% + 5px); left: 0; min-width: 216px; max-height: 300px; overflow-y: auto; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--elev-3); }
.multi-filter-option { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 12px; white-space: nowrap; cursor: pointer; }
.multi-filter-option:hover { background: var(--surface-soft); }
.multi-filter-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--teal); }
.multi-filter-foot { margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--line); text-align: right; }
html[data-theme="dark"] .multi-filter-menu { border-color: var(--dk-edge); background: var(--dk-sunken); }
html[data-theme="dark"] .multi-filter-option:hover { background: var(--dk-hover); }

/* The range picker lives in the page heading, which scrolls away. This
   banner keeps the window that produced the numbers on screen while the
   charts and tables underneath are being read. */
.range-banner { position: sticky; top: 88px; z-index: 3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--teal-soft); box-shadow: var(--elev-1); }
.range-banner-label { color: var(--slate); font-size: 9.5px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.range-banner strong { color: var(--teal-dark); font-size: 14px; font-variant-numeric: tabular-nums; }
.range-banner-hint { margin-left: auto; color: var(--slate); font-size: 10.5px; }
html[data-theme="dark"] .range-banner { border-color: var(--dk-edge); background: var(--teal-soft); }
html[data-theme="dark"] .range-banner strong { color: var(--dk-text-2); }

.legend .legend-scale { margin-left: auto; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.school-map-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 5px; color: var(--muted); text-align: center; }
.school-map-empty strong { color: var(--ink); font-size: 14px; }
.school-map-empty span { font-size: 11px; }
.map-room { position: absolute; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; overflow: hidden; border: 1px solid #d6e0eb; border-radius: 8px; background: rgba(255,255,255,.97); box-shadow: 0 3px 9px rgba(17,48,78,.035); cursor: pointer; text-align: left; transition: transform .16s, border .16s, box-shadow .16s; }
.map-room:hover, .map-room:focus-visible { z-index: 2; transform: translateY(-2px); border-color: #8eb9eb; box-shadow: var(--elev-3); outline: 0; }
.map-room:focus-visible { box-shadow: var(--focus-ring), var(--elev-3); }
.map-room.hallway { flex-direction: row; align-items: center; padding: 12px 18px; color: #445769; border-style: dashed; background: rgba(221,231,235,.72); }
.map-room.nurse { border-top: 3px solid var(--blue); }
.map-room.office { border-top: 3px solid var(--gold); }
.map-room strong { display: block; font-family: var(--font); font-size: 13px; }
.map-room small { display: block; max-width: 100%; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.map-counts { display: flex; align-items: flex-end; gap: 12px; margin-top: 10px; }
.map-counts b { color: var(--teal-dark); font-family: var(--font); font-size: 20px; }
.map-counts span { color: var(--slate); font-size: 9px; }
.map-alert { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; color: var(--muted); font-size: 9.5px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--teal); }
.legend i.gold { background: var(--gold); }
.legend i.blue { background: var(--blue); }
.legend i.gray { background: #c1cbd3; }
.live-layout { grid-template-columns: minmax(0, 1.85fr) minmax(290px, .85fr); gap: 22px; }
.campus-card .card-header { align-items: flex-start; }
.campus-card .map-header-controls { justify-content: space-between; width: 100%; gap: 10px; }
.campus-card .legend { gap: 10px 15px; font-size: 9px; }
.campus-card .legend span:last-child { width: 100%; margin-top: 4px; }
.live-layout > .stack > .card .card-header { gap: 10px; padding: 18px; }
.live-layout > .stack > .card .card-body { padding: 14px; }
.live-layout .alert-card { grid-template-columns: 3px minmax(0, 1fr); }
.live-layout .alert-card > button { grid-column: 2; justify-self: start; min-height: 28px; padding: 3px 0; font-size: 10px; }
.live-layout #live-alerts { max-height: 370px; overflow: auto; scrollbar-width: thin; }
.simulator-heading { display: flex; align-items: center; gap: 12px; }
.simulator-heading > span { display: grid; place-items: center; width: 40px; height: 40px; color: var(--brand-highlight); border: 1px solid rgba(var(--brand-highlight-rgb), .2); border-radius: 10px; background: rgba(var(--brand-highlight-rgb), .07); }
.simulator-heading .eyebrow { margin-bottom: 5px; font-size: 8px; }
.simulator-heading h3 { color: #fff; font-size: 15px; }
.scanner-console .button.primary { color: #17283d; background: var(--brand-highlight); border-color: var(--brand-highlight); }
.scanner-console .button.primary:hover { background: #ebd8b0; border-color: #ebd8b0; }

/* Classroom */
.class-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; padding: 27px; color: #edf5ff; border-radius: var(--radius); background: linear-gradient(110deg, #10243a, #20466b); box-shadow: var(--shadow-sm); }
.class-hero h2 { color: #fff; font-size: 25px; }
.class-hero p { margin: 7px 0 0; color: #a9c0d2; }
.class-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-top: 18px; color: #c6d7e3; font-size: 10.5px; }
.class-meta span { display: inline-flex; align-items: center; gap: 6px; }
.scanner-health { align-self: start; min-width: 210px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.055); }
.scanner-health strong, .scanner-health small { display: block; }
.scanner-health strong { color: #fff; font-size: 11px; }
.scanner-health small { margin-top: 3px; color: #93abba; font-size: 9px; }
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 10px; }
.student-card { position: relative; min-height: 108px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; transition: border .14s, box-shadow .14s; }
.student-card:hover { border-color: #91b9e7; box-shadow: 0 8px 22px rgba(10,31,54,.07); }
.student-card-top { display: flex; align-items: center; gap: 10px; }
.student-card .status-pill { margin-top: 12px; }
.student-card .elapsed { position: absolute; right: 13px; bottom: 14px; color: var(--purple); font-family: var(--font); font-size: 10px; font-weight: 800; }

/* Alerts / activity */
.feed { display: grid; }
.feed-item { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; gap: 11px; padding: 13px 0; border-bottom: 1px solid #edf0f3; }
.feed-item:last-child { border: 0; }
.feed-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: var(--gold); background: var(--gold-soft); font-size: 11px; font-weight: 800; }
.feed-copy strong { display: block; font-size: 11.5px; }
.feed-copy p { margin: 3px 0 0; color: var(--slate); font-size: 10px; }
.feed-time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.alert-card { display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; gap: 11px; padding: 14px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.alert-card + .alert-card { margin-top: 9px; }
.alert-bar { border-radius: 99px; background: var(--gold); }
.alert-card.high .alert-bar { background: var(--red); }
.alert-card.info .alert-bar { background: var(--blue); }
.alert-card h3 { font-size: 12.5px; }
.alert-card p { margin: 5px 0 0; color: var(--slate); font-size: 11px; line-height: 1.6; }
.alert-meta { margin-top: 7px; color: var(--muted); font-size: 9px; }
.attention-panel { border-color: var(--red); box-shadow: 0 0 0 1px var(--red-soft); }
.attention-panel .card-header { background: var(--red-soft); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }

/* Forms and settings */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.form-grid .full { grid-column: 1 / -1; }
.inline-fields { display: flex; gap: 9px; align-items: flex-end; }
.inline-fields > * { flex: 1; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 61px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border: 0; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { font-size: 11.5px; }
.toggle-row small { margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.switch { position: relative; display: inline-block; flex: 0 0 38px; width: 38px; height: 22px; }
.switch input { width: 0; height: 0; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #cbd3da; cursor: pointer; transition: .2s; }
.switch span::before { content: ""; position: absolute; left: 3px; bottom: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .2s; }
.switch input:checked + span { background: var(--teal); }
.switch input:checked + span::before { transform: translateX(16px); }
.switch input:disabled + span { cursor: default; opacity: .55; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; }
.permission-group { border: 0; margin: 0; padding: 0; }
.permission-group legend { padding: 0 0 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.card-footer { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.emergency-banner { display: flex; align-items: center; gap: 12px; padding: 10px 22px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; }
.emergency-banner span { font-weight: 500; opacity: .92; }
.emergency-banner button { margin-left: auto; background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.emergency-banner button:hover { background: rgba(255,255,255,.3); }
.sso-buttons { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sso-buttons::before { content: "or continue with"; display: block; margin: -22px auto 6px; padding: 0 10px; width: fit-content; background: var(--surface); color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.sso-button { display: flex; align-items: center; justify-content: center; gap: 8px; }

.calendar-overlay { position: fixed; z-index: 60; inset: 0; display: flex; flex-direction: column; background: var(--surface); opacity: 0; transform: translateY(8px) scale(.99); transition: opacity .18s ease, transform .18s ease; }
.calendar-overlay:not([hidden]) { opacity: 1; transform: none; }
.calendar-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 26px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.calendar-overlay-header h2 { margin: 2px 0 0; }
.calendar-month-label { min-width: 150px; text-align: center; font-size: 13px; }
.calendar-overlay-body { flex: 1; overflow-y: auto; padding: 22px 26px 40px; max-width: 980px; width: 100%; margin: 0 auto; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; color: var(--muted); font-size: 10.5px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calendar-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-align: center; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.calendar-day { position: relative; min-height: 74px; padding: 8px; border-radius: 10px; border: 1.5px solid transparent; background: var(--surface-soft); cursor: pointer; text-align: left; transition: transform .12s ease, box-shadow .12s ease; }
.calendar-day:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.calendar-day.empty { background: transparent; cursor: default; pointer-events: none; }
.calendar-day.selected { border-color: var(--teal); }
.calendar-day .day-number { font-size: 12px; font-weight: 700; color: var(--ink); }
.calendar-day .day-summary { display: block; margin-top: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.calendar-day.status-present { background: var(--green-soft); }
.calendar-day.status-present .day-summary { color: var(--green); }
.calendar-day.status-tardy, .calendar-day.status-unaccounted { background: var(--gold-soft); }
.calendar-day.status-tardy .day-summary, .calendar-day.status-unaccounted .day-summary { color: #a66c13; }
.calendar-day.status-excused { background: var(--blue-soft); }
.calendar-day.status-excused .day-summary { color: var(--blue); }
.calendar-day.status-partial_absent { background: color-mix(in srgb, var(--red-soft) 65%, var(--surface-soft)); }
.calendar-day.status-partial_absent .day-summary { color: var(--red); }
.calendar-day.status-absent { background: var(--red); }
.calendar-day.status-absent .day-number, .calendar-day.status-absent .day-summary { color: #fff; }
.calendar-day.status-no_data .day-number { color: var(--muted); }
.calendar-day-detail { margin-top: 20px; }
.calendar-period-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.calendar-period-row:last-child { border-bottom: 0; }
.calendar-correct-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Printing the calendar or the seating chart: show only whichever overlay
   is open, let its scrolling body flow across pages instead of clipping
   to the on-screen viewport, and drop the controls that don't mean
   anything on paper. */
@media print {
  body > *:not(#calendar-overlay):not(#seating-overlay) { display: none !important; }
  body:has(#calendar-overlay[hidden]) #seating-overlay,
  body:has(#seating-overlay[hidden]) #calendar-overlay { display: none !important; }
  #calendar-overlay, #seating-overlay { position: static !important; opacity: 1 !important; transform: none !important; box-shadow: none !important; border: 0 !important; width: 100% !important; max-height: none !important; }
  #calendar-prev-month, #calendar-next-month, #calendar-print, #calendar-export, #calendar-close { display: none !important; }
  #seating-save, #seating-print, #seating-close { display: none !important; }
  .calendar-overlay-body { overflow: visible !important; max-height: none !important; }
  .calendar-day { break-inside: avoid; }
  .seat-tile { break-inside: avoid; }
}

/* Seating chart: a fixed-size grid of drop targets (native HTML5
   drag-and-drop, desktop/laptop only by design) plus a side tray for
   students not yet placed. */
.seating-layout { display: grid; grid-template-columns: 1fr 220px; gap: 20px; align-items: start; }
.seating-grid { display: grid; gap: 8px; aspect-ratio: 8 / 6; }
.seat-cell { border: 1.5px dashed var(--line); border-radius: 8px; min-height: 64px; display: flex; align-items: center; justify-content: center; padding: 4px; background: var(--surface-soft); }
.seat-cell.drag-over { border-color: var(--teal); background: var(--teal-soft); }
.seat-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); cursor: grab; width: 100%; text-align: center; }
.seat-tile:active { cursor: grabbing; }
.seat-tile strong { font-size: 9.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.seating-tray { border-left: 1px solid var(--line); padding-left: 18px; }
.seating-tray h3 { margin: 0 0 4px; }
#seating-tray-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
#seating-tray-list .seat-tile { flex-direction: row; justify-content: flex-start; text-align: left; }
.drop-zone { display: grid; place-items: center; min-height: 185px; padding: 25px; color: var(--slate); border: 1.5px dashed #bdc9d3; border-radius: 11px; background: #fafcfd; text-align: center; cursor: pointer; }
.drop-zone:hover, .drop-zone.drag { color: var(--teal-dark); border-color: var(--teal); background: var(--teal-soft); }
.drop-zone input { display: none; }
.drop-zone strong { display: block; margin: 10px 0 4px; color: var(--ink); }
.drop-zone small { display: block; color: var(--muted); }
.file-chip { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.validation-list { max-height: 230px; overflow: auto; }
.validation-error { padding: 9px 0; color: var(--red); border-bottom: 1px solid var(--line); font-size: 10px; }
.code-value { padding: 11px 13px; color: var(--navy-800); border: 1px solid var(--line); border-radius: 8px; background: #f5f8fa; font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; }

/* Drawer and modal */
.scrim, .modal-scrim { position: fixed; z-index: 45; inset: 0; background: rgba(5, 20, 35, .38); backdrop-filter: blur(2px); }
.drawer-scrim { z-index: 49; }
#sidebar-scrim { z-index: 35; }
/* Centered dialog, not a side panel. A slim right-edge sliver was hard to
   read on smaller laptop/1080p screens, especially with the detail grid
   and schedule list this panel renders. */
.drawer { position: fixed; z-index: 50; top: 50%; left: 50%; display: flex; flex-direction: column; width: min(920px, 94vw); max-height: 88vh; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.97); transition: opacity .18s ease, transform .18s ease; }
.drawer.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.drawer > header, .modal > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 76px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.drawer-content { flex: 1; padding: 20px; overflow: auto; }
#drawer-close, #modal-close { color: var(--red); border-color: var(--red); background: var(--red-soft); font-weight: 700; }
#drawer-close:hover, #modal-close:hover { background: var(--red); color: #fff; }
.drawer-section { margin-bottom: 22px; }
.drawer-section > h3 { margin-bottom: 11px; color: var(--slate); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.profile-hero { display: flex; align-items: center; gap: 14px; padding: 17px; border-radius: 12px; background: var(--surface-soft); }
.profile-hero .avatar { width: 54px; height: 54px; font-size: 15px; }
.profile-hero h3 { font-size: 18px; }
.profile-hero p { margin: 4px 0 0; color: var(--slate); font-size: 10.5px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.detail-box { min-height: 62px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; }
.detail-box small, .detail-box strong { display: block; }
.detail-box small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.detail-box strong { margin-top: 4px; font-size: 11.5px; }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.action-card { display: flex; align-items: center; gap: 10px; min-height: 55px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; text-align: left; }
.action-card:hover { border-color: #91b9e7; background: var(--teal-soft); }
.action-card span { display: grid; place-items: center; flex: 0 0 29px; height: 29px; color: var(--teal-dark); border-radius: 8px; background: var(--teal-soft); }
.action-card strong { font-size: 10.5px; }
.timeline { position: relative; margin-left: 6px; padding-left: 19px; border-left: 1px solid var(--line-strong); }
.timeline-item { position: relative; padding: 0 0 17px; }
.timeline-item::before { content: ""; position: absolute; left: -23px; top: 4px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.timeline-item strong, .timeline-item small { display: block; }
.timeline-item strong { font-size: 10.5px; }
.timeline-item small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.modal-layer { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 20px; }
.modal-scrim { z-index: 0; }
.modal { position: relative; z-index: 1; width: min(520px, calc(100vw - 28px)); max-height: calc(100vh - 40px); overflow: auto; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); }
.modal-content { padding: 20px; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 13px 20px; border-top: 1px solid var(--line); background: var(--surface-soft); }

/* Demo clock and scanner */
.demo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border: 1px solid #ecd6ad; border-radius: 10px; background: var(--gold-soft); }
.demo-strip strong { margin-right: 4px; color: #8a601f; font-size: 10.5px; }
.scanner-console { padding: 18px; color: #d5e3ec; border-radius: 12px; background: var(--navy-900); }
.scanner-console .field, html[data-theme="dark"] .scanner-console .field { color: var(--dk-text-2); }
.scanner-console input, .scanner-console select { color: #fff; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.07); }
.scanner-console option { color: var(--ink); background: #fff; }
.scan-status { min-height: 78px; margin-top: 12px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.045); }
.scan-status strong { display: block; color: #fff; }
.scan-status p { margin: 4px 0 0; color: #a8bdcb; font-size: 10.5px; }
.scan-status.success { border-color: rgba(72,186,151,.5); background: rgba(50,129,101,.18); }
.scan-status.error { border-color: rgba(194,79,74,.55); background: rgba(194,79,74,.14); }
.quick-scan { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.quick-scan button { color: #cce0ea; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.055); }
.reader-support-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 17px 19px; color: #dbeaff; border: 1px solid #185ca5; border-radius: 13px; background: linear-gradient(120deg, #041a36, #073d7d); box-shadow: var(--shadow-sm); }
.reader-support-card .reader-mark { display: grid; place-items: center; width: 52px; height: 52px; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; background: rgba(255,255,255,.1); font-size: 11px; font-weight: 850; letter-spacing: .08em; }
.reader-support-card h3 { color: #fff; }
.reader-support-card p:not(.eyebrow) { margin: 4px 0 0; color: #b9cee8; font-size: 11px; }
.reader-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.reader-badges span { padding: 6px 8px; color: #e7f2ff; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.07); font-size: 9px; font-weight: 750; white-space: nowrap; }
.scanner-setup-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, .75fr); gap: 18px; align-items: start; }
.scanner-wizard .card-body { display: grid; gap: 0; padding: 0 18px; }
.reader-step { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.reader-step:last-child { border-bottom: 0; }
.reader-step-number { display: grid; place-items: center; width: 30px; height: 30px; color: var(--teal-dark); border-radius: 9px; background: var(--teal-soft); font-size: 11px; font-weight: 850; }
.reader-step-content { min-width: 0; }
.reader-step h4 { font-size: 12.5px; }
.reader-step p { margin: 4px 0 0; color: var(--slate); font-size: 10.5px; }
.reader-step-state { align-self: center; padding: 5px 8px; border-radius: 999px; font-size: 8.5px; font-weight: 800; text-transform: uppercase; }
.reader-step-state.ready { color: var(--green); background: var(--green-soft); }
.reader-pair-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }
.reader-inline-status { margin-top: 8px; padding: 8px 10px; color: var(--slate); border-radius: 8px; background: var(--surface-soft); font-size: 9.5px; }
.reader-inline-status.good { color: var(--green); background: var(--green-soft); }
.reader-capture-pad { display: grid; place-items: center; width: 100%; min-height: 125px; margin-top: 13px; padding: 18px; color: var(--slate); outline: 0; border: 1.5px dashed #8eafd3; border-radius: 12px; background: var(--surface-soft); cursor: pointer; text-align: center; transition: border .15s, background .15s, transform .15s; }
.reader-capture-pad:hover, .reader-capture-pad:focus { color: var(--teal-dark); border-color: var(--teal); background: var(--teal-soft); box-shadow: 0 0 0 3px rgba(7,89,189,.1); }
.reader-capture-pad.listening { color: #fff; border-style: solid; border-color: var(--teal); background: var(--teal); animation: readerPulse 1.15s ease-in-out infinite; }
.reader-capture-pad strong, .reader-capture-pad small { display: block; }
.reader-capture-pad strong { margin-top: 7px; font-size: 12px; }
.reader-capture-pad small { margin-top: 3px; opacity: .8; font-size: 9.5px; }
.reader-wave { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(7,89,189,.12); font-weight: 850; letter-spacing: -2px; }
.reader-capture-pad.listening .reader-wave { background: rgba(255,255,255,.14); }
@keyframes readerPulse { 50% { box-shadow: 0 0 0 6px rgba(7,89,189,.13); } }
.reader-capture-result { display: grid; gap: 10px; margin-top: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.capture-metrics { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(80px, .6fr)); gap: 8px; }
.capture-metrics > div { min-width: 0; padding: 9px; border-radius: 8px; background: var(--surface-soft); }
.capture-metrics small, .capture-metrics strong { display: block; }
.capture-metrics small { color: var(--muted); font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.capture-metrics strong { margin-top: 3px; font-size: 10.5px; }
.capture-metrics .code-value { padding: 0; color: var(--ink); border: 0; background: transparent; font-size: 11px; }
.reader-check { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 8px; }
.reader-check > span { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 8px; font-weight: 850; }
.reader-check strong, .reader-check small { display: block; }
.reader-check strong { font-size: 10px; }
.reader-check small { margin-top: 2px; font-size: 8.5px; }
.reader-check.good { color: var(--green); background: var(--green-soft); }
.reader-check.bad { color: var(--red); background: var(--red-soft); }
.reader-match { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 10px; border-left: 3px solid currentColor; border-radius: 7px; font-size: 9.5px; }
.reader-match strong { font-size: 10.5px; }
.reader-match span { flex: 1; color: var(--slate); }
.reader-match.good { color: var(--green); background: var(--green-soft); }
.reader-match.warning { color: #9b6819; background: var(--gold-soft); }
.credential-enroll { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.credential-enroll .field { margin: 0; }
.credential-search-results { display: grid; gap: 5px; max-height: 205px; overflow: auto; }
.credential-student { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; text-align: left; }
.credential-student:hover, .credential-student.selected { border-color: var(--teal); background: var(--teal-soft); }
.credential-student strong, .credential-student span { display: block; }
.credential-student strong { font-size: 10px; }
.credential-student span { color: var(--slate); font-size: 8.5px; }
.scanner-live-panel { position: sticky; top: 96px; }
.scanner-live-panel h3 { color: #fff; }
.scanner-copy { margin: 6px 0 14px; color: #9fb8d5; font-size: 10px; }
.live-mode-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; padding: 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.045); }
.live-mode-summary .live-dot { flex: 0 0 10px; height: 10px; border-radius: 50%; background: #72859a; box-shadow: 0 0 0 5px rgba(114,133,154,.12); }
.live-mode-summary strong, .live-mode-summary small { display: block; }
.live-mode-summary strong { color: #fff; font-size: 10.5px; }
.live-mode-summary small { margin-top: 2px; color: #9fb4c3; font-size: 8.8px; }
.live-mode-summary.armed { border-color: rgba(106,201,166,.45); background: rgba(50,129,101,.16); }
.live-mode-summary.armed .live-dot { background: #6ac9a6; box-shadow: 0 0 0 5px rgba(106,201,166,.13); animation: readerPulse 1.15s ease-in-out infinite; }
.scanner-divider { height: 1px; margin: 15px 0; background: rgba(255,255,255,.1); }
.scanner-safety { margin: 12px 0 0; color: #8099b5; font-size: 8.7px; }
.microcopy { margin-top: 4px; font-size: 9px; }

/* Toasts */
.toast-region { position: fixed; z-index: 100; right: 22px; bottom: calc(22px + var(--corner-stack, 0px)); display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.toast { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 14px 40px rgba(8,25,45,.18); animation: toastIn .2s ease; }
.toast > i { border-radius: 99px; background: var(--teal); }
.toast.error > i { background: var(--red); }
.toast strong, .toast small { display: block; }
.toast strong { font-size: 11px; }
.toast small { margin-top: 2px; color: var(--slate); font-size: 9.5px; }
.toast button { border: 0; background: transparent; cursor: pointer; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* Configurable school setup / accountability */
.setup-metrics { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
.setup-grid { grid-template-columns: repeat(2, minmax(440px, 1fr)); }
.map-header-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.floor-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.floor-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 6px 10px; color: var(--slate); border: 0; border-radius: 7px; background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.floor-tab span { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; color: var(--muted); border-radius: 999px; background: var(--surface); font-size: 8px; }
.floor-tab.active { color: #fff; background: var(--brand-chrome-2); box-shadow: var(--shadow-sm); }
.floor-tab.active span { color: var(--brand-chrome-2); background: #fff; }
.period-order-label { color: var(--slate); font-size: 11px; font-weight: 700; white-space: nowrap; }
.muted-row { opacity: .62; }
.setup-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 17px; }
.setup-flow span { display: flex; align-items: center; gap: 7px; min-height: 43px; padding: 8px; color: var(--slate); border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); font-size: 9.5px; font-weight: 700; }
.setup-flow b { display: grid; place-items: center; flex: 0 0 23px; height: 23px; color: var(--teal-dark); border-radius: 7px; background: var(--teal-soft); }
.accountability-metrics { grid-template-columns: repeat(6, minmax(120px, 1fr)); }
.accountability-table td { min-width: 120px; }
.accountability-table td:first-child { min-width: 230px; }

/* Persistent high-contrast dark theme. All interactive controls inherit these
   semantic surfaces so text never becomes white-on-white. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf2fa;
  --slate: #b5c2d2;
  --muted: #8fa2ba;
  --line: #2a3a4d;
  --line-strong: #40536a;
  --canvas: #0d1521;
  --surface: #152130;
  --surface-soft: #1b2b3e;
  /* The dark surface ramp. Dark mode used to be navy everywhere, so a school
     with its own colours ended up as CVCA navy wearing a few repainted
     accents. Every dark rule now reads one of these instead of a literal, and
     a school's dark block moves the whole set. */
  --dk-deep: #061321;
  --dk-sunken: #0b213a;
  --dk-hover: #0e2947;
  --dk-raised: #16304a;
  --dk-edge: #2c5278;
  --dk-edge-2: #496074;
  --dk-text: #a9bdd2;
  --dk-text-2: #d9e8f3;
  --dk-veil: rgba(21,33,48,.96);
  --dk-wash: rgba(112,174,238,.055);
  --dk-edge-faint: rgba(74,113,150,.45);
  --teal: #4b9cff;
  --teal-dark: #91c2ff;
  --teal-soft: #102f57;
  --gold: #e1aa51;
  --gold-soft: #3b2e17;
  /* Keep this list in step with every html[data-school="..."][data-theme="dark"]
     block below: those match at higher specificity and must restate each of
     these, or a school would keep the CVCA dark value. */
  --brand-button: #1768c5;
  --brand-button-hover: #0f58ad;
  --brand-button-line: #2f83e9;
  --brand-button-line-hover: #4799f7;
  --brand-art-from: #075aa9;
  --brand-art-mid: #004a8e;
  --brand-art-to: #00346a;
  --brand-art-glow: 64, 140, 220;
  --brand-art-shade: 0, 16, 44;
  --brand-wash-1: #14395d;
  --brand-wash-2: #0a1f36;
  --red: #ef817c;
  --red-soft: #3d2024;
  --blue: #77b5ff;
  --blue-soft: #142f50;
  --purple: #ad98e2;
  --purple-soft: #2d2743;
  --green: #6ac9a6;
  --green-soft: #17382f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 7px 22px rgba(0,0,0,.15);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.52);
  background: var(--canvas);
}
html[data-theme="dark"] .login-screen { background: var(--surface); }
html[data-theme="dark"] .login-card label,
html[data-theme="dark"] .field { color: var(--slate); }
html[data-theme="dark"] .topbar { border-color: var(--line); background: var(--dk-veil); }
html[data-theme="dark"] .clock-time,
html[data-theme="dark"] .metric-value { color: var(--ink); }
html[data-theme="dark"] .button { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
html[data-theme="dark"] .button:hover { color: #fff; border-color: var(--dk-edge-2); background: var(--dk-hover); }
html[data-theme="dark"] .button.primary { color: #fff; border-color: var(--brand-button-line); background: var(--brand-button); }
html[data-theme="dark"] .button.primary:hover { border-color: var(--brand-button-line-hover); background: var(--brand-button-hover); }
html[data-theme="dark"] .login-card { border-color: var(--dk-edge); background: var(--dk-sunken); box-shadow: 0 30px 80px -34px rgba(0, 0, 0, .75); }
html[data-theme="dark"] .login-card input { background: var(--dk-sunken); border-color: var(--dk-edge); }
html[data-theme="dark"] .login-card .eyebrow { color: var(--teal); }
html[data-theme="dark"] .login-card .button.primary { background: var(--brand-art-from); border-color: var(--brand-button-line); }
html[data-theme="dark"] .login-card .button.primary:hover { background: var(--brand-art-mid); border-color: var(--teal-dark); }
html[data-theme="dark"] .login-card .demo-credentials { background: rgba(255, 255, 255, .025); border-color: var(--dk-edge); }
html[data-theme="dark"] .demo-account { border-color: var(--dk-edge); background: var(--dk-sunken); }
html[data-theme="dark"] .demo-account:hover, html[data-theme="dark"] .demo-account:focus-visible { border-color: var(--teal); }
html[data-theme="dark"] .input-action { color: var(--teal); }
html[data-theme="dark"] .input-action:hover, html[data-theme="dark"] .input-action:focus-visible { background: var(--dk-hover); }
html[data-theme="dark"] .button.soft { color: var(--dk-text-2); border-color: var(--dk-edge); background: var(--dk-hover); }
html[data-theme="dark"] .button.ghost { color: var(--slate); border-color: transparent; background: transparent; }
html[data-theme="dark"] .button.danger { color: #ffaaa5; border-color: #63373a; background: var(--red-soft); }
html[data-theme="dark"] .icon-button { color: var(--ink); border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] .icon-button:hover,
html[data-theme="dark"] .profile-button:hover { background: var(--surface-soft); }
html[data-theme="dark"] .notification-button b { border-color: var(--surface); }
html[data-theme="dark"] .avatar { color: var(--dk-text-2); background: var(--surface-soft); }
html[data-theme="dark"] .data-table th { color: var(--dk-text); border-color: var(--line); background: var(--dk-sunken); }
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .feed-item { border-color: var(--line); }
html[data-theme="dark"] .data-table tbody tr[data-action]:hover { background: var(--dk-hover); }
html[data-theme="dark"] .skeleton { background: var(--dk-sunken); }
html[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
html[data-theme="dark"] .school-map { background-color: var(--dk-deep); background-image: linear-gradient(var(--dk-wash) 1px, transparent 1px), linear-gradient(90deg, var(--dk-wash) 1px, transparent 1px); }
html[data-theme="dark"] .map-room { color: var(--ink); border-color: var(--dk-edge); background: var(--dk-veil); box-shadow: 0 5px 18px rgba(0,0,0,.2); }
html[data-theme="dark"] .map-room.hallway { color: var(--slate); border-color: var(--dk-edge); background: var(--dk-veil); }
html[data-theme="dark"] .floor-tab.active { color: #fff; background: var(--brand-button); }
html[data-theme="dark"] .floor-tab.active span { color: var(--dk-raised); background: var(--dk-text-2); }
html[data-theme="dark"] .map-alert { border-color: var(--surface); }
html[data-theme="dark"] .student-card { background: var(--surface); }
html[data-theme="dark"] .student-card:hover { border-color: var(--teal); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
html[data-theme="dark"] .alert-card,
html[data-theme="dark"] .file-chip,
html[data-theme="dark"] .action-card,
html[data-theme="dark"] .toast { color: var(--ink); background: var(--surface); }
html[data-theme="dark"] .attention-panel .card-header { background: var(--red-soft); }
html[data-theme="dark"] .action-card:hover { border-color: var(--teal); background: var(--teal-soft); }
html[data-theme="dark"] .drop-zone { color: var(--slate); border-color: var(--dk-edge-2); background: var(--dk-deep); }
html[data-theme="dark"] .drop-zone:hover,
html[data-theme="dark"] .drop-zone.drag { color: var(--teal-dark); border-color: var(--teal); background: var(--teal-soft); }
html[data-theme="dark"] .code-value { color: var(--dk-text-2); border-color: var(--line); background: var(--dk-sunken); }
html[data-theme="dark"] .timeline-item::before { border-color: var(--surface); }
html[data-theme="dark"] .modal-actions { background: var(--dk-sunken); }
html[data-theme="dark"] .demo-strip strong { color: #ffd48b; }
html[data-theme="dark"] .scanner-console option { color: var(--ink); background: var(--surface); }
html[data-theme="dark"] .reader-capture-pad { color: var(--slate); border-color: var(--dk-edge); background: var(--dk-sunken); }
html[data-theme="dark"] .reader-capture-pad:hover,
html[data-theme="dark"] .reader-capture-pad:focus { color: var(--dk-text-2); border-color: var(--teal); background: var(--teal-soft); }
html[data-theme="dark"] .reader-capture-pad.listening { color: #fff; background: var(--brand-button); }
html[data-theme="dark"] .reader-inline-status,
html[data-theme="dark"] .capture-metrics > div,
html[data-theme="dark"] .credential-enroll { background: var(--dk-sunken); }
html[data-theme="dark"] .reader-inline-status.good,
html[data-theme="dark"] .reader-match.good { background: var(--green-soft); }
html[data-theme="dark"] .credential-student { color: var(--ink); border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] .credential-student:hover,
html[data-theme="dark"] .credential-student.selected { border-color: var(--teal); background: var(--teal-soft); }
html[data-theme="dark"] .status-pill.unknown,
html[data-theme="dark"] .status-pill.disabled { color: var(--slate); background: var(--surface-soft); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--muted); }

@media (max-width: 1180px) {
  /* minmax(0, …): a wide table scrolls inside its card instead of widening the page. */
  .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .accountability-metrics { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
  .layout-aside { grid-template-columns: minmax(0, 1fr); }
  .scanner-setup-grid { grid-template-columns: minmax(0, 1fr); }
  .scanner-live-panel { position: static; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  :root { --sidebar: 242px; }
  .app-shell { display: block; }
  .sidebar { visibility: hidden; transform: translateX(-102%); transition: transform .2s ease, visibility .2s; }
  .sidebar.open { visibility: visible; transform: translateX(0); }
  .workspace { grid-column: 1; }
  .menu-button { display: grid; }
  .topbar { padding: 0 16px; }
  .main-content { padding: 23px 18px calc(40px + var(--corner-stack, 0px)); }
  .connection-pill, .profile-copy, #demo-controls-button { display: none; }
  .metric-grid { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
  .login-screen { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-main { min-height: 100vh; }
}

@media (max-width: 660px) {
  h1 { font-size: 25px; }
  .topbar { height: 66px; }
  .school-clock { gap: 8px; }
  .clock-time { min-width: 55px; font-size: 17px; }
  .clock-divider { height: 24px; }
  .school-clock strong { max-width: 130px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .school-clock div span { font-size: 8.5px; }
  .profile-button { display: none; }
  .main-content { padding: 20px 12px calc(35px + var(--corner-stack, 0px)); }
  .page-heading { display: block; margin-bottom: 18px; }
  .page-actions { justify-content: flex-start; margin-top: 14px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { min-height: 91px; }
  .metric-value { font-size: 24px; }
  .grid-2, .grid-3, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .full { grid-column: auto; }
  .school-map { min-height: 410px; aspect-ratio: auto; overflow: auto; }
  .map-room { position: relative !important; inset: auto !important; width: auto !important; height: auto !important; min-height: 86px; margin: 9px; }
  .school-map::before { display: none; }
  .class-hero { grid-template-columns: 1fr; }
  .scanner-health { min-width: 0; }
  .toolbar { align-items: stretch; }
  .toolbar-group, .search-box { width: 100%; }
  .toolbar select { flex: 1; }
  .detail-grid, .action-grid { grid-template-columns: 1fr; }
  .reader-support-card { grid-template-columns: auto minmax(0, 1fr); }
  .reader-badges { grid-column: 1 / -1; justify-content: flex-start; }
  .reader-step { grid-template-columns: 32px minmax(0, 1fr); }
  .reader-step-state { grid-column: 2; justify-self: start; }
  .reader-pair-row, .capture-metrics { grid-template-columns: 1fr; }
  .login-main { padding: 20px 16px; }
  .login-card { padding: 28px 22px 24px; border-radius: 18px; }
  .login-card h2 { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- Scan ID (hall check) ------------------------------------------ */
.hall-check { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 18px; align-items: start; }
.hall-scanner { overflow: hidden; }
.hall-viewport { position: relative; aspect-ratio: 1 / 1; max-height: 62vh; width: 100%; overflow: hidden; background: var(--navy-950); color: #fff; }
.hall-viewport video { display: none; width: 100%; height: 100%; object-fit: cover; }
.hall-viewport.live video { display: block; }
.hall-reticle { display: none; position: absolute; inset: 17%; border: 3px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(5, 14, 26, .38); pointer-events: none; }
.hall-viewport.live .hall-reticle { display: block; }
.hall-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.hall-idle p { max-width: 280px; margin: 0; font-size: 13px; line-height: 1.5; opacity: .9; }
.hall-idle-icon svg { width: 64px; height: 64px; opacity: .85; }
.hall-start { min-height: 48px; padding-inline: 26px; font-size: 14px; }
.hall-scanner-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
.hall-manual { display: flex; gap: 8px; padding: 14px 16px; }
.hall-manual input { flex: 1; min-width: 0; min-height: 44px; font-size: 16px; }
.hall-manual .button { min-height: 44px; }
.hall-side { display: grid; gap: 14px; }
.hall-placeholder p { margin-bottom: 0; }
.hall-result { --tone: var(--blue); --tone-soft: var(--blue-soft); overflow: hidden; border-top: 5px solid var(--tone); }
.hall-result.tone-ok { --tone: var(--green); --tone-soft: var(--green-soft); }
.hall-result.tone-warn { --tone: var(--gold); --tone-soft: var(--gold-soft); }
.hall-result.tone-alert { --tone: var(--red); --tone-soft: var(--red-soft); }
.hall-verdict { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--tone-soft); }
.hall-verdict strong { display: block; font-size: 18px; color: var(--ink); }
.hall-verdict p { margin: 3px 0 0; color: var(--slate); font-size: 12.5px; line-height: 1.45; }
.hall-verdict-icon { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tone); color: #fff; font-size: 22px; font-weight: 800; }
.hall-student { display: flex; align-items: center; gap: 14px; padding: 16px 18px 6px; }
.hall-student h3 { margin: 0; font-size: 17px; }
.hall-student p { margin: 3px 0 0; color: var(--slate); font-size: 12px; }
.hall-photo { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 14px; object-fit: cover; font-size: 20px; }
.hall-details { padding: 10px 18px; }
.hall-details .detail-box span { display: block; margin-top: 3px; color: var(--slate); font-size: 11px; }
.hall-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 18px 18px; }
.hall-actions .button { min-height: 44px; }
.hall-recent-list { display: grid; padding: 4px 10px 10px; }
.hall-recent-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; text-align: left; cursor: pointer; }
.hall-recent-item:hover { background: var(--surface-soft); }
.hall-recent-item strong, .hall-recent-item small { display: block; }
.hall-recent-item small { color: var(--muted); font-size: 10.5px; }
.hall-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.hall-recent-item.tone-ok .hall-dot { background: var(--green); }
.hall-recent-item.tone-warn .hall-dot { background: var(--gold); }
.hall-recent-item.tone-alert .hall-dot { background: var(--red); }
@media (max-width: 920px) {
  .hall-check { grid-template-columns: 1fr; }
  .hall-actions .button { flex: 1 1 100%; }
}

/* ---- Emergency type picker ------------------------------------------ */
.emergency-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; border: 0; }
.emergency-kinds legend { margin-bottom: 8px; font-size: 12px; font-weight: 700; }
.emergency-kind { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.emergency-kind:has(input:checked) { border-color: var(--red); background: var(--red-soft); }
.emergency-kind input { margin-top: 2px; accent-color: var(--red); }
.emergency-kind strong, .emergency-kind small { display: block; }
.emergency-kind small { margin-top: 3px; color: var(--slate); font-size: 11px; line-height: 1.4; }
@media (max-width: 660px) { .emergency-kinds { grid-template-columns: 1fr; } }

/* ---- Tutoring period picker ------------------------------------------ */
.tutoring-when { display: grid; gap: 6px; margin: 6px 0; }
.tutoring-when-option { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.tutoring-when-option:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.tutoring-when-option strong, .tutoring-when-option small { display: block; }
.tutoring-when-option small { color: var(--muted); font-size: 10.5px; }
.tutoring-when-more summary { cursor: pointer; font-size: 11.5px; color: var(--slate); margin: 4px 0; }
.tutoring-when-more .tutoring-when-option { margin-top: 6px; }
.tutoring-flag { display: block; margin-top: 3px; color: var(--teal); font-weight: 650; }

/* ---- FACTS attendance export ----------------------------------------- */
.facts-export { margin-top: 18px; }

/* ---- Campus map (campusmap.js) ----------------------------------------- */
/* The official map's walls, shading and labels are drawn from the PDF; rooms
   are tinted underneath the walls by live status, and their labels, badges
   and pins sit on top. */
.campus-map { display: grid; gap: 10px; }
.campus-map-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.campus-map-search { flex: 1 1 220px; max-width: 360px; }
.campus-map-search input { width: 100%; }
.campus-map-hint { color: var(--muted); font-size: 11px; }
.campus-map-zoom { display: inline-flex; gap: 4px; margin-left: auto; }
.campus-map-zoom .button { min-width: 34px; justify-content: center; font-weight: 800; }
.campus-map-zoom [aria-pressed="true"] { color: #fff; background: var(--brand-chrome-2); }
.campus-map-regions { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.campus-map-regions::-webkit-scrollbar { display: none; }
.campus-map-region { flex: 0 0 auto; padding: 5px 11px; color: var(--slate); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 11px; font-weight: 700; cursor: pointer; transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1); }
.campus-map-region:hover { color: var(--teal-dark); border-color: var(--teal); }
.campus-map-region.active { color: #fff; border-color: var(--brand-chrome-2); background: var(--brand-chrome-2); }
.campus-map-viewport { position: relative; width: 100%; aspect-ratio: var(--cm-aspect, 1.3 / 1); min-height: 280px; max-height: 74vh; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 11px; background-color: #e8eef5;
  background-image: linear-gradient(rgba(88,124,166,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(88,124,166,.09) 1px, transparent 1px);
  background-size: 22px 22px; cursor: grab; touch-action: pan-y; }
.campus-map-viewport.is-zoomed { touch-action: none; }
.campus-map-viewport.is-dragging { cursor: grabbing; }
.campus-map-svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; font-family: var(--font); }
.cm-footprint { fill: #fff; stroke: rgba(111,134,161,.28); stroke-width: 7; stroke-linejoin: round; paint-order: stroke; }
.cm-shade { fill: #dfe3e8; }
.cm-walls { fill: #25313d; pointer-events: none; }
.cm-leader { fill: none; stroke: #b7c1cc; stroke-width: 1.4; pointer-events: none; }
.cm-leader.fill { fill: #e1e6ec; stroke: none; }
.cm-logo { fill: #151b22; pointer-events: none; }
.cm-static { fill: #3d4855; font-weight: 500; pointer-events: none; }
.cm-static.bold { fill: #1c2632; font-weight: 800; }
.cm-room { cursor: pointer; outline: none; }
.cm-shape { fill: transparent; transition: fill var(--dur-2) var(--ease); }
.cm-level { fill: var(--teal); pointer-events: none; transition: fill-opacity .4s var(--ease); }
.tone-class .cm-shape { fill: #e9f1fb; }
.tone-alert .cm-shape { fill: #fbe9e8; }
.tone-office .cm-shape { fill: var(--gold-soft); }
.tone-nurse .cm-shape { fill: var(--blue-soft); }
.tone-hall .cm-shape { fill: rgba(157,176,196,.16); }
.tone-busy .cm-shape { fill: var(--teal-soft); }
.cm-room:hover .cm-shape { fill: rgba(40,93,161,.17); }
.cm-room:focus-visible .cm-shape { fill: rgba(40,93,161,.26); }
.cm-match .cm-shape { fill: rgba(198,164,92,.5); }
.campus-map-svg.is-searching .cm-room-text:not(.cm-match) { opacity: .28; }
.cm-target-expected .cm-shape { fill: rgba(198,164,92,.55); }
.cm-target-current .cm-shape { fill: rgba(45,114,199,.34); }
.cm-room-text { pointer-events: none; transition: opacity var(--dur-2); }
.cm-label { fill: #0f2a44; font-weight: 800; }
.tone-idle .cm-label { fill: #3d4855; font-weight: 600; }
.tone-hall .cm-label { fill: #4b5d70; font-weight: 700; }
.cm-badge rect { fill: var(--brand-chrome-2); }
.cm-badge text { fill: #fff; font-weight: 800; }
.tone-alert .cm-badge rect { fill: var(--red); }
.tone-office .cm-badge rect { fill: #9c7a31; }
.tone-nurse .cm-badge rect { fill: var(--blue); }
.cm-detail { display: none; fill: #4e5f76; font-weight: 650; }
.lod-1 .cm-detail { display: inline; }
.cm-pass circle { fill: var(--purple); }
.cm-pass text { fill: #fff; font-weight: 800; }
.cm-alert { fill: var(--red); }
.cm-alert-ring { fill: none; stroke: var(--red); animation: cm-pulse 1.6s ease-out infinite; }
@keyframes cm-pulse { from { stroke-opacity: .8; stroke-width: .6; } to { stroke-opacity: 0; stroke-width: 7; } }
.cm-pins { pointer-events: none; }
.cm-pin { animation: cm-fade .45s var(--ease) both; }
.cm-pin-shape { stroke: #fff; stroke-width: 1.6; }
.cm-pin.expected .cm-pin-shape { fill: #c6a45c; }
.cm-pin.current .cm-pin-shape { fill: var(--blue); }
.cm-pin-dot { fill: #fff; }
.cm-pin-tag rect { fill: var(--brand-chrome-2); }
.cm-pin.expected .cm-pin-tag rect { fill: #8a6a26; }
.cm-pin-tag text { fill: #fff; font-weight: 800; }
.cm-route { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-dasharray: 6 4; stroke-linecap: round; animation: cm-march 1s linear infinite; }
@keyframes cm-march { to { stroke-dashoffset: -20; } }
@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
.campus-map-tip { position: absolute; z-index: 3; max-width: 240px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--elev-3); pointer-events: none; }
.campus-map-tip strong, .campus-map-tip span, .campus-map-tip small, .campus-map-tip em { display: block; }
.campus-map-tip strong { font-size: 12.5px; }
.campus-map-tip span { margin-top: 2px; color: var(--slate); font-size: 11px; }
.campus-map-tip small { margin-top: 3px; color: var(--ink); font-size: 11px; }
.campus-map-tip em { margin-top: 6px; color: var(--teal); font-size: 10px; font-style: normal; font-weight: 700; }
.campus-map-mini { position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 150px; padding: 5px; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(255,255,255,.93); box-shadow: var(--elev-2); cursor: pointer; }
.campus-map-mini svg { display: block; width: 100%; height: auto; }
.cm-mini-shape { fill: #c5d1de; }
.cm-mini-view { fill: rgba(40,93,161,.16); stroke: var(--teal); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.campus-map-legend { margin-top: 0; }
.cm-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid #7ea6d6; background: #e9f1fb; }
.legend i.cm-key { width: 10px; height: 10px; }
.cm-key.alert { border-color: var(--red); background: var(--red); border-radius: 50%; }
.cm-key.pass { border-color: var(--purple); background: var(--purple); border-radius: 50%; }
.cm-key.office { border-color: var(--gold); background: var(--gold-soft); }
.cm-key.nurse { border-color: var(--blue); background: var(--blue-soft); }
.cm-key.hall { border: 1px dashed #9fb0c0; background: rgba(157,176,196,.3); }
.cm-key.busy { background: var(--teal-soft); }
.cm-key.idle { border-color: #c8d2dd; background: #fff; }
/* Full screen: the Fullscreen API where the browser has it, a fixed
   overlay otherwise (iPhone); stays under the roster drawer (z-index 50). */
.campus-map.is-expanded { position: fixed; z-index: 46; inset: 0; grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 14px; background: var(--canvas); }
.campus-map.is-expanded .campus-map-viewport { height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; }
.campus-map:fullscreen { grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 14px; background: var(--canvas); }
body.campus-map-open { overflow: hidden; }
#modal:has(.map-modal) { width: min(1000px, calc(100vw - 28px)); }
.map-modal .campus-map-viewport { max-height: 62vh; }
.map-modal .supporting { margin-top: 0; }
html[data-theme="dark"] .campus-map-viewport { background-color: var(--dk-deep); background-image: linear-gradient(var(--dk-wash) 1px, transparent 1px), linear-gradient(90deg, var(--dk-wash) 1px, transparent 1px); }
html[data-theme="dark"] .cm-footprint { fill: var(--dk-sunken); stroke: var(--dk-edge-faint); }
html[data-theme="dark"] .cm-shade { fill: var(--dk-raised); }
html[data-theme="dark"] .cm-walls { fill: var(--dk-text); }
html[data-theme="dark"] .cm-leader { stroke: var(--dk-edge); }
html[data-theme="dark"] .cm-leader.fill { fill: var(--dk-raised); }
html[data-theme="dark"] .cm-logo { fill: var(--dk-text-2); }
html[data-theme="dark"] .cm-static { fill: var(--dk-text); }
html[data-theme="dark"] .cm-static.bold { fill: var(--dk-text-2); }
html[data-theme="dark"] .tone-class .cm-shape { fill: var(--dk-raised); }
html[data-theme="dark"] .tone-alert .cm-shape { fill: #47202a; }
html[data-theme="dark"] .tone-office .cm-shape { fill: #3a3017; }
html[data-theme="dark"] .tone-nurse .cm-shape { fill: var(--dk-raised); }
html[data-theme="dark"] .tone-hall .cm-shape { fill: var(--dk-edge-faint); }
html[data-theme="dark"] .tone-busy .cm-shape { fill: var(--dk-raised); }
html[data-theme="dark"] .cm-label { fill: var(--ink); }
html[data-theme="dark"] .tone-idle .cm-label, html[data-theme="dark"] .tone-hall .cm-label { fill: var(--dk-text); }
html[data-theme="dark"] .cm-detail { fill: var(--dk-text); }
html[data-theme="dark"] .cm-badge rect { fill: var(--brand-button); }
html[data-theme="dark"] .tone-alert .cm-badge rect { fill: var(--red); }
html[data-theme="dark"] .tone-office .cm-badge rect { fill: #9c7a31; }
html[data-theme="dark"] .tone-nurse .cm-badge rect { fill: var(--blue); }
html[data-theme="dark"] .campus-map-mini { background: var(--dk-veil); }
html[data-theme="dark"] .cm-mini-shape { fill: var(--dk-edge); }
@media (max-width: 660px) {
  .campus-map-viewport { min-height: 240px; }
  .campus-map-zoom { margin-left: 0; }
  .campus-map-mini { width: 104px; }
  .campus-map-legend .legend-scale { margin-left: 0; }
}

/* Zoom controls on the map itself, and the pass destination picker. */
/* A small +/−/whole-map stack in the map's empty bottom-left corner. */
.campus-map-controls { position: absolute; z-index: 2; left: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(255,255,255,.95); box-shadow: var(--elev-2); cursor: default; }
.campus-map-controls button { display: inline-grid; place-items: center; width: 26px; min-width: 26px; height: 26px; padding: 0; color: var(--ink); border: 0; border-radius: 7px; background: transparent; font-size: 16px; font-weight: 800; line-height: 1; cursor: pointer; }
.campus-map-controls button:hover { background: var(--teal-soft); color: var(--teal-dark); }
.campus-map-controls .campus-map-whole { display: inline-flex; gap: 5px; padding: 0 10px; font-size: 11px; }
.campus-map-slider { width: 96px; accent-color: var(--teal); cursor: pointer; }
.campus-map-level { min-width: 30px; padding-right: 8px; color: var(--slate); font-size: 10.5px; font-weight: 800; text-align: right; }
.cm-incoming circle { fill: #fff; stroke: var(--purple); stroke-width: 1.3; }
.cm-incoming text { fill: var(--purple); font-weight: 800; }
.cm-key.incoming { border: 1.5px solid var(--purple); background: #fff; border-radius: 50%; }
#modal:has(.pass-map) { width: min(860px, calc(100vw - 28px)); }
.pass-map .campus-map-viewport { min-height: 220px; max-height: 44vh; }
.pass-map .campus-map-controls .campus-map-whole span, .pass-map .campus-map-level { display: none; }
html[data-theme="dark"] .campus-map-controls { background: var(--dk-veil); }
html[data-theme="dark"] .campus-map-controls button { color: var(--ink); }
html[data-theme="dark"] .cm-incoming circle { fill: var(--dk-sunken); }
@media (max-width: 660px) {
  /* Phones pinch to zoom: a slim column in the map's empty top-left corner. */
  .campus-map-controls { left: 6px; bottom: 6px; }
  .campus-map-controls [data-zoom="in"] { order: -1; }
  .campus-map-controls button { min-width: 26px; height: 26px; font-size: 15px; }
  .campus-map-slider { display: none; }
  .campus-map-controls .campus-map-whole span { display: none; }
  .campus-map-level { display: none; }
}

/* ---- Oasis tab ------------------------------------------------------------ */
.oasis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.oasis-grid .empty-state { grid-column: 1 / -1; }
.oasis-card { display: grid; gap: 9px; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.oasis-card:hover, .oasis-card:focus-visible { border-color: var(--teal); box-shadow: var(--elev-2); }
.oasis-card.needs-reason { border-left: 4px solid var(--gold); background: linear-gradient(90deg, var(--gold-soft), var(--surface) 55%); }
.oasis-card-top { display: flex; align-items: center; gap: 10px; }
.oasis-card-top > div { flex: 1; min-width: 0; }
.oasis-card-top strong, .oasis-card-top small { display: block; }
.oasis-card-top small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.oasis-card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oasis-subject { color: var(--ink); font-size: 12px; font-weight: 650; }
.oasis-subject em { color: var(--muted); font-weight: 500; }
.oasis-from { color: var(--slate); font-size: 11px; }
.oasis-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.oasis-reason { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; color: var(--teal-dark); background: var(--teal-soft); }
.oasis-reason.missing { color: #7a5a18; background: var(--gold-soft); border: 1px dashed var(--gold); }
.oasis-reason.blue { color: var(--blue); background: var(--blue-soft); }
.oasis-reason.gold { color: #7a5a18; background: var(--gold-soft); }
.oasis-reason.green { color: var(--green); background: var(--green-soft); }
.oasis-reason.purple { color: var(--purple); background: var(--purple-soft); }
.oasis-reason.slate { color: var(--slate); background: var(--surface-soft); }
.oasis-mine { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--slate); white-space: nowrap; }
.oasis-form { display: grid; gap: 12px; }
.oasis-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.oasis-reason-choice { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); cursor: pointer; font-size: 12.5px; font-weight: 650; }
.oasis-reason-choice:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-dark); }
.oasis-reason-choice input { accent-color: var(--teal); }
html[data-theme="dark"] .oasis-card.needs-reason { background: linear-gradient(90deg, rgba(198,164,92,.16), var(--surface) 55%); }
html[data-theme="dark"] .oasis-reason.missing, html[data-theme="dark"] .oasis-reason.gold { color: #e7c98a; }
@media (max-width: 660px) { .oasis-reasons { grid-template-columns: 1fr; } }

/* ---- Visitors: one color everywhere a visitor badge shows up --------------- */
:root { --visitor: #c0267f; --visitor-soft: #fbe7f2; }
html[data-theme="dark"] { --visitor: #f07ab8; --visitor-soft: #3a1d31; }
.cm-visitor circle { fill: var(--visitor); stroke: #fff; stroke-width: .8; }
.cm-visitor text { fill: #fff; font-weight: 800; }
.cm-room.has-visitor .cm-shape { stroke: var(--visitor); stroke-width: 2.2; stroke-dasharray: 5 2.5; }
.cm-key.visitor { border-color: var(--visitor); background: var(--visitor); border-radius: 50%; }
.metric-card.fuchsia { --metric-color: var(--visitor); --metric-bg: var(--visitor-soft); }
.status-pill.visitor { color: var(--visitor); background: var(--visitor-soft); }
.visitor-panel { border-left: 4px solid var(--visitor); }
.visitor-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.visitor-chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; color: var(--visitor); border: 1px solid color-mix(in srgb, var(--visitor) 35%, transparent); border-radius: 12px; background: var(--visitor-soft); }
.visitor-chip strong, .visitor-chip small { display: block; }
.visitor-chip strong { color: var(--ink); font-size: 13px; }
.visitor-chip small { color: var(--slate); font-size: 11px; }
.visitor-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.visitor-badge { display: grid; align-content: start; gap: 10px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.visitor-badge.is-out { border-color: color-mix(in srgb, var(--visitor) 45%, var(--line-strong)); background: linear-gradient(160deg, var(--visitor-soft), var(--surface) 62%); }
.vb-top { display: flex; align-items: center; gap: 11px; }
.vb-top > div { flex: 1; min-width: 0; }
.vb-top strong, .vb-top small { display: block; }
.vb-top small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.vb-number { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; color: var(--slate); border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); font-size: 19px; font-weight: 850; }
.visitor-badge.is-out .vb-number { color: #fff; border-color: var(--visitor); background: var(--visitor); }
.vb-visitor strong { display: block; font-size: 15px; }
.vb-visitor small { display: block; margin-top: 2px; color: var(--slate); font-size: 12px; }
.vb-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 18px; color: var(--slate); font-size: 12px; }
.vb-where-room { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; color: var(--visitor); border-radius: 999px; background: var(--visitor-soft); font-weight: 750; }
.vb-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.card-header .visitor-day { flex: 0 0 auto; width: auto; }

/* ---- 2026-2027 map: construction zone and stair lines ------------------------ */
.cm-zone.construction { fill: rgba(246,168,38,.2); stroke: rgba(214,140,20,.55); stroke-width: 1.2; stroke-dasharray: 6 4; }
.cm-leader.dark { stroke: #a4acb6; }
html[data-theme="dark"] .cm-zone.construction { fill: rgba(246,168,38,.12); stroke: rgba(246,168,38,.45); }
html[data-theme="dark"] .cm-leader.dark { stroke: var(--dk-edge-2); }

/* ---- Bell sound ----------------------------------------------------------------- */
.bell-sound-button.is-muted { color: var(--muted); }
.bell-sound-button.needs-tap { color: #a66c13; border-color: var(--gold); animation: bell-tap 1.6s ease-in-out infinite; }
@keyframes bell-tap { 50% { box-shadow: 0 0 0 4px var(--gold-soft); } }
.bell-sound-host { margin-bottom: 14px; }
.bell-enabled { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.bell-enabled input { width: 16px; height: 16px; accent-color: var(--teal); }
.bell-sound-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 18px; }
.bell-sound-list { display: grid; gap: 8px; }
.bell-sound-option { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.bell-sound-option.selected { border-color: var(--teal); background: var(--teal-soft); }
.bell-sound-option label { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.bell-sound-option input { accent-color: var(--teal); }
.bell-sound-option strong, .bell-sound-option small { display: block; }
.bell-sound-option small { color: var(--muted); font-size: 11px; }
.bell-sound-side { display: grid; align-content: start; gap: 12px; }
.bell-sound-side input[type=range] { width: 100%; accent-color: var(--teal); }
.bell-upload { justify-self: start; cursor: pointer; }
@media (max-width: 760px) {
  .bell-sound-body { grid-template-columns: 1fr; }
  .bell-sound-card .card-header { flex-wrap: wrap; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .bell-sound-button.needs-tap { animation: none; } }

/* ---- Student movement: Live School feed and the Incoming students tile ----- */
.status-pill.transfer { color: var(--teal-dark); background: var(--teal-soft); }
.move-feed { display: grid; gap: 2px; max-height: 380px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.move-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.move-row:hover, .move-row:focus-visible { background: var(--surface-soft); }
.move-row:not(.is-active) { opacity: .6; }
.move-line { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.move-route { font-weight: 800; }
.move-time { color: var(--muted); font-size: 11px; text-align: right; }
.move-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--slate); font-size: 11px; }
.move-kind { padding: 1px 7px; color: var(--purple); border-radius: 999px; background: var(--purple-soft); font-size: 10.5px; font-weight: 750; }
.move-kind.kind-class, .move-kind.kind-prt { color: var(--teal-dark); background: var(--teal-soft); }
.move-kind.kind-nurse { color: var(--blue); background: var(--blue-soft); }
.move-kind.kind-office { color: #7a5a18; background: var(--gold-soft); }
.move-row.is-overdue .move-meta { color: var(--red); font-weight: 700; }
.incoming-card { border-left: 4px solid var(--teal); }
.incoming-group + .incoming-group { margin-top: 12px; }
.incoming-group h4 { margin: 0 0 6px; color: var(--slate); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.incoming-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.incoming-row + .incoming-row { margin-top: 6px; }
.incoming-row.is-overdue { border-color: var(--red); }
.incoming-who { flex: 1; min-width: 180px; cursor: pointer; }
.incoming-who strong, .incoming-who small { display: block; }
.incoming-who small { margin-top: 2px; color: var(--slate); font-size: 11.5px; }
.incoming-empty { margin: 0; }
.move-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.move-reasons .chip { padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 650; cursor: pointer; }
.move-reasons .chip:hover { border-color: var(--teal); color: var(--teal-dark); }

/* ---- Bell week planner --------------------------------------------------------- */
.bell-week-card { margin-bottom: 14px; }
.bell-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.bell-day { display: grid; align-content: start; gap: 6px; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.bell-day.is-today { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.bell-day.is-pinned { border-color: color-mix(in srgb, var(--gold) 60%, var(--line-strong)); background: var(--gold-soft); }
.bell-day.is-weekend { opacity: .72; }
.bell-day-head { display: flex; align-items: baseline; gap: 6px; }
.bell-day-head span { color: var(--muted); font-size: 11px; }
.bell-day-head em { margin-left: auto; color: var(--teal-dark); font-size: 10px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.bell-day select { width: 100%; min-width: 0; }
.bell-day small { color: var(--slate); font-size: 11px; }
.bell-day-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.bell-week-label { font-size: 12.5px; white-space: nowrap; }
.weekday-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.weekday-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; }
.weekday-chip:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-dark); }
.weekday-chip input { accent-color: var(--teal); }
html[data-theme="dark"] .bell-day.is-pinned { background: rgba(198,164,92,.12); }
@media (max-width: 1100px) { .bell-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 660px) {
  .bell-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bell-week-card .card-header { flex-wrap: wrap; gap: 8px; }
}

/* ---- Oasis: required first pick, added reasons, details ------------------------- */
.oasis-required { margin: 0; padding: 8px 11px; color: #7a5a18; border: 1px dashed var(--gold); border-radius: var(--radius-md); background: var(--gold-soft); font-size: 12.5px; font-weight: 700; }
.oasis-reason-choice.custom { border-style: dashed; }
.oasis-add-reason { display: flex; gap: 8px; }
.oasis-add-reason input { flex: 1; min-width: 0; }
.oasis-details { display: block; color: var(--ink); font-size: 11.5px; line-height: 1.35; }
td .oasis-details { margin-top: 3px; color: var(--slate); }
html[data-theme="dark"] .oasis-required { color: #e7c98a; background: rgba(198,164,92,.14); }

/* ---- Professional development ----------------------------------------------------- */
.status-pill.excused { color: var(--blue); background: var(--blue-soft); }
.pd-sessions { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.pd-sessions .empty-state { grid-column: 1 / -1; }
.pd-session { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.pd-session:hover, .pd-session:focus-visible { border-color: var(--teal); box-shadow: var(--elev-2); }
.pd-session-date { display: grid; place-items: center; width: 46px; flex: 0 0 46px; padding: 5px 0; border-radius: 10px; background: var(--teal-soft); color: var(--teal-dark); line-height: 1.05; }
.pd-session-date span { font-size: 10px; font-weight: 800; text-transform: uppercase; }
.pd-session-date strong { font-size: 19px; }
.pd-session-body { display: grid; flex: 1; gap: 4px; min-width: 0; }
.pd-session-body small { color: var(--slate); font-size: 11.5px; }
.pd-meter { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.pd-meter span { display: block; height: 100%; border-radius: 999px; background: var(--teal); }
#modal.pd-modal { width: min(860px, calc(100vw - 28px)); }
.pd-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; color: var(--slate); font-size: 12.5px; }
.pd-counts strong { color: var(--ink); }
.pd-detail-actions { display: flex; gap: 6px; margin-left: auto; }
.pd-card-status .card-body { display: grid; gap: 3px; }
.pd-card-status.linked { border-left: 4px solid var(--teal); }
.pd-card-status.missing { border-left: 4px solid var(--gold); }
.pd-card-status span { color: var(--slate); font-size: 12.5px; }

/* Metric cards size their columns to their longest line; without this a
   row of them pushes the page wider than a phone screen. */
.stack > *, .metric-grid { min-width: 0; }
@media (max-width: 660px) {
  /* Room for the bell button: slimmer top-bar buttons on phones. */
  .topbar-actions { gap: 6px; }
  .topbar .icon-button { width: 33px; height: 33px; flex-basis: 33px; }
  .school-clock strong { max-width: 112px; }
}

/* ---------------------------------------------------- emergency roll call --
   Built for a teacher holding a tablet in a car park: big targets, a colour
   you can read at a glance, and no information that does not help. */
.rollcall-head .card-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rollcall-head h2 { margin: 2px 0 2px; font-size: 26px; }
.rollcall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.rollcall-student {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left;
  padding: 16px 14px; min-height: 76px; border-radius: 14px; cursor: pointer; font: inherit;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
}
.rollcall-student:hover { border-color: var(--teal); transform: translateY(-1px); }
.rollcall-student:disabled { opacity: .6; cursor: default; }
.rollcall-student.here { border-color: #2f9e63; background: rgba(47,158,99,.14); }
.rollcall-name { font-weight: 650; font-size: 15.5px; }
.rollcall-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; opacity: .78; }
.rollcall-student.here .rollcall-meta { color: #1d7a49; opacity: 1; font-weight: 600; }
.rollcall-added { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  background: rgba(215,154,56,.22); color: #8a5b12; font-weight: 600; }
.rollcall-messages { border-left: 4px solid var(--teal); }
.rollcall-message { padding: 8px 0; border-bottom: 1px solid var(--line); }
.rollcall-message:last-child { border-bottom: 0; }
.rollcall-message strong { display: block; font-size: 15.5px; line-height: 1.4; }
.rollcall-message small { opacity: .7; }
@media (prefers-color-scheme: dark) {
  .rollcall-added { color: #f0c987; }
  .rollcall-student.here .rollcall-meta { color: #6fd79c; }
}
.rollcall-missing { display: flex; flex-wrap: wrap; gap: 6px; }
.rollcall-missing .chip { padding: 4px 10px; border-radius: 999px; font-size: 12.5px;
  background: rgba(214,72,72,.14); border: 1px solid rgba(214,72,72,.3); }

/* ------------------------------------------------------- class coverage --*/
.coverage-notes { padding: 10px 12px; border-radius: 12px; background: var(--surface-soft);
  border-left: 3px solid var(--teal); margin-bottom: 12px; }
.coverage-notes small { display: block; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .04em; opacity: .7; margin-bottom: 4px; }
.coverage-notes p { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.5; }
.coverage-mine { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.coverage-mine:last-of-type { border-bottom: 0; }
.coverage-period-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.coverage-candidates { display: flex; flex-direction: column; gap: 8px; }

/* ------------------------------------------- student safety information --*/
.safety-banner { display: flex; flex-direction: column; gap: 8px; }
.safety-row { padding: 10px 12px; border-radius: 12px; border-left: 4px solid; }
.safety-row strong { display: block; font-size: 14.5px; }
.safety-row small { display: block; margin-top: 2px; opacity: .8; }
.safety-row.health { background: rgba(214,72,72,.08); border-color: rgba(214,72,72,.5); }
.safety-row.health.severe { background: rgba(214,72,72,.16); border-color: #c63d3d; }
.safety-row.family { background: rgba(120,90,200,.1); border-color: rgba(120,90,200,.55); }
.safety-row.pickup { background: rgba(215,154,56,.14); border-color: #d79a38; }
.safety-manage-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.safety-manage-row small { display: block; opacity: .75; }

/* Roll call tiles with faces. */
.rollcall-student { flex-direction: row; align-items: center; gap: 12px; }
.rollcall-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rollcall-face { position: relative; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
  overflow: hidden; background: var(--surface-soft); }
.rollcall-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.rollcall-initials { display: none; width: 100%; height: 100%; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; }
.rollcall-face.failed .rollcall-photo { display: none; }
.rollcall-face.failed .rollcall-initials { display: flex; }
.rollcall-student.here .rollcall-face { box-shadow: 0 0 0 3px #2f9e63; }
.rollcall-search input { width: 100%; font-size: 16px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
/* Touch screens: map controls big enough to hit with a finger. */
@media (pointer: coarse) {
  .campus-map-region { min-height: 44px; padding: 10px 16px; font-size: 12px; }
  .campus-map-controls button { width: 44px; min-width: 44px; height: 44px; font-size: 19px; }
  .campus-map-controls .campus-map-whole { height: 44px; }
  .campus-map-zoom .button { min-width: 44px; min-height: 44px; }
  .task-shortcut { min-height: 56px; }
}
/* Phones: get a teacher to the class list quickly. The class tiles sit three
   to a row without their captions, and when nobody is on the way the
   incoming panel is just its heading and one line. */
@media (max-width: 660px) {
  /* On a phone the roster is the page. Everything a teacher only glances at
     moves below it, so "find a student" is reachable without scrolling. */
  .class-stack { display: flex; flex-direction: column; }
  .class-stack > .class-hero { order: 1; }
  .class-stack > #class-misplaced-card { order: 2; }
  .class-stack > #class-roster-card { order: 3; }
  .class-stack > #class-moves-card { order: 4; }
  .class-stack > #class-visitors-card { order: 5; }
  .class-stack > #class-metrics { order: 6; }
  .class-stack > .class-hero .class-meta { display: none; }
  .class-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .class-metric-grid .metric-card { min-height: 0; padding: 10px 12px; }
  .class-metric-grid .metric-icon, .class-metric-grid .metric-sub { display: none; }
  .class-metric-grid .metric-value { margin-top: 2px; font-size: 20px; }
  .incoming-card:has(.incoming-empty) .card-header p { display: none; }
  .incoming-card:has(.incoming-empty) .incoming-empty { font-size: 12px; }
}
/* mycampus.watch marks: quiet, on the dark panels only. */
.cw-badge.on-art { display: inline-flex; padding: 0; color: rgba(255,255,255,.7); vertical-align: middle; }
.portal-footer .cw-badge.on-art { margin-left: 10px; }
.cw-badge.on-art img { width: 20px; opacity: .95; }
.cw-badge { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 2px 0 0; padding: 6px 8px 2px; color: #7f94ad; font-size: 11px; letter-spacing: .02em; text-transform: none; }
.cw-badge img { width: 17px; height: auto; opacity: .85; }


/* Hub tabs: the pages inside one sidebar entry (Attendance, Activities,
   Staff, Settings, My Classroom). Scrolls sideways on a phone. */
.page-tabs { display: flex; gap: 4px; margin: -6px 0 18px; padding: 4px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.page-tabs::-webkit-scrollbar { display: none; }
.page-tab { flex: 0 0 auto; padding: 8px 14px; color: var(--slate); border-radius: 8px; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background var(--dur-1), color var(--dur-1); }
.page-tab:hover { color: var(--ink); background: var(--surface); }
.page-tab.active { color: var(--teal-dark); background: var(--surface); box-shadow: var(--elev-1); }
.page-tabs + .page-heading { min-height: 0; }

.section-label { margin: 4px 0 10px; color: var(--slate); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.link-button { padding: 0; color: inherit; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.link-button:hover strong, .link-button:hover { color: var(--teal); text-decoration: underline; }

.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.activity-card { display: grid; gap: 5px; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.activity-card:hover, .activity-card:focus-visible { border-color: var(--teal); box-shadow: var(--elev-2); }
.activity-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.activity-card-top strong { font-size: 13.5px; }
.activity-card small { color: var(--slate); font-size: 11.5px; }
.activity-card-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }

/* "Owes a detention" on roster cards, the profile and Scan ID. */
.detention-flag { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 8px; color: #8a5a00; border: 1px solid #ecd49a; border-radius: 999px; background: var(--gold-soft); font-size: 10.5px; font-weight: 700; }
html[data-theme="dark"] .detention-flag { color: #f0d08a; border-color: #6b5626; }

@media (max-width: 660px) {
  .page-tabs { margin: -4px -2px 14px; }
  .activity-grid { grid-template-columns: 1fr; }
}
.profile-tabs { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.profile-tabs button { flex: 0 0 auto; }

/* Four things the office does all day, at the top of Live School. */
.task-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.task-shortcut { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); text-align: left; cursor: pointer; transition: border-color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1); }
.task-shortcut:hover, .task-shortcut:focus-visible { border-color: var(--teal); box-shadow: var(--elev-2); }
.task-shortcut:active { transform: translateY(1px); }
.task-shortcut .task-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; color: var(--teal-dark); border-radius: 10px; background: var(--teal-soft); }
.task-shortcut strong { display: block; color: var(--ink); font-size: 13px; }
.task-shortcut small { color: var(--slate); font-size: 11px; }
@media (max-width: 920px) { .task-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .task-shortcuts { grid-template-columns: 1fr; } }

/* The morning scanner check: three lines, ticked or not. */
.readiness-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.readiness-list li { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-soft); }
.readiness-list li.ready { border-color: #bfe3cd; background: var(--green-soft, #edf8f1); }
.readiness-mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px; color: var(--slate); border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); font-size: 12px; font-weight: 800; }
.readiness-list li.ready .readiness-mark { color: #fff; border-color: #2f9e63; background: #2f9e63; }
.readiness-list strong { display: block; font-size: 13px; }
.readiness-list small { color: var(--slate); font-size: 11.5px; }

/* Settings: the save action stays on screen and says what is unsaved. */
.settings-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .settings-page { grid-template-columns: 1fr; } }
.settings-savebar { position: sticky; bottom: var(--corner-stack, 0px); z-index: 4; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 -4px 14px rgba(17,48,78,.06); }
.settings-dirty { color: var(--slate); font-size: 12px; font-weight: 700; }
.settings-dirty.unsaved { color: #8a5a00; }
.settings-dirty.unsaved::before { content: "● "; color: var(--gold, #d79a1e); }
.settings-page .field small.supporting { margin-top: 3px; font-size: 10.5px; line-height: 1.35; }

/* What to do when taps are still waiting. */
.queue-advice { margin: 6px 0 0; color: #8a5a00; font-size: 12px; font-weight: 600; }
html[data-theme="dark"] .queue-advice { color: #f0d08a; }

/* ---------------------------------------------------------------------------
   School themes

   The switcher in the bottom right sets data-school on <html>; CVCA is the
   :root default, so these blocks only need to describe the other two. Each
   school gets a dark block as well, because html[data-theme="dark"] sets some
   of the same tokens at equal specificity and sits earlier in this file - the
   two-attribute selector is what makes the school win there. Anything a school
   block sets in light mode and the dark block never touches (the chrome,
   accents, watermark) is inherited into dark mode and is listed once.
   --------------------------------------------------------------------------- */

html[data-school="walsh"] {
  --teal: #8a1538;
  --teal-dark: #6d0f2b;
  --teal-soft: #fbecf0;
  --gold: #bb8829;
  --gold-soft: #fbf2e1;
  --brand-chrome: #2d1019;
  --brand-chrome-2: #4a1a27;
  --brand-button: #8a1538;
  --brand-button-hover: #6d0f2b;
  --brand-accent: #f0c45e;
  --brand-accent-rgb: 240, 196, 94;
  --brand-highlight: #e9bb55;
  --brand-highlight-rgb: 233, 187, 85;
  --brand-art-from: #a5203f;
  --brand-art-mid: #8a1538;
  --brand-art-to: #5c0c24;
  --brand-art-glow: 214, 92, 120;
  --brand-art-shade: 48, 4, 18;
  --brand-art-meta: #f3c8d2;
  --brand-wash-1: #f8e7ec;
  --brand-wash-2: #fcf4f5;
  --brand-deep-1: #2b0710;
  --brand-deep-2: #59122a;
  --brand-deep-3: #8a1538;
  --brand-watermark: url("/assets/walsh-mascot.png");
  --brand-watermark-ratio: 420 / 451;
  --brand-watermark-opacity: .1;
}

html[data-school="walsh"][data-theme="dark"] {
  --ink: #f9eef1;
  --slate: #d3bcc3;
  --muted: #b499a1;
  --line: #46303a;
  --line-strong: #63454f;
  --canvas: #170d11;
  --surface: #23151a;
  --surface-soft: #2e1b22;
  --dk-deep: #120a0d;
  --dk-sunken: #2a1219;
  --dk-hover: #3a1621;
  --dk-raised: #451a27;
  --dk-edge: #6a3644;
  --dk-edge-2: #8a5361;
  --dk-text: #d5b3bd;
  --dk-text-2: #f2dde3;
  --dk-veil: rgba(35,21,26,.96);
  --dk-wash: rgba(238,112,145,.055);
  --dk-edge-faint: rgba(150,74,95,.45);
  --teal: #ef7b96;
  --teal-dark: #f8b3c3;
  --teal-soft: #45111f;
  --gold: #e1aa51;
  --gold-soft: #3b2e17;
  --brand-button: #a5203f;
  --brand-button-hover: #8a1538;
  --brand-button-line: #c94c6b;
  --brand-button-line-hover: #dd7690;
  --brand-art-from: #8e1735;
  --brand-art-mid: #75102c;
  --brand-art-to: #4a0a1d;
  --brand-art-glow: 186, 72, 100;
  --brand-art-shade: 34, 2, 12;
  --brand-wash-1: #4a1526;
  --brand-wash-2: #24090f;
}

html[data-school="sta"] {
  --teal: #7d6013;
  --teal-dark: #61490c;
  --teal-soft: #faf3e0;
  --gold: #a8841f;
  --gold-soft: #fbf3dd;
  --brand-chrome: #16181c;
  --brand-chrome-2: #2f3239;
  --brand-button: #23262c;
  --brand-button-hover: #14161a;
  --brand-accent: #e6c469;
  --brand-accent-rgb: 230, 196, 105;
  --brand-highlight: #dcb84f;
  --brand-highlight-rgb: 220, 184, 79;
  --brand-art-from: #3b3e46;
  --brand-art-mid: #23262c;
  --brand-art-to: #0f1013;
  --brand-art-glow: 214, 178, 94;
  --brand-art-shade: 8, 8, 10;
  --brand-art-meta: #ddd2ae;
  --brand-wash-1: #f6f0df;
  --brand-wash-2: #fbf8f1;
  --brand-deep-1: #0d0e11;
  --brand-deep-2: #23252b;
  --brand-deep-3: #4a4127;
  --brand-watermark: url("/assets/sta-mascot.png");
  --brand-watermark-ratio: 348 / 313;
  --brand-watermark-opacity: .13;
}

html[data-school="sta"][data-theme="dark"] {
  --ink: #f6f2e9;
  --slate: #cbc4b4;
  --muted: #a49d8d;
  --line: #3a3831;
  --line-strong: #565247;
  --canvas: #101010;
  --surface: #1a1a18;
  --surface-soft: #24231f;
  --dk-deep: #0a0a09;
  --dk-sunken: #1c1b17;
  --dk-hover: #2a281f;
  --dk-raised: #33301f;
  --dk-edge: #4d4a3c;
  --dk-edge-2: #6e6a56;
  --dk-text: #c9c2ae;
  --dk-text-2: #ece6d6;
  --dk-veil: rgba(26,26,24,.96);
  --dk-wash: rgba(230,196,105,.06);
  --dk-edge-faint: rgba(140,128,86,.45);
  --teal: #e0bd63;
  --teal-dark: #f0d590;
  --teal-soft: #3a3218;
  --gold: #e1aa51;
  --gold-soft: #3b2e17;
  --brand-button: #33373f;
  --brand-button-hover: #23262c;
  --brand-button-line: #b89a45;
  --brand-button-line-hover: #d9bb69;
  --brand-art-from: #2b2e35;
  --brand-art-mid: #1b1d22;
  --brand-art-to: #0a0b0d;
  --brand-art-glow: 190, 158, 86;
  --brand-art-shade: 4, 4, 6;
  --brand-wash-1: #2e2a1d;
  --brand-wash-2: #16150f;
}

/* ---------------------------------------------------------------------------
   The school switcher

   A pill in the bottom-right corner: the current crest, the school's short
   name, and one dot per school so it reads as a cycle rather than a logo.
   --------------------------------------------------------------------------- */

.school-switch {
  position: fixed;
  z-index: 34;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 8px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--elev-3);
  cursor: pointer;
  opacity: .72;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.school-switch:hover, .school-switch:focus-visible { opacity: 1; transform: translateY(-2px); box-shadow: var(--elev-4); }
.school-switch:active { transform: translateY(0); }
.school-switch-crest { width: 28px; height: 28px; flex: 0 0 28px; object-fit: contain; }
.school-switch-name { font-size: 12px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.school-switch-dots { display: flex; gap: 4px; margin-left: 2px; padding-left: 9px; border-left: 1px solid var(--line); }
.school-switch-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); transition: background var(--dur-1) var(--ease); }
.school-switch-dots i.on { background: var(--teal); }

html[data-theme="dark"] .school-switch { background: var(--surface-soft); }

@media (max-width: 720px) {
  .school-switch { right: 14px; bottom: 14px; padding: 6px 11px 6px 6px; }
  .school-switch-name { display: none; }
}