/* Wartime Radio.
   One slim bar. Drawn in CSS, no images, so it stays sharp and takes the site's
   colours. Palette matches Strategic Theaters; nothing here depends on it. */

.wwr{
  --w-case:#2C2119;
  --w-edge:#45302A;
  --w-dial:#D8C9A3;
  --w-dial-lo:#A8935F;
  --w-mark:#5E8570;
  --w-mono:"Roboto Mono",ui-monospace,SFMono-Regular,monospace;
  --w-sans:"Roboto",system-ui,sans-serif;
  position:fixed;right:18px;bottom:18px;z-index:9000;font-family:var(--w-sans);
}
.wwr *,.wwr *::before,.wwr *::after{box-sizing:border-box}
.wwr .screen-reader-text{position:absolute!important;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- closed ---------- */
.wwr-tab{display:flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--w-case);border:1px solid var(--w-edge);border-radius:3px;
  padding:8px 14px 8px 11px;color:var(--w-dial);
  font-family:var(--w-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 2px 12px rgba(44,33,25,.34)}
.wwr-tab:hover{border-color:var(--w-dial-lo)}
.wwr-tab-dial{width:8px;height:8px;border-radius:50%;flex:none;background:var(--w-dial-lo)}
.wwr.is-open .wwr-tab{display:none}

/* ---------- open: the bar ---------- */
.wwr-bar{display:none;position:relative;align-items:center;gap:8px;
  height:46px;padding:0 8px 0 0;max-width:calc(100vw - 36px);
  background:var(--w-case);border:1px solid var(--w-edge);border-radius:3px;
  box-shadow:0 3px 18px rgba(44,33,25,.42)}
.wwr.is-open .wwr-bar{display:flex}

/* The station plate is the player: small, but present and visible, which is what
   the IFrame API terms ask for. At bar height it reads as a name plate. */
.wwr-plate{position:relative;flex:none;width:78px;height:44px;overflow:hidden;
  border-right:1px solid var(--w-edge);background:#161009}
.wwr-screen,.wwr-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wwr-screen iframe{transform:scale(1.9);transform-origin:center}
.wwr-plate-off{position:absolute;inset:0;
  background:linear-gradient(180deg,#3A2E20,#161009);
  box-shadow:inset 0 0 14px rgba(0,0,0,.7)}
.wwr.is-playing .wwr-plate-off{display:none}

.wwr-btn{flex:none;width:28px;height:28px;display:grid;place-items:center;cursor:pointer;
  background:none;border:0;border-radius:3px;color:var(--w-dial-lo);padding:0}
.wwr-btn:hover{color:var(--w-dial);background:rgba(216,201,163,.09)}
.wwr-btn svg{width:12px;height:12px;fill:currentColor}
.wwr-play{width:32px;height:32px;margin-left:6px;color:var(--w-dial);
  border:1px solid var(--w-edge)}
.wwr-play svg{width:13px;height:13px}
.wwr-mute[aria-pressed="true"]{color:#8C6A5C}

/* what is playing */
.wwr-read{flex:1;min-width:0;display:flex;flex-direction:column;
  justify-content:center;gap:2px;padding:0 4px}
.wwr-station{font-family:var(--w-mono);font-size:8px;letter-spacing:.18em;
  color:var(--w-dial-lo);text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.wwr-line{display:flex;align-items:baseline;gap:5px;min-width:0}
.wwr-n{font-family:var(--w-mono);font-size:11px;color:var(--w-dial);font-weight:500}
.wwr-of{font-family:var(--w-mono);font-size:8.5px;color:rgba(216,201,163,.42);margin-left:-3px}
.wwr-title{font-size:12px;color:var(--w-dial);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}

.wwr-list-toggle{flex:none;width:28px;height:28px;display:grid;place-items:center;
  cursor:pointer;background:none;border:0;border-radius:3px;color:var(--w-dial-lo);padding:0}
.wwr-list-toggle:hover{color:var(--w-dial);background:rgba(216,201,163,.09)}
.wwr-list-toggle svg{width:12px;height:12px;fill:currentColor}
.wwr.is-listing .wwr-list-toggle{color:var(--w-dial);background:rgba(216,201,163,.13)}
.wwr-close{flex:none;width:24px;height:24px;display:grid;place-items:center;cursor:pointer;
  background:none;border:0;color:rgba(216,201,163,.45);padding:0}
.wwr-close:hover{color:var(--w-dial)}
.wwr-close svg{width:10px;height:10px;fill:currentColor}

/* programme, opening upward so it never covers the bar */
.wwr-list{display:none;position:absolute;left:0;right:0;bottom:100%;margin:0 0 5px;padding:0;
  list-style:none;max-height:246px;overflow-y:auto;
  background:var(--w-case);border:1px solid var(--w-edge);border-radius:3px;
  box-shadow:0 -3px 18px rgba(44,33,25,.42)}
.wwr.is-listing .wwr-list{display:block}
.wwr-list li{border-bottom:1px solid rgba(216,201,163,.08)}
.wwr-list li:last-child{border-bottom:0}
.wwr-list button{display:grid;grid-template-columns:26px 1fr;gap:8px;width:100%;
  text-align:left;background:none;border:0;cursor:pointer;padding:8px 10px;color:var(--w-dial)}
.wwr-list button:hover{background:rgba(216,201,163,.08)}
.wwr-list li.is-current button{background:rgba(94,133,112,.26)}
.wwr-li-n{font-family:var(--w-mono);font-size:9px;color:var(--w-dial-lo);padding-top:2px}
.wwr-li-t{font-size:12.5px;line-height:1.35}
.wwr-li-b{grid-column:2;font-family:var(--w-mono);font-size:8.5px;
  color:rgba(216,201,163,.5);letter-spacing:.04em}
.wwr-note{padding:9px 10px;font-family:var(--w-mono);font-size:8.5px;line-height:1.8;
  color:rgba(216,201,163,.45);border-top:1px solid rgba(216,201,163,.14)}

@media(max-width:640px){
  .wwr{right:8px;left:8px;bottom:8px}
  .wwr-bar{max-width:none}
  .wwr-plate{width:56px}
  .wwr-prev{display:none}
  .wwr-station{display:none}
}
@media print{.wwr{display:none}}