/* Arkansas K-12 Enrollment — shared base (Phase 0 extraction). */

:root {
  --surface-1:      #fcfcfb;
  --page-plane:     #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #6f6d67;
  --gridline:       #e1e0d9;
  --border:         rgba(11,11,11,0.44);
  --link:           #2a78d6;
  /* Axis/crosshair rule colour. Read by charts.css; the review's Layer 1
     names it --baseline-axis on both sites (the fiscal sibling renamed its
     --baseline to match). */
  --baseline-axis:  #c3c2b7;

  /* Brand caret — the one coloured element of the Sidetown Labs wordmark.
     Values are the brand spec's own "accent caret", light and dark, not the
     site's --link, because the mark is not to be recoloured per site.
     Shared vocabulary across both sibling sites and the homepage (keep
     byte-identical). */
  --brand-caret: #2B7EC9;

  /* Categorical palette — shared vocabulary across both sibling sites (keep byte-identical). */
  --cat-1: #2a78d6;   /* blue   */
  --cat-2: #eb6834;   /* orange */
  --cat-3: #1baf7a;   /* teal   */
  --cat-4: #008300;   /* green  */
  --cat-5: #008300;   /* green (brightens in dark) */
  --cat-6: #e87ba4;   /* pink   */
  --cat-7: #eda100;   /* amber  */
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-1:      #1a1a19;
    --page-plane:     #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --border:         rgba(255,255,255,0.33);
    --link:           #3987e5;
    --baseline-axis:  #383835;

    --brand-caret: #60AAF3;

    --cat-1: #3987e5;
    --cat-2: #d95926;
    --cat-3: #199e70;
    --cat-4: #008300;
    --cat-5: #35a854;
    --cat-6: #d55181;
    --cat-7: #c98500;
  }
}

/* Respect a reader's data-theme override the same way the fiscal sibling and
   the Artifact conventions do -- an explicit toggle wins over the OS preference
   in both directions. Present for parity; the static site ships no toggle
   today, but any future one will Just Work. (Design unification Phase 1a.) */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--page-plane);
  color: var(--text-primary);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Container box metrics only. The max-width stays in each view's own <style>
   block: this site still runs three width tiers (720 prose / 880 chart /
   1400 table) where the fiscal sibling runs two, and collapsing them is a
   deliberate visual change that belongs to Phase 2, not to this extraction.
   Everything the tiers agree on lives here. */
.page { margin: 0 auto; padding: 40px 24px 80px; }

/* ── Sidetown Labs wordmark header ──────────────────────────────────────────
   Ships on every page of both sibling sites and reproduces the header on
   sidetownlabs.com: same 64px row, same 23px wordmark, same caret geometry
   from the brand spec. Keep this block
   byte-identical between the two repos -- it is brand furniture, not
   site-specific chrome. (Design unification Phase 1b; the review's "single
   highest-leverage change for family consistency".)

   Two deliberate deviations from the homepage's version:

   1. NOT sticky. The homepage header is position:sticky, but these are data
      sites: school-districts / charter-schools / the fiscal tables all use
      sticky <th> at top:0, and a sticky site header would either overlap them
      or force a 64px offset into every table's sticky math. The wordmark is
      an identity marker, not a navigation control, so it scrolls away.
   2. No nav or theme button inside it. Each site keeps its existing
      .view-nav exactly as-is, directly below -- the brief's requirement, and
      it avoids two competing navigation rows.

   Width: the inner element carries the page's OWN container class (.page or
   .page-wide), so the wordmark aligns with that page's h1 at every width
   without any per-page plumbing. The two-class selector below outranks the
   per-page `.page { padding: ... }` rules that pages declare in their own
   inline <style> after this sheet loads, so source order doesn't matter. */
@font-face {
  /* Latin subset of the Space Grotesk variable font, weights 300-700, so both
     the 600 "sidetown" and the 450 "labs" are real instances rather than
     synthesised. Self-hosted (22 KB) rather than fetched from Google Fonts:
     these are no-build static sites, and a render-blocking third-party
     request on all 20 data pages is a bad trade for one 23px wordmark.
     Licence: SIL OFL 1.1, shipped beside it as space-grotesk-OFL.txt. */
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("space-grotesk-latin.woff2") format("woff2");
}
.site-header { background: var(--page-plane); border-bottom: 1px solid var(--gridline); }
.site-header .page,
.site-header .page-wide { display: flex; align-items: center; min-height: 64px; padding-block: 0; }
.wordmark {
  display: inline-flex; align-items: baseline;
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 23px; line-height: 1; letter-spacing: -0.028em;
  color: var(--text-primary); text-decoration: none; white-space: nowrap;
}
/* Caret geometry is the brand spec's, expressed in em so it tracks font-size:
   width 0.37em, height 0.783em, one caret-width (0.348em) of space before the
   "s". The 0.0833em bottom offset is the spec's "8px above baseline at 96px". */
.wordmark .caret {
  display: inline-block; flex: none; vertical-align: baseline;
  width: 0.37em; height: 0.783em; margin-right: 0.348em; margin-bottom: 0.0833em;
  background: var(--brand-caret);
}
.wordmark .st { font-weight: 600; }
.wordmark .lb { font-weight: 450; color: var(--text-secondary); }
.wordmark:focus-visible { outline: 2px solid var(--brand-caret); outline-offset: 4px; }

.view-nav { font-size: 13px; color: var(--text-muted); margin: 0 0 18px; }
.view-nav a { color: var(--link); }
.view-nav .current { color: var(--text-primary); font-weight: 600; }

/* Page masthead. Every view carried an identical copy of these; the prose
   pages pair h1 with .lede, the data pages with .subtitle. Both live here
   so the two families can't drift apart again. */
h1 { font-size: 26px; font-weight: 700; margin: 0 0 14px; line-height: 1.25; }
.lede { font-size: 17px; font-weight: 600; color: var(--text-primary); margin: 0 0 16px; }
.subtitle { color: var(--text-secondary); margin: 0 0 28px; max-width: 60ch; }

.meta-links { margin-top: 28px; font-size: 13px; color: var(--text-muted); }
.meta-links a { color: var(--text-secondary); }
.site-footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--gridline); font-size: 13px; color: var(--text-muted); }
.site-footer a { color: var(--text-secondary); }
.companion { margin: 10px 0 0; font-size: 13px; }

/* Skip link -- first focusable element on every page, visible only on focus.
   Every view is nav-then-content, so without this a keyboard user tabs the
   view-nav links before reaching anything new. (Design unification Phase 1a,
   copied verbatim from the fiscal sibling's app.css for furniture parity.) */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--surface-1); color: var(--link);
  border: 1px solid var(--link); border-radius: 8px;
  padding: 9px 14px; font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top 120ms;
}
.skip-link:focus { top: 8px; }
/* the landmark itself must not draw a focus ring when targeted by the skip link */
main:focus { outline: none; }

/* Wordmark -- uppercase site label above the landing headline, matching the
   fiscal sibling's .brand. (Design unification Phase 1b.) */
.brand { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 6px; }

/* Screen-reader-only text. Values are enrollment's existing ones verbatim --
   the fiscal sibling's copy adds a clip-path fallback, which is a real (if
   invisible) change and so is left for the Phase 4 convergence pass. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The card every chart/map view wraps its visualization in. statewide.html
   re-declares it with an added overflow rule; that override stays inline
   with the reasoning that documents it. */
.viz-root {
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 12px;
  padding: 24px 24px 16px;
}