/* Floating Home button. Position is set by js/backpos.js and css/layout.css. */
/* (no arrows on the Home buttons) */

/* narrow upright tab, used when the screen is not wide enough for the normal button beside the content box.
   No arrow here: browsers differ in how they turn arrow glyphs in upright text, and the tab's position already points the way. */
.float-back[data-orient="v"] { writing-mode: vertical-rl; padding: 12px 6px; }
body[data-page] .float-back[data-orient="v"]::before { content: none; }

/* the floating button in the green of the Curated Playlists button */
.float-back { background: rgba(115,232,160,0.30); border-color: rgb(115,232,160); color: #ffffff; text-shadow: 0 0 8px rgba(115,232,160,0.6);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 12px rgba(115,232,160,0.45), 0 0 28px rgba(115,232,160,0.2); }
.float-back:hover, .float-back:focus-visible { background: rgb(115,232,160); color: #0a0c10; text-shadow: none; box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 20px rgba(115,232,160,0.8); }

/* phones: the Home button is always top left, where a left thumb reaches it (desktop is unchanged) */
@media (max-width: 800px) {
  body[data-page] .float-back { top: 72px; left: 12px; right: auto; bottom: auto; transform: none; }
}

/* second floating switch (Silent / Audio): beside the Video / Image one on desktop, above it on phones */
.audio-toggle-wrap { bottom: 30px; right: 300px; }
@media (max-width: 800px) { .audio-toggle-wrap { bottom: 56px; right: 12px; } }

/* the two switches show icons only (words stay for screen readers) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.media-toggle-wrap .toggle-label { display: inline-flex; align-items: center; font-size: 1.05rem; line-height: 1; }
.media-toggle-wrap .toggle-label .ico { display: block; }
.audio-toggle-wrap { right: 190px; }
@media (max-width: 800px) { .audio-toggle-wrap { right: 12px; bottom: 56px; } }

/* Contact page hangs off the left of Curated Playlists: home lies to the right */
@media (min-width: 801px) { body[data-page="contact"] .float-back { top: 84px; right: 30px; } }