/*
 * TypologyOnline dark-theme correction layer.
 *
 * This file is deliberately loaded last and contains no light-theme rules.
 * Remove its single link from layouts/app.blade.php to restore the previous
 * cascade without touching any page-specific stylesheet.
 */

html[data-theme="dark"] {
    --dark-canvas: #090f18;
    --dark-surface: #111a28;
    --dark-surface-raised: #172233;
    --dark-surface-input: #0d1624;
    --dark-heading: #f8fafc;
    --dark-text: #dbe5f0;
    --dark-muted: #b3c0d0;
    --dark-soft: #8fa0b5;
    --dark-border: #2b3a50;
    --dark-border-strong: #465a74;
    --dark-accent: #8bbcff;
    --dark-accent-soft: #172d4a;
    --dark-action: #2e68b5;
    --dark-action-hover: #3d7bc9;
    --dark-danger: #ffaaa3;
    --dark-danger-soft: #391f25;

    --pv-color-canvas: var(--dark-canvas);
    --pv-color-surface: var(--dark-surface);
    --pv-color-surface-soft: var(--dark-surface-raised);
    --pv-color-primary: var(--dark-heading);
    --pv-color-primary-hover: #ffffff;
    --pv-color-text: var(--dark-text);
    --pv-color-muted: var(--dark-muted);
    --pv-color-soft: var(--dark-soft);
    --pv-color-border: var(--dark-border);
    --pv-color-border-strong: var(--dark-border-strong);
    --pv-color-accent: var(--dark-accent);
    --pv-color-accent-soft: var(--dark-accent-soft);
    --pv-color-action: var(--dark-action);
    --pv-color-action-hover: var(--dark-action-hover);
    --pv-color-danger: var(--dark-danger);
    --pv-color-danger-soft: var(--dark-danger-soft);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .site-main,
html[data-theme="dark"] body.route-home .reference-home,
html[data-theme="dark"] body:not(.route-home) .site-main,
html[data-theme="dark"] .about-reference-page,
html[data-theme="dark"] .account-reference-page,
html[data-theme="dark"] .account-saved-result-page,
html[data-theme="dark"] .auth-reference-page,
html[data-theme="dark"] .contact-reference-page,
html[data-theme="dark"] .donate-reference-page,
html[data-theme="dark"] .glossary-reference-page,
html[data-theme="dark"] .policy-reference-page,
html[data-theme="dark"] .learn-articles-index,
html[data-theme="dark"] .learn-article-page,
html[data-theme="dark"] .test-directory,
html[data-theme="dark"] .personality-intro-editorial,
html[data-theme="dark"] .personality-test-template,
html[data-theme="dark"] .mini-result-report,
html[data-theme="dark"] .not-found-reference-page {
    background: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.personality-test-focus-mode,
html[data-theme="dark"] body.personality-test-focus-mode .site-main,
html[data-theme="dark"] body.personality-test-focus-mode .section,
html[data-theme="dark"] body.personality-test-focus-mode .site-main > .section > .container,
html[data-theme="dark"] body.personality-test-focus-mode .tool-template-shell,
html[data-theme="dark"] body.personality-test-focus-mode .tool-template,
html[data-theme="dark"] body.personality-test-focus-mode .tool-template-card {
    background: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.route-tests-show:has(.mini-result-report),
html[data-theme="dark"] body.route-tests-show:has(.mini-result-report) .site-main,
html[data-theme="dark"] body.route-tests-show:has(.mini-result-report) .site-main > .section,
html[data-theme="dark"] body.route-tests-show:has(.mini-result-report) .site-main > .section > .container,
html[data-theme="dark"] body.route-tests-show:has(.mini-result-report) .tool-template-shell,
html[data-theme="dark"] body.route-tests-show:has(.mini-result-report) .tool-template,
html[data-theme="dark"] body.route-tests-show:has(.mini-result-report) .tool-template-card,
html[data-theme="dark"] body.route-tests-show:has(.mini-result-report) .personality-test-screen[data-screen="results"] {
    background: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.route-tests-show:has(.mini-result-report) :is(
    .mini-result-header h1,
    .mini-result-type-code,
    .mini-result-trait-head h3,
    .mini-result-trait-percentile strong,
    .mini-result-sloan-letter,
    .mini-result-trait-name,
    .mini-result-pct-name
) {
    color: var(--dark-heading) !important;
}

html[data-theme="dark"] body.route-tests-show:has(.mini-result-report) :is(
    .mini-result-header p,
    .mini-result-profile p,
    .mini-result-trait-copy,
    .mini-result-type-tagline,
    .mini-result-explanation
) {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] :is(.mini-result-trait-scale-label, .personality-test-trait-score-scale-label) {
    color: var(--dark-soft) !important;
}

/* Page-family compatibility tokens. */
html[data-theme="dark"] .reference-home {
    --home-bg: var(--dark-canvas);
    --home-surface: var(--dark-surface);
    --home-primary: var(--dark-heading);
    --home-primary-hover: #ffffff;
    --home-text: var(--dark-text);
    --home-muted: var(--dark-muted);
    --home-soft: var(--dark-soft);
    --home-border: var(--dark-border);
    --home-border-strong: var(--dark-border-strong);
    --home-accent: var(--dark-accent);
    --home-accent-soft: var(--dark-accent-soft);
    --home-button-bg: var(--dark-action);
    --home-button-hover: var(--dark-action-hover);
    --home-planned-bg: var(--dark-surface-raised);
    --home-planned-text: var(--dark-muted);
}

html[data-theme="dark"] .test-directory {
    --directory-bg: var(--dark-canvas);
    --directory-surface: var(--dark-surface);
    --directory-primary: var(--dark-heading);
    --directory-primary-hover: #ffffff;
    --directory-text: var(--dark-text);
    --directory-muted: var(--dark-muted);
    --directory-soft: var(--dark-soft);
    --directory-border: var(--dark-border);
    --directory-border-strong: var(--dark-border-strong);
    --directory-accent: var(--dark-accent);
}

html[data-theme="dark"] .learn-articles-index {
    --learn-bg: var(--dark-canvas);
    --learn-surface: var(--dark-surface);
    --learn-primary: var(--dark-heading);
    --learn-primary-hover: #ffffff;
    --learn-text: var(--dark-text);
    --learn-muted: var(--dark-muted);
    --learn-soft: var(--dark-soft);
    --learn-border: var(--dark-border);
    --learn-border-strong: var(--dark-border-strong);
    --learn-accent: var(--dark-accent);
    --learn-accent-light: var(--dark-accent-soft);
}

html[data-theme="dark"] .learn-article-page {
    --color-bg: var(--dark-canvas);
    --color-surface: var(--dark-surface);
    --color-primary: var(--dark-heading);
    --color-primary-hover: #ffffff;
    --color-text-main: var(--dark-text);
    --color-text-muted: var(--dark-muted);
    --color-text-soft: var(--dark-soft);
    --color-border: var(--dark-border);
    --color-border-strong: var(--dark-border-strong);
    --color-accent: var(--dark-accent);
    --color-accent-light: var(--dark-accent-soft);
}

html[data-theme="dark"] .personality-intro-editorial {
    --intro-primary: var(--dark-heading);
    --intro-primary-hover: #ffffff;
    --intro-text: var(--dark-text);
    --intro-muted: var(--dark-muted);
    --intro-soft: var(--dark-soft);
    --intro-border: var(--dark-border);
    --intro-border-strong: var(--dark-border-strong);
    --intro-accent: var(--dark-accent);
    --intro-surface: var(--dark-surface);
}

html[data-theme="dark"] .personality-test {
    --pt-bg: var(--dark-canvas);
    --pt-soft: var(--dark-surface-raised);
    --pt-border: var(--dark-border);
    --pt-text: var(--dark-heading);
    --pt-muted: var(--dark-muted);
    --pt-accent: var(--dark-accent);
    --pt-accent-dark: var(--dark-action-hover);
    --pt-accent-soft: var(--dark-accent-soft);
    --pt-warning-bg: #3a2d14;
}

html[data-theme="dark"] .mini-result-report {
    --result-bg: var(--dark-canvas);
    --result-surface: var(--dark-surface);
    --result-primary: var(--dark-heading);
    --result-text: var(--dark-text);
    --result-muted: var(--dark-muted);
    --result-soft: var(--dark-soft);
    --result-border: var(--dark-border);
    --result-border-strong: var(--dark-border-strong);
    --result-accent: var(--dark-accent);
    --result-accent-subtle: var(--dark-accent-soft);
    --mini-result-bg: var(--dark-canvas);
    --mini-result-surface: var(--dark-surface);
    --mini-result-primary: var(--dark-heading);
    --mini-result-text: var(--dark-text);
    --mini-result-muted: var(--dark-muted);
}

html[data-theme="dark"] .auth-reference-page {
    --auth-bg: var(--dark-canvas);
    --auth-surface: var(--dark-surface);
    --auth-primary: var(--dark-heading);
    --auth-primary-hover: #ffffff;
    --auth-text: var(--dark-text);
    --auth-muted: var(--dark-muted);
    --auth-soft: var(--dark-soft);
    --auth-border: var(--dark-border);
    --auth-border-strong: var(--dark-border-strong);
    --auth-accent: var(--dark-accent);
}

html[data-theme="dark"] .account-reference-page {
    --account-bg: var(--dark-canvas);
    --account-surface: var(--dark-surface);
    --account-surface-soft: var(--dark-surface-raised);
    --account-primary: var(--dark-heading);
    --account-primary-hover: #ffffff;
    --account-text: var(--dark-text);
    --account-muted: var(--dark-muted);
    --account-soft: var(--dark-soft);
    --account-border: var(--dark-border);
    --account-border-strong: var(--dark-border-strong);
    --account-accent: var(--dark-accent);
}

html[data-theme="dark"] :is(.about-reference-page, .contact-reference-page, .donate-reference-page, .glossary-reference-page, .policy-reference-page) {
    --about-bg: var(--dark-canvas);
    --about-surface: var(--dark-surface);
    --about-primary: var(--dark-heading);
    --about-primary-hover: #ffffff;
    --about-text: var(--dark-text);
    --about-muted: var(--dark-muted);
    --about-soft: var(--dark-soft);
    --about-border: var(--dark-border);
    --about-border-strong: var(--dark-border-strong);
    --about-accent: var(--dark-accent);
    --contact-bg: var(--dark-canvas);
    --contact-surface: var(--dark-surface);
    --contact-primary: var(--dark-heading);
    --contact-primary-hover: #ffffff;
    --contact-text: var(--dark-text);
    --contact-muted: var(--dark-muted);
    --contact-soft: var(--dark-soft);
    --contact-border: var(--dark-border);
    --contact-border-strong: var(--dark-border-strong);
    --contact-accent: var(--dark-accent);
    --donate-surface: var(--dark-surface);
    --donate-primary: var(--dark-heading);
    --donate-primary-hover: #ffffff;
    --donate-text: var(--dark-text);
    --donate-muted: var(--dark-muted);
    --donate-soft: var(--dark-soft);
    --donate-border: var(--dark-border);
    --donate-accent: var(--dark-accent);
    --glossary-bg: var(--dark-canvas);
    --glossary-surface: var(--dark-surface);
    --glossary-primary: var(--dark-heading);
    --glossary-text: var(--dark-text);
    --glossary-muted: var(--dark-muted);
    --glossary-border: var(--dark-border);
    --glossary-border-strong: var(--dark-border-strong);
    --glossary-accent: var(--dark-accent);
    --policy-bg: var(--dark-canvas);
    --policy-surface: var(--dark-surface);
    --policy-primary: var(--dark-heading);
    --policy-primary-hover: #ffffff;
    --policy-text: var(--dark-text);
    --policy-muted: var(--dark-muted);
    --policy-soft: var(--dark-soft);
    --policy-border: var(--dark-border);
    --policy-accent: var(--dark-accent);
}

/* Readable typography: defeat legacy dark-on-dark declarations. */
html[data-theme="dark"] .site-main :is(h1, h2, h3, h4, h5, h6, strong, summary, label, legend, th),
html[data-theme="dark"] .site-main :is([class*="-title"], [class*="-heading"], [class*="-name"], [class*="-value"]) {
    color: var(--dark-heading) !important;
}

html[data-theme="dark"] .site-main :is(p, li, dd, dt, td),
html[data-theme="dark"] .site-main :is([class*="-text"], [class*="-copy"], [class*="-description"], [class*="-excerpt"], [class*="-tagline"]) {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .site-main :is(small, [class*="-muted"], [class*="-soft"], [class*="-meta"], [class*="-subtitle"], [class*="-help"], [class*="-date"], [class*="-labels"]) {
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] .site-main a:not([class*="button"]):not([class*="btn"]),
html[data-theme="dark"] .site-main [class*="-eyebrow"],
html[data-theme="dark"] .site-main [class*="-section-label"] {
    color: var(--dark-accent) !important;
}

html[data-theme="dark"] body.route-learn-index .site-main .learn-index-filter.is-active,
html[data-theme="dark"] body.route-learn-index .site-main .learn-index-filter.is-active .learn-index-filter-count {
    color: #ffffff !important;
}

html[data-theme="dark"] .skip-to-content {
    border-color: var(--dark-accent) !important;
    background: var(--dark-action) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .test-directory-card-action a {
    border-color: var(--dark-action) !important;
    background: var(--dark-action) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] body .site-main .test-directory .test-directory-card-action a {
    color: #ffffff !important;
}

html[data-theme="dark"] .test-directory-card-action a span {
    color: #ffffff !important;
}

html[data-theme="dark"] body .site-main .test-directory .test-directory-filters a {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] body .site-main .test-directory .test-directory-filters a:hover,
html[data-theme="dark"] body .site-main .test-directory .test-directory-filters a.is-active {
    color: var(--dark-primary) !important;
}

html[data-theme="dark"] body .site-main .test-directory .test-directory-filters a.is-active {
    border-bottom-color: var(--dark-accent) !important;
}

html[data-theme="dark"] body .site-main .test-directory .test-directory-filters span {
    background: var(--dark-border) !important;
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] body .site-main .test-directory .test-directory-filters a.is-active span {
    background: var(--dark-accent-soft) !important;
    color: var(--dark-accent) !important;
}

html[data-theme="dark"] .reference-home-badge-available {
    background: var(--dark-accent-soft) !important;
    color: var(--dark-accent) !important;
}

html[data-theme="dark"] :is(.reference-home-badge-recommended, .reference-home-badge-research) {
    background: var(--dark-accent-soft) !important;
    color: var(--dark-accent) !important;
}

html[data-theme="dark"] .learn-planned-badge {
    border-color: var(--dark-border) !important;
    background: var(--dark-surface-raised) !important;
    color: var(--dark-muted) !important;
}

/* Canonical surfaces used across directories, articles and static pages. */
html[data-theme="dark"] :is(
    .reference-home-assessment-card,
    .reference-home-system-card,
    .reference-home-featured-article,
    .reference-home-sidebar-article,
    .test-directory-card,
    .learn-featured-lead,
    .learn-featured-side-article,
    .learn-card,
    .learn-coming-soon,
    .toc-card,
    .sidebar-related,
    .related-bottom-card,
    .research-card,
    .stat-tile,
    .spectrum-item,
    .auth-reference-card,
    .account-reference-card,
    .account-result-card,
    .glossary-reference-card,
    .about-intro-card,
    .about-principles-card,
    .about-content-card,
    .about-explore-card,
    .contact-method-card,
    .contact-note-card,
    .contact-policy-card,
    .donate-purpose-card,
    .donate-action-card,
    .donate-note-card,
    .policy-summary-card,
    .policy-content-card,
    .policy-note-card,
    .policy-contact-card,
    .not-found-reference-links > a
) {
    border-color: var(--dark-border) !important;
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

/* These pages previously used higher-specificity !important light surfaces. */
html[data-theme="dark"] body .site-main > .glossary-reference-page,
html[data-theme="dark"] body .site-main .glossary-reference-header,
html[data-theme="dark"] body .site-main .glossary-reference-section {
    background: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body .site-main .glossary-reference-card {
    border-color: var(--dark-border) !important;
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] :is(
    .reference-home-system-glyph,
    .reference-home-article-image,
    .learn-featured-visual,
    .learn-card-visual,
    .related-bottom-visual,
    .contact-method-icon,
    .donate-purpose-icon,
    .policy-summary-icon,
    .about-intro-mark
) {
    border-color: var(--dark-border) !important;
    background-color: var(--dark-surface-raised) !important;
    color: var(--dark-accent) !important;
}

html[data-theme="dark"] :is(.reference-home-assessment-card, .reference-home-system-card, .test-directory-card, .learn-card, .glossary-reference-card):hover {
    border-color: var(--dark-border-strong) !important;
    background-color: var(--dark-surface-raised) !important;
}

html[data-theme="dark"] .pv-interactive-card {
    border-color: var(--pv-color-border) !important;
    background-color: var(--pv-color-surface) !important;
    box-shadow: var(--pv-shadow-sm) !important;
    transform: none !important;
}

html[data-theme="dark"] .pv-interactive-card:is(:hover, :focus-visible, :focus-within) {
    border-color: var(--pv-color-border-strong) !important;
    background-color: var(--pv-color-surface) !important;
    box-shadow: var(--pv-shadow-lg) !important;
    transform: none !important;
}

html[data-theme="dark"] .pv-interactive-card.pv-interactive-card--inactive,
html[data-theme="dark"] .pv-interactive-card.pv-interactive-card--inactive:is(:hover, :focus-visible, :focus-within) {
    border-color: var(--pv-color-border) !important;
    background-color: var(--pv-color-surface) !important;
    box-shadow: var(--pv-shadow-sm) !important;
    transform: none !important;
}

html[data-theme="dark"] .pv-card.pv-card--static,
html[data-theme="dark"] .pv-card.pv-card--static:hover {
    border-color: var(--pv-color-border) !important;
    background-color: var(--pv-color-surface) !important;
    box-shadow: var(--pv-shadow-sm) !important;
    transform: none !important;
}

/* Search, filters, forms and secondary controls. */
html[data-theme="dark"] .site-main :is(input, textarea, select),
html[data-theme="dark"] :is(.learn-index-search, .test-directory-search) {
    border-color: var(--dark-border-strong) !important;
    background: var(--dark-surface-input) !important;
    color: var(--dark-text) !important;
    caret-color: var(--dark-accent);
}

html[data-theme="dark"] .site-main :is(input, textarea)::placeholder {
    color: var(--dark-soft) !important;
    opacity: 1;
}

html[data-theme="dark"] .site-main :is(input, textarea, select):focus {
    border-color: var(--dark-accent) !important;
    outline-color: var(--dark-accent) !important;
    box-shadow: 0 0 0 3px rgba(139, 188, 255, 0.18) !important;
}

html[data-theme="dark"] :is(
    .reference-home-button-secondary,
    .personality-intro-secondary,
    .personality-test-btn:not(.personality-test-btn-primary),
    .account-reference-btn-ghost,
    .account-saved-result-button.is-secondary,
    .about-reference-button.is-secondary,
    .contact-reference-button.is-secondary,
    .not-found-reference-button-secondary
) {
    border-color: var(--dark-border-strong) !important;
    background: var(--dark-surface) !important;
    color: var(--dark-heading) !important;
}

html[data-theme="dark"] :is(
    .reference-home-button-primary,
    .personality-test-btn-primary,
    .auth-reference-submit,
    .account-reference-btn-primary,
    .about-reference-button:not(.is-secondary),
    .contact-reference-button:not(.is-secondary),
    .policy-reference-button,
    .not-found-reference-button-primary
) {
    border-color: var(--dark-action) !important;
    background: var(--dark-action) !important;
    color: #ffffff !important;
}

/* Test introduction and active question flow. */
html[data-theme="dark"] body.route-tests-show:has(.personality-intro-editorial),
html[data-theme="dark"] body.route-tests-show:has(.personality-intro-editorial) .site-main,
html[data-theme="dark"] body.route-tests-show:has(.personality-intro-editorial) .site-main > .section,
html[data-theme="dark"] body.route-tests-show:has(.personality-intro-editorial) .site-main > .section > .container,
html[data-theme="dark"] body.route-tests-show:has(.personality-intro-editorial) .tool-template-shell,
html[data-theme="dark"] body.route-tests-show:has(.personality-intro-editorial) .tool-template,
html[data-theme="dark"] body.route-tests-show:has(.personality-intro-editorial) .tool-template-card,
html[data-theme="dark"] body.route-tests-show:not(.personality-test-focus-mode) .personality-test-screen[data-screen="intro"]:has(.personality-intro-editorial),
html[data-theme="dark"] body.route-tests-show:not(.personality-test-focus-mode) .personality-intro-editorial {
    background: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.route-tests-show:not(.personality-test-focus-mode) .personality-intro-editorial {
    --intro-primary: var(--dark-heading) !important;
    --intro-primary-hover: #ffffff !important;
    --intro-text: var(--dark-text) !important;
    --intro-muted: var(--dark-muted) !important;
    --intro-soft: var(--dark-soft) !important;
    --intro-border: var(--dark-border) !important;
    --intro-border-strong: var(--dark-border-strong) !important;
    --intro-accent: var(--dark-accent) !important;
    --intro-surface: var(--dark-surface) !important;
}

html[data-theme="dark"] body.route-tests-show :is(
    .personality-intro-trait-card,
    .personality-intro-faq details,
    .personality-intro-notice,
    .personality-test-result-preview,
    .personality-test-choice
) {
    border-color: var(--dark-border) !important;
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.route-tests-show .personality-intro-trait-card:hover,
html[data-theme="dark"] body.route-tests-show .personality-test-choice:hover {
    border-color: var(--dark-accent) !important;
    background: var(--dark-surface-raised) !important;
}

html[data-theme="dark"] body.route-tests-show .personality-intro-trait-letter {
    border-color: var(--dark-border-strong) !important;
    background: var(--dark-surface-raised) !important;
    color: var(--dark-heading) !important;
}

html[data-theme="dark"] body.route-tests-show :is(.personality-intro-meta span, .personality-intro-spectrum-labels span) {
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] body.route-tests-show .personality-intro-section-head > span {
    color: var(--dark-accent) !important;
}

html[data-theme="dark"] body.route-tests-show .personality-test-choice.is-selected,
html[data-theme="dark"] body.route-tests-show .personality-test-choice[aria-checked="true"] {
    border-color: var(--dark-accent) !important;
    background: var(--dark-accent-soft) !important;
}

/*
 * The question flow is generated after the page loads. Keep its outer canvas
 * visually continuous and style the generated label span explicitly so the
 * legacy light-theme declaration cannot leave dark text on a dark choice row.
 */
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode,
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .site-main,
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .section,
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .site-main > .section > .container,
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .tool-template-shell,
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .tool-template,
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .tool-template-card,
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test,
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test-screen[data-screen="test"],
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test-question-card {
    background: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test-question-card {
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test-question-card h2,
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test-choice-label,
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test-question-count,
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test-btn:not(:disabled) {
    color: var(--dark-heading) !important;
}

html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test-choice {
    border-color: var(--dark-border) !important;
    background: var(--dark-surface) !important;
    color: var(--dark-heading) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test-choice:hover {
    border-color: var(--dark-border-strong) !important;
    background: var(--dark-surface-raised) !important;
}

html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test-choice.is-selected,
html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test-choice[aria-checked="true"] {
    border-color: var(--dark-accent) !important;
    background: var(--dark-accent-soft) !important;
}

html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test-choice input {
    accent-color: var(--dark-accent);
    color-scheme: dark;
}

html[data-theme="dark"] body.route-tests-show.personality-test-focus-mode .personality-test-btn:disabled {
    border-color: var(--dark-border) !important;
    background: var(--dark-surface-input) !important;
    color: var(--dark-soft) !important;
    opacity: 1;
}

html[data-theme="dark"] :is(.personality-intro-spectrum, .personality-test-progress-track, .mini-result-pct-track, .mini-result-trait-track) {
    background-color: var(--dark-surface-raised) !important;
}

/* Results: the report column shares the canvas; only contained panels are raised. */
html[data-theme="dark"] :is(
    .account-saved-result-page,
    .mini-result-report,
    .mini-result-header
) {
    border-color: var(--dark-border) !important;
    background-color: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] :is(
    .mini-result-type-card,
    .mini-result-profile,
    .mini-result-table-wrap,
    .mini-result-pct-grid,
    .mini-result-pct-row,
    .mini-result-trait-card
) {
    border-color: var(--dark-border) !important;
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .mini-result-table-wrap :is(table, thead, tbody, tr, th, td) {
    border-color: var(--dark-border) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .mini-result-table-wrap th {
    background-color: var(--dark-surface-raised) !important;
}

html[data-theme="dark"] :is(.mini-result-plus-value, .mini-result-primary, .mini-result-sloan-letter) {
    border-color: var(--dark-border-strong) !important;
    background: var(--dark-accent-soft) !important;
    color: var(--dark-accent) !important;
}

/* Article-specific structures. */
html[data-theme="dark"] :is(
    .article-prose blockquote,
    .pull-quote,
    .article-note,
    .research-card,
    .stat-tile,
    .spectrum-item,
    .learn-article-table-wrap,
    .article-related-bottom
) {
    border-color: var(--dark-border) !important;
    background: var(--dark-surface) !important;
}

html[data-theme="dark"] .learn-article-table :is(th, td) {
    border-color: var(--dark-border) !important;
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .learn-article-table th {
    background: var(--dark-surface-raised) !important;
    color: var(--dark-heading) !important;
}

html[data-theme="dark"] .toc-item a.is-active {
    background: var(--dark-accent-soft) !important;
    color: var(--dark-accent) !important;
}

html[data-theme="dark"] .article-assessment-card {
    border: 1px solid var(--dark-border) !important;
    background: var(--dark-surface-raised) !important;
    color: var(--dark-text) !important;
}

/* Shared popovers and chrome. */
html[data-theme="dark"] :is(.site-share-main, .site-share-targets, .site-share-target, .back-to-top) {
    border-color: var(--dark-border-strong) !important;
    background: var(--dark-surface) !important;
    color: var(--dark-heading) !important;
}

html[data-theme="dark"] .site-share-target:hover {
    background: var(--dark-surface-raised) !important;
    color: var(--dark-accent) !important;
}

html[data-theme="dark"] .learn-article-donation-button {
    border-color: #c72b4a !important;
    background: #c72b4a !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-footer {
    border-color: var(--dark-border) !important;
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .site-header :is(.brand-link, .nav-link, .mobile-user-link, .menu-toggle),
html[data-theme="dark"] .site-footer :is(.site-footer-inner, a) {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .site-header .dropdown-menu {
    border-color: var(--dark-border) !important;
    background: var(--dark-surface) !important;
}

@media (max-width: 991px) {
    html[data-theme="dark"] .site-header .nav-container {
        border-color: var(--dark-border) !important;
        background: var(--dark-surface) !important;
    }
}

html[data-theme="dark"] .site-header .dropdown-menu a {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .site-header .dropdown-menu a:hover,
html[data-theme="dark"] .site-header .dropdown-menu a:focus-visible {
    background: var(--dark-surface-raised) !important;
    color: var(--dark-accent) !important;
}

/* Status colours remain semantic and readable. */
html[data-theme="dark"] :is(.account-reference-alert-error, .auth-reference-alert.is-error, .personality-test-notice-danger) {
    border-color: #7b3b43 !important;
    background: var(--dark-danger-soft) !important;
    color: #ffc5c0 !important;
}

html[data-theme="dark"] :is(.account-reference-alert-success, .auth-reference-alert.is-success) {
    border-color: #315f48 !important;
    background: #142b21 !important;
    color: #a7e7c2 !important;
}

/* Optional comparison details use the same canonical result-card treatment. */
html[data-theme="dark"] .personality-test-demographics {
    border-color: var(--dark-border) !important;
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    box-shadow: var(--pv-shadow-sm) !important;
}

html[data-theme="dark"] .personality-test-demographics-header,
html[data-theme="dark"] .personality-test-demographics-footer {
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] .personality-test-demographics h3,
html[data-theme="dark"] .personality-test-demographic-field span {
    color: var(--dark-heading) !important;
}

html[data-theme="dark"] .personality-test-demographics-header p,
html[data-theme="dark"] .personality-test-demographics-status {
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] .personality-test-demographics-kicker {
    color: var(--dark-accent) !important;
}

html[data-theme="dark"] .personality-test-demographic-field select {
    border-color: var(--dark-border-strong) !important;
    background: var(--dark-surface-input) !important;
    color: var(--dark-text) !important;
    color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="dark"] *,
    html[data-theme="dark"] *::before,
    html[data-theme="dark"] *::after {
        transition-duration: 0.01ms !important;
    }
}