/* Shared theme toggle button. Colours come from currentColor so the same control works on the
   storefront tokens (--brand) and the portal tokens (--tl-brand) without a competing palette. */
.theme-toggle {
    -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; margin: 0; flex-shrink: 0;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 6px; background: transparent; color: inherit; cursor: pointer;
    line-height: 1; transition: background-color .15s, border-color .15s, color .15s;
}
.theme-toggle:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid var(--brand, var(--tl-brand, #177245)); outline-offset: 2px; }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.theme-toggle .theme-toggle__sun { display: none; }
html[data-bs-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }
html[data-bs-theme="dark"] .theme-toggle .theme-toggle__sun { display: block; }
.theme-toggle__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* floating placement for sign-in screens that have no header */
.theme-toggle--floating {
    position: fixed; bottom: 16px; inset-inline-end: 16px; z-index: 1080;
    background: var(--tl-panel, var(--panel, #FFFFFF)); color: var(--tl-ink, var(--ink, #1A211C));
}
/* navbar placement (Tabler navbar nav-link look) */
.theme-toggle--portal { border-color: transparent; width: 40px; height: 40px; color: var(--tl-muted, var(--tblr-secondary, #57605A)); }
.theme-toggle--portal:hover { color: var(--tl-ink, #1A211C); }
.theme-toggle--legacy { border-color: transparent; width: 38px; height: 38px; color: rgba(255,255,255,.75); }
.theme-toggle--legacy:hover { color: #fff; }
@media print { .theme-toggle { display: none !important; } }