/* The cdn.voscast.com embed (player.php): small (150 x 30) and medium (300 x 72), in station.voscast.com's light and
   dark colours, fonts and shapes. The page stays transparent around the pill, so it sits on any site's background;
   it never sets color-scheme, because a frame whose scheme differs from its page's gets an opaque background. */
:root,[data-theme="light"]{--card:#fff;--card-bg:linear-gradient(180deg,#fff 0%,#f6f8fc 100%);--line-strong:rgba(15,22,38,.12);--line-tag:rgba(15,22,38,.098);--neutral-soft:rgba(15,22,38,.05);--neutral-line:rgba(15,22,38,.14);--ink:#0f1626;--ink2:#2a3345;--mut:#4a5468;--mut3:#667085;--acc-strong:#4a7311;--danger:#b42318;--inset:inset 0 1px 0 rgba(255,255,255,.95);--play-shadow:0 12px 26px -12px rgba(74,115,17,.55),inset 0 1px 0 rgba(255,255,255,.45)}
:root{--lime:#6cc024;--lime-hover:#7fd236;--on-lime:#0a0f1c;--sans:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
[data-theme="dark"]{--card:#141c2e;--card-bg:linear-gradient(180deg,#1b2439 0%,#141c2e 100%);--line-strong:rgba(226,232,245,.12);--line-tag:rgba(226,232,245,.098);--neutral-soft:rgba(226,232,245,.05);--neutral-line:rgba(226,232,245,.14);--ink:#eef1f7;--ink2:#c3cad8;--mut:#a9b3c7;--mut3:#8a95ab;--acc-strong:#8fd14f;--danger:#ff8a7a;--inset:inset 0 1px 0 rgba(255,255,255,.1);--play-shadow:0 12px 26px -12px rgba(108,192,36,.65),inset 0 1px 0 rgba(255,255,255,.45)}
@media (prefers-color-scheme:dark){[data-theme="auto"]{--card:#141c2e;--card-bg:linear-gradient(180deg,#1b2439 0%,#141c2e 100%);--line-strong:rgba(226,232,245,.12);--line-tag:rgba(226,232,245,.098);--neutral-soft:rgba(226,232,245,.05);--neutral-line:rgba(226,232,245,.14);--ink:#eef1f7;--ink2:#c3cad8;--mut:#a9b3c7;--mut3:#8a95ab;--acc-strong:#8fd14f;--danger:#ff8a7a;--inset:inset 0 1px 0 rgba(255,255,255,.1);--play-shadow:0 12px 26px -12px rgba(108,192,36,.65),inset 0 1px 0 rgba(255,255,255,.45)}}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:transparent;overflow:hidden}
body{font-family:var(--sans);font-stretch:96%;-webkit-font-smoothing:antialiased;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* size=large without a station page to go to: the medium player, centred in the 300 x 200 frame */
.vp-centre{height:100vh;display:flex;align-items:center;justify-content:center}
button{font:inherit;color:inherit;margin:0}
:focus-visible{outline:2px solid var(--acc-strong);outline-offset:2px}
[hidden]{display:none!important}
.vp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.vp{position:relative;display:flex;align-items:center;border:1px solid var(--line-strong);background:var(--card-bg);box-shadow:var(--inset);color:var(--ink)}

/* Play: the station page's lime button and icons */
.vp-play{flex:none;padding:0;border:0;border-radius:50%;background:var(--lime);color:var(--on-lime);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
.vp-play:hover{background:var(--lime-hover)}
.vp-play:focus-visible{outline:2px solid var(--on-lime);outline-offset:-5px}
.vp-play svg{display:none}
.vp-play .vp-i-play{display:block}
.vp[data-state="playing"] .vp-play .vp-i-play,.vp[data-state="loading"] .vp-play .vp-i-play{display:none}
.vp[data-state="playing"] .vp-play .vp-i-pause{display:block}
.vp[data-state="loading"] .vp-play .vp-i-wait{display:block;animation:vp-spin .8s linear infinite}
@keyframes vp-spin{to{transform:rotate(360deg)}}

/* Status: a dot and a mono label (Live, Off air, Can't connect) */
.vp-status{display:flex;align-items:center;gap:6px;min-width:0;font-family:var(--mono);font-size:10.5px;line-height:14px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--mut3)}
.vp-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--mut3)}
.vp-label{flex:none;font-weight:700}
.vp-status[data-tone="live"] .vp-dot{background:var(--lime)}
.vp-status[data-tone="live"] .vp-label{color:var(--acc-strong)}
.vp-status[data-tone="danger"] .vp-dot{background:var(--danger)}
.vp-status[data-tone="danger"] .vp-label{color:var(--danger)}
.vp[data-state="playing"] .vp-status[data-tone="live"] .vp-dot{box-shadow:0 0 8px var(--lime);animation:vp-pulse 1.6s ease-in-out infinite}
@keyframes vp-pulse{50%{opacity:.3}}

/* Volume: the speaker mutes; the slider sets the level */
.vp-mute{flex:none;padding:0;border:0;background:transparent;color:var(--mut);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
.vp-mute:hover{color:var(--ink)}
.vp-mute svg{display:none}
[data-sound="high"] .vp-i-high,[data-sound="low"] .vp-i-low,[data-sound="muted"] .vp-i-muted{display:block}
.vp-range{--pct:100%;--fill:var(--acc-strong);flex:1;min-width:0;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:none}
[data-sound="muted"] .vp-range{--fill:var(--mut3)}
.vp-range:focus-visible{outline:none}
.vp-range::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--fill) var(--pct),var(--neutral-line) var(--pct))}
.vp-range::-webkit-slider-thumb{width:10px;height:10px;margin-top:-3.5px;border:0;border-radius:50%;background:var(--fill);box-shadow:0 0 0 2px var(--card);-webkit-appearance:none;appearance:none}
.vp-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--acc-strong)}
.vp-range::-moz-range-track{height:3px;border-radius:2px;background:var(--neutral-line)}
.vp-range::-moz-range-progress{height:3px;border-radius:2px;background:var(--fill)}
.vp-range::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--fill);box-shadow:0 0 0 2px var(--card)}
.vp-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--acc-strong)}
/* iPhone and iPad ignore a page's volume: there the speaker only mutes */
.vp--fixed .vp-range,.vp--fixed .vp-slide{display:none}

