/* =====================================================================================
   Dollar Scholars theme for Scam Reports
   -------------------------------------------------------------------------------------
   One hand-written stylesheet that reproduces the look of https://dollarscholars.org/
   (tokens come from the site's site.css and dark-mode.css). No Tailwind, no Bootstrap,
   no web fonts.

   Contents
     1.  Design tokens (light) ............ :root
     2.  Design tokens (dark) ............. html[data-theme="dark"]
     3.  Base / reset / typography
     4.  Accessibility helpers ............ .skip-link, .visually-hidden, focus
     5.  Site header, brand, navigation ... .site-header, .brand, .site-nav, .nav-toggle
     6.  Theme toggle ..................... .ds-theme-toggle
     7.  Layout ........................... .container, .page-header, .section, .grid, .stack, .cluster
     8.  Buttons and links ................ .btn, .btn-primary, .btn-secondary, .btn-link
     9.  Cards, stat tiles, icon tiles .... .card, .stat, .icon-tile, .cta-banner
     10. Forms ............................ .field, .form-grid, .choice-chips, .check, range
     11. Tables ........................... .table-wrap, .table, .table-stack
     12. Badges ........................... .badge, .badge-pending/approved/rejected/neutral
     13. Alerts and messages .............. .alert, .alert-info/success/warning/error
     14. Empty state, progress, charts, pagination, prose
     15. Site footer ...................... .ds-footer
     16. Utilities
     17. Reduced motion
     18. Print
   Page-specific CSS lives in scams/static/scams/css/pages/<page>.css, never here.
   ===================================================================================== */


/* =====================================================================================
   1. DESIGN TOKENS: LIGHT (default)
   ===================================================================================== */
:root {
    color-scheme: light;

    /* Surfaces and text */
    --bg: #ffffff;
    --page: #f9fafb;               /* body background (Tailwind gray-50, as on the site) */
    --ink: #101828;
    --muted: #475467;
    --line: #eaecf0;
    --input-border: #d0d5dd;
    --ds-surface: #ffffff;         /* cards, inputs, panels */
    --ds-raised: #f2f4f7;          /* table heads, hover rows, subtle wells */

    /* Brand */
    --teal: #0e7490;               /* focus rings, accents, stat values */
    --teal-dark: #0f766e;
    --teal-light: #f0fdfa;         /* tinted containers */
    --action: #0f766e;             /* primary button background */
    --action-hover: #115e59;
    --action-ink: #ffffff;         /* text on --action */
    --link: #0f766e;               /* text links */
    --link-hover: #115e59;
    --brand-green: #0A6B3A;        /* "Dollar Scholars Foundation" title */
    --logo-green: #006838;

    /* Form controls */
    --focus-input: #0d9488;        /* 2px ring + border on focused inputs */
    --control-accent: #0f766e;     /* checkbox, radio, range accent-color */
    --range-track: #d0d5dd;
    --placeholder: #667085;

    /* Chrome */
    --header-bg: rgb(255 255 255 / .95);
    --footer-bg: #111827;
    --footer-ink: #d1d5db;
    --footer-muted: #9ca3af;
    --footer-line: #1f2937;

    /* Brand panels: pale-teal band (the site's hero pods) and the teal CTA banner */
    --band-bg: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 100%);
    --cta-bg: linear-gradient(135deg, #0e7490 0%, #0f766e 100%);
    --cta-ink: #ffffff;                  /* headings and strong text on --cta-bg */
    --cta-muted: #e0f2fe;                /* body text on --cta-bg */
    --cta-tint: rgb(255 255 255 / .14);  /* icon tiles on --cta-bg */
    --cta-line: rgb(255 255 255 / .24);

    /* Status */
    --danger: #b42318;   --danger-bg: #fef3f2;   --danger-line: #fecdca;
    --warning: #b54708;  --warning-bg: #fffaeb;  --warning-line: #fedf89;
    --success: #067647;  --success-bg: #ecfdf3;  --success-line: #abefc6;
    --info: #0e7490;     --info-bg: #f0fdfa;     --info-line: #99f6e4;

    /* Charts (Chart.js reads these with getComputedStyle; see component guide) */
    --chart-1: #0f766e;
    --chart-2: #2563eb;
    --chart-3: #d97706;
    --chart-4: #7c3aed;
    --chart-5: #dc2626;
    --chart-6: #64748b;
    --chart-grid: #eaecf0;
    --chart-text: #475467;

    /* Elevation */
    --shadow-sm: 0 4px 12px rgba(16, 24, 40, .02);
    --shadow-md: 0 12px 32px rgba(16, 24, 40, .04);
    --shadow-lg: 0 20px 40px rgba(16, 24, 40, .12);

    /* Shape */
    --radius-sm: 8px;              /* inputs, small buttons */
    --radius-md: 12px;             /* alerts, icon tiles */
    --radius-lg: 16px;             /* cards, panels, tables */
    --radius-pill: 999px;          /* CTA buttons, chips, badges */

    /* Type */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* Layout */
    --container: 1280px;
    --gutter: clamp(20px, 5vw, 40px);        /* content side padding */
    --header-gutter: clamp(20px, 5vw, 80px); /* header side padding, as on the site */
    --header-height: 73px;
}


