/*
 * DSE dark mode (feature preview "dark", 2026-10-14), staff and customer.
 * Full-coverage theme: the root element is inverted (the root is exempt from the containing-block
 * rule, so fixed and sticky elements keep working) and media is flipped back to natural colours.
 */
html.dse-dark {
    background: #fff !important;
    filter: invert(.9) hue-rotate(180deg);
    color-scheme: dark;
}
html.dse-dark :is(img, video, picture, canvas, iframe, object, embed, [style*="background-image"], .dse-no-invert, .redactor-box img, .avatar) {
    filter: invert(1) hue-rotate(180deg);
}
/* Already-dark product surfaces stay dark instead of turning light. */
html.dse-dark :is(aside.dse-ai-chat, .dse-ai-chat-panel, .dse-ai-chat-launcher) {
    filter: invert(1) hue-rotate(180deg);
}
html.dse-dark ::selection { background: #f7c873; color: #000; }
/* Cloudflare's security check is drawn in the page's theme by dse-dark-early-2026.js, so its box keeps natural colours. */
html.dse-dark .cf-turnstile { filter: invert(1) hue-rotate(180deg); }

html:is(#dse-tt#dse-tt#dse-tt, *) body .dse-theme-toggle {
    display: inline-flex !important; align-items: center; gap: 6px; padding: 7px 12px !important;
    border-radius: 999px !important; border: 1px solid #c9cbd0 !important; background: #fff !important;
    color: #17181b !important; font: 550 13px/1 "DSE Inter", Inter, system-ui, sans-serif !important; cursor: pointer;
    box-shadow: none !important; text-shadow: none !important; background-image: none !important; width: auto !important; height: auto !important;
}
html:is(#dse-tt#dse-tt#dse-tt, *) body .dse-theme-toggle:hover { background: #f5f5f7 !important; }

/* Navy banners and mastheads are already dark: keep them dark (and their images natural). */
html.dse-dark :is(.dse-global-page-hero, section[class*="-hero"]:not([class*="-hero-"]), header[class*="-masthead"]:not([class*="-masthead-"])) {
    filter: invert(1) hue-rotate(180deg);
}
html.dse-dark :is(.dse-global-page-hero, section[class*="-hero"]:not([class*="-hero-"]), header[class*="-masthead"]:not([class*="-masthead-"])) :is(img, video, canvas, picture) {
    filter: none;
}

/* ---------- One-click switch, v2 (2026-10-19) ---------- */
/* Staff app frame: the top-bar button. dse-dark-early-2026.js sets html.dse-dark before first paint, so the icon for
   the mode you would switch to (moon in light, sun in dark) is right from the first frame. */
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body.dse-shell .dse-sh-theme {
    display: inline-grid !important; place-items: center !important; flex: none !important; width: 38px !important; height: 38px !important;
    margin: 0 !important; padding: 0 !important; border: 1px solid var(--sh-line-strong, #c9cbd0) !important; border-radius: 12px !important;
    background: #fff !important; color: var(--sh-ink, #17181b) !important; cursor: pointer !important; box-shadow: none !important; background-image: none !important;
}
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body.dse-shell .dse-sh-theme:hover { border-color: var(--sh-muted, #62666e) !important; background: var(--sh-canvas, #f5f5f7) !important; }
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body.dse-shell .dse-sh-theme:focus-visible { outline: 3px solid rgba(56, 122, 192, .5) !important; outline-offset: 2px !important; }
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body.dse-shell .dse-sh-theme svg {
    width: 19px !important; height: 19px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important;
    stroke-linecap: round !important; stroke-linejoin: round !important;
}
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body.dse-shell .dse-sh-theme .dse-sh-theme-sun { display: none !important; }
html.dse-dark:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body.dse-shell .dse-sh-theme .dse-sh-theme-moon { display: none !important; }
html.dse-dark:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body.dse-shell .dse-sh-theme .dse-sh-theme-sun { display: block !important; }
/* The extra button leaves the page title less room on phones: keep its subtitle on the title's line (it ends in "..."). */
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body.dse-shell .dse-sh-top .dse-sh-title small { white-space: nowrap !important; }
@media (max-width: 720px) {
    html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body.dse-shell .dse-sh-theme { width: 44px !important; height: 44px !important; border-color: transparent !important; background: transparent !important; }
    html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body.dse-shell .dse-sh-theme svg { width: 21px !important; height: 21px !important; }
}

/* Staff app frame: Light / Dark / Auto in the account menu. */
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body .dse-theme-choice {
    display: grid !important; gap: 7px !important; margin: 4px 0 !important; padding: 9px 10px 10px !important;
    border-top: 1px solid var(--sh-line, #dedfe3) !important; border-bottom: 1px solid var(--sh-line, #dedfe3) !important;
}
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body .dse-theme-choice-label {
    color: var(--sh-muted, #62666e) !important; font: 600 11.5px/1.2 var(--sh-font, "DSE Inter", Inter, system-ui, sans-serif) !important;
    letter-spacing: .04em !important; text-transform: uppercase !important;
}
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body .dse-theme-choice-options {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 3px !important; padding: 3px !important;
    border: 1px solid var(--sh-line, #dedfe3) !important; border-radius: 10px !important; background: var(--sh-canvas, #f5f5f7) !important;
}
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body .dse-theme-choice-options button {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important;
    width: auto !important; height: 32px !important; min-height: 32px !important; margin: 0 !important; padding: 0 6px !important;
    border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; background-image: none !important;
    color: var(--sh-ink-2, #3a3d43) !important; font: 600 12.5px/1 var(--sh-font, "DSE Inter", Inter, system-ui, sans-serif) !important;
    text-transform: none !important; letter-spacing: 0 !important; cursor: pointer !important;
}
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body .dse-theme-choice-options button:hover { color: var(--sh-ink, #17181b) !important; }
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body .dse-theme-choice-options button[aria-checked="true"] {
    background: #fff !important; color: var(--sh-ink, #17181b) !important; box-shadow: 0 1px 2px rgba(16, 29, 46, .16) !important;
}
/* Under the dark filter white turns darker than the track; this light grey turns lighter, so the choice still looks raised. */
html.dse-dark:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body .dse-theme-choice-options button[aria-checked="true"] { background: #d3d6dc !important; box-shadow: none !important; }
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body .dse-theme-choice-options button:focus-visible { outline: 2px solid rgba(56, 122, 192, .6) !important; outline-offset: 1px !important; }
html:is(#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt#dse-tt, *) body .dse-theme-choice-options svg {
    width: 15px !important; height: 15px !important; flex: none !important; fill: none !important; stroke: currentColor !important;
    stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
}

/* Everywhere else: the one button shows the mode it switches to ("Dark mode" with a moon, "Light mode" with a sun). */
html:is(#dse-tt#dse-tt#dse-tt, *) body .dse-theme-toggle svg { width: 15px; height: 15px; flex: none; }
html:is(#dse-tt#dse-tt#dse-tt, *) body .dse-theme-toggle:focus-visible { outline: 3px solid rgba(56, 122, 192, .5) !important; outline-offset: 2px !important; }
.dse-theme-live { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* A short cross-fade when switching (browsers with view transitions; skipped when reduced motion is on). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }