@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap");

/*
 * Site-wide theme: colours, fonts, the left-hand navigation, and the card /
 * summary / status components used on the dashboard. Dash loads every .css
 * file in assets/ automatically; the static pages (why_a_reading_dashboard.html,
 * when_schools_close.html, where_to_obtain_data.html, about_read_plans.html,
 * disclaimer.html) link to it as /assets/theme.css so every page shares one
 * look and one menu.
 *
 * IMPORTANT: this file deliberately never touches .dash-table-* / .Select-*
 * or sets overflow on anything that wraps the data table -- the dropdown
 * clipping fix in custom.css depends on the table's own containers being the
 * only clipping box. Cards are left at the default overflow: visible.
 */

:root {
    --ink: #1B2A41;
    --muted: #5B6472;
    --line: #E3DFD6;
    --ground: #F6F4EF;
    --card: #FFFFFF;
    --accent: #1F5F8B;
    --accent-dark: #15445F;
    --accent-bg: #E8F0F6;
    --amber: #9A5A12;
    --amber-bg: #FBF0E1;
    --red: #A33A32;
    --red-bg: #F8E7E5;
    --green: #2F6B4F;
    --green-bg: #EAF3EE;
    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
}

/* ---------- Icons (CSS masks, so they take the text colour) ---------- */
[class*="icon-"]::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}
.icon-chart::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3v18h18%22/%3E%3Cpath d=%22M7 15l4-4 3 3 5-6%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3v18h18%22/%3E%3Cpath d=%22M7 15l4-4 3 3 5-6%22/%3E%3C/svg%3E"); }
.icon-book::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 19.5A2.5 2.5 0 0 1 6.5 17H20%22/%3E%3Cpath d=%22M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 19.5A2.5 2.5 0 0 1 6.5 17H20%22/%3E%3Cpath d=%22M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z%22/%3E%3C/svg%3E"); }
.icon-school::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 21h18%22/%3E%3Cpath d=%22M5 21V10l7-5 7 5v11%22/%3E%3Cpath d=%22M10 21v-5h4v5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 21h18%22/%3E%3Cpath d=%22M5 21V10l7-5 7 5v11%22/%3E%3Cpath d=%22M10 21v-5h4v5%22/%3E%3C/svg%3E"); }
.icon-file::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 2v6h6%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 2v6h6%22/%3E%3C/svg%3E"); }
.icon-search::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22M21 21l-4.3-4.3%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22M21 21l-4.3-4.3%22/%3E%3C/svg%3E"); }
.icon-shield::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z%22/%3E%3C/svg%3E"); }
.icon-down::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 5v14%22/%3E%3Cpath d=%22M19 12l-7 7-7-7%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 5v14%22/%3E%3Cpath d=%22M19 12l-7 7-7-7%22/%3E%3C/svg%3E"); }
.icon-up::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 19V5%22/%3E%3Cpath d=%22M5 12l7-7 7 7%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 19V5%22/%3E%3Cpath d=%22M5 12l7-7 7 7%22/%3E%3C/svg%3E"); }
.icon-flat::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22M13 6l6 6-6 6%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22M13 6l6 6-6 6%22/%3E%3C/svg%3E"); }
.icon-alert::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E"); }
.icon-chev::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E"); }
.icon-steps::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 6h11%22/%3E%3Cpath d=%22M10 12h11%22/%3E%3Cpath d=%22M10 18h11%22/%3E%3Cpath d=%22M4 6h1v4%22/%3E%3Cpath d=%22M4 10h2%22/%3E%3Cpath d=%22M6 18H4c0-1 2-2 2-3s-1-1.5-2-1%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 6h11%22/%3E%3Cpath d=%22M10 12h11%22/%3E%3Cpath d=%22M10 18h11%22/%3E%3Cpath d=%22M4 6h1v4%22/%3E%3Cpath d=%22M4 10h2%22/%3E%3Cpath d=%22M6 18H4c0-1 2-2 2-3s-1-1.5-2-1%22/%3E%3C/svg%3E"); }

/* ---------- Page frame ---------- */
.site-layout {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
    background: var(--ground);
    font-family: var(--sans);
    color: var(--ink);
}

/* ---------- Left-hand navigation (same markup on every page) ---------- */
.site-sidebar {
    flex: 0 0 264px;
    width: 264px;
    box-sizing: border-box;
    padding: 24px 16px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    background: var(--card);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--sans);
}
.site-sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
}
.site-sidebar .brand-mark {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22white%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3v18h18%22/%3E%3Cpath d=%22M7 15l4-4 3 3 5-6%22/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.site-sidebar .brand-name {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
}
.site-sidebar .nav-group {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 18px 12px 6px;
}
.site-sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--ink);
    font-size: 15px;
    text-decoration: none;
}
.site-sidebar .nav-item:hover {
    background: #F1EEE7;
}
.site-sidebar .nav-item.active {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}
/* A page's own sections, nested under its (active) menu item. */
.site-sidebar ul.submenu {
    list-style: none;
    margin: 4px 0 8px 21px;
    padding: 0;
    border-left: 2px solid var(--line);
}
.site-sidebar ul.submenu li {
    margin: 0;
}
.site-sidebar ul.submenu a {
    display: block;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--muted);
    text-decoration: none;
    border-radius: 0 6px 6px 0;
}
.site-sidebar ul.submenu a:hover {
    background: #F1EEE7;
    color: var(--accent-dark);
}
.site-sidebar ul.submenu a.active {
    color: var(--accent-dark);
    font-weight: 600;
    background: var(--accent-bg);
    border-left: 2px solid var(--accent);
    margin-left: -2px;
}
.site-sidebar .nav-spacer {
    flex-grow: 1;
}
.site-sidebar .nav-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 12px 4px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
}
.site-sidebar .nav-footer::before {
    width: 16px;
    height: 16px;
}
.site-sidebar .nav-footer:hover,
.site-sidebar .nav-footer.active {
    color: var(--accent-dark);
}