/* =====================================================================================
   2. DESIGN TOKENS: DARK (html[data-theme="dark"], set before paint by base.html)
   ===================================================================================== */
html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #14171c;
    --page: #14171c;
    --ink: #edf0f4;
    --muted: #b8c0cc;
    --line: #363e4a;
    --input-border: #363e4a;
    --ds-surface: #1d222b;
    --ds-raised: #272e39;

    --teal: #83d6b3;
    --teal-dark: #9ee3c5;
    --teal-light: #27313a;
    --action: #176342;             /* rgb(23, 99, 66) */
    --action-hover: #1d7751;       /* rgb(29, 119, 81) */
    --action-ink: #ffffff;
    --link: #83d6b3;
    --link-hover: #9ee3c5;
    --brand-green: #8ed6ae;        /* rgb(142, 214, 174) */

    --focus-input: #83d6b3;
    --control-accent: #83d6b3;
    --range-track: #4a5463;
    --placeholder: #a0aaba;

    --header-bg: rgb(20 23 28 / .97);
    --footer-bg: #101318;
    --footer-ink: #d1d5db;
    --footer-muted: #b8c0cc;
    --footer-line: #363e4a;

    --band-bg: var(--ds-raised);

    --danger: #fda29b;   --danger-bg: #3b1d1d;   --danger-line: #6e2b27;
    --warning: #fec84b;  --warning-bg: #372a12;  --warning-line: #6b4e14;
    --success: #75e0a7;  --success-bg: #11301f;  --success-line: #1f5a3a;
    --info: #83d6b3;     --info-bg: #1c2d2c;     --info-line: #2c5a52;

    --chart-1: #83d6b3;
    --chart-2: #7cb4ff;
    --chart-3: #f5b451;
    --chart-4: #b69cff;
    --chart-5: #ff8f8a;
    --chart-6: #a3adbd;
    --chart-grid: #363e4a;
    --chart-text: #b8c0cc;

    --shadow-sm: 0 4px 12px rgb(0 0 0 / .16);
    --shadow-md: 0 12px 32px rgb(0 0 0 / .25);
    --shadow-lg: 0 20px 40px rgb(0 0 0 / .4);
}


/* =====================================================================================
   3. BASE / RESET / TYPOGRAPHY
   ===================================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 16px); /* anchors clear the sticky header */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
}

.site-main {
    flex: 1 0 auto;
    width: 100%;
    padding-bottom: 64px;
}

.site-main:focus {
    outline: none; /* focused programmatically by the skip link; no ring on the whole page */
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    color: var(--ink);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; }
h5, h6 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

@media (min-width: 768px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.875rem; }
}

p, ul, ol, dl, blockquote, figure, pre, table {
    margin: 0 0 1rem;
}

ul, ol {
    padding-left: 1.25rem;
}

li + li {
    margin-top: .25rem;
}

img, svg, video, canvas {
    max-width: 100%;
}

img {
    display: block;
    height: auto;
}

a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

a:hover {
    color: var(--link-hover);
    text-decoration-thickness: 2px;
}

strong, b {
    font-weight: 700;
}

small {
    font-size: .875rem;
}

hr {
    height: 0;
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: .875em;
}

code {
    padding: .1em .35em;
    border-radius: 6px;
    background: var(--ds-raised);
}

:where(button, input, select, textarea) {
    font: inherit;
    letter-spacing: inherit;
}

button {
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

::selection {
    background: var(--teal-light);
    color: var(--ink);
}

html[data-theme="dark"] ::selection {
    background: #2c5a52;
}


/* =====================================================================================
   4. ACCESSIBILITY HELPERS
   ===================================================================================== */

/* Keyboard focus ring everywhere (site standard) */
:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
}

/* Skip link (site standard); uses the action colours so it passes contrast in both themes */
.skip-link {
    position: absolute;
    top: -100px;
    inset-inline-start: 20px;
    z-index: 1000;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    background: var(--action);
    color: var(--action-ink);
    font-weight: 600;
    text-decoration: none;
    transition: top .2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 20px;
    color: var(--action-ink);
}

.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Lets a visually hidden element (e.g. a "Skip" link) show when focused */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =====================================================================================
   5. SITE HEADER, BRAND, NAVIGATION
   Markup lives in scams/templates/scams/partials/site_header.html.
   Desktop (>= 1024px): brand | nav links | CTA + theme toggle, in one row.
   Mobile (< 1024px): brand | hamburger; nav, CTA and toggle drop down in a panel.
   ===================================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--header-height);
    padding: 16px var(--header-gutter);
    border-bottom: 1px solid var(--line);
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* Brand block: DS logo + "Dollar Scholars Foundation", then the product label */
.site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--brand-green);
    text-decoration: none;
}

.brand:hover {
    color: var(--brand-green);
}

.brand-mark {
    display: block;
    flex: 0 0 auto;
    height: 2rem;
}

.brand-mark img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

.brand-mark .ds-logo-dark { display: none; }
html[data-theme="dark"] .brand-mark .ds-logo-light { display: none; }
html[data-theme="dark"] .brand-mark .ds-logo-dark { display: block; }

