/* Appearance switch: two small icon buttons (web footer and /moje/); theme.js shows the wrapper, so without the script it stays hidden. */
.theme-switch-wrap { display: flex; justify-content: flex-end; }
.theme-switch-wrap[hidden] { display: none; }
.theme-switch { display: inline-flex; gap: var(--space-1); }
.theme-btn { position: relative; width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border: 1.5px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--muted); }
.theme-btn:hover { color: var(--fg); }
.theme-btn[aria-pressed="true"] { border-color: var(--border-input); background: var(--surface); color: var(--fg); }
.theme-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Right-aligned to the button: the switch sits at the right edge, so a centred tooltip could leave the screen at 320 px. */
.theme-tip { position: absolute; right: 0; bottom: calc(100% + 6px); padding: 4px var(--space-2); border: 1px solid var(--fg); border-radius: var(--radius-sm); background: var(--fg); color: var(--bg); font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--motion-fast) var(--ease); }
.theme-btn:hover .theme-tip, .theme-btn:focus-visible .theme-tip { opacity: 1; visibility: visible; }
.theme-switch[data-tip-off] .theme-tip { opacity: 0; visibility: hidden; }
@media (forced-colors: active) {
  /* Windows High Contrast drops backgrounds; the pressed icon gets system colours and an inner ring (not colour alone). */
  .theme-btn[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; outline: 2px solid HighlightText; outline-offset: -5px; }
  .theme-btn:focus-visible { outline-color: CanvasText; outline-offset: 2px; }
  .theme-btn[aria-pressed="true"]:focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }
}