/* ══════════════════════════════════════════════════════════════
   FARGE: LIAN.  UTFORMING: POWEROFFICE GO.
   Mørk er hjemme, lys er en egen komposisjon — teknikken snur
   polaritet: i mørket skiller flater seg med lys langs kanten,
   i lys med en myk skygge under.
   ══════════════════════════════════════════════════════════════ */
:root{
  --natt:#050A12; --tekst:#EAEFF7; --demp:#96A6BF; --svak:#72839D;
  --kobber:#D2703A; --kobber-lys:#E88B52;
  --ok:#3DBF8E; --vent:#D9B84C; --stopp:#E0574B;

  --glass:linear-gradient(163deg,rgba(255,255,255,.045),rgba(255,255,255,.008) 52%,rgba(255,255,255,0));
  --kant:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.012) 45%,transparent);
  --skygge:none;
  --linje:rgba(255,255,255,.07);
  --linje-svak:rgba(255,255,255,.012);
  --hover:linear-gradient(90deg,rgba(255,255,255,.035),transparent 88%);
  --skinne-bg:linear-gradient(90deg,rgba(255,255,255,.022),transparent 88%);
  --topp-bg:linear-gradient(180deg,rgba(5,10,18,.78),rgba(5,10,18,0));
  --panel-bg:linear-gradient(165deg,#132038,#0A1220);
  --dok-bg:linear-gradient(160deg,#0E1A2C,#08111E);

  --rom-lys:rgba(28,64,116,.5); --rom-dyp:rgba(16,40,70,.55); --rom-bunn:rgba(5,10,18,.9);
  --skive:#5C8DC8; --skive-op:.5;

  --kobber-flate:linear-gradient(160deg,rgba(210,112,58,.075),rgba(210,112,58,.014));
  --kobber-kant:linear-gradient(150deg,rgba(210,112,58,.42),rgba(210,112,58,.05) 55%,transparent);
  --kobber-knapp:linear-gradient(160deg,rgba(210,112,58,.24),rgba(210,112,58,.07));
  --kobber-glo:0 0 16px rgba(210,112,58,.4);
  --kobber-hover:0 5px 24px -8px rgba(210,112,58,.6);
  --knapp-hover-tekst:#fff;
  --stopp-glo:0 0 16px rgba(224,87,75,.35);
  --ease:cubic-bezier(.22,.9,.28,1);
}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --natt:#F1F4F8; --tekst:#0E1826; --demp:#3D5068; --svak:#5F7188;
  --kobber:#A8501C; --kobber-lys:#8F4213;
  --ok:#1B8A5F; --vent:#8F7410; --stopp:#BE3327;
  --glass:linear-gradient(163deg,rgba(255,255,255,.99),rgba(255,255,255,.955) 55%,rgba(255,255,255,.93));
  --kant:linear-gradient(160deg,rgba(18,42,74,.17),rgba(18,42,74,.045) 45%,transparent);
  --skygge:0 1px 2px rgba(14,32,58,.05),0 12px 30px -16px rgba(14,32,58,.22);
  --linje:rgba(18,42,74,.14); --linje-svak:rgba(18,42,74,.03);
  --hover:linear-gradient(90deg,rgba(18,42,74,.045),transparent 88%);
  --skinne-bg:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.62) 92%);
  --topp-bg:linear-gradient(180deg,rgba(241,244,248,.9),rgba(241,244,248,0));
  --panel-bg:linear-gradient(165deg,#FFFFFF,#EBF0F6);
  --dok-bg:linear-gradient(160deg,#FFFFFF,#F7FAFD);
  --rom-lys:rgba(168,200,242,.20); --rom-dyp:rgba(190,209,232,.26); --rom-bunn:rgba(236,240,246,.75);
  --skive:#8FAECE; --skive-op:.16;
  --kobber-flate:linear-gradient(160deg,rgba(168,80,28,.075),rgba(168,80,28,.02));
  --kobber-kant:linear-gradient(150deg,rgba(168,80,28,.42),rgba(168,80,28,.07) 55%,transparent);
  --kobber-knapp:linear-gradient(160deg,rgba(168,80,28,.15),rgba(168,80,28,.045));
  --kobber-glo:0 0 14px rgba(168,80,28,.28);
  --kobber-hover:0 6px 20px -9px rgba(168,80,28,.55);
  --knapp-hover-tekst:#6E340D; --stopp-glo:0 0 14px rgba(190,51,39,.25);
}}
:root[data-theme="light"]{
  --natt:#F1F4F8; --tekst:#0E1826; --demp:#3D5068; --svak:#5F7188;
  --kobber:#A8501C; --kobber-lys:#8F4213;
  --ok:#1B8A5F; --vent:#8F7410; --stopp:#BE3327;
  --glass:linear-gradient(163deg,rgba(255,255,255,.99),rgba(255,255,255,.955) 55%,rgba(255,255,255,.93));
  --kant:linear-gradient(160deg,rgba(18,42,74,.17),rgba(18,42,74,.045) 45%,transparent);
  --skygge:0 1px 2px rgba(14,32,58,.05),0 12px 30px -16px rgba(14,32,58,.22);
  --linje:rgba(18,42,74,.14); --linje-svak:rgba(18,42,74,.03);
  --hover:linear-gradient(90deg,rgba(18,42,74,.045),transparent 88%);
  --skinne-bg:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.62) 92%);
  --topp-bg:linear-gradient(180deg,rgba(241,244,248,.9),rgba(241,244,248,0));
  --panel-bg:linear-gradient(165deg,#FFFFFF,#EBF0F6);
  --dok-bg:linear-gradient(160deg,#FFFFFF,#F7FAFD);
  --rom-lys:rgba(168,200,242,.20); --rom-dyp:rgba(190,209,232,.26); --rom-bunn:rgba(236,240,246,.75);
  --skive:#8FAECE; --skive-op:.16;
  --kobber-flate:linear-gradient(160deg,rgba(168,80,28,.075),rgba(168,80,28,.02));
  --kobber-kant:linear-gradient(150deg,rgba(168,80,28,.42),rgba(168,80,28,.07) 55%,transparent);
  --kobber-knapp:linear-gradient(160deg,rgba(168,80,28,.15),rgba(168,80,28,.045));
  --kobber-glo:0 0 14px rgba(168,80,28,.28);
  --kobber-hover:0 6px 20px -9px rgba(168,80,28,.55);
  --knapp-hover-tekst:#6E340D; --stopp-glo:0 0 14px rgba(190,51,39,.25);
}

*{box-sizing:border-box}
body{margin:0; min-height:100vh; background:var(--natt); color:var(--tekst);
  font-family:Outfit,-apple-system,"Segoe UI",sans-serif; font-size:14px; line-height:1.52;
  font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease)}

