/* D2 (20.10.2026): systemfonten, som resten av motorrommet. Ingen nettskrift lastes. */

:root {
  --bunn: #F6F4EF; --kort: #FFFFFF; --kant: #DDD8CE; --kant-mork: #C9C3B7; --tekst: #1D1A14; --dempet: #5B554C;
  --marine: #141C2E; --lenke: #B8401A; --lenke-hover: #8F3012; --oransje: #F05223; --flate: #E9E5DC;
  --ok-bunn: #E6F0E9; --ok: #1E6B3A; --obs-bunn: #FBEEDB; --obs: #7A4300; --feil-bunn: #F8E3DE; --feil: #9B2A12;
  --lys: #FBFAF7; --linjeskille: #EFECE6; --varsel: #D9822B; --plassholder: #A8A195;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; color: var(--tekst); background: var(--bunn); font-size: 14px; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
a, .lenke { color: var(--lenke); font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
a:hover, .lenke:hover { color: var(--lenke-hover); }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
/* Tall i knapper, felt, lister og menyer får samme form som tall ellers på siden. Nettleseren gir skjemaelementene
   sin egen font-regel, som nullstiller formen, så den må stå her og ikke bare arves fra body. */
button, input, textarea, select, option, .meny { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
:focus-visible { outline: 3px solid rgba(20, 28, 46, 0.35); outline-offset: 2px; }
.skjult { display: none !important; }
[hidden] { display: none !important; }
.mobil-bare, .stegvelger, .mobilbunn, .stegtittel { display: none; }

/* Topplinja */
header.topp { height: 64px; padding: 0 28px; display: flex; align-items: center; gap: 20px; background: var(--kort); border-bottom: 1px solid var(--kant); }
header.topp img { height: 20px; width: auto; }
header.topp .skille { width: 1px; height: 24px; background: var(--kant); }
header.topp .navn { font-weight: 700; white-space: nowrap; }
/* Utgaven rett etter navnet («v1.0», Stians design 30.09.2026). Løpenummeret står ikke her, bare i /api/helse. */
header.topp .vers { margin-left: -10px; padding: 2px 7px; border-radius: 6px; background: var(--flate); color: var(--dempet); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
header.topp .fyll { flex: 1; }
header.topp .bruker { color: var(--dempet); font-size: 13px; }

/* Tre kolonner: venstre og høyre like brede, midten fast. Stegbaren over bruker de samme variablene, så seksjonene
   står over kolonnene i alle bredder. */
:root { --stegbar: 52px; --kol-midt: 460px; --kol-mellom: 24px; --kol-kant: 24px; }
@media (max-width: 1400px) { :root { --kol-midt: 420px; --kol-mellom: 16px; --kol-kant: 16px; } }
main.flate { height: calc(100% - 64px - var(--stegbar)); padding: 12px var(--kol-kant) 20px; display: grid; grid-template-columns: minmax(0, 1fr) var(--kol-midt) minmax(0, 1fr); gap: var(--kol-mellom); }
@media (max-width: 1400px) { main.flate { padding-top: 10px; padding-bottom: 16px; } }
section.kol { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }

/* Stegbaren (PC, v.1024 etter Stians design): stegene står rett på bakgrunnen, over kolonnene. Steg 1 over venstre,
   steg 2 og 3 sammen over midten i en felles grå ramme der steget du står på er et hvitt kort, og steg 4 over høyre.
   Rundt merke på 28 px: lyst grønt med grønn hake er ferdig, mørkt er der du står, hvitt med grå kant kommer.
   v.1024 (puss): raden er 44 px høy (stegbaren 52 med luft over). Steg 2 og 3 har bare navnet synlig; underteksten står
   bare for skjermlesere (.vh). Steg 1 og 4 beholder sin undertekst på to linjer i samme rad. */
.stegbar { height: var(--stegbar); padding: 8px var(--kol-kant) 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--kol-midt) minmax(0, 1fr); gap: var(--kol-mellom); }
.stegbar .sek { display: flex; align-items: stretch; min-width: 0; }
.stegbar .sek.ramme { gap: 4px; padding: 4px; border-radius: 12px; background: var(--flate); }
.stegbar .sek.ramme .s { flex: 1 1 auto; } /* de to stegene i midten deler bredden etter teksten, så underteksten får plass */
.stegbar .s { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 10px; border: 0; border-radius: 9px; background: none; font: inherit; color: inherit; text-align: left; }
.stegbar button.s { cursor: pointer; }
.stegbar button.s:focus-visible { outline-offset: -3px; }
.stegbar .sirkel { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; line-height: 1; border: 1.5px solid var(--kant-mork); color: var(--dempet); background: var(--kort); }
.stegbar .tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stegbar .navn { font-size: 14px; font-weight: 600; color: var(--tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stegbar .under { font-size: 12px; color: var(--dempet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stegbar .under.feil { color: var(--feil); }
/* Lite rødt tall på steg 3-rundingen når noe må rettes (antall kritiske merknader). Bare tallet, ingen tekst. */
.rod { position: absolute; top: -5px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--feil); color: #fff; border: 1.5px solid var(--kort); font-size: 10px; font-weight: 700; line-height: 13px; text-align: center; font-variant-numeric: lining-nums tabular-nums; }
.stegbar .sirkel, .sn { position: relative; }
.stegbar .s.ok .sirkel { background: var(--ok-bunn); border-color: var(--ok-bunn); color: var(--ok); }
.stegbar .s.her .sirkel { background: var(--marine); border-color: var(--marine); color: #fff; }
.stegbar .s.her .navn { font-weight: 700; }
.stegbar .sek.ramme .s.her { background: var(--kort); box-shadow: 0 1px 3px rgba(20, 28, 46, 0.14); }
/* Mobil: stegene som sirkler øverst (steg-velgeren). Grønn med hvit hake er ferdig, mørk er der du står. */
.sn { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; line-height: 1; border: 1.5px solid var(--kant-mork); color: var(--dempet); background: var(--kort); }
.sn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.sn.her { background: var(--marine); border-color: var(--marine); color: #fff; }
.s2 { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--dempet); text-decoration: underline; text-decoration-color: var(--kant-mork); text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.s2:hover { color: var(--tekst); text-decoration-color: var(--dempet); }
.fyll { flex: 1; }
.kort { background: var(--kort); border: 1px solid var(--kant); border-radius: 12px; }

/* Eksportknappene nederst til høyre er 40 px høye (v.1024, puss: lavere, mer plass til forhåndsvisningen) */
.filrad, .rad2 { flex: none; height: 40px; }

/* Venstre: slipp fila */
.slipp { flex: 1; border: 2px dashed var(--kant-mork); border-radius: 14px; background: var(--kort); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 30px; cursor: pointer; }
.slipp.over { border-color: var(--marine); background: var(--lys); }
.slipp .stor { font-size: 20px; font-weight: 700; line-height: 1.3; }
.slipp .liten { color: var(--dempet); font-size: 13px; }
/* v.1031: «Velg fil» og «Start uten fil» side om side inne i flaten, like store. «Start uten fil» åpner ikke filvelgeren
   (app.js stopper trykket). */
.slippvalg { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.slippvalg .knapp { min-width: 132px; }
.filrad { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 13px; min-width: 0; }
.filrad svg { flex: none; }
.filtekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
.fbar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--oransje); transition: width 0.4s ease-out; }
.filrad .filnavn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.filinfo { display: flex; font-size: 12px; color: var(--dempet); white-space: nowrap; overflow: hidden; }
.filinfo .lev { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.filinfo .rest { flex: none; white-space: pre; }
.feilboks { padding: 12px 14px; background: var(--feil-bunn); border-color: #EBC3B8; color: var(--feil); line-height: 1.45; }
.merke { flex: none; padding: 3px 8px; border-radius: 999px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.merke.ok { background: var(--ok-bunn); color: var(--ok); }
.merke.leser { background: #FDEBDD; color: #A2400F; }
.merke.feil { background: var(--feil-bunn); color: var(--feil); }
/* «Nytt tilbud» i filkortet, der «Bytt fil» sto: lys, liten knapp med en sirkelpil foran. */
.filrad .nytt { flex: none; white-space: nowrap; }

/* Kunde-feltet: treffene fra Enhetsregisteret i en liste rett under feltet, like bred. Høyst 8 rader synlige. */
.kundevalg { position: relative; }
.brreg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: calc(8 * 50px + 10px); overflow-y: auto; padding: 4px; background: var(--kort); border: 1px solid var(--kant); border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 28, 46, 0.18); }
.brreg .bt { height: 50px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 10px; border-radius: 6px; cursor: pointer; min-width: 0; }
.brreg.med-nylig { max-height: calc(8 * 50px + 10px + 2 * 26px); } /* «Nylig brukt» og «Brønnøysundregistrene» */
.brreg .bh { height: 26px; display: flex; align-items: flex-end; padding: 0 10px 4px; font-size: 12px; color: var(--dempet); }
.brreg .bt:hover { background: var(--lys); }
.brreg .bt[aria-selected="true"] { background: var(--flate); }
.brreg .bn { font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brreg .bi { font-size: 12px; line-height: 1.3; color: var(--dempet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Forhåndsvisningene: lik verktøylinje og lik størrelse på begge sider */
.visning { flex: 1; min-height: 0; min-width: 0; background: var(--flate); border-radius: 12px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.vbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; row-gap: 6px; }
.vbar .grp { display: flex; align-items: center; gap: 6px; }
.vbar .grp.z { gap: 4px; }
.vbar .ib { width: 32px; height: 32px; padding: 0; border: 1px solid var(--kant-mork); border-radius: 8px; background: var(--kort); color: var(--tekst); cursor: pointer; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.vbar .ib:disabled, .vbar .zv:disabled { opacity: 0.4; cursor: default; }
.vbar .st { font-size: 14px; font-weight: 600; min-width: 92px; text-align: center; white-space: nowrap; }
.vbar .sk { width: 1px; height: 20px; background: var(--kant-mork); margin: 0 2px; }
/* Smal visning (skjermer mellom 1100 og om lag 1300 px): «Side» faller bort, så verktøylinja holder seg på én rad. */
.visning { container-type: inline-size; }
@container (max-width: 390px) { .vbar .st .ord { display: none; } .vbar .st { min-width: 0; } }
.dd { position: relative; }
.zv { height: 32px; padding: 0 8px 0 10px; border: 1px solid var(--kant-mork); border-radius: 8px; background: var(--kort); font-size: 13px; color: var(--tekst); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.zv svg { color: var(--dempet); }
.dd.apen .zv { border-color: var(--marine); }
.meny { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); z-index: 20; width: 148px; padding: 4px; background: var(--kort); border: 1px solid var(--kant); border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 28, 46, 0.18); display: flex; flex-direction: column; }
.meny .mv { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; font-size: 13px; color: var(--tekst); cursor: pointer; text-align: left; }
.meny .mv:hover { background: var(--lys); }
.meny .mv[aria-selected="true"] { background: var(--flate); font-weight: 600; }
.meny .mv .ck { visibility: hidden; color: var(--dempet); font-weight: 400; }
.meny .mv[aria-selected="true"] .ck { visibility: visible; }
.meny .mskille { height: 1px; background: var(--kant); margin: 4px 0; }
.omrramme { position: relative; flex: 1; min-height: 0; display: flex; }
.omr { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: auto; scrollbar-width: thin; touch-action: pan-y; outline-offset: -3px; }
.omr .pg { position: relative; margin: 0 auto; background: #fff; box-shadow: 0 1px 4px rgba(20, 28, 46, 0.22); overflow: hidden; }
.omr .pg canvas.grunn, .omr .pg img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-user-drag: none; user-select: none; }
.omr .pg canvas.detalj { position: absolute; display: block; }
.omr.kan-dra { cursor: grab; }
.omr.drar { cursor: grabbing; user-select: none; }
.omr.kan-apne .pg { cursor: zoom-in; }
.omr .tekstside { background: #fff; min-height: 100%; box-shadow: 0 1px 4px rgba(20, 28, 46, 0.22); }
.tekstside pre { margin: 0; padding: 40px 14px 14px; font: 11px/1.45 ui-monospace, Consolas, monospace; font-variant-numeric: lining-nums tabular-nums; white-space: pre-wrap; word-break: break-word; }
.tekstside table { border-collapse: collapse; font-size: 11px; margin: 40px 10px 10px; }
.tekstside td { border: 1px solid #E4E0D8; padding: 2px 5px; white-space: nowrap; }
/* Skannerlinja: går opp og ned over den delen av siden som synes, til hele lesingen er ferdig (én runde om lag 2,5 s).
   Med redusert bevegelse står den stille. */
.skannfelt { position: absolute; z-index: 2; pointer-events: none; transition: opacity 0.6s ease-out; }
.skannfelt.ut { opacity: 0; }
.skann { position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--oransje); box-shadow: 0 0 10px 2px rgba(240, 82, 35, 0.55); animation: skann 2.5s ease-in-out infinite; }
.skann::before { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 90px; background: linear-gradient(to top, rgba(240, 82, 35, 0.16), rgba(240, 82, 35, 0)); }
.skann span { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); background: var(--oransje); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 12px; border-radius: 999px; white-space: nowrap; letter-spacing: 0.02em; }
@keyframes skann { 0%, 100% { top: 14px; } 50% { top: calc(100% - 14px); } }
@media (prefers-reduced-motion: reduce) { .skann { animation: none; top: 42%; } .fbar { transition: none; } }
.kildemerke { position: absolute; top: 8px; left: 8px; z-index: 3; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--kant); font-size: 12px; color: var(--dempet); pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omr .tom { padding: 28px 18px; color: var(--dempet); line-height: 1.5; }
.omr .tom .stor { font-size: 16px; font-weight: 700; color: var(--tekst); margin-bottom: 4px; }
.omr .tomark { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.prikker { display: none; justify-content: center; gap: 8px; }
.prikker span { width: 8px; height: 8px; border-radius: 50%; background: var(--kant-mork); }
.prikker span.paa { background: var(--tekst); }

/* Den store visningen: samme verktøylinje, i et vindu over skjermen */
.storvisning { width: min(1060px, calc(100vw - 48px)); height: calc(100vh - 48px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 14px; background: var(--flate); color: var(--tekst); overflow: hidden; }
.storvisning[open] { display: flex; flex-direction: column; }
.storvisning::backdrop { background: rgba(20, 28, 46, 0.62); }
.storvisning .visning { border-radius: 0; padding: 14px 18px 18px; }
.storvisning .tast { font-size: 11px; font-weight: 600; color: var(--dempet); border: 1px solid var(--kant); border-radius: 4px; padding: 0 4px; }

/* Knapper */
.knapp { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--marine); background: var(--marine); color: #fff; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.knapp.lys { background: var(--kort); color: var(--tekst); border-color: var(--kant-mork); }
.knapp.liten { height: 32px; padding: 0 12px; font-size: 13px; }
.knapp:disabled { opacity: 0.45; cursor: default; }
/* v.1024 (Stians design): Mva og Tekst i et eget kort over forhåndsvisningen av PDF-en, side om side. */
/* v.1031: Delsum per gruppe som tredje valg, så bred som navnet (Av eller På under). */
.pdfvalg { flex: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 0 14px; }
.pdfvalg .pv { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pdfvalg .pvn { font-size: 12px; line-height: 1.2; color: var(--dempet); white-space: nowrap; }
.pdfvalg .seg { display: flex; height: 32px; padding: 3px; border-radius: 9px; background: var(--flate); }
.pdfvalg .seg button { flex: 1 1 auto; min-width: 0; padding: 0 4px; border: 0; border-radius: 7px; background: none; font-size: 13px; color: var(--dempet); white-space: nowrap; cursor: pointer; }
.pdfvalg .seg button[aria-checked="true"] { background: var(--kort); color: var(--tekst); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 28, 46, 0.14); }
@media (max-width: 1250px) and (min-width: 1100px) { .pdfvalg { gap: 8px; padding: 0 10px; } .pdfvalg .seg button { padding: 0 2px; font-size: 12px; } }
/* v.1031: under 1400 px får ikke tre valg plass på én rad. Da står Delsum per gruppe på en egen rad under Mva og Tekst,
   med navnet til venstre for knappene, og kortet blir høyere enn filkortet til venstre. */
@media (max-width: 1399px) and (min-width: 1100px) {
  .pdfvalg { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); row-gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .pdfvalg .pv.delsum { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; }
  .pdfvalg .pv.delsum .seg { width: 132px; }
}
.utknapper { flex: none; display: flex; flex-direction: column; gap: 8px; }
.utknapper .knapper { display: flex; gap: 12px; }
/* Høyre kolonne: forhåndsvisningen og eksportknappene i samme grå rute, knappene nederst. Luften under siden (12) og
   under knappene (14) er valgt så siden får nøyaktig samme høyde som originalen til venstre. */
/* Én mørk knapp om gangen: før steg 4 er eksportknappene sekundære (og virker fortsatt). Bare på PC. */
@media (min-width: 1100px) {
  /* v.1024 (puss, Stians design): venstre og høyre kolonne er hvite kort som midten. Venstre: filkortet og
     verktøylinja på hvitt, originalen på grå flate under. Høyre: Mva og Tekst og verktøylinja på hvitt, PDF-en på grå
     flate, og knappene på hvitt nederst. Før en fil er lagt inn, står slippflaten alene (uten kort). */
  #venstre.medfil, #hoyre { gap: 0; background: var(--kort); border: 1px solid var(--kant); border-radius: 12px; overflow: hidden; }
  #venstre.medfil .filrad, #hoyre .pdfvalg { border: 0; border-bottom: 1px solid var(--linjeskille); border-radius: 0; background: none; }
  .filrad { padding: 0 14px; }
  .filrad > svg { width: 36px; height: 36px; padding: 9px; border: 1px solid var(--kant); border-radius: 8px; }
  main.flate .visning { background: none; border-radius: 0; padding: 0; gap: 0; }
  main.flate .vbar { padding: 8px 14px; min-height: 52px; flex-wrap: nowrap; }
  main.flate .omrramme { background: var(--flate); padding: 14px; }
  /* Verktøylinja på hvitt har ikoner uten ramme (fasiten); rammen kommer tilbake som en svak flate ved peking. */
  main.flate .vbar .ib, main.flate .vbar .zv { border-color: transparent; background: none; }
  main.flate .dd.apen .zv { border-color: var(--kant-mork); background: var(--flate); }
  @media (hover: hover) and (pointer: fine) { main.flate .vbar .ib:hover:not(:disabled), main.flate .vbar .zv:hover { background: var(--flate); } }
  .hrute { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .hrute .utknapper { padding: 14px; }
  /* v.1024: filkortet til venstre er like høyt som kortet med Mva og Tekst til høyre (64 px), og under originalen er det
     like mye luft som knappene tar til høyre (14 under siden + 14 + 40 + 14 = 82), så de to
     forhåndsvisningene er like store. */
  .filrad, .pdfvalg { height: 64px; }
  @media (max-width: 1399px) { .pdfvalg { height: auto; } }
  #vVis .omrramme { padding-bottom: 82px; }
  .utknapper .knapp.sek { background: var(--kort); border-color: var(--kant); color: var(--tekst); }
}
/* Linja under knappene når noe må rettes: ingen dialogboks, og ingenting sperres. */
.eksportvarsel { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--tekst); }
.eksportvarsel .ikn { flex: none; margin-top: 1px; }
.eksportvarsel .s2 { color: var(--tekst); }
.utknapper .knapp { flex: 1; height: 40px; font-size: 15px; }

/* Spørsmålet før et nytt tilbud (eller «Bytt fil») når tilbudet har linjer og ikke er lastet ned. I siden, ikke en
   dialog fra nettleseren. */
.sporsmal { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: 14px; background: var(--kort); color: var(--tekst); }
.sporsmal::backdrop { background: rgba(20, 28, 46, 0.62); }
.sporsmal h2 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.sporsmal p { margin: 0 0 20px; color: var(--dempet); line-height: 1.45; }
.sporsmal .knapper { display: flex; gap: 12px; }

/* ---------- Midten: én hvit flate under fanene. Skriften er 12 og 14 px (bare totalsummen er 16), vekt 400, og 600
   bare på varenavn, valgt fane, valgt nivå og totalsum. Store bokstaver bare der leverandøren skrev varenavnet slik. */
#midten .ed { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--kort); border: 1px solid var(--kant); border-radius: 12px; overflow: hidden; font-size: 14px; font-weight: 400; color: var(--tekst); }
.ed .pan { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; scrollbar-width: none; }
.ed .pan::-webkit-scrollbar { display: none; }
.ed .pan > * { flex: none; }
@media (min-width: 1100px) { .ed .pan:not(.paa) { display: none; } }
.ed .f { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; }
.ed .f > span:first-child, .ed .f > label:first-child { font-size: 12px; color: var(--dempet); }
.ed input:not([type=checkbox]), .ed textarea { height: 36px; padding: 0 10px; border: 1px solid var(--kant); border-radius: 8px; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--tekst); background: var(--kort); width: 100%; min-width: 0; }
.ed textarea { height: auto; padding: 8px 10px; resize: none; }
.ed input::placeholder, .ed textarea::placeholder { color: var(--plassholder); }
.ed input[aria-invalid="true"] { border-color: var(--dempet); background: var(--lys); }
.ed .f.mangler input { animation: mangler 1.8s ease-out; }
@keyframes mangler { 0%, 45% { border-color: var(--marine); box-shadow: 0 0 0 3px rgba(20, 28, 46, 0.18); } 100% { box-shadow: none; } }
.ed .tom { padding: 28px 20px; color: var(--dempet); font-size: 12px; line-height: 1.5; }
.ed .tom .stor { font-size: 14px; color: var(--tekst); margin-bottom: 4px; }
.ed .s { background: none; border: 0; padding: 0; font: inherit; color: var(--dempet); text-decoration: underline; text-decoration-color: var(--kant-mork); text-underline-offset: 2px; cursor: pointer; }
.ed .s:hover { text-decoration-color: var(--dempet); }
.ed .s.tl { color: var(--tekst); }
.ed .tb { height: 32px; padding: 0 14px; border: 1px solid var(--kant-mork); border-radius: 8px; background: var(--kort); font-size: 14px; color: var(--tekst); cursor: pointer; white-space: nowrap; }
.ed .lesehint { margin: 0; padding: 16px 20px 0; font-size: 12px; color: var(--dempet); }

/* Kundedata */
.ed .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding: 20px; }
.ed .grid .full { grid-column: 1 / -1; }
/* Kunde-boksen (v.1019, skissen kunde-v1): søkefeltet er det åpenbare stedet å begynne. Adressen står i egne felt under. */
.ed .kundeboks { margin: 12px 12px 2px; padding: 16px 16px 14px; border-radius: 12px; background: var(--lys); border: 1px solid var(--kant); }
.ed .lesehint:not([hidden]) + .kundeboks { margin-top: 6px; }
.ed .kundeboks .lbl { display: flex; gap: 6px; align-items: baseline; font-size: 14px; font-weight: 700; color: var(--tekst); }
.ed .kundeboks .lbl i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--dempet); }
.ed .sok { position: relative; margin-top: 8px; }
.ed .sok > svg { position: absolute; left: 12px; top: 23px; transform: translateY(-50%); color: var(--dempet); pointer-events: none; }
.ed .sok input:not([type=checkbox]) { height: 46px; padding-left: 38px; font-size: 16px; border: 1.5px solid var(--marine); border-radius: 10px; }
.ed .sok input:focus { outline: none; box-shadow: 0 0 0 3px rgba(20, 28, 46, 0.12); }
.ed .kundeboks .hint { margin: 7px 0 12px; font-size: 12px; line-height: 1.4; color: var(--dempet); }
.ed .kundeboks .hint.ok { display: flex; align-items: center; gap: 5px; color: var(--ok); }
.ed .grid.kundeadr, .ed .kundeskille + .grid { padding: 14px 20px 20px; }
.ed .postrad { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.ed .kundeskille { flex: none; height: 1px; margin: 2px 20px 0; background: var(--linjeskille); }
/* v.1021: en kort linje under et felt («Lages av verktøyet», «Kortere fordi …»), og tilbudsnummeret låst når verktøyet lager det. */
.ed .felthint { display: flex; align-items: flex-start; gap: 5px; margin-top: -1px; font-size: 12px; line-height: 1.4; color: var(--dempet); }
.ed .felthint[hidden] { display: none; }
.ed .felthint svg { flex: none; margin-top: 2px; }
.ed .f.laast input { background: var(--flate); border-color: var(--flate); color: var(--tekst); cursor: default; }
/* v.1022: datofeltene er tekstfelt som alltid viser DD.MM.ÅÅÅÅ. Knappen åpner nettleserens kalender, som henger på det
   usynlige datofeltet under knappen. */
.ed .dato { position: relative; display: block; }
.ed .dato input[data-dato] { padding-right: 38px; letter-spacing: 0.04em; } /* litt luft, så punktumene i datoen synes */
.ed .dato .kal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--dempet); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .ed .dato .kal:hover { background: var(--flate); color: var(--tekst); } }
.ed .dato input.kalvelger { position: absolute; right: 4px; bottom: 0; width: 28px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
/* Varelinjer: innstillingene øverst. v.1024 (Stians design): to kompakte rader, «Fortjeneste» og «Frakt». Navnet til
   venstre, knapperaden i midten og tallfeltet til høyre. Navnene står på linje, knapperadene er like brede og
   tallfeltene like brede. Mva og Tekst står over PDF-en til høyre (.pdfvalg). */
.ed .innst { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--kant); }
.ed .innst .irad { display: grid; grid-template-columns: 84px minmax(0, 1fr) 76px; column-gap: 10px; align-items: center; }
.ed .innst .navn { font-size: 14px; color: var(--dempet); white-space: nowrap; }
.ed .innst .seg { display: flex; width: 100%; height: 34px; padding: 3px; gap: 0; border-radius: 9px; }
.ed .innst .seg button { flex: 1 1 0; min-width: 0; padding: 0 2px; border-radius: 7px; font-size: 13px; white-space: nowrap; }
/* Tallfeltet til høyre på raden: prosenten for «Fortjeneste», og kroner eller prosent for «Frakt». Med «Ingen» frakt er
   feltet tomt og nedtonet («–», stiplet kant). */
.ed .pf.tf { width: 100%; height: 34px; padding: 0 9px 0 0; border-radius: 8px; }
.ed .pf.tf input { width: 100%; height: 32px; padding: 0 2px 0 0; color: var(--tekst); }
.ed .pf.tf.av { background: var(--bunn); border-style: dashed; }
.ed .pf.tf.av input { text-align: center; padding: 0; }
.ed .pf.tf.av input::placeholder { color: var(--plassholder); }
.ed .pf { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 1px solid var(--kant); border-radius: 6px; background: var(--kort); color: var(--dempet); }
.ed .pf input { width: 30px; height: 26px; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: right; }
.ed .pf input::placeholder { color: var(--dempet); }
.ed .pf.egen input { color: var(--tekst); }
.ed .pf:focus-within { outline: 3px solid rgba(20, 28, 46, 0.35); outline-offset: 1px; }
.ed .pf input:focus { outline: none; }
.ed .pf.hel { height: 36px; width: 100%; padding: 0 10px 0 0; }
.ed .pf.hel input { width: 100%; height: 34px; }
.ed .seg { display: inline-flex; height: 36px; padding: 3px; gap: 2px; background: var(--flate); border-radius: 8px; }
.ed .seg button { border: 0; background: none; padding: 0 12px; border-radius: 6px; font-size: 14px; color: var(--dempet); cursor: pointer; }
.ed .seg button[aria-checked="true"] { background: var(--kort); color: var(--tekst); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 28, 46, 0.14); }

/* Merknadene: ett symbol og én linje tekst per funn, i tekstfarge. Kritisk (må rettes): rund rød prikk med «!».
   Ok: grønn hake. Kritiske først, høyst to vises. v.1024 (Stians design): finnes det noe å sjekke, står merknadene i en
   egen rute med varselfarge, med «N merknader å sjekke» og «Vis alle» øverst. De som er verdt å vite (obs), står som
   punkter. Kanten er varselfargen, tynnet ut. */
.ed .sj.varsel { margin: 14px 20px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--varsel) 35%, transparent); border-radius: 10px; background: var(--obs-bunn); }
.ed .sj.varsel + .hd { border-top: 1px solid var(--kant); }
.ed .sjh { display: flex; align-items: center; gap: 8px; }
.ed .sjh .sjt { flex: 1; min-width: 0; font-weight: 600; color: var(--obs); }
.ed .sjh .s { flex: none; font-size: 12px; color: var(--obs); text-decoration-color: currentColor; }
.ed .pkt { display: block; width: 5px; height: 5px; margin: 7px auto 0; border-radius: 50%; background: var(--tekst); }
.ed .sj { display: flex; flex-direction: column; gap: 6px; padding: 12px 20px; border-bottom: 1px solid var(--kant); font-size: 14px; color: var(--tekst); line-height: 1.45; }
.ed .sl { display: flex; align-items: flex-start; gap: 8px; }
.ed .ik { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.ikn { display: block; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ed .sj > .s { align-self: flex-start; margin-left: 24px; font-size: 12px; }
.ed .lesefeil { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 20px; border-bottom: 1px solid var(--kant); }
.ed .lesefeil .lf2 { font-size: 12px; color: var(--dempet); line-height: 1.45; }
.ed .lesefeil .tb { margin-top: 8px; }

/* Linjene */
/* v.1027: kolonnen for påslag eller dekningsgrad heter det samme som valget øverst («Dekningsgrad»), og er bredere (før 64 px). */
.ed .hd, .ed .r { display: grid; grid-template-columns: minmax(0, 1fr) 84px 96px 12px; gap: 12px; align-items: center; padding: 0 20px; }
.ed .hd { position: sticky; top: 0; z-index: 2; height: 32px; background: var(--lys); font-size: 12px; color: var(--dempet); border-bottom: 1px solid var(--kant); }
.ed .hd .h { text-align: right; }
.ed .r { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--kant); cursor: pointer; scroll-margin-top: 32px; }
.ed .r:hover, .ed .r.apen { background: var(--lys); }
.ed .r.apen { border-bottom: 0; }
.ed .r.fraktrad { cursor: default; }
.ed .rn { min-width: 0; }
.ed .t1 { font-weight: 600; overflow-wrap: anywhere; }
.ed .t2 { margin-top: 2px; font-size: 12px; color: var(--dempet); line-height: 1.5; overflow-wrap: anywhere; }
.ed .rp { display: flex; justify-content: flex-end; }
/* v.1027 (T29): hele boksen er feltet. Før tok bare de 30 px med tallet imot et trykk; resten åpnet linja. */
.ed .rp .pf { width: 100%; cursor: text; }
.ed .rp .pf input { flex: 1; width: 0; min-width: 0; }
/* v.1028: navnet ved feltet på raden («Dekningsgrad» / «Påslag») vises bare på telefon, der kolonnetitlene er skjult. */
.ed .rpnavn { display: none; }
/* Eget tall for linja: en liten prikk foran tallet (rad og redigerer). */
.ed .pf.egen::before, .ed .egenprikk { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lenke); }
.ed .egenprikk { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.ed .rettmerke { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--obs-bunn); color: var(--obs); font-size: 11px; font-weight: 600; line-height: 16px; }
.ed .ru { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-weight: 400; white-space: nowrap; }
.ed .mangler { color: var(--feil); }
.ed .rc { width: 12px; height: 20px; padding: 0; border: 0; background: none; color: var(--kant-mork); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ed .r:hover .rc, .ed .r.apen .rc { color: var(--dempet); }
.ed .tvh { padding: 14px 20px 6px; font-size: 12px; color: var(--dempet); }
.ed .r.tv { cursor: default; }
.ed .r.tv:hover { background: none; }
.ed .r.tv .t1 { font-weight: 400; color: var(--dempet); }
.ed .r.tv .tm { grid-column: 2 / span 2; text-align: right; }
/* v.1024: «+ Legg til linje» er en enkel lenke under linjene (før: en stiplet boks). */
.ed .ny { display: inline-flex; align-items: center; align-self: flex-start; height: 36px; margin: 8px 20px 12px; padding: 0; border: 0; background: none; font-size: 14px; color: var(--tekst); cursor: pointer; }
.ed .ny:hover { text-decoration: underline; text-underline-offset: 2px; }
.ed .angre { display: flex; align-items: center; gap: 12px; padding: 12px 20px; font-size: 12px; color: var(--dempet); border-bottom: 1px solid var(--linjeskille); background: var(--lys); }
.ed .angre .s { margin-left: auto; font-size: 14px; }

/* Redigereren, rett under linja */
.ed .red { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 4px 20px 16px; background: var(--lys); border-bottom: 1px solid var(--kant); }
.ed .red .fire { display: grid; grid-template-columns: 64px minmax(0, 1fr) 88px minmax(0, 1fr); gap: 10px; }
/* v.1030: Posisjon og Overskrift side om side over Varenavn. Posisjonen er kort («v1»), overskriften lengre.
   v.1031: de heter Gruppe og Tekst under gruppen, med hjelpeteksten under i hele bredden. */
.ed .red .to { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.ed .red .gruppehint { grid-column: 1 / -1; margin-top: -4px; font-size: 12px; line-height: 1.35; color: var(--dempet); }
.ed .red .ro { height: 36px; display: flex; align-items: center; justify-content: flex-end; font-weight: 400; white-space: nowrap; }
.ed .red .hint { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; }
/* v.1027 (T29b): innprisen er låst (fra leverandørens tilbud) til «Rett innpris» er trykket. */
.ed .red input[readonly] { background: var(--flate); border-color: var(--flate); color: var(--dempet); cursor: default; }
.ed .red input[readonly]:focus { outline: none; }
/* v.1028: merket «rettet» og «Rett innpris» under feltet, så feltnavnet står på én linje og feltene på samme høyde. */
.ed .red .innunder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ed .red .innunder:empty { display: none; }
.ed .red .rettinn { font-size: 12px; }
/* Salgssummen for linja som tekst, og merket for eget tall med «Bruk tallet øverst», under de fire feltene. */
.ed .redsum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; font-size: 13px; color: var(--dempet); }
.ed .redsum b { color: var(--tekst); font-weight: 600; }
.ed .redsum .utregning { font-size: 12px; }
.ed .redsum .egenrad { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 12px; }
.ed .redsum .egenrad:empty { display: none; }
.ed .redsum .egenrad .s { font-size: 12px; }
.ed .rfot { display: flex; align-items: center; gap: 10px; }
/* v.1032: grupperingene, som i Tripletex. Grupperingsraden har lys bakgrunn, tittelen i fet skrift og kommentaren i kursiv
   under. Håndtaket (≡) står i venstremargen på hver rad (bare PC). «+ Linje her» står under siste linje i hver gruppering. */
.ed select { height: 36px; padding: 0 8px; border: 1px solid var(--kant); border-radius: 8px; font-size: 14px; font-weight: 400; color: var(--tekst); background: var(--kort); width: 100%; min-width: 0; }
.ed .r { position: relative; }
.ed .gr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 12px; gap: 12px; align-items: center; padding: 10px 20px; background: var(--bunn); border-bottom: 1px solid var(--kant); cursor: pointer; scroll-margin-top: 32px; }
.ed .gr:hover, .ed .gr.apen { background: var(--flate); }
.ed .gr .gt { font-weight: 600; overflow-wrap: anywhere; }
.ed .gr .gk { margin-top: 1px; font-size: 12px; font-style: italic; color: var(--dempet); overflow-wrap: anywhere; }
.ed .gr .ingen { font-weight: 400; font-style: italic; color: var(--plassholder); }
.ed .gr:hover .rc, .ed .gr.apen .rc { color: var(--dempet); }
.ed .dra { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 16px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--kant-mork); cursor: grab; display: inline-flex; align-items: center; justify-content: center; touch-action: none; }
.ed .r:hover .dra, .ed .gr:hover .dra, .ed .dra:focus-visible { color: var(--tekst); }
.ed .drar, .ed .drar * { cursor: grabbing !important; user-select: none; }
.ed .dras { opacity: 0.4; }
.ed .slippmal { box-shadow: inset 0 3px 0 0 var(--lenke); }
.ed .ny.lh { height: 30px; margin: 2px 20px 6px; font-size: 12px; color: var(--dempet); }
.ed .ny.lh:hover { color: var(--tekst); }
.ed .nyrader { display: flex; flex-wrap: wrap; gap: 0 24px; padding: 0 20px; }
.ed .nyrader .ny { margin: 8px 0 12px; }
.ed .tilh { padding: 14px 20px 6px; font-size: 12px; color: var(--dempet); border-bottom: 1px solid var(--kant); }
.ed .red .grvalg { display: grid; gap: 6px; }
.ed .red .grvalg .gruppehint { margin-top: 0; }
.ed .red .nygr { margin-top: 6px; }
.ed .red .nygr .nygrknapper { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
.ed .grred { background: var(--bunn); }
.ed .grred .rfot { flex-wrap: wrap; }
.ed .grred .rfot .s:disabled { color: var(--plassholder); cursor: default; text-decoration: none; }
.ed .grslett { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 8px; background: var(--obs-bunn); color: var(--obs); font-size: 13px; }
.ed .grslett .grslettknapper { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ed .tekstfelt { gap: 6px; }
.ed .redigerer { position: relative; background: var(--kort); border: 1px solid var(--kant); border-radius: 8px; }
.ed .redigerer:focus-within { outline: 3px solid rgba(20, 28, 46, 0.35); outline-offset: 1px; }
.ed .redigerer .merkelag, .ed .redigerer textarea { margin: 0; padding: 8px 10px; font: 400 14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; letter-spacing: normal; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; }
.ed .redigerer .merkelag { position: absolute; inset: 0; color: transparent; pointer-events: none; overflow: hidden; }
.ed .redigerer .merkelag mark { background: #FBE3B5; color: transparent; border-radius: 3px; }
.ed .redigerer textarea { position: relative; display: block; width: 100%; min-height: calc(4 * 1.5em + 18px); height: auto; border: 0; background: transparent; resize: none; overflow: hidden; scrollbar-width: none; }
.ed .redigerer textarea::-webkit-scrollbar { display: none; }
.ed .redigerer textarea:focus { outline: none; }
.ed .redhint { font-size: 12px; color: var(--dempet); line-height: 1.45; }
.ed .redhint .mmerke { background: #FBE3B5; color: var(--tekst); padding: 0 5px; border-radius: 3px; }

/* Summen, fast nederst i begge fanene */
.ed .sum { flex: none; display: grid; grid-template-columns: auto auto auto 1fr; gap: 6px 18px; align-items: end; padding: 12px 20px 14px; border-top: 1px solid var(--kant); background: var(--lys); }
.ed .sum div { display: flex; flex-direction: column; gap: 3px; }
.ed .sum span { font-size: 12px; color: var(--dempet); }
.ed .sum b { font-size: 14px; font-weight: 400; white-space: nowrap; }
.ed .sum .tot { text-align: right; }
.ed .sum .tot b { font-size: 18px; font-weight: 600; }
/* v.1024: egen frakt står som en liten linje under summen, ikke som egen kolonne. */
.ed .sum .fraktnote { grid-column: 1 / -1; display: block; font-size: 12px; color: var(--dempet); }
.ed .sum .fraktnote b { font-size: 12px; }
@media (max-width: 1400px) { .ed .sum { column-gap: 12px; } .ed .sum .tot b { font-size: 16px; } }

/* Innlogging */
label.felt, .felt { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--dempet); min-width: 0; }
input[type=text], input[type=number], input[type=date], textarea, select { height: 36px; padding: 0 10px; border: 1px solid var(--kant); border-radius: 8px; font-size: 14px; background: var(--kort); color: var(--tekst); font-weight: 500; width: 100%; min-width: 0; }
.melding { padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; }
.melding.feil { background: var(--feil-bunn); color: var(--feil); }
.melding.ok { background: var(--ok-bunn); color: var(--ok); }
.inn { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
.inn .boks { width: 400px; max-width: 100%; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.inn img { height: 22px; width: auto; align-self: flex-start; }
.inn h1 { margin: 6px 0 0; font-size: 20px; }
.inn p { margin: 0; color: var(--dempet); line-height: 1.5; }
.inn form { display: flex; flex-direction: column; gap: 14px; }
.inn .melding { margin: 0; }
/* A8: «Hold meg innlogget i 30 dager» (som 1.0 T26). */
.inn .valg { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--tekst); cursor: pointer; }
.inn .valg input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--marine); cursor: pointer; }
.inn .valg small { display: block; font-size: 12px; color: var(--dempet); }

/* ---------- Mobil og smale skjermer: fire steg, ett om gangen */
@media (max-width: 1099px) {
  html, body { height: auto; }
  body { font-size: 15px; padding-bottom: 150px; }
  header.topp { height: 56px; padding: 0 16px; gap: 12px; }
  header.topp .skille, header.topp .bruker { display: none; }
  header.topp .navn, header.topp .vers { order: 3; }
  header.topp .fyll { order: 2; }
  header.topp #loggUt { order: 4; font-size: 13px; white-space: nowrap; }
  /* Under 440 px får ikke både «Tilbudsverktøy 1.0», «v.1018» og «Logg ut» plass ved logoen. Navnet står, merket går. */
  @media (max-width: 439px) { header.topp .vers { display: none; } }
  header.topp img { height: 16px; }
  header.topp .navn { font-size: 14px; }
  .mobil-bare { display: revert; }
  .stegbar, .pc-bare { display: none !important; }
  .hrute { display: contents; }
  .stegtittel { display: block; margin: 4px 0 0; font-size: 20px; font-weight: 800; line-height: 1.25; }

  /* Stegrundingene er trykkflater på 48 px (minst 44), med en rund 40 px-flate og en svak skygge så de ser trykkbare ut. */
  .stegvelger { display: flex; align-items: center; padding: 4px 16px; background: var(--kort); position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--kant); }
  .stegvelger button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .stegvelger .sn { width: 40px; height: 40px; font-size: 16px; font-weight: 700; box-shadow: 0 1px 2px rgba(20, 28, 46, 0.22); transition: transform 100ms var(--ease-ut, cubic-bezier(0.23, 1, 0.32, 1)); }
  .stegvelger .sn svg { width: 16px; height: 16px; }
  .stegvelger .rod { top: -3px; right: -4px; } /* innenfor trykkflaten på 48 px (rundingen er 40) */
  .stegvelger button:active .sn { transform: scale(0.94); }
  .stegvelger .sstrek { flex: 1; height: 2px; background: var(--kant); }

  main.flate { display: block; height: auto; padding: 14px 16px; }
  section.kol { gap: 12px; }
  #midten, #hoyre, #midten .ed { display: contents; }
  body:not(.steg-1) [data-steg="1"], body:not(.steg-2) [data-steg="2"], body:not(.steg-3) [data-steg="3"], body:not(.steg-4) [data-steg="4"] { display: none !important; }

  .lenke { min-height: 44px; display: inline-flex; align-items: center; }

  /* Steg 1: tilbudet */
  .slipp { min-height: 60vh; }
  .slippvalg .knapp { height: 44px; font-size: 14px; }
  .filrad { height: auto; min-height: 56px; padding: 8px 14px; }
  .filtekst { flex-direction: column; gap: 2px; }
  .filrad .filnavn { max-width: 60vw; font-size: 15px; }
  .filrad .merke { display: none; }
  .filrad .nytt { height: 44px; } /* trykkflaten på telefon, som lenkene */
  .visning { margin-top: 12px; }
  #vVis .omr { height: 65vh; }
  .vbar .grp.z { display: none; }
  .vbar .grp.nav { flex: 1; justify-content: space-between; }
  .vbar .st { font-weight: 700; font-size: 13px; }
  .vbar .st .mobil-bare { font-weight: 500; color: var(--dempet); }

  /* Steg 2 og 3: kundedata og varelinjer, hver i sin hvite flate */
  .ed .fan, .ed .sum, .ed .hd { display: none !important; }
  .ed .pan { display: flex; overflow: visible; background: var(--kort); border: 1px solid var(--kant); border-radius: 12px; font-size: 15px; }
  .ed .pan > .stegtittel { margin: 0; padding: 16px 16px 0; }
  .ed .grid { padding: 16px; }
  .ed .grid.kundeadr, .ed .kundeskille + .grid { padding: 14px 16px 16px; }
  .ed .kundeadr .orgnr { grid-column: 1 / -1; } /* én kolonne på telefon; postnummer og poststed står fortsatt på én rad */
  .ed .kundeskille { margin: 2px 16px 0; }
  .ed .lesehint { padding: 12px 16px 0; font-size: 13px; }
  .ed input:not([type=checkbox]), .ed textarea { font-size: 16px; height: 46px; }
  .ed textarea { height: auto; }
  /* v.1024: de to radene med innstillinger. Knapperadene og tallfeltene er høyere, så de er lette å treffe. På telefon
     (under 600 px) står navnet og tallfeltet på én linje, med knapperaden under i hele bredden. */
  .ed .innst { padding: 16px; gap: 12px; }
  .ed .innst .navn { font-size: 15px; }
  .ed .innst .seg { height: 44px; }
  .ed .innst .seg button { font-size: 14px; }
  .ed .pf.tf { height: 44px; }
  .ed .pf.tf input { height: 42px; font-size: 16px; }
  @media (max-width: 599px) {
    .ed .innst .irad { grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "navn felt" "seg seg"; row-gap: 6px; }
    .ed .innst .irad .navn { grid-area: navn; }
    .ed .innst .irad .seg { grid-area: seg; }
    .ed .innst .irad .pf { grid-area: felt; }
  }
  /* Mva og Tekst over PDF-en på steg 4. v.1031: Delsum per gruppe på en egen rad under (to kolonner, som før). */
  .pdfvalg { margin-top: 12px; padding: 12px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .pdfvalg .seg { height: 44px; }
  .pdfvalg .seg button { font-size: 14px; }
  .ed .sj.varsel { margin: 12px 16px; }
  .ed .sjh .s { min-height: 44px; display: inline-flex; align-items: center; }
  .ed .dato input[data-dato] { padding-right: 50px; }
  .ed .dato .kal { right: 1px; width: 44px; height: 44px; }
  .ed .dato input.kalvelger { right: 1px; width: 44px; }
  .ed .sj { padding: 12px 16px; font-size: 13px; }
  .ed .lesefeil { padding: 16px; }
  .ed .r { grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-areas: "rn rn rc" "rp ru rc"; row-gap: 8px; padding: 14px 16px; }
  .ed .r .rn { grid-area: rn; } .ed .r .rp { grid-area: rp; justify-content: flex-start; } .ed .r .ru { grid-area: ru; font-size: 16px; } .ed .r .rc { grid-area: rc; }
  .ed .r.tv { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rn tm"; }
  .ed .r.tv .tm { grid-area: tm; grid-column: auto; }
  .ed .pf { height: 40px; }
  .ed .pf input { width: 40px; height: 38px; font-size: 16px; }
  .ed .r .rp .pf { width: 112px; }
  .ed .r .rp { flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .ed .rpnavn { display: block; font-size: 13px; color: var(--dempet); white-space: nowrap; cursor: text; }
  .ed .t2 { font-size: 13px; }
  .ed .red { padding: 4px 16px 16px; }
  .ed .red .fire { grid-template-columns: 1fr 1fr; }
  .ed .redigerer .merkelag, .ed .redigerer textarea { font-size: 16px; }
  .ed .tb { height: 44px; }
  .ed .ny { margin: 8px 16px 12px; height: 44px; font-size: 15px; }
  .ed .angre { padding: 12px 16px; font-size: 13px; }
  .ed .angre .s, .ed .red .s, .ed .sj > .s { min-height: 44px; display: inline-flex; align-items: center; }
  /* v.1032: på telefon dras det ikke. Grupperingen velges i linjeskjemaet, og grupperingsraden har «Flytt opp» og «Flytt ned». */
  .ed .dra { display: none; }
  .ed .gr { padding: 12px 16px; grid-template-columns: minmax(0, 1fr) 16px; }
  .ed .ny.lh { height: 44px; margin: 0 16px 4px; font-size: 14px; }
  .ed .nyrader { padding: 0 16px; }
  .ed .nyrader .ny { margin: 8px 0 12px; }
  .ed .tilh { padding: 14px 16px 6px; font-size: 13px; }
  .ed select { font-size: 16px; height: 46px; }
  .ed .grred .rfot { row-gap: 0; }
  .ed .grred .rfot .fyll { flex-basis: 100%; height: 0; }
  .ed .grslett { font-size: 14px; }

  /* Steg 4: tilbudet. Siden er like bred som skjermen, og høyden følger siden. */
  #hVis { padding: 0; background: none; margin-top: 0; }
  #hVis .vbar { order: -1; }
  #hVis .vbar .ib { display: none; }
  #hVis .vbar .grp.nav { justify-content: flex-start; }
  #hVis .vbar .st { flex: 1; font-weight: 500; color: var(--dempet); font-size: 14px; text-align: left; }
  #hVis .omr { --fri: 1; height: auto; overflow-x: auto; overflow-y: hidden; }
  #hVis .prikker { display: flex; }
  .utknapper { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; height: auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--kort); border-top: 1px solid var(--kant); }
  .utknapper .knapper { height: auto; }
  .utknapper .knapp { height: 56px; }
  .utknapper #lastNedPdf { background: var(--marine); color: #fff; border-color: var(--marine); }

  /* Fast bunn med summen (ingen «Neste»-knapp, v.1024) */
  .mobilbunn { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--kort); border-top: 1px solid var(--kant); }
  .mobilbunn:empty { display: none; }
  .bunndek { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; font-size: 13px; color: var(--dempet); }
  .bunndek span:last-child { color: var(--tekst); white-space: nowrap; }
  .bunnsum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--dempet); }
  .bunnsum b { font-size: 22px; font-weight: 800; color: var(--tekst); white-space: nowrap; }
  body.steg-2, body.steg-3 { padding-bottom: 110px; }
}

/* ---------- 2.0-hull: be om tilgang (punkt 4), innloggingssiden ---------- */
.inn .inn-tg-rad { font-size: 13px; margin-top: 14px; }
.inn .inn-tg-hva { height: 76px; padding: 8px 10px; line-height: 1.4; resize: none; font-weight: 500; }
/* Det skjulte feltet: utenfor skjermen, ikke i tab-rekkefølgen og ikke lest opp. Et menneske ser det aldri. */
.inn .inn-tg-fall { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- D1 (20.10.2026): innloggingen i den oppfriskede drakten (lerret runde 2, innlogging.dc.html) ----------
   Samme felt, samme tekst og samme rekkefølge. Kortet er glass på en rolig bakgrunn med myke farger; «Logg inn» er oransje
   med hvit, fet tekst. Fargene er de samme som i public/drakt.css (siden lastes uten innlogging, så de står også her). */
.inn { position: relative; overflow: hidden; min-height: 100%; padding: 40px 16px; background: #F1EFEB; color: #23272E; }
.inn::before, .inn::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.inn::before { width: 620px; height: 620px; right: 12%; top: -240px; background: radial-gradient(closest-side, rgba(255,154,115,.42), rgba(255,154,115,0)); }
.inn::after { width: 560px; height: 560px; left: 14%; bottom: -260px; background: radial-gradient(closest-side, rgba(141,176,255,.36), rgba(141,176,255,0)); }
.inn .boks.kort { position: relative; z-index: 1; width: 420px; padding: 36px 34px 30px; gap: 18px; border: 1px solid rgba(255,255,255,.9); border-radius: 30px; background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 24px 60px rgba(30,36,50,.12); }
.inn img { height: 24px; }
.inn h1 { margin: 6px 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: #23272E; }
.inn p { color: #4D545E; font-size: 14px; }
.inn form { gap: 16px; }
.inn label.felt { gap: 7px; font-size: 13.5px; font-weight: 600; color: #3A4049; }
.inn .felt input, .inn .felt textarea { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #DADFE5; border-radius: 13px; background: #FFFFFF; font-size: 15px; font-weight: 500; color: #23272E; }
.inn .felt textarea.inn-tg-hva { height: 88px; padding: 10px 14px; }
.inn .felt input:focus, .inn .felt textarea:focus { outline: 3px solid #FFD4C4; outline-offset: 0; border-color: #F05223; }
.inn .valg { gap: 12px; font-size: 15px; font-weight: 600; color: #23272E; }
.inn .valg input { width: 20px; height: 20px; accent-color: #F05223; }
.inn .valg small { margin-top: 2px; font-size: 13px; font-weight: 500; color: #4D545E; }
.inn .knapp { height: 50px; border-radius: 14px; border-color: #F05223; background: #F05223; color: #FFFFFF; font-size: 16px; font-weight: 800; }
.inn .knapp:focus-visible { outline: 3px solid #23272E; outline-offset: 2px; }
.inn .knapp:active { transform: scale(0.97); transition-duration: 100ms; }
@media (hover: hover) and (pointer: fine) { .inn .knapp:hover { background: #D9461A; border-color: #D9461A; } }
.inn .lenke { align-self: center; font-size: 14.5px; color: #C2410C; }
.inn .lenke:hover { color: #9A3412; }
.inn .inn-tg-rad { margin-top: 16px; text-align: center; font-size: 14px; color: #4D545E; }
.inn .inn-tg-rad .lenke { font-weight: 700; }
.inn .melding { border-radius: 13px; }
@media (max-width: 480px) { .inn .boks.kort { padding: 28px 22px 24px; border-radius: 26px; } }

/* ---------- D13d (21.10.2026): innloggingen på pikselen mot tavla innlogging (lerret-runde3), lenkene som i runde 3 ----------
   Logoen står i en like høy boks som ordmerket på tavla (33 px), overskriften rett under, etikettene og haken med tavlas
   linjehøyder, og lenkene oransje, understreket, 13,5 px vanlig vekt (lappen «Runde 3»). */
.inn img { margin-bottom: 9px; }
.inn h1 { margin: 0 0 6px; line-height: 1.2; }
.inn label.felt { line-height: 1.2; }
.inn .valg { margin-top: 2px; line-height: 1.2; }
.inn .valg small { line-height: 1.2; }
.inn .knapp { margin-top: 6px; border: 0; }
.inn .lenke { margin-top: 2px; font-size: 13.5px; font-weight: 500; line-height: 1.25; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(194,65,12,.35); }
.inn .inn-tg-rad { margin-top: 10px; line-height: 1.15; }
.inn .inn-tg-rad .lenke { margin-top: 0; font-weight: 500; }
.inn h1 { font-weight: 800; }
.inn label.felt { font-weight: 700; }
.inn .knapp { padding: 0; }
/* D13d: fargene fra drakten i runde 3 (D13a). Størrelsene og vektene står som på tavla innlogging (egen tavle, egne unntak). */
.inn { color: #18181B; }
.inn h1, .inn .valg, .inn .felt input, .inn .felt textarea { color: #18181B; }
.inn label.felt { color: #3F3F46; }
.inn p, .inn .valg small, .inn .inn-tg-rad { color: #52525B; }