/* ============================================================
   GRO-WORK — Center for Growth & Workforce Empowerment
   Design system: the Material Design language (as react-md
   renders it) on the vanilla stack — adopted via D-15. Same HTML,
   same class contracts as v1; the whole language lives in this
   file plus one self-hosted Roboto variable font.

   The dialect of Material implemented here (MD2, what react-md
   ships): Roboto everywhere; ink at fixed opacities instead of
   named grays; surfaces carry ELEVATION (layered shadows), not
   borders; 4px corner radius; UPPERCASE 500-weight buttons with
   wide tracking; overline labels; state layers on hover; the
   standard easing curve. Brand stays Peacox teal (D-08) — the
   *language* changes, the identity doesn't.
   ============================================================ */

/* Roboto: one variable font file (weights 100–900), self-hosted so
   the strict CSP (font-src 'self') holds. */
@font-face {
    font-family: "Roboto";
    src: url("../assets/fonts/roboto-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- Material theme (MD2 color system) --- */
    --md-primary: #008080;            /* Peacox teal */
    --md-primary-dark: #066666;       /* hover/variant */
    --md-primary-deep: #0B4F4F;       /* app-bar-adjacent, footer */
    --md-on-primary: #FFFFFF;
    --md-secondary: #B57A1E;          /* Peacox gold */
    --md-on-secondary: #FFFFFF;
    --md-background: #FAFAFA;         /* grey 50 — the MD canvas */
    --md-surface: #FFFFFF;
    --md-error: #B00020;

    /* Ink: MD text is black at fixed opacities, not gray hexes */
    --ink-high: rgba(0, 0, 0, 0.87);
    --ink-medium: rgba(0, 0, 0, 0.60);
    --ink-disabled: rgba(0, 0, 0, 0.38);
    --ink-divider: rgba(0, 0, 0, 0.12);
    --ink-outline: rgba(0, 0, 0, 0.24);

    /* Tonal containers (primary/secondary tints for chips & notes) */
    --tonal-primary: #E0F1F1;
    --tonal-primary-border: #B2DCDC;
    --tonal-secondary: #FBF1DF;
    --tonal-secondary-border: #F0DAB0;
    --tonal-indigo: #EFF0FB;
    --tonal-indigo-border: #D9DCF5;
    --indigo: #5560C9;
    --indigo-dark: #3F49A8;

    /* Status (kept, MD-toned) */
    --ok: #0B845C;      --ok-soft: #E7F8F1;      --ok-border: #BCEBD8;
    --warn: #B45309;    --warn-soft: #FEF3E2;    --warn-border: #FBDDB0;
    --info: #2563EB;    --info-soft: #EBF1FE;    --info-border: #C6D8FB;

    /* --- Elevation: real MD shadow stacks (umbra/penumbra/ambient) --- */
    --elev-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
    --elev-2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    --elev-4: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
    --elev-8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    --elev-24: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);

    /* Shape: MD2 = 4px components, small rounds; chips stay stadium */
    --radius: 4px;
    --radius-chip: 16px;
    --radius-pill: 999px;

    /* Motion */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    --font: "Roboto", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --ring: 0 0 0 3px rgba(0, 128, 128, 0.28);
}

/* ---------- Base ---------- */

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    letter-spacing: 0.009em;            /* MD body1: 0.15px */
    line-height: 1.6;
    color: var(--ink-high);
    background: var(--md-background);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--md-primary-dark); }
a:hover { color: var(--md-primary-deep); }

/* MD headlines are REGULAR weight — size and tracking carry the
   hierarchy, not boldness. (h1≈headline3/4, h2≈headline5, h3≈h6.) */
h1, h2, h3 {
    font-family: var(--font);
    line-height: 1.2;
    color: var(--ink-high);
    margin: 0 0 0.5rem;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3rem); font-weight: 400; letter-spacing: 0; }
h2 { font-size: clamp(1.45rem, 3vw, 1.75rem); font-weight: 400; letter-spacing: 0.007em; }
h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.009em; }

p { margin: 0 0 1rem; }