.rom{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.rom .skive{position:absolute; top:50%; left:80%; width:min(150vh,1500px); aspect-ratio:1;
  transform:translate(-50%,-50%); opacity:var(--skive-op); color:var(--skive);
  animation:dreie 240s linear infinite; transition:opacity .5s var(--ease), color .5s var(--ease)}
@keyframes dreie{to{transform:translate(-50%,-50%) rotate(360deg)}}
.rom .lys{position:absolute; inset:-20%;
  background:radial-gradient(680px 520px at var(--mx,26%) var(--my,12%),var(--rom-lys) 0%,transparent 66%);
  transition:background .7s var(--ease)}
.rom .dybde{position:absolute; inset:0;
  background:radial-gradient(1200px 900px at 92% 96%,var(--rom-dyp) 0%,transparent 62%),
    linear-gradient(180deg,transparent 55%,var(--rom-bunn) 100%)}
@media(prefers-reduced-motion:reduce){.rom .skive{animation:none}.rom .lys{transition:none}}

/* ══ POWEROFFICE-SKALL: smal meny, faner i dybden ══ */
.app{position:relative; z-index:1; display:grid; grid-template-columns:212px 1fr; min-height:100vh}

.skinne{padding:18px 0 26px; display:flex; flex-direction:column; background:var(--skinne-bg);
  -webkit-mask-image:linear-gradient(180deg,#000 0 94%,transparent); mask-image:linear-gradient(180deg,#000 0 94%,transparent)}
.merke{display:flex; align-items:center; gap:10px; padding:0 20px 20px}
.merke svg{color:var(--tekst)} .merke .m-kobber{color:var(--kobber)}
.merke b{font-weight:400; font-size:14px; letter-spacing:.08em}
.merke span{display:block; font-family:"JetBrains Mono",monospace; font-size:9px;
  letter-spacing:.3em; color:var(--kobber); margin-top:2px}
.gruppe{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.22em;
  color:var(--svak); padding:15px 20px 6px}
.nav{display:flex; align-items:center; gap:9px; padding:7px 20px; cursor:pointer;
  color:var(--demp); font-size:13.5px; position:relative; transition:color .3s var(--ease)}
.nav::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px;
  background:linear-gradient(180deg,transparent,var(--kobber),transparent);
  transform:scaleY(0); transition:transform .4s var(--ease)}
.nav::after{content:""; position:absolute; inset:0; opacity:0; background:var(--kobber-flate);
  transition:opacity .4s var(--ease)}
.nav:hover,.nav[aria-selected="true"]{color:var(--tekst)}
.nav[aria-selected="true"]::before{transform:scaleY(1)}
.nav[aria-selected="true"]::after{opacity:1}
.nav .tall{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:11px;
  color:var(--svak); position:relative; transition:color .3s var(--ease)}
.nav[aria-selected="true"] .tall{color:var(--kobber)}
.nav .prikk{width:5px;height:5px;border-radius:50%;background:var(--kobber);margin-left:auto;
  position:relative; box-shadow:var(--kobber-glo)}
.nav.stor{font-size:14.5px; padding:9px 20px; margin-bottom:4px}

/* ══ topplinje: klientvelger + personlige verktøy, som PowerOffice ══ */
.topp{display:flex; align-items:center; gap:12px; padding:12px 26px 10px; position:sticky; top:0;
  z-index:30; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); background:var(--topp-bg)}
.klient{display:flex; align-items:center; gap:11px; padding:6px 13px; background:var(--glass);
  box-shadow:var(--skygge); cursor:pointer; position:relative; text-align:left;
  border:none; color:var(--tekst); font-family:inherit;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
  transition:transform .35s var(--ease)}
.klient::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;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
.klient:hover{transform:translateY(-1px)}
.klient b{font-weight:400; font-size:13.5px; display:block}
.klient em{font-style:normal; font-family:"JetBrains Mono",monospace; font-size:10.5px;
  color:var(--demp); display:block}
.klient .pil{color:var(--svak); font-size:9px}

/* klientvelgeren er en arbeidskø — beste enkeltgrep i PowerOffice */
.kliste{position:absolute; top:calc(100% + 7px); left:0; width:395px; background:var(--panel-bg);
  box-shadow:var(--skygge); z-index:50; display:none; animation:falle .26s var(--ease)}
.kliste.paa{display:block}
.kliste::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}
.kliste-hode{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.2em;
  color:var(--svak); padding:13px 17px 8px}
