/* =========================================================================
   Houston School Options — design system
   Identity: charcoal-ink + brand gold on warm neutral; deep orange reserved
   for deadlines/urgency so it never competes with the brand gold.
   ========================================================================= */
:root {
  --ink:        #1f1f1f;   /* near-black charcoal: headings, sidebar */
  --ink-soft:   #3a3a3a;
  --primary:    #d9a300;   /* brand gold, for filled surfaces (buttons, active nav) — always pair with dark ink text, not white */
  --primary-d:  #b78800;
  --link:       #7f6400;   /* deep gold, accessible as text on light surfaces (links, ghost buttons) */
  --gold:       #fcb913;   /* true bright brand gold, for decorative accents/badges/bars only (non-text) */
  --gold-pale:  #fff2d2;
  --accent:     #c2410c;   /* burnt orange: overdue / urgent (kept distinct from gold) */
  --accent-2:   #b45309;   /* amber-700: upcoming */
  --success:    #15803d;
  --danger:     #b91c1c;
  --bg:         #f6f5f2;
  --surface:    #ffffff;
  --surface-2:  #efece4;
  --border:     #e0ddd3;
  --text:       #201f1c;
  --muted:      #6b6a63;
  --radius:     10px;
  --radius-sm:  6px;
  --shadow:     0 1px 2px rgba(31,31,31,.07), 0 4px 16px rgba(31,31,31,.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow-x: hidden; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
/* Background-scroll lock while a modal or the mobile nav drawer is open
   (see lockBodyScroll() in ui.js) — plain overflow:hidden alone doesn't stop
   iOS Safari from scrolling the page behind a fixed overlay, so the JS pins
   the body with position:fixed; this class is a harmless reinforcement. */
body.scroll-locked { overflow: hidden; }
h1,h2,h3,h4 { color: var(--ink); font-weight: 650; line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 1.5rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff;
  padding: .6rem 1rem; z-index: 100; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

.boot { padding: 4rem; text-align: center; color: var(--muted); }

/* --- App shell ----------------------------------------------------------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; min-height: 100dvh; }
.sidebar {
  background-color: var(--ink); color: #d6d3ca; padding: 1.1rem .8rem;
  background-image: linear-gradient(rgba(31,31,31,.84), rgba(31,31,31,.84)), url('/assets/img/chalkboard-texture.jpg');
  background-repeat: no-repeat; background-size: cover; background-position: center;
  display: flex; flex-direction: column; gap: .2rem;
  border-top: 3px solid var(--gold);
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
}
.brand { padding: .3rem .4rem 1.1rem; display: flex; align-items: center; justify-content: center; }
.brand img.logo { max-width: 100%; height: auto; display: block; }
.nav-item {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
  border-radius: var(--radius-sm); color: #c7c4ba; cursor: pointer; font-size: .92rem;
  border: none; background: none; width: 100%; text-align: left;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--gold); color: var(--ink); font-weight: 650; }
.nav-spacer { flex: 1; }
.sidebar .who { font-size: .8rem; color: #a6a399; padding: .4rem .7rem; border-top: 1px solid rgba(255,255,255,.1); margin-top:.4rem;}

.main { padding: 1.6rem clamp(1rem, 3vw, 2.4rem); max-width: 1180px; }
.mobile-topbar { display: none; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.topbar > *:first-child { min-width: 0; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* --- Mobile --------------------------------------------------------------- */
/* Compound selector (.btn.hamburger, not just .hamburger) so this reliably
   beats .btn's own unconditional `display: inline-flex` — with equal
   specificity, whichever rule is LATER in the file wins, which was silently
   overriding this and showing the hamburger button on every screen size. */
.btn.hamburger { display: none; }
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 232px; transform: translateX(-100%);
    transition: transform .2s ease; z-index: 40; box-shadow: var(--shadow);
    /* Keep content clear of the iPhone notch/Dynamic Island and the
       home-indicator bar; max() falls back to the normal padding on
       devices with no inset (env() resolves to 0 there). */
    padding-top: max(1.1rem, env(safe-area-inset-top));
    padding-bottom: max(1.1rem, env(safe-area-inset-bottom));
    padding-left: max(.8rem, env(safe-area-inset-left));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .sidebar.open { transform: translateX(0); }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 39; }
  .btn.hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0;
  }
  /* Lives outside <main> so it survives every view's clear(main) call —
     detail-drilldown pages, "back" links, etc. can never wipe it out. */
  .mobile-topbar {
    display: block;
    padding: max(.9rem, env(safe-area-inset-top)) clamp(1rem, 3vw, 2.4rem) .4rem;
  }
  .nav-item { padding: .7rem .8rem; font-size: .95rem; }
  /* Title and its actions (search/buttons) each get their own full-width
     row, rather than fighting for space on one line — that's what was
     pushing the "+ New client"-style buttons past the edge of the screen. */
  .topbar { flex-direction: column; align-items: stretch; }
  .page-actions { width: 100%; }
  .pill-search { width: 100%; }
  .pill-search input { max-width: none; }
  /* The hamburger bar above already provides top clearance and its own
     bottom padding — main's normal 1.6rem top padding would stack on top
     of that unnecessarily, producing much more empty space above the page
     title than anywhere else on the page. */
  .main { padding-top: .5rem; }
}

