/* Static school pages. Deliberately small and dependency-free:
   these pages exist to be fast and indexable, not to be an application. */
/* ONE PALETTE, USED BY EVERY PAGE INCLUDING THE MAP.
   Warm neutrals, and a single accent that is a warm charcoal rather than a
   colour. The rule the whole site follows: chrome is greyscale, and colour is
   reserved for things that MEAN something -- a school's level on the map, and
   whether a school was oversubscribed. When the furniture is coloured too,
   none of it reads as significant. */
:root{
  /* This is what keeps the page light on a machine set to dark appearance --
     not only the colours below, but the browser's own furniture: the select
     boxes, the text fields, the scrollbars. It belongs here rather than in a
     per-page <meta> tag: the stylesheet is render-blocking in <head>, so it
     applies before anything paints, and one line in one file beats two lines
     in four and a half thousand. */
  color-scheme: light;
  --bg:#FFFFFF;        /* white, as in white */
  --card:#FFFFFF;
  --sunk:#F6F5F2;      /* the only fill: table headers, chips at rest */
  --line:#E5E2DB;
  --line-2:#D4D0C7;
  --ink:#1A1917;       /* near-black, a shade warm so it is not harsh */
  --soft:#5A544C;
  --faint:#8A837A;
  --accent:#33302B;    /* the one accent: borders and emphasis, never a fill */
  --accent-ink:#FFFFFF;
  --brand:#1B1917;
  /* Selected and primary states are light-on-light. A dark fill with white
     text reverses the text colour partway down a page the eye is reading
     straight down, and at any density it turns a set of controls into a row
     of black blocks. Emphasis comes from a warm tint, a darker border and a
     heavier weight instead -- and the text stays one colour throughout. */
  --sel-bg:#F1ECE1;
  --sel-line:#33302B;
  --muted-ink:#6E675C;
  /* Meaning, not decoration. Muted to sit inside a warm neutral page. */
  --stop:#8A3A2C;--stop-bg:#F8ECE8;--stop-line:#E8CFC7;
  --warn:#87661E;--warn-bg:#FAF2E1;--warn-line:#EBDCB8;
  --good:#3E5A3B;--good-bg:#EEF3EB;--good-line:#D3E0CE;
  /* School level. The only categorical colour in the system, and it exists
     because these are the colours of the pins on the map. */
  --lv-preschool:#2E7D6B;--lv-primary:#2F5D8A;
  --lv-secondary:#6B4A7D;--lv-special:#A9552F;
}
/* NO AUTOMATIC DARK THEME.
   There was one, keyed to prefers-color-scheme, and it is why the site kept
   coming up dark: it was following the reader's system appearance, not any
   choice made here. A directory people read in daylight, print, and screenshot
   into WhatsApp is better as one predictable light document. color-scheme
   below is the other half of that promise -- without it the browser still
   renders its own furniture dark on a dark-mode machine, so the select boxes,
   text fields and scrollbars would stay black on a white page. */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6;
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
header.site,footer.site{padding:14px 20px;border-bottom:1px solid var(--line);
  display:flex;gap:18px;align-items:center;flex-wrap:wrap}
footer.site{border-bottom:none;border-top:1px solid var(--line);display:block;
  color:var(--soft);font-size:13px;margin-top:48px}
.brand{font-weight:800;color:var(--brand);text-decoration:none;font-size:18px}
header.site nav{display:flex;gap:16px;margin-left:auto}
.sitesearch{position:relative;flex:1 1 260px;max-width:420px;margin:0}
.sitesearch input{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--sunk);color:var(--ink);font-size:14px}
.sitesearch input:focus{outline:2px solid var(--brand);outline-offset:1px;background:var(--bg)}
#q-results{display:none;position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:40;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  box-shadow:0 8px 26px -12px rgba(0,0,0,.45);max-height:340px;overflow-y:auto}
#q-results.open{display:block}
.q-addr{border-left:2px solid var(--accent)}
.q-addr .q-name{font-weight:600}
.q-hit{display:block;padding:8px 12px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line)}
.q-hit:last-child{border-bottom:none}
.q-hit:hover,.q-hit.on{background:var(--sunk)}
.q-name{display:block;font-weight:600;font-size:14px}
.q-meta{display:block;font-size:12px;color:var(--faint)}
.q-none{padding:12px;color:var(--faint);font-size:13px}
@media (max-width:720px){.sitesearch{order:3;flex-basis:100%;max-width:none}
  header.site nav{margin-left:0}}
