/* TermMinder site styles. Self-hosted, no external fonts, no layout shift:
   every block has a fixed vertical rhythm and no late-loading assets. */
:root {
  /* A school calendar should read like a well-made almanac: warm paper, ink with a blue
     cast, one confident colour. The teal is the brand and marks term time; the rust is
     used only for time off, so the two states of the whole product are never the same
     colour as ordinary links or headings. */
  --ink: #16212b;
  --muted: #5c6b73;
  --line: #dde3e2;
  --bg: #fbfbf9;
  --panel: #eef3f1;
  --accent: #0d6a5c;
  --accent-deep: #0a5147;
  --accent-soft: #e2efec;
  --accent-ink: #ffffff;
  --rust: #a8481a;
  --warn-bg: #fdf3dc;
  --warn-line: #d8a93a;
  --alert-bg: #fbe9e7;
  --alert-line: #c4453f;
  --ok: #1f6b34;
}
* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto;
  max-width: 52rem;
  padding: 0 1rem 3rem;
  color: var(--ink);
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
/* The amber-only ring was 1.64:1 on white - the weakest thing on the page, on the one element
   a keyboard user has to be able to find. The dark outline carries the contrast (15.4:1) and
   the amber halo carries the visibility. summary is focusable too and was missing. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 6px #ffbf47;
}
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: .5rem; }
.skip:focus { left: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

body::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--accent) 0 60%, var(--rust) 60% 100%); margin: 0 -1rem; }
.site-header nav { display: flex; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.site-header .brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1.15rem; letter-spacing: -.015em; text-decoration: none; color: var(--ink); margin-right: auto; }
.site-header .brand .mark { width: 1.35rem; height: 1.35rem; flex: none; }
.site-header .brand .brand-term { color: var(--accent); }
.site-header nav a:not(.brand) { color: var(--ink); text-decoration: none; font-size: .95rem; padding: .2rem 0; border-bottom: 2px solid transparent; }
.site-header nav a:not(.brand):hover { border-bottom-color: var(--accent); }
.site-header nav a[aria-current="page"]:not(.brand) { border-bottom-color: var(--accent); }
.site-footer { margin-top: 3.5rem; padding-top: 1.25rem; border-top: 2px solid var(--accent); color: var(--muted); font-size: .9rem; }
.site-footer p { max-width: 42rem; }
.footer-claim { margin-top: 0; }
.footer-links a { font-weight: 600; }

h1 { font-size: 1.85rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 750; margin: 1rem 0 .5rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 .5rem; }
/* The calendar is the page; the sections after it are apparatus. Only the data headings are promoted. */
.year-block h2 { font-size: 1.5rem; letter-spacing: -.01em; border-bottom: 2px solid var(--accent-soft); padding-bottom: .3rem; }
.site-header nav a[aria-current="page"] { font-weight: 600; text-decoration: none; }
.breadcrumb ol { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem; font-size: .9rem; color: var(--muted); }
/* The alt text (/ "") keeps the separator character out of the screen reader's mouth. */
.breadcrumb li + li::before { content: "›" / ""; margin: 0 .25rem; }

/* The countdown is the whole reason the page exists, so it outranks the section headings
   rather than matching them; a countdown that says only "not yet published" loses the accent. */
.countdown { background: var(--accent-soft); border-left: 5px solid var(--accent); border-radius: 0 4px 4px 0; padding: 1rem 1.15rem; margin: 1.25rem 0; }
.countdown-main { font-size: 1.5rem; line-height: 1.2; font-weight: 750; letter-spacing: -.015em; color: var(--accent-deep); margin: 0; }
.countdown-fallback, .countdown-holiday { margin: .4rem 0 0; color: var(--ink); }
.countdown-holiday { color: var(--rust); font-weight: 600; }
.countdown-none { background: none; border-left-color: var(--line); }
.verification-lede { margin: .5rem 0 1rem; font-size: .95rem; }

.banner { padding: .75rem 1rem; margin: 1rem 0; border: 1px solid var(--warn-line); background: var(--warn-bg); }
.banner h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.banner-quarantine { background: var(--alert-bg); border-color: var(--alert-line); }
.diff { margin: .25rem 0 0; padding-left: 1.25rem; }

.caveat { padding: .75rem 1rem; margin: 1rem 0; border: 1px solid var(--warn-line); background: var(--warn-bg); }
.caveat h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.caveat-per_school { border-color: var(--alert-line); }
.caveat-brief { margin: .5rem 0 1rem; padding: .4rem .75rem; border-left: 4px solid var(--warn-line); background: var(--warn-bg); font-size: .95rem; }
/* On a page whose entire content is "we do not have this yet", this block is the answer, so it
   gets the solid warn treatment the banners use rather than the faintest box on the page. */
