/* Vater: kalkyle, arbeidsbenk og kravliste.
   Uttrykket (ui-uttrykk, Peters valg 16.10.2026): én skrift (IBM Plex Sans) i tre vekter, fem størrelser, hvit
   flate, tynne linjer bare der de skiller noe, tall i kolonner, blått for valg og lenker, og rødt bare for det som må
   avklares før tilbudet sendes. Fargene er roller med en verdi i lys og en i mørk modus.
   Skriften ligger i static/fonter under SIL Open Font License (OFL.txt). */

@font-face { font-family: "IBM Plex Sans"; src: url("fonter/IBMPlexSans-VF.ttf") format("truetype"); font-weight: 100 700; font-stretch: 75% 100%; font-display: swap; }

:root {
  /* Skriften: IBM Plex Sans for alt, også merket. Ingen monospace i grensesnittet. */
  --font: "IBM Plex Sans", system-ui, sans-serif;
  --mono: var(--font);
  --merke-font: var(--font);
  /* Fem størrelser (skrift/linje). Liten bare for metadata under en tittel, aldri for etiketter alene. */
  --t-liten: 11.5px/17px;
  --t-ui: 12.5px/18px;
  --t-les: 13.5px/21px;
  --t-tittel: 16px/22px;
  --t-sum: 20px/26px;
  /* Linjelengden for brødtekst (ui-uttrykk4b): høyst 31 em, rundt 65 til 75 tegn på linjen. */
  --maal: 31em;
  /* Tre vekter. */
  --v-normal: 400; --v-middels: 500; --v-sterk: 600;
  /* Avstander i trinn av 4 px. */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px;
  /* Høyder: topp, underfaner, rad, felt, statuslinje. */
  --h-topp: 44px; --h-under: 32px; --h-rad: 28px; --h-felt: 26px; --h-status: 26px;
  /* Fargene. Kontrast mot hvitt: tekst 16,5:1, grå 6,1:1, svak 5,0:1, blå 5,6:1, rød 5,8:1, rav 5,9:1 (tests/test_ui_uttrykk.py regner alle parene). */
  --bg: #FFFFFF;
  --flate: #FFFFFF;
  --flate-2: #F7F8F9;      /* gruppelinjer, kildefeltet, skjemaflater */
  --flate-3: #F3F4F6;      /* tabellhodet, statuslinjen, valgt fane i en gruppe */
  --blekk: #1D1F23;
  --dempet: #5D626B;
  --svak: #6B7079;
  --linje: #DFE2E6;        /* mellom flater */
  --linje-sterk: #C4C8CF;  /* rundt felt og knapper */
  --haar: #ECEEF1;         /* mellom rader */
  --handling: #2A64C5;     /* valg, lenker, fokus */
  --handling-hover: #1F4F9F;
  --handling-lys: #EAF1FC; /* valgt rad */
  --hover: #F6F8FB;
  --signal: #C1272D;       /* bare «må avklares før tilbudet sendes» */
  --rav: #8A5A00;          /* antakelse, advarsel og feil i et skjema */
  --rav-bg: #FBF6EC;
  /* Tekst på en fylt flate: hovedknappen (blekk), M-merket (signal) og det valgte filteret. */
  --paa-blekk: #FFFFFF;
  --paa-signal: #FFFFFF;
  --blekk-hover: #000000;
  /* Punkter, kanter og flater som ikke er tekst. */
  --punkt: #6E747D;        /* statuspunktet «ellers»; 4,8:1 mot hvitt */
  --kant-hover: #9AA0AA;
  --linje-hode: #CFD3D9;   /* under tabellhoder og køgrupper */
  --flate-grp: #FAFBFC;    /* gruppelinjer og sumlinjer i tabeller */
  --sitatstrek: #9AA0AA;
  /* Opphavet beholder sine navn, men har ikke lenger hver sin farge: bokstaven sier hva det er. */
  --kilde: var(--dempet);     --kilde-bg: var(--flate);
  --beregnet: var(--dempet);  --beregnet-bg: var(--flate);
  --validert: var(--blekk);   --validert-bg: var(--flate);
  --pris: var(--dempet);      --pris-bg: var(--flate);
  --antakelse: var(--rav);    --antakelse-bg: var(--rav-bg);
  --mangler: var(--signal);   --mangler-bg: #FCEEEE;
  --markering: rgba(42, 100, 197, 0.16);
  --markering-kant: var(--handling);
  --radius: 3px;
  /* Høyden på toppen; i et prosjekt er linjen med undersidene med (`body.har-under`). */
  --topp-h: calc(var(--h-topp) + 1px);
  color-scheme: light;
}
@media (min-width: 1800px) {
  :root { --t-liten: 12.5px/18px; --t-ui: 13px/19px; --t-les: 14px/22px; --t-tittel: 17px/23px; --t-sum: 22px/28px; --h-rad: 30px; --h-felt: 28px; }
}
/* Mørk flate: de samme rollene, med verdiene for mørk modus. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #15171A; --flate: #15171A; --flate-2: #1B1E22; --flate-3: #20242A; --hover: #1E2329;
    --blekk: #E6E8EB; --dempet: #A3A9B2; --svak: #959BA4; --linje: #2E333A; --linje-sterk: #444A53; --haar: #24282E;
    --handling: #8DB4F0; --handling-hover: #B0CBF5; --handling-lys: #1C2B42;
    --signal: #F07A7E; --rav: #E0B25A; --rav-bg: #2A2316; --mangler-bg: #3A1C1E;
    --paa-blekk: #15171A; --paa-signal: #15171A; --blekk-hover: #FFFFFF;
    --punkt: #8F959E; --kant-hover: #5A616B; --linje-hode: #3A4048; --flate-grp: #1B1E22; --sitatstrek: #5A616B;
    --markering: rgba(141, 180, 240, 0.22);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--blekk); font: 15px/1.5 var(--font); }
/* Tabulære tall bare der tall står i kolonner. Fonten gjør også komma og punktum tabulære. */
.tall, .sum, .sumband dd, .linjerad .sum, .linjerad .hoyre, .teller, .tallverdi, .alternativ .pris { font-variant-numeric: tabular-nums; }
a { color: var(--handling); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--handling); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -0.01em; overflow-wrap: anywhere; }
p { margin: 0; }
.id { font-family: var(--mono); font-size: 0.85em; color: var(--svak); }
.dempet { color: var(--dempet); }
.liten { font-size: 13px; }
.visuelt-skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- toppen (navigasjon A): første linje med merket, prosjektet og lenkene til høyre, og i et prosjekt
   linjen med alle undersidene i de tre gruppene. Gruppenavnet er en etikett, ikke en lenke, så hver side er ett klikk
   unna fra hvor som helst. Statuslinjen står nederst på prosjektsidene. */
body.har-under { --topp-h: calc(var(--h-topp) + var(--h-under) + 2px); }
body.har-status { --bunn-h: calc(var(--h-status) + 1px); padding-bottom: var(--bunn-h); }
.app-topp { position: sticky; top: 0; z-index: 10; background: var(--flate); border-bottom: 1px solid var(--linje); }
.vt { display: flex; align-items: stretch; gap: 20px; min-height: var(--h-topp); padding: 0 16px; white-space: nowrap; }
.vt > * { display: flex; align-items: center; }
.merke { font: 700 15px/1 var(--merke-font); letter-spacing: -0.01em; color: var(--blekk); text-decoration: none; }
.merke:hover { text-decoration: none; }
/* R197: prosjektnavnet får all plassen lenkene til høyre ikke bruker, og kuttes aldri. Et navn som ikke får plass,
   brytes over to linjer i den samme høyden, og et enda lengre (Vater godtar 200 tegn) gjør toppen høyere; skriptet i
   base.html setter da --topp-h til den høyden toppen har, så benken og kalkylen fortsatt fyller skjermen. */
.vt > .prosjektnavn { display: block; flex: 0 1 auto; min-width: 0; align-self: center; padding: 4px 0; line-height: 18px; white-space: normal; overflow-wrap: anywhere; color: var(--blekk); font-weight: var(--v-middels); text-decoration: none; }
.vt > .prosjektnavn:hover { text-decoration: underline; }
.topp-lenke { height: 100%; padding: 0 10px; color: var(--dempet); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
/* Bare den første lenken skyves ut til høyre, så de som kommer etter (Tilgang, T1), står ved siden av den. */
.vt > .topp-lenke { margin-left: auto; }
.vt > .topp-lenke + .topp-lenke { margin-left: 0; }
.topp-lenke:hover { color: var(--blekk); text-decoration: none; }
.topp-lenke.aktiv { color: var(--blekk); border-bottom-color: var(--blekk); font-weight: var(--v-middels); }
.topp-merknad { color: var(--dempet); white-space: nowrap; }
.faner { display: flex; align-items: stretch; gap: 28px; height: var(--h-under); padding: 0 16px; background: var(--flate-2); border-top: 1px solid var(--linje); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.faner::-webkit-scrollbar { display: none; }
.vt-gruppe { display: flex; align-items: stretch; gap: 2px; }
.vt-gnavn { display: flex; align-items: center; padding-right: 6px; color: var(--dempet); font-weight: var(--v-sterk); }
.vt-gruppe.naa .vt-gnavn { color: var(--blekk); }
.faner a { display: flex; align-items: center; gap: 6px; padding: 0 8px; color: var(--dempet); text-decoration: none; border-bottom: 2px solid transparent; }
.faner a:hover { color: var(--blekk); text-decoration: none; }
.faner a.aktiv { color: var(--blekk); border-bottom-color: var(--blekk); font-weight: var(--v-middels); }
.vt-status { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 18px; height: var(--h-status); padding: 0 16px; background: var(--flate-3); border-top: 1px solid var(--linje-hode); color: var(--dempet); font: var(--t-ui) var(--font); white-space: nowrap; overflow: hidden; }
.vt-status b { color: var(--blekk); font-weight: var(--v-sterk); }
.vt-status a { color: var(--blekk); }
.vt-status .ma::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: 1px; border-radius: 1px; background: var(--signal); }
.vt-status .ma.ingen::before { border-radius: 50%; background: var(--punkt); }
.vt-status .vt-kd { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Utskrift: statuslinjen står fast nederst og ville stått over innholdet på hver side, så den skrives ikke ut. */
@media print {
  .vt-status { display: none; }
  body.har-status { --bunn-h: 0px; padding-bottom: 0; }
}
.faner { position: relative; }

/* ---------- felles byggeklosser */
.glyf { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 5px; font: 600 11px/1 var(--mono); }
.g-source { background: var(--kilde-bg); color: var(--kilde); }
.g-calculation { background: var(--beregnet-bg); color: var(--beregnet); }
.g-vater { background: var(--kilde-bg); color: var(--kilde); outline: 1px dashed var(--kilde); outline-offset: -2px; }
.g-validated_solution { background: var(--validert-bg); color: var(--validert); }
.g-price_data { background: var(--pris-bg); color: var(--pris); }
.g-assumption { background: var(--antakelse-bg); color: var(--antakelse); }
.g-missing { background: var(--mangler-bg); color: var(--mangler); }
.g-ok { background: var(--validert-bg); color: var(--validert); }
.g-avvist { background: var(--flate-3); color: var(--svak); }
.g-foreldet { background: var(--mangler-bg); color: var(--mangler); }
.glyfer { display: inline-flex; gap: 3px; }
/* R4: et symbol med en kilde eller regel å vise til er en lenke, med samme form og en ring ved pekeren. */
a.glyf { text-decoration: none; }

/* R4: hva et beløp er. Selvkost er nøytral med kant, tilbudsprisen med påslag har farge, så de aldri forveksles.
   Merket følger teksten rundt i størrelse og bryter aldri. */
.belopsart { display: inline-block; vertical-align: 0.15em; padding: 1px 7px; border-radius: 999px; font: 600 11px/1.4 var(--font); letter-spacing: 0.01em; white-space: nowrap; }
.belopsart.selvkost { background: var(--flate); color: var(--dempet); box-shadow: inset 0 0 0 1px var(--linje-sterk); }
.belopsart.med-paslag { background: var(--handling-lys); color: var(--handling); }
.belopsnotat { margin-bottom: 16px; font-size: 13.5px; color: var(--dempet); }
.belopsnotat .belopsart { margin-right: 6px; }
.ikke-bryt { white-space: nowrap; }

/* Statusordet: et punkt foran ordet, ingen pille (formene står under «Merker» i uttrykket). */
.chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
/* Den typede verdien ved kravverdien (`kravverdi` i `_felles.html`), også inne i den store verdien i arbeidsbenken. */
.chip.typet { vertical-align: middle; letter-spacing: normal; }

.knapp {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--linje-sterk); background: var(--flate); color: var(--blekk);
  font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.knapp:hover { border-color: var(--handling); }
.knapp.primar { background: var(--handling); border-color: var(--handling); color: var(--flate); }
.knapp.primar:hover { background: var(--handling-hover); }
/* Svaret som er valgt i en sak med likestilte knapper, for eksempel en rest fra modellen (R7). */
.knapp[aria-pressed="true"] { border-color: var(--handling); box-shadow: inset 0 0 0 1px var(--handling); font-weight: 600; }
.knapp.liten-knapp { padding: 5px 10px; font-size: 13px; }
.knapp kbd { margin-left: 2px; }
.knapp.primar kbd { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
kbd { font: 500 10.5px/1 var(--mono); border: 1px solid var(--linje-sterk); border-bottom-width: 2px; background: var(--flate); border-radius: 4px; padding: 2px 5px; color: var(--dempet); }

.felt { display: grid; gap: 4px; font-size: 13px; color: var(--dempet); }
.felt input, .felt select, .felt textarea { padding: 8px 10px; border: 1px solid var(--linje-sterk); border-radius: 8px; background: var(--flate); color: var(--blekk); font-size: 14px; }

.tom { padding: 18px 20px; background: var(--flate); border: 1px dashed var(--linje-sterk); border-radius: var(--radius); color: var(--dempet); }

/* ---------- arbeidsbenken */
.benk { display: grid; grid-template-columns: 320px minmax(420px, 1fr) minmax(380px, 40%); height: calc(100vh - var(--topp-h) - var(--bunn-h, 0px)); }
.benk > * { min-height: 0; overflow: auto; }

.ko { background: var(--flate-2); border-right: 1px solid var(--linje); padding: 0 0 24px; }
.ko-hode { position: sticky; top: 0; z-index: 1; background: var(--flate-2); padding: 16px 16px 12px; border-bottom: 1px solid var(--linje); display: grid; gap: 8px; }
.ko-hode strong { font-size: 15px; }
.fremdrift { height: 6px; border-radius: 3px; background: var(--flate-3); overflow: hidden; }
.fremdrift i { display: block; height: 100%; background: var(--validert); }
.ko-gruppe { display: flex; justify-content: space-between; padding: 16px 16px 6px; font-size: 12.5px; font-weight: 600; color: var(--dempet); }
.ko-gruppe span { font-family: var(--mono); font-weight: 400; color: var(--svak); }
.ko-rad { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0 8px; padding: 8px 8px; border-radius: 8px; color: var(--blekk); text-decoration: none; }
.ko-rad:hover { background: var(--flate-3); }
.ko-rad.valgt { background: var(--flate); box-shadow: 0 0 0 1px var(--linje-sterk); }
.ko-rad .tittel { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.35; overflow-wrap: break-word; }
.ko-rad .under { display: block; font-size: 12px; color: var(--svak); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-rad.ferdig .tittel { color: var(--svak); font-weight: 400; }
/* P1: en sak som venter på en annen åpen sak, og saken som er styrende. */
.ko-rad .under.venter { color: var(--antakelse); }
p.venter { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--antakelse-bg); color: var(--antakelse); font-size: 13.5px; }
p.venter a { color: inherit; font-weight: 600; }

.sak { padding: 26px 32px 0; display: flex; flex-direction: column; gap: 20px; overflow-wrap: break-word; }
.sak-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--dempet); font-size: 13px; }
.sak h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.sak .bygningsdel { color: var(--dempet); }
.sak .ingress { overflow-wrap: anywhere; }
/* PX2: verdien kan være en hel setning fra kravet, og et langt ord i 30 px var bredere enn saken i 768 og 375 px.
   Skriften følger bredden på saken (container query-enheten cqi) ned til 20 px. */
.sak { container: sak / inline-size; }
.verdi { font-size: clamp(20px, 7.5cqi, 30px); font-weight: 800; letter-spacing: -0.02em; }
.verdi .op { color: var(--svak); font-weight: 600; }
.sitat { margin: 0; padding: 14px 16px; border-radius: var(--radius); background: var(--flate); border: 1px solid var(--linje); display: grid; gap: 8px; }
.sitat q { quotes: "«" "»"; font-size: 15px; }
.sitat .fil { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--dempet); }
.status-linje { display: flex; gap: 10px; align-items: center; font-size: 13.5px; padding: 10px 14px; border-radius: 8px; background: var(--flate); border: 1px solid var(--linje); }
/* PX2: teksten ved siden av merket kan bli smalere enn et langt filnavn i kilden, så filnavnet brytes i stedet for å stikke ut. */
.status-linje > span { min-width: 0; }
.status-linje.godta, .status-linje.bekreftet { border-color: color-mix(in srgb, var(--validert) 45%, transparent); }
.status-linje.avvis { border-color: var(--linje-sterk); }
.status-linje.endre { border-color: color-mix(in srgb, var(--antakelse) 45%, transparent); }
.status-linje.satt { border-color: color-mix(in srgb, var(--kilde) 45%, transparent); }
.status-linje.utenfor { border-color: var(--linje-sterk); }
.status-linje.foreldet { border-color: color-mix(in srgb, var(--mangler) 45%, transparent); }
.handlinger { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.handlinger form { display: contents; }
.endre-skjema { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--linje); border-radius: var(--radius); background: var(--flate); }
.endre-skjema[hidden] { display: none; }
.endre-skjema .rad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* hf-areal runde 2: enhetene i saken om enhetene i en modell. Listene og feltet krymper med kortet i 390 px. */
.enhetsvar .rad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.enhetsvar .felt { min-width: 0; }
.enhetsvar .felt input, .enhetsvar .felt select { width: 100%; min-width: 0; box-sizing: border-box; }
.anbefaling { padding: 12px 14px; border-radius: var(--radius); background: var(--antakelse-bg); color: var(--blekk); }
.anbefaling strong { color: var(--antakelse); }
.kildekort { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.kildekort a { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--linje); border-radius: 8px; background: var(--flate); color: var(--blekk); text-decoration: none; }
.kildekort a:hover, .kildekort a.aktiv { border-color: var(--kilde); }
.kildekort small { grid-column: 2; color: var(--dempet); font-size: 12px; }
.seksjon-tittel { font-size: 13px; font-weight: 600; color: var(--dempet); }
.koblinger, .tapte { display: grid; gap: 8px; }
.koblinger summary { cursor: pointer; }
.koblinger .liste-enkel { list-style: none; padding-left: 0; color: var(--blekk); margin-top: 8px; }
.koblinger li { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--linje); border-radius: 8px; background: var(--flate); }
.koblinger li span { overflow-wrap: anywhere; }
.koblinger li form { flex: none; }
.handlinger form.avvis-med-grunn { display: flex; gap: 8px; flex-wrap: wrap; }
.avvis-med-grunn input[name="begrunnelse"] { min-width: 220px; }
.sjikt { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13.5px; }
.sjikt li { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--linje); }
.sjikt li span { font-family: var(--mono); font-size: 12px; color: var(--dempet); text-align: right; }
.hurtigtaster { position: sticky; bottom: 0; margin: auto -32px 0; padding: 10px 32px; display: flex; flex-wrap: wrap; gap: 6px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--linje); font-size: 12.5px; color: var(--dempet); }

