/*
 * design-tokens.css - Beffens designspråk for beffen-web.
 * ENESTE palettkilde: sidene bruker variablene herfra og eier reglene sine
 * selv. Fila inneholder KUN tokens + delte komponenter (topbar, fokus,
 * statuspalett, spor-plassering, bevegelse, skjelett, tomtilstand, print,
 * .tall) - korreksjonslaget fra før designauditen er fjernet (leveranse 2).
 * Kilde: ~/beffen-design (tokens fra beffen-mockup.html). Fontene ligger i
 * design-font-premium.css (Archivo + Newsreader; design-font.css med Schibsted
 * Grotesk ble slettet 2026-10-01, Runes forslag 13). (design-ui.js sitt --beffen-*-sett er bevisst selvforsynt
 * - delt bibliotek med v1, prefikset for ikke å kollidere.)
 */
:root{
  --topbar-h:56px; /* beholdt: scroll-margin-regelen for dyplenker bruker den */
  /* Breddestandarden (én regel, aldri per-side-hacks): tre navngitte rammer
     med trappetrinn på store skjermer. Topbaren bruker ALLTID nav-rammen
     uansett sidens innholdsbredde - det var 640-rammen på skjema/felt som
     lot merket renne over fanene da fanerekken vokste. */
  --ramme-smal:640px;
  --ramme-medium:840px;
  --ramme-bred:1200px;
  --ramme-nav:1200px;
  --skygge:0 1px 3px rgba(32,36,33,.07), 0 6px 16px rgba(32,36,33,.06);
  /* Bevegelseskurver (2026-09-13): --ease-ut for alt som kommer inn/svarer
     (starter raskt, lander mykt), --ease-skuff = iOS-arkkurven for ark/skuffer. */
  --ease-ut:cubic-bezier(.23,1,.32,1);
  --ease-skuff:cubic-bezier(.32,.72,0,1);
  /* Typeskalaen (2026-09-13): elleve navngitte trinn = den vedtatte skalaen i
     test-designlint.mjs. Bruk tokens i nye komponenter; 12 px er gulvet for
     metatekst i rader (11 px er forbeholdt etiketter i VERSALER). */
  --skrift-etikett:11px;   /* versal-etiketter, kolonnehoder, eyebrows */
  --skrift-meta:12px;      /* sekundær radtekst, datoer, kunde under adresse */
  --skrift-tekst:13px;     /* brødtekst i app-flatene, knapper */
  --skrift-tekst-stor:14px;/* paneltitler, primærknapper */
  --skrift-kontroll:16px;  /* inputs (iOS zoomer under 16) */
  --skrift-under:18px;
  --skrift-tittel:20px;
  --skrift-adresse:24px;   /* adressen i detaljpanelet */
  --skrift-tall:30px;
  --skrift-h1:clamp(26px,4vw,38px);
  --skrift-kpi:clamp(30px,4vw,40px);
  /* «PRISBOKEN» (retningskontrakt, 2026-10-02, Impeccable new-work, rull de8a52f7: kandidat 3 av egen liste)
     Verden: den trykte varekatalogen/prislista byggebransjen leser hver dag - varenummer,
       linjerte kolonner, tabulære tall, én spotfarge som annen trykkfarge, ubestrøket hvitt.
     Første flate: Oversikt som katalogoppslag - register i margen, kolonnehode, rader med
       varenummer (T-2026-xxxx), navn i halvfet, pris høyrestilt, status som trykt merke.
     Vei: register (sidemeny) -> oppslag -> post (detaljpanel/prosjekt) -> handling i spotfarge.
     Signatur: valgt = reversert sverte (hvit tekst på svart), kobber kun på DEN ENE handlingen.
     Rekkevidde: samme grammatikk bærer felt/timer (bestillingsskjema) og dashbord (prisindeks).
     Risiko: tetthet og hårlinjer på 390 px i dagslys - 44 px trykkflater og 13 px minimum holdes. */
  --font-tekst:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Barlow Condensed","Barlow",system-ui,sans-serif;
  --font-etikett:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;
  /* Grafserier: chroma-hevede steg av merkefargene (eik/grønn) - validert med
     dataviz-validatoren (lysbånd/chroma/CVD/kontrast) mot kortflaten. De
     dempede grunntokens leser som grått i serier og skal ikke brukes der. */
  --graf-tilbudt:#B07C3D;
  --graf-vunnet:#2F7A50;
  --graf-linje:#9B6A3C;
  --ink:#202421;
  --grey:#626B66;
  --line:#D5D9D5;
  --linje-svak:#E7EAE7;
  --bg:#F1F2EF;
  --card:#FFFFFF;
  --ok:#2F6048;
  --eik:#9B6A3C;
  --rust:#B33E30;
  --linje-mork:#A9B0AB;
  /* Kant på inputfamilien (impeccable P2, WCAG 1.4.11 >= 3:1): --linje-mork #A9B0AB ga
     2,21:1 på hvitt / 2,16 på input / 1,97 på bg. #808782 (samme grågrønne tone) gir
     3,68:1 på #FFFFFF, 3,59 på #FCFCFB, 3,45 på #F7F8F6 og 3,28 på #F1F2EF. */
  --kant-kontroll:#808782;
  --fokus:#1E5A8A;
  /* Radius: kort 12, kontroller 8, piller 99 - erstatter den håndvedlikeholdte
     selektorlisten som normaliserte sidenes 9/10/14px i etterkant. */
  --radius-kort:12px;
  --radius-kontroll:8px;
  --radius-pill:99px;
  /* Topbar-lenkefarge - sto hardkodet 3 steder her + som død #a9a9a9 i alle sider */
  --topbar-lenke:#C5CBC7;
  /* Modalbakteppe bygget på ink - erstatter fremmed rgba(26,26,26,.45) i 6 filer */
  --bakteppe:rgba(32,36,33,.45);
  /* Radhover - lå hardkodet i korreksjonslaget */
  --flate-hover:#F7F8F6;
  /* Inputbakgrunn - fantes som to nesten like hexverdier (#fcfbfa/#FCFCFB) i 8 filer */
  --flate-input:#FCFCFB;
  /* Komponenttoner (verdier som alt var i bruk - kun navngitt): */
  --rust-kant:#D9B3AC;
  --eik-lys:#F0E4D3;
  --eik-kant:#D8BE97;
  --eik-mork:#7A5024;
  --grafitt-hev:#3A403C;
  /* Semantikk for «valgt segment» og «primær handling» (Warm Linen-remappes
     i body.morkt): papir-temaet beholder ink/card-pillene. */
  --valgt-bg:var(--ink);
  --valgt-tekst:var(--card);
  --valgt-kant:var(--ink);
  --primar-bg:var(--ink);
  --primar-tekst:var(--card);
  --primar-hover:var(--grafitt-hev);
  --flate-panel:var(--card);
  /* Markør for valgt rad/kort (3 px i venstre kant) - tilstandssystemet */
  --valgt-markor:var(--eik);
  --sand-lys:#F3EADB;
  --sand-kant:#D8C29E;
  /* Nattpaletten (2026-08-24): dashbordets kontrollrom - kull i slekt med
     topbaren og tilbuds-PDF-en. Kun /dashboard remapper semantikk-tokens
     til disse; alle andre flater er lyse. Kontrast mot --natt-flate:
     tekst ~13:1, demp ~6,5:1, rust ~5,5:1, grønn ~7:1, sand ~9:1. */
  --natt-bg:#141714;
  --natt-flate:#1D211E;
  --natt-flate-2:#252A26;
  --natt-kant:#333A34;
  --natt-kant-svak:#2A302B;
  --natt-tekst:#F2F0E9;
  --natt-demp:#A9B2AA;
  --natt-rust:#E27B6B;
  --natt-gronn:#7FBF9A;
  --natt-skygge:0 1px 3px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  /* WARM LINEN WORKSPACE (2026-09-02, vedtatt retning): varm lin som
     arbeidsflate, mørk petrol som navigasjonsanker, terrakotta som
     signaturfarge, kontrollerte funksjonsfarger. `--pd-*` er app-temaets
     ENESTE kilde (skall, dashbord, benk via --ab-*-alias). Klassen
     body.morkt består av historiske grunner (skallet + sidene bruker den) -
     den betyr nå «app-tema», ikke mørkt. Tre nivåer: app-bakgrunn < panel <
     hevet kontroll; detaljpanel og filterflate har egne toner.
     Avledede toner (ikke i briefen, begrunnet): kobber-mork = terrakotta
     som AA-tekst (#D8733F er 3,2:1 på lin), kobber-fyll-tekst = mørkest
     petrol på signaturfargen (5,3:1 - lys tekst på #D8733F gir bare 3,2:1),
     kobber-fyll-hover lysere enn fyllet så teksten holder AA ved hover,
     kobber-lys = varm tekst på aktiv nav (#3B2D28), sidefelt-hover.
     Kontrast mot --pd-flate (#FBFAF6): tekst 13,1:1, sekundær (demp) 5,8:1,
     demp-2 3,5:1 (kun ikke-tekst), kobber-mork 6,2:1, suksess 6,4:1, info
     5,6:1, advarsel 6,5:1, feil 6,3:1. Mot petrol (#203538): petrol-tekst
     13,6:1, petrol-demp 8,3:1, terrakotta 4,2:1. */
  --pd-bg:#F2F2EE;
  --pd-sidefelt:#17191B;
  --pd-sidefelt-hover:#2A2D30;
  --pd-flate:#FFFFFF;
  --pd-flate-2:#FFFFFF;
  --pd-panel:#F7F7F4;
  --pd-seksjon:#E9E9E4;
  --pd-rad:#FFFFFF;
  --pd-rad-alt:#F7F7F4;
  --pd-rad-hover:#EFEFEA;
  --pd-rad-valgt:#FBEBE4;
  --pd-kant:#D6D5D0;
  --pd-kant-sterk:#B9B8B2;
  /* Inputkant i app-temaet (impeccable P2, >= 3:1): kant-sterk ga 1,94:1 på flate og kant
     1,51:1 på arbeidsflaten. #857E73 gir 3,95:1 på #FFFDF9 (input), 3,85 på #FBFAF6,
     3,69 på #F8F5EE, 3,53 på #F3F0E8, 3,18 på #EAE4DA og 4,02/3,91 på #FFFFFF/#FCFCFB. */
  --pd-kant-kontroll:#7A7A74;
  --pd-kant-svak:#E6E5E0;
  --pd-tekst:#17191B;
  /* Sekundærtekst: briefens #687477 gir 4,2:1 på lin og 3,8:1 på seksjonsflaten
     (under AA for 11-13 px). Mørknet til #56646A (5,3:1 / 4,8:1 / 5,8:1 på
     lin / seksjon / panel). #899294 (demp-2) er kun for ikke-tekst/dekor. */
  --pd-demp:#5A5D60;
  --pd-demp-2:#8D9093;
  --pd-petrol-tekst:#F6F5F1;
  --pd-petrol-demp:#A7A9AB;
  --pd-kobber:#C8471C;
  --pd-kobber-hover:#B33E17;
  --pd-kobber-flate:#FAE3DA;
  --pd-kobber-kant:#C8471C;
  --pd-kobber-mork:#A63A15;
  --pd-kobber-fyll:#C8471C;
  --pd-kobber-fyll-hover:#B33E17;
  --pd-kobber-fyll-tekst:#FFFFFF;
  --pd-kobber-lys:#FF8A5B;
  --pd-nav-aktiv:#3A3D40;
  /* Fokus = kobber-mork (impeccable-audit 2026-09-24): kobber #D8733F ga 2,6-3,0:1 mot lin/panel/seksjon
     (krav 3:1). Kobber-mork gir 5,0-6,2:1 på de lyse flatene; de mørke flatene beholder kobber (se under). */
  --pd-fokus:var(--pd-kobber-mork);
  --pd-fokus-ring:rgba(200,71,28,.28);
  --pd-salvie:#2E6B4B;
  --pd-salvie-flate:#E2EFE7;
  --pd-salvie-kant:#B9D6C4;
  --pd-lavendel:#2F5F8A;
  --pd-lavendel-flate:#E1EBF3;
  --pd-lavendel-kant:#B6CCE0;
  --pd-gul:#8A5A14;
  --pd-gul-flate:#F5EAD2;
  --pd-varsel:#A8372A;
  --pd-varsel-flate:#F7E2DE;
  --pd-varsel-kant:#E3B8B1;
  --pd-salvie-lys:#E2EFE7;
  --pd-lavendel-lys:#E1EBF3;
  --pd-mork-tekst:#17191B;
  --pd-radius:2px; /* prisboken: trykte hjørner */
  --pd-radius-liten:2px;
  --pd-skygge:0 2px 8px rgba(23,25,27,.10);
  /* Dashbordets tofargede grafer (2026-09-19): kobber = tilbud sendt, graf-vunnet =
     vunnet. Paret er validert (dataviz-validatoren) mot BÅDE lin #FBFAF6 og petrol
     #203538: lyshet i bånd, chroma >= 0,1, CVD-avstand >= 10, kontrast >= 3:1.
     Salvie (#286850) og lavendel er for lavmælte til å skilles fra kobber i graf. */
  --pd-graf-vunnet:#2E6B4B;
  --pd-graf-vunnet-flate:#D7E9DF;
  /* Avstandsskalaen (4-px-grid): all margin/padding/gap velges herfra.
     Normaliseringen av eksisterende avvik skjer komponent for komponent i
     leveranse 3/6 - lint håndhever skalaen fra nå. */
  --beffen-rom-1:4px;
  --beffen-rom-2:8px;
  --beffen-rom-3:12px;
  --beffen-rom-4:16px;
  --beffen-rom-5:24px;
  --beffen-rom-6:32px;
  --beffen-rom-7:48px;
  --beffen-rom-8:64px;
  --seg-klart:#A9B0AB;
  --seg-luft:#626B66;
  --seg-vunnet:#2F6048;
  --seg-paagaar:#9B6A3C;
  --seg-utfort:#3F4A44;
  --seg-tapt:#B33E30;
  /* Prosjektfarger (Runes kalenderlinjer + ressursplanlegger): deterministisk
     farge per prosjekt - REGELEN er pf-((tilbud.id % 9) + 1) og skal brukes
     likt overalt i Beffen. Ni mellommørke steg med god innbyrdes avstand og
     avstand til status-/signalfargene (ingen ligger på signalrust #B33E30
     eller eik #9B6A3C). Brukes som 2-3 px streker/brikker, aldri som flatefyll. */
  --prosjekt-1:#3E7CB8;
  --prosjekt-2:#1F9AA8;
  --prosjekt-3:#2F8A57;
  --prosjekt-4:#6E8F2A;
  --prosjekt-5:#C9862B;
  --prosjekt-6:#C2477B;
  --prosjekt-7:#9C4DA6;
  --prosjekt-8:#5B5FC0;
  --prosjekt-9:#5D6B77;
}
/* Fagfarger (runde 2, leveranse C - ressursplanleggerens blokker): én farge
   per fag fra FAG_UTFORENDE. Holder avstand til signalfargene (rust/eik) og
   til prosjektpaletten der det går. Bærerklassene .fagf-* setter color -
   komponentene tegner med currentColor (kant/venstrestripe) og
   color-mix-fyll. Klassenavn er ASCII (rørlegger -> fagf-rorlegger). */
