/* ══════════════════════════════════════════════════════════════════════
   Skallet: det flate.css ikke dekker fordi skissen ikke hadde det —
   innlogging, brukermeny, tomme tilstander, detaljruten og de tabellene
   rapportskjermene bruker.
   ══════════════════════════════════════════════════════════════════════ */

.hoyre{display:flex; flex-direction:column; min-height:100vh; min-width:0}
main{flex:1; min-width:0}
#skjerm:focus{outline:none}

/* Hopp-lenken skal finnes for tastaturet og forsvinne for alle andre. */
.hopp{position:absolute; left:-9999px; z-index:100; padding:10px 16px;
  background:var(--panel-bg); color:var(--tekst); font-size:13px}
.hopp:focus{left:12px; top:12px}

:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--kobber);
  outline-offset:2px}

.vt.meg{display:flex; flex-direction:column; align-items:flex-start; gap:0;
  line-height:1.25; cursor:default}
.vt.meg b{font-weight:400; font-size:11.5px; color:var(--tekst)}
.vt.meg em{font-style:normal; font-family:"JetBrains Mono",monospace;
  font-size:9.5px; color:var(--svak)}
.vt.tast{color:var(--svak); cursor:default}

/* Språkvelgeren. Den er en ekte `select` og ikke en egenbygd meny: en
   nedtrekksliste med tre valg er nettopp det nettleseren allerede gjør — med
   tastaturnavigasjon, skjermleser og innfødt utseende på hver plattform.
   `appearance:none` tar bare bort systemkanten, ikke oppførselen. */
.vt.sprak{appearance:none; -webkit-appearance:none; background:none;
  border:none; color:var(--svak); font-family:"JetBrains Mono",monospace;
  font-size:10.5px; padding:6px 10px; cursor:pointer; max-width:15ch;
  text-overflow:ellipsis}
.vt.sprak:hover{color:var(--tekst)}
/* Selve listen tegnes av operativsystemet og arver ikke sidefargene. Uten
   dette blir svart på svart i mørkt tema på Windows. */
.vt.sprak option{background:var(--panel-bg); color:var(--tekst)}

.laster{color:var(--svak); font-size:13px; padding:26px 2px;
  font-family:"JetBrains Mono",monospace; letter-spacing:.1em}

.tom{padding:44px 2px; max-width:64ch}
.tom h2{font-weight:200; font-size:24px; margin:0 0 10px; text-wrap:balance}
.tom p{color:var(--demp); font-size:13.5px; margin:0; line-height:1.75}
.tom-linje{color:var(--svak); font-size:13px; padding:16px 2px}
.merknad{color:var(--svak); font-size:12.5px; line-height:1.7; margin:12px 0 0;
  max-width:80ch}

.rap-topp{display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin:0 0 16px; flex-wrap:wrap}
.rap-topp .eyebrow{margin:0}
.rap-topp .inn-merke{min-width:120px}

.delt-lik{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:16px; align-items:start}
.skatt-bokser{display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  gap:16px; margin-top:16px; align-items:start}

tr.klikkbar{cursor:pointer}
tr.klikkbar:focus-visible{outline:2px solid var(--kobber); outline-offset:-2px}

/* Detaljruten kommer inn fra høyre og legger seg over, uten å bytte skjerm:
   man er nesten alltid på vei videre til neste rad etterpå.

   `.bred` er for innhold som ikke lar seg smalne uten å bli verre: en
   QR-kode ved siden av nøkkelen sin, og ti gjenopprettingskoder som skal
   kunne leses av fra en armlengdes avstand. */
.detaljrute{position:fixed; top:0; right:0; bottom:0; width:min(560px,92vw); z-index:65;
  background:var(--panel-bg); box-shadow:-24px 0 60px -30px rgba(0,0,0,.65);
  display:flex; flex-direction:column; animation:skyv .32s var(--ease)}
@keyframes skyv{from{transform:translateX(30px); opacity:0}}
@media(prefers-reduced-motion:reduce){.detaljrute{animation:none}}
.dr-hode{display:flex; align-items:center; gap:12px; padding:16px 20px;
  border-bottom:1px solid var(--linje); font-size:14px}