.kildefelt { background: var(--flate-3); border-left: 1px solid var(--linje); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.kildefelt-hode { flex: none; display: grid; gap: 8px; padding: 12px 16px; background: var(--flate-3); border-bottom: 1px solid var(--linje); }
.kildefelt-hode .rad { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 13px; min-width: 0; }
.kildefelt-hode .kildefil { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.kildefelt-hode .filnavn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kildefelt-hode .kildefil .id, .kildefelt-hode .rad a { flex: none; white-space: nowrap; }
.kildefaner { display: flex; gap: 4px; flex-wrap: wrap; }
.kildefaner a { font-size: 12.5px; padding: 4px 9px; border-radius: 6px; text-decoration: none; color: var(--dempet); border: 1px solid transparent; }
.kildefaner a.aktiv { background: var(--flate); color: var(--blekk); border-color: var(--linje-sterk); }
/* Mange vegger i en sak om flere krav og vegger: én lukket liste etter kravfanene, med summen som en fane. */
.kildeliste[open] { flex-basis: 100%; }
.kildeliste summary { display: inline-block; cursor: pointer; font-size: 12.5px; padding: 4px 9px; border-radius: 6px; color: var(--dempet); border: 1px solid var(--linje); }
.kildeliste[open] summary { color: var(--blekk); margin-bottom: 6px; }
.kildeliste .kildefaner { max-height: 120px; overflow-y: auto; }
.ark-omraade { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; padding: 16px; }
.ark { position: relative; max-width: none; background: #fff; border-radius: 4px; }
.ark img { display: block; width: 100%; height: auto; border-radius: 4px; }
.markering { position: absolute; background: var(--markering); outline: 2px solid var(--markering-kant); outline-offset: 1px; border-radius: 2px; mix-blend-mode: multiply; pointer-events: none; }
.kildemerknad { margin: 0 16px 16px; font-size: 12.5px; color: var(--dempet); }

/* ---------- kalkylen */
.kalkyle { display: grid; grid-template-columns: 270px minmax(520px, 1fr) 380px; grid-template-rows: auto 1fr; height: calc(100vh - var(--topp-h) - var(--bunn-h, 0px)); }
.kalkyle > * { min-height: 0; }
.sumband { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 32px; padding: 14px 24px; background: var(--flate); border-bottom: 1px solid var(--linje); }
/* Raden til sumbåndet krymper når innholdet er høyere enn vinduet gir plass til (min-height: 0 over), for eksempel med
   mange låste og sendte tilbud i listen. Det som ikke får plass, rulles i sumbåndet; ellers la det seg under lista over
   mengdelinjene, som tok klikket på «Merk tilbudet som sendt» (hf-klikk). */
.sumband { overflow: auto; }
.sumband .stor { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.sumband .stor small { display: block; font-size: 13px; font-weight: 500; color: var(--dempet); letter-spacing: 0; margin-top: 3px; }
/* Teksten under tilbudsprisen brytes i stedet for å gjøre feltet bredere, men hver linje under tilbudsprisen får plass
   på én linje ved 1440 px, så toppen tar mindre av høyden (demofeil 19). */
.sumband .stor small { max-width: 44rem; line-height: 1.4; }
/* Lenkene brytes aldri med ett ord alene på en ny linje: en kort lenke står samlet, og en lenke under et steg brytes
   jevnt. */
.sumband .stor small a { white-space: nowrap; }
.forklaring .liste-enkel a:not(.regel) { white-space: nowrap; }
.kjede a.gaa, .forklaring .liste-enkel a.regel { text-wrap: pretty; }
/* R20: sakene om prisarealet har veggnavnet fra modellen, som kan være langt, så lenkene brytes. */
.forklaring .liste-enkel.prisareal-saker a { white-space: normal; overflow-wrap: anywhere; }
/* Navnene i linjelisten, postene og grunnlaget for leveransegrensen er lenker, og brytes uten ett ord alene. */
.linjerad b, .poster td, .kjede li { text-wrap: pretty; }
/* Postnavnet har plass til to-tre ord på linjen når postene står som tabell. */
.linjedetalj > .tabellramme .poster td:first-child { min-width: 12.5rem; }
.sumband dl { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.sumband dt { font-size: 12.5px; color: var(--dempet); }
.sumband dd { margin: 0; font-weight: 700; font-size: 16px; }
.sumband .varsel { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sumband .varsel .chip { white-space: nowrap; }
/* Setningen om kalkyledataene står på egen linje under tallene, med merkene til høyre. */
.sumband .kalkyledata { flex: 1 1 60%; }

.linjeliste { overflow: auto; background: var(--flate-2); border-right: 1px solid var(--linje); padding: 10px 8px 24px; }
.linjeliste h2 { font-size: 12.5px; font-weight: 600; color: var(--dempet); padding: 6px 8px 8px; }
.linjeliste h2 .hva-belop { display: block; margin-top: 4px; font-weight: 500; }
.linjerad { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 10px; border-radius: 8px; color: var(--blekk); text-decoration: none; }
.linjerad:hover { background: var(--flate-3); }
.linjerad.valgt { background: var(--flate); box-shadow: 0 0 0 1px var(--linje-sterk); }
.linjerad b { font-weight: 700; }
.linjerad .sum { text-align: right; font-weight: 600; }
.linjerad small { color: var(--svak); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.linjerad small.hoyre { justify-content: flex-end; }
.linjerad small:not(.hoyre) { display: block; }
.linjerad small:not(.hoyre) .chip { vertical-align: middle; }
/* B1b: merknaden om at et lag ikke er avklart går over hele raden, under driveren og beløpet. */
.linjerad small.helt { grid-column: 1 / -1; }
/* De øvrige kostnadslagene under mengdelinjene: egen overskrift med luft over, og beløpet på én linje. */
.linjeliste .linjerad + h2 { margin-top: 14px; }
.linjeliste .lagrad .sum { white-space: nowrap; }

/* Radene er like høye som innholdet. Uten det krympet de rutenettradene som har overflow: hidden (tabellen) under
   innholdet i en kolonne med fast høyde, og detaljene under la seg oppå tabellradene. */
.linjedetalj { overflow: auto; padding: 22px 28px 48px; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: 22px; align-content: start; }
.linjehode { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: flex-end; }
.linjehode > * { min-width: 0; }
.linjehode h1 { overflow-wrap: anywhere; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.linjehode p { color: var(--dempet); }
.kobling-skjema { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Listen tar plassen som er igjen, ikke bredden til det lengste veggnavnet, så knappene står på samme linje når det
   er plass, og brytes under på smal skjerm. */
.kobling-skjema select { flex: 1 1 0; min-width: 12rem; padding: 7px 10px; border: 1px solid var(--linje-sterk); border-radius: 8px; background: var(--flate); max-width: 100%; }
/* Den samlede koblingssaken for en mengdeliste: én rad per kode med nedtrekksliste, og summen per elementvegg. */
.mengdeliste-skjema { display: grid; gap: 12px; }
table.mengdeliste { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; }
table.mengdeliste caption { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--dempet); padding: 0 0 6px; }
table.mengdeliste th, table.mengdeliste td { padding: 8px 10px; border-bottom: 1px solid var(--linje); text-align: left; vertical-align: middle; }
table.mengdeliste .ikke-brekk { white-space: nowrap; }
.oppbygningsramme { container: oppbygning / inline-size; }
/* Smal ramme (container query, L21, grensen hevet i runde 11): radene om oppbygningen står som kort, én celle under den andre, med navnet på kolonnen foran det som
   prises og statusen, så kildene får hele bredden og ingenting brekker midt i et ord (L6, L10, L12). */
@container oppbygning (max-width: 879.98px) {
  table.oppbygningsrader, table.oppbygningsrader tbody, table.oppbygningsrader tr, table.oppbygningsrader td { display: block; }
  table.oppbygningsrader thead { display: none; }
  table.oppbygningsrader td { border-bottom: 0; padding: 4px 12px; overflow-wrap: break-word; }
  table.oppbygningsrader td.ikke-brekk { white-space: normal; }
  table.oppbygningsrader tr { padding: 6px 0; border-bottom: 1px solid var(--linje); }
  table.oppbygningsrader tbody tr:last-child { border-bottom: 0; }
  table.oppbygningsrader td:first-child { font-weight: 600; padding-top: 8px; }
  table.oppbygningsrader td[data-navn]::before { content: attr(data-navn) ": "; color: var(--dempet); font-size: 12.5px; }
}
table.mengdeliste thead th { font-size: 12.5px; color: var(--dempet); font-weight: 600; background: var(--flate-2); }
table.mengdeliste tbody tr:last-child > * { border-bottom: none; }
table.mengdeliste .tall { width: 1%; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.mengdeliste tr.aktiv > td { background: var(--handling-lys); }
table.mengdeliste td a { font-weight: 600; }
table.mengdeliste select { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--linje-sterk); border-radius: 8px; background: var(--flate); color: var(--blekk); }
table.mengdeliste .foreldet-merknad { display: block; color: var(--mangler); }
table.mengdeliste .linjer { display: block; color: var(--dempet); }
table.mengdeliste .linjer a { font-weight: 400; }
table.mengdeliste.summer tbody th { font-weight: 600; }
/* Den samlede rollesaken (beslutning 61): rollen får plass til teksten, og grunnen står dempet. */
table.mengdeliste.roller td:last-child { width: 1%; }
table.mengdeliste.roller select { width: auto; min-width: 9.5em; }
table.mengdeliste.roller .grunn { display: block; margin-top: 2px; }
table.mengdeliste.roller .grunn a { font-weight: 400; }
/* PX2: i en smal sak står radene i noen tabeller som blokker, med navnet på kolonnen foran svaret, fordi tabellene var
   bredere enn saken i 390 px (omfanget med «bjelkelagselementer», rollene og kontrollene uten data). */
@container sak (max-width: 419.98px) {
  table.mengdeliste.omfang thead { display: none; }
  table.mengdeliste.omfang tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 4px 0; border-bottom: 1px solid var(--linje); }
  table.mengdeliste.omfang tbody tr:last-child { border-bottom: none; }
  table.mengdeliste.omfang tbody > tr > * { border-bottom: none; padding: 3px 10px; }
  table.mengdeliste.omfang [data-navn]::before { content: attr(data-navn) ": "; color: var(--dempet); font-size: 12.5px; }
  /* Kontrollene uten data i sakene om dokumentasjon: kontrollen over, og kravet, hvorfor og veggene under. */
  table.avvik.helord thead { display: none; }
  table.avvik.helord tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 4px 0; border-bottom: 1px solid var(--linje); }
  table.avvik.helord tbody tr:last-child { border-bottom: none; }
  table.avvik.helord tbody > tr > * { border-bottom: none; padding: 3px 10px; }
  table.avvik.helord [data-navn]::before { content: attr(data-navn) ": "; color: var(--dempet); font-size: 12.5px; }
  /* Rollesaken: veggen over hele bredden, og arealet og rollen på linjen under. */
  table.mengdeliste.roller thead { display: none; }
  table.mengdeliste.roller tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--linje); }
  table.mengdeliste.roller tbody tr:last-child { border-bottom: none; }
  table.mengdeliste.roller tbody > tr > *, table.mengdeliste.roller td:last-child { border-bottom: none; width: auto; }
  table.mengdeliste.roller td:first-child { grid-column: 1 / -1; padding-bottom: 2px; }
  table.mengdeliste.roller td.tall { text-align: left; }
  table.mengdeliste.roller tr.aktiv { background: var(--handling-lys); }
  table.mengdeliste.roller [data-navn]::before { content: attr(data-navn) ": "; color: var(--dempet); font-size: 12.5px; }
}
/* Saken om omfanget (P3b): én avkrysning per leveransetype. */
.omfang-skjema fieldset { border: none; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.omfang-skjema legend { margin-bottom: 6px; }
/* PX2: to kolonner når leveransetypene får plass, ellers én, så «bjelkelagselementer» ikke stikker ut av skjemaet. */
.omfang-skjema fieldset.rad { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.felt-avkrysning { display: inline-flex; align-items: center; gap: 6px; }
/* Avvikene i saken om samsvar mellom krav og løsning, med sitatet under kravet. */
table.avvik { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; }
table.avvik th, table.avvik td { padding: 8px 10px; border-bottom: 1px solid var(--linje); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
table.avvik th { hyphens: auto; }
/* En celle med vanlig tekst i stedet for filnavn: `anywhere` lar kolonnen bli smalere enn det lengste ordet, så
   «Forespørselen» ble delt midt i ordet uten bindestrek på smal skjerm. `break-word` holder kolonnen minst så bred
   som det lengste ordet, og bryter likevel et ord som ellers ville gått ut av cellen. */
table.avvik th.helord, table.avvik td.helord, .helord { overflow-wrap: break-word; }
/* PX2: tabellen over kontrollene uten data i sakene om dokumentasjon har bare vanlige ord, og med `anywhere` ble de
   tre første kolonnene så smale at ordene ble delt også i 1440 px. */
table.avvik.helord th, table.avvik.helord td { overflow-wrap: break-word; hyphens: manual; }
/* PX2: dokumentnavnene på dokumentsiden er vanlige ord, og filnavnene har mulige brudd ved «_» (`myke_brudd`). */
table.dokumentblokker th { overflow-wrap: break-word; hyphens: manual; }
table.endringer { table-layout: fixed; }
table.endringer tr.kilde td { padding-top: 0; }
table.prisendring td, table.prisendring thead th { text-align: right; }
.endringsgruppe { margin-top: 22px; }
.endringsgruppe .gruppehode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.endringsgruppe .gruppehode h2 { font-size: 16px; }
.to-lister { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 16px; margin-top: 10px; }
.to-lister h3 { margin-bottom: 4px; }
table.endringer tr.hva th { border-bottom: none; padding-bottom: 0; }
table.endringer tbody + tbody tr.hva th { border-top: 1px solid var(--linje); }
table.avvik thead th { font-size: 12.5px; color: var(--dempet); font-weight: 600; background: var(--flate-2); }
table.avvik tbody tr:last-child > * { border-bottom: none; }
table.avvik q { display: block; color: var(--dempet); font-size: 12.5px; margin-top: 4px; }
table.avvik td small { display: block; margin-top: 4px; }
/* Konfliktsaken (beslutning 51): dokumentene og konsekvensen per verdi. */
table.konflikttabell { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; margin: 12px 0; }
table.konflikttabell caption { text-align: left; padding: 0 0 6px; }
table.konflikttabell th, table.konflikttabell td { padding: 8px 10px; border-bottom: 1px solid var(--linje); text-align: left; vertical-align: top; }
table.konflikttabell thead th { font-size: 12.5px; color: var(--dempet); font-weight: 600; background: var(--flate-2); }
table.konflikttabell tbody tr:last-child > * { border-bottom: none; }
table.konflikttabell .tall { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.konflikttabell td small { display: block; }
table.konflikttabell tr.veggrad th { font-weight: 600; background: var(--flate-2); }
table.konflikttabell tbody td:first-child { white-space: nowrap; }
.konfliktdokumenter { margin: 12px 0; }
.konfliktdokumenter ul { margin: 6px 0 0; padding-left: 18px; }
.konfliktdokumenter li { margin: 2px 0; }
/* Veggen slik den er tegnet, foran elementtypene. */
.alternativ.tegnet { border-style: dashed; }
/* Svarene i saken om energigrunnlaget og sakene om dokumentasjon: likestilte knapper, med feltet for U-kravet åpent. */
.likestilte-svar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
/* Tre knapper uten felt står på én linje i like brede kolonner når de får plass, ellers under hverandre, så ingen
   blir stående alene på en ny linje. */
.likestilte-svar.like-brede > form { flex: 1 1 calc((640px - 100%) * 999); }
.likestilte-svar.like-brede .knapp { width: 100%; }
/* PX2: feltet og knappen står på hver sin linje når de ikke får plass ved siden av hverandre. */
.energisvar-u { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; min-width: 0; }
.energisvar-u .felt { min-width: 0; }
.overstyring { display: grid; gap: 10px; margin-top: 14px; }
/* Hver ledetekst står over sitt felt, og begrunnelsen får hele bredden. */
.overstyring form { display: grid; gap: 10px; justify-items: start; }
.overstyring .felt { width: 100%; min-width: 0; }
.overstyring .felt input[name="ny_verdi"] { max-width: 12em; }
.felt-hode { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.felt-hode small { font-size: 12px; color: var(--svak); }
/* En beskjed kan ha en lang filsti uten brytepunkter, som aldri skal gjøre siden bredere enn skjermen. */
/* Ankeret etter et skjema med en feil (`web.FEILANKER`): meldingen står under toppen, også uten skriptet i base.html. */
#feilmelding { scroll-margin-top: calc(var(--topp-h) + 12px); }
.feilmelding { margin: 0; padding: 10px 14px; border-radius: var(--radius); background: var(--mangler-bg); color: var(--mangler); font-weight: 500; overflow-wrap: anywhere; }
.alternativer { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.alternativ { border: 1px solid var(--linje); border-radius: var(--radius); background: var(--flate); padding: 10px 12px; display: grid; gap: 6px; }
.alternativ.valgt { border-color: var(--validert); box-shadow: 0 0 0 3px var(--validert-bg); }
.alternativ.ute { background: var(--flate-2); }
.alternativ .navn { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 13.5px; }
.alternativ .pris { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.alternativ .pris small { font-size: 12px; font-weight: 500; color: var(--dempet); }
.alternativ form { margin: 0; }
a.alternativ { color: var(--blekk); text-decoration: none; }
a.alternativ:hover { border-color: var(--handling); }
.alternativ.aktiv { outline: 2px solid var(--handling); outline-offset: 1px; }
.alternativ .merker { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.kontrollrad { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.kontrollinje { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* P4: kontrollsymbolet kan åpnes. Panelet legger seg over innholdet under, så kortet ikke endrer høyde. */
details.kontroll { position: relative; display: inline-block; }
details.kontroll > summary { list-style: none; cursor: pointer; border-radius: 5px; }
details.kontroll > summary::-webkit-details-marker { display: none; }
details.kontroll > summary:hover .glyf, details.kontroll[open] > summary .glyf { box-shadow: 0 0 0 2px var(--linje-sterk); }
.kontroll-panel {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: min(320px, 80vw);
  padding: 10px 12px; border: 1px solid var(--linje-sterk); border-radius: 8px; background: var(--flate);
  font-size: 13px; line-height: 1.45; white-space: normal;
}
.kontroll-panel dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; margin: 6px 0 0; }
.kontroll-panel dt { color: var(--dempet); }
.kontroll-panel dd { margin: 0; overflow-wrap: anywhere; }
.kontroll-panel .chip { margin-right: 4px; }
/* P5.1 (K9): historikken for saken og begrunnelsen for svar med knapper. */
.historikk { font-size: 13px; }
.historikk summary { cursor: pointer; color: var(--dempet); font-weight: 600; }
.historikk ol { margin-top: 6px; padding-left: 20px; color: var(--blekk); }
.historikk li.angret { color: var(--svak); }
.felles-begrunnelse { max-width: 520px; }
.felles-begrunnelse[hidden] { display: none; }
.kjent-avvik { font-size: 12.5px; color: var(--mangler); line-height: 1.45; }
.kjent-avvik .chip { margin-right: 4px; }
.anbefalt-grunnlag { font-size: 12px; color: var(--dempet); }
.svarvirkning { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--linje); border-radius: var(--radius); background: var(--flate-2); font-size: 13.5px; }
.svarvirkning dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.svarvirkning dt { font-weight: 600; }
.svarvirkning dd { margin: 0; }
.svarvirkning ul { margin-top: 4px; font-size: 13px; color: var(--dempet); }
.losninger-hode { display: grid; gap: 4px; }
.losninger-hode h2 { font-size: 16px; font-weight: 700; }
.spar { color: var(--validert); }
.ns3420 { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.ns3420-koder { padding-left: 0; list-style: none; gap: 8px; }
.ns3420-koder li { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
.ns3420-koder li > span:not(.glyf), .ns3420-koder li > small { grid-column: 2; min-width: 0; }
.ns3420-koder li > small { color: var(--dempet); font-size: 12px; line-height: 1.45; }
.ns3420-koder .ns3420-post { font-weight: 600; grid-template-columns: minmax(0, 1fr); }
.ns3420-koder + p { margin: 8px 0 0; font-size: 12px; }
.forklaring .sjikt { margin-top: 4px; }
.modellfakta { margin: 0; font-size: 12px; line-height: 1.45; }

/* En tabell som er bredere enn kolonnen ruller sidelengs i sin egen ramme, ikke hele siden. */
.tabellramme { overflow-x: auto; max-width: 100%; }
.poster { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; }
.poster th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--dempet); padding: 9px 12px; border-bottom: 1px solid var(--linje); background: var(--flate-2); }
.poster td { padding: 0; border-bottom: 1px solid var(--flate-3); }
.poster td > a { display: block; padding: 9px 12px; color: inherit; text-decoration: none; }
.poster tr:hover td { background: var(--flate-2); }
.poster tr.valgt td { background: var(--handling-lys); }
.poster .tall { text-align: right; white-space: nowrap; }
.poster tr.arbeid td:first-child a { color: var(--dempet); }
.poster tfoot td { padding: 10px 12px; font-weight: 700; border-bottom: 0; border-top: 1px solid var(--linje); background: var(--flate-2); }
.poster tfoot tr.tilbud td { font-size: 16px; }
/* R4: lenken til påslaget i bunnen av tabellen ser ut som en lenke, uten polstringen radlenkene har. */
.poster tfoot td > a { display: inline; padding: 0; color: var(--handling); text-decoration: underline; }

.grense { margin-top: 16px; }
.grense summary { cursor: pointer; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.grense .poster td { padding: 9px 12px; vertical-align: top; }
.grense .poster td:first-child { min-width: 8rem; }
.grense .poster td:last-child { min-width: 16rem; }
.grense .poster td > a { display: inline; padding: 0; color: var(--handling); text-decoration: none; }
.grense .poster td > a:hover { text-decoration: underline; }
.grense .poster td > a.glyf { display: inline-grid; }
.grense-tekst { margin: 0 0 6px; font-size: 15px; font-weight: 500; color: var(--blekk); }
/* PX2: når kalkylen for linjen er smalere enn tabellene (768 px og smalere), rullet postene og leveransegrensen sidelengs
   i rammen. Da står hver rad som et kort i et rutenett med tre kolonner, og overskriftene står som forklaring over i
   de samme kolonnene: postnavnet og opphavet, så mengden, enhetsprisen og summen, og for leveransegrensen laget og så
   hvem som prosjekterer, leverer og monterer. */
.linjedetalj { container: linjedetalj / inline-size; }
@container linjedetalj (max-width: 679.98px) {
  .linjedetalj table.poster, .linjedetalj table.poster > thead, .linjedetalj table.poster > tbody, .linjedetalj table.poster > tfoot { display: block; }
  .linjedetalj table.poster tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linje); }
  .linjedetalj table.poster > tbody > tr { border-bottom-color: var(--flate-3); }
  .linjedetalj table.poster tbody tr:last-child { border-bottom-color: var(--linje); }
  .linjedetalj table.poster th, .linjedetalj table.poster td { border: 0; min-width: 0 !important; }
  .linjedetalj > .tabellramme .poster th:first-child, .linjedetalj > .tabellramme .poster td:first-child { grid-column: 1 / 3; }
  .linjedetalj > .tabellramme .poster td:nth-child(2), .linjedetalj > .tabellramme .poster th:nth-child(2) { justify-self: end; text-align: right; }
  .linjedetalj > .tabellramme .poster tbody td:first-child > a { padding-bottom: 0; }
  .linjedetalj > .tabellramme .poster td.tall[colspan] { grid-column: 1 / -1; }
  .linjedetalj > .tabellramme .poster thead th.tall { padding-top: 0; white-space: normal; }
  .linjedetalj table.poster thead tr, .linjedetalj table.poster tfoot tr { background: var(--flate-2); }
  .linjedetalj > .tabellramme .poster tfoot tr { grid-template-columns: minmax(0, 1fr) auto; }
  .linjedetalj > .tabellramme .poster tfoot td:first-child { grid-column: auto; }
  .linjedetalj > .tabellramme .poster tfoot tr:last-child { border-bottom: 0; }
  .grense .poster td:first-child, .grense .poster td:last-child, .grense .poster th:first-child, .grense .poster th:last-child { grid-column: 1 / -1; }
  .grense .poster thead th:first-child, .grense .poster thead th:last-child { display: none; }
  .grense .poster tbody td:not(:first-child) { padding-top: 0; }
  /* Tegl runde 3: en lang rute («Muring ikke inkludert, ansvar uavklart») brytes i sin kolonne i stedet for å bli kuttet. */
  .grense .poster .ansvar { white-space: normal; border-radius: 10px; }
}
/* Tegl runde 14: svarene på saken om teglen, med prisen svaret gir ved hver knapp. */
.teglsvar { display: grid; gap: 10px; margin: 12px 0; }
.teglsvar .teglvalg { margin: 4px 0; }
.teglsvar .teglvalg form { display: inline; }
/* Hvem som gjør hva i hver rute: «Vi» er med i prisen, «Andre» er ikke, og det uavklarte må besvares. */
.ansvar { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ansvar-vi { background: var(--validert-bg); color: var(--validert); }
.ansvar-andre { background: var(--flate-3); color: var(--dempet); }
.ansvar-uavklart { background: var(--antakelse-bg); color: var(--antakelse); }
.ansvar-opsjon { background: var(--pris-bg); color: var(--pris); }

.forklaring { overflow: auto; background: var(--flate-2); border-left: 1px solid var(--linje); padding: 20px 20px 48px; display: grid; gap: 14px; align-content: start; }
.forklaring h2 { font-size: 16px; font-weight: 700; }
.forklaring .sum-linje { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.forklaring .sum-linje .belopsart, .sumband .stor .belopsart { vertical-align: 0.4em; }
.forklaring .med-paslag-linje { margin-top: 4px; font-size: 15px; font-weight: 700; }
.kjede { list-style: none; margin: 0; padding: 0; display: grid; }
.kjede li { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 3px 12px; padding: 0 0 16px; }
.kjede li::before { content: ""; position: absolute; left: 9.5px; top: 22px; bottom: 2px; width: 1px; background: var(--linje-sterk); }
.kjede li:last-child::before { display: none; }
.kjede p { font-size: 14px; font-weight: 500; }
.kjede small { grid-column: 2; font-size: 12.5px; color: var(--dempet); }
.kjede q { grid-column: 2; quotes: "«" "»"; font-size: 13px; padding: 6px 10px; background: var(--flate); border-left: 2px solid var(--kilde); border-radius: 0 6px 6px 0; }
.kjede a.gaa { grid-column: 2; font-size: 12.5px; }
.liste-enkel { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--dempet); }
.forklaring details summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.forklaring details[open] summary { margin-bottom: 8px; }

/* ---------- oversikt og hele kravlisten */
/* Et ord som ikke får plass på en linje alene (et filnavn uten mellomrom), brytes i stedet for å gjøre siden bredere. */
.innhold { max-width: 1280px; margin: 0 auto; padding: 28px 32px 80px; overflow-wrap: break-word; }
.innhold h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 4px; }
.innhold h2 { font-size: 19px; margin: 40px 0 14px; }
.innhold h3 { font-size: 15px; margin: 28px 0 8px; }
.sidehode { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.filter { display: flex; background: var(--flate); border: 1px solid var(--linje); border-radius: 999px; padding: 3px; }
.filter a { padding: 6px 14px; border-radius: 999px; text-decoration: none; color: var(--dempet); font-size: 14px; }
.filter a.aktiv { background: var(--handling); color: var(--flate); }
.sidehode + .feilmelding { margin-top: 18px; }
.tallrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 22px; }
.kort { background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); padding: 14px 16px; }
.tallverdi { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.tallverdi .av { font-size: 16px; color: var(--dempet); font-weight: 500; }
.etikett { font-size: 13px; color: var(--dempet); margin-top: 4px; }
.avklaring { background: var(--flate); border: 1px solid var(--linje); border-left: 4px solid var(--handling); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 12px; }
.avklaring p { margin: 6px 0; }
.avklaring ul { margin: 6px 0; padding-left: 20px; }
.avklaring-type { font-size: 13px; font-weight: 700; color: var(--handling); }
/* P6: spørsmålene til kunden. */
.kopiering { margin-top: 24px; display: grid; gap: 8px; }
.kopiering-hode { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kopiering-hode h2 { margin: 0; }
.sporsmalstekst { width: 100%; padding: 12px 14px; border: 1px solid var(--linje-sterk); border-radius: var(--radius); background: var(--flate); color: var(--blekk); font: 14px/1.5 var(--font); resize: vertical; }
.sporsmalsliste { list-style: none; padding: 0; margin: 0; counter-reset: sporsmal; }
.sporsmalsliste > li { counter-increment: sporsmal; }
.sporsmalsliste > li .avklaring-type::before { content: counter(sporsmal) ". "; }
.sporsmalsliste .chip { margin-left: 6px; vertical-align: middle; }
.sporsmal-apen { border-left-color: var(--antakelse); }
.folgeslutning { border-left-color: var(--antakelse); }
.folgeslutning .avklaring-type { color: var(--antakelse); }
.konflikt { border-left-color: var(--mangler); }
.konflikt .avklaring-type { color: var(--mangler); }
.mangel { border-left-color: var(--svak); }
.temaer { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.temaer a { background: var(--flate); border: 1px solid var(--linje); border-radius: 999px; padding: 4px 12px; text-decoration: none; font-size: 13px; color: var(--blekk); }
.temaer a span { color: var(--dempet); margin-left: 4px; }
table.krav, table.dokumenter { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; }
table.krav th, table.dokumenter th { text-align: left; font-size: 12.5px; color: var(--dempet); font-weight: 600; background: var(--flate-2); padding: 10px 12px; border-bottom: 1px solid var(--linje); }
table.krav td, table.dokumenter td { padding: 12px; border-bottom: 1px solid var(--linje); vertical-align: top; }
table.krav tbody tr:last-child td { border-bottom: none; }
tr:target td { background: var(--handling-lys); }
table.krav td.id { width: 80px; }
table.krav td.verdi { width: 200px; font-weight: 600; font-size: 15px; }
table.krav td:nth-child(4) { width: 230px; }
table.krav td.handling { width: 190px; }
.egenskap { font-weight: 600; }
.bygningsdel { font-size: 13px; color: var(--dempet); }
blockquote.sitat { margin: 6px 0 0; padding: 0 0 0 10px; border: 0; border-left: 2px solid var(--linje-sterk); border-radius: 0; background: none; color: var(--dempet); font-size: 13px; display: block; }
.op { color: var(--dempet); font-weight: 500; }
.endret { color: var(--antakelse); }
.kilde { text-decoration: none; font-size: 13px; word-break: break-word; }
.kilde span { white-space: nowrap; color: var(--dempet); }
.advarsel { color: var(--antakelse); }
.merke-kritisk { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--mangler); background: var(--mangler-bg); border-radius: 4px; padding: 1px 6px; }
.knapper { display: flex; gap: 6px; }
.status { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 4px; padding: 1px 7px; margin-bottom: 6px; }
.status-godta { background: var(--validert-bg); color: var(--validert); }
.status-endre { background: var(--antakelse-bg); color: var(--antakelse); }
.status-avvis { background: var(--flate-3); color: var(--dempet); }
tr.vurdert-avvis td:not(.handling) { opacity: 0.55; }
details.endre { margin-top: 6px; font-size: 13px; }
details.endre summary { cursor: pointer; color: var(--handling); }
details.endre form { display: grid; gap: 6px; margin-top: 6px; }
details.endre label { display: grid; gap: 2px; color: var(--dempet); }
details.endre input { padding: 5px 7px; border: 1px solid var(--linje-sterk); border-radius: 6px; background: var(--flate); }
table.dokumenter { table-layout: fixed; }
.dokumenter th:nth-child(2), .dokumenter td:nth-child(2) { width: 70px; }
/* Filnavnet kan være langt og uten mellomrom («melding.msg/image001.png»), også når det ikke er en lenke. */
.dokumenter td:first-child { overflow-wrap: anywhere; }
.prosjektliste { list-style: none; padding: 0; display: grid; gap: 10px; }
.prosjektliste li { background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); padding: 14px 18px; display: flex; justify-content: space-between; gap: 16px; }
.prosjektliste a { font-weight: 600; text-decoration: none; }
details > summary h2 { display: inline; }

/* ---------- leverandørene (delplan J): listen, fanene og skjemaene med kalkyledataene */
/* Leverandørene står til høyre i toppen, utenfor stien til prosjektet, og ser ut som fanene. */
.topp-lenke { margin-left: auto; padding: 6px 12px; border-radius: 7px; color: var(--dempet); text-decoration: none; font-weight: 500; white-space: nowrap; }
/* Bare den første lenken skyves ut til høyre, så de som kommer etter (Tilgang, T1), står ved siden av den. */
.topp-lenke + .topp-lenke { margin-left: 0; }
.topp-lenke:hover { background: var(--flate-2); color: var(--blekk); }
.topp-lenke.aktiv { background: var(--flate-3); color: var(--blekk); }
/* Tilgang per prosjekt (T1): velgeren står på linje med knappene i listen. */
.tilgangsvalg { min-width: 0; max-width: 100%; padding: 5px 10px; border: 1px solid var(--linje-sterk); border-radius: 8px; background: var(--flate); color: var(--blekk); font-size: 13px; }
.innhold .ingress { margin-top: 6px; max-width: 72ch; }
.lufttopp { margin-top: 18px; }
.brodsmule { font-size: 13px; margin-bottom: 4px; }
.merker { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; }
/* hf-bekreftelse: kvitteringen etter et svar i arbeidsbenken, med prisen før og etter. «Angre svaret» er en dempet knapp. */
.kvittering { margin: 0 0 14px; padding: 12px 16px; border-radius: var(--radius); background: var(--validert-bg); color: var(--blekk); border-left: 4px solid var(--validert); display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.kvittering.angret { background: var(--flate-3); border-left-color: var(--dempet); }
.kvittering p, .kvittering ul { margin: 0; }
.kvittering-tittel strong { color: var(--validert); }
.kvittering.angret .kvittering-tittel strong { color: var(--blekk); }
.kvittering-poster li, .kvittering-svar li { margin: 2px 0; }
.kvittering-handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; }
.angre-skjema { display: inline; }
.knapp.sekundar { background: transparent; color: var(--dempet); border-style: dashed; }
.knapp.sekundar:hover { color: var(--blekk); }
.okmelding { margin: 0; padding: 10px 14px; border-radius: var(--radius); background: var(--validert-bg); color: var(--validert); font-weight: 500; }
/* En nøytral opplysning, for eksempel at ingenting ble lagret fordi ingenting var endret: fargene til `.chip`. */
.infomelding { margin: 0; padding: 10px 14px; border-radius: var(--radius); background: var(--flate-3); color: var(--dempet); font-weight: 500; }
.advarselmelding { margin: 0; padding: 10px 14px; border-radius: var(--radius); background: var(--antakelse-bg); color: var(--antakelse); font-weight: 500; }
.feilmelding ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.teller.antakelse { background: var(--antakelse-bg); color: var(--antakelse); }
.leverandorliste { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.leverandorliste li { background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); padding: 14px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; min-width: 0; }
.leverandorliste .navnlinje { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; }
.leverandorliste a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.leverandorliste .feltfeil { flex-basis: 100%; }
.nyskjema { display: grid; gap: 14px; max-width: 32em; }
.leverandorfaner { display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--linje); }
.leverandorfaner a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 7px; color: var(--dempet); text-decoration: none; font-weight: 500; }
.leverandorfaner a:hover { background: var(--flate); color: var(--blekk); }
.leverandorfaner a.aktiv { background: var(--flate); color: var(--blekk); box-shadow: 0 0 0 1px var(--linje-sterk); }
.leverandorside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.leverandorside h2 { margin: 12px 0 8px; }
.leverandorskjema { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
/* Leverandørsperren: for den som ikke kan endre leverandøren, står tallene i feltene som tekst på en grå flate, og
   feltene kan ikke endres. Teksten har full kontrast, ikke den bleke fargen nettleseren gir et felt som er av. */
.bare-lesing { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.leverandorskjema.bare-lesing :is(input, select):disabled { background: var(--flate-2); border-color: var(--linje); color: var(--blekk); -webkit-text-fill-color: var(--blekk); opacity: 1; cursor: default; }
/* Én kolonne på smal skjerm, to fra 900 px. Navn og kilde får hele bredden. Hvert felt har fem rader i rutenettet
   (ledetekst, hjelpetekst, feltet, feilen og luften under), delt med feltet ved siden av (subgrid), så feltene i
   samme rad står på linje også når bare det ene har en hjelpetekst. */
.feltliste { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; margin-bottom: -18px; }
@media (min-width: 900px) { .feltliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feltliste > .skjemafelt { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
.feltliste > .skjemafelt > .felt-hode, .feltliste > .skjemafelt > .avkrysning-linje { grid-row: 1; }
.feltliste > .skjemafelt > .felthjelp { grid-row: 2; margin-top: 4px; }
.feltliste > .skjemafelt > .feltinndata { grid-row: 3; margin-top: 4px; }
/* En nedtrekksliste står på samme rad som feltene ved siden av, også uten hjelpetekst. */
.feltliste > .skjemafelt > select { grid-row: 3; margin-top: 4px; }
.feltliste > .skjemafelt > .feltfeil { grid-row: 4; margin-top: 4px; }
.feltliste > .skjemafelt::after { content: ""; grid-row: 5; height: 18px; }
/* Normene og de øvrige kostnadene i grupper, med en liten overskrift. */
.feltgruppe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
/* float gjør overskriften til et vanlig element i rutenettet, så den står under skillelinjen og ikke oppå den. */
.feltgruppe legend { float: left; width: 100%; padding: 0; font-size: 15px; font-weight: 700; color: var(--blekk); }
.feltgruppe legend + .felthjelp { margin-top: -8px; }
.feltgruppe + .feltgruppe { padding-top: 20px; border-top: 1px solid var(--linje); }
.skjemafelt { display: grid; gap: 4px; align-content: start; min-width: 0; font-size: 13px; color: var(--dempet); }
.skjemafelt.bred { grid-column: 1 / -1; }
.skjemafelt label { color: var(--blekk); font-size: 14px; font-weight: 500; }
.felthjelp { font-size: 12.5px; color: var(--dempet); }
.feltinndata { display: flex; align-items: center; gap: 8px; min-width: 0; }
.skjemafelt input:not([type="checkbox"]), .varetabell input { width: 14em; max-width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--linje-sterk); border-radius: 8px; background: var(--flate); color: var(--blekk); font-size: 14px; }
.skjemafelt.bred input:not([type="checkbox"]), .nyskjema .skjemafelt input:not([type="file"]) { width: 100%; }
.skjemafelt input[type="file"] { width: 100%; padding: 6px; }
.skjemafelt input[aria-invalid="true"], .varetabell input[aria-invalid="true"] { border-color: var(--mangler); box-shadow: 0 0 0 1px var(--mangler); }
/* B4: kostnadstypene en kilde bekrefter påslag på, på fanen med de kommersielle reglene. */
.kildetyper .typevalg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px; }
.kildetyper .felt-avkrysning { color: var(--blekk); font-size: 14px; }
.kildetyper input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--handling); }
.avkrysning-linje { display: inline-flex; align-items: center; gap: 8px; }
.avkrysning-linje input { width: 18px; height: 18px; margin: 0; accent-color: var(--handling); }
.enhet { flex: none; color: var(--dempet); font-size: 13px; }
.feltfeil { margin: 0; color: var(--mangler); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.varetabell { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; font-size: 14px; }
.varetabell th, .varetabell td { padding: 8px 10px; border-bottom: 1px solid var(--linje); text-align: left; vertical-align: top; }
.varetabell thead th { font-size: 12.5px; color: var(--dempet); font-weight: 600; background: var(--flate-2); }
.varetabell tbody tr:last-child > * { border-bottom: none; }
.varetabell tbody th { font-weight: 400; padding-top: 14px; }
.varetabell .mobil-enhet { display: none; }
.varetabell tbody th .chip { margin-top: 4px; }
.varetabell .varenavn input { width: 100%; }
.varetabell .varepris input { width: 8em; }
.varetabell .vareenhet { color: var(--dempet); padding-top: 16px; white-space: nowrap; }
/* Løsningsbiblioteket på leverandørsiden (delplan N): bare visning, med kort per veggtype og tabeller per del. */
.bibliotekinnledning { margin: 0 0 18px; max-width: 72ch; }
.bibliotekkort { display: grid; gap: 16px; }
.veggtypekort { display: grid; gap: 12px; min-width: 0; }
.veggtypekort > * { margin: 0; }
.veggtypekort h2, .bibliotekdel h2 { font-size: 17px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.veggtypekort h3 { font-size: 14px; margin: 4px 0 0; }
.faktaliste { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13.5px; }
.faktaliste dt { color: var(--dempet); font-size: 12.5px; }
.faktaliste dd { margin: 0; }
.bibliotekdel { margin: 0 0 26px; }
.bibliotekdel > p { max-width: 72ch; }
.bibliotektabell tbody th { padding-top: 8px; }
.bibliotektabell td.tall, .bibliotektabell th.tall { white-space: nowrap; }
.bibliotektabell .felthjelp, .ytelsestabell .felthjelp { display: block; margin-top: 2px; }
.ytelsestabell th[scope="row"] { width: 9em; }
.ytelsestabell td.tall { width: 11em; }
.vilkarliste { color: var(--blekk); }
.vilkarliste .felthjelp { display: block; }
.merknadsliste { color: var(--blekk); }
/* Forbruk og svinn: én rad per komponent. «Forbruk» og «Svinn» foran feltene bare på smal skjerm. */
.normtabell .feltinndata { flex-wrap: wrap; gap: 4px 8px; }
.normtabell .forbruk input { width: 7em; }
.normtabell .svinn input { width: 6em; }
.normtabell .forbruk .felthjelp { display: block; padding-top: 9px; }
.normtabell .mobil-etikett { display: none; }
.regeltabell .mobil-etikett { display: none; }
.leverandorskjema select { min-width: 0; max-width: 100%; width: auto; padding: 8px 10px; border: 1px solid var(--linje-sterk); border-radius: 8px; background: var(--flate); color: var(--blekk); font-size: 14px; }
.leverandorskjema select[aria-invalid="true"] { border-color: var(--mangler); box-shadow: 0 0 0 1px var(--mangler); }
/* Delplan S: skjemaene for prosjektets påslag og priser i sidefeltet på kalkylesiden. */
.paslagsskjema { display: grid; gap: 6px; margin-top: 10px; }
.paslagsskjema label { font-size: 13px; color: var(--dempet); }
.paslagsskjema select, .paslagsskjema input { width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--linje-sterk); border-radius: 8px; background: var(--flate); color: var(--blekk); font-size: 14px; }
.paslagsskjema .feltinndata input { width: auto; flex: 1 1 0; }
.paslagsskjema button { justify-self: start; margin-top: 4px; }
.paslagsskjema .avkrysning-linje { color: var(--blekk); }
.paslagsskjema .avkrysning-linje input { width: 18px; padding: 0; flex: none; }
.innebygd-skjema { display: inline; }
.innebygd-skjema button { margin-left: 6px; }
.regeltabell td input:not([inputmode]) { width: 100%; }
.regeltabell caption.venstre { text-align: left; padding: 8px 10px; font-size: 12.5px; color: var(--dempet); font-weight: 600; }
.normtabell .feltfeil { margin-top: 4px; }
.excel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; }
.excel > * { max-width: 100%; }
.excel .feilmelding { justify-self: stretch; }
.excelskjema { display: grid; gap: 12px; width: 32em; }
.versjonsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.versjonsliste .versjonshode { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-bottom: 6px; }
.versjonsliste .liste-enkel { color: var(--blekk); overflow-wrap: anywhere; }
.versjonsliste details.flere { margin-top: 6px; font-size: 13.5px; }
.versjonsliste details.flere summary { cursor: pointer; color: var(--handling); }
.versjonsliste details.flere[open] summary { margin-bottom: 6px; }

/* ---------- prosjektets prisgrunnlag (delplan J) */
a.chip { text-decoration: none; }
a.chip:hover { text-decoration: underline; }
/* Merket for kalkyledataene har leverandørens navn, som kan være langt. Det brytes i stedet for å gjøre sumbåndet bredere enn skjermen. */
.sumband a.chip { white-space: normal; overflow-wrap: anywhere; }
.prisgrunnlag { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 72ch; margin-top: 20px; overflow-wrap: anywhere; }
.bryt { overflow-wrap: anywhere; }
.prisgrunnlag .kort { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.prisgrunnlag .kort > * { max-width: 100%; margin: 0; }
.prisgrunnlag .kort h2 { margin: 0; }
.prisgrunnlag section > h2 { margin: 12px 0 8px; }
.prisvalg .feltinndata { flex-wrap: wrap; }
.prisvalg select { min-width: 0; max-width: 100%; padding: 8px 10px; border: 1px solid var(--linje-sterk); border-radius: 8px; background: var(--flate); color: var(--blekk); font-size: 14px; }
.prisgrunnlag .nyere { display: grid; gap: 8px; justify-items: start; padding-top: 12px; border-top: 1px solid var(--linje); width: 100%; }
.prisgrunnlag .nyere .liste-enkel { color: var(--blekk); overflow-wrap: anywhere; }
.prisgrunnlag details.flere summary { cursor: pointer; color: var(--handling); font-size: 13.5px; }
.prislogg { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.prislogg li { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.prislogg time { color: var(--dempet); }

/* ---------- opplastingen og analysene på serveren (delplan M) */
.prosjektliste li { flex-wrap: wrap; align-items: center; gap: 6px 16px; }
/* Øvingskopiene står gruppert per person under prosjektene. */
.ovelsesgruppe { margin-top: 26px; }
.ovelsesgruppe h2 { font-size: 16px; margin: 0 0 8px; }
.prosjektnavn-linje { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; min-width: 0; }
.prosjektnavn-linje a { overflow-wrap: anywhere; }
a.statuslenke { text-decoration: none; }
a.statuslenke:hover .chip { text-decoration: underline; }
.nyside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 40em; margin-top: 20px; }
.nyskjema.opplasting { max-width: none; gap: 22px; }
.opplasting .feltgruppe { gap: 10px; }
.opplasting .feltgruppe legend { margin-bottom: 4px; }
.opplasting .valgfri { font-size: 14px; font-weight: 400; }
.opplasting select { width: 100%; max-width: 24em; padding: 8px 10px; border: 1px solid var(--linje-sterk); border-radius: 8px; background: var(--flate); color: var(--blekk); font-size: 14px; }
.opplasting select[aria-invalid="true"] { border-color: var(--mangler); box-shadow: 0 0 0 1px var(--mangler); }
.opplasting .handlinger { margin-top: 4px; }
.knapp:disabled { opacity: 0.55; cursor: not-allowed; }
.knapp:disabled:hover { border-color: var(--linje-sterk); }
.knapp.primar:disabled:hover { background: var(--handling); border-color: var(--handling); }
.analysehode { align-items: flex-start; max-width: 72em; margin-top: 2px; }
.analysehode > div { display: grid; gap: 6px; min-width: 0; }
.analysehode form { margin: 0; }
.analysestatus { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 72em; margin-top: 20px; }
.analysestatus > .ingress { margin: 0; }
.analysestatus .tallrad { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.analysestatus .tallverdi { font-size: 22px; overflow-wrap: anywhere; }
.analysefakta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
.analysefakta dt { color: var(--dempet); }
.analysefakta dd { margin: 0; overflow-wrap: anywhere; }
.analysestatus section > h2 { margin: 12px 0 8px; }
.logglinjer { margin: 0; padding: 12px 14px; max-height: 30em; overflow: auto; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); font: 12.5px/1.6 var(--mono); color: var(--blekk); white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1320px) {
  .topp-merknad { display: none; }
  /* Midtfeltet i arbeidsbenken er smalt her, så nedtrekkslisten får plassen til brutto. */
  table.mengdeliste .brutto { display: none; }
}
@media (max-width: 1180px) {
  .benk { grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr); }
  .sak { padding-inline: 20px; }
  .hurtigtaster { margin-inline: -20px; padding-inline: 20px; }
  .kalkyle { grid-template-columns: 240px 1fr; height: auto; }
  .forklaring { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--linje); }
}
/* PX2: med tre spalter ble saken bare 264 px bred i 768 px, og skjemaene og tabellene i saken stakk ut av den.
   Køen står derfor over saken og kilden, som deler bredden. */
@media (min-width: 761px) and (max-width: 1023.98px) {
  .benk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ko { grid-column: 1 / -1; max-height: 30vh; border-right: 0; border-bottom: 1px solid var(--linje); }
}
/* Toppen under 1024 px: navnet på brukeren står ikke, linjen med undersidene rulles sidelengs med den valgte siden
   synlig (skriptet i base.html), og ingen side forsvinner. */
@media (max-width: 1023.98px) {
  .bruker-navn, .topp-merknad { display: none; }
  .faner { gap: 20px; }
  .vt-status .vt-kd { display: none; }
}
/* Telefon: prosjektet får sin egen linje under merket og lenkene, så navnet ikke kuttes til noen få bokstaver. */
@media (max-width: 760px) {
  body.har-under { --topp-h: calc(var(--h-topp) + 28px + var(--h-under) + 2px); }
  .vt { flex-wrap: wrap; height: auto; min-height: var(--h-topp); padding: 0 12px; gap: 0 10px; }
  .vt > * { height: var(--h-topp); }
  .vt > .prosjektnavn { order: 1; flex-basis: 100%; height: auto; min-height: 28px; padding: 0 0 6px; line-height: 20px; }
  .topp-lenke { padding: 0 6px; }
  .faner { padding: 0 12px; }
  .vt-status { gap: 12px; padding: 0 12px; }
  .vt-status .vt-mer { display: none; }
}
/* Kravtabellen har faste bredder på id, verdi, kilde og vurdering (700 px), så under 960 px står hvert krav som én
   blokk i stedet for at tabellen ruller sidelengs. */
@media (max-width: 960px) {
  table.krav thead { display: none; }
  table.krav tr { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--linje); }
  table.krav td { border-bottom: none; width: auto !important; }
}
@media (max-width: 760px) {
  .benk, .kalkyle { grid-template-columns: 1fr; height: auto; }
  .ko { max-height: 45vh; }
  .kildefelt { border-left: 0; border-top: 1px solid var(--linje); }
  .innhold { padding: 20px 16px 60px; }
  .sak, .linjedetalj { padding: 20px 16px 80px; }
  .hurtigtaster { margin-inline: -16px; padding-inline: 16px; }
  /* Varene: én blokk per vare, med kode og enhet over feltene for navn og pris. */
  .varetabell thead { display: none; }
  .varetabell tr { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 6px; border-bottom: 1px solid var(--linje); }
  .varetabell tbody tr:last-child { border-bottom: none; }
  .varetabell th, .varetabell td { border-bottom: none; }
  .varetabell tbody th { grid-column: 1; padding-bottom: 2px; }
  .varetabell tbody th { padding-top: 10px; }
  .varetabell .vareenhet { display: none; }
  .varetabell .mobil-enhet { display: inline; }
  .varetabell .varenavn, .varetabell .varepris { grid-column: 1 / -1; padding-top: 4px; }
  .normtabell td { padding-top: 4px; }
  .normtabell .forbruk .felthjelp { padding-top: 0; }
  /* Smale felt, så «Fra Syntetisk» får plass på samme linje som feltet på 375 px. */
  .regeltabell .mobil-etikett { display: block; font-size: 13px; color: var(--dempet); margin-bottom: 2px; }
  .normtabell .mobil-etikett { display: inline; flex: none; width: 4.6em; font-size: 13px; color: var(--dempet); }
  .normtabell .forbruk input, .normtabell .svinn input { width: 4.5em; }
  .normtabell .feltfeil { padding-left: calc(4.6 * 13px + 8px); }
  /* Tabellene for biblioteket har mange kolonner og rulles sidelengs i rammen i stedet for å bli blokker. */
  .varetabell.bibliotektabell thead { display: table-header-group; }
  .varetabell.bibliotektabell tr { display: table-row; padding-bottom: 0; }
  .varetabell.bibliotektabell th, .varetabell.bibliotektabell td { border-bottom: 1px solid var(--linje); }
  .varetabell.bibliotektabell { min-width: 640px; }
  /* Dokumentlisten under kravene: filnavnet på en egen linje over sidetallet og behandlingen. */
  table.dokumentoversikt thead { display: none; }
  table.dokumentoversikt tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid var(--linje); }
  table.dokumentoversikt tbody tr:last-child { border-bottom: none; }
  table.dokumentoversikt td { border-bottom: none; width: auto !important; padding: 2px 12px; }
  table.dokumentoversikt td:nth-child(2)::before { content: "Sider: "; color: var(--dempet); }
  /* PX2: tabellene på dokumentsiden står som blokker, med navnet på kolonnen foran cellene under dokumentet. Som
     tabell fikk dokumentnavnet så smal kolonne at ordene ble delt nesten én bokstav om gangen. */
  table.dokumentblokker thead { display: none; }
  table.dokumentblokker tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 6px 0; border-bottom: 1px solid var(--linje); }
  table.dokumentblokker tbody tr:last-child { border-bottom: none; }
  table.dokumentblokker tbody > tr > * { border-bottom: none; padding: 3px 12px; }
  table.dokumentblokker [data-navn]::before { content: attr(data-navn) ": "; color: var(--dempet); font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------- innlogging */
.bruker { display: flex; align-items: center; gap: 10px; margin: 0; }
.bruker-navn { font-size: 13.5px; font-weight: 600; color: var(--dempet); white-space: nowrap; }
main.innlogging { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; }
.innlogging-kort { width: 100%; max-width: 380px; background: var(--flate); border: 1px solid var(--linje); border-radius: 14px; padding: 28px 28px 24px; }
.innlogging-merke { margin-bottom: 22px; }
.innlogging-merke .merke { font-size: 20px; }
.innlogging-kort h1 { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 16px; }
.innlogging-ingress { color: var(--dempet); margin: -6px 0 16px; }
.innlogging-skjema { display: grid; gap: 14px; }
.innlogging-skjema .felt small { color: var(--svak); }
.innlogging-skjema .knapp { justify-content: center; padding: 10px 14px; margin-top: 4px; }
.innlogging-feil { margin: 0; padding: 9px 12px; border-radius: 8px; background: var(--mangler-bg); color: var(--mangler); font-size: 13.5px; }
.innlogging-hjelp { margin: 18px 0 0; font-size: 13px; color: var(--svak); }
.innlogging-fot { margin: 18px 0 0; font-size: 12.5px; color: var(--svak); }

/* R6: øyeblikksbildene av tilbudet og meldingen når tilbudet avviker fra det låste. */
.bildeavvik { margin: 10px 0 0; padding: 10px 14px; border-radius: var(--radius); background: var(--antakelse-bg); color: var(--antakelse); display: grid; gap: 6px; overflow-wrap: anywhere; }
.bildeavvik p { margin: 0; }
.tilbudsbilder { margin-top: 10px; display: grid; gap: 8px; font-size: 14px; }
.tilbudsbilder summary { cursor: pointer; font-weight: 600; }
.bildeliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bildeliste li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--linje); border-radius: var(--radius); background: var(--flate); min-width: 0; }
.bildehode { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.bildehode time { color: var(--dempet); }
.bildefiler { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.sumband .bildeavvik, .sumband .tilbudsbilder, .sumband .bildebekreftelse { flex: 1 1 100%; }
/* Lukket står listen over låste og sendte tilbud på samme linje som knappene eller merkene, og åpen får den hele
   bredden (demofeil 19). */
.sumband .tilbudsbilder:not([open]) { flex: 0 1 auto; }
.tilbudsbilder .bildeliste { margin: 8px 0; }
.tilbudsbilder .handlinger { margin-top: 8px; }
.bildeendringer { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.bildetekst { display: block; overflow-wrap: anywhere; }

/* S7: kilden og statusen per sjikt på kalkylesiden. */
.sjiktkilder-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.sjiktkilder-liste > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--linje); }
.sjiktkilder-liste > li:last-child { border-bottom: 0; }
.sjiktkilder-liste p { margin: 0; font-size: 14px; font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sjiktkilder-liste small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--dempet); overflow-wrap: anywhere; text-wrap: pretty; }
.sjiktalternativer { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.sjiktalternativer li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 6px 10px; background: var(--flate); border-radius: 6px; font-size: 13px; }
.sjiktalternativer li > span:first-child { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.sjiktalternativer .sjikttall { color: var(--blekk); white-space: nowrap; }
.sjiktalternativer .grunn { flex-basis: 100%; color: var(--antakelse); font-size: 12.5px; }
/* Smalt: kilden står alltid på sin egen linje, og løsningen, tallene og merket på linjen under, likt i hvert alternativ. */
@media (max-width: 759.98px) {
  .sjiktalternativer li > span:first-child { flex-basis: 100%; }
}
/* Bredt nok: alternativene deler kolonnene (subgrid), så løsningen, tallene og merket står rett under hverandre. */
@media (min-width: 760px) {
  .sjiktalternativer { grid-template-columns: minmax(0, 1fr) max-content max-content max-content; column-gap: 10px; }
  .sjiktalternativer li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 2px; }
  .sjiktalternativer li > span:first-child { grid-column: 1; }
  .sjiktalternativer .losning { grid-column: 2; }
  .sjiktalternativer .sjikttall { grid-column: 3; text-align: right; }
  .sjiktalternativer .grunn { grid-column: 2 / -1; }
  .sjiktalternativer li > .chip { grid-column: 4; justify-self: start; }
}
/* S7 runde 8: «Velg» ved hvert alternativ i saken om oppbygningen sender svaret fra raden. */
form.radvalg { float: right; margin: 0 0 2px 8px; }
/* Knappen flyter til høyre i hvert alternativ, og alternativet slutter under den (kulepunktet står). */
.radalternativer li::after { content: ""; display: block; clear: both; }
form.radvalg .knapp.liten-knapp { padding: 1px 8px; font-size: 12px; }

/* ======================================================================================================================
   Formene i uttrykket (ui-uttrykk2, designsystem.md): de samme klassene som over, med nye verdier og former. De står
   etter reglene de bytter, og flyttes inn der de hører hjemme når hver side får uttrykket.
   ==================================================================================================================== */

/* ---------- 2. Grunnen */
body { background: var(--bg); color: var(--blekk); font: var(--v-normal) var(--t-ui) var(--font); font-variant-numeric: tabular-nums lining-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--handling); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--handling); outline-offset: 1px; border-radius: 0; }
h1, h2, h3, h4 { letter-spacing: 0; font-weight: var(--v-sterk); }
.id { font: inherit; font-size: inherit; color: var(--dempet); }
.liten { font: var(--t-liten) var(--font); }
.dempet { color: var(--dempet); }
kbd { font: var(--v-middels) 11px/1 var(--font); padding: 2px 4px; border: 1px solid var(--linje-sterk); border-radius: 2px; background: var(--flate); color: var(--dempet); }

/* ---------- 3. Merker: opphav (bokstaven), status (punktet), og beløpets art (ordet) */
/* Bokstaven for opphavet: grå ramme og grå bokstav. Bare det som mangler, er rødt, og antakelsen er rav. */
.glyf { width: 16px; height: 16px; border-radius: 2px; font: var(--v-middels) 10.5px/1 var(--font); background: var(--flate); color: var(--dempet); box-shadow: inset 0 0 0 1px var(--linje-sterk); }
.g-vater { outline: 0; box-shadow: inset 0 0 0 1px var(--linje-sterk); }
.g-missing, .g-foreldet { color: var(--paa-signal); background: var(--signal); box-shadow: none; }
.g-assumption { color: var(--rav); box-shadow: inset 0 0 0 1px var(--rav); background: var(--flate); }
.g-ok, .g-validated_solution { color: var(--blekk); }
.g-avvist { color: var(--svak); }
/* Peker og tastaturfokus på en bokstav som er en lenke: en ring utenfor, så bokstaven og flaten (rød for M, rav for A)
   har den samme fargen og kontrasten som ellers. */
a.glyf:hover, a.glyf:focus-visible { outline: 2px solid var(--handling); outline-offset: 1px; text-decoration: none; }
/* Statusordet (før: piller). Et punkt foran: rødt kvadrat = må avklares, rav = antakelse, grått = ellers. */
.chip, .ansvar, .status, .merke-kritisk, .belopsart {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; border-radius: 0; background: none; box-shadow: none;
  font: var(--v-normal) var(--t-ui) var(--font); color: var(--dempet); white-space: nowrap; margin: 0;
}
.chip.ok::before, .chip.kritisk::before, .chip.antakelse::before, .ansvar::before, .status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--punkt); box-sizing: border-box; }
.chip.ok::before, .ansvar-vi::before, .status-godta::before { background: var(--punkt); }
.chip.kritisk, .chip.kritisk a { color: var(--blekk); }
.chip.kritisk::before, .ansvar-uavklart::before { border-radius: 1px; border-color: var(--signal); background: var(--signal); }
.chip.antakelse, .ansvar-uavklart, .status-endre { color: var(--rav); }
.chip.antakelse::before, .status-endre::before { border-color: var(--rav); background: var(--rav); border-radius: 1px; }
.ansvar-uavklart { color: var(--blekk); }
.chip.kilde, .chip.styrende { color: var(--dempet); }
.merke-kritisk { color: var(--blekk); font-weight: var(--v-middels); }
.merke-kritisk::before { display: none; }
/* «selvkost» og «med påslag» er et grått ord, ikke en pille. */
.belopsart { font: var(--t-liten) var(--font); color: var(--dempet); vertical-align: baseline !important; }
.belopsart.med-paslag { color: var(--dempet); background: none; }
.belopsart.selvkost { box-shadow: none; background: none; }
/* Telleren i en fane: tallet alene, rødt bare når det er åpne avklaringer. */
.teller { font: var(--v-middels) var(--t-ui) var(--font); padding: 0; border-radius: 0; background: none; color: var(--signal); }
.teller.null { background: none; color: var(--dempet); }
.teller.antakelse { background: none; color: var(--rav); }

/* ---------- 4. Knapper og felt */
.knapp {
  height: var(--h-felt); padding: 0 10px; gap: 6px; border-radius: var(--radius); border: 1px solid var(--linje-sterk);
  background: var(--flate); color: var(--blekk); font: var(--v-middels) var(--t-ui) var(--font); box-shadow: none;
}
.knapp:hover { border-color: var(--kant-hover); background: var(--hover); text-decoration: none; }
.knapp.primar { background: var(--blekk); border-color: var(--blekk); color: var(--paa-blekk); }
.knapp.primar:hover { background: var(--blekk-hover); border-color: var(--blekk-hover); }
.knapp.liten-knapp { height: 22px; padding: 0 8px; font: var(--v-middels) var(--t-ui) var(--font); }
.knapp.sekundar { border-style: solid; border-color: transparent; background: none; color: var(--handling); padding: 0 4px; }
.knapp.sekundar:hover { color: var(--handling-hover); background: none; text-decoration: underline; }
.knapp[aria-pressed="true"] { background: var(--handling-lys); border-color: var(--handling); color: var(--handling); box-shadow: none; }
/* Deaktivert er deaktivert også under pekeren, også for hovedknappen (før: mørk flate under grå tekst, 1,1:1). */
.knapp:disabled, .knapp:disabled:hover, .knapp.primar:disabled, .knapp.primar:disabled:hover, .knapp.sekundar:disabled:hover { opacity: 1; color: var(--svak); background: var(--flate-2); border-color: var(--linje); }
.knapp.sekundar:disabled, .knapp.sekundar:disabled:hover { background: none; border-color: transparent; text-decoration: none; }
.knapp kbd { margin-left: 4px; }
.knapp.primar kbd { border-color: var(--paa-blekk); color: var(--paa-blekk); background: transparent; }
.felt { gap: 3px; font: var(--t-ui) var(--font); color: var(--dempet); }
.felt input, .felt select, .felt textarea,
.skjemafelt input:not([type="checkbox"]), .varetabell input, .kobling-skjema select, table.mengdeliste select,
.paslagsskjema select, .paslagsskjema input, .leverandorskjema select, .prisvalg select, .opplasting select,
.tilgangsvalg, details.endre input, .sporsmalstekst, input[type="search"], input[type="text"], input[type="number"], select, textarea {
  min-height: var(--h-felt); padding: 3px 8px; border: 1px solid var(--linje-sterk); border-radius: var(--radius);
  background: var(--flate); color: var(--blekk); font: var(--t-ui) var(--font); box-shadow: none;
}
textarea, .sporsmalstekst { font: var(--t-les) var(--font); padding: 6px 8px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--handling); outline-offset: -1px; }
input::placeholder, textarea::placeholder { color: var(--svak); }
.skjemafelt { font: var(--t-ui) var(--font); color: var(--dempet); }
.skjemafelt label { font: var(--v-middels) var(--t-ui) var(--font); color: var(--blekk); }
.felthjelp, .felt-hode small { font: var(--t-liten) var(--font); color: var(--dempet); }
.enhet { font: var(--t-ui) var(--font); color: var(--dempet); }
.skjemafelt input[aria-invalid="true"], .varetabell input[aria-invalid="true"], .leverandorskjema select[aria-invalid="true"], .opplasting select[aria-invalid="true"] { border-color: var(--rav); box-shadow: inset 0 0 0 1px var(--rav); }
.feltfeil { color: var(--rav); font: var(--v-middels) var(--t-ui) var(--font); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--blekk); }
.avkrysning-linje input, .kildetyper input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--blekk); }

