/* ══════════════════════════════════════════════════════════════
   Inngangsflaten — alt som skjer før du er logget inn.

   ── Hvorfor denne filen ser ut som den gjør ────────────────────

   Layouten er Limens, og den er ikke en smakspreferanse. Design-regler
   R9a sier hvor varemerket skal stå på en autentiseringsflate: «orbit ved
   siden av glass-kortet på desktop, over kortet på mobil». Fram til M97
   sto orbiten på 26 px i topplinjen, og R9a lister «i mindre enn
   200×200px format» under *ikke bruk*. Nirona var den som lå utenfor
   standarden; Limen var den som fulgte den.

   Fargene, radiusene og skriften er Nironas egne. Radiusene er det ene
   stedet malen bevisst ikke følges: Limen kjører flate-settet (kort 22 px,
   pilleknapper 999), mens design-regler R5 navngir Nirona i
   instrumentgruppen — kort 8 px, knapper 4 px — og forbyr blanding
   innenfor én applikasjon.

   ── Hvorfor stilen ikke ligger i HTML-en ───────────────────────

   Den lå der en gang, som en streng i en `<style>`-blokk. Det virket i
   mockupen og ikke i produksjon: `style-src 'self'` får nettleseren til å
   kaste blokken uten å si fra, og siden ble servert helt ustilt i flere
   dager. Ingenting feilet. porter/csp.mjs kontrollerer nå både blokker og
   `style="…"`-attributter.
   ══════════════════════════════════════════════════════════════ */

/* ── Aurora-grunn med telemetrirutenett ────────────────────────
   Autentiserings-standarden R5 låser denne: en myk navy-til-teal-mesh med
   et 32-pikslers rutenett over. Rutenettet ligger på rundt 6 % alpha — det
   skal kjennes, ikke ses. To motiver er taket; her er det ett.

   Lyskilden er flyttet mot venstre i forhold til M97, slik at den faller
   bak varemerket i stedet for bak kortet. Et glasskort med lyset rett bak
   seg blir grått. */
body{min-height:100dvh;display:flex;flex-direction:column;
  background:
    linear-gradient(transparent 31px, var(--rutenett) 31px, var(--rutenett) 32px),
    linear-gradient(90deg, transparent 31px, var(--rutenett) 31px, var(--rutenett) 32px),
    radial-gradient(900px 480px at 22% 4%, var(--lysfall), transparent 66%),
    radial-gradient(760px 460px at 86% 86%, var(--lysfall-mot), transparent 70%),
    var(--side);
  background-size:32px 32px,32px 32px,auto,auto,auto}
@media (prefers-reduced-transparency: reduce){
  body{background:var(--side)}
}

/* ── Topplinjen ────────────────────────────────────────────────
   Lockup til venstre, brytere til høyre. Bryterne sto i kortfoten fram til
   M97; de hører hjemme her, over innholdet, fordi de gjelder hele skjermen
   og ikke det ene kortet. */
header{padding:20px clamp(20px,4vw,44px);display:flex;align-items:center;gap:16px}
header .merke{display:flex;align-items:center;gap:11px;text-decoration:none;
  min-height:var(--trykk);
  font-family:var(--disp);font-size:16px;font-weight:700;letter-spacing:-.02em}
header .merke .hvelvet{width:26px;height:26px;color:var(--blekk);flex:none}
header .merke .hvelvet svg{width:100%;height:100%;display:block}
header .merke .hus{color:var(--dempet);font-weight:600}
header .merke .strek{width:1px;height:15px;background:var(--haar-sterk);
  display:inline-block}
header .merke .ord{display:flex;align-items:center;gap:9px}
header .merke:hover .ord{opacity:.82}

/* ── Scenen: varemerket til venstre, kortet til høyre ─────────── */
main{flex:1;display:grid;align-items:center;justify-content:center;
  gap:clamp(28px,6vw,80px);padding:8px clamp(20px,4vw,44px) 40px;
  grid-template-columns:minmax(260px,420px) minmax(380px,452px)}

/* Varemerkespalten. 320 px på desktop, aldri under R9a-minstemålet på
   200 px — heller ikke på den minste mobilen, der den ligger på 232. */