.brand-title {
    color: var(--brand-green);
    font-family: "Segoe UI", var(--font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* " Foundation" is dropped on narrow screens so the header never scrolls sideways */
.brand-title-extra {
    display: none;
}

.product-label {
    flex: 0 0 auto;
    padding-left: 12px;
    border-left: 1px solid var(--line);
    color: var(--muted);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: -0.005em;
    white-space: nowrap;
    text-decoration: none;
}

.product-label:hover {
    color: var(--ink);
}

/* Very small phones (< 360px): logo + product label only; the link keeps its aria-label */
@media (max-width: 359.98px) {
    .brand-title { display: none; }
}

@media (min-width: 480px) {
    .brand-title-extra { display: inline; }
}

@media (min-width: 640px) {
    .brand { gap: 10px; }
    .brand-mark { height: 2.5rem; }
    .brand-title { font-size: 1.25rem; }
    .product-label { font-size: .9375rem; }
}

/* Hamburger (only below 1024px, and only when JS is running) */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
}

.nav-toggle:hover {
    background: var(--ds-raised);
}

.nav-toggle svg {
    width: 22px;
    height: 22px;
}

.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

html.no-js .nav-toggle {
    display: none;
}

/* Collapsible panel: nav links + header actions */
.site-nav-panel {
    display: flex;
    align-items: center;
    gap: 24px;
}

.site-nav {
    display: block;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-links li {
    margin: 0;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--muted);
    font-size: .95rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color .15s ease;
}

.nav-links a:hover {
    color: var(--ink);
}

/* Current page (aria-current="page") or current section (aria-current="true") */
.site-header .nav-links a[aria-current] {
    color: var(--teal);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-cta {
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
}

/* Light theme: the site's header pill (DONATE) is #0e7490, not the teal-700 --action.
   White on #0e7490 is 5.36:1. The dark theme keeps the usual primary button. */
html:not([data-theme="dark"]) .header-cta {
    background: var(--teal);
    border-color: var(--teal);
    color: #ffffff;
}

html:not([data-theme="dark"]) .header-cta:hover {
    background: #155e75;
    border-color: #155e75;
    color: #ffffff;
}

/* ---- Below 1024px: collapse into a drop-down panel ---- */
@media (max-width: 1023.98px) {
    .site-header {
        flex-wrap: nowrap;
    }

    .site-brand {
        flex: 1 1 auto;
    }

    html.js .site-nav-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        max-height: calc(100vh - var(--header-height));
        max-height: calc(100dvh - var(--header-height));
        overflow-y: auto;
        padding: 12px var(--header-gutter) 24px;
        border-bottom: 1px solid var(--line);
        background: var(--ds-surface);
        box-shadow: var(--shadow-lg);
    }

    html.js .site-nav-panel.is-open {
        display: flex;
    }

    /* Without JS the panel simply wraps under the brand row (and the header stops sticking) */
    html.no-js .site-header {
        position: relative;
        flex-wrap: wrap;
    }

    html.no-js .site-nav-panel {
        flex-basis: 100%;
        flex-wrap: wrap;
    }

    html.js .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    html.js .nav-links a {
        display: flex;
        min-height: 48px;
        padding: 0 4px;
        border-bottom: 1px solid var(--line);
        font-size: 1rem;
    }

    html.no-js .nav-links {
        flex-wrap: wrap;
        gap: 4px 20px;
    }

    .header-actions {
        justify-content: space-between;
    }

    html.js .header-actions .header-cta {
        flex: 1 1 auto;
    }
}

/* ---- 1024px and up: one row ---- */
@media (min-width: 1024px) {
    .nav-toggle {
        display: none;
    }

    .site-nav-panel {
        flex: 0 1 auto;
        justify-content: flex-end;
    }

    /* 1024-1279px is tight: shorter brand title, tighter nav */
    .brand-title-extra { display: none; }
    .brand-title { font-size: 1.15rem; }
    .nav-links { gap: 14px; }
    .nav-links a { font-size: .9rem; }
}

@media (min-width: 1280px) {
    .site-brand { gap: 16px; }
    .brand { gap: 12px; }
    .brand-mark { height: 2.875rem; }
    .brand-title { font-size: 1.5rem; }
    .brand-title-extra { display: inline; }
    .site-nav-panel { gap: 32px; }
    .nav-links { gap: 28px; }
    .nav-links a { font-size: .95rem; }
}

@media (min-width: 1280px) and (max-width: 1439.98px) {
    .brand-title { font-size: 1.3rem; }
    .nav-links { gap: 24px; }
}


/* =====================================================================================
   6. THEME TOGGLE (markup, labels and behaviour copied from the site)
   ===================================================================================== */
.ds-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.ds-theme-toggle:hover {
    background: var(--teal-light);
    color: var(--ink);
}

.ds-theme-toggle:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
}

.ds-theme-toggle svg {
    width: 21px;
    height: 21px;
}

.ds-theme-toggle .ds-theme-sun { display: none; }
html[data-theme="dark"] .ds-theme-sun { display: block; }
html[data-theme="dark"] .ds-theme-moon { display: none; }

/* The toggle needs JavaScript; without it the OS setting is not applied either */
html.no-js .ds-theme-toggle { display: none; }


/* =====================================================================================
   7. LAYOUT
   ===================================================================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container-narrow {
    max-width: 880px;
}

/* Page title block: eyebrow, h1, lead, optional actions */
.page-header {
    padding-top: 40px;
    padding-bottom: 24px;
}

