/* ==========================================================================
   SECTION 1: SHARED DARK BASE
   Byte-identical on all seven CREU sites (the five universities, IC and Courses).
   Edit creuniversity.com's copy, then copy this section to the other six.

   Dark mode follows the visitor's OS setting; there is no toggle. Everything in this
   file sits inside @media screen and (prefers-color-scheme: dark), and the <link>
   that loads it carries media="(prefers-color-scheme: dark)", so light mode is never
   touched. The "screen" part keeps printouts on the normal light styles.

   1a is Bootstrap 5.3.8's own dark color mode, copied from bootstrap.min.css
   ([data-bs-theme=dark] rules; this is what Bootstrap produces when compiled with
   $color-mode-type: media-query), with page/surface/text/link values taken from the
   --dm-* tokens below. Bootstrap's carousel dark block is left out on purpose
   (it turns carousel controls dark on top of photos).
   1b fixes Bootstrap utilities and components that keep a fixed light-mode color
   even in Bootstrap's own dark mode.
   ========================================================================== */
@media screen and (prefers-color-scheme: dark) {
  /* 1a. Design tokens. Contrast on --dm-bg: text 11.6:1, heading 14.4:1, muted 8.1:1,
     accent 7.0:1 (6.1:1 on --dm-surface). Brand fills keep their light-mode color so
     white button text stays readable; only text-colored brand uses get --dm-accent. */
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --dm-bg: #1b1e22;
    --dm-surface: #25292e;
    --dm-surface-2: #2b3035;
    --dm-border: #3a4047;
    --dm-text: #d3d7dc;
    --dm-heading: #eceef0;
    --dm-muted: #adb5bd;
    --dm-accent: #8aa8e0;
    --dm-accent-hover: #adc3ec;
    --dm-accent-soft: rgba(138, 168, 224, .16);
    --dm-brand-fill: #31539b;
    --dm-brand-fill-hover: #3a62b5;
    --dm-danger-text: #ef8a80;
    --dm-footer-bg: #141619;
    --dm-logo-plate: rgba(255, 255, 255, .92);

    /* Bootstrap 5.3.8 dark color mode variables */
    --bs-body-color: var(--dm-text);
    --bs-body-color-rgb: 211,215,220;
    --bs-body-bg: var(--dm-bg);
    --bs-body-bg-rgb: 27,30,34;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255,255,255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222,226,230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52,58,64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222,226,230;
    --bs-tertiary-bg: var(--dm-surface);
    --bs-tertiary-bg-rgb: 37,41,46;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: var(--dm-accent);
    --bs-link-hover-color: var(--dm-accent-hover);
    --bs-link-color-rgb: 138,168,224;
    --bs-link-hover-color-rgb: 173,195,236;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
    --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
    /* Bootstrap's focus ring (rgba(13,110,253,.25)) is about 1.3:1 on the dark page */
    --bs-focus-ring-color: rgba(138, 168, 224, .5);
  }
  :where(:root:not([data-theme="light"])) .form-select {--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
  :where(:root:not([data-theme="light"])) .form-switch .form-check-input:not(:checked):not(:focus) {--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e")}
  :where(:root:not([data-theme="light"])) .navbar-toggler-icon {--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
  :where(:root:not([data-theme="light"])) .accordion-button::after {--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")}

  /* 1b. Bootstrap utilities that its own dark mode leaves fixed. "White" and "light"
     panels become dark panels and dark text becomes light text. Text that sits on a
     colored Bootstrap background (badge bg-warning text-dark and the like) keeps its color. */
  :where(:root:not([data-theme="light"])) .bg-white { background-color: var(--bs-body-bg) !important; }
  :where(:root:not([data-theme="light"])) .bg-light { background-color: var(--bs-tertiary-bg) !important; }
  :where(:root:not([data-theme="light"])) .text-dark:not([class*="bg-"]), :where(:root:not([data-theme="light"])) .text-dark.bg-white, :where(:root:not([data-theme="light"])) .text-dark.bg-light, :where(:root:not([data-theme="light"])) .text-dark.bg-body,
  :where(:root:not([data-theme="light"])) .text-black:not([class*="bg-"]), :where(:root:not([data-theme="light"])) .text-black.bg-white, :where(:root:not([data-theme="light"])) .text-black.bg-light, :where(:root:not([data-theme="light"])) .text-black.bg-body {
    color: var(--bs-emphasis-color) !important;
  }
  :where(:root:not([data-theme="light"])) .text-primary { color: var(--dm-accent) !important; }
  /* Bootstrap keeps its light-mode #198754 / #dc3545 / #6c757d for these (3.6 to 3.7:1
     on the dark page); use its own dark "text emphasis" shades instead. */
  :where(:root:not([data-theme="light"])) .text-success { color: var(--bs-success-text-emphasis) !important; }
  :where(:root:not([data-theme="light"])) .text-danger { color: var(--dm-danger-text) !important; }
  :where(:root:not([data-theme="light"])) .text-secondary { color: var(--bs-secondary-color) !important; }
  :where(:root:not([data-theme="light"])) .blockquote-footer { color: var(--bs-secondary-color); }
  :where(:root:not([data-theme="light"])) .link-dark { color: var(--bs-emphasis-color) !important; text-decoration-color: rgba(255, 255, 255, .5) !important; }
  :where(:root:not([data-theme="light"])) .border-dark { border-color: var(--bs-border-color) !important; }
  :where(:root:not([data-theme="light"])) .btn-outline-dark {
    --bs-btn-color: #dee2e6; --bs-btn-border-color: #adb5bd;
    --bs-btn-hover-color: #212529; --bs-btn-hover-bg: #dee2e6; --bs-btn-hover-border-color: #dee2e6;
    --bs-btn-active-color: #212529; --bs-btn-active-bg: #dee2e6; --bs-btn-active-border-color: #dee2e6;
  }
  :where(:root:not([data-theme="light"])) .btn-outline-secondary {
    --bs-btn-color: #adb5bd; --bs-btn-border-color: #adb5bd; --bs-btn-disabled-color: #adb5bd;
  }
  /* Bootstrap's dark mode keeps #dc3545 text and border here (3.2 to 3.7:1); the red fill on hover stays. */
  :where(:root:not([data-theme="light"])) .btn-outline-danger {
    --bs-btn-color: var(--dm-danger-text); --bs-btn-border-color: var(--dm-danger-text);
    --bs-btn-disabled-color: var(--dm-danger-text); --bs-btn-disabled-border-color: var(--dm-danger-text);
  }
  :where(:root:not([data-theme="light"])) .pagination { --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(138, 168, 224, .5); }
  /* Bootstrap hard-codes the field focus glow as rgba(13,110,253,.25), which barely shows on dark */
  :where(:root:not([data-theme="light"])) .form-control:focus, :where(:root:not([data-theme="light"])) .form-select:focus, :where(:root:not([data-theme="light"])) .form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(138, 168, 224, .35); }
  /* Video and podcast players are light-scheme pages with a transparent background. On a
     dark page Chrome paints a white backdrop behind a light-scheme frame, which showed as
     white bars around players not sized to 16:9, a white flash before Vimeo paints, white
     corners around Transistor's rounded player and a white box around a dead Wistia embed.
     Marking these frames light lets the dark page show through instead. Only these hosts:
     forms and other embeds keep their white backdrop because they rely on it. */
  :where(:root:not([data-theme="light"])) iframe[src*="player.vimeo.com"], :where(:root:not([data-theme="light"])) iframe[src*="youtube.com/embed"],
  :where(:root:not([data-theme="light"])) iframe[src*="youtube-nocookie.com/embed"], :where(:root:not([data-theme="light"])) iframe[src^="https://share.transistor.fm/"],
  :where(:root:not([data-theme="light"])) iframe[src*="fast.wistia.net"], :where(:root:not([data-theme="light"])) iframe[src*="fast.wistia.com"] { color-scheme: light; }
  /* Third-party forms, chats and webinar players draw dark text on a see-through page. Chrome
     paints a white backdrop behind them on a dark page; Safari and Firefox may not, so they get
     an explicit white background (the same look Chrome gives them). */
  :where(:root:not([data-theme="light"])) iframe[src*="infusionsoft"], :where(:root:not([data-theme="light"])) iframe[src*="keap"], :where(:root:not([data-theme="light"])) iframe[src*="deadsimplechat"],
  :where(:root:not([data-theme="light"])) iframe[src*="iteleseminar"], :where(:root:not([data-theme="light"])) iframe[src*="tubesnack"], :where(:root:not([data-theme="light"])) iframe[src*="demio"],
  :where(:root:not([data-theme="light"])) iframe[src*="google.com/maps"], :where(:root:not([data-theme="light"])) iframe[src*="recaptcha"] { background-color: #fff; }
  /* Fields with no styling of their own (raw Keap form HTML): the UA dark placeholder is 2.4:1 */
  :where(:root:not([data-theme="light"])) ::placeholder { color: var(--bs-secondary-color); opacity: 1; }
  /* Panels Bootstrap paints in a fixed light color: dark text stays on them. */
  :where(:root:not([data-theme="light"])) .bg-warning:not([class*="text-"]), :where(:root:not([data-theme="light"])) .bg-info:not([class*="text-"]) { color: #212529; }
  :where(:root:not([data-theme="light"])) .table-light {
    --bs-table-color: var(--bs-emphasis-color); --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-secondary-bg);
    --bs-table-striped-color: var(--bs-emphasis-color); --bs-table-hover-bg: var(--bs-secondary-bg);
    --bs-table-hover-color: var(--bs-emphasis-color);
  }
}
/* dark-mode: forced copy for the footer switch (generated by theme_override.py; edit the block above) */
@media screen {
  /* 1a. Design tokens. Contrast on --dm-bg: text 11.6:1, heading 14.4:1, muted 8.1:1,
     accent 7.0:1 (6.1:1 on --dm-surface). Brand fills keep their light-mode color so
     white button text stays readable; only text-colored brand uses get --dm-accent. */
  :root:where([data-theme="dark"]) {
    color-scheme: dark;
    --dm-bg: #1b1e22;
    --dm-surface: #25292e;
    --dm-surface-2: #2b3035;
    --dm-border: #3a4047;
    --dm-text: #d3d7dc;
    --dm-heading: #eceef0;
    --dm-muted: #adb5bd;
    --dm-accent: #8aa8e0;
    --dm-accent-hover: #adc3ec;
    --dm-accent-soft: rgba(138, 168, 224, .16);
    --dm-brand-fill: #31539b;
    --dm-brand-fill-hover: #3a62b5;
    --dm-danger-text: #ef8a80;
    --dm-footer-bg: #141619;
    --dm-logo-plate: rgba(255, 255, 255, .92);

    /* Bootstrap 5.3.8 dark color mode variables */
    --bs-body-color: var(--dm-text);
    --bs-body-color-rgb: 211,215,220;
    --bs-body-bg: var(--dm-bg);
    --bs-body-bg-rgb: 27,30,34;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255,255,255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222,226,230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52,58,64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222,226,230;
    --bs-tertiary-bg: var(--dm-surface);
    --bs-tertiary-bg-rgb: 37,41,46;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: var(--dm-accent);
    --bs-link-hover-color: var(--dm-accent-hover);
    --bs-link-color-rgb: 138,168,224;
    --bs-link-hover-color-rgb: 173,195,236;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
    --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
    /* Bootstrap's focus ring (rgba(13,110,253,.25)) is about 1.3:1 on the dark page */
    --bs-focus-ring-color: rgba(138, 168, 224, .5);
  }
  :where(:root[data-theme="dark"]) .form-select {--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
  :where(:root[data-theme="dark"]) .form-switch .form-check-input:not(:checked):not(:focus) {--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e")}
  :where(:root[data-theme="dark"]) .navbar-toggler-icon {--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
  :where(:root[data-theme="dark"]) .accordion-button::after {--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")}

  /* 1b. Bootstrap utilities that its own dark mode leaves fixed. "White" and "light"
     panels become dark panels and dark text becomes light text. Text that sits on a
     colored Bootstrap background (badge bg-warning text-dark and the like) keeps its color. */
  :where(:root[data-theme="dark"]) .bg-white { background-color: var(--bs-body-bg) !important; }
  :where(:root[data-theme="dark"]) .bg-light { background-color: var(--bs-tertiary-bg) !important; }
  :where(:root[data-theme="dark"]) .text-dark:not([class*="bg-"]), :where(:root[data-theme="dark"]) .text-dark.bg-white, :where(:root[data-theme="dark"]) .text-dark.bg-light, :where(:root[data-theme="dark"]) .text-dark.bg-body,
  :where(:root[data-theme="dark"]) .text-black:not([class*="bg-"]), :where(:root[data-theme="dark"]) .text-black.bg-white, :where(:root[data-theme="dark"]) .text-black.bg-light, :where(:root[data-theme="dark"]) .text-black.bg-body {
    color: var(--bs-emphasis-color) !important;
  }
  :where(:root[data-theme="dark"]) .text-primary { color: var(--dm-accent) !important; }
  /* Bootstrap keeps its light-mode #198754 / #dc3545 / #6c757d for these (3.6 to 3.7:1
     on the dark page); use its own dark "text emphasis" shades instead. */
  :where(:root[data-theme="dark"]) .text-success { color: var(--bs-success-text-emphasis) !important; }
  :where(:root[data-theme="dark"]) .text-danger { color: var(--dm-danger-text) !important; }
  :where(:root[data-theme="dark"]) .text-secondary { color: var(--bs-secondary-color) !important; }
  :where(:root[data-theme="dark"]) .blockquote-footer { color: var(--bs-secondary-color); }
  :where(:root[data-theme="dark"]) .link-dark { color: var(--bs-emphasis-color) !important; text-decoration-color: rgba(255, 255, 255, .5) !important; }
  :where(:root[data-theme="dark"]) .border-dark { border-color: var(--bs-border-color) !important; }
  :where(:root[data-theme="dark"]) .btn-outline-dark {
    --bs-btn-color: #dee2e6; --bs-btn-border-color: #adb5bd;
    --bs-btn-hover-color: #212529; --bs-btn-hover-bg: #dee2e6; --bs-btn-hover-border-color: #dee2e6;
    --bs-btn-active-color: #212529; --bs-btn-active-bg: #dee2e6; --bs-btn-active-border-color: #dee2e6;
  }
  :where(:root[data-theme="dark"]) .btn-outline-secondary {
    --bs-btn-color: #adb5bd; --bs-btn-border-color: #adb5bd; --bs-btn-disabled-color: #adb5bd;
  }
  /* Bootstrap's dark mode keeps #dc3545 text and border here (3.2 to 3.7:1); the red fill on hover stays. */
  :where(:root[data-theme="dark"]) .btn-outline-danger {
    --bs-btn-color: var(--dm-danger-text); --bs-btn-border-color: var(--dm-danger-text);
    --bs-btn-disabled-color: var(--dm-danger-text); --bs-btn-disabled-border-color: var(--dm-danger-text);
  }
  :where(:root[data-theme="dark"]) .pagination { --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(138, 168, 224, .5); }
  /* Bootstrap hard-codes the field focus glow as rgba(13,110,253,.25), which barely shows on dark */
  :where(:root[data-theme="dark"]) .form-control:focus, :where(:root[data-theme="dark"]) .form-select:focus, :where(:root[data-theme="dark"]) .form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(138, 168, 224, .35); }
  /* Video and podcast players are light-scheme pages with a transparent background. On a
     dark page Chrome paints a white backdrop behind a light-scheme frame, which showed as
     white bars around players not sized to 16:9, a white flash before Vimeo paints, white
     corners around Transistor's rounded player and a white box around a dead Wistia embed.
     Marking these frames light lets the dark page show through instead. Only these hosts:
     forms and other embeds keep their white backdrop because they rely on it. */
  :where(:root[data-theme="dark"]) iframe[src*="player.vimeo.com"], :where(:root[data-theme="dark"]) iframe[src*="youtube.com/embed"],
  :where(:root[data-theme="dark"]) iframe[src*="youtube-nocookie.com/embed"], :where(:root[data-theme="dark"]) iframe[src^="https://share.transistor.fm/"],
  :where(:root[data-theme="dark"]) iframe[src*="fast.wistia.net"], :where(:root[data-theme="dark"]) iframe[src*="fast.wistia.com"] { color-scheme: light; }
  /* Third-party forms, chats and webinar players draw dark text on a see-through page. Chrome
     paints a white backdrop behind them on a dark page; Safari and Firefox may not, so they get
     an explicit white background (the same look Chrome gives them). */
  :where(:root[data-theme="dark"]) iframe[src*="infusionsoft"], :where(:root[data-theme="dark"]) iframe[src*="keap"], :where(:root[data-theme="dark"]) iframe[src*="deadsimplechat"],
  :where(:root[data-theme="dark"]) iframe[src*="iteleseminar"], :where(:root[data-theme="dark"]) iframe[src*="tubesnack"], :where(:root[data-theme="dark"]) iframe[src*="demio"],
  :where(:root[data-theme="dark"]) iframe[src*="google.com/maps"], :where(:root[data-theme="dark"]) iframe[src*="recaptcha"] { background-color: #fff; }
  /* Fields with no styling of their own (raw Keap form HTML): the UA dark placeholder is 2.4:1 */
  :where(:root[data-theme="dark"]) ::placeholder { color: var(--bs-secondary-color); opacity: 1; }
  /* Panels Bootstrap paints in a fixed light color: dark text stays on them. */
  :where(:root[data-theme="dark"]) .bg-warning:not([class*="text-"]), :where(:root[data-theme="dark"]) .bg-info:not([class*="text-"]) { color: #212529; }
  :where(:root[data-theme="dark"]) .table-light {
    --bs-table-color: var(--bs-emphasis-color); --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-secondary-bg);
    --bs-table-striped-color: var(--bs-emphasis-color); --bs-table-hover-bg: var(--bs-secondary-bg);
    --bs-table-hover-color: var(--bs-emphasis-color);
  }
}
/* dark-mode: end of forced copy */

/* 1c. Printing. The color-scheme meta tag ("light dark") also applies when printing, so with
   a dark OS setting Chrome would print browser-default form fields dark (and white text in
   some fields). Printouts always use the light scheme, exactly like a light-mode printout. */
@media print {
  :root { color-scheme: light; }
}

/* 1d. The footer light/dark switch (dark-mode head script). A visitor who picked Light keeps light native
   form controls, scrollbars and page canvas even when the OS is dark. Every dark rule in these files carries
   a guard for that choice, plus a forced copy for a visitor who picked Dark: both are generated by
   ~/Ops/tools/dark-mode/theme_override.py (run propagate.py after editing). */
:root[data-theme="light"] { color-scheme: light; }

/* ==========================================================================
   SECTION 2: COURSES PORTAL
   One app serves five brand hosts (CREU, MHU, RVU, SSU, OBU; lib/Brand.php).
   templates/layout.php defines the --creu-* tokens on :root, with light values equal
   to the colors the pages used to hard-code, and loads this file after its inline
   <style>, so the :root block below replaces them in dark mode only.

   Brand colors: the layout prints the host's brand color into --creu-brand.
   - Fills (.creu-btn, the active library chip) keep --creu-brand, because white text
     passes on every brand: CREU and MHU #1a56a3 7.2:1, RVU #1a8044 5.0:1,
     SSU #a35a1a 5.2:1, OBU #a31a1a 7.7:1.
   - Brand-colored text, links, borders and progress fills use --creu-primary, which
     becomes a 50% mix of the brand with white: CREU/MHU #8caad1, RVU #8cc0a2,
     SSU #d1ac8c, OBU #d18c8c. Lowest contrast per brand (on --dm-surface-2, the
     lightest dark surface): 5.6, 6.4, 6.4 and 5.0:1; on --creu-primary-soft
     (pill and outline-button hover, search badge): 5.4, 5.7, 5.8 and 5.2:1.
   ========================================================================== */
@media screen and (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --creu-bg: var(--dm-bg);
    --creu-surface: var(--dm-surface);
    --creu-footer-bg: var(--dm-footer-bg);
    --creu-text: var(--dm-text);
    --creu-text-soft: var(--dm-muted);
    --creu-border: var(--dm-border);
    --creu-primary: color-mix(in srgb, var(--creu-brand) 50%, white);
    --creu-primary-soft: color-mix(in srgb, var(--creu-brand) 22%, var(--dm-surface));
    --creu-input-bg: var(--dm-bg);
    --creu-input-bg-focus: var(--dm-bg);
    --creu-track: var(--dm-border);
    --creu-code-bg: var(--dm-bg);
    /* Status colors: Bootstrap's dark success text, Section 1's danger text. */
    --creu-success: #75b798;
    --creu-success-text: #75b798;
    --creu-success-bg: color-mix(in srgb, #16a34a 14%, var(--dm-surface));
    --creu-success-bg-hover: color-mix(in srgb, #16a34a 20%, var(--dm-surface));
    --creu-yes: #75b798;
    --creu-no: var(--dm-danger-text);
    /* Search highlight and the "Library" badge: Bootstrap's dark highlight and warning pairs. */
    --creu-mark-bg: #664d03;
    --creu-badge-lib-bg: #332701;
    --creu-badge-lib-text: #ffda6a;
    --creu-doc-red: #ec9090;
  }

  /* Library type labels and download icons: the page prints the type color into
     --creu-type and the element reads var(--creu-type-fg, var(--creu-type)), so in
     dark mode the same color is lightened (50% white mix, 5.2:1 or better on cards). */
  :where(:root:not([data-theme="light"])) .creu-type-color { --creu-type-fg: color-mix(in srgb, var(--creu-type) 50%, white); }

  /* Admin tables: cells paint --bs-table-bg over the table, so make it the card color. */
  :where(:root:not([data-theme="light"])) .table { --bs-table-bg: var(--creu-surface); }

  /* The search page input sets a background but no text color. */
  :where(:root:not([data-theme="light"])) main .creu-search-form input[type="search"] { color: var(--creu-text); }
  /* Text fields with no class (admin member page "New password", whose inline style sets only
     the border) would take the browser's neutral gray dark field. Give them the search page
     field's colors instead. Its light look (white field, black text) is the browser default,
     which no --creu-* token equals, so this lives here rather than in the inline style. */
  :where(:root:not([data-theme="light"])) main input[type="text"]:not([class]) { background: var(--creu-surface); color: var(--creu-text); }
  /* Placeholders the pages don't style (search page, admin "New password"): use the
     same gray as the nav search placeholder. Kept on top of Section 1's ::placeholder
     because it matches the rest of the portal and measures 7.05:1 on the search page
     field (Section 1's shade: 7.0:1); both are over 5.4:1 on the admin field. */
  :where(:root:not([data-theme="light"])) input::placeholder { color: var(--creu-text-soft); opacity: 1; }
}
/* dark-mode: forced copy for the footer switch (generated by theme_override.py; edit the block above) */
@media screen {
  :root:where([data-theme="dark"]) {
    --creu-bg: var(--dm-bg);
    --creu-surface: var(--dm-surface);
    --creu-footer-bg: var(--dm-footer-bg);
    --creu-text: var(--dm-text);
    --creu-text-soft: var(--dm-muted);
    --creu-border: var(--dm-border);
    --creu-primary: color-mix(in srgb, var(--creu-brand) 50%, white);
    --creu-primary-soft: color-mix(in srgb, var(--creu-brand) 22%, var(--dm-surface));
    --creu-input-bg: var(--dm-bg);
    --creu-input-bg-focus: var(--dm-bg);
    --creu-track: var(--dm-border);
    --creu-code-bg: var(--dm-bg);
    /* Status colors: Bootstrap's dark success text, Section 1's danger text. */
    --creu-success: #75b798;
    --creu-success-text: #75b798;
    --creu-success-bg: color-mix(in srgb, #16a34a 14%, var(--dm-surface));
    --creu-success-bg-hover: color-mix(in srgb, #16a34a 20%, var(--dm-surface));
    --creu-yes: #75b798;
    --creu-no: var(--dm-danger-text);
    /* Search highlight and the "Library" badge: Bootstrap's dark highlight and warning pairs. */
    --creu-mark-bg: #664d03;
    --creu-badge-lib-bg: #332701;
    --creu-badge-lib-text: #ffda6a;
    --creu-doc-red: #ec9090;
  }

  /* Library type labels and download icons: the page prints the type color into
     --creu-type and the element reads var(--creu-type-fg, var(--creu-type)), so in
     dark mode the same color is lightened (50% white mix, 5.2:1 or better on cards). */
  :where(:root[data-theme="dark"]) .creu-type-color { --creu-type-fg: color-mix(in srgb, var(--creu-type) 50%, white); }

  /* Admin tables: cells paint --bs-table-bg over the table, so make it the card color. */
  :where(:root[data-theme="dark"]) .table { --bs-table-bg: var(--creu-surface); }

  /* The search page input sets a background but no text color. */
  :where(:root[data-theme="dark"]) main .creu-search-form input[type="search"] { color: var(--creu-text); }
  /* Text fields with no class (admin member page "New password", whose inline style sets only
     the border) would take the browser's neutral gray dark field. Give them the search page
     field's colors instead. Its light look (white field, black text) is the browser default,
     which no --creu-* token equals, so this lives here rather than in the inline style. */
  :where(:root[data-theme="dark"]) main input[type="text"]:not([class]) { background: var(--creu-surface); color: var(--creu-text); }
  /* Placeholders the pages don't style (search page, admin "New password"): use the
     same gray as the nav search placeholder. Kept on top of Section 1's ::placeholder
     because it matches the rest of the portal and measures 7.05:1 on the search page
     field (Section 1's shade: 7.0:1); both are over 5.4:1 on the admin field. */
  :where(:root[data-theme="dark"]) input::placeholder { color: var(--creu-text-soft); opacity: 1; }
}
/* dark-mode: end of forced copy */