/* Tynn, usynlig hover-sone nederst i vinduet. :host vokser når den hovres
   eller får fokus inni seg, slik at filmstripen kan gli opp og fortsatt være
   en del av samme hover-område. */
:host {
    display: block;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 0.6em;
    z-index: var(--z-overlay, 1000);

    &:is(:hover, :focus-within) {
        block-size: 7.5em;

        .strip-omraade {
            transform: translateY(0);
        }

        .strip > li {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

.strip-omraade {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 7.5em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-block-end: var(--space-small, 0.6em);
    box-sizing: border-box;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform var(--transition-duration, 150ms);
    background: color-mix(in srgb, var(--color-surface-text, canvasText) 3%, transparent);
}


.sidetall {
    position: fixed;
    inset: var(--slide-nav-sidetall-inset, auto 1rem 1rem auto);
    z-index: var(--z-overlay, 1000);
    margin: 0;
    padding: var(--space-2xs, 0.2em) var(--space-small, 0.6em);
    border-radius: var(--radius-pill, 1em);
    background: color-mix(in srgb, var(--color-surface-text, canvasText) 8%, var(--color-surface, canvas));
    color: color-mix(in srgb, var(--color-surface-text, canvasText) 72%, transparent);
    font-size: var(--font-size-extra-small, 0.8rem);
    line-height: 1.3;
    pointer-events: none;

    &[hidden] {
        display: none;
    }
}

/* Strekker seg over hele bredden (i stedet for en smal, sentrert 92vw-boks)
   slik at hele bunnlinjen er tilgjengelig for scrolling/klikk, ikke bare en
   midtstilt stripe - `justify-content: safe center` sentrerer miniatyrene
   når de er FÆRRE enn det som fyller bredden, men faller automatisk
   tilbake til start-justering (`flex-start`) når innholdet overflower
   (`safe`-nøkkelordet, se
   https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#safe).
   Uten `safe` sentrerer ren `center` også en overflowende rad, som gjør at
   den flyter likt over på begge sider av boksen - og venstre-overflow er i
   praksis ofte uoppnåelig ved scrolling (`scrollLeft` kan ikke bli
   negativ), så f.eks. slide 1-3 i en lang deck ble usynlige og
   ikke-scrollbare til, uansett hvor mye man scrollet.
   `scrollbar-width`/`::-webkit-scrollbar` skjuler den horisontale
   scrollbaren (fortsatt scrollbar med mus/touch/tastatur) - uten dette
   reserverer enkelte nettlesere/OS-er (f.eks. Windows med klassiske,
   ikke-overlay-scrollbarer) plass til en synlig scrollbar under
   miniatyrene, som gjør at stripen blir noen piksler høyere enn den faste
   7.5em-boksen den skal ligge inni - `.strip-omraade` sin `overflow: hidden`
   over er et ekstra sikkerhetsnett mot akkurat dette. */
.strip {
    display: flex;
    inline-size: 100%;
    gap: var(--space-small, 0.6em);
    margin: 0;
    padding-inline: var(--space-small, 0.6em);
    list-style: none;
    justify-content: safe center;
    overflow-x: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }

    /* Hver miniatyr (list-elementet, ikke selve lenken) toner/glir subtilt inn
       med stigende forsinkelse basert på avstand til nåværende slide, slik at
       filmstripen kommer inn som en bølge som stråler ut fra der du faktisk er
       - naboene på hver side (f.eks. slide 7 og 9 hvis du står på 8) dukker opp
       samtidig, så neste par (6 og 10), osv - i stedet for en rent lineær
       venstre-til-høyre-bølge som ikke tar hensyn til hvor du er i decken.
       `--avstand` (|indeks - nåværende indeks|) settes som inline custom
       property per <li> i slide-nav.js sin #byggFilmstripe(), siden det trengs
       info (hvilken slide er nåværende) som ikke er tilgjengelig i ren CSS.
       Faller tilbake til 0 (ingen forsinkelse) hvis egenskapen mangler. */
    > li {
        opacity: 0;
        transform: translateY(0.5em);
        transition: opacity var(--transition-duration, 150ms), transform var(--transition-duration, 150ms);
        transition-delay: calc(var(--avstand, 0) * 30ms);
    }
}

@keyframes slide-nav-miniatyr-inn {
    from {
        opacity: var(--opacity-muted, 0.7);
        scale: 0.96;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

@supports (animation-timeline: view()) {
    :host(:is(:hover, :focus-within)) .strip > li {
        animation-name: slide-nav-miniatyr-inn;
        animation-duration: 1ms;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-timeline: view(inline);
        animation-range: entry 0% cover 35%;
    }
}

@media (prefers-reduced-motion: reduce) {
    @supports (animation-timeline: view()) {
        :host(:is(:hover, :focus-within)) .strip > li {
            animation: none !important;
            opacity: 1;
            scale: 1;
        }
    }
}

/* Miniatyren er nå en ren tekst-boks (slide-tall + tittel) - ingen levende
   <iframe> lenger. Å laste hele decken som N nøstede sider i skjulte
   iframes ved hver eneste slide-visning var den dominerende årsaken til
   dårlig ytelse i /slides (målt: ~740 nettverksforespørsler/~900ms
   ekstra ventetid for én enkelt slide, se commit-historikk) - fjernet
   fullstendig i stedet for kun utsatt, siden en filmstripe-forhåndsvisning
   ikke trenger levende innhold for å være nyttig til navigering. Levende
   iframe-forhåndsvisning finnes fortsatt på infosiden
   (<lm-slide-info>s "Alle slides"-rutenett), som kun besøkes én gang, ikke
   på hver slide-navigering. */
.miniatyr-lenke {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs, 0.2em);
    flex: none;
    inline-size: 140px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: var(--radius-small, 0.4em);
    border: var(--border-width, 1px) solid transparent;
    background: var(--color-surface, canvas);
    padding: var(--space-xs, 0.4em);
    text-align: center;

    &:is(:hover, :focus-visible) {
        outline: var(--slide-focus-ring-width, 2px) solid var(--slide-accent, currentColor);
        outline-offset: 1px;
    }

    /* Miniatyren for slide-en som faktisk vises akkurat nå (aria-current
       settes én gang når filmstripen bygges i slide-nav.js, siden hver
       side kun noensinne viser sin egen, faste slide) får en tydelig
       border - box-sizing: border-box over sikrer at den tykkere
       borderen ikke endrer miniatyrens ytre mål/flytter naboene i
       filmstripen. Uaktive miniatyrer har en usynlig (transparent) border
       av samme bredde, slik at ingen av dem hopper i størrelse når en
       annen blir gjeldende. */
    &[aria-current="true"] {
        border-width: var(--slide-current-indicator-width, 2px);
        border-color: var(--slide-accent, currentColor);
    }

    /* Stort, tydelig slide-tall - erstatter det gamle hjørne-merket over
       iframe-bildet med selve hovedinnholdet i miniatyren, siden det ikke
       lenger er noe bilde å legge et merke oppå. */
    .miniatyr-nummer {
        font-size: var(--font-size-large, 1.2em);
        font-weight: 600;
        line-height: 1;
        color: color-mix(in srgb, var(--color-surface-text, canvasText) 70%, var(--color-surface, canvas));
    }

    /* Tittel-tekst under slide-tallet - vanlig dokumentflyt (ikke lenger et
       overlay oppå et bilde), trunkeres med ellipsis i stedet for å brekke om,
       siden boksen har en fast størrelse. Utelates helt når manifestet ikke
       har noen tittel for oppføringen (se filmstripe.js). */
    .miniatyr-tittel {
        inline-size: 100%;
        padding-inline: var(--space-2xs, 0.2em);
        font-size: var(--font-size-extra-small, 0.7em);
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Info-oppføringen (lenke til deckens index.html) er ikke et iframe av en
       faktisk slide - infosiden har en helt annen layout (ikke 16:9,
       tekst-tung) og ville sett ødelagt/uleselig ut nedskalert til 140px. Vises
       i stedet som en enkel, sentrert ikon+tekst-miniatyr med en lett skyggelagt
       bakgrunn, slik at den tydelig skiller seg fra de ekte slide-miniatyrene
       ved siden av, men fortsatt følger samme boks-mål/border/radius. */
    &.miniatyr-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-2xs, 0.2em);
        background: color-mix(in srgb, var(--color-surface-text, canvasText) 6%, var(--color-surface, canvas));
        color: color-mix(in srgb, var(--color-surface-text, canvasText) 70%, var(--color-surface, canvas));
        font-size: var(--font-size-extra-small, 0.7em);
    }
}

:is(.hjelp-dialog, .presenter-dialog) {
    border: none;
    border-radius: var(--radius-large, 1em);
    padding: 0;
    inline-size: min(26rem, calc(100vw - 2rem));
    max-inline-size: calc(100vw - 2rem);
    color: var(--color-surface-text, canvasText);
    background: var(--color-surface, canvas);
    box-shadow: var(--shadow-elevated, 0 0.3em 0.8em color-mix(in srgb, canvasText 20%, transparent));
    opacity: 0;
    transition:
        opacity var(--transition-duration, 150ms),
        display var(--transition-duration, 150ms),
        overlay var(--transition-duration, 150ms);
    transition-behavior: allow-discrete;

    &::backdrop {
        background: transparent;
        transition:
            background var(--transition-duration, 150ms),
            display var(--transition-duration, 150ms),
            overlay var(--transition-duration, 150ms);
        transition-behavior: allow-discrete;
    }

    &:open {
        opacity: 1;
    }

    &:open::backdrop {
        background: var(--scrim-color, color-mix(in srgb, canvasText 40%, transparent));
    }
}

@starting-style {
    .hjelp-dialog:open,
    .presenter-dialog:open {
        opacity: 0;
    }

    .hjelp-dialog:open::backdrop,
    .presenter-dialog:open::backdrop {
        background: transparent;
    }
}

.hjelp-dialog-innhold,
.presenter-dialog-innhold {
    display: grid;
    gap: var(--space-small, 0.6em);
    padding: var(--space-large, 1.5em);
}

.hjelp-dialog-lukk,
.presenter-dialog-lukk {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface-text, canvasText) 8%, var(--color-surface, canvas));
    color: inherit;
    font: inherit;
    cursor: pointer;

    &:is(:hover, :focus-visible) {
        outline: var(--slide-focus-ring-width, 2px) solid var(--slide-accent, currentColor);
    }
}

