/** * MHP Workshop — shared dark mode (trainee / module pages) * * Loaded site-wide via _quarto.yml. Quarto sets class quarto-dark on . * Trainer pages use trainer/trainer-dark.css (teal theme) in addition. * * Selector convention: body.quarto-dark … * Trainee-only scopes: html:not([data-trainer]) … where theme differs from trainer. */ /* ── Design tokens (trainee / site blue theme) ─────────────────────── */ body.quarto-dark { --mhp-ink: #e2e8f0; --mhp-muted: #94a3b8; --mhp-surface: #1e293b; --mhp-surface-deep: #0f172a; --mhp-border: #475569; --mhp-accent: #60a5fa; --mhp-accent-soft: #38bdf8; --mhp-link: #93c5fd; --mhp-success: #5eead4; --mhp-error: #fca5a5; } /* ── Module callouts ─────────────────────────────────────────────── */ body.quarto-dark .callout-time { background: rgba(0, 87, 184, 0.15); } body.quarto-dark .callout-reflect { background: rgba(37, 99, 235, 0.15); } body.quarto-dark .callout-priya { background: rgba(16, 124, 16, 0.15); } body.quarto-dark .callout-story { background: rgba(124, 58, 237, 0.15); } body.quarto-dark .callout-best-practice { background: rgba(5, 150, 105, 0.15); } body.quarto-dark .callout-pitfall { background: rgba(217, 119, 6, 0.15); } body.quarto-dark .callout-selfcheck { background: rgba(99, 102, 241, 0.15); } body.quarto-dark .video-placeholder { background: rgba(148, 163, 184, 0.08); border-color: #64748b; } /* ── Navbar trainee CTAs (Sign-In, My Workshop) ──────────────────── */ /* Navbar stays on MHP blue gradient in both themes; bump contrast in dark mode. */ body.quarto-dark .navbar .nav-link.nav-trainee { --mhp-nav-trainee-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); text-shadow: 0 1px 1px rgba(1, 6, 92, 0.35); } body.quarto-dark .navbar .nav-link.nav-trainee-signin { --mhp-nav-trainee-bg: rgba(94, 234, 212, 0.2); --mhp-nav-trainee-border: rgba(94, 234, 212, 0.62); --mhp-nav-trainee-hover-bg: rgba(94, 234, 212, 0.32); --mhp-nav-trainee-active-bg: rgba(94, 234, 212, 0.4); } body.quarto-dark .navbar .nav-link.nav-trainee-prerequisites { --mhp-nav-trainee-bg: rgba(253, 224, 71, 0.18); --mhp-nav-trainee-border: rgba(253, 224, 71, 0.55); --mhp-nav-trainee-hover-bg: rgba(253, 224, 71, 0.28); --mhp-nav-trainee-active-bg: rgba(253, 224, 71, 0.36); } body.quarto-dark .navbar .nav-link.nav-trainee-portal { --mhp-nav-trainee-bg: rgba(147, 197, 253, 0.2); --mhp-nav-trainee-border: rgba(147, 197, 253, 0.62); --mhp-nav-trainee-hover-bg: rgba(147, 197, 253, 0.32); --mhp-nav-trainee-active-bg: rgba(147, 197, 253, 0.4); } body.quarto-dark .navbar .nav-link.nav-trainee:hover, body.quarto-dark .navbar .nav-link.nav-trainee:focus-visible { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } /* Trainer pages: teal navbar — keep trainee pills readable in dark mode */ html[data-trainer] body.quarto-dark .navbar .nav-link.nav-trainee { --mhp-nav-trainee-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } html[data-trainer] body.quarto-dark .navbar .nav-link.nav-trainee-signin { --mhp-nav-trainee-bg: rgba(45, 212, 191, 0.22); --mhp-nav-trainee-border: rgba(45, 212, 191, 0.65); } html[data-trainer] body.quarto-dark .navbar .nav-link.nav-trainee-prerequisites { --mhp-nav-trainee-bg: rgba(250, 204, 21, 0.2); --mhp-nav-trainee-border: rgba(250, 204, 21, 0.58); } html[data-trainer] body.quarto-dark .navbar .nav-link.nav-trainee-portal { --mhp-nav-trainee-bg: rgba(125, 211, 252, 0.22); --mhp-nav-trainee-border: rgba(125, 211, 252, 0.65); } /* ── Logos & badges ──────────────────────────────────────────────── */ body.quarto-dark .tool-logo, body.quarto-dark .module-logo { filter: brightness(0) invert(1); } body.quarto-dark .tool-badge { background: var(--mhp-surface); color: var(--mhp-ink); } body.quarto-dark .logo-color { filter: none; } /* ── Mermaid ─────────────────────────────────────────────────────── */ /* Quarto replaces 
 with  — target both. */
body.quarto-dark .mermaid,
body.quarto-dark svg.mermaid-js {
  color: var(--mhp-ink);
}

/* Default subgraph boxes (no classDef) — light theme vars are low-contrast on dark pages. */
body.quarto-dark svg.mermaid-js g.cluster > rect {
  fill: #1e293b !important;
  stroke: #64748b !important;
}

body.quarto-dark svg.mermaid-js g.cluster .cluster-label,
body.quarto-dark svg.mermaid-js g.cluster .cluster-label span,
body.quarto-dark svg.mermaid-js g.cluster .cluster-label p {
  color: #e2e8f0 !important;
  fill: #e2e8f0 !important;
}

/* Edge labels live in foreignObject HTML — .mermaid wrapper is gone after render. */
body.quarto-dark svg.mermaid-js .labelBkg,
body.quarto-dark svg.mermaid-js span.edgeLabel,
body.quarto-dark svg.mermaid-js span.edgeLabel p {
  background: #334155 !important;
  color: #e2e8f0 !important;
}

body.quarto-dark svg.mermaid-js .edgePath .path,
body.quarto-dark svg.mermaid-js .flowchart-link {
  stroke: #94a3b8 !important;
}

body.quarto-dark svg.mermaid-js marker path {
  fill: #94a3b8 !important;
  stroke: #94a3b8 !important;
}

/* ── Homepage cards ──────────────────────────────────────────────── */
body.quarto-dark .whats-new-card {
  background: var(--mhp-surface);
  border-color: #334155;
}

body.quarto-dark .whats-new-card:hover {
  border-color: var(--mhp-accent);
}

body.quarto-dark .whats-new-card h3 {
  color: var(--mhp-link);
}

/* ── Login gate (site-wide) ──────────────────────────────────────── */
body.quarto-dark .login-gate-card {
  background: var(--mhp-surface);
  color: var(--mhp-ink);
}

body.quarto-dark .login-gate-title {
  color: #f1f5f9;
}

body.quarto-dark .login-gate-desc {
  color: var(--mhp-muted);
}

body.quarto-dark .login-gate-input {
  background: var(--mhp-surface-deep);
  border-color: #334155;
  color: var(--mhp-ink);
}

body.quarto-dark .login-gate-input:focus {
  border-color: var(--mhp-accent);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

body.quarto-dark .login-gate-toggle {
  color: #64748b;
}

body.quarto-dark .login-gate-toggle:hover {
  color: var(--mhp-muted);
  background: #334155;
}

body.quarto-dark .login-gate-hint {
  color: #64748b;
}

body.quarto-dark .login-gate-label {
  color: #cbd5e1;
}

body.quarto-dark .login-gate-select {
  background: #1e293b;
  border-color: #475569;
  color: #f1f5f9;
}

body.quarto-dark .login-gate-select:focus {
  outline-color: #60a5fa;
}

body.quarto-dark .login-gate-error {
  color: #fca5a5;
}

body.quarto-dark .mhp-vercel-preview-banner {
  background: #1e3a5f;
  border-color: #2563eb;
  color: #bfdbfe;
}

body.quarto-dark .mhp-vercel-preview-banner a {
  color: #7dd3fc;
}

/* ── Sidebar & page chrome (trainee pages) ───────────────────────── */
html:not([data-trainer]) body.quarto-dark #quarto-sidebar,
html:not([data-trainer]) body.quarto-dark .sidebar-navigation,
html:not([data-trainer]) body.quarto-dark #quarto-sidebar .sidebar-menu-container {
  background: var(--mhp-surface-deep) !important;
  border-color: var(--mhp-border) !important;
}

html:not([data-trainer]) body.quarto-dark #quarto-sidebar .sidebar-item-text,
html:not([data-trainer]) body.quarto-dark #quarto-sidebar a.sidebar-item-text {
  color: var(--mhp-muted) !important;
}