.krad{padding:9px 17px; cursor:pointer; position:relative; transition:background .2s}
.krad:hover,.krad.aktiv{background:var(--kobber-flate)}
.krad .kn{font-size:13.5px; margin-bottom:2px}
.krad .kstatus{font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--demp);
  display:flex; gap:9px; flex-wrap:wrap}
.krad .kstatus .r{color:var(--stopp)} .krad .kstatus .g{color:var(--ok)} .krad .kstatus .k{color:var(--kobber)}

.strom{margin-left:auto; display:flex; align-items:center; gap:10px; min-width:0; flex:0 1 auto}
.puls{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 0 rgba(61,191,142,.55); animation:puls 3.2s infinite}
@keyframes puls{70%{box-shadow:0 0 0 8px rgba(61,191,142,0)}100%{box-shadow:0 0 0 0 rgba(61,191,142,0)}}
/* vinduet klipper aldri første eller siste tegn — falmingen spiser bare
   overskuddet til høyre når linjen er for lang for plassen. */
.strom-vindu{height:16px; overflow:hidden; min-width:0; padding-right:26px;
  -webkit-mask-image:linear-gradient(90deg,#000 0 calc(100% - 26px),transparent);
          mask-image:linear-gradient(90deg,#000 0 calc(100% - 26px),transparent)}
.strom-linje{font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--demp);
  letter-spacing:.05em; white-space:nowrap; height:16px; line-height:16px; transition:transform .6s var(--ease)}

/* personlige verktøy — i topplinjen, ikke i menyen */
.verktoy{display:flex; align-items:center; flex:none; background:var(--glass); box-shadow:var(--skygge);
  position:relative; clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}
.verktoy::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;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}
.vt{font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--svak); padding:6px 10px;
  cursor:pointer; background:none; border:none; position:relative; display:flex; align-items:center;
  gap:5px; transition:color .3s var(--ease)}
.vt:hover{color:var(--tekst)}
.vt + .vt::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--linje)}
.vt .bad{position:absolute; top:2px; right:4px; width:5px; height:5px; border-radius:50%;
  background:var(--kobber); box-shadow:var(--kobber-glo)}
#tema svg{display:block; transition:transform .6s var(--ease)}
:root[data-theme="light"] #tema svg{transform:rotate(180deg)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) #tema svg{transform:rotate(180deg)}}

/* ══ faner i dybden, ikke flere menynivåer ══ */
.faner{display:flex; gap:1px; padding:0 26px; position:relative}
.faner::after{content:""; position:absolute; left:26px; right:26px; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--linje),transparent 70%)}
.fane{font-family:inherit; font-size:13px; color:var(--demp); background:none; border:none;
  padding:8px 15px 10px; cursor:pointer; position:relative; transition:color .3s var(--ease)}
.fane:hover{color:var(--tekst)}
.fane[aria-selected="true"]{color:var(--kobber)}
.fane[aria-selected="true"]::after{content:""; position:absolute; left:15px; right:15px; bottom:0;
  height:2px; background:var(--kobber); box-shadow:var(--kobber-glo)}
.fane .n{font-family:"JetBrains Mono",monospace; font-size:10.5px; margin-left:6px; opacity:.7}

