/* ══════════════════════════════════════════════════════════════════════
   Det arbeidslisten, fakturaen og banken trenger utover flate.css.

   Ingenting her definerer en farge selv. Alt henter fra variablene i
   flate.css, slik at lys og mørk snur seg samtidig — en skjerm som bare
   halvveis følger med når temaet skifter, ser ødelagt ut i den ene av dem.

   Regelen for hva som havner her: er klassen felles for hele flaten, hører
   den hjemme i flate.css. Er den noe bare disse tre skjermene trenger,
   ligger den her.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ felles ══════════════════════════════════════════════════════════ */

/* Fanene i flate.css er lagt for topplinjen og har dens sidepadding.
   Inne i en skjerm skal de flukte med resten av innholdet. */
main .faner{padding:0; margin:6px 0 14px}
main .faner::after{left:0; right:0}

.arb-topp,.fak-topp,.bank-topp{margin:0 0 16px}

/* Tom-tilstand: sier hva som mangler og hva man gjør, ikke «ingen data». */
.tom{opacity:.92}
.tom::after{background:linear-gradient(180deg,transparent,var(--linje),transparent)}
.tom-tittel{font-size:15px; margin-bottom:5px}
.tom .o-hvorfor{margin:0}

/* Kortet som blir stående igjen etter en handling. Det holder plassen sin,
   slik at listen ikke hopper mens man arbeider seg nedover. */
.ferdig::after{background:linear-gradient(180deg,transparent,var(--ok),transparent)}
.ferdig .o-hvorfor{margin:0}

.hva-trengs{font-size:13px; color:var(--demp); margin:11px 0 0; max-width:90ch}
.hva-trengs b{color:var(--tekst); font-weight:400}
.kilder{margin:7px 0 0}
.losning{font-size:11px}
.losning-merknad{margin:9px 0 0; max-width:90ch; font-size:12.5px}
/* Hjemmelen skal ikke strekke seg over halve raden når teksten er lang. */
.handlinger .hjemmel{max-width:46ch; text-align:right; line-height:1.5}

/* Nøkkel/verdi-par, brukt både i forslaget og i fakturafakta. */
.f-par,.fak-par{display:inline-flex; align-items:baseline; gap:7px;
  margin:0 16px 4px 0}
.f-par .dim,.fak-par .dim{font-size:10px; letter-spacing:.16em;
  text-transform:uppercase}
.f-verdi{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums}
/* Scoped, slik at flate.css beholder siste ord om skrift og marg. */
.forslag .f-valg{display:flex; flex-wrap:wrap}

/* ══ arbeidslisten ═══════════════════════════════════════════════════ */

.liste{display:flex; flex-direction:column}

/* ── «modellen vet ikke» ──────────────────────────────────────────────
   Den viktigste tilstanden i systemet, og den skal ikke låne noe fra
   feilspråket. Ingen rød kant, ingen advarselsfarge: en rolig flate med
   sin egen stiplede ramme, som sier at her er det et hull, ikke en feil.
   Stiplingen er hele signalet — noe er ikke fylt ut ennå.               */
.vet-ikke{position:relative; padding:12px 15px; margin-top:2px;
  background:linear-gradient(160deg,rgba(150,166,191,.055),rgba(150,166,191,.012))}
.vet-ikke::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1px dashed var(--linje)}
.vi-hode{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.vi-hode span{font-family:"JetBrains Mono",monospace; font-size:10px;
  letter-spacing:.17em; color:var(--demp)}
.vi-hode::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--linje),transparent)}
.vi-tekst{font-size:14px; color:var(--tekst); margin:0 0 7px; max-width:86ch;
  font-weight:300}
.vi-trengs{font-size:13px; color:var(--demp); margin:0 0 6px; max-width:86ch}
.vi-trengs b{color:var(--tekst); font-weight:400}
.vi-regel{font-size:12.5px; color:var(--svak); margin:0; max-width:86ch}
.vi-hjemmel{margin:8px 0 0; text-align:left}

/* ── svar på ett kort: utsettelse og avvisning ─────────────────────── */
.svarskjema{margin-top:12px; padding:12px 14px; position:relative;
  background:var(--kobber-flate)}
