/*
 * TypologyOnline canonical design system
 *
 * This deliberately lives in one additive file so the rollout is reversible:
 * remove its link from layouts/app.blade.php to restore the previous cascade.
 * The site header is intentionally outside the selectors in this file.
 */

:root {
    /* Typography */
    --pv-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --pv-font-serif: Lora, Georgia, serif;
    --pv-font-mono: "JetBrains Mono", "Fira Code", "Source Code Pro", Consolas, monospace;

    /* Colour */
    --pv-color-canvas: #fcfcfd;
    --pv-color-surface: #ffffff;
    --pv-color-surface-soft: #f7f9fb;
    --pv-color-primary: #0f2537;
    --pv-color-primary-hover: #1a3a54;
    --pv-color-text: #1e293b;
    --pv-color-muted: #64748b;
    --pv-color-soft: #94a3b8;
    --pv-color-border: #e7ebf0;
    --pv-color-border-strong: #cbd5e1;
    --pv-color-accent: #2e68b5;
    --pv-color-accent-soft: #ebf2fc;
    --pv-color-action: #0f2537;
    --pv-color-action-hover: #1a3a54;
    --pv-color-on-action: #ffffff;
    --pv-color-danger: #b42318;
    --pv-color-danger-soft: #fef3f2;

    /* Shape and depth */
    --pv-radius-control: 9px;
    --pv-radius-card: 14px;
    --pv-radius-round: 999px;
    --pv-shadow-sm: 0 1px 2px rgba(15, 37, 55, 0.04);
    --pv-shadow-md: 0 4px 16px -4px rgba(15, 37, 55, 0.08);
    --pv-shadow-lg: 0 12px 32px -8px rgba(15, 37, 55, 0.12);

    /* Layout and spacing */
    --pv-width-narrow: 420px;
    --pv-width-reading: 740px;
    --pv-width-standard: 848px;
    --pv-width-directory: 960px;
    --pv-width-wide: 1180px;
    --pv-width-content: var(--pv-width-standard);
    --pv-width-form: var(--pv-width-narrow);
    --pv-gutter: 24px;
    --pv-section-space: 56px;
    --pv-transition: 160ms ease;

    /* Compatibility aliases for older shared components. */
    --bg-body: var(--pv-color-canvas);
    --bg-body-deep: var(--pv-color-canvas);
    --surface: var(--pv-color-surface);
    --surface-strong: var(--pv-color-surface);
    --surface-soft: var(--pv-color-surface-soft);
    --text-heading: var(--pv-color-primary);
    --text-body: var(--pv-color-text);
    --text-muted: var(--pv-color-muted);
    --text-soft: var(--pv-color-soft);
    --accent: var(--pv-color-accent);
    --accent-deep: var(--pv-color-primary-hover);
    --accent-soft: var(--pv-color-accent-soft);
    --accent-rgb: 46, 104, 181;
    --border: var(--pv-color-border);
    --border-strong: var(--pv-color-border-strong);
    --shadow-sm: var(--pv-shadow-sm);
    --shadow-md: var(--pv-shadow-md);
    --radius-sm: var(--pv-radius-control);
    --radius-md: var(--pv-radius-card);
    --radius-lg: var(--pv-radius-card);
    --container: var(--pv-width-wide);
    --font-sans: var(--pv-font-sans);
    --font-heading: var(--pv-font-serif);
    --font-mono: var(--pv-font-mono);
}

html[data-theme="dark"] {
    --pv-color-canvas: #0b111b;
    --pv-color-surface: #111827;
    --pv-color-surface-soft: #172033;
    --pv-color-primary: #f8fafc;
    --pv-color-primary-hover: #ffffff;
    --pv-color-text: #e2e8f0;
    --pv-color-muted: #b2bfd0;
    --pv-color-soft: #8796ab;
    --pv-color-border: #263449;
    --pv-color-border-strong: #3a4b63;
    --pv-color-accent: #82b3f4;
    --pv-color-accent-soft: #172b47;
    --pv-color-action: #2e68b5;
    --pv-color-action-hover: #3a78c7;
    --pv-color-on-action: #ffffff;
    --pv-color-danger: #fda29b;
    --pv-color-danger-soft: #351b20;
    --pv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
    --pv-shadow-md: 0 4px 16px -4px rgba(0, 0, 0, 0.32);
    --pv-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.42);
    --accent-rgb: 130, 179, 244;
}