header.site a{color:var(--ink);text-decoration:none;font-size:14px}
header.site a:hover{text-decoration:underline}
main{max-width:820px;margin:0 auto;padding:24px 20px 0}
h1{font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.15;margin:.2em 0 .3em}
h2{font-size:1.15rem;margin:1.8em 0 .5em}
a{color:var(--brand)}
.lede{font-size:1.08rem;color:var(--soft);margin:0 0 1.2em}
.crumbs{font-size:12px;color:var(--faint);margin-bottom:8px}
.crumbs a{color:var(--faint)}
.thin{color:var(--faint);font-size:.86em;font-weight:400}
.good{color:var(--good);font-weight:600}
table.facts{width:100%;border-collapse:collapse;margin:0}
table.facts th{text-align:left;font-weight:600;color:var(--soft);width:38%;
  padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:.92rem}
table.facts td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.banner{padding:12px 16px;border-radius:6px;margin:0 0 16px;font-size:.95rem}
.banner.stop{background:var(--stop-bg);color:var(--stop);border:1px solid var(--stop-line)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 8px}
/* Primary action. A 1.5px dark edge and a small lift do the work a dark fill
   used to, so the label stays the same colour as every other label on the page. */
.btn{display:inline-block;padding:9px 16px;border-radius:7px;background:var(--card);
  color:var(--ink);text-decoration:none;border:1.5px solid var(--sel-line);
  cursor:pointer;font-size:14px;font-weight:600;
  box-shadow:0 1px 2px rgba(28,26,23,.08)}
.btn:hover{background:var(--sel-bg)}
.btn:active{box-shadow:none;transform:translateY(.5px)}
/* Secondary: same shape, quieter edge, normal weight. */
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);
  font-weight:500;box-shadow:none}
.btn.ghost:hover{background:var(--sunk)}
/* On, e.g. a school already on the shortlist. Tint and a heavier edge, not an
   inversion -- and the checkmark carries the state without relying on colour. */
.btn[aria-pressed="true"]{background:var(--sel-bg);border-color:var(--sel-line);
  color:var(--ink);box-shadow:inset 0 0 0 1px var(--sel-line)}
.btn[aria-pressed="true"]::before{content:"¹3 a0";font-weight:700}

/* Keyboard focus has to be visible on the white card and on the warm tint
   alike, so it is drawn in ink with an offset rather than tinted. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible{outline:2px solid var(--sel-line);outline-offset:2px;
  border-radius:6px}

/* A finger needs more than a mouse does. Grown only where the pointer is
   coarse, so the desktop layout stays as dense as it should be. */
@media (pointer:coarse){
  .btn{padding:12px 18px}
  header.site nav a{padding:8px 0}
  ul.listing li a{display:inline-block;padding:3px 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
ul.listing{list-style:none;padding:0;margin:0;columns:2;column-gap:28px}
ul.listing li{break-inside:avoid;padding:5px 0;border-bottom:1px solid var(--line)}
ul.listing .thin{display:block}
/* A numbered list where the number carries meaning -- three consequences, four
   steps in order. The numeral sits in its own gutter so the sentences stay
   flush with each other and can be read straight down, which a browser's
   default marker does not manage once a line wraps. Single column: a sequence
   read across two columns is not a sequence. */
ol.enum{list-style:none;counter-reset:enum;padding:0;margin:0 0 18px}
ol.enum li{counter-increment:enum;position:relative;padding:11px 0 11px 32px;
  border-bottom:1px solid var(--line)}
ol.enum li:last-child{border-bottom:none}
ol.enum li::before{content:counter(enum);position:absolute;left:0;top:11px;
  font-size:14px;font-weight:600;color:var(--soft);line-height:1.62;
  font-variant-numeric:tabular-nums}
ol.enum .thin{display:block;margin-top:2px}
ul.cols{columns:2;column-gap:28px}
ul.cols li{break-inside:avoid}
.prov{color:var(--soft);font-size:.9rem}
table.cal{border-collapse:collapse;width:100%;font-size:.92rem}
table.cal th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--faint);padding:9px 12px;border-bottom:1px solid var(--line);background:var(--sunk)}
table.cal td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.cal td.when{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--soft)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;margin-bottom:22px}
/* Homepage map. Sized by aspect-ratio with a min-height so it is a real
   feature on a phone rather than a letterbox, and never taller than the
   viewport so the content beneath it is still discoverable by scrolling. */