.not-published { padding: .75rem 1rem; margin: 1rem 0; border: 1px solid var(--warn-line); background: var(--warn-bg); }
.not-published h2 { margin-top: 0; }
.np-source, .np-previous { margin: .5rem 0 0; }
.unverified-note { color: var(--muted); font-size: .9rem; }

.table-wrap { overflow-x: auto; }
/* Any table inside a .table-wrap, plus print.html's unwrapped period tables. Enumerating class
   names here had already missed table.countries on the home page, which fell back to the UA's
   separated-cell default while every other table on the site was collapsed. */
.table-wrap table, table.periods { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
table caption { text-align: left; color: var(--muted); font-size: .85rem; padding: .25rem 0; }
table th, table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap tbody tr:nth-child(odd), table.periods tbody tr:nth-child(odd) { background: #f7faf9; }
.table-wrap tbody th, table.periods tbody th { font-weight: 650; }
table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; color: var(--muted); border-bottom-width: 2px; }
tr.row-band th { padding-left: 1.5rem; font-weight: 400; }
/* Per cell, not per row: on a row whose start is a real date and whose end is not yet
   published, greying the whole row marked the known date as uncertain too. The italic now
   only ever falls on a cell holding a phrase, never on a date. */
td.cell-window, td.cell-tbc, td.cell-unpublished { color: var(--muted); font-style: italic; }
/* Dates never wrap; the sentence cells beside them still do, so a window range does not
   stretch the table past its wrapper. */
table.periods td.cell-exact { white-space: nowrap; }
table.jurisdictions tr.group-row th { background: var(--panel); font-size: .9rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.note { color: var(--muted); font-weight: 400; }

.badge { display: inline-block; font-size: .8rem; line-height: 1.4; padding: .05rem .4rem; border-radius: 3px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); vertical-align: middle; font-weight: 400; text-transform: lowercase; }
.badge-band { background: #e6f0fa; border-color: #b9d1ea; color: var(--accent); text-transform: none; }
/* The verification badge carries the site's whole claim; it was the smallest text on the page. */
.badge-verify { text-transform: none; font-size: .95rem; padding: .2rem .5rem; }
.badge-human, .badge-second_arm, .badge-crosscheck { color: var(--ok); border-color: var(--ok); }
.badge-none { color: #8a6d00; border-color: var(--warn-line); }

.facts ul { padding-left: 1.25rem; }
.facts li { margin: .35rem 0; max-width: 38rem; }

/* Emitted by home.html / country.html / year.html / entity.html, previously matched by nothing. */
.lede { font-size: 1.15rem; color: var(--muted); max-width: 34rem; }
.country-intro p { max-width: 38rem; }
.attribution { color: var(--muted); font-size: .9rem; }
.not-covered { color: var(--muted); }
/* A year page is the entity page pinned to one year: the pin is chrome, not the first sentence. */
.year-pin { display: inline-block; margin: .5rem 0 1rem; padding: .35rem .75rem; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; font-size: .9rem; color: var(--muted); }
.year-pin a { font-weight: 600; }

.provenance { font-size: .95rem; }
.source-quote summary { cursor: pointer; color: var(--accent); }
.source-quote blockquote { margin: .5rem 0 0; padding: .5rem .75rem; border-left: 3px solid var(--line); color: var(--muted); font-size: .9rem; white-space: pre-wrap; }
.source-broken { color: #8a2b2b; }

.action-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.signup h3 { margin-top: 0; }
.signup { margin-top: 1rem; padding: 1rem; background: var(--panel); border: 1px solid var(--line); }
.signup .field { margin: .5rem 0; display: grid; gap: .25rem; }
.signup input, .signup select, .report-form input, .report-form textarea, .school-search input, .wrong-dates select { font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 3px; max-width: 24rem; width: 100%; }
button { font: inherit; font-weight: 600; padding: .55rem 1.1rem; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 4px; cursor: pointer; }
button:hover { background: var(--accent-deep); }
button[disabled] { opacity: .5; }
.placeholder-note { color: var(--muted); font-size: .9rem; margin: 0 0 .5rem; }

.school-search { margin: 1.25rem 0 2rem; padding: 1rem; background: var(--panel); border-left: 4px solid var(--accent); }
.school-search label, .wrong-dates label { display: block; font-weight: 600; margin-bottom: .35rem; }
.search-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.school-results ol { list-style: none; padding: 0; }
.school-results li { display: grid; gap: .1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.school-results span, .school-details p, .school-register-source { color: var(--muted); }
.school-details address { font-style: normal; }
.school-calendar-caveat { padding: .85rem 1rem; margin: 1.5rem 0; border: 2px solid var(--alert-line); background: var(--alert-bg); }
.school-calendar-caveat h2, .wrong-dates h2 { margin: 0 0 .35rem; }
.wrong-dates { margin: 1.5rem 0; padding: 1rem; border: 2px solid var(--accent); }
.wrong-dates select { display: block; margin-bottom: .65rem; }
.report-form .field { display: grid; gap: .25rem; margin: .75rem 0; }

.faq dt { font-weight: 600; margin-top: .75rem; }
.faq dd { margin: .25rem 0 0; }
/* One column on a phone. Two 153px columns wrapped the longer council names, made the reader
   scroll back up the page mid-alphabet, and left 18px tap targets 24px apart. */
.related ul { columns: 1; column-gap: 2rem; padding-left: 1.25rem; }
.related h3 { font-size: .95rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; margin: 1.25rem 0 .25rem; }
.related-parent { margin: .25rem 0; font-weight: 600; }
.coming-soon { columns: 1; column-gap: 2rem; padding-left: 1.25rem; }
.related li, .coming-soon li { margin: .15rem 0; break-inside: avoid; }
.related li a, .coming-soon li a { display: inline-block; padding: .35rem 0; }
.report { margin-top: 2rem; font-size: .9rem; }
.strip { background: var(--panel); border-left: 4px solid var(--accent); padding: .75rem 1rem; font-weight: 600; }

.map-country { color: var(--muted); margin-top: 0; }
.map-date-form { display: flex; align-items: end; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.map-date-form label { display: grid; gap: .25rem; font-weight: 600; }
.map-date-form input { font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 3px; }
.map-coverage { padding: .75rem 1rem; border-left: 4px solid var(--accent); background: var(--panel); }
.map-caution, .map-method, .map-notes { color: var(--muted); font-size: .95rem; }
.map-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.map-legend li { display: flex; align-items: center; gap: .4rem; }
.legend-key { width: 1.5rem; height: 1.1rem; border: 1px solid #222; display: inline-block; }
.key-in_term { background: repeating-linear-gradient(0deg, #0072b2 0 4px, #59a5ce 4px 5px); }
.key-holiday { background: repeating-linear-gradient(45deg, #e69f00 0 5px, #4b3300 5px 7px); }
.key-inset_or_uncertain { background: repeating-linear-gradient(45deg, #cc79a7 0 4px, #5d2948 4px 5px); }
.key-no_data { background-color: #e5e7e9; background-image: radial-gradient(#69727b 1px, transparent 1px); background-size: 6px 6px; }
.map-figure { margin: 1rem 0; }
.holiday-map { width: 100%; height: auto; max-height: 42rem; display: block; background: #f8fafb; border: 1px solid var(--line); }
.map-region path { stroke: #ffffff; stroke-width: 1.2; }
/* No :focus half: the <g> elements are not focusable, and giving 45 of them a tabindex would
   add 45 tab stops in front of the status table that carries the same information as text. */
.map-region:hover path { stroke: #111111; stroke-width: 2.5; }
.map-figure figcaption { color: var(--muted); font-size: .85rem; margin-top: .35rem; }
.status-text::before { display: inline-block; width: 1.1rem; margin-right: .4rem; font-weight: 700; }
.status-text.status-in_term::before { content: "■"; color: #0072b2; }
.status-text.status-holiday::before { content: "▰"; color: #8a5f00; }
.status-text.status-inset_or_uncertain::before { content: "×"; color: #8a3d6d; }
.status-text.status-no_data::before { content: "··"; color: #69727b; }

/* Small screens: the tables have to fit ~358px without a horizontal scroll that would put the
   "Ends" date out of sight, so the padding tightens and the derived school-days column - the
   one column nobody came for - gives up its 90px. */
@media (max-width: 34rem) {
  table.periods th, table.periods td { padding: .5rem .35rem; }
  table.terms th:nth-child(4), table.terms td:nth-child(4) { display: none; }
}
@media (min-width: 40rem) {
  h1 { font-size: 2.25rem; }
  .countdown-main { font-size: 1.75rem; }
  .related ul, .coming-soon { columns: 2; }
}
@media (min-width: 60rem) {
  .related ul, .coming-soon { columns: 3; }
}
@media print {
  .site-header, .site-footer, .actions, .related, .report, .skip { display: none; }
  body { max-width: none; }
}