/* Small, 150 x 30: play, the time listened while it plays (Live otherwise), speaker and slider */
.vp--small{width:150px;height:30px;border-radius:15px;padding:0 8px 0 2px;gap:6px}
.vp--small .vp-play{width:24px;height:24px}
.vp--small .vp-play svg{width:11px;height:11px}
.vp--small .vp-play .vp-i-wait{width:13px;height:13px}
.vp--small .vp-status{flex:none;min-width:42px;gap:5px;font-size:10px}
.vp--small .vp-dot{width:6px;height:6px}
.vp--small .vp-time{display:none;font-size:10.5px;font-weight:500;letter-spacing:0;color:var(--ink2);font-variant-numeric:tabular-nums}
.vp--small[data-state="playing"] .vp-time{display:inline}
.vp--small[data-state="playing"] .vp-label{display:none}
.vp--small .vp-volume{flex:1;min-width:0;display:flex;align-items:center;gap:2px}
.vp--small .vp-mute{width:20px;height:24px;border-radius:6px}
.vp--small .vp-mute svg{width:14px;height:14px}
.vp--small .vp-range{height:20px}
/* Off air there's no dot (it marks a live station), so the longer label leaves the slider its room */
.vp--small .vp-status[data-tone="neutral"] .vp-dot{display:none}
.vp--small .vp-status[data-tone="neutral"] .vp-label{letter-spacing:.04em}

/* Medium, 300 x 72: play, the station's name, Live and the song, and the station page's volume button, whose slider
   slides out over the name and song */
.vp--medium{width:300px;height:72px;border-radius:36px;padding:0 13px;gap:12px}
.vp--medium .vp-play{width:44px;height:44px;box-shadow:var(--play-shadow)}
.vp-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;transition:opacity .15s ease}
/* The slider's rounded end would show the name and song underneath, so they fade out while it's out */
.vp[data-volume="open"] .vp-who{opacity:0}
.vp-name{min-height:18px;font-size:14px;line-height:18px;font-weight:800;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-song{min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--sans);font-size:12.5px;line-height:16px;letter-spacing:0;text-transform:none;color:var(--mut)}
.vp--medium .vp-volume{position:relative;flex:none;width:36px;height:36px}
.vp-pop{position:absolute;top:0;right:0;width:36px;height:36px;border-radius:999px;border:1px solid var(--line-tag);background:var(--neutral-soft);overflow:hidden;transition:width .22s ease,background-color .22s ease}
.vp-volume[data-open="true"] .vp-pop{width:216px;background:var(--card)}
.vp-volume:not([data-open="true"]) .vp-pop:hover{background:var(--line-tag)}
.vp-slide{position:absolute;top:0;bottom:0;left:14px;right:38px;display:flex;align-items:center;gap:8px;visibility:hidden;opacity:0;transition:opacity .15s ease,visibility 0s linear .15s}
.vp-volume[data-open="true"] .vp-slide{visibility:visible;opacity:1;transition-delay:.06s,0s}
.vp-value{flex:none;width:34px;font-family:var(--mono);font-size:11px;font-weight:700;text-align:right;color:var(--ink2)}
.vp--medium .vp-mute{position:absolute;top:0;right:0;width:34px;height:34px;border-radius:50%;color:var(--ink2)}
.vp--medium .vp-mute svg{width:16px;height:16px}
.vp--medium .vp-mute:focus-visible{outline-offset:-4px}
.vp--medium .vp-range{height:34px}
.vp--medium .vp-range::-webkit-slider-runnable-track{height:4px}
.vp--medium .vp-range::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px}
.vp--medium .vp-range::-moz-range-track,.vp--medium .vp-range::-moz-range-progress{height:4px}
.vp--medium .vp-range::-moz-range-thumb{width:14px;height:14px}

@media (prefers-reduced-motion:reduce){
  .vp-pop,.vp-slide,.vp-who{transition:none}
  .vp[data-state="playing"] .vp-status[data-tone="live"] .vp-dot{animation:none}
}