/* =====================================================================
   ym-theme.css - every colour on the site, in one place, for light and dark.

   Loaded right after Bootstrap and before every other stylesheet. Pages never
   write a raw colour any more: they use these named roles (var(--ym-card),
   var(--ym-muted), ...), so the whole site changes colour together - which is
   what makes dark mode possible, and what keeps the palette consistent.

   The roles (light value / what it is for):
     --ym-bg          page background
     --ym-card        cards, panels, dialogs, menus
     --ym-fill        quiet fill: inputs, answer rows, chips, table stripes
     --ym-fill-2      stronger fill: hover, pressed, progress tracks
     --ym-paper       the cream "book page" of the reading room and ruled papers
     --ym-ink         headlines
     --ym-ink-2       titles, strong text, default text
     --ym-body        paragraphs
     --ym-muted       secondary text (meets WCAG AA 4.5:1 on cards AND on the page)
     --ym-subtle      non-essential text only: placeholders, line numbers, hints
     --ym-edge        card and field borders     --ym-edge-strong: control borders
     --ym-line        hairline separators
     --ym-accent      the ONE interactive blue (primary buttons, links, focus)
     --ym-blue        brand blue for icons, bars and accents (not for text)
     --ym-orange      brand orange (highlights, CTAs - with navy text on it)
     --ym-green / --ym-red          success / error text and icons
     --ym-green-solid / --ym-red-solid   the same as button / badge backgrounds
     --ym-tint-*      soft backgrounds of blue / green / red / orange / purple
     --ym-navy        brand navy: the navbar, dark hero headers, dark buttons -
                      stays navy in dark mode too (it is the brand surface)

   Palette notes (light): the old Flat-UI greys failed contrast - #7f8c8d grey
   text was 3.5:1 on white, white on the old green button 2.9:1, white on the
   brand blue 3.2:1. Every text pairing below is 4.5:1 or better.

   Dark mode: html[data-theme="dark"], set before first paint by the script at
   the top of base.html from the student's choice (Auto / Light / Dark in the
   accessibility menu; Auto follows the phone or computer setting). Dark
   surfaces get LIGHTER as they come forward (page < card < fill), the way
   iOS separates layers without heavy shadows.
   ===================================================================== */

