/* Website-only theme. The quiz retains its independent theme preference. */
.ds-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 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; }
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #14171c; --ink: #edf0f4; --muted: #b8c0cc; --line: #363e4a;
    --teal: #83d6b3; --teal-dark: #9ee3c5; --teal-light: #27313a;
    --ds-surface: #1d222b; --ds-raised: #272e39;
    --shadow-sm: 0 4px 12px rgb(0 0 0 / .16);
    --shadow-md: 0 12px 32px rgb(0 0 0 / .25);
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .site-header { background: rgb(20 23 28 / .97); border-color: var(--line); }
html[data-theme="dark"] :is(.dropdown-box, .dropdown-box::before, .lang-dropdown-menu) {
    background: var(--ds-raised); border-color: var(--line);
}
html[data-theme="dark"] :is(.metrics-container, .program-modern-card, .list-item-ui, dialog) {
    background: var(--ds-surface); color: var(--ink);
}
html[data-theme="dark"] :is(.impact-panel-modern, .visual-concept-pod) {
    background: var(--ds-raised); border-color: var(--line);
}
html[data-theme="dark"] :is(.header-action.primary, .button-primary) { background: #176342; color: #fff; }
html[data-theme="dark"] :is(.header-action.primary, .button-primary):hover { background: #1d7751; }
html[data-theme="dark"] .button-white { background: var(--ds-raised); color: var(--ink); }
html[data-theme="dark"] .button-secondary-outlined:hover { background: var(--ds-raised); }
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) {
    background-color: var(--ds-surface); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] ::placeholder { color: #a0aaba; opacity: 1; }
html[data-theme="dark"] .brand-title { color: #8ed6ae; }
html[data-theme="dark"] .brand-mark img { background: transparent; border-radius: 0; padding: 0; }
html[data-theme="dark"] .brand-mark { color: #8ed6ae; }
html[data-theme="dark"] .prose {
    --tw-prose-body: #cbd1db; --tw-prose-headings: #edf0f4; --tw-prose-lead: #b8c0cc;
    --tw-prose-links: #83d6b3; --tw-prose-bold: #edf0f4; --tw-prose-counters: #b8c0cc;
    --tw-prose-bullets: #929dad; --tw-prose-hr: #363e4a; --tw-prose-quotes: #edf0f4;
    --tw-prose-quote-borders: #505d70; --tw-prose-captions: #b8c0cc; --tw-prose-code: #edf0f4;
    --tw-prose-pre-code: #edf0f4; --tw-prose-pre-bg: #1d222b;
    --tw-prose-th-borders: #505d70; --tw-prose-td-borders: #363e4a;
}
html[data-theme="dark"] .bg-blue-100 { background-color: var(--ds-raised); }
html[data-theme="dark"] .bg-blue-50 { background-color: var(--ds-raised); }
html[data-theme="dark"] .bg-gray-100 { background-color: var(--ds-raised); }
html[data-theme="dark"] .bg-gray-200 { background-color: var(--ds-raised); }
html[data-theme="dark"] .bg-gray-50 { background-color: var(--bg); }
html[data-theme="dark"] .bg-teal-100 { background-color: var(--ds-raised); }
html[data-theme="dark"] .bg-teal-50 { background-color: var(--ds-raised); }
html[data-theme="dark"] .bg-white { background-color: var(--ds-surface); }
html[data-theme="dark"] .border-gray-100 { border-color: var(--line); }
html[data-theme="dark"] .border-gray-200 { border-color: var(--line); }
html[data-theme="dark"] .border-gray-300 { border-color: var(--line); }
html[data-theme="dark"] .border-teal-100 { border-color: var(--line); }
html[data-theme="dark"] .group\/item:hover .group-hover\/item\:text-teal-700 { color: var(--teal); }
html[data-theme="dark"] .group:hover .group-hover\:text-teal-600 { color: var(--teal); }
html[data-theme="dark"] .group:hover .group-hover\:text-teal-700 { color: var(--teal); }
html[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: var(--ds-raised); }
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--ds-raised); }
html[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--ds-raised); }
html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--bg); }
html[data-theme="dark"] .hover\:bg-sky-50:hover { background-color: var(--ds-raised); }
html[data-theme="dark"] .hover\:bg-teal-50:hover { background-color: var(--ds-raised); }
html[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--ds-surface); }
html[data-theme="dark"] .hover\:border-teal-200:hover { border-color: var(--line); }
html[data-theme="dark"] .hover\:text-black:hover { color: var(--ink); }
html[data-theme="dark"] .hover\:text-blue-700:hover { color: var(--teal); }
html[data-theme="dark"] .hover\:text-blue-800:hover { color: var(--teal); }
html[data-theme="dark"] .hover\:text-gray-700:hover { color: var(--muted); }
html[data-theme="dark"] .hover\:text-gray-900:hover { color: var(--ink); }
html[data-theme="dark"] .hover\:text-sky-600:hover { color: var(--teal); }
html[data-theme="dark"] .hover\:text-teal-700:hover { color: var(--teal); }
html[data-theme="dark"] .hover\:text-teal-800:hover { color: var(--teal); }
html[data-theme="dark"] .text-blue-800 { color: var(--teal); }
html[data-theme="dark"] .text-gray-500 { color: var(--muted); }
html[data-theme="dark"] .text-gray-600 { color: var(--muted); }
html[data-theme="dark"] .text-gray-700 { color: var(--muted); }
html[data-theme="dark"] .text-gray-900 { color: var(--ink); }
html[data-theme="dark"] .text-teal-600 { color: var(--teal); }
html[data-theme="dark"] .text-teal-700 { color: var(--teal); }
html[data-theme="dark"] .text-teal-800 { color: var(--teal); }
html[data-theme="dark"] .text-teal-900 { color: var(--teal); }