main{padding:20px 26px 80px}
.skjerm{display:none} .skjerm.paa{display:block}
.skjerm.paa > *{animation:stig .5s var(--ease) backwards}
.skjerm.paa > *:nth-child(1){animation-delay:.02s}
.skjerm.paa > *:nth-child(2){animation-delay:.05s}
.skjerm.paa > *:nth-child(n+3){animation-delay:.08s}
@keyframes stig{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes falle{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.skjerm.paa > *{animation:none}}

.eyebrow{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.25em;
  color:var(--kobber); margin:0 0 10px}
h1{font-size:clamp(22px,2.7vw,29px); font-weight:200; letter-spacing:-.022em; margin:0 0 6px; line-height:1.1}
h1 b{font-weight:400}
.under{color:var(--demp); margin:0 0 24px; max-width:62ch; font-size:14px}

.tall-rad{display:flex; flex-wrap:wrap; gap:26px 40px; margin-bottom:26px; padding-bottom:20px; position:relative}
.tall-rad::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--linje),transparent 62%)}
.tall-kort .n{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.2em;
  color:var(--svak); margin-bottom:6px}
.tall-kort .v{font-family:"JetBrains Mono",monospace; font-size:26px; font-weight:400;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1}
.tall-kort .m{font-size:12px; color:var(--demp); margin-top:4px}
.v.kobber{color:var(--kobber)} .v.ok{color:var(--ok)} .v.vent{color:var(--vent)} .v.stopp{color:var(--stopp)}

.flate{position:relative; background:var(--glass); box-shadow:var(--skygge); padding:16px 20px;
  margin-bottom:10px; transition:transform .4s var(--ease),opacity .4s var(--ease)}
.flate::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}
.flate::after{content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,transparent,var(--svak),transparent)}
.flate.menneske::after{background:linear-gradient(180deg,transparent,var(--kobber),transparent); box-shadow:var(--kobber-glo)}
.flate.kritisk::after{background:linear-gradient(180deg,transparent,var(--stopp),transparent); box-shadow:var(--stopp-glo)}
.flate:hover{transform:translateX(3px)}
.flate.lost{opacity:0; transform:translateX(46px) scale(.985)}

.o-topp{display:flex; align-items:baseline; gap:11px; margin-bottom:5px; flex-wrap:wrap}
.o-tittel{font-size:15px; font-weight:400}
.merk{font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.13em;
  padding:2px 7px; border:1px solid currentColor; white-space:nowrap; opacity:.9}
.m-menneske{color:var(--kobber)} .m-modell{color:var(--ok)} .m-kritisk{color:var(--stopp)} .m-frist{color:var(--demp)}
.o-hvorfor{color:var(--demp); font-size:13px; max-width:90ch; margin:0 0 12px}
.o-belop{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:14px;
  font-variant-numeric:tabular-nums; color:var(--demp)}

.forslag{background:var(--kobber-flate); padding:12px 15px; position:relative}
.forslag::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}
.f-hode{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.f-hode .ikon{width:12px;height:12px;flex:none;color:var(--kobber)}
.f-hode span{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.17em; color:var(--kobber)}
.f-hode .sikker{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--demp)}
.f-valg{font-size:14.5px; margin-bottom:5px}
.ringet{position:relative; display:inline-block; padding:1px 10px; font-weight:500; color:var(--kobber-lys)}
.ringet svg{position:absolute; inset:-8px -6px; width:calc(100% + 12px); height:calc(100% + 16px);
  overflow:visible; color:var(--kobber)}
.ringet path{fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round;
  stroke-dasharray:280; stroke-dashoffset:280; animation:tegn 1.25s .45s var(--ease) forwards}
@keyframes tegn{to{stroke-dashoffset:0}}
.f-grunn{color:var(--demp); font-size:12.5px; max-width:84ch; margin:0}
.f-forkastet{margin-top:9px; padding-top:9px; font-size:12.5px; color:var(--svak); position:relative}
.f-forkastet::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--kobber-kant)}
.f-forkastet b{color:var(--demp); font-weight:400}

.handlinger{display:flex; gap:8px; margin-top:12px; align-items:center; flex-wrap:wrap}
button.h{font-family:inherit; font-size:12.5px; cursor:pointer; padding:6px 14px; color:var(--demp);
  background:var(--glass); border:none; position:relative;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
  transition:color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
button.h::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;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}
button.h:hover{color:var(--tekst); transform:translateY(-1px)}
button.h.primar{color:var(--kobber-lys); background:var(--kobber-knapp)}
button.h.primar:hover{color:var(--knapp-hover-tekst); box-shadow:var(--kobber-hover)}
.hjemmel{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--svak); letter-spacing:.09em}

/* ══ delt skjerm på bilag — PowerOffices signaturoppsett ══ */
/* begge halvdelene fyller skjermen, slik de gjør i PowerOffice — dokumentet
   ruller inni sin egen rute i stedet for å etterlate et tomrom under. */
.delt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:16px;
  align-items:stretch; min-height:calc(100vh - 168px)}
.dok{background:var(--dok-bg); box-shadow:var(--skygge); position:relative; padding:0;
  overflow:hidden; display:flex; flex-direction:column; min-height:0}
.kontering{position:relative; background:var(--glass); box-shadow:var(--skygge);
  padding:16px 20px 20px; display:flex; flex-direction:column; min-height:0}
.kontering::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}
.kontering > *{position:relative}
.kontering .handlinger{margin-top:auto !important; padding-top:16px;
  border-top:1px solid var(--linje-svak)}
