*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #f7f8fa;
  --bg2:          #ffffff;
  --border:       #dde1ea;
  --text:         #1a1d2e;
  --text2:        #5a607a;
  --text3:        #9099b5;
  --zero:         rgba(0,0,0,0.12);
  --card-shadow:  0 1px 4px rgba(0,0,0,0.08);
  --slider-track: #c8cdd8;
  --slider-thumb: #006b3f;
  --accent:       #006b3f;
  --tag-bg:       rgba(0,107,63,0.10);
  --tag-text:     #005030;
  --select-bg:    #ffffff;
  --header-bg:#fff; --header-border:#006a4e; --header-text:#006a4e; --header-sub:#5a7a6a;
  /* Chart series colors — validated categorical palette (light surface) */
  --series-1: #006b3f;
  --series-2: #4f46e5;
  --series-3: #b45309;
}
[data-theme="dark"] {
  --bg:           #0d0f18;
  --bg2:          #151821;
  --border:       #252a3a;
  --text:         #e0e4f0;
  --text2:        #8890aa;
  --text3:        #50596e;
  --zero:         rgba(255,255,255,0.10);
  --card-shadow:  0 1px 4px rgba(0,0,0,0.4);
  --slider-track: #2a2f42;
  --slider-thumb: #00a85a;
  --accent:       #00a85a;
  --tag-bg:       rgba(0,168,90,0.12);
  --tag-text:     #00cc6a;
  --select-bg:    #1e2130;
  --header-bg:#111; --header-border:#1D9E75; --header-text:#4ecda0; --header-sub:#6aad8a;
  /* Chart series colors — validated categorical palette (dark surface) */
  --series-1: #00a85a;
  --series-2: #6366f1;
  --series-3: #d97706;
}

html, body { min-height: 100%; }
html { overflow-x: hidden; }
body {
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 350;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  transition: background 0.2s, color 0.2s;
  overflow-x: hidden;
}

/* ── Header ── */
.site-header { background: var(--header-bg); border-bottom: 2px solid var(--header-border); padding: .75rem 1.5rem; width: 100%; }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; max-width: 100%; }
.header-link  { display: flex; align-items: center; gap: 1rem; text-decoration: none; flex: 1 1 auto; min-width: 0; }
.header-text  { display: flex; flex-direction: column; min-width: 0; }
.header-school { font-variation-settings: 'wght' 700; font-size: 1.05rem; color: var(--header-text); letter-spacing: .01em; line-height: 1.25; }
.header-sub    { font-variation-settings: 'wght' 300; font-size: .72rem; color: var(--header-sub); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.header-logo   { height: 52px; width: auto; max-width: 100%; flex-shrink: 0; }
/* The logo is dark green on transparent; lighten it on the dark header */
[data-theme="dark"] .header-logo { filter: invert(1) hue-rotate(180deg) saturate(0.8); }
.theme-toggle  { flex-shrink: 0; background: none; border: 1px solid var(--header-border); border-radius: 20px; padding: 5px 12px; cursor: pointer; font-family: 'Roboto Flex', sans-serif; font-variation-settings: 'wght' 400; font-size: 12px; color: var(--header-text); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.theme-toggle:hover { background: var(--header-border); color: #fff; }
@media(max-width:480px) { .header-school { font-size: .88rem; } .header-logo { height: 38px; } }

/* ── Page body ── */
.page-body {
  display: flex; flex-direction: column;
  padding: 20px 5% 32px; gap: 14px;
  max-width: 90%;
  margin: 0 auto;
  width: 90%;
}

/* ── Title ── */
.title-block { flex-shrink: 0; }
.title-block h1 { font-family: 'Roboto Flex', sans-serif; font-size: 19px; font-weight: 720; letter-spacing: -0.02em; color: var(--text); line-height: 1.2; }
.title-block p  { font-family: 'Roboto Flex', sans-serif; margin-top: 3px; font-size: 16px; font-weight: 350; color: var(--text2); line-height: 1.5; }

/* ── Section headings ── */
.section-heading {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.01em;
  color: var(--header-text);
  border-left: 3px solid var(--header-border);
  padding-left: 10px;
  margin-top: 6px;
}