@media (min-width: 1280px) {
    html[data-theme="dark"] .header-navigation-wrapper { background: transparent; }
}
@media print { .ds-theme-toggle { display: none; } }

/* Use the transparent white logo only when dark mode is active. */
.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; }

/* Bring the community invitation and shared footer into the charcoal palette. */
html[data-theme="dark"] .cta-banner-card {
    background: var(--ds-surface);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: 0 12px 32px rgb(0 0 0 / .18);
}
html[data-theme="dark"] .cta-banner-card h2 { color: var(--ink); }
html[data-theme="dark"] .cta-banner-card p { color: var(--muted); }
html[data-theme="dark"] .cta-banner-card .button-white {
    background: #176342;
    color: #fff;
    border: 1px solid #287a56;
}
html[data-theme="dark"] .cta-banner-card .button-white:hover { background: #1d7751; }
html[data-theme="dark"] body > footer.ds-footer {
    background: #101318;
    color: var(--muted);
    border-top: 1px solid var(--line);
}
html[data-theme="dark"] body > footer.ds-footer .border-gray-800 { border-color: var(--line); }
html[data-theme="dark"] body > footer.ds-footer .text-gray-400 { color: var(--muted); }
html[data-theme="dark"] body > footer.ds-footer a:hover { color: #edf0f4; }

/* Fine, low-contrast texture without an image download. */
html[data-theme="dark"] body > footer.ds-footer {
    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;
}

/* Plain white header branding in dark mode. */
html[data-theme="dark"] .site-header .brand-title {
    color: #ffffff;
    text-shadow: none;
    -webkit-text-stroke: 0;
}
html[data-theme="dark"] .site-header .brand-mark .ds-logo-dark {
    filter: none;
}

/* Target the pointer directly: pseudo-elements inside :is() are not reliable. */
html[data-theme="dark"] .dropdown-box,
html[data-theme="dark"] .dropdown-box::before {
    background: var(--ds-raised);
    border-color: var(--line);
}