.auth-merke{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.auth-orbit{width:clamp(220px,26vw,320px);aspect-ratio:1;color:var(--slekt)}
.auth-merke h2{font-family:var(--disp);font-size:clamp(25px,3vw,32px);
  font-weight:700;letter-spacing:-.03em;line-height:1.18;max-width:12em}
.auth-merke p{margin:12px 0 0;color:var(--dempet);font-size:var(--t-md);
  line-height:1.6;max-width:26em}
.auth-merke .under{font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--aksent-tekst);
  font-weight:600;margin:0 0 10px;display:block}

/* ── Boksen på mellomsidene ────────────────────────────────────
   Feilsider, bekreftelser og stegsider bruker `inngangsside()`, som ikke
   har noe kort. De får samme scene, men bare én spalte. */
main.enkel{grid-template-columns:minmax(0,520px)}
.bakgrunn,.glo{display:none}
.boks{width:100%;background:var(--kort);border:1px solid var(--haar);
  border-radius:var(--r-lg);padding:30px 32px;box-shadow:var(--skygge-hev)}
.boks h1{font-size:26px;margin:0 0 10px;font-weight:800}
.boks p{margin:0 0 14px;color:var(--dempet);font-size:15px}
.etikett{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--aksent-tekst);font-weight:600;display:flex;
  align-items:center;gap:10px;margin-bottom:14px}
.etikett::after{content:"";flex:1;height:1px;background:var(--haar)}
.boks label{display:block;font-size:13px;font-weight:700;margin:16px 0 7px}
.boks button,.boks .knapp,.boks a.idp{width:100%;min-height:50px;margin-top:18px;border:0;
  border-radius:var(--r-sm);background:var(--aksent);color:var(--paa-aksent);
  font:inherit;font-size:16px;font-weight:700;cursor:pointer;display:flex;
  align-items:center;justify-content:center;text-decoration:none}
.boks button:hover{filter:brightness(1.08)}
.liten{font-size:13.5px;color:var(--dempet);line-height:1.6;margin:14px 0 0}
.liten a{color:var(--aksent-tekst);font-weight:700}
.melding{margin:0 0 16px}

/* ══ Inngangskortet ═══════════════════════════════════════════════
   Ett kort for alt som handler om å komme inn: innlogging, opprettelse,
   aktivering. Samme form uansett hvor brukeren kom fra, slik at hun kjenner
   igjen stedet — og slik at «Logg inn» og «Prøv gratis» fører til det samme
   stedet med ulik fane, ikke til to ulike sider.

   Glass, som auth-standard R5 krever. Kanten bærer strukturen — det er
   instrumentsettets regel, og den gjelder også her: 1 px kantlinje, og en
   lysere kant øverst der lyset ville truffet.
   ═══════════════════════════════════════════════════════════════ */
.inngangskort{width:100%;background:var(--glass);
  /* Glasset er borte, ført som A13. Gjennomskinnelighet senker kontrasten
     nettopp der omgivelseslyset alt gjør det, og dette er flaten som
     oftest åpnes i et opplyst kontrollrom. `--glass` er nå en ren flate,
     så regelen under står uendret og kortet får kortflaten. */
  border:1px solid var(--haar);border-top-color:var(--glass-kant);
  border-radius:var(--r-lg);padding:26px 28px 24px;box-shadow:var(--skygge-hev)}
/* R6: glassflater slås av når brukeren har bedt om det. Uten dette står
   teksten på en uforutsigbar bakgrunn. */
@media (prefers-reduced-transparency: reduce){
  .inngangskort{background:var(--kort);backdrop-filter:none;
    -webkit-backdrop-filter:none}
}

/* Merkerunden inne i kortet er borte fra M98. Merket står i spalten til
   venstre nå, og to merker på samme skjerm er ett for mye. */
.inngangskort .topp{margin-bottom:18px}
.inngangskort .navn{font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--aksent-tekst);font-weight:600}
.inngangskort .undertekst{margin:8px 0 0;font-size:var(--t-sm);color:var(--dempet);
  line-height:1.6}

/* Fanene. To valg, aldri flere — «logg inn» og «kom i gang» er de eneste
   to tingene noen kommer hit for. */
