/* Channel BadCode. The browser window is the TV screen; the remote floats (desktop), docks under the
   picture (phone, upright) or tucks away (phone, sideways). Everything inside the screen is sized in
   container units, so it fits any window shape. */
:root{
  --black:#050505; --glass:#0b0b0b; --cream:#ece6da; --muted:#a89f90;
  --red:#cc2b37; --amber:#E8A33D; --osd:#5cff6a; --day:#E9E7E1; --hivis:#F5D300; --ink:#151515;
  --blue:#3b5bdb; --news:#d63a2f; --gov:#e8c514;
  --ui:"Archivo",system-ui,sans-serif; --voice:"Instrument Serif",Georgia,serif;
  --crt:"Oswald","Arial Narrow",sans-serif; --mono:"Share Tech Mono",ui-monospace,monospace;
  --tt:"VT323",ui-monospace,monospace; --gov-type:"Public Sans",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--black);color:var(--cream);font:16px/1.5 var(--ui)}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
a{color:inherit}

/* ---------- plain text (screen readers, search engines, no-JS) ---------- */
.plain{max-width:68ch;margin:0 auto;padding:24px max(16px,env(safe-area-inset-left,0px))}
.plain h1{font:800 2rem/1.1 var(--ui);font-stretch:75%}
.plain nav ul{padding-left:1.2em}
.js .plain{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.js) .tv{display:none}

/* ---------- the set ---------- */
.tv{position:fixed;inset:0;overflow:hidden}
.screen{position:absolute;inset:max(6px,env(safe-area-inset-top,0px)) max(6px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px));border-radius:clamp(10px,2.6vmin,28px);overflow:hidden;background:var(--glass);container-type:size;isolation:isolate;box-shadow:0 0 0 1px #1c1c1c}
.screen::before{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(0,0,0,.55) 100%),repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 2px,transparent 2px 4px);transition:opacity .3s}
.screen::after{content:"";position:absolute;inset:0;z-index:41;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.06),transparent 38%)}
.clean .screen::before,.playing .screen::before,.daylight .screen::before{opacity:0}
.clean .screen::after,.playing .screen::after{opacity:.4}

.layer{position:absolute;inset:0;display:none}
.layer.on{display:block}
canvas.snow{position:absolute;inset:0;width:100%;height:100%;z-index:30;opacity:0;image-rendering:pixelated;pointer-events:none}
.static canvas.snow{opacity:.9}
.osd{position:absolute;top:4cqmin;right:5cqmin;z-index:35;font:9cqmin/1 var(--mono);color:var(--osd);text-shadow:0 0 1.6cqmin rgba(92,255,106,.6);opacity:0;transition:opacity .25s;text-align:right;pointer-events:none}
.osd.show{opacity:1}
.osd small{display:block;font-size:3.2cqmin;margin-top:1cqmin}
.standby{position:absolute;inset:0;z-index:39;background:var(--black);display:none;place-items:center}
.off .standby{display:grid}
.standby svg{width:7cqmin;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}
.tear{animation:tear .45s steps(6)}
@keyframes tear{20%{transform:skewX(12deg) translateX(-5%)}45%{transform:skewX(-8deg) translateX(6%);filter:hue-rotate(80deg)}70%{transform:translateY(-3%)}}