.lede { font-size: 1.06rem; letter-spacing: 0.009em; color: var(--ink-medium); max-width: 62ch; }

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0.5rem;
    background: var(--md-primary-deep);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
    z-index: 100;
}
.skip-link:focus { left: 0.5rem; color: #fff; }

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

/* ---------- Layout ---------- */

.container {
    width: min(1120px, 100% - 2.5rem);
    margin-inline: auto;
}

.section { padding: 3rem 0; }
.section-tight { padding: 2rem 0; }

.section-head { max-width: 68ch; margin-bottom: 1.75rem; }
/* Kicker = MD "overline": tiny, wide-tracked, uppercase, medium */
.section-head .kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.167em;            /* MD overline: 2px @ 12px */
    text-transform: uppercase;
    color: var(--md-primary-dark);
    margin-bottom: 0.4rem;
}

.grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}
.grid-wide {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
}

/* ---------- App bar (was: header & navigation) ----------
   The MD top app bar: primary color, elevation 4, white type. */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--md-primary);
    color: var(--md-on-primary);
    box-shadow: var(--elev-4);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;                    /* MD app bar: 64px */
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--md-on-primary);
}
.brand img {
    width: 2.4rem; height: 2.4rem;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
}
.brand .brand-name {
    font-weight: 500;                    /* MD app bar title */
    font-size: 1.25rem;
    letter-spacing: 0.009em;
}
.brand .brand-sub {
    display: block;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.167em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* Nav links read as MD tabs on the app bar: uppercase 500, state
   layer on hover, active tab = underline indicator. */
.site-nav ul {
    display: flex;
    gap: 0.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav a {
    display: block;
    padding: 1.15rem 0.8rem calc(1.15rem - 3px);
    border-bottom: 3px solid transparent;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.089em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    transition: background 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
}
.site-nav a:hover {
    background: rgba(255, 255, 255, 0.08); /* MD hover state layer */
    color: #fff;
}
.site-nav a[aria-current="page"] {
    color: #fff;
    border-bottom-color: #fff;           /* MD tab indicator */
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--md-on-primary);
    transition: background 0.15s var(--ease-standard);
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- Buttons ----------
   MD buttons: 36px, 4px radius, UPPERCASE 500 with 1.25px tracking.
   Contained = filled + elevation 2→4; outlined; text. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    padding: 0.45rem 1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.089em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard);
}
/* Pressed = ripple stand-in: darker state layer, elevation up */
.btn:active { filter: brightness(0.92); }

.btn-primary {
    background: var(--md-primary);
    color: var(--md-on-primary);
    box-shadow: var(--elev-2);
}
.btn-primary:hover {
    background: var(--md-primary-dark);
    color: var(--md-on-primary);
    box-shadow: var(--elev-4);
}

.btn-secondary {
    background: transparent;
    color: var(--md-primary-dark);
    border-color: var(--ink-outline);
}
.btn-secondary:hover {
    background: rgba(0, 128, 128, 0.08);  /* primary state layer */
    border-color: var(--md-primary);
    color: var(--md-primary-deep);
}

.btn-ghost { background: transparent; color: var(--md-primary-dark); }
.btn-ghost:hover { background: rgba(0, 128, 128, 0.08); color: var(--md-primary-deep); }

.btn-sm { min-height: 2rem; padding: 0.3rem 0.8rem; font-size: 0.8rem; }

/* ---------- Hero ---------- */

.hero {
    background:
        linear-gradient(180deg, #FFFFFF 0%, var(--md-background) 100%);
    border-bottom: 1px solid var(--ink-divider);
    padding: 4rem 0 3.5rem;
}
.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}
.hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.167em;
    text-transform: uppercase;
    color: var(--md-primary-dark);
    margin: 0 0 0.75rem;
}

.hero h1 { max-width: 20ch; }
.hero .lede { font-size: 1.13rem; }
.hero .hero-art {
    justify-self: center;
    max-width: 20rem;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18));
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* Hero facts as MD outlined chips */
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.75rem;
    padding: 0;
    list-style: none;
}
.hero-facts li {
    background: var(--md-surface);
    border: 1px solid var(--ink-divider);
    border-radius: var(--radius-chip);
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.018em;
    color: var(--ink-medium);
}

/* ---------- Cards ----------
   MD cards: surface + elevation, NOT borders. Interactive cards
   raise 1→8 on hover. */