.dok::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; z-index:2}
.dok-topp{display:flex; align-items:center; gap:9px; padding:10px 14px; position:relative;
  font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--svak); letter-spacing:.13em}
.dok-topp::after{content:""; position:absolute; left:14px; right:14px; bottom:0; height:1px; background:var(--linje)}
.dok-ark{padding:22px 26px 30px; font-size:12.5px; color:var(--demp); line-height:1.85;
  overflow-y:auto; flex:1; min-height:0}
.dok-ark .avs{color:var(--tekst); font-size:14px; margin-bottom:2px}
.dok-ark hr{border:none; height:1px; background:var(--linje); margin:14px 0}
.dok-ark .rad{display:flex; justify-content:space-between; gap:14px}
.dok-ark .rad span:last-child{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums}
.dok-ark .tot{color:var(--tekst); font-size:13.5px; margin-top:6px}
.dok-ark mark{background:var(--kobber-knapp); color:var(--kobber-lys); padding:0 4px}

.rull{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:520px}
th{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.15em; color:var(--svak);
  text-align:left; padding:0 13px 9px 0; font-weight:400; white-space:nowrap}
th:first-child,td:first-child{padding-left:2px}
td{padding:10px 13px 10px 0; font-size:13px}
tbody tr{transition:background .3s var(--ease)}
tbody tr:hover{background:var(--hover)}
tbody td{background-image:linear-gradient(90deg,var(--linje),var(--linje-svak) 72%,transparent);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%}
.num{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.konto{font-family:"JetBrains Mono",monospace; color:var(--demp)}
td.sum{font-weight:500; padding-top:12px}
.dim{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--svak)}

.kjede{position:relative}
.trinn{display:grid; grid-template-columns:1fr 165px; gap:16px; padding:11px 18px; align-items:baseline;
  position:relative; transition:background .3s var(--ease)}
.trinn::after{content:""; position:absolute; left:18px; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--linje),transparent 70%)}
.trinn:hover{background:var(--hover)}
.trinn.sum{background:var(--kobber-flate)}
.trinn.sum::after{background:var(--kobber-kant)}
.trinn .t{font-size:13.5px}
.trinn .h{display:block; font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--svak);
  margin-top:3px; letter-spacing:.07em}
.trinn .b{font-family:"JetBrains Mono",monospace; font-size:14.5px; text-align:right; font-variant-numeric:tabular-nums}
.trinn.sum .b{font-size:18px; font-weight:500}
.b.neg{color:var(--demp)}

.notis{padding:15px 18px; margin:22px 0; font-size:13px; max-width:86ch; position:relative;
  background:var(--kobber-flate)}
.notis::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}
.notis b{color:var(--kobber-lys); font-weight:500}

.rute{font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--svak); letter-spacing:.11em;
  margin:34px 0 0; padding-top:12px; border-top:1px solid var(--linje-svak)}

.overlegg{position:fixed; inset:0; z-index:60; display:none;
  background:color-mix(in srgb,var(--natt) 72%,transparent);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px)}
.overlegg.paa{display:block; animation:fade .26s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.palett{max-width:580px; margin:13vh auto 0; background:var(--panel-bg); box-shadow:var(--skygge);
  position:relative; animation:falle .32s var(--ease)}
.palett::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}
.palett input{width:100%; background:transparent; border:none; outline:none; color:var(--tekst);
  font-family:Outfit,sans-serif; font-size:16px; font-weight:300; padding:18px 20px}
.palett input::placeholder{color:var(--svak)}
.p-liste{max-height:330px; overflow-y:auto; padding-bottom:8px}
.p-rad{display:flex; align-items:center; gap:12px; padding:10px 20px; cursor:pointer; transition:background .18s}
.p-rad:hover,.p-rad.valgt{background:var(--kobber-flate)}
.p-rad .kat{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em;
  color:var(--kobber); width:80px; flex:none}
.p-rad .txt{font-size:14px}
.p-rad .tast{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--svak)}
.p-tom{padding:20px; color:var(--svak); font-size:13px}

.kvitt{position:fixed; right:24px; bottom:24px; z-index:70; display:flex; align-items:center; gap:10px;
  padding:13px 19px; background:var(--panel-bg); box-shadow:var(--skygge); font-size:13px;
  transform:translateY(90px); opacity:0; transition:transform .5s var(--ease),opacity .5s var(--ease)}