.hjelp-dialog-etikett,
.hjelp-dialog-forklaring,
.presenter-dialog-etikett,
.presenter-dialog-kodelabel,
.presenter-dialog-forklaring,
.presenter-dialog-status {
    margin: 0;
}

.hjelp-dialog-etikett,
.presenter-dialog-etikett {
    font-size: var(--font-size-small, 0.875rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-surface-text, canvasText) 65%, transparent);
}

.hjelp-dialog-tittel,
.presenter-dialog-tittel {
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.hjelp-dialog-forklaring,
.presenter-dialog-forklaring {
    color: color-mix(in srgb, var(--color-surface-text, canvasText) 80%, transparent);
}

.hjelp-dialog-liste {
    display: grid;
    gap: var(--space-small, 0.6em);
    margin: 0;
    padding: 0;
    list-style: none;
}

@scope (.hjelp-dialog-liste) {
    > li {
        display: grid;
        grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
        gap: var(--space-xs, 0.4em) var(--space-medium, 1em);
        align-items: start;
        padding: var(--space-small, 0.6em);
        border-radius: var(--radius-medium, 0.5em);
        background: color-mix(in srgb, var(--color-surface-text, canvasText) 5%, var(--color-surface, canvas));
    }

    strong {
        font-size: var(--font-size-small, 0.875rem);
    }

    span {
        color: color-mix(in srgb, var(--color-surface-text, canvasText) 82%, transparent);
    }
}

.presenter-dialog-kodelabel {
    font-size: var(--font-size-small, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-surface-text, canvasText) 65%, transparent);
}