.page-header h1 {
    margin-bottom: 12px;
}

.page-header > :last-child {
    margin-bottom: 0;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

@media (min-width: 768px) {
    .page-header {
        padding-top: 56px;
        padding-bottom: 32px;
    }
}

.eyebrow {
    display: block;
    margin: 0 0 12px;
    color: var(--teal);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lead {
    max-width: 68ch;
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .lead { font-size: 1.125rem; }
}

.section {
    padding-block: 24px;
}

.section + .section {
    padding-top: 16px;
}

@media (min-width: 768px) {
    .section { padding-block: 32px; }
}

.section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
    margin-bottom: 20px;
}

.section-header > * {
    margin-bottom: 0;
}

.section-title {
    margin: 0;
    font-size: 1.375rem;
}

.section-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .9375rem;
}

/* Full-width tinted band (like the site's pale-teal hero pods) */
.band {
    background: var(--band-bg);
    border-block: 1px solid var(--line);
}

/* Grids: 1 column on phones, more on larger screens */
.grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grid-gap, 24px);
}

@media (min-width: 640px) {
    .grid-2,
    .grid-3,
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .span-2 { grid-column: span 2; }
}

@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .span-3 { grid-column: span 3; }
    .grid-main-aside { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
}

/* Auto-fitting cards; set --grid-min to change the minimum column width */
.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 260px)), 1fr));
}

.span-full {
    grid-column: 1 / -1;
}

/* Vertical rhythm: children are spaced by gap, margins removed */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, 16px);
}

.stack > * {
    margin-top: 0;
    margin-bottom: 0;
}

.stack-sm { --stack-gap: 8px; }
.stack-lg { --stack-gap: 32px; }

/* Horizontal group that wraps (button rows, badges, filters) */
.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, 12px);
}

.cluster > * {
    margin: 0;
}

.cluster-between { justify-content: space-between; }
.cluster-end { justify-content: flex-end; }


/* =====================================================================================
   8. BUTTONS AND LINKS
   ===================================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: -0.005em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn:hover {
    text-decoration: none;
}

.btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.btn-primary {
    background: var(--action);
    border-color: var(--action);
    color: var(--action-ink);
}

.btn-primary:hover {
    background: var(--action-hover);
    border-color: var(--action-hover);
    color: var(--action-ink);
}

.btn-secondary {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}

.btn-secondary:hover {
    background: var(--ds-raised);
    border-color: var(--ink);
    color: var(--ink);
}

/* Inverse button for use on the teal .cta-banner */
.btn-white {
    background: var(--cta-ink);
    border-color: var(--cta-ink);
    color: var(--action);
    font-weight: 700;
}

.btn-white:hover {
    background: var(--teal-light);
    color: var(--action-hover);
}

html[data-theme="dark"] .btn-white {
    background: var(--action);
    border-color: #287a56;
    color: #ffffff;
}

html[data-theme="dark"] .btn-white:hover {
    background: var(--action-hover);
}

/* Text link with an arrow: "View all ->" */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--link);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-link::after {
    content: "\2192";
    content: "\2192" / "";
    display: inline-block;
    transition: transform .2s ease;
}

.btn-link:hover {
    color: var(--link-hover);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.btn-link:hover::after {
    transform: translateX(3px);
}

.btn-link.no-arrow::after {
    content: none;
}

.btn-sm {
    min-height: 32px;
    padding: 6px 14px;
    font-size: .8125rem;
}

.btn-lg {
    min-height: 48px;
    padding: 12px 28px;
    font-size: 1rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

@media (max-width: 639.98px) {
    .btn-block-mobile {
        display: flex;
        width: 100%;
    }
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Undo link styling on a link that wraps a whole block (e.g. a card) */
.link-reset {
    color: inherit;
    text-decoration: none;
}

.link-reset:hover {
    color: inherit;
    text-decoration: none;
}


/* =====================================================================================
   9. CARDS, STAT TILES, ICON TILES, CTA BANNER
   ===================================================================================== */
.card {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--shadow-md);
    color: var(--ink);
    min-width: 0;
}

@media (min-width: 768px) {
    .card { padding: 32px; }
}

.card > :last-child {
    margin-bottom: 0;
}

.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 20px;
}

.card-header > * {
    margin-bottom: 0;
}

.card-title {
    margin: 0;
    color: var(--ink);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.card-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .875rem;
}

.card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

/* Muted well without shadow (callouts, side notes) */
.card-muted {
    background: var(--ds-raised);
    box-shadow: none;
}

/* No inner padding (e.g. a table flush to the card edges) */
.card-flush {
    padding: 0;
    overflow: hidden;
}

/* Whole-card link that lifts on hover (like the site's program cards) */
.card-hover {
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .25s ease, box-shadow .25s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    border-color: var(--teal);
    box-shadow: var(--shadow-lg);
}

/* Stat tiles: <div class="stats"> of <div class="stat"> */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 16px;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--shadow-sm);
}

