/* ══════════════════════════════════════════════════════════════════════
   INFOSKJERM  ·  /crew/infoskjerm og /infoskjerm?token=…

   En analyseflate laget for å henge på veggen. Ingen interaksjon, ingen
   rulling, alt på én skjerm.

   ── SKALERINGEN, OG DE TO FEILENE SOM LÅ FØR DEN ──

   Flaten fyller vinduet. Det er ETT tall å forstå her, `--u`:

     --u: min(0.052083vw, 0.092593vh)   ·   én designpiksel

   Designet er tegnet på 1920 × 1080. `--u` er hva én av de pikslene er verdt
   i dette vinduet: 1/1920 av bredden, eller 1/1080 av høyden — det minste av
   de to, så skriften alltid får plass i begge retninger. All typografi og
   alle avstander regnes i den. Skaleringen er dermed UNIFORM: ingenting
   strekkes, sirkler blir ikke ovaler.

   Rutenettet måles i `fr`, ikke i `%`. Det er forskjellen som gjør at bunnen
   ikke faller utenfor: `fr` deler den plassen som faktisk er igjen etter
   padding og mellomrom, og summen kan ikke bli feil uansett format.

   To utkast måtte forkastes før dette:

     · Utkast 1 satte radene i `%`. `7% 30% 38% 25%` = 100 % av
       innholdshøyden PLUSS tre mellomrom, så nederste rad ble klippet — og
       et kort som var for lavt lot innholdet blø ut over kanten.
     · Utkast 2 låste flaten til 1920 × 1080 og skalerte den med `transform`.
       Den kunne aldri sprekke, men la igjen svarte striper når vinduet ikke
       var 16:9 — og en infoskjerm med sidepanel eller bunntekst er nesten
       aldri 16:9.

   ── ETT BREKKPUNKT: EN SKJERM PÅ HØYKANT ──

   Én `@media (max-aspect-ratio: 4/5)`, og ikke flere. Terskelen er 0.8 og ikke
   1:1 med vilje: `orientation: portrait` slår om på alt som er én piksel
   høyere enn bredt, og et nettleservindu på 1435 × 1370 fikk da et oppsett
   laget for 1080 × 1920. Mellom de to tilstandene SKALERER flaten — den
   reflower ikke. Legg ikke inn breddebrekkpunkt her: det er en TV, ikke en
   nettside.

   ── DEN KJØRER PÅ GAMLE NETTLESERE ──

   Skjermene dette havner på er ikke oppdaterte. En Philips-TV her kjører
   Chrome 81 (april 2020), og infoskjermløsninger er fulle av slike. Derfor:

   · Ingen `gap` i flex-containere — det er Chrome 84. Rutenettene beholder
     `gap` (grid-gap er Chrome 66), flex-radene bruker `> * + *` med margin.
     Uten dette klistrer alle radene seg sammen på skjermen som betaler for
     sida.
   · Ingen `:has()`, `aspect-ratio`, `clamp()`, `inset` eller `color-mix`.
     `min()` er Chrome 79 og går fint.
   · Flaten er `position: fixed` med fire kanter, ikke avhengig av
     `:has()`-regelen i layout.css — se `.infoskjerm` under.

   Rører du denne fila: sjekk hva du bruker mot Chrome 81 før du lagrer.
   Feilen viser seg ikke her, den viser seg som en svart TV i en hall.

   ── HÅRSTREKENE ER PX MED VILJE ──

   `1px` på kanter og `2px` i varmekartet skaleres ikke. En kant som krymper
   under én piksel forsvinner, og et varmekart uten mellomrom blir en flate.
   ══════════════════════════════════════════════════════════════════════ */