html:not([data-trainer]) body.quarto-dark #quarto-sidebar a.active,
html:not([data-trainer]) body.quarto-dark #quarto-sidebar a.sidebar-link.active,
html:not([data-trainer]) body.quarto-dark #quarto-sidebar .sidebar-item-text.active {
  color: var(--mhp-accent-soft) !important;
  font-weight: 600 !important;
  background: rgba(96, 165, 250, 0.12) !important;
  border-left: 3px solid var(--mhp-accent-soft) !important;
  border-radius: 0 6px 6px 0;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.2);
  padding: 0.35rem 0.55rem 0.35rem 0.6rem !important;
  margin: 0.12rem 0;
}

html:not([data-trainer]) body.quarto-dark .sidebar-item-section .sidebar-section-text {
  color: #64748b !important;
}

html:not([data-trainer]) body.quarto-dark nav.quarto-secondary-nav,
html:not([data-trainer]) body.quarto-dark #quarto-header .quarto-secondary-nav {
  background: var(--mhp-surface) !important;
  border-color: var(--mhp-border) !important;
}

html:not([data-trainer]) body.quarto-dark .quarto-secondary-nav .nav-link {
  color: var(--mhp-muted) !important;
}

html:not([data-trainer]) body.quarto-dark .quarto-secondary-nav .nav-link.active,
html:not([data-trainer]) body.quarto-dark .quarto-secondary-nav .nav-link:hover {
  color: var(--mhp-ink) !important;
}