/* Canonical canvas. Header descendants are intentionally untouched. */
body,
.site-main {
    color: var(--pv-color-text);
    font-family: var(--pv-font-sans);
}

body.route-home,
html[data-theme="dark"] body.route-home,
body.route-home .site-main,
html[data-theme="dark"] body.route-home .site-main,
body.route-home .reference-home,
html[data-theme="dark"] body.route-home .reference-home,
body:not(.route-home),
html[data-theme="dark"] body:not(.route-home),
body:not(.route-home) .site-main,
html[data-theme="dark"] body:not(.route-home) .site-main {
    background-color: var(--pv-color-canvas) !important;
}

/* Override the retired white-canvas compatibility rules without editing them. */
body:not(.route-home) .site-main > .about-reference-page,
body:not(.route-home) .site-main > .account-reference-page,
body:not(.route-home) .site-main > .account-saved-result-page,
body:not(.route-home) .site-main > .auth-reference-page,
body:not(.route-home) .site-main > .contact-reference-page,
body:not(.route-home) .site-main > .donate-reference-page,
body:not(.route-home) .site-main > .glossary-reference-page,
body:not(.route-home) .site-main > .policy-reference-page {
    background-color: var(--pv-color-canvas) !important;
}

/* The footer shares the header surface in both themes. */
.site-footer,
body.route-home .site-footer.docs-home-footer,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] body.route-home .site-footer.docs-home-footer,
html[data-theme="dark"] body:not(.route-home) .site-footer {
    border-top-color: var(--pv-color-border) !important;
    background: var(--pv-color-surface) !important;
    color: var(--pv-color-muted) !important;
    backdrop-filter: none;
}

.site-footer .site-footer-inner,
html[data-theme="dark"] .site-footer .site-footer-inner,
.site-footer .docs-footer-links a,
html[data-theme="dark"] .site-footer .docs-footer-links a {
    color: var(--pv-color-muted) !important;
}

.site-footer .docs-footer-links a:hover,
.site-footer .docs-footer-links a:focus-visible,
html[data-theme="dark"] .site-footer .docs-footer-links a:hover,
html[data-theme="dark"] .site-footer .docs-footer-links a:focus-visible {
    color: var(--pv-color-primary) !important;
}

/* Map established page families to the same source-of-truth values. */
.reference-home {
    --home-bg: var(--pv-color-canvas);
    --home-surface: var(--pv-color-surface);
    --home-primary: var(--pv-color-primary);
    --home-primary-hover: var(--pv-color-primary-hover);
    --home-text: var(--pv-color-text);
    --home-muted: var(--pv-color-muted);
    --home-soft: var(--pv-color-soft);
    --home-border: var(--pv-color-border);
    --home-border-strong: var(--pv-color-border-strong);
    --home-accent: var(--pv-color-accent);
    --home-accent-soft: var(--pv-color-accent-soft);
    --home-button-bg: var(--pv-color-action);
    --home-button-hover: var(--pv-color-action-hover);
    --home-shadow-sm: var(--pv-shadow-sm);
    --home-shadow-md: var(--pv-shadow-md);
    --home-shadow-lg: var(--pv-shadow-lg);
}

/* Keep the homepage aliases attached to the canonical palette in dark mode. */
html[data-theme="dark"] body.route-home .reference-home {
    --home-bg: var(--pv-color-canvas);
    --home-surface: var(--pv-color-surface);
    --home-primary: var(--pv-color-primary);
    --home-primary-hover: var(--pv-color-primary-hover);
    --home-text: var(--pv-color-text);
    --home-muted: var(--pv-color-muted);
    --home-soft: var(--pv-color-soft);
    --home-border: var(--pv-color-border);
    --home-border-strong: var(--pv-color-border-strong);
    --home-accent: var(--pv-color-accent);
    --home-accent-soft: var(--pv-color-accent-soft);
    --home-button-bg: var(--pv-color-action);
    --home-button-hover: var(--pv-color-action-hover);
    --home-shadow-sm: var(--pv-shadow-sm);
    --home-shadow-md: var(--pv-shadow-md);
    --home-shadow-lg: var(--pv-shadow-lg);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    color-scheme: dark;
}

