/*
 * Skjermvisningen, /screen/{skjerm-id}. Oppbyggingen er etter designerens mock-up (frontpage.html): paneler med
 * tynne rammer og tynne Inter-titler. Uten design (Formidling → Design) er utseendet nøytral grafitt uten farge og
 * glød, som Kontentums egne skjermer (--sys-*); et design setter farger, glød og font (ScreenRenderer::designCss).
 *
 * Mock-upen er tegnet for 1920×1080. Alle faste mål skrives som
 * calc(N * var(--u)), der --u er 1px på 1920×1080 og skaleres med skjermen,
 * så forholdene er like på alle oppløsninger. Innhold som skal fylle ruten
 * (store tall, bilder) bruker i tillegg container-enheter (cqmin).
 */
:root {
    --u: min(calc(100vw / 1920), calc(100vh / 1080));
    /* Skriftenhet: som --u, men forsiden (.tiles og topplinjen) har større tekst
       for forbipasserende. Endre --text-scale for å justere nivået. */
    --text-scale: 1.25;
    --t: var(--u);

    /* Farger (navnene er fra designerens tokens; verdiene er standardutseendet, nøytral grafitt) */
    --c-abyss-deep: #0e0e0e;
    --c-night: #1c1c1c;
    --c-void: #161616;
    --c-cyan: #f2f2f2;
    --c-cyan-dim: #cfcfcf;
    --c-cyan-electric: #ffffff;
    --c-teal-edge: #6a6a6a;
    --c-teal-lit: #4a4a4a;
    --c-lime: #C3DF58;
    --c-sand: #EEE56F;
    --c-teal: #3a3a3a;       /* aksenten, mørk: merker og knapper (--surface-badge), rammer og glød */
    /* Design (Moduler → Design, ScreenRenderer::designCss) overstyrer palettet over (fra bakgrunn, forgrunn og
       aksent), tekstfargene, skjermens bakgrunn, avrundingen og fonten. Uten design gjelder verdiene her. */
    --screen-bg: #141414;
    --c-toolbar: #101010;    /* knappelinjen, nederst og øverst i fanen */
    --c-toolbar-2: #1e1e1e;
    --gallery-tint-1: #5a5a5a; /* fargetonen over bildene i galleriruten (Galleri, «Fargetone»: designets farger) */
    --gallery-tint-2: #444444;
    --gallery-tint-3: #2e2e2e;

    --surface-card: color-mix(in srgb, var(--c-night) 58%, transparent);
    --surface-inset: color-mix(in srgb, var(--c-void) 78%, transparent);
    --surface-toggle: #262626;
    --surface-badge: var(--c-teal);
    /* Rammen og gløden rundt kort, vinduer, tekststripen og knappelinjen (Design: egen rammefarge; ellers aksenten),
       med en lysere variant når noe er trykket på eller uthevet. */
    --c-frame: var(--c-teal);
    --c-frame-active: var(--c-cyan);
    --c-frame-glow: var(--c-cyan-electric);
    /* Knappene på rammekanten («+» på rutene, lukk og tilbake i vinduet, lukk på QR-koden) har rammens farge. */
    --frame-badge: var(--c-frame);
    --text-on-frame: #FFFFFF;
    --border-card: color-mix(in srgb, var(--c-frame) 80%, transparent);
    --border-hairline: color-mix(in srgb, var(--c-cyan-dim) 22%, transparent);
    --border-divider: color-mix(in srgb, var(--c-frame) 28%, transparent); /* rammefargen, svak (som sporet i fremdriftslinjene): linjene og kortene i Meny og Artikkelsamling */
    --border-toggle: color-mix(in srgb, var(--c-teal) 85%, transparent);

    --text-primary: #FFFFFF;
    --text-label: #cfcfcf;
    --text-muted: #9a9a9a;
    --text-accent: var(--c-cyan-dim);
    --text-on-chip: #141414;
    --text-on-badge: #FFFFFF; /* tekst og tegn på merker og knapper i --surface-badge */

    /* Tekst og ikoner rett på bakgrunnen (uten kort): en mørk skygge for lesbarhet; et design med lys bakgrunn slår den av. */
    --shadow-text: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.35);
    --shadow-icon: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
    --shadow-deep: rgba(0, 0, 0, 0.45); /* skyggen under kort og knappelinjen (et design med lys bakgrunn demper den) */
    /* Gløden rundt kort, knappelinjen og knappene på rammen: ingen uten design; et design setter den (DesignTheme, «Glød»). */
    --glow-card: 0 24px 64px var(--shadow-deep);
    --glow-card-active: 0 24px 64px var(--shadow-deep);
    --glow-badge: 0 0 0 calc(5 * var(--u)) color-mix(in srgb, var(--c-teal) 30%, transparent), 0 0 calc(18 * var(--u)) calc(7 * var(--u)) color-mix(in srgb, var(--c-teal) 32%, transparent);
    --glow-active: 0 0 calc(16 * var(--u)) color-mix(in srgb, var(--c-teal-edge) 55%, transparent);
    /* Hånden i attraksjonsmodus (.attract-hint): skygge, styrt av designets «Skygge». */
    --hint-shadow: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
    /* Rammetykkelsen (Design, «Rammetykkelse»): kort, vinduer og tekststripen (ikke knappelinjen). Det som er tykkere enn
       standard (--frame-extra), går utover: rutene står tettere og innholdet står der det står. Knappene på rammekanten
       flyttes en halv ekstra tykkelse ut (--frame-shift), så de står midt på rammen. */
    --frame-w: 1.3px;
    --frame-extra: calc(var(--frame-w) - 1.3px);
    --frame-shift: calc(var(--frame-extra) / 2);
    --glow-toolbar: 0 0 0 transparent;
    --glow-frame-badge: 0 0 0 transparent;

    /* Kontentums egne skjermer (paring, beskjeder: notice og pair): nøytral grafitt, uavhengig av design og
       uten farge og glød, så de ikke forveksles med et kundedesign. */
    --sys-bg: #141414;
    --sys-surface: #1c1c1c;
    --sys-border: #3a3a3a;
    --sys-text: #f2f2f2;
    --sys-muted: #9a9a9a;

    --font-sans: "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --gap: calc(28 * var(--u));
    --pad: calc(40 * var(--u));
    --card-pad: calc(32 * var(--u));
    --radius: calc(16 * var(--u));
    --radius-inset: calc(10 * var(--u));
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Høykant (f.eks. 1080×1920): samme mål som liggende 1920×1080, bare snudd,
   så tekst og avstander blir like store på samme skjerm uansett retning. */
@media (orientation: portrait) {
    :root { --u: min(calc(100vw / 1080), calc(100vh / 1920)); }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
    margin: 0;
    height: 100%;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: calc(14 * var(--u));
    line-height: 1.2;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Bakgrunnsbildet fra designet (undervannsbilde med lys ovenfra), dekker hele
   skjermen som i mock-upen. Fargen vises mens bildet lastes. */
body { background: var(--screen-bg); } /* svart, med mindre installasjonen har valgt en bakgrunn (screen/show) */
/* Bakgrunnsvideoen ligger bak alt innhold; bildet over vises til den spiller (og hvis den ikke kan). */
.screen-bg-video { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .screen-bg-video { display: none; } .screen-bg-video.screen-bg-color { display: block; } } /* en farge beveger seg ikke */

/* Avrundede hjørner på hele skjermen (installasjonen → Visning), med samme radius som widgetrammene:
   svart ytterst i hjørnene, gjennomsiktig innenfor kurven (en skygge rundt et avrundet felt som
   dekker skjermen). Ligger over alt, men tar ikke imot trykk. Klassen settes ikke i innbygginger
   på nettsider eller inni spillelisten (den runder sine egne hjørner, screen-player.css). */
body.rounded-corners::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    border-radius: var(--radius);
    box-shadow: 0 0 0 calc(40 * var(--u)) #000;
    pointer-events: none;
}

button { font: inherit; color: inherit; }

/* Rullefelt i turkis, så det synes på den mørke bakgrunnen (artikler, lister, paneler). */
* { scrollbar-width: thin; scrollbar-color: var(--c-cyan) color-mix(in srgb, var(--c-teal) 18%, transparent); }
::-webkit-scrollbar { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
::-webkit-scrollbar-track { background: color-mix(in srgb, var(--c-teal) 18%, transparent); border-radius: 999px; }
::-webkit-scrollbar-thumb { background: var(--c-cyan); border-radius: 999px; box-shadow: 0 0 calc(8 * var(--u)) color-mix(in srgb, var(--c-cyan) 60%, transparent); }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: var(--c-cyan-electric); }

/* ---------- Ramme: topplinje + rader ---------- */

.screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding: calc(34 * var(--u)) var(--pad) var(--pad);
    gap: calc(25 * var(--u));
}

.screen-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gap);
    height: calc(71 * var(--u));
    flex: none;
}

/* Logo eller kontonavn til høyre. */
.screen-brand {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: none;
    height: 100%;
    max-width: 40vw;
    padding: calc(4 * var(--u)) 0;
    white-space: nowrap;
}
.screen-brand { cursor: pointer; } /* lukker åpne vinduer (screen.js) */
.screen-logo { display: block; height: 100%; max-width: 100%; object-fit: contain; object-position: right center; }
.screen-brand-name { font-size: calc(30 * var(--t)); font-weight: 300; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; }