.fanevalg{display:flex;background:var(--felt);padding:3px;border-radius:var(--r);
  gap:3px;margin-bottom:22px}
.fanevalg a{flex:1;min-height:var(--trykk);display:inline-flex;align-items:center;
  justify-content:center;border-radius:var(--r-xs);font-size:var(--t-sm);
  font-weight:700;color:var(--dempet);text-decoration:none}
.fanevalg a.on{background:var(--kort);color:var(--blekk);box-shadow:var(--skygge)}
.fanevalg a:hover:not(.on){color:var(--blekk)}

/* Den ene handlingen. Alltid full bredde, alltid først.
   Limen gir den et glød; her er glødet Nironas teal, og radiusen er
   instrumentsettets 4 px — ikke en pille. */
.inngangskort .hoved{width:100%;min-height:50px;margin:18px 0 0;border:0;
  border-radius:var(--r-sm);background:var(--aksent);color:var(--paa-aksent);
  font:inherit;font-size:var(--t-md);font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;box-shadow:var(--skygge-knapp)}
.inngangskort .hoved:hover{filter:brightness(1.08);
  box-shadow:var(--skygge-knapp-hev)}
.inngangskort .hoved svg{width:19px;height:19px}

/* Alternativene under. Kant, ikke fylt — det er ett hovedvalg per skjerm. */
.inngangskort .alt{width:100%;min-height:48px;margin:14px 0 0;padding:0 15px;
  background:var(--kort);color:var(--blekk);border:1px solid var(--haar-sterk);
  border-radius:var(--r-sm);font:inherit;font-size:var(--t-sm);font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:12px;text-decoration:none}
.inngangskort .alt:hover{border-color:var(--aksent);background:var(--felt)}
.inngangskort .alt .m{width:28px;height:28px;border-radius:var(--r-xs);flex:none;
  background:var(--felt);color:var(--dempet);display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;font-weight:700}
.inngangskort .alt .m svg{width:16px;height:16px}

.inngangskort .skille{display:flex;align-items:center;gap:12px;margin:18px 0;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dempet)}
.inngangskort .skille::before,.inngangskort .skille::after{content:"";flex:1;
  height:1px;background:var(--haar)}

.inngangskort label{display:block;font-size:var(--t-xs);font-weight:700;
  margin:0 0 7px;text-align:left}
.inngangskort .lenker{margin-top:16px;font-size:var(--t-xs);
  color:var(--dempet);line-height:1.7}
.inngangskort .lenker a{color:var(--aksent-tekst);font-weight:600;text-decoration:none}
.inngangskort .lenker a:hover{text-decoration:underline}
.inngangskort .melding{margin:0 0 16px;text-align:left}
.inngangskort .hjelp{font-size:var(--t-xs);color:var(--dempet);margin:7px 0 0;
  text-align:left;line-height:1.55}
.inngangskort .status{font-size:var(--t-xs);color:var(--dempet);margin:10px 0 0;
  min-height:1.2em}

/* ══ Autentiseringsskjermen ═══════════════════════════════════════
   Struktur, rekkefølge og copy er låst av CIRONs autentiserings-skjerm-
   standard. En kunde som bruker flere CIRON-applikasjoner skal møte samme
   skjerm overalt — det er muskelminne, ikke pynt.
   ═══════════════════════════════════════════════════════════════ */

/* Øyenbrynet: hva dette koster og hva vi ikke ber om. Først, fordi det er
   den innvendingen folk har før de leser noe annet. */
/* ── Beskyttelsestone bak tekst på glass (R6) ────────────────────
 *
 * Merket ligger på inngangskortet, som er en glassflate. I mørkt tema er
 * `--aksent-flate` halvgjennomsiktig, og lagt oppå glasset endte den på
 * #1D4046 — en flate som er lysere enn kortet under. Aksentteksten ga
 * **5,85:1** der, målt i nettleseren 27. september 2026, mot kravet 7:1.
 *
 * R6 sier hva som skal gjøres: «Glass-surfaces må ha protection-tint bak
 * tekst.» Flaten blandes derfor ned mot KORTET og ikke mot glasset: en
 * ugjennomsiktig `background-color` under, og tonen som et bilde over. Da er
 * bakgrunnen den samme som en tonet flate hvor som helst ellers i produktet.
 */
