/**
 * sidebar-components.css — MVSD sidebar content components.
 *
 * Two things live here:
 *   1. The RIGHT-HAND RAIL layout for `page`, `site_article` and
 *      `mvsd_article` (see MVSD-SIDEBAR-RAIL in mvsd_core.theme).
 *   2. The six narrow-column `sidebar_*` paragraph components.
 *
 * Everything is built for a ~300px column. The rail is the constraint, not an
 * afterthought: buttons stretch and centre, the TOC wraps instead of scrolling,
 * media is capped at 100% width, and the contacts block reuses the department
 * sidebar's own classes so it reads identically at that width.
 *
 * Loaded globally from mvsd_core.libraries.yml AFTER css/layout.css, but every
 * rule that has to beat layout.css also carries a second class for specificity,
 * so aggregation order can never silently undo it.
 *
 * NOT in panels.css by design — that file has had heavy recent edits.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. RAIL LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --sb-rail-width: 300px;
  --sb-rail-gap: 2.5rem;
}

/* ── Basic pages (node.html.twig) ──────────────────────────────────────────
   Source order is main-then-rail, which is both the reading order for AT and
   the stacking order on phones. No grid-column pinning needed. */
.page-layout--rail-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sb-rail-width);
  gap: var(--sb-rail-gap);
  align-items: start;
}
.page-layout--rail-right > .page-main {
  min-width: 0;
}

/* ── Articles ──────────────────────────────────────────────────────────────
   layout.css pins .article-aside to grid column 1 (the historic left feed
   rail). When the node carries sidebar content the rail moves to the RIGHT.
   Doubled class = specificity 0,3,0, which beats layout.css's 0,2,0 whatever
   order the aggregator picks. */
.article-layout.article-layout--rail-right > .article-aside {
  grid-column: 2;
  grid-row: 1;
}
.article-layout.article-layout--rail-right > .article-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.article-layout.article-layout--rail-right {
  grid-template-columns: minmax(0, 1fr) var(--sb-rail-width);
}

/* Feed hidden AND no sidebar content → no rail at all, so don't reserve a
   column for it. */
.article-layout.article-layout--single {
  grid-template-columns: minmax(0, 1fr);
}
.article-layout.article-layout--single > .article-main {
  grid-column: 1;
}

/* ── The rail itself ──────────────────────────────────────────────────────── */
/* ── Sticky rail (field_sidebar_sticky) ─────────────────────────────────────
   Same three declarations .dept-col-left has used all along.

   ⛔ `align-self: start` is REQUIRED, and it is also why sticking a CHILD of
   the rail never worked: .page-layout--rail-right sets `align-items: start`, so
   the rail box is only as tall as its content and a sticky child has no range
   to travel in. The sticky element has to BE the grid item, whose containing
   block is the full-height grid area.

   THE `top` HERE IS ONLY THE NO-JS FALLBACK. js/sidebar-sticky.js overwrites it
   inline on every measurement, exactly as js/dept-sticky-sidebar.js has always
   done for the LEFT (department) sidebar. See that file for the why. */
.node-rail--sticky {
  position: sticky;
  top: 6.5rem;
  align-self: start;
}

/* ⛔ The rail is NOT a scroll container, and must never become one again.
   It used to be `max-height: calc(100vh - 8rem); overflow-y: auto`, which kept
   a tall rail reachable but made it scroll inside itself. With the school
   switcher and the contents list both open that produced NESTED vertical
   scrollbars. Measured with both open: ~1478px of rail against 625px of usable
   viewport at 1366x768, and it overflows at 1920x1080 (937px) too, so this is a
   content problem and not a screen-size one — it must not be a media query.

   ⛔ AND IT IS NOT `bottom` EITHER. A short-lived version of this file used
   `.is-tall { top: auto; bottom: 1.25rem; }`. Measured on the Family Handbook,
   that rail NEVER stuck: sticky-bottom offsets a box UPWARD, and the rail
   already sits flush with the top of its grid area, so the shift is clamped to
   zero and the rail scrolls clean off the top of the window. The working
   mechanism is a COMPUTED `top`, which js/sidebar-sticky.js supplies. */

