/* Theme handling shared by every authentication screen.

   The portals store a user's Light/Dark/System choice in the database, but every Auth page is anonymous, so
   there is no user record to store it against. The choice lives in localStorage instead and is applied by a
   small inline script in each page's <head>, before first paint, which sets data-theme-pref (the choice) and
   data-bs-theme (the resolved theme) on <html>. Everything below keys off those two attributes, so a page
   needs no JavaScript of its own to render in the right theme - only the toggle button needs the script. */

/* Brand wordmark: both colour variants are always in the markup and one is hidden, so the logo can never
   render navy on a dark ground or white on white. Pages set their own height; only the swap lives here. */
.brand-wordmark--dark { display: none; }

[data-bs-theme="dark"] .brand-wordmark--light { display: none; }

[data-bs-theme="dark"] .brand-wordmark--dark { display: block; }

/* Parks the toggle in the top-right of a page that has no chrome of its own to hang it on. */
.theme-toggle-corner {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 20;
}

/* Three-state theme toggle. Deliberately free of Bootstrap and of Bootstrap Icons: two of the Auth pages
   load neither, so the button carries its own inline SVGs and borrows the surrounding text colour. */
.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 9px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .75;
    transition: opacity .13s, border-color .13s;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    opacity: 1;
    border-color: color-mix(in srgb, currentColor 45%, transparent);
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
    display: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Exactly one icon shows, chosen by the stored preference rather than the resolved theme, so the button
   reports what the user picked ("System") rather than what that currently resolves to. */
[data-theme-pref="system"] .theme-toggle .ic-system,
[data-theme-pref="light"] .theme-toggle .ic-light,
[data-theme-pref="dark"] .theme-toggle .ic-dark {
    display: block;
}

/* No preference attribute yet (script blocked or failed): fall back to showing the System icon. */
html:not([data-theme-pref]) .theme-toggle .ic-system {
    display: block;
}