/* Shared color contract. New interface rules should prefer these tokens. */
:root {
    color-scheme: light;
    --surface-page: #f6f8f9;
    --surface-card: #ffffff;
    --surface-muted: #edf1f4;
    --surface-raised: #ffffff;
    --text-primary: #0b1728;
    --text-secondary: #4b5f74;
    --text-muted: #5f7183;
    --border-subtle: #d5dde4;
    --border-strong: #b4bfca;
    --focus-ring: #00758a;
    --state-info: #245f91;
    --state-info-soft: #edf6fd;
    --state-info-border: #b8d8ef;
    --state-success: #076c49;
    --state-success-soft: #e8f7f0;
    --state-success-border: #a9dfc8;
    --state-warning: #805300;
    --state-warning-soft: #fff6da;
    --state-warning-border: #e8d7a0;
    --state-danger: #9b2f3c;
    --state-danger-soft: #fff0f1;
    --state-danger-border: #edc1c6;
    --surface: var(--surface-card);
    --surface-subtle: var(--surface-muted);
    --text: var(--text-primary);
    --border: var(--border-subtle);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --surface-page: #0b121c;
    --surface-card: #131e2b;
    --surface-muted: #192534;
    --surface-raised: #182432;
    --text-primary: #edf3f8;
    --text-secondary: #bdc9d5;
    --text-muted: #91a1b2;
    --border-subtle: #2b3a4a;
    --border-strong: #435467;
    --focus-ring: #73def3;
    --state-info: #9fc9f2;
    --state-info-soft: #14283b;
    --state-info-border: #355a7c;
    --state-success: #8be7c4;
    --state-success-soft: #122b23;
    --state-success-border: #34755f;
    --state-warning: #f2d58c;
    --state-warning-soft: #332a18;
    --state-warning-border: #806529;
    --state-danger: #f1b1b7;
    --state-danger-soft: #351d22;
    --state-danger-border: #7d3c47;
    --surface: var(--surface-card);
    --surface-subtle: var(--surface-muted);
    --text: var(--text-primary);
    --border: var(--border-subtle);

    /* Legacy tokens are ordered by role throughout app.css. In dark mode the
       light ink steps become dark surfaces and the dark ink steps become text. */
    --white: var(--surface-card);
    --ink-950: #f5f8fb;
    --ink-900: #edf3f8;
    --ink-850: #e0e8f0;
    --ink-800: #d6e0e9;
    --ink-700: #c2ced9;
    --ink-600: #aebdca;
    --ink-500: #9babb9;
    --ink-400: #8798a9;
    --ink-300: #506275;
    --ink-200: #3c4c5e;
    --ink-150: #2b3a4a;
    --ink-100: #202d3c;
    --ink-50: #0f1925;
    --green: #32d596;
    --green-dark: #55daa7;
    --focus-light: #73def3;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.18);
    --shadow: 0 20px 50px rgba(0,0,0,.35);
    --accent-soft: #292544;
    --accent-ink: #b7a8ff;
}

html[data-theme="dark"] body { background: var(--surface-page); color: var(--text-primary); }
html[data-theme="dark"] ::selection { color: #06130e; background: #62deb0; }
html[data-theme="dark"] :where(input, select, textarea) { color-scheme: dark; }
html[data-theme="dark"] :where(input, select, textarea)::placeholder { color: #75879a; opacity: 1; }

.theme-toggle {
    min-width: 40px;
    min-height: 40px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    cursor: pointer;
    transition: color .18s, border-color .18s, background-color .18s;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); background: var(--surface-muted); }
.theme-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.theme-toggle-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle-sun { display: none; }
.theme-toggle-moon { display: inline; }
/* Fixed dark course cards keep readable text in either application theme. */
.tracking-card { color: #edf3f8; }
.tracking-card > small { color: #bdc9d5; }

/* Account navigation and its overflow cue share the current surface palette. */
.account-local-nav {
    top: var(--header-height);
    color: var(--text-secondary);
    background: var(--surface-card);
    border-color: var(--border-subtle);
    backdrop-filter: none;
}
.account-local-nav a { color: var(--text-secondary); }
.account-local-nav a:hover { color: var(--text-primary); background: var(--surface-muted); }
.account-local-nav::after { background: linear-gradient(90deg, transparent, var(--surface-card)); }
.account-local-nav > div { scrollbar-color: var(--border-strong) var(--surface-card); }
.account-local-nav > div::-webkit-scrollbar-thumb { background: var(--border-strong); }

html[data-theme="dark"] .theme-toggle-sun { display: inline; }
html[data-theme="dark"] .theme-toggle-moon { display: none; }
html[data-theme="dark"] .theme-toggle { color: var(--text-secondary); border-color: var(--border-subtle); background: transparent; }
html[data-theme="dark"] .beta-badge { color: #f2cd73; background: #352b17; border-color: #74602c; }

/* These areas deliberately use a dark canvas. Restore the original ink
   meaning locally after the legacy-token remap above. */
html[data-theme="dark"] :where(
    .hero, .lesson-hero, .progress-hero, .standards-hero,
    .career-landing-hero, .career-dashboard-hero, .today-hero, .study-hero,
    .tracker-hero, .atlas-hero, .community-hero, .legal-hero, .quiz-header,
    .account-hero, .oauth-login-page, .provider-setup-page,
    .result-panel, .navigation-manifesto, .automation-card, .career-finder-result,
    .highway-stage > header, .decay-disclosure, .legal-summary,
    .community-hero aside, .oauth-provider, .provider-setup-card,
    .claim-progress-card, .roadmap-methodology-link, .methodology-formula,
    .flashcard-answer, .certification-atlas-banner,
    .study-plan-section, .atlas-lane > header, .deck-editor-hero
) {
    --white: #ffffff;
    --ink-950: #07101d;
    --ink-900: #0b1728;
    --ink-850: #102035;
    --ink-800: #17293f;
    --ink-700: #2c4057;
    --ink-600: #4b5f74;
    --ink-500: #9aabba;
    --ink-400: #adbbc7;
    --ink-300: #c8d2da;
    --ink-200: #d5dde4;
    --ink-150: #e3e9ee;
    --ink-100: #edf1f4;
    --ink-50: #f6f8f9;
}

/* interface.css converts page heroes into compact page-colored introductions.
   Reapply the dark application palette inside those former hero containers. */
html[data-theme="dark"] main .page-intro {
    --white: var(--surface-card);
    --ink-950: #f5f8fb;
    --ink-900: #edf3f8;
    --ink-850: #e0e8f0;
    --ink-800: #d6e0e9;
    --ink-700: #c2ced9;
    --ink-600: #aebdca;
    --ink-500: #9babb9;
    --ink-400: #8798a9;
    --ink-300: #506275;
    --ink-200: #3c4c5e;
    --ink-150: #2b3a4a;
    --ink-100: #202d3c;
    --ink-50: #0f1925;
}

/* Dark surfaces and controls that use literal light colors. */
html[data-theme="dark"] .skip-link,
html[data-theme="dark"] .tracker-dialog,
html[data-theme="dark"] .directory-dialog { background: var(--surface-raised); color: var(--text-primary); }
html[data-theme="dark"] .quiz-progress-row { background: rgba(19,30,43,.94); }
html[data-theme="dark"] .governance-banner { color: var(--text-secondary); border-color: #285947; background: linear-gradient(110deg,#12271f,var(--surface-card)); }
html[data-theme="dark"] .governance-icon,
html[data-theme="dark"] .assurance-mark,
html[data-theme="dark"] .identity-provider,
html[data-theme="dark"] .methodology-rule-list article > span,
html[data-theme="dark"] .quiz-question-card > header > span { color: #72e2b8; background: #16392d; }

html[data-theme="dark"] :is(.color-violet, .career-dashboard-hero, .highway-graph) { --accent-soft: #292544; --accent-ink: #b8aaff; }
html[data-theme="dark"] .color-cyan { --accent-soft: #15333d; --accent-ink: #6edaf2; }
html[data-theme="dark"] .color-amber { --accent-soft: #3b301b; --accent-ink: #f0c568; }
html[data-theme="dark"] .color-green { --accent-soft: #16392d; --accent-ink: #72e2b8; }

html[data-theme="dark"] :where(
    .scenario-banner, .clean-room-origin, .attempt-snapshot-note,
    .timing-insight, .timing-method-note, .response-timing-summary,
    .coverage-baseline-note, .study-objective-grid input:checked + span,
    .credential-branch-card.is-in-progress, .objective-timeline-item.is-recommended .objective-timeline-copy
) { color: #c4d6e5; border-color: #315268; background: #122635; }
html[data-theme="dark"] :where(.clean-room-origin strong, .response-timing-summary > small b) { color: #d8e8f4; }
html[data-theme="dark"] :where(
    .clean-room-origin.synthetic-origin, .career-finder fieldset label:has(input:checked),
    .skill-node.target-met, .quiz-options label:has(input:checked),
    .lesson-resource-choice.is-complete > summary, .bounded-assignment,
    .branch-stage-body.completed-roadmap-section, .role-rung.is-collapsible,
    .unified-gate-signals > article.signal-met, .cert-progress-node--earned
) { color: #c9ede0; border-color: #34755f; background: #122b23; }
html[data-theme="dark"] :where(
    .browser-practice-tag, .series-label, .score-tag.passing,
    .atlas-plan-status, .record-score.passing, .learning-block-status.is-complete
) { color: #8be7c4; border-color: #34755f; background: #16392d; }
html[data-theme="dark"] :where(
    .review-method-badge, .today-plan-item > span,
    .today-onboarding > header > strong, .today-onboarding-grid article > span,
    .practice-mode-icon, .portable-icon,
    .portable-merge-notice, .mastery-score.passing, .history-score.passing,
    .freshness-badge.current, .review-status, .assurance-levels span,
    .update-workflow li > span, .active-goal-badge, .evidence-success,
    .role-rung.rung-ready .rung-index, .rung-ready .rung-state,
    .rung-signals .signal-met > i, .logged-badge,
    .lesson-meta > .review-trust-badge.human-reviewed,
    .account-deleted-notice, .quiz-review-list .correct header > span,
    .quiz-review-list .correct header > b, .pbq-attempt-results .correct header > span
) { color: #8be7c4; border-color: #34755f; background: #16392d; }
html[data-theme="dark"] .review-trust-badge.human-reviewed,
html[data-theme="dark"] .lesson-meta > .review-trust-badge.human-reviewed {
    color: var(--state-success);
    border-color: var(--state-success-border);
    background: var(--state-success-soft);
}
html[data-theme="dark"] .today-quick-direction button {
    color: #b8f1dc;
    border-color: #34755f;
    background: #16392d;
}
html[data-theme="dark"] .today-quick-direction button:hover,
html[data-theme="dark"] .today-quick-direction button:focus-visible {
    color: #06130e;
    border-color: var(--green);
    background: var(--green);
}
html[data-theme="dark"] .today-onboarding-primary > span,
html[data-theme="dark"] .career-finder-step.is-complete > summary > b {
    color: #06130e;
    border-color: var(--green-dark);
    background: var(--green-dark);
}
/* Stateful Today cards need explicit selectors to override their legacy colors. */
html[data-theme="dark"] .today-plan-item.is-strong-recommendation,
html[data-theme="dark"] .today-plan-celebration {
    color: var(--text-primary);
    border-color: #806529;
    border-left-color: #d29224;
    background: #332a18;
}
html[data-theme="dark"] .today-plan-item.is-strong-recommendation > span,
html[data-theme="dark"] .today-plan-celebration > span { color: #f2d58c; background: #3b301b; }
html[data-theme="dark"] .today-plan-item.is-strong-recommendation > div > small,
html[data-theme="dark"] .today-plan-celebration > div > small { color: #f2d58c; }
html[data-theme="dark"] .today-wins { border-color: #34755f; background: #122b23; }
html[data-theme="dark"] .today-wins h2 { color: var(--text-primary); }
html[data-theme="dark"] .today-wins header p { color: var(--text-secondary); }
html[data-theme="dark"] .today-wins > header > strong,
html[data-theme="dark"] .today-plan-item.is-complete > span {
    color: #8be7c4;
    border-color: #34755f;
    background: #16392d;
}
html[data-theme="dark"] .today-plan-item.is-complete {
    color: var(--text-primary);
    border-color: #34755f;
    border-left-color: var(--green);
    background: var(--surface-card);
}
html[data-theme="dark"] .today-plan-item.is-complete > div > small { color: #8be7c4; }
html[data-theme="dark"] :where(
    .owner-review-gate, .privacy-preview-tag, .coverage-baseline-note.needs-coverage,
    .self-grade .rating-hard, .self-grade .rating-medium,
    .cert-progress-node--next
) { color: #f2d58c; border-color: #806529; background: #332a18; }
html[data-theme="dark"] :where(
    .score-tag, .owner-review-gate.rejected, .simulator-checks .missed,
    .record-score, .atlas-node > em, .account-danger-zone, .self-grade .rating-missed
) { color: #ffadb3; border-color: #82434a; background: #351d24; }
html[data-theme="dark"] :where(.simulator-checks .passed, .self-grade .rating-easy) { color: #8be7c4; background: #16392d; }
html[data-theme="dark"] .self-grade .rating-easy { --rating-color: var(--state-success); }
html[data-theme="dark"] .self-grade :is(.rating-medium, .rating-hard) { --rating-color: var(--state-warning); }
html[data-theme="dark"] .self-grade .rating-missed { --rating-color: var(--state-danger); }

/* Career and study additions contain literal light surfaces. */
html[data-theme="dark"] :where(
    .trend-stat-grid > div, .trend-chart-card, .trend-subject-breakdown li,
    .trend-empty, .study-objective-grid span, .guided-route-count,
    .guided-route-key, .branch-stage-body, .credential-branch-card,
    .mini-route-tick, .branch-no-guide, .practical-gate-route > div,
    .reused-credential-note, .branch-stage-body.future-roadmap-section,
    .stage-next-action.is-empty, .unified-gate-signals > article,
    .stage-skill-evidence, .stage-resource-alternatives,
    .stage-resource-list > article, .stage-resource-list footer form,
    .supplemental-resource-grid article, .adaptive-plan-summary article,
    .tracker-section-disclosure, .tracker-nested-disclosure,
    .coverage-manual, .lesson-workspace, .lesson-inline-concepts > div,
    .lesson-source-record a, .lesson-concept-section, .lesson-sources,
    .lesson-pagination a, .progress-content .progress-disclosure
) { color: var(--text-primary); border-color: var(--border-subtle); background: var(--surface-card); }
html[data-theme="dark"] :where(.branch-no-guide, .stage-next-action.is-empty, .tracker-nested-disclosure, .lesson-inline-concepts > div, .trend-subject-breakdown li, .trend-empty) { background: var(--surface-muted); }
html[data-theme="dark"] :where(.lesson-source-record a, .lesson-pagination a) { color: #bcd5ea; }

/* Forms, tables, disclosures, and code. */
html[data-theme="dark"] :where(input, select, textarea):not(.command-entry input):not(.switch-terminal-input):not(.linux-terminal-input) {
    color: var(--text-primary);
    background-color: #101b28;
    border-color: var(--border-strong);
}
html[data-theme="dark"] :where(input, select, textarea):disabled { color: #718294; background-color: #111923; }
html[data-theme="dark"] :where(code):not(pre code) { color: #aeead3; }
html[data-theme="dark"] :where(pre, .profile-code, .error-code) { border-color: #304256; }
html[data-theme="dark"] :where(th, td) { border-color: var(--border-subtle); }
html[data-theme="dark"] :where(.form-error, .vault-error) { color: #ff9da5; }
html[data-theme="dark"] .button.danger { color: #ff9da5; }
html[data-theme="dark"] .button.primary { color: #04160e; }
html[data-theme="dark"] .filter-chip:hover,
html[data-theme="dark"] .filter-chip.active { color: #07101d; border-color: var(--green); background: var(--green); }

/* Activity chart overlays and SVG marks. */
html[data-theme="dark"] .trend-stat-grid strong,
html[data-theme="dark"] .trend-subject-breakdown h3,
html[data-theme="dark"] .trend-subject-breakdown header h4,
html[data-theme="dark"] .trend-subject-breakdown dd { color: var(--text-primary); }
html[data-theme="dark"] .trend-stat-grid span,
html[data-theme="dark"] .trend-stat-grid small,
html[data-theme="dark"] .trend-subject-breakdown dt,
html[data-theme="dark"] .trend-subject-breakdown dd small,
html[data-theme="dark"] .trend-subject-breakdown header span,
html[data-theme="dark"] .trend-legend .trend-series-key { color: var(--text-secondary); }
html[data-theme="dark"] .trend-subject-breakdown { border-color: var(--border-subtle); }
html[data-theme="dark"] .trend-grid line { stroke: #334354; }
html[data-theme="dark"] .trend-legend .series-1, html[data-theme="dark"] .trend-certification-series.series-1 { color: #7caaff; }
html[data-theme="dark"] .trend-legend .series-2, html[data-theme="dark"] .trend-certification-series.series-2 { color: #f5a078; }
html[data-theme="dark"] .trend-legend .series-3, html[data-theme="dark"] .trend-certification-series.series-3 { color: #65d6ac; }
html[data-theme="dark"] .trend-legend .series-4, html[data-theme="dark"] .trend-certification-series.series-4 { color: #bea0f8; }
html[data-theme="dark"] .trend-legend .series-5, html[data-theme="dark"] .trend-certification-series.series-5 { color: #e5c26a; }
html[data-theme="dark"] .trend-legend .series-6, html[data-theme="dark"] .trend-certification-series.series-6 { color: #75d5ec; }
html[data-theme="dark"] .trend-legend .series-7, html[data-theme="dark"] .trend-certification-series.series-7 { color: #f49fc6; }
html[data-theme="dark"] .trend-legend .series-8, html[data-theme="dark"] .trend-certification-series.series-8 { color: #c2ccd9; }
html[data-theme="dark"] .trend-axis-overlay { color: #9aabbd; }
html[data-theme="dark"] .trend-score-overlay { background: linear-gradient(90deg,var(--surface-card) 78%,rgba(19,30,43,0)); }
html[data-theme="dark"] .trend-time-overlay { background: linear-gradient(270deg,var(--surface-card) 78%,rgba(19,30,43,0)); }
html[data-theme="dark"] .trend-month-axis path { stroke: #405166; }
html[data-theme="dark"] .trend-month-axis text { fill: #aebdca; }
html[data-theme="dark"] :where(.chart-axis, .trend-date-axis) text { fill: #91a1b2; }
html[data-theme="dark"] :where(.score-grid-line, .trend-grid) { stroke: #2b3a4a; }

/* Certification map state remains meaningful without luminous pastel cards. */
html[data-theme="dark"] .cert-progress-map { border-color: var(--border-subtle); background: var(--surface-card); }
html[data-theme="dark"] .cert-progress-node { color: var(--text-primary); border-color: #405166; background: var(--surface-muted); }
html[data-theme="dark"] .cert-progress-node.cert-progress-node--earned { border-left-color: #3fb887; background: #122b23; }
html[data-theme="dark"] .cert-progress-node--studying { border-left-color: #38a6dd; background: #122b3a; }
html[data-theme="dark"] .cert-progress-node--planned { border-left-color: #9d7cf4; background: #28213d; }
html[data-theme="dark"] .cert-progress-node.cert-progress-node--next { border-left-color: #d1a33a; background: #332a18; }
html[data-theme="dark"] .cert-progress-node__status,
html[data-theme="dark"] .cert-progress-node small { color: var(--text-muted); }
html[data-theme="dark"] .cert-progress-map__edges path { stroke: #64778d; }
html[data-theme="dark"] .cert-progress-map__edges marker path { fill: #8ea0b4; }

/* Embedded CLI lesson workbench uses its own compact stylesheet. */
html[data-theme="dark"] :where(.lesson-cli, .lesson-cli-practice, .lesson-cli-topology, .lesson-cli-objectives, .lesson-workbench, .lesson-practice-evidence section) {
    color: var(--text-primary); border-color: var(--border-subtle); background: var(--surface-card);
}
html[data-theme="dark"] :where(.lesson-cli, .lesson-cli-topology, .lesson-cli-objectives, .lesson-practice-evidence section) { background: var(--surface-muted); }
html[data-theme="dark"] :where(.lesson-cli-intro, .lesson-cli-objectives li small, .lesson-cli-live, .lesson-practice-notice, .lesson-practice-options, .lesson-cli-topology-links) { color: var(--text-secondary); }
html[data-theme="dark"] .lesson-cli-scope,
html[data-theme="dark"] .lesson-cli-repeat { color: #8be7c4; background: #16392d; }
html[data-theme="dark"] .lesson-cli-feedback,
html[data-theme="dark"] .lesson-cli-hints { color: #c9ede0; background: #122b23; }
html[data-theme="dark"] .lesson-cli-topology-nodes li { color: var(--text-primary); background: var(--surface-card); }
html[data-theme="dark"] .lesson-cli-topology-nodes span { color: var(--text-muted); }
html[data-theme="dark"] .lesson-cli-topology-links strong { color: var(--state-success); }
html[data-theme="dark"] .lesson-cli-objectives li small { color: var(--text-secondary); }
.lesson-cli-practice > header span { color: var(--text-muted); }
html[data-theme="dark"] .lesson-practice-fields :focus-visible { outline-color: var(--focus-light); }

/* Objective lessons predate the shared palette and carry many literal light
   colors. Keep the whole reading workspace on the dark surface contract. */
html[data-theme="dark"] .lesson-page { color: var(--text-primary); background: var(--surface-page); }
html[data-theme="dark"] :where(
    .lesson-workspace, .lesson-concept-section, .lesson-sources,
    .ccna-course-stage, .ccna-prior-study
) { color: var(--text-primary); border-color: var(--border-subtle); background: var(--surface-card); }
html[data-theme="dark"] :where(
    .lesson-workspace > section + section, .lesson-resource-choice,
    .lesson-sequence-step + .lesson-sequence-step, .lesson-source-record,
    .lesson-concept-body, .lesson-concept-grid > div,
    .lesson-concept-actions, .lesson-sources[open] > summary,
    .ccna-objective-list li, .ccna-stage-lab, .ccna-extra-teaching,
    .ccna-instruction-sources
) { border-color: var(--border-subtle); }
html[data-theme="dark"] :where(
    .lesson-model-copy, .resource-progress span,
    .lesson-resource-note, .lesson-source-record > summary,
    .lesson-source-record a small, .lesson-concept-section > summary,
    .lesson-concept-section > summary b, .lesson-inline-concepts p,
    .lesson-concept-grid p,
    .lesson-concept-actions small, .lesson-application p, .lesson-finish p,
    .lesson-application ol, .lesson-finish label,
    .ccna-course-stage > summary > span, .ccna-course-note
) { color: var(--text-secondary) !important; }
html[data-theme="dark"] :where(
    .resource-progress strong, .learning-block-heading h3,
    .lesson-inline-concepts h4, .lesson-concept-grid h3,
    .lesson-sources > summary, .lesson-sources a
) { color: var(--text-primary); }
html[data-theme="dark"] .lesson-resource-choice > summary::after { color: var(--text-secondary); background: var(--surface-muted); }
.learning-block-heading > div > span { color: var(--state-info); }
.resource-progress span, .lesson-sources a span, .lesson-pagination a span { color: var(--text-muted); }
.lesson-sequence-step > header small { color: var(--state-success); }
.lesson-sequence-step > header strong { color: var(--text-primary); }
.lesson-sequence-step > header > b { color: var(--text-muted); }
html[data-theme="dark"] .learning-block-status:not(.is-complete):not(.is-next) { color: var(--text-secondary); }
html[data-theme="dark"] .learning-block-status.is-next { color: var(--state-warning); }
html[data-theme="dark"] .lesson-return-today { border-color: var(--state-success-border); background: var(--surface-muted); }
html[data-theme="dark"] .lesson-return-today strong { color: var(--text-primary); }
html[data-theme="dark"] .lesson-return-today small { color: var(--text-secondary); }
html[data-theme="dark"] :where(.lesson-resource-choice.is-complete > summary, .learning-block-current-action, .bounded-assignment) {
    color: #c9ede0; border-color: #34755f; background: #122b23;
}
html[data-theme="dark"] :where(
    .lesson-resource-choice.is-complete .learning-block-heading > div > span,
    .lesson-resource-choice.is-complete .learning-block-heading h3,
    .learning-block-current-action strong, .learning-block-current-action small,
    .bounded-assignment header, .bounded-assignment header strong,
    .bounded-assignment header span, .bounded-assignment p,
    .bounded-assignment small, .lesson-session-next strong,
    .lesson-session-next small, .resource-complete-mark
) { color: #b8e7d5; }
html[data-theme="dark"] .bounded-assignment .lesson-sequence-complete { border-color: #34755f; }
html[data-theme="dark"] .lesson-boundary { color: #c7dced; border-color: #4a82bd; background: #14283b; }
html[data-theme="dark"] .lesson-boundary strong { color: #9fc9f2; }
html[data-theme="dark"] .lesson-boundary span { color: #b9ccdc; }
html[data-theme="dark"] .lesson-resource-note { border-color: #61768c; background: var(--surface-muted); }
html[data-theme="dark"] .lesson-inline-concepts > div,
html[data-theme="dark"] .lesson-source-record a { border-color: var(--border-subtle); background: var(--surface-muted); }
html[data-theme="dark"] .lesson-finish select { color: var(--text-primary); border-color: var(--border-strong); background: #101b28; }
.learning-result-page .quiz-review-list header small { color: var(--text-muted); }
.progress-title-row .section-kicker { color: var(--state-success); }
.browser-data-control { border-color: var(--state-danger-border); background: var(--state-danger-soft); }
.browser-data-control .section-kicker { color: var(--state-danger); }
.browser-data-control p { color: var(--text-secondary); }
.browser-data-clear-form { display: grid; gap: 12px; max-width: 340px; }
.browser-data-clear-form label { min-height: 44px; display: flex; align-items: flex-start; gap: 10px; color: var(--text-primary); font-size: .875rem; line-height: 1.45; cursor: pointer; }
.browser-data-clear-form input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--state-danger); }
.browser-data-clear-form :is(input, button):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.record-delete-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; max-width: 100%; }
:is(.record-delete-form) label { min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: .8125rem; line-height: 1.45; cursor: pointer; }
:is(.record-delete-form) label span { color: inherit; font-size: inherit; text-transform: none; letter-spacing: normal; white-space: normal; }
:is(.record-delete-form) input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--state-danger); }
.tracker-record-list .record-delete-form button, .timeline-score .record-delete-form button { min-width: 44px; min-height: 44px; width: auto; height: auto; padding: 8px 12px; color: var(--state-danger); background: var(--surface-card); border: 1px solid var(--state-danger-border); border-radius: 6px; font-size: .8125rem; cursor: pointer; }
.tracker-record-list .record-delete-form button:hover, .timeline-score .record-delete-form button:hover { color: var(--state-danger); background: var(--state-danger-soft); }
:is(.record-delete-form) :is(input, button):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
@media (max-width: 600px) {
    .tracker-record-list > div:has(> .record-delete-form), .career-timeline article:has(.record-delete-form) { flex-wrap: wrap; }
    .tracker-record-list > div > .record-delete-form { flex-basis: 100%; width: 100%; }
    .career-timeline article:has(.record-delete-form) .timeline-main { flex-basis: 100%; }
    .career-timeline article:has(.record-delete-form) .timeline-score { width: 100%; align-items: flex-start; }
    .timeline-score .record-delete-form { width: 100%; }
}
html:not([data-theme="dark"]) .study-track-card.color-cyan { --accent-ink: #086f89; }
html:not([data-theme="dark"]) .study-track-card.color-amber { --accent-ink: #895c0d; }

/* Recorded mobile contrast audit failures. */
html[data-theme="dark"] .study-priority-grid p { color: #e0bd73; }
html[data-theme="dark"] .trend-filters label,
html[data-theme="dark"] .trend-empty p { color: var(--text-secondary); }
html[data-theme="dark"] .certification-finish-gate strong { color: var(--text-primary); }
html[data-theme="dark"] .certification-finish-gate p { color: var(--text-secondary); }
html[data-theme="dark"] .certification-finish-gate > a { color: #75b9f5; }
html[data-theme="dark"] #active-study-track .catalog-count-badge,
html[data-theme="dark"] .catalog-focus-section .catalog-count-badge {
    color: #8be7c4;
    border-color: #34755f;
    background: #16392d;
}

/* Page-specific stylesheets use compound selectors, so these need matching
   specificity rather than the low-specificity grouped surface rules above. */
html[data-theme="dark"] .progress-content .progress-disclosure {
    color: var(--text-primary);
    border-color: var(--border-subtle);
    background: var(--surface-card);
}
html[data-theme="dark"] .progress-content .progress-disclosure > summary,
html[data-theme="dark"] .progress-content .progress-disclosure > summary strong {
    color: var(--text-primary);
}
html[data-theme="dark"] .tracker-section-disclosure,
html[data-theme="dark"] .tracker-section-disclosure > summary {
    color: var(--text-primary);
    border-color: var(--border-subtle);
    background: var(--surface-card);
}
html[data-theme="dark"] .tracker-section-disclosure > summary b { color: #79ddb8; }
html[data-theme="dark"] .tracker-section-disclosure > summary strong { color: var(--text-primary); }
html[data-theme="dark"] .tracker-section-disclosure > summary small { color: var(--text-secondary); }
html[data-theme="dark"] .tracker-section-disclosure > summary::after { color: #8cc7ff; background: #18324a; }
html[data-theme="dark"] .tracker-section-disclosure[open] > summary { border-color: var(--border-subtle); }
html[data-theme="dark"] .objective-timeline-item.is-recommended .objective-timeline-copy {
    color: var(--text-primary);
    border-color: #355a7c;
    background: #14283b;
}
html[data-theme="dark"] .objective-timeline-copy header span,
html[data-theme="dark"] .objective-timeline-copy p { color: var(--text-secondary); }
html[data-theme="dark"] .objective-timeline-copy header b { color: #c0cddd; background: var(--surface-muted); }
html[data-theme="dark"] .objective-timeline-copy h3 a { color: var(--text-primary); }

/* Expanded disclosures and selected settings share the same text/surface
   contract as their collapsed cards. */
.concept-connections details { color: var(--text-primary); border-color: var(--border-subtle); background: var(--surface-muted); }
.concept-connections h4 { color: var(--text-primary); }
.concept-connections details > div > p { color: var(--text-secondary); }
.concept-connections a { color: var(--text-primary); border-color: var(--border-subtle); background: var(--surface-card); }
.concept-connections a span { color: var(--text-secondary); }
.review-algorithm-list label:has(input:checked) { color: var(--text-primary); background: var(--state-success-soft); border-color: var(--state-success-border); }
.review-algorithm-list small { color: var(--text-secondary); }
.career-finder-step[open] > summary { color: var(--text-primary); background: var(--state-success-soft); }
.career-finder-step > summary small { color: var(--text-secondary); }
.mock-scope-note { color: var(--state-warning); border-color: var(--state-warning-border); background: var(--state-warning-soft); }
.adaptive-plan-summary small { color: var(--text-secondary); }
.guide-step small { color: var(--state-success); }
.objective-timeline-date a { color: var(--state-info); }
html[data-theme="dark"] .concept-connections summary,
html[data-theme="dark"] .concept-connections summary span { color: var(--state-success); }
html[data-theme="dark"] .quiz-review-list .concept-connections { border-color: var(--border-subtle); background: var(--surface-muted); }
html[data-theme="dark"] .guided-route-key b a,
html[data-theme="dark"] .branch-card-action,
html[data-theme="dark"] .stage-resource-list footer > a,
html[data-theme="dark"] .stage-resource-list footer > details > summary { color: var(--state-info); }
.guided-career-section :is(
    .branch-stage-body > header h3, .credential-branch-card h4,
    .completed-stage-summary > strong, .completed-branch-summary > strong,
    .branch-choice-label strong, .unified-gate-signals strong,
    .stage-skill-evidence > summary strong, .stage-resource-alternatives > summary strong,
    .practical-gate-route strong, .reused-credential-note strong,
    .stage-resource-list header strong, .branch-no-guide strong
) { color: var(--text-primary); }
.guided-career-section :is(
    .branch-stage-body > p, .completed-stage-detail > p,
    .credential-branch-card > p, .mini-route-tick small,
    .unified-gate-signals small, .stage-skill-evidence > summary small,
    .stage-resource-alternatives > summary small, .stage-resource-list > article > p,
    .stage-resource-list > article > small, .stage-resource-list footer form p,
    .branch-no-guide span, .branch-source-summary, .branch-progress > span,
    .community-evidence p, .community-evidence small
) { color: var(--text-secondary); }
html[data-theme="dark"] .branch-choice-label { background: var(--surface-muted); }
html[data-theme="dark"] .branch-choice-label span { color: var(--state-info); }
.branch-choice-label small { color: var(--text-secondary); }
html[data-theme="dark"] .completed-stage-summary { color: var(--text-primary); }
html[data-theme="dark"] .branch-stage-body > header > b,
html[data-theme="dark"] .completed-stage-summary > b { color: var(--text-secondary); background: var(--surface-muted); }
html[data-theme="dark"] .branch-roadmap-stage.is-current .branch-stage-body > header > b { color: var(--state-info); background: var(--state-info-soft); }
html[data-theme="dark"] .branch-roadmap-stage.is-complete .branch-stage-body > header > b { color: var(--state-success); background: var(--state-success-soft); }
html[data-theme="dark"] .unified-gate-signals > article.signal-met { color: var(--text-primary); border-color: var(--state-success-border); background: var(--state-success-soft); }
html[data-theme="dark"] .branch-stage-body.completed-roadmap-section,
html[data-theme="dark"] .branch-stage-body.future-roadmap-section,
html[data-theme="dark"] .stage-resource-list footer form { color: var(--text-primary); border-color: var(--border-subtle); background: var(--surface-card); }

/* Roadmap state selectors must override the matching light-theme states. */
html[data-theme="dark"] .credential-branch-card.is-in-progress {
    color: var(--text-primary); border-color: var(--state-info-border); background: var(--state-info-soft);
}
html[data-theme="dark"] .credential-branch-card.is-earned,
html[data-theme="dark"] .skill-node.target-met,
html[data-theme="dark"] .mini-route-tick.is-complete {
    color: var(--text-primary); border-color: var(--state-success-border); background: var(--state-success-soft);
}
.guided-career-section :is(.guided-route-key, .guided-route-key b, .mini-route-tick strong, .completed-branch-summary > strong) { color: var(--text-primary); }
.guided-career-section :is(.credential-branch-card > header b, .completed-branch-summary > small, .skill-node-meta) { color: var(--text-secondary); }
.guided-career-section :is(.credential-branch-card > header span, .completed-branch-summary > span) { color: var(--state-info); }
.guided-career-section .branch-source-summary strong { color: var(--state-success); }
.guided-career-section .branch-source-summary small { color: var(--text-secondary); }
.guided-career-section .experience-bridge-label { color: var(--state-success); background: var(--state-success-soft); }
.guided-career-section .refresh-label { color: var(--state-warning); }
.guided-career-section .completed-stage-summary > b { color: var(--text-secondary); background: var(--surface-muted); }
.guided-career-section :is(.completed-stage-summary > span, .branch-stage-body > header span, .unified-gate-signals span, .guided-route-count span) { color: var(--text-secondary); }
.guided-career-section :is(.stage-skill-evidence > summary span, .stage-resource-alternatives > summary span) { color: var(--state-info); }
.guided-route-count strong { color: var(--text-primary); }
.branch-stage-body { min-width: 0; }
.branch-roadmap-stage { scroll-margin-top: calc(var(--sticky-offset) + 1rem); }
.guided-career-section .branch-progress > i { background: var(--surface-muted); }
.guided-career-section .branch-progress > i b { background: var(--state-info); }
html[data-theme="dark"] .branch-stage-marker > span { color: var(--text-secondary); border-color: var(--border-strong); background: var(--surface-card); }
html[data-theme="dark"] .branch-roadmap-stage.is-current .branch-stage-marker > span { color: var(--state-info); border-color: var(--state-info-border); background: var(--state-info-soft); box-shadow: 0 0 0 6px var(--state-info-soft); }
html[data-theme="dark"] .branch-roadmap-stage.is-complete .branch-stage-marker > span { color: var(--state-success); border-color: var(--state-success-border); background: var(--state-success-soft); }
html[data-theme="dark"] .credential-branch-grid::before,
html[data-theme="dark"] .credential-branch-card::before,
html[data-theme="dark"] .branch-stage-marker > i { background: var(--border-strong); }

.active-path-pill { color: var(--text-secondary); border-color: var(--border-subtle); background: var(--surface-card); }
.career-crumbs a:hover { color: var(--text-primary); }
.roadmap-progress { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--border-subtle); border-radius: 16px; color: var(--text-primary); background: var(--surface-card); }
.roadmap-progress-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.roadmap-progress-heading h2 { margin: 0; font-size: 1.1rem; }
.roadmap-progress-heading p, .roadmap-progress > p { margin: .35rem 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.5; }
.roadmap-progress-heading > strong { font-size: 2rem; line-height: 1; }
.roadmap-progress-heading > strong > span { font-size: 1rem; }
.roadmap-readiness-bar { display: block; width: 100%; height: 12px; margin: 1rem 0; overflow: hidden; appearance: none; border: 0; border-radius: 999px; background: var(--surface-muted); color: var(--state-info); accent-color: var(--state-info); }
.roadmap-readiness-bar::-webkit-progress-bar { border-radius: inherit; background: var(--surface-muted); }
.roadmap-readiness-bar::-webkit-progress-value { border-radius: inherit; background: var(--state-info); }
.roadmap-readiness-bar::-moz-progress-bar { border-radius: inherit; background: var(--state-info); }
.roadmap-progress-facts { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 0 0 .75rem; }
.roadmap-progress-facts > div { display: flex; align-items: baseline; gap: .45rem; }
.roadmap-progress-facts dt { color: var(--text-secondary); font-size: .8rem; }
.roadmap-progress-facts dd { margin: 0; font-size: .9rem; font-weight: 750; }
.roadmap-checkpoints { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .75rem; margin: 1.15rem 0 0; padding: 0; list-style: none; }
.roadmap-checkpoints > li { min-width: 0; }
.roadmap-checkpoints a { display: flex; height: 100%; min-height: 100px; align-items: start; gap: .65rem; padding: .85rem; border: 1px solid var(--border-subtle); border-radius: 10px; color: var(--text-primary); background: var(--surface-muted); text-decoration: none; }
.roadmap-checkpoints a:hover { border-color: var(--border-strong); }
.roadmap-checkpoints .is-current a { border-color: var(--state-info-border); background: var(--state-info-soft); }
.roadmap-checkpoints .is-met a { border-color: var(--state-success-border); background: var(--state-success-soft); }
.checkpoint-number { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: 50%; font-size: .8rem; font-weight: 750; }
.is-current .checkpoint-number { color: var(--state-info); border-color: var(--state-info-border); }
.is-met .checkpoint-number { color: var(--state-success); border-color: var(--state-success-border); }
.checkpoint-copy { display: grid; min-width: 0; gap: .25rem; }
.checkpoint-copy small, .checkpoint-copy > span { color: var(--text-secondary); font-size: .75rem; line-height: 1.4; }
.checkpoint-copy strong { font-size: .9rem; line-height: 1.35; }
@media (max-width: 600px) {
    .roadmap-progress { padding: 1rem; }
    .roadmap-checkpoints { grid-template-columns: 1fr; }
    .roadmap-checkpoints a { min-height: 90px; }
    .guided-career-section > .section-heading { align-items: stretch; flex-direction: column; }
    .guided-route-count { min-width: 0; }
    .branch-roadmap-stage { grid-template-columns: 32px minmax(0, 1fr); gap: .75rem; }
    .branch-stage-marker > span { width: 28px; height: 28px; font-size: .7rem; }
    .branch-stage-marker > i { top: 28px; }
    .branch-stage-body > header { flex-direction: column; }
    .completed-stage-summary { grid-template-columns: minmax(0, 1fr); padding: .85rem; }
    .completed-stage-summary > b { grid-column: 1; grid-row: auto; justify-self: start; }
    .completed-stage-detail { padding: 0 .85rem .85rem; }
    .branch-choice-label { grid-template-columns: minmax(0, 1fr); }
    .branch-choice-label small { grid-column: 1; }
    .stage-next-action, .stage-next-action.is-empty { grid-template-columns: minmax(0, 1fr); }
    .stage-next-action .button { width: 100%; min-width: 0; white-space: normal; }
    .stage-skill-evidence > summary, .stage-resource-alternatives > summary { grid-template-columns: minmax(0, 1fr); }
    .guided-career-section .skill-node-top strong { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.35; }
    .guided-career-section .skill-node-top b { flex: none; }
    .skill-node-meta { flex-wrap: wrap; }
}

/* Pending review remains visible without a luminous paper-colored panel. */
html[data-theme="dark"] .catalog-preview-notice {
    color: #ecd28d;
    border-color: #745d27;
    border-left-color: #d1a33a;
    background: #2d2618;
}
html[data-theme="dark"] .catalog-preview-notice > span {
    color: #1a1305;
    background: #e1b64e;
}
html[data-theme="dark"] .catalog-preview-notice > a { color: #f0d789; }
html[data-theme="dark"] .review-trust-badge:not(.human-reviewed):not(.user-supplied),
html[data-theme="dark"] .lesson-meta > .review-trust-badge:not(.human-reviewed):not(.user-supplied) {
    color: #efd487;
    border-color: #745d27;
    background: #352b17;
}

/* The directory simulator intentionally imitates a light desktop program.
   Keep it light so its native-looking controls remain legible in either app theme. */
html[data-theme="dark"] .directory-simulator,
html[data-theme="dark"] .directory-simulator :where(input, select, textarea) { color-scheme: light; }
html[data-theme="dark"] .directory-simulator :where(input, select, textarea) {
    color: #20272b;
    background-color: #ffffff;
    border-color: #87969e;
}

@media (max-width: 760px) {
    .theme-toggle-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .theme-toggle { width: 36px; padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
}
/* Private subjects and recall status use the same readable surfaces in both themes. */
.deck-subjects { margin: 14px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.deck-subjects li { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px 10px; border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--text-primary); background: var(--surface-muted); font-size: 12px; }
.deck-subjects strong { color: var(--text-primary); }
.deck-subjects span, .deck-schedule-count { color: var(--text-secondary); }
.deck-recall-status { margin: 20px 0; padding: 16px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-muted); color: var(--text-primary); }
.deck-recall-status p { margin: 8px 0; color: var(--text-primary); font-size: 13px; }
.deck-editor-hero h1, .deck-editor h2, .deck-editor .account-tool-card p, .deck-recall-status strong { color: var(--text-primary); }
.deck-editor-hero .deck-editor-back { color: var(--state-success); }
.deck-editor .flashcard-import-note strong { color: var(--text-secondary); }
.study-deck-library :is(h1, h2, h3) { color: var(--text-primary); }
.study-deck-library p, .flashcard-deck header p { color: var(--text-secondary); }
.flashcard-deck .deck-copy-label { color: var(--text-secondary); }
.flashcard-deck > header > div:first-child { min-width: 0; flex: 1 1 18rem; }
.flashcard-deck .flashcard-deck-actions { flex: 0 1 auto; max-width: 100%; justify-content: flex-end; }
.deck-editor-toolbar .button, .flashcard-deck-actions .button { white-space: normal; }
.flashcard-deck .flashcard-deck-actions .button.secondary {
    color: var(--text-primary);
    background: var(--surface-raised);
    border-color: var(--border-subtle);
    transition-property: transform, box-shadow;
}
.deck-editor-toolbar .flashcard-delete { color: var(--state-danger); }
.deck-editor .flashcard-limit-note { color: var(--state-warning); background: var(--state-warning-soft); border-color: var(--state-warning-border); }
@media (max-width: 620px) { .flashcard-deck > header > div:first-child { flex-basis: auto; }.deck-subjects li { max-width: 100%; }.deck-editor-toolbar, .deck-editor-toolbar form, .deck-editor-toolbar .button { width: 100%; } }