.infoskjerm {
    /* ── `position: fixed` og ikke bare `height: 100vh` ──

       Regelen i layout.css som gir denne sida hele flata bruker `:has()`, og
       det er Chrome 105. Skjermene dette skal kjøre på er eldre — en Philips
       her står på Chrome 81 — og der faller hele regelen bort. Da beholder
       `#app-fullscreen` sentreringen og paddingen sin, `#app-content-full` får
       ingen bredde, og sida krymper til ingenting: svart skjerm.

       `position: fixed` med alle fire kantene gjør flata uavhengig av hva
       forelderen driver med. `inset: 0` ville vært kortere, men det er
       Chrome 87 — de fire egenskapene virker overalt. I en iframe måles de mot
       iframens eget vindu, som er nettopp det vi vil ha. */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* Én designpiksel. Se toppen av fila. */
    --u: min(0.052083vw, 0.092593vh);

    --if-bg: #06070d;
    --if-bg2: #0b0d18;
    --if-line: #ffffff14;
    --if-ink: #eef1ff;
    --if-muted: #9aa3c4;
    --if-dim: #7c85ab;
    --if-cyan: #3fe3ff;
    --if-amber: #ecab35;
    --if-violet: #7b5cff;
    --if-green: #2c9c63;

    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--if-bg);
    color: var(--if-ink);
    font-family: "Space Grotesk", Inter, -apple-system, system-ui, sans-serif;
    display: grid;
    grid-template-rows: auto 1fr 2fr 1.6fr;
    gap: calc(16 * var(--u));
    padding: calc(24 * var(--u)) calc(28 * var(--u));
}

/* ── Topplinje ── */
.if-topp { display: flex; align-items: center; min-width: 0; }
.if-topp > * + * { margin-left: calc(26 * var(--u)); }
/* Etter regelen over, ellers vinner marginen og lenken slutter å høyrestille. */
.if-topp .if-live { margin-left: auto; }
.if-topp img { height: calc(46 * var(--u)); width: auto; flex-shrink: 0; }
.if-brikke {
    border: 1px solid var(--if-line);
    border-radius: 999px;
    background: #ffffff06;
    padding: calc(7 * var(--u)) calc(18 * var(--u));
    font-size: calc(20 * var(--u));
    color: var(--if-muted);
    white-space: nowrap;
}
.if-brikke b { color: var(--if-ink); }
.if-live {
    display: flex; align-items: center;
    font-size: calc(18 * var(--u));
    color: var(--if-dim);
    white-space: nowrap;
}
.if-live > * + * { margin-left: calc(10 * var(--u)); }

/* Pulsen sier at flaten LEVER. En skjerm som har frosset ser ellers ut som
   en skjerm der ingenting skjer, og det er to helt ulike beskjeder. */