:root{
  --fag-mikrosement:#5B8DB8;
  --fag-flislegging:#3F8F6B;
  --fag-malerarbeid:#8A64B8;
  --fag-membran:#2E9AA8;
  --fag-riving:#6E7F8D;
  --fag-rorlegger:#4E6ED3;
  --fag-elektro:#C48A2E;
  --fag-generelt:#7A8450;
}
.fagf-mikrosement{color:var(--fag-mikrosement)}
.fagf-flislegging{color:var(--fag-flislegging)}
.fagf-malerarbeid{color:var(--fag-malerarbeid)}
.fagf-membran{color:var(--fag-membran)}
.fagf-riving{color:var(--fag-riving)}
.fagf-rorlegger{color:var(--fag-rorlegger)}
.fagf-elektro{color:var(--fag-elektro)}
.fagf-generelt{color:var(--fag-generelt)}

/* Fargebærere: pf-N setter color, komponentene tegner med currentColor
   (linje = background:currentColor, stiplet = repeating-gradient). */
.pf-1{color:var(--prosjekt-1)}
.pf-2{color:var(--prosjekt-2)}
.pf-3{color:var(--prosjekt-3)}
.pf-4{color:var(--prosjekt-4)}
.pf-5{color:var(--prosjekt-5)}
.pf-6{color:var(--prosjekt-6)}
.pf-7{color:var(--prosjekt-7)}
.pf-8{color:var(--prosjekt-8)}
.pf-9{color:var(--prosjekt-9)}
body{
  font-family:"Schibsted Grotesk",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Stabil layout (2026-09-29): `html{scrollbar-gutter:stable}` ble prøvd og tatt ut
   igjen - med klassiske rullefelt (headless Chromium, Windows) ble hele
   arbeidsflaten 15 px smalere også på mobilbredder (fullskjermpanelet 375 av
   390 px), og tre eksisterende sjekker i design-arbeidsflyt-e2e brakk. */
::selection{color:var(--card);background:var(--ink)}

/* Fokus: synlig, egen farge (erstatter 2 px ink-outline) - gjelder ALT interaktivt */
input:focus,textarea:focus,select:focus,
.verktoy input:focus,
.panel input:focus,.panel textarea:focus,.panel select:focus,
.bg-tekst-felt:focus,.vg-tekst-felt:focus{outline:3px solid var(--fokus);outline-offset:1px;border-color:var(--linje-mork)}
button:focus-visible,a:focus-visible,summary:focus-visible,[role=button]:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--fokus);outline-offset:1px}
#rader tr:focus-visible,.tkort:focus-visible,th[data-sort]:focus-visible{outline:3px solid var(--fokus);outline-offset:-3px}
.liste a.hvem:focus-visible{outline:3px solid var(--fokus)}

/* Dyplenker (?apne=/tilSeksjon) skal aldri scrolle målet under den sticky
   topbaren (funn 14) */
#rader tr,.tkort,.dv-seksjon,tr.detaljer,.tk-detalj{scroll-margin-top:calc(var(--topbar-h) + 8px)}

/* Kort-komponenten: flate, linjekant, kortradius, 16px padding (grid) */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-kort);padding:16px;margin-bottom:12px}

/* Input-komponenten: 16px (iOS-zoom-vernet), én flate, én radius, 12px
   padding (4-px-grid) - gir >=44px trykkhøyde. select.status (pillen) vinner
   på spesifisitet med sine egne mål. */
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=search],input[type=date],input[type=time],select,textarea{
  width:100%;padding:12px;border:1px solid var(--kant-kontroll);border-radius:var(--radius-kontroll);font-size:var(--skrift-kontroll);background:var(--flate-input);font-family:inherit;color:var(--ink)}
textarea{resize:vertical;min-height:72px}

/* Knapp-komponenten: sekundær (.kn), primær GRAFITT (.kn.primar - grønn er
   tilstand, aldri knappefarge), dempet fare (.kn.farlig). */
.kn{min-height:44px;padding:0 16px;border:1px solid var(--line);background:var(--card);border-radius:var(--radius-kontroll);font-size:var(--skrift-tekst);font-weight:650;color:var(--ink);cursor:pointer;font-family:inherit}
.kn.primar{background:var(--ink);border-color:var(--ink);color:var(--card)}
.kn.farlig{color:var(--rust);border-color:var(--rust-kant)}

/* Sperrede knapper skal SE sperret ut - ÉN regel for alle roller (tilstandssystemet,
   se blokka «TILSTANDSSYSTEMET» under). Opptatte knapper ([aria-busy=true]) er
   også disabled, men skal se opptatt ut - ikke bleke. */
:where(button,[role=button],.kn,a.kn,.fane):disabled:where(:not([aria-busy=true])),[aria-disabled=true]:where(:not([aria-busy=true])){opacity:.45;cursor:not-allowed !important;box-shadow:none !important;transform:none !important}

