/* =============================================================================
   Dark theme (2026-10-04). Applied when <html data-theme="dark"> (Settings → Appearance,
   saved on the profile; "Match my device" follows the system setting). Loaded last.
   The forest bands keep their colours; surfaces, text and lines change.
   ============================================================================= */
html[data-theme="dark"] {
  color-scheme: dark;
  --d-bg: #0A1411;
  --d-canvas: #0D1915;
  --d-surface: #12201B;
  --d-surface-2: #172822;
  --d-line: #22362E;
  --d-line-2: #2C443A;
  --d-ink: #EEF6F2;
  --d-text: #C9D8D1;
  --d-muted: #8FA59B;
  --d-brand: #34D399;
  --d-brand-2: #6EE7B7;
  --d-mint: #0F2A21;
  --surface: var(--d-surface);
  --surface-muted: var(--d-canvas);
  --surface-soft: var(--d-bg);
  --surface-glass: rgba(18, 32, 27, .9);
  --border-soft: rgba(148, 163, 184, .14);
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, .35);
  --text-primary: var(--d-ink);
  --text-secondary: var(--d-text);
  --text-muted: var(--d-muted);
  --brand-primary: var(--d-brand);
  --brand-primary-dark: var(--d-brand-2);
}
html[data-theme="dark"] body { background: var(--d-bg); color: var(--d-text); }
html[data-theme="dark"] body::before { background: none; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--d-ink); }
html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] td, html[data-theme="dark"] label { color: inherit; }
html[data-theme="dark"] a { color: var(--d-brand); }
html[data-theme="dark"] a:hover { color: var(--d-brand-2); }
html[data-theme="dark"] hr { border-color: var(--d-line); }