.if-dot {
    width: calc(9 * var(--u)); height: calc(9 * var(--u));
    border-radius: 50%;
    background: var(--if-green);
    box-shadow: 0 0 0 0 #2c9c6399;
    animation: if-puls 2.6s infinite;
    flex-shrink: 0;
}
.if-dot--stille { animation: none; background: var(--if-dim); box-shadow: none; }
@keyframes if-puls {
    0%   { box-shadow: 0 0 0 0 #2c9c6399; }
    70%  { box-shadow: 0 0 0 calc(22 * var(--u)) #2c9c6300; }
    100% { box-shadow: 0 0 0 0 #2c9c6300; }
}

/* ── Kort ── */
.if-k {
    background: var(--if-bg2);
    border: 1px solid var(--if-line);
    border-radius: calc(14 * var(--u));
    padding: calc(18 * var(--u)) calc(22 * var(--u));
    display: flex; flex-direction: column;
    min-width: 0; min-height: 0;
    overflow: hidden;
}
.if-k h2 {
    font-size: calc(17 * var(--u));
    font-weight: 600;
    letter-spacing: calc(2.2 * var(--u));
    text-transform: uppercase;
    color: var(--if-dim);
    flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.if-rad { display: grid; gap: calc(16 * var(--u)); min-height: 0; }
.if-rad--kpi  { grid-template-columns: repeat(5, 1fr); }
.if-rad--midt { grid-template-columns: 1.5fr 1fr 1.15fr; }
.if-rad--bunn { grid-template-columns: 1.1fr 1fr 1fr 1fr 1.3fr; }

/* ── Nøkkeltall ── */
.if-rad--kpi .if-k { justify-content: center; }
.if-rad--kpi .if-k > * + * { margin-top: calc(4 * var(--u)); }
.if-n {
    font-size: calc(84 * var(--u));
    font-weight: 700; line-height: 0.9;
    letter-spacing: calc(-2.5 * var(--u));
    white-space: nowrap;
    display: flex; align-items: center;
}
.if-n > * + * { margin-left: calc(14 * var(--u)); }
/* Fem siffer og et tusenskille sprakk i to linjer. Sida velger klassen ut fra
   hvor mange tegn tallet faktisk har — se `nokkeltall()`. */
.if-n--lang { font-size: calc(62 * var(--u)); }
.if-t {
    font-size: calc(22 * var(--u)); color: var(--if-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.if-d {
    font-size: calc(19 * var(--u)); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.if-opp { color: var(--if-green); }
.if-cyan { color: var(--if-cyan); }
.if-amber { color: var(--if-amber); }
.if-violet { color: var(--if-violet); }

/* ── Graf: SVG oppe, akse i HTML nede ──

   Aksen sto som SVG-tekst før. Grafen har `preserveAspectRatio="none"`, som
   strekker glyfene i takt med boksen — og en `font-size` uten enhet er
   ugyldig CSS, så teksten arvet kortets skrift og ble strukket oppå det.
   HTML-tekst under grafen kan ikke strekkes, og kan ikke arve feil. */
.if-graf { flex: 1; min-height: 0; margin-top: calc(12 * var(--u)); }
.if-graf svg { width: 100%; height: 100%; display: block; }
.if-akse {
    display: flex; justify-content: space-between; flex-shrink: 0;
    font-size: calc(16 * var(--u)); color: var(--if-dim);
    margin-top: calc(8 * var(--u));
}

/* ── Rader med stolpe ── */
.if-rader {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; justify-content: center;
    margin-top: calc(10 * var(--u));
}
.if-rader > * + * { margin-top: calc(14 * var(--u)); }
.if-r { display: grid; grid-template-columns: 1fr auto;
        gap: calc(5 * var(--u)) calc(16 * var(--u)); align-items: baseline; }
.if-r-navn {
    font-size: calc(22 * var(--u)); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.if-r-verdi { font-size: calc(30 * var(--u)); font-weight: 700; white-space: nowrap; }
.if-r-bar {
    grid-column: 1 / -1; height: calc(8 * var(--u));
    background: #ffffff0d; border-radius: 999px;
}
.if-r-bar i { display: block; height: 100%; border-radius: 999px; }
.if-r-meta {
    grid-column: 1 / -1; font-size: calc(17 * var(--u)); color: var(--if-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Fem rader i stedet for tre trenger tettere linjeavstand. */
.if-rader--tett > * + * { margin-top: calc(8 * var(--u)); }
.if-rader--tett .if-r-navn { font-size: calc(19 * var(--u)); }
.if-rader--tett .if-r-verdi { font-size: calc(24 * var(--u)); }
.if-rader--tett .if-r-bar { height: calc(7 * var(--u)); }

/* ── Nøkkel–verdi ── */
.if-liste {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; justify-content: center;
    margin-top: calc(10 * var(--u));
}
.if-liste > * + * { margin-top: calc(11 * var(--u)); }
.if-liste > div {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: calc(21 * var(--u));
}
.if-liste > div > span + span { margin-left: calc(18 * var(--u)); }
.if-liste > div > span:first-child {
    color: var(--if-muted); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.if-liste > div > span:last-child { font-weight: 700; flex-shrink: 0; white-space: nowrap; }

/* ── Varmekart 7 × 24 ── */
.if-heat-boks {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    margin-top: calc(10 * var(--u));
}
.if-heat-boks > * + * { margin-top: calc(7 * var(--u)); }
.if-heat {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 2px;
}
.if-heat i { border-radius: 2px; background: var(--if-cyan); }

/* ── Tom tilstand og feil ── */
.if-tom {
    grid-row: 1 / -1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
}
.if-tom > * + * { margin-top: calc(16 * var(--u)); }
.if-tom h1 { font-size: calc(56 * var(--u)); font-weight: 700; }
.if-tom p { font-size: calc(24 * var(--u)); color: var(--if-muted); max-width: calc(900 * var(--u)); }
.if-tom code {
    font-size: calc(20 * var(--u)); color: var(--if-cyan);
    background: #ffffff08; padding: calc(6 * var(--u)) calc(12 * var(--u));
    border-radius: calc(8 * var(--u));
}

/* ══ Det eneste brekkpunktet: en SKJERM PÅ HØYKANT ══

   Terskelen er `max-aspect-ratio: 4/5`, ikke `orientation: portrait`.

   `orientation` slår om ved 1:1 — alt som er én piksel høyere enn bredt regnes
   som høykant. Et nettleservindu på 1435 × 1370 er akkurat det, og fikk da et
   oppsett laget for 1080 × 1920: fem nøkkeltall i to spalter, fem kort i to
   spalter, og innhold som ikke fikk plass i radene sine. Etikettene under
   tallene ble klippet bort av `overflow: hidden`, så kortene viste bare et
   tall uten å si hva det var.

   4/5 = 0.8 skiller det som FAKTISK er en stående skjerm (9:16 = 0.5625) fra
   et vindu som bare er litt høyt. Mediefunksjonen `aspect-ratio` er gammel og
   trygg — ikke å forveksle med CSS-EGENSKAPEN med samme navn, som er
   Chrome 88.

   På høykant er lerretet 1080 × 1920, så designpikselen måles mot de tallene:
   1/1080 = 0.092593vw, 1/1920 = 0.052083vh.

   Radene her er ikke de samme som i landskap, fordi antallet INNHOLDSRADER er
   et annet: nøkkeltallene blir 3 rader (5 kort i 2 spalter) og bunnen blir 3
   (4 kort i 2 spalter, pluss varmekartet i full bredde). De to må derfor være
   størst. */
@media (max-aspect-ratio: 4/5) {
    .infoskjerm {
        --u: min(0.092593vw, 0.052083vh);
        grid-template-rows: auto 2fr 1fr 1fr 1fr 2.4fr;
    }
    .if-rad--kpi  { grid-template-columns: 1fr 1fr; }
    /* `display: contents` løser opp midtraden, så de tre kortene blir egne
       rader i hovedrutenettet i stedet for tre smale spalter. */
    .if-rad--midt { display: contents; }
    .if-rad--bunn { grid-template-columns: 1fr 1fr; }
    /* Varmekartet trenger de 24 kolonnene sine — det får full bredde. */
    .if-rad--bunn > .if-k:last-child { grid-column: 1 / -1; }

    /* ── Skriften krymper her, den vokser ikke ──

       Første utgave satte tallet OPP til 96 i høykant, med den tanken at en
       stående skjerm er stor. Det er feil vei: kortene blir BREDE og LAVE,
       fordi fem nøkkeltall i to spalter blir tre rader i stedet for én. Et
       tall på 96 fylte hele korthøyden, og `overflow: hidden` klippet bort
       etiketten under — kortet viste «145» uten å si hva det var.

       Alt som står under et tall må få plass. Derfor mindre, ikke større. */
    .if-n { font-size: calc(52 * var(--u)); }
    .if-n--lang { font-size: calc(40 * var(--u)); }
    .if-t { font-size: calc(17 * var(--u)); }
    .if-d { font-size: calc(14 * var(--u)); }

    /* Listene og stolpene står i kort som deler høyden med to andre rader.
       De samme verdiene som i landskap ville sprengt kortet. */
    .if-liste { margin-top: calc(6 * var(--u)); }
    .if-liste > * + * { margin-top: calc(6 * var(--u)); }
    .if-liste > div { font-size: calc(16 * var(--u)); }
    .if-rader { margin-top: calc(6 * var(--u)); }
    .if-rader > * + * { margin-top: calc(7 * var(--u)); }
    .if-rader--tett > * + * { margin-top: calc(5 * var(--u)); }
    .if-r-navn { font-size: calc(16 * var(--u)); }
    .if-r-verdi { font-size: calc(19 * var(--u)); }
    .if-r-meta { font-size: calc(13 * var(--u)); }
    .if-rader--tett .if-r-navn { font-size: calc(15 * var(--u)); }
    .if-rader--tett .if-r-verdi { font-size: calc(17 * var(--u)); }
    .if-k h2 { font-size: calc(14 * var(--u)); }
    .if-k { padding: calc(12 * var(--u)) calc(16 * var(--u)); }
    .if-akse { font-size: calc(13 * var(--u)); }
}