.stat-label {
    margin: 0;
    color: var(--muted);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.stat-value {
    margin: 0;
    color: var(--teal);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.stat-meta {
    margin: 0;
    color: var(--muted);
    font-size: .875rem;
}

/* Square icon container (like the site's card-glow-icon) */
.icon-tile {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--teal-light);
    color: var(--teal);
    font-weight: 700;
}

.icon-tile svg {
    width: 22px;
    height: 22px;
}

/* Teal call-to-action banner (like the site's cta-banner-card) */
.cta-banner {
    padding: 40px 24px;
    border-radius: 24px;
    background: var(--cta-bg);
    box-shadow: var(--shadow-md);
    color: var(--cta-ink);
    text-align: center;
}

.cta-banner h2,
.cta-banner h3 {
    color: var(--cta-ink);
}

.cta-banner p {
    max-width: 600px;
    margin: 0 auto 28px;
    color: var(--cta-muted);
    font-size: 1.0625rem;
}

.cta-banner .cluster {
    justify-content: center;
}

/* The teal focus ring would vanish on the teal banner, so it is white here */
.cta-banner :focus-visible {
    outline-color: var(--cta-ink);
}

@media (min-width: 768px) {
    .cta-banner { padding: 56px 64px; border-radius: 32px; }
}

html[data-theme="dark"] .cta-banner {
    border: 1px solid var(--line);
    background: var(--ds-surface);
    box-shadow: 0 12px 32px rgb(0 0 0 / .18);
    color: var(--ink);
}

html[data-theme="dark"] .cta-banner h2,
html[data-theme="dark"] .cta-banner h3 { color: var(--ink); }
html[data-theme="dark"] .cta-banner p { color: var(--muted); }
html[data-theme="dark"] .cta-banner :focus-visible { outline-color: var(--teal); }


/* =====================================================================================
   10. FORMS
   Styles the markup Django 4.2 renders: {{ field }} widgets, <ul class="errorlist">,
   RadioSelect (<div id=..><div><label><input type=radio> Text</label></div>...</div>).
   ===================================================================================== */

/* Two-column form layout (one column on phones) */
.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px 24px;
}

@media (min-width: 640px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.form-grid > .field-full,
.form-grid > .form-section,
.form-grid > .errorlist,
.form-grid > .alert {
    grid-column: 1 / -1;
}

/* Titled group of fields inside a form card */
.form-section + .form-section {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    color: var(--teal);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.form-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
}

@media (max-width: 639.98px) {
    .form-actions > .btn { flex: 1 1 100%; }
}

/* One field: label, control, help, errors */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field > * {
    margin: 0;
}

.field > label,
.range-head > label,
.label,
legend.label {
    color: var(--ink);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
}

.req {
    margin-left: 2px;
    color: var(--danger);
    font-weight: 700;
}

.optional {
    margin-left: 4px;
    color: var(--muted);
    font-size: .8125rem;
    font-weight: 400;
}

.help {
    margin: 0;
    color: var(--muted);
    font-size: .8125rem;
    line-height: 1.5;
}

/* Django field errors */
.errorlist {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--danger);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.5;
}

.errorlist li {
    margin: 0;
}

.errorlist li + li {
    margin-top: 2px;
}

/* Django non-field errors ({{ form.non_field_errors }}) look like an error alert */
.errorlist.nonfield {
    padding: 12px 16px;
    border: 1px solid var(--danger-line);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-md);
    background: var(--danger-bg);
    font-size: .875rem;
}

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
}

.field > fieldset {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field > fieldset > legend {
    margin-bottom: 8px;
}

/* <fieldset class="field">: a legend is not a flex item, so the .field gap skips it */
fieldset.field > legend {
    margin-bottom: 10px;
}

/* Text-like inputs, select, textarea.
   Base rules are wrapped in :where() (zero specificity) so the error states below,
   and page CSS, override them without !important. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea) {
    display: block;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background-color: var(--ds-surface);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgb(16 24 40 / .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* 16px on phones stops iOS Safari from zooming into the field on focus */
@media (max-width: 639.98px) {
    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea) {
        font-size: 16px;
    }
}

input::placeholder,
textarea::placeholder {
    color: var(--placeholder);
    opacity: 1;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
    outline: none;
    border-color: var(--focus-input);
    box-shadow: 0 0 0 2px var(--focus-input);
}

:where(textarea) {
    min-height: 120px;
    line-height: 1.5;
    resize: vertical;
}

:where(select) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    cursor: pointer;
}

:where(html[data-theme="dark"] select) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23b8c0cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

:where(select[multiple], select[size]:not([size="1"])) {
    padding-right: 12px;
    background-image: none;
}

:where(input[type="file"]) {
    max-width: 100%;
    font-size: 14px;
}

:where(input, select, textarea):disabled {
    background-color: var(--ds-raised);
    color: var(--muted);
    cursor: not-allowed;
    opacity: 1;
}

:where(input, textarea)[readonly] {
    background-color: var(--ds-raised);
}

/* Error state: automatic when a .field contains an .errorlist (Django {{ field.errors }}),
   or opt in with .field.has-error or aria-invalid="true" on the control */
.field.has-error :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea),
.field:has(> .errorlist) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea),
:where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--danger);
}

.field.has-error :where(input, select, textarea):focus,
.field:has(> .errorlist) :where(input, select, textarea):focus,
:where(input, select, textarea)[aria-invalid="true"]:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px var(--danger);
}

/* Checkbox and radio: native controls tinted with the brand colour */
input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--control-accent);
    cursor: pointer;
}

/* Label wrapping a single checkbox/radio: <label class="check"><input> Text</label> */
.check {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.45;
    cursor: pointer;
}