.auth-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  padding:6px 12px;border-radius:var(--r-pill);
  background-color:var(--kort);
  background-image:linear-gradient(var(--felt),var(--felt));
  color:var(--aksent-tekst);font-family:var(--mono);font-size:var(--t-mono);
  font-weight:600;letter-spacing:.09em;text-transform:uppercase}

.auth-h{font-family:var(--disp);font-size:23px;font-weight:700;margin:0 0 8px;
  letter-spacing:-.02em;line-height:1.2}
.auth-lead{margin:0 0 20px;font-size:var(--t-sm);color:var(--dempet);
  line-height:1.6}

/* Forklaringsblokken. To punkter, og ikke flere: det er de to tingene noen
   trenger å forstå før de trykker. */
.auth-forklar{background:var(--felt);border-radius:var(--r);padding:15px 17px;
  margin:0 0 20px;display:grid;gap:13px}
.auth-forklar div{display:flex;gap:11px;align-items:flex-start;
  font-size:var(--t-xs);line-height:1.6;color:var(--blekk)}
.auth-forklar svg{width:18px;height:18px;flex:none;color:var(--aksent-tekst);margin-top:1px}
.auth-forklar b{display:block;margin-bottom:2px}

/* SSO-raden. Like store, side ved side — ingen av dem er anbefalt framfor
   den andre, og en ulik størrelse ville sagt noe vi ikke mener.

   Merkene er ekte logoer fra public/assets/merker/, ikke symboler i
   ikonarket. Begrunnelsen står i merker/LES-MEG.md. */
.auth-sso{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 4px}
.auth-sso a{min-height:46px;display:flex;align-items:center;justify-content:center;
  gap:9px;background:var(--kort);color:var(--blekk);border:1px solid var(--haar-sterk);
  border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:600;text-decoration:none}
.auth-sso a:hover{border-color:var(--aksent);background:var(--felt)}
.auth-sso img{width:17px;height:17px;flex:none}

/* Tillitspanelet. To signaler, alltid de samme to, alltid nederst.
   To kolonner fra M98, som hos Limen: R7 låser ordlyden, ikke oppstillingen. */
.auth-tillit{margin-top:20px;padding-top:17px;border-top:1px solid var(--haar);
  display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-tillit div{display:flex;gap:9px;align-items:flex-start;
  font-size:var(--t-xs);line-height:1.5;color:var(--dempet)}
.auth-tillit svg{width:16px;height:16px;flex:none;color:var(--aksent-tekst);margin-top:2px}
.auth-tillit b{color:var(--blekk);display:block}

/* Språk og tema, i topplinjen. Standarden krever begge på skjermen — den som
   ikke leser norsk, skal ikke måtte logge inn for å finne bryteren. */
.auth-brytere{margin-left:auto;display:flex;gap:8px;align-items:center;
  flex-wrap:wrap}
.auth-bryter{display:inline-flex;background:var(--felt);border:1px solid var(--haar);
  border-radius:var(--r);padding:3px;gap:2px}
/* Både høyde OG bredde. «EN» og «NO» er to tegn: høyden ble 44 av regelen
   under, mens bredden ble 37. 2.5.5 Forbedret krever begge. */
.auth-bryter a,.auth-bryter button{min-height:var(--trykk);
  min-width:var(--trykk);padding:0 11px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;
  border-radius:var(--r-xs);font-family:var(--mono);font-size:var(--t-mono);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dempet);text-decoration:none;cursor:pointer}
.auth-bryter a.on,.auth-bryter button.on{background:var(--kort);color:var(--blekk);
  box-shadow:var(--skygge)}
.auth-bryter a:hover:not(.on),.auth-bryter button:hover:not(.on){color:var(--blekk)}

/* Invitasjonskoden. En lenke, ikke en knapp: de fleste har ikke en kode,
   og den som har det, leter etter den. */
.auth-invitt{margin:14px 0 0;font-size:var(--t-xs);
  color:var(--dempet);line-height:1.6}
.auth-invitt a{color:var(--aksent-tekst);font-weight:600;text-decoration:none}
.auth-invitt a:hover{text-decoration:underline}

