/* The TV pages, ported from the Website design's 8F (a city, /<cc>/<slug>/tv,
   drawn 800 wide) and 10E (a mosque's own TV, /m-tv/<id>, drawn 900 wide),
   with the 2F rules: readable from 10 m, nothing under 13 px, black ground
   (Ramadan purple), one footer line at a time, full-screen takeovers only
   for "Jama'at in progress" and the 29th-night moon card. Every size is the
   design's px as a share of the frame's width (max(px, vw)), so a 1080p and
   a 4K screen read the same from across the hall. The container drifts
   8 px every 5 minutes against burn-in. Linked by layout(styles: ['tv']). */

body.tv{background:#000;color:#faf7f2;min-height:100vh;overflow:hidden}
body.tv .wrap{max-width:none;margin:0;padding:max(40px,5vw) max(48px,6vw)}
@keyframes drift{0%{transform:translate(0,0)}25%{transform:translate(8px,0)}50%{transform:translate(8px,8px)}75%{transform:translate(0,8px)}}

/* 8F · a city */
.tv-shift{display:grid;grid-template-columns:1.3fr 1fr;gap:max(40px,5vw);align-items:center;min-height:calc(100vh - 2 * max(40px,5vw));animation:drift 1200s steps(1,end) infinite}
.tv-shift .left{display:grid;gap:max(6px,.75vw)}
.tv-shift .tl{font-size:max(18px,2.25vw);color:#b8afa4}
.tv-shift .clock{font-size:max(88px,11vw);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.tv-shift .tn{display:flex;gap:max(14px,1.75vw);align-items:baseline;flex-wrap:wrap}
.tv-shift .nm{font-size:max(22px,2.75vw);color:#e9c27a;font-weight:700}
.tv-shift .cd{font-size:max(18px,2.25vw);font-weight:400;color:#b8afa4;min-height:0}
.tv-shift .tr{height:max(5px,.625vw);border-radius:3px;background:#262320;max-width:max(360px,45vw);margin-top:max(8px,1vw)}
.tv-shift .tr i{display:block;height:100%;border-radius:3px;background:#e9c27a}
.tv-shift .tt{list-style:none;margin:0;padding:0;display:grid;gap:max(8px,1vw);font-size:max(20px,2.5vw);font-variant-numeric:tabular-nums}
.tv-shift .tt li{display:flex;justify-content:space-between}
.tv-shift .tt .past{color:#6b645c}
.tv-shift .tt .next{color:#e9c27a}
.tv-shift .th{grid-column:1/-1;font-size:max(13px,1.63vw);color:#6b645c;margin:0}

/* 10E · a mosque */
body.tv.m .wrap{padding:max(36px,4vw) max(44px,4.89vw)}
body.tv.ram{background:linear-gradient(90deg,#2b1f4a,#3d2d66)}
.mtv{display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:auto 1fr auto;gap:max(20px,2.22vw) max(40px,4.44vw);height:calc(100vh - 2 * max(36px,4vw));min-height:360px;animation:drift 1200s steps(1,end) infinite}
.mtv p{margin:0}
.mtv .mh{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:max(16px,1.78vw);white-space:nowrap;min-width:0}
.mtv .mn{flex:none;display:flex;gap:max(16px,1.78vw);align-items:baseline}
.mtv h1{font-size:max(22px,2.44vw);font-weight:700;letter-spacing:0;line-height:1.2;margin:0}
.mtv .trait{font-size:max(16px,1.78vw);color:#b8afa4}
.mtv .dt{font-size:max(18px,2vw);color:#b8afa4;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mtv.ram .trait,.mtv.ram .dt,.mtv.ram .cs{color:#b9a4e0}
.mtv .cdw{display:grid;gap:max(4px,.44vw);align-content:center}
.mtv .cl{font-size:max(20px,2.22vw);color:#e9c27a;font-weight:700}
.mtv .big{font-size:max(96px,10.67vw);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.mtv .big.words{font-size:max(48px,5.33vw);letter-spacing:-.02em}
.mtv .cs{font-size:max(20px,2.22vw);color:#b8afa4}
.mtv .pages{display:grid;align-items:center}
.mtv .pages>*{grid-area:1/1}
.mtv .tt2{display:grid;grid-template-columns:1fr auto auto;gap:max(8px,.89vw) max(24px,2.67vw);font-size:max(22px,2.44vw);font-variant-numeric:tabular-nums;align-items:baseline}
.mtv .tt2 b{font-weight:700}
.mtv .h{font-size:max(13px,1.44vw);color:#6b645c}
.mtv .tt2 small{font-size:max(13px,1.44vw);color:#6b645c}
.mtv .tt2 .past{color:#6b645c}
.mtv .tt2 .next{color:#e9c27a}
.mtv .tt2 .ram{color:#b9a4e0}
.mtv.ram .tt2 .past,.mtv.ram .h{color:#8f7fb8}
/* 22K: the programs page takes the times' place for 20 s of every 40. */
.mtv .pgm{display:grid;gap:max(8px,.89vw);visibility:hidden}
.mtv .pgm .h{text-transform:uppercase;letter-spacing:.08em}
.mtv .pl{display:grid;grid-template-columns:fit-content(45%) 1fr;gap:max(8px,.89vw) max(22px,2.44vw);font-size:max(22px,2.44vw);align-items:baseline}
.mtv .pl small{font-size:max(16px,1.78vw);color:#b8afa4}
.mtv .pl .today{color:#e9c27a}
.mtv .pages.two .tt2{animation:pgA 40s steps(1,end) infinite}
.mtv .pages.two .pgm{animation:pgB 40s steps(1,end) infinite}
@keyframes pgA{0%{visibility:visible}50%{visibility:hidden}}
@keyframes pgB{0%{visibility:hidden}50%{visibility:visible}}
/* The footer: one line at a time; the follow QR has the place for 10 s
   of every 2 minutes. The two halves switch with opacity, so a line's own
   visibility can never show through the QR's turn. */
.mtv .ft{grid-column:1/-1;display:grid;border-top:1px solid #262320;padding-top:max(16px,1.78vw);font-size:max(16px,1.78vw);color:#b8afa4}
.mtv.ram .ft{border-color:rgba(250,247,242,.15);color:#faf7f2}
.mtv .ft>*{grid-area:1/1}
.mtv .strip{display:grid;align-items:center;animation:stripA 120s steps(1,end) infinite}
.mtv .strip>span{grid-area:1/1;display:flex;gap:max(8px,.89vw);align-items:center;visibility:hidden}
.mtv .strip>span:first-child{visibility:visible}
.mtv i{display:inline-block;width:1.2em;height:1.2em;border-radius:50%;flex:none;box-sizing:border-box}
.mtv .ring.ok{border:3px solid #7fc08f}
.mtv .ring.warn{border:3px dashed #e9c27a}
.mtv .ring.ink{background:#faf7f2}
.mtv .moon{box-shadow:inset .35em 0 0 0 #e9c27a}
.mtv .fq{display:flex;justify-content:space-between;align-items:center;gap:max(16px,1.78vw);opacity:0;animation:qrA 120s steps(1,end) infinite}
.mtv .fq svg{display:block;width:max(44px,4.89vw);height:auto;background:#fff}
@keyframes stripA{0%{opacity:0}8.334%{opacity:1}}
@keyframes qrA{0%{opacity:1}8.334%{opacity:0}}
/* Takeovers (10E): "Jama'at in progress" and the 29th-night moon card. */
.mtv .take{position:fixed;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:max(8px,2vw);padding:0 6vw;text-align:center;background:#000}
.mtv.ram .take{background:linear-gradient(90deg,#2b1f4a,#3d2d66)}
.mtv .take .el{font-size:max(14px,3.57vw);letter-spacing:.1em;text-transform:uppercase;color:#b8afa4}
.mtv .take .et{font-size:max(30px,7.65vw);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.mtv .take .ar{font:max(22px,5.61vw)/1.5 Amiri,"Noto Naskh Arabic","Geeza Pro",serif;color:#e9c27a}
.mtv .take .es{font-size:max(14px,3.57vw);color:#b8afa4}
.mtv.ram .take .el,.mtv.ram .take .es{color:#b9a4e0}
.mtv .eid{visibility:hidden;animation:eidA 20s steps(1,end) 1 forwards}
.mtv .eid .moon{width:6vw;height:6vw;box-shadow:inset 1.8vw 0 0 0 #e9c27a}
@keyframes eidA{0%{visibility:visible}100%{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.tv-shift,.mtv{animation:none}}

/* Urdu: Nastaliq needs the room; times stay Latin. */
html[lang=ur] .mtv h1,html[lang=ur] .tv-shift .nm{font-weight:400}
html[lang=ur] body.tv{line-height:1.7}
html[lang=ur] .mtv .tt2,html[lang=ur] .mtv .pl{line-height:1.6}
html[lang=ur] .mtv .take .el{letter-spacing:0;text-transform:none}