.check input {
    margin-top: 2px;
}

.check .help {
    display: block;
    margin-top: 2px;
    font-weight: 400;
}

/* Pill "chips" for a RadioSelect / CheckboxSelectMultiple.
   Wrap the widget: <div class="choice-chips">{{ form.contact_method }}</div>
   Django's nested <div>s are flattened with display: contents so every label is a chip. */
.choice-chips:not(input) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.choice-chips div,
.choice-chips ul,
.choice-chips li {
    display: contents;
}

.choice-chips label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0;
    padding: 8px 16px 8px 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-pill);
    background: var(--ds-surface);
    color: var(--ink);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    user-select: none;
}

.choice-chips label:hover {
    border-color: var(--link);
    background: var(--teal-light);
}

.choice-chips label:has(input:checked) {
    border-color: var(--link);
    background: var(--teal-light);
    box-shadow: inset 0 0 0 1px var(--link);
    font-weight: 600;
}

.choice-chips label:has(input:focus-visible) {
    outline: 3px solid var(--teal);
    outline-offset: 2px;
}

.choice-chips input:focus-visible {
    outline: none;
}

.field:has(> .errorlist) .choice-chips label,
.field.has-error .choice-chips label {
    border-color: var(--danger-line);
}

/* Plain vertical list of radios/checkboxes: <div class="choice-list">{{ form.field }}</div> */
.choice-list:not(input) {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.choice-list div {
    display: contents;
}

.choice-list label {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .9375rem;
    font-weight: 500;
    cursor: pointer;
}

.choice-list input {
    margin-top: 2px;
}

/* Range slider. Chromium/Safari fill: set style="--fill: 40%" from JS (see guide);
   Firefox fills natively with ::-moz-range-progress. */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
    accent-color: var(--control-accent);
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: linear-gradient(to right,
        var(--control-accent) 0,
        var(--control-accent) var(--fill, 0%),
        var(--range-track) var(--fill, 0%),
        var(--range-track) 100%);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border: 3px solid var(--ds-surface);
    border-radius: 50%;
    background: var(--control-accent);
    box-shadow: 0 0 0 1px var(--control-accent), 0 1px 3px rgb(16 24 40 / .25);
}

input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--range-track);
}

input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--control-accent);
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid var(--ds-surface);
    border-radius: 50%;
    background: var(--control-accent);
    box-shadow: 0 0 0 1px var(--control-accent), 0 1px 3px rgb(16 24 40 / .25);
}

input[type="range"]:focus {
    outline: none;
}

input[type="range"]:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* Optional range decorations */
.range-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.range-value {
    display: inline-flex;
    align-items: center;
    min-width: 2.5em;
    justify-content: center;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--teal-light);
    color: var(--teal);
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.range-scale {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: .75rem;
    list-style: none;
}

.range-scale li {
    margin: 0;
}

/* Inline filter bar (e.g. dashboard year/month selects) */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.filters .field {
    flex: 1 1 160px;
    max-width: 100%;
}

@media (min-width: 640px) {
    .filters .field { flex: 0 1 200px; }
}

/* Let a control shrink to its content instead of filling the row */
.control-auto {
    width: auto !important;
    max-width: 100%;
}


/* =====================================================================================
   11. TABLES
   ===================================================================================== */
.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--shadow-sm);
}

.table-wrap:focus-visible {
    outline-offset: 2px;
}

.table-wrap > .table {
    margin: 0;
}

.table {
    width: 100%;
    margin: 0 0 1rem;
    border-collapse: collapse;
    color: var(--ink);
    font-size: .875rem;
    line-height: 1.5;
}

.table caption {
    padding: 16px 20px 12px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    caption-side: top;
}

.table th,
.table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.table thead th {
    background: var(--ds-raised);
    color: var(--muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: bottom;
}

.table tbody th {
    font-weight: 600;
}

.table tbody tr:last-child > * {
    border-bottom: 0;
}

.table tbody tr {
    transition: background-color .15s ease;
}

.table tbody tr:hover {
    background: var(--ds-raised);
}

.table .num,
.table td.num,
.table th.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.table .nowrap {
    white-space: nowrap;
}

.table-compact th,
.table-compact td {
    padding: 8px 12px;
}

/* Below 640px each row becomes a small card; label cells with data-label="Column" */
@media (max-width: 639.98px) {
    .table-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td,
    .table-stack tbody th {
        display: block;
        width: 100%;
    }

    .table-stack tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
    }

    .table-stack tbody tr:last-child {
        border-bottom: 0;
    }

    .table-stack td,
    .table-stack tbody th {
        padding: 4px 0;
        border: 0;
        text-align: left;
    }

    .table-stack td[data-label],
    .table-stack tbody th[data-label] {
        display: grid;
        grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
        gap: 12px;
        justify-items: start;
    }

    .table-stack td[data-label]::before,
    .table-stack tbody th[data-label]::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        line-height: 1.9;
    }

    .table-stack td.num,
    .table-stack th.num {
        text-align: left;
    }
}


/* =====================================================================================
   12. BADGES
   ===================================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--teal-light);
    color: var(--teal);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.badge-pending {
    border-color: var(--warning-line);
    background: var(--warning-bg);
    color: var(--warning);
}

.badge-approved {
    border-color: var(--success-line);
    background: var(--success-bg);
    color: var(--success);
}

.badge-rejected {
    border-color: var(--danger-line);
    background: var(--danger-bg);
    color: var(--danger);
}

.badge-neutral {
    border-color: var(--line);
    background: var(--ds-raised);
    color: var(--muted);
}

.badge-info {
    border-color: var(--info-line);
    background: var(--info-bg);
    color: var(--info);
}


/* =====================================================================================
   13. ALERTS AND MESSAGES
   ===================================================================================== */
.alert {
    --alert-accent: var(--info);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 1rem;
    padding: 14px 16px;
    border: 1px solid var(--info-line);
    border-left: 4px solid var(--alert-accent);
    border-radius: var(--radius-md);
    background: var(--info-bg);
    color: var(--ink);
    font-size: .9375rem;
    line-height: 1.55;
}

.alert > :last-child,
.alert-body > :last-child {
    margin-bottom: 0;
}

.alert-body {
    flex: 1 1 auto;
    min-width: 0;
}

.alert-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--alert-accent);
}

.alert-title {
    display: block;
    margin: 0 0 2px;
    color: var(--alert-accent);
    font-size: .9375rem;
    font-weight: 700;
}

.alert-info {
    --alert-accent: var(--info);
    border-color: var(--info-line);
    border-left-color: var(--alert-accent);
    background: var(--info-bg);
}

.alert-success {
    --alert-accent: var(--success);
    border-color: var(--success-line);
    border-left-color: var(--alert-accent);
    background: var(--success-bg);
}

.alert-warning {
    --alert-accent: var(--warning);
    border-color: var(--warning-line);
    border-left-color: var(--alert-accent);
    background: var(--warning-bg);
}

.alert-error,
.alert-danger {
    --alert-accent: var(--danger);
    border-color: var(--danger-line);
    border-left-color: var(--alert-accent);
    background: var(--danger-bg);
}

.alert-debug {
    --alert-accent: var(--muted);
    border-color: var(--line);
    border-left-color: var(--alert-accent);
    background: var(--ds-raised);
}

/* Django messages slot under the header (partials/messages.html) */
.messages {
    padding-top: 24px;
}

.messages .alert:last-child {
    margin-bottom: 0;
}


/* =====================================================================================
   14. EMPTY STATE, PROGRESS, CHARTS, PAGINATION, PROSE
   ===================================================================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    border: 1px dashed var(--input-border);
    border-radius: var(--radius-lg);
    background: var(--ds-surface);
    color: var(--muted);
    text-align: center;
}

.empty-state > * {
    margin: 0;
}

.empty-state-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--teal-light);
    color: var(--teal);
}

.empty-state-icon svg {
    width: 24px;
    height: 24px;
}

.empty-state-title {
    color: var(--ink);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.empty-state p {
    max-width: 48ch;
}

.empty-state .cluster {
    justify-content: center;
    margin-top: 8px;
}

/* Inside a table cell or card: no border or background of its own */
.empty-state-flush {
    border: 0;
    background: transparent;
}

/* Simple progress bar: <div class="progress" role="progressbar" ...><span class="progress-bar" style="width:40%"></span></div> */
.progress {
    height: 8px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--ds-raised);
}

.progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--control-accent);
    transition: width .3s ease;
}

/* Chart.js needs a sized, relatively positioned parent for responsive charts */
.chart-container {
    position: relative;
    width: 100%;
    height: var(--chart-height, 320px);
    min-width: 0;
}

@media (max-width: 639.98px) {
    .chart-container { height: var(--chart-height-mobile, 260px); }
}

/* Pagination */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.pagination li {
    margin: 0;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--ds-surface);
    color: var(--ink);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.pagination a:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.pagination [aria-current="page"] {
    border-color: var(--action);
    background: var(--action);
    color: var(--action-ink);
}

/* Beats `.pagination a:hover` so the current page stays readable on hover */
.pagination a[aria-current="page"]:hover {
    border-color: var(--action-hover);
    background: var(--action-hover);
    color: var(--action-ink);
}

.pagination .is-disabled {
    color: var(--muted);
    opacity: .6;
}

/* Gap marker between page numbers: <span class="pagination-ellipsis">&hellip;</span> */
.pagination .pagination-ellipsis {
    min-width: 24px;
    padding: 0 2px;
    border-color: transparent;
    background: transparent;
    color: var(--muted);
}

/* Long-form text (guides, awareness content) */
.prose {
    max-width: 72ch;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.7;
}

.prose > * + * {
    margin-top: 1em;
}

.prose > * {
    margin-bottom: 0;
}

.prose h2 {
    margin-top: 2em;
    font-size: 1.5rem;
}

.prose h3 {
    margin-top: 1.6em;
    font-size: 1.1875rem;
}

.prose h2 + *,
.prose h3 + * {
    margin-top: .5em;
}

.prose > :first-child {
    margin-top: 0;
}

.prose p,
.prose li {
    color: var(--ink);
}

.prose ul,
.prose ol {
    padding-left: 1.4rem;
}

.prose li::marker {
    color: var(--muted);
}

.prose a {
    font-weight: 600;
}

.prose blockquote {
    margin-inline: 0;
    padding-left: 16px;
    border-left: 3px solid var(--line);
    color: var(--muted);
}

