/* Seasonal decoration layer (FitMas / HallowFit). Decorations never take input and sit
   below the tab bar (40), modals (50+) and toasts (80). Art colours live in --fx-* tokens
   declared per theme in this file, not in style.css. */
#fx-root { position: fixed; inset: 0; pointer-events: none; contain: layout style; }
#fx-root, #fx-root * { pointer-events: none !important; }
.fx-layer { position: fixed; inset: 0; overflow: hidden; }
.fx-back { z-index: -1; }   /* behind page content; paints above the body background */
.fx-front { z-index: 35; }  /* above content, below tab bar and dialogs */

html[data-fx="off"] #fx-root { display: none; }
/* Subtle: art stays, nothing moves. */
html[data-fx="subtle"] #fx-root *, html[data-fx="subtle"] #fx-root *::before, html[data-fx="subtle"] #fx-root *::after {
  animation: none !important; transition: none !important;
}
/* Hidden tab: freeze (set from theme-fx.js). */
html.fx-paused #fx-root * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  #fx-root *, #fx-root *::before, #fx-root *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active), print { #fx-root { display: none; } }

/* ---------- Profile control ---------- */
.fx-picker { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.fx-picker legend { padding: 0; margin: 0 0 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fx-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.fx-seg label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 72px; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.fx-seg label + label { border-left: 1px solid var(--border-strong); }
.fx-seg input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.fx-seg label:has(input:checked) { background: var(--primary); color: var(--on-primary); }
.fx-seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -4px; }