.kvitt.paa{transform:none; opacity:1}
.kvitt::before{content:""; position:absolute; inset:0; padding:1px;
  background:linear-gradient(150deg,var(--ok),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55}
.kvitt svg{flex:none; color:var(--ok)}

@media(max-width:1080px){.delt{grid-template-columns:1fr; min-height:0}
  .dok-ark{overflow:visible}}
@media(max-width:860px){
  .app{grid-template-columns:1fr} .skinne{display:none}
  main{padding:16px 16px 70px} .topp{padding:12px 16px} .faner{padding:0 16px}
  .strom-vindu{display:none} .kliste{width:min(92vw,380px)}
}

/* ══════════════════════════════════════════════════════════════════════
   INNTASTING

   Feltene er flate og uten ramme til man er i dem. Et skjema med tjue
   opptegnede bokser leses som tjue oppgaver; det samme skjemaet uten
   rammer leses som én rad man skriver på. Rammen kommer når den betyr
   noe: ved fokus, og når noe er galt.
   ══════════════════════════════════════════════════════════════════════ */

.felt{font:inherit; font-size:13.5px; color:var(--tekst); background:transparent;
  border:none; border-bottom:1px solid var(--linje); padding:7px 8px; width:100%;
  transition:border-color .2s var(--ease), background .2s var(--ease)}
.felt::placeholder{color:var(--svak)}
.felt:hover{border-bottom-color:var(--demp)}
.felt:focus{outline:none; border-bottom-color:var(--kobber);
  background:var(--kobber-flate); box-shadow:0 1px 0 0 var(--kobber)}
.felt.ugyldig{border-bottom-color:var(--stopp); box-shadow:0 1px 0 0 var(--stopp)}
.felt.belop,.felt.dato,.felt.konto{font-family:"JetBrains Mono",monospace;
  font-variant-numeric:tabular-nums}
.felt.belop{text-align:right}
.felt.dato{max-width:118px}
select.felt{appearance:none; padding-right:18px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--svak) 50%),
    linear-gradient(135deg,var(--svak) 50%,transparent 50%);
  background-position:calc(100% - 10px) 52%,calc(100% - 6px) 52%;
  background-size:4px 4px,4px 4px; background-repeat:no-repeat}
select.felt option{background:var(--natt); color:var(--tekst)}

.inn-topp{display:flex; gap:16px; align-items:flex-end; margin-bottom:18px;
  flex-wrap:wrap; max-width:1180px}
.inn-merke{display:block; font-family:"JetBrains Mono",monospace; font-size:10px;
  letter-spacing:.2em; color:var(--svak)}
.inn-merke.voks{flex:1; min-width:240px}
/* Feltet må være blokk, ellers legger det seg på linje med merkelappen sin
   og raden blir skjev der feltet er smalt nok til å få plass. */
.inn-merke .felt{display:block; margin-top:4px}

/* Rutenettet. Kolonnene er faste, slik at tallene står i kolonne selv når
   kontonavnene er ulike lange — beløp som ikke flukter er en feil her. */
/* Bredden er begrenset. Et inntastingsskjema som strekker seg over 1900
   piksler tvinger øyet til å vandre mellom konto og beløp for hver linje,
   og det er den vandringen som gjør tasting slitsom. */
.inn{position:relative; max-width:1180px; background:var(--glass);
  box-shadow:var(--skygge); padding:18px 20px 16px}
.inn::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 > *{position:relative}

.inn-rad{display:grid; grid-template-columns:minmax(190px,300px) minmax(150px,1fr)
  76px 130px 130px 30px; gap:10px; align-items:center}
.inn-hode{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.15em;
  color:var(--svak); padding-bottom:6px}
.inn-hode .h{text-align:right}
.inn-linje{position:relative}
.inn-kropp{display:flex; flex-direction:column}

.inn-slett{background:none; border:none; color:var(--svak); cursor:pointer;
  font-size:17px; line-height:1; padding:4px 6px; opacity:0; transition:opacity .2s,color .2s}
.inn-linje:hover .inn-slett,.inn-slett:focus-visible{opacity:1}
.inn-slett:hover{color:var(--stopp)}

.inn-sum,.inn-diff{padding:11px 8px 0; font-family:"JetBrains Mono",monospace;
  font-variant-numeric:tabular-nums; font-size:13.5px}
.inn-sum{border-top:1px solid var(--linje); margin-top:8px}
.inn-sumtekst{font-family:Outfit,sans-serif; color:var(--demp); font-size:13px}
.inn-rad .tall{text-align:right}
.inn-diff{display:none}
.inn-diff.paa{display:grid}
.inn-diff .inn-sumtekst{color:var(--kobber); grid-column:1}
.inn-diff .inn-diffknapp{grid-column:2 / 5; justify-self:end}
.inn-diff .diff{color:var(--kobber); font-size:15px; grid-column:5}

/* Valuta. Raden med valuta og kurs vises bare når klienten har kurser å
   velge mellom, og kroneraden bare når bilaget faktisk er i en annen valuta
   — et felt som alltid står der og alltid er tomt, lærer folk å overse det. */
.valutatopp{display:none}
.valutatopp.paa{display:flex}
.valutatopp .kurs{width:9em}
.kursnotis{font-size:12px; line-height:1.5; padding-bottom:6px}
.kursnotis .forslagstekst{display:block}
.inn-nok{display:none; border-top:none; margin-top:0; padding-top:4px;
  color:var(--demp)}
.inn-nok.paa{display:grid}