/* ---------- 5. Meldinger og tilstander: én linje på hvit flate med et merke foran, ingen fargede bokser */
.feilmelding, .advarselmelding, .infomelding, .okmelding, .bildeavvik, .innlogging-feil, p.venter {
  display: block; margin: 0; padding: 6px 0 6px 14px; border-radius: 0; background: none; position: relative;
  font: var(--v-middels) var(--t-ui) var(--font); color: var(--blekk);
}
.feilmelding::before, .advarselmelding::before, .infomelding::before, .okmelding::before, .bildeavvik::before, .innlogging-feil::before, p.venter::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 1px; background: var(--rav);
}
.infomelding::before, .okmelding::before { border-radius: 50%; background: var(--punkt); }
.okmelding { color: var(--blekk); }
.advarselmelding, .bildeavvik, p.venter { color: var(--blekk); }
p.venter a { color: var(--handling); }
/* Kvitteringen etter et svar: grå flate over saken, med prisen før og etter i tall. */
.kvittering { margin: 0; padding: 10px 12px; border: 0; border-radius: 0; background: var(--flate-3); color: var(--blekk); gap: 4px; font: var(--t-ui) var(--font); }
.kvittering.angret { background: var(--flate-2); border: 0; }
.kvittering-tittel strong, .kvittering.angret .kvittering-tittel strong { color: var(--blekk); font-weight: var(--v-sterk); }
/* Tom: én linje, ingen stiplet boks. */
.tom { padding: 8px 0; background: none; border: 0; border-radius: 0; color: var(--dempet); }
/* Anbefalingen og svarvirkningen: en grå flate uten kant, teksten først. */
.anbefaling { padding: 8px 12px; border-radius: 0; background: var(--flate-2); color: var(--blekk); font: var(--t-les) var(--font); }
.anbefaling strong { color: var(--blekk); font-weight: var(--v-sterk); }
.svarvirkning { padding: 8px 12px; border: 0; border-radius: 0; background: var(--flate-2); font: var(--t-ui) var(--font); }
.svarvirkning dt { font-weight: var(--v-middels); color: var(--dempet); }
.kjent-avvik { font: var(--t-ui) var(--font); color: var(--blekk); }
/* Popover for kontrollen: en ramme, ingen skygge. */
.kontroll-panel { border-radius: var(--radius); border-color: var(--linje-sterk); box-shadow: none; font: var(--t-ui) var(--font); }

