/* Author: Jeremiah Buttler. The Light / System / Dark switch (standing-rules reference). A white pill with a soft shadow holding three round icon buttons
   (sun = Light, monitor = System, moon = Dark). The chosen one is a filled circle in the site's ACTION colour with a white icon;
   the others are grey line icons. Map the tokens below to the site's own tokens (keep the names, or replace the var() names). */
:root {
  --ts-action: var(--accent, #0d9488);     /* the site's action colour: fills the chosen circle */
  --ts-on-action: var(--on-accent, #FFFFFF); /* icon on that fill (white, 4.5:1 or better in light AND dark) */
  --ts-surface: var(--surface, var(--tile-bg, #FFFFFF));   /* the pill */
  --ts-line: var(--border, var(--tile-border, #D5D9DE));       /* the pill's hairline */
  --ts-muted: var(--muted, #5F666E);       /* unchosen icons */
  --ts-ink: var(--text, #1C2024);          /* hovered icon */
  --ts-wash: rgba(28, 32, 36, .06);          /* hover fill */
  --ts-focus: var(--focus, var(--ts-action));
}
:root[data-theme="dark"] { --ts-wash: rgba(255, 255, 255, .08); }

.theme-switch { --ts-size: 32px; display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 3px; border: 1px solid var(--ts-line); border-radius: 999px; background: var(--ts-surface); }
.theme-opt { appearance: none; -webkit-appearance: none; display: inline-grid; place-items: center; width: var(--ts-size); height: var(--ts-size); margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ts-muted); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.theme-opt .i, .theme-opt svg { display: block; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.theme-opt:hover { background: var(--ts-wash); color: var(--ts-ink); }
.theme-opt[aria-checked="true"] { background: var(--ts-action); color: var(--ts-on-action); }
.theme-opt:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 2px; }
.theme-opt[aria-checked="true"]:focus-visible { outline-offset: 3px; box-shadow: 0 0 0 2px var(--ts-surface); }
@media (pointer: coarse) { .theme-switch { --ts-size: 44px; } }

/* Floating: bottom-right corner over the page, above content, below dialogs, drawers and toasts (give those a higher z-index).
   The page's own last row is never hidden behind it: give the footer (or main) about 56px of bottom padding.
   Sharing the corner with the floating AI assistant button (ai-providers): the assistant keeps the corner, the switch sits directly above it.
   Set --ts-lift to the assistant button's height plus its gap (for example 72px) on <html> when the assistant exists. */
.theme-float { position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + var(--ts-lift, 0px)); margin: 0; }
.theme-float .theme-switch { box-shadow: 0 4px 16px rgba(0, 0, 0, .16); }

/* the switch needs the script: without it the three buttons would do nothing */
html:not(.theme-js) .theme-switch { display: none; }
@media print { .theme-switch, .theme-float { display: none; } }
@media (forced-colors: active) { .theme-opt[aria-checked="true"] { outline: 2px solid Highlight; } }