.learn-article-page {
    --font-sans: var(--pv-font-sans);
    --font-serif: var(--pv-font-serif);
    --color-bg: var(--pv-color-canvas);
    --color-surface: var(--pv-color-surface);
    --color-primary: var(--pv-color-primary);
    --color-primary-hover: var(--pv-color-primary-hover);
    --color-text-main: var(--pv-color-text);
    --color-text-muted: var(--pv-color-muted);
    --color-text-soft: var(--pv-color-soft);
    --color-border: var(--pv-color-border);
    --color-border-strong: var(--pv-color-border-strong);
    --color-accent: var(--pv-color-accent);
    --color-accent-light: var(--pv-color-accent-soft);
    --shadow-sm: var(--pv-shadow-sm);
    --shadow-md: var(--pv-shadow-md);
    --shadow-lg: var(--pv-shadow-lg);
    --radius: var(--pv-radius-card);
}

.auth-reference-page {
    --auth-bg: var(--pv-color-canvas);
    --auth-surface: var(--pv-color-surface);
    --auth-primary: var(--pv-color-primary);
    --auth-primary-hover: var(--pv-color-primary-hover);
    --auth-text: var(--pv-color-text);
    --auth-muted: var(--pv-color-muted);
    --auth-soft: var(--pv-color-soft);
    --auth-border: var(--pv-color-border);
    --auth-border-strong: var(--pv-color-border-strong);
    --auth-accent: var(--pv-color-accent);
}

.about-reference-page {
    --about-bg: var(--pv-color-canvas);
    --about-surface: var(--pv-color-surface);
    --about-primary: var(--pv-color-primary);
    --about-primary-hover: var(--pv-color-primary-hover);
    --about-text: var(--pv-color-text);
    --about-muted: var(--pv-color-muted);
    --about-soft: var(--pv-color-soft);
    --about-border: var(--pv-color-border);
    --about-border-strong: var(--pv-color-border-strong);
    --about-accent: var(--pv-color-accent);
}

.account-reference-page {
    --account-bg: var(--pv-color-canvas);
    --account-surface: var(--pv-color-surface);
    --account-primary: var(--pv-color-primary);
    --account-primary-hover: var(--pv-color-primary-hover);
    --account-text: var(--pv-color-text);
    --account-muted: var(--pv-color-muted);
    --account-soft: var(--pv-color-soft);
    --account-border: var(--pv-color-border);
    --account-border-strong: var(--pv-color-border-strong);
    --account-accent: var(--pv-color-accent);
    --account-radius: var(--pv-radius-card);
}

.contact-reference-page {
    --contact-bg: var(--pv-color-canvas);
    --contact-surface: var(--pv-color-surface);
    --contact-primary: var(--pv-color-primary);
    --contact-primary-hover: var(--pv-color-primary-hover);
    --contact-text: var(--pv-color-text);
    --contact-muted: var(--pv-color-muted);
    --contact-soft: var(--pv-color-soft);
    --contact-border: var(--pv-color-border);
    --contact-border-strong: var(--pv-color-border-strong);
    --contact-accent: var(--pv-color-accent);
}

.donate-reference-page {
    --donate-surface: var(--pv-color-surface);
    --donate-primary: var(--pv-color-primary);
    --donate-primary-hover: var(--pv-color-primary-hover);
    --donate-text: var(--pv-color-text);
    --donate-muted: var(--pv-color-muted);
    --donate-soft: var(--pv-color-soft);
    --donate-border: var(--pv-color-border);
    --donate-accent: var(--pv-color-accent);
}

.glossary-reference-page {
    --glossary-bg: var(--pv-color-canvas);
    --glossary-surface: var(--pv-color-surface);
    --glossary-primary: var(--pv-color-primary);
    --glossary-text: var(--pv-color-text);
    --glossary-muted: var(--pv-color-muted);
    --glossary-border: var(--pv-color-border);
    --glossary-border-strong: var(--pv-color-border-strong);
    --glossary-accent: var(--pv-color-accent);
}

.policy-reference-page {
    --policy-bg: var(--pv-color-canvas);
    --policy-surface: var(--pv-color-surface);
    --policy-primary: var(--pv-color-primary);
    --policy-primary-hover: var(--pv-color-primary-hover);
    --policy-text: var(--pv-color-text);
    --policy-muted: var(--pv-color-muted);
    --policy-soft: var(--pv-color-soft);
    --policy-border: var(--pv-color-border);
    --policy-accent: var(--pv-color-accent);
}

.learn-articles-index {
    --learn-bg: var(--pv-color-canvas);
    --learn-surface: var(--pv-color-surface);
    --learn-primary: var(--pv-color-primary);
    --learn-primary-hover: var(--pv-color-primary-hover);
    --learn-text: var(--pv-color-text);
    --learn-muted: var(--pv-color-muted);
    --learn-soft: var(--pv-color-soft);
    --learn-border: var(--pv-color-border);
    --learn-border-strong: var(--pv-color-border-strong);
    --learn-accent: var(--pv-color-accent);
    --learn-accent-light: var(--pv-color-accent-soft);
    --learn-shadow-sm: var(--pv-shadow-sm);
    --learn-shadow-md: var(--pv-shadow-md);
    --learn-shadow-lg: var(--pv-shadow-lg);
    --learn-radius: var(--pv-radius-card);
}

.test-directory {
    --directory-bg: var(--pv-color-canvas);
    --directory-surface: var(--pv-color-surface);
    --directory-primary: var(--pv-color-primary);
    --directory-primary-hover: var(--pv-color-primary-hover);
    --directory-text: var(--pv-color-text);
    --directory-muted: var(--pv-color-muted);
    --directory-soft: var(--pv-color-soft);
    --directory-border: var(--pv-color-border);
    --directory-border-strong: var(--pv-color-border-strong);
    --directory-accent: var(--pv-color-accent);
    --directory-shadow-sm: var(--pv-shadow-sm);
    --directory-shadow-md: var(--pv-shadow-md);
    --directory-shadow-lg: var(--pv-shadow-lg);
}

.personality-intro-editorial {
    --intro-primary: var(--pv-color-primary);
    --intro-primary-hover: var(--pv-color-primary-hover);
    --intro-text: var(--pv-color-text);
    --intro-muted: var(--pv-color-muted);
    --intro-soft: var(--pv-color-soft);
    --intro-border: var(--pv-color-border);
    --intro-border-strong: var(--pv-color-border-strong);
    --intro-accent: var(--pv-color-accent);
    --intro-surface: var(--pv-color-surface);
}

.mini-result-report {
    --result-bg: var(--pv-color-canvas);
    --result-surface: var(--pv-color-surface);
    --result-primary: var(--pv-color-primary);
    --result-text: var(--pv-color-text);
    --result-muted: var(--pv-color-muted);
    --result-soft: var(--pv-color-soft);
    --result-border: var(--pv-color-border);
    --result-border-strong: var(--pv-color-border-strong);
    --result-accent: var(--pv-color-accent);
    --result-accent-subtle: var(--pv-color-accent-soft);
}

.personality-test {
    --pt-bg: var(--pv-color-canvas);
    --pt-soft: var(--pv-color-surface-soft);
    --pt-border: var(--pv-color-border);
    --pt-text: var(--pv-color-primary);
    --pt-muted: var(--pv-color-muted);
    --pt-accent: var(--pv-color-accent);
    --pt-accent-dark: var(--pv-color-primary-hover);
    --pt-accent-soft: var(--pv-color-accent-soft);
}