:root {
    color-scheme: light;

    --ym-bg: #f4f6f8;
    --ym-card: #ffffff;
    --ym-fill: #f5f7f9;
    --ym-fill-2: #eaeef2;
    --ym-paper: #fffdf8;

    --ym-ink: #1a252f;
    --ym-ink-2: #22303d;
    --ym-body: #3a4856;
    --ym-muted: #5f6b77;
    --ym-subtle: #66717d;

    --ym-edge: #e3e8ed;
    --ym-edge-strong: #cfd7df;
    --ym-line: rgba(26, 37, 47, 0.08);

    --ym-accent: #1f73c9;
    --ym-accent-hover: #1a63ad;
    --ym-on-accent: #ffffff;
    --ym-on-orange: #1a252f;     /* text on the brand orange: navy (7:1), never white (2.2:1) */
    --ym-blue: #3498db;
    --ym-blue-text: #1b6abb;

    --ym-orange: #f39c12;
    --ym-orange-deep: #e67e22;
    --ym-orange-text: #b45309;
    --ym-green: #1a7f4b;
    --ym-green-solid: #1a7f4b;
    --ym-green-bright: #2ecc71;
    --ym-red: #c8372d;
    --ym-red-solid: #d93c3c;
    --ym-purple: #8e44ad;
    --ym-yellow: #f1c40f;

    --ym-tint-blue: #e8f2fc;
    --ym-tint-green: #e7f6ee;
    --ym-tint-red: #fdeeee;
    --ym-tint-orange: #fef4e4;
    --ym-tint-purple: #f4ebf8;

    --ym-navy: #1a252f;
    --ym-navy-2: #2c3e50;

    --ym-card-shadow: 0 2px 6px -1px rgba(16, 24, 40, 0.05), 0 8px 24px -6px rgba(16, 24, 40, 0.08);

    /* ---- Bootstrap reads its colours from these ---- */
    --bs-body-bg: var(--ym-bg);
    --bs-body-bg-rgb: 244, 246, 248;
    --bs-body-color: var(--ym-ink-2);
    --bs-body-color-rgb: 34, 48, 61;
    --bs-emphasis-color: var(--ym-ink);
    --bs-emphasis-color-rgb: 26, 37, 47;
    --bs-heading-color: inherit;
    --bs-secondary-color: var(--ym-muted);
    --bs-secondary-color-rgb: 95, 107, 119;
    --bs-tertiary-color: var(--ym-subtle);
    --bs-secondary-bg: var(--ym-fill-2);
    --bs-tertiary-bg: var(--ym-fill);
    --bs-tertiary-bg-rgb: 245, 247, 249;
    --bs-border-color: var(--ym-edge);
    --bs-border-color-translucent: var(--ym-line);
    --bs-link-color: var(--ym-blue-text);
    --bs-link-color-rgb: 27, 106, 187;
    --bs-link-hover-color: var(--ym-accent-hover);
    --bs-link-hover-color-rgb: 26, 99, 173;

    /* The *-rgb values are what Bootstrap's text-* utilities use, so they are
       the TEXT shades; the matching bg-* classes are pointed at the solid
       shades explicitly further down. */
    --bs-primary: #1b6abb;          --bs-primary-rgb: 27, 106, 187;
    --bs-success: #1a7f4b;          --bs-success-rgb: 26, 127, 75;
    --bs-danger: #c8372d;           --bs-danger-rgb: 200, 55, 45;
    --bs-warning: #f39c12;          --bs-warning-rgb: 243, 156, 18;
    --bs-info: #3498db;             --bs-info-rgb: 52, 152, 219;
    --bs-secondary: #5f6b77;        --bs-secondary-rgb: 95, 107, 119;
    --bs-dark: #1a252f;             --bs-dark-rgb: 26, 37, 47;
    --bs-light: #f5f7f9;            --bs-light-rgb: 245, 247, 249;

    --bs-primary-bg-subtle: var(--ym-tint-blue);
    --bs-success-bg-subtle: var(--ym-tint-green);
    --bs-danger-bg-subtle: var(--ym-tint-red);
    --bs-warning-bg-subtle: var(--ym-tint-orange);
    --bs-info-bg-subtle: var(--ym-tint-blue);
    --bs-primary-text-emphasis: #174f8a;
    --bs-success-text-emphasis: #145c37;
    --bs-danger-text-emphasis: #9b2a23;
    --bs-warning-text-emphasis: #8a4a06;
    --bs-info-text-emphasis: #174f8a;
    --bs-primary-border-subtle: #b9d5f2;
    --bs-success-border-subtle: #b5e0c8;
    --bs-danger-border-subtle: #f3c2bf;
    --bs-warning-border-subtle: #f8d8a5;
    --bs-info-border-subtle: #b9d5f2;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --ym-bg: #0f151b;
    --ym-card: #18212a;
    --ym-fill: #1f2a35;
    --ym-fill-2: #283541;
    --ym-paper: #1c2228;

    --ym-ink: #f0f4f8;
    --ym-ink-2: #e3e9ef;
    --ym-body: #c9d2db;
    --ym-muted: #a3aeb9;
    --ym-subtle: #7f8b97;

    --ym-edge: #2a3642;
    --ym-edge-strong: #3a4855;
    --ym-line: rgba(255, 255, 255, 0.08);

    --ym-accent: #2a78c2;
    --ym-accent-hover: #3586d2;
    --ym-blue: #4aa3e8;
    --ym-blue-text: #6cb6f5;

    --ym-orange: #f5a623;
    --ym-orange-deep: #f08c2e;
    --ym-orange-text: #f5b04a;
    --ym-green: #4cc98a;
    --ym-green-solid: #1d7a48;
    --ym-green-bright: #4cc98a;
    --ym-red: #ff8a80;
    --ym-red-solid: #d64545;
    --ym-purple: #c58af0;
    --ym-yellow: #f4cf3a;

    --ym-tint-blue: rgba(74, 163, 232, 0.15);
    --ym-tint-green: rgba(76, 201, 138, 0.14);
    --ym-tint-red: rgba(255, 138, 128, 0.14);
    --ym-tint-orange: rgba(245, 166, 35, 0.14);
    --ym-tint-purple: rgba(197, 138, 240, 0.15);

    /* The brand navy, lifted a step: at its light-mode value it sank into the
       dark page, and navy buttons on dark cards all but disappeared. */
    --ym-navy: #223040;
    --ym-navy-2: #2a3a4b;

    --ym-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px -8px rgba(0, 0, 0, 0.5);

    --bs-body-bg: var(--ym-bg);
    --bs-body-bg-rgb: 15, 21, 27;
    --bs-body-color: var(--ym-ink-2);
    --bs-body-color-rgb: 227, 233, 239;
    --bs-emphasis-color: var(--ym-ink);
    --bs-emphasis-color-rgb: 240, 244, 248;
    --bs-secondary-color: var(--ym-muted);
    --bs-secondary-color-rgb: 163, 174, 185;
    --bs-tertiary-color: var(--ym-subtle);
    --bs-secondary-bg: var(--ym-fill-2);
    --bs-tertiary-bg: var(--ym-fill);
    --bs-tertiary-bg-rgb: 31, 42, 53;
    --bs-border-color: var(--ym-edge);
    --bs-border-color-translucent: var(--ym-line);
    --bs-link-color: var(--ym-blue-text);
    --bs-link-color-rgb: 108, 182, 245;
    --bs-link-hover-color: #8cc6f8;
    --bs-link-hover-color-rgb: 140, 198, 248;

    --bs-primary: #6cb6f5;          --bs-primary-rgb: 108, 182, 245;
    --bs-success: #4cc98a;          --bs-success-rgb: 76, 201, 138;
    --bs-danger: #ff8a80;           --bs-danger-rgb: 255, 138, 128;
    --bs-warning: #f5a623;          --bs-warning-rgb: 245, 166, 35;
    --bs-info: #4aa3e8;             --bs-info-rgb: 74, 163, 232;
    --bs-secondary: #a3aeb9;        --bs-secondary-rgb: 163, 174, 185;
    /* --bs-white / --bs-light / --bs-dark are NOT redefined here: .text-white
       and .text-light read the same values, and white text on the navy
       headers must stay white. bg-white / bg-light / text-dark are re-pointed
       one by one at the end of this file instead. */

    --bs-primary-text-emphasis: #8cc6f8;
    --bs-success-text-emphasis: #7ddba9;
    --bs-danger-text-emphasis: #ffb1aa;
    --bs-warning-text-emphasis: #f8c46f;
    --bs-info-text-emphasis: #8cc6f8;
    --bs-primary-border-subtle: rgba(74, 163, 232, 0.35);
    --bs-success-border-subtle: rgba(76, 201, 138, 0.35);
    --bs-danger-border-subtle: rgba(255, 138, 128, 0.35);
    --bs-warning-border-subtle: rgba(245, 166, 35, 0.35);
    --bs-info-border-subtle: rgba(74, 163, 232, 0.35);
}