/* ── Quarto callouts (trainee / module pages only) ───────────────── */
html:not([data-trainer]) body.quarto-dark #quarto-document-content .callout,
html:not([data-trainer]) body.quarto-dark #quarto-document-content .callout-body,
html:not([data-trainer]) body.quarto-dark #quarto-document-content .callout-header,
html:not([data-trainer]) body.quarto-dark #quarto-document-content .callout-title-container,
html:not([data-trainer]) body.quarto-dark #quarto-document-content .callout-caption-body {
  color: var(--mhp-ink) !important;
}

html:not([data-trainer]) body.quarto-dark #quarto-document-content .callout-header {
  background: transparent !important;
}

html:not([data-trainer]) body.quarto-dark #quarto-document-content .callout-tip {
  background: rgba(14, 116, 144, 0.18) !important;
  border-color: #22d3ee !important;
}

html:not([data-trainer]) body.quarto-dark #quarto-document-content .callout-important {
  background: rgba(217, 119, 6, 0.14) !important;
  border-color: #fbbf24 !important;
}

html:not([data-trainer]) body.quarto-dark #quarto-document-content .callout-note {
  background: rgba(59, 130, 246, 0.14) !important;
  border-color: #60a5fa !important;
}

html:not([data-trainer]) body.quarto-dark #quarto-document-content .callout-warning,
html:not([data-trainer]) body.quarto-dark #quarto-document-content .callout-caution {
  background: rgba(220, 38, 38, 0.14) !important;
  border-color: #f87171 !important;
}

/* ── Tables (trainee content) ──────────────────────────────────── */
html:not([data-trainer]) body.quarto-dark #quarto-document-content table thead th {
  background: #334155;
  color: #93c5fd;
  border-color: var(--mhp-border);
}

html:not([data-trainer]) body.quarto-dark #quarto-document-content table tbody td,
html:not([data-trainer]) body.quarto-dark #quarto-document-content table tbody th {
  color: var(--mhp-ink);
  border-color: var(--mhp-border);
}

html:not([data-trainer]) body.quarto-dark #quarto-document-content table tbody tr:nth-child(even) {
  background: rgba(51, 65, 85, 0.35);
}

html:not([data-trainer]) body.quarto-dark #quarto-document-content table tbody tr:hover {
  background: rgba(96, 165, 250, 0.1);
}

/* ── Panel tabsets ───────────────────────────────────────────────── */
html:not([data-trainer]) body.quarto-dark .panel-tabset .nav-tabs {
  border-bottom-color: var(--mhp-border);
}

html:not([data-trainer]) body.quarto-dark .panel-tabset .nav-tabs .nav-link {
  color: var(--mhp-muted);
  background: var(--mhp-surface-deep);
  border-color: var(--mhp-border);
}

html:not([data-trainer]) body.quarto-dark .panel-tabset .nav-tabs .nav-link.active,
html:not([data-trainer]) body.quarto-dark .panel-tabset .nav-tabs .nav-link:hover {
  color: var(--mhp-ink);
  background: var(--mhp-surface);
  border-color: var(--mhp-border);
}

html:not([data-trainer]) body.quarto-dark .panel-tabset .tab-content {
  border-color: var(--mhp-border);
}

/* ── Quiz / reflection form callout ─────────────────────────────── */
body.quarto-dark .callout-form {
  background: rgba(124, 58, 237, 0.15);
  border-left-color: #a78bfa;
  color: var(--mhp-ink);
}

/* ── Slide embed labels ──────────────────────────────────────────── */
body.quarto-dark .slide-label {
  color: #2dd4bf;
}