.svarskjema::before{content:""; position:absolute; inset:0; padding:1px;
  background:var(--kobber-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}
.ss-hode{font-family:"JetBrains Mono",monospace; font-size:10px;
  letter-spacing:.17em; color:var(--kobber); margin-bottom:9px}
.ss-felt{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.ss-felt > *{position:relative}

/* ── gjennomgangen: simulering først, så bekreftelse ───────────────── */
.kjor{margin-bottom:16px}
.kjor-flate::after{background:linear-gradient(180deg,transparent,var(--kobber),transparent);
  box-shadow:var(--kobber-glo)}
.kjor-tall{display:flex; flex-wrap:wrap; gap:14px 34px; margin:14px 0 4px}
.kjor-tall .v{font-size:22px}
.kjor-stopp{font-size:13px; color:var(--stopp); margin:8px 0 0}
.kjor-stopp b{font-weight:400}
.kjor-utfall{margin-top:12px; max-height:340px; overflow-y:auto}
.ku-hode{font-family:"JetBrains Mono",monospace; font-size:10px;
  letter-spacing:.2em; color:var(--svak); padding:12px 0 5px}
.ku-rad{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:14px; padding:6px 0 6px 11px; position:relative; font-size:12.5px}
.ku-rad::before{content:""; position:absolute; left:0; top:5px; bottom:5px;
  width:2px; background:var(--linje)}
.ku-lost::before{background:var(--ok)}
.ku-lagt_fram::before{background:var(--kobber)}
.ku-ikke_vurdert::before{background:var(--demp)}
.ku-feilet::before{background:var(--stopp)}
.ku-tittel{color:var(--tekst)}
.ku-melding{color:var(--svak)}

/* ══ faktura ═════════════════════════════════════════════════════════ */

/* Listen tar hele bredden til noe er valgt. Halve skjermen reservert til
   en tom rute er halve skjermen kastet bort, og det er nettopp i listen man
   står lengst. `.fak-panel:empty{display:none}` gjør resten. */
.fak:not(:has(.fak-panel > *)){grid-template-columns:minmax(0,1fr)}
.fak{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:16px; align-items:start}
/* Listen ruller i sin egen rute. Med noen hundre fakturaer blir siden ellers
   så lang at fakturaen man ser på forsvinner ut av skjermen. */
.fak-liste{max-height:calc(100vh - 250px); overflow:auto}
.fak-liste table{min-width:660px}
.fak-liste thead th{position:sticky; top:0; z-index:1; background:var(--natt);
  padding-top:8px}
.fak-liste td:nth-child(2),.fak-liste td:nth-child(6){white-space:nowrap}
.fak-nr{font-family:"JetBrains Mono",monospace}
td.forfalt,.forfalt{color:var(--stopp)}
/* Panelet følger med når man ruller i listen. */
.fak-panel{position:sticky; top:16px; max-height:calc(100vh - 250px);
  overflow:auto}
.fak-panel:empty{display:none}

.fak-detalj .rull,.fak-skjema .rull{margin-top:12px}
.fak-fakta{display:flex; flex-wrap:wrap; margin:8px 0 4px}
.fak-sum{margin-top:14px}
.fak-sum .trinn{grid-template-columns:1fr 190px; padding:9px 0}
.fak-sum .trinn::after{left:0}
.fak-merknad{margin:8px 0 0; max-width:86ch; font-size:12px}

/* Linjene i skjemaet. Samme rutenett som bilag.js bruker på konteringen:
   én rad per linje, og alltid en tom nederst. */
.fl-rad{display:grid; gap:8px; align-items:center;
  grid-template-columns:minmax(0,2.4fr) 92px 96px 110px 120px 110px 26px;
  padding:3px 0}
.fl-hode{font-family:"JetBrains Mono",monospace; font-size:10px;
  letter-spacing:.15em; color:var(--svak); padding:12px 0 6px}
.fl-hode .h,.fl-rad .h{text-align:right}
.fl-linje .tall{font-family:"JetBrains Mono",monospace;
  font-variant-numeric:tabular-nums; font-size:13px}
.fl-kropp{display:flex; flex-direction:column}

/* ── EHF: originalen og valideringen ───────────────────────────────── */
.ehf-boks:empty{display:none}
.ehf-hode{font-family:"JetBrains Mono",monospace; font-size:10px;
  letter-spacing:.2em; color:var(--svak); margin:16px 0 7px}
pre.ehf{margin:0; padding:14px 16px; max-height:420px; overflow:auto;
  background:var(--dok-bg); box-shadow:var(--skygge);
  font-family:"JetBrains Mono",monospace; font-size:11.5px; line-height:1.7;
  color:var(--demp); white-space:pre; tab-size:2}
pre.ehf:focus-visible{outline:1px solid var(--kobber); outline-offset:2px}

.avvik{margin-top:16px}
.avvik-hode{font-family:"JetBrains Mono",monospace; font-size:10px;
  letter-spacing:.2em; color:var(--svak); margin:14px 0 6px}
.avvik-rad{display:grid; grid-template-columns:180px minmax(0,1fr);
  gap:6px 14px; padding:8px 0 8px 11px; position:relative; font-size:13px}
.avvik-rad::before{content:""; position:absolute; left:0; top:7px; bottom:7px;
  width:2px}
.avvik-rad.fatal::before{background:var(--stopp)}
.avvik-rad.advarsel::before{background:var(--vent)}
.avvik-regel{font-family:"JetBrains Mono",monospace; font-size:11px;
  color:var(--tekst); word-break:break-all}
.avvik-melding{color:var(--demp)}
.avvik-sted{grid-column:2; font-size:10.5px; word-break:break-all}

/* ══ bank ════════════════════════════════════════════════════════════ */

.bank-status{margin-bottom:16px}
.bank-avstem{margin-top:10px}
.bank-avstem .trinn{grid-template-columns:1fr 200px; padding:8px 0}
.bank-avstem .trinn::after{left:0}
.bank-velger{display:flex; align-items:flex-end}
.bank-liste{display:flex; flex-direction:column}

/* Transaksjonen til venstre, forslaget til høyre. Skillet er en linje og
   ikke en ramme: de to sidene er ett arbeidsstykke, ikke to kort. */
.bank-kolonner{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:22px; position:relative}
.bank-kolonner::before{content:""; position:absolute; left:calc(42.5% - 11px);
  top:0; bottom:0; width:1px;
  background:linear-gradient(180deg,transparent,var(--linje) 18%,var(--linje) 82%,transparent)}
.bank-venstre .o-topp,.bank-hoyre .o-topp{margin-bottom:8px}
.bank-tekst{font-size:14.5px; margin-bottom:8px}
.bank-fakta{display:flex; flex-wrap:wrap}
.bank-type{margin-left:auto; font-size:11px}
.bank-hoyre .o-hvorfor{margin-bottom:10px}

.bank-treff{margin-top:2px}
.bank-post{display:grid; gap:4px 12px; align-items:baseline;
  grid-template-columns:minmax(0,1.5fr) auto auto minmax(0,auto) 68px 118px auto;
  padding:7px 0; font-size:13px; position:relative}
.bank-post::after{content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:linear-gradient(90deg,var(--linje),transparent 78%)}
.bp-navn{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bp-nr,.bp-konto{font-size:11.5px}
.bp-forfall{font-size:11px}
.bp-belop{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums}
.bp-avvik{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums;
  color:var(--vent)}

/* Flere kandidater: brukeren velger. Radioknappen er ekte, slik at
   piltastene flytter mellom postene uten at vi finner opp noe eget. */
.bank-valg{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px;
  align-items:center; cursor:pointer; padding:2px 6px 2px 4px;
  transition:background .25s var(--ease)}
.bank-valg:hover{background:var(--hover)}
.bank-valg:focus-within{background:var(--kobber-flate)}
.bank-radio{accent-color:var(--kobber); width:14px; height:14px; margin:0}
.bank-avvikstekst{margin:10px 0 0; font-size:13px; color:var(--demp);
  max-width:88ch}
.bank-avvikstekst b{color:var(--tekst); font-weight:400}
.bank-diff{margin-top:10px}
.bank-direkte{margin-top:4px}
/* En samlebetaling gjør opp flere poster på én gang. Alternativet er da hele
   gruppen, ikke én rad i den, og summen står under så valget kan
   etterprøves mot beløpet banken faktisk overførte. */
.bank-valg-poster{min-width:0}
.bank-post-sum{grid-template-columns:minmax(0,1fr) 118px;
  border-top:1px solid var(--linje); font-size:12px}
.bank-post-sum::after{display:none}
.merk-varsel{margin:8px 0 0; max-width:88ch}
.bank-direkte .inn-topp{margin-bottom:6px}

/* ══ mva-melding og a-melding ════════════════════════════════════════
   To skjermer som viser en hel periodetabell øverst og den valgte perioden
   under. Raden man har valgt må være tydelig uten å bli et eget kort: det
   er den samme tabellen man skal videre i, rad for rad.                  */

/* Tabellflatene skal ikke skli sidelengs når musen er over dem. Nudgingen
   i .flate:hover er laget for kort man plukker fra en liste, ikke for en
   tabell man peker i. */
.mva-aar:hover,.mva-termin:hover,.am-aar:hover,.am-forfall:hover,
.am-virksomhet:hover,.am-melding:hover,.am-frist:hover,.am-kodeverk:hover{
  transform:none}

/* Den valgte raden: kobbermerke i margen og en rolig flate. Fargen legges
   på cellene og ikke på raden, fordi cellene har sin egen bunnlinje som
   ellers ville blitt overmalt. */
tr.valgt > td{background-color:color-mix(in srgb,var(--kobber) 8%,transparent);
  color:var(--tekst)}
tr.valgt > td:first-child{box-shadow:inset 2px 0 0 var(--kobber)}

.mva-aar table,.am-aar table{min-width:760px}
.am-virksomhet table{min-width:820px}
.mva-aar .merknad,.am-aar .merknad{max-width:96ch}
.mva-forklaring:empty{display:none}
.mva-forklaring{margin-top:14px}

/* Periodevelgeren bærer «2026-07 · juli 2026» og trenger plass til det. */
.am-velger{min-width:250px}

.am-handlinger{margin-top:0}
.am-handlinger .h[disabled]{opacity:.42; cursor:not-allowed; box-shadow:none}
.am-bekreft{margin-bottom:10px}
.am-bekreft .o-hvorfor{max-width:92ch; margin-bottom:0}
.am-frist .o-hvorfor{margin-bottom:0}
.am-melding .o-hvorfor{margin-bottom:6px}

/* Avvikene fra a-meldingen er hele setninger, ikke XPath-er. De skal brytes
   mellom ord — .avvik-sted brekker hvor som helst, og det er riktig for en
   sti og galt for en forklaring. */
.avvik-detalj{grid-column:2; margin:2px 0 0; font-size:12.5px;
  color:var(--demp); line-height:1.7; max-width:96ch}

/* XML-en og oppstillingen: samme rute som EHF-originalen, fordi de gjør
   det samme — viser filen som faktisk leveres, uten å pynte på den. */
pre.xml-rute{margin:0; padding:14px 16px; max-height:440px; overflow:auto;
  background:var(--dok-bg); box-shadow:var(--skygge);
  font-family:"JetBrains Mono",monospace; font-size:11.5px; line-height:1.7;
  color:var(--demp); white-space:pre; tab-size:2}
pre.xml-rute:focus-visible{outline:1px solid var(--kobber); outline-offset:2px}
.am-rute,.mva-xml{margin-bottom:10px}
.am-rute .merknad,.mva-xml .merknad{margin-top:8px}

/* ══ innboksen for innkommende bilag ═════════════════════════════════
   Tre spalter i praksis: hva som har kommet inn, dokumentet, og
   konteringen. Den midterste og den høyre er `.delt` fra flate.css — det
   samme oppsettet bilagsføringen bruker, fordi det er den samme
   handlingen: lese et papir og skrive et bilag av det.               */

.innb{display:grid; grid-template-columns:minmax(250px,320px) minmax(0,1fr);
  gap:16px; align-items:start}
/* Uten et valgt mottak er høyre spalte tom, og en tom spalte er halve
   skjermen kastet bort. Da tar listen hele bredden. Samme grep som `.fak`. */
.innb:not(:has(.innb-panel > *)){grid-template-columns:minmax(0,1fr)}
/* En rute i et rutenett nekter å bli smalere enn innholdet sitt uten dette.
   Et langt filnavn eller en XML-linje uten mellomrom sprenger da hele
   skjermen sidelengs. */
.innb-innhold,.innb-panel,.innb-venstre,.innb-dok{min-width:0}
.innb-adressefelt{margin-bottom:20px}
.innb-adressefelt:empty{display:none}

/* Adressen skal kunne merkes med ett klikk og leses høyt over et bord. */
.innb-adresse{font-family:"JetBrains Mono",monospace; font-size:15px;
  color:var(--kobber-lys); user-select:all; word-break:break-all}
.innb-adressekort .o-topp{gap:14px}
.innb-adressekort .kn-liten{margin-left:auto}

/* ── opplasting ──────────────────────────────────────────────────────
   Stiplet ramme, som `.vet-ikke`: et felt som venter på noe, ikke en
   knapp som gjør noe.                                                 */
.innb-slipp{position:relative; padding:14px; margin-bottom:12px;
  text-align:center; background:var(--linje-svak);
  transition:background .25s var(--ease)}
.innb-slipp::before{content:""; position:absolute; inset:0;
  pointer-events:none; border:1px dashed var(--linje)}
.innb-slipp.over{background:var(--kobber-flate)}
.innb-slipp.over::before{border-color:var(--kobber)}
.innb-slipp-tekst{margin:0 0 9px; font-size:13px; color:var(--demp)}
.innb-fil{padding:0; border-bottom:none; font-size:12px; color:var(--demp);
  cursor:pointer}
.innb-fil:hover{border-bottom-color:transparent}
.innb-fil::file-selector-button{font:inherit;
  font-family:"JetBrains Mono",monospace; font-size:11.5px;
  letter-spacing:.08em; color:var(--demp); background:var(--glass);
  border:none; padding:6px 12px; margin-right:10px; cursor:pointer;
  transition:color .3s var(--ease)}
.innb-fil::file-selector-button:hover{color:var(--tekst)}
.innb-filter{margin-bottom:10px}

/* ── listen ──────────────────────────────────────────────────────── */
.innb-liste{display:flex; flex-direction:column;
  max-height:calc(100vh - 340px); overflow-y:auto}
.innb-rad{padding:11px 14px; cursor:pointer}
.innb-rad:focus-visible{outline:1px solid var(--kobber); outline-offset:1px}
/* Den valgte raden får en HEL kobberstripe. `.menneske` — karantene — har
   en myk gradient med glød, og de to skal kunne stå ved siden av hverandre
   uten å bety det samme. */
.innb-rad.peker{background:var(--kobber-flate)}
.innb-rad.peker::after{background:var(--kobber); box-shadow:var(--kobber-glo)}
.innb-navn{min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.innb-radlinje{display:flex; align-items:baseline; gap:10px; margin-top:4px}
.innb-belop{margin-left:auto; font-size:13px}
.innb-varsel{color:var(--kobber); font-size:12px; margin:7px 0 0;
  max-width:88ch}
.innb-mangeltall{margin:6px 0 0}
.innb-smaatekst{font-size:12px; margin:8px 0 0}

/* ── dokumentet ──────────────────────────────────────────────────── */
.innb-delt{min-height:calc(100vh - 300px)}
.innb-filnavn{min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--demp)}
.innb-last{margin-left:auto; flex:none}
.innb-dokkropp{display:flex; flex:1; min-height:0; overflow:auto}
.innb-ramme{flex:1; width:100%; min-height:520px; border:none}
.innb-bilde{max-width:100%; height:auto; margin:auto; display:block}
/* Rutens egen ramme er allerede `.dok`; en skygge til inni den blir et kort
   inne i et kort. */
.innb-tekst{flex:1; max-height:none; box-shadow:none; width:100%}
.innb-dokmelding{padding:20px 24px; margin:0}

/* ── konteringen ─────────────────────────────────────────────────── */
.innb-kontering{max-height:calc(100vh - 300px); overflow-y:auto}
/* Rutenettet fra bilagsføringen krever 756 piksler før det begynner å
   klippe. Her deler konteringen plassen med dokumentet OG med listen, og
   får sjelden mer enn seks hundre. Kolonnene er derfor de samme, men
   smalere — det er tallkolonnene som må flukte, ikke bredden som må være
   den samme som på inntastingsskjermen. */
.innb-kontering .inn-rad{gap:8px;
  grid-template-columns:minmax(120px,1.6fr) minmax(90px,1.2fr) 62px 104px 104px 24px}
.innb-fakta{display:flex; flex-wrap:wrap; margin:9px 0 6px}
.innb-mangler{margin:12px 0}
.innb-avvikliste{margin:12px 0}
.innb-avvikrad{position:relative; margin:0 0 6px; padding:6px 0 6px 11px;
  font-size:12.5px; color:var(--demp); max-width:90ch}
.innb-avvikrad::before{content:""; position:absolute; left:0; top:6px;
  bottom:6px; width:2px; background:var(--vent)}
.innb-valg{display:inline-flex; align-items:center; gap:9px; font-size:13px;
  color:var(--demp); cursor:pointer; margin:12px 0 0}
.innb-avkryss{accent-color:var(--kobber); width:14px; height:14px; margin:0;
  flex:none}
.innb-avvis,.innb-bytt{margin-top:14px}

/* ── innstillinger ───────────────────────────────────────────────── */
.innb-innst{max-width:940px}
.innb-eyebrow{margin-top:28px}
.innb-avsendere{display:flex; flex-direction:column; margin:12px 0 4px}
.innb-avsender{display:grid; gap:8px 14px; align-items:center;
  grid-template-columns:minmax(0,1fr) auto minmax(0,180px) auto;
  padding:9px 0; position:relative; font-size:13px}
.innb-avsender::after{content:""; position:absolute; left:0; right:0;
  bottom:0; height:1px;
  background:linear-gradient(90deg,var(--linje),transparent 78%)}
.innb-nyavsender{margin-top:16px; align-items:flex-end}

@media(max-width:1180px){
  .innb{grid-template-columns:1fr}
  .innb-liste{max-height:none}
  .innb-delt{grid-template-columns:1fr; min-height:0}
  .innb-kontering{max-height:none; overflow:visible}
  .innb-ramme{min-height:70vh}
}
@media(max-width:860px){
  .innb-avsender{grid-template-columns:minmax(0,1fr) auto}
  /* To kolonner og ingen overskriftsrad, som `.fl-rad` gjør det. Under
     denne bredden er en rad med seks kolonner ikke en rad lenger. */
  .innb-kontering .inn-rad{grid-template-columns:1fr 1fr; gap:6px}
  .innb-kontering .inn-hode{display:none}
  .innb-kontering .inn-linje{padding:9px 0;
    border-bottom:1px solid var(--linje-svak)}
  .innb-kontering .inn-diff .inn-sumtekst,
  .innb-kontering .inn-diff .diff,
  .innb-kontering .inn-diff .inn-diffknapp{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  .innb-slipp{transition:none}
}

/* ══ smalt ═══════════════════════════════════════════════════════════ */

@media(max-width:1180px){
  .fak{grid-template-columns:1fr}
  .fak-liste,.fak-panel{max-height:none; position:static; overflow:visible}
  .fak-liste{overflow-x:auto}
  .bank-kolonner{grid-template-columns:1fr; gap:14px}
  .bank-kolonner::before{display:none}
  .bank-hoyre{padding-top:12px; border-top:1px solid var(--linje)}
}
@media(max-width:860px){
  .fl-rad{grid-template-columns:1fr 1fr; gap:6px}
  .fl-hode{display:none}
  .fl-linje{padding:10px 0; border-bottom:1px solid var(--linje-svak)}
  .ku-rad{grid-template-columns:1fr; gap:2px}
  .avvik-rad{grid-template-columns:1fr}
  .avvik-sted{grid-column:1}
  .bank-post{grid-template-columns:1fr auto; gap:2px 10px}
  .fak-sum .trinn,.bank-avstem .trinn{grid-template-columns:1fr 130px}
}

@media(prefers-reduced-motion:reduce){
  .bank-valg{transition:none}
}

/* ══ SIKKERHET — totrinnsinnlogging ═══════════════════════════════════
 *
 * Ruten er smal, og innholdet er to ting som ikke tåler å bli smale:
 * QR-koden og de ti gjenopprettingskodene. Begge er ting man leser av en
 * skjerm med en telefon i den andre hånden, og begge blir ubrukelige om de
 * krympes for å få plass.
 */

.sikk-h{font-weight:200; font-size:22px; margin:0 0 6px; letter-spacing:-.01em}

/* QR-koden står ved siden av nøkkelen sin, ikke over den. Den som ikke får
   skannet, skal se den skrivbare veien i det samme blikket — ikke etter å
   ha rullet forbi en kode som ikke virket for henne. */
.sikk-qr{display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px;
  align-items:start; margin:0 0 22px}
.sikk-qr-flate{background:#fff; padding:12px; line-height:0;
  box-shadow:0 8px 26px -14px rgba(0,0,0,.5)}
/* Fast bredde: en QR-kode som skaleres med vinduet blir enten for liten til
   å leses eller så stor at den ikke får plass i søkeren. */
.sikk-qr svg{display:block; width:210px; height:210px}
.sikk-qr-tekst{min-width:0}
.sikk-steg{margin:0 0 12px; font-size:14px; color:var(--tekst)}
.sikk-merke{margin:0 0 4px; font-family:"JetBrains Mono",monospace;
  font-size:10px; letter-spacing:.2em; color:var(--svak)}
.sikk-hemmelighet{margin:0 0 8px; font-family:"JetBrains Mono",monospace;
  font-size:16px; letter-spacing:.06em; color:var(--kobber-lys);
  word-break:break-all; line-height:1.6;
  user-select:all}          /* ett klikk merker hele nøkkelen */
.sikk-hjelp{margin:0; font-size:12px; color:var(--demp); line-height:1.7}
.sikk-advarsel{margin:0 0 10px; font-size:12.5px; color:var(--stopp);
  line-height:1.7}

/* Gjenopprettingskodene. STORE, i to kolonner, monospaset. De skal kunne
   skrives av på et ark uten at noen lurer på om det er en 5 eller en S —
   alfabetet på serversiden har allerede fjernet de verste, og resten er
   et spørsmål om størrelse. */
.sikk-koder{margin:0 0 14px; padding:20px 22px; position:relative;
  background:var(--kobber-flate)}
.sikk-koder::before{content:""; position:absolute; inset:0; padding:1px;
  background:var(--kobber-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}
.sikk-kodeliste{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:9px 26px; position:relative}
.sikk-kode{font-family:"JetBrains Mono",monospace; font-size:19px;
  letter-spacing:.08em; color:var(--tekst); user-select:all}
.sikk-utskriftshode,.sikk-utskriftsfot{position:relative; margin:0;
  font-size:11.5px; color:var(--demp); line-height:1.7}
.sikk-utskriftshode{margin-bottom:14px}
.sikk-utskriftsfot{margin-top:16px}
.sikk-kvittering{align-items:center; gap:9px}
.sikk-kvittering input{accent-color:var(--kobber); width:16px; height:16px;
  cursor:pointer}
.sikk-kvittering label{font-size:13px; cursor:pointer; margin-right:auto}
.sikk-kvittering .h[disabled]{opacity:.45; cursor:not-allowed}

@media(max-width:700px){
  .sikk-qr{grid-template-columns:1fr}
  .sikk-qr svg{width:min(210px,70vw); height:auto}
}

/* Utskriften.
 *
 * «Skriv ut» er ikke pynt: et ark i en skuff er den ENESTE reserveveien som
 * ikke ligger på den telefonen som nettopp ble borte. Arket skal derfor
 * inneholde kodene og ingenting annet — ikke menyen, ikke topplinjen, ikke
 * knappen som skrev det ut. */
@media print{
  body{background:#fff; color:#000}
  body *{visibility:hidden}
  .sikk-utskrift,.sikk-utskrift *{visibility:visible}
  .sikk-utskrift{position:absolute; left:0; top:0; width:100%;
    background:#fff; padding:0; box-shadow:none}
  .sikk-utskrift::before{display:none}
  .sikk-utskrift .sikk-kode{color:#000}
  .sikk-utskrift .sikk-utskriftshode,
  .sikk-utskrift .sikk-utskriftsfot{color:#333}
  .rom{display:none}
}