.presenter-dialog-kode {
    margin: 0;
    font-size: clamp(2.2rem, 9vw, 4rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-align: center;

    &[data-venter="true"] {
        letter-spacing: normal;
        font-size: 1.2rem;
        font-weight: 500;
        color: color-mix(in srgb, var(--color-surface-text, canvasText) 72%, transparent);
    }
}

.presenter-dialog-qr {
    display: grid;
    place-items: center;
    padding: var(--space-small, 0.6em);
    border-radius: var(--radius-medium, 0.5em);
    background: color-mix(in srgb, var(--color-surface-text, canvasText) 5%, var(--color-surface, canvas));

    &[hidden] {
        display: none;
    }
}

@scope (.presenter-dialog-qr) {
    svg {
        inline-size: min(100%, 16rem);
        block-size: auto;
    }
}

.presenter-dialog-status {
    padding: var(--space-small, 0.6em);
    border-radius: var(--radius-medium, 0.5em);
    background: color-mix(in srgb, var(--slide-accent, canvasText) 12%, var(--color-surface, canvas));
}

.relay-statuslinje {
    position: fixed;
    inset-inline-end: 1rem;
    inset-block-end: 1rem;
    z-index: var(--z-overlay-top, 1001);
    margin: 0;
    padding: var(--space-small, 0.6em) var(--space-medium, 1em);
    max-inline-size: min(28rem, calc(100vw - 2rem));
    border-radius: var(--radius-medium, 0.5em);
    background: color-mix(in srgb, var(--color-surface-inverse, canvasText) 88%, var(--color-surface, canvas));
    color: var(--color-surface-inverse-text, canvas);
    box-shadow: var(--shadow-elevated, 0 0.3em 0.8em color-mix(in srgb, canvasText 20%, transparent));

    &:popover-open {
        display: block;
    }

    &[hidden] {
        display: none;
    }
}

@supports (position-anchor: --slide-nav-status-anchor) {
    .strip-omraade {
        anchor-name: --slide-nav-status-anchor;
    }

    .relay-statuslinje {
        position: fixed;
        inset: auto;
        position-anchor: --slide-nav-status-anchor;
        position-area: top right;
    }
}

@media (forced-colors: active) {
    .miniatyr-lenke {
        border-color: ButtonBorder;
        background: Canvas;
        color: CanvasText;

        &:is(:hover, :focus-visible) {
            outline-color: Highlight;
        }

        &[aria-current="true"] {
            border-color: Highlight;
        }
    }

    :is(.hjelp-dialog, .presenter-dialog) {
        border: var(--border-width, 1px) solid CanvasText;
        box-shadow: none;
    }

    :is(.hjelp-dialog-lukk, .presenter-dialog-lukk) {
        border: var(--border-width, 1px) solid ButtonBorder;
        background: ButtonFace;
        color: ButtonText;

        &:is(:hover, :focus-visible) {
            outline-color: Highlight;
        }
    }
}