.not-found-reference-page {
    --not-found-primary: var(--pv-color-primary);
    --not-found-primary-hover: var(--pv-color-primary-hover);
    --not-found-muted: var(--pv-color-muted);
    --not-found-accent: var(--pv-color-accent);
    --not-found-border: var(--pv-color-border);
    --not-found-border-strong: var(--pv-color-border-strong);
    background: var(--pv-color-canvas);
}

.not-found-reference-page .not-found-reference-button-primary {
    border-color: var(--pv-color-action);
    background: var(--pv-color-action);
    color: var(--pv-color-on-action);
}

.not-found-reference-page .not-found-reference-button-primary:hover,
.not-found-reference-page .not-found-reference-button-primary:focus-visible {
    border-color: var(--pv-color-action-hover);
    background: var(--pv-color-action-hover);
    color: var(--pv-color-on-action);
}

.not-found-reference-page .not-found-reference-button-secondary,
.not-found-reference-page .not-found-reference-links > a {
    background: var(--pv-color-surface);
}

/* Reusable primitives for new or progressively migrated templates. */
.pv-layout {
    --pv-layout-width: var(--pv-width-wide);
    box-sizing: border-box;
    width: min(100%, var(--pv-layout-width));
    margin-inline: auto;
    padding-inline: var(--pv-gutter);
}

.pv-layout--narrow { --pv-layout-width: var(--pv-width-narrow); }
.pv-layout--reading { --pv-layout-width: var(--pv-width-reading); }
.pv-layout--standard { --pv-layout-width: var(--pv-width-standard); }
.pv-layout--directory { --pv-layout-width: var(--pv-width-directory); }
.pv-layout--wide { --pv-layout-width: var(--pv-width-wide); }

.pv-container {
    width: min(calc(100% - (2 * var(--pv-gutter))), var(--pv-width-wide));
    margin-inline: auto;
}

.pv-container--content { max-width: var(--pv-width-content); }
.pv-container--reading { max-width: var(--pv-width-reading); }
.pv-container--form { max-width: var(--pv-width-form); }