.tiles, .screen-header { --t: calc(var(--u) * var(--text-scale)); }
/* Hver rute kan krympe skriften sin (--tile-scale settes av screen.js når innhold ikke får plass). */
.tile { --t: calc(var(--u) * var(--text-scale) * var(--tile-scale, 1)); }
.tiles {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
/* Én rad med høyst 7 kolonner. Radene er like høye og deler høyden, og hver
   rad fyller hele bredden: rutene deler den i forholdet --span (3 : 2 : 1). */
.tile-row {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    gap: var(--gap);
}

/* Full høyde (layout_widgets.full_height, WidgetType::gridFor): rutenettet blir kolonner side om side, med bredde etter
   --col (kolonner av 7). En rute i full høyde er en kolonne med én rad; de andre kolonnene har radene sine. */
.tiles.has-cols { flex-direction: row; }
.tile-col { flex: var(--col, 1) 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }

/* ---------- Paneler (ruter) ---------- */

.tile {
    flex: var(--span, 2) 1 0;
    container-type: size;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: var(--card-pad);
    margin: calc(-1 * var(--frame-extra)); /* tykkere ramme går utover: innholdet står der det står */
    background: var(--surface-card);
    border: var(--frame-w) solid var(--border-card);
    border-radius: var(--radius);
    box-shadow: var(--glow-card);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    cursor: pointer;
    transition: box-shadow 220ms var(--ease-out), transform 140ms var(--ease-out);
}
.tile:active { transform: scale(.99); box-shadow: var(--glow-card-active); }

/* Tiltrekningsmodus etter inaktivitet (screen.js): rutene lyser opp én etter én (de andre dempes litt),
   og en hånd i rammens farge oppe i høyre hjørne av ruten som er uthevet gjør ett trykk. Første trykk
   avslutter modusen og virker som vanlig.
   Uten bevegelse ved redusert bevegelse og i høy kontrast. */
/* Hele skjermen dempes (mindre slitasje og innbrenning når ingen bruker den), og bare ruten som er uthevet,
   lyser gjennom: et mørkt lag over bakgrunnen (body::before; rutene ligger over det), og rutene som
   ikke er uthevet, topplinjen og knapperaden dempes med filter. Tones rolig inn og ut. */
/* Inn i dempingen rolig (1,2 s); ut igjen raskt (250 ms), så skjermen svarer med en gang når noen trykker. */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 250ms var(--ease-out); }
body.is-attract::before { opacity: .6; transition: opacity 1200ms ease-in-out; }
#tiles .tile, .screen-toolbar, .screen-header { transition: filter 250ms var(--ease-out), box-shadow 220ms var(--ease-out), transform 140ms var(--ease-out); }
body.is-attract .screen-toolbar, body.is-attract .screen-header { transition: filter 1200ms ease-in-out; }
body.is-attract #tiles .tile { transition: filter 1200ms ease-in-out, box-shadow 700ms var(--ease-out), border-color 700ms var(--ease-out), transform 700ms var(--ease-out); }
body.is-attract #tiles .tile:not(.attract-lit), body.is-attract .screen-toolbar, body.is-attract .screen-header { filter: brightness(.38); }
.tile.attract-lit {
    border-color: var(--c-frame-active);
    transform: scale(1.012);
    box-shadow: 0 0 0 calc(3 * var(--u)) color-mix(in srgb, var(--c-frame-glow) 55%, transparent), 0 0 calc(46 * var(--u)) color-mix(in srgb, var(--c-frame-glow) 45%, transparent), var(--glow-card-active);
    animation: attract-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes attract-pulse {
    from { box-shadow: 0 0 0 calc(3 * var(--u)) color-mix(in srgb, var(--c-frame-glow) 55%, transparent), 0 0 calc(30 * var(--u)) color-mix(in srgb, var(--c-frame-glow) 30%, transparent), var(--glow-card-active); }
    to   { box-shadow: 0 0 0 calc(3 * var(--u)) color-mix(in srgb, var(--c-frame-glow) 75%, transparent), 0 0 calc(56 * var(--u)) color-mix(in srgb, var(--c-frame-glow) 55%, transparent), var(--glow-card-active); }
}
.attract-hint {
    /* En hånd i rammens farge oppe i høyre hjørne av ruten som er uthevet (like under «+» på rammen),
       uten tekst og bakgrunn. Tones rolig inn, og gjør ett trykk hver gang ruten kommer i fokus. */
    position: absolute;
    /* Like stor synlig avstand fra rammen oppe og til høyre (symbolet har ulik luft inni seg og er vippet). */
    top: calc(22 * var(--u));
    right: calc(16 * var(--u));
    z-index: 4;
    width: calc(68 * var(--u));
    height: calc(68 * var(--u));
    color: var(--c-frame-active); /* rammens lyse variant (uten design: som før) */
    pointer-events: none;
    opacity: 0;
    transition: opacity 450ms var(--ease-out); /* ut: raskere enn rammen (700 ms), så hånden ikke henger igjen */
}
.attract-hint.is-shown { opacity: 1; transition: none; } /* inn: styres av animasjonene under (ikke også en overgang, som gir blink) */
/* Inn nedenfra i en svak bue ut mot høyre og tilbake, som en hånd som føres inn over skjermen. Loddrett
   stiger den jevnt og bremser mot slutten; vannrett buer den litt ut (aldri så langt at den når rammen) og
   tilbake. Den starter rett opp (0°) og vipper seg gradvis til −16° på veien. Tones inn i starten. Egne egenskaper (@property) per retning;
   eget lag (will-change), så den ikke tegnes om underveis. */
@property --hint-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --hint-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --hint-r { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.attract-hint { translate: var(--hint-x) var(--hint-y); rotate: var(--hint-r); will-change: opacity, translate, rotate; }
.attract-hint svg { display: block; width: 100%; height: 100%; transform: rotate(-16deg); transform-origin: 50% 80%; filter: var(--hint-shadow); will-change: transform; }
.attract-hint.is-shown {
    animation:
        attract-x 1300ms ease-in-out both,
        attract-y 1300ms cubic-bezier(.2, .5, .3, 1) both,
        attract-r 1300ms ease-out both,
        attract-fade 500ms ease-out both;
}
@keyframes attract-x { 0% { --hint-x: 0px; } 45% { --hint-x: calc(8 * var(--u)); } 100% { --hint-x: 0px; } }
@keyframes attract-y { from { --hint-y: calc(78 * var(--u)); } to { --hint-y: 0px; } }
@keyframes attract-r { from { --hint-r: 16deg; } to { --hint-r: 0deg; } } /* +16° mot symbolets −16°: rett opp i starten, vippet når den er på plass */
@keyframes attract-fade { from { opacity: 0; } to { opacity: 1; } }
/* Ut: tones raskt bort der den står, når uthevingen går videre (inn-animasjonen styrer synligheten, så den
   ville ellers forsvinne brått). */
.attract-hint.is-hiding { animation: attract-out 350ms ease-in both; }
@keyframes attract-out { from { opacity: 1; } to { opacity: 0; } }
/* Ett trykk etter at hånden har lagt seg: går kort inn (mindre og litt ned), og tilbake. */
.attract-hint.is-shown svg { animation: attract-press 1.1s var(--ease-out) 1450ms 1 both; }
@keyframes attract-press {
    0%, 30%  { transform: rotate(-16deg) translateY(0) scale(1); }
    50%      { transform: rotate(-16deg) translateY(calc(4 * var(--u))) scale(0.84); }
    72%, 100% { transform: rotate(-16deg) translateY(0) scale(1); }
}
body.uu .attract-hint { color: #fff; }
body.uu .attract-hint svg { filter: none; } /* høy kontrast: ingen skygge */
@media (prefers-reduced-motion: reduce) {
    .tile.attract-lit, .attract-hint.is-shown, .attract-hint.is-shown svg, .attract-hint.is-hiding { animation: none; }
}
.tile:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 3px; }

/* Uten ramme og bakgrunn (valgt i widgeten): innholdet rett på bakgrunnen, uten «+» i ruten.
   I høy kontrast vises rammen likevel, så innholdet er lesbart. */
body:not(.uu) .tile.tile-frameless { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Fullskjerm («Skjul bakgrunn i fullskjerm»): bare bakgrunnsflaten fjernes; rammen og gløden står. */
body:not(.uu) .overlay.overlay-frameless {
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
    /* Rammen dempet (svakere kant og glød), så innholdet står mer fritt på bakgrunnen. */
    border-color: color-mix(in srgb, var(--c-frame) 35%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--c-frame) 18%, transparent), 0 0 28px color-mix(in srgb, var(--c-frame) 7%, transparent);
}
/* Lukkeknappen dempet i samme grad, men tett (ingen gjennomsiktighet), så rammelinjen ikke synes gjennom:
   en mørkere, ugjennomsiktig variant av fargen, svakere glød og ikon. */
body:not(.uu) .overlay.overlay-frameless .overlay-close {
    background: color-mix(in srgb, var(--frame-badge) 45%, var(--c-abyss-deep));
    box-shadow: 0 0 0 calc(5 * var(--u)) color-mix(in srgb, var(--frame-badge) 12%, transparent), 0 0 calc(18 * var(--u)) calc(7 * var(--u)) color-mix(in srgb, var(--frame-badge) 12%, transparent);
    color: color-mix(in srgb, var(--text-on-frame) 75%, transparent);
}
body:not(.uu) .tile.tile-frameless:active { box-shadow: none; }

/* Fylt rute (Bakgrunn i ruten, eller designets «Ruter», DesignTheme::tileFill): fyllet helt dekkende, med kanten i samme
   farge, og alle farger inni regnet ut fra fyllet: tekst (--on-fill, lys eller mørk), dempet tekst, aksent (--accent-on-fill:
   aksenten når den har nok kontrast, ellers tekstfargen) og flatene og strekene inni. Lyst fyll (.is-light): som
   delt skjerm med lys bakgrunn. Ikke i høy kontrast. */
body:not(.uu) .tile.tile-filled {
    background: var(--fill); border-color: var(--fill); -webkit-backdrop-filter: none; backdrop-filter: none;
    --text-primary: var(--on-fill); --text-label: color-mix(in srgb, var(--on-fill) 88%, var(--fill));
    --text-muted: color-mix(in srgb, var(--on-fill) 72%, var(--fill)); --text-accent: var(--accent-on-fill);
    --c-cyan: var(--accent-on-fill); --c-cyan-dim: var(--accent-on-fill); --c-cyan-electric: var(--accent-on-fill);
    --c-frame-active: var(--accent-on-fill); --c-frame-glow: var(--on-fill);
    --surface-inset: color-mix(in srgb, var(--on-fill) 10%, transparent); --surface-card: color-mix(in srgb, var(--on-fill) 8%, transparent);
    --border-hairline: color-mix(in srgb, var(--on-fill) 25%, transparent); --border-divider: color-mix(in srgb, var(--on-fill) 25%, transparent);
    --shadow-text: none; --shadow-icon: none;
    color: var(--text-primary); text-shadow: none;
}
body:not(.uu) .tile.tile-filled.is-light .weather-item { background: rgba(0, 0, 0, .06); }

body:not(.uu) .tile.tile-frameless::after { display: none; } /* i høy kontrast vises rammen, og da også «+» */
/* Svak skygge på innholdet, så tekst og ikoner skiller seg fra bakgrunnsbildet. */
body:not(.uu) .tile.tile-frameless, body:not(.uu) .overlay.overlay-frameless { text-shadow: var(--shadow-text); }
body:not(.uu) .tile.tile-frameless svg, body:not(.uu) .overlay.overlay-frameless svg { filter: var(--shadow-icon); }
/* Toppen (kontonavn eller logo) står også rett på bakgrunnen: samme skygge (ikke i innbygginger). */
body:not(.uu) .screen-header { text-shadow: var(--shadow-text); }
body:not(.uu) .screen-header :is(svg, .screen-logo) { filter: var(--shadow-icon); }

/* Utseende (valgt i widgeten): uten tittel i ruten, og smalere tekstkolonne i fullskjerm. Egen bakgrunn
   erstatter skjermens bakgrunn (#widget-bg, screen.js). I høy kontrast vises tittelen, og ingen bakgrunn. */
body:not(.uu) .tile.tile-notitle .tile-head { display: none; }
.overlay-notitle.has-nav .overlay-title { visibility: visible; height: auto; } /* stien tilbake vises likevel */
/* Widgetens egen bakgrunn (screen.js): tones raskt inn når den spiller, og ut når widgeten lukkes. */
.screen-bg-video.widget-bg { opacity: 0; transition: opacity 450ms ease; }
.screen-bg-video.widget-bg.is-shown { opacity: 1; }

.overlay-narrow .full-article.no-image:not(.has-related) { grid-template-columns: minmax(0, calc(520 * var(--u))); } /* midtstilt som før, bare smalere */

/* «+» på overkanten: viser at panelet kan åpnes i fullskjerm. */
.tile:not(.tile-static)::after {
    content: "";
    position: absolute;
    z-index: 5; /* over kart, toning og bilder i ruten */
    top: calc(-10 * var(--u) - var(--frame-shift)); /* midt på rammen */
    right: calc(20 * var(--u));
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
    border-radius: 999px;
    background:
        linear-gradient(var(--text-on-frame), var(--text-on-frame)) center / calc(10 * var(--u)) calc(2 * var(--u)) no-repeat,
        linear-gradient(var(--text-on-frame), var(--text-on-frame)) center / calc(2 * var(--u)) calc(10 * var(--u)) no-repeat,
        var(--frame-badge);
    box-shadow: var(--glow-frame-badge);
}
.tile-static { cursor: default; }
.tile-static:active { transform: none; box-shadow: var(--glow-card); }

.tile-head { margin-bottom: calc(20 * var(--u)); min-width: 0; }
.tile-title {
    /* Samme størrelse i alle ruter: følger ikke --tile-scale (bare innholdet krympes når det trengs). */
    font-size: calc(24 * var(--u) * var(--text-scale));
    font-weight: 300;
    line-height: 1.15;
    /* Inntil to linjer, så lange titler synes også i smale ruter. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-body {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tile-empty { color: var(--text-muted); margin: 0; }

/* Artikkel (som første panel i designet): etikett, stor tittel, lysende linje,
   ingress og widgetens tekst nederst. Den vanlige tittellinjen brukes ikke. */
.tile-article .tile-head { display: none; }
.article-tile { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
/* Artikkelens bilde som bakgrunn (tile_image): fyller hele ruten som i Bilder-widgeten
   (.mgallery-tile), og teksten står over. */
.tile-article .tile-body:has(.article-tile-bg) { position: static; }
.article-tile.has-bg { position: relative; z-index: 3; }
.article-tile-kicker {
    flex: none;
    margin-bottom: calc(18 * var(--u));
    color: var(--text-accent);
    font-size: calc(11 * var(--t));
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.article-tile-title {
    flex: none;
    /* Luft under siste linje, så g, j og p ikke kuttes av overflow (tett linjeavstand); den
       negative margen holder avstanden til streken under lik. */
    margin: 0 0 -0.2em;
    padding-bottom: 0.2em;
    font-size: clamp(calc(24 * var(--t)), calc(11cqw * var(--tile-scale, 1)), calc(44 * var(--t)));
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.01em;
    hyphens: auto;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Alternativ tittel med HTML: <em> gir turkis tekst, som «akkurat nå!» i designet. */
.article-tile-title em { font-style: normal; color: var(--c-cyan); }
.article-tile-title strong, .article-tile-title b { font-weight: 600; }
.article-tile-bar {
    flex: none;
    width: calc(56 * var(--u));
    height: 2px;
    margin: calc(22 * var(--u)) 0 calc(20 * var(--u));
    background: var(--c-cyan);
    box-shadow: 0 0 calc(12 * var(--u)) color-mix(in srgb, var(--c-cyan) 60%, transparent);
}
.article-tile-ingress {
    margin: 0;
    min-height: 0;
    color: var(--text-muted);
    font-size: calc(14 * var(--t));
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-tile-text {
    flex: none;
    margin: auto 0 0;
    padding-top: calc(24 * var(--u));
    font-size: calc(19 * var(--t));
    font-weight: 300;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Artikkelliste */
.article-list-tile { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.article-list-tile li {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--u));
    flex: none;
    padding: calc(12 * var(--u)) 0;
    border-bottom: 1.3px solid var(--border-divider);
}
.article-list-tile li:first-child { padding-top: 0; }
.article-list-tile li:active { background: color-mix(in srgb, var(--c-cyan) 8%, transparent); }
.article-list-tile img { width: calc(64 * var(--u)); height: calc(48 * var(--u)); flex: none; object-fit: cover; border-radius: calc(6 * var(--u)); }
.article-list-title {
    font-size: calc(15 * var(--t));
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-list-tile li::after { content: "›"; margin-left: auto; padding-left: calc(8 * var(--u)); color: var(--text-accent); font-size: calc(20 * var(--t)); }

/* ---------- Beskjed i stedet for innhold ----------
   Tom tavle, ukjent skjerm og sperresiden (app/Views/screen/notice.php). Sidene vises også i
   vanlige nettleservinduer, der skjermenhetene (--u) blir små, så målene har en nedre grense i px. */

.notice-wrap {
    flex: 1;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(var(--pad), 16px);
}
.notice {
    box-sizing: border-box;
    width: min(100%, max(calc(860 * var(--u)), 340px));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: max(calc(16 * var(--u)), 10px);
    padding: max(calc(64 * var(--u)), 32px) max(calc(64 * var(--u)), 24px) max(calc(56 * var(--u)), 28px);
    background: var(--sys-surface);
    color: var(--sys-text);
    border: 1px solid var(--sys-border);
    border-radius: max(calc(12 * var(--u)), 10px);
    animation: notice-in 700ms var(--ease-out) both;
}
.notice-icon {
    width: max(calc(112 * var(--u)), 68px);
    height: max(calc(112 * var(--u)), 68px);
    margin-bottom: max(calc(8 * var(--u)), 4px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: max(calc(48 * var(--u)), 30px);
    color: var(--sys-text);
    border: 1px solid var(--sys-border);
}
.notice-title {
    margin: 0;
    font-size: max(calc(40 * var(--u)), 22px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.notice-text {
    margin: 0;
    max-width: 32em;
    font-size: max(calc(21 * var(--u)), 15px);
    font-weight: 300;
    line-height: 1.5;
    color: var(--sys-muted);
    text-wrap: pretty;
}
.notice-meta {
    margin-top: max(calc(12 * var(--u)), 8px);
    padding-top: max(calc(20 * var(--u)), 14px);
    width: 100%;
    border-top: 1px solid var(--sys-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px max(calc(16 * var(--u)), 12px);
    font-size: max(calc(16 * var(--u)), 12px);
    color: var(--sys-muted);
}
.notice-chip {
    font-family: var(--font-mono);
    font-size: max(calc(20 * var(--u)), 15px);
    font-weight: 600;
    letter-spacing: 0.14em;
    padding: 0.3em 0.8em;
    border-radius: 999px;
    border: 1px solid var(--sys-border);
    color: var(--sys-text);
}
/* Skjerm-PC som henter paringen: tre prikker som puster. */
.notice-dots { display: inline-flex; gap: 0.4em; font-size: max(calc(20 * var(--u)), 15px); }
.notice-dots i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--sys-text); animation: notice-dot 1.4s ease-in-out infinite; }
.notice-dots i:nth-child(2) { animation-delay: 0.2s; }
.notice-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes notice-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes notice-dot { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .notice, .notice-dots i { animation: none; } }

/* ---------- Fullskjerm ---------- */

/* Fullskjerm dekker området under topplinjen (som i designet), så logoen
   fortsatt synes. 130 = 34 (luft over) + 71 (topplinje) + 25 (mellomrom). */
.overlay {
    position: fixed;
    top: calc(130 * var(--u));
    left: var(--pad);
    right: var(--pad);
    bottom: var(--pad);
    z-index: 10;
    display: flex;
    flex-direction: column;
    /* Ett sammenhengende glasspanel (ingen skjøt mellom tittel og innhold). */
    background: var(--surface-card);
    border: var(--frame-w) solid var(--border-card);
    border-radius: var(--radius);
    box-shadow: var(--glow-card);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: overlay-in .22s var(--ease-out);
}
/* Rutene bak tones ut mens en widget er åpen. */
.tiles { transition: opacity 220ms var(--ease-out); }
body.has-overlay .tiles { opacity: 0; pointer-events: none; }
@keyframes overlay-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.overlay-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
    /* Høyre marg som innholdet under (rammens marg + luften mot rullefeltet), så «Maskinoversatt»
       og knappene i tittelraden flukter med innholdet. */
    padding: var(--card-pad) calc(var(--card-pad) + 14 * var(--u)) 0 var(--card-pad);
}
.overlay-title { margin: 0; flex: 1; min-width: 0; font-size: calc(34 * var(--u)); font-weight: 300; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sti i overskriften (artikkel fra en artikkelliste): listens tittel er en knapp tilbake, så pil og artikkelens tittel. */
.title-crumb {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit; /* knapper arver ikke tegnavstanden; ellers blir lenken luftigere enn resten av tittelen */
    color: var(--c-cyan);
    cursor: pointer;
}
.title-crumb:active { opacity: .7; }
.title-crumb-sep { margin: 0 .35em; font-size: .55em; vertical-align: middle; color: var(--text-muted); }
.title-crumb-current { color: var(--text-primary); }
/* Lukk: samme merke som «+» på rutene, med ×. */
.overlay-close {
    position: absolute;
    top: calc(-22 * var(--u) - var(--frame-shift)); /* midt på rammen */
    right: calc(20 * var(--u));
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
    border: 0;
    border-radius: 999px;
    background: var(--frame-badge);
    box-shadow: var(--glow-frame-badge);
    color: var(--text-on-frame);
    font-size: calc(18 * var(--u));
    cursor: pointer;
}
/* Trykk på lukk (mens knappen holdes nede): krymper og blusser opp, som rutene når de åpnes. */
.overlay-close { transition: transform 140ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.overlay-close:active {
    transform: scale(.82);
    box-shadow: 0 0 0 calc(8 * var(--u)) color-mix(in srgb, var(--frame-badge) 45%, transparent), 0 0 calc(26 * var(--u)) calc(10 * var(--u)) color-mix(in srgb, var(--c-frame-active) 60%, transparent);
}
.overlay-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Rullefeltet står et stykke inn fra rammen (som i panelene i «Spørsmål og svar»): margen
       flytter det like langt inn som panelene der står, og innholdet får litt luft mot rullefeltet. */
    margin: 0 var(--card-pad) var(--card-pad) 0;
    padding: calc(28 * var(--u)) calc(14 * var(--u)) 0 var(--card-pad); /* luft mellom tittel og innhold */
    font-size: calc(17 * var(--u));
    line-height: 1.5;
}

.back-button, .more-button {
    border-radius: calc(8 * var(--u));
    padding: calc(12 * var(--u)) calc(18 * var(--u));
    font-size: calc(12 * var(--u));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
.back-button {
    margin-bottom: calc(24 * var(--u));
    border: 1.3px solid var(--border-toggle);
    background: var(--surface-toggle);
    color: var(--c-cyan-electric);
}
.more-button {
    margin-top: calc(24 * var(--u));
    border: 1.3px solid var(--c-teal-edge);
    background: var(--c-teal-lit);
    color: var(--text-on-chip);
    box-shadow: var(--glow-active);
}

/* Artikkel i fullskjerm */
.full-article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: calc(48 * var(--u)); align-items: start; }
/* Liggende: teksten til venstre, bildet og miniatyrene til høyre (relaterte artikler ytterst). Stående: bildet øverst. */
@media (orientation: landscape) { .full-article:not(.no-image) .full-article-text { order: -1; } }
.full-article.no-image { grid-template-columns: minmax(0, calc(900 * var(--u))); justify-content: center; }
@media (orientation: portrait) { .full-article { grid-template-columns: minmax(0, 1fr); } }
.gallery { position: sticky; top: 0; }
.gallery-main { position: relative; margin: 0; }
.gallery-main :is(img, video) { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: var(--radius-inset); background: var(--surface-inset); }
/* Bildeteksten ligger nederst i bilderammen (ikke under), så miniatyrene står stille når bildet byttes
   og tekstene er ulikt lange. Høyst tre linjer; hele teksten vises når bildet åpnes stort. Trykk går
   gjennom teksten til bildet. */
.gallery-main figcaption, .mgallery-caption {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    padding: calc(32 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
    border-radius: 0 0 var(--radius-inset) var(--radius-inset);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0));
    color: #fff;
    font-size: calc(14 * var(--u));
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    pointer-events: none;
}
.gallery-main figcaption:empty, .gallery-main figcaption[hidden], .mgallery-caption[hidden] { display: none; }
/* Kreditering etter bildeteksten («Foto: …»), litt svakere. */
.media-credit { margin-left: 0.6em; opacity: 0.72; font-size: 0.88em; white-space: nowrap; }
/* Galleri, automatisk presentasjon i vinduet (spillelister): teksten over prikkene. */
.mgallery-view.is-auto .mgallery-caption { padding-bottom: calc(46 * var(--u)); }
body.uu .gallery-main figcaption, body.uu .mgallery-caption { background: #000; padding-top: calc(10 * var(--u)); border-top: 2px solid #fff; }
.gallery-thumbs { display: flex; gap: calc(10 * var(--u)); flex-wrap: wrap; margin-top: calc(12 * var(--u)); }
.gallery-thumb { position: relative; padding: 0; border: 2px solid transparent; border-radius: calc(8 * var(--u)); background: none; cursor: pointer; }
.gallery-thumb.active { border-color: var(--c-cyan); box-shadow: var(--glow-active); }
.gallery-thumb img { display: block; width: calc(96 * var(--u)); aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(6 * var(--u)); }
.gallery-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(26 * var(--u)); color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); pointer-events: none; }
/* Artikkel med bilder: bildet og miniatyrene står fast (til høyre), og bare teksten ruller (i egen kolonne).
   Artikkelen er like høy som det synlige feltet i vinduet (--body-h, satt av screen.js); hovedbildet
   krymper så miniatyrene alltid får plass under. Tekstens rullefelt står der vinduets ellers står. */
.full-article:not(.no-image) { height: var(--body-h, auto); grid-template-rows: minmax(0, 1fr); }
.full-article:not(.no-image) .gallery { position: static; display: flex; flex-direction: column; max-height: 100%; min-height: 0; }
.full-article:not(.no-image) .gallery-main { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
.full-article:not(.no-image) .gallery-main :is(img, video) { flex: 0 1 auto; min-height: 0; }
.full-article:not(.no-image) .gallery-main figcaption, .full-article:not(.no-image) .gallery-thumbs { flex: none; }
.full-article:not(.no-image) .full-article-text {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-right: calc(-14 * var(--u));
    padding: 0 calc(14 * var(--u)) var(--card-pad) 0;
}
/* Stående skjerm: bildet over teksten, høyst knapt halve høyden. */
@media (orientation: portrait) {
    .full-article:not(.no-image) { grid-template-rows: auto minmax(0, 1fr); gap: calc(28 * var(--u)); }
    .full-article:not(.no-image) .gallery { max-height: calc(var(--body-h, 100vh) * 0.45); }
}
/* Relaterte artikler (valgt i widgeten): smal kolonne til høyre; på stående skjerm en rad under teksten. */
.full-article.has-related { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, calc(280 * var(--u))); }
.full-article.no-image.has-related { grid-template-columns: minmax(0, calc(900 * var(--u))) minmax(0, calc(280 * var(--u))); }
.full-article-related { display: flex; flex-direction: column; gap: calc(12 * var(--u)); min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-left: calc(24 * var(--u)); border-left: 1.3px solid var(--border-hairline); }
.full-article-related-title { margin: 0 0 calc(4 * var(--u)); color: var(--text-accent); font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.related-card { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)); border: 1.3px solid var(--border-hairline); border-radius: calc(10 * var(--u)); background: var(--surface-inset); color: inherit; text-align: left; font: inherit; cursor: pointer; }
.related-card-title { font-size: calc(16 * var(--u)); line-height: 1.3; }
@media (orientation: portrait) {
    .full-article.has-related, .full-article.no-image.has-related { grid-template-columns: minmax(0, 1fr); }
    .full-article.has-related:not(.no-image) { grid-template-rows: auto minmax(0, 1fr) auto; }
    .full-article-related { flex-direction: row; flex-wrap: wrap; padding: calc(16 * var(--u)) 0 0; border-left: 0; border-top: 1.3px solid var(--border-hairline); overflow: visible; }
    .full-article-related-title { flex: 1 0 100%; }
    .related-card { flex: 1 1 calc(200 * var(--u)); max-width: calc(320 * var(--u)); }
}
body.uu .related-card { background: #000; border: 2px solid #fff; }
body.is-embedded .full-article-related { display: none; }
body.is-embedded .full-article.has-related { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
body.is-embedded .full-article.no-image.has-related { grid-template-columns: minmax(0, calc(900 * var(--u))); }
.full-article-title { margin: 0 0 calc(16 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 300; line-height: 1.2; }
.full-article-title::after {
    content: "";
    display: block;
    width: calc(56 * var(--u));
    height: 2px;
    margin-top: calc(22 * var(--u));
    background: var(--c-cyan);
    box-shadow: 0 0 calc(12 * var(--u)) color-mix(in srgb, var(--c-cyan) 60%, transparent);
}
.full-article-ingress { font-size: calc(19 * var(--u)); font-weight: 300; margin: 0 0 1em; line-height: 1.35; }
.full-article-body p { margin: 0 0 1em; color: var(--text-muted); }
/* Tekstmerking i artikler (Libraries\Markup): mellomtittel, lister, faktaboks, fet/kursiv og ord med forklaring. */
.article-rich .article-subtitle { margin: 1.3em 0 .5em; font-size: 1.15em; font-weight: 500; line-height: 1.3; color: var(--text-primary); }
.article-rich .article-subtitle:first-child { margin-top: 0; }
.article-rich :is(ul, ol) { margin: 0 0 1em; padding-left: 1.3em; color: var(--text-muted); }
.article-rich li { margin: 0 0 .35em; padding-left: .2em; }
.article-rich li::marker { color: var(--c-cyan); }
.article-rich strong { font-weight: 600; color: var(--text-primary); }
.article-rich em { font-style: italic; }
.article-rich .fact-box { margin: 0 0 1em; padding: .8em 1em; background: var(--surface-inset); border: 1.3px solid var(--border-hairline); border-left: calc(4 * var(--u)) solid var(--c-cyan); border-radius: var(--radius-inset); }
.article-rich .fact-box p { margin: 0; color: var(--text-label); }
/* Ord med forklaring: lys turkis med prikket linje under; trykk viser forklaringen (screen.js, .param-tip). */
.term { color: var(--c-cyan-electric); text-decoration: underline dotted var(--c-cyan); text-decoration-thickness: max(2px, calc(2 * var(--u))); text-underline-offset: .22em; cursor: pointer; }
.term:active { opacity: .7; }
body.uu .term { color: #ffd400; text-decoration-color: #ffd400; }
body.uu .article-rich .fact-box { background: #000; border-color: #fff; }

/* Artikkelliste i fullskjerm */
/* Artikkelsamlingen: like bildekort (bilde øverst). Kolonnene og bredden settes av screen.js (fitGrid). */
.article-list-full { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(300 * var(--u))), 1fr)); justify-content: start; align-content: start; gap: calc(18 * var(--u)); }
.article-card {
    display: flex; flex-direction: column; gap: calc(8 * var(--u)); text-align: left; align-items: stretch; min-width: 0;
    background: var(--surface-inset);
    border: 1.3px solid var(--border-divider);
    border-radius: var(--radius-inset);
    padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u)); cursor: pointer; overflow: hidden;
}
.article-card[hidden] { display: none; }
.article-card img, .article-card-noimage { width: 100%; aspect-ratio: 1.6; object-fit: cover; border-radius: calc(6 * var(--u)); flex: none; display: block; }
.article-card-noimage { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c-frame) 15%, transparent); color: var(--c-frame-active); font-size: calc(34 * var(--u)); opacity: .8; }
.article-card-text { padding: 0 calc(4 * var(--u)); }
.article-card .article-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card .article-card-ingress { -webkit-line-clamp: 2; }
.article-card-text { display: flex; flex-direction: column; gap: calc(6 * var(--u)); min-width: 0; }
.article-card-title { font-size: calc(18 * var(--u)); line-height: 1.25; }
.article-card-ingress { color: var(--text-muted); font-size: calc(14 * var(--u)); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-card-date { color: var(--text-accent); font-family: var(--font-mono); font-size: calc(11 * var(--u)); letter-spacing: 0.04em; }

/* ---------- Quiz (QuizWidget) ---------- */
/* Ruten: ingress og «Start quiz», med vannmerke (.tile-mark, under Nettside). Med bildet som bakgrunn (valgt i widgeten) fyller
   det hele ruten (.mgallery-tile, som Galleri og Artikkel), og tittel og tekst står over. */
.tile-quiz:has(.quiz-tile-bg) .tile-head { position: relative; z-index: 3; }
.quiz-tile { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.quiz-tile.has-bg { z-index: 3; }
.quiz-tile-intro { position: relative; }
.quiz-tile.has-bg .quiz-tile-intro { color: var(--text-label); } /* over bildet: litt lysere enn ellers */
.quiz-tile-foot { position: relative; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); flex-wrap: wrap; }
/* Beskrivelsen under tittelen i en rute (som i oppslagslisten), og «gå videre»-teksten nederst med pil
   (Start quiz, navnet på nettstedet): ingen knapp, hele ruten trykkes på. */
/* Linjeskift i teksten fra admin: avsnitt med litt luft mellom (tile_paragraphs). */
.tile-para { display: block; }
.tile-para + .tile-para { margin-top: .45em; }
.tile-desc { flex: none; margin: 0 0 calc(12 * var(--u)); color: var(--text-muted); font-size: calc(14 * var(--t)); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-cta { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); color: var(--text-accent); font-size: calc(16 * var(--t)); font-weight: 600; white-space: nowrap; }
.quiz-start { flex: none; }
body.uu .tile-cta { color: #ffd400; }
body.uu .quiz-tile-bg { display: none; }

/* Fullskjerm (overlay-qa: fyller rammen): spørsmålet og bildet side om side øverst, halve bredden hver,
   og svarene under over hele bredden. Øverste del tar plassen som er igjen; bildet tilpasses den. */
.quiz { --quiz-ok: var(--c-lime); --quiz-wrong: #F0866F; height: 100%; padding-bottom: calc(10 * var(--u)); box-sizing: border-box; container-type: size; }
/* Høyden på svarknappene begrenses av rammens høyde (cqh), så de får plass også i et mindre vindu. */ /* luft nederst: omrisset på et valgt svar i nederste rad */
.quiz-q {
    height: 100%;
    display: grid;
    /* Spørsmålsdelen blir aldri lavere enn innholdet (teksten og «Neste»), også med mange alternativer. */
    grid-template-rows: minmax(min-content, 1fr) auto;
    gap: calc(36 * var(--u)); /* luft mellom «Neste» og alternativene */
}
.quiz-q[hidden], .quiz-result[hidden] { display: none; }
.quiz-q-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(40 * var(--u)); min-height: 0; }
.quiz-q.has-image .quiz-q-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.quiz-q-main {
    display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
    /* Luft rundt, så gløden på «Neste» ikke klippes av rullefeltet; den negative margen holder teksten på plass. */
    padding: calc(26 * var(--u)); margin: calc(-26 * var(--u));
}
.quiz-progress { color: var(--text-accent); font-family: var(--font-mono); font-size: calc(15 * var(--u)); letter-spacing: .08em; text-transform: uppercase; margin-bottom: calc(16 * var(--u)); }
.quiz-q-text { margin: 0; font-size: calc(44 * var(--u)); font-weight: 300; line-height: 1.2; }
.quiz-multi-hint { margin: calc(12 * var(--u)) 0 0; color: var(--text-muted); font-size: calc(19 * var(--u)); }
/* Spørreundersøkelse: avkrysningsboks i stedet for bokstav (firkant ved flere valg, sirkel ved ett), hake når valgt. */
.quiz-answer-mark.is-box { border-radius: calc(8 * var(--u)); }
.quiz-answer-mark:is(.is-box, .is-radio) .bi { font-size: calc(26 * var(--u)); opacity: 0; transition: none; }
.quiz-answer.is-chosen .quiz-answer-mark:is(.is-box, .is-radio) { background: var(--c-cyan); border-color: var(--c-cyan); color: var(--text-on-chip); }
.quiz-answer.is-chosen .quiz-answer-mark:is(.is-box, .is-radio) .bi { opacity: 1; }
body.uu .quiz-answer.is-chosen .quiz-answer-mark:is(.is-box, .is-radio) { background: #ffd400; border-color: #ffd400; color: #000; }
/* Flere valg med grense: når grensen er nådd, dempes alternativene som ikke er valgt (må avvelge først). */
.quiz-q.is-full .quiz-answer:not(.is-chosen), .quiz-q.is-full.is-choosing .quiz-answer:not(.is-chosen) { opacity: .4; cursor: default; }
/* Flere valg: de andre dempes ikke mens det fortsatt kan velges flere (bare når grensen er nådd, over). */
.quiz-q[data-multi="1"].is-choosing:not(.is-full) .quiz-answer:not(.is-chosen) { opacity: 1; }
.quiz-q-image { position: relative; margin: 0; min-height: 0; cursor: zoom-in; border-radius: var(--radius-inset); overflow: hidden; border: 1.3px solid var(--border-hairline); background: var(--surface-inset); }
/* Bildet er lagt absolutt, så det ikke gir spørsmålsdelen sin egen høyde (et kvadratisk bilde i en bred kolonne ble
   ellers like høyt som bredt og dyttet svarene ut av rammen). Feltet får høyden som er igjen; bildet vises helt. */
.quiz-q-image img { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }
.quiz-q-image-bg { position: absolute; inset: calc(-30 * var(--u)); background: center / cover no-repeat; filter: blur(calc(24 * var(--u))) saturate(1.1); opacity: .5; }
body.uu .quiz-q-image-bg { display: none; }

/* Mer enn fire alternativer: litt lavere knapper, så alt får plass sammen med spørsmålet. */
.quiz-answers.is-many .quiz-answer { min-height: min(calc(84 * var(--u)), 10.5cqh); padding-top: calc(12 * var(--u)); padding-bottom: calc(12 * var(--u)); font-size: calc(23 * var(--u)); }
/* Uten bilde er det god plass: større alternativer (høyere knapper, større tekst og bokstav). */
.quiz-q:not(.has-image) .quiz-q-text { font-size: calc(54 * var(--u)); }
.quiz-q:not(.has-image) .quiz-answer { min-height: min(calc(190 * var(--u)), 17cqh); padding: calc(26 * var(--u)) calc(34 * var(--u)); gap: calc(24 * var(--u)); font-size: calc(34 * var(--u)); }
.quiz-q:not(.has-image) .quiz-answer-mark { width: calc(60 * var(--u)); height: calc(60 * var(--u)); font-size: calc(24 * var(--u)); }
.quiz-q:not(.has-image) .quiz-answer-mark:is(.is-box, .is-radio) .bi { font-size: calc(34 * var(--u)); }
.quiz-q:not(.has-image) .quiz-answers.is-many .quiz-answer { min-height: min(calc(110 * var(--u)), 11cqh); padding-top: calc(16 * var(--u)); padding-bottom: calc(16 * var(--u)); font-size: calc(29 * var(--u)); }
.quiz-q:not(.has-image) .quiz-answers { gap: calc(22 * var(--u)) calc(40 * var(--u)); }
/* Mange alternativer i et lavt vindu: bokstav, tekst og luft krymper også etter rammens høyde (cqh). */
.quiz-answers.is-many { row-gap: min(calc(16 * var(--u)), 1.6cqh); }
.quiz-answers.is-many .quiz-answer { padding-top: min(calc(12 * var(--u)), 1cqh); padding-bottom: min(calc(12 * var(--u)), 1cqh); }
.quiz-answers.is-many .quiz-answer-mark { width: min(calc(52 * var(--u)), 6cqh); height: min(calc(52 * var(--u)), 6cqh); }
.quiz-q:not(.has-image) .quiz-answers.is-many { row-gap: min(calc(22 * var(--u)), 1.8cqh); }
.quiz-q:not(.has-image) .quiz-answers.is-many .quiz-answer { font-size: min(calc(29 * var(--u)), 3.6cqh); padding-top: min(calc(16 * var(--u)), 1cqh); padding-bottom: min(calc(16 * var(--u)), 1cqh); }
.quiz-q:not(.has-image) .quiz-answers.is-many .quiz-answer-mark { width: min(calc(60 * var(--u)), 6cqh); height: min(calc(60 * var(--u)), 6cqh); }
/* Svarene: alltid i to kolonner (fritt antall alternativer). */
.quiz-answers { display: grid; gap: calc(16 * var(--u)) calc(40 * var(--u)); grid-template-columns: repeat(2, minmax(0, 1fr)); } /* kolonnene følger skillet mellom tekst og bilde over */
.quiz-answer {
    display: flex; align-items: center; gap: calc(18 * var(--u)); min-height: min(calc(120 * var(--u)), 14cqh);
    padding: calc(20 * var(--u)) calc(26 * var(--u));
    text-align: left; color: var(--text-primary); font: inherit; font-size: calc(28 * var(--u)); line-height: 1.3;
    background: var(--surface-inset); border: 1.3px solid var(--border-toggle); border-radius: var(--radius-inset);
    cursor: pointer; transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), transform 140ms var(--ease-out), opacity 200ms var(--ease-out);
}
.quiz-answer:active:not(:disabled) { transform: scale(.98); }
.quiz-answer:disabled { cursor: default; }
.quiz-answer-mark {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 999px;
    border: 1.3px solid var(--border-toggle); color: var(--c-cyan); font-weight: 600; font-size: calc(21 * var(--u));
}
/* Valgt (fasiten kommer etter et sekund): valget markeres, de andre dempes litt. Uten overganger. */
.quiz-q.is-choosing .quiz-answer.is-chosen { border-color: var(--c-cyan-electric); box-shadow: var(--glow-active); background: color-mix(in srgb, var(--c-cyan) 16%, var(--surface-inset)); }
.quiz-q.is-choosing .quiz-answer.is-chosen .quiz-answer-mark { background: var(--c-cyan); border-color: var(--c-cyan); color: var(--text-on-chip); }
.quiz-q.is-choosing .quiz-answer:not(.is-chosen) { opacity: .6; }
.quiz-q:is(.is-choosing, .is-answered) .quiz-answer { transition: none; }
body.uu .quiz-q.is-choosing .quiz-answer.is-chosen { border-color: #ffd400; box-shadow: 0 0 0 3px #ffd400; background: #000; }
/* Etter svaret: riktig svar grønt, feil valgt svar korall, resten dempet. */
/* Ditt valg: hvitt omriss med litt luft rundt, straks det er valgt og videre når fasiten vises
   (også når flere svar er riktige). */
.quiz-q:is(.is-choosing, .is-answered) .quiz-answer.is-chosen { outline: calc(3 * var(--u)) solid var(--text-primary); outline-offset: calc(4 * var(--u)); }
body.uu .quiz-q:is(.is-choosing, .is-answered) .quiz-answer.is-chosen { outline-color: #ffd400; }
.quiz-q.is-answered .quiz-answer:not(.is-correct, .is-wrong) { opacity: .45; }
.quiz-answer.is-correct { border-color: var(--quiz-ok); background: color-mix(in srgb, var(--quiz-ok) 16%, var(--surface-inset)); }
.quiz-answer.is-correct .quiz-answer-mark { background: var(--quiz-ok); border-color: var(--quiz-ok); color: var(--text-on-chip); }
.quiz-answer.is-wrong { border-color: var(--quiz-wrong); background: color-mix(in srgb, var(--quiz-wrong) 16%, var(--surface-inset)); }
.quiz-answer.is-wrong .quiz-answer-mark { background: var(--quiz-wrong); border-color: var(--quiz-wrong); color: var(--text-on-chip); }

/* Bildealternativer (has-image-answers): spørsmålet så høyt som innholdet, og bildene fyller resten av rammen i et rutenett
   (--cols kolonner, quiz_full), med bokstaven eller avkrysningen oppå bildet og teksten under (bare bilde: skjult). */
.quiz-q.has-image-answers { grid-template-rows: auto minmax(0, 1fr); }
.quiz-q.has-image-answers .quiz-q-top { max-height: 42cqh; }
.quiz-answers.is-images { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: calc(20 * var(--u)); min-height: 0; }
.quiz-answers.is-images .quiz-answer { position: relative; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: calc(12 * var(--u)); min-height: 0;
    padding: calc(12 * var(--u)); text-align: center; overflow: hidden; }
.quiz-answer-img { flex: 1; min-height: 0; border-radius: calc(var(--radius-inset) - 4px); overflow: hidden; background: var(--surface-inset); }
.quiz-answer-img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.quiz-answers.is-images .quiz-answer-mark { position: absolute; top: calc(22 * var(--u)); left: calc(22 * var(--u)); background: color-mix(in srgb, var(--surface-inset) 85%, transparent); backdrop-filter: blur(4px); }
.quiz-answers.is-images .quiz-answer-text { flex: none; font-size: calc(24 * var(--u)); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.quiz-answers.is-images .quiz-answer-text.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.quiz-q.is-answered .quiz-answers.is-images .quiz-answer:not(.is-correct, .is-wrong) .quiz-answer-img { filter: grayscale(.6); }

.quiz-feedback { margin-top: calc(28 * var(--u)); }
.quiz-feedback[hidden] { display: none; }
.quiz-verdict { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(16 * var(--u)); font-size: calc(28 * var(--u)); font-weight: 600; }
.quiz-verdict-ok { color: var(--quiz-ok); }
.quiz-verdict-wrong { color: var(--quiz-wrong); }
.quiz-q:not(.was-right) .quiz-verdict-ok, .quiz-q:not(.was-wrong) .quiz-verdict-wrong { display: none; }
.quiz-answer-was { color: var(--text-label); font-size: calc(21 * var(--u)); font-weight: 400; }
.quiz-explanation { margin: calc(12 * var(--u)) 0 0; color: var(--text-label); font-size: calc(21 * var(--u)); line-height: 1.5; }
.quiz-next {
    display: inline-flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(40 * var(--u));
    padding: calc(12 * var(--u)) calc(26 * var(--u));
    border: 0; border-radius: 999px; background: var(--surface-badge); color: var(--text-on-badge); box-shadow: var(--glow-badge);
    font: inherit; font-size: calc(19 * var(--u)); font-weight: 600; cursor: pointer;
    transition: transform 140ms var(--ease-out);
}
.quiz-next:active { transform: scale(.95); }
/* Nedtelling (Videre automatisk): tallet til høyre, og en lys linje nederst i knappen som krymper. */
.quiz-next { position: relative; overflow: hidden; }
.quiz-countdown { display: none; min-width: 1.4em; padding-left: calc(10 * var(--u)); margin-left: calc(2 * var(--u)); border-left: 1px solid rgba(255, 255, 255, .35); font-variant-numeric: tabular-nums; text-align: right; opacity: .85; }
.quiz-next.is-counting .quiz-countdown { display: inline-block; }
.quiz-next.is-counting::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(4 * var(--u));
    background: rgba(255, 255, 255, .55); transform-origin: left;
    animation: quiz-count var(--count, 20s) linear forwards;
}
@keyframes quiz-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }
body.uu .quiz-next.is-counting::after { background: #000; }
body.uu .quiz-countdown { border-left-color: rgba(0, 0, 0, .4); }
/* Teksten på «Neste»: «Neste spørsmål», «Neste» (i en artikkel, eller når en artikkel kommer etter) eller «Se resultatet» til slutt. */
:is(.quiz-q, .quiz-article):not(.is-last) .quiz-finish-label, :is(.quiz-q, .quiz-article).is-last :is(.quiz-next-label, .quiz-continue-label) { display: none; }
.quiz-continue-label, :is(.quiz-q, .quiz-article).is-continue .quiz-next-label { display: none; }
:is(.quiz-q, .quiz-article).is-continue:not(.is-last) .quiz-continue-label { display: inline; }

/* Uthevet alternativ (f.eks. «Ønsker ikke å svare»): sist, like stort som de andre, med stiplet ramme og uten flate, så
   det skiller seg tydelig fra de vanlige alternativene. Bokstaven eller avkrysningen står som før. */
.quiz-answer.is-highlighted { border-style: dashed; border-width: calc(2 * var(--u)); font-style: italic; }
.quiz-answer.is-highlighted:not(.is-correct, .is-wrong, .is-chosen) { background: transparent; color: var(--text-label); border-color: color-mix(in srgb, var(--text-primary) 50%, transparent); }
.quiz-answer.is-highlighted .quiz-answer-mark { border-style: dashed; border-color: color-mix(in srgb, var(--text-primary) 50%, transparent); }
body.uu .quiz-answer.is-highlighted { border-color: #fff; }
.quiz-q[data-alone="1"].is-full .quiz-answer.is-highlighted { opacity: 1; cursor: pointer; } /* kan velges alene, også når grensen er nådd */

/* En artikkel i quizen: artikkelen fyller rammen (som artikkel-widgeten, uten forstørring av bildet), og «Neste»
   står tydelig nederst til høyre. */
.quiz-article { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: calc(24 * var(--u)); }
.quiz-article[hidden] { display: none; }
.quiz-article-body { min-height: 0; overflow: hidden; }
.quiz-article .full-article:not(.no-image) { height: 100%; }
.quiz-article .full-article.no-image { max-height: 100%; overflow-y: auto; }
.overlay-body .quiz-article .gallery-main :is(img, video) { cursor: default; }
.quiz-article-foot { display: flex; justify-content: flex-end; }
.quiz-article-next { margin-top: 0; padding: calc(18 * var(--u)) calc(40 * var(--u)); font-size: calc(26 * var(--u)); }
.quiz-article.is-entering .quiz-article-body { animation: quiz-fade 520ms var(--ease-out) both; }

/* Nytt spørsmål bygges inn (screen.js, is-entering): teksten glir opp, bildet tones inn, svarene etter
   hverandre (--i). Etterpå lyser svarene opp ett etter ett (is-hinting), og det gjentas til noen svarer. */
.quiz-q.is-entering .quiz-progress, .quiz-q.is-entering .quiz-q-text { animation: quiz-rise 520ms var(--ease-out) both; }
.quiz-q.is-entering .quiz-q-text { animation-delay: 80ms; }
.quiz-q.is-entering .quiz-q-image { animation: quiz-fade 700ms var(--ease-out) 120ms both; }
.quiz-q.is-entering .quiz-answer { animation: quiz-rise 460ms var(--ease-out) both; animation-delay: calc(260ms + var(--i, 0) * 90ms); }
@keyframes quiz-rise { from { opacity: 0; transform: translateY(calc(22 * var(--u))); } }
@keyframes quiz-fade { from { opacity: 0; transform: scale(.985); } }
.quiz-q.is-hinting .quiz-answer:not(:disabled) { animation: quiz-hint 620ms ease-in-out both; animation-delay: calc(var(--i, 0) * 170ms); }
@keyframes quiz-hint {
    50% { border-color: var(--c-cyan-electric); box-shadow: var(--glow-active); background-color: color-mix(in srgb, var(--c-cyan) 14%, var(--surface-inset)); }
}
body.uu .quiz-q.is-hinting .quiz-answer:not(:disabled) { animation-name: quiz-hint-uu; }
@keyframes quiz-hint-uu { 50% { border-color: #ffd400; box-shadow: 0 0 0 3px #ffd400; } }
/* Uten «Videre automatisk»: «Neste» (og «Se resultatet» / «Send svar») pulserer etter 2,5 sekunder, så det
   er tydelig at den må trykkes for å gå videre. Starter når knappen vises (display none → synlig). */
.quiz[data-auto-next="0"] .quiz-feedback:not([hidden]) .quiz-next { animation: quiz-nudge 1.8s ease-in-out 2.5s infinite; }
@keyframes quiz-nudge {
    0%, 100% { scale: 1; }
    40% { scale: 1.07; box-shadow: 0 0 0 calc(9 * var(--u)) color-mix(in srgb, var(--c-teal) 42%, transparent), 0 0 calc(30 * var(--u)) calc(12 * var(--u)) color-mix(in srgb, var(--c-teal-edge) 45%, transparent); }
}
body.uu .quiz[data-auto-next="0"] .quiz-feedback:not([hidden]) .quiz-next { animation-name: quiz-nudge-uu; }
@keyframes quiz-nudge-uu { 0%, 100% { scale: 1; } 40% { scale: 1.07; } }
@media (prefers-reduced-motion: reduce) {
    .quiz-q.is-entering *, .quiz-q.is-hinting .quiz-answer, .quiz-next { animation: none !important; }
}

/* Resultatet: midt i rammen, både bortover og nedover. */
.quiz-result { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 calc(40 * var(--u)); }
.quiz-result > * { max-width: calc(1000 * var(--u)); }
.quiz-result-icon { font-size: calc(96 * var(--u)); color: var(--c-cyan); }
.quiz-result.is-perfect .quiz-result-icon { color: var(--quiz-ok); }
.quiz-score { margin-top: calc(12 * var(--u)); font-size: calc(52 * var(--u)); font-weight: 300; line-height: 1.2; }
.quiz-result-text { margin: calc(18 * var(--u)) 0 0; color: var(--text-label); font-size: calc(25 * var(--u)); line-height: 1.5; }
.quiz-result-text[hidden] { display: none; }
.quiz-result .quiz-next { margin-top: calc(48 * var(--u)); }
.quiz-result .quiz-next[hidden] { display: none; } /* «Prøv igjen»: litt mer luft under teksten */

/* Highscore (quiz_full, data-quiz-hs): resultatet til venstre og listen til høyre når listen finnes i installasjonen.
   Først navnet med skjermtastaturet, så listen med utvalgene (I dag … All time high) og egen oppføring uthevet. */
.quiz-result.has-hs:has(> .quiz-hs:not([hidden])) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-auto-rows: min-content; align-content: center;
    column-gap: calc(60 * var(--u)); justify-items: center;
}
.quiz-result.has-hs:has(> .quiz-hs:not([hidden])) > :not(.quiz-hs) { grid-column: 1; }
.quiz-hs { grid-column: 2; grid-row: 1 / span 6; align-self: center; width: 100%; max-width: calc(760 * var(--u)); text-align: left; }
.quiz-hs[hidden], .quiz-hs-form[hidden], .quiz-hs-board[hidden], .quiz-hs-note[hidden] { display: none; }
.quiz-hs-form { display: flex; flex-direction: column; align-items: stretch; gap: calc(14 * var(--u)); }
.quiz-hs-prompt { font-size: calc(24 * var(--u)); color: var(--text-primary); text-align: center; }
.quiz-hs-field { display: flex; gap: calc(10 * var(--u)); }
.quiz-hs-name {
    flex: 1; min-width: 0; font: inherit; font-size: calc(28 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u));
    color: var(--text-primary); background: var(--surface-inset); border: calc(2 * var(--u)) solid var(--border-card); border-radius: calc(12 * var(--u)); outline: none;
}
.quiz-hs-name:focus { border-color: var(--c-frame-active); }
.quiz-hs-save {
    display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(24 * var(--u)); border: 0; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: calc(20 * var(--u)); font-weight: 600; background: var(--surface-badge); color: var(--text-on-badge); box-shadow: var(--glow-badge);
}
.quiz-hs-save:disabled { opacity: .4; cursor: default; box-shadow: none; }
.quiz-hs-keys { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.quiz-hs-row { display: flex; justify-content: center; gap: calc(8 * var(--u)); }
.quiz-hs-key {
    flex: 0 1 calc(56 * var(--u)); height: calc(58 * var(--u)); min-width: 0; padding: 0; border-radius: calc(10 * var(--u)); cursor: pointer;
    font: inherit; font-size: calc(22 * var(--u)); font-weight: 600; color: var(--text-primary);
    background: var(--surface-inset); border: calc(1.5 * var(--u)) solid var(--border-card);
}
.quiz-hs-key:active { background: color-mix(in srgb, var(--c-frame-active) 30%, var(--surface-inset)); }
.quiz-hs-key.is-wide { flex-basis: calc(96 * var(--u)); }
.quiz-hs-key.is-space { flex-basis: calc(420 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 400; color: var(--text-label); }
.quiz-hs-skip { align-self: center; margin-top: calc(4 * var(--u)); border: 0; background: none; cursor: pointer; font: inherit; font-size: calc(18 * var(--u)); color: var(--text-label); text-decoration: underline; text-underline-offset: .2em; }
.quiz-hs-error { margin: 0; text-align: center; color: var(--quiz-wrong, #ff8a7a); font-size: calc(18 * var(--u)); }
.quiz-hs-head { font-size: calc(30 * var(--u)); font-weight: 600; color: var(--text-primary); text-align: center; }
.quiz-hs-head .bi { color: var(--c-cyan); }
.quiz-hs-note { margin: calc(6 * var(--u)) 0 0; text-align: center; font-size: calc(20 * var(--u)); color: var(--quiz-ok, var(--c-cyan)); }
.quiz-hs-periods { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--u)); margin: calc(16 * var(--u)) 0 calc(14 * var(--u)); }
.quiz-hs-period {
    padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: 999px; cursor: pointer; font: inherit; font-size: calc(17 * var(--u));
    color: var(--text-label); background: transparent; border: calc(1.5 * var(--u)) solid var(--border-card);
}
.quiz-hs-period.is-active { color: var(--text-primary); border-color: var(--c-frame-active); background: color-mix(in srgb, var(--c-frame-active) 18%, var(--surface-inset)); }
.quiz-hs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); font-size: calc(22 * var(--u)); }
.quiz-hs-entry, .quiz-hs-empty { display: flex; align-items: baseline; gap: calc(14 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--surface-inset); }
.quiz-hs-empty { justify-content: center; color: var(--text-label); }
.quiz-hs-entry.is-me { outline: calc(2 * var(--u)) solid var(--c-frame-active); background: color-mix(in srgb, var(--c-frame-active) 22%, var(--surface-inset)); }
.quiz-hs-rank { flex: none; min-width: 2.2em; text-align: right; color: var(--text-label); font-variant-numeric: tabular-nums; }
.quiz-hs-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.quiz-hs-meta { flex: none; color: var(--text-label); font-size: .85em; }
.quiz-hs-score { flex: none; min-width: 3em; text-align: right; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* Smal flate (høykant): listen under resultatet. */
@media (orientation: portrait) { .quiz-result.has-hs:has(> .quiz-hs:not([hidden])) { grid-template-columns: minmax(0, 1fr); } .quiz-hs { grid-column: 1; grid-row: auto; margin-top: calc(30 * var(--u)); } }
body.uu .quiz-hs-key, body.uu .quiz-hs-name, body.uu .quiz-hs-entry { background: #000; border-color: #fff; }
body.uu .quiz-hs-entry.is-me { outline-color: #ffd400; }

/* Høy kontrast: hvit kant, gul markering; riktig/feil også med tegn (ikke bare farge). */
body.uu .quiz { --quiz-ok: #ffd400; --quiz-wrong: #ff9a8a; }
body.uu .quiz-answer { background: #000; border: 2px solid #fff; }
body.uu .quiz-answer.is-correct, body.uu .quiz-answer.is-wrong { background: #000; }
body.uu .quiz-next { background: #ffd400; color: #000; box-shadow: none; }

.param-tip {
    position: fixed; z-index: 60; display: flex; flex-direction: column; gap: calc(6 * var(--u));
    max-width: min(calc(440 * var(--u)), calc(100vw - 20px)); padding: calc(12 * var(--u)) calc(16 * var(--u));
    background: rgba(1, 20, 23, 0.96); border: 1px solid var(--border-card); border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); animation: chart-tip-in 160ms ease-out;
}
.param-tip-name { font-size: calc(17 * var(--u)); font-weight: 500; color: var(--text-primary); }
.param-tip-text { font-size: calc(15 * var(--u)); line-height: 1.45; color: var(--text-label); }
.param-tip-machine { font-size: calc(12 * var(--u)); color: var(--text-muted); }
body.uu .param-tip { background: #000; border-color: #fff; }
body.uu .param-tip-text { color: #fff; }

/* ---------- Spørsmål og svar ---------- */

/* Ruten: teksten og en abstrakt illustrasjon som fyller resten. */
.qa-tile { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.qa-tile-intro { margin: 0 0 calc(12 * var(--u)); color: var(--text-muted); font-size: calc(14 * var(--t)); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
.qa-tile-art { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.qa-tile-art svg { width: 100%; height: 100%; max-height: 100%; overflow: visible; }
.qa-art-a { animation: qa-float 6s ease-in-out infinite; }
@keyframes qa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .qa-art-a { animation: none; } }

/* Spørsmålslisten i fullskjerm: «+» til høyre, «−» på det aktive. */
.qa-question {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    border-bottom: 1.3px solid var(--border-hairline);
    cursor: pointer;
}
.qa-question::after {
    content: "+";
    margin-left: auto;
    flex: none;
    color: var(--text-muted);
    font-size: 1.2em;
    font-weight: 300;
}

/* Fullskjerm i vanlig ramme: kolonnene fyller rammen og scroller hver for seg. */
.overlay-qa .overlay-body { overflow: hidden; font-size: calc(16 * var(--u)); }

.qa {
    display: grid;
    grid-template-columns: calc(440 * var(--u)) minmax(0, 1fr);
    gap: var(--gap);
    height: 100%;
    align-items: start;
}

.qa-panel {
    position: relative;
    padding: calc(24 * var(--u));
    background: var(--surface-inset);
    border: 1.3px solid var(--border-hairline);
    border-radius: var(--radius-inset);
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.qa-questions { overflow: visible; display: flex; flex-direction: column; max-height: 100%; }
.qa-kicker { display: block; margin-bottom: calc(6 * var(--u)); color: var(--text-accent); font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.qa-title { margin: 0 0 calc(20 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 300; line-height: 1.2; }
.qa-intro { margin: calc(-8 * var(--u)) 0 calc(16 * var(--u)); color: var(--text-muted); font-size: calc(14 * var(--u)); line-height: 1.45; }
.qa-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(-24 * var(--u)); padding: 0 calc(24 * var(--u)); }

.qa-question {
    width: 100%;
    padding: calc(20 * var(--u)) 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    background: none;
    text-align: left;
    font-size: calc(18 * var(--u));
    line-height: 1.3;
    color: var(--text-primary);
}
/* Aktivt spørsmål: turkis tekst, «−» og lysende strek ved panelkanten. */
.qa-question.active { color: var(--c-cyan); }
.qa-question.active::after { content: "−"; color: var(--c-cyan); }
.qa-question.active::before {
    content: "";
    position: absolute;
    left: calc(-24 * var(--u));
    top: calc(8 * var(--u));
    bottom: calc(8 * var(--u));
    width: calc(3 * var(--u));
    background: var(--c-cyan);
    box-shadow: 0 0 calc(12 * var(--u)) color-mix(in srgb, var(--c-cyan) 60%, transparent);
}

/* Artikkelen i midten, rett på bakgrunnen. */
.qa-main { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-right: calc(12 * var(--u)); }
.qa-crumb { display: flex; gap: calc(14 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.qa-crumb > span:first-child { color: var(--c-cyan); }
.qa-crumb-sep { color: var(--text-muted); }
.qa-article-title { margin: calc(16 * var(--u)) 0 calc(24 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 300; line-height: 1.2; }
.qa-article-image { margin: 0 0 calc(32 * var(--u)); max-width: calc(640 * var(--u)); }
.qa-article-image img { display: block; width: 100%; max-height: 45vh; object-fit: cover; border-radius: var(--radius-inset); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.qa-article-image figcaption { color: var(--text-muted); font-size: calc(13 * var(--u)); margin-top: calc(8 * var(--u)); }
.qa-article-ingress { max-width: calc(640 * var(--u)); margin: 0 0 calc(24 * var(--u)); font-size: calc(19 * var(--u)); font-weight: 300; line-height: 1.35; }
.qa-article-body { max-width: calc(560 * var(--u)); }
/* Uten «Mer fakta» bruker artikkelen hele bredden (teksten med et lesbart tak). */
.qa-article-body p { margin: 0 0 calc(24 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.35; }
.qa-article-body :is(ul, ol, .fact-box) { margin-bottom: calc(24 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.35; }
.qa-article-body .fact-box p { margin: 0; }
.qa-article-body .article-subtitle { font-size: calc(19 * var(--u)); }

/* «Mer fakta» til høyre. */
.qa-more-list { list-style: none; margin: 0; padding: 0; }
.qa-more-list li { border-bottom: 1.3px solid var(--border-hairline); }
.qa-more-list button {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    width: 100%;
    padding: calc(18 * var(--u)) 0;
    border: 0;
    background: none;
    text-align: left;
    font-size: calc(14 * var(--u));
    line-height: 1.3;
    cursor: pointer;
}
.qa-more-list button::after { content: "›"; margin-left: auto; color: var(--text-accent); font-size: calc(20 * var(--u)); }

@media (orientation: portrait) {
    .qa { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; overflow-y: auto; }
    .qa-main { height: auto; overflow: visible; }
}

/* ---------- Artikkel i lesevisning («Spørsmål og svar»: article_reader.php) ----------
   Teksten i en lesbar kolonne; bildene (mindre) og «Mer fakta» i en kolonne til høyre, like
   bred som spørsmålskolonnen. Uten bilder og relaterte artikler: bare teksten, sentrert bredde. */
.reader {
    --reader-side: calc(440 * var(--u));
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--reader-side);
    gap: calc(40 * var(--u));
    align-items: start;
}
.reader.reader-no-side { grid-template-columns: minmax(0, calc(900 * var(--u))); }
.reader-text { min-width: 0; }
.reader .qa-article-ingress, .reader .qa-article-body { max-width: calc(820 * var(--u)); }
.reader-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: calc(20 * var(--u)); min-width: 0; }
.reader-gallery { position: static; }
.reader-gallery .gallery-main :is(img, video) { max-height: 36vh; object-fit: cover; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); }
.reader-gallery .gallery-thumb img { width: calc(72 * var(--u)); }
/* «Mer fakta»: tydelig avgrenset boks, bare når det finnes relaterte artikler. */
.reader-related {
    padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(6 * var(--u));
    border: 1.3px solid var(--border-card);
    border-radius: var(--radius-inset);
    background: color-mix(in srgb, var(--c-teal) 10%, transparent);
}
.reader-related-title { margin: 0 0 calc(6 * var(--u)); color: var(--text-accent); font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.reader-related .qa-more-list li:last-child { border-bottom: 0; }

@media (orientation: portrait) {
    .reader { grid-template-columns: minmax(0, 1fr); }
    .reader-side { position: static; }
}

/* Fullskjerm uten tittel («Skjul tittelen i fullskjerm»): tittelen står ikke i rammens topp. */
.overlay-notitle .overlay-title { visibility: hidden; }
.overlay-notitle .overlay-head { padding-top: 0; }
.overlay-notitle .overlay-title { height: 0; }
/* Uten tittel: knappene i tittelraden (f.eks. «Til startsiden», «Til galleriet») står på rammens kant,
   til venstre for lukkeknappen (top/right som .overlay-close: 20 + 44 bred + 12 luft). */
.overlay-notitle:not(.has-nav, .overlay-website-fill) .overlay-actions { position: absolute; top: calc(-22 * var(--u) - var(--frame-shift)); right: calc(76 * var(--u)); z-index: 2; height: calc(44 * var(--u)); }

/* Paneler som kan rulle («Spørsmål og svar»): rammen tegnes med outline, og høyre kant
   og topp/bunn er brede, usynlige borders, så rullefeltet står et stykke inn fra rammen (som i
   fullskjerm ellers).
   Bakgrunnen går under den usynlige kanten; innholdet får samme luft som før. */
.qa-panel {
    border-color: transparent;
    border-width: calc(10 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)) 1.3px;
    outline: 1.3px solid var(--border-hairline);
    outline-offset: -1.3px;
}

.qa-panel { padding: calc(14 * var(--u)) calc(13 * var(--u)) calc(14 * var(--u)) calc(24 * var(--u)); }

/* ---------- Posisjon (kart) ---------- */

/* Ruten (som «Din plassering» i designet): kartet fyller hele panelet, uten toning; tittelen og stedet har en tynn
   glorie i bakgrunnens farge, så de leses over kartet (som stedsnavnene i det). */
.tile-position .tile-body { position: static; overflow: visible; }
.position-map, .position-map.maplibregl-map { position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; pointer-events: none; } /* MapLibre setter ellers position: relative */
.tile-position .tile-head, .position-tile { position: relative; z-index: 2; }
body:not(.uu) :is(.tile-position .tile-title, .position-place) {
    text-shadow: 0 0 calc(3 * var(--u)) var(--c-night), 0 0 calc(8 * var(--u)) var(--c-night), 0 0 calc(14 * var(--u)) color-mix(in srgb, var(--c-night) 70%, transparent);
}
.position-tile { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; pointer-events: none; }
.position-place { margin: 0; font-size: calc(14 * var(--t)); font-weight: 700; }
.position-place:empty { display: none; }

/* «Her er du»: lysende, pulserende prikk */
.map-here { position: relative; width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.map-here-dot {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--c-cyan);
    border: 2px solid #fff;
    box-shadow: 0 0 calc(14 * var(--u)) color-mix(in srgb, var(--c-cyan) 90%, transparent);
}
.map-here-pulse {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-cyan) 50%, transparent);
    animation: map-pulse 2.2s ease-out infinite;
}
@keyframes map-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-here-pulse { animation: none; } }
/* Posisjonen er ikke oppdatert på en stund: prikken står stille og dempet. */
.map-here.is-stale .map-here-pulse { display: none; }
.map-here.is-stale .map-here-dot { opacity: .6; }
/* Merker i fullskjermkartet: uten nett, og sist kjente posisjon. Dempet, oppe til venstre. */
.map-notes { position: absolute; top: calc(16 * var(--u)); left: calc(16 * var(--u)); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u)); pointer-events: none; }
.map-note { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: color-mix(in srgb, var(--c-abyss-deep) 78%, transparent); border: 1px solid var(--border-hairline); color: var(--text-label); font-size: calc(15 * var(--u)); }
.map-note[hidden], .map-offline-note { display: none; }
body.is-offline .map-offline-note { display: inline-flex; }
body.uu .map-note { background: #000; border: 2px solid #fff; color: #fff; }

/* Kildehenvisning (påkrevd) i designets farger */
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib.maplibregl-compact { background: color-mix(in srgb, var(--c-abyss-deep) 60%, transparent) !important; color: var(--text-muted); font-size: 10px; }
.maplibregl-ctrl-attrib a { color: var(--text-label); pointer-events: none; } /* aldri navigere bort fra skjermen */
.maplibregl-ctrl-attrib-button { filter: invert(1); opacity: .6; }

/* Fullskjerm: kartet fyller rammen, knapper oppe til høyre */
/* Nettside: ruten viser navnet på nettstedet; fullskjerm viser siden i en ramme (screen.js, data-website). */
.website-tile { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
/* Nederst: navnet på nettstedet med pil. */
.website-tile-foot { margin-top: auto; padding-top: calc(10 * var(--u)); }
/* Tavle (BoardWidget): teksten under tittelen og «Åpne» nederst, med vannmerke (.tile-mark). */
.board-tile { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.board-tile-open { margin-top: auto; padding-top: calc(10 * var(--u)); }
/* Vannmerke (nettside: klode, quiz: spørsmålstegn/utropstegn, tavle: rutenett): stort, svakt symbol som går ut over hjørnet
   nede til høyre, klippet av rammen (ikke «+» i hjørnet). Ikke uten ramme og i høy kontrast. */
.tile-website .tile-body, .tile-quiz .tile-body, .tile-board .tile-body { position: static; }
.tile-mark { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius); pointer-events: none; }
.tile-mark .bi { position: absolute; right: calc(-34 * var(--u)); bottom: calc(-46 * var(--u)); font-size: min(calc(230 * var(--u)), 80cqh); line-height: 1; color: var(--c-frame-glow); opacity: .09; } /* rammens farge, som gløden */
body.uu .tile-mark, body:not(.uu) .tile-frameless .tile-mark { display: none; }
/* Navnet på nettstedet nederst, som «Start quiz» (åpner en annen løsning). */
.website-tile-name { overflow-wrap: anywhere; white-space: normal; }
.website-full { position: relative; height: 100%; container-type: size; display: flex; align-items: center; justify-content: center; }
.website-frame { position: absolute; inset: 0; border-radius: var(--radius-inset); overflow: hidden; background: #fff; }
/* 16:9: så stor som rammen tillater, sentrert. */
.website-full.is-16x9 .website-frame { position: relative; inset: auto; width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; }
.website-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Over hele skjermen: også over topplinjen og knappene (under QR-vinduet og de runde hjørnene).
   Tittelraden blir et hjørne øverst til høyre med bare lukkeknappen, på en toning som går over i siden.
   Alltid svart bak (feltene rundt 16:9), også når «Skjul ramme og bakgrunn i fullskjerm» er valgt.
   inset og background med !important: ellers vinner plasseringen under topplinjen og over knappelinjen
   nederst, og den gjennomsiktige bakgrunnen uten ramme. */
.overlay.overlay-website-fill {
    inset: 0 !important;
    z-index: 40;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #000 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.overlay-website-fill .overlay-head {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: calc(180 * var(--u));
    height: calc(140 * var(--u));
    padding: 0;
    pointer-events: none; /* siden under kan brukes helt opp i hjørnet, unntatt selve knappen */
    background: radial-gradient(ellipse farthest-side at 100% 0, color-mix(in srgb, var(--c-abyss-deep) 82%, transparent) 0, color-mix(in srgb, var(--c-abyss-deep) 55%, transparent) 38%, color-mix(in srgb, var(--c-abyss-deep) 18%, transparent) 70%, transparent 100%); /* ellipse: helt borte ved kantene */
}
.overlay-website-fill .overlay-head > :not(.overlay-close, .overlay-actions, .overlay-back) { display: none; }
/* Åpnet fra en meny: tilbake som pil oppe i venstre hjørne av skjermen (som lukk i høyre). */
.overlay-website-fill.overlay-back-corner .overlay-back { position: fixed; top: calc(22 * var(--u)); left: calc(22 * var(--u)); pointer-events: auto; }
/* Samme toning bak tilbake-pilen som bak lukk, speilet mot venstre hjørne. */
.overlay-website-fill.overlay-back-corner .overlay-head::before {
    content: ""; position: fixed; top: 0; left: 0; width: calc(180 * var(--u)); height: calc(140 * var(--u)); pointer-events: none;
    background: radial-gradient(ellipse farthest-side at 0 0, color-mix(in srgb, var(--c-abyss-deep) 82%, transparent) 0, color-mix(in srgb, var(--c-abyss-deep) 55%, transparent) 38%, color-mix(in srgb, var(--c-abyss-deep) 18%, transparent) 70%, transparent 100%);
}
body.uu .overlay-website-fill.overlay-back-corner .overlay-head::before { background: radial-gradient(ellipse farthest-side at 0 0, #000 0, #000 50%, transparent 100%); }
.overlay-website-fill .overlay-actions { position: absolute; top: calc(22 * var(--u)); right: calc(78 * var(--u)); height: calc(44 * var(--u)); pointer-events: auto; }
.overlay-website-fill .overlay-head:has(.website-home:not([hidden])) { width: calc(440 * var(--u)); height: calc(170 * var(--u)); }
.overlay-website-fill .overlay-head:has(.website-back:not([hidden])) { width: calc(600 * var(--u)); }
.overlay-website-fill .overlay-close { top: calc(22 * var(--u)); right: calc(22 * var(--u)); pointer-events: auto; }
.overlay-website-fill .overlay-body, body.is-single .overlay.overlay-website-fill:not(.has-nav) .overlay-body { margin: 0; padding: 0; overflow: hidden; }
.overlay-website-fill .website-frame { border-radius: 0; }
body.uu .overlay-website-fill .overlay-head { background: radial-gradient(ellipse farthest-side at 100% 0, #000 0, #000 50%, transparent 100%); }
/* «Til startsiden»: i tittelraden ved lukkeknappen, eller i hjørnet når widgeten er hele tavlen. */
.website-home {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    height: calc(44 * var(--u));
    padding: 0 calc(18 * var(--u));
    /* Samme glød som lukk og tilbake, men mørk som valgknappene (kontrast, språk), så den skiller seg fra dem. */
    border: 1.3px solid var(--border-toggle);
    border-radius: 999px;
    background: var(--surface-toggle);
    box-shadow: var(--glow-badge);
    color: var(--text-label);
    font: inherit;
    font-size: calc(16 * var(--u));
    white-space: nowrap;
    cursor: pointer;
}
.website-home[hidden] { display: none; }
body.uu .website-home { background: #000; border-color: #fff; color: #fff; box-shadow: none; }
.website-home:active { transform: scale(.94); }
.website-full > .website-home { position: absolute; top: calc(16 * var(--u)); right: calc(16 * var(--u)); z-index: 2; }
/* Uten nett (screen.js): nettside-widgetene dempes, får «Offline» og kan ikke åpnes. */
.website-offline { cursor: default; }
.website-offline > :not(.offline-badge) { opacity: .45; }
.tile.website-offline::after { display: none; }
.tile.website-offline:active, .website-offline:active { transform: none; }
.offline-badge {
    display: inline-flex; align-items: center; gap: calc(6 * var(--u));
    padding: calc(4 * var(--u)) calc(12 * var(--u));
    border: 1px solid var(--border-hairline); border-radius: 999px;
    background: var(--surface-toggle); color: var(--text-label);
    font-size: calc(13 * var(--u)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.offline-badge[hidden] { display: none; }
.tile > .offline-badge { position: absolute; top: calc(14 * var(--u)); right: calc(14 * var(--u)); z-index: 6; }
/* I menyen i fullskjerm: merket erstatter «+» (ringen inne i hjørnet), på samme plass. */
body .shortcut-board .tile.shortcut-sub.website-offline::after { display: none; }
.shortcut-board .tile.shortcut-sub > .offline-badge { top: calc(12 * var(--u)); right: calc(12 * var(--u)); }
/* Menyvalg i ruten: valget står, men dempet, og pilen er byttet med offline-ikonet (uten tekst). */
li.website-offline > .shortcut-arrow { display: none; }
li.website-offline > .offline-badge { margin-left: auto; padding: 0 0 0 calc(8 * var(--u)); border: 0; background: none; color: var(--text-muted); font-size: calc(16 * var(--t)); }
li.website-offline > .offline-badge .offline-badge-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* skjermlesere: «Offline» */
body.uu .offline-badge { background: #000; border: 2px solid #fff; color: #fff; }
/* En åpen nettside uten nett: melding over rammen. */
.website-offline-cover {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--u));
    background: var(--surface-toggle); color: var(--text-label); text-align: center; padding: var(--card-pad); /* tett: siden bak skal ikke synes */
}
.website-offline-cover[hidden] { display: none; }
.website-offline-cover .bi { font-size: calc(48 * var(--u)); color: var(--text-muted); }
.website-offline-cover span { font-size: calc(22 * var(--u)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.website-offline-cover small { font-size: calc(17 * var(--u)); color: var(--text-muted); }
body.uu .website-offline-cover { background: #000; color: #fff; }
/* Hele tavlen (knappene står i hjørnet av siden): «Tilbake» til venstre for «Til startsiden». */
.website-full > .website-back { right: auto; left: calc(16 * var(--u)); }
.focus-sink { position: fixed; width: 1px; height: 1px; overflow: hidden; outline: none; opacity: 0; pointer-events: none; }

.position-full { position: relative; height: 100%; }
.position-full-map, .position-full-map.maplibregl-map { position: absolute; inset: 0; border-radius: var(--radius-inset); overflow: hidden; }
.position-btn .bi { font-size: calc(24 * var(--u)); }
.position-controls { position: absolute; top: calc(16 * var(--u)); right: calc(16 * var(--u)); z-index: 2; display: flex; flex-direction: column; gap: calc(10 * var(--u)); align-items: flex-end; }
.position-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(56 * var(--u)); /* zoom inn, zoom ut og «Her er du» (trådkors) like store */
    height: calc(56 * var(--u));
    padding: 0;
    border: 1.3px solid var(--border-toggle);
    border-radius: calc(8 * var(--u));
    background: var(--surface-toggle);
    color: var(--c-cyan-electric);
    box-shadow: 0 0 calc(10 * var(--u)) color-mix(in srgb, var(--c-teal) 45%, transparent);
    font-size: calc(26 * var(--u));
    font-weight: 300;
    cursor: pointer;
}

/* Skjermene (ikke forhåndsvisning fra admin): ingen musepeker, heller ikke over knapper og lenker. */
.hide-cursor, .hide-cursor * { cursor: none !important; }

/* Visning inne i en spilleliste: ingen berøring (spilleren styrer, skjermen er passiv). */
body.is-embedded { pointer-events: none; cursor: none; }

body.is-embedded .tile:not(.tile-static)::after { display: none; }
body.is-embedded .qr-link { color: inherit; text-decoration: none; }
body.is-embedded .qr-link::after { display: none; }

/* Ren visningsskjerm (tavlen uten berøring, layouts.touch = 0): som inne i en spilleliste, ingen berøring. */
body.is-display-only { pointer-events: none; cursor: none; }
body.is-display-only .qr-link { color: inherit; text-decoration: none; }
body.is-display-only .qr-link::after { display: none; }

/* Uten rammer og titler (layouts.frames = 0): innholdet fyller rutene, uten kort, kant, mellomrom, avrunding,
   titler og logoen øverst (vanlig utseende for infoskjermer, f.eks. video til venstre og avganger til høyre). */
body.no-frames { --radius: 0px; --radius-inset: 0px; }
body.no-frames .screen { padding: 0; gap: 0; }
body.no-frames .screen-header { display: none; }
body.no-frames .tiles, body.no-frames .tile-row { gap: 0; }
body.no-frames .tile, body.no-frames.uu .tile { margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.no-frames .tile-head { display: none; }

/* «Én widget i fullskjerm»: widgeten er åpen hele tiden; ingen lukkeknapp, og rutene under vises ikke. */
body.is-single .overlay-close { display: none; }
/* Kartet: ingen zoom- eller «Her er du»-knapper. Det kan dras og knipes på berøringsskjerm, og går
   selv tilbake til skjermens posisjon etter inaktivitet (screen.js, mapHome). */
body.is-single .position-controls { display: none; }
/* Widgeten er selve tavlen: ingen tittel og ingen kant, innholdet fyller flaten under topplinjen.
   Toppen vises bare når den har navigasjon (artikkel i en artikkelliste, widget i en snarvei). */
body.is-single .overlay { border-color: transparent; box-shadow: none; animation: none; }
body.is-single .overlay:not(.has-nav) .overlay-head { display: none; }
/* En widget åpnet fra den ene widgeten (f.eks. en meny som er hele tavlen): vanlig tittelrad med lukk. */
body.is-single .overlay.overlay-child:not(.overlay-website-fill) { border-color: var(--border-card); box-shadow: var(--glow-card); }
body.is-single .overlay.overlay-child .overlay-head { display: flex; }
body.is-single .overlay.overlay-child .overlay-close { display: block; }
body.is-single .overlay.overlay-child:not(.has-nav, .overlay-website-fill) .overlay-body { padding-top: calc(28 * var(--u)); }
body.is-single .overlay:not(.has-nav) .overlay-body { padding-top: var(--card-pad); }
.single-title { display: none; }
body.is-single .single-title { display: block; margin: 0 0 calc(16 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; }
body.is-single .tiles { visibility: hidden; }
body.is-single .screen-brand { cursor: default; }

/* Forhåndsvisning i admin: merke i hjørnet, så den ikke forveksles med en ekte skjerm. */
.preview-badge { position: fixed; left: 12px; bottom: 12px; z-index: 10000; padding: 4px 10px; border-radius: 4px; background: rgba(0, 0, 0, .65); color: #fff; font: 600 12px/1.3 system-ui, sans-serif; letter-spacing: .02em; pointer-events: none; }

/* ---------- Bildegalleri (GalleryWidget) ---------- */

/* Ruten: bildene fyller hele panelet (som kartet) og avløser hverandre med myk
   overgang (screen.js). Bildene får designets fargeskala: gråtoner farget i
   petrol/turkis, med toning øverst (bak tittelen) og nederst, som kartet.
   I fullskjerm vises bildene i sine egne farger. */
.tile-gallery .tile-body { position: static; overflow: visible; justify-content: flex-end; }
.tile-gallery .tile-head { position: relative; z-index: 3; }
.mgallery-tile {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    overflow: hidden;
    pointer-events: none; /* gjennomsiktig: skjermens videobakgrunn synes svakt gjennom bildene */
}
.mgallery-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: grayscale(0.35) contrast(1.05) brightness(0.9);
    /* Svært rolig overgang, så ruten ikke tar oppmerksomheten fra resten av skjermen. */
    transition: opacity 3.5s ease-in-out;
}
.mgallery-tile img.active { opacity: 0.5; }
/* «Ken Burns»: sakte zoom og glid i tilfeldig retning (screen.js setter --kb-*). */
.mgallery-tile img.kb { animation: mgallery-kb var(--kb-dur, 15s) linear forwards; }
.mgallery-tile img.kb-loop { animation: mgallery-kb var(--kb-dur, 24s) ease-in-out infinite alternate; }
@keyframes mgallery-kb {
    from { transform: translate(var(--kb-x0, 0), var(--kb-y0, 0)) scale(var(--kb-s0, 1.06)); }
    to   { transform: translate(var(--kb-x1, 0), var(--kb-y1, 0)) scale(var(--kb-s1, 1.16)); }
}
@media (prefers-reduced-motion: reduce) {
    .mgallery-tile img.kb, .mgallery-tile img.kb-loop { animation: none; }
}
/* Farge: gråtonene får designets farge (blandingsmodus «color»), eller en egen (Galleri, «Fargetone», --gallery-tint-*
   på ruten). Gråtoner: helt grå, uten fargetone. Ekte farger: bildenes egne farger, tydeligere. */
.mgallery-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(160deg, var(--gallery-tint-1) 0%, var(--gallery-tint-2) 55%, var(--gallery-tint-3) 100%);
    mix-blend-mode: color;
    opacity: 0.35; /* svak fargetone; bildets egne farger skimtes */
}
.mgallery-tone-gray::before, .mgallery-tone-real::before { display: none; }
.mgallery-tone-gray img { filter: grayscale(1) contrast(1.05) brightness(0.9); }
.mgallery-tone-real img { filter: brightness(0.92); }
.mgallery-tone-real img.active { opacity: 0.8; }
/* Toning bak tittelen og nederst, som kartet. */
.mgallery-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-night) 55%, transparent) 0%, color-mix(in srgb, var(--c-night) 0%, transparent) 34%, color-mix(in srgb, var(--c-night) 0%, transparent) 58%, color-mix(in srgb, var(--c-night) 70%, transparent) 100%);
}
/* Medieelement (Widgets\MediaWidget): bildet eller videoen fyller ruten i sine egne farger, med en svak
   toning bak tittelen og teksten. «Vis hele»: hele bildet, med mørke kanter. Trykk: over hele skjermen. */
.tile-media .tile-body { position: static; overflow: visible; justify-content: flex-end; }
.tile-media .tile-head { position: relative; z-index: 3; }
.media-tile {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    overflow: hidden;
    pointer-events: none;
    background: rgba(2, 14, 20, 0.6);
}
.media-tile :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.media-tile-contain :is(img, video) { object-fit: contain; }
.media-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-night) 50%, transparent) 0%, color-mix(in srgb, var(--c-night) 0%, transparent) 26%, color-mix(in srgb, var(--c-night) 0%, transparent) 62%, color-mix(in srgb, var(--c-night) 60%, transparent) 100%);
}
.tile-media.tile-notitle .media-tile::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c-night) 0%, transparent) 62%, color-mix(in srgb, var(--c-night) 60%, transparent) 100%); }
.media-tile-badge {
    position: absolute;
    right: calc(14 * var(--u));
    bottom: calc(14 * var(--u));
    z-index: 1;
    padding: calc(4 * var(--u)) calc(10 * var(--u));
    border-radius: 999px;
    background: rgba(4, 18, 28, 0.7);
}
.media-tile-text { position: relative; z-index: 3; margin: 0; padding-right: calc(60 * var(--u)); }

/* Beskrivelsen nederst i ruten (ikke i fullskjerm), med plass til antallet i hjørnet. */
.mgallery-tile-text {
    position: relative;
    z-index: 3;
    margin: 0;
    padding-right: calc(60 * var(--u));
}
/* Teksten nederst i galleriruten: samme faste størrelse som overskriften har
   (følger ikke --tile-scale), inntil fem linjer, og teller ikke når ruten krympes (screen.js). */
.mgallery-tile-text, .media-tile-text {
    font-size: calc(11.5 * var(--u) * var(--text-scale));
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mgallery-tile-empty {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    font-size: calc(48 * var(--u)); color: var(--text-muted);
}
.mgallery-tile-count {
    position: absolute;
    right: calc(14 * var(--u));
    bottom: calc(14 * var(--u));
    z-index: 3;
    display: flex;
    gap: calc(10 * var(--u));
    padding: calc(4 * var(--u)) calc(10 * var(--u));
    border-radius: 999px;
    background: rgba(4, 18, 28, 0.7);
    font-size: calc(14 * var(--u));
    color: #fff;
}

/* Fullskjerm: fyller rammen (overlay-qa), rutenettet scroller selv. */
.mgallery { position: relative; height: 100%; }
.mgallery-grid {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(240 * var(--u)), 1fr));
    grid-auto-rows: calc(170 * var(--u));
    gap: calc(14 * var(--u));
    align-content: start;
}
.mgallery-thumb {
    position: relative;
    padding: 0;
    border: 1.3px solid var(--border-card);
    border-radius: calc(var(--radius) * .6);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
.mgallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgallery-thumb:active { transform: scale(.98); }
.mgallery-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(46 * var(--u));
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Visningen av én fil: stort bilde øverst, og (med knapper / fra galleriet) en rad med miniatyrer under. */
.mgallery-view { position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.mgallery-view[hidden] { display: none; }
.mgallery-stage { position: relative; flex: 1; min-height: 0; border-radius: calc(var(--radius) * .6); overflow: hidden; background: rgba(0, 0, 0, 0.35); }
.mgallery-view:not(.is-auto) .mgallery-slide { cursor: zoom-in; } /* trykk forstørrer */
.mgallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 900ms var(--ease-out), visibility 0s linear 900ms;
}
.mgallery-slide.active { opacity: 1; visibility: visible; transition: opacity 900ms var(--ease-out); }
.mgallery-slide img, .mgallery-slide video { width: 100%; height: 100%; display: block; object-fit: contain; }
.mgallery-fit-cover .mgallery-slide img, .mgallery-fit-cover .mgallery-slide video { object-fit: cover; }

.mgallery-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: calc(72 * var(--u));
    height: calc(72 * var(--u));
    margin-top: calc(-36 * var(--u));
    border: 0;
    border-radius: 50%;
    background: rgba(4, 18, 28, 0.6);
    color: #fff;
    font-size: calc(32 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glow-frame-badge); /* rammens farge, som knappene på rammekanten */
}
.mgallery-nav:active { transform: scale(.94); }
.mgallery-prev { left: calc(18 * var(--u)); }
.mgallery-next { right: calc(18 * var(--u)); }

.mgallery-back {
    flex: none;
    padding: calc(10 * var(--u)) calc(16 * var(--u));
    border-radius: 999px;
    background: rgba(4, 18, 28, 0.7);
    color: #fff;
    font-size: calc(16 * var(--u));
    border: 0;
    cursor: pointer;
}

/* Raden med miniatyrer: den som vises er markert (forrige/neste finnes bare i forstørret visning). */
.mgallery-strip { flex: none; display: flex; align-items: center; gap: calc(12 * var(--u)); }
.mgallery-strip[hidden] { display: none; }
.mgallery-strip-thumbs {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: calc(10 * var(--u));
    padding: calc(4 * var(--u)) 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.mgallery-strip-thumbs::-webkit-scrollbar { display: none; }
.mgallery-strip-thumb {
    position: relative;
    flex: none;
    width: calc(120 * var(--u));
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 2px solid transparent;
    border-radius: calc(8 * var(--u));
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
/* Sentrert; auto-marger (ikke justify-content) så starten ikke kuttes når raden ruller. */
.mgallery-strip-thumb:first-child { margin-left: auto; }
.mgallery-strip-thumb:last-child { margin-right: auto; }
.mgallery-strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgallery-strip-thumb .mgallery-thumb-play { font-size: calc(28 * var(--u)); }
.mgallery-strip-thumb.active { opacity: 1; border-color: var(--c-cyan); box-shadow: var(--glow-active); }

/* Prikker: hvor mange filer, og hvilken som vises (automatisk presentasjon og forstørret bilde). */
.mgallery-indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(18 * var(--u));
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(10 * var(--u));
    pointer-events: none;
}
.mgallery-view:not(.is-auto) .mgallery-indicator { display: none; }
.mgallery-dot {
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    transition: transform 300ms var(--ease-out), background 300ms var(--ease-out);
}
.mgallery-dot.active { background: #fff; transform: scale(1.35); }
.mgallery-indicator-count {
    padding: calc(6 * var(--u)) calc(14 * var(--u));
    border-radius: 999px;
    background: rgba(4, 18, 28, 0.7);
    color: #fff;
    font-size: calc(16 * var(--u));
}
body.uu .mgallery-dot { background: rgba(255, 255, 255, 0.5); }
body.uu .mgallery-dot.active { background: #ffd400; }
body.uu .mgallery-strip-thumb.active { border-color: #ffd400; border-width: 3px; }

/* Forstørret bilde eller video (galleryZoom i screen.js): over hele skjermen, som artikkelbildene,
   med forrige/neste midt på sidene og prikkene nederst. */
.mgallery-zoom-media { position: absolute; inset: 0; overflow: hidden; }
.mgallery-zoom-media img, .mgallery-zoom-media video { width: 100%; height: 100%; display: block; object-fit: contain; }
.mgallery-zoom-media > :is(img, video) { animation: mgallery-zoom-in 700ms var(--ease-out); } /* hvert nytt bilde tones inn */
@keyframes mgallery-zoom-in { from { opacity: 0; } }
.mgallery-zoom .mgallery-indicator { bottom: calc(24 * var(--u)); }
.mgallery-zoom .mgallery-nav[hidden] { display: none; }
.mgallery-zoom figcaption[hidden] { display: none; }
.mgallery-zoom .img-card figcaption { bottom: calc(52 * var(--u)); } /* bildeteksten (artikler) over prikkene */

/* ---------- Nettadresser som QR-koder (text_links + screen.js) ---------- */

/* Ser ut som en lenke, men viser QR-koden i stedet for å åpne siden. */
.qr-link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--c-cyan);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.qr-link::after {
    content: "\f6ae"; /* bi-qr-code */
    font-family: "bootstrap-icons";
    font-size: .8em;
    margin-left: .3em;
    text-decoration: none;
    display: inline-block;
}

.qr-popup {
    position: fixed;
    inset: 0;
    z-index: 50; /* over fullskjermvinduet */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 10, 16, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.qr-popup[hidden] { display: none; }
.qr-card {
    position: relative;
    width: min(calc(420 * var(--u)), 90vw);
    padding: calc(34 * var(--u)) calc(34 * var(--u)) calc(24 * var(--u));
    border-radius: var(--radius);
    background: var(--surface-card);
    border: 1.3px solid var(--border-card);
    box-shadow: var(--glow-card);
    text-align: center;
}
.qr-code {
    background: #fff;
    border-radius: calc(var(--radius) * .5);
    padding: calc(10 * var(--u));
}
.qr-code svg { display: block; width: 100%; height: auto; }
.qr-hint { margin: calc(18 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(18 * var(--u)); }
.qr-url { margin: 0; font-size: calc(15 * var(--u)); color: var(--text-muted); overflow-wrap: anywhere; }
.qr-close {
    position: absolute;
    top: calc(-14 * var(--u));
    right: calc(-14 * var(--u));
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
    border: 0;
    border-radius: 50%;
    background: var(--frame-badge);
    color: var(--text-on-frame);
    font-size: calc(18 * var(--u));
    box-shadow: var(--glow-frame-badge);
}

/* Artikkelbilde i stort format (trykk på hovedbildet i fullskjerm, screen.js): fyller skjermen
   innenfor samme sidemarg som rutenettet (--pad), så det synes at det ligger over noe annet.
   Hele bildet synes (skalert opp eller ned), med bildeteksten nederst og krysset øverst. */
.overlay-body .gallery-main :is(img, video) { cursor: zoom-in; }
.img-popup { background: rgba(0, 6, 10, 0.82); }
.img-card { position: absolute; inset: var(--pad); margin: 0; overflow: hidden; }
/* Zoom i forstørrede bilder (screen.js, ZOOM_IMG): trykk zoomer inn rundt punktet, dra panorerer, nytt trykk zoomer ut. */
:is(.img-card, .mgallery-zoom-media) > img { cursor: zoom-in; transform-origin: 0 0; }
:is(.img-card, .mgallery-zoom-media) > video { cursor: zoom-out; }
:is(.img-card, .mgallery-zoom-media) > img.is-zoomed { cursor: grab; touch-action: none; }
.mgallery-zoom.media-zoom-single .mgallery-indicator { display: none; }
.img-card :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.img-card figcaption {
    position: absolute;
    left: 50%;
    bottom: calc(24 * var(--u));
    transform: translateX(-50%);
    max-width: 80vw;
    padding: calc(8 * var(--u)) calc(16 * var(--u));
    border-radius: var(--radius-inset);
    background: rgba(0, 10, 14, 0.7);
    color: var(--text-label);
    font-size: calc(16 * var(--u));
    text-align: center;
}
/* Lukk for forstørrede bilder og videoer: helt oppe i høyre hjørne av skjermen, samme sted som for en
   nettside over hele skjermen (.overlay-website-fill .overlay-close). */
.img-card .qr-close { position: fixed; top: calc(22 * var(--u)); right: calc(22 * var(--u)); z-index: 2; }

/* ---------- Snarveier (ShortcutWidget) ---------- */

/* Ruten: som artikkellisten, men med widgetens ikon (uten ramme) i stedet for bilde. */
.shortcut-list-tile { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.shortcut-list-tile li {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--u));
    flex: none;
    padding: calc(12 * var(--u)) 0;
    border-bottom: 1.3px solid var(--border-divider);
    cursor: pointer;
}
.shortcut-list-tile li:first-child { padding-top: 0; }
.shortcut-list-tile li:active { background: color-mix(in srgb, var(--c-cyan) 8%, transparent); }
.shortcut-list-tile li > .bi:first-child { flex: none; width: 1.4em; text-align: center; font-size: calc(24 * var(--t)); color: var(--c-cyan); }
.shortcut-title {
    min-width: 0;
    font-size: calc(15 * var(--t));
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shortcut-arrow { margin-left: auto; padding-left: calc(8 * var(--u)); color: var(--text-accent); font-size: calc(14 * var(--t)); flex: none; }
.shortcut-tile-text {
    margin: auto 0 0;
    padding-top: calc(12 * var(--u));
    font-size: calc(11.5 * var(--u) * var(--text-scale));
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Fullskjerm: større kort, som artikkellisten. */
.shortcut-list-full { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(380 * var(--u))), 1fr)); gap: calc(16 * var(--u)); }
/* Menyen i fullskjerm: mini-tavle med widgetenes ruter (samme stil som på tavlen). Kolonner og radhøyde: screen.js (fitGrid). */
.shortcut-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(260 * var(--u))), 1fr)); grid-auto-rows: calc(240 * var(--u)); justify-content: start; align-content: start; gap: calc(18 * var(--u)); }
/* Samme avstand opp til tittelen for alle samlesidene; litt luft over så «+» på menyens ruter ikke kuttes. */
[data-fit-grid] { padding-top: calc(10 * var(--u)); }
.shortcut-board .shortcut-sub { min-width: 0; min-height: 0; height: 100%; cursor: pointer; }
/* Rutene i menyen: nøkterne kort som artiklene i artikkelsamlingen (mørk flate, tynn kant,
   ingen glød), med «+» som en tynn ring inne i hjørnet i stedet for merket på kanten. Gjelder også
   widgets som er uten ramme på tavlen: i menyen ser alle rutene like ut. */
body:not(.uu) .shortcut-board .shortcut-sub {
    margin: 0; /* egen, tynn kant: ikke rammetykkelsen */
    padding: calc(18 * var(--u));
    background: var(--surface-inset);
    border: 1.3px solid var(--border-divider);
    border-radius: var(--radius-inset);
    box-shadow: none;
    text-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body:not(.uu) .shortcut-board .shortcut-sub:active { box-shadow: none; border-color: var(--border-toggle); }
/* Bilde som bakgrunn (galleri, artikkel, quiz, medieelement, kart) og vannmerket: samme avrunding som kortet
   (mindre enn på tavlen), så bildet går helt ut i hjørnene. Litt mindre enn kortets, siden de ligger
   innenfor kanten. Nye lag som fyller ruten med border-radius: var(--radius) må med her. */
body:not(.uu) .shortcut-board .shortcut-sub :is(.mgallery-tile, .tile-mark, .media-tile, .position-map),
body:not(.uu) .shortcut-board .shortcut-sub::after {
    display: block;
    top: calc(12 * var(--u));
    right: calc(12 * var(--u));
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));
    border: 1.3px solid var(--border-toggle);
    background:
        linear-gradient(var(--c-cyan), var(--c-cyan)) center / calc(11 * var(--u)) calc(2 * var(--u)) no-repeat,
        linear-gradient(var(--c-cyan), var(--c-cyan)) center / calc(2 * var(--u)) calc(11 * var(--u)) no-repeat,
        transparent;
    box-shadow: none;
}
.shortcut-board .shortcut-sub .tile-head { padding-right: calc(34 * var(--u)); }
.shortcut-board .shortcut-sub .tile-title { font-size: calc(18 * var(--u) * var(--text-scale)); }
body:not(.uu) .overlay-frameless .shortcut-board .shortcut-sub { border-color: var(--border-card); }
/* Høy kontrast: det gule «+», men inne i hjørnet som i vanlig visning. */
body.uu .shortcut-board .tile.shortcut-sub::after { top: calc(10 * var(--u)); right: calc(10 * var(--u)); }
.shortcut-card {
    display: flex;
    align-items: center;
    gap: calc(18 * var(--u));
    text-align: left;
    color: inherit;
    background: var(--surface-inset);
    border: 1.3px solid var(--border-divider);
    border-radius: var(--radius-inset);
    padding: calc(20 * var(--u)) calc(22 * var(--u));
    cursor: pointer;
}
.shortcut-card:active { transform: scale(.99); }
.shortcut-card > .bi:first-child { flex: none; font-size: calc(34 * var(--u)); color: var(--c-cyan); }
.shortcut-card-title { font-size: calc(20 * var(--u)); font-weight: 300; line-height: 1.25; }
.shortcut-card .shortcut-arrow { font-size: calc(18 * var(--u)); }

/* «‹ Snarveier» i fullskjermvinduets topplinje (åpnet fra snarveiens liste). */
.overlay-back { margin: 0 calc(16 * var(--u)) 0 0; flex: none; }
/* Knapper til høyre for tittelen (f.eks. «Til galleriet»), høyrejustert mot rammen. */
.overlay-actions { flex: none; display: flex; align-items: center; gap: calc(12 * var(--u)); }
.overlay-actions:empty { display: none; }
.overlay-back[hidden] { display: none; }
/* Skjult tittel i fullskjerm (åpnet fra en meny): tilbake er bare en pil, som et merke på rammens kant
   oppe til venstre, i samme stil og høyde som lukkeknappen (.overlay-close). */
.overlay-back-corner .overlay-back {
    position: absolute; top: calc(-22 * var(--u) - var(--frame-shift)); left: calc(20 * var(--u)); z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin: 0; padding: 0;
    border: 0; border-radius: 999px; background: var(--frame-badge); box-shadow: var(--glow-frame-badge);
    color: var(--text-on-frame); font-size: calc(18 * var(--u));
    transition: transform 140ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.overlay-back-corner .overlay-back span { display: none; }
.overlay-back-corner .overlay-back:active { transform: scale(.82); box-shadow: 0 0 0 calc(8 * var(--u)) color-mix(in srgb, var(--frame-badge) 45%, transparent), 0 0 calc(26 * var(--u)) calc(10 * var(--u)) color-mix(in srgb, var(--c-frame-active) 60%, transparent); }
.overlay-back-corner .overlay-back[hidden] { display: none; }

/* ---------- Innmelding med paringskode (screen/pair.php) ---------- */

body.sys { background: var(--sys-bg); color: var(--sys-text); } /* paring, ukjent skjerm og sperresiden */
.pair {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(48 * var(--u));
    padding: var(--pad);
    text-align: left;
}
.pair-brand { font-size: calc(64 * var(--u)); line-height: 1; } /* ordmerket midt over boksen */
.pair-status, .pair-offline { margin: 0; font-size: calc(24 * var(--u)); color: var(--sys-muted); }
.pair-panel {
    display: flex;
    align-items: center;
    gap: calc(56 * var(--u));
    padding: calc(44 * var(--u)) calc(56 * var(--u));
    border-radius: calc(12 * var(--u));
    background: var(--sys-surface);
    border: 1px solid var(--sys-border);
    max-width: 92vw;
}
.pair-panel[hidden], .pair-offline[hidden], .pair-rotate[hidden], [data-pair-wait][hidden] { display: none; }
.pair-qr { flex: none; width: min(calc(300 * var(--u)), 34vw); padding: calc(12 * var(--u)); background: #fff; border-radius: calc(6 * var(--u)); }
.pair-qr svg { display: block; width: 100%; height: auto; }
.pair-title { margin: 0 0 calc(20 * var(--u)); font-size: calc(40 * var(--u)); font-weight: 300; }
.pair-label { margin: 0; color: var(--sys-muted); font-size: calc(18 * var(--u)); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.pair-code { margin: calc(8 * var(--u)) 0 calc(24 * var(--u)); font-family: var(--font-mono); font-size: calc(104 * var(--u)); font-weight: 600; letter-spacing: .08em; color: var(--sys-text); line-height: 1; }
.pair-how { margin: 0; max-width: calc(620 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.5; color: var(--sys-muted); }
.pair-how strong { color: var(--sys-text); font-weight: 500; }
.pair-rotate { margin: 0; font-size: calc(18 * var(--u)); color: var(--sys-muted); }
/* Uten nett før PC-en er koblet til en skjerm, og «Koblet til» rett etter paringen. */
.pair-nonet, .pair-done { max-width: calc(1100 * var(--u)); }
.pair-nonet-icon, .pair-done-icon { flex: none; font-size: calc(120 * var(--u)); line-height: 1; color: var(--sys-text); }
.pair-nonet-text { margin: 0; font-size: calc(24 * var(--u)); line-height: 1.5; color: var(--sys-muted); }
.pair-done-name { margin: 0 0 calc(16 * var(--u)); font-size: calc(44 * var(--u)); font-weight: 500; color: var(--sys-text); }
@media (orientation: portrait) {
    .pair-panel { flex-direction: column; text-align: center; }
}

/* ---------- Knappelinje (kontrast, språk og hjem) ---------- */

/* En fane festet i skjermkanten, midtstilt: mørkere enn rutene, med tynn turkis kant og innbuede
   «skuldre» mot kanten, så den ser ut til å sitte fast. Tavlen velger plassering (data-toolbar):
   - øverst (body.toolbar-at-top): henger fra toppkanten, i den ledige plassen mellom status og
     kontonavn; rutene får hele høyden, og «Hjem» vises ikke (krysset og kontonavnet lukker);
   - nederst: står på bunnkanten, med «Hjem»; rutene og fullskjermvinduet slutter over den. */
.has-toolbar {
    --toolbar-space: calc(78 * var(--u));
    --toolbar-bg: var(--c-toolbar);
    --toolbar-bg-2: var(--c-toolbar-2);
    --toolbar-edge: color-mix(in srgb, var(--c-frame-glow) 35%, transparent);
    --toolbar-r: calc(30 * var(--u));
}
.has-toolbar:not(.toolbar-at-top) .screen { padding-bottom: var(--toolbar-space); }
.has-toolbar:not(.toolbar-at-top) .overlay { bottom: var(--toolbar-space); }
.screen-toolbar {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 30;
    transform: translateX(-50%);
    display: flex;
    padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u));
    background: linear-gradient(0deg, var(--toolbar-bg) 0%, var(--toolbar-bg-2) 100%);
    border: 1.3px solid var(--toolbar-edge);
    border-bottom: 0;
    border-radius: var(--toolbar-r) var(--toolbar-r) 0 0;
    box-shadow: 0 calc(-10 * var(--u)) calc(30 * var(--u)) var(--shadow-deep), var(--glow-toolbar);
}
/* Innbuede skuldre mot skjermkanten på hver side. */
.screen-toolbar::before, .screen-toolbar::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: var(--toolbar-r);
    height: var(--toolbar-r);
    pointer-events: none;
}
.screen-toolbar::before { right: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--toolbar-r) - 1px), var(--toolbar-bg) var(--toolbar-r)); }
.screen-toolbar::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent calc(var(--toolbar-r) - 1px), var(--toolbar-bg) var(--toolbar-r)); }
.toolbar-at-top .screen-toolbar {
    top: 0;
    bottom: auto;
    padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u));
    background: linear-gradient(180deg, var(--toolbar-bg) 0%, var(--toolbar-bg-2) 100%);
    border-top: 0;
    border-bottom: 1.3px solid var(--toolbar-edge);
    border-radius: 0 0 var(--toolbar-r) var(--toolbar-r);
    box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) var(--shadow-deep), var(--glow-toolbar);
}
.toolbar-at-top .screen-toolbar::before, .toolbar-at-top .screen-toolbar::after { top: 0; bottom: auto; }
.toolbar-at-top .screen-toolbar::before { background: radial-gradient(circle at 0 100%, transparent calc(var(--toolbar-r) - 1px), var(--toolbar-bg) var(--toolbar-r)); }
.toolbar-at-top .screen-toolbar::after { background: radial-gradient(circle at 100% 100%, transparent calc(var(--toolbar-r) - 1px), var(--toolbar-bg) var(--toolbar-r)); }
.toolbar-at-top [data-toolbar-home] { display: none !important; }
/* Knappene som én samlet knapp, med tynne skillelinjer (ikke foran den første som vises). */
.screen-toolbar .toolbar-btn + .toolbar-btn { border-left: 1px solid color-mix(in srgb, var(--c-cyan-electric) 18%, transparent); }
.screen-toolbar [data-toolbar-home][hidden] + .toolbar-btn,
.toolbar-at-top .screen-toolbar [data-toolbar-home] + .toolbar-btn { border-left: 0; }
.toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(10 * var(--u));
    height: calc(48 * var(--u));
    padding: 0 calc(22 * var(--u));
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    font-size: calc(17 * var(--u));
    font-weight: 500;
    cursor: pointer;
    transition: transform 140ms var(--ease-out), background-color 160ms var(--ease-out);
}
.toolbar-btn .bi { font-size: calc(22 * var(--u)); }
/* Brødsmulesti (en annen tavle er åpnet, Tavle-widget): forsiden og tavlene på veien, den siste er
   tavlen som vises. Står først i knapperaden, skilt fra knappene med en strek. */
.toolbar-crumbs { display: flex; align-items: center; margin: 0; padding: 0 calc(10 * var(--u)) 0 calc(6 * var(--u)); list-style: none; }
.toolbar-crumbs li { display: flex; align-items: center; }
.screen-toolbar.has-crumbs .toolbar-crumbs ~ .toolbar-btn:not([hidden]) { border-left: 1px solid color-mix(in srgb, var(--c-cyan-electric) 18%, transparent); }
.toolbar-crumb { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); height: calc(48 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: 999px; color: var(--text-accent); font-size: calc(17 * var(--u)); font-weight: 500; text-decoration: none; white-space: nowrap; max-width: calc(260 * var(--u)); }
.toolbar-crumb span { overflow: hidden; text-overflow: ellipsis; }
.toolbar-crumb .bi { font-size: calc(20 * var(--u)); }
.toolbar-crumb:active { transform: scale(.94); }
.toolbar-crumb.is-current { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: calc(48 * var(--u)); }
.toolbar-crumb-sep { color: var(--text-muted); font-size: calc(14 * var(--u)); }
body.uu .toolbar-crumb { color: #ffd400; }
body.uu .toolbar-crumb.is-current { color: #fff; }
.toolbar-btn:active { transform: scale(.94); }
.toolbar-btn[aria-pressed="true"] { background: var(--c-cyan); color: var(--text-on-chip); }

/* ---------- Høy kontrast (UU) ---------- */

/* Slås på med «Kontrast» i knappelinjen, og av igjen etter inaktivitet (neste bruker starter
   i vanlig visning). Svart bakgrunn uten video, hvit tekst, gule tall og markeringer, tykke
   kanter, ingen glass, glød eller bevegelse, og større tekst. */
body.uu {
    --surface-card: #000;
    --surface-inset: #000;
    --surface-toggle: #000;
    --surface-badge: #000;
    --frame-badge: #000;
    --border-card: #fff;
    --border-hairline: rgba(255, 255, 255, 0.5);
    --border-divider: rgba(255, 255, 255, 0.5);
    --border-toggle: #fff;
    --text-primary: #fff;
    --text-label: #fff;
    --text-muted: #fff;
    --text-accent: #ffd400;
    --text-on-chip: #000;
    --c-cyan: #ffd400;
    --c-cyan-dim: #ffd400;
    --c-cyan-electric: #ffd400;
    --c-teal-edge: #fff;
    --c-teal-lit: #ffd400;
    --c-sand: #ffd400;
    --glow-card: none;
    --glow-card-active: none;
    --glow-badge: none;
    --glow-frame-badge: none;
    --glow-active: none;
    --text-scale: 1.5;
    background: #000;
}
body.uu .screen-bg-video { display: none; }
body.uu *, body.uu *::before, body.uu *::after {
    animation: none !important;
    transition: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
}
/* Unntak: tekststripen må rulle for å vise meldingene (rolig og jevnt; står stille med redusert bevegelse). */
@media (prefers-reduced-motion: no-preference) {
    body.uu .ticker-run { animation: ticker-roll var(--ticker-duration, 30s) linear infinite !important; }
}
body.uu .tile, body.uu .overlay { border-width: 3px; border-color: #fff; border-style: solid; }
body.uu .tile { margin: 0; } /* fast tykkelse i høy kontrast */
body.uu .screen-toolbar { border-width: 3px 3px 0; }
body.uu.toolbar-at-top .screen-toolbar { border-width: 0 3px 3px; }
/* Større tekst også i fullskjerm: målene i vinduet skaleres opp. */
body.uu .overlay-head, body.uu .overlay-body { --u: calc(min(calc(100vw / 1920), calc(100vh / 1080)) * 1.2); }
@media (orientation: portrait) {
    body.uu .overlay-head, body.uu .overlay-body { --u: calc(min(calc(100vw / 1080), calc(100vh / 1920)) * 1.2); }
}

/* Kartet: «Her er du» i gult med svart kant (kartfargene byttes i screen.js). */
/* Kart-ruten: uten den blågrønne toningen oppe og nede; tittelen og stedet får i stedet svart
   bakgrunn rett bak teksten (skyggen gir litt luft rundt uten å flytte teksten). */
body.uu .tile-position .tile-title, body.uu .position-place { width: fit-content; max-width: 100%; background: #000; box-shadow: 0 0 0 calc(6 * var(--u)) #000; }
body.uu .map-here-dot { background: #ffd400; border: 3px solid #000; box-shadow: 0 0 0 2px #fff; }
body.uu .map-here-pulse { background: #ffd400; }
/* «+» på rutene og lukkeknappen: gule med svart tegn, så de ikke ser ut som et brudd i kanten. */
body.uu .tile:not(.tile-static)::after {
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
    top: calc(-14 * var(--u));
    background:
        linear-gradient(#000, #000) center / calc(14 * var(--u)) calc(3 * var(--u)) no-repeat,
        linear-gradient(#000, #000) center / calc(3 * var(--u)) calc(14 * var(--u)) no-repeat,
        #ffd400;
}
body.uu .overlay-close, body.uu .qr-close, body.uu .overlay-back-corner .overlay-back { background: #ffd400; color: #000; }
/* Trykk i listene (artikkelsamling, snarveier): lys markering i stedet for turkis. */
body.uu .article-list-tile li:active, body.uu .shortcut-list-tile li:active { background: rgba(255, 255, 255, 0.18); }
/* Trykk på lukk: hvit ring i stedet for den turkise gløden. */
body.uu .overlay-close:active, body.uu .qr-close:active { box-shadow: 0 0 0 calc(5 * var(--u)) #000, 0 0 0 calc(9 * var(--u)) #fff; }
/* QR-koden: bakgrunnen dempes nesten helt (uten uskarphet i kontrastmodus), og kortet får tykk kant. */
body.uu .qr-popup { background: rgba(0, 0, 0, 0.88); }
body.uu .qr-card { border: 3px solid #fff; }

/* ---------- Språkmeny (knappelinjen) ---------- */

/* Åpnes over knappelinjen, høyrestilt mot språkknappen. Store trykkflater. */
.lang-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12 * var(--u));
    display: flex;
    flex-direction: column;
    z-index: 1;
    gap: calc(4 * var(--u));
    min-width: calc(220 * var(--u));
    padding: calc(8 * var(--u));
    background: var(--surface-toggle);
    border: 1.3px solid var(--border-toggle);
    border-radius: calc(18 * var(--u));
    box-shadow: var(--glow-card);
}
.lang-option {
    display: flex;
    align-items: center;
    height: calc(56 * var(--u));
    padding: 0 calc(20 * var(--u));
    border-radius: calc(12 * var(--u));
    color: var(--text-primary);
    font-size: calc(19 * var(--u));
    font-weight: 500;
    text-decoration: none;
}
.lang-option.active { background: var(--c-cyan); color: var(--text-on-chip); }
.lang-option:active { transform: scale(.97); }
body.uu .lang-menu { border: 3px solid #fff; }
/* Knappelinjen øverst: språkmenyen åpnes nedover. */
.toolbar-at-top .lang-menu { top: calc(100% + 12 * var(--u)); bottom: auto; }
body.uu .screen-toolbar { --toolbar-bg: #000; --toolbar-bg-2: #000; --toolbar-edge: #fff; box-shadow: none; }

/* Maskinoversatt innhold som ikke er kontrollert (språk trinn 2): lite, nøytralt merke. */
.machine-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--u));
    margin: 0 0 calc(10 * var(--u));
    padding: calc(3 * var(--u)) calc(10 * var(--u));
    border: 1px solid var(--border-hairline);
    border-radius: 999px;
    color: var(--text-label);
    font-size: calc(13 * var(--u));
}

/* «Maskinoversatt»: ett merke per widget, i tittelraden helt til høyre (innenfor rammens marg),
   på linje med tittelens grunnlinje. */
.overlay-machine {
    flex: none;
    align-self: baseline;
    margin: 0;
    background: var(--surface-toggle);
}
.overlay-machine[hidden] { display: none; }
.overlay-head .overlay-title { align-self: baseline; }
/* Med knapper i tittelraden («Tilbake», «Til startsiden», «Til galleriet»): merket til venstre for dem,
   midt på i høyden, så det ikke klemmes inn mellom knappene og lukkeknappen. */
.overlay-head:has(.overlay-actions:not(:empty)) .overlay-actions { order: 1; }
.overlay-head:has(.overlay-actions:not(:empty)) .overlay-machine { align-self: center; }
/* Uten tittel (og uten sti) er tittelraden uten høyde: merket står da på rammens kant oppe til venstre
   (til høyre for tilbake-pilen når den er der), med tett bakgrunn, i stedet for under lukkeknappen. */
.overlay-notitle:not(.has-nav, .overlay-website-fill) .overlay-machine {
    position: absolute; top: 0; left: calc(20 * var(--u)); z-index: 2;
    transform: translateY(-50%);
}
.overlay-notitle.overlay-back-corner:not(.has-nav, .overlay-website-fill) .overlay-machine { left: calc(76 * var(--u)); }

/* ---------- Fremdrift for video (screen.js, videoProgress) ----------
   Tynn linje nederst i rammen som fylles mens videoen spilles. */
.video-progress { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.video-progress-track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(4 * var(--u));
    background: color-mix(in srgb, var(--c-frame) 28%, transparent); /* sporet: rammefargen, svak (som i Nyheter) */
    overflow: hidden;
}
.video-progress-fill {
    display: block;
    height: 100%;
    background: var(--c-frame-active); /* rammefargen, den lyse varianten (som i Nyheter) */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms linear;
}
.img-card .video-progress-track, .mgallery-zoom-media .video-progress-track { height: calc(6 * var(--u)); }
body.uu .video-progress-fill, body.uu .news-bar { background: #ffd400; }
body.uu :is(.video-progress-track, .news-track) { background: rgba(255, 255, 255, 0.35); }

/* ---------- Overgang mellom tavler (Tavle-widget, brødsmulesti) ----------
   Siden lastes på nytt; Chrome animerer mellom sidene (View Transitions). screen.js slipper den bare
   gjennom ved tavlebytte, med typen forward (et steg innover) eller back (tilbake). Bakgrunnen,
   topplinjen og knapperaden står stille; bare rutenettet glir et lite stykke og tones (som «tilbake»
   i menyene), og et åpent vindu (fra en meny) tones bort. */
@view-transition { navigation: auto; }
.screen-header { view-transition-name: fp-header; }
.tiles { view-transition-name: fp-tiles; }
.screen-toolbar { view-transition-name: fp-toolbar; }
.overlay:not([hidden]) { view-transition-name: fp-overlay; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(fp-header), ::view-transition-group(fp-toolbar) { animation-duration: 200ms; }
/* Knapperaden (brødsmulestien endrer bredden): ingen skalering. Den gamle og den nye står i naturlig
   størrelse, midtstilt, og tones over i hverandre. */
::view-transition-old(fp-toolbar), ::view-transition-new(fp-toolbar) { width: auto; height: auto; left: 50%; translate: -50% 0; }
::view-transition-old(fp-tiles) { animation: fp-vt-out-left 110ms ease-in both; }
::view-transition-new(fp-tiles) { animation: fp-vt-in-right 180ms cubic-bezier(.2, .8, .2, 1) 70ms both; }
html:active-view-transition-type(back)::view-transition-old(fp-tiles) { animation-name: fp-vt-out-right; }
html:active-view-transition-type(back)::view-transition-new(fp-tiles) { animation-name: fp-vt-in-left; }
::view-transition-old(fp-overlay) { animation: fp-vt-fade-out 110ms ease-in both; }
@keyframes fp-vt-out-left { to { opacity: 0; transform: translateX(-1.5%); } }
@keyframes fp-vt-out-right { to { opacity: 0; transform: translateX(1.5%); } }
@keyframes fp-vt-in-right { from { opacity: 0; transform: translateX(1.5%); } }
@keyframes fp-vt-in-left { from { opacity: 0; transform: translateX(-1.5%); } }
@keyframes fp-vt-fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(fp-tiles), ::view-transition-new(fp-tiles) { animation-name: fp-vt-fade-out; animation-duration: 120ms; animation-delay: 0s; }
    ::view-transition-new(fp-tiles) { animation-name: fp-vt-fade-in; }
    @keyframes fp-vt-fade-in { from { opacity: 0; } }
}

/* Lukk tilbake til en meny (screen.js): vinduet krymper inn i kortet sitt, menyen tones fram. Samme
   bevegelse som åpningen fra kortet (zoomFrom), baklengs og litt raskere. */
::view-transition-group(fp-zoom) { animation-duration: 220ms; animation-timing-function: cubic-bezier(.4, 0, .2, 1); z-index: 2; }
/* Bildene står i naturlig forhold øverst til venstre og beskjæres av rammen (ikke strukket); kortet tones
   først inn mot slutten, så det ikke vises forstørret mens rammen ennå er stor. */
::view-transition-image-pair(fp-zoom) { isolation: auto; overflow: hidden; border-radius: var(--radius); }
::view-transition-old(fp-zoom), ::view-transition-new(fp-zoom) { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
::view-transition-old(fp-zoom) { animation: fp-vt-fade-out 170ms ease-in 30ms both; }
::view-transition-new(fp-zoom) { animation: fp-vt-fade-in-z 100ms ease-out 120ms both; }
/* Menyen står fast bak (ingen inntoning): ellers er både vinduet som lukkes og menyens panel halvveis
   gjennomsiktige samtidig, og panelet ser ut til å flimre. */
html:active-view-transition-type(close-to-menu)::view-transition-new(fp-overlay) { animation: none; }
html:active-view-transition-type(close-to-menu)::view-transition-old(fp-overlay) { animation: none; opacity: 0; }
@keyframes fp-vt-fade-in-z { from { opacity: 0; } }
/* Ved lukking til menyen står resten av skjermen helt stille (ikke tavlebyttets overganger av topplinjen,
   knapperaden og rutene, som ellers kryssfades og kan gi flimmer). */
html:active-view-transition-type(close-to-menu)::view-transition-old(fp-header),
html:active-view-transition-type(close-to-menu)::view-transition-old(fp-toolbar),
html:active-view-transition-type(close-to-menu)::view-transition-old(fp-tiles) { animation: none; opacity: 0; }
html:active-view-transition-type(close-to-menu)::view-transition-new(fp-header),
html:active-view-transition-type(close-to-menu)::view-transition-new(fp-toolbar),
html:active-view-transition-type(close-to-menu)::view-transition-new(fp-tiles) { animation: none; }
::view-transition-new(fp-menu), ::view-transition-new(fp-menu-title) { animation: fp-vt-fade-in-z 220ms ease-out 40ms both; }
::view-transition-group(fp-menu), ::view-transition-group(fp-menu-title) { animation: none; }

/* Quiz på høykant (vinduet høyere enn bredt): spørsmålet øverst, bildet under over hele bredden (tar
   plassen som er igjen), og svarene under hverandre i full bredde (to kolonner ved mange alternativer). */
@container (orientation: portrait) {
    .quiz-q.has-image .quiz-q-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: calc(28 * var(--u)); }
    .quiz-q.has-image .quiz-q-image { min-height: 15cqh; }
    .quiz-answers:not(.is-many) { grid-template-columns: minmax(0, 1fr); }
}

/* «Er du fortsatt her?» (screen.js, nettside åpen): midt på skjermen over alt, med nedtelling og en linje
   som krymper. Et trykk hvor som helst avbryter. */
.still-here { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0, 12, 16, 0.55); }
.still-here[hidden] { display: none; }
.still-here-box { position: relative; overflow: hidden; display: grid; justify-items: center; gap: calc(14 * var(--u)); min-width: calc(520 * var(--u)); padding: calc(40 * var(--u)) calc(56 * var(--u)) calc(44 * var(--u)); background: var(--surface-card); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: var(--frame-w) solid var(--border-card); border-radius: var(--radius); box-shadow: var(--glow-card); text-align: center; animation: overlay-in .22s var(--ease-out); }
.still-here-q { margin: 0; font-size: calc(40 * var(--u)); font-weight: 300; }
.still-here-t { margin: 0; color: var(--text-label); font-size: calc(21 * var(--u)); font-variant-numeric: tabular-nums; }
.still-here-btn { margin-top: calc(10 * var(--u)); padding: calc(16 * var(--u)) calc(40 * var(--u)); border: 0; border-radius: 999px; background: var(--surface-badge); box-shadow: var(--glow-badge); color: var(--text-on-badge); font: inherit; font-size: calc(22 * var(--u)); font-weight: 600; cursor: pointer; }
.still-here-btn:active { transform: scale(.95); }
.still-here-bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(4 * var(--u)); background: var(--c-cyan); transform-origin: left; }
.still-here-bar.is-running { animation: still-here-count var(--still-here, 7s) linear forwards; }
@keyframes still-here-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }
body.uu .still-here-box { background: #000; border-color: #fff; box-shadow: none; }
body.uu .still-here-btn { background: #ffd400; color: #000; box-shadow: none; }
body.uu .still-here-bar { background: #ffd400; }
@media (prefers-reduced-motion: reduce) { .still-here-bar.is-running { animation: none; } .still-here-box { animation: none; } }

/* QR-symbol bak tittelen (nettside med «Vis QR-kode»): trykk viser QR-koden (samme vindu som lenker i artikler). */
.title-qr { display: inline-flex; align-items: center; justify-content: center; vertical-align: baseline; margin-left: calc(14 * var(--u)); padding: 0 calc(4 * var(--u)); border: 0; background: none; color: var(--text-muted); font-size: .72em; line-height: 1; cursor: pointer; opacity: .8; transition: color 160ms var(--ease-out), opacity 160ms var(--ease-out); } /* som en del av tittelen: tittelens skriftstørrelse, dempet farge, ingen ramme */
.title-qr:active { transform: scale(.9); color: var(--c-cyan); opacity: 1; }
body.uu .title-qr { color: #ffd400; opacity: 1; }
/* «Widget kan ikke åpnes» i en meny: kortet uten ring/«+» og uten trykk-markør; linjen i menyruten uten pil. */
body .shortcut-board .tile.shortcut-sub.tile-static::after { display: none; }
.shortcut-board .shortcut-sub.tile-static { cursor: default; }
.shortcut-list-tile li.is-static { cursor: default; }

/* ---------- Dvale (screen.js, layouts.idle_playlist_id) ----------
   Spillelisten i en ramme over hele tavlen; et usynlig lag over rammen tar imot første trykk.
   Under avrundede hjørner (9999) og merket «Forhåndsvisning» (10000). */
.idle-overlay { position: fixed; inset: 0; z-index: 9000; background: #000; opacity: 0; transition: opacity 500ms ease; }
.idle-overlay.is-shown { opacity: 1; }
.idle-overlay iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.idle-shield { position: absolute; inset: 0; cursor: pointer; }
.idle-hint {
    position: absolute;
    left: 50%;
    bottom: calc(56 * var(--u));
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .55em 1.3em;
    border-radius: 999px;
    border: 1px solid var(--border-card);
    background: var(--surface-card);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--glow-card);
    color: var(--text-primary);
    font-size: max(calc(26 * var(--u)), 18px);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    animation: idle-hint 2.6s ease-in-out infinite;
}
.idle-hint .bi { color: var(--c-cyan); }
@keyframes idle-hint { 0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .idle-hint { animation: none; } .idle-overlay { transition: none; } }

/* Spilleliste-widgeten (Widgets\PlaylistWidget): spilleren fyller ruten, under tittelen (som Medieelement). */
.tile-playlist .tile-body { position: static; }
.tile-playlist .tile-head { position: relative; z-index: 3; }
.playlist-tile { position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; background: #000; pointer-events: none; }
.playlist-tile iframe { display: block; width: 100%; height: 100%; border: 0; }
body:not(.no-frames) .tile-playlist:not(.tile-notitle) .playlist-tile::after { content: ""; position: absolute; inset: 0 0 auto; height: 30%; background: linear-gradient(180deg, color-mix(in srgb, var(--c-night) 55%, transparent), color-mix(in srgb, var(--c-night) 0%, transparent)); pointer-events: none; }

/* Nettside rett i ruten på en visningsskjerm (website_live): fyller ruten under tittelen, eller hele ruten uten
   rammer. 16:9: sentrert så stor som ruten tillater. */
.website-live { position: relative; flex: 1; min-height: 0; border-radius: var(--radius-inset); overflow: hidden; background: #fff; pointer-events: none; }
.website-live iframe { display: block; width: 100%; height: 100%; border: 0; }
.website-live.is-16x9 { display: grid; place-items: center; background: #000; }
.website-live.is-16x9 iframe { width: 100%; height: auto; max-height: 100%; aspect-ratio: 16 / 9; }
body.no-frames .website-live { position: absolute; inset: 0; border-radius: 0; }

/* Klokke (Widgets\ClockWidget): klokkeslettet så stort ruten tillater (ruten er en container, cq-enheter), datoen under. */
.tile-clock .tile-body { justify-content: center; }
.clock-tile { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqh; text-align: center; }
.clock-time { font-size: min(40cqh, 24cqw); font-weight: 300; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.clock-tile[data-seconds] .clock-time { font-size: min(34cqh, 16cqw); }
.clock-date { font-size: min(9cqh, 6.5cqw); color: var(--text-muted); }
/* Analog: urskiven fyller ruten (med datoen under), viserne i tekstfargen og sekundviseren i aksentfargen. */
.clock-analog { gap: 2cqh; }
.clock-analog .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* klokkeslettet for skjermlesere */
.clock-face { flex: 1; min-height: 0; width: 100%; max-height: 100%; }
.clock-rim { fill: rgba(255, 255, 255, .04); stroke: currentColor; stroke-width: 1.4; opacity: .9; }
.clock-tick { stroke: currentColor; stroke-width: .7; opacity: .45; }
.clock-tick-h { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.clock-hand-h { stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; }
.clock-hand-m { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.clock-hand-s { stroke: var(--text-accent); stroke-width: 1; stroke-linecap: round; }
.clock-pin { fill: var(--text-accent); }
.clock-analog .clock-date { flex: none; font-size: min(7cqh, 5cqw); }
/* Verdensklokke: byene i et rutenett (klokkeslettet stort, «i morgen»/«i går» under). */
.clock-world { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); align-content: center; gap: 4cqh 3cqw; text-align: center; }
.clock-city { display: flex; flex-direction: column; align-items: center; gap: .15em; min-width: 0; font-size: min(7cqh, 4cqw); }
.clock-city-name { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.clock-city-time { font-size: 2.6em; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.clock-city-day { min-height: 1.2em; font-size: .8em; color: var(--text-accent); }
/* Åpningstid: Åpent (aksentfarge) eller Stengt stort, når det stenger eller åpner under, og eventuelt uken. */
.clock-opening { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqh; text-align: center; }
.clock-opening-state { font-size: min(26cqh, 14cqw); font-weight: 600; line-height: 1; color: var(--text-muted); }
.clock-opening.is-open .clock-opening-state { color: var(--text-accent); }
.clock-opening-next { font-size: min(9cqh, 5.5cqw); }
.clock-opening-week:empty { display: none; }
.clock-opening-week { margin-top: 2cqh; display: grid; grid-template-columns: auto auto; gap: .2em 2em; font-size: min(6cqh, 4cqw); font-variant-numeric: tabular-nums; }
.clock-opening-day { display: contents; color: var(--text-muted); }
.clock-opening-day > span:first-child { text-align: left; }
.clock-opening-day > span:last-child { text-align: right; }
.clock-opening-day.is-today { color: inherit; font-weight: 600; }


/* Vær (Widgets\WeatherWidget): nå (ikon, temperatur, sted, vind og nedbør) og en rad med timer eller dager.
   I ruten skalerer alt med ruten (cq-enheter); i fullskjerm med skjermen (--u). */
.weather { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5cqh; }
.weather-now { display: flex; align-items: center; gap: 4cqw; min-width: 0; }
.weather-now > .weather-icon { font-size: min(30cqh, 20cqw); line-height: 1; color: var(--text-accent); }
.weather-temp { font-size: min(30cqh, 18cqw); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.weather-meta { display: flex; flex-direction: column; gap: .3em; min-width: 0; font-size: min(7cqh, 4.5cqw); }
.weather-place { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weather-facts { display: flex; flex-wrap: wrap; gap: .3em 1em; color: var(--text-muted); }
.weather-list { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2cqh 2cqw; }
.weather-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .25em; font-size: min(6cqh, 3.8cqw); font-variant-numeric: tabular-nums; }
.weather-item .weather-icon { font-size: 1.9em; line-height: 1; }
.weather-when { color: var(--text-muted); white-space: nowrap; }
.weather-t { white-space: nowrap; }
.weather-credit { flex-basis: 100%; text-align: right; font-size: min(3.4cqh, 2.3cqw); color: var(--text-muted); opacity: .75; }
.weather-error { display: flex; align-items: center; gap: .6em; font-size: min(7cqh, 4.5cqw); color: var(--text-muted); }
.weather-error .weather-icon { font-size: 1.4em; }
/* Fullskjerm: større, med både timene og dagene. */
/* Oppsettene i ruten (WeatherWidget::VIEWS, screen.js renderWeather). */
/* Vær nå: symbolet og temperaturen stort, midt i ruten, stedet under. */
.weather-now > .weather-meta .weather-fact { white-space: nowrap; }
.weather.weather-v-now { justify-content: center; }
.weather.weather-v-now .weather-now { flex-direction: column; justify-content: center; gap: 2cqh; flex: 1; }
.weather.weather-v-now .weather-now > .weather-icon { font-size: min(42cqh, 34cqw); }
.weather.weather-v-now .weather-temp { font-size: min(36cqh, 28cqw); }
.weather.weather-v-now .weather-meta { align-items: center; text-align: center; font-size: min(8cqh, 5cqw); }
.weather.weather-v-now .weather-list { margin-top: 0; }
/* Kompakt: én linje (symbol, temperatur og stedet). */
.weather.weather-v-compact { justify-content: center; }
.weather.weather-v-compact .weather-now > .weather-icon { font-size: min(60cqh, 16cqw); }
.weather.weather-v-compact .weather-temp { font-size: min(60cqh, 14cqw); }
.weather.weather-v-compact .weather-meta { font-size: min(18cqh, 4.5cqw); }
.weather.weather-v-compact .weather-facts { display: none; }
/* I dag og langtidsvarselet: en rad per time eller dag. */
.weather.weather-v-today .weather-now > .weather-icon, .weather.weather-v-chart .weather-now > .weather-icon { font-size: min(16cqh, 12cqw); }
.weather.weather-v-today .weather-temp, .weather.weather-v-chart .weather-temp { font-size: min(16cqh, 11cqw); }
.weather.weather-v-today .weather-list, .weather.weather-v-long .weather-list { margin-top: 0; flex: 1; min-height: 0; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 0; }
.weather-line { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0 3cqw;
    padding: .35em 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: min(5.5cqh, 3.6cqw); font-variant-numeric: tabular-nums; }
.weather-line:nth-last-child(2) { border-bottom: 0; }
.weather-line .weather-icon { font-size: 1.5em; line-height: 1; }
.weather-line-when { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weather-line-sub { margin-left: .5em; color: var(--text-muted); font-size: .8em; }
.weather-line-temp { text-align: right; white-space: nowrap; }
.weather-line-precip { text-align: right; white-space: nowrap; color: #7cc4ff; }
.weather-line-wind { text-align: right; white-space: nowrap; color: var(--text-muted); }
.weather.weather-v-long .weather-now, .weather.weather-v-tiles .weather-now { font-size: min(7cqh, 4.5cqw); }
.weather.weather-v-long .weather-line { font-size: min(4.8cqh, 3.4cqw); padding: .25em 0; }
/* Bare dagene: flisene fyller ruten. */
.weather.weather-v-tiles .weather-list { flex: 1; margin-top: 0; align-content: stretch; }
.weather.weather-v-tiles .weather-item { justify-content: center; padding: 2cqh 0; border-radius: var(--radius-inset); background: rgba(255, 255, 255, .05); font-size: min(6.5cqh, 3.4cqw); }
/* Temperaturkurven: temperatur og symbol hver tredje time over kurven, nedbøren som stolper nederst. */
.weather.weather-v-chart .weather-list { flex: 1; min-height: 0; flex-direction: column; flex-wrap: nowrap; margin-top: 0; gap: 1cqh; }
.weather-chart-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; color: var(--text-muted); font-size: min(7cqh, 3cqw); }
.weather-chart-title .weather-credit { flex-basis: auto; font-size: .7em; }
.weather-chart { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.weather.weather-v-chart .weather-now:empty { display: none; }
.weather-chart-marks { position: relative; height: 34cqh; font-size: min(8cqh, 2.6cqw); flex: none; margin: 0 1.5em; }
.weather-chart-mark { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .2em; font-variant-numeric: tabular-nums; }
.weather-chart-mark .weather-icon { font-size: 1.7em; line-height: 1; }
.weather-chart-mark .weather-when { order: 3; }
.weather-chart-svg { flex: 1; min-height: 25cqh; width: calc(100% - 3em); margin: 0 1.5em; overflow: visible; }
.weather-chart-line { fill: none; stroke: var(--text-accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.weather-chart-bar { fill: #7cc4ff; opacity: .7; }
.weather-full { gap: calc(40 * var(--u)); }
.weather-full .weather-now { gap: calc(40 * var(--u)); }
.weather-full .weather-now > .weather-icon, .weather-full .weather-temp { font-size: calc(150 * var(--u)); }
.weather-full .weather-meta, .weather-full .weather-error { font-size: calc(32 * var(--u)); }
.weather-full .weather-list { flex-direction: column; gap: calc(36 * var(--u)); margin-top: 0; }
.weather-full .weather-row { display: flex; gap: calc(24 * var(--u)); }
.weather-full .weather-item { font-size: calc(30 * var(--u)); padding: calc(18 * var(--u)) 0; border-radius: var(--radius-inset); background: rgba(255, 255, 255, .04); }
.weather-full .weather-credit { font-size: calc(18 * var(--u)); }

/* Avganger (Widgets\DeparturesWidget): én rad per avgang med ikon, linjenummer (i linjens farge), retning,
   eventuelt plattform, og minutter til avgang (sanntid i aksentfarge, forsinket med opprinnelig tid strøket).
   Skalerer med ruten (cq-enheter); krymper skriften ved behov (fitTile). */
.departures { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.5cqh; font-size: min(7cqh, 4.6cqw); }
.departures-list { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.departure { display: flex; align-items: center; gap: .6em; padding: .45em 0; border-bottom: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.departure:last-child { border-bottom: 0; }
.departure-mode { flex: none; color: var(--text-muted); }
.departure-line { flex: none; min-width: 2.4em; padding: .1em .45em; border-radius: .35em; text-align: center; font-weight: 700; background: rgba(255, 255, 255, .14); }
.departure-dest { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.departure-platform { flex: none; min-width: 1.6em; text-align: center; color: var(--text-muted); }
.departure-when { flex: none; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.departure-when.is-realtime { color: var(--text-accent); }
.departure-aimed { color: var(--text-muted); font-size: .8em; }
.departure.is-cancelled .departure-dest, .departure.is-cancelled .departure-line { opacity: .45; text-decoration: line-through; }
.departure.is-cancelled .departure-when { color: #ff8a80; }
.departures-empty { color: var(--text-muted); padding: .5em 0; }
/* Oppsettene (DeparturesWidget::VIEWS, screen.js renderDepartures). */
/* Bare neste avgang: linjen stort, retningen og når ved siden av, og de to neste under. */
.departures-next .departures-list { flex: 1; justify-content: center; }
.departure-next { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "label label" "line info" "then then"; align-items: center; gap: 2cqh 5cqw; }
.departure-next-label { grid-area: label; color: var(--text-muted); font-size: .8em; }
.departure-next-line { grid-area: line; font-size: min(28cqh, 16cqw); min-width: 1.6em; padding: .05em .3em; border-radius: .18em; line-height: 1.1; }
.departure-next-info { grid-area: info; display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.departure-next-dest { font-size: min(10cqh, 6cqw); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.departure-next-when { font-size: min(12cqh, 7cqw); font-variant-numeric: tabular-nums; }
.departure-next-when.is-realtime { color: var(--text-accent); }
.departure-next-platform { color: var(--text-muted); }
.departure-next.is-cancelled .departure-next-line, .departure-next.is-cancelled .departure-next-dest { opacity: .45; text-decoration: line-through; }
.departure-then { grid-area: then; display: flex; flex-wrap: wrap; align-items: center; gap: .4em 1.2em; padding-top: 1.5cqh; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .8em; }
.departure-then-label { color: var(--text-muted); }
.departure-then-item { display: inline-flex; align-items: center; gap: .4em; min-width: 0; }
/* Neste per linje: de neste tidene til høyre. */
.departure-times { flex: none; display: flex; gap: .9em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.departure-time.is-realtime { color: var(--text-accent); }
.departure-times .departure-time + .departure-time { color: var(--text-muted); }
/* Avgangstavle: kolonner med overskrift. */
.departures-board .departure { display: grid; grid-template-columns: 6.6em 3.2em minmax(0, 1fr) 4em; } /* plass til forsinkelsen: «19:22 19:24» */
.departures-board .departure-platform { text-align: center; }
/* Overskriftene: samme kolonner som radene (samme skriftstørrelse på raden), bare teksten mindre. */
.departures-board .departure-head { color: var(--text-muted); border-bottom-color: rgba(255, 255, 255, .2); }
.departures-board .departure-head > span { font-size: .7em; text-transform: uppercase; letter-spacing: .05em; }
.departures-board .departure-clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.departures-board .departure-clock.is-realtime { color: var(--text-accent); }
.departures-board .departure-line { min-width: 0; }
.departures-credit { margin-top: auto; text-align: right; font-size: .5em; color: var(--text-muted); opacity: .75; }

/* Tekststripe (Widgets\TickerWidget): lav stripe nederst på skjermen, under rutene, med valgfritt merke til
   venstre. Meldingene rulles mot venstre med transform (screen.js setter --ticker-shift og --ticker-duration);
   ved redusert bevegelse står de stille. Uten rammer går stripen helt ut i kantene. */
.screen-ticker { flex: none; display: flex; align-items: stretch; height: calc(64 * var(--u)); min-width: 0; overflow: hidden;
    border: var(--frame-w) solid var(--border-card); border-radius: var(--radius-inset); background: var(--surface-card); font-size: calc(28 * var(--t, var(--u))); }
.ticker-label { flex: none; display: flex; align-items: center; padding: 0 calc(22 * var(--u)); font-weight: 600; background: rgba(255, 255, 255, .08); white-space: nowrap; }
.ticker-track { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.ticker-run { flex: none; display: flex; align-items: center; animation: ticker-roll var(--ticker-duration, 30s) linear infinite; will-change: transform; }
.ticker-item { padding: 0 calc(40 * var(--u)); }
.ticker-item::after { content: "•"; margin-left: calc(80 * var(--u)); color: var(--text-accent); }
@keyframes ticker-roll { to { transform: translateX(var(--ticker-shift, -100%)); } }
@media (prefers-reduced-motion: reduce) { .ticker-run { animation: none; } }
body.no-frames .screen-ticker { border: 0; border-radius: 0; }
/* «Skjul bakgrunn og ramme» (tavler): meldingene rett på skjermens bakgrunn, med tekstskyggen; ikke i høy kontrast. */
body:not(.uu) .screen-ticker.is-frameless { background: transparent; border-color: transparent; text-shadow: var(--shadow-text); }
body:not(.uu) .screen-ticker.is-frameless .ticker-label { background: transparent; }
/* Åpne widgets (også «én widget i fullskjerm») slutter over stripen, så den alltid synes. */
body.has-ticker { --ticker-space: calc(64 * var(--u) + 25 * var(--u)); }
body.has-ticker:not(.ticker-at-top) .overlay { bottom: calc(var(--pad) + var(--ticker-space)); }
body.has-ticker.has-toolbar:not(.toolbar-at-top):not(.ticker-at-top) .overlay { bottom: calc(var(--toolbar-space) + var(--ticker-space)); }
/* Øverst (TickerWidget, Plassering): rett under topplinjen, over rutene; åpne widgets begynner under den. */
.screen-header { order: -2; }
.screen-ticker.is-top { order: -1; }
body.ticker-at-top .overlay { top: calc(130 * var(--u) + var(--ticker-space) + 14 * var(--u)); } /* luft til lukkeknappen, som stikker opp over kanten */
body.has-ticker.no-frames { --ticker-space: calc(64 * var(--u)); }
/* Sak fra en feed: tittelen litt kraftigere enn ingressen etter den. */
.ticker-title { font-weight: 600; }
.ticker-text { color: var(--text-muted); }

/* Veksler (Widgets\RotatorWidget): widgetene i den ligger oppå hverandre i vekslerens plass i raden, og én vises
   om gangen (screen.js: is-current, og is-leaving mens den forrige går ut). Overgangen etter data-transition, bare
   med opacity og transform (lett for skjerm-PC-ene). Bevegelsen holdes inne i plassen (overflow: clip, med litt
   margin så glød og skygge synes). */
.tile-rotator { flex: var(--span, 2) 1 0; position: relative; min-width: 0; min-height: 0; overflow: clip; overflow-clip-margin: calc(24 * var(--u)); }
.tile.rotator-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 700ms ease, transform 700ms var(--ease-out), visibility 0s linear 700ms; }
.tile.rotator-slide.is-current { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 700ms ease, transform 700ms var(--ease-out), visibility 0s; }
.tile.rotator-slide.is-leaving { visibility: visible; }
[data-transition="cut"] > .rotator-slide, [data-transition="cut"] > .rotator-slide.is-current { transition: none; }
[data-transition="push"] > .rotator-slide { transform: translateX(35%); }
[data-transition="push"] > .rotator-slide.is-leaving { transform: translateX(-35%); }
[data-transition="zoom"] > .rotator-slide { transform: scale(.9); }
[data-transition="zoom"] > .rotator-slide.is-leaving { transform: scale(1.05); }
[data-transition="lift"] > .rotator-slide { transform: translateY(18%); }
[data-transition="lift"] > .rotator-slide.is-leaving { transform: translateY(-8%); }
.tile-rotator > .rotator-slide.is-current { transform: none; }
@media (prefers-reduced-motion: reduce) { .tile-rotator > .rotator-slide { transform: none !important; } }

/* Delt skjerm i en spilleliste (ScreenRenderer::slide, body.is-slide): delene etter oppsettet (PlaylistModel::TEMPLATES),
   uten logo øverst. På høykant står delene over hverandre. En del med fullvisning (.region-full) skaleres som en
   egen skjerm: --u regnes ut fra delens størrelse (som et vindu på 1200×1000), så fullvisningen ser ut som i et
   vindu, tilpasset delen. Ellers står widgetens rute i delen. */
@property --region-u { syntax: '<length>'; inherits: true; initial-value: 1px; }
body.is-slide .screen-header { display: none; }
.regions { flex: 1; min-height: 0; display: grid; gap: var(--gap); grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.regions-half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.regions-twothirds { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.regions-threequarters { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.regions-quad { grid-template: minmax(0, 1fr) minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr); }
.regions-thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Oppsettene med en stor del og flere små, og båndet: delene plasseres i navngitte felt (a = del 1, b = del 2 …). */
.regions-onetwo { grid-template: "a b" minmax(0, 1fr) "a c" minmax(0, 1fr) / minmax(0, 2fr) minmax(0, 1fr); }
.regions-onethree { grid-template: "a b" minmax(0, 1fr) "a c" minmax(0, 1fr) "a d" minmax(0, 1fr) / minmax(0, 2fr) minmax(0, 1fr); }
.regions-bandtwo { grid-template: "a a" minmax(0, 1fr) "b c" minmax(0, 2fr) / minmax(0, 1fr) minmax(0, 1fr); }
:is(.regions-onetwo, .regions-onethree, .regions-bandtwo) > .region:nth-child(1) { grid-area: a; }
:is(.regions-onetwo, .regions-onethree, .regions-bandtwo) > .region:nth-child(2) { grid-area: b; }
:is(.regions-onetwo, .regions-onethree, .regions-bandtwo) > .region:nth-child(3) { grid-area: c; }
:is(.regions-onetwo, .regions-onethree, .regions-bandtwo) > .region:nth-child(4) { grid-area: d; }
/* Speilvendt (playlist_items.mirrored): kolonnene fylles fra høyre, så den smale delen står til venstre. Delene beholder
   nummeret sitt; innholdet skrives som vanlig. På høykant (delene over hverandre) endrer det ingenting. */
.regions.is-mirrored { direction: rtl; }
.regions.is-mirrored > * { direction: ltr; }
@media (orientation: portrait) {
    .regions-half { grid-template: minmax(0, 1fr) minmax(0, 1fr) / minmax(0, 1fr); }
    .regions-twothirds { grid-template: minmax(0, 2fr) minmax(0, 1fr) / minmax(0, 1fr); }
    .regions-threequarters { grid-template: minmax(0, 3fr) minmax(0, 1fr) / minmax(0, 1fr); }
    .regions-thirds { grid-template: repeat(3, minmax(0, 1fr)) / minmax(0, 1fr); }
    /* Den store delen øverst, de små på rad under; båndet øverst og de to under hverandre. */
    .regions-onetwo { grid-template: "a a" minmax(0, 2fr) "b c" minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr); }
    .regions-onethree { grid-template: "a a a" minmax(0, 2fr) "b c d" minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
    .regions-bandtwo { grid-template: "a" minmax(0, 1fr) "b" minmax(0, 1.5fr) "c" minmax(0, 1.5fr) / minmax(0, 1fr); }
    .regions.is-mirrored { direction: ltr; } /* speilvendt gjelder liggende skjerm; på høykant står delene i rekkefølge */
}
.region { position: relative; display: flex; min-width: 0; min-height: 0; container-type: size; }
.region > .tile, .region > .tile-rotator { flex: 1 1 0; }
.region-full { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    --region-u: min(calc(100cqw / 1200), calc(100cqh / 1000)); --u: var(--region-u); --t: var(--u); padding: calc(48 * var(--u)); }
/* Delt skjerm og Widget i spillelister: kant i kant, uten ramme, mellomrom og kort; tittelen (når den er fylt ut)
   står over innholdet, også over fullvisningen. */
body.is-slide .screen { padding: 0; gap: 0; }
body.is-slide .regions { gap: 0; }
/* I en spilleliste: rette hjørner, også på ruten i delen og nyhetsbildet (delene møtes kant i kant). */
body.is-slide .tile, body.is-slide .news-image, body.is-slide .news-image img { border-radius: 0; }
/* Flatene med egen avrunding i ruten (kart, spilleliste, nettside, vannmerket) fyller delen med rette hjørner, som ruten. */
body.is-slide :is(.position-map, .position-full-map, .playlist-tile, .website-live, .website-frame, .tile-mark) { border-radius: 0; }
body.is-slide .region-full { background: none; border: 0; border-radius: 0; box-shadow: none; }
.region-title { flex: none; margin-bottom: calc(24 * var(--u)); font-size: calc(40 * var(--u)); font-weight: 300; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Egne punkter på kartet (PositionWidget): prikk i designets farge, og etiketten i en liten mørk lapp ved siden av. */
.map-point { display: flex; align-items: center; gap: calc(8 * var(--u)); pointer-events: none; }
.map-point-dot { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 999px; background: var(--c-cyan); border: 2px solid #fff; box-shadow: 0 0 calc(10 * var(--u)) color-mix(in srgb, var(--c-cyan) 80%, transparent); }
.map-point-label { padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(6 * var(--u)); background: color-mix(in srgb, var(--c-night) 85%, transparent); color: var(--text-primary); /* designets flate og tekst, så den leses også på et lyst design */ font-size: calc(18 * var(--u)); font-weight: 600; white-space: nowrap; }

/* Nyheter (Widgets\NewsWidget): sakene oppå hverandre (én synlig, tones inn), bildet til venstre i brede ruter og over
   teksten i smale, og tidslinjen nederst (screen.js fyller den over tiden per sak; telleren «3 / 8» til venstre).
   Tekstene skaleres med ruten (container-enheter) og kuttes med … når de er for lange. */
.news { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3cqmin; }
.news-stage { position: relative; flex: 1; min-height: 0; }
.news-item { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3cqmin; opacity: 0; transition: opacity 600ms ease; }
.news-item.is-current { opacity: 1; }
.news-image { flex: 0 1 55%; min-height: 0; border-radius: var(--radius-inset); overflow: hidden; background: rgba(255, 255, 255, .06); }
.news-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2cqmin; overflow: hidden; }
.news-title { flex: none; margin: 0; font-size: max(calc(18 * var(--u)), 6.5cqmin); font-weight: 600; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-text { flex: 0 1 auto; min-height: 0; margin: 0; font-size: max(calc(14 * var(--u)), 4.2cqmin); line-height: 1.35; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.news-item:not(.has-image) .news-title { font-size: max(calc(22 * var(--u)), 8cqmin); -webkit-line-clamp: 4; }
/* Oppsettet (NewsWidget::LAYOUTS). Automatisk: bildet til venstre i brede ruter (teksten starter i overkant av
   bildet), over teksten i smale. */
@container (min-aspect-ratio: 4 / 3) {
    .news-layout-auto .news-item.has-image { flex-direction: row; }
    .news-layout-auto .news-item.has-image .news-image { flex: 0 0 48%; }
}
/* Bilde til venstre: alltid ved siden av teksten. */
.news-layout-left .news-item.has-image { flex-direction: row; }
.news-layout-left .news-item.has-image .news-image { flex: 0 0 45%; }
/* Bilde øverst: som smale ruter i automatisk (standardrekkefølgen). Tittel øverst: tittelen, så bildet og ingressen. */
.news-layout-title .news-item.has-image .news-body { display: contents; }
.news-layout-title .news-item.has-image .news-title { order: -1; flex: none; }
.news-layout-title .news-item.has-image .news-text { flex: none; }
/* Tekst over bildet: bildet fyller saken, tittel og ingress nederst over en mørk toning (alltid lys tekst, over et foto). */
.news-layout-overlay .news-item.has-image .news-image { position: absolute; inset: 0; flex: none; }
.news-layout-overlay .news-item.has-image .news-body {
    position: absolute; left: 0; right: 0; bottom: 0; flex: none; justify-content: flex-end;
    padding: 12cqmin 4cqmin 4cqmin; border-radius: 0 0 var(--radius-inset) var(--radius-inset);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.45) 60%, transparent);
    color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.news-layout-overlay .news-item.has-image .news-text { color: rgba(255, 255, 255, 0.86); }
body.is-slide .news-layout-overlay .news-body { border-radius: 0; }
/* Stor overskrift: uten bilde, tittelen stort som på en avisforside, ingressen under. */
.news-layout-headline .news-image { display: none; }
.news-layout-headline .news-body { justify-content: center; }
.news-layout-headline .news-title { font-size: max(calc(26 * var(--u)), 11cqmin); line-height: 1.05; letter-spacing: -0.01em; -webkit-line-clamp: 4; }
.news-layout-headline .news-text { font-size: max(calc(16 * var(--u)), 5cqmin); -webkit-line-clamp: 4; }
/* Liste: alle sakene under hverandre (lite bilde til venstre), den aktuelle uthevet; lista ruller med. */
.news-layout-list .news-stage { overflow: hidden; display: flex; flex-direction: column; gap: 1.5cqmin; }
.news-layout-list .news-item { position: relative; inset: auto; opacity: .55; flex: none; flex-direction: row; align-items: center; gap: 3cqmin;
    padding: 1.5cqmin 2cqmin; border-radius: var(--radius-inset); border-left: 4px solid transparent; transition: opacity 400ms ease, background 400ms ease; }
.news-layout-list .news-item.is-current { opacity: 1; background: rgba(255, 255, 255, .06); border-left-color: var(--c-frame-active); }
.news-layout-list .news-image { flex: 0 0 18%; aspect-ratio: 4 / 3; }
.news-layout-list .news-body { flex: 1; overflow: visible; }
.news-layout-list .news-title { font-size: max(calc(15 * var(--u)), 4.6cqmin); -webkit-line-clamp: 2; }
.news-layout-list .news-text { display: none; }
.news-layout-list .news-item.is-current .news-text { display: -webkit-box; -webkit-line-clamp: 2; font-size: max(calc(12 * var(--u)), 3.4cqmin); }
.news-layout-list .news-qr { display: none; }
/* Kort: den aktuelle og de to neste side om side (bilde øverst, tittel under); kortene byttes én plass om gangen. */
.news-layout-cards .news-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqmin; }
.news-layout-cards .news-item { position: relative; inset: auto; display: none; opacity: 1; padding: 0; }
.news-layout-cards .news-item.is-current { display: flex; order: 1; }
.news-layout-cards .news-item.is-next1 { display: flex; order: 2; }
.news-layout-cards .news-item.is-next2 { display: flex; order: 3; }
.news-layout-cards .news-image { flex: 0 0 52%; }
.news-layout-cards .news-title { font-size: max(calc(14 * var(--u)), 4.4cqmin); }
.news-layout-cards .news-text { font-size: max(calc(11 * var(--u)), 3.2cqmin); }
.news-layout-cards .news-item.is-current .news-image { box-shadow: 0 0 0 3px var(--c-frame-active); }
.news-layout-cards .news-qr { display: none; }
/* Kilde og tid over tittelen. */
.news-meta { flex: none; font-size: max(calc(11 * var(--u)), 3.2cqmin); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.news-meta:empty { display: none; }
.news-layout-overlay .news-item.has-image .news-meta { color: rgba(255, 255, 255, .8); }
/* QR-koden til saken: nede til høyre, hvit bakgrunn (leses av mobilen). */
.news-qr { position: absolute; right: 2cqmin; bottom: 2cqmin; width: max(calc(70 * var(--u)), 18cqmin); aspect-ratio: 1; padding: .6cqmin; border-radius: .8cqmin; background: #fff; z-index: 2; }
.news-qr svg { display: block; width: 100%; height: 100%; }
.news-qr:empty { display: none; }
.news-item:has(.news-qr:not(:empty)) .news-body { padding-right: calc(max(calc(70 * var(--u)), 18cqmin) + 2cqmin); }
/* Bevegelse i bildet: sakte zoom mens saken står (starter på nytt for hver sak). */
.news-motion .news-item.is-current .news-image img { animation: news-zoom 14s ease-out both; }
@keyframes news-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .news-motion .news-item.is-current .news-image img { animation: none; } }
.news-timer { flex: none; display: flex; align-items: center; gap: 2cqmin; font-size: max(calc(12 * var(--u)), 3cqmin); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.news-count:empty { display: none; }
.news-track { flex: 1; height: max(3px, 0.8cqmin); border-radius: 999px; background: color-mix(in srgb, var(--c-frame) 28%, transparent); /* sporet: rammefargen, svak */ overflow: hidden; }
.news-bar { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--c-frame-active); /* rammefargen, den lyse varianten */ transform-origin: left center; transform: scaleX(0); }
@keyframes news-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.news.is-single .news-timer { display: none; }
@media (prefers-reduced-motion: reduce) { .news-item { transition: none; } }
/* Bakgrunn bak en widget i en spilleliste (valgt i widgeten): farge på delen, og bilde eller video som fyller den bak
   innholdet. Innholdet ligger over. */
.region.has-bg { isolation: isolate; }
.region-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Lys bakgrunn bak widgeten (valgt farge, eller et lyst bilde): mørk tekst og mørkere aksent i delen. */
.region.is-light { --text-primary: #141414; --text-label: #2e2e2e; --text-muted: #555555; --text-accent: color-mix(in srgb, var(--c-teal-lit) 70%, #000); --text-on-chip: #fff; color: var(--text-primary); }
.region.is-light .weather-item { background: rgba(0, 0, 0, .06); }
/* Tavle: en widget med lys egen bakgrunn er åpen (screen.js, setWidgetBackground). Det som står rett på bakgrunnen,
   topplinjen og vinduet uten bakgrunnsflate («Skjul bakgrunn i fullskjerm»), får mørk tekst som .region.is-light.
   Et vindu med flate er mørkt uansett. Ikke i høy kontrast (da vises ingen egen bakgrunn). */
body.widget-bg-light:not(.uu) :is(.screen-header, .overlay.overlay-frameless) {
    --text-primary: #141414; --text-label: #2e2e2e; --text-muted: #555555; --text-accent: color-mix(in srgb, var(--c-teal-lit) 70%, #000); --text-on-chip: #fff;
    color: var(--text-primary); text-shadow: none;
}
body.widget-bg-light:not(.uu) :is(.screen-header, .overlay.overlay-frameless) :is(svg, .screen-logo) { filter: none; }
body.widget-bg-light:not(.uu) .overlay.overlay-frameless .weather-item { background: rgba(0, 0, 0, .06); }

/* Været i en spilleliste (fullvisning i en del eller som Widget): skalerer med delen (container-enheter), som ruten,
   så det fyller bredden og høyden: stor temperatur, og timene og dagene i rekker over hele bredden. */
.region-full.region-weather { justify-content: stretch; }
.region-weather .weather-full { flex: 1; min-height: 0; justify-content: space-between; gap: 3cqh; }
.region-weather .weather-full .weather-now { gap: 4cqw; justify-content: center; } /* ikon, temperatur og sted midt på */
.region-weather .weather-full .weather-now > .weather-icon, .region-weather .weather-full .weather-temp { font-size: min(26cqh, 17cqw); }
.region-weather .weather-full .weather-meta, .region-weather .weather-full .weather-error { font-size: min(6cqh, 3.6cqw); }
.region-weather .weather-full .weather-list { flex: 1; min-height: 0; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-evenly; gap: 2.5cqh; margin-top: 0; }
.region-weather .weather-full .weather-row { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.5cqw; }
.region-weather .weather-full .weather-item { justify-content: center; font-size: min(4.6cqh, 3.2cqw); padding: 2cqh 0; }
.region-weather .weather-full .weather-credit { flex: none; font-size: min(2.2cqh, 1.5cqw); }

/* Overskrifter: designets overskriftsfont (Design, --font-heading), ellers brødtekstens. Samlet her, så nye titler
   bare legges til i listen. */
:is(.screen-brand-name, .tile-title, .article-tile-title, .article-list-title, .notice-title, .overlay-title, .full-article-title,
    .related-card-title, .article-card-title, .qa-title, .qa-article-title, .single-title, .shortcut-title, .shortcut-card-title,
    .region-title, .news-title, .ticker-label) { font-family: var(--font-heading, var(--font-sans)); }

/* Klokke og vær i topplinjen (layouts.header_info): på motsatt side av logoen, i samme linje. Logoen til høyre: klokken
   til venstre, og omvendt; uten logo står klokken til høyre. */
/* Sterkere enn logoens plass (body.logo-top-left .screen-header = flex-start), så klokken alltid havner på motsatt side. */
body .screen-header.has-info, body:is(.logo-top-left, .logo-bottom-left) .screen-header.has-info { justify-content: space-between; }
body.logo-hidden .screen-header.has-info { justify-content: flex-end; }
body:is(.logo-top-left, .logo-bottom-left) .screen-info { order: 2; }
.screen-info { display: flex; align-items: center; gap: calc(28 * var(--t)); min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.screen-info-clock { display: flex; align-items: baseline; gap: calc(14 * var(--t)); }
.screen-info-time { font-size: calc(34 * var(--t)); font-weight: 300; letter-spacing: -0.01em; }
.screen-info-date { font-size: calc(20 * var(--t)); color: var(--text-muted); }
.screen-info-weather { display: flex; align-items: center; gap: calc(8 * var(--t)); font-size: calc(30 * var(--t)); font-weight: 300; }
.screen-info-weather .bi { color: var(--c-frame); font-size: 1.05em; }
.screen-info-clock + .screen-info-weather { padding-left: calc(28 * var(--t)); border-left: 1px solid var(--border-divider); }

/* Logoens plass (Design, body.logo-*; standard øverst til høyre). Nederst står linjen med logoen under rutene (og under
   en tekststripe nederst), og et åpent vindu flytter seg tilsvarende: det begynner lenger opp og slutter over logoen
   (marginene trekker fra toppen og bunnen vinduet ellers har, også med tekststripe og knappelinje). Skjult: ingen
   linje, og vinduet begynner øverst. */
body.logo-top-left .screen-header, body.logo-bottom-left .screen-header { justify-content: flex-start; }
body:is(.logo-top-left, .logo-bottom-left) .screen-brand { justify-content: flex-start; }
body:is(.logo-top-left, .logo-bottom-left) .screen-logo { object-position: left center; }
body:is(.logo-bottom-left, .logo-bottom-right) .screen-header { order: 10; }
body:is(.logo-bottom-left, .logo-bottom-right) .screen { padding-top: var(--pad); }
body:is(.logo-bottom-left, .logo-bottom-right) .overlay { margin-top: calc(-96 * var(--u) - 34 * var(--u) + var(--pad)); margin-bottom: calc(96 * var(--u)); }
body.logo-hidden .screen-header:not(.has-info) { display: none; }
body.logo-hidden .screen-header.has-info .screen-brand { display: none; }
body.logo-hidden .overlay { margin-top: calc(-96 * var(--u)); }
/* Knappelinjen øverst: den henger i plassen topplinjen ellers har, så den plassen beholdes når logoen er flyttet ned
   eller skjult. */
body.toolbar-at-top:is(.logo-bottom-left, .logo-bottom-right, .logo-hidden) .screen { padding-top: calc(var(--toolbar-space) + 12 * var(--u)); }
body.toolbar-at-top:is(.logo-bottom-left, .logo-bottom-right, .logo-hidden) .overlay { margin-top: calc(var(--toolbar-space) + 12 * var(--u) - 130 * var(--u)); }

/* Mørk egen bakgrunn i en åpen widget på et design med lys bakgrunn (body.design-light, screen.js): lys tekst på det som
   står rett på bakgrunnen, som det omvendte over (widget-bg-light). */
body.design-light.widget-bg-dark:not(.uu) :is(.screen-header, .overlay.overlay-frameless) {
    --text-primary: #ffffff; --text-label: #dbe7e8; --text-muted: #c4cdd0;
    color: var(--text-primary);
}

/* Logoen tilpasset bakgrunnen bak den (Design, LOGO_ADAPT). Bakgrunnen er lys med et lyst design, eller når en åpen
   widget har lys bakgrunn; mørk ellers. Er den motsatt av designets (en åpen widget), brukes den alternative logoen om
   det finnes en (.has-alt-logo). Automatisk: ensfarget, mørk på lys og hvit på mørk. Inverter: på designets egen
   bakgrunn. I høy kontrast er bakgrunnen alltid svart: logoen tilpasses som på mørk bakgrunn (under). */
.screen-logo-alt { display: none; }
body:is(.design-light.widget-bg-dark, :not(.design-light).widget-bg-light):not(.uu) .screen-brand.has-alt-logo .screen-logo-main { display: none; }
body:is(.design-light.widget-bg-dark, :not(.design-light).widget-bg-light):not(.uu) .screen-brand.has-alt-logo .screen-logo-alt { display: block; }
body.logo-adapt-auto:not(.uu):is(.design-light:not(.widget-bg-dark), .widget-bg-light) .screen-header .screen-brand .screen-logo-main { filter: brightness(0); opacity: .88; }
body.logo-adapt-auto:not(.uu):not(.design-light):not(.widget-bg-light) .screen-header .screen-brand .screen-logo-main,
body.logo-adapt-auto:not(.uu).design-light.widget-bg-dark .screen-header .screen-brand .screen-logo-main { filter: brightness(0) invert(1); }
body.logo-adapt-invert:not(.uu):not(.widget-bg-light):not(.widget-bg-dark) .screen-header .screen-brand .screen-logo-main { filter: invert(1) hue-rotate(180deg); }
body.logo-adapt-invert:not(.uu).design-light.widget-bg-light .screen-header .screen-brand .screen-logo-main,
body.logo-adapt-invert:not(.uu):not(.design-light).widget-bg-dark .screen-header .screen-brand .screen-logo-main { filter: invert(1) hue-rotate(180deg); }
/* Høy kontrast (svart bakgrunn): den alternative logoen på et lyst design, hvit ved «Automatisk», invertert ved
   «Inverter» når logoen er laget for lys bakgrunn (lyst design). */
body.uu.design-light .screen-brand.has-alt-logo .screen-logo-main { display: none; }
body.uu.design-light .screen-brand.has-alt-logo .screen-logo-alt { display: block; }
body.uu.logo-adapt-auto .screen-header .screen-brand .screen-logo-main { filter: brightness(0) invert(1); }
body.uu.logo-adapt-invert.design-light .screen-header .screen-brand .screen-logo-main { filter: invert(1) hue-rotate(180deg); }

/* Spilleliste (delt skjerm og Widget): rutene står i en hel del av skjermen og leses på avstand, så teksten er større
   enn på en tavle. Enheten for teksten (--slide-t) følger delens størrelse (0,42 % av den korteste siden), mellom 1,6
   og 2,6 ganger skjermens enhet; innholdet kan fortsatt krympes når det ikke får plass (--tile-scale, screen.js),
   tittelen ikke. Fullvisningene i delene (.region-full) skaleres allerede med delen. */
body.is-slide .region .tile {
    --slide-t: clamp(calc(1.6 * var(--u)), 0.42cqmin, calc(2.6 * var(--u)));
    --t: calc(var(--slide-t) * var(--tile-scale, 1));
}
body.is-slide .region .tile-title { font-size: calc(24 * var(--slide-t)); }
/* Nyheter: tittel, ingress og telleren etter rutens størrelse, med grenser. */
body.is-slide .news-title { font-size: clamp(calc(34 * var(--u)), 11cqmin, calc(84 * var(--u))); }
body.is-slide .news-item:not(.has-image) .news-title { font-size: clamp(calc(40 * var(--u)), 13cqmin, calc(100 * var(--u))); }
body.is-slide .news-text { font-size: clamp(calc(24 * var(--u)), 7cqmin, calc(46 * var(--u))); }
body.is-slide .news-timer { font-size: clamp(calc(16 * var(--u)), 3.4cqmin, calc(26 * var(--u))); }

/* Delt skjerm: en tynn linje i rammefargen mellom delene uten egen bakgrunn (som kanten på tekststripen). Den tegnes
   som en skygge rundt delen, så den bare synes mellom delene: mot skjermens kant havner den utenfor skjermen. En del
   med egen bakgrunn (.has-bg) skiller seg ut selv og får ingen linje. Ikke i høy kontrast. */
body.is-slide:not(.uu) .region:not(.has-bg) { box-shadow: 0 0 0 0.75px color-mix(in srgb, var(--c-frame) 80%, transparent); }
body.is-slide .regions { overflow: hidden; } /* klipper linjen ved skjermens kant, så den aldri synes der */
/* Uten skillelinjer (spillelistens valg, playlists.split_dividers): delene går rett over i hverandre. */
body.is-slide .regions.no-dividers > .region { box-shadow: none; }

/* Plantegning (Widgets\FloorPlanWidget, screen/widgets/floorplan, åpnet): plantegningen med installasjonene som markører i
   statusens farge, og forklaringen av fargene. Ruten: tegningen etter tur med navnet; fullskjerm og delt skjerm: meny
   til venstre (når det er flere) og den store tegningen. Blueprint (is-blueprint): hvite linjer på blått, som i admin. */
.floorplan {
    --fp-online: #3ddc84;
    --fp-partial: #ffb020;
    --fp-offline: #ff5a5f;
    --fp-unknown: #9aa7ad;
    display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); gap: calc(14 * var(--u));
    width: 100%; height: 100%; min-height: 0;
}
.floorplan.has-menu { grid-template-columns: auto minmax(0, 1fr); }
.floorplan.has-menu .floorplan-legend { grid-column: 1 / -1; }
.floorplan-menu { display: flex; flex-direction: column; gap: calc(8 * var(--u)); min-width: calc(220 * var(--u)); max-width: calc(320 * var(--u)); overflow-y: auto; }
.floorplan-menu-item {
    text-align: left; font: inherit; font-size: calc(24 * var(--t)); color: var(--text-primary); cursor: pointer;
    padding: calc(14 * var(--u)) calc(18 * var(--u)); border-radius: calc(12 * var(--u));
    background: var(--surface-inset); border: calc(2 * var(--u)) solid transparent;
}
.floorplan-menu-item.is-active { border-color: var(--c-frame-active); background: color-mix(in srgb, var(--c-frame-active) 18%, var(--surface-inset)); }
.floorplan-stage { position: relative; min-height: 0; min-width: 0; }
.floorplan-plan { position: absolute; inset: 0; margin: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--u)); }
.floorplan-plan.is-active { display: flex; }
.floorplan-fit { flex: 1 1 auto; align-self: stretch; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
.floorplan-image { position: relative; width: min(100cqw, 100cqh * var(--ar)); aspect-ratio: var(--ar); container-type: inline-size; /* cqw i målestokken */ border-radius: calc(10 * var(--u)); overflow: hidden; background: #fff; }
.floorplan-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.floorplan-image.is-blueprint {
    /* Rutenettet som repeterende gradienter over hele tegningen (ikke fliser, som rundes av hver for seg og glir fra
       hverandre): store og små ruter. Med målestokk (FloorPlanModel::grid) i prosent, så rutene har riktige mål. */
    background-color: #0d3a66;
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px var(--fp-mx, calc(80 * var(--u)))),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px var(--fp-my, calc(80 * var(--u)))),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px var(--fp-nx, calc(16 * var(--u)))),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px var(--fp-ny, calc(16 * var(--u))));
}
/* Målestokken nederst til venstre på tegningen: én stor rute med lengden. */
.floorplan-scale {
    position: absolute; left: calc(10 * var(--u)); bottom: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u));
    font-size: calc(16 * var(--t)); line-height: 1; color: #fff; padding: calc(5 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(13, 58, 102, .8);
}
.floorplan-scale-bar { display: block; width: var(--w); height: calc(6 * var(--u)); border: calc(2 * var(--u)) solid #fff; border-top: 0; }
.floorplan-image.is-blueprint img { filter: url(#fp-blueprint); }
/* Markøren: en prikk med hvit kant i statusens farge, og en ring som pulserer når installasjonen er nede. */
.floorplan-pin {
    position: absolute; left: var(--x); top: var(--y); width: calc(26 * var(--u)); height: calc(26 * var(--u)); transform: translate(-50%, -50%);
    border-radius: 50%; background: var(--fp-unknown); border: calc(3 * var(--u)) solid #fff; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .5);
}
.floorplan-pin.is-online { background: var(--fp-online); }
.floorplan-pin.is-partial { background: var(--fp-partial); }
.floorplan-pin.is-offline { background: var(--fp-offline); }
.floorplan-pin.is-offline::after, .floorplan-pin.is-partial::after {
    content: ""; position: absolute; inset: calc(-8 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid currentColor; opacity: 0;
    animation: floorplan-pulse 2s ease-out infinite;
}
.floorplan-pin.is-offline { color: var(--fp-offline); }
.floorplan-pin.is-partial { color: var(--fp-partial); }
@keyframes floorplan-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .floorplan-pin::after, .floorplan-summary-dot::after { animation: none !important; } }
.floorplan-label {
    position: absolute; left: 50%; bottom: calc(100% + 6 * var(--u)); transform: translateX(-50%); white-space: nowrap;
    font-size: calc(18 * var(--t)); font-weight: 600; line-height: 1.2; padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: calc(6 * var(--u));
    background: rgba(0, 0, 0, .75); color: #fff;
}
/* Forklaringen: prikkene i statusens farge, navnet og antallet på plantegningen som vises, i designets forgrunnsfarge
   (--text-primary), så den leses like godt som resten av teksten og kanten på prikkene synes også på lys bakgrunn. */
.floorplan-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--u)) calc(26 * var(--u)); margin: 0; padding: 0; list-style: none; font-size: calc(20 * var(--t)); color: var(--text-primary); }
.floorplan-legend li { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.floorplan-dot { width: .8em; height: .8em; border-radius: 50%; border: calc(2 * var(--u)) solid var(--text-primary); background: var(--fp-unknown); }
.floorplan-legend .is-online .floorplan-dot { background: var(--fp-online); }
.floorplan-legend .is-partial .floorplan-dot { background: var(--fp-partial); }
.floorplan-legend .is-offline .floorplan-dot { background: var(--fp-offline); }
.floorplan-count { font-weight: 700; color: var(--text-primary); }
/* Ruten (screen/widgets/floorplan_tile): beskrivelsen og den samlede statusen, med en stor prikk i statusens farge
   (pulserer når noe er nede). Valgfritt plantegningen svakt bak, som blueprint-linjer uten den blå flaten, zoomet inn
   så den fyller hele ruten (også bak tittelen): laget ligger i .tile (tile-body og ruten er ikke posisjonert), bak
   innholdet (z-index -1 i rutens egen stablingskontekst, isolation). */
.floorplan-summary {
    --fp-online: #3ddc84; --fp-partial: #ffb020; --fp-offline: #ff5a5f; --fp-unknown: #9aa7ad;
    display: flex; flex-direction: column; justify-content: flex-end; gap: calc(12 * var(--u)); height: 100%; min-height: 0;
}
.tile:has(.floorplan-summary.has-plan) { isolation: isolate; }
.tile-body:has(> .floorplan-summary.has-plan) { position: static; }
/* Pulsen rundt statusprikken går ut over innholdsflaten (inn i rutens indre marg), så den klippes ikke. */
.tile-body:has(> .floorplan-summary) { overflow: visible; }
.floorplan-summary-bg {
    position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: var(--radius); container-type: size;
    display: flex; align-items: center; justify-content: center; opacity: .22; pointer-events: none;
}
/* Fyller ruten (som object-fit: cover): så bred at den dekker både bredden og høyden, og midtstilt. */
.floorplan-summary-bg .floorplan-image { flex: none; width: max(100cqw, 100cqh * var(--ar)); background-color: transparent; border-radius: 0; }
.floorplan-summary-text { margin: 0 0 auto; color: var(--text-muted); font-size: calc(14 * var(--t)); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.floorplan-summary-status { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.floorplan-summary-dot { position: relative; flex: none; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; background: var(--fp-unknown); color: var(--fp-unknown); }
.floorplan-summary-status.is-online .floorplan-summary-dot { background: var(--fp-online); color: var(--fp-online); }
.floorplan-summary-status.is-partial .floorplan-summary-dot { background: var(--fp-partial); color: var(--fp-partial); }
.floorplan-summary-status.is-offline .floorplan-summary-dot { background: var(--fp-offline); color: var(--fp-offline); }
.floorplan-summary-status.is-partial .floorplan-summary-dot::after, .floorplan-summary-status.is-offline .floorplan-summary-dot::after {
    content: ""; position: absolute; inset: calc(-8 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid currentColor; opacity: 0;
    animation: floorplan-pulse 2s ease-out infinite;
}
.floorplan-summary-head { font-size: calc(24 * var(--t)); font-weight: 600; line-height: 1.15; color: var(--text-primary); }
.floorplan-summary-sub { font-size: calc(14 * var(--t)); color: var(--text-muted); margin-top: calc(2 * var(--u)); }

/* Kommandoer fra plantegningen (FloorPlanWidget, settings.control): markørene kan trykkes, og vinduet (screen.js,
   .fp-cmd-popup) med kommandoene, bekreftelsen eller talltastaturet til PIN-koden, og svaret. */
.floorplan.has-control .floorplan-pin { cursor: pointer; }
.fp-cmd { text-align: center; }
.fp-cmd-title { margin: 0 0 calc(10 * var(--u)); font-size: calc(26 * var(--u)); }
.fp-cmd-status { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); margin: 0 0 calc(18 * var(--u)); font-size: calc(17 * var(--u)); color: var(--text-muted); }
.fp-cmd-note { margin: 0 0 calc(14 * var(--u)); font-size: calc(16 * var(--u)); color: var(--text-muted); }
.fp-cmd-question { margin: 0 0 calc(16 * var(--u)); font-size: calc(20 * var(--u)); }
.fp-cmd-actions { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.fp-cmd-btn, .fp-cmd-key {
    border: 1.3px solid var(--border-card); border-radius: calc(var(--radius) * .6); background: transparent; color: inherit;
    font-size: calc(20 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u));
}
.fp-cmd-btn .bi { margin-right: calc(6 * var(--u)); }
.fp-cmd-btn:disabled { opacity: .45; }
.fp-cmd-btn.is-ok, .fp-cmd-key.is-ok { background: var(--frame-badge); color: var(--text-on-frame); border-color: transparent; }
.fp-cmd-dots { font-size: calc(30 * var(--u)); letter-spacing: calc(8 * var(--u)); min-height: calc(40 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.fp-cmd-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); }
.fp-cmd-key { font-size: calc(24 * var(--u)); padding: calc(12 * var(--u)) 0; }
.fp-cmd-result { margin: calc(10 * var(--u)) 0; font-size: calc(20 * var(--u)); }
.fp-cmd-result.is-error { color: #ff6b6b; }

/* Spillelistekontroll (PlaylistControlWidget): ruten med spillelisten og hva som er på, og fullskjermen med ett
   kort per element (miniatyr, navn og bryter; med «Bare ett om gangen» et avspillingsmerke). screen.js, [data-playlistctl]. */
.playlistctl-tile { display: flex; flex-direction: column; justify-content: center; height: 100%; gap: calc(6 * var(--u)); }
.playlistctl-tile-name { font-size: calc(15 * var(--t)); color: var(--text-muted); }
.playlistctl-tile-state { font-size: calc(24 * var(--t)); font-weight: 600; line-height: 1.15; color: var(--text-primary); }
.playlistctl-empty, .playlistctl-note { color: var(--text-muted); font-size: calc(22 * var(--u)); }
.playlistctl-note { margin-top: calc(14 * var(--u)); text-align: center; }
.playlistctl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(440 * var(--u)), 1fr)); gap: calc(18 * var(--u)); }
.playlistctl-item {
    display: flex; align-items: center; gap: calc(18 * var(--u)); width: 100%; height: 100%; text-align: left; cursor: pointer;
    padding: calc(16 * var(--u)); border: 1.3px solid var(--border-card); border-radius: var(--radius); background: transparent; color: inherit;
    transition: border-color .2s, background-color .2s;
}
.playlistctl-item.is-on { border-color: var(--frame-badge); background: color-mix(in srgb, var(--frame-badge) 14%, transparent); }
.playlistctl.is-busy .playlistctl-item { pointer-events: none; opacity: .7; }
.playlistctl-thumb {
    flex: none; width: calc(150 * var(--u)); aspect-ratio: 16 / 9; border-radius: calc(var(--radius) * .5); overflow: hidden;
    display: grid; place-items: center; background: var(--border-card); font-size: calc(40 * var(--u)); color: var(--text-muted);
}
.playlistctl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.playlistctl-item:not(.is-on) .playlistctl-thumb { filter: grayscale(1); opacity: .6; }
.playlistctl-label { flex: 1; min-width: 0; font-size: calc(26 * var(--u)); line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.playlistctl-switch { flex: none; display: grid; place-items: center; }
.playlistctl-knob {
    position: relative; width: calc(68 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(19 * var(--u));
    background: var(--border-card); transition: background-color .2s;
}
.playlistctl-knob::after {
    content: ""; position: absolute; top: calc(4 * var(--u)); left: calc(4 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u));
    border-radius: 50%; background: #fff; transition: transform .2s;
}
.is-on .playlistctl-knob { background: var(--frame-badge); }
.is-on .playlistctl-knob::after { transform: translateX(calc(30 * var(--u))); }
.playlistctl-switch .bi { font-size: calc(44 * var(--u)); color: var(--text-muted); opacity: .4; }
.is-on .playlistctl-switch .bi { color: var(--frame-badge); opacity: 1; }