/* After Hours · the TV at /after-hours/ (Anduin picked "late-night TV", 2026-10-11, to get After Hours out of the neon
   look the rest of the site has, and asked for it full width, its own world like the Samples page).
   The whole window is an old TV after midnight. Channel 0 is the station ID: SMPTE color bars with the three lines.
   Every week is a channel showing that week's page (tools/after-hours-tv.mjs takes the pictures). Changing the channel
   runs through snow and a rolling picture; the info banner along the bottom is the cable box's, with Watch to go in.
   The guide is the old blue listings channel, and the plain list of every week without JavaScript. */
.tv-page{--tv-ink:#F2F6F3;--tv-dim:#AEB8B4;--tv-osd:#7DFF9B;--tv-guide:#13206E;--tv-guide-2:#0B1452;--tv-yellow:#FFE14D;
  --f-osd:"VT323","DM Mono",Consolas,monospace;background:#000}
.tv{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#000;color:var(--tv-ink);isolation:isolate}

/* ---------- the tube: picture, snow, glass ---------- */
.tv-tube{position:absolute;inset:0;overflow:hidden;background:#05070A;transform-origin:50% 50%}
.tv-id,.tv-show{position:absolute;inset:0;margin:0}
.tv-show img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:saturate(1.15) contrast(1.06)}
/* shade the top and bottom of the picture, so the name, the channel number and the banner sit on something quiet */
.tv-show::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.72) 0,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 58%,rgba(0,0,0,.82) 86%,rgba(0,0,0,.92) 100%)}
.tv-snow{position:absolute;inset:0;width:100%;height:100%;opacity:.07;mix-blend-mode:screen;pointer-events:none}
.tv-glass{position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse 120% 105% at 50% 50%,transparent 58%,rgba(0,0,0,.38) 82%,rgba(0,0,0,.85) 100%),
    radial-gradient(ellipse 60% 40% at 30% 18%,rgba(255,255,255,.06),transparent 70%);
  animation:tv-flicker 6s steps(60) infinite}
@keyframes tv-flicker{0%,100%{opacity:1}48%{opacity:.94}50%{opacity:1}73%{opacity:.97}}