.pv-eyebrow {
    margin: 0 0 10px;
    color: var(--pv-color-accent);
    font: 600 0.72rem/1.4 var(--pv-font-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pv-heading {
    margin: 0;
    color: var(--pv-color-primary);
    font-family: var(--pv-font-serif);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.pv-lead {
    color: var(--pv-color-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

/*
 * Canonical page introduction. Bespoke editorial heroes may remain separate;
 * ordinary directories, reference pages and account screens should use this.
 */
body .site-main .pv-page-heading {
    --pv-page-heading-title-size: clamp(1.9rem, 4.5vw, 2.5rem);
    --pv-page-heading-subtitle-width: 640px;
    box-sizing: border-box;
    padding-block: 48px 40px;
    text-align: left;
}

/* Compact breadcrumbs live inside the established page introduction. */
body .site-main .site-breadcrumbs {
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    background: transparent;
    text-align: left;
}

body .site-main .site-breadcrumbs-inner {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

body .site-main .site-breadcrumbs-inner::-webkit-scrollbar {
    display: none;
}

body .site-main .site-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

body .site-main .site-breadcrumb-pill {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--pv-color-muted);
    font: 600 0.78rem/1.35 var(--pv-font-sans) !important;
    text-decoration: none;
    white-space: nowrap;
}

body .site-main a.site-breadcrumb-pill:hover,
body .site-main a.site-breadcrumb-pill:focus-visible {
    background: transparent;
    color: var(--pv-color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body .site-main .site-breadcrumb-pill[aria-current="page"] {
    color: var(--pv-color-text);
    font-weight: 650;
}

body .site-main .site-breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: 5px;
    color: var(--pv-color-soft);
}

body .site-main .site-breadcrumb-separator svg {
    width: 11px;
    height: 11px;
}

body .site-main .pv-page-heading:has(> .site-breadcrumbs) {
    padding-top: 16px;
}

body.route-tests-index .test-directory-header:has(.site-breadcrumbs),
body.route-learn-index .learn-index-header:has(.site-breadcrumbs) {
    padding-top: 16px;
}

body .site-main .article-header:has(> .site-breadcrumbs) {
    padding-top: 12px;
}

body.route-tests-show:not(.personality-test-focus-mode) .personality-intro-hero:has(> .site-breadcrumbs) {
    padding-top: 8px !important;
}

body .site-main .pv-page-heading--bordered {
    border-bottom: 1px solid var(--pv-color-border);
}

body .site-main .pv-page-heading--center {
    text-align: center;
}

body .site-main .pv-page-heading--display {
    --pv-page-heading-title-size: clamp(2rem, 4.4vw, 2.85rem);
    --pv-page-heading-subtitle-width: 560px;
    padding-block: 32px 40px;
}

body .site-main .pv-page-heading--compact {
    --pv-page-heading-title-size: 1.75rem;
    --pv-page-heading-subtitle-width: none;
    margin-bottom: 32px;
    padding: 0;
    border: 0;
}

body .site-main .pv-page-heading .pv-page-heading__eyebrow {
    display: inline-block;
    margin: 0 0 10px;
    color: var(--pv-color-accent);
    font: 600 0.72rem/1.4 var(--pv-font-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body .site-main .pv-page-heading .pv-page-heading__title {
    margin: 0;
    color: var(--pv-color-primary);
    font-family: var(--pv-font-serif);
    font-size: var(--pv-page-heading-title-size);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

body .site-main .pv-page-heading .pv-page-heading__subtitle {
    max-width: var(--pv-page-heading-subtitle-width);
    margin: 9px 0 0;
    color: var(--pv-color-muted);
    font: 400 0.95rem/1.55 var(--pv-font-sans);
}

body .site-main .pv-page-heading--center .pv-page-heading__subtitle {
    margin-inline: auto;
}

body .site-main .pv-page-heading--display .pv-page-heading__title {
    margin-bottom: 14px;
}

body .site-main .pv-page-heading--display .pv-page-heading__subtitle {
    margin-top: 0;
    font-size: 1.05rem;
}

body .site-main .pv-page-heading--compact .pv-page-heading__subtitle {
    margin-top: 7px;
    font-size: 0.82rem;
    line-height: 1.5;
}

.pv-card {
    border: 1px solid var(--pv-color-border);
    border-radius: var(--pv-radius-card);
    background: var(--pv-color-surface);
    box-shadow: var(--pv-shadow-sm);
}

body .site-main .pv-card.pv-card--static,
body .site-main .pv-card.pv-card--static:hover {
    border-color: var(--pv-color-border);
    background: var(--pv-color-surface);
    box-shadow: var(--pv-shadow-sm);
    transform: none;
    transition: none;
}

/*
 * Shared feedback contract for cards with a usable destination.
 * Layout and typography remain owned by each page family; this primitive owns
 * only surface, border, depth and interaction, and never moves the card.
 */
body .site-main .pv-interactive-card {
    border: 1px solid var(--pv-color-border);
    border-radius: var(--pv-radius-card);
    background: var(--pv-color-surface);
    box-shadow: var(--pv-shadow-sm);
    transform: none;
    transition: border-color var(--pv-transition), box-shadow var(--pv-transition);
}

body .site-main .pv-interactive-card:is(:hover, :focus-visible, :focus-within) {
    border-color: var(--pv-color-border-strong);
    background: var(--pv-color-surface);
    box-shadow: var(--pv-shadow-lg);
    transform: none;
}

/* Static and planned cards retain the shared surface without implying a link. */
body .site-main .pv-interactive-card.pv-interactive-card--inactive,
body .site-main .pv-interactive-card.pv-interactive-card--inactive:is(:hover, :focus-visible, :focus-within) {
    border-color: var(--pv-color-border);
    background: var(--pv-color-surface);
    box-shadow: var(--pv-shadow-sm);
    transform: none;
    transition: none;
}

.pv-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border: 1px solid var(--pv-color-action);
    border-radius: var(--pv-radius-control);
    background: var(--pv-color-action);
    color: var(--pv-color-on-action);
    font: 600 0.9rem/1 var(--pv-font-sans);
    text-decoration: none;
    transition: background-color var(--pv-transition), border-color var(--pv-transition), box-shadow var(--pv-transition);
}

.pv-button:hover,
.pv-button:focus-visible {
    border-color: var(--pv-color-action-hover);
    background: var(--pv-color-action-hover);
    box-shadow: var(--pv-shadow-md);
}

/* Primary controls use a dedicated action colour so dark headings can remain light. */
.auth-reference-page .auth-reference-submit,
.about-reference-page .about-reference-button,
.account-reference-page .account-reference-btn-primary,
.contact-reference-page .contact-reference-button,
.donate-reference-page .donate-reference-button,
.policy-reference-page .policy-reference-button,
.personality-intro-editorial .personality-test-btn-primary,
.test-directory .test-directory-card-action a {
    border-color: var(--pv-color-action) !important;
    background: var(--pv-color-action) !important;
    color: var(--pv-color-on-action) !important;
}

.auth-reference-page .auth-reference-submit:hover,
.about-reference-page .about-reference-button:hover,
.account-reference-page .account-reference-btn-primary:hover,
.contact-reference-page .contact-reference-button:hover,
.donate-reference-page .donate-reference-button:hover,
.policy-reference-page .policy-reference-button:hover,
.personality-intro-editorial .personality-test-btn-primary:hover,
.test-directory .test-directory-card-action a:hover {
    border-color: var(--pv-color-action-hover) !important;
    background: var(--pv-color-action-hover) !important;
}

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

html[data-theme="dark"] .article-assessment-card {
    background: #111f31;
}

html[data-theme="dark"] body.route-tests-show:not(.personality-test-focus-mode) .personality-intro-trait-card,
html[data-theme="dark"] body.route-tests-show:not(.personality-test-focus-mode) .personality-intro-faq details,
html[data-theme="dark"] body.route-tests-show:not(.personality-test-focus-mode) .personality-intro-secondary {
    border-color: var(--pv-color-border) !important;
    background: var(--pv-color-surface) !important;
    color: var(--pv-color-primary) !important;
}

html[data-theme="dark"] body.route-tests-show:not(.personality-test-focus-mode) .personality-intro-trait-card:hover {
    border-color: var(--pv-color-border-strong) !important;
    background: var(--pv-color-surface) !important;
    box-shadow: var(--pv-shadow-md);
}

.pv-button--secondary {
    border-color: var(--pv-color-border-strong);
    background: var(--pv-color-surface);
    color: var(--pv-color-primary);
}

.pv-button--secondary:hover,
.pv-button--secondary:focus-visible {
    border-color: var(--pv-color-muted);
    background: var(--pv-color-surface-soft);
}

.pv-field {
    width: 100%;
    min-height: 42px;
    padding: 10px 13px;
    border: 1px solid var(--pv-color-border-strong);
    border-radius: var(--pv-radius-control);
    background: var(--pv-color-surface);
    color: var(--pv-color-text);
    font: 0.9rem var(--pv-font-sans);
}

.pv-field:focus {
    border-color: var(--pv-color-accent);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(46, 104, 181, 0.12);
}

.pv-divider { border-top: 1px solid var(--pv-color-border); }

.site-main :where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--pv-color-accent);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    :root {
        --pv-gutter: 16px;
        --pv-section-space: 40px;
    }

    body .site-main .pv-page-heading {
        padding-block: 34px 32px;
    }

    body .site-main .pv-page-heading:has(> .site-breadcrumbs) {
        padding-top: 12px;
    }

    body .site-main .site-breadcrumbs-inner {
        overflow: hidden;
    }

    body .site-main .site-breadcrumbs {
        width: min(100%, calc(100vw - 32px));
        min-width: 0;
        max-width: 100%;
        margin-inline: auto;
        overflow: hidden;
    }

    body .site-main .site-breadcrumb-item:last-child {
        flex: 1 1 auto;
        overflow: hidden;
    }

    body .site-main .site-breadcrumb-item:last-child .site-breadcrumb-pill {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body .site-main .site-breadcrumb-item:nth-child(n + 3):last-child {
        display: none;
    }

    body .site-main .pv-page-heading--compact {
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pv-button,
    body .site-main .pv-interactive-card { transition: none; }
}