/* ---------------------------------------------------------------------
   Buttons: one blue for "go", green only for success / finishing, red only
   for destructive actions, navy for the strong neutral action. Bootstrap
   hard-codes its button colours per class, so each is re-pointed here.
   --------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-color: var(--ym-on-accent); --bs-btn-bg: var(--ym-accent); --bs-btn-border-color: var(--ym-accent);
    --bs-btn-hover-color: var(--ym-on-accent); --bs-btn-hover-bg: var(--ym-accent-hover); --bs-btn-hover-border-color: var(--ym-accent-hover);
    --bs-btn-active-color: var(--ym-on-accent); --bs-btn-active-bg: var(--ym-accent-hover); --bs-btn-active-border-color: var(--ym-accent-hover);
    --bs-btn-disabled-color: var(--ym-on-accent); --bs-btn-disabled-bg: var(--ym-accent); --bs-btn-disabled-border-color: var(--ym-accent);
    --bs-btn-focus-shadow-rgb: 31, 115, 201;
}
.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--ym-green-solid); --bs-btn-border-color: var(--ym-green-solid);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #156b3f; --bs-btn-hover-border-color: #156b3f;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #156b3f; --bs-btn-active-border-color: #156b3f;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ym-green-solid); --bs-btn-disabled-border-color: var(--ym-green-solid);
}
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: var(--ym-red-solid); --bs-btn-border-color: var(--ym-red-solid);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #bf3232; --bs-btn-hover-border-color: #bf3232;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #bf3232; --bs-btn-active-border-color: #bf3232;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ym-red-solid); --bs-btn-disabled-border-color: var(--ym-red-solid);
}
.btn-warning {
    --bs-btn-color: var(--ym-navy); --bs-btn-bg: var(--ym-orange); --bs-btn-border-color: var(--ym-orange);
    --bs-btn-hover-color: var(--ym-navy); --bs-btn-hover-bg: #e8910b; --bs-btn-hover-border-color: #e8910b;
    --bs-btn-active-color: var(--ym-navy); --bs-btn-active-bg: #e8910b; --bs-btn-active-border-color: #e8910b;
    --bs-btn-disabled-color: var(--ym-navy); --bs-btn-disabled-bg: var(--ym-orange); --bs-btn-disabled-border-color: var(--ym-orange);
}
.btn-dark {
    --bs-btn-color: #fff; --bs-btn-bg: var(--ym-navy); --bs-btn-border-color: var(--ym-navy);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ym-navy-2); --bs-btn-hover-border-color: var(--ym-navy-2);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ym-navy-2); --bs-btn-active-border-color: var(--ym-navy-2);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ym-navy); --bs-btn-disabled-border-color: var(--ym-navy);
}
.btn-secondary {
    --bs-btn-color: #fff; --bs-btn-bg: #5f6b77; --bs-btn-border-color: #5f6b77;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4f5a65; --bs-btn-hover-border-color: #4f5a65;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #4f5a65; --bs-btn-active-border-color: #4f5a65;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #5f6b77; --bs-btn-disabled-border-color: #5f6b77;
}
.btn-light {
    --bs-btn-color: var(--ym-ink-2); --bs-btn-bg: var(--ym-fill); --bs-btn-border-color: var(--ym-edge);
    --bs-btn-hover-color: var(--ym-ink); --bs-btn-hover-bg: var(--ym-fill-2); --bs-btn-hover-border-color: var(--ym-edge-strong);
    --bs-btn-active-color: var(--ym-ink); --bs-btn-active-bg: var(--ym-fill-2); --bs-btn-active-border-color: var(--ym-edge-strong);
}
.btn-outline-primary {
    --bs-btn-color: var(--ym-blue-text); --bs-btn-border-color: var(--ym-accent);
    --bs-btn-hover-color: var(--ym-on-accent); --bs-btn-hover-bg: var(--ym-accent); --bs-btn-hover-border-color: var(--ym-accent);
    --bs-btn-active-color: var(--ym-on-accent); --bs-btn-active-bg: var(--ym-accent); --bs-btn-active-border-color: var(--ym-accent);
    --bs-btn-disabled-color: var(--ym-blue-text); --bs-btn-disabled-border-color: var(--ym-accent);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ym-muted); --bs-btn-border-color: var(--ym-edge-strong);
    --bs-btn-hover-color: var(--ym-ink); --bs-btn-hover-bg: var(--ym-fill-2); --bs-btn-hover-border-color: var(--ym-edge-strong);
    --bs-btn-active-color: var(--ym-ink); --bs-btn-active-bg: var(--ym-fill-2); --bs-btn-active-border-color: var(--ym-edge-strong);
    --bs-btn-disabled-color: var(--ym-subtle); --bs-btn-disabled-border-color: var(--ym-edge);
}
.btn-outline-dark {
    --bs-btn-color: var(--ym-ink); --bs-btn-border-color: var(--ym-ink);
    --bs-btn-hover-color: var(--ym-card); --bs-btn-hover-bg: var(--ym-ink); --bs-btn-hover-border-color: var(--ym-ink);
    --bs-btn-active-color: var(--ym-card); --bs-btn-active-bg: var(--ym-ink); --bs-btn-active-border-color: var(--ym-ink);
}
.btn-outline-danger {
    --bs-btn-color: var(--ym-red); --bs-btn-border-color: var(--ym-red);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ym-red-solid); --bs-btn-hover-border-color: var(--ym-red-solid);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ym-red-solid); --bs-btn-active-border-color: var(--ym-red-solid);
}
.btn-outline-success {
    --bs-btn-color: var(--ym-green); --bs-btn-border-color: var(--ym-green);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ym-green-solid); --bs-btn-hover-border-color: var(--ym-green-solid);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ym-green-solid); --bs-btn-active-border-color: var(--ym-green-solid);
}
.btn-outline-warning {
    --bs-btn-color: var(--ym-orange-text); --bs-btn-border-color: var(--ym-orange);
    --bs-btn-hover-color: var(--ym-navy); --bs-btn-hover-bg: var(--ym-orange); --bs-btn-hover-border-color: var(--ym-orange);
    --bs-btn-active-color: var(--ym-navy); --bs-btn-active-bg: var(--ym-orange); --bs-btn-active-border-color: var(--ym-orange);
}
.btn-outline-light {
    --bs-btn-color: #f0f4f8; --bs-btn-border-color: rgba(255, 255, 255, 0.55);
    --bs-btn-hover-color: var(--ym-navy); --bs-btn-hover-bg: #f0f4f8; --bs-btn-hover-border-color: #f0f4f8;
}

/* Alerts and badges use the same roles. */
.alert-info, .alert-primary { --bs-alert-color: var(--bs-primary-text-emphasis); --bs-alert-bg: var(--ym-tint-blue); --bs-alert-border-color: var(--bs-primary-border-subtle); }
.alert-success { --bs-alert-color: var(--bs-success-text-emphasis); --bs-alert-bg: var(--ym-tint-green); --bs-alert-border-color: var(--bs-success-border-subtle); }
.alert-danger { --bs-alert-color: var(--bs-danger-text-emphasis); --bs-alert-bg: var(--ym-tint-red); --bs-alert-border-color: var(--bs-danger-border-subtle); }
.alert-warning { --bs-alert-color: var(--bs-warning-text-emphasis); --bs-alert-bg: var(--ym-tint-orange); --bs-alert-border-color: var(--bs-warning-border-subtle); }
.alert-light, .alert-secondary { --bs-alert-color: var(--ym-ink-2); --bs-alert-bg: var(--ym-card); --bs-alert-border-color: var(--ym-edge); }