/* Stacked on narrow screens, sticky would trap the reader in a tall column.
   The JS also clears its inline `top` below this width. */
@media (max-width: 900px) {
  .node-rail--sticky {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

.node-rail {
  display: flex;
  flex-direction: column;
  /* Enough air that a wrapped caption never crowds the next component's
     underlined heading. */
  gap: var(--sb-rail-gap-block, 1.5rem);
  min-width: 0;
}

/* The paragraph field renders all of its items inside a single unclassed
   wrapper div, and each item gets a wrapper of its own, so .node-rail has exactly ONE flex child and the gap above
   falls between that wrapper and nothing. The blocks themselves ended up
   0-11px apart, which read as no spacing at all. Give the wrapper the same
   column layout so the gap lands between the components, where it belongs.
   Matched by what it contains rather than by position, so an extra child in
   the rail later cannot silently pick up flex layout it was not meant to. */
.node-rail > div:has(.sb),
.node-rail > div:has(.para--button-group) {
  display: flex;
  flex-direction: column;
  gap: var(--sb-rail-gap-block, 1.5rem);
  min-width: 0;
}
/* Inside an article the rail sits above the news feed; separate them. */
.article-aside > .node-rail:not(:last-child) {
  padding-bottom: 1.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border, #e6ece9);
}

/* Nothing in the rail may push the page sideways. */
.node-rail,
.node-rail * {
  max-width: 100%;
}
.node-rail img {
  height: auto;
}

/* ── Mobile: rail drops below the main column ─────────────────────────────── */
@media (max-width: 900px) {
  .page-layout--rail-right {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .page-layout--rail-right > .node-rail {
    order: 2;
    margin-top: var(--space-6, 1.5rem);
    border-top: 2px solid var(--color-border, #e6ece9);
    padding-top: var(--space-6, 1.5rem);
  }
  /* Articles: layout.css already collapses .article-layout to one column and
     gives .article-aside order:2. Clear our column pinning so grid-column:2
     cannot spawn a phantom second track. */
  .article-layout.article-layout--rail-right {
    grid-template-columns: 1fr;
  }
  .article-layout.article-layout--rail-right > .article-aside,
  .article-layout.article-layout--rail-right > .article-main {
    grid-column: 1;
    grid-row: auto;
  }
  /* Sticky is pointless (and can trap the reader) in a stacked column. */
  .node-rail .sb--toc-sticky {
    position: static;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SHARED COMPONENT SHELL
   ═══════════════════════════════════════════════════════════════════════════ */

.node-rail .sb {
  margin: 0;
  min-width: 0;
}

/* One heading treatment for every component, matching .dept-sidebar__heading
   so a rail reads as part of the same family as a department sidebar. */
.node-rail .sb__heading {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-primary, #01491f);
  letter-spacing: var(--ls-loose, 0.05em);
  text-transform: uppercase;
  margin: 0 0 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid currentColor;
  line-height: 1.3;
  /* Long single words (a URL, a long surname) wrap instead of overflowing. */
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. SIDEBAR: ON THIS PAGE  (sb--toc)
   ═══════════════════════════════════════════════════════════════════════════ */

.node-rail .sb--toc {
  background: var(--color-bg-subtle, #fafafb);
  border-left: 3px solid var(--color-accent, #c8a862);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.1rem 0.9rem;
}
/* The rail card supplies the frame; suppress any full-width page-TOC card
   styling inherited from paragraph-toc.css. */
.node-rail .sb--toc.para--page-toc {
  box-shadow: none;
  max-width: none;
  float: none;
  width: auto;
}
.node-rail .sb-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sbtoc;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.node-rail .sb-toc__list li {
  margin: 0;
  padding: 0;
  min-width: 0;
}
.node-rail .sb-toc__list a {
  display: block;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--color-text, #1a2a20);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-primary, #01491f) 50%, transparent);
  padding: 0.1rem 0;
  /* Narrow column: wrap mid-word rather than scroll sideways. */
  overflow-wrap: anywhere;
}
.node-rail .sb-toc__list a:hover,
.node-rail .sb-toc__list a:focus-visible {
  color: var(--color-primary, #01491f);
  border-bottom-style: solid;
}
.node-rail .sb-toc__list a.is-current {
  font-weight: 700;
  color: var(--color-primary, #01491f);
}
/* Nested H3 entries — indent, but not so far that they run out of room. */
.node-rail .sb-toc__list .para-toc__sublist {
  list-style: none;
  margin: 0.3rem 0 0.2rem 0.65rem;
  padding: 0 0 0 0.5rem;
  border-left: 2px solid var(--color-border, #e6ece9);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.node-rail .sb-toc__list .para-toc__sublist a {
  font-size: 0.8125rem;
  border-bottom: none;
}
.node-rail .sb-toc__noscript {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #5a5a5a);
  margin: 0;
}
.node-rail .sb--toc-sticky {
  position: sticky;
  top: 6.5rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}

/* ── Collapsible rail TOC (field_para_toc_collapsible, 2026-09-10) ──────────
   The heading becomes the toggle. A 25-section list is longer than most
   screens, so being able to fold it away matters in a narrow rail.
   When it is BOTH sticky and open, the sticky rule above supplies the
   max-height and overflow, so the list scrolls inside itself rather than
   running off the bottom of the viewport. */
.node-rail .sb--toc-accordion > .sb-toc__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, .5rem);
}
.node-rail .sb--toc-accordion > .sb-toc__summary::-webkit-details-marker {
  display: none;
}
/* Chevron, matching the accordion paragraph's affordance. */
.node-rail .sb--toc-accordion > .sb-toc__summary::after {
  content: "";
  flex: 0 0 auto;
  width: .75rem;
  height: .75rem;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: transform var(--transition-fast, .15s) ease;
}
.node-rail .sb--toc-accordion[open] > .sb-toc__summary::after {
  transform: rotate(180deg);
}
.node-rail .sb--toc-accordion > .sb-toc__summary:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* The heading carries the chevron AND a word, because a small rotating caret
   alone is easy to miss in a narrow rail. Both words ship in the markup and
   CSS picks one, so the state stays translatable. */
.node-rail .sb--toc-accordion > .sb-toc__summary {
  gap: var(--space-2, .35rem);
}
.node-rail .sb-toc__summary-text {
  flex: 1 1 auto;
}
.node-rail .sb-toc__hint {
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: var(--font-weight-regular, 400);
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .75;
}
.node-rail .sb--toc-accordion:not([open]) > .sb-toc__summary .sb-toc__hint-hide,
.node-rail .sb--toc-accordion[open] > .sb-toc__summary .sb-toc__hint-show {
  display: none;
}

/* The fold. height is animated by js/paragraph-toc.js; overflow is set inline
   only while a transition is running, so a sticky rail can still scroll here. */
.node-rail .sb-toc__panel {
  will-change: height;
}

/* Second way out, at the BOTTOM of the list. */
.node-rail .sb-toc__collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
  margin-top: .75rem;
  padding: .4rem .5rem;
  border: 1px solid var(--color-border, #d3d8dd);
  border-radius: var(--radius-sm, 4px);
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: .8125rem;
  cursor: pointer;
  transition: background var(--transition-fast, .15s) ease,
              border-color var(--transition-fast, .15s) ease;
}
.node-rail .sb-toc__collapse::after {
  content: "";
  width: .7rem;
  height: .7rem;
  background-color: currentColor;
  /* Caret UP: this control only ever closes. */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.node-rail .sb-toc__collapse:hover {
  background: var(--color-bg-subtle, #f4f6f8);
  border-color: var(--color-primary);
}
.node-rail .sb-toc__collapse:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .node-rail .sb-toc__panel { will-change: auto; }
  .node-rail .sb-toc__collapse { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .node-rail .sb--toc-accordion > .sb-toc__summary::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. SIDEBAR: TEXT  (sb--text)
   ═══════════════════════════════════════════════════════════════════════════ */

.node-rail .sb-text__body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text, #1a2a20);
  overflow-wrap: anywhere;
}
.node-rail .sb-text__body > *:first-child { margin-top: 0; }
.node-rail .sb-text__body > *:last-child  { margin-bottom: 0; }
.node-rail .sb-text__body p { margin: 0 0 0.7rem; }
.node-rail .sb-text__body ul,
.node-rail .sb-text__body ol {
  margin: 0 0 0.7rem;
  padding-left: 1.15rem;
}
.node-rail .sb-text__body li { margin-bottom: 0.3rem; }
/* Headings inside the body step down — an H2 at page scale would dwarf the
   component heading above it. */
.node-rail .sb-text__body h2,
.node-rail .sb-text__body h3,
.node-rail .sb-text__body h4 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0.9rem 0 0.35rem;
  color: var(--color-primary, #01491f);
  line-height: 1.3;
}
/* A pasted table would otherwise blow the column out. */
.node-rail .sb-text__body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  font-size: 0.8125rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. SIDEBAR: BUTTONS  (sb--buttons)
   Vertical stack, every button stretched to the rail width, label centred.
   Equalisation is structural — there is no editor setting that can undo it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Structure, sizing and every variant colour come from the house button
   system in css/paragraphs.css (.para--button-group + --btn-layout--stacked,
   which already gives width:100% and a column flow). Only the things that a
   300px column needs differently are set here. */
.node-rail .sb--buttons .para-btn-group__list {
  gap: 0.5rem;
}
.node-rail .sb--buttons .para-btn {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  /* House medium is 1rem / 0.75em 1.4em — too big for the rail. */
  font-size: 0.875rem;
  padding: 0.6rem 0.85rem;
  min-height: 2.75rem;
  line-height: 1.25;
  /* A long label wraps inside the button instead of widening it. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.node-rail .sb--buttons .para-btn__label {
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. SIDEBAR: DIVIDER  (sb--divider)
   ═══════════════════════════════════════════════════════════════════════════ */

.node-rail .sb--divider {
  border: 0;
  margin: 0.25rem 0;
  width: 100%;
}
.node-rail .sb--divider--line {
  border-top: 1px solid var(--color-border, #e6ece9);
}
.node-rail .sb--divider--thick {
  border-top: 3px solid var(--color-accent, #c8a862);
}
.node-rail .sb--divider--spacer {
  height: 0.75rem;
  border: 0;
}
/* Ornamental at rail scale: a short centred rule with a diamond, sized so it
   never reaches the column edges. */
.node-rail .sb--divider--ornamental {
  height: 1rem;
  position: relative;
  border-top: 1px solid var(--color-border, #e6ece9);
  margin: 0.85rem 0;
}
.node-rail .sb--divider--ornamental::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--color-accent, #c8a862);
  transform: rotate(45deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. SIDEBAR: MEDIA  (sb--media)
   ═══════════════════════════════════════════════════════════════════════════ */

.node-rail .sb--media {
  margin: 0;
}
.node-rail .sb-media__image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.node-rail .sb-media__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.node-rail .sb-media__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.node-rail .sb-media__caption {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted, #5a5a5a);
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. SIDEBAR: CONTACTS  (sb--contacts)
   The staff cards and info list reuse .dept-staff* / .dept-contact-info from
   css/dept-page.css verbatim — that is what "formatted like the department
   contacts block" means. Only the few things that assume a slightly wider
   column are tuned here.
   ═══════════════════════════════════════════════════════════════════════════ */

.node-rail .sb--contacts .dept-staff {
  gap: 0.5rem;
}
.node-rail .sb--contacts .dept-staff__card {
  /* dept-page.css uses 60px 1fr with 0.875rem gap and 1rem side padding; at a
     300px rail that leaves ~182px of text, which is enough. Trim the padding
     slightly so a long job title has more room. */
  padding: 0.75rem 0.85rem;
  gap: 0.75rem;
}
.node-rail .sb--contacts .dept-staff__title,
.node-rail .sb--contacts .dept-staff__name,
.node-rail .sb--contacts .dept-staff__contact {
  overflow-wrap: anywhere;
}
.node-rail .sb--contacts .dept-contact-info {
  margin-top: 0.75rem;
  padding: 1rem 1rem 0.85rem;
}
.node-rail .sb--contacts .dept-contact-info__row dd {
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. PRINT
   The rail is supporting material; the TOC and the button stack are
   navigation and are meaningless on paper. Text, media captions and contacts
   are worth keeping, matching how print.css already treats .dept-contact-info.
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .page-layout--rail-right,
  .article-layout.article-layout--rail-right {
    display: block;
  }
  .node-rail {
    margin-top: 1.5rem;
    border-top: 1px solid #999;
    padding-top: 1rem;
  }
  .node-rail .sb--toc,
  .node-rail .sb--buttons {
    display: none;
  }
  .node-rail .sb--media__video {
    display: none;
  }
}

/* ── No rail: centre the reading measure ─────────────────────────────────────
   Measured 2026-08-31 before this rule: on a page with no sidebar, `.page-body`
   held its 800px reading measure with margin-left AND margin-right both 0px,
   inside the 1152px box. That parked the text hard left with 352px of dead
   space on the right (176px off centre) at any viewport above ~1263px, while
   `.page-header` stretched the full 1152px, so the title and the body text did
   not share a right edge.

   Centre rather than widen. 800px is a deliberate reading measure of roughly
   75 characters; stretching prose to 1152px would trade one problem for a
   worse one. Applying the cap to `.page-main` rather than to `.page-body`
   brings the header along with it, so the two finally align.

   The rail case is untouched: there `.page-body` (800px) already fills its
   812px track. */
.page-layout--single > .page-main {
  max-width: var(--max-width-narrow);
  margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   SCHOOL SWITCHER  (Family Handbook sidebar)
   Native <details>, so it opens with no JS and is keyboard accessible as it
   stands. Sits above the contents list: "which school am I reading" is a
   bigger question than "which section", and a parent who landed on the wrong
   site needs to see it before they start reading.
   ═══════════════════════════════════════════════════════════════════════════ */
.school-switcher {
  margin: 0 0 1rem;
}
.school-switcher__details {
  border: 1px solid var(--color-border, #d3d8dd);
  border-radius: 6px;
  background: #fff;
}
.school-switcher__summary {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .6rem .8rem;
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
}
.school-switcher__summary::-webkit-details-marker {
  display: none;
}
/* A disclosure triangle drawn in CSS, so there is a visible affordance without
   relying on the UA marker (which the rule above removes for consistency with
   the other disclosures on this site). */
.school-switcher__summary::after {
  content: "";
  position: absolute;
  right: .85rem;
  width: .5rem;
  height: .5rem;
  margin-top: .55rem;
  border-right: 2px solid var(--color-text-muted, #5a5a5a);
  border-bottom: 2px solid var(--color-text-muted, #5a5a5a);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.school-switcher__details[open] .school-switcher__summary::after {
  transform: rotate(-135deg);
  margin-top: .85rem;
}
.school-switcher__details { position: relative; }
.school-switcher__eyebrow {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-text-muted, #5a5a5a);
}
.school-switcher__current {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-primary, #12263a);
  padding-right: 1rem;
}
.school-switcher__list {
  margin: 0;
  padding: .25rem 0 .5rem;
  list-style: none;
  border-top: 1px solid var(--color-border, #d3d8dd);
}
/* ⛔ NO max-height / overflow here. The rail is ALREADY a scroll container
   (.node-rail--sticky clamps to the viewport), so clamping this list too
   produced NESTED vertical scrollbars as soon as both disclosures were open.
   Twelve entries is 383px; let it be its own height and leave scrolling to the
   one container that owns it. */
.school-switcher__link {
  display: block;
  padding: .38rem .8rem;
  font-size: .9rem;
  line-height: 1.3;
  text-decoration: none;
  color: var(--color-text, #1f272e);
}
.school-switcher__link:hover,
.school-switcher__link:focus {
  background: var(--color-bg-subtle, #f4f6f8);
  text-decoration: underline;
}
/* The site you are already on. Marked with aria-current in the markup; this is
   the visual half of the same statement. */
.school-switcher__link.is-current {
  font-weight: 700;
  color: var(--color-primary, #12263a);
  background: rgba(0, 71, 179, .06);
}

/* Never on paper: the printed handbook is one school's copy, and a list of
   links to twelve other sites is noise in a document you are holding. */
@media print {
  .school-switcher { display: none !important; }
}