.card {
    background: var(--md-surface);
    border: none;
    border-radius: var(--radius);
    padding: 1.4rem;
    box-shadow: var(--elev-1);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.card h3 { margin: 0; }
.card .card-sub { color: var(--ink-medium); font-size: 0.9rem; letter-spacing: 0.011em; margin: 0; }
.card .card-body { color: var(--ink-medium); font-size: 0.9rem; letter-spacing: 0.018em; line-height: 1.55; margin: 0; }
.card .card-foot {
    margin-top: auto;
    padding-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

a.card-link {
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s var(--ease-standard);
}
a.card-link:hover {
    box-shadow: var(--elev-8);
    color: inherit;
}
/* Icon in a primary tonal circle — MD list-avatar treatment */
.door-icon {
    width: 2.9rem;
    height: 2.9rem;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    background: var(--tonal-primary);
    border: none;
    border-radius: 50%;
}
/* Card action: MD text-button styling */
.card-cta {
    font-weight: 500;
    color: var(--md-primary-dark);
    font-size: 0.82rem;
    letter-spacing: 0.089em;
    text-transform: uppercase;
}

.track-icon { font-size: 1.6rem; line-height: 1; }

/* ---------- Badges (caption-scale tonal labels) ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.6rem;
    border-radius: var(--radius-chip);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.033em;             /* MD caption: 0.4px */
    border: 1px solid var(--ink-divider);
    background: #EEEEEE;
    color: var(--ink-medium);
    white-space: nowrap;
}
.badge-teal   { background: var(--tonal-primary);   border-color: var(--tonal-primary-border);   color: var(--md-primary-deep); }
.badge-indigo { background: var(--tonal-indigo);    border-color: var(--tonal-indigo-border);    color: var(--indigo-dark); }
.badge-gold   { background: var(--tonal-secondary); border-color: var(--tonal-secondary-border); color: #7A5310; }
.badge-ok     { background: var(--ok-soft);         border-color: var(--ok-border);              color: var(--ok); }
.badge-info   { background: var(--info-soft);       border-color: var(--info-border);            color: var(--info); }

/* ---------- Filter bar & chips ---------- */

.filter-bar {
    background: var(--md-surface);
    border: none;
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--elev-2);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.filter-row label.field-label {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.011em;
    color: var(--ink-medium);
}

/* MD outlined text fields */
input[type="search"],
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    font: inherit;
    letter-spacing: inherit;
    color: var(--ink-high);
    background: var(--md-surface);
    border: 1px solid var(--ink-outline);
    border-radius: var(--radius);
    padding: 0.55rem 0.8rem;
    transition: border-color 0.15s var(--ease-standard);
}
input[type="search"] { min-width: min(20rem, 100%); }
select { cursor: pointer; }
textarea { width: 100%; resize: vertical; }

input:hover, select:hover, textarea:hover { border-color: var(--ink-high); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    border-color: var(--md-primary);
    box-shadow: var(--ring);
}

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.chip-group-label {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.011em;
    color: var(--ink-medium);
    margin: 0 0 0.35rem;
}
.chip-group-label .hint { font-weight: 400; color: var(--ink-disabled); }

/* MD filter chips: 32px stadium, grey fill; selected = primary fill */
.chip {
    border: none;
    background: #E7E7E7;
    color: var(--ink-high);
    border-radius: var(--radius-chip);
    min-height: 2rem;
    padding: 0.3rem 0.8rem;
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.018em;
    cursor: pointer;
    transition: background 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard);
}
.chip:hover { background: #DBDBDB; box-shadow: var(--elev-1); }
.chip[aria-pressed="true"] {
    background: var(--md-primary);
    color: var(--md-on-primary);
    box-shadow: var(--elev-1);
}

.filter-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}
.result-count { font-weight: 500; color: var(--ink-medium); margin: 0; font-size: 0.9rem; }

/* ---------- Listing rows ---------- */

.listing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.listing-pay { font-weight: 500; color: var(--md-primary-deep); }
.listing-date { color: var(--ink-medium); font-size: 0.82rem; letter-spacing: 0.033em; }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.033em;
    color: var(--indigo-dark);
    background: var(--tonal-indigo);
    border-radius: var(--radius-chip);
    padding: 0.14rem 0.55rem;
}

