/*
 * app.css — the shell's appearance.
 *
 * NO TENANT COLOUR IS WRITTEN HERE. [I20] The palette arrives from
 * /api/config and is set as custom properties on :root at runtime. The
 * fallbacks below are deliberately neutral greys: if config never loads,
 * the page must look unbranded rather than look like the wrong district.
 */

:root {
  --primary: #33393f;
  --accent: #6b2c2e;
  --neutral: #c8cbcf;

  --ink: #14181b;
  --ink-soft: #555f68;
  --line: #d9dde1;
  --bg: #f5f6f8;
  --card: #ffffff;

  --ok-bg: #e7f3ea;
  --ok-line: #9ec7ab;
  --warn-bg: #fdf3e0;
  --warn-line: #e0bd7a;
  /* The ONE colour of stop actions — Lockdown, lift, "I need help" — in
     every scheme (v0.33.0). Not the scheme's accent: a district whose accent
     is green must not get a green Lockdown button. 7.3:1 with white text. */
  --stop: #a4262c;
  --stop-bg: #fbeaea;
  --stop-line: #d79a9a;
  /* Scheduled: planned and not yet due. Blue, distinct from the three
     finding colours, so "planned" never reads as "met". */
  --info-bg: #e8f0fb;
  --info-line: #8fb0dc;
}

* { box-sizing: border-box; }

/*
 * `hidden` must win.
 *
 * The attribute hides an element through a user-agent rule of the lowest
 * possible specificity, so ANY class rule that sets display — `.notice`
 * below did — silently overrides it and the element shows anyway. That
 * renders as an empty coloured box where an error message would go, on a
 * page where empty boxes are meaningless. Nothing here may set display on
 * an element the script hides without this.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Boot and sign-in ──────────────────────────────────────────────── */

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

.signin { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }

.signin__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--primary);
  border-radius: 6px;
  padding: 2.5rem;
  max-width: 26rem;
  width: 100%;
  text-align: center;
}

.signin__logo { display: block; max-height: 4rem; max-width: 10rem; margin: 0 auto .75rem; object-fit: contain; }
.signin__title { margin: 0 0 .25rem; font-size: 1.4rem; }
.signin__sub { margin: 0 0 1.75rem; color: var(--ink-soft); }
.signin__hint { margin: 1.25rem 0 0; font-size: .85rem; color: var(--ink-soft); }
/* One button per sign-in method the district offers (v0.29.0), stacked. */
.signin__buttons { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; }
.signin__btn { width: 100%; }
.signin__note { margin: .75rem 0 0; font-size: .85rem; color: var(--ink-soft); }

/* ── Chrome ────────────────────────────────────────────────────────── */

