/* The podcast: the corner player and the donation box. Pixel look from tko.css. */
.corner-player{margin:28px 0 36px}
.cp-stage{position:relative; border:4px solid var(--navy); box-shadow:0 0 0 4px #000, 0 0 0 8px var(--red-deep); background:#05050c; line-height:0}
.cp-scene{display:block; width:100%; height:auto; aspect-ratio:16/9; image-rendering:pixelated; image-rendering:crisp-edges}
.cp-subs{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.cp-stage, .cp-subs, .cp-scene{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.cp-bell-flash{position:absolute; inset:0; display:grid; place-items:center; line-height:1;
  font-size:clamp(18px,5vw,40px); color:var(--yellow); text-shadow:4px 4px 0 var(--red-deep); background:rgba(245,233,86,.18)}
.cp-bell-flash[hidden]{display:none}
.cp-bell-flash.go{animation:cp-ding 1.8s steps(6) forwards}
@keyframes cp-ding{0%,30%,60%{opacity:1; transform:scale(1.04)} 15%,45%{opacity:.35; transform:scale(1)} 100%{opacity:0}}

/* the rope: the seek bar, with the paid part hatched and a bell at the free mark */
.cp-rope{position:relative; margin:22px 4px 10px; height:22px}
.cp-seek{position:absolute; inset:0; width:100%; margin:0; background:transparent; -webkit-appearance:none; appearance:none; z-index:2; cursor:pointer}
.cp-seek::-webkit-slider-runnable-track{height:8px; background:repeating-linear-gradient(90deg,var(--red) 0 10px,#f4f1e8 10px 14px); border:2px solid #000}
.cp-seek::-moz-range-track{height:8px; background:repeating-linear-gradient(90deg,var(--red) 0 10px,#f4f1e8 10px 14px); border:2px solid #000}
.cp-seek::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; margin-top:-9px; background:var(--red); border:3px solid #000; box-shadow:inset -3px -3px 0 var(--red-deep), inset 3px 3px 0 #ff7a6e; border-radius:0}
.cp-seek::-moz-range-thumb{width:16px; height:16px; background:var(--red); border:3px solid #000; border-radius:0}
.cp-locked, .cp-bellmark{display:none}
.is-locked .cp-locked{display:block; position:absolute; top:5px; bottom:5px; left:calc(var(--free) * 100%); right:0; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(0,0,0,.72) 0 4px, rgba(37,49,108,.85) 4px 8px)}
.is-locked .cp-bellmark{display:block; position:absolute; top:-12px; left:calc(var(--free) * 100% - 8px); width:16px; height:14px; z-index:4; pointer-events:none;
  background:var(--yellow); clip-path:polygon(20% 100%,20% 40%,35% 10%,65% 10%,80% 40%,80% 100%,100% 100%,100% 80%,0 80%,0 100%)}

.cp-controls{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px}
.cp-btn{font-family:inherit; font-size:12px; line-height:1; text-transform:uppercase; color:var(--peri); background:#000;
  border:3px solid var(--navy); padding:12px 14px; min-width:56px; min-height:44px; cursor:pointer}
.cp-btn:hover, .cp-btn:focus-visible{color:var(--yellow); border-color:var(--yellow); outline:none}
.cp-play{color:#000; background:var(--red); border-color:#000; box-shadow:0 0 0 3px var(--red-deep); min-width:128px; color:#f4f1e8}
.cp-play:hover{color:var(--yellow); border-color:#000}
.cp-cc.is-on{color:var(--mint); border-color:var(--mint)}
.cp-clock{text-align:center; margin:16px 0 0; font-size:11px; color:var(--peri)}
.cp-round{color:var(--yellow)}
.cp-from{color:var(--mint)}
.cp-free, .cp-thanks{text-align:center; font-size:10px; line-height:2; color:var(--mint); margin:10px 0 0}
.cp-thanks{color:var(--yellow)}

/* the donation box */
.donate.is-called{border-color:var(--yellow); box-shadow:0 0 24px rgba(245,233,86,.35)}
.donate .err{color:var(--red)}
.donate-row{display:flex; gap:10px; margin:0 0 12px}
.donate-row select, .donate-row input{font-family:inherit; font-size:14px; padding:12px; background:#000; color:var(--yellow); border:2px solid var(--navy); min-height:44px}
.donate-row input{flex:1; min-width:0}
.donate-quick{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
.donate .fine{font-size:10px; color:var(--peri); margin-top:14px}

/* the episode list */
.pod-list{list-style:none; padding:0; margin:28px 0}
.pod-list a{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; padding:18px; border:4px solid var(--navy); margin-bottom:14px; text-decoration:none}
.pod-list a:hover{border-color:var(--yellow)}
.pod-no{grid-row:span 2; color:#000; background:var(--red); padding:10px; font-size:12px; align-self:start}
.pod-title{color:var(--yellow); font-size:13px; line-height:1.6}
.pod-meta{color:var(--peri); font-size:10px}

@media (max-width:600px){
  .corner-player{margin-inline:-8px}
  .cp-btn{font-size:11px; padding:12px 10px; min-width:48px}
  .cp-play{min-width:110px; order:-1; flex-basis:100%}
}

/* ---- the studio ---- */
.st-badge{margin-left:10px; padding:4px 8px; font-size:9px; color:#000; background:var(--yellow); vertical-align:middle}
.st-time{font-size:clamp(28px,8vw,48px)!important; color:var(--yellow)!important; margin:6px 0 10px!important; letter-spacing:2px}
.is-live .st-time, .is-live .sc-clock{color:var(--red)!important; text-shadow:0 0 12px rgba(212,57,46,.6)}
.st-mod, .sc-mod{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 16px}
.st-now{display:grid; gap:6px; margin:6px 0 14px; font-size:11px; line-height:1.8; color:var(--mint)}
.st-now b{color:var(--yellow); font-weight:normal}
.st-now em{font-style:normal; color:var(--peri)}
.st-link{color:var(--yellow); font-size:11px}
.st-who, .st-servers{display:grid; gap:10px}
.st-pick, .st-server{display:flex; align-items:center; gap:12px; padding:14px; border:3px solid var(--navy); cursor:pointer; font-size:12px; color:var(--peri)}
.st-pick:has(input:checked), .st-server:has(input:checked){border-color:var(--yellow); color:var(--yellow)}
.st-server.is-off{opacity:.5; cursor:not-allowed}
.st-dot{width:10px; height:10px; background:var(--mint); box-shadow:0 0 8px var(--mint)}
.is-off .st-dot{background:#555; box-shadow:none}
.st-city{flex:1}
.st-note{font-size:9px; color:var(--mint)}
.is-off .st-note{color:var(--peri)}
.st-meter{height:14px; border:3px solid var(--navy); background:#000; margin:4px 0 16px}
.st-meter i{display:block; height:100%; width:0; background:repeating-linear-gradient(90deg,var(--mint) 0 8px,#000 8px 10px); transition:width .06s steps(4)}
.st-meter i.is-hot{background:repeating-linear-gradient(90deg,var(--red) 0 8px,#000 8px 10px)}
.st-rec{display:flex; flex-wrap:wrap; gap:10px}
.st-recstate{font-size:10px!important; color:var(--peri)!important; margin-top:14px!important}

/* ---- the run sheet ---- */
.script-page{padding-top:12px}
.sc-head h1{font-size:clamp(16px,4vw,24px); line-height:1.6; color:var(--yellow); margin:8px 0 12px}
.sc-kicker{font-size:10px; color:var(--peri); margin:0}
.sc-blurb{font-size:11px; line-height:2; color:var(--mint)}
.sc-bar{position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:end; gap:14px 24px; margin:18px -8px 8px; padding:14px 16px 20px;
  background:#000; border:4px solid var(--navy)}
.sc-bar > div{display:grid; gap:6px}
.sc-label{font-size:9px; color:var(--peri); text-transform:uppercase}
.sc-clock{font-size:clamp(22px,6vw,34px); color:var(--yellow)}
.sc-left{font-size:clamp(16px,4vw,22px); color:var(--mint)}
.sc-left.is-stretch{color:var(--yellow)}
.sc-left.is-over{color:var(--red)}
.sc-next{flex:1; min-width:160px; font-size:11px; line-height:1.7; color:var(--mint)}
.sc-progress{position:absolute; left:0; right:0; bottom:0; height:6px; background:#111}
.sc-progress i{display:block; height:100%; width:0; background:var(--red)}
.sc-state{font-size:10px; color:var(--peri)}
.sc-opening{border:3px dashed var(--yellow); padding:14px 16px; margin:18px 0}
.sc-opening p{font-size:12px; line-height:2; color:var(--yellow); margin:8px 0 0}
.sc-segs{list-style:none; padding:0; margin:18px 0}
.sc-seg{border:4px solid var(--navy); padding:16px; margin-bottom:14px; scroll-margin-top:130px}
.sc-seg.is-now{border-color:var(--red); box-shadow:0 0 24px rgba(212,57,46,.35)}
.sc-seg.is-done{opacity:.45}
.sc-seg-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px}
.sc-seg h2{flex:1; min-width:200px; font-size:13px; line-height:1.7; color:var(--yellow); margin:0}
.sc-no{color:#000; background:var(--peri); padding:6px 8px; font-size:11px}
.is-now .sc-no{background:var(--red); color:#fff}
.sc-dur, .sc-at{font-size:10px; color:var(--peri)}
.sc-seg ul{margin:12px 0 0; padding-left:18px}
.sc-seg li{font-size:11px; line-height:2; color:var(--mint); margin-bottom:6px}
.st-pick input, .st-server input{position:absolute; opacity:0; width:1px; height:1px; margin:0; padding:0; border:0}
.st-pick{position:relative}
.st-pick::before{content:""; width:12px; height:12px; flex:none; border:3px solid var(--navy); background:#000}
.st-pick:has(input:checked)::before{background:var(--yellow); border-color:var(--yellow)}
.st-pick:has(input:focus-visible), .st-server:has(input:focus-visible){outline:2px dashed var(--yellow); outline-offset:3px}
.st-server{position:relative}
.sc-bar > .sc-mod{display:flex; flex-wrap:wrap; gap:8px; margin:0}
.sc-mod .btn, .sc-mod .cp-btn{min-height:40px; padding:10px 12px}
.sc-mod .btn{width:auto; display:inline-flex; align-items:center}
@media (max-width:600px){
  .sc-bar{gap:8px 16px; padding:10px 12px 14px; margin-inline:-12px}
  .sc-clock{font-size:22px}
  .sc-left{font-size:16px}
  .sc-next{flex-basis:100%; font-size:10px}
  .sc-bar > .sc-mod{flex-basis:100%; flex-wrap:nowrap}
  .sc-mod .btn, .sc-mod .cp-btn{flex:1; justify-content:center; padding:8px 6px; font-size:10px; min-height:38px; min-width:0}
}
.sc-mod .btn{margin:0}

/* ---- script review ---- */
.st-ready{font-size:10px!important; color:var(--peri)!important}
.st-ready.is-ready{color:var(--mint)!important}
.st-cast{display:grid; gap:12px; margin:8px 0 18px}
.st-castrow{display:grid; grid-template-columns:minmax(90px,auto) 1fr auto; gap:8px 10px; align-items:center}
.st-castname{font-size:12px; color:var(--yellow)}
.st-castrow input{font-family:ui-monospace,Menlo,monospace; font-size:14px; padding:10px; background:#000; color:var(--yellow); border:2px solid var(--navy); min-width:0; min-height:44px}
.st-castnote{grid-column:1 / -1; margin:0!important; font-size:10px!important; line-height:1.8!important; color:var(--mint)!important; word-break:break-all}
.st-castnote a{color:var(--yellow)}
.st-prop{border:3px solid var(--navy); padding:14px; margin:0 0 14px}
.st-prop.is-submitted{border-color:var(--yellow)}
.st-prophead{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; font-size:11px; color:var(--peri); margin:0 0 10px}
.st-prophead b{color:var(--yellow); font-weight:normal}
.st-propnote{font-size:11px!important; color:var(--mint)!important; border-left:3px solid var(--mint); padding-left:10px}
.st-stale{font-size:10px!important; color:var(--red)!important}
.st-diff{font:13px/1.6 ui-monospace,Menlo,monospace; background:#05050c; border:2px solid #1a1f44; padding:8px 0; overflow-x:auto; margin:0 0 12px; -webkit-user-select:text; user-select:text}
.df{padding:0 10px; white-space:pre-wrap; color:#9aa3c4}
.df span{display:inline-block; width:1.4em; color:#555}
.df-add{background:rgba(123,189,167,.14); color:#c9f5e4}
.df-add span{color:var(--mint)}
.df-del{background:rgba(212,57,46,.16); color:#f3c2bd}
.df-del span{color:var(--red)}
.df-gap{color:#444; text-align:center}
.df ins{background:rgba(123,189,167,.45); color:#fff; text-decoration:none}
.df del{background:rgba(212,57,46,.5); color:#fff}
.st-propbtns{display:flex; gap:10px; flex-wrap:wrap}
.st-deny{border-color:var(--red-deep)}
.st-readybar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; border-top:3px dashed var(--navy); padding-top:16px}
.st-readybar span{font-size:11px; color:var(--peri)}
.st-readybar.is-ready span{color:var(--mint)}
.st-mod .btn[disabled], .sc-mod .btn[disabled]{opacity:.45; cursor:not-allowed}
.review-form textarea{width:100%; box-sizing:border-box; font:14px/1.6 ui-monospace,Menlo,monospace; background:#05050c; color:#e8e6f0; border:3px solid var(--navy); padding:14px; margin:0 0 14px}
.review-note{display:block; font-size:11px; color:var(--peri); margin:0 0 14px}
.review-note textarea{margin-top:8px}
@media (max-width:600px){ .st-castrow{grid-template-columns:1fr} }
.st-propbtns .btn, .st-readybar .btn{width:auto; display:inline-flex; align-items:center; margin:0}
.review-eg{font:13px/1.7 ui-monospace,Menlo,monospace; color:#e8e6f0; background:#05050c; border:2px dashed var(--navy); padding:12px 14px; margin:0 0 14px; white-space:pre-wrap; overflow-x:auto}
.review-eg-note{font-size:11px!important; color:var(--peri)!important}