/* ---------- 6. Tabellene: 28 px rader, hår mellom radene, hodet grått, tallene til høyre */
/* Tabellen på Tegninger (`.tg-tabell`) beholder radene sine til siden får uttrykket (en senere del). */
.poster, table.mengdeliste, table.avvik, table.konflikttabell, table.krav, table.dokumenter, .varetabell {
  border: 0; border-radius: 0; background: var(--flate); font: var(--t-ui) var(--font); border-collapse: separate; border-spacing: 0; overflow: visible;
}
.poster th, table.mengdeliste thead th, table.avvik thead th, table.konflikttabell thead th, table.krav th, table.dokumenter th, .varetabell thead th {
  height: var(--h-rad); padding: 0 8px; background: var(--flate-3); color: var(--dempet); font: var(--v-middels) var(--t-ui) var(--font);
  border-bottom: 1px solid var(--linje-hode); border-top: 0; vertical-align: middle; text-align: left;
}
.poster td, table.mengdeliste th, table.mengdeliste td, table.avvik:not(.tg-tabell) td, table.avvik:not(.tg-tabell) tbody th, table.konflikttabell td, table.konflikttabell th,
table.krav td, table.dokumenter td, .varetabell td, .varetabell tbody th {
  padding: 5px 8px; border-bottom: 1px solid var(--haar); font: var(--t-ui) var(--font); vertical-align: middle;
}
.poster td { padding: 0; }
.poster td > a { padding: 5px 8px; min-height: var(--h-rad); }
.poster tr:hover td, table.mengdeliste tbody tr:hover td { background: var(--hover); }
.poster tr.valgt td, table.mengdeliste tr.aktiv > td, tr:target td { background: var(--handling-lys); }
.poster tr.valgt td:first-child { box-shadow: inset 3px 0 0 var(--handling); }
.poster tfoot td { padding: 5px 8px; background: var(--flate-grp); border-top: 1px solid var(--linje); font-weight: var(--v-sterk); }
.poster tfoot tr.tilbud td { font: var(--v-sterk) var(--t-ui) var(--font); }
.poster .tall, .tall, td.tall, th.tall { text-align: right; font-variant-numeric: tabular-nums; }
table.mengdeliste caption, .regeltabell caption.venstre { font: var(--v-sterk) var(--t-ui) var(--font); color: var(--blekk); padding: 0 0 4px; }
table.mengdeliste td a { font-weight: var(--v-middels); }
table.mengdeliste.summer tbody th, table.konflikttabell tr.veggrad th { font-weight: var(--v-sterk); background: var(--flate-grp); }
table.krav td.verdi { font: var(--v-sterk) var(--t-ui) var(--font); }
table.krav td { padding: 6px 8px; vertical-align: top; }
tr.vurdert-avvis td:not(.handling) { opacity: 1; color: var(--svak); }
.tabellramme { border-top: 0; }