/* ---------- Notices ---------- */

.banner-demo {
    background: #FFF8E1;                 /* amber 50 — MD banner */
    border-bottom: 1px solid #F0DAB0;
    color: #6B4A12;
    font-size: 0.9rem;
    letter-spacing: 0.011em;
    padding: 0.6rem 0;
}
.banner-demo .container { display: flex; gap: 0.6rem; align-items: baseline; }
.banner-demo strong { white-space: nowrap; }

.crisis-box {
    background: var(--tonal-indigo);
    border: none;
    border-left: 4px solid var(--indigo);
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    color: var(--ink-high);
}
.crisis-box strong { color: var(--indigo-dark); }

.error-panel {
    background: var(--warn-soft);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    color: #7C3E06;
}
.error-panel code {
    background: #fff;
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    padding: 0.05rem 0.35rem;
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ink-medium);
    background: var(--md-surface);
    border: 1px dashed var(--ink-outline);
    border-radius: var(--radius);
}

/* ---------- Steps (how it works) ---------- */

.steps { counter-reset: step; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); padding: 0; list-style: none; margin: 0; }
.steps li {
    counter-increment: step;
    background: var(--md-surface);
    border: none;
    border-radius: var(--radius);
    padding: 1.4rem;
    box-shadow: var(--elev-1);
}
.steps li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    margin-bottom: 0.7rem;
    border-radius: 50%;
    background: var(--md-primary);
    color: #fff;
    font-weight: 500;
    font-family: var(--font);
}
.steps h3 { margin-bottom: 0.35rem; }
.steps p { margin: 0; color: var(--ink-medium); font-size: 0.92rem; }

/* ---------- Pathway (five readiness steps) ---------- */

.pathway {
    counter-reset: pathstep;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.pathway > li {
    counter-increment: pathstep;
    position: relative;
    background: var(--md-surface);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    padding: 1.3rem 1.4rem 1.3rem 4.5rem;
}
.pathway > li::before {
    content: counter(pathstep);
    position: absolute;
    left: 1.35rem;
    top: 1.3rem;
    width: 2.3rem;
    height: 2.3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--md-primary);
    color: #fff;
    font-family: var(--font);
    font-weight: 500;
    font-size: 1.05rem;
}
.pathway h3 { margin: 0 0 0.35rem; }
.pathway p { margin: 0; color: var(--ink-medium); font-size: 0.95rem; }
.pathway .step-cta { margin-top: 0.9rem; }

.certificate-note {
    background: var(--tonal-secondary);
    border: none;
    border-left: 4px solid var(--md-secondary);
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    padding: 1.1rem 1.3rem;
    margin: 1.5rem 0;
    color: #6B4A12;
}
.certificate-note strong { color: #5A3E0F; }

.event-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
    background: var(--tonal-indigo);
    border: none;
    border-left: 4px solid var(--indigo);
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    padding: 1.4rem 1.6rem;
}
.event-banner > div { flex: 1 1 22rem; }
.event-banner h2 { margin: 0.1rem 0 0.35rem; }
.event-banner .kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.167em;
    text-transform: uppercase;
    color: var(--indigo-dark);
}
.event-when { margin: 0 0 0.5rem; color: var(--ink-medium); }
.event-banner .card-body { color: var(--ink-medium); font-size: 0.95rem; margin: 0; }

.audience-toggle { margin-bottom: 1.25rem; }

.check-list {
    list-style: none;
    margin: 0.25rem 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}
.check-list li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--ink-medium);
    font-size: 0.95rem;
}
.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--md-primary);
    font-weight: 700;
}
.check-list strong { color: var(--ink-high); }

.info-note {
    background: var(--info-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius);
    padding: 0.7rem 0.95rem;
    font-size: 0.88rem;
    letter-spacing: 0.011em;
    color: #1E3A8A;
}
.faq-head { margin: 2.25rem 0 1rem; }
.card .info-note { font-size: 0.84rem; padding: 0.6rem 0.8rem; margin: 0; }

@media (max-width: 640px) {
    .pathway > li { padding: 3.6rem 1.1rem 1.2rem; }
    .pathway > li::before { top: 1.1rem; left: 1.1rem; }
}

