/*
 * Display settings: themes, text size, readable font and reduced motion.
 * Set as attributes on <html> by static/js/display.js (see the inline loader in base.html).
 *
 * The templates use Tailwind's light colour classes directly, so the dark and high-contrast
 * themes remap those classes here rather than adding dark: variants to every template.
 * If a template starts using a new colour class, add it to the theme blocks below.
 * Screen only: printouts and PDFs always use the normal light style.
 */

/* ---------- Text size (Tailwind sizes are in rem, so the whole UI scales) ---------- */
html[data-text="large"] { font-size: 112.5%; }
html[data-text="larger"] { font-size: 125%; }

/* ---------- Readable font ---------- */
html[data-font="readable"] body {
    font-family: "Atkinson Hyperlegible", system-ui, sans-serif !important;
    letter-spacing: 0.02em;
    word-spacing: 0.08em;
}

/* ---------- Reduced motion ---------- */
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* ---------- Windows high contrast (forced colours): keep chart marks visible ---------- */
@media (forced-colors: active) {
    [style*="background"] { forced-color-adjust: none; }
}

@media screen {

/* =====================================================================
   Dark
   ===================================================================== */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background-color: #0b1220 !important; color: #e2e8f0 !important; }

/* Surfaces */
html[data-theme="dark"] .bg-white { background-color: #151e2e !important; }
html[data-theme="dark"] .bg-slate-50 { background-color: #1b2638 !important; }
html[data-theme="dark"] .bg-slate-100 { background-color: #243045 !important; }
html[data-theme="dark"] .bg-slate-300 { background-color: #3a4760 !important; }
html[data-theme="dark"] .bg-slate-200 { background-color: #2f3b52 !important; }
html[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: #1f2b40 !important; }
html[data-theme="dark"] .from-white { --tw-gradient-from: #0b1220 var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html[data-theme="dark"] .to-forest-50\/50 { --tw-gradient-to: rgba(22, 163, 74, .08) var(--tw-gradient-to-position) !important; }

/* Text */
html[data-theme="dark"] .text-slate-900 { color: #f1f5f9 !important; }
html[data-theme="dark"] .text-slate-800 { color: #e2e8f0 !important; }
html[data-theme="dark"] .text-slate-700 { color: #cbd5e1 !important; }
html[data-theme="dark"] .text-slate-600 { color: #b4c0d1 !important; }
html[data-theme="dark"] .text-slate-500 { color: #97a5ba !important; }
html[data-theme="dark"] .text-slate-400 { color: #7f8ea5 !important; }
html[data-theme="dark"] .text-slate-300 { color: #56647d !important; }
html[data-theme="dark"] .hover\:text-slate-900:hover,
html[data-theme="dark"] .hover\:text-slate-800:hover { color: #ffffff !important; }
html[data-theme="dark"] ::placeholder { color: #6b7a92 !important; }

/* Borders and dividers */
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #212d42 !important; }
html[data-theme="dark"] .border-slate-200 { border-color: #2a3750 !important; }
html[data-theme="dark"] .border-slate-300 { border-color: #3a4862 !important; }
html[data-theme="dark"] .hover\:border-slate-400:hover { border-color: #56647d !important; }

/* Selected tabs and pills (dark-on-light in the light theme): flip to light-on-dark */
html[data-theme="dark"] .bg-slate-900 { background-color: #e2e8f0 !important; color: #0f172a !important; }
html[data-theme="dark"] .border-slate-900 { border-color: #e2e8f0 !important; }
html[data-theme="dark"] .bg-slate-900 .text-slate-300 { color: #475569 !important; }
html[data-theme="dark"] #viz-tip { background-color: #f1f5f9 !important; color: #0f172a !important; }
html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-slate-900 { background-color: #e2e8f0 !important; color: #0f172a !important; }
html[data-theme="dark"] .peer:checked ~ .peer-checked\:border-slate-900 { border-color: #e2e8f0 !important; }
html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-slate-200 { background-color: #3a4760 !important; color: #e2e8f0 !important; }
/* Checked chips keep their fill (the dark surface override would otherwise win) */
html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-forest-600 { background-color: #16a34a !important; }
html[data-theme="dark"] .peer:checked ~ .peer-checked\:border-forest-600 { border-color: #22c55e !important; }
html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-red-600 { background-color: #dc2626 !important; }
html[data-theme="dark"] .peer:checked ~ .peer-checked\:border-red-600 { border-color: #ef4444 !important; }
html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-slate-500 { background-color: #64748b !important; }
html[data-theme="dark"] .peer:checked ~ .peer-checked\:border-slate-500 { border-color: #94a3b8 !important; }
html[data-theme="dark"] .peer:checked ~ .peer-checked\:border-slate-300 { border-color: #56647d !important; }
/* Checked chips with a solid fill (Pass / Fail / N/A, framework choices) keep white text */
html[data-theme="dark"] .peer:checked ~ .peer-checked\:text-white:not(.peer-checked\:bg-slate-900) { color: #ffffff !important; }

/* Brand green */
html[data-theme="dark"] .text-forest-600,
html[data-theme="dark"] .text-forest-700,
html[data-theme="dark"] .hover\:text-forest-700:hover,
html[data-theme="dark"] .file\:text-forest-700::file-selector-button { color: #6ee7a0 !important; }
html[data-theme="dark"] .text-forest-800,
html[data-theme="dark"] .text-forest-900 { color: #a7f3c4 !important; }
html[data-theme="dark"] .bg-forest-50,
html[data-theme="dark"] .bg-forest-50\/50,
html[data-theme="dark"] .hover\:bg-forest-50:hover,
html[data-theme="dark"] .file\:bg-forest-50::file-selector-button { background-color: rgba(34, 197, 94, .12) !important; }
html[data-theme="dark"] .bg-forest-100,
html[data-theme="dark"] .hover\:bg-forest-100:hover,
html[data-theme="dark"] .hover\:file\:bg-forest-100::file-selector-button:hover { background-color: rgba(34, 197, 94, .22) !important; }
html[data-theme="dark"] .border-forest-100,
html[data-theme="dark"] .border-forest-200 { border-color: rgba(34, 197, 94, .28) !important; }
html[data-theme="dark"] .border-forest-300 { border-color: rgba(34, 197, 94, .45) !important; }
/* Solid green buttons (bg-forest-700 + white text) already have enough contrast on dark */

/* Status tints */
html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-red-50\/50 { background-color: rgba(239, 68, 68, .12) !important; }
html[data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, .22) !important; }
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-700,
html[data-theme="dark"] .text-red-800 { color: #fca5a5 !important; }
html[data-theme="dark"] .border-red-100,
html[data-theme="dark"] .border-red-200 { border-color: rgba(239, 68, 68, .4) !important; }
html[data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, .12) !important; }
html[data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, .22) !important; }
html[data-theme="dark"] .text-amber-800 { color: #fcd34d !important; }
html[data-theme="dark"] .border-amber-200 { border-color: rgba(245, 158, 11, .4) !important; }
html[data-theme="dark"] .bg-violet-50,
html[data-theme="dark"] .hover\:bg-violet-50:hover { background-color: rgba(139, 92, 246, .14) !important; }
html[data-theme="dark"] .bg-violet-100 { background-color: rgba(139, 92, 246, .26) !important; }
html[data-theme="dark"] .text-violet-800 { color: #c4b5fd !important; }
html[data-theme="dark"] .border-violet-100 { border-color: rgba(139, 92, 246, .35) !important; }
html[data-theme="dark"] .border-violet-500 { border-color: #a78bfa !important; }
html[data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, .12) !important; }
html[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, .24) !important; }
html[data-theme="dark"] .text-blue-800 { color: #93c5fd !important; }
html[data-theme="dark"] .border-blue-200 { border-color: rgba(59, 130, 246, .4) !important; }
html[data-theme="dark"] .bg-orange-100 { background-color: rgba(249, 115, 22, .22) !important; }
html[data-theme="dark"] .text-orange-800 { color: #fdba74 !important; }

/* Charts drawn with inline SVG colours (school score trends) */
html[data-theme="dark"] svg line[stroke="#e2e8f0"] { stroke: #2a3750; }
html[data-theme="dark"] svg text[fill="#64748b"] { fill: #97a5ba; }
html[data-theme="dark"] svg circle[stroke="#ffffff"] { stroke: #151e2e; }
/* Neutral "Low" / "N/A" marks drawn in light grey stay readable; nothing to change */

/* =====================================================================
   High contrast (light background, black text, strong borders and focus)
   ===================================================================== */
html[data-theme="contrast"] body { background-color: #ffffff !important; color: #000000 !important; }
html[data-theme="contrast"] .bg-slate-50,
html[data-theme="contrast"] .bg-slate-100 { background-color: #f0f0f0 !important; }
html[data-theme="contrast"] .text-slate-900,
html[data-theme="contrast"] .text-slate-800,
html[data-theme="contrast"] .text-slate-700,
html[data-theme="contrast"] .text-slate-600,
html[data-theme="contrast"] .text-slate-500,
html[data-theme="contrast"] .text-slate-400 { color: #000000 !important; }
html[data-theme="contrast"] .text-slate-300 { color: #444444 !important; }
/* Checked chips (filled black, green or red) keep white text */
html[data-theme="contrast"] .peer:checked ~ .peer-checked\:text-white { color: #ffffff !important; }
html[data-theme="contrast"] .peer:checked ~ .peer-checked\:bg-slate-500,
html[data-theme="contrast"] .peer:checked ~ .peer-checked\:bg-slate-900 { background-color: #000000 !important; border-color: #000000 !important; }
html[data-theme="contrast"] .peer:checked ~ .peer-checked\:bg-forest-600 { background-color: #00501a !important; }
html[data-theme="contrast"] .peer:checked ~ .peer-checked\:bg-red-600 { background-color: #8a0000 !important; }
html[data-theme="contrast"] .peer:checked ~ .peer-checked\:bg-slate-200 { background-color: #d0d0d0 !important; color: #000 !important; }
html[data-theme="contrast"] ::placeholder { color: #505050 !important; }
html[data-theme="contrast"] .border-slate-100,
html[data-theme="contrast"] .border-slate-200,
html[data-theme="contrast"] .border-slate-300,
html[data-theme="contrast"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #000000 !important; }
html[data-theme="contrast"] .shadow-sm { box-shadow: none !important; }
html[data-theme="contrast"] .text-forest-600,
html[data-theme="contrast"] .text-forest-700,
html[data-theme="contrast"] .text-forest-800,
html[data-theme="contrast"] .text-forest-900 { color: #00501a !important; }
html[data-theme="contrast"] .bg-forest-700,
html[data-theme="contrast"] .bg-forest-600 { background-color: #00501a !important; }
html[data-theme="contrast"] .text-red-600,
html[data-theme="contrast"] .text-red-700,
html[data-theme="contrast"] .text-red-800 { color: #8a0000 !important; }
html[data-theme="contrast"] .text-amber-800 { color: #5c3600 !important; }
html[data-theme="contrast"] .text-violet-800 { color: #3b0a8f !important; }
html[data-theme="contrast"] .text-blue-800 { color: #002f7a !important; }
html[data-theme="contrast"] .text-orange-800 { color: #6b2a00 !important; }
/* Tinted badges and panels get a solid outline so they don't rely on a pale fill */
html[data-theme="contrast"] [class*="bg-red-"],
html[data-theme="contrast"] [class*="bg-amber-"],
html[data-theme="contrast"] [class*="bg-violet-"],
html[data-theme="contrast"] [class*="bg-blue-"],
html[data-theme="contrast"] [class*="bg-orange-"],
html[data-theme="contrast"] .bg-forest-50,
html[data-theme="contrast"] .bg-forest-100 { outline: 1px solid currentColor; }
/* Links are underlined (buttons styled as links keep their fill instead) */
html[data-theme="contrast"] a:not([class*="bg-"]):not([class*="rounded-lg"]):not([class*="rounded-xl"]) { text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="contrast"] :focus-visible { outline: 3px solid #000 !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #ffd400 !important; }

} /* end @media screen */