/* grekguiden.se/radio: the programme page, the episode pages. Loaded only by them (build.py radio_*), after
 * legal.css, whose text column, .glead, .updated and .finenotes these pages reuse. Colours, radius and type are
 * site.css's own :root tokens.
 */
.radio h2{font-size:21px;font-weight:600;color:var(--ink);margin:38px 0 14px;line-height:1.3}
.radio>.wrap>p>a{color:var(--accent)}
.radio-ai{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--muted);max-width:70ch}

/* the audio control: the browser's own, full width of the column */
.rplayer{margin:0 0 22px;max-width:720px}
.rplayer audio{display:block;width:100%;min-height:54px}
.rdl-p{margin:8px 0 0;font-size:14px;line-height:1.7}
.radio-ep .rbar+.rdl-p{margin:-10px 0 22px}
.rdl{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.rdl:hover{color:var(--accent)}
/* "playing now" (a programme's own page) and the resume button: radio.js unhides them */
.rnow{margin:10px 0 0;font-size:14.5px;color:var(--ink-2)}
.rnow a{color:var(--accent)}
.rresume{margin:10px 0 0}
.rresume[hidden],.rnow[hidden]{display:none}


/* the play button: a blue disc with the white arrow (a post's bar) or a white disc on a blue tile (the archive). radio.js puts
   .is-playing on it, which swaps the arrow for the pause bars. */
.rplay{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--accent);color:#fff;cursor:pointer;transition:transform .12s}
.rplay:hover{transform:scale(1.06)}
.rplay svg{width:20px;height:20px;fill:currentColor}
.rplay .rp-pause,.rplay.is-playing .rp-play{display:none}
.rplay.is-playing .rp-pause{display:block}
.rplay:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.rplay{transition:none}}
.rplay-sm svg{width:15px;height:15px}

