/* Styling for the generated static school pages.
 *
 * Deliberately small and dependency-free: these pages are the search-engine
 * entry point to the site, they carry no JavaScript, and they have to render
 * on a phone on a bad connection. Colours follow web/src/index.css so a visitor
 * arriving from Google and then clicking through to the map doesn't feel like
 * they've changed sites.
 */

:root {
  --ink: #1c2430;
  --muted: #6b7480;
  --border: #e2e5ea;
  --accent: #1a5fb4;
  --surface: #fbfcfd;
  --good: #1a7f37;
  --bad: #b42318;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 64px;
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
}

.page { max-width: 760px; margin: 0 auto; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

/* ---- masthead ---- */
.crumbs { font-size: 14px; color: var(--muted); padding: 18px 0 0; }
.crumbs a { color: var(--muted); }

h1 { font-size: 30px; line-height: 1.2; margin: 14px 0 8px; }

.sub { margin: 0 0 4px; color: var(--muted); font-size: 15px; }
.stage { margin: 0 0 18px; color: var(--muted); font-size: 15px; }

.tag {
  display: inline-block; padding: 1px 7px; margin-right: 6px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #eef1f5; color: #3f4855; vertical-align: 1px;
}
.tag.indep { background: #fdecea; color: #8f2323; }
.tag.state { background: #e8f0fb; color: #17457f; }

/* ---- sections ---- */
h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 34px 0 10px;
  border-top: 1px solid var(--border); padding-top: 16px;
}
h3 { font-size: 17px; margin: 22px 0 6px; }

p { margin: 0 0 12px; }

.lede { font-size: 19px; line-height: 1.55; }

.note {
  font-size: 15px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 13px; margin: 0 0 14px;
}
.nodata { color: var(--muted); font-style: italic; }

/* ---- tables ---- */
/* The results tables are five columns wide and there is no way to fit five
 * columns and a row label on a 390px phone. They scroll inside their own
 * wrapper rather than making the whole page scroll sideways. */
.tablewrap { overflow-x: auto; margin: 0 0 14px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
caption { text-align: left; font-size: 14px; color: var(--muted); padding: 0 0 6px; }
th, td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--border); }
thead th { font-size: 13px; color: var(--muted); font-weight: 600; }
tbody th, th:first-child, td:first-child { text-align: left; font-weight: 600; }
tbody th { white-space: nowrap; }
td.sel, th.sel { background: #f4f8fd; }
.pct { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }

/* ---- area ranking tables ---- */
/* The ranking is seven columns wide; it scrolls inside .tablewrap like the
 * others, but the school name is the column you navigate by, so it is left
 * aligned and allowed to wrap rather than pushing everything else off. */
.ranking { table-layout: auto; }
.ranking tbody th { white-space: normal; min-width: 150px; }
.ranking td.rank { color: var(--muted); font-variant-numeric: tabular-nums; width: 1%; }
/* The interval is the one cell that must not break across lines — split over
 * two, "-0.15 to +0.35" stops reading as a single range. */
.ranking td.ci, .ranking td.span0 { white-space: nowrap; }
/* A confidence interval that includes zero: the school cannot be told apart
 * from an average one, which is the single most misread thing in a ranking. */
.ranking td.span0 { background: #f6f7f9; color: var(--muted); }
.ranking td.ofsted { font-size: 14px; }
.ranking caption { white-space: normal; }

.unranked td.reason { text-align: left; color: var(--muted); font-size: 14px; white-space: normal; }
.unranked tbody th { white-space: normal; }

ul.areas { list-style: none; padding: 0; margin: 0 0 14px; font-size: 16px; }
ul.areas li { padding: 6px 0; border-bottom: 1px solid var(--border); }
ul.areas .pct { display: inline; margin-left: 8px; }
/* The index lists 150+ authorities; a single column of them is a lot of
 * scrolling on a desktop and exactly right on a phone. */
ul.areas.cols { columns: 2; column-gap: 28px; }
ul.areas.cols li { break-inside: avoid; }

/* ---- admissions workings ---- */
.workings { font-size: 18px; margin: 0 0 10px; }
.workings b { font-weight: 700; }

/* ---- the map call-to-action ---- */
.maplink {
  display: block; margin: 22px 0; padding: 14px 16px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--surface);
  color: var(--ink); text-decoration: none;
}
.maplink b { color: var(--accent); }
.maplink span { display: block; font-size: 15px; color: var(--muted); margin-top: 2px; }
.maplink:hover { background: #f4f8fd; }

/* ---- links ---- */
ul.links { list-style: none; padding: 0; margin: 0; font-size: 16px; }
ul.links li { padding: 6px 0; border-bottom: 1px solid var(--border); }

/* ---- footer ---- */
footer {
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--muted);
}

@media (max-width: 560px) {
  body { padding: 0 14px 48px; font-size: 16px; }
  h1 { font-size: 25px; }
  .lede { font-size: 17px; }
  .workings { font-size: 17px; }
  /* Tighten the tables so the three-year average — the number most worth
   * reading — lands on screen without scrolling on a common phone width. */
  table { font-size: 14px; }
  th, td { padding: 6px 5px; }
  .pct { font-size: 11px; }
  thead th { font-weight: 600; }
  .ranking tbody th { min-width: 150px; }
  ul.areas.cols { columns: 1; }
}