.kn-liten{font:inherit; font-size:11.5px; font-family:"JetBrains Mono",monospace;
  letter-spacing:.05em; color:var(--kobber); background:var(--kobber-knapp);
  border:none; padding:6px 11px; cursor:pointer; white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);
  transition:box-shadow .3s var(--ease), color .3s var(--ease)}
.kn-liten:hover{box-shadow:var(--kobber-hover); color:var(--knapp-hover-tekst)}

.inn-mva{margin-top:10px}
.inn-mva-hode{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.2em;
  color:var(--svak); padding:8px 8px 4px}
.inn-mvalinje{font-size:12.5px; color:var(--demp); padding:5px 8px; background:var(--linje-svak)}
.inn-mvalinje .kn{font-family:"JetBrains Mono",monospace}
.inn-mvalinje .tall{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums}

.inn-feil{margin-top:12px; display:flex; flex-direction:column; gap:6px}
.feilrad{font-size:12.5px; color:var(--stopp); padding:9px 13px; position:relative;
  background:color-mix(in srgb,var(--stopp) 8%,transparent);
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.feilrad b{font-family:"JetBrains Mono",monospace; font-weight:500; font-size:11px;
  letter-spacing:.08em}

.inn-handlinger{margin-top:18px; padding-top:15px; border-top:1px solid var(--linje-svak)}
.inn-handlinger .h[disabled]{opacity:.42; cursor:not-allowed; box-shadow:none}
.h kbd,.inn-hjelp kbd{font-family:"JetBrains Mono",monospace; font-size:10px;
  letter-spacing:.05em; color:var(--svak); margin-left:7px}
.inn-hjelp{margin-top:16px; max-width:1180px; display:grid; gap:4px;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.inn-hjelp p{margin:0; font-size:12.5px; color:var(--svak); line-height:1.75}
.inn-hjelp kbd{margin:0 1px; padding:1px 5px; background:var(--linje-svak); color:var(--demp)}

/* Kontovelgeren. Listen legger seg over innholdet under, aldri ved siden av:
   den skal ikke flytte på noe mens man skriver. */
.kombo{position:relative}
.kombo-liste{display:none; position:absolute; top:100%; left:0; z-index:40;
  min-width:340px; max-height:264px; overflow-y:auto; background:var(--panel-bg);
  box-shadow:var(--skygge),0 18px 40px -22px rgba(0,0,0,.6)}
.kombo-liste.paa{display:block}
.kombo-rad{display:flex; align-items:baseline; gap:10px; padding:7px 12px; cursor:pointer;
  font-size:13px}
.kombo-rad .kn{font-family:"JetBrains Mono",monospace; color:var(--kobber); width:46px; flex:none}
.kombo-rad .knavn{flex:1; color:var(--tekst); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.kombo-rad .kmva{font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--svak)}
.kombo-rad.peker{background:var(--kobber-flate)}

/* Kvittering: én linje som sier hva som skjedde. Feil blir stående. */
.kvittering{position:fixed; right:24px; bottom:24px; z-index:70; max-width:min(460px,80vw);
  padding:13px 19px; background:var(--panel-bg); box-shadow:var(--skygge); font-size:13px;
  transform:translateY(90px); opacity:0; pointer-events:none;
  transition:transform .45s var(--ease),opacity .45s var(--ease)}
.kvittering.paa{transform:none; opacity:1; pointer-events:auto}
.kvittering::before{content:""; position:absolute; inset:0; padding:1px;
  background:linear-gradient(150deg,var(--ok),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6}
.kvittering.stopp::before{background:linear-gradient(150deg,var(--stopp),transparent 60%)}
.kvittering.stopp{color:var(--stopp)}

.siste{display:flex; align-items:center; gap:12px; margin-top:16px; padding:11px 16px;
  font-size:13px; background:color-mix(in srgb,var(--ok) 9%,transparent)}
.siste .ok{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.2em;
  color:var(--ok)}
.siste b{font-weight:500}
.siste span:not(.ok){color:var(--demp)}
.siste .kn-liten{margin-left:auto}

@media(max-width:1080px){
  .inn-rad{grid-template-columns:minmax(150px,1.3fr) minmax(120px,1.6fr) 62px 108px 108px 26px;
    gap:7px}
  .kombo-liste{min-width:280px}
}
@media(max-width:860px){
  .inn-rad{grid-template-columns:1fr 1fr; gap:6px 10px}
  .inn-hode,.inn-slett{display:none}
  .inn-linje{padding:10px 0; border-bottom:1px solid var(--linje-svak)}
  .inn-linje .kombo{grid-column:1/-1}
}

/* Sist førte bilag, under inntastingen. */
.hale-hode{margin:30px 0 8px}
.hale{max-width:1180px; border-top:1px solid var(--linje-svak)}
.hale-rad{display:grid; grid-template-columns:62px 92px 1fr 130px; gap:12px;
  padding:7px 8px; font-size:12.5px; color:var(--demp);
  border-bottom:1px solid var(--linje-svak); align-items:baseline;
  transition:background .2s var(--ease)}
.hale-rad:hover{background:var(--hover)}
.hale-nr,.hale-dato,.hale-belop{font-family:"JetBrains Mono",monospace;
  font-variant-numeric:tabular-nums}
.hale-nr{color:var(--kobber)}
.hale-dato{color:var(--svak)}
.hale-tekst{color:var(--tekst); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.hale-belop{text-align:right}
.kombo-tom{padding:9px 12px; font-size:12.5px; color:var(--svak); line-height:1.6}
.inn-merke.motpart{flex:0 1 260px; min-width:200px}
.forslagstekst{color:var(--demp); font-size:12px}

/* ══════════════════════════════════════════════════════════════
   KORREKSJON: kontrollsporet, og bilag uten effekt.

   Et korrigert bilag forsvinner ikke — det mister effekten. Kursiv
   er PowerOffices eget uttrykk for det, og det er riktig valgt:
   raden er der, den er lesbar, og den er tydelig et annet slag enn
   de andre uten å skrike.
   ══════════════════════════════════════════════════════════════ */

/* Prosjektregnskapet, bokføringsforskriften § 8-1-4.
   Raden «Uten prosjektkode» skal skille seg fra prosjektene uten å se ut som
   en feil: den er en helt lovlig del av regnskapet fram til noen har rukket å
   merke postene, og en rød rad hadde gjort et etterslep til en alarm. */
tr.uten-prosjekt td{color:var(--svak); border-top:1px solid var(--linje-svak)}
tr.sumrad td{font-weight:500; padding-top:12px; border-top:1px solid var(--linje-svak)}
/* Avviker prosjektregnskapet fra resultatregnskapet, er det derimot en alarm:
   da lyver en av de to, og tallene kan ikke brukes før noen vet hvilken. */
.notis.advarsel{background:var(--vent-flate,var(--kobber-flate))}
.notis.advarsel b{color:var(--vent,var(--kobber-lys))}

.uten-effekt{font-style:italic; color:var(--svak)}
.uten-effekt td,.uten-effekt .kjede-tekst,.uten-effekt .kjede-nr{color:var(--svak)}

/* Filterbryteren over journalen. */
.filterbryter{display:flex; align-items:center; gap:9px; margin:0 0 14px;
  font-size:12.5px; color:var(--demp); cursor:pointer; flex-wrap:wrap}
.filterbryter input{accent-color:var(--kobber); width:14px; height:14px; cursor:pointer}
.filterhjelp{flex-basis:100%; margin-left:23px; color:var(--svak); font-size:11.5px;
  line-height:1.55; max-width:70ch}

/* Kjeden: opprinnelig → reversering → ny versjon. */
.kjede-boks{margin-top:26px; max-width:1180px}
.kjede-boks .eyebrow{margin:0 0 8px}
.kjede-rad{display:grid;
  grid-template-columns:132px 96px 92px 1fr 120px auto; gap:12px;
  align-items:baseline; padding:8px; font-size:12.5px; color:var(--demp);
  border-bottom:1px solid var(--linje-svak);
  transition:background .2s var(--ease)}
.kjede-rad.klikkbar{cursor:pointer}
.kjede-rad.klikkbar:hover{background:var(--hover)}
.kjede-rad.klikkbar:focus-visible{outline:2px solid var(--kobber); outline-offset:-2px}
.kjede-rad.her{background:var(--kobber-flate)}
.kjede-nr{font-family:"JetBrains Mono",monospace; color:var(--kobber)}
.kjede-dato{font-family:"JetBrains Mono",monospace; color:var(--svak)}
.kjede-tekst{color:var(--tekst); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.kjede-belop{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums;
  text-align:right}
.m-gjeldende{color:var(--ok)}
.kjede-fot{color:var(--svak); font-size:11.5px; line-height:1.6; max-width:78ch;
  margin:10px 0 0}

/* Å rette bilagsteksten — den ene endringen som ikke lager nye bilag. */
.rett-tekst{margin-top:22px}
.rett-tekst .eyebrow{margin:0 0 7px}
.rett-rad{display:flex; gap:10px; align-items:center}
.rett-rad .felt{flex:1; min-width:0}

/* Korreksjonsknappen i «sist ført». Halen har fått en kolonne til.

   Knappen står synlig hele tiden, ikke bare ved hover. En handling som først
   dukker opp når musen er over raden, finnes ikke for den som bruker
   tastaturet, ikke for den som sitter på et nettbrett, og ikke for den som
   ikke vet at den er der. */
.hale-rad{grid-template-columns:62px 92px 1fr 130px auto}
.hale-rett{color:var(--svak); transition:color .2s var(--ease)}
.hale-rad:hover .hale-rett,.hale-rett:hover{color:var(--kobber)}

@media(max-width:860px){
  .kjede-rad{grid-template-columns:1fr auto; gap:4px 10px}
  .kjede-rad .merk{grid-column:1/-1}
}