/* ── Bunnlinjen ────────────────────────────────────────────────
   Samme bunnlinje som resten av produktet — den bærer opphavsretten,
   organisasjonsnummeret og varslingskanalen, og ingen av delene skal falle
   bort fordi skjermen ble penere. Den legges bare ned på én linje her. */
.bunn{padding:14px clamp(20px,4vw,44px) 24px;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px 18px;font-family:var(--mono);
  font-size:var(--t-mono);letter-spacing:.04em;color:var(--dempet)}
.bunn .bmerke{display:inline-flex;align-items:center;gap:8px;min-height:var(--trykk);
  text-decoration:none;color:var(--blekk)}
.bunn .bmerke .hvelvet{width:15px;height:15px;flex:none}
.bunn .bmerke .hvelvet svg{width:100%;height:100%;display:block}
.bunn .bsagt{display:none}
.bunn .blenker{display:flex;flex-wrap:wrap;gap:8px 16px}
.bunn a{color:var(--aksent-tekst);font-weight:600;text-decoration:none}
.bunn a:hover{text-decoration:underline}
.bunn .rett{margin-left:auto;font-weight:500}

/* ── Orbiten, R9a uendret ─────────────────────────────────────── */
/* Orbiten (R9a) bor i komponenter.css, som hver flate laster.
   Den sto her også, med feil sveipkurve. Se der. */


/* ── Mobil ─────────────────────────────────────────────────────
   R9a sier uttrykkelig «over kortet på mobil». Ingressen faller bort —
   den er salgstekst, og den som har åpnet innloggingen på telefonen, er
   ikke her for å bli solgt til. */
@media (max-width: 900px){
  main{grid-template-columns:minmax(0,452px);justify-items:center;
    gap:26px;padding-top:0}
  main.enkel{grid-template-columns:minmax(0,520px)}
  .auth-merke{align-items:center;text-align:center;gap:18px}
  .auth-merke h2{max-width:none;font-size:24px}
  .auth-merke p{display:none}
  /* `min(232px,58vw)` sto her. 58vw faller under R9a-gulvet på 200 px så
     snart skjermen er smalere enn 345 px: målt til 186 px ved 320 px, som
     er en iPhone SE. Regelen sier aldri under 200×200, og et gulv uttrykt i
     vw er ikke et gulv. `clamp` med 200 px som nedre grense er det. */
  .auth-orbit{width:clamp(200px,58vw,232px)}
}
@media (max-width: 460px){
  .auth-tillit{grid-template-columns:1fr}
  .auth-sso{grid-template-columns:1fr}
  header{flex-wrap:wrap;gap:12px}
  .auth-brytere{margin-left:0;width:100%}
  .bunn .rett{margin-left:0;width:100%}
}

/* ── Kortnavn-feltet (M110) ──────────────────────────────────────
   Flyttet hit fra forsiden. Der sto det som en egen stripe over heroen,
   rett under «Logg inn» og «Kom i gang» i topplinjen — et felt som
   gjentar knappen over seg er ikke en portal, det er støy.

   Her er det svaret på det den som trykket «Logg inn» faktisk lurer på:
   hvor er min virksomhet? Feltet og halen leser som én adresse, og derfor
   står halen inne i rammen og ikke under den. */
.kortnavn{display:flex;align-items:stretch;margin:0}
.kortnavn .knfelt{display:flex;align-items:center;background:var(--felt);
  border:1px solid var(--haar-sterk);border-right:none;
  border-radius:var(--r) 0 0 var(--r);padding-right:11px;flex:1;min-width:0}
.kortnavn input[type="text"]{font-family:var(--sans);font-size:var(--t-sm);
  background:transparent;border:none;color:var(--blekk);padding:0 4px 0 13px;
  height:var(--trykk);flex:1;min-width:0}
.kortnavn input[type="text"]::placeholder{color:var(--svak)}
.kortnavn .knhale{font-size:var(--t-xs);color:var(--svak);white-space:nowrap}
.kortnavn .knapp{border-radius:0 var(--r) var(--r) 0;height:var(--trykk)}
.kortnavn:focus-within .knfelt{border-color:var(--aksent)}
.knfeil{font-size:var(--t-xs);color:var(--rod-tekst);margin:9px 0 0}
.knhjelp{margin:9px 0 0}