/* THE ROSE WINDOW (2026-10-09): the header's glass control - themes, moving fractals, backlight.
   rose-window.js draws it (its comment holds the full contract); the tokens are the page's own, so it
   wears every theme. Three things live here rather than in the script:
   - THE SLOT IS HELD. The button ships `hidden` and the script shows it. Where scripts run, its box is
     laid out (invisible, not focusable) from the first frame, with a 30 px place for the rose it will
     draw, so mounting moves nothing. With scripts off, (scripting:enabled) is false: no empty slot.
   - Under 640 px the window is a bottom sheet over a scrim, and the page under it does not scroll.
   - It floats over the corner music and support buttons (z-index 90): 96, its scrim 95.
   - Every word a person reads is 14 px or more; reduced motion stops every turn. */
@media (scripting:enabled){
  .site-header .rose-trigger[hidden]{display:inline-flex!important;visibility:hidden}
}
.rose-trigger{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:4px 12px 4px 5px;
  border:1px solid var(--edge,#4f4576);border-radius:999px;background:var(--surface-1,#15101f);
  color:var(--text-2,#cfc6e0);font:500 14px var(--body,system-ui);cursor:pointer;
  transition:border-color .2s,color .2s,box-shadow .2s}
.rose-trigger:not(.is-mounted)::before{content:"";width:30px;height:30px;flex:none}
.rose-trigger:hover,.rose-trigger[aria-expanded="true"]{border-color:var(--gold,#c4a2ff);color:var(--text-1,#fff);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold,#c4a2ff) 22%,transparent)}
.rose-trigger:focus-visible{outline:2px solid var(--gold,#c4a2ff);outline-offset:2px}
.rose-trigger__rose{width:30px;height:30px;flex:none}
.rose-motion-on .rose-trigger__rose{animation:rose-turn 48s linear infinite}
@keyframes rose-turn{to{transform:rotate(360deg)}}

/* THE ROSE MARK (2026-10-09; one lockup 2026-10-10): the trademark, immediately left of the wordmark - a
   still, decorative rose drawn by rose-mark.js into [data-rose-mark]. Its slot is held where scripts run so
   mounting moves nothing; with scripts off there is no empty slot and the wordmark names the link. It is
   the header's only mark now (the peacock is the favicon), so it shows at every width: on the narrowest
   phones the word steps aside and the rose alone is the 44 px home link (site.css). */
.rose-mark{display:none;width:24px;height:24px;flex:none}
@media (scripting:enabled){.rose-mark{display:inline-block}}
.rose-mark>svg{display:block;width:100%;height:100%}

.rose-window{position:fixed;z-index:96;display:grid;grid-template-columns:280px 230px;gap:22px;align-items:center;
  padding:22px 24px;border:1px solid var(--edge-lit,var(--edge,#4f4576));border-radius:18px;
  background:color-mix(in srgb,var(--surface-1,#15101f) 88%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 24px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);color:var(--text-1,#fff)}
.rose-window[hidden],.rose-window-scrim[hidden]{display:none}
.rose-window__rose{display:block;width:280px;height:280px;overflow:visible}
.rose-motion-on .rose-window__rose .rose-hub__spiral{animation:rose-turn 12s linear infinite}
.rose-stone{fill:var(--surface-0,#0d0914);stroke:var(--edge,#4f4576);stroke-width:2}
/* the meter's second ring is hidden until ring() asks for it; an SVG element is not hidden by the attribute alone
   on a page without the site's own [hidden] rule (the social card), where it painted a black disc over the rose */
.rose-ring{fill:none}
.rose-ring[hidden]{display:none}
.rose-glass{transition:filter .18s}
.rose-lead{fill:none;stroke:color-mix(in srgb,var(--surface-0,#0d0914) 70%,#000);stroke-width:2.4;stroke-linejoin:round;pointer-events:none}
.rose-roundel{stroke:color-mix(in srgb,var(--surface-0,#0d0914) 70%,#000);stroke-width:2;pointer-events:none}
.rose-window .rose-petal{cursor:pointer;outline:none}
.rose-window .rose-petal:hover .rose-glass,.rose-window .rose-petal:focus-visible .rose-glass{filter:brightness(1.3) saturate(1.2)}
.rose-window .rose-petal[aria-checked="true"] .rose-lead{stroke:var(--gold-lit,var(--gold,#dfccff));stroke-width:4}
/* the chosen petal: a thick accent lead AND a small dot (2026-10-10), so it never looks like the dashed focus ring */
.rose-petal__dot{display:none;pointer-events:none}
.rose-window .rose-petal[aria-checked="true"] .rose-petal__dot{display:inline;fill:#fff;stroke:#140f1f;stroke-width:2.5}
.rose-window .rose-petal:focus-visible .rose-lead{stroke:var(--text-1,#fff);stroke-width:4;stroke-dasharray:5 3}
.rose-hub__glass{fill:var(--surface-2,#1d162b)}
.rose-hub__spiral{fill:none;stroke:var(--gold,#c4a2ff);stroke-width:2.6;stroke-linecap:round;transform-origin:0 0}
.rose-window .rose-hub{cursor:pointer;outline:none}
.rose-window .rose-hub[aria-checked="true"] .rose-hub__glass{fill:color-mix(in srgb,var(--gold,#c4a2ff) 26%,var(--surface-2,#1d162b))}
.rose-window .rose-hub[aria-checked="false"] .rose-hub__spiral{stroke:var(--text-3,#8f86a3)}
.rose-window .rose-hub:focus-visible .rose-hub__lead{stroke:var(--text-1,#fff);stroke-width:3.5;stroke-dasharray:5 3}

.rose-window__side{display:flex;flex-direction:column;gap:12px;min-width:0}
.rose-window__eyebrow{margin:0;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3,#8f86a3)}
.rose-window__name{margin:0;font:400 34px/1.1 var(--display,serif);color:var(--text-1,#fff)}
.rose-window__hint{margin:0;font-size:14px;line-height:1.55;color:var(--text-2,#cfc6e0)}
@media (hover:none),(pointer:coarse){.rose-window__key{display:none}}
.rose-window__switch{display:flex;align-items:center;gap:10px;min-height:44px;font-size:16px;cursor:pointer}
.rose-window__switch input{width:20px;height:20px;accent-color:var(--gold,#c4a2ff)}
.rose-window__light{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rose-window__label{width:100%;font-size:14px;color:var(--text-3,#8f86a3)}
.rose-window__light button,.rose-window__system,.rose-window__close{min-height:44px;padding:6px 14px;border:1px solid var(--edge,#4f4576);
  border-radius:8px;background:transparent;color:var(--text-2,#cfc6e0);font:500 14px var(--body,system-ui);cursor:pointer}
.rose-window__light button[aria-pressed="true"]{border-color:var(--gold,#c4a2ff);color:var(--text-1,#fff);
  background:color-mix(in srgb,var(--gold,#c4a2ff) 18%,transparent)}
.rose-window__light button:disabled{opacity:.5;cursor:not-allowed}
.rose-window__system[aria-pressed="true"]{border-color:var(--gold,#c4a2ff);color:var(--text-1,#fff)}
.rose-window__actions{display:flex;flex-wrap:wrap;gap:6px}
.rose-window__close{margin-left:auto}
.rose-window :is(button,input):focus-visible{outline:2px solid var(--gold-text,var(--gold,#c4a2ff));outline-offset:2px}
.rose-window__status{margin:0;font-size:14px;color:var(--text-3,#8f86a3)}
.rose-window__status:empty{display:none}
.rose-window-scrim{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.5)}

@media (max-width:640px){
  .rose-trigger{padding:6px;justify-content:center;gap:0}
  .rose-trigger>span{display:none}                         /* the button's aria-label still names it */
  /* THE BOTTOM SHEET: across the foot of the screen, its own scroll, clear of the home indicator. */
  .rose-window,.rose-window.is-sheet{top:auto!important;right:0!important;bottom:0;left:0!important;
    grid-template-columns:1fr;justify-items:center;gap:14px;
    max-height:min(88dvh,calc(100vh - 56px));overflow:auto;overscroll-behavior:contain;
    padding:12px 18px calc(18px + env(safe-area-inset-bottom,0px));
    border-radius:20px 20px 0 0;border-bottom:0;
    background:var(--surface-1,#15101f);box-shadow:0 -18px 50px rgba(0,0,0,.45)}
  /* No drag handle: the sheet closes by the scrim, Close or Escape, and is not dragged (review, 2026-10-09). */
  .rose-window__rose{width:min(240px,62vw);height:min(240px,62vw)}
  .rose-window__side{width:100%}
  .rose-window__name{font-size:28px}
  html.rose-sheet-open,html.rose-sheet-open body{overflow:hidden}
  html.rose-sheet-open #site-theme-toast{top:16px;bottom:auto;z-index:97}   /* the choice is said above the sheet */
}
@media (prefers-reduced-motion:reduce){.rose-trigger__rose,.rose-window__rose .rose-hub__spiral{animation:none!important}}
@media (forced-colors:active){.rose-glass{forced-color-adjust:none}.rose-window-scrim{background:Canvas;opacity:.6}}