html:not([data-trainer]) body.quarto-dark #quarto-document-content code:not(.sourceCode) {
  background: #334155;
  color: var(--mhp-ink);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* ── App shell loading overlay ───────────────────────────────────── */
body.quarto-dark .mhp-app-loading-overlay {
  background: rgba(15, 23, 42, 0.65);
}
body.quarto-dark .mhp-app-loading-panel {
  background: rgba(30, 41, 59, 0.95);
  border-color: var(--mhp-border);
  color: var(--mhp-ink);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
body.quarto-dark .mhp-app-loading-spinner {
  border-color: #475569;
  border-top-color: var(--mhp-accent-soft);
}

/* ── Trainee portal & sign-in (My Workshop, Workshop Check-In) ────── */
body.quarto-dark .tp-cohort-line {
  background: rgba(14, 165, 233, 0.14);
  border-color: rgba(56, 189, 248, 0.5);
  color: var(--mhp-ink);
}

body.quarto-dark .tp-cohort-line strong {
  color: var(--mhp-accent-soft);
}

body.quarto-dark .tp-cohort-value {
  color: #e0f2fe;
}

body.quarto-dark .slide-embed figcaption {
  color: var(--mhp-muted);
}

body.quarto-dark .slide-embed figure {
  outline: 1px solid var(--mhp-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

body.quarto-dark .tp-muted {
  color: var(--mhp-muted);
}

body.quarto-dark .tp-message:not(.tp-error) {
  color: var(--mhp-success);
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(52, 211, 153, 0.45);
}

body.quarto-dark .tp-message.tp-error {
  color: var(--mhp-error);
  background: rgba(127, 29, 29, 0.35);
  border-color: rgba(248, 113, 113, 0.45);
}

body.quarto-dark .tp-facilitator-bar {
  background: var(--mhp-surface);
  border-color: var(--mhp-border);
}

body.quarto-dark .tp-dashboard-loading {
  background: var(--mhp-surface);
  border-color: var(--mhp-border);
}

body.quarto-dark .tp-field-label {
  color: #cbd5e1;
}

body.quarto-dark .tp-manual-cohort summary {
  color: var(--mhp-accent-soft);
}

body.quarto-dark .tp-name-btn {
  background: var(--mhp-surface);
  border-color: var(--mhp-border);
  color: var(--mhp-ink);
}

body.quarto-dark .tp-name-btn-pending:hover {
  border-color: var(--mhp-accent-soft);
  background: var(--mhp-surface-deep);
}

body.quarto-dark .tp-name-btn-signed-in {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(52, 211, 153, 0.45);
  color: #a7f3d0;
}

body.quarto-dark .tp-name-btn-signed-in:hover {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(52, 211, 153, 0.6);
}

body.quarto-dark .tp-name-status {
  color: #6ee7b7;
}

body.quarto-dark .tp-name-status-pending {
  color: var(--mhp-accent-soft);
}

body.quarto-dark .tp-input,
body.quarto-dark .tp-select {
  background: var(--mhp-surface);
  border-color: var(--mhp-border);
  color: var(--mhp-ink);
}

body.quarto-dark .tp-select {
  color-scheme: dark;
}

body.quarto-dark .tp-input::placeholder {
  color: #64748b;
}

body.quarto-dark .tp-copy-block {
  border-color: var(--mhp-border);
}

body.quarto-dark .tp-copy-head {
  background: #334155;
  color: var(--mhp-ink);
}

body.quarto-dark .tp-copy-btn {
  background: var(--mhp-surface);
  border-color: #64748b;
  color: var(--mhp-ink);
}

body.quarto-dark .tp-copy-value {
  background: var(--mhp-surface-deep);
  color: #cbd5e1;
}

body.quarto-dark .tp-locked {
  background: #422006;
  border-color: #b45309;
  color: #fcd34d;
}

body.quarto-dark .tp-vercel-banner {
  background: #1e3a5f;
  border-color: #2563eb;
  color: #bfdbfe;
}

body.quarto-dark .tp-vercel-banner a {
  color: #7dd3fc;
}

body.quarto-dark .si-success {
  background: #064e3b;
  border-color: #059669;
  color: #a7f3d0;
}

body.quarto-dark .si-success h3 {
  color: #6ee7b7;
}

body.quarto-dark .si-role-pick {
  background: #1e293b;
  border-color: #334155;
}

body.quarto-dark .si-closed-banner {
  background: #450a0a;
  border-color: #991b1b;
  color: #fecaca;
}

body.quarto-dark .setup-doc-nav {
  background: #1e293b;
  border-color: #334155;
}
body.quarto-dark .setup-doc-nav__label {
  color: #94a3b8;
}
body.quarto-dark .setup-doc-nav a {
  background: #0f172a;
  border-color: #475569;
  color: #7dd3fc;
}
body.quarto-dark .setup-doc-nav a:hover {
  background: #1e3a5f;
  border-color: #38bdf8;
}
body.quarto-dark .setup-doc-section {
  background: #1e293b;
  border-color: #334155;
  border-left-color: #38bdf8;
}
body.quarto-dark .setup-doc-section > h2:first-child {
  border-bottom-color: #334155;
  color: #f1f5f9;
}
body.quarto-dark .setup-doc-section > h3:not(:first-child) {
  border-top-color: #334155;
}
body.quarto-dark .setup-doc-nav.is-stuck {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border-color: #475569;
}
body.quarto-dark .setup-doc-nav a.is-active {
  background: #38bdf8;
  border-color: #38bdf8;
  color: #0f172a;
}
body.quarto-dark .setup-doc-collapse__summary::before {
  border-color: #38bdf8;
}
body.quarto-dark details.setup-doc-collapse.setup-doc-section > .setup-doc-collapse__summary {
  color: #f1f5f9;
  border-bottom-color: #334155;
}
body.quarto-dark details.setup-doc-collapse.setup-doc-subsection > .setup-doc-collapse__summary {
  color: #e2e8f0;
  border-bottom-color: #334155;
}
body.quarto-dark .setup-doc-collapse__meta {
  color: #94a3b8;
}
body.quarto-dark .content-gate-card {
  background: var(--mhp-surface);
  border-color: var(--mhp-border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

body.quarto-dark .content-gate-title {
  color: #f1f5f9;
}

body.quarto-dark .content-gate-desc,
body.quarto-dark .content-gate-date,
body.quarto-dark .content-gate-meta {
  color: var(--mhp-muted);
}

body.quarto-dark .content-gate-btn-muted {
  background: #334155;
  color: var(--mhp-ink);
  border-color: #475569;
}

body.quarto-dark .content-gate-hint {
  color: #64748b;
}

body.quarto-dark .setup-doc-subsection,
body.quarto-dark details.setup-doc-collapse.setup-doc-subsection {
  background: #0f172a;
  border-color: #334155;
}

body.quarto-dark .setup-doc-subsection > h3:first-child,
body.quarto-dark .setup-doc-subsection > h4:first-child {
  color: #f1f5f9;
}

/* ── Lab source files (download + copy viewer) ───────────────────── */
body.quarto-dark .lab-sources-meta,
body.quarto-dark .lab-sources-loading {
  color: var(--mhp-muted);
}

body.quarto-dark .lab-sources-bundle {
  background: var(--mhp-surface);
  border-color: var(--mhp-border);
}

body.quarto-dark .lab-sources-bundle-title {
  color: #f1f5f9;
}

body.quarto-dark .lab-sources-bundle-meta {
  color: var(--mhp-muted);
}

body.quarto-dark .lab-sources-download-btn {
  background: #0d9488;
  color: #f0fdfa !important;
}

body.quarto-dark .lab-sources-download-btn:hover {
  background: #14b8a6;
}

body.quarto-dark .lab-sources-view-list summary {
  color: var(--mhp-success);
}

body.quarto-dark .lab-sources-view-btn {
  background: var(--mhp-surface-deep);
  border-color: var(--mhp-border);
  color: var(--mhp-ink);
}

body.quarto-dark .lab-sources-view-btn:hover {
  border-color: #14b8a6;
  background: #134e4a;
}

body.quarto-dark .lab-sources-file-size {
  color: var(--mhp-muted);
}

body.quarto-dark .lab-sources-viewer {
  background: var(--mhp-surface-deep);
  border-color: var(--mhp-border);
}

body.quarto-dark .lab-sources-viewer-toolbar {
  background: var(--mhp-surface);
  border-bottom-color: var(--mhp-border);
}

body.quarto-dark .lab-sources-copy-btn {
  background: var(--mhp-surface-deep);
  border-color: var(--mhp-border);
  color: var(--mhp-ink);
}

body.quarto-dark .lab-sources-copy-btn:hover {
  border-color: #14b8a6;
  background: #134e4a;
}

body.quarto-dark .lab-sources-copy-status {
  color: var(--mhp-success);
}

body.quarto-dark .lab-sources-code {
  background: #020617;
  color: #e2e8f0;
  border-top: 1px solid var(--mhp-border);
}

body.quarto-dark .lab-sources-error {
  color: var(--mhp-error);
}

body.quarto-dark .lab-sources-noscript {
  color: var(--mhp-muted);
}