.dr-hode span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.dr-lukk{background:none; border:none; color:var(--demp); font-size:20px;
  line-height:1; cursor:pointer; padding:2px 6px}
.dr-lukk:hover{color:var(--tekst)}
.dr-kropp{flex:1; overflow-y:auto; padding:8px 6px 26px}
.detaljrute.bred{width:min(760px,96vw)}
.detaljrute.bred .dr-kropp{padding:14px 22px 30px}

/* ── brukermenyen i topplinjen ──────────────────────────────────────────
 *
 * Menyen henger på <body> og ikke inne i .verktoy. Verktøylinjen har
 * clip-path med skråskåret hjørne, og clip-path klipper alt som ligger
 * inni — nøyaktig den samme fellen som er beskrevet over .klientvelger
 * lenger nede. Plasseringen settes av `sikkerhet.js` når menyen åpnes.
 */
.megmeny{position:fixed; z-index:70; min-width:225px; background:var(--panel-bg);
  box-shadow:0 22px 50px -24px rgba(0,0,0,.6); padding:6px 0;
  animation:fade .18s var(--ease)}
.megmeny::before{content:""; position:absolute; inset:0; padding:1px;
  background:var(--kant);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.meg-hode{padding:9px 17px 10px; border-bottom:1px solid var(--linje);
  margin-bottom:5px}
.meg-hode b{display:block; font-weight:400; font-size:13px}
.meg-hode em{display:block; font-style:normal; font-family:"JetBrains Mono",monospace;
  font-size:10.5px; color:var(--svak); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis}
.meg-punkt{padding:8px 17px; font-size:13px; cursor:pointer; position:relative;
  transition:background .2s}
.meg-punkt:hover,.meg-punkt:focus-visible{background:var(--kobber-flate);
  outline:none; color:var(--kobber-lys)}
.vt.meg{text-align:left}
@media(prefers-reduced-motion:reduce){.megmeny{animation:none}}

/* ══ INNLOGGING ══════════════════════════════════════════════════════ */

.inn-side{display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:24px; position:relative; z-index:1}
.inn-kort{width:min(420px,100%); position:relative; padding:36px 34px 30px;
  background:var(--glass); box-shadow:var(--skygge)}
.inn-kort::before{content:""; position:absolute; inset:0; padding:1px;
  background:var(--kant);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.inn-kort > *{position:relative}
.inn-kort .merke{padding:0 0 26px}
.inn-kort h1{font-weight:200; font-size:23px; margin:0 0 6px; letter-spacing:-.01em}
.inn-kort .under{color:var(--demp); font-size:13px; margin:0 0 24px; line-height:1.7}
.inn-kort label{display:block; margin-bottom:16px;
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.2em;
  color:var(--svak)}
.inn-kort .felt{margin-top:5px; font-family:Outfit,sans-serif; font-size:14px;
  letter-spacing:0}
.inn-kort .h{width:100%; justify-content:center; margin-top:8px}
.inn-feilmelding{margin:0 0 16px; padding:11px 14px; font-size:12.5px;
  color:var(--stopp); background:color-mix(in srgb,var(--stopp) 9%,transparent)}
.inn-fot{margin:22px 0 0; font-size:11.5px; color:var(--svak); line-height:1.75}

/* Andre halvdel av en feilmelding fra API-et: `hva_naa`. Den står dempet og
   på egen linje, fordi den svarer på et annet spørsmål enn den første. */
.inn-hva-naa{display:block; margin-top:5px; color:var(--demp); font-weight:300}

/* ── trinn to: koden ────────────────────────────────────────────────── */

/* Feltet er bredt, luftig og monospaset. Seks siffer og en kode med
   bindestreker leses begge best når tegnene har lik bredde, og et felt som
   ser ut som et kodefelt sier hva det vil ha uten en setning. */
.kodefelt{font-family:"JetBrains Mono",monospace !important; font-size:19px !important;
  letter-spacing:.22em; text-align:center; padding:9px 0}
.inn-kort .kodefelt{margin-top:8px}
.inn-hjelp{margin:0 0 10px; font-size:11.5px; color:var(--svak); line-height:1.7}
.inn-klokke{margin:0 0 14px; font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.13em; color:var(--demp)}
.inn-klokke.snart{color:var(--stopp)}
.inn-kort .inn-tilbake{width:100%; justify-content:center; margin-top:8px}

@media(max-width:860px){
  .detaljrute{width:100vw}
  /* Navnet ble skjult helt her før. Nå henger brukermenyen under det, og
     den er den eneste veien inn til sikkerhetsinnstillingene — så knappen
     blir stående, og det er e-postlinjen som viker for plassen. */
  .vt.meg em{display:none}
  .vt.meg{max-width:132px; overflow:hidden}
  .vt.meg b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

/* Klientvelgeren.

   Knappen har skråskåret hjørne, og `clip-path` klipper alt som ligger inni
   den — også en absolutt plassert nedtrekksliste. Listen må derfor være
   søsken til knappen, ikke barn. (En <div> inni en <button> er dessuten
   ugyldig HTML, så feilen var to feil.) */
.klientvelger{position:relative; flex:none}
.klientvelger .klient{width:100%}

/* Lesebredde.

   Uten et tak strekker en merknadslinje seg over 1700 piksler på en bred
   skjerm, og øyet mister linjen på vei tilbake. 1280 er romslig nok til en
   bilagstabell med seks kolonner og kort nok til at prosa er lesbar. */
main > #skjerm{max-width:1280px}

/* ══ KONTAKTER ═══════════════════════════════════════════════════════ */

.kt-topp{display:flex; align-items:flex-end; gap:16px; margin:0 0 16px}
/* Søkefeltet skal være stort nok til et firmanavn og ikke større. Et
   søkefelt som strekker seg over hele skjermen ser ut som en feil. */
.kt-topp .inn-merke{flex:0 1 380px; min-width:200px}
.kt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:16px;
  align-items:start}
/* Listen tar hele bredden til noe er valgt. */
.kt:not(:has(.kt-panel > *)){grid-template-columns:minmax(0,1fr)}
.kt-liste{max-height:calc(100vh - 260px); overflow:auto}
.kt-liste table{min-width:440px}
.kt-liste thead th{position:sticky; top:0; z-index:1; background:var(--natt)}
.kt-panel{position:sticky; top:16px}
.kt-panel:empty{display:none}
.kt-kort{padding:20px 22px 18px}
.kt-kort:focus{outline:none}

.kt-skjema{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px 16px; margin:6px 0 4px}
.kt-skjema .inn-merke.bred{grid-column:1/-1}
.kt-skjema .inn-merke{display:flex; flex-direction:column}

/* EHF-merket sier hvilke felter fakturaen faktisk avvises uten. Det er
   forskjell på «fint å ha» og «kommer ikke fram». */
.kt-merkerad{display:flex; align-items:center; gap:7px}
.kt-ehf{font-size:8.5px; letter-spacing:.16em; color:var(--kobber);
  border:1px solid var(--kobber); padding:1px 3px; line-height:1; flex:none}
.kt-hjelp{margin-top:4px; font-family:Outfit,sans-serif; font-size:11.5px;
  letter-spacing:0; color:var(--svak); text-transform:none}

.kt-roller{display:flex; gap:18px; margin-top:6px; flex-wrap:wrap}
.kt-rolle{display:flex; align-items:center; gap:7px; font-family:Outfit,sans-serif;
  font-size:13.5px; letter-spacing:0; color:var(--tekst); text-transform:none;
  cursor:pointer; margin:0}
.kt-rolle input{accent-color:var(--kobber); width:15px; height:15px; cursor:pointer}

tr.valgt > td{background:var(--kobber-flate)}

@media(max-width:1080px){
  .kt{grid-template-columns:1fr}
  .kt-liste,.kt-panel{max-height:none; position:static; overflow:visible}
}