/* Purreknappen bruker eik-familien */
.btn-purret,.d-knapper .d-purret{background:#F0E4D3;border-color:#D8BE97;color:#7A5024}
body.morkt .btn-purret,body.morkt .d-knapper .d-purret{background:none;border-color:var(--pd-tekst);color:var(--pd-tekst)} /* prisboken: spot kun på DEN ENE handlingen */

/* Statuspalett fra designspråket (lys bunn, mørk tekst - pilen i select synes) */
.st-foresporsel{background-color:#ECEEEB;color:#4A524C}
.st-klart{background-color:#E3E6E2;color:#343A36}
.st-sendt{background-color:#DDE4E0;color:#3C4A42}
.st-purret1{background-color:#F0E4D3;color:#7A5024}
.st-purret2{background-color:#E7D3B8;color:#6E4519}
.st-vunnet{background-color:#DFEAE3;color:#2F6048}
.st-pabegynt{background-color:#CFE2D6;color:#255239}
.st-utfort{background-color:#E4E9E5;color:#43604F}
.st-utsatt{background-color:#E9E8E1;color:#5F584E}
.st-tapt{background-color:#F2DDDA;color:#8C2F24}
.st-ukjent{background-color:#ECEEEB;color:#4A524C}

/* Sidekomponent-status (oversikt): SAMME palettpar som statuspillene -
   fargen bor her, strukturen bor i siden. */
.ttx-status.ok{background:#DFEAE3;color:var(--ok)}
.ttx-status.ventende{background:#F0E4D3;color:var(--eik-mork)}
.ttx-status.feil{background:#F2DDDA;color:#8C2F24}
.ttx-status.hoppet{background:#ECEEEB;color:#4A524C}
.okp-fak.ok{background:#DFEAE3;color:var(--ok)}
.okp-fak.feil{background:#F2DDDA;color:#8C2F24}
.melding-feil{background:#F2DDDA;border-color:var(--rust-kant);color:#8C2F24}
.bg-rom{background:#E9E8E1;color:#5F584E}
/* Kalenderens dagsdetalj-chips */
.c-oppstart{background:#F0E4D3;color:var(--eik-mork)}
.c-slutt{background:var(--linje-svak);color:#4A524C}
.c-frist{background:#ECEEEB;color:#4A524C}
.c-paagaar{background:#CFE2D6;color:#255239} /* funn 57: egen tone (st-pabegynt-paret) - skilles fra purrefrist */
.c-forfalt{background:#F2DDDA;color:#8C2F24}
/* Håndverker-badges (rust=utløpt, eik=snart) */
.badge.utlopt{background:#F2DDDA;color:var(--rust)}
.badge.snart{background:#F0E4D3;color:var(--eik)}
/* Tripletex-sidens helse- og radstatus */
.pill.ok{background:#DFEAE3;color:var(--ok)}
.pill.feil{background:#F2DDDA;color:#8C2F24}
.pill.av{background:#ECEEEB;color:#4A524C}
.s-status.ventende{background:#F0E4D3;color:var(--eik-mork)}
.s-status.feil{background:#F2DDDA;color:#8C2F24}
.s-status.hoppet_over{background:#ECEEEB;color:#4A524C}

/* Komponentplassering (sporet og aldersmåleren settes inn av design-ui.js) */
td .beffen-spor{margin:0}
.alder-celle{white-space:nowrap}
.tk-spor{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0 6px}
.d-spor{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.liste .beffen-spor{flex-shrink:0}
.liste .beffen-maalerblokk{min-width:112px}

/* Personmarkering (Ansvarlig): fylt chip + stripe på RADENS HØYREKANT.
   Kantsemantikken er delt: venstre kant = tilstand (rust forfalt/grønn vunnet),
   høyre kant = person. Navnet står alltid i tekst - fargen er forsterkning. */
.ansv{display:inline-flex;align-items:center;border-radius:2px;padding:3px 10px;font-size:var(--skrift-etikett);font-weight:650;color:#fff;white-space:nowrap;background:var(--grey)}
.ansv-rune{background:#2F6048}
.ansv-roy{background:#1E5A8A}
.ansv-vegard{background:#7A5024}
.ansv-erland{background:#5F584E}
tr.p-rune td:last-child{box-shadow:inset -4px 0 0 #2F6048}
tr.p-roy td:last-child{box-shadow:inset -4px 0 0 #1E5A8A}
tr.p-vegard td:last-child{box-shadow:inset -4px 0 0 #7A5024}
tr.p-erland td:last-child{box-shadow:inset -4px 0 0 #5F584E}
.tkort.p-rune{border-right:4px solid #2F6048}
.tkort.p-roy{border-right:4px solid #1E5A8A}
.tkort.p-vegard{border-right:4px solid #7A5024}
.tkort.p-erland{border-right:4px solid #5F584E}

/* Bevegelsesspråket (premium-løftet): ro, fart, presisjon. ALT <=250 ms
   ease-out, ALT bak prefers-reduced-motion. Ingen effekter for effektens
   skyld - bevegelse bekrefter handling eller myker overganger. */
/* ===================================================================
   TILSTANDSSYSTEMET (pakke 1, 2026-09-15): sju tilstander x sju roller,
   definert ÉN gang etter ROLLE - aldri etter håndlistede klassenavn. En ny
   kontroll arver alt ved å være riktig element + bære riktig ARIA-attributt
   (docs/tilstander.md). Rollene (selektorlistene under er eneste kilde):
     knapp    button, [role=button], a.kn, .kn, .fane, [data-trykk], summary,
              .beffen-kontakt-knapp (kontakt.js er vendoret - stiles kun her)
     segment  .pseg/.seg/.faner/.visning/.periode > button (flate, valgt = --valgt-*)
     chip     .fchip, .achip, .db-chip, .db-synk, .tid, .ab-tider button, .tavle-tellere button
     tekst    .kn-tekst (understreket tekstknapp, egen komponent under)
     rad      tr[tabindex], tr.rad (klikkbar tabellrad - hover på cellene)
     kort     .tkort, .pk, .hv-kort, .mkort, .tv-kort (hevet ved hover),
              .lk, .hv-rad, .bf-kort, .nbh, .puls, .st-kort, .td-rad (flate)
     seksjon  .dv-seksjonshode, .parkert-hode, .ko-hode, .rk-hode, .dv-mer,
              .dv-romhode, .dv-alleposter ([aria-expanded] styrer åpen/lukket)
     nav      .snav a, .bunnav a/button, .mer-ark .ark a (skallet eier hover/aktiv,
              trykk-svaret bor her)
   Tilstandene: hvile, hover (KUN bak hover:hover + pointer:fine - på iPad ble
   hover hengende etter tapp, Rune-funnet 2026-09-13), trykk (:active, bak
   prefers-reduced-motion), fokus (:focus-visible, over), valgt ([aria-pressed=
   true], [aria-selected=true], [aria-current], .valgt/.aktiv/.paa på knapper),
   åpen ([aria-expanded=true]), opptatt ([aria-busy=true], BeffenTilstand.travel)
   og sperret (:disabled/[aria-disabled=true], over). :where() gir null
   spesifisitet der sidene skal kunne overstyre (hover/trykk/markør).
   =================================================================== */
/* Peker: alt i knapp-, rad-, kort- og seksjonsrollen ser klikkbart ut */
:where(button,[role=button],a.kn,.kn,.fane,[data-trykk],summary,.snav a,.beffen-kontakt-knapp,tr[tabindex],tr.rad,.tkort,.pk,.hv-kort,.mkort,.lk,.hv-rad,.tv-kort,.bf-kort,.nbh,.puls,.st-kort,.td-rad,.dv-seksjonshode,.parkert-hode,.ko-hode,.rk-hode,.dv-mer,.dv-romhode,.dv-alleposter):where(:not(:disabled,[aria-disabled=true])){cursor:pointer}

/* Hover: farge/skygge er ikke bevegelse og gjelder også med redusert bevegelse. */
/* Spesifisitet: :is(rolle) + :hover = (0,2,0) - slår sidenes hvile-regler
   (.x{background:none} = (0,1,0)) men taper for sidenes egne :hover-regler. */
@media (hover:hover) and (pointer:fine){
  /* knapp/chip med flate: hevet + tydeligere kant */
  :is(.kn,a.kn,.btn-liten,.btn-rediger,.btn-purret,.kal-knapp,.dv-pdf,.ringkn,.kn-pille,.kn-liten,.fchip,.achip,.db-chip,.db-synk,.tid,.ab-tider button,.tavle-tellere button,.fane,.d-knapper button,.beffen-kontakt .beffen-kontakt-knapp):where(:not(:disabled,[aria-disabled=true],[aria-busy=true],.beffen-kontakt-av)):hover{box-shadow:var(--skygge);border-color:var(--linje-mork)}
  /* enhver annen knapp: svak tone som OVERLEGG (background-image rører ikke
     bunnfargen - virker på fylte, flate og valgte knapper likt) */
  :is(button,[role=button],a.kn,.fane,.beffen-kontakt-knapp):where(:not(:disabled,[aria-disabled=true],[aria-busy=true],.kn.primar,.kn-pille-primar,.btn-neste,.beffen-kontakt-av,.snav *,.bunnav *,.mer-ark *)):hover{background-image:linear-gradient(color-mix(in srgb,currentColor 7%,transparent),color-mix(in srgb,currentColor 7%,transparent))}
  /* segment/faner: teksten mørkner (valgt beholder sin farge) */
  :is(.pseg,.seg,.faner,.visning,.periode) > button:where(:not([aria-pressed=true],[aria-selected=true],.aktiv)):hover{color:var(--ink)}
  /* seksjonshoder + tekstknapper + flate kort/rader: flatehover */
  :is(.dv-seksjonshode,.parkert-hode,.ko-hode,.rk-hode,.dv-mer,.dv-romhode,.dv-alleposter,.kn-tekst,.lk,.hv-rad,.bf-kort,.nbh,.puls,.st-kort,.td-rad):where(:not(:disabled)):hover{background-color:var(--flate-hover);color:var(--ink)}
  :is(tr[tabindex],tr.rad):not(.valgt):hover > :is(td,th){background-color:var(--flate-hover)}
  :is(.tkort,.pk,.hv-kort,.mkort,.tv-kort):hover{box-shadow:var(--skygge)}
}

/* Valgt: én visuell for alle fem mekanismene (aria-pressed/aria-selected/
   aria-current/.valgt/.aktiv/.paa) på knapper, faner og chips. Skallets nav og
   årsstripen eier sin egen valgt-form; .haster-chips beholder rustfyllet. */
/* Prisboken: reversert sverte gjelder kontroller (knapper, faner, chips). Rader og kort (.hv-rad, .lk, .td-rad, .tkort, .pk,
   .hv-kort, .mkort, .tv-kort, .nbh, .st-kort, .bf-kort) er listeposter og får i stedet tint + 3 px kobbermarkør (regelen under). */
:is(button,[role=button],[role=tab],a.fane,.fane,.fchip,.tid):is([aria-pressed=true],[aria-selected=true],[aria-current],.valgt,.aktiv,.paa):not(.haster,.snav *,.bunnav *,.mer-ark *,.aarstripe *,.hv-rad,.lk,.td-rad,.tkort,.pk,.hv-kort,.mkort,.tv-kort,.nbh,.st-kort,.bf-kort){background-color:var(--valgt-bg);color:var(--valgt-tekst);border-color:var(--valgt-kant);box-shadow:inset 0 0 0 1px var(--valgt-kant)}
body.morkt :is(.hv-rad,.lk,.td-rad):is([aria-current],.valgt){background-color:var(--pd-rad-valgt);color:var(--pd-tekst);box-shadow:inset 3px 0 0 var(--valgt-markor)}
/* Valgt rad/kort: 3 px kobber-markør i venstre kant (--valgt-markor) */
:where(.tkort,.hv-kort,.mkort,.tv-kort,.hv).valgt,:where(.lk,.hv-rad)[aria-current]{box-shadow:inset 3px 0 0 var(--valgt-markor)}
:where(tr[tabindex],tr.rad).valgt > :where(td,th):first-child{box-shadow:inset 3px 0 0 var(--valgt-markor)}

/* Åpen: seksjonshoder fylles med seksjonsflaten og pilen snur. Pil-elementet
   er et <span class="tl-pil"> (eller de eldre .dv-pil/.parkert-pil/.utfort-pil)
   med fast «▾» - rotasjonen er CSS, aldri glyffbytte i JS. */
:is(.dv-seksjonshode,.parkert-hode,.ko-hode,.rk-hode,.dv-mer,.dv-romhode,.dv-alleposter)[aria-expanded=true]{background-color:var(--pd-seksjon)}
.tl-pil,.dv-pil,.parkert-pil,.utfort-pil{display:inline-block;transform-origin:50% 50%}
[aria-expanded=true] > .tl-pil,[aria-expanded=true] .dv-pil,[aria-expanded=true] .parkert-pil,[aria-expanded=true] .utfort-pil,.tkort[aria-current=true] .tl-pil{transform:rotate(180deg)}

/* Opptatt: spinner foran teksten (teksten står), ingen klikk, ikke blek.
   Settes av BeffenTilstand.travel(knapp, tekst) i src/tilstand.js. */
:where(button,[role=button],a.kn,.kn,.fane)[aria-busy=true]{pointer-events:none;cursor:progress;opacity:1}
:where(button,[role=button],a.kn,.kn,.fane)[aria-busy=true]::before{content:"";display:inline-block;flex:none;width:12px;height:12px;margin-right:8px;vertical-align:-2px;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:var(--pd-kobber)}
@keyframes beffen-spinn{to{transform:rotate(360deg)}}

/* Tekstknapp: understreket tekst m/ egen hover-flate og trykk. Brukes for
   «Tilbakestill til mal», «+ Legg til periode», «Endre Abax-lenke», «Til denne
   måneden», kvitteringslenkene i Økonomi og «Fjern»-radene. */
.kn-tekst{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 4px;margin:0 -4px;border:0;border-radius:var(--radius-kontroll);background:none;color:var(--ink);font-family:inherit;font-size:var(--skrift-tekst);font-weight:650;line-height:1.2;text-align:left;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--eik);cursor:pointer}
@media (pointer:coarse){.kn-tekst{min-height:44px}}

/* Bevegelsesspråket (premium-løftet): ro, fart, presisjon. ALT <=250 ms
   ease-out, ALT bak prefers-reduced-motion. Ingen effekter for effektens
   skyld - bevegelse bekrefter handling eller myker overganger. */
@media (prefers-reduced-motion: no-preference){
  tr.detaljer td,.tk-detalj,.dv-kropp,.rk-detalj,.romdetalj,.dv-romdetalj{animation:beffen-inn .18s ease-out}
  .toast{transform:translateY(8px);transition:opacity .2s ease-out,transform .2s ease-out}
  .toast.vis{transform:translateY(0)}
  :where(button,[role=button],a.kn,.kn,.fane,[data-trykk],summary,.snav a,.beffen-kontakt-knapp,tr[tabindex],tr.rad,.tkort,.pk,.hv-kort,.mkort,.lk,.hv-rad,.tv-kort,.bf-kort,.nbh,.puls,.st-kort,.td-rad,.dv-seksjonshode,.parkert-hode,.ko-hode,.rk-hode,.dv-mer,.dv-romhode,.dv-alleposter){transition:box-shadow .15s ease-out,transform .12s var(--ease-ut),background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out}
  @media (hover:hover) and (pointer:fine){
    :where(.tkort,.pk,.hv-kort,.mkort,.tv-kort):hover{transform:translateY(-1px)}
  }
  /* Trykk: alt trykkbart svarer med 3 % nedskalering i 120 ms - bekreftelsen
     kommer fra grensesnittet, ikke fra serveren. Brede flater (kort, rader,
     seksjonshoder) svarer svakere. */
  :where(button,[role=button],a.kn,.kn,.fane,[data-trykk],summary,.snav a,.bunnav a,.bunnav button,.mer-ark .ark a,.beffen-kontakt-knapp):where(:not(:disabled,[aria-disabled=true],[aria-busy=true],.beffen-kontakt-av)):active{transform:scale(.97)}
  :where(.tkort,.pk,.hv-kort,.mkort,.lk,.hv-rad,.tv-kort,.bf-kort,.nbh,.puls,.st-kort,.td-rad,tr[tabindex],tr.rad,.dv-seksjonshode,.parkert-hode,.ko-hode,.rk-hode,.dv-mer,.dv-romhode,.dv-alleposter):where(:not(:disabled,[aria-disabled=true])):active{transform:scale(.995)}
  .tl-pil,.dv-pil,.parkert-pil,.utfort-pil{transition:transform .18s var(--ease-ut)}
  :where(button,[role=button],a.kn,.kn,.fane)[aria-busy=true]::before{animation:beffen-spinn .7s linear infinite}
  .glid{transition:grid-template-rows .22s ease-out}
  .pipe span{animation:beffen-voks .22s ease-out;transform-origin:left}
  .radpuls > td,.radpuls{animation:beffen-puls .25s ease-out}
  .flip-flytter{transition:transform .2s var(--ease-ut)}
}
@keyframes beffen-inn{from{opacity:0;transform:translateY(-3px)}}
/* Bevegelse som bekrefter, runde 2 (design/animate-polish, 2026-09-25):
   dialoger, faneinnhold, tom-/feiltilstander og statuspiller får samme
   rolige inngang på alle sider - og ETT signaturøyeblikk: «tilbudet er på
   vei» (.radsveip) når et tilbud sendes. Alt <= 250 ms unntatt sveipet
   (700 ms, ett lys som går én gang over raden). Ingenting her flytter
   layout; alt står bak prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  /* Dialoger: bakteppet toner inn, panelet stiger 10 px og setter seg.
     Utgangen er momentan (Escape/klikk) - raskere ut enn inn. */
  .bakteppe.vis{animation:beffen-fade .16s ease-out}
  .bakteppe.vis > *{animation:beffen-dialog-inn .22s var(--ease-ut)}
  /* Faneinnhold og visninger: nytt innhold kommer rolig inn der det gamle sto */
  [role=tabpanel]:not([hidden]){animation:beffen-inn .18s ease-out}
  /* Tom- og feiltilstander kommer inn etter svaret, aldri hardt */
  .tomstate,.beffen-feil{animation:beffen-inn .2s ease-out}
  /* Fanenes kobber-understrek vokser inn fra venstre ved valg */
  .faner > button[aria-pressed=true]::after,.faner > button[aria-selected=true]::after{animation:beffen-voks .2s var(--ease-ut);transform-origin:left}
  /* Bunnmenyen: aktivt valg glir mellom knappene */
  .bunnav a,.bunnav button{transition:color .15s ease-out,background-color .15s ease-out,box-shadow .15s ease-out}
  /* Signaturøyeblikket: ett lavendel-lys går én gang fra venstre mot høyre
     over raden/kortet som nettopp ble sendt - samme farge som Sendt-pillen. */
  .radsveip{position:relative}
  /* !important: radens egne tilstander (valgt/hover/kort) setter background-
     kortformen og ville nullet lyset - sveipet skal vinne i de 700 ms det varer. */
  .radsveip > td,.radsveip > th,.tkort.radsveip,.tv-kort.radsveip{background-image:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--pd-lavendel-flate,#DEEAF0) 85%,transparent) 50%,transparent 70%) !important;background-size:300% 100% !important;background-repeat:no-repeat !important;animation:beffen-sveip .7s var(--ease-ut) both}
}
/* Statuspillen skifter farge mykt uansett bevegelsesinnstilling - farge er ikke bevegelse */
select.status,.st-pille,[class*=" st-"],[class^="st-"]{transition:background-color .25s ease-out,color .25s ease-out}
@keyframes beffen-dialog-inn{from{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes beffen-sveip{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes beffen-voks{from{transform:scaleX(0)}}
@keyframes beffen-puls{from{background-color:#DFEAE3}}

/* Sammenleggbart som GLIR begge veier (grid-rows-trikset) - brukes av
   Tapt/arkiv og Lukket/avvist. Innholdet ligger alltid i DOM. */
.glid{display:grid;grid-template-rows:0fr}
.glid.apen{grid-template-rows:1fr}
.glid > .glid-inn{overflow:hidden;min-width:0}

/* Skjelett-lasting: rolige flater i stedet for tomme - statisk uten bevegelse */
.skjelett{border-radius:8px;background:var(--linje-svak);min-height:14px}
.skjelett.linje{height:14px;margin:10px 0}
.skjelett.blokk{height:64px;margin:8px 0}
@media (prefers-reduced-motion: no-preference){
  .skjelett{animation:beffen-skjelett 1.1s ease-in-out infinite alternate}
}
@keyframes beffen-skjelett{from{opacity:1}to{opacity:.55}}

/* Toast-komponenten: bor nede i hjørnet (bekreftelse, ikke avbrytelse) */
.toast{position:fixed;bottom:16px;right:16px;background:var(--ok);color:var(--card);padding:12px 16px;border-radius:var(--radius-pill);font-size:var(--skrift-tekst);opacity:0;transition:opacity .2s;pointer-events:none;z-index:26;max-width:92vw}
.toast.vis{opacity:1}
.toast.feil{background:var(--rust)}

/* Tomtilstander: rolig geometri + neste handling - aldri bare hvit flate */
.tomstate{display:grid;justify-items:center;gap:10px;padding:36px 16px;text-align:center}
.tomstate svg{opacity:.9}
.tomstate b{font-size:var(--skrift-tekst)}
.tomstate p{margin:0;color:var(--grey);font-size:var(--skrift-tekst);max-width:340px}
.tomstate a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--eik);text-underline-offset:2px;font-weight:650;font-size:var(--skrift-tekst)}

/* Utskrift: ren svart-på-hvitt-tabell - skjerm-krom bort */
@media print{
  .topbar,.verktoy,.forklaring,.parkert-hode,.kal-knapp,button,.d-knapper,.toast,.sok-bakteppe,.rekl-linje,#oppdatert{display:none !important}
  body{background:#fff;padding:0}
  .card{border:none;box-shadow:none;padding:0;margin:0}
  .wrap{max-width:none;padding:0}
  td,th{color:#000 !important}
  tr.forfalt td:first-child,.tkort{box-shadow:none !important}
  thead th{position:static}
  .status-inn .beffen-spor{display:none}
  select.status{appearance:none;background:none;border:none;padding:0;font-weight:600}
  .neste span + button{display:none}
}

/* Adressen som overskrift (løft og bevegelse, 2026-09-25): ÉN stil for
   identitetskortene på mobil - Oversikt-kortet (.tk-adr), Min uke (.mu-adr),
   dagsvisningen (.pv-adr) og detaljpanelet (.dv-adr). Newsreader 24 px som i
   detaljpanelet; sidene legger klassen på sitt element og eier marginene. */
.adr-tittel{font-family:var(--font-display);font-weight:500;font-size:var(--skrift-adresse);line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere}
/* Tall settes tabulært KUN på rene sifferspenn: src/format.js pakker dem i
   <span class="tall"> - tekst/skilletegn rundt får ikke tabular-nums (ga
   «25 , 75 t»-luft rundt komma). Den gamle selektorlisten fases ut etter
   hvert som visningsstedene går over på formatmodulen. */
.tall{font-variant-numeric:tabular-nums lining-nums}

/* Kontakt-handlingsraden (kontakt.js, delt med v1-skjemaet): kobles til
   beffen-webs tokens her - komponenten selv bærer bare nøytrale fallbacks. */
.beffen-kontakt{--bk-linje:var(--linje-mork);--bk-farge:var(--ink);--bk-demp:var(--grey);--bk-flate:var(--card)}

/* Adressesøket (src/adressesok.js, delt med v1-skjemaet): samme mønster -
   komponenten bærer nøytrale fallbacks, tokens kobles her. */
.beffen-adr{--ba-flate:var(--card);--ba-farge:var(--ink);--ba-demp:var(--grey);--ba-linje:var(--linje-mork);--ba-linje-svak:var(--linje-svak);--ba-aktiv:var(--flate-hover);--ba-skygge:var(--skygge)}

/* ===================================================================
   MØRKT DESIGNSPRÅK (design/dashboard-overalt, 2026-08-24)
   Dashbord-designet som felles drakt: body.morkt remapper semantikk-
   tokens til pd-paletten så alle eksisterende komponenter (kort, knapper,
   tabeller, skjelett, feil, toast) arver mørk drakt uten sideendringer.
   body.morkt-lys = mørkt SKALL m/ lys arbeidsflate (Skjema/Felt - dagslys-
   lesbarhet på mobil er begrunnelsen, vedtatt av Stian).
   =================================================================== */
body.morkt, body.morkt-lys{
  font-family:var(--font-tekst);
  background:var(--pd-bg);
  --fokus:var(--pd-fokus);
  --kant-kontroll:var(--pd-kant-kontroll);
  --topbar-lenke:var(--pd-demp);
  --valgt-bg:var(--pd-tekst); --valgt-tekst:var(--pd-petrol-tekst); --valgt-kant:var(--pd-tekst); /* prisboken: valgt = reversert sverte */
  --valgt-markor:var(--pd-kobber);
  --primar-bg:var(--pd-kobber-fyll); --primar-tekst:var(--pd-kobber-fyll-tekst); --primar-hover:var(--pd-kobber-fyll-hover);
  --radius-kort:var(--pd-radius); --radius-kontroll:2px; --radius-pill:2px; /* prisboken runde 2: trykte hjørner også på det lyse undertemaet (felt/timer/skjema) */
}
/* MERK: --bg remappes KUN i helmørk modus. I morkt-lys er lerretet mørkt
   (body-background over), men kortenes indre --bg-flater forblir lyse -
   ellers blir rom-rader o.l. mørke øyer inni papiret. */
body.morkt{
  color:var(--pd-tekst);
  --bg:var(--pd-bg);
  --card:var(--pd-flate); --ink:var(--pd-tekst); --grey:var(--pd-demp);
  --pd-kant-rolig:#DEDDD8; /* stille luksus 2026-10-02: kort- og tabellkanter ett hakk roligere enn --pd-kant (knapper og inputs beholder sine) */
  --line:var(--pd-kant-rolig); --linje-svak:var(--pd-kant-svak); --linje-mork:var(--pd-kant-sterk);
  --flate-hover:var(--pd-rad-hover); --flate-input:var(--pd-flate-2); --flate-panel:var(--pd-panel);
  --rad:var(--pd-rad); --rad-alt:var(--pd-rad-alt); --rad-hover:var(--pd-rad-hover); --rad-valgt:var(--pd-rad-valgt);
  --rust:var(--pd-varsel); --rust-kant:var(--pd-varsel-kant); --ok:var(--pd-salvie);
  --eik:var(--pd-kobber-mork); --eik-lys:var(--pd-kobber-flate); --eik-kant:var(--pd-kobber-kant); --eik-mork:var(--pd-kobber-mork);
  --sand-lys:var(--pd-gul-flate); --bakteppe:rgba(37,50,54,.35);
  --valgt-bg:var(--pd-tekst); --valgt-tekst:var(--pd-petrol-tekst); --valgt-kant:var(--pd-tekst); /* prisboken: valgt = reversert sverte */
  --valgt-markor:var(--pd-kobber);
  --primar-bg:var(--pd-kobber-fyll); --primar-tekst:var(--pd-kobber-fyll-tekst); --primar-hover:var(--pd-kobber-fyll-hover);
  --skygge:var(--pd-skygge);
  --radius-kort:var(--pd-radius); --radius-kontroll:2px; --radius-pill:2px;
  scrollbar-color:var(--pd-kant-sterk) var(--pd-bg);
  caret-color:var(--pd-kobber-mork);
  accent-color:var(--pd-kobber-mork);
}
/* Stille luksus (2026-10-02): det nettleseren tegner selv følger paletten - markering,
   markør, avkrysning. Understreker får luft under teksten. */
body.morkt ::selection{background:var(--pd-kobber-flate);color:var(--pd-tekst)}
body.morkt :where(a,button,.kn-tekst){text-underline-offset:3px;text-decoration-thickness:1px}
/* Primær handling = terrakotta-fyll m/ lys tekst; sekundær = varm hvit flate
   m/ diskret kant (ingen «hvite lapper» - flate-2 er hevet nivå). */
body.morkt .kn{background:var(--pd-flate-2);border-color:var(--pd-kant);font-weight:600}
@media (hover:hover) and (pointer:fine){body.morkt .kn:hover{background:var(--pd-flate);border-color:var(--pd-kant-sterk)}}
body.morkt .kn.primar{background:var(--primar-bg);border-color:var(--primar-bg);color:var(--primar-tekst)}
@media (hover:hover) and (pointer:fine){body.morkt .kn.primar:hover{background:var(--primar-hover);border-color:var(--primar-hover)}}
body.morkt .kn.farlig{background:var(--pd-flate-2);color:var(--pd-varsel);border-color:var(--pd-varsel-kant)}
@media (hover:hover) and (pointer:fine){body.morkt .kn.farlig:hover{background:var(--pd-varsel-flate)}}
/* Fokus: 2 px terrakotta + 35 %-ring (briefens fokusmarkering) - synlig ved tastaturnavigasjon */
body.morkt :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--pd-fokus);outline-offset:1px;box-shadow:0 0 0 4px var(--pd-fokus-ring)}
/* Mørke flater (petrol/blekk/grønn toast): kobber-mork forsvinner der (ca. 1,7:1), kobber gir 4,2:1 på petrol.
   Sidemenyen har egen regel (.snav a:focus-visible). --fokus settes også, fordi Skjema/Felt/Timer (morkt-lys) bruker den. */
body:is(.morkt,.morkt-lys) :where(.bunnav,.mer-ark,.toast,.puls,.dash-melding,.sumbar,.opptaksboks){--pd-fokus:var(--pd-kobber);--fokus:var(--pd-kobber)}
/* Lys arbeidsflate: kortene beholder lyse tokens; kun lerret + skall er mørkt.
   Tekst som står RETT PÅ lerretet må bruke .pa-lerret (eller arves fra shell). */
body.morkt-lys{color:var(--ink)}
body.morkt-lys .pa-lerret, body.morkt-lys .pa-lerret a{color:var(--pd-tekst)}
body.morkt-lys .pa-lerret .demp{color:var(--pd-demp)}
body.morkt .eyebrow, body.morkt-lys .eyebrow{font-size:var(--skrift-etikett);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pd-demp)}
body.morkt h1, body.morkt-lys h1{font-family:var(--font-display);font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1;text-wrap:balance} /* prisboken: sidetittel i kondensert versal, lett vekt (Vitra, ikke Byggmakker) */
/* Poster (adresser) er varenavn, ikke seksjoner: kondensert halvfet i vanlig skrivemåte (prosjektets, skjemaets og panelets adresse) */
body:is(.morkt,.morkt-lys) :is(.topp h1,#skjemaH1,.dv-adr,.adr-tittel,.pv-adr){text-transform:none;letter-spacing:-.01em}
.serif{font-family:var(--font-display);font-weight:500}

/* ---------- Warm Linen: status- og komponentpaletter ----------
   Statuspillene (.st-*), sidekomponent-statusene og design-ui.js sin
   selvforsynte --beffen-*-palett følger app-temaet: lin/petrol/terrakotta +
   funksjonsfargene. Papir-temaet (:root-reglene over) er urørt. Alle par er
   >= 4,5:1 (tekst mot egen flate). */
/* Statusblekket gjelder både app-temaet og håndverkerflatene (morkt-lys: /felt, /timer, skjemaet) -
   samme designspråk på statusmerkene overalt (Stian 2026-10-04). */
body:is(.morkt,.morkt-lys){
  --st-noytral-bg:var(--pd-seksjon); --st-noytral-tekst:#4D5A5E;
  --st-klart-bg:#E1E8E8; --st-klart-tekst:#2F4A4E;
  --st-pabegynt-bg:#C9E3D6; --st-pabegynt-tekst:#1F5A42;
  --st-utfort-bg:#E4EBE7; --st-utfort-tekst:#3F5F52;
  --st-utsatt-bg:#EAE4DA; --st-utsatt-tekst:#6A6258;
}
body.morkt{
  /* design-ui.js (spor + aldersmåler) leser disse via var(--beffen-*) */
  --beffen-kalk:var(--pd-bg); --beffen-porselen:var(--pd-flate-2); --beffen-grafitt:var(--pd-tekst);
  --beffen-skifer:#7E8F92; --beffen-eik:var(--pd-kobber); --beffen-signalrust:var(--pd-varsel);
  --beffen-linje:var(--pd-kant); --beffen-linje-mork:var(--pd-kant-sterk); --beffen-suksess:var(--pd-salvie); --beffen-fokus:var(--pd-kobber);
}
/* Prisboken (fiks 6, farge 2026-10-04): status er et trykt merke - versal kondensert etikett, 1 px regel.
   Stian 04.10: «det skal være lett å se» - merket er FYLT med statusens blekk og teksten er den hvite
   trykkfargen (petrol-tekst), regelen har samme farge som fyllet. Hver status beholder sin farge
   (produktsemantikk); bare --st-fyll settes per status. Gjelder også morkt-lys (/felt, /timer, skjemaet). Alle ti par >= 5:1 (hvit mot blekket). */
body:is(.morkt,.morkt-lys) :is(.st-foresporsel,.st-ukjent,.st-klart,.st-sendt,.st-purret1,.st-purret2,.st-vunnet,.st-pabegynt,.st-utfort,.st-utsatt,.st-tapt){background-color:var(--st-fyll);color:var(--pd-petrol-tekst);border:1px solid var(--st-fyll);border-radius:2px;font-family:var(--font-etikett);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
body:is(.morkt,.morkt-lys) .st-foresporsel,body.morkt .st-ukjent{--st-fyll:var(--st-noytral-tekst)}
body:is(.morkt,.morkt-lys) .st-klart{--st-fyll:var(--st-klart-tekst)}
body:is(.morkt,.morkt-lys) .st-sendt{--st-fyll:var(--pd-lavendel)}
body:is(.morkt,.morkt-lys) .st-purret1{--st-fyll:var(--pd-gul)}
body:is(.morkt,.morkt-lys) .st-purret2{--st-fyll:var(--pd-kobber-mork)}
body:is(.morkt,.morkt-lys) .st-vunnet{--st-fyll:var(--pd-salvie)}
body:is(.morkt,.morkt-lys) .st-pabegynt{--st-fyll:var(--st-pabegynt-tekst)}
body:is(.morkt,.morkt-lys) .st-utfort{--st-fyll:var(--st-utfort-tekst)}
body:is(.morkt,.morkt-lys) .st-utsatt{--st-fyll:var(--st-utsatt-tekst)}
body:is(.morkt,.morkt-lys) .st-tapt{--st-fyll:var(--pd-varsel)}
body.morkt .ttx-status.ok,body.morkt .okp-fak.ok,body.morkt .pill.ok{background:var(--pd-salvie-flate);color:var(--pd-salvie)}
body.morkt .ttx-status.ventende,body.morkt .s-status.ventende{background:var(--pd-gul-flate);color:var(--pd-gul)}
body.morkt .ttx-status.feil,body.morkt .okp-fak.feil,body.morkt .pill.feil,body.morkt .s-status.feil,body.morkt .melding-feil{background:var(--pd-varsel-flate);color:var(--pd-varsel)}
body.morkt .ttx-status.hoppet,body.morkt .pill.av,body.morkt .s-status.hoppet_over{background:var(--pd-seksjon);color:var(--st-noytral-tekst)}
body.morkt .badge.utlopt,body.morkt .c-forfalt{background:var(--pd-varsel-flate);color:var(--pd-varsel)}
body.morkt .badge.snart,body.morkt .c-oppstart{background:var(--pd-kobber-flate);color:var(--pd-kobber-mork)}
body.morkt .c-paagaar{background:var(--st-pabegynt-bg);color:var(--st-pabegynt-tekst)}
body.morkt .c-frist,body.morkt .c-slutt{background:var(--pd-seksjon);color:var(--st-noytral-tekst)}
body.morkt .bg-rom{background:var(--pd-seksjon);color:var(--st-noytral-tekst)}
@keyframes beffen-puls-linen{from{background-color:var(--pd-salvie-flate)}}
body.morkt .radpuls > td,body.morkt .radpuls{animation-name:beffen-puls-linen}
/* Statuspalett for prognose-/segment-brikkene (dashbord + oversiktens salgsløp) */
body.morkt{--seg-klart:#BEB5A8;--seg-luft:#7E8F92;--seg-vunnet:#286850;--seg-paagaar:#D8733F;--seg-utfort:#3F5F52;--seg-tapt:#9A443B}

/* ---------- Flatevarianter (2026-08-24): kontrollrom vs arbeidsbenk ----------
   To overflater på samme merkevare (Stians bestilling):
   - body.morkt alene = KONTROLLROM (dashbordet): store kort, grafer, ringer,
     fargeflater - beholdes som det er.
   - body.morkt.arbeidsflate = ARBEIDSBENK (Oversikt/Timer/Kostnader/Ressurs):
     flatere, roligere, tettere. Mindre radius, mykere skygge, pill-former
     forbeholdt ekte statuser. Ingen nye farger - samme paletter og fonter. */
body.morkt.arbeidsflate{
  --radius-kort:2px; /* prisboken: arbeidsflaten følger de trykte hjørnene */
  --radius-kontroll:2px;
  --skygge:0 1px 2px rgba(37,50,54,.06);
  /* Warm Linen: benken følger samme nivåer som resten (--pd-*); --ab-*
     beholdes som alias så eldre regler virker. Sidefeltet (petrol) er den
     ENESTE store mørke flaten. */
  --ab-bg:var(--pd-bg);
  --ab-flate:var(--pd-flate);
  --ab-flate-2:var(--pd-flate-2);
  --ab-kant:var(--pd-kant);
  --ab-kant-svak:var(--pd-kant-svak);
  --ab-demp:var(--pd-demp);
  --bg:var(--ab-bg);
  --card:var(--ab-flate);
  --flate-hover:var(--pd-rad-hover);
  --flate-input:var(--ab-flate-2);
  --line:var(--ab-kant);
  --linje-svak:var(--ab-kant-svak);
  --linje-mork:var(--ab-kant);
  --grey:var(--ab-demp);
  scrollbar-color:var(--ab-kant) var(--ab-bg);
}
/* UA-standardfarger (svart knappe-/inputtekst, blå lenker) skal aldri lekke
   inn på mørke flater: knapper/inputs ARVER IKKE farge fra CSS-kaskaden uten
   dette. Null spesifisitet (:where) - enhver author-regel vinner over den. */
:where(body.morkt, body.morkt-lys) :where(button, input, select, textarea, a){color:inherit}
:where(body.morkt) :where(input, textarea)::placeholder{color:var(--grey)}
body.arbeidsflate ::selection{background:color-mix(in srgb, var(--eik) 45%, transparent)}
body.arbeidsflate input, body.arbeidsflate textarea{caret-color:var(--eik)}
/* Ansvarlig som rolig tekst m/ fargeprikk i stedet for fylt pill -
   personfargene er de samme som chip-/kantmarkeringene over. */
body.arbeidsflate .ansv{background:none;color:var(--grey);padding:0;gap:6px;font-size:var(--skrift-meta)}
body.arbeidsflate .ansv::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grey);flex:none}
/* Prikkene lysnes mot mørk flate (pillene brukte fargene som fyll m/ hvit tekst) */
body.arbeidsflate .ansv-rune{background:none}body.arbeidsflate .ansv-rune::before{background:#2F6048}
body.arbeidsflate .ansv-roy{background:none}body.arbeidsflate .ansv-roy::before{background:#1E5A8A}
body.arbeidsflate .ansv-vegard{background:none}body.arbeidsflate .ansv-vegard::before{background:#7A5024}
body.arbeidsflate .ansv-erland{background:none}body.arbeidsflate .ansv-erland::before{background:#5F584E}
body.arbeidsflate .ansv.dempet{border:0}

/* ---------- Shell: lys sidemeny (desktop >= 760 px) + bunnmeny (mobil) ----------
   design/navigasjon 2026-09-29 (Stians valgte retning 1c «Paper sidebar»):
   papirbakgrunn, Phosphor duotone-ikoner i én farge, teal «Ny befaring», oransje
   KUN på aktivt ikon og uleste-prikker. Markupen bygges av design-shell.js.
   Paletten --nav-* er definert her (eneste sted) på body.m-skall, så sidemeny,
   bunnmeny, ark og Meny-knappen arver den. Venstre-plassen eies av skallet:
   klassen m-skall settes av BeffenShell.monter() - flater UTEN skall (felt for
   håndverker-rollen) beholder full bredde. Sidenes egne regler som følger
   menybredden bruker var(--nav-bredde) (index.html: .sumbar på desktop). */
body.m-skall{
  --nav-bredde:232px;
  --nav-bg:var(--pd-bg); --nav-border:var(--pd-kant); --nav-ink:var(--pd-tekst); --nav-text:var(--pd-tekst); --nav-icon:var(--pd-demp);
  --nav-group:var(--pd-demp); --nav-accent:var(--pd-kobber); --nav-accent-plus:#FFFFFF; --nav-active-bg:var(--pd-flate);
  --nav-knapp-tekst:#FFFFFF; --nav-avatar:var(--pd-seksjon); --nav-skjul:var(--pd-demp-2); --nav-hover:var(--pd-rad-hover);
  --nav-ink-hover:var(--pd-kobber-hover);
  --nav-skygge-knapp:none; --nav-skygge-aktiv:none; --nav-skygge-flis:0 2px 8px rgba(23,25,27,.18);
  padding-left:var(--nav-bredde);
}
/* Registeret (prisboken 2026-10-02): katalogens tommelindeks i margen. Papir, én hårlinje mot
   oppslaget, grupper som versal-etiketter, rader uten piller - aktiv rad = 2 px spotstrek i kanten. */
.snav{position:fixed;left:0;top:0;bottom:0;width:var(--nav-bredde);box-sizing:border-box;display:flex;flex-direction:column;padding:20px 0 16px;background:var(--nav-bg);border-right:1px solid var(--nav-border);color:var(--nav-text);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;z-index:15;scrollbar-width:thin;scrollbar-color:var(--nav-border) transparent}
.snav>*{flex-shrink:0}
.nav-sok{display:flex;align-items:center;gap:8px;min-height:44px;margin:0 16px 8px;padding:0 12px;background:transparent;border:1px solid var(--nav-border);border-radius:var(--radius-kontroll);color:var(--nav-text);font:500 var(--skrift-tekst)/1.2 var(--font-tekst);text-align:left;cursor:pointer}
.nav-sok span{flex:1}
.nav-sok kbd{font:400 var(--skrift-meta)/1 var(--font-tekst);color:var(--nav-group)}
@media(hover:hover) and (pointer:fine){.nav-sok:hover{background:var(--nav-hover);border-color:var(--nav-group)}}
.mer-ark .nav-sok{width:calc(100% - 32px);margin-top:8px;min-height:48px;font-size:var(--skrift-kontroll)}
.nav-sok-feil{max-width:min(440px,calc(100vw - 32px));padding:24px;border:1px solid var(--line);border-radius:var(--radius-kontroll);background:var(--card);color:var(--ink);font:400 var(--skrift-tekst)/1.5 var(--font-tekst)}
.nav-sok-feil::backdrop{background:var(--bakteppe)}
.nav-sok-feil h2{margin:0;font:600 var(--skrift-tittel)/1.2 var(--font-display)}
.nav-sok-feil>div{display:flex;gap:8px;flex-wrap:wrap}
.nav-sok-feil button{min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:var(--radius-kontroll);background:var(--card);color:var(--ink);font:500 var(--skrift-tekst)/1.4 var(--font-tekst)}
.nav-sok-feil button:first-child{background:var(--primar-bg);color:var(--primar-tekst);border-color:var(--primar-bg)}
.nav-sok-feil button:focus-visible{outline:2px solid var(--fokus,var(--ink));outline-offset:2px}
.snav-topp{display:flex;align-items:center;gap:10px;padding:0 20px}
.snav-flis{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:2px;background:var(--nav-ink);color:var(--nav-knapp-tekst);font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1;flex:none}
.snav-flis i{position:absolute;right:3px;bottom:3px;width:5px;height:5px;background:var(--nav-accent)}
.snav-ord{flex:1;min-width:0;font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:.10em;text-transform:uppercase;line-height:1;color:var(--nav-ink)}
.snav-skjul{display:grid;place-items:center;width:18px;height:18px;color:var(--nav-skjul);flex:none}
.snav-skjul-ikon{width:18px;height:18px}
/* «Ny befaring» = DEN handlingen: spotfarge, trykt rektangel, kondensert versal */
.snav a.snav-ny{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;margin:24px 16px 8px;padding:0 12px;border-radius:2px;background:var(--pd-kobber-fyll);color:var(--nav-knapp-tekst);text-decoration:none;font-family:var(--font-tekst);font-size:16px;font-weight:600;line-height:1;letter-spacing:0;white-space:nowrap}
.snav a.snav-ny .nav-ikon{width:18px;height:18px;color:var(--nav-accent-plus)}
@media (hover:hover) and (pointer:fine){.snav a.snav-ny:hover{background:var(--pd-kobber-fyll-hover)}}
.nav-gruppe{display:flex;flex-direction:column;gap:0}
.nav-gruppehode,.snav-gruppe-tittel,.ark-gruppe-tittel{display:flex;align-items:center;gap:6px;width:100%;margin:0;padding:20px 20px 6px;border:0;background:none;font-family:var(--font-etikett);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1;color:var(--nav-group);text-align:left;border-radius:0;white-space:nowrap}
button.nav-gruppehode{cursor:pointer}
.nav-gruppehode>span{flex:1;min-width:0}
.nav-caret{width:12px;height:12px;flex:none}
.nav-gruppe.lukket .nav-caret{transform:rotate(-90deg)}
.nav-gruppe.lukket .nav-gruppeliste{display:none}
.nav-gruppeliste{display:flex;flex-direction:column;gap:0}
@media (hover:hover) and (pointer:fine){button.nav-gruppehode:hover{color:var(--nav-ink)}}
/* Rad: 40 px, ikon 18 px, tekst 14/500; aktiv = 2 px spotstrek i margen + halvfet, ingen pille */
.snav a.nav-rad,.mer-ark a.nav-rad{display:flex;align-items:center;gap:12px;height:40px;padding:0 20px 0 18px;border-left:2px solid transparent;border-radius:0;color:var(--nav-text);text-decoration:none;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;letter-spacing:0;flex:none;position:relative}
.nav-rad .nav-ikon{width:18px;height:18px;color:var(--nav-icon);flex:none}
.nav-rad .nav-tekst{flex:1;min-width:0}
.nav-prikk{display:block;width:7px;height:7px;border-radius:50%;background:var(--nav-ink);flex:none}
.nav-prikk[hidden]{display:none}
@media (hover:hover) and (pointer:fine){.snav a.nav-rad:hover,.mer-ark a.nav-rad:hover{background:var(--nav-hover);color:var(--nav-ink)}}
/* Aktiv rad = reversert sverte (signaturen «valgt = hvit på svart»), ikke en kantstrek */
.snav a.nav-rad.aktiv,.mer-ark a.nav-rad.aktiv{background:var(--nav-ink);border-left-color:var(--nav-ink);color:var(--nav-knapp-tekst);font-weight:600}
.nav-rad.aktiv .nav-ikon{color:var(--nav-knapp-tekst)}
@media (hover:hover) and (pointer:fine){.snav a.nav-rad.aktiv:hover,.mer-ark a.nav-rad.aktiv:hover{background:var(--nav-ink);color:var(--nav-knapp-tekst)}}
.snav-bunn{margin-top:auto;padding-top:8px;border-top:1px solid var(--nav-border);display:flex;flex-direction:column;gap:0}
.snav-bruker{display:flex;align-items:center;gap:10px;padding:8px 20px 0;min-height:36px}
.snav-bruker:has(.snav-navn:empty){display:none}
.snav-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:2px;background:var(--nav-avatar);color:var(--nav-ink);font-family:var(--font-etikett);font-size:11px;font-weight:600;line-height:1;flex:none}
.snav-navn{font-size:13px;font-weight:500;line-height:1.2;color:var(--nav-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .snav :is(a,button):focus-visible,body .bunnav :is(a,button):focus-visible,body .mer-ark :is(a,button):focus-visible,body .nav-flyt:focus-visible{outline:2px solid var(--nav-accent);outline-offset:-2px;box-shadow:none}
@media (prefers-reduced-motion: no-preference){.nav-caret{transition:transform .15s ease-out}}
.bunnav{display:none}
.mer-ark{display:none}
.nav-flyt{display:none}
@media (min-width:760px) and (max-width:899.98px){body.m-skall.har-sumbar .snav{padding-bottom:calc(var(--sumbar-h,132px) + 14px)}}
@media(max-width:759.98px){
  body.m-skall{padding-left:0;padding-bottom:calc(var(--bunnav-h,74px) + 24px)}
  body.m-skall.har-sumbar{padding-bottom:0}
  body.m-skall.har-sumbar .bunnav{display:none}
  body.m-skall.har-sumbar .nav-flyt{position:fixed;right:12px;bottom:calc(var(--sumbar-h,132px) + 14px);z-index:15;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:0;border-radius:2px;background:var(--nav-ink);color:var(--nav-knapp-tekst);font-family:var(--font-etikett);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--nav-skygge-flis);cursor:pointer}
  body.m-skall.har-sumbar .nav-flyt .nav-ikon{width:18px;height:18px;color:var(--nav-knapp-tekst)}
  .snav{display:none}
  /* Registerstripen nederst: 5 like kolonner, hårlinje over, kondenserte versal-etiketter */
  .bunnav{position:fixed;left:0;right:0;bottom:0;z-index:15;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:8px 8px calc(10px + env(safe-area-inset-bottom));background:var(--nav-bg);border-top:1px solid var(--nav-border)}
  .bunnav a,.bunnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:48px;margin:0;padding:0;border:0;background:none;border-radius:2px;color:var(--nav-text);font-family:var(--font-etikett);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer}
  .bunnav a,.bunnav button{transition:color .15s ease-out,background-color .15s ease-out,box-shadow .15s ease-out}
  .bunnav .bn-ikon{position:relative;display:flex}
  .bunnav .nav-ikon{width:22px;height:22px;color:var(--nav-icon)}
  .bunnav .nav-prikk{position:absolute;top:-2px;right:-5px;box-sizing:content-box;border:2px solid var(--nav-bg)}
  .bunnav a.aktiv{color:var(--nav-ink);font-weight:600}
  .bunnav a.aktiv .nav-ikon{color:var(--nav-ink)}
  /* Midten: «Ny befaring» som spotfarget trykt rute 52 px */
  .bunnav a.bn-ny{width:52px;height:52px;min-height:52px;margin:-20px auto 0;border-radius:2px;background:var(--pd-kobber-fyll);box-shadow:var(--nav-skygge-flis)}
  .bunnav a.bn-ny .nav-ikon{width:22px;height:22px;color:var(--nav-knapp-tekst)}
  .bunnav a.bn-ny.aktiv{box-shadow:var(--nav-skygge-flis),0 0 0 2px var(--nav-ink)}
  .mer-ark.vis{display:block;position:fixed;inset:0;z-index:70;background:var(--bakteppe)}
  /* Mer-arket: ark nedenfra m/ gruppene (samme radstil som sidemenyen), på skjemaet
     også «Ny befaring» øverst, og Innstillinger + brukerraden nederst. */
  .mer-ark .ark{position:absolute;left:0;right:0;bottom:0;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;background:var(--nav-bg);border-top:1px solid var(--nav-border);border-radius:2px 2px 0 0;padding:10px 14px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;color:var(--nav-text)}
  .mer-ark .ark>*{flex-shrink:0}
  .mer-ark .ark-hode{display:flex;align-items:center;gap:10px;padding:4px 4px 0}
  .mer-ark .ark-lukk{display:grid;place-items:center;width:40px;height:40px;margin:-4px -8px 0 0;border:0;border-radius:9px;background:none;color:var(--nav-text);font-family:inherit;font-size:24px;line-height:1;cursor:pointer}
  .mer-ark a.ark-ny{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;margin:16px 0 4px;padding:0 12px;border-radius:2px;background:var(--pd-kobber-fyll);font-family:var(--font-tekst);letter-spacing:0;color:var(--nav-knapp-tekst);text-decoration:none;font-size:15.5px;font-weight:600;line-height:1;box-shadow:var(--nav-skygge-knapp)}
  .mer-ark a.ark-ny .nav-ikon{width:19px;height:19px;color:var(--nav-accent-plus)}
  .mer-ark .ark-bunn{margin-top:14px}
  /* Lukking (løft og bevegelse, 2026-09-25): design-shell.js setter .lukker i
     140 ms før .vis fjernes - arket går ned dit det kom fra. Escape og
     reduced motion lukker momentant (tastatur animeres aldri). */
  .mer-ark.lukker{display:block;position:fixed;inset:0;z-index:70;background:var(--bakteppe);pointer-events:none}
  @media (prefers-reduced-motion: no-preference){
    .mer-ark.vis{animation:beffen-fade .16s ease-out}
    .mer-ark.vis .ark{animation:beffen-ark-inn .24s var(--ease-skuff)}
    .mer-ark.lukker{animation:beffen-fade .14s ease-out reverse forwards}
    .mer-ark.lukker .ark{animation:beffen-ark-ut .14s ease-out forwards}
  }
  @keyframes beffen-fade{from{opacity:0}}
  @keyframes beffen-ark-inn{from{transform:translateY(24px);opacity:0}}
  @keyframes beffen-ark-ut{to{transform:translateY(16px);opacity:0}}
}

/* ---------- Tegnede tegn (prisboken): kryss og hake som CSS-streker, aldri glyfer ---------- */
.tegn-x,.tegn-hake{position:relative;display:inline-block;width:12px;height:12px;vertical-align:-1px;flex:none}
.tegn-x::before,.tegn-x::after{content:"";position:absolute;left:5px;top:0;width:2px;height:12px;background:currentColor;transform:rotate(45deg)}
.tegn-x::after{transform:rotate(-45deg)}
.tegn-hake::before{content:"";position:absolute;left:4px;top:0;width:4px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.tegn-hake{margin-right:4px}

/* ---------- Delte mørke komponenter ---------- */
.kn-pille-primar{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 20px;border:0;border-radius:var(--pd-radius-liten);background:var(--primar-bg);color:var(--primar-tekst);font-family:inherit;font-size:var(--skrift-tekst-stor);font-weight:700;text-decoration:none;cursor:pointer;transition:background-color .15s ease-out,transform .12s var(--ease-ut)}
@media (hover:hover) and (pointer:fine){.kn-pille-primar:hover{background:var(--primar-hover)}}
.kn-pille{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:4px 14px;border:1px solid var(--pd-kant);border-radius:var(--radius-pill);background:var(--pd-flate-2);color:var(--pd-tekst);font-family:inherit;font-size:var(--skrift-meta);font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s ease-out,border-color .15s ease-out,transform .12s var(--ease-ut)}
@media (hover:hover) and (pointer:fine){.kn-pille:hover{background:var(--pd-flate);border-color:var(--pd-kant-sterk)}}
/* Segmenter: rolig seksjonsflate, valgt = lys terrakottaflate + terrakottakant + mørk terrakottatekst */
.pseg{display:flex;background:color-mix(in srgb,var(--pd-seksjon) 55%,transparent);border:1px solid transparent;border-radius:var(--radius-kontroll);padding:4px;gap:2px} /* svak tone uten kant (stille luksus 2026-10-02) */
.pseg button{min-height:36px;padding:4px 16px;border:0;border-radius:var(--radius-kontroll);background:none;color:var(--pd-demp);font-family:inherit;font-size:var(--skrift-tekst);font-weight:600;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out,transform .12s var(--ease-ut)}
@media (hover:hover) and (pointer:fine){.pseg button:hover{color:var(--pd-tekst)}}
.pseg button[aria-pressed="true"]{background:var(--valgt-bg);color:var(--valgt-tekst);box-shadow:inset 0 0 0 1px var(--valgt-kant)}
/* Sidene sine segmenter/faner/chips deler samme valgt-semantikk (tokens - ikke
   per-side-farger): .seg-familien, faner og filterchips. */
body.morkt .seg{background:var(--pd-seksjon);border-color:var(--pd-kant-svak)}
body.morkt .seg button{background:none;transition:background-color .15s ease-out,color .15s ease-out,transform .12s var(--ease-ut)}
@media (hover:hover) and (pointer:fine){body.morkt .seg button:hover{color:var(--pd-tekst)}}
body.morkt .seg button.aktiv{background:var(--valgt-bg);color:var(--valgt-tekst);box-shadow:inset 0 0 0 1px var(--valgt-kant)}
body.morkt .flate, body.morkt-lys .flate{background:var(--card);border:1px solid var(--linje-svak);border-radius:var(--radius-kort);box-shadow:var(--skygge)}

/* ---------- Prosjektdagbok (src/dagbok-ui.js, prosjektkort L2) - delt komponent for
   prosjektsidens Dokumentasjon-fane og Min side. Kun tokens - ingen hex. ---------- */
.db-status{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:var(--skrift-tekst);color:var(--grey);margin-bottom:12px}
.db-status.db-varsel{color:var(--eik);font-weight:650}
.db-status .db-synk{min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-kontroll);background:var(--card);color:var(--ink);font-family:inherit;font-size:var(--skrift-meta);font-weight:650;cursor:pointer}
.db-handlinger{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:12px}
.db-handlinger .kn{min-height:48px}
.db-skjema,.db-kontroll{border:1px solid var(--line);border-radius:var(--radius-kort);background:var(--card);padding:12px;margin-bottom:12px;display:grid;gap:8px}
.db-skjema[hidden],.db-kontroll[hidden]{display:none}
.db-rad{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.db-skjema label,.db-kontroll label{display:flex;flex-direction:column;gap:4px;font-size:var(--skrift-meta);color:var(--grey)}
.db-skjema select,.db-skjema input,.db-skjema textarea,.db-kontroll select,.db-kontroll input{width:100%;padding:8px;border:1px solid var(--line);border-radius:var(--radius-kontroll);font-size:16px;font-family:inherit;background:var(--flate-input);color:var(--ink);min-height:40px}
.db-skjema textarea{min-height:72px;resize:vertical}
.db-rom-annet[hidden]{display:none}
.db-filer{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.db-velg{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.db-fil-navn{font-size:var(--skrift-meta);color:var(--grey);margin-right:8px}
.db-kn-rad{display:flex;gap:8px;flex-wrap:wrap}
.db-kn-rad .kn,.db-punkt-kn .kn{min-height:40px}
.db-chips{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.db-chip{min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--card);color:var(--ink);font-family:inherit;font-size:var(--skrift-meta);font-weight:650;cursor:pointer}
.db-chip.valgt{background:var(--valgt-bg);color:var(--valgt-tekst);border-color:var(--valgt-kant)}
.db-innlegg{border:1px solid var(--line);border-radius:var(--radius-kort);background:var(--card);padding:12px;margin-bottom:8px;display:grid;gap:8px}
.db-innlegg.db-ko{border-style:dashed}
.db-innlegg.feilet{border-color:var(--rust)}
.db-hode{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--skrift-meta);color:var(--grey)}
.db-tid{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.db-type{display:inline-block;padding:0 8px;line-height:22px;border-radius:var(--radius-pill);font-size:var(--skrift-etikett);font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--linje-svak);color:var(--ink)}
.db-type-avvik{background:var(--rust-flate,var(--linje-svak));color:var(--rust)}
.db-type-kontroll{background:var(--ok-flate,var(--linje-svak));color:var(--ok)}
.db-avvik{font-size:var(--skrift-etikett);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.db-avvik.apen{color:var(--rust)}
.db-avvik.lukket{color:var(--ok)}
.db-lagre-status{margin-left:auto;font-weight:650}
.db-lagre-status.venter{color:var(--eik)}
.db-lagre-status.feilet{color:var(--rust)}
.db-tekst{font-size:var(--skrift-tekst);white-space:pre-wrap;overflow-wrap:anywhere}
.db-produkt{font-size:var(--skrift-meta);color:var(--grey)}
.db-bilder{display:flex;gap:8px;flex-wrap:wrap}
.db-thumb{position:relative;width:88px;height:88px;border-radius:var(--radius-kontroll);overflow:hidden;background:var(--linje-svak);flex:none}
.db-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.db-thumb.venter img{opacity:.6}
.db-thumb-status{position:absolute;left:0;right:0;bottom:0;font-size:var(--skrift-etikett);text-align:center;background:var(--pd-sidefelt,var(--ink));color:var(--pd-petrol-tekst,var(--card));padding:2px 4px}
.db-tom,.db-sjekk-tom{color:var(--grey);font-size:var(--skrift-meta);padding:4px 0}
.db-sjekk{margin-bottom:12px}
.db-sjekk-tittel{font-size:var(--skrift-etikett);letter-spacing:.08em;text-transform:uppercase;color:var(--grey);font-weight:700;margin-bottom:8px}
.db-sjekk-fag{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linje-svak);font-size:var(--skrift-tekst)}
.db-sjekk-fag.ferdig b{color:var(--ok)}
.db-fremdrift{font-variant-numeric:tabular-nums;color:var(--grey);font-size:var(--skrift-meta)}
.db-bar{grid-column:1/-1;height:4px;border-radius:var(--radius-pill);background:var(--linje-svak);overflow:hidden}
.db-bar span{display:block;height:100%;background:var(--ok)}
.db-sjekk-venter{grid-column:1/-1;font-size:var(--skrift-meta);color:var(--eik)}
.db-punkter{display:grid;gap:8px}
.db-punkt{display:grid;gap:8px;padding:8px 0;border-bottom:1px solid var(--linje-svak)}
.db-punkt.ferdig .db-punkt-tekst{color:var(--grey)}
.db-punkt-meta{font-size:var(--skrift-meta);color:var(--grey);margin-top:4px}
.db-punkt-kn{display:flex;gap:8px;flex-wrap:wrap}
.db-p-bilde{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.db-ok{color:var(--ok);font-weight:650}

/* ---------- Kvitteringsdialogen (delt, src/kvittering-ui.js, 2026-09-15) ----------
   Flyttet fra oversikt.html (fakturadialogen) og gjort felles: bekreft / pågår /
   kvittering / feil i ÉN dialog. #kvdialog injiseres av komponenten; vert-modus
   (sendemodalen, fakturadialogen) bruker samme .fd-*-klasser inne i sitt panel. */
/* Inn/ut (løft og bevegelse, 2026-09-25): dialogen ligger alltid i flyten som
   fixed + visibility:hidden (aldri display:none), så bakteppe og panel kan gli.
   Inn 200 ms --ease-ut (panelet fra scale .97, bunnarket på mobil fra 12 px under
   m/ --ease-skuff), ut 120 ms ease-out. Reduced motion: kun opasitet. */
#kvdialog{position:fixed;inset:0;background:var(--bakteppe);display:flex;visibility:hidden;opacity:0;pointer-events:none;z-index:40;align-items:center;justify-content:center;padding:16px;transition:opacity .12s ease-out,visibility 0s linear .12s}
#kvdialog.vis{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .2s var(--ease-ut),visibility 0s}
.kv-panel{background:var(--card);color:var(--ink);border-radius:var(--radius-kort);padding:16px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;opacity:0;transition:opacity .12s ease-out}
#kvdialog.vis .kv-panel{opacity:1;transition:opacity .2s var(--ease-ut)}
@media (prefers-reduced-motion: no-preference){
  .kv-panel{transform:scale(.97);transition:opacity .12s ease-out,transform .12s ease-out}
  #kvdialog.vis .kv-panel{transform:none;transition:opacity .2s var(--ease-ut),transform .2s var(--ease-ut)}
}
@media(max-width:899px){
  #kvdialog{align-items:flex-end;padding:0}
  .kv-panel{border-radius:var(--radius-kort) var(--radius-kort) 0 0;max-height:92vh}
  @media (prefers-reduced-motion: no-preference){
    .kv-panel{transform:translateY(12px)}
    #kvdialog.vis .kv-panel{transform:none;transition:opacity .2s var(--ease-ut),transform .24s var(--ease-skuff)}
  }
}
.fd{display:flex;flex-direction:column}
.fd-vis{display:flex;flex-direction:column;gap:16px}
.fd-vis[hidden]{display:none}
.fd .fd-h{font-size:16px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--ink);margin:0;line-height:1.3}
.fd-under{font-size:13px;color:var(--grey);margin-top:-8px;overflow-wrap:anywhere}
.fd-tekst{font-size:13px;line-height:1.5;color:var(--ink)}
.fd-fakta{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px;margin:0}
.fd-fakta dt{color:var(--grey)}
.fd-fakta dd{margin:0;min-width:0;overflow-wrap:anywhere}
.fd-fakta .fd-belop{font-size:24px;font-weight:650;letter-spacing:-.01em;line-height:1.15}
.fd-fakta .fd-belop small{font-size:13px;font-weight:400;color:var(--grey);margin-left:8px}
.fd-valg{display:flex;gap:8px;align-items:flex-start;font-size:13px;cursor:pointer;color:var(--ink);margin:0;border-top:1px solid var(--linje-svak);padding-top:12px}
.fd-valg input{margin:4px 0 0;width:16px;height:16px;accent-color:var(--fokus)}
.fd-valg .fd-hint{display:block;color:var(--grey)}
.fd-valg input:disabled+span{color:var(--grey)}
.fd-kn{display:flex;gap:8px;flex-wrap:wrap}
.fd-kn .kn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;min-height:44px}
.fd-kn .kn.stille{border-color:transparent;background:transparent;color:var(--grey)}
.fd-kn .kn[hidden]{display:none}
.fd-fot{font-size:12px;color:var(--grey)}
.fd-fot:empty{display:none}
.fd-obs{font-size:13px;padding:8px 12px;border-radius:var(--radius-kontroll);background:var(--sand-lys);border:1px solid var(--eik-kant);color:var(--eik-mork)}
.fd-steg{margin:0;padding:0;list-style:none}
.fd-steg li{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linje-svak);font-size:13px}
.fd-steg li:last-child{border-bottom:0}
.fd-steg .fd-ikon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--linje-mork);color:var(--grey)}
.fd-steg .fd-ikon svg{width:14px;height:14px}
.fd-steg li.ok .fd-ikon{background:var(--ok-flate,var(--bg));border-color:var(--ok-kant,var(--ok));color:var(--ok)}
.fd-steg li.paagaar .fd-ikon{border-color:var(--fokus);color:var(--fokus)}
.fd-steg li.paagaar .fd-ikon svg{animation:fd-snurr 1s linear infinite}
.fd-steg li.hopp{color:var(--grey)}
.fd-steg li.hopp .fd-ikon{border-style:dashed}
.fd-steg li.feil .fd-ikon{border-color:var(--rust-kant);color:var(--rust)}
.fd-steg .fd-meta{color:var(--grey);white-space:nowrap;font-size:12px}
.fd-steg .fd-meta a{color:var(--ink)}
@keyframes fd-snurr{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.fd-steg li.paagaar .fd-ikon svg{animation:none}}
.fd-venter{font-size:13px;color:var(--grey);display:flex;gap:8px;justify-content:space-between}
.fd-kvitthode{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:center}
.fd-merke{width:44px;height:44px;border-radius:50%;background:var(--ok-flate,var(--bg));border:1px solid var(--ok-kant,var(--ok));color:var(--ok);display:grid;place-items:center}
.fd-merke svg{width:22px;height:22px}
.fd-kvitthode .fd-h{font-size:18px}
.fd-kvitthode .fd-under{margin-top:4px}
.fd-nokkel{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fd-nokkel div{background:var(--bg);border-radius:var(--radius-kontroll);padding:8px 12px;min-width:0}
.fd-nokkel small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:4px}
.fd-nokkel b{font-size:16px;font-weight:650;overflow-wrap:anywhere}
.fd-nokkel b.fd-liten{font-size:13px}
.fd-feilboks{display:grid;grid-template-columns:20px 1fr;gap:8px;padding:12px 16px;border-radius:var(--radius-kontroll);background:var(--rust-lys,var(--bg));border:1px solid var(--rust-kant);font-size:13px}
.fd-feilboks svg{width:18px;height:18px;color:var(--rust);margin-top:1px}
.fd-feilboks b{display:block;color:var(--rust);margin-bottom:4px}
.fd-feilboks .fd-raa{display:block;margin-top:8px;font-size:12px;color:var(--grey);overflow-wrap:anywhere}
.fd-feilboks .fd-raa:empty{display:none}
body.fd-paagaar .fd,body.fd-paagaar #kvdialog{cursor:progress}
/* Sendemodalen i vert-modus: komponeringen skjules mens kvitteringen eier panelet */
.epostboks.ed-kvittmodus>:not(#ed-kvitt){display:none}
.epostboks #ed-kvitt{padding-bottom:16px}
.epostboks #ed-kvitt[hidden]{display:none}
/* oversikt.html sin gamle .epostboks .kn er knappe-RADEN (sticky, negative marger) -
   komponentens .kn-knapper i sendemodalen må få vanlig knappeboks igjen */
.epostboks .fd-kn .kn{display:inline-flex;position:static;margin:0;padding:0 16px;flex:none;background:var(--card)}
.epostboks .fd-kn .kn.primar{background:var(--primar-bg,var(--ink));border-color:var(--primar-bg,var(--ink));color:var(--primar-tekst,var(--card))}
.epostboks .fd-kn .kn.stille{background:transparent;border-color:transparent}
/* Smale skjermer: lange meta-tekster (PDF-filnavn) får bryte i steglisten */
@media(max-width:480px){.fd-steg .fd-meta{white-space:normal;overflow-wrap:anywhere;max-width:55%;text-align:right}}

/* ---------- Angre-toast + kvittering på destruktivt (pakke 3, 2026-09-16) ----------
   «Angre»-knappen i toasten (BeffenTilstand.angreToast) - delt av oversikt
   (arkiver) og håndverkere (deaktiver). Toasten selv har pointer-events:none;
   knappen må kunne trykkes. Radfeil i kvitteringens per-rad-liste står i rust. */
.toast-angre{pointer-events:auto;margin-left:12px;background:none;border:1px solid var(--card);border-radius:var(--radius-kontroll);color:var(--card);font-family:inherit;font-size:13px;font-weight:700;padding:4px 12px;cursor:pointer;min-height:32px}
@media (pointer:coarse){.toast-angre{min-height:44px}}
.fd-steg .fd-radfeil{display:block;color:var(--rust);font-size:12px;margin-top:4px;overflow-wrap:anywhere}
.fd-steg .fd-radmeta{display:block;color:var(--grey);font-size:12px;margin-top:2px}
.fd-steg li.feil>span:nth-child(2) b{color:var(--rust)}
/* ===== LAGRET-STATUS (pakke 4 «Lagret kl. overalt», 2026-09-16) =====
   Inline lagringsstatus ved felt som autolagrer (BeffenTilstand.lagretStatus i
   src/tilstand.js): venter -> lagret (dempes etter ~4 s, blir stående) -> feil
   (rød, m/ «Prøv igjen»). Tom = usynlig. */
.lagret-status{display:inline-flex;align-items:center;gap:8px;min-height:20px;font-size:12px;line-height:1.35;color:var(--grey);font-variant-numeric:tabular-nums;transition:color .2s var(--ease-ut),opacity .2s var(--ease-ut)}
.lagret-status:empty{display:none}
/* Stabil layout (fix/stabil-layout, 2026-09-29): i rader som autolagrer skal
   «Lagret kl.» aldri skyve radene under - .reservert holder de 20 px alltid,
   også tom (planradene i Økonomi og ansvarlig-velgeren på prosjektkortet). */
.lagret-status.reservert:empty{display:inline-flex}
.lagret-status svg{width:14px;height:14px;flex:none}
.lagret-status[data-tilstand=venter]{color:var(--grey);font-style:italic}
.lagret-status[data-tilstand=lagret]{color:var(--ok);font-weight:600}
.lagret-status[data-tilstand=lagret].stille{color:var(--grey);font-weight:400;opacity:.9}
.lagret-status[data-tilstand=feil]{color:var(--rust);font-weight:600}
.lagret-status .lagret-igjen{color:var(--rust);font-weight:600;font-size:12px}
.lagret-status-rad{display:flex;justify-content:flex-end;min-height:20px}

/* ---------- Lyd og vibrasjon - innstillingspanelet (src/feedback.js, feat/lydfeedback 2026-09-22) ---------- */
.fb-panel{display:grid;gap:6px}
.fb-rad{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-size:var(--skrift-tekst);margin:0}
.fb-rad input[type=checkbox]{width:22px;height:22px;margin:0;flex:none;accent-color:var(--pd-kobber,#D8733F)}
.fb-rad input[type=range]{flex:1;min-width:120px;height:44px;margin:0;accent-color:var(--pd-kobber,#D8733F)}
.fb-rad output{min-width:48px;text-align:right;font-variant-numeric:tabular-nums;color:var(--grey)}
.fb-volumrad[aria-disabled=true]{opacity:.45}
.fb-rad.sperret{opacity:.45;cursor:not-allowed}
.fb-hint{color:var(--grey);font-size:12px;line-height:1.45}
.fb-panel .kn-rad{margin-top:4px}
/* Haptikk på iPhone: usynlig label inni handlingsknapper (src/feedback.js HAPTIKK_MAAL). Sperret/opptatt = ingen tikk. */
button > label.beffen-hap{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;display:block!important;font-size:0;line-height:0;cursor:pointer;border-radius:inherit;background:none;border:0}
button:disabled > label.beffen-hap,button[aria-busy=true] > label.beffen-hap{display:none!important}