/* navbar, wrapper, footer */
html[data-theme="dark"] .navbar.site-navbar { background: rgba(13, 25, 21, .94); box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link { color: var(--d-text); }
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover, html[data-theme="dark"] .navbar-light .navbar-nav .active > .nav-link { color: var(--d-ink); }
html[data-theme="dark"] .navbar-light .navbar-toggler-icon { filter: invert(1); }
html[data-theme="dark"] .navbar .logo { filter: brightness(1.9) saturate(.85); }
html[data-theme="dark"] .content-wrapper { background: var(--d-surface); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .tab-content { background: var(--d-surface); border-color: var(--d-line) !important; }
html[data-theme="dark"] footer { background: #060D0B; }

/* Bootstrap pieces */
html[data-theme="dark"] .card, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .bg-white, html[data-theme="dark"] .popover { background: var(--d-surface); color: var(--d-text); border-color: var(--d-line); }
html[data-theme="dark"] .bg-light { background: var(--d-surface-2) !important; }
html[data-theme="dark"] .dropdown-item { color: var(--d-text); }
html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background: var(--d-surface-2); color: var(--d-ink); }
html[data-theme="dark"] .text-dark { color: var(--d-ink) !important; }
html[data-theme="dark"] .text-muted { color: var(--d-muted) !important; }
html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom { border-color: var(--d-line) !important; }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .custom-select, html[data-theme="dark"] select.form-control,
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="search"], html[data-theme="dark"] textarea {
  background-color: var(--d-canvas); color: var(--d-ink); border-color: var(--d-line-2);
}
html[data-theme="dark"] .form-control:focus { background-color: var(--d-canvas); color: var(--d-ink); border-color: var(--d-brand); box-shadow: 0 0 0 .2rem rgba(52, 211, 153, .2); }
html[data-theme="dark"] .form-control::placeholder { color: #6B8178; }
html[data-theme="dark"] .table { color: var(--d-text); }
html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { border-color: var(--d-line); }
html[data-theme="dark"] .table-hover tbody tr:hover, html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .03); color: var(--d-ink); }
html[data-theme="dark"] .alert-info { background: #0E2530; color: #A5D8EA; border-color: #164052; }
html[data-theme="dark"] .alert-warning { background: #2A2210; color: #F3D98B; border-color: #4A3A12; }
html[data-theme="dark"] .alert-success { background: #0F2A21; color: #A7F3D0; border-color: #1C4535; }
html[data-theme="dark"] .alert-danger { background: #2D1414; color: #FCA5A5; border-color: #4C1D1D; }
html[data-theme="dark"] .btn-outline-success, html[data-theme="dark"] .btn-outline-secondary { color: var(--d-brand); border-color: var(--d-line-2); background: transparent; }
html[data-theme="dark"] .btn-outline-success:hover, html[data-theme="dark"] .btn-outline-secondary:hover { background: var(--d-surface-2); color: var(--d-ink); }
html[data-theme="dark"] .btn-light { background: var(--d-surface-2); color: var(--d-ink); border-color: var(--d-line-2); }
html[data-theme="dark"] .close { color: var(--d-ink); text-shadow: none; }
html[data-theme="dark"] .badge-light, html[data-theme="dark"] .bg-light.text-success { background: var(--d-surface-2) !important; }
html[data-theme="dark"] .spinner-border { color: var(--d-brand); }

/* the app's shared look (pf-ui.css) */
html[data-theme="dark"] .pf-ui {
  --pf-ink: var(--d-ink); --pf-text: var(--d-text); --pf-muted: var(--d-muted); --pf-line: var(--d-line);
  --pf-line-strong: var(--d-line-2); --pf-line-green: var(--d-line-2); --pf-wash: var(--d-mint); --pf-brand: var(--d-brand);
  --pf-brand-dark: var(--d-brand-2); --pf-canvas: var(--d-canvas); --pf-section: var(--d-surface-2);
  --pf-neg: #F87171; --pf-pos: var(--d-brand);
  background: var(--d-canvas); color: var(--d-text);
}
html[data-theme="dark"] .pf-ui .tab-content, html[data-theme="dark"] .pf-ui .pf-panel { background: var(--d-surface) !important; box-shadow: none !important; }
html[data-theme="dark"] .pf-top h4 { color: var(--d-brand-2); }
html[data-theme="dark"] .pf-ui .pf-tabs .nav-link { color: var(--d-text); background: transparent; border-color: transparent; }
html[data-theme="dark"] .pf-ui .pf-tabs .nav-link.active { background: var(--d-surface) !important; color: var(--d-brand-2) !important; }
html[data-theme="dark"] .pf-ui .pf-tabs .nav-link:not(.active) { color: var(--d-text) !important; }

/* component scopes that define their own colours (home, about, compare, settings, coach picker, profile) */
html[data-theme="dark"] .pf-home, html[data-theme="dark"] .pf-about2, html[data-theme="dark"] .pf-cmp, html[data-theme="dark"] .pf-set {
  --ink: var(--d-ink); --muted: var(--d-muted); --mint: var(--d-mint); --brand: var(--d-brand); color: var(--d-text);
}
html[data-theme="dark"] .pf-home p, html[data-theme="dark"] .pf-about2 p, html[data-theme="dark"] .pf-about2 li { color: var(--d-text); }
html[data-theme="dark"] .pf-home h1, html[data-theme="dark"] .pf-home h2, html[data-theme="dark"] .pf-home h3,
html[data-theme="dark"] .pf-about2 h1, html[data-theme="dark"] .pf-about2 h2, html[data-theme="dark"] .pf-about2 h3 { color: var(--d-ink); }
html[data-theme="dark"] .pf-home .ph-hero h1, html[data-theme="dark"] .pf-about2 .pa-hero h1 { color: #fff; }

/* white cards → dark surfaces */
html[data-theme="dark"] .pf-home .ph-chart, html[data-theme="dark"] .pf-home .ph-tool, html[data-theme="dark"] .pf-home .ph-dial,
html[data-theme="dark"] .pf-home .ph-demo__result, html[data-theme="dark"] .pf-set .pf-card, html[data-theme="dark"] .pf-cmp .pf-cmp__group.is-age,
html[data-theme="dark"] .pc .pc-tile, html[data-theme="dark"] .pc .pc-sample, html[data-theme="dark"] .pf-section-card,
html[data-theme="dark"] .pf-about2 .pa-questions li, html[data-theme="dark"] .pf-set .btn-pf-outline, html[data-theme="dark"] .auth-card {
  background: var(--d-surface); border-color: var(--d-line); color: var(--d-text);
}
html[data-theme="dark"] .pf-home .ph-band--mint, html[data-theme="dark"] .pf-home .ph-demo__controls, html[data-theme="dark"] .pf-home .ph-demo__read,
html[data-theme="dark"] .pf-home .ph-bubble, html[data-theme="dark"] .pf-home .ph-chart__note, html[data-theme="dark"] .pf-about2 .pa-band,
html[data-theme="dark"] .pf-about2 .pa-compare .then, html[data-theme="dark"] .pc .pc-panel, html[data-theme="dark"] .pf-set .pf-seg,
html[data-theme="dark"] .pf-cmp .pf-seg, html[data-theme="dark"] .pf-cmp tr.pf-cmp__section td {
  background: var(--d-surface-2); color: var(--d-text);
}
html[data-theme="dark"] .pf-cmp tr.pf-cmp__section.is-more td { background: #2A2210; color: #F3D98B; }
html[data-theme="dark"] .pf-cmp tbody td { border-color: var(--d-line); }
html[data-theme="dark"] .pf-cmp .pf-cmp__track i.bench { background: #3B5249; }
html[data-theme="dark"] .pf-cmp .pf-chip.above, html[data-theme="dark"] .pf-set .pf-chip.part { background: #3A2E10; color: #FCD34D; }
html[data-theme="dark"] .pf-cmp .pf-chip.below, html[data-theme="dark"] .pf-set .pf-chip.done { background: #0F3226; color: #6EE7B7; }
html[data-theme="dark"] .pf-cmp .pf-chip.similar, html[data-theme="dark"] .pf-set .pf-chip.todo { background: var(--d-surface-2); color: var(--d-muted); }
html[data-theme="dark"] .pf-cmp .pf-cmp__alert { background: #2A2210; border-color: #4A3A12; color: #F3D98B; }
html[data-theme="dark"] .pf-cmp .pf-cmp__h, html[data-theme="dark"] .pf-set .pf-card h5 { color: var(--d-brand-2); }
html[data-theme="dark"] .pf-set .pf-rows li, html[data-theme="dark"] .pf-cmp .pf-cmp__tag { border-color: var(--d-line); }
html[data-theme="dark"] .pf-set .pf-rows .t, html[data-theme="dark"] .pc .pc-tile b, html[data-theme="dark"] .pf-home .ph-field label { color: var(--d-ink); }
html[data-theme="dark"] .pc .pc-tile.is-on { background: var(--d-mint); border-color: var(--d-brand); box-shadow: inset 3px 0 0 var(--d-brand); }
html[data-theme="dark"] .pc .pc-who b, html[data-theme="dark"] .pc .pc-sample, html[data-theme="dark"] .pf-home .ph-demo__headline,
html[data-theme="dark"] .pf-home .ph-demo__read p, html[data-theme="dark"] .pf-home .ph-bubble, html[data-theme="dark"] .pf-home .ph-chart__note,
html[data-theme="dark"] .pf-home .ph-q, html[data-theme="dark"] .pf-home .ph-field output { color: var(--d-brand-2); }
html[data-theme="dark"] .pc .pc-intro, html[data-theme="dark"] .pc .pc-slider label { color: var(--d-text); }
html[data-theme="dark"] .pf-set .pf-danger__body { background: #2D1414; border-color: #4C1D1D; color: #FCA5A5; }
html[data-theme="dark"] .pf-set .pf-danger__body a { color: #FCA5A5; }
html[data-theme="dark"] .pf-set .pf-switch span { background: #3B5249; }
html[data-theme="dark"] .pf-set .pf-seg button, html[data-theme="dark"] .pf-cmp .pf-seg button { color: var(--d-text); }
html[data-theme="dark"] .pf-home .ph-q span, html[data-theme="dark"] .pf-home .ph-small, html[data-theme="dark"] .pf-home .ph-assume { color: var(--d-muted); }
html[data-theme="dark"] .pf-home .ph-assume b { color: var(--d-ink); }
html[data-theme="dark"] .pf-home section + section, html[data-theme="dark"] .pf-home .ph-q, html[data-theme="dark"] .pf-about2 section + section { border-color: var(--d-line); }

/* charts drawn in SVG on the home page */
html[data-theme="dark"] .pf-home svg line[stroke="#E3F1EA"] { stroke: var(--d-line); }
html[data-theme="dark"] .pf-home svg text[fill="#64748B"], html[data-theme="dark"] .pf-home svg g[fill="#64748B"] { fill: var(--d-muted); }

/* gold calls to action keep their colour */
html[data-theme="dark"] .pf-home .ph-hero .btn-success, html[data-theme="dark"] .pf-home .ph-cta .btn,
html[data-theme="dark"] .navbar .signup-btn { background: #FCD34D !important; color: #3B2A05 !important; }
html[data-theme="dark"] .pf-home .ph-hero .btn-success:hover, html[data-theme="dark"] .pf-home .ph-cta .btn:hover { background: #FBBF24 !important; }