/* the station ID: color bars (SMPTE, the 75% bars), and a card over them */
.tv-bars{position:absolute;inset:0;display:grid;grid-template-rows:67fr 8fr 25fr}
.tv-bars-top{background:linear-gradient(90deg,#C0C0C0 0 14.29%,#C0C000 0 28.57%,#00C0C0 0 42.86%,#00C000 0 57.14%,#C000C0 0 71.43%,#C00000 0 85.71%,#0000C0 0)}
.tv-bars-mid{background:linear-gradient(90deg,#0000C0 0 14.29%,#131313 0 28.57%,#C000C0 0 42.86%,#131313 0 57.14%,#00C0C0 0 71.43%,#131313 0 85.71%,#C0C0C0 0)}
.tv-bars-low{background:linear-gradient(90deg,#00214C 0 17.86%,#FFFFFF 0 35.71%,#32006A 0 53.57%,#131313 0 71.43%,#090909 0 76.19%,#131313 0 80.95%,#1D1D1D 0 85.71%,#131313 0)}
.tv-card{position:absolute;left:50%;top:46%;width:min(640px,calc(100% - 40px));transform:translate(-50%,-50%);padding:clamp(1.2rem,3vw,2rem) clamp(1.2rem,3.4vw,2.4rem);
  background:#000;border:3px solid #fff;box-shadow:0 0 0 6px #000,0 20px 60px rgba(0,0,0,.6);text-align:center}
.tv-card-k{margin:0;font:400 clamp(1.1rem,2vw,1.4rem)/1 var(--f-osd);letter-spacing:.14em;text-transform:uppercase;color:var(--tv-dim)}
.tv-card-t{margin:.2rem 0 .9rem;font:900 clamp(3rem,8vw,5.6rem)/.9 var(--f-display);letter-spacing:.03em;text-transform:uppercase;color:#fff;
  text-shadow:2px 0 rgba(255,40,80,.65),-2px 0 rgba(40,200,255,.65)}
.tv-line{margin:.35rem 0 0;font:400 clamp(1.25rem,2.2vw,1.6rem)/1.2 var(--f-osd);letter-spacing:.03em;color:var(--tv-ink);text-wrap:balance}

/* ---------- on the screen: name, channel number, info banner, remote, station bug ---------- */
.tv-me,.tv-osd,.tv-banner,.tv-remote,.tv-bug{position:absolute;z-index:5}
.tv-me{left:var(--gutter);top:calc(14px + env(safe-area-inset-top,0px));font:400 1.35rem/1 var(--f-osd);letter-spacing:.06em;text-transform:uppercase;color:var(--tv-ink);text-decoration:none;
  text-shadow:0 0 6px rgba(0,0,0,.9),1px 0 rgba(255,40,80,.5),-1px 0 rgba(40,200,255,.5)}
.tv-me:hover{color:var(--tv-osd)}
.tv-osd{right:calc(var(--gutter) + 6px);top:calc(10px + env(safe-area-inset-top,0px));margin:0;font:400 clamp(2.6rem,5vw,4rem)/1 var(--f-osd);letter-spacing:.04em;color:var(--tv-osd);
  text-shadow:0 0 10px rgba(125,255,155,.55),2px 2px 0 rgba(0,0,0,.7);opacity:0;transition:opacity .6s}
.tv-osd.is-on{opacity:1;transition:none}
.tv-bug{right:calc(var(--gutter) + 4px);bottom:calc(72px + env(safe-area-inset-bottom,0px));margin:0;font:900 1.05rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.42;pointer-events:none}

/* the cable box's info banner */
.tv-banner{left:var(--gutter);right:calc(var(--gutter) + 330px);bottom:calc(18px + env(safe-area-inset-bottom,0px));max-width:820px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.1rem;
  padding:.85rem 1rem;background:linear-gradient(180deg,rgba(20,32,96,.9),rgba(6,10,40,.92));border:2px solid rgba(160,180,255,.55);box-shadow:0 10px 40px rgba(0,0,0,.6)}
.tv-banner[hidden]{display:none}
.tv-b-ch{display:grid;justify-items:center;margin:0;padding:.3rem .7rem;border:2px solid var(--tv-yellow);color:var(--tv-yellow);font-family:var(--f-osd);line-height:.9}
.tv-b-ch span{font-size:1rem;letter-spacing:.1em}
.tv-b-ch b{font-weight:400;font-size:2.6rem}
.tv-b-when{margin:0;font:400 1.15rem/1 var(--f-osd);letter-spacing:.08em;text-transform:uppercase;color:var(--tv-yellow)}
.tv-b-t{margin:.15rem 0 .2rem;font:900 clamp(1.7rem,3vw,2.4rem)/1 var(--f-display);letter-spacing:.03em;text-transform:uppercase;color:#fff}
.tv-b-d{margin:0;font-size:.92rem;line-height:1.4;color:#D5DCF5;text-wrap:pretty}
.tv-watch{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:.4rem;white-space:nowrap;min-width:6.5rem;padding:.6rem 1.1rem;background:#fff;color:#0B1452;font:400 1.6rem/1 var(--f-osd);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.tv-watch::after{content:"▶";font-size:.75em}
.tv-watch:hover{background:var(--tv-yellow)}

/* the remote */
.tv-remote{right:var(--gutter);bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;gap:6px}
.tv-key{min-height:44px;padding:.4rem .85rem;background:rgba(10,12,16,.82);color:var(--tv-ink);border:1px solid rgba(242,246,243,.35);border-radius:4px;
  font:400 1.3rem/1 var(--f-osd);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.6)}
.tv-key:hover{border-color:var(--tv-ink)}
.tv-key:active{transform:translateY(1px);box-shadow:none}
.tv-key[aria-expanded="true"]{background:var(--tv-guide);border-color:var(--tv-yellow);color:var(--tv-yellow)}
.tv-key-sound[aria-pressed="false"]{color:var(--tv-dim);text-decoration:line-through}
.tv :focus-visible{outline:2px solid var(--tv-yellow);outline-offset:3px}

/* ---------- the guide: the blue listings channel ---------- */
.tv-guide{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:clamp(56px,8vh,90px) var(--gutter) clamp(76px,10vh,100px);background:rgba(0,0,0,.55)}
.js .tv-guide:not(.is-open){display:none}
.tv-g-in{width:min(860px,100%);max-height:100%;overflow:auto;background:linear-gradient(180deg,var(--tv-guide),var(--tv-guide-2));border:3px solid #8FA0FF;box-shadow:0 20px 80px rgba(0,0,0,.7)}
.tv-g-head{position:sticky;top:0;display:flex;align-items:center;gap:1rem;margin:0;padding:.7rem 1rem;background:#0A1148;border-bottom:3px solid #8FA0FF;font:400 1.5rem/1 var(--f-osd);letter-spacing:.08em;text-transform:uppercase;color:var(--tv-yellow)}
.tv-g-head span:nth-child(2){margin-right:auto;color:#fff}
.tv-g-x{background:none;border:1px solid rgba(255,255,255,.5);color:#fff;font:inherit;font-size:1.15rem;padding:.25rem .6rem;cursor:pointer}
.no-js .tv-g-x,html:not(.js) .tv-g-x{display:none}
.tv-g-list{margin:0;padding:0;list-style:none}
.tv-g-list li+li{border-top:2px solid rgba(143,160,255,.45)}
.tv-g-list a{display:grid;grid-template-columns:4.2rem minmax(0,1fr) auto;column-gap:1rem;row-gap:.2rem;align-items:baseline;padding:.85rem 1rem;color:#fff;text-decoration:none}
.tv-g-list a:hover,.tv-g-list a[aria-current="true"]{background:rgba(255,225,77,.13);box-shadow:inset 4px 0 0 var(--tv-yellow)}
.tv-g-list b{grid-row:span 2;font:400 2.6rem/1 var(--f-osd);color:var(--tv-yellow);text-align:center}
.tv-g-list .t{font:900 1.6rem/1.05 var(--f-display);letter-spacing:.03em;text-transform:uppercase}
.tv-g-list time{font:400 1.2rem/1 var(--f-osd);letter-spacing:.06em;text-transform:uppercase;color:var(--tv-yellow)}
.tv-g-list .d{grid-column:2/4;font-size:.95rem;line-height:1.4;color:#D5DCF5}
.tv-g-list .new{margin-left:.5rem;padding:.05rem .35rem;background:var(--tv-yellow);color:#0B1452;font:400 1rem/1 var(--f-osd);vertical-align:.25em;display:inline-block;white-space:nowrap}
.tv-noscript{position:absolute;z-index:9;left:0;right:0;bottom:12px;text-align:center;font-family:var(--f-osd);font-size:1.2rem}

/* ---------- turning on, changing channels, turning off ---------- */
.tv-tube.is-powering{animation:tv-on .95s cubic-bezier(.2,.7,.2,1) both}
@keyframes tv-on{0%{transform:scale(0,.004);filter:brightness(6)}22%{transform:scale(1,.004);filter:brightness(6)}62%{transform:scale(1,1);filter:brightness(1.8)}100%{transform:none;filter:none}}
.tv-tube.is-off{animation:tv-off .5s cubic-bezier(.6,0,.9,.4) both}
@keyframes tv-off{0%{transform:none;filter:none}45%{transform:scale(1,.004);filter:brightness(5)}85%{transform:scale(.004,.004);filter:brightness(8)}100%{transform:scale(0,0);opacity:0}}
.tv-tube.is-changing .tv-id,.tv-tube.is-changing .tv-show{visibility:hidden}
.tv-tube.is-changing .tv-snow{opacity:1;mix-blend-mode:normal}
.tv-tube.is-rolling .tv-id,.tv-tube.is-rolling .tv-show{animation:tv-roll .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes tv-roll{0%{transform:translateY(-22%) skewX(-4deg);filter:brightness(1.9) contrast(1.4)}55%{transform:translateY(3%);filter:brightness(1.2)}100%{transform:none;filter:none}}
.tv-tube.is-rolling .tv-snow{animation:tv-snow-out .45s ease-out both}
@keyframes tv-snow-out{from{opacity:.65}to{opacity:.07}}

/* ---------- phones ---------- */
@media (max-width:760px){
  .tv-banner{left:var(--gutter);right:var(--gutter);bottom:calc(76px + env(safe-area-inset-bottom,0px));grid-template-columns:auto minmax(0,1fr);gap:.4rem .8rem;padding:.7rem .75rem}
  .tv-b-ch b{font-size:2.1rem}
  .tv-b-d{font-size:.86rem}
  .tv-watch{grid-column:1/-1;min-height:46px}
  .tv-remote{left:var(--gutter);right:var(--gutter);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .tv-key{padding:.4rem .3rem;font-size:1.15rem}
  .tv-bug{bottom:auto;top:calc(64px + env(safe-area-inset-top,0px));right:var(--gutter)}
  .tv-card{top:42%}
  .tv-show::after{background:linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.55) 12%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 50%,rgba(0,0,0,.85) 70%,rgba(0,0,0,.94) 100%)}
  .tv-g-head span:first-child{display:none}
  .tv-g-list a{grid-template-columns:3.4rem minmax(0,1fr)}
  .tv-g-list time{grid-column:2}
  .tv-g-list .d{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .tv-glass{animation:none}
  .tv-tube.is-powering,.tv-tube.is-off,.tv-tube.is-rolling .tv-id,.tv-tube.is-rolling .tv-show,.tv-tube.is-rolling .tv-snow{animation:none}
}