/* ---------- Dashboard ---------- */
.dash-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 1080px;
    box-sizing: border-box;
    padding: 36px 40px 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}
.page-header .header-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.page-title {
    margin: 0;
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
}
.page-lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--muted);
    max-width: 640px;
}
.privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--green-bg);
    color: var(--green);
    font-size: 14px;
    font-weight: 600;
}
.privacy-badge::before {
    width: 16px;
    height: 16px;
}

.summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.summary-student {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 700;
    margin: 4px 0 -2px;
}
.stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.stat-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stat-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}
.stat-value {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
}
.stat-sub {
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
}
.stat-empty {
    grid-column: 1 / -1;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}
.chip::before {
    width: 14px;
    height: 14px;
}
.chip-good { background: var(--green-bg); color: var(--green); }
.chip-steady { background: var(--accent-bg); color: var(--accent); }
.chip-warn { background: var(--amber-bg); color: var(--amber); }
.chip-risk { background: var(--red-bg); color: var(--red); }
.chip-neutral { background: #EFECE5; color: var(--muted); }

.alert-risk {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--red-bg);
    color: var(--red);
    font-weight: 600;
    line-height: 1.45;
}
.alert-risk::before {
    margin-top: 2px;
}

/* Cards: NOTE no overflow: hidden here -- see the note at the top. */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.card-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 260px;
    flex: 1 1 320px;
}
.card-title {
    margin: 0;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
}
.card-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
}
.fine-print {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}
.privacy-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--green);
}
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Scale-score chart: a collapsible card (native <details>). */
details.card > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
details.card > summary::-webkit-details-marker {
    display: none;
}
details.card > summary .toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 40px;
    padding: 0 14px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #C9C3B6;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}
details.card > summary .toggle::after {
    content: "Show chart";
}
details.card[open] > summary .toggle::after {
    content: "Hide chart";
}
details.card > summary .toggle::before {
    width: 16px;
    height: 16px;
    transition: transform 0.15s;
}
details.card[open] > summary .toggle::before {
    transform: rotate(180deg);
}
details.card > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 6px;
}

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}
.site-footer .copyright {
    flex-basis: 100%;
}
.site-footer a,
.dash-main a {
    color: var(--accent);
}

/* ---------- Static information pages ---------- */
body.info-page {
    background: var(--ground);
    font-family: var(--sans);
    color: var(--ink);
}
body.info-page .layout {
    max-width: none;
    margin: 0;
    min-height: 100vh;
}
body.info-page nav.site-sidebar {
    flex: 0 0 264px;
    width: 264px;
    padding: 24px 16px;
    background: var(--card);
    border-right: 1px solid var(--line);
    max-height: none;
    height: 100vh;
}
body.info-page main {
    padding: 44px 56px 64px;
    max-width: 780px;
}
body.info-page main h1 {
    font-family: var(--serif);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.12;
    color: var(--ink);
    margin-bottom: 12px;
}
body.info-page main .intro {
    font-size: 18px;
    line-height: 1.55;
    color: var(--muted);
}
body.info-page main h2 {
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 700;
    color: var(--ink);
    border-top-color: var(--line);
}
body.info-page main h3 {
    font-family: var(--serif);
    font-size: 19px;
    color: var(--ink);
}
body.info-page main p,
body.info-page main li {
    font-size: 16.5px;
    line-height: 1.65;
    color: #2D3748;
}
body.info-page main a {
    color: var(--accent);
}
body.info-page .closing-note {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
}
body.info-page figure.example,
body.info-page figure.chart-figure {
    border-color: var(--line);
    border-radius: 12px;
    background: var(--card);
}
body.info-page .site-disclaimer {
    border-top-color: var(--line);
    color: var(--muted);
}
.eyebrow-link {
    display: block;
    margin-bottom: 10px;
}
.key-points {
    background: var(--ink);
    color: #fff;
    border-radius: 14px;
    padding: 22px 26px;
    margin: 8px 0 8px;
}
.key-points .key-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A9C4DB;
    margin-bottom: 10px;
}
body.info-page .key-points ol {
    margin: 0;
    padding-left: 22px;
}
body.info-page .key-points li {
    color: #fff;
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 6px;
}
body.info-page .key-points li::marker {
    color: #A9C4DB;
    font-weight: 700;
}

/* ---------- Narrow screens: menu becomes a bar above the content ---------- */
@media (max-width: 800px) {
    .site-layout,
    body.info-page .layout {
        flex-direction: column;
    }
    .site-sidebar,
    body.info-page nav.site-sidebar {
        width: 100%;
        flex: 1 1 auto;
        position: static;
        height: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .site-sidebar .nav-spacer {
        display: none;
    }
    .dash-main {
        padding: 24px 16px 40px;
        max-width: 100%;
    }
    body.info-page main {
        padding: 24px 16px 40px;
        max-width: 100%;
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-title {
        font-size: 28px;
    }
    body.info-page main h1 {
        font-size: 30px;
    }
    .stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .card {
        padding: 18px 16px;
    }
    .card-title-group {
        min-width: 0;
    }
    details.card > summary {
        flex-wrap: wrap;
        align-items: flex-start;
    }
}