.topbar {
  background: var(--primary);
  color: #fff;
  padding: .85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.topbar__brand { display: flex; align-items: center; gap: .6rem; min-width: 0; }
/* The district's logo (v0.33.0): its own box, never wider than a phone's third. */
.topbar__logo { display: block; height: 2rem; width: auto; max-width: 8rem; object-fit: contain; flex: 0 0 auto; background: #fff; border-radius: 4px; padding: 2px; }
.topbar__names { min-width: 0; overflow-wrap: anywhere; }
.topbar__district { font-weight: 700; }
.topbar__product { opacity: .8; margin-left: .5rem; }
.topbar__right { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.topbar__who { font-size: .85rem; opacity: .9; }

.tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: 0 1.25rem; background: var(--primary); } /* v0.49.0: wraps, so a person who holds every tab (the App Manager, now with Communications) never gets a sideways scroll */

.tab {
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
}

.tab--on { background: var(--bg); color: var(--ink); font-weight: 600; }

.tab { white-space: nowrap; }

/*
 * On a phone the tabs WRAP rather than run off the right edge. An App
 * Manager's six tabs at 390px used to push the page to ~540px wide: the
 * last two tabs sat off-screen, the whole page scrolled sideways, and
 * "Lockdown" was the tab you could not see. Wrapping keeps every tab on
 * screen; each becomes a whole rounded button because a "folder tab" joined
 * to the page below only reads as one on a single row.
 */
@media (max-width: 40rem) {
  .tabs { flex-wrap: wrap; gap: .375rem; padding: .5rem .75rem .75rem; }
  .tab { border-radius: 4px; padding: .5rem .75rem; }
}

.panel { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.foot {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
  font-size: .85rem;
}

.foot a { color: var(--ink-soft); }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
}

.signin__build {
  margin: 1.25rem 0 0;
  font-size: .8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.foot-build {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ── Steps ─────────────────────────────────────────────────────────── */

.step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.step__title { margin: 0 0 .5rem; font-size: 1.05rem; display: flex; align-items: center; gap: .6rem; }

.step__n {
  background: var(--primary);
  color: #fff;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: .85rem;
}

.step__body { margin: 0 0 1rem; color: var(--ink-soft); }

/* ── Controls ──────────────────────────────────────────────────────── */

.btn {
  font: inherit;
  border-radius: 4px;
  padding: .55rem 1.1rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { filter: brightness(1.12); }
.btn--primary:disabled { opacity: .5; cursor: not-allowed; filter: none; }
/*
 * `.btn--quiet` was written for the dark topbar and is white on transparent.
 * Used on a white card it renders as an invisible button — a control that
 * is present, focusable and clickable, and cannot be seen. That shipped
 * once: the Decline button on the queue and the Dry run button on the
 * lockdown screen were both there in the DOM and absent on screen, which
 * reading the code would never have shown.
 *
 * So the white variant is SCOPED to the topbar, and the unscoped rule is
 * the one that works on the surfaces everything else uses.
 */
.topbar .btn--quiet { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.topbar .btn--quiet:hover { background: rgba(255, 255, 255, .16); }
.btn--quiet { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn--quiet:hover { background: var(--bg); }
.btn--quiet:disabled { opacity: .45; cursor: not-allowed; }
.btn--stop:disabled, .btn--primary:disabled { cursor: not-allowed; }

input[type="file"] { font: inherit; }

/* ── Notices ───────────────────────────────────────────────────────── */

.notice {
  display: block;
  padding: .7rem .9rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  margin: .75rem 0;
  font-size: .92rem;
  /* v0.61.0: a long unbroken address (Google's access-denied link) wraps inside the box instead of running past it. */
  overflow-wrap: anywhere;
}

.notice--ok { background: var(--ok-bg); border-color: var(--ok-line); }
.notice--warn { background: var(--warn-bg); border-color: var(--warn-line); }
.notice--stop { background: var(--stop-bg); border-color: var(--stop-line); }
.notice--info { background: var(--info-bg); border-color: var(--info-line); }

.notice--warn.notice--bar,
.notice--stop.notice--bar { margin: 0; border-radius: 0; border-width: 0 0 1px; }

/* ── Compliance ────────────────────────────────────────────────────── */

.head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.head h2 { margin: 0; font-size: 1.15rem; }
.head__meta { color: var(--ink-soft); font-size: .88rem; }

/*
 * Status is never carried by colour ALONE. Each pill also spells the word,
 * because a compliance position read by somebody colour-blind, or printed
 * in grey, has to say the same thing.
 */
.pill {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 1px solid;
}

.pill--met { background: var(--ok-bg); border-color: var(--ok-line); color: #1d5330; }
.pill--pending { background: var(--warn-bg); border-color: var(--warn-line); color: #6b4a10; }
.pill--missed { background: var(--stop-bg); border-color: var(--stop-line); color: #7d1f1f; }
.pill--not-applicable { background: var(--bg); border-color: var(--line); color: var(--ink-soft); }

.roll { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: .5rem 0 1.5rem; }
.roll__n { font-size: 1.9rem; font-weight: 700; display: block; line-height: 1.1; }
.roll__k { font-size: .82rem; color: var(--ink-soft); }

.campus { background: var(--card); border: 1px solid var(--line); border-radius: 6px; margin-bottom: .75rem; }
.campus > summary { padding: .9rem 1.25rem; cursor: pointer; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.campus > summary::-webkit-details-marker { display: none; }
.campus__name { font-weight: 600; }
.campus__meta { color: var(--ink-soft); font-size: .85rem; margin-left: auto; }
.campus__body { padding: 0 1.25rem 1rem; }

/* `.req` is taken by the template's required marker. Findings are their own. */
.finding { border-top: 1px solid var(--line); padding: .8rem 0; }
.finding__top { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.finding__label { font-weight: 600; }
.finding__summary { margin: .3rem 0 0; }
.finding__cite { margin: .3rem 0 0; font-size: .8rem; color: var(--ink-soft); }
.finding__due { font-size: .85rem; color: var(--ink-soft); }

.bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: .45rem; max-width: 18rem; }
.bar > span { display: block; height: 100%; background: var(--primary); }

/* ── Tables and results ────────────────────────────────────────────── */

.tbl { border-collapse: collapse; width: 100%; font-size: .9rem; margin-top: .75rem; }
.tbl th, .tbl td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { color: var(--ink-soft); font-weight: 600; }
.tbl code { background: var(--bg); padding: .1rem .3rem; border-radius: 3px; }

.req { color: var(--accent); font-weight: 700; }

.counts { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1rem 0; }
.count__n { font-size: 1.5rem; font-weight: 700; display: block; }
.count__k { font-size: .82rem; color: var(--ink-soft); }

.sub { font-size: 1rem; margin: 1.5rem 0 .25rem; }

.fix { display: grid; grid-template-columns: 14rem 1fr; gap: .5rem 1rem; align-items: center; margin-top: .75rem; }
.fix label { font-size: .9rem; }
.fix select { font: inherit; padding: .35rem; width: 100%; }

.details { margin-top: 1rem; }
.details summary { cursor: pointer; color: var(--ink-soft); font-size: .9rem; }

@media (max-width: 40rem) {
  .fix { grid-template-columns: 1fr; }
  .step { padding: 1rem; }
}

/* ── The manual check-in queue ────────────────────────────────────────── */

.queue__pick { display: block; font-weight: 600; margin: .75rem 0 .25rem; }

/* One waiting person. The countdown is deliberately as loud as the name:
   the whole decision is "is this person here, and is there still time". */
.wait {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); margin-bottom: .6rem;
}
.wait__who { font-weight: 600; min-width: 0; }
/* The address under the name: two people can share a name, and only one is
   at the desk. Allowed to break anywhere so a long address never pushes the
   row wider than a phone. */
.wait__email { display: block; font-weight: 400; font-size: .85rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.wait__left { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wait__note { color: var(--ink-soft); font-size: .85rem; }
.wait__acts { margin-left: auto; display: flex; gap: .5rem; }

/* ── Lockdown ─────────────────────────────────────────────────────────── */

/* A locked campus is not a row with different text; it reads differently
   across the room. */
.lock--on { border-color: var(--stop-line); border-width: 2px; }

/* The one destructive control in the product. It does not look like the
   others, and a disabled one looks unmistakably unavailable rather than
   merely quiet. */
.btn--stop { background: var(--stop); border-color: var(--stop); color: #fff; }
.btn--stop:disabled { opacity: .45; }
.wait__where { color: var(--ink-soft); }

/* ── The wall display ─────────────────────────────────────────────────── */

/*
 * LAYERS (v0.46.0). Leaflet gives its panes and controls z-index 400–1000 and
 * does not make its container a stacking context, so a visible map used to
 * paint ABOVE the wall (z-index 50) and above the roll-call console (60).
 * Two things now hold regardless of what Leaflet or a later release does:
 *   1. every Leaflet container is its own stacking context (isolation), so
 *      nothing inside a map can outrank anything outside it; and
 *   2. the full-screen layers are named here, in one order, all above 1000:
 *      roll-call console < wall < dialogs. The checker's OVERLAY_LAYERS rule
 *      and test/wallOverMap.test.ts hold this order.
 */
:root { --z-roll: 3000; --z-wall: 3500; --z-dialog: 4000; }
.leaflet-container { isolation: isolate; }
.is-map-paused { visibility: hidden; }

/*
 * A television in a front office, read from across a room. Sized in rem and
 * vw rather than px [I12], so it scales with the display rather than
 * assuming one. What is on it is Settings ▸ Wall display (v0.37.0).
 */
.wall {
  position: fixed;
  inset: 0;
  z-index: var(--z-wall);
  background: var(--primary);
  color: #fff;
  padding: 2vw 3vw;
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
  overflow: auto;
}

.wall__close {
  position: absolute;
  top: 1.5vh;
  right: 2vw;
  font: inherit;
  font-size: 1rem;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 4px;
  padding: .5rem 1rem;
  cursor: pointer;
  z-index: 2;
}

.wall__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2.5vw; padding-right: 6rem; }
.wall__brand { display: flex; align-items: center; gap: 1.2vw; min-width: 0; }
.wall__logo { height: clamp(2.2rem, 6vh, 4.2rem); width: auto; max-width: 30vw; background: #fff; border-radius: 4px; padding: .2rem .35rem; }
.wall__district { margin: 0; font-size: clamp(1.5rem, 3.2vw, 3rem); overflow-wrap: anywhere; }
.wall__clock { display: flex; flex-direction: column; line-height: 1.1; }
.wall__time { font-size: clamp(1.6rem, 3.2vw, 3.2rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.wall__date { font-size: clamp(.85rem, 1.1vw, 1.2rem); opacity: .88; }

/* The pill says it in words; the colour is never the only signal. */
.wall__status {
  margin: 0 0 0 auto;
  padding: .45rem 1.3rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .6);
  background: rgba(0, 0, 0, .18);
  font-weight: 700;
  font-size: clamp(1rem, 1.7vw, 1.8rem);
  letter-spacing: .04em;
}
.wall__status--lock { background: var(--stop); border-color: #ffd0d0; }
.wall__status--test { background: rgba(255, 255, 255, .92); color: var(--stop); border-color: var(--stop); }

/* Data that could not be refreshed is said so on the screen, loudly. */
.wall__stale {
  margin: 0;
  background: #fff;
  color: var(--stop);
  border: 3px solid var(--stop);
  border-radius: 6px;
  padding: 1vh 1.5vw;
  font-weight: 700;
  font-size: clamp(.95rem, 1.3vw, 1.4rem);
}

/*
 * The caveat is ON the wall, not a click away.
 *
 * A screen somebody glances at from a doorway is the one most likely to be
 * read as a count of people in the building, and it is the one where that
 * mistake costs most. It is deliberately not small print. [I15]
 */
.wall__caveat {
  margin: 0;
  font-size: clamp(.9rem, 1.15vw, 1.25rem);
  line-height: 1.4;
  background: rgba(0, 0, 0, .22);
  border-left: 4px solid var(--accent);
  padding: 1vh 1.5vw;
  max-width: 70ch;
}

.wall__kpis { display: flex; flex-wrap: wrap; gap: 1.2vw; }
.wall__kpi {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  padding: 1vh 1.5vw;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.wall__kpi--lock { background: rgba(179, 36, 39, .45); border: 3px solid #ffb3b3; }
.wall__kpi-n { font-size: clamp(2rem, 4.2vw, 4rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.wall__kpi-l { font-size: clamp(.8rem, 1.05vw, 1.15rem); opacity: .92; }

.wall__main { flex: 1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.2vw; min-height: 40vh; }
.wall__main--one { grid-template-columns: minmax(0, 1fr); }
/* Nothing on the wall is squeezed to make room: a short screen scrolls instead of overlapping. */
.wall > * { flex-shrink: 0; }
.wall > .wall__main { flex: 1 0 auto; }
.wall__mapbox { position: relative; min-height: 40vh; display: flex; flex-direction: column; gap: .4rem; }
.wall__map { flex: 1; min-height: 40vh; border-radius: 8px; background: #1d2a38; overflow: hidden; }
.wall__mapnote { margin: 0; font-size: clamp(.8rem, 1vw, 1.05rem); opacity: .9; }

.wall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.2vw;
  align-content: start;
}

.wall__tile {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  padding: 1.5vh 1.2vw;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.wall__tile--locked { border-color: #ffb3b3; border-width: 3px; background: rgba(179, 36, 39, .35); }

.wall__n { font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 700; line-height: 1; }
.wall__name { font-size: clamp(.85rem, 1.1vw, 1.2rem); opacity: .92; }
.wall__locked { font-size: clamp(.8rem, 1vw, 1.1rem); font-weight: 700; letter-spacing: .08em; }
.wall__sess { font-size: clamp(.75rem, .95vw, 1.05rem); opacity: .85; }

.wall__wx { display: flex; flex-wrap: wrap; gap: 1.2vw; }
.wall__wxc {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  padding: 1vh 1.5vw;
  min-width: 10rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.wall__wxt { font-size: clamp(1.6rem, 2.8vw, 2.8rem); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.wall__wxp { font-size: clamp(.85rem, 1.1vw, 1.2rem); }
.wall__wxw { font-size: clamp(.75rem, .95vw, 1.05rem); opacity: .88; }
.wall__asof { margin: 0; font-size: clamp(.8rem, 1vw, 1.05rem); opacity: .8; }

@media (max-width: 60rem) {
  .wall__main { grid-template-columns: minmax(0, 1fr); }
  .wall__status { margin-left: 0; }
}

/* ── The campus map: Today, the wall and the wall's settings (v0.37.0) ──── */

.cm-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 .4rem;
  border-radius: 999px;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .65);
}
.cm-tip { display: inline-flex; align-items: center; gap: .4rem; }
.cm-tip__logo { height: 1.6rem; width: 1.9rem; object-fit: contain; flex: 0 0 auto; }
.cm-pin--in { background: #1a7f37; }
.cm-pin--op { background: #2563eb; }
.cm-pin--closed { background: #5b6670; }
.cm-pin--lock { background: var(--stop); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 1px 4px rgba(0, 0, 0, .65); }
.cm-label { background: rgba(0, 0, 0, .62); color: #fff; border: 0; box-shadow: none; font-size: .72rem; font-weight: 600; padding: .05rem .35rem; }
.cm-label::before { display: none; }
.leaflet-container.cm-blank { background: #1d2a38; }

.cmap { margin: 1rem 0 1.5rem; }
.cmap__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin: .6rem 0; }
.cmap__pick { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cmap__pick select { font: inherit; padding: .4rem .5rem; border: 1px solid #cfd5dc; border-radius: 6px; max-width: 100%; }
.cmap__asof { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.cmap__map { height: 28rem; width: 100%; background: #1d2a38; border-radius: 6px; overflow: hidden; }
.cmap__legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; font-size: .8rem; color: var(--ink-soft); margin: .5rem 0; }
.cmap__key { display: inline-block; width: 1rem; height: .85rem; border-radius: 999px; vertical-align: middle; border: 2px solid #fff; box-shadow: 0 0 0 1px #8a949e; }
.cmap__key--in { background: #1a7f37; }
.cmap__key--op { background: #2563eb; }
.cmap__key--closed { background: #5b6670; }
.cmap__key--lock { background: var(--stop); }
.cmap__key--fence { background: transparent; border: 2px dashed #7a838c; box-shadow: none; }
.cmap .leaflet-pane, .cmap .leaflet-top, .cmap .leaflet-bottom { z-index: 400; }
.cmap .leaflet-control-attribution { font-size: .65rem; }
.cmap__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cmap__table th, .cmap__table td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmap__table td.num, .cmap__table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cmap__who { margin: .25rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--ink-soft); }
.cmap__lock { color: var(--stop); font-weight: 700; }
.cmap__off { color: var(--ink-soft); font-style: italic; }
@media (max-width: 40rem) {
  .cmap__map { height: 22rem; }
  .cmap__table { font-size: .85rem; table-layout: fixed; }
  .cmap__table th, .cmap__table td { padding: .35rem .3rem; overflow-wrap: break-word; }
  .cmap__table th:nth-child(2), .cmap__table td:nth-child(2) { width: 5.3rem; }
  .cmap__lock { font-size: .72rem; letter-spacing: 0; }
  .cmap__table th { font-size: .75rem; }
  .cmap__table .btn { padding: .3rem .3rem; min-height: 0; font-size: .75rem; white-space: normal; }
  .cmap__table th:last-child, .cmap__table td:last-child { width: 4.2rem; }
  .cmap__table th.num, .cmap__table td.num { width: 3.9rem; }
}

.wallset__map { height: 22rem; width: 100%; background: #1d2a38; border-radius: 6px; overflow: hidden; margin: .5rem 0; }
.wallset__group { margin: .9rem 0 .2rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.wallset__row { display: flex; align-items: flex-start; gap: .6rem; padding: .35rem 0; }
.wallset__row input { margin-top: .25rem; flex: 0 0 auto; }
.wallset__hint { display: block; font-size: .82rem; color: var(--ink-soft); }

/* ── Coming due ───────────────────────────────────────────────────────── */

.upcoming { margin: 1.25rem 0 1.5rem; }

/*
 * One deadline per row. The school-day count is given as much weight as
 * the date: "19 school days left" is what decides whether a drill can
 * still be scheduled, and the date alone makes the reader do the maths.
 */
.due {
  display: grid;
  grid-template-columns: 7.5rem 10rem minmax(10rem, 1fr) 2fr;
  gap: .75rem;
  align-items: baseline;
  padding: .55rem .85rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  margin-bottom: .4rem;
  font-size: .92rem;
}

.due__date { font-variant-numeric: tabular-nums; font-weight: 600; }
.due__left { color: var(--ink-soft); }
.due__where { font-weight: 600; }
.due__what { color: var(--ink-soft); }

/* Soon carries a word as well as a colour: the count reads "school days
   left" either way, and the heading says how many are within two weeks. */
.due--soon { background: var(--warn-bg); border-color: var(--warn-line); }
.due--soon .due__left { color: #6b4a10; font-weight: 600; }

@media (max-width: 720px) {
  .due { grid-template-columns: 1fr 1fr; }
}

/* A check-in place that is not a school. Quiet: it is a fact about the row,
   not a warning. */
.campus__kind {
  font-size: .75rem;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .05rem .5rem;
  margin-left: .5rem;
  white-space: nowrap;
}

/* A small action inside a table on a white card — the topbar's quiet button
   is white-on-blue and would be invisible here. */
.btn--quiet-dark {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: .25rem .6rem;
  font-size: .85rem;
}

/* ── Drill records ─────────────────────────────────────────────────── */

/* Filters wrap to one per line on a phone and sit in a grid on a desk. */
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem .9rem; margin: 0 0 1rem; }
.filters__f { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.filters__f select, .filters__f input, .form input, .form select {
  font: inherit; font-weight: 400; color: var(--ink); padding: .45rem .5rem;
  border: 1px solid var(--line); border-radius: 4px; background: var(--card); min-width: 0; width: 100%;
}
.filters__q { grid-column: 1 / -1; }
.filters__actions { margin: 0; align-self: end; }
.filters__check { display: flex; align-items: center; gap: .4rem; font-size: .9rem; align-self: end; }

.exports { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.exports__label { color: var(--ink-soft); font-size: .9rem; }

/* One record per line; a button, so a keyboard reaches every one. */
.rec {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 14rem); gap: .25rem 1rem; align-items: start;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .8rem 1rem; margin-bottom: .5rem;
}
.rec:hover, .rec:focus-visible { border-color: var(--primary); }
.rec__date { font-variant-numeric: tabular-nums; font-weight: 600; }
.rec__main { display: flex; flex-direction: column; min-width: 0; }
.rec__what { font-weight: 600; overflow-wrap: anywhere; }
.rec__where { color: var(--ink-soft); font-size: .9rem; overflow-wrap: anywhere; }
.rec__state { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.rec__status { font-size: .9rem; }
.rec__who { grid-column: 2 / -1; color: var(--ink-soft); font-size: .85rem; overflow-wrap: anywhere; }
.rec__who:empty { display: none; }
@media (max-width: 40rem) {
  .rec { grid-template-columns: 1fr; }
  .rec__who { grid-column: auto; }
}

.badge {
  display: inline-block; padding: .1rem .45rem; border: 1px solid var(--line); border-radius: 3px;
  font-size: .75rem; font-weight: 600; color: var(--ink-soft); background: var(--bg);
}
.badge--imported { background: var(--warn-bg); border-color: var(--warn-line); color: #6b4a10; }
.badge--in-app { background: var(--ok-bg); border-color: var(--ok-line); color: #1d5330; }
/* Reported here: entered in this system, but nothing on it measured. */
.badge--reported { background: var(--bg); border-color: var(--warn-line); color: #6b4a10; }

.deflist { display: grid; grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr); gap: .35rem 1rem; margin: 0 0 .75rem; }
.deflist dt { font-weight: 600; color: var(--ink-soft); font-size: .9rem; }
.deflist dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 40rem) {
  .deflist { grid-template-columns: 1fr; gap: .1rem; }
  .deflist dd { margin-bottom: .5rem; }
}
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
#missioncontrol-settings-body .actions { margin-top: 1rem; }
#dir-names, #missioncontrol-settings-body { overflow-wrap: anywhere; }
#missioncontrol-settings-body .docs-health { margin: .4rem 0 0; padding-left: 1.2rem; }
.record__prov { font-size: .85rem; margin-top: 1.25rem; }

/* ── Admin ─────────────────────────────────────────────────────────── */

.subtabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.subtab {
  font: inherit; font-size: .92rem; padding: .45rem .8rem; cursor: pointer;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 999px;
}
.subtab--on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem .9rem; margin: 0 0 1rem; }
.form > .sub, .form > p, .form__hint, .form > fieldset, .form__wide { grid-column: 1 / -1; }
.form__f { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; font-weight: 600; color: var(--ink-soft); border: 0; padding: 0; margin: 0; }
.form__f legend { padding: 0; margin-bottom: .3rem; }
.form__hint { margin: -.3rem 0 0; color: var(--ink-soft); font-size: .85rem; }
.form__hint:empty { display: none; }
.form--inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.form--inline input { flex: 1 1 12rem; }

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .3rem .9rem; margin: .25rem 0 .5rem; }
.check { display: flex; gap: .45rem; align-items: flex-start; font-weight: 400; color: var(--ink); font-size: .92rem; }
.check input { width: auto; margin-top: .25rem; }

.person { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .75rem 1rem; margin-bottom: .6rem; }
.person__email { margin: 0 0 .4rem; font-size: .98rem; overflow-wrap: anywhere; }
.person__email .who__name, .person__email .who__email { display: block; }
.grant { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--line); }
.grant:first-of-type { border-top: 0; }
.grant__body { flex: 1 1 16rem; min-width: 0; }
.grant__meta { color: var(--ink-soft); font-size: .85rem; }
.grant__acts { display: flex; gap: .4rem; }
.grant__edit { flex: 1 1 100%; }
.grant--expired .grant__who { color: var(--ink-soft); text-decoration: line-through; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .2rem .15rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: .9rem; }
.chip .btn { padding: .05rem .45rem; line-height: 1.2; }
.plain { margin: .25rem 0 .75rem; padding-left: 1.2rem; }

.audit, .closure {
  display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline;
  padding: .55rem .8rem; background: var(--card); border: 1px solid var(--line); border-radius: 6px; margin-bottom: .4rem;
}
.audit__when, .closure__when { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .88rem; min-width: 9rem; }
.audit__what, .closure__what { font-weight: 600; }
.audit__who, .audit__where { font-size: .9rem; overflow-wrap: anywhere; }
.audit__where { color: var(--ink-soft); }
.audit__detail { flex-basis: 100%; color: var(--ink-soft); font-size: .85rem; overflow-wrap: anywhere; }
.audit__detail:empty { display: none; }
.closure { display: grid; grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr) auto; align-items: center; }
.closure__main { display: flex; flex-direction: column; min-width: 0; }
.closure__meta { color: var(--ink-soft); font-size: .88rem; }
.periodpub { margin: .75rem 0; padding: .5rem .75rem; border: 1px solid var(--info-line); background: var(--info-bg); border-radius: 4px; }
.periodrows { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0; }
.periodrow { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 1rem; }
.periodrow__n { font-weight: 600; min-width: 2rem; }
@media (max-width: 40rem) {
  .closure { grid-template-columns: minmax(0, 1fr) auto; }
  .closure__when { grid-column: 1 / -1; min-width: 0; }
}
@media (max-width: 40rem) {
  .audit__when { flex-basis: 100%; }
}

/* ── Drills ─────────────────────────────────────────────────────────── */
.drill {
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); margin-bottom: .6rem;
}
/* Running: blue, like the DRILL banner. Red on this product means lockdown. */
.drill--running { border-color: var(--info-line); border-width: 2px; background: var(--info-bg); }
.drill__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .8rem; }
.drill__date { font-variant-numeric: tabular-nums; font-weight: 600; }
.drill__what { font-weight: 600; overflow-wrap: anywhere; }
.drill__where { color: var(--ink-soft); overflow-wrap: anywhere; }
.drill__state { margin: .4rem 0 0; }
.drill__since { font-variant-numeric: tabular-nums; }
.drill__note { margin: .25rem 0 0; color: var(--ink-soft); font-size: .88rem; }
.drill .actions { margin: .6rem 0 0; }
.drill .form--inline { margin-top: .6rem; }
.drill .form--inline input, .form textarea, .questions textarea, .questions input[type="text"],
#aar-body .q > textarea {
  font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--ink);
}

.questions { display: grid; gap: .9rem; margin: .5rem 0 1rem; }
.q { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.q textarea, .q input[type="text"] { width: 100%; box-sizing: border-box; resize: vertical; }
.q textarea:disabled, .q input:disabled { background: var(--bg); color: var(--ink); }
.q__label { font-weight: 600; font-size: .92rem; }
.q__req { font-weight: 600; font-size: .75rem; color: var(--accent); }
.q__hint { margin: 0; color: var(--ink-soft); font-size: .85rem; }
.q__problem { margin: 0; color: #7d1f1f; font-size: .88rem; font-weight: 600; }
.q__problem:empty { display: none; }
.q--problem textarea, .q--problem input[type="text"], .q--problem .q__yesno { border-color: var(--stop-line); background: var(--stop-bg); }
.q__yesno { border: 1px solid var(--line); border-radius: 4px; padding: .5rem .75rem; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.q__yesno legend { padding: 0 .25rem; }
.q__choice { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; }
.notice__act { margin-left: .5rem; padding: .2rem .6rem; }

/* ── Date badges and the year planner ───────────────────────────────── */

/*
 * One badge per required drill. Every badge spells its state — Held,
 * Scheduled, Not started, Open — beside its date and category, so colour is
 * never the only signal.
 */
.slots { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.campus > summary > .slots { flex-basis: 100%; }
.slot {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35rem;
  padding: .15rem .5rem; border: 1px solid var(--line); border-radius: 4px;
  font-size: .78rem; line-height: 1.35; background: var(--bg); color: var(--ink);
}
.slot__word { font-weight: 700; }
.slot__when { font-variant-numeric: tabular-nums; }
.slot__cat { color: inherit; opacity: .85; }
.slot--completed { background: var(--ok-bg); border-color: var(--ok-line); color: #1d5330; }
.slot--scheduled { background: var(--info-bg); border-color: var(--info-line); color: #1b3f6e; }
.slot--late { background: var(--stop-bg); border-color: var(--stop-line); color: #7d1f1f; }
.slot--unplanned { background: var(--warn-bg); border-color: var(--warn-line); color: #6b4a10; border-style: dashed; }
.slots__more { font-size: .8rem; color: var(--ink-soft); }

/* A due date, coloured by its finding (the .pill--status palette). */
.duebadge {
  /* Width and style only: the colour comes from the .pill--status class,
     which a border shorthand here would override. */
  display: inline-block; padding: .1rem .5rem; border-width: 1px; border-style: solid; border-radius: 999px;
  font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* Scheduled against a pending finding: blue, with words. A partial cover is
   dashed, and says "3 of 5 owed scheduled". */
.duebadge--scheduled { background: var(--info-bg); border-color: var(--info-line); color: #1b3f6e; }
.duebadge--partial { border-style: dashed; }


.planrows { display: grid; gap: .5rem; margin: .5rem 0 1rem; }
.planrow {
  display: grid; grid-template-columns: minmax(10rem, 1.2fr) minmax(0, 2fr) minmax(8rem, 1fr) auto;
  gap: .4rem .9rem; align-items: center;
  padding: .6rem .85rem; background: var(--card); border: 1px solid var(--line); border-radius: 6px;
}
.planrow__name { font-weight: 600; overflow-wrap: anywhere; }
.planrow__next { color: var(--ink-soft); font-size: .88rem; }

.planedits { display: grid; gap: .5rem; margin: .5rem 0 .75rem; }
.planedit {
  display: grid; grid-template-columns: 10rem 12rem minmax(0, 1fr) auto; gap: .4rem .75rem; align-items: end;
  padding: .6rem .8rem; background: var(--card); border: 1px solid var(--line); border-radius: 6px;
}
.planedit input, .planedit select {
  font: inherit; padding: .35rem .45rem; border: 1px solid var(--line); border-radius: 4px;
  background: var(--card); color: var(--ink); width: 100%; min-width: 0; box-sizing: border-box;
  height: 2.4rem;
}
.planedit > .form__f { justify-content: flex-end; }
.planedit__acts { display: flex; gap: .4rem; align-items: center; }
.planedit__problem { grid-column: 1 / -1; margin: 0; color: #7d1f1f; font-size: .88rem; font-weight: 600; }
.planedit__problem:empty { display: none; }
.planedit--problem { border-color: var(--stop-line); background: var(--stop-bg); }

@media (max-width: 40rem) {
  .planrow { grid-template-columns: minmax(0, 1fr) auto; }
  .planrow__name { grid-column: 1 / -1; }
  .planrow > .slots { grid-column: 1 / -1; }
  .planedit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .planedit > label:nth-of-type(3) { grid-column: 1 / -1; }
  .planedit__acts { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Narrow phones: date, category and type each take the full width, so a
   label such as "Other emergency" is never cut off. */
@media (max-width: 420px) {
  .planedit { grid-template-columns: minmax(0, 1fr); }
  .planedit > label:nth-of-type(3) { grid-column: auto; }
}

/* ── Today: one panel per school (v0.23.0) ──────────────────────────── */

.school--single { background: var(--card); border: 1px solid var(--line); border-radius: 6px; margin-bottom: .75rem; }
.school--single.lock--on { border-color: var(--stop-line); border-width: 2px; }
.school__head { padding: .9rem 1.25rem .25rem; display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; }
.school__title { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.school__flags { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.school__flags:empty { display: none; }
.school .campus__name { overflow-wrap: anywhere; }
.school__body { display: flex; flex-direction: column; gap: .25rem; }
.school__status { display: flex; flex-direction: column; gap: .5rem; margin-top: .25rem; }

/* A drill in progress. Blue, not red, with the words: it is NOT a
   lockdown and nothing stops a check-in. */
.school__drill {
  margin: 0; padding: .6rem .85rem; border-radius: 4px; font-size: .95rem;
  background: var(--info-bg); border: 1px solid var(--info-line); color: #1b3f6e;
}
.pill--drill { background: var(--info-bg); border-color: var(--info-line); color: #1b3f6e; }

.school__lock { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.school__lockstate { margin: 0; overflow-wrap: anywhere; }
.school__lockact { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; max-width: 100%; }
.school__why { margin: 0; font-size: .85rem; color: var(--ink-soft); text-align: right; }
@media (max-width: 40rem) {
  .school__lockact { margin-left: 0; align-items: flex-start; }
  .school__why { text-align: left; }
}

/* The lockdown confirm and lift steps (v0.31.0): on the page, bordered in
   the stop colour AND titled in words — colour is never the only signal. */
.lockform {
  margin: .25rem 0 0; padding: .75rem .9rem; border: 2px solid var(--stop-line); border-radius: 6px;
  background: var(--card); display: flex; flex-direction: column; gap: .5rem;
}
.lockform--lift { border-color: var(--line); border-width: 1px; }
.lockform__title, .lockform__p { margin: 0; overflow-wrap: anywhere; }
.lockform__p { font-size: .95rem; color: var(--ink-soft); }
.lockform .form__f { max-width: 32rem; }
.lockform input, .lockform textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; color: var(--ink); padding: .45rem .5rem;
  border: 1px solid var(--line); border-radius: 4px; background: var(--card); resize: vertical;
}
.lockform .actions { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.lockform__error { margin: 0; }
.drill__lock { margin: .5rem 0 0; }

.school__sub { margin: 1rem 0 .4rem; font-size: .95rem; }
.school__subnote { font-weight: 400; color: var(--ink-soft); }
.school__requests .wait { margin-bottom: .5rem; }
.school__requests .wait__acts { flex-wrap: wrap; }
.school__caveat { margin: .75rem 0 0; font-size: .85rem; color: var(--ink-soft); }

/* One person. Wraps rather than scrolls: a phone at the front desk is the
   screen this is for. */
.whos { list-style: none; margin: 0; padding: 0; }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.who:first-child { border-top: 0; }
.who__main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 14rem; }
.who__name { font-weight: 600; overflow-wrap: anywhere; }
.who__facts { font-size: .88rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.who__email { font-size: .85rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.who__act { margin-left: auto; }
.who--out .who__name { font-weight: 400; }
/* Recorded here only: a word AND a dashed edge, never colour alone. */
.badge--here { background: var(--bg); border: 1px dashed var(--warn-line); color: #6b4a10; white-space: nowrap; }

/* ── Run a drill ─────────────────────────────────────────────────── */
.testlock { margin: .5rem 0 0; display: flex; flex-direction: column; gap: .15rem; }
.testlock .check { color: var(--ink); }
.testlock input:disabled { cursor: not-allowed; }
.drill .notice { margin: .5rem 0 0; }
.drill__note--warn { color: #6b4a10; }

/* A row that opens says so: a marker that turns, beside the words. */
details.school > summary::before { content: '\25B8'; color: var(--ink-soft); font-size: .9rem; width: .8rem; }
details.school[open] > summary::before { content: '\25BE'; }
#tn-warning { white-space: pre-line; }

/* ── v0.25.0: review, the functions pick list, the quarter ───────────── */

/* Returned for changes: amber, and always said in words. */
.rbadge {
  display: inline-block; padding: .15rem .55rem; border: 1px solid var(--warn-line); border-radius: 999px;
  background: var(--warn-bg); color: #6b4a10; font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.returned { margin: .6rem 0 0; border-left-width: 4px; }
.returned p { margin: 0; }
.returned__head { font-size: .95rem; }
.returned__note { margin: .4rem 0 !important; padding: .5rem .7rem; background: var(--card); border: 1px solid var(--warn-line);
  border-radius: 4px; font-size: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.returned__hint { color: var(--ink-soft); font-size: .85rem; }
.sendback textarea { width: 100%; box-sizing: border-box; }

/* Functions tested: checkboxes, then Other. */
.q__choices { border: 1px solid var(--line); border-radius: 4px; padding: .5rem .75rem .75rem; margin: 0; min-width: 0; }
.q__choices legend { padding: 0 .25rem; }
.q__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0 1rem; }
.q__check { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; overflow-wrap: anywhere; }
.q__check input { width: 1.15rem; height: 1.15rem; flex: none; margin: 0; }
.q__otherlabel { margin: .5rem 0 .25rem; font-weight: 600; font-size: .88rem; }
.q__others { display: flex; flex-direction: column; gap: .4rem; }
.q__others input { width: 100%; box-sizing: border-box; }
.q__add { margin-top: .4rem; align-self: flex-start; }
.q--problem .q__choices { border-color: var(--stop-line); background: var(--stop-bg); }

/* The quarter. */
.filters__note { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: .85rem; }
.quarterprint { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1rem;
  padding: .75rem 1rem; border: 1px solid var(--info-line); background: var(--info-bg); border-radius: 6px; }
.quarterprint .form__hint { margin: 0; flex: 1 1 18rem; }

/* ── District requirements (v0.26.0) ───────────────────────────────────
 *
 * A district's own standard is not the state rule and must never look like
 * it. Everything about one carries the "District requirement" chip — TEXT,
 * so colour is never the only signal — and a violet, dashed style of its
 * own that is none of the four finding colours. */
:root { --dist-bg: #f3effb; --dist-line: #9a86c8; --dist-ink: #3f2d6e; }
.dreq {
  display: inline-block; padding: .05rem .5rem; border: 1px dashed var(--dist-line); border-radius: .3rem;
  background: var(--dist-bg); color: var(--dist-ink); font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.dreq__source { color: var(--ink-soft); font-size: .85rem; }
.finding--district { border-left: .25rem solid var(--dist-line); padding-left: .75rem; background: var(--dist-bg); margin: 0 -.25rem; padding-right: .25rem; }
.finding__source { margin: .3rem 0 0; font-size: .8rem; color: var(--dist-ink); }
.campus__group { margin: .9rem 0 .2rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.campus__group--district { text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 400; color: var(--dist-ink); }
.dstatus { font-size: .8rem; padding: .05rem .5rem; border: 1px dashed var(--dist-line); border-radius: .3rem; background: var(--dist-bg); color: var(--dist-ink); font-weight: 600; }
.dstatus--missed { border-style: solid; border-width: 2px; }
.roll__head { margin: .25rem 0 0; font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.roll--district { border: 1px dashed var(--dist-line); background: var(--dist-bg); border-radius: .5rem; padding: .6rem .9rem; margin-top: 0; }
.roll--district .roll__head { flex-basis: 100%; color: var(--dist-ink); font-weight: 400; }
.roll__list { flex-basis: 100%; margin: 0; padding-left: 1.1rem; font-size: .85rem; color: var(--dist-ink); }
.drill__district { margin: .4rem 0 0; font-size: .88rem; color: var(--dist-ink); }
.notice__p { margin: 0; }
.notice__p + .notice__p, .notice__p + .drill__district, .drill__district + .notice__p { margin-top: .5rem; }
.badge--tod { background: var(--info-bg); border-color: var(--info-line); color: #1b3f6e; white-space: nowrap; }

/* ── Settings ▸ Integrations (v0.27.0) ─────────────────────────────── */
.setting {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 1rem 1.1rem; margin: 0 0 1rem;
}
.setting__title { margin: 0 0 .35rem; font-size: 1rem; }
.setting__h { margin: .9rem 0 .3rem; font-size: .92rem; }
.setting__status { margin: .25rem 0 .9rem; }
.setting__provider { max-width: 24rem; margin: 0 0 .75rem; }
.setting__provider select { font: inherit; padding: .4rem; }
.setting__fields { margin-top: .25rem; }
.setting__fields input { width: 100%; }
.setting__hint { font-weight: 400; margin: .1rem 0 0; }
.setting__steps { margin: .25rem 0 .5rem; padding-left: 1.3rem; }
.setting__steps li { margin-bottom: .35rem; overflow-wrap: anywhere; }
.setting__layout { margin: .5rem 0 .25rem; padding: .6rem .8rem; background: var(--bg); border: 1px dashed var(--line); border-radius: 4px; }
.setting__path { margin: .2rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; overflow-wrap: anywhere; }
.setting__testhint { align-self: center; margin: 0; }
.setting__save { margin-top: .5rem; }
/* v0.29.0: secrets (set / not set, and the commands), the storage-switch
   warning, the SMS test number, and the sign-in buttons. */
.setting__secrets { margin: .6rem 0 .25rem; }
.secret { margin: 0 0 .6rem; }
.secret__state { margin: .2rem 0; }
.secret__how summary { cursor: pointer; font-size: .88rem; margin: .25rem 0; }
.secret__cmd {
  margin: .3rem 0; padding: .45rem .6rem; background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all;
}
.setting__switch .notice { margin: 0 0 .75rem; }
.setting__to { max-width: 24rem; margin: .5rem 0 .25rem; }
.setting__to input { width: 100%; }
.signin-method { margin: .5rem 0 .75rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.signin-method input[type="text"] { width: 100%; }
.signin-method__setup summary { cursor: pointer; font-size: .88rem; margin: .35rem 0; }
.setting .deflist dd { white-space: normal; }

/* ── Attachments on a drill record (v0.27.0) ─────────────────────────── */
.badge--files { background: var(--info-bg); border-color: var(--info-line); color: #23466f; }
.attach { margin-top: 1.25rem; }
.attach__list { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0 1rem; }
.attach__row {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  padding: .6rem .8rem; background: var(--card); border: 1px solid var(--line); border-radius: 6px;
}
.attach__main { display: flex; flex-direction: column; flex: 1 1 16rem; min-width: 0; }
.attach__name { font-weight: 600; overflow-wrap: anywhere; }
.attach__meta { color: var(--ink-soft); font-size: .85rem; overflow-wrap: anywhere; }
.attach__acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.attach__remove { flex-basis: 100%; }
.attach__remove:empty { display: none; }
.attach__remove input { font: inherit; padding: .4rem; width: 100%; }
.attach__add { margin: .5rem 0 1rem; }
.attach__add input[type="file"] { font: inherit; max-width: 100%; }
/* A scope URL or a service-account address is one long word. */
.setting .notice, .attach .notice { overflow-wrap: anywhere; }

/* ── Settings ▸ Notifications (v0.28.0) ──────────────────────────────── */
.notify__switch { display: flex; align-items: flex-start; gap: .6rem; margin: .4rem 0; font-weight: 600; }
.notify__switch input { width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; flex: 0 0 auto; }
.notify__state { font-weight: 400; color: var(--ink-soft); }
.notify__switch .setting__hint { display: block; font-weight: 400; }
.notify__types { display: grid; gap: .75rem; }
.notify__type { padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.notify__type p { margin: .2rem 0 0; }
.notify__row { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: flex-start; margin-top: .5rem; }
.notify__row label { flex: 1 1 14rem; min-width: 0; }
.notify__row input, .notify__row select { font: inherit; padding: .4rem; width: 100%; box-sizing: border-box; }
.notify__list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.notify__item { padding: .6rem .8rem; border: 1px solid var(--line); border-left-width: .3rem; border-radius: 6px; background: var(--card); overflow-wrap: anywhere; }
.notify__item--send, .notify__item--sent { border-left-color: var(--ok-line); }
.notify__item--test, .notify__item--suppressed-test { border-left-color: var(--info-line); }
.notify__item--failed, .notify__item--no-recipient { border-left-color: var(--stop-line); }
.notify__item--off { border-left-color: var(--line); }
.notify__word { font-weight: 700; }
.notify__subject { margin: .15rem 0; }
.notify__meta { color: var(--ink-soft); font-size: .88rem; margin: .1rem 0 0; }
.notify__confirm ul { margin: .4rem 0 .6rem; padding-left: 1.2rem; }
.notify__confirm li { overflow-wrap: anywhere; }
.setting .notify__item .notice { margin: .3rem 0 0; }

/* v0.30.0 — Settings ▸ Directory and the role sync. Every badge carries its
   word; the colour only repeats it. */
.dircount { list-style: none; margin: .25rem 0 .75rem; padding: 0; max-width: 32rem; }
.dircount li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.dircount li > strong { flex: none; white-space: nowrap; }
.dircount li > span { min-width: 0; }
.sync { margin: 1.25rem 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.sync .sub { margin-top: 0; }
.syncplan { margin-top: .75rem; }
.syncgroup { margin-top: .5rem; }
.syncrow { padding: .6rem .8rem; margin: .4rem 0; border: 1px solid var(--line); border-left-width: .3rem; border-radius: 4px; background: var(--bg); }
.syncrow--add { border-left-color: var(--ok-line); }
.syncrow--change { border-left-color: var(--info-line); }
.syncrow--remove { border-left-color: var(--stop-line); }
.syncrow__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.syncrow__who { overflow-wrap: anywhere; min-width: 0; }
.syncrow__line, .syncrow__why, .syncrow__src { margin: .25rem 0 0; overflow-wrap: anywhere; }
.syncrow__src { font-size: .85rem; color: var(--ink-soft); }
.badge--add { background: var(--ok-bg); border-color: var(--ok-line); color: #1d5330; }
.badge--change { background: var(--info-bg); border-color: var(--info-line); color: #1b3f6e; }
.badge--remove { background: var(--stop-bg); border-color: var(--stop-line); color: #7a1f1f; }
.badge--hold { background: var(--warn-bg); border-color: var(--warn-line); color: #6b4a10; }
.badge--synced { margin-left: .4rem; background: var(--info-bg); border-color: var(--info-line); color: #1b3f6e; }
.setting__provider--wide { max-width: 100%; }
.setting__provider--wide select { max-width: 100%; }
.raa { margin: 1.25rem 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.raa .sub { margin-top: 0; }
.raarules { display: grid; gap: .6rem; margin: .5rem 0; }
.raarule { display: grid; gap: .4rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.raarule input[type=text], .raarule select, .raa .raarule__row input, .raa .raarule__row select { font: inherit; padding: .35rem; min-width: 0; }
.raarule__row { display: flex; flex-wrap: wrap; gap: .4rem; }
.raarule__row > * { flex: 1 1 10rem; min-width: 0; }
.raarule__on { font-weight: 600; }
.raabldg { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.raabldg__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-width: 3.5rem; }
.raabldg__facts { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.raabldg__override select { font: inherit; max-width: 100%; }
.raabldg__eff { font-weight: 600; }
.raabldg--none .raabldg__eff { color: #7a1f1f; }

/* ── Roll call (v0.32.0) ─────────────────────────────────────────────
   Every state is a WORD as well as a colour: "Needs help", "Not accounted
   for", "Safe", "Roll call running". Sized in rem [I12]; nothing here is a
   fixed width, so a phone at the front desk never scrolls sideways. */

/* The responder banner: above the tabs, on every screen. */
.rollban { background: var(--stop-bg); border-bottom: 2px solid var(--stop-line); padding: .75rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.rollban__card { background: var(--card); border: 2px solid var(--stop-line); border-radius: 8px; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .6rem; width: 100%; max-width: 46rem; margin: 0 auto; }
.rollban__card--elsewhere { border-width: 1px; border-color: var(--line); }
.rollban__title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; overflow-wrap: anywhere; }
.rollban__since { color: var(--ink-soft); font-size: .9rem; }
.rollban__p { margin: 0; overflow-wrap: anywhere; }
.rollban__two { display: flex; flex-wrap: wrap; gap: .6rem; }
.rollban__big { flex: 1 1 9rem; font-size: 1.1rem; font-weight: 700; padding: .9rem 1rem; }
.rollban__big--safe { background: #1d6b3a; border-color: #1d6b3a; color: #fff; }
.rollban__big--safe:hover { filter: brightness(1.1); }
.rollban__big:disabled { opacity: .55; cursor: not-allowed; }
.rollban__others { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; font-size: .95rem; }
.rollban__stepper { display: inline-flex; align-items: center; gap: .5rem; }
.rollban__step { min-width: 2.75rem; min-height: 2.75rem; font-size: 1.2rem; font-weight: 700; padding: .25rem .6rem; }
.rollban__n { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.rollban__label { font-weight: 600; }
.rollban textarea { width: 100%; font: inherit; padding: .5rem; border: 1px solid var(--line); border-radius: 4px; resize: vertical; }
.rollban__acts { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.rollban__done { margin: 0; padding: .7rem .85rem; border-radius: 6px; border: 1px solid; overflow-wrap: anywhere; }
.rollban__done--safe { background: var(--ok-bg); border-color: var(--ok-line); color: #1d5330; }
.rollban__done--help { background: var(--stop-bg); border-color: var(--stop-line); color: #7d1f1f; }
.rollban__more { width: 100%; max-width: 46rem; margin: 0 auto; font-size: .92rem; }
.rollban__more summary { cursor: pointer; font-weight: 600; }
.rollban__places { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.rollban__place { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; justify-content: space-between; }
.rollban__placeacts { display: flex; flex-wrap: wrap; gap: .4rem; }

/* A school's line on Today. */
.school__rollpart:empty { display: none; }
.school__roll { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem .85rem; border-radius: 6px; background: var(--warn-bg); border: 1px solid var(--warn-line); }
.school__roll--idle { background: transparent; border: 1px dashed var(--line); }
.school__roll--locked { background: var(--stop-bg); border: 2px solid var(--stop-line); }
.school__rolltext { margin: 0; flex: 1 1 16rem; overflow-wrap: anywhere; }
.school__rolltext--quiet { color: var(--ink-soft); }
.school__rollnote { color: var(--ink-soft); }
.school__rollact { margin-left: auto; }
.school__roll .school__why { flex-basis: 100%; text-align: left; }

/* The console: full screen, like the wall display, and on the page's own colours. */
body.rc-open { overflow: hidden; }
.rc { position: fixed; inset: 0; z-index: var(--z-roll); background: var(--bg); overflow: auto; display: flex; flex-direction: column; }
.rc__bar { position: sticky; top: 0; z-index: 1; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem; }
.rc__title { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.rc__close { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); flex: none; }
.rc__close:hover { background: rgba(255, 255, 255, .12); }
.rc__body { width: 100%; max-width: 60rem; margin: 0 auto; padding: 1rem 1.25rem 3rem; display: flex; flex-direction: column; gap: .75rem; }
.rc-part:empty { display: none; }
.rc__top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.rc__what { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; flex: 1 1 18rem; min-width: 0; }
.rc__name { margin: 0; font-size: 1.2rem; flex-basis: 100%; overflow-wrap: anywhere; }
.rc__clock { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc__sub { margin: .35rem 0 0; color: var(--ink-soft); font-size: .92rem; overflow-wrap: anywhere; }
.rc__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; }
.rc__tile { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .7rem .85rem; display: flex; flex-direction: column; gap: .15rem; }
.rc__tile--main { border-width: 2px; border-color: var(--primary); }
.rc__tile--help { background: var(--stop-bg); border-color: var(--stop-line); }
.rc__tile--unknown { background: var(--warn-bg); border-color: var(--warn-line); }
.rc__n { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rc__label { font-size: .88rem; color: var(--ink-soft); }
.rc__meter { display: flex; height: .7rem; border-radius: 999px; overflow: hidden; background: var(--line); margin-top: .6rem; }
.rc__seg { display: block; height: 100%; }
.rc__seg--safe { background: #2e8b57; }
.rc__seg--help { background: var(--stop); }
.rc__seg--unknown { background: #d99a2b; }
.rc__panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .75rem .9rem; }
.rc__panel--help { border: 2px solid var(--stop-line); }
.rc__panel--unknown { border: 2px solid var(--warn-line); }
.rc__panel--summary { border: 2px solid var(--primary); }
.rc__h { margin: 0 0 .35rem; font-size: 1rem; }
details.rc__panel > summary.rc__h { cursor: pointer; margin: 0; }
details.rc__panel[open] > summary.rc__h { margin-bottom: .35rem; }
.rc__panel--help .rc__h { color: #7d1f1f; }
.rc__panel--unknown .rc__h { color: #6b4a10; }
.rc__panel--safe .rc__h { color: #1d5330; }
.rc__rows { list-style: none; margin: 0; padding: 0; }
.rc__row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.rc__row:first-child { border-top: 0; }
.rc__note { font-size: .92rem; color: #7d1f1f; overflow-wrap: anywhere; }
.rc__badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.rc__badges:empty { display: none; }
.rc__acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: .35rem; }
.rc__mark { padding: .45rem .75rem; min-height: 2.5rem; }
.rc__p { margin: 0 0 .4rem; overflow-wrap: anywhere; }
.rc__soft { color: var(--ink-soft); font-size: .92rem; }
.rc__plain { margin: .25rem 0 .5rem; padding-left: 1.25rem; }
.rc__plain li { overflow-wrap: anywhere; }
.rc__closelist { margin-top: .5rem; }
.rc__addform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; margin-top: .5rem; }
.rc__addform .form__f { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .92rem; }
.rc__addemail { flex: 1 1 16rem; }
.rc__addform input, .rc__addform select, .rc__startrow select {
  font: inherit; font-weight: 400; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--ink); width: 100%;
}
.rc__startrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; }
.rc__startrow .form__f { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .92rem; flex: 0 1 16rem; }
.rc__why { text-align: left; margin-top: .35rem; }
.rc__history { list-style: none; padding: 0; }
.rc__hrow { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.rc__hrow:first-child { border-top: 0; }
@media (max-width: 40rem) {
  .rc__bar, .rollban { padding-left: .85rem; padding-right: .85rem; }
  .rc__body { padding: .75rem .85rem 3rem; }
  .rc__acts { margin-left: 0; width: 100%; }
  .rc__mark { flex: 1 1 auto; }
  .school__rollact { margin-left: 0; }
}

/* ── Settings ▸ Appearance (v0.33.0) ───────────────────────────────── */

.apimgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .5rem 1.5rem; }
.apimg { min-width: 0; }
.apimg input[type="url"] { flex: 1 1 10rem; min-width: 0; font: inherit; padding: .4rem; }
.apimg__now { display: flex; align-items: center; gap: .75rem; margin: .25rem 0 .6rem; min-width: 0; }
.apimg__thumb { display: block; height: 3rem; width: auto; max-width: 9rem; object-fit: contain; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: .25rem; }
.apimg__thumb--favicon { height: 2rem; max-width: 2rem; }
.apimg__desc { color: var(--ink-soft); font-size: .88rem; overflow-wrap: anywhere; min-width: 0; }
.apsets { margin-bottom: .5rem; }
.apsch { align-items: center; }
.apsch input { margin-top: 0; }
.swatch { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .25); background: var(--sw); flex: 0 0 auto; }
.apcol { display: flex; gap: .5rem; align-items: center; }
.apcol input[type="color"] { width: 2.6rem; height: 2.2rem; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; }
.apcol input[type="text"] { width: 7.5rem; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: .4rem; }
/* The preview: the real header, tabs and buttons, drawn in the scheme on screen. */
.apv { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: .75rem 0; background: var(--bg); }
.apv__bar { padding: .6rem .9rem; }
.apv__tabs { padding: 0 .9rem; }
.apv__body { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .9rem; background: var(--card); }
.apv__meter { flex: 1 1 8rem; min-width: 6rem; }
.apv__meter > span { width: 60%; }
.apc { list-style: none; margin: .25rem 0 .75rem; padding: 0; }
.apc__row { display: grid; grid-template-columns: auto 4.5rem minmax(0, 1fr); gap: .5rem; align-items: baseline; padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.apc__ratio { font-variant-numeric: tabular-nums; font-weight: 600; }
.apc__what { overflow-wrap: anywhere; }

/* ── Admin ▸ Campuses & places, the editor (v0.33.0) ───────────────── */

.locnotes { padding-left: 2rem; }
.locnotes li { margin-bottom: .3rem; }
.locadd { margin: 1rem 0; }
.locadd > summary { font-weight: 600; color: var(--ink); }
.loc--child { margin-left: 1.5rem; }
.campus__logo { display: block; height: 1.6rem; width: 2rem; object-fit: contain; flex: 0 0 auto; }
.badge--here { background: var(--info-bg); border-color: var(--info-line); color: #1f3f6b; }
.loc__known { margin: .25rem 0 .75rem; }
.loc__map { margin: .5rem 0; overflow-wrap: anywhere; }
.maplink { font-weight: 600; }
.locedit { margin: .75rem 0; }
.locedit > summary { font-weight: 600; color: var(--ink); }
.locedit .form { margin-top: .6rem; }
.locedit .form select, .locadd .form select { font: inherit; padding: .4rem; }
.locimg { margin: .75rem 0; }
.locimg input[type="url"] { flex: 1 1 10rem; min-width: 0; }
@media (max-width: 40rem) {
  .loc--child { margin-left: .75rem; }
}

/* ── Admin ▸ Campuses & places — the location card (v0.34.0) ──────────
 *
 * MultiPass's Locations card, ported: a collapsible card per place (name,
 * abbreviation chip, trash), Name / Abbreviation / Active, the fence, the
 * three Features switches, Hours & session with the green in-session band
 * and the blue operational band, Buildings & structures, and the satellite
 * picker. The two band colours are MultiPass's own and mean the same thing
 * there; they are not the district's scheme. Every size is rem [I12].
 */

.loclegend { margin: 0 0 .5rem; font-size: .9rem; color: var(--ink-soft); }
.locnotes { margin: 0 0 1rem; font-size: .9rem; }
.locnotes > summary { cursor: pointer; color: var(--ink-soft); }
.locnotes ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.locnotes li { margin-bottom: .3rem; }

.lcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: .5rem;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.lcard:hover { border-color: #b8c0c9; }
.lcard--open { border-color: var(--primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent); }
.lcard--off { background: #fafafa; }
.lcard--child { margin-left: 1.5rem; }
.lcard__head { display: flex; align-items: center; gap: .5rem; padding: 0 .6rem 0 0; }
.lcard__toggle {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: .6rem; flex-wrap: nowrap;
  font: inherit; color: inherit; text-align: left;
  background: none; border: 0; padding: .7rem .9rem; cursor: pointer;
}
.lcard__toggle:hover { background: #fafbfc; }
.lcard__toggle:focus-visible, .ibtn:focus-visible, .daychip:focus-visible, .btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px;
}
.icon { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; vertical-align: middle; }
.btn--icon { display: inline-flex; align-items: center; gap: .4rem; }
.btn--icon .icon { width: 1rem; height: 1rem; }
.ibtn { display: inline-flex; align-items: center; justify-content: center; }
.ibtn--sm .icon { width: .9rem; height: .9rem; }
.lcard__title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.lcard__chev { color: #9aa4af; width: 1rem; height: 1rem; transition: transform .15s, color .15s; }
.lcard--open .lcard__chev { transform: rotate(90deg); color: var(--primary); }
.lcard__logo { height: 1.5rem; width: 1.75rem; object-fit: contain; flex: 0 0 auto; }
/* The image slot beside the toggle (v0.43.0): its own image, or a dashed "Add image" placeholder. */
.lcard__img { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; margin-left: .6rem; min-height: 2.25rem; min-width: 2.25rem; justify-content: center; padding: .15rem .35rem; font: inherit; font-size: .78rem; color: var(--ink-soft); background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.lcard__img:hover { border-color: var(--line); background: #fafbfc; }
.lcard__img:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.lcard__img--empty { border: 1px dashed #b8c0c9; }
.lcard__img .lcard__logo { height: 1.75rem; width: 2.1rem; }
.lcard__name { font-weight: 600; font-size: .98rem; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.lcard--off .lcard__name { color: var(--ink-soft); }
.abbrpill {
  background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .1rem .5rem; border-radius: 999px; flex: 0 0 auto;
}
.lcard--off .abbrpill { background: #eef0f2; color: #7a838c; }
.tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .1rem .45rem; border-radius: 999px; background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line); flex: 0 0 auto;
}
.tag--off { background: var(--stop-bg); color: #7d1f1f; border-color: var(--stop-line); }
.tag--here { background: var(--info-bg); color: #1f3f6b; border-color: var(--info-line); }
.lcard__right { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.dirty { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; color: #8a5a00; }
.dirty__dot { width: .55rem; height: .55rem; border-radius: 50%; background: #e0a100; }
.ibtn {
  font: inherit; line-height: 1; cursor: pointer;
  min-width: 2.25rem; min-height: 2.25rem; padding: .3rem .45rem;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink-soft);
}
.ibtn:hover { background: var(--bg); }
.ibtn--danger { color: var(--stop); }
.ibtn--danger:hover { background: var(--stop-bg); }
.ibtn--sm { min-width: 1.6rem; min-height: 1.6rem; padding: .1rem .3rem; font-size: .9rem; }
.btn--sm { padding: .4rem .75rem; font-size: .85rem; }

.lcard__body { border-top: 1px solid #eef1f4; padding: .9rem 1rem 1rem; background: #fafbfc; }
.lgrid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 8rem;
  gap: .75rem .9rem; align-items: start;
}
.lf { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.lf__top { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: .3rem; min-height: 1.6rem; }
/* A label never wraps: the "Set here" dot and ↺ sit beside it, and narrow columns show the dot alone. */
.lf__label { font-size: .78rem; font-weight: 600; color: var(--ink-soft); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lf__top .prov { flex: 0 0 auto; }
.lf__hint { margin: .15rem 0 0; font-size: .8rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.lf input[type="text"], .lf input[type="number"], .lf select, .lsave input {
  width: 100%; font: inherit; font-size: .92rem; padding: .45rem .55rem;
  border: 1px solid #cfd5dc; border-radius: 6px; background: #fff; min-width: 0;
}
.lf input:focus, .lf select:focus, .lsave input:focus, .band input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.lf__abbr { text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
.lf__abbr::placeholder { text-transform: none; font-weight: 400; letter-spacing: 0; color: #8a939c; }
.is-changed { border-color: #e0a100 !important; background: #fffaf0 !important; }
.sw.is-changed, .band.is-changed { background: transparent !important; }
.sw.is-changed .sw__track { box-shadow: 0 0 0 2px #e0a100; }
.band.is-changed { outline: 2px solid #f0c75e; outline-offset: -1px; }

.prov { display: inline-flex; align-items: center; gap: .25rem; }
.prov__here {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; font-weight: 700; color: #1f3f6b; white-space: nowrap;
}
.prov__here::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: #2563eb; }
.prov__back { font-size: .7rem; font-weight: 600; color: #8a5a00; white-space: nowrap; }

/* The switch: MultiPass's toggle, over a real checkbox. */
.sw { position: relative; display: inline-flex; align-items: center; height: 2.1rem; cursor: pointer; }
.sw__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.sw__track { width: 2.4rem; height: 1.3rem; background: #c3cbd4; border-radius: 999px; position: relative; transition: background .18s; }
.sw__dot { position: absolute; top: .15rem; left: .15rem; width: 1rem; height: 1rem; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .18s; }
.sw__input:checked + .sw__track { background: var(--primary); }
.sw__input:checked + .sw__track .sw__dot { transform: translateX(1.1rem); }
.sw__input:focus-visible + .sw__track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.sw__input:disabled { cursor: not-allowed; }
.sw__input:disabled + .sw__track { opacity: .55; }

.lrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .75rem 0 0; }
.loc__fence { margin: 0; flex: 1 1 14rem; }
.loc__known { margin: 0 0 .75rem; font-size: .9rem; color: var(--ink-soft); }

.lsec { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid #e6e9ed; }
.lsec__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lsec__h { margin: 0 0 .4rem; font-size: .78rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.lsec__head .lsec__h { margin: 0; }
.lsec__hint { margin: .35rem 0 .75rem; font-size: .82rem; color: var(--ink-soft); line-height: 1.45; }
.lsec--more > summary, .lsec--image > summary { cursor: pointer; margin: 0; }
.lsec--image[open] > summary { margin-bottom: .6rem; }
.lsec__sub { text-transform: none; font-weight: 400; letter-spacing: 0; }
.lsec--image > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.lsec--more[open] > summary { margin-bottom: .6rem; }

.feat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .35rem 0; }
.feat__text { display: flex; flex-direction: column; line-height: 1.3; }
.feat__title { font-weight: 600; cursor: pointer; }
.feat__sub { font-size: .8rem; color: #6b7280; }
.feat__prov { display: inline-flex; align-items: center; gap: .4rem; }
.feat__lock { font-size: .72rem; font-weight: 600; color: #7d1f1f; background: var(--stop-bg); border: 1px solid var(--stop-line); border-radius: 999px; padding: .05rem .5rem; cursor: help; }
.feat--locked .feat__title { color: var(--ink-soft); }

.days { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0 .7rem; }
.daychip {
  font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  min-width: 2.4rem; min-height: 2rem; padding: .25rem .6rem;
  border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #6b7280;
}
.daychip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.band {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem;
  padding: .5rem .65rem; border-left: 3px solid; border-radius: 0 8px 8px 0; margin-bottom: .5rem;
}
.band__head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; width: 12rem; flex: 0 0 auto; }
.bnote { margin: .5rem 0 0; font-size: .78rem; color: #1f3f6b; }
.bcard.bcard--unset { border-left: 3px solid #e0a100; }
.lsec__prov { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; }
.lsec__provlabel { font-size: .72rem; font-weight: 600; color: var(--ink-soft); }
.band--in { border-color: #16a34a; background: #f0fbf4; }
.band--op { border-color: #2563eb; background: #eef4fd; }
.band__label { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.band--in .band__label { color: #11772f; }
.band--op .band__label { color: #1d4fbf; }
.band__times { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: nowrap; min-width: 0; }
.band__to { color: #6b7280; }
.band input[type="time"] { font: inherit; font-size: .92rem; padding: .3rem .45rem; border: 1px solid #c9d3dc; border-radius: 7px; background: #fff; }
.band__problem { flex-basis: 100%; margin: 0; font-size: .82rem; font-weight: 600; color: #7d1f1f; }
.band__warn { margin: 0 0 .5rem; font-size: .82rem; color: #6b4a10; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 6px; padding: .35rem .6rem; }
.legend { margin: .4rem 0 0; font-size: .8rem; color: #6b7280; line-height: 1.45; }
.legend--in { color: #11772f; }
.legend--op { color: #1d4fbf; }
.sess { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .1rem .55rem; border: 1px solid; white-space: nowrap; }
.sess--in { color: #11772f; background: #e6f6ec; border-color: #9fd8b1; }
.sess--operational { color: #1d4fbf; background: #eaf1fd; border-color: #a9c2ee; }
.sess--closed, .sess--unknown { color: var(--ink-soft); background: var(--bg); border-color: var(--line); }
.sess--inline { display: none; }
@media (max-width: 40rem) {
  .sess--inline { display: inline-block; }
  .sess--right { display: none; }
}

.count {
  background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .4rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.bempty { margin: 0 0 .6rem; font-size: .85rem; color: #8a939c; font-style: italic; }
.bcard { background: #fff; border: 1px solid #e3e7eb; border-radius: 10px; padding: .75rem .9rem; margin-bottom: .6rem; }
.bcard--off { background: #fafafa; }
.bcard--removed { background: var(--stop-bg); border-style: dashed; }
.bcard__gone { margin: 0; font-size: .9rem; }
.bcard__head { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; flex-wrap: wrap; }
.bcard__abbr { margin-left: auto; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--primary); }
.src { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.src--here { color: #1f3f6b; }
.src--gone { color: #7d1f1f; }
.bgrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 8rem; gap: .6rem .9rem; align-items: start; }
/* The narrow third column: the chip is its dot alone (the words stay in its tooltip). */
.lf--radiusM .prov__here, .lf--enabled .prov__here, .lf--bradius .prov__here, .lf--bactive .prov__here { font-size: 0; gap: 0; }
.bcard__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid #f0f2f4; }
.bcard__trash { margin-left: auto; }
.bwarn { font-size: .8rem; color: var(--ink-soft); }
.bwarn--unset, .bwarn--out { color: #8a4b00; font-weight: 600; }
.bwarn--out { color: #7d1f1f; }

.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0; padding: .6rem .75rem; border: 1px solid var(--stop-line); background: var(--stop-bg); border-radius: 8px; }
.confirm__text { flex: 1 1 100%; margin: 0; font-size: .88rem; }
.confirm input { flex: 1 1 12rem; font: inherit; padding: .4rem .5rem; border: 1px solid #cfd5dc; border-radius: 6px; }

.lsave { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid #e6e9ed; }
.lsave__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.lsave__note { margin: 0; font-size: .85rem; color: var(--ink-soft); flex: 1 1 12rem; }

@media (max-width: 40rem) {
  .lcard--child { margin-left: .5rem; }
  .lcard__toggle { padding: .65rem .7rem; gap: .45rem; }
  .lcard__img { margin-left: .4rem; }
  .lcard__imgword { display: none; }
  .dirty__text { display: none; }
  .lcard__body { padding: .8rem .75rem; }
  .lgrid, .bgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lf--name, .lf--bname { grid-column: 1 / -1; }
  .band { padding: .45rem .5rem; gap: .35rem; }
  .band__head { width: 100%; }
  .band__times { gap: .3rem; width: 100%; }
  .band input[type="time"] { font-size: .85rem; padding: .25rem .3rem; min-width: 0; flex: 1 1 0; width: 0; }
  .band__to { font-size: .85rem; }
  /* Seven day chips on one row. */
  .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
  .daychip { min-width: 0; padding: .25rem 0; }
  .feat { grid-template-columns: auto minmax(0, 1fr); }
  .feat__prov { grid-column: 2; }
  .bcard { padding: .7rem; }
}

/* ── Pick on map (v0.34.0) ── */
body.is-modal { overflow: hidden; }
.mp {
  position: fixed; inset: 0; z-index: var(--z-dialog);
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.mp[hidden] { display: none !important; }
.mp__dialog {
  background: #fff; border-radius: 12px; width: 100%; max-width: 47.5rem;
  max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
}
.mp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1.1rem .6rem; }
.mp__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--primary); overflow-wrap: anywhere; }
.mp__title::before { content: "📍 "; }
.mp__sub { margin: .15rem 0 0; font-size: .82rem; color: #6b7280; }
.mp__close { font-size: 1.4rem; }
.mp__map { height: 26rem; width: 100%; background: #dfe3e8; flex: 0 0 auto; }
.mp__fallback { margin: 0; background: #fffbeb; color: #7a4a06; font-size: .85rem; padding: .6rem 1.1rem; border-top: 1px solid #fde68a; }
.mp__legend { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .78rem; color: var(--ink-soft); padding: .5rem 1.1rem 0; }
.mp__key { display: inline-block; width: 1rem; height: .7rem; border-radius: 999px; vertical-align: middle; }
.mp__key--fence { border: 2px dashed #7a838c; }
.mp__key--other { border: 2px solid #d9a400; }
.mp__key--pin { border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 20%, transparent); }
.mp__controls { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; padding: .8rem 1.1rem .4rem; }
.mp__coord { flex: 0 1 9.5rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.mp__coord input, .mp__radiusrow input[type="number"] { font: inherit; font-size: .92rem; width: 100%; padding: .4rem .5rem; border: 1px solid #cfd5dc; border-radius: 6px; }
.mp__radius { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.mp__radiusrow { display: flex; align-items: center; gap: .6rem; }
.mp__radiusrow input[type="range"] { flex: 1 1 auto; accent-color: var(--primary); min-width: 0; }
.mp__radiusrow input[type="number"] { flex: 0 0 5rem; width: 5rem; }
.mp__warn { margin: 0 1.1rem; font-size: .84rem; color: #11772f; }
.mp__warn--out { color: #7d1f1f; font-weight: 600; }
.mp__actions { display: flex; justify-content: flex-end; gap: .6rem; padding: .8rem 1.1rem 1.1rem; }
.mp .leaflet-pane, .mp .leaflet-top, .mp .leaflet-bottom { z-index: 400; }
.mp .leaflet-control-attribution { font-size: .65rem; }
.mp__label { background: rgba(0,0,0,.55); color: #fff; border: 0; box-shadow: none; font-size: .72rem; font-weight: 600; padding: .05rem .35rem; }
.mp__label::before { display: none; }
@media (max-width: 40rem) {
  .mp { padding: 0; align-items: stretch; }
  .mp__dialog { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .mp__map { height: 44vh; }
  .mp__coord { flex: 1 1 8rem; }
  .mp__actions { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line); }
  .mp__actions .btn { flex: 1 1 auto; }
}

/*
 * Printing a screen (v0.33.0). Browsers drop background colours when
 * printing, which would leave the header's white text on white paper, and a
 * district's scheme is not what a printed page is for. Paper is neutral ink,
 * whatever the scheme: the same rule the service's own printouts follow
 * (render/html.ts PAPER_INK). `!important` because the scheme is set on the
 * page's root at run time.
 */
@media print {
  :root { --primary: #22262b !important; --accent: #4a4f57 !important; --stop: #22262b !important; }
  body { background: #fff; }
  .topbar, .tabs { background: #fff !important; color: #000 !important; border-bottom: 1px solid #000; }
  .tab { background: none !important; color: #000 !important; }
  .topbar .btn, .tabs, #muster-banner, .rollban { display: none !important; }
  .btn--primary, .btn--stop { background: #fff !important; color: #000 !important; border-color: #000 !important; }
}

/* ── History (v0.36.0) ──────────────────────────────────────────────── */
.htable { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 6px; font-size: .92rem; }
.htable th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); padding: .5rem .7rem; border-bottom: 2px solid var(--line); background: var(--bg); }
.htable td { padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
.htable td:nth-child(2) { min-width: 11rem; }
.htable tr:last-child td { border-bottom: 0; }
.htable__when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.htable__what { font-weight: 600; }
.htable__name { display: block; font-weight: 600; }
.htable__sub { display: block; color: var(--ink-soft); font-size: .85rem; overflow-wrap: break-word; }
.htable__link { display: block; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--primary); text-align: left; text-decoration: underline; cursor: pointer; overflow-wrap: break-word; }
.htable__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.htable .badge { margin-top: .2rem; }
@media (max-width: 40rem) {
  /* A phone gets each record as a small card: the heading of every cell travels with it. */
  .htable, .htable tbody, .htable tr, .htable td { display: block; width: 100%; }
  .htable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .htable { border: 0; background: none; }
  .htable tr { background: var(--card); border: 1px solid var(--line); border-radius: 6px; margin-bottom: .5rem; padding: .3rem 0; }
  .htable td { border-bottom: 0; padding: .25rem .8rem; }
  .htable td:nth-child(2) { min-width: 0; }
  .htable td::before { content: attr(data-label); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); font-weight: 400; }
  .htable__when { white-space: normal; }
}

/* ── Admin ▸ System status (v0.36.0) ───────────────────────────────────
   Every state is a WORD first; the colour only repeats it. */
.sbanner { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1.1rem; border: 2px solid var(--line); border-radius: 6px; background: var(--card); margin: 0 0 1rem; }
.sbanner__word { font-size: 1.15rem; }
.sbanner__line { font-size: .92rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.sbanner--green { background: var(--ok-bg); border-color: var(--ok-line); }
.sbanner--yellow, .sbanner--unknown { background: var(--warn-bg); border-color: var(--warn-line); }
.sbanner--red { background: var(--stop-bg); border-color: var(--stop-line); }
.hpill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--line); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.hpill--green { background: var(--ok-bg); border-color: var(--ok-line); color: #1d5330; }
.hpill--yellow { background: var(--warn-bg); border-color: var(--warn-line); color: #6b4a10; }
.hpill--red { background: var(--stop-bg); border-color: var(--stop-line); color: #7a1f1f; }
.hpill--info { background: var(--info-bg); border-color: var(--info-line); color: #1b3f6e; }
.hpill--unknown { background: var(--bg); border: 2px dashed var(--ink-soft); color: var(--ink); }
.scheck { background: var(--card); border: 1px solid var(--line); border-left-width: .35rem; border-radius: 6px; padding: .65rem .9rem; margin-bottom: .5rem; }
.scheck--green { border-left-color: var(--ok-line); }
.scheck--yellow { border-left-color: var(--warn-line); }
.scheck--red { border-left-color: var(--stop); }
.scheck--unknown { border-left-color: var(--ink-soft); border-left-style: dashed; }
.scheck__head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.scheck__label { font-weight: 700; }
.scheck__msg { margin: .3rem 0 0; overflow-wrap: anywhere; }
.scheck__fix, .scheck__meta { margin: .2rem 0 0; font-size: .85rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.beats { display: flex; flex-wrap: wrap; gap: 2px; margin: .5rem 0; }
.beat { display: inline-block; min-width: 1.15rem; text-align: center; font-size: .72rem; font-weight: 700; border: 1px solid var(--line); border-radius: 3px; padding: .05rem 0; }
.beat--green { background: var(--ok-bg); border-color: var(--ok-line); }
.beat--yellow { background: var(--warn-bg); border-color: var(--warn-line); }
.beat--red { background: var(--stop-bg); border-color: var(--stop-line); }
.beat--unknown { background: var(--bg); border-style: dashed; }

/* ── Help, Report a problem and Support reports (v0.38.0) ── */
.sp { max-width: 40rem; }
.sp__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--primary); overflow-wrap: anywhere; }
.sp__form { padding: 0 1.1rem .4rem; }
.sp__form textarea { font: inherit; font-weight: 400; color: var(--ink); width: 100%; box-sizing: border-box; resize: vertical; padding: .5rem; border: 1px solid var(--line); border-radius: 6px; }
.sp__form select { font: inherit; font-weight: 400; color: var(--ink); padding: .45rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); max-width: 100%; }
.sp__h { margin: .2rem 0 .3rem; font-size: .88rem; color: var(--ink-soft); }
.sp__ctx { grid-column: 1 / -1; }
.sp__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .15rem .8rem; margin: 0; font-size: .82rem; }
.sp__list dt { color: var(--ink-soft); font-weight: 600; }
.sp__list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sp__mine { padding: .2rem 1.1rem 1rem; border-top: 1px solid var(--line); margin-top: .5rem; }
.sp__tickets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.sp__ticket { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem; background: var(--card); min-width: 0; }
.sp__tline { margin: 0 0 .15rem; display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: baseline; overflow-wrap: anywhere; }
.sp__tmeta { margin: .1rem 0; font-size: .82rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.sp__tdesc { margin: .4rem 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; }
.sp__tctx { margin: .3rem 0; font-size: .85rem; }
.sp__tact { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
.sp__tact input { flex: 1 1 14rem; min-width: 0; font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 6px; }
.sp__tact select { font: inherit; padding: .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.help__s { margin: 1.1rem 0 0; padding-top: .6rem; border-top: 1px solid var(--line); scroll-margin-top: .5rem; }
.help__s:first-child { border-top: 0; }
.help__who { margin: -.2rem 0 .4rem; font-size: .8rem; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
#help-toc { margin-top: .6rem; }

/* ── Compliance binder (v0.39.0) ─────────────────────────────────────── */
.badge--bd-filed { background: var(--ok-bg); border-color: var(--ok-line); color: #1d5330; }
.badge--bd-no-file { background: var(--info-bg); border-color: var(--info-line); color: #1b3f6e; }
/* "Nothing on file" is a fact about the binder, not a finding: warning colour, never the stop colour. */
.badge--bd-nothing { background: var(--warn-bg); border-color: var(--warn-line); color: #6b4a10; }
#bd-campus { min-width: 16rem; max-width: 100%; }
.badge--bd-withdrawn { background: var(--bg); border: 1px dashed var(--line); color: var(--ink-soft); text-decoration: line-through; }
.badge--bd-not-started, .badge--bd-periods-not-set, .badge--bd-not-expected { background: var(--bg); border-color: var(--line); color: var(--ink-soft); }
.bd__tbl td:nth-child(2) { min-width: 8rem; }
.bd__q { display: flex; flex-wrap: wrap; gap: .2rem .7rem; margin-top: .3rem; font-size: .82rem; color: var(--ink-soft); }
.bd__list { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0 1rem; }
.bd__rec, .bd__add { padding: .5rem .8rem; background: var(--card); border: 1px solid var(--line); border-radius: 6px; margin: .5rem 0; }
.bd__rec > summary { cursor: pointer; overflow-wrap: anywhere; }
.bd__panel { margin-top: .75rem; }
.bd__form textarea, .bd__add textarea { font: inherit; padding: .4rem; width: 100%; box-sizing: border-box; }
.bd__hist { margin: .4rem 0 .75rem 1.1rem; padding: 0; overflow-wrap: anywhere; }
.bd__slot:empty { display: none; }
@media (max-width: 40rem) {
  .bd__tbl, .bd__tbl tbody, .bd__tbl tr, .bd__tbl td { display: block; width: 100%; }
  .bd__tbl thead { display: none; }
  .bd__tbl tr { border-bottom: 1px solid var(--line); padding: .5rem 0; }
  .bd__tbl td { border: 0; padding: .15rem 0; }
}

/* The wall's bookmarkable address (v0.43.0). */
.wallhint { margin: .25rem 0 .75rem; }
.walladdr { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: .1rem .4rem; overflow-wrap: anywhere; user-select: all; }
.walladdr__note { color: var(--ink-soft); font-size: .88rem; }

/* v0.45.0: day types on the calendar, and the distance setting. */
.daytag { display: inline-block; font-size: .7rem; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: .05rem .5rem; margin-left: .35rem; vertical-align: middle; color: var(--ink-soft); background: var(--bg); }
.daytag--staff { color: #1d4fbf; background: #eaf1fd; border-color: #a9c2ee; }
.daytag--holiday { color: #7a4a00; background: #fff4e0; border-color: #e8c98a; }
.daytag--unconfirmed { color: #8a1c1c; background: #fdecec; border-color: #e5a9a9; }
.kinds { border: 0; padding: 0; margin: 0 0 .5rem; display: grid; gap: .4rem; }
.kinds legend { font-weight: 600; padding: 0; margin-bottom: .25rem; }
.units { display: grid; gap: .6rem; margin-bottom: .5rem; }
.units__opt { display: grid; gap: .1rem; }
.sess--holiday, .sess--staff { color: var(--ink-soft); }
.closure { column-gap: .6rem; }
@media (min-width: 40.01rem) { .closure { grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr) auto auto; } }
@media (max-width: 40rem) { .closure { grid-template-columns: minmax(0, 1fr); row-gap: .25rem; margin-bottom: .6rem; } }

/* ── Weather advisories (v0.46.0) ─────────────────────────────────────────
 * MultiPass's strip: amber for watches and advisories, red for warnings. The
 * colour is never the only signal — the lead says SEVERE WEATHER or WEATHER
 * ADVISORY, and each alert is named in words. Purely advisory. A lockdown
 * outranks it: while one is active the strip is drawn smaller (.advisory--yield).
 */
.advisory { margin: 0 0 .9rem; padding: .6rem .85rem; border-radius: 8px; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: #fffbeb; border: 1px solid #f59e0b; color: #78350f; }
.advisory[hidden] { display: none; }
.advisory--severe { background: #fef2f2; border-color: #dc2626; color: #7f1d1d; }
.advisory__lead { font-weight: 800; white-space: nowrap; }
.advisory__chip { padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: rgba(255, 255, 255, .65); border: 1px solid #f59e0b; }
.advisory__chip--severe { border-color: #dc2626; }
.advisory__until { font-weight: 500; }
.advisory__tag { font-size: .72rem; opacity: .75; margin-left: auto; }
.advisory--yield { padding: .25rem .6rem; font-size: .82rem; }
.advisory--yield .advisory__lead { font-weight: 700; }
/* On the wall: read from across a room, under the header, above the numbers. */
.advisory--wall { margin: 0; padding: clamp(7px, 1.2vh, 14px) clamp(14px, 2vw, 30px); gap: 14px; font-size: clamp(.95rem, 1.9vh, 1.3rem); background: linear-gradient(90deg, rgba(245, 158, 11, .30), rgba(245, 158, 11, .12)); border: 0; border-bottom: 1px solid rgba(245, 158, 11, .5); color: #fff; border-radius: 6px; }
.advisory--wall.advisory--severe { background: linear-gradient(90deg, rgba(239, 45, 45, .30), rgba(239, 45, 45, .12)); border-bottom-color: rgba(239, 45, 45, .55); }
.advisory--wall .advisory__lead { letter-spacing: 1px; }
.advisory--wall .advisory__chip { background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .18); font-size: inherit; padding: 3px 12px; }
.advisory--wall .advisory__until { font-weight: 600; opacity: .8; margin-left: 6px; font-size: .85em; }
.advisory--wall.advisory--yield { font-size: clamp(.8rem, 1.4vh, 1rem); padding-top: 3px; padding-bottom: 3px; }