/* :host er selve <lm-slide>-elementet. Hver HTML-fil i en presentasjon har
   nøyaktig én <lm-slide> (se README.md/slide.js for hvorfor - flerfils-
   modellen er det som gjør View Transitions API-baserte overganger mulig
   helt uten JavaScript), så den skal alltid vises - ingen :target-logikk
   trengs her. */
:host {
    display: grid;
    position: fixed;
    inset: 0;
    place-items: center;
    background: var(--color-surface, canvas);
    /* Gjør :host til en query-container for cqi-/cqb-enhetene under (size,
       ikke bare inline-size, siden .flate bruker begge - cqb trengs for
       block-size-uttrykket). :host fyller alltid hele viewporten (fixed +
       inset: 0) uansett om den vises som en full presentasjonsside eller
       inni en liten <iframe>-miniatyr (filmstripe i <lm-slide-nav>), så
       container-målene er identiske med det 100vw/100vh ville gitt i
       førstnevnte tilfelle - trygt å size-containe siden :host alltid har
       en eksplisitt størrelse fra inset: 0, ikke innhold-avhengig størrelse. */
    container-type: size;

    @media print {
        display: block !important;
        position: static;
        inline-size: 100%;
        block-size: 100vh;
        break-after: page;
        break-inside: avoid;
    }
}

/* Selve slide-flaten - fast 16:9-forhold, skalert til å fylle vinduet så
   mye som mulig uten å bli beskåret (samme teknikk som object-fit: contain,
   men uten bilde - min()-uttrykket velger bredde- eller høyde-begrensning
   avhengig av hvilken som treffer først). */
.flate {
    position: relative;
    inline-size: min(100cqi, 100cqb * 16 / 9);
    block-size: min(100cqb, 100cqi * 9 / 16);
    box-sizing: border-box;
    overflow: hidden;
    background: var(--slide-bg, canvas);
    color: var(--slide-text, canvasText);
    /* cqi (container query inline-size) i stedet for vw - matematisk
       identisk med vw når slide-en vises i full størrelse (:host fyller da
       hele viewporten), men skalerer i tillegg riktig ned inni en liten
       <iframe>-miniatyr, der :hosts egen container-bredde er iframens
       ~140px, ikke hele sidens vw. Uten dette henger klammens faste
       rem-gulv (1rem/1.5rem) seg fast så snart cqi/vw blir mindre enn
       gulvet, og teksten/paddingen blir absurd stor i miniatyren. Gulvet
       (rem-verdiene) er derfor kun slått på fra 300px containerbredde og
       oppover - godt under de minste ekte telefonskjermene, men godt over
       filmstripens ~140px, slik at ekte presentasjonsvisning fortsatt får
       et lesbart tekst-/luft-gulv, mens miniatyrer skalerer helt fritt. */
    padding: var(--slide-flate-padding-compact, 5cqi);
    font-size: var(--slide-flate-font-size-compact, 2cqi);

    @media print {
        inline-size: 100%;
        block-size: 100%;
    }
}

@container (min-width: 300px) {
    .flate {
        padding: var(--slide-flate-padding, clamp(1.5rem, 5cqi, 5rem));
        font-size: var(--slide-flate-font-size, clamp(1rem, 2cqi, 1.6rem));
    }
}

/* Usynlige klikksoner langs venstre/høyre kant for navigasjon - kun kantene,
   ikke hele flaten, slik at innhold i midten (tekst, lenker, iframes) fortsatt
   kan markeres/klikkes/fokuseres normalt. Uten href (ingen nabo i den
   retningen) er de ikke fokuserbare/klikkbare i det hele tatt. */
.klikksone {
    position: absolute;
    inset-block: 0;
    inline-size: var(--slide-klikksone-bredde, 12%);
    outline-offset: -0.3em;
    cursor: default;

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

    &.klikksone-forrige {
        inset-inline-start: 0;
    }

    &.klikksone-neste {
        inset-inline-end: 0;
    }

    @media (forced-colors: active) {
        &:focus-visible {
            outline-color: Highlight;
        }
    }

    @media print {
        display: none;
    }
}