/* Kalibre shared chrome. */
/* @import MUST be the first rule in the file. A declaration above it makes the browser
   discard it silently and the page falls back to system-ui with no error anywhere. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* The hidden attribute has to win. Slots that JavaScript fills, the mode chip among
   them, ship empty and hidden so a page never shows a value nobody has computed yet.
   An author display rule beats the UA one, so this makes the attribute the authority. */
[hidden] { display: none !important; }

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page); color: var(--ink-1);
  font-size: 14.5px; line-height: 1.55;
}
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 14px 24px;
  position: sticky; top: 0; z-index: 50; background: var(--page);
  border-bottom: 1px solid var(--baseline);
}
.wordmark { font-weight: 700; font-size: 17px; color: var(--kz-red); text-decoration: none; }
/* The bar has two ends. Brand and page name on the left, and everything about the
   account at the right hand end: which data you are looking at, who you are signed in
   as and the way out. The account slot is in the same place on every page, which is
   where anybody who has used any other web app will look for it. This one auto margin
   is what divides the two, so nothing after it needs an alignment rule of its own. */
.wordsub { color: var(--ink-2); font-size: 12px; margin-right: auto; }
.demo-chip {
  font-size: 10.5px; color: var(--ink-2);
  border: 1px solid var(--baseline); border-radius: 999px; padding: 3px 10px;
  background: var(--card); white-space: nowrap;
}
/* Who is signed in. Live mode only: demo mode never mounts this. */
.whoami { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--ink-2); min-width: 0; }
.whoami .who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
/* On a phone the wordmark, the page name, the mode chip and the signed in name will not
   sit on one line, and the field app is read on a phone. The bar wraps rather than
   squashing the name that is about to go on every captured row, and the account slot
   keeps its own auto margin so it stays at the right hand end on whichever line it
   lands on. The name is allowed less room here and ellipsis takes the rest. */
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; gap: 6px 10px; padding: 12px 16px; }
  .whoami { margin-left: auto; }
  .whoami .who-name { max-width: 20ch; }
}
.whoami .signout {
  border: 1px solid var(--baseline); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: 3px 11px; font-size: 10.5px; font-family: inherit;
  cursor: pointer; white-space: nowrap;
}
.whoami .signout:hover { border-color: var(--kz-red); color: var(--kz-red); }
main { max-width: 1220px; margin: 0 auto; padding: 22px 24px 70px 24px; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.sub { color: var(--ink-2); font-size: 13.5px; max-width: 68ch; margin-top: 3px; }
.card { background: var(--card); border-radius: 14px; padding: 18px 20px; }
.card h2 { font-size: 14px; font-weight: 600; }
.card .hint { font-size: 12px; color: var(--ink-3); margin: 1px 0 12px 0; }
.grid { display: grid; gap: 14px; margin-top: 16px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-32 { grid-template-columns: 3fr 2fr; }
.cols-23 { grid-template-columns: 2fr 3fr; }
@media (max-width: 980px) { .cols-2, .cols-32, .cols-23 { grid-template-columns: 1fr; } }

a { color: var(--kz-red); text-decoration: none; }
a:hover { text-decoration: underline; }
a.wordmark:hover { text-decoration: none; }

.btn {
  border: none; background: var(--kz-red); color: #fff; font-family: inherit;
  padding: 11px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.btn.ghost { background: var(--card); color: var(--ink-1); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--kz-red); }
.btn[disabled] { opacity: 0.5; cursor: default; }
.tag { font-size: 11px; color: var(--ink-2); background: var(--card); border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.chip2 { font-size: 10.5px; border: 1px solid var(--grid); border-radius: 999px; padding: 1px 8px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip2.ref { border-color: var(--kz-red); color: var(--kz-red); font-weight: 500; }
button.chip2 { background: none; cursor: pointer; font-family: inherit; }
button.chip2.sel { border-color: var(--kz-red); background: var(--kz-red); color: #fff; font-weight: 600; }

.seg { display: inline-flex; background: var(--card); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button {
  border: none; background: none; font-family: inherit; cursor: pointer;
  font-size: 12.5px; padding: 6px 15px; border-radius: 999px; color: var(--ink-2); font-weight: 500;
  min-height: 30px;
}
.seg button[aria-pressed="true"] { background: var(--kz-red); color: #fff; font-weight: 600; }
@media (max-width: 980px) { .seg button, .chip2, button.chip2 { min-height: 34px; } }

/* Any table that might be wider than a phone scrolls inside its own box rather than
   shrinking the type, the same rule .chart-scroll follows for charts. */
.tbl-wrap { overflow-x: auto; }
table.dbt { width: 100%; border-collapse: collapse; font-size: 12px; }
table.dbt th { text-align: left; color: var(--ink-3); font-weight: 500; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
table.dbt td { padding: 6px 8px; border-bottom: 1px solid var(--grid); color: var(--ink-2); font-variant-numeric: tabular-nums; }
table.dbt td:first-child { color: var(--ink-1); }
table.dbt tr:last-child td { border-bottom: none; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2); margin: 2px 0 10px 0; }
.legend .li { display: flex; align-items: center; gap: 6px; }
.sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
details.tbl { margin-top: 8px; }
details.tbl summary { font-size: 11.5px; color: var(--ink-3); cursor: pointer; }
details.tbl > div { margin-top: 8px; overflow-x: auto; }
svg text { font-family: inherit; }
svg .bar-hit { cursor: pointer; }
.chart-scroll { overflow-x: auto; }
.chart-scroll svg { min-width: 720px; }

#tip {
  position: fixed; pointer-events: none; z-index: 99; display: none;
  background: var(--kz-black); color: #fff; border-radius: 10px; padding: 9px 12px; font-size: 12px;
  box-shadow: 0 8px 22px rgba(46,45,44,0.3); max-width: 270px;
}
#tip .tt { color: rgba(255,255,255,0.65); font-size: 11px; margin-bottom: 3px; }
#tip .tr { display: flex; align-items: center; gap: 7px; margin: 2px 0; }
#tip .tv { font-weight: 700; }
#tip .tn { color: rgba(255,255,255,0.75); }
#tip .key { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }

details.stx { margin-top: 6px; }
details.stx summary { font-size: 11px; color: var(--ink-3); cursor: pointer; }
.stx-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.stx-row select, .stx-row input {
  border: 1.5px solid var(--grid); border-radius: 10px; background: var(--card);
  color: var(--ink-1); font-family: inherit; font-size: 12.5px; padding: 7px 9px;
}
.stx-row input { flex: 1; min-width: 190px; }
.stx-row .btn { padding: 7px 15px; font-size: 12.5px; }
.stx-msg { font-size: 11.5px; color: var(--kz-red); font-weight: 500; margin-top: 5px; min-height: 15px; }
.fs-line { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; }

.srch { margin: 8px 0 4px 0; }
.srch-in {
  width: 100%; border: 1.5px solid var(--grid); border-radius: 999px; background: var(--card);
  color: var(--ink-1); font-family: inherit; font-size: 13px; padding: 9px 14px; min-height: 38px;
}
.srch-in:focus { outline: none; border-color: var(--kz-red); }
.srch-g { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kz-red); font-weight: 600; margin: 12px 0 2px 0; }
.srch-hit { border-bottom: 1px solid var(--grid); padding: 9px 0; }
.srch-hit:last-child { border-bottom: none; }
.srch-hit .sh-t { font-size: 13px; font-weight: 600; line-height: 1.4; }
.srch-hit .sh-m { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 5px; }
.srch-hit .sh-s { font-size: 12px; color: var(--ink-2); margin-top: 5px; }

.note { font-size: 11.5px; color: var(--ink-2); background: var(--wash); border-radius: 10px; padding: 8px 11px; margin: 10px 0; }
.p-tag { font-size: 10px; letter-spacing: 0.12em; color: var(--kz-red); text-transform: uppercase; font-weight: 600; }
.refusal { max-width: 460px; margin: 60px auto; text-align: left; }

/* The school home. One school, three doors: Plan, Capture, Read. Same bar, same
   order, on all three Level 2 screens, so they read as one place rather than three
   unrelated pages. A portfolio link sits at the front so the way back up a level is
   never more than one tap away, the same reason the wordmark always goes home. */
.sch-nav {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 10px 24px; background: var(--card); border-bottom: 1px solid var(--baseline);
}
.sch-up { font-size: 12px; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.sch-up:hover { color: var(--kz-red); text-decoration: none; }
.sch-name { font-size: 12.5px; font-weight: 600; color: var(--ink-1); margin-right: auto; padding-left: 14px; border-left: 1px solid var(--baseline); }
.sch-tabs { display: flex; gap: 4px; }
.sch-tabs a {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  padding: 7px 14px; border-radius: 999px; min-height: 32px; display: inline-flex; align-items: center;
}
.sch-tabs a:hover { color: var(--kz-red); text-decoration: none; }
.sch-tabs a.on { background: var(--kz-red); color: #fff; }
@media (max-width: 560px) { .sch-nav { padding: 9px 16px; } .sch-name { width: 100%; margin-right: 0; } }

/* ---------- the school home · school.html ----------
   The screen you land on after signing in. One school, three doors, nothing else.
   The whole point is what is absent: no counts, no charts, no explanations. The
   doors carry one word each and a short line, and the rest of the product waits
   behind them. */
.home-wrap {
  min-height: calc(100vh - 120px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px 64px;
}
.home-eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kz-red); font-weight: 700; }
.home-school {
  font-size: clamp(28px, 5vw, 44px); font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink-1); text-align: center; margin-top: 10px; line-height: 1.15;
}
.home-meta { font-size: 13px; color: var(--ink-3); margin-top: 8px; text-align: center; }
.home-doors {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  width: min(920px, 100%); margin-top: 44px;
}
.door {
  background: var(--card); border-radius: 22px; padding: 30px 26px 28px;
  min-height: 172px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  text-decoration: none; box-shadow: 0 10px 30px rgba(46,45,44,0.07);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.door:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(46,45,44,0.13); text-decoration: none; }
.door b { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink-1); transition: color 160ms ease; }
.door:hover b { color: var(--kz-red); }
.door span { font-size: 13px; color: var(--ink-2); }
.home-all {
  margin-top: 36px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  padding: 11px 22px; border: 1px solid var(--baseline); border-radius: 999px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.home-all:hover { color: var(--kz-red); border-color: var(--kz-red); text-decoration: none; }
@media (max-width: 760px) {
  .home-wrap { min-height: calc(100vh - 100px); justify-content: flex-start; padding-top: 12vh; }
  .home-doors { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .door { min-height: 0; padding: 22px 24px 20px; gap: 3px; }
  .door b { font-size: 22px; }
}

/* Demo mode served from a public address. Deliberately impossible to read past: it is
   the one thing on the page that must not be mistaken for a measurement. See
   demoBanner() in js/util.js for why a chip was not enough. Print colours it too,
   because a screenshot of a demo dashboard outlives the tab it came from. */
.demo-banner {
  position: sticky; top: 0; z-index: 9999;
  background: var(--kz-red); color: #fff;
  font-weight: 600; font-size: 13px; line-height: 1.4;
  padding: 10px 16px; text-align: center;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
@media print { .demo-banner { position: static; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }