/* Shared pieces of every seasonal theme (docs/SPEC-SEASONAL-THEMES.md): the user-menu
   switch, the sign-in corner toggle, and the logo-corner slot. Per-season art lives in
   season-<name>.css. Loaded whenever a season is available to a signed-in user (the
   switch must stay visible while the theme is off) or applied on a signed-out page.
   Screen only; the switch and toggle are hidden in print. */

/* ---------- logo-corner slot (web+spider / leaf pile): hidden unless a season draws it */
.season-hang { display: none; }

/* ---------- season knob colours ----------
   The icon (layout.html "season_knob") is the favicon art with sw-* classes. Off = flat
   grey-brown on white; on = the season's colours on its dark badge. The badge colour and
   glow come from custom properties set per season on the switch form / the <html>. */
.season-toggle-form[data-season-name="halloween"], html[data-season="halloween"] { --sk-bg: #2a1246; --sk-glow: rgba(245,138,31,.55); --sk-ring: #f58a1f; }
.season-toggle-form[data-season-name="fall"], html[data-season="fall"] { --sk-bg: #3a2216; --sk-glow: rgba(217,142,50,.55); --sk-ring: #d98e32; }
.season-toggle-form[data-season-name="thanksgiving"], html[data-season="thanksgiving"] { --sk-bg: #3b1c18; --sk-glow: rgba(226,180,76,.5); --sk-ring: #e2b44c; }

.sk { overflow: visible; transition: transform .3s var(--ease-out-md); }
/* off (default) */
.sk .sw-stem { stroke: #8b8f80; transition: stroke .25s; }
.sk .sw-side, .sk .sw-f1 { fill: #a08b7c; transition: fill .25s; }
.sk .sw-mid, .sk .sw-f2 { fill: #b7a495; transition: fill .25s; }
.sk .sw-f3 { fill: #c9bcaf; transition: fill .25s; }
.sk .sw-body { fill: #8d7b6c; transition: fill .25s; }
.sk .sw-acc { fill: #b0a396; transition: fill .25s; }
.sk .sw-face { fill: var(--sk-bg, #2a1246); opacity: 0; transition: opacity .25s; }
.sk-thanksgiving .sw-f3[stroke] { stroke: #c9bcaf; }
/* on: the switch is checked, or the corner toggle is pressed */
:is(.season-switch[aria-checked="true"], .season-bg-toggle[aria-pressed="true"]) .sk .sw-face { opacity: 1; }
:is(.season-switch[aria-checked="true"], .season-bg-toggle[aria-pressed="true"]) .sk-halloween .sw-stem { stroke: #3f7d3a; }
:is(.season-switch[aria-checked="true"], .season-bg-toggle[aria-pressed="true"]) .sk-halloween .sw-side { fill: #e8730c; }
:is(.season-switch[aria-checked="true"], .season-bg-toggle[aria-pressed="true"]) .sk-halloween .sw-mid { fill: #f58a1f; }
:is(.season-switch[aria-checked="true"], .season-bg-toggle[aria-pressed="true"]) .sk-fall .sw-stem { stroke: #7b2d2d; }
:is(.season-switch[aria-checked="true"], .season-bg-toggle[aria-pressed="true"]) .sk-fall .sw-side { fill: #b4532a; }
:is(.season-switch[aria-checked="true"], .season-bg-toggle[aria-pressed="true"]) .sk-fall .sw-mid { fill: #d98e32; }
:is(.season-switch[aria-checked="true"], .season-bg-toggle[aria-pressed="true"]) .sk-thanksgiving .sw-f1 { fill: #7b2d2d; }
:is(.season-switch[aria-checked="true"], .season-bg-toggle[aria-pressed="true"]) .sk-thanksgiving .sw-f2 { fill: #b4532a; }
:is(.season-switch[aria-checked="true"], .season-bg-toggle[aria-pressed="true"]) .sk-thanksgiving .sw-f3 { fill: #e2b44c; }
:is(.season-switch[aria-checked="true"], .season-bg-toggle[aria-pressed="true"]) .sk-thanksgiving .sw-f3[stroke] { stroke: #e2b44c; }
:is(.season-switch[aria-checked="true"], .season-bg-toggle[aria-pressed="true"]) .sk-thanksgiving .sw-body { fill: #7a4a2a; }
:is(.season-switch[aria-checked="true"], .season-bg-toggle[aria-pressed="true"]) .sk-thanksgiving .sw-acc { fill: #c63d2f; }

/* ---------- corner toggle: sign-in scene on/off ----------
   Same flat icon as the favicon / user-menu switch. Lit = background on, grey = off.
   Bottom-right; Back-to-top moves up above it on these pages. Sign-in pages only (.auth-wrap),
   signed in or not (Casey, 09/29: "just have it be an option on the login screen"). */
.season-bg-toggle { display: none; }
html[data-season]:has(.auth-wrap) .season-bg-toggle:not([hidden]) {
  display: grid; place-items: center;
  position: fixed; right: 22px; bottom: 22px; z-index: 5;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--sk-bg); box-shadow: 0 0 14px var(--sk-glow), var(--shadow-card-hi);
  transition: background .25s, box-shadow .25s, transform .16s var(--ease-out-sm);
}
html[data-season]:has(.auth-wrap) .to-top { bottom: 82px; }
.season-bg-toggle .sk { width: 30px; height: 30px; }
html[data-season]:has(.auth-wrap) .season-bg-toggle[aria-pressed="false"] { background: #fff; box-shadow: var(--shadow-card-hi); }
@media (hover: hover) {
  .season-bg-toggle:hover { transform: translateY(-2px); }
  .season-bg-toggle:hover .sk { transform: rotate(-8deg); }
}
.season-bg-toggle:active { transform: translateY(0); }
.season-bg-toggle:focus-visible { outline: 2px solid var(--sk-ring); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .season-bg-toggle, .season-bg-toggle .sk, .season-bg-toggle * { transition: none; }
}

/* ---------- per-user switch (user menu) ----------
   NOT scoped under html[data-season]: the switch must stay visible while the theme is
   off. It renders only while an admin-enabled season is available (layout.html), and
   js/season-toggle.js flips <html data-season> live. The badge looks like the corner toggle:
   the season's icon lit on its dark badge when on, flat grey on white when off. */
.season-switch { gap: 9px; justify-content: flex-start; }
.season-switch-track {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; box-shadow: 0 0 0 1px var(--line-strong), 0 2px 6px rgba(11,40,42,.12);
  transition: background .25s, box-shadow .25s;
}
.season-switch .sk { width: 22px; height: 22px; }
.season-switch[aria-checked="true"] .season-switch-track { background: var(--sk-bg); box-shadow: 0 0 10px var(--sk-glow); }
@media (hover: hover) { .season-switch:hover .sk { transform: rotate(-8deg); } }
.season-switch-label { flex: 1; white-space: nowrap; }
.season-switch:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .season-switch-track, .season-switch .sk { transition: none; }
}

/* ---------- print: nothing seasonal ---------- */
@media print {
  .season-toggle-form, .season-bg-toggle, .season-hang { display: none !important; }
}