/* The map is the one thing on this page that earns more width than the
   reading column. Text stays at 820px because that is where prose is
   comfortable; a map at 820px looks like a diagram, and at 1160 it looks like
   the point of the page. The negative margins break it out of main's column
   without changing the document order, and collapse to nothing below the
   breakpoint where there is no spare width to take. */
.mapwrap{margin:26px 0 34px}
@media (min-width:1200px){
  .mapwrap{width:1160px;margin-left:calc((820px - 1160px) / 2);
    margin-right:calc((820px - 1160px) / 2)}
}
.mapwrap h2{margin-bottom:6px}
.mapwrap .lede{margin-top:0}
.homemap{height:min(64vh,560px);min-height:320px;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:var(--sunk);
  display:flex;align-items:center;justify-content:center}
.homemap.ready{display:block}
.homemap-status{color:var(--soft);font-size:.95rem;margin:0;padding:0 18px;text-align:center}
.maplegend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin:10px 0 0;font-size:.85rem;color:var(--soft)}
.maplegend .dot{width:10px;height:10px;border-radius:50%;display:inline-block;
  margin-right:5px;vertical-align:-1px}
.maplegend .dot.primary{background:var(--lv-primary)}
.maplegend .dot.secondary{background:var(--lv-secondary)}
.maplegend .dot.special{background:var(--lv-special)}
.maplegend .dot.preschool{background:var(--lv-preschool)}
.hm-name{display:block;font-weight:600;margin-bottom:2px}
.hm-meta{display:block;color:var(--soft);font-size:.85rem}
.hm-ratio,.hm-sc{display:block;margin-top:5px;font-size:.85rem;font-weight:600}
.hm-ratio{color:var(--stop)}
.hm-sc{color:var(--good)}
.leaflet-container{font:inherit}
.hm-cluster .cl{width:100%;height:100%;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.94);
  border:1.5px solid var(--line-2);color:#1B1917;font-weight:600;font-size:12px;
  box-shadow:0 1px 4px rgba(28,26,23,.18)}
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large,
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{
  background:transparent}
h3.calmonth{margin:22px 0 8px;font-size:1.02rem;color:var(--soft);font-weight:600;letter-spacing:.01em}
.verdict{padding:11px 14px;border-radius:7px;margin:0 0 12px;font-size:.97rem;border:1px solid}
.verdict.stop{background:var(--stop-bg);border-color:var(--stop-line);color:var(--stop)}
.verdict.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.verdict.go{background:var(--good-bg);border-color:var(--good-line);color:var(--good)}
.hero{padding:12px 0 4px}
.hero h1{max-width:22ch}
.herofind{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:8px 0 4px}
.stat{background:var(--bg);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.stat .v{font-size:1.5rem;font-weight:800;color:var(--brand);line-height:1.1}
.stat .k{font-size:.78rem;color:var(--faint);line-height:1.3}
ul.whats{list-style:none;padding:0;display:grid;gap:12px}
ul.whats li{padding-left:18px;position:relative}
ul.whats li:before{content:"→";position:absolute;left:0;color:var(--brand)}
.counties{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ccard{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:10px 12px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink)}
.ccard:hover{border-color:var(--brand);background:var(--sunk)}
.cname{font-weight:600;font-size:14px}
.ccount{font-size:12px;color:var(--faint)}
@media (max-width:640px){ul.listing,ul.cols{columns:1}
  table.facts th{width:44%}}