/* Text that sits on the brand orange is navy, not white (white on orange is
   2.2:1 - unreadable in sunlight; navy is 7:1). */
.bg-warning, .text-bg-warning { color: var(--ym-on-orange) !important; }
/* (html body: outranks the dark-mode .text-dark rule at the end of this file) */
html body :is(.bg-warning, .btn-warning, .text-bg-warning) :is(.text-dark, .text-white),
html body :is(.bg-warning, .btn-warning, .text-bg-warning):is(.text-dark, .text-white) { color: var(--ym-on-orange) !important; }

/* Orange as TEXT on a light surface needs the deeper shade to be readable. */
.text-warning { color: var(--ym-orange-text) !important; }

/* Solid backgrounds for the bg-* utilities (their text-* twins use the
   lighter text shades above, which would make white text unreadable). */
.bg-primary { background-color: var(--ym-accent) !important; }
.bg-success { background-color: var(--ym-green-solid) !important; }
.bg-danger { background-color: var(--ym-red-solid) !important; }
.bg-secondary { background-color: #5f6b77 !important; }
.bg-info { background-color: var(--ym-accent) !important; }
.btn-outline-info {
    --bs-btn-color: var(--ym-blue-text); --bs-btn-border-color: var(--ym-blue);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ym-accent); --bs-btn-hover-border-color: var(--ym-accent);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ym-accent); --bs-btn-active-border-color: var(--ym-accent);
}