/* overlays: ident, hijack, closedown */
.over{z-index:20}
.ov-ident{position:absolute;inset:0;background:var(--black);display:grid;place-items:center}
.ov-ident svg{width:38cqmin}
.ov-ident .r{stroke-dasharray:180;stroke-dashoffset:180;animation:draw .9s ease forwards}
.ov-ident .t{opacity:0;animation:tri .3s .8s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes tri{from{opacity:0;transform:translate(-6px,6px)}to{opacity:1}}
.ov-ident p{position:absolute;bottom:12cqh;width:100%;text-align:center;font:500 3.6cqmin var(--crt);letter-spacing:.3em;color:#cfc8bb;margin:0}
.ov-boring{position:absolute;inset:0;background:#fff;color:#333;padding:8cqmin;font:3cqmin/1.5 Arial,sans-serif}
.ov-boring h2{margin:0 0 3cqmin;font-size:5cqmin;color:#1d4f91;font-weight:700}
.ov-boring i{display:block;height:2.6cqmin;background:#e8e8e8;margin:2.6cqmin 0;border-radius:2px;max-width:70ch}
.ov-host{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#57534e 0 4cqmin,#6b6660 4cqmin 8cqmin);display:grid;place-items:center}
.ov-host svg{height:86%}
.ov-closed{position:absolute;inset:0;background:var(--black);display:grid;place-content:center;text-align:center;gap:3cqmin;padding:8cqmin;cursor:pointer}
.ov-closed svg{width:20cqmin;margin:0 auto}
.ov-closed p{margin:0;font:4.6cqmin/1.3 var(--crt);color:#cfc8bb}
.ov-closed small{font:3cqmin var(--mono);color:var(--muted)}

/* ---------- programmes ---------- */
.prog .bug{position:absolute;top:4cqmin;left:5cqmin;z-index:5;font:500 3cqmin/1 var(--crt);letter-spacing:.14em;color:var(--amber);text-transform:uppercase}
.pill{display:inline-flex;align-items:center;gap:1.4cqmin;font:3cqmin/1 var(--mono);padding:1.6cqmin 2.6cqmin;border-radius:99px;background:rgba(0,0,0,.6);color:var(--cream);border:1px solid rgba(236,230,218,.4)}
button.pill{cursor:pointer;background:var(--cream);color:#111;border:0;font-weight:700}

/* stories */
.p-story{position:absolute;inset:0;background:#000}
.p-story .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-story .blank{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#2c2925,#0c0b0a);display:grid;place-items:center}
.p-story .blank span{font:3.4cqmin var(--mono);color:#7d766a;letter-spacing:.2em}
.p-story .cap{position:absolute;left:0;right:0;bottom:0;padding:22cqh 6cqmin 6cqmin;background:linear-gradient(transparent,rgba(0,0,0,.88));display:grid;gap:1.6cqmin;justify-items:start}
.p-story .kind{font:500 3cqmin var(--crt);letter-spacing:.2em;color:var(--amber);text-transform:uppercase}
.p-story h1{margin:0;font:700 clamp(28px,10cqmin,120px)/.92 var(--crt);text-transform:uppercase;color:#f1ebe0;text-shadow:0 0 2cqmin rgba(232,163,61,.35);max-width:18ch;text-wrap:balance}
.p-story p{margin:0;font:clamp(14px,3.2cqmin,22px)/1.4 var(--ui);color:#ddd5c7;max-width:52ch}
.p-story.song .still{filter:blur(3cqmin) brightness(.45) saturate(1.2);transform:scale(1.15)}
.p-story .sleeve{position:absolute;left:50%;top:44%;width:46cqmin;height:46cqmin;transform:translate(-50%,-50%) rotate(-2deg);box-shadow:0 2cqmin 6cqmin rgba(0,0,0,.6);overflow:hidden;background:#222}
.p-story .sleeve img{width:100%;height:100%;object-fit:cover}
.p-story .sleeve::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0 1px,transparent 1px 4px)}

/* news */
.p-news{position:absolute;inset:0;background:radial-gradient(ellipse at 35% 35%,#2b2420,#080808)}
.p-news .host{position:absolute;right:4cqw;bottom:16cqh;height:62cqh}
.p-news .txt{position:absolute;left:6cqmin;top:14cqh;max-width:min(60cqw,30em);display:grid;gap:2cqmin}
.p-news h1{margin:0;font:700 clamp(28px,9cqmin,110px)/.95 var(--crt);text-transform:uppercase;color:#f1ebe0}
.p-news .strap{margin:0;font:italic clamp(16px,4cqmin,30px)/1.25 var(--voice);color:#e6dccb}
.p-news .lower{position:absolute;left:0;right:0;bottom:9cqh;background:var(--amber);color:#0b0b0b;font:700 clamp(15px,4cqmin,40px)/1.1 var(--crt);padding:1.6cqmin 6cqmin;text-transform:uppercase}
.p-news .lower small{display:block;font:500 clamp(11px,2.4cqmin,20px) var(--crt);letter-spacing:.08em}
.p-news .tick{position:absolute;left:0;right:0;bottom:3cqh;font:clamp(12px,2.8cqmin,22px) var(--mono);color:#E9E7E1;white-space:nowrap;overflow:hidden;background:#111;padding:1cqmin 0}
.p-news .tick span{display:inline-block;animation:tk 40s linear infinite;padding-left:100%}
@keyframes tk{to{transform:translateX(-100%)}}

/* government: the one clean picture */
.p-gov{position:absolute;inset:0;background:var(--day);color:var(--ink);font-family:var(--gov-type);overflow:auto}
.p-gov .bar{background:var(--ink);color:#fff;padding:2.6cqmin 6cqmin;display:flex;align-items:center;gap:2cqmin;font:700 clamp(14px,3cqmin,24px) var(--gov-type)}
.p-gov .bar svg{width:clamp(18px,4.4cqmin,40px)}
.p-gov .body{padding:5cqmin 6cqmin 14cqmin;max-width:62em}
.p-gov h1{margin:0;font:800 clamp(26px,7cqmin,72px)/1.02 var(--gov-type);text-wrap:balance;max-width:22ch}
.p-gov .lead{font:clamp(15px,2.8cqmin,22px)/1.45 var(--gov-type);max-width:52ch;margin:2.4cqmin 0 0}
.p-gov ol{list-style:none;margin:4cqmin 0 0;padding:0;display:grid;gap:2.4cqmin;counter-reset:p}
.p-gov li{border-left:1.4cqmin solid #00703c;padding:.6cqmin 0 .6cqmin 2.6cqmin;counter-increment:p}
.p-gov li b{display:block;font:800 clamp(16px,3.4cqmin,28px)/1.2 var(--gov-type)}
.p-gov li b::before{content:"Pledge " counter(p) ". ";color:#00703c}
.p-gov.fp li b::before{content:counter(p) ". "}
.p-gov li span{display:block;font:clamp(14px,2.6cqmin,20px)/1.45 var(--gov-type);color:#383f43;max-width:56ch}
.p-gov .q{margin:0 0 2cqmin;font:700 clamp(13px,2.4cqmin,18px) var(--gov-type);color:#505a5f}
.p-gov .ask{margin:4cqmin 0 0;padding:2.6cqmin 3cqmin;background:#fff;border:.4cqmin solid var(--ink);font:clamp(15px,2.8cqmin,22px)/1.45 var(--gov-type);max-width:56ch}
.p-gov .notreal{margin:3cqmin 0 0;font:clamp(13px,2.4cqmin,18px) var(--gov-type);color:#505a5f}
.p-gov .haz{position:absolute;left:0;right:0;bottom:0;height:3.4cqmin;background:repeating-linear-gradient(45deg,var(--hivis) 0 3cqmin,var(--ink) 3cqmin 6cqmin)}
.p-gov .ppb{position:absolute;inset:0;background:var(--ink);color:#fff;display:grid;place-content:center;text-align:center;padding:8cqmin;transition:opacity .6s;z-index:3}
.p-gov .ppb p{margin:0;font:clamp(14px,3.4cqmin,26px)/1.4 var(--gov-type)}
.p-gov .ppb b{display:block;font:800 clamp(22px,6cqmin,56px)/1.1 var(--gov-type);margin-top:2cqmin}
.p-gov .ppb.gone{opacity:0;pointer-events:none}

/* test card */
.p-test{position:absolute;inset:0;background:#7a7a7a}
.p-test .bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr)}
.p-test .bars i:nth-child(1){background:#c0c0c0}.p-test .bars i:nth-child(2){background:#c0c000}.p-test .bars i:nth-child(3){background:#00b4b4}.p-test .bars i:nth-child(4){background:#00c000}.p-test .bars i:nth-child(5){background:#c000c0}.p-test .bars i:nth-child(6){background:#c00000}.p-test .bars i:nth-child(7){background:#0000c0}
.p-test .disc{position:absolute;left:50%;top:47%;width:64cqmin;height:64cqmin;transform:translate(-50%,-50%);border-radius:50%;background:#e8e4da;border:1.4cqmin solid #111;overflow:hidden;display:grid;place-items:center}
.p-test .disc svg{width:78%}
.p-test .cap{position:absolute;left:0;right:0;bottom:4cqmin;text-align:center;font:3cqmin var(--mono);color:#fff;text-shadow:0 0 .6cqmin #000;padding:0 4cqmin}

/* video */
.video{z-index:10;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- teletext: a 4:3 box, 40 columns, centred ---------- */
.tt{z-index:15;background:#000;font-family:var(--tt)}
.ttbox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);aspect-ratio:4/3;height:100%;max-width:100%;container-type:inline-size}
@container (max-aspect-ratio:4/3){.ttbox{height:auto;width:100%}}
.tt .in{position:absolute;left:2.5cqw;top:1.6cqw;width:calc(95cqw / 1.62);transform:scaleX(1.62);transform-origin:0 0;font-size:3.05cqw;line-height:1;white-space:pre;color:#fff}
.tt .in div{height:1em}
.tt .r{color:#ff2020}.tt .y{color:#ffff00}.tt .g{color:#00ff00}.tt .m{color:#ff00ff}.tt .c{color:#7fd7ff}.tt .w{color:#fff}.tt .b{color:#6b7bff}
.tt .bb{background:#0000ff}.tt .br{background:#ff0000;color:#fff}.tt .by{background:#ffff00;color:#000}.tt .bg{background:#00b000;color:#000}
.tt .dh{display:inline-block;transform:scaleY(2);transform-origin:0 0}
.tt .fl{animation:fl 1s steps(1) infinite}
@keyframes fl{50%{visibility:hidden}}
.tt a{text-decoration:none;cursor:pointer}
.tt a:hover,.tt a:focus-visible{background:#fff;color:#000;outline:0}
.tt.day{background:#fff}.tt.day .in{color:#000}.tt.day .w{color:#000}
.tt .ft a{color:#000}

/* ---------- remote ---------- */
.remote{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));z-index:50;width:230px;background:linear-gradient(#2a2826,#141312);border-radius:28px 28px 40px 40px;padding:16px 14px 18px;display:grid;gap:10px;box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 1px 0 #48443d;transition:transform .3s cubic-bezier(.6,0,.2,1),opacity .3s}
.remote button{font:700 .8rem/1 var(--ui);color:#e9e3d8;background:#3a3733;border:0;border-radius:10px;padding:11px 0;cursor:pointer;box-shadow:0 3px 0 #0b0a09;min-height:40px}
.remote button:active{transform:translateY(2px);box-shadow:0 1px 0 #0b0a09}
.remote button[aria-pressed="true"]{background:#e9e3d8;color:#141312}
.rtop{display:grid;grid-template-columns:44px 1fr 1fr 36px;gap:6px}
.rtop .pwr{background:var(--red);color:#fff;display:grid;place-items:center;padding:0}
.rtop .pwr svg{width:22px}
.strands{display:grid;gap:6px}
.strands button{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:8px;text-align:left;padding:11px 12px;color:#111}
.strands b{font:800 1rem/1 var(--ui);font-stretch:80%}
.strands small{font:500 .72rem/1.1 var(--ui);opacity:.75}
.st-stories{background:var(--blue)!important;color:#fff!important}
.st-news{background:var(--news)!important;color:#fff!important}
.st-gov{background:var(--gov)!important}
.strands button[aria-current="true"]{outline:3px solid #fff;outline-offset:-3px}
.pad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pad button{font:var(--mono);font-family:var(--mono);font-size:1.05rem}
.nav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.hint{margin:0;font:600 .72rem/1.3 var(--ui);color:#8d867a;text-align:center}
.untuck{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:49;font:700 .75rem var(--ui);letter-spacing:.1em;background:#2a2826;color:#e9e3d8;border:1px solid #48443d;border-radius:99px;padding:10px 14px;cursor:pointer;display:none}
.tucked .remote{transform:translateY(130%);opacity:0;pointer-events:none}
.tucked .untuck{display:block}

/* phone, upright: picture on top, the remote fills the bottom */
@media (orientation:portrait) and (max-width:820px){
  .tv{display:grid;grid-template-rows:minmax(0,1fr) auto;padding:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));gap:10px}
  .screen{position:relative;inset:auto;width:100%;height:100%;min-height:42vh}
  .remote{position:relative;right:auto;bottom:auto;width:100%;border-radius:22px;padding:12px;gap:8px}
  .rtop .tuck{visibility:hidden}
  .strands{grid-template-columns:repeat(3,1fr)}
  .strands button{grid-template-columns:1fr;text-align:center;padding:14px 6px;gap:4px}
  .remote button{min-height:46px}
  .tucked .remote{transform:none;opacity:1;pointer-events:auto}
  .tucked .untuck{display:none}
}
/* phone, sideways: full-screen picture; the remote starts tucked */
@media (orientation:landscape) and (max-height:520px){
  .remote{width:210px;gap:6px;padding:10px;bottom:8px;right:8px;max-height:calc(100% - 16px);overflow:auto}
  .remote button{min-height:34px;padding:8px 0}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.ov-ident .r{stroke-dashoffset:0}.ov-ident .t{opacity:1}}
.clean *,.clean *::before,.clean *::after{animation:none!important}
.clean .ov-ident .r{stroke-dashoffset:0}.clean .ov-ident .t{opacity:1}