/*
    Global bas för portalen.

    Tokens (färger, linjer, skuggor, fokusmarkering och täthet) skrivs ut som
    CSS-variabler av ThemeProvider enligt ADR 0003 och 0005 — de hör inte hemma här,
    och inga färgvärden får skrivas i komponenternas scoped CSS.

    Reglerna här får bara referera variabler, aldrig egna färgvärden. Att filen är global
    ändrar inte regeln.
*/

/*
    ── Typsnitten ──────────────────────────────────────────────

    Montserrat för rubriker, Inter för gränssnittstext, som i Prototypen.

    Det här saknades helt. `--lk-font-display` och `--lk-font-ui` namngav båda familjerna,
    med `"Segoe UI"` som reserv, men ingenting laddade dem — `document.fonts.size` var 0.
    Följden var att hela portalen renderades i reservtypsnittet på varje maskin som inte
    råkade ha familjerna installerade. Mätt med canvas: `Inter` och `Montserrat` gav exakt
    samma textbredd som ett påhittat familjenamn, medan Prototypen gav en annan. Det syns
    inte som ett fel någonstans — sidan renderar, bara i fel typsnitt.

    Filerna ligger lokalt i stället för hos Google Fonts, som Prototypen använder
    (`portal/src/LykerKey.Portal/Components/App.razor:18`). Beslut av @martin 2026-09-02:
    inga anrop från användarens webbläsare till en tredjepart bara för att hämta ett
    typsnitt. De är konverterade till woff2 ur de TTF-filer som redan låg i repot, i
    `LykerKey.Keybox.SharedUI/wwwroot/fonts/`, så ingenting är hämtat utifrån. Licenserna
    följer med som OFL-*.txt, vilket OFL kräver.

    **Variabla filer, inte statiska vikter.** Två filer på 542 KB i stället för sju på 759 KB,
    och — det som avgjorde — Inters `opsz`-axel följer med. Google Fonts serverar den variabla
    Inter, så textens bredd ändras med grovleken. Med den statiska `Inter_18pt` mätte samma
    sträng 187,3 px mot Prototypens 190,5. Med den variabla: 190,5 mot 190,5. Montserrat
    stämde redan, och blir en fil i stället för tre.

    `font-display: swap` så att text syns direkt i reservtypsnittet och byts när filen
    landat — hellre det än en tom sida medan filerna hämtas.
*/

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-var.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/montserrat-var.woff2") format("woff2-variations");
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    /* Canvas målas av ThemeProvider. Här sätts den bara så att ytan under skalet
       får rätt färg när sidan scrollas förbi innehållets slut. */
    background: var(--lk-canvas, #F7F8FB);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--lk-magenta-ink);
}

/*
    tabindex="-1" undantas medvetet.

    FocusOnNavigate i Routes.razor flyttar fokus till sidans h1 efter varje navigering, så
    att den som läser med skärmläsare eller tangentbord landar i det nya innehållet i stället
    för att stå kvar där den gamla sidan slutade. Blazor gör rubriken fokuserbar genom att
    sätta tabindex="-1" på den — attributet står alltså inte i vår markup och går inte att ta
    bort där.

    Följden var att [tabindex] fångade rubriken och målade fokusringen runt varje h1 vid
    navigering. Ett element med tabindex="-1" går inte att nå med tabb; det fokuseras bara
    programmatiskt, och då finns inget tangentbordsfokus att visa. WCAG 2.4.7 gäller det som
    är tangentbordsstyrt, så undantaget tar inte bort någon markering som krävs.

    Samma symptom löstes i LykerKey.Keybox.MauiApp genom att ta bort FocusOnNavigate helt.
    Det är rätt där — en pekskärm utan tangentbord förlorar ingenting — men fel här: portalen
    styrs med tangentbord, och rubrikfokus är det enda som säger att sidan har bytts.

    tabindex="0" behåller sin ring. Villkorstexten i LoanApprovalPage är ett sådant element
    och ska ha den.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--lk-focus-ring-width) var(--lk-focus);
    border-radius: var(--lk-radius-sm);
}

/* Scrollbar i portalens manér, som .lk-scroll i designen. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--lk-line-strong) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: var(--lk-line-strong);
    border-radius: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/*
    Blazors standardmarkör för tappad anslutning. ADR 0001 pekar ut det som något som
    måste synas: portalen kräver uppkoppling, och användaren ska förstå varför sidan
    slutade svara i stället för att tro att den hängt sig.

    Texten kommer från Blazor och går inte via resursfilerna. Att ersätta den med en egen,
    översatt dialog är upplagt som issue.
*/
#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--lk-space-6);
    background: rgb(0 0 0 / 45%);
    color: var(--lk-text);
    font-family: var(--lk-font-ui);
    text-align: center;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}