/* ---------- 7. Faner, segmenter og grupper */
.filter { border: 1px solid var(--linje-sterk); border-radius: var(--radius); padding: 0; background: var(--flate); overflow: hidden; }
.filter a { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 0; font: var(--t-ui) var(--font); color: var(--dempet); }
.filter a + a { border-left: 1px solid var(--linje-sterk); }
.filter a.aktiv { background: var(--blekk); color: var(--paa-blekk); }
.leverandorfaner, .kildefaner { gap: 0; margin: 12px 0 16px; padding: 0; border-bottom: 1px solid var(--linje); }
.leverandorfaner a { padding: 0 10px; height: var(--h-under); border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--dempet); font: var(--t-ui) var(--font); }
.leverandorfaner a:hover { background: none; color: var(--blekk); text-decoration: none; }
.leverandorfaner a.aktiv { background: none; box-shadow: none; color: var(--blekk); border-bottom-color: var(--blekk); font-weight: var(--v-middels); }
.kildefaner { margin: 0; border: 0; gap: 2px; }
.kildefaner a { padding: 2px 8px; border-radius: var(--radius); font: var(--t-ui) var(--font); color: var(--dempet); border: 1px solid transparent; }
.kildefaner a.aktiv { background: var(--flate); color: var(--blekk); border-color: var(--linje-sterk); }
.kildeliste summary { border-radius: var(--radius); font: var(--t-ui) var(--font); }
.temaer { gap: 4px 16px; }
.temaer a { background: none; border: 0; border-radius: 0; padding: 0; font: var(--t-ui) var(--font); color: var(--handling); }
.temaer a span { color: var(--dempet); }

