/* Timelapse-modul (Direction B) — parrer med src/views/timelapse.php.
   Rolige flader, monospace til instrumentlabels, ingen dekorativ pynt. */

/* Friskheden skal stå yderst til HØJRE, efter ztitle'ens linje. .ztitle er flex
   med et ::after der er selve linjen, så vi rykker linjen foran med order. */
.ztitle .tl-fresh{order:2;font-size:10.5px;letter-spacing:.06em;text-transform:none;
  color:var(--muted);white-space:nowrap}
.ztitle::after{order:1}

/* Ankermål. Top-baren er sticky (56 px, 92 px når navigationen folder på
   mobil), så uden dette lander /data/idag#timelapse med overskriften gemt BAG
   baren og videoen klistret op i underkanten. Målt med Playwright, ikke gættet;
   der er lagt lidt luft til, så modulet ikke rører baren. */
.tl-sec{scroll-margin-top:70px}
@media(max-width:640px){ .tl-sec{scroll-margin-top:106px} }

.tl{padding:12px}

/* 16:9 svarer til kildens 1920×1080. Baggrunden er modulets egen flade, så en
   video uden plakat ikke blinker sort inden afspilning. */
.tl-stage{position:relative}
.tl-video{display:block;width:100%;aspect-ratio:16/9;border-radius:10px;
  background:var(--paper);border:1px solid var(--line)}

/* Klikflade over plakaten. Stopper 46 px over bunden, så browserens egen
   kontrolstribe aldrig dækkes — den skal kunne rammes direkte. Slås til af
   assets/js/timelapse.js og kun mens videoen er på pause. */
.tl-click{display:none;position:absolute;left:0;right:0;top:0;bottom:46px;
  cursor:pointer;border-radius:10px}
.tl-stage.js-click .tl-click{display:block}

/* Mangler plakaten, tegnes en neutral flade med afspilningsknappen centreret.
   Rent CSS — ingen JS, ingen ekstra hentning, og den forsvinder af sig selv når
   videoen begynder at spille. */
.tl-video:not([poster]){
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='31' fill='none' stroke='%238A98A2' stroke-width='2'/%3E%3Cpath d='M26 20l20 12-20 12z' fill='%238A98A2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:56px 56px}

/* Dér hvor afspilleren ikke vises (wrong_day / unavailable). Bevidst IKKE 16:9:
   et tomt filmformat på 675 px ville råbe om et fravær, der kan siges på én
   linje — og se ud som om noget var ved at loade. */
.tl-gone{display:grid;place-items:center;min-height:96px;border-radius:10px;
  background:var(--paper);border:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;color:var(--muted);
  letter-spacing:.03em;text-align:center;padding:26px 18px}

.tl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:11px 2px 0}
.tl-cover{font-family:var(--mono);font-size:12px;color:var(--ink);letter-spacing:.02em}

.tl-chip{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;
  border-radius:999px;padding:3px 10px;border:1px solid transparent;white-space:nowrap}
/* Farve er ALDRIG eneste kanal — chippens tekst siger tilstanden i klartekst. */
.tl-chip.tl-ok  {color:var(--agree-ok);  background:var(--agree-ok-bg);  border-color:rgba(46,125,50,.28)}
.tl-chip.tl-warn{color:var(--agree-mid); background:var(--agree-mid-bg); border-color:rgba(230,168,0,.32)}
.tl-chip.tl-off {color:var(--muted);     background:var(--paper);        border-color:var(--line)}

.tl-help{font-size:12px;color:var(--muted);margin:8px 2px 2px;line-height:1.5}

@media(max-width:640px){
  .tl{padding:10px}
  .tl-cover{font-size:11.5px}
  .ztitle .tl-fresh{font-size:10px}
}
/* Under ~360 px kan overskrift + undertitel + friskhed ikke stå på én linje.
   Undertitlen ryger da frem for at brække overskriften i to — friskheden er
   data, undertitlen er en forklaring man kan undvære når pladsen er så trang. */
@media(max-width:360px){ .tl-sec .ztitle .zn{display:none} }