/* --- Touch devices (iOS/Android phones & tablets) -------------------------
   Gated on (pointer: coarse) rather than a width breakpoint, since these are
   behavioral/touch-target fixes, not layout changes — this guarantees a
   mouse-driven desktop browser never matches, even in a narrow window. */
@media (pointer: coarse) {
  /* iOS Safari auto-zooms the page when a focused form control computes to
     less than 16px — this is the standard fix. */
  .field input, .field select, .field textarea { font-size: 16px; }
  /* Larger tap area around each checkbox/radio row without changing the
     visual glyph size. */
  .field.inline { padding: .3rem 0; }
  .check-grid { gap: .3rem 1rem; }
  /* Comfortable touch targets (Apple HIG ~44pt) for primary actions and the
     modal close button; .btn.sm is left alone since it's used densely in
     tables/cards where forcing 44px would cause its own layout problems. */
  .btn:not(.sm) { min-height: 44px; }
  .modal .close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* --- Cards / grid -------------------------------------------------------- */
.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { .grid.cols-2,.grid.cols-3,.grid.cols-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow);
}
.card h2, .card h3 { margin-top: 0; }
.card-hd { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.8rem; flex-wrap: wrap; }
.card-hd > *:first-child { min-width: 0; }

.stat { display: flex; flex-direction: column; gap: .15rem; }
.stat .num { font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1; }
.stat .lbl { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat.alert .num { color: var(--accent); }

/* --- Progress ------------------------------------------------------------ */
.progress { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  padding: .5rem .9rem; border-radius: var(--radius-sm); display: inline-flex;
  align-items: center; gap: .4rem; line-height: 1; touch-action: manipulation;
}
.btn:hover { border-color: #bcc6c8; text-decoration: none; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--ink); }
.btn.primary:hover { background: var(--primary-d); border-color: var(--primary-d); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--link); }
.school-toggle { padding-left: 0; padding-right: 0; margin-top: .5rem; font-weight: 600; }
.school-toggle .chevron { display: inline-block; width: 1em; color: var(--muted); }
.btn.danger { color: var(--danger); border-color: #f0c4c4; }
.btn.sm { padding: .32rem .6rem; font-size: .82rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.nav-item, .clickable, a { touch-action: manipulation; }

/* --- Forms --------------------------------------------------------------- */
.field { margin-bottom: .85rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .3rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
/* Checkboxes/radios must NOT inherit the text-input sizing above — that rule
   was stretching every checkbox to 100% width with input-field padding,
   which is what made them look huge and pushed their labels far away. */
.field input[type="checkbox"], .field input[type="radio"] {
  width: 16px; height: 16px; flex: 0 0 auto; padding: 0; margin: 0;
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface);
  accent-color: var(--primary);
}
.field textarea { min-height: 76px; resize: vertical; }
.field .err { color: var(--danger); font-size: .78rem; margin-top: .25rem; }
.field.inline { display: flex; align-items: center; gap: .5rem; }
.field.inline label { margin: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* Groups of checkboxes: always columns, never a single scattered vertical list.
   Explicit equal-width columns (not content-driven auto-fit) so every checkbox
   lines up exactly with the ones above and below it. The column count itself
   responds to the modal's actual rendered width via a container query — not a
   viewport media query, since the modal's width and the viewport's width are
   two different things. */
.check-grid {
  display: grid; grid-template-columns: 1fr;
  gap: .55rem 1rem; margin: .3rem 0 .8rem; align-items: center;
}
@container (min-width: 400px) {
  .check-grid { grid-template-columns: repeat(2, 1fr); }
}
.check-grid label.field.inline { margin: 0; white-space: nowrap; gap: .45rem; }

/* --- Tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
@media (max-width: 640px) {
  .hide-mobile { display: none; }
  .cal-cell { min-height: 56px; padding: .2rem; }
  .cal-dow { font-size: .62rem; padding: .35rem .1rem; }
  /* A table's columns each try to keep their natural, unwrapped width —
     hiding some columns helps, but a cell with two or three action buttons
     in it still forces the whole table wider than the phone regardless of
     how many other columns are hidden. Below this width, drop the grid
     entirely and stack each row as its own compact card instead — every
     value gets the full screen width, so nothing needs to scroll to be
     read or tapped. data-label (set in JS) restores the column heading as
     inline text so a bare number or badge still has context once it's on
     its own line. */
  .table-wrap { overflow-x: visible; border: none; background: none; }
  .table-wrap table.data, .table-wrap table.data thead, .table-wrap table.data tbody,
  .table-wrap table.data th, .table-wrap table.data td, .table-wrap table.data tr {
    display: block; width: auto;
  }
  .table-wrap table.data thead { position: absolute; left: -9999px; }
  .table-wrap table.data tr {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .7rem .8rem; margin-bottom: .6rem;
  }
  .table-wrap table.data tr.clickable { cursor: pointer; }
  .table-wrap table.data td { padding: .18rem 0; border: none; }
  .table-wrap table.data td[data-label]::before {
    content: attr(data-label) ": "; font-weight: 600; color: var(--muted); font-size: .78rem;
  }
  .table-wrap table.data td:first-child { padding-top: 0; }
  .table-wrap table.data td:last-child { padding-bottom: 0; }
}
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--border); }
table.data th { background: var(--surface-2); color: var(--ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #f8fafa; }
.clickable { cursor: pointer; }

/* --- Badges / status ----------------------------------------------------- */
.badge {
  display: inline-block; padding: .16rem .5rem; border-radius: 99px; font-size: .74rem;
  font-weight: 600; background: var(--surface-2); color: var(--ink-soft); white-space: nowrap;
}
.badge.green  { background: #dcfce7; color: #14532d; }
.badge.amber  { background: #fef3c7; color: #92400e; }
.badge.red    { background: #fee2e2; color: #991b1b; }
.badge.blue   { background: #dbeafe; color: #1e40af; }
.badge.grey   { background: #e5eaeb; color: #475457; }

/* --- Date chips (due date vs. appointment date, deliberately distinct) --- */
.date-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .16rem .55rem .16rem .45rem; border-radius: 99px;
  font-size: .76rem; font-weight: 600; white-space: nowrap; line-height: 1.4;
}
.date-chip .chip-ic { display: inline-flex; flex: 0 0 auto; }
.date-chip.due { background: var(--surface-2); color: var(--ink-soft); }
.date-chip.due.overdue { background: #fee2e2; color: #991b1b; }
.date-chip.appt { background: #dbeafe; color: #1e40af; }
.date-chip.appt.pending { background: var(--gold-pale); color: #92400e; }

/* --- Calendar -------------------------------------------------------------- */
.cal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; gap: .5rem; flex-wrap: wrap; }
.cal-hd h2 { margin: 0; min-width: 0; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.cal-dow {
  background: var(--surface-2); color: var(--ink-soft); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; text-align: center; padding: .5rem .2rem;
}
.cal-cell { background: var(--surface); min-height: 78px; padding: .3rem; display: flex; flex-direction: column; gap: .18rem; }
.cal-cell.cal-out { background: var(--bg); }
.cal-cell.cal-today { background: var(--gold-pale); }
.cal-daynum { font-size: .76rem; font-weight: 700; color: var(--ink-soft); }
.cal-today .cal-daynum { color: var(--link); }
.cal-item {
  font-size: .66rem; padding: .08rem .32rem; border-radius: 4px; cursor: pointer;
  touch-action: manipulation; line-height: 1.25;
}
.cal-item-main, .cal-item-loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-item-loc { opacity: .75; font-size: .92em; }
.cal-item.due { background: var(--surface-2); color: var(--ink-soft); }
.cal-item.appt { background: #dbeafe; color: #1e40af; }
.cal-more { font-size: .66rem; color: var(--link); cursor: pointer; font-weight: 600; }

/* --- Requirement rows ---------------------------------------------------- */
.req { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .5rem .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.req:last-child { border-bottom: none; }
.req .meta { flex: 1 1 220px; min-width: 0; }
.req .title { font-weight: 600; color: var(--ink); }
.req .sub { font-size: .82rem; color: var(--muted); margin-top: .15rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.req .actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.req.overdue .title::after { content: "Overdue"; margin-left:.5rem; font-size:.7rem; color:var(--accent); font-weight:700; }

/* --- Timeline ------------------------------------------------------------ */
.timeline { position: relative; padding-left: 1.2rem; }
.timeline::before { content:""; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--border); }
.tl-item { position: relative; padding: .35rem 0 .7rem; }
.tl-item::before { content:""; position:absolute; left:-1.2rem; top:.55rem; width:10px; height:10px; border-radius:50%; background:var(--primary); border:2px solid var(--surface); }
.tl-item.appointment::before { background: var(--accent-2); }
.tl-date { font-size:.78rem; color: var(--muted); font-weight:600; }

/* --- Auth screens -------------------------------------------------------- */
.auth-wrap {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right))
           max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
  background-color: var(--ink);
  background-image:
    radial-gradient(1200px 600px at 20% -10%, rgba(58,58,58,.55) 0%, transparent 55%),
    linear-gradient(rgba(31,31,31,.84), rgba(31,31,31,.84)),
    url('/assets/img/chalkboard-texture.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, cover;
  background-position: center, center, center;
}
.auth-card { background: var(--surface); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.25);
  width: 100%; max-width: 400px; padding: 2rem 1.8rem; }
.auth-card .brand { padding: 0 0 1.4rem; justify-content: center; }
.auth-sub { color: var(--muted); font-size: .9rem; margin: -.6rem 0 1.2rem; }

/* --- Misc ---------------------------------------------------------------- */
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.stack > * + * { margin-top: .8rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.spread { display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap: wrap; }
.spread > *:first-child { min-width: 0; }
.empty { text-align: center; padding: 2.4rem 1rem; color: var(--muted); }
.pill-search { display:flex; gap:.5rem; align-items:center; min-width: 0; flex: 1 1 auto; }
.pill-search input { max-width: 260px; width: 100%; min-width: 0; }
hr.sep { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

/* --- Toasts -------------------------------------------------------------- */
.toasts {
  position: fixed; z-index: 90; display: flex; flex-direction: column; gap: .5rem;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
}
.toast { background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: var(--radius-sm);
  box-shadow: var(--shadow); font-size: .9rem; max-width: 340px; }
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

/* --- Modal --------------------------------------------------------------- */
.modal-scrim {
  position: fixed; inset: 0; background: rgba(31,31,31,.5); display: grid; place-items: center;
  z-index: 80; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
                        max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
.modal { background: var(--surface); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.3);
  width: 100%; max-width: 560px; max-height: 90vh; max-height: 90dvh;
  overflow: auto; -webkit-overflow-scrolling: touch; }
.modal-hd { display:flex; align-items:center; justify-content:space-between; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--border); position: sticky; top:0; background: var(--surface); }
.modal-bd { padding: 1.3rem; container-type: inline-size; }
.modal-ft {
  padding: 1rem 1.3rem max(1rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .5rem;
  position: sticky; bottom:0; background: var(--surface);
}
.modal .close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--muted); line-height:1; touch-action: manipulation; }

.print-masthead { display: none; }

@media print {
  .sidebar, .page-actions, .btn, .hamburger, .mobile-topbar { display: none !important; }
  /* html/body/.shell are all height-constrained (100%/100vh) for the normal
     app UI, which makes some browsers' print/PDF export treat the page as a
     single fixed-height "screenshot" — capturing only what's visible on
     screen (plus its scrollbar) instead of flowing content across as many
     printed pages as it actually needs. Breaking that constraint for print
     is what lets it paginate normally. */
  html, body { height: auto !important; overflow: visible !important; }
  .shell { display: block !important; min-height: 0 !important; grid-template-columns: 1fr; }
  .main { max-width: none !important; padding: 0 clamp(1rem, 3vw, 2.4rem) !important; }
  .print-masthead { display: block; padding: 0 clamp(1rem, 3vw, 2.4rem); margin-top: 1.2rem; }
  .print-masthead img.logo { max-width: 260px; height: auto; }
  /* Cards can legitimately be very tall (a school with a long requirement
     list) — telling the whole card to never break across pages is what was
     forcing it into a single, uncuttable block that then got clipped. Keep
     individual rows from splitting instead; that's the part that actually
     looks bad mid-break. */
  .card { box-shadow: none; border-color: #ccc; }
  .req { break-inside: avoid; }
  /* A printed report should show full detail regardless of what was
     expanded/collapsed on screen — collapsing isn't a meaningful concept on
     paper. Keep the "X/Y complete" summary text (it's the only place that
     figure lives for the admin view) but drop the button chrome/chevron,
     since nothing on a printed page is clickable. */
  .school-details { display: block !important; }
  .school-toggle {
    display: block !important; pointer-events: none; background: none !important;
    border: none !important; padding: 0 0 .3rem !important; color: var(--ink) !important;
  }
  .school-toggle .chevron { display: none !important; }
  .table-wrap { overflow: visible !important; border: none; }
  body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}