/* The site's own pages (landing, account, sign-in, create an account, unsubscribe): what they share
   beyond base.css. Loaded by app/views/layout.php on every page whose view sets 'site' => true, the
   pages that move between each other without a page load (js/shell/soft-nav.js) so the landing
   music plays on (js/shell/site-music.js; docs/ARCHITECTURE.md, "Site pages"). */

/* ---- the header's ♪ music control (app/views/_music-control.php) --------------------------------
   Lit when on, dimmed and struck through when off: the same language as the game's header (game.css
   .music-btn), redrawn here since these pages do not load game.css. */
.site-music { display: inline-flex; align-items: center; }
.site-music-btn {
  position: relative; background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--faint); font-size: 1.05rem; font-family: var(--font-sans); width: 2.1rem; height: 2.1rem;
  cursor: pointer; line-height: 1; padding: 0;
}
.site-music-btn[hidden] { display: none; }
.site-music-btn:hover { border-color: var(--line-strong); color: var(--text-strong); }
.site-music-btn[aria-pressed="true"] { color: var(--accent); }
/* Off (volume at 0) stays plainly visible: the slashed ♪ in the muted text colour, not the faint one,
   which all but vanished on the dark header (Jake, 2026-10-01). */
.site-music-btn[aria-pressed="false"] { color: var(--muted); }
.site-music-btn[aria-pressed="false"]::after {
  content: ''; position: absolute; left: 28%; right: 28%; top: 50%; height: 1.5px;
  background: currentColor; transform: rotate(-45deg); pointer-events: none;
}
.site-music-level {
  position: absolute; left: 20%; right: 20%; bottom: 3px; height: 2px; border-radius: 1px;
  background: var(--line-strong); overflow: hidden; pointer-events: none;
}
.site-music-level > span { display: block; height: 100%; width: 0; background: currentColor; }

/* The volume popover: fixed under the header's right edge, near the ♪ button, on every breakpoint;
   there is only ever one of these on the page, unlike the game's per-panel header. */
.site-music-pop {
  position: fixed; z-index: 50; top: 3.1rem; right: 1rem; width: min(17rem, calc(100vw - 1.5rem));
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.7rem 0.9rem; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  font-family: var(--font-sans); font-size: 0.9375rem; text-transform: none; letter-spacing: normal; text-align: left;
}
.site-music-pop[hidden] { display: none; }
.site-music-pop-label {
  display: block; margin-bottom: 0.4rem; font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.site-music-pop-row { display: flex; align-items: center; gap: 0.7rem; }
.site-music-pop-row input[type="range"] { flex: 1; accent-color: var(--accent); height: 2rem; cursor: pointer; touch-action: none; }
.site-music-pop-out { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text); min-width: 2.6em; text-align: right; }
.site-music-pop-hint { display: block; margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--faint); }

/* ---- moving between pages (js/shell/soft-nav.js) -------------------------------------------------
   The new page's heading takes focus so screen readers announce it; no ring for a mouse or touch. */
[data-soft-focus]:focus:not(:focus-visible) { outline: none; }