/* ---------- Dialog: MD spec = radius 4, elevation 24, 32% scrim ---- */

dialog {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--elev-24);
    padding: 0;
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.32); }

.dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--ink-divider);
}
.dialog-head h2 { font-size: 1.25rem; font-weight: 500; margin: 0; }
.dialog-head .dialog-sub { color: var(--ink-medium); font-size: 0.88rem; margin: 0.25rem 0 0.75rem; }
.dialog-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ink-medium);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    transition: background 0.15s var(--ease-standard);
}
.dialog-close:hover { background: rgba(0, 0, 0, 0.08); color: var(--ink-high); }

.dialog-body { padding: 1.1rem 1.5rem 1.5rem; overflow-y: auto; overflow-x: hidden; }

.form-grid { display: grid; gap: 0.9rem; }
.form-field { display: grid; gap: 0.3rem; }
.form-field label { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.011em; color: var(--ink-medium); }
.form-field .hint { font-size: 0.78rem; color: var(--ink-disabled); }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }

.compose-fallback {
    margin-top: 1rem;
    background: var(--tonal-primary);
    border: none;
    border-radius: var(--radius);
    padding: 1rem;
}
.compose-fallback textarea {
    font-family: var(--font);
    font-size: 0.86rem;
    background: #fff;
    margin: 0.5rem 0;
    min-height: 8rem;
}

/* ---------- Toast → MD snackbar ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%) translateY(1rem);
    background: #323232;                 /* MD snackbar surface */
    color: rgba(255, 255, 255, 0.94);
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--elev-8);
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 0.018em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
    z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Details / accordion ---------- */

details.program-more { margin-top: 0.25rem; }
details.program-more summary {
    cursor: pointer;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.089em;
    text-transform: uppercase;
    color: var(--md-primary-dark);
    list-style: none;
}
details.program-more summary::-webkit-details-marker { display: none; }
details.program-more summary::after { content: " ▾"; font-size: 0.8em; }
details.program-more[open] summary::after { content: " ▴"; }
details.program-more ul { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--ink-medium); font-size: 0.92rem; }
details.program-more li { margin-bottom: 0.25rem; }

/* ---------- Footer ---------- */

.site-footer {
    margin-top: 3rem;
    background: var(--md-primary-deep);
    color: rgba(255, 255, 255, 0.78);
    padding: 2.5rem 0 2rem;
    font-size: 0.92rem;
    letter-spacing: 0.011em;
}
.site-footer a { color: #FFFFFF; }
.site-footer .footer-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    margin-bottom: 1.5rem;
}
.site-footer h3 {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.089em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.footer-note {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.62);
}
.footer-crisis {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);
    padding: 0.6rem 1rem;
    font-size: 0.86rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .hero { padding: 2.75rem 0; }
    .hero-inner { grid-template-columns: 1fr; }
    .hero .hero-art { max-width: 13rem; order: -1; }

    .nav-toggle { display: block; }
    /* The dropdown is an MD menu SURFACE: white, elevation 8, ink
       text — the opposite palette of the teal app bar it hangs from. */
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--md-surface);
        box-shadow: var(--elev-8);
        display: none;
        padding: 0.5rem 1rem 1rem;
    }
    .site-nav.open { display: block; }
    .site-nav ul { flex-direction: column; gap: 0.15rem; }
    .site-nav a {
        padding: 0.85rem;
        border-bottom: none;
        border-radius: var(--radius);
        color: var(--ink-high);
    }
    .site-nav a:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink-high); }
    .site-nav a[aria-current="page"] {
        background: var(--tonal-primary);
        color: var(--md-primary-deep);
    }
}

@media (max-width: 640px) {
    .section { padding: 2.25rem 0; }
    .filter-bar { padding: 1rem; }
    input[type="search"] { min-width: 100%; width: 100%; }
    .filter-row label.field-label { width: 100%; }
    .brand .brand-name { font-size: 1.05rem; }
}

@media (pointer: coarse) {
    .chip { padding: 0.5rem 1rem; }
    .site-nav a { padding: 0.85rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ---------- Print ---------- */

@media print {
    .site-header, .site-footer, .filter-bar, .banner-demo, .nav-toggle, .hero-ctas { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}