/* ---------------------------------------------------------------------
   Surfaces that are navy in BOTH themes (navbar, footer, the dark page
   headers, the exam bar). Inside them "muted" and "subtle" must be LIGHT
   greys - the page's own grey text roles are made for white cards and were
   far too dim on navy (the footer links were 2-3:1).
   --------------------------------------------------------------------- */
:is(.navbar, footer, .library-header, .contact-header, .score-hero, .demo-nav, .chapter-header, .dict-header,
    .notebook-header, .exam-header, .result-header, .settings-header, .stats-header, .support-header, .sc-tip,
    .toolbar, [style*="background-color: var(--ym-navy"], [style*="background: var(--ym-navy"]) {
    --ym-muted: #b3bdc7;
    --ym-subtle: #a7b2bd;
    --ym-orange-text: var(--ym-orange);    /* the bright brand orange reads well on navy */
    --bs-secondary-color: #b3bdc7;
    --bs-secondary-color-rgb: 179, 189, 199;
}


/* ---------------------------------------------------------------------
   Dark mode: the Bootstrap classes that are FIXED colours by design
   (bg-white, text-dark, ...) are re-pointed to the theme roles, so markup
   written for a white page reads correctly on a dark one.
   --------------------------------------------------------------------- */
html[data-theme="dark"] .bg-white { background-color: var(--ym-card) !important; }
html[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-body-tertiary { background-color: var(--ym-fill) !important; }
html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-black, html[data-theme="dark"] .text-body { color: var(--ym-ink-2) !important; }
html[data-theme="dark"] .text-black-50 { color: var(--ym-muted) !important; }
html[data-theme="dark"] .border-light, html[data-theme="dark"] .border-white { border-color: var(--ym-edge) !important; }
html[data-theme="dark"] .bg-dark { background-color: var(--ym-navy) !important; }
html[data-theme="dark"] .text-bg-light, html[data-theme="dark"] .badge.bg-light { background-color: var(--ym-fill-2) !important; color: var(--ym-ink-2) !important; }
html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--ym-ink-2); --bs-table-border-color: var(--ym-edge); --bs-table-striped-bg: var(--ym-fill); --bs-table-hover-bg: var(--ym-fill-2); }
html[data-theme="dark"] .table-light { --bs-table-bg: var(--ym-fill); --bs-table-color: var(--ym-ink-2); }
html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow-lg { box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55) !important; }
html[data-theme="dark"] img { color-scheme: light; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-theme="dark"] ::placeholder { color: var(--ym-subtle); }
/* ==highlight== in lessons and passages: a warm wash instead of a glaring
   yellow block, text keeping the page colour. */
html[data-theme="dark"] mark, html[data-theme="dark"] .mark { background-color: rgba(245, 166, 35, 0.28); color: inherit; }

/* Switching theme: colours change in one calm 0.25s fade instead of a hard
   cut - only colours, never layout, and only while the switch happens (the
   class is added for that instant by the switcher script), so it costs
   nothing the rest of the time. */
html.ym-theme-switching, html.ym-theme-switching *, html.ym-theme-switching *::before, html.ym-theme-switching *::after {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, fill 0.25s ease !important;
}
@media (prefers-reduced-motion: reduce) {
    html.ym-theme-switching, html.ym-theme-switching * { transition: none !important; }
}