/* Checklist with teal ticks */
.checklist {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.checklist li {
    position: relative;
    padding-left: 30px;
}

.checklist li + li {
    margin-top: 10px;
}

.checklist li::before {
    content: "";
    position: absolute;
    top: .3em;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--teal-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7490' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

html[data-theme="dark"] .checklist li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2383d6b3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E");
}

/* Description list (key/value details) */
.meta-list {
    display: grid;
    grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
    gap: 8px 20px;
    margin: 0;
    font-size: .9375rem;
}

.meta-list dt {
    color: var(--muted);
    font-weight: 600;
}

.meta-list dd {
    margin: 0;
    color: var(--ink);
}


/* =====================================================================================
   15. SITE FOOTER (dark in both themes, like the site)
   ===================================================================================== */
.ds-footer {
    margin-top: auto;
    padding: 48px 0 32px;
    background: var(--footer-bg);
    color: var(--footer-ink);
    font-size: .875rem;
}

@media (min-width: 768px) {
    .ds-footer { padding: 64px 0 40px; }
}

.ds-footer :focus-visible {
    outline-color: #83d6b3;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}

.footer-brand-col {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 48px;
    }

    .footer-brand-col { grid-column: auto; }
}

.ds-footer .footer-brand {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.ds-footer .footer-brand:hover {
    color: #ffffff;
}

.footer-brand img {
    width: auto;
    height: 32px;
}

.footer-tagline {
    margin: 4px 0 0;
    color: var(--footer-muted);
    line-height: 1.6;
}

.footer-about {
    margin: 0;
    color: var(--footer-muted);
    line-height: 1.6;
}

.footer-heading {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.4;
    text-transform: uppercase;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links li {
    margin: 0;
}

.ds-footer a {
    color: var(--footer-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.ds-footer a:hover {
    color: #ffffff;
    text-decoration: none;
}

.footer-bottom {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 32px;
    border-top: 1px solid var(--footer-line);
    color: var(--footer-muted);
    text-align: center;
}

.footer-bottom p {
    margin: 0;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        text-align: left;
    }
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-social li {
    margin: 0;
}

.footer-social a {
    display: inline-flex;
    padding: 2px;
}

.footer-social svg {
    width: 20px;
    height: 20px;
}

/* Dark theme: charcoal footer with the site's fine dot texture */
html[data-theme="dark"] .ds-footer {
    border-top: 1px solid var(--line);
    background-color: #101318;
    background-image:
        radial-gradient(ellipse at 15% 0%, rgb(255 255 255 / .035), transparent 65%),
        radial-gradient(circle, rgb(255 255 255 / .055) .65px, transparent .85px);
    background-size: 100% 100%, 5px 5px;
    background-repeat: no-repeat, repeat;
}

html[data-theme="dark"] .ds-footer a:hover {
    color: #edf0f4;
}


/* =====================================================================================
   16. UTILITIES
   ===================================================================================== */
.text-muted { color: var(--muted) !important; }
.text-ink { color: var(--ink) !important; }
.text-teal { color: var(--teal) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-small { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-sm { margin-top: 8px !important; }
.mt-md { margin-top: 16px !important; }
.mt-lg { margin-top: 32px !important; }
.mb-sm { margin-bottom: 8px !important; }
.mb-md { margin-bottom: 16px !important; }
.mb-lg { margin-bottom: 32px !important; }
.w-full { width: 100%; }


/* =====================================================================================
   17. REDUCED MOTION
   ===================================================================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .card-hover:hover {
        transform: none;
    }
}


/* =====================================================================================
   18. PRINT
   ===================================================================================== */
@media print {
    :root,
    html[data-theme="dark"] {
        color-scheme: light;
        --bg: #ffffff; --page: #ffffff; --ink: #000000; --muted: #333333; --line: #cccccc;
        --ds-surface: #ffffff; --ds-raised: #f2f2f2; --teal: #0e7490; --link: #000000;
        --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
    }

    body {
        background: #ffffff;
        color: #000000;
    }

    .skip-link,
    .nav-toggle,
    .site-nav-panel,
    .ds-theme-toggle,
    .footer-grid,
    .footer-social,
    .messages,
    .btn,
    .pagination,
    .no-print {
        display: none !important;
    }

    .site-header {
        position: static;
        padding: 0 0 12px;
        border-bottom: 1px solid #cccccc;
        background: #ffffff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    html[data-theme="dark"] .brand-mark .ds-logo-light { display: block; }
    html[data-theme="dark"] .brand-mark .ds-logo-dark { display: none; }
    .brand-title { color: #0A6B3A; }

    .ds-footer,
    html[data-theme="dark"] .ds-footer {
        padding: 12px 0 0;
        border-top: 1px solid #cccccc;
        background: #ffffff;
        background-image: none;
        color: #333333;
    }

    .footer-bottom {
        border: 0;
        padding: 0;
        color: #333333;
    }

    .container {
        max-width: none;
        padding-inline: 0;
    }

    .card,
    .stat,
    .table-wrap,
    .alert,
    .empty-state {
        box-shadow: none;
        break-inside: avoid;
    }

    .table-wrap {
        overflow: visible;
    }

    .prose a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-weight: 400;
        font-size: .85em;
    }

    a {
        color: #000000;
    }
}