/* an episode page */
.radio-ep .rsrc{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.radio-ep .rsrc a{color:var(--muted)}
@media (max-width:600px){
}

/* /radio/ header (2026-09-30, Savvas: "full of text and overwhelming"): the cover, one line, where else to listen */
.rhero{display:flex;align-items:center;gap:16px;max-width:900px;margin:0 0 10px}
.rhero-img{flex:none;width:84px;height:84px;border-radius:12px;box-shadow:0 3px 12px rgba(0,0,0,.14)}
.rhero-b{min-width:0}
.rhero-t{margin:0 0 2px;font-size:16px;line-height:1.45;color:var(--ink)}
.rhero-ai{margin:0 0 6px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.rlisten{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.rpill{display:inline-flex;align-items:center;padding:4px 12px;border-radius:99px;border:1px solid var(--line);background:var(--bg);
  color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.rpill:hover{border-color:var(--accent);color:var(--accent)}
.radio>.wrap>.rhero a.rpill{color:var(--ink)}
.radio>.wrap>.rhero a.rpill:hover{color:var(--accent)}
@media (max-width:600px){
  .rhero{gap:14px;align-items:flex-start}
  .rhero-img{width:64px;height:64px;border-radius:10px}
  .rhero-t{font-size:14.5px}
}

/* a programme's page is a full article with its bar on top (Savvas, 2026-10-01): the bar drives the visit's one
   audio element, which radio.js moves out of the content and hides (.has-bars);
   without JavaScript the browser's own control stays and plays the page's programme. */
.rplayer.has-bars{margin:0}
.radio .rplayer.has-bars .rresume{height:34px;margin:2px 0 4px;padding:0 16px;font-size:14px}
.rbar{display:flex;align-items:center;gap:14px;max-width:760px;margin:0 0 20px;padding:10px 16px 10px 10px;border-radius:99px;background:var(--grey)}
.rprog{flex:1;min-width:0;margin:0;accent-color:var(--accent);cursor:pointer}
.rtime{flex:none;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rbar.is-current{background:var(--accent-soft)}
.radio .rcal+.finenotes{margin-top:30px}
@media (max-width:600px){
  .rbar{gap:10px;padding:8px 12px 8px 8px}
  .rtime{font-size:12.5px}
}

/* ---- /radio/ itself (Savvas 2026-10-01: "the archive should be the /radio/ page"): a calendar, a week to a row, Monday to Sunday; 4 weeks at a
   time (radio.js pages through them; without it every block shows). A day with a programme is a blue square with its
   play button and title; on phones only the number and the button fit. */
.rcal{position:relative;max-width:1100px}
.rcal-b[hidden]{display:none}
.radio .rcal-r{margin:12px 0 12px;font-size:16px}
.rcal-h,.rcal-w{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.rcal-h{margin:0 0 4px}
.rcal-h span{font-size:13px;font-weight:600;color:var(--muted);text-align:center;text-transform:capitalize}
.rcal-w{margin:0 0 6px}
.rcal-d{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:80px;padding:7px 8px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);overflow:hidden}
.rcal-n{font-size:13px;font-weight:600;color:var(--muted)}
.rcal-d.has-ep{border:0;color:#fff;isolation:isolate;background:linear-gradient(160deg,var(--accent) 0%,var(--accent-dark) 100%)}
.rcal-d.has-ep::before{content:"";position:absolute;right:-60px;bottom:-60px;width:170px;height:170px;z-index:-1;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 11px,rgba(255,255,255,.14) 11px 13px)}
.rcal-d.has-ep .rcal-n{color:rgba(255,255,255,.9)}
.rcal-d .rplay{width:32px;height:32px;background:#fff;color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.rcal-d .rplay svg{width:14px;height:14px}
.rcal-t{font-size:12.5px;font-weight:600;line-height:1.25;color:#fff !important;text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcal-t:hover{text-decoration:underline;text-underline-offset:3px}
.rcal-d .rplay:focus-visible,.rcal-t:focus-visible{outline:2px solid #fff;outline-offset:2px}
.rcal-d.is-current{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.rcal-d.is-playing .rcal-n::after{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;
  background:#fff;vertical-align:1px;animation:rpulse 1.2s ease-in-out infinite}
@keyframes rpulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.rcal-d.is-playing .rcal-n::after{animation:none}}
.rcal-p{position:absolute;top:2px;right:0;display:flex;gap:6px;z-index:1}
.rcal-p[hidden]{display:none}
.radio .rcal-p .btn{height:28px;gap:4px;padding:0 12px;font-size:13px}
.rcal-p .btn[disabled]{opacity:.4;cursor:default}
.rcal-p .i{width:1em;height:1em}
@media (max-width:700px){
  .rcal-p{position:static;justify-content:space-between;margin:10px 0 0}
  .rcal-h,.rcal-w{gap:4px}
  .rcal-w{margin:0 0 4px}
  .rcal-d{min-height:62px;padding:5px 3px;align-items:center;border-radius:8px}
  .rcal-t{display:none}
  .rcal-d .rplay{width:32px;height:32px}
  .rcal-d .rplay svg{width:14px;height:14px}
  .rcal-h span{font-size:11.5px}
}

/* ---- the bar at the foot of the screen (radio.js makes it, once something plays; on every podcast page, and it stays
   while the programme moves on to the next page). Play/pause, the title (its page), the place to drag, the time, the
   volume (not on phones: they only obey their own buttons). While it shows, <html> has .has-rsb and the page gets
   room underneath. Idea and look from the podcast work of 2026-10-01 (branch worktree-agent-a6868e3d8f553faa3). */
.rsb{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.98);border-top:1px solid var(--line);
  box-shadow:0 -4px 18px rgba(17,17,17,.10);padding:0 0 env(safe-area-inset-bottom)}
.rsb[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.rsb{animation:rsb-in .22s ease-out}}
@keyframes rsb-in{from{transform:translateY(100%)}to{transform:none}}
.rsb-in{display:flex;align-items:center;gap:12px;max-width:1300px;margin:0 auto;height:60px;
  padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
.rsb-play{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--accent);color:#fff;cursor:pointer}
.rsb-play svg{width:20px;height:20px;fill:currentColor}
.rsb-play .rp-pause,.rsb-play.is-playing .rp-play{display:none}
.rsb-play.is-playing .rp-pause{display:block}
.rsb-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.rsb-t{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none}
.rsb-t:hover{color:var(--accent)}
.rsb-row{display:flex;align-items:center;gap:10px;min-width:0}
.rsb-seek{flex:1 1 auto;min-width:0;margin:0;accent-color:var(--accent);cursor:pointer}
.rsb-time{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rsb-vol{flex:none;display:flex;align-items:center;gap:6px;color:var(--muted)}
.rsb-vol svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rsb-vol input{width:96px;margin:0;accent-color:var(--accent);cursor:pointer}
.rsb-play:focus-visible,.rsb-t:focus-visible,.rsb-seek:focus-visible,.rsb-vol input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:none),(max-width:600px){.rsb-vol{display:none}}
html.has-rsb body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
html.has-rsb{scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom))}

/* ---- a programme's page: the bar that stays under the header (Savvas, 2026-10-01): all programmes on the left,
   previous and next on the right, each with its date */
.repnav{position:sticky;top:calc(var(--hdr-h) + 8px);z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:8px;max-width:760px;margin:0 0 20px;padding:5px;border:1px solid var(--line);border-radius:99px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(17,17,17,.08)}
.repnav .i{width:16px;height:16px;flex:none}
.repnav-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 10px;border-radius:99px;
  background:var(--accent);color:#fff !important;font-size:14px;font-weight:600;text-decoration:none}
.repnav-back:hover{background:var(--accent-dark)}
.repnav-pn{display:flex;gap:4px}
.repnav-b{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:99px;color:var(--ink) !important;
  text-decoration:none;font-size:14px;font-weight:600}
a.repnav-b:hover{background:var(--accent-soft);color:var(--accent) !important}
.repnav-b.is-off{opacity:.35}
.repnav-l{display:flex;flex-direction:column;line-height:1.15}
.repnav-next .repnav-l{align-items:flex-end}
.repnav-l small{font-size:11.5px;font-weight:500;color:var(--muted)}
.repnav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:600px){
  .repnav{top:calc(var(--hdr-h) + 6px)}
  .repnav-back span{display:none}
  .repnav-back{padding:0 10px}
  .repnav-b{padding:0 8px;font-size:13.5px}
}

/* ---- under a programme's text: send us your question (Savvas, 2026-10-01) */
.rask{max-width:760px;margin:30px 0 0;padding:18px 20px;border-radius:14px;background:var(--accent-soft)}
.radio-ep .rask h2{margin:0 0 6px;font-size:18px;font-weight:600;color:var(--ink)}
.rask p{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.rask ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.rask a{display:inline-flex;align-items:center;padding:7px 14px;border-radius:99px;background:var(--bg);border:1px solid var(--line);
  color:var(--ink) !important;font-size:14px;font-weight:600;text-decoration:none}
.rask a:hover{border-color:var(--accent);color:var(--accent) !important}

/* ---- top of a programme's page: the links the host points to (Savvas, 2026-10-01) */
.rlinks{max-width:760px;margin:0 0 24px;padding:14px 18px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;background:var(--bg)}
.radio-ep .rlinks h2{margin:0 0 8px;font-size:16px;font-weight:600;color:var(--ink)}
.rlinks ul{margin:0;padding:0 0 0 1.2em;font-size:15px;line-height:1.7}
.rlinks a{color:var(--accent);text-underline-offset:2px}