/* DigiShow – driftstavle for TV. Bevisst mørk, systemfonter (ingen tredjepartsfonter). */
:root{
  --ink:#0b1420; --panel:#111d2b; --line:#22364b; --tekst:#e9eff6; --demp:#8ea2b7;
  --signal:#f2b632;
  --tlp-clear:#ffffff; --tlp-green:#33ff00; --tlp-amber:#ffc000; --tlp-red:#ff2b2b;
  --f-vis:"Bahnschrift","DIN Alternate","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --f-tekst:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--ink);color:var(--tekst);font-family:var(--f-tekst);overflow:hidden}
body.skjul-peker{cursor:none}
[hidden]{display:none!important}
.skjerm{height:100%;display:grid;grid-template-rows:auto 1fr auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:clamp(10px,1.6vh,24px)}
.topp{display:flex;align-items:center;gap:clamp(12px,2vw,40px);border-bottom:1px solid var(--line);padding-block:0 clamp(8px,1.4vh,20px);flex-wrap:wrap}
.merke{display:flex;align-items:center;gap:.7em;font-family:var(--f-vis);font-size:clamp(16px,1.8vw,34px);letter-spacing:.02em;font-weight:600}
.merke svg{width:1.3em;height:1.3em}
.logo{height:1.6em;width:auto;max-width:10em;object-fit:contain;display:block}
.skjold{fill:none;stroke:var(--signal);stroke-width:1.8}
.hake{fill:none;stroke:var(--tekst);stroke-width:1.8}
.tid{margin-left:auto;display:flex;align-items:baseline;gap:clamp(12px,1.6vw,32px);font-variant-numeric:tabular-nums;flex-wrap:wrap;
  font-family:var(--f-vis);font-size:clamp(16px,1.8vw,34px);font-weight:600;line-height:1}
.klokke{color:var(--tekst);font-size:clamp(28px,3.9vw,78px);font-weight:700}
.dato{color:var(--tekst);font-weight:500}
.uke{color:var(--signal);font-weight:500}
.scene{position:relative;min-height:0;display:grid;padding-block:clamp(16px,4vh,64px)}
.side{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2.4vh,36px);max-width:min(1500px,100%);animation:inn .7s ease both}
@keyframes inn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.meta{display:flex;align-items:center;gap:1em;flex-wrap:wrap;font-family:var(--f-mono);font-size:clamp(11px,1vw,20px);text-transform:uppercase;letter-spacing:.14em;color:var(--demp)}
.tlp{letter-spacing:.06em;background:#000;padding:.25em .6em;border-radius:2px;font-weight:700}
.tlp[data-tlp="CLEAR"]{color:var(--tlp-clear)} .tlp[data-tlp="GREEN"]{color:var(--tlp-green)}
.tlp[data-tlp="AMBER"]{color:var(--tlp-amber)} .tlp[data-tlp="RED"]{color:var(--tlp-red)}
h1{font-family:var(--f-vis);font-weight:700;font-size:clamp(32px,5.6vw,120px);line-height:1.02;letter-spacing:-.01em;margin:0;text-wrap:balance;max-width:20ch}
.brodtekst{font-size:clamp(17px,2.1vw,44px);line-height:1.35;margin:0;max-width:40ch;text-wrap:pretty}
.brodtekst b{color:var(--signal);font-weight:600}
.side.bilde{flex-direction:row;align-items:center;gap:clamp(16px,4vw,80px)}
.side.bilde figure{margin:0;flex:1 1 55%;min-width:0;display:grid;place-items:center}
.side.bilde img{max-height:62vh;width:auto;max-width:100%;object-fit:contain;border:1px solid var(--line)}
.side.bilde .tekstdel{flex:1 1 45%;min-width:0;display:flex;flex-direction:column;gap:clamp(12px,2vh,28px)}
.side.bilde h1{font-size:clamp(28px,4.2vw,90px)}
@media (max-width:700px){.side.bilde{flex-direction:column;align-items:flex-start}}
.liste{list-style:none;margin:0;padding:0;display:grid;max-width:min(1400px,100%)}
.liste li{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.6vw,32px);align-items:baseline;padding-block:clamp(8px,1.4vh,20px);border-top:1px solid var(--line);min-width:0}
.liste li:last-child{border-bottom:1px solid var(--line)}
.liste time{font-family:var(--f-mono);font-size:clamp(11px,1vw,20px);color:var(--demp);font-variant-numeric:tabular-nums;white-space:nowrap}
.liste span{font-size:clamp(16px,1.9vw,40px);line-height:1.25;min-width:0;overflow-wrap:anywhere}
.liste .tom{grid-template-columns:1fr;color:var(--demp)}
.side.rss h1{font-size:clamp(26px,3.4vw,72px)}
.fremdrift{display:flex;gap:6px;position:absolute;left:0;right:0;bottom:clamp(6px,1.4vh,20px)}
.fremdrift i{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden;position:relative}
.fremdrift i.ferdig{background:var(--demp)}
.fremdrift i.aktiv::after{content:"";position:absolute;inset:0;background:var(--signal);transform-origin:left;animation:fyll var(--varighet,12s) linear forwards}
.pause .fremdrift i.aktiv::after{animation-play-state:paused}
@keyframes fyll{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pausemerke{position:absolute;right:0;top:clamp(8px,2vh,24px);font-family:var(--f-mono);font-size:clamp(11px,.9vw,18px);color:var(--signal);letter-spacing:.14em}
.linje{display:flex;align-items:center;gap:clamp(10px,1.4vw,28px);border-top:1px solid var(--line);padding-block:clamp(8px,1.4vh,20px) 0;min-width:0}
.linje b{max-width:40%;overflow:hidden;text-overflow:ellipsis;font-family:var(--f-mono);font-size:clamp(11px,.95vw,19px);letter-spacing:.14em;text-transform:uppercase;background:var(--signal);color:var(--ink);padding:.3em .7em;border-radius:2px;white-space:nowrap}
.ruller{overflow:hidden;flex:1;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.ruller div{display:inline-flex;gap:3em;white-space:nowrap;font-size:clamp(14px,1.4vw,30px);animation:rull var(--rull,60s) linear infinite;padding-left:100%}
.ruller span::before{content:"▪";color:var(--signal);margin-right:.8em}
@keyframes rull{to{transform:translateX(-100%)}}
/* Rolig modus: for Chromecast og eldre utstyr – ingen rulling eller animasjoner */
.rolig .side{animation:none}
.rolig .ruller{mask-image:none}
.rolig .ruller div{animation:none;padding-left:0;display:block;overflow:hidden;text-overflow:ellipsis}
.rolig .fremdrift i.aktiv::after{animation:none;transform:none}
@media (prefers-reduced-motion:reduce){
  .side{animation:none}
  .ruller div{animation:none;padding-left:0;display:block;overflow:hidden;text-overflow:ellipsis}
  .ruller{mask-image:none}
}
.feilmelding{align-self:center;color:var(--demp);font-size:clamp(16px,1.8vw,36px)}
.nodmerke{background:var(--tlp-red);color:#000;padding:.25em .6em;border-radius:2px;font-weight:700;letter-spacing:.06em}
.side.nodstopp h1{max-width:24ch}
/* Bilde over hele flaten mellom topp- og bunnfeltet */
.side.helbilde{position:absolute;inset:0 calc(-1 * max(16px,env(safe-area-inset-left,0px))) calc(clamp(6px,1.4vh,20px) + 13px);max-width:none;display:block;overflow:hidden;background:var(--ink)}
.side.helbilde img{width:100%;height:100%;max-width:none;max-height:none;display:block;border:0}
.side.helbilde.fyll img{object-fit:cover}
.side.helbilde.tilpass img{object-fit:contain}
.bildetekst{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:clamp(24px,5vh,72px);max-width:min(1100px,70%);
  display:flex;flex-direction:column;gap:clamp(8px,1.4vh,20px);background:rgba(11,20,32,.82);padding:clamp(14px,2vw,36px);border-radius:4px}
.bildetekst h1{font-size:clamp(26px,3.6vw,76px)}
.bildetekst .brodtekst{font-size:clamp(15px,1.6vw,34px)}
@media (max-width:700px){.bildetekst{max-width:none;right:16px}}
.fremdrift{z-index:2}