/* ---------- 8. Sideoppsettet for de vanlige sidene (oversikt, krav, dokumenter, spørsmål, prisgrunnlag, leverandører) */
.innhold { max-width: 1240px; padding: 20px 24px 64px; margin: 0; }
.innhold h1 { font: var(--v-sterk) var(--t-tittel) var(--font); margin: 0 0 4px; letter-spacing: 0; }
.innhold h2 { font: var(--v-sterk) var(--t-les) var(--font); margin: 24px 0 8px; }
.innhold h3 { font: var(--v-sterk) var(--t-ui) var(--font); margin: 16px 0 4px; }
.innhold .ingress, .bibliotekinnledning { font: var(--t-les) var(--font); color: var(--dempet); max-width: var(--maal); margin-top: 2px; }
.sidehode { align-items: center; gap: 12px; }
.brodsmule { font: var(--t-ui) var(--font); margin-bottom: 2px; }
/* De tre store nøkkeltallene er borte: tallene står på én linje som etikett og verdi. */
.tallrad { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 12px; grid-template-columns: none; }
.tallrad .kort, .analysestatus .tallrad .kort { padding: 0; border: 0; border-radius: 0; background: none; display: flex; flex-direction: row-reverse; align-items: baseline; gap: 6px; }
.tallverdi, .analysestatus .tallverdi { font: var(--v-sterk) var(--t-ui) var(--font); letter-spacing: 0; }
.tallverdi .av { font: var(--t-ui) var(--font); }
.etikett { margin: 0; font: var(--t-ui) var(--font); color: var(--dempet); }
/* Kort er ikke lenger kort: avsnitt med en linje over. */
.kort { background: none; border: 0; border-top: 1px solid var(--linje); border-radius: 0; padding: 12px 0 4px; }
.prisgrunnlag { gap: 4px; margin-top: 12px; }
.prisgrunnlag .kort h2 { font: var(--v-sterk) var(--t-les) var(--font); }
/* Avklaringene (krav, spørsmål): avsnitt skilt med hår, uten farget venstrekant. */
.avklaring { background: none; border: 0; border-top: 1px solid var(--haar); border-radius: 0; padding: 10px 0; margin: 0; font: var(--t-les) var(--font); }
.avklaring:last-child { border-bottom: 1px solid var(--haar); }
.avklaring-type { font: var(--v-sterk) var(--t-ui) var(--font); color: var(--blekk); }
.konflikt .avklaring-type, .folgeslutning .avklaring-type { color: var(--blekk); }
.konflikt .avklaring-type::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: var(--signal); border-radius: 1px; }
.prosjektliste, .leverandorliste, .versjonsliste, .bildeliste { gap: 0; }
.prosjektliste li, .leverandorliste li, .bildeliste li { background: none; border: 0; border-bottom: 1px solid var(--haar); border-radius: 0; padding: 8px 0; }
.prosjektliste li:first-child, .leverandorliste li:first-child { border-top: 1px solid var(--linje); }
.prosjektliste a, .leverandorliste a { font-weight: var(--v-middels); }
.ovelsesgruppe h2 { font: var(--v-sterk) var(--t-ui) var(--font); }
blockquote.sitat, .sitat { margin: 4px 0 0; padding: 2px 0 2px 10px; border: 0; border-left: 2px solid var(--sitatstrek); border-radius: 0; background: none; color: var(--blekk); font: var(--t-les) var(--font); }
blockquote.sitat { color: var(--dempet); font: var(--t-ui) var(--font); }
.sitat q { font: inherit; }
.sitat .fil { font: var(--t-liten) var(--font); }
.logglinjer { font: var(--t-ui) var(--font); border-radius: 0; border: 0; background: var(--flate-2); }
.innlogging-kort { border-radius: 0; box-shadow: none; border: 1px solid var(--linje); padding: 24px; }
.innlogging-kort h1 { font: var(--v-sterk) var(--t-tittel) var(--font); }
.innlogging-merke .merke { font: 700 18px/1 var(--merke-font); }
.alternativ { border: 0; border-bottom: 1px solid var(--haar); border-radius: 0; background: none; box-shadow: none; padding: 6px 0; gap: 4px; }
.alternativ.valgt { background: var(--handling-lys); box-shadow: inset 3px 0 0 var(--handling); padding-left: 10px; }
.alternativ.aktiv { outline: 2px solid var(--handling); outline-offset: -1px; }
.alternativ .navn { font: var(--v-sterk) var(--t-ui) var(--font); }
.alternativ .pris { font: var(--v-sterk) var(--t-les) var(--font); letter-spacing: 0; }
.alternativ .pris small { font: var(--t-liten) var(--font); }
.endre-skjema { border: 0; border-radius: 0; background: var(--flate-2); padding: 12px; }
.status-linje { padding: 4px 0; border: 0; border-radius: 0; background: none; font: var(--t-ui) var(--font); }
.koblinger li, .sjiktalternativer li { border: 0; border-bottom: 1px solid var(--haar); border-radius: 0; background: none; padding: 4px 0; }
.kildekort a { border: 0; border-bottom: 1px solid var(--haar); border-radius: 0; padding: 6px 0; background: none; }
.kildekort a:hover, .kildekort a.aktiv { background: var(--hover); }
.sjikt li, .sjiktkilder-liste > li { border-bottom-style: solid; border-bottom-color: var(--haar); }
.sjikt li span { font: var(--t-ui) var(--font); }
.historikk, .historikk summary { font: var(--t-ui) var(--font); }
details > summary { cursor: pointer; }
.seksjon-tittel, .losninger-hode h2, .endringsgruppe .gruppehode h2, .veggtypekort h2, .bibliotekdel h2 { font: var(--v-sterk) var(--t-ui) var(--font); color: var(--blekk); }
.veggtypekort h3 { font: var(--v-sterk) var(--t-ui) var(--font); }
.feltgruppe legend { font: var(--v-sterk) var(--t-les) var(--font); }
.feltgruppe + .feltgruppe { border-top-color: var(--haar); }
.tilbudsbilder summary, .grense summary, .forklaring details summary { font: var(--v-sterk) var(--t-ui) var(--font); }

/* ---------- 9. Arbeidsbenken: kø, sak og kilde, i blandingens tetthet */
/* Bare der dagens stil.css har tre spalter; smalere gjelder reglene for smal skjerm i stil.css (PX2). */
@media (min-width: 1181px) { .benk { grid-template-columns: 300px minmax(420px, 1fr) minmax(360px, 38%); } }
.ko { background: var(--flate); border-right: 1px solid var(--linje); padding: 0 0 16px; }
.ko-hode { position: static; background: var(--flate); padding: 10px 12px; gap: 4px; border-bottom: 1px solid var(--linje); }
.ko-hode strong { font: var(--v-sterk) var(--t-ui) var(--font); }
.ko-hode .liten { font: var(--t-liten) var(--font); }
.fremdrift { height: 3px; border-radius: 0; background: var(--haar); }
.fremdrift i { background: var(--blekk); }
.ko-gruppe { position: sticky; top: 0; z-index: 1; height: var(--h-rad); align-items: center; padding: 0 12px; background: var(--flate-3); border-bottom: 1px solid var(--linje-hode); font: var(--v-middels) var(--t-ui) var(--font); color: var(--dempet); }
.ko-gruppe span { font: var(--t-ui) var(--font); color: var(--dempet); }
.ko-rad { grid-template-columns: 16px minmax(0, 1fr); gap: 8px; margin: 0; padding: 5px 12px; border-radius: 0; border-bottom: 1px solid var(--haar); }
.ko-rad:hover { background: var(--hover); text-decoration: none; }
.ko-rad.valgt { background: var(--handling-lys); box-shadow: inset 3px 0 0 var(--handling); }
.ko-rad .tittel { font: var(--v-middels) var(--t-ui) var(--font); }
.ko-rad .under { font: var(--t-liten) var(--font); color: var(--dempet); }
/* I køen er bokstaven bare typen; at saken må avklares, står ved gruppen (rødt), ikke ved hver bokstav. */
/* Køen har de samme merkene som resten: M fylt rødt og A med rav ramme (Peters valg 16.10), de andre grå. */
.ko-hode + .ko-gruppe { justify-content: flex-start; gap: 6px; }
.ko-hode + .ko-gruppe::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--signal); }
.ko-hode + .ko-gruppe span { margin-left: auto; }
.ko-rad.ferdig .tittel { color: var(--dempet); font-weight: var(--v-normal); }
.ko-rad .under.venter { color: var(--rav); }
/* Finpussen (ui-uttrykk4b): alt i saken utenom hurtigtastlinjen ruller i en egen flate (`.sak-innhold`, benk.html), og
   linjen er en fast rad under flaten, så ingen rad, knapp eller lenke ligger under den. */
.sak { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; font: var(--t-les) var(--font); }
.sak-innhold { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 18px 28px 20px; }
/* Tittelen følger bredden på saken (cqi i containeren sak) og bryter i to jevne linjer. */
.sak h1 { font: var(--v-sterk) clamp(20px, calc(10px + 1.6cqi), 25px)/1.22 var(--font); letter-spacing: -0.018em; max-width: 30ch; text-wrap: balance; }
.sak-meta { gap: 2px 14px; font: var(--t-ui) var(--font); }
/* Merkene over tittelen står 6 til 8 px over den, som en overlinje, både når tittelen står i en div med ingressen og når
   den står rett i saken. */
.sak-meta:is(:has(+ div > h1:first-child), :has(+ h1)) { margin-bottom: -10px; }
/* Brødteksten i saken: 14/22 px (14,5/23 px fra 1800 px), ikke i tabellcellene. */
.sak :is(.ingress, p, li):not(:is(td, th) *) { font-size: 14px; line-height: 22px; text-wrap: pretty; }
.sak small { line-height: 17px; }
/* Ingressen står like under tittelen, ikke inntil den. */
.sak h1 + :is(p, .ingress) { margin-top: 6px; }
@media (min-width: 1800px) { .sak :is(.ingress, p, li):not(:is(td, th) *) { font-size: 14.5px; line-height: 23px; } }
.verdi { font: var(--v-sterk) var(--t-tittel) var(--font); letter-spacing: 0; }
.hurtigtaster { position: static; flex: none; margin: 0; padding: 7px 28px; background: var(--flate-3); backdrop-filter: none; border-top: 1px solid var(--linje); font: var(--t-ui) var(--font); gap: 4px 14px; }
.kildefelt { background: var(--flate-2); border-left: 1px solid var(--linje); }
.kildefelt-hode { background: var(--flate); padding: 0 12px; min-height: var(--h-under); border-bottom: 1px solid var(--linje); font: var(--t-ui) var(--font); gap: 4px; justify-content: center; }
.kildefelt-hode .rad { font: var(--t-ui) var(--font); }
.ark-omraade { padding: 12px; }
.ark { border-radius: 0; box-shadow: none; outline: 1px solid var(--linje-sterk); }
.ark img { border-radius: 0; }
.markering { border-radius: 0; outline-width: 2px; mix-blend-mode: normal; }
.kildemerknad { font: var(--t-ui) var(--font); margin: 0 12px 12px; }

/* ---------- 10. Kalkylen slik den er i dag (før den nye posttabellen) */
@media (min-width: 1181px) { .kalkyle { grid-template-columns: 260px minmax(520px, 1fr) 360px; } }
.sumband { padding: 10px 16px; gap: 6px 24px; background: var(--flate); align-items: baseline; }
.sumband .stor { font: var(--v-sterk) var(--t-sum) var(--font); letter-spacing: 0; }
.sumband .stor small { font: var(--t-ui) var(--font); margin-top: 2px; }
.sumband dt { font: var(--t-ui) var(--font); }
.sumband dd { font: var(--v-sterk) var(--t-ui) var(--font); }
.linjeliste { background: var(--flate); padding: 0 0 16px; }
.linjeliste h2 { font: var(--v-middels) var(--t-ui) var(--font); padding: 6px 12px; background: var(--flate-3); border-bottom: 1px solid var(--linje-hode); }
.linjerad { padding: 5px 12px; border-radius: 0; border-bottom: 1px solid var(--haar); gap: 0 8px; }
.linjerad:hover { background: var(--hover); text-decoration: none; }
.linjerad.valgt { background: var(--handling-lys); box-shadow: inset 3px 0 0 var(--handling); }
.linjerad b { font-weight: var(--v-middels); }
.linjerad .sum { font-weight: var(--v-middels); }
.linjerad small { font: var(--t-liten) var(--font); color: var(--dempet); }
.linjedetalj { padding: 16px 24px 40px; gap: 14px; }
/* Overskriften i linjen følger bredden på feltet (cqi i containeren linjedetalj), så en lang veggtype bryter pent. */
.linjehode h1 { font: var(--v-sterk) clamp(16px, calc(6px + 2.8cqi), 20px)/1.3 var(--font); letter-spacing: -0.012em; text-wrap: balance; }
.forklaring { background: var(--flate); padding: 14px 16px 32px; gap: 10px; }
.forklaring h2 { font: var(--v-sterk) var(--t-ui) var(--font); }
.forklaring .sum-linje { font: var(--v-sterk) var(--t-tittel) var(--font); letter-spacing: 0; }
.forklaring .med-paslag-linje { font: var(--v-middels) var(--t-ui) var(--font); }
.kjede p { font: var(--v-middels) var(--t-ui) var(--font); }
.kjede small, .kjede a.gaa, .liste-enkel { font: var(--t-ui) var(--font); }
.kjede q { background: none; border-radius: 0; font: var(--t-ui) var(--font); border-left-color: var(--sitatstrek); }
.kjede li::before { background: var(--linje); }

/* ---------- 11. Tegningene (tegninger.css): samme former som resten */
.tg-arkknapp { border-radius: var(--radius); padding: 6px 10px; font: var(--t-ui) var(--font); }
.tg-arkknapp.aktiv { border-color: var(--blekk); box-shadow: inset 0 0 0 1px var(--blekk); }
.tg-arknavn { font: var(--v-sterk) var(--t-ui) var(--font); }
.tg-liten-tittel { font: var(--v-sterk) var(--t-les) var(--font); }
.tg-uleste summary, .tg-uleste .tg-liste, .tg-former legend, .tg-lag legend, .tg-lagvalg, .tg-liste, .tg-status { font: var(--t-ui) var(--font); }
.tg-verktoy { border: 0; border-radius: 0; background: var(--flate-2); }
.tg-formvalg { border-radius: var(--radius); padding: 6px 8px; }
.tg-formvalg:has(input:checked) { border-color: var(--blekk); box-shadow: inset 0 0 0 1px var(--blekk); }
.tg-lag, .tg-sak { border-radius: 0; }
.tg-prikk { border-radius: 2px; }
/* Leverandørens varer: enheten står på linje med feltet. */
.varetabell .vareenhet { padding-top: 5px; vertical-align: middle; }
.varetabell tbody th { padding-top: 5px; vertical-align: middle; }
/* Spørsmålene: knappen står på linje med overskriften. */
.kopiering-hode { align-items: baseline; }
.kopiering-hode h2 { margin: 0; }
/* Fingerstore knapper (44 px) bare på berøringsskjerm; med mus er de like høye som de andre knappene. */
@media (pointer: fine) { .tg-zoom .knapp, .tg-nudge .knapp { min-width: 30px; min-height: var(--h-felt); } }
/* Leveransegrensen: setningen er lesetekst, ikke en overskrift. */
.grense-tekst { font: var(--v-normal) var(--t-les) var(--font); color: var(--blekk); }

/* ---------- Modellruten (modell.css fra del 2): knappene og meldingene uten skygge, som resten. */
/* Etiketten og tittelen i panelet har den samme bokstavavstanden som overskriftene (h4) i uttrykket. */
body .modellrute .mr-art, body .modellrute .mr-tittel { letter-spacing: 0; }
body .modellrute .mr-knapp, body .modellrute .mr-kort, body .modellrute .mr-foreldet { box-shadow: none; border-radius: var(--radius); }

/* ---------- 12. Lesbar tekst på alle sidene (finpussen i ui-uttrykk4b) */
/* Linjelengden: brødtekst, listepunkter, sitater og ingresser er høyst --maal brede. Et listepunkt som er en hel blokk
   (et spørsmål med overskrift, et kort), beholder bredden, og cellene i tabellene er ikke berørt. Små tekster er
   metadata (modellen og filene bak kravene, hjelpeteksten under et felt) og følger feltet, ikke 31 em av den lille skriften. */
:is(.innhold, .sak, .linjedetalj, .forklaring) :is(p, li:not(:has(> :is(div, h2, h3, h4, section, form, ul, ol, p, header))), blockquote, dd, .ingress):not(:is(td, th) *, .liten, small) { max-width: var(--maal); }
.innhold textarea.sporsmalstekst { max-width: calc(var(--maal) * 1.15); }
/* De små tekstene og sitatene får litt mer luft mellom linjene. */
:is(.liten, small, .kildemerknad) { line-height: 1.45; }
.sitat q, blockquote.sitat { line-height: 1.5; }
/* Et element som får fokus med Tab, rulles fram over statuslinjen nederst, ikke under den. */
html:has(> body.har-status) { scroll-padding-bottom: calc(var(--h-status) + 12px); }
/* Saken og hurtigtastlinjen har den samme luften til sidene i smalere vinduer. */
@media (max-width: 1180px) { .sak-innhold, .sak .hurtigtaster { padding-inline: 20px; } }
@media (max-width: 760px) { .sak-innhold, .sak .hurtigtaster { padding-inline: 16px; } }