/* Planum Eiendomsintelligens — ett stilark for hele appen.
 *
 * Brekkpunktene er i `em`, ikke `px`. Det er ikke en detalj: en telefon med
 * 150 % tekstforstørrelse fra tilgjengelighetsinnstillingene skalerer BARE
 * skriften, og et px-brekkpunkt merker ikke at teksten er blitt halvannen gang
 * så stor. I em kollapser layouten et hakk tidligere, som er nettopp da den
 * trenger det. */

/* PALETTEN ER JÆRENS, OG DEN HAR TO LAG.
 *
 * Grunnfargene under står med sitt eget navn — torv, myrgrønn, sand, tegl,
 * papir — og under dem ligger ROLLENE resten av stilarket faktisk bruker.
 * Skillet er ikke pynt: en rolle kan flyttes til en annen grunnfarge på ett
 * sted, mens en hex som er kopiert ut i seksti regler må jaktes.
 *
 * TEGL ER FORBEHOLDT FRIKSJON OG NEGATIVE TALL. Den er den eneste varme fargen
 * i paletten, og et øye leser den som «her er noe galt». Brukes den som
 * generell aksent, slutter den å bety noe der den faktisk skal bety noe — og
 * da er et forbehold i kalkylen like påfallende som en overskrift.
 * `test/palett.test.ts` vokter regelen mot selve stilarket. */

:root {
  --torv: #12150f;
  --myrgronn: #1f4b36;
  --sand: #c8bfa4;
  --tegl: #b04a22;
  --papir: #efede5;

  /* Støttetoner — kort, skillelinjer, dempet tekst, statusprikk, «krever input» */
  --kort: #fff;
  --kant: #e2ded0;
  --kant-svak: #edeae0;
  --kant-svakest: #f3f1e7;
  --dempet-mork: #5f6358;
  /* DEMPET TEKST HOLDER 4,5:1 (WCAG 2.1 AA, 1.4.3) mot alle flatene den står
     på — papir, kort, felt og den grønne valgtflaten (#e9edeb). Hierarkiet
     bæres av størrelse og vekt, ikke av en blekere grå: de tre lyse tonene
     som sto her (#8e8f82, #9a9b8d, #b0a998) lå på 2,0–3,3 og var 3 400 brudd. */
  --dempet: #63665b;
  --status-pa: #6fbf92;
  /* Den lyse grønne knappen holder 4,5:1 med hvit tekst: #3d8a60 lå på 4,2,
     og ingen så det fordi axe ikke målte kontrast der et kart sto (#1159). */
  --gronn-knapp: #38805a;
  /* Teksten på torv i sidemenyen — menyknapp, prikkrad og lagtelleren delte
     samme hex i tre regler. Ett navn, ett sted å flytte den. */
  --sidebar-tekst: #a8b0a4;
  --input-bg: #faf4e6;
  --input-kant: #e5d8b8;
  --input-tekst: #8a6a1c;

  /* Roller */
  --bg: var(--papir);
  --ink: var(--torv);
  --mork: var(--torv);
  --aksent: var(--myrgronn);
  --aksent-lys: rgba(31, 75, 54, 0.1);
  --neg: var(--tegl);
  --neg-lys: #f7ede9; /* tegl 10 % over hvitt, ugjennomsiktig: over papir ble tegl 4,1:1 */
  --utleie: var(--input-tekst);
  --felt-bg: #f7f5ed;
  /* Kanten på et felt som ikke er fylt ut. Stiplet, ikke bare blekere: en
     stiplet kant leses som «her mangler noe» uten at man må sammenligne to
     gråtoner ved siden av hverandre. `design/planum-redesign.md`. */
  --kant-stiplet: #d8d3c2;
  /* KANTEN PÅ ET SKJEMAFELT er det som viser hvor feltet er, og den skal ha
     3:1 mot flaten rundt (WCAG 2.1 AA, 1.4.11). `--kant` er 1,3:1 og er for
     kort og skillelinjer, som ikke er noe man fyller ut. */
  --felt-kant: #85867a;

  /* TRE SKRIFTER, TRE JOBBER. Familjen Grotesk bærer overskrifter og
   * nøkkeltall, IBM Plex Sans brødteksten og grensesnittet, IBM Plex Mono ALLE
   * tall, matrikler, koordinater og seksjonsetiketter. Fast bredde på tallene
   * er ikke smak: det er det som lar to kolonner sammenlignes med øyet. */
  --display: "Familjen Grotesk", system-ui, sans-serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 16px;
}

* { box-sizing: border-box; min-width: 0; }
fieldset { min-width: 0; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

::selection { background: rgba(31, 75, 54, 0.16); }
@keyframes spin { to { transform: rotate(360deg); } }

/* LASTESTRIPA. Neste side lages på serveren, og til den er der løper en stripe
   langs toppen (`js/lasting.js`). Den er der alltid, usynlig, så den ikke
   flytter noe når den kommer. */
body::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 1000;
  pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--aksent) 30%, var(--aksent) 70%, transparent) no-repeat;
  background-size: 40% 100%;
  transition: opacity 0.15s;
}
html[data-laster] body::before { opacity: 1; animation: lastestripe 1.1s linear infinite; }
html[data-laster] { cursor: progress; }
@keyframes lastestripe { from { background-position: -70% 0; } to { background-position: 170% 0; } }
/* #867: knappen man trykket, viser at den jobber, og kan ikke trykkes to ganger. */
[data-lastes] { pointer-events: none; }
button[data-lastes]::after, .knapp[data-lastes]::after, [data-lastemelding]::before {
  content: ""; flex: 0 0 auto; display: inline-block; width: 0.9em; height: 0.9em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: lastespinn 0.7s linear infinite;
}
button[data-lastes]::after, .knapp[data-lastes]::after { margin-left: 0.5em; vertical-align: -0.12em; }
@keyframes lastespinn { to { transform: rotate(360deg); } }
/* Varer det over et sekund, står det hva som skjer, øverst der man ser. */
[data-lastemelding] {
  position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 1001;
  max-width: min(92vw, 34rem); padding: 10px 18px 10px 16px; border-radius: 999px;
  background: var(--mork); color: #fff; font: 500 0.95rem/1.3 var(--sans); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  display: flex; align-items: center; gap: 10px;
}
[data-lastemelding][hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-laster] body::before { animation: none; background: var(--aksent); opacity: 0.6; }
  button[data-lastes]::after, .knapp[data-lastes]::after, [data-lastemelding]::before { animation: none; border-right-color: currentColor; opacity: 0.6; }
}

.scroll::-webkit-scrollbar { width: 11px; height: 11px; }
.scroll::-webkit-scrollbar-thumb {
  background: #d6cfbf; border-radius: 9px;
  border: 3px solid transparent; background-clip: content-box;
}
.scroll::-webkit-scrollbar-thumb:hover { background: #c4bba6; }

input::placeholder, textarea::placeholder { color: var(--dempet); }
/* FOKUS SKAL SYNES PÅ ALT SOM KAN FÅ DET (WCAG 2.4.7). Feltene viste fokus bare
   som en kant som skiftet farge, og den forsvant i et skjema med femten felt.
   Ringen er aksenten, 2 px utenfor kanten, og bare for tastaturet. */
:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; }
input:focus, textarea:focus, select:focus { border-color: var(--aksent); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--aksent); outline-offset: 1px; }
/* På torv er aksenten 1,9:1 og forsvinner; der er ringen papir. */
:is(.sidebar, .minne-svarboks, .notatkort) :focus-visible { outline-color: var(--papir); }

/* Usynlig på skjermen, lest av skjermleseren. */
.skjult-visuelt {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* «Hopp til innholdet» er det første Tab treffer, og synes bare da. */
.hopplenke {
  position: absolute; left: 12px; top: -100px; z-index: 1001;
  background: var(--kort); color: var(--aksent); font: 600 14px var(--sans);
  padding: 10px 14px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.hopplenke:focus { top: 12px; }
.innholdsanker:focus { outline: none; }
button { font-family: inherit; }
a { color: var(--aksent); }

/* ---------------------------------------------------------------- skall */

.skall { display: flex; min-height: 100vh; }

.sidebar {
  flex: 0 0 248px;
  background: var(--mork);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 26px 18px 20px;
}

.merke { display: flex; align-items: center; gap: 11px; padding: 0 6px 26px; }
/* Logoen er sand mot torv — den eneste flata i skallet som bruker sanden i
   full styrke, og derfor det øyet finner først. */
/* `flex: 0 0 auto`: under 56em deler merket raden med brukermenyen, og ved
   150 % tekst krympet boksen ellers fra 30 til 22 px (e2e/merke.spec.ts). */
.merke-ikon {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--sand); color: var(--torv);
  display: flex; align-items: center; justify-content: center;
}
/* #317: monogrammet («EI») arver fargen med currentColor — se
   `Merke` i deler.tsx — så boksen over setter bare størrelsen. */
.merke-ikon svg { width: 17px; height: 17px; }
/* #387: uten fallback-vakta stikker ordet ut ved 320 px / 150 % tekst når
   Google-fonten ikke har rukket å laste — reserveskrifta er bredere enn
   Familjen Grotesk. `.merke-tekst` er en flex-barn av `.merke`, og
   flex-barn krymper aldri under sitt eget innhold uten `min-width: 0`; se
   samme mønster på `.sidetittel`. */
.merke-tekst { min-width: 0; }
.merke-navn {
  font: 700 16px var(--display); letter-spacing: 0.04em; line-height: 1.15;
  hyphens: auto; overflow-wrap: anywhere;
}
.merke-under { font-size: 11px; color: #8e978a; letter-spacing: 0.06em; margin-top: 3px; }

.meny { display: flex; flex-direction: column; gap: 4px; }

/* Områdene i topplinja. De står stille mens innholdsruta ruller, så de er
   alltid veien ut av en detaljside — sammen med brødsmula. */
.omrademeny { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-right: auto; min-width: 0; }
.omradeknapp {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 9px;
  font: 600 13px var(--sans); text-decoration: none; color: var(--dempet-mork);
  transition: background 0.15s, color 0.15s; white-space: nowrap;
}
.omradeknapp:hover { background: var(--felt-bg); color: var(--ink); }
/* Det man nettopp trykket på, lyser opp før neste side er der (`js/lasting.js`),
   og fanen man forlater, slipper. */
.omradeknapp.aktiv, .omradeknapp[data-lastes] { background: var(--aksent-lys); color: var(--aksent); }
.omrademeny:has([data-lastes]) .omradeknapp.aktiv:not([data-lastes]) { background: none; color: var(--dempet-mork); }
.omradeknapp > svg { flex: 0 0 auto; }

/* Brødsmula: hvert ledd en lenke, det siste der du står. */
.brodsmule-skille { color: var(--dempet); }
.brodsmule-her { color: var(--dempet-mork); }

/* «VEIEN VIDERE» ER SIDEMENYEN, EN GANG TIL (17/9). Vegard: «Kan vi fjerne
   "veien videre" nå på alle sidene ettersom vi har det i menyen til venstre?»
   Ja — der menyen faktisk står. På telefon er sidemenyen skjult (se under), og
   da er kortene det ENESTE andre nivået; der blir de stående. `.veivalg` uten
   `-omrade` er noe annet (lenka fra et søketreff til full rapport i /minne) og
   røres ikke. */
@media (min-width: 56.01em) {
  .skall:not(.uten-sidefelt) .veivalg-omrade { display: none; }
}

/* UTEN SIDEFELT (#1118, 3/11): «vekk venstre-baren inntil videre og kun de
   tre topp-punktene». Merket som går hjem står først i topplinja, og «Veien
   videre» over er det andre nivået på alle bredder. Sidefeltet slås på igjen
   med `SIDEFELTET_VISES` i views/layout.tsx. */
.topplinje .topp-merke { padding: 0; margin-right: 6px; flex: 0 0 auto; }

/* UNDERSIDENE I OMRÅDET DU STÅR I (16/9). De fem områdene ligger nå i
   topplinja (`.omrademeny`), og sidemenyen bærer det andre nivået — fire til
   ni lenker, kort nok til å leses. `overflow-wrap` blir stående:
   «Taksonomi- og energiunderlag» er det bredeste vi setter, og på en 320 px
   telefon ved 150 % tekst må det få brekke. */
.menyknapp {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 10px;
  font: 600 14px var(--sans); text-decoration: none; color: var(--sidebar-tekst);
  transition: background 0.15s; overflow-wrap: anywhere;
}
.menyknapp > svg { flex: 0 0 auto; }
.menyknapp:hover { background: rgba(255, 255, 255, 0.06); }
.menyknapp.aktiv, .menyknapp[data-lastes] { background: var(--aksent); color: #fff; }
.meny:has([data-lastes]) .menyknapp.aktiv:not([data-lastes]) { background: none; color: var(--sidebar-tekst); }

.innhold { flex: 1; overflow-y: auto; }
/* `Side innholdRuller` (16/9): en fast høyde gjør `.innhold` til den som
   faktisk ruller, slik at en sticky-kolonne inne i den blir stående. Uten
   høyden vokser ruta med innholdet og ruller aldri — og da følger kolonnen
   sida som om `sticky` ikke sto der. Bare over 64em: stablet skal sida rulle
   som én flate. */
@media (min-width: 64.01em) {
  .skall-rullende { height: 100vh; }
}
/* Luften under siste ting på sida. Et panel som står fast ved siden av en liste
   regner med den: helt nederst slutter lista så høyt over skjermkanten (#1107). */
:root { --sidebunn: 90px; }
.sidebredde { max-width: 1080px; margin: 0 auto; padding: 34px 40px var(--sidebunn); }

/* ------------------------------------------------------------ administrasjon */

/* `/admin` (views/admin.tsx): undermeny til venstre, innholdet til høyre. Under
   56em legger undermenyen seg på tvers øverst og brekker til flere rader
   framfor å dytte sida ut av skjermen. */
.admin-kolonner { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 32px; align-items: start; }
.adminmeny { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; }
.adminmeny-tittel { font: 600 12px var(--sans); color: var(--dempet); padding: 0 12px 8px; }
.adminmeny-gruppe { display: flex; flex-direction: column; }
.adminmeny-valg, .adminmeny-undervalg {
  display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none;
  font: 500 14px var(--sans); overflow-wrap: anywhere;
}
.adminmeny-undervalg { padding: 6px 12px 6px 24px; font-size: 13px; color: var(--dempet-mork); }
.adminmeny-valg:hover, .adminmeny-undervalg:hover { background: var(--kant-svakest); }
.adminmeny-valg.aktiv { color: var(--aksent); font-weight: 600; }
.adminmeny-undervalg.aktiv, .adminmeny-valg[aria-current="page"] { background: var(--aksent-lys); color: var(--aksent); font-weight: 600; }
/* Smal skjerm: hovedvalgene som en rad med faner, og undervalgene til den
   aktive gruppa som en egen rad under. De andre gruppenes undervalg skjules —
   ellers blandes to nivåer i samme rad. `display: contents` lar gruppene gå opp
   i navigasjonens flex, og `order` legger den aktive undergruppa sist. */
@media (max-width: 56em) {
  .admin-kolonner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .adminmeny {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 4px;
    padding-bottom: 8px; border-bottom: 1px solid var(--kant);
  }
  .adminmeny-tittel { display: none; }
  .adminmeny-gruppe { display: contents; }
  .adminmeny-valg { padding: 6px 12px; }
  .adminmeny-valg.aktiv { background: var(--aksent-lys); }
  .adminmeny-under { display: none; }
  .i-gruppa > .adminmeny-under {
    display: flex; flex-wrap: wrap; gap: 4px; order: 1; flex: 1 1 100%;
    margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--kant-svakest);
  }
  .adminmeny-undervalg { padding: 5px 10px; }
}

.admin-hode { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.admin-hode-tekst { min-width: 0; flex: 1 1 20em; }
.admin-hode > .knapp { flex: 0 0 auto; margin-top: 4px; }

.adminsok { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.adminsok input, .adminsok select {
  flex: 1 1 14em; height: 40px; padding: 0 12px; border: 1px solid var(--kant); border-radius: 8px;
  background: var(--kort); font: 400 14px var(--sans); color: var(--ink);
}

/* Listene er en flate med rader, ikke et kort per ting. */
.adminliste { background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radius); overflow: hidden; }
.adminliste > .tomrad { margin: 0; }
.adminrom .kort .tomrad { padding: 4px 0 8px; margin: 0; font-size: 14px; }
.adminrad {
  display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap;
  padding: 12px 18px; color: inherit; text-decoration: none; border-top: 1px solid var(--kant-svak);
}
.adminrad:first-child { border-top: 0; }
a.adminrad:hover { background: var(--kant-svakest); }
a.adminrad:hover .adminrad-navn { color: var(--aksent); }
.adminrad-hoved { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 16em; overflow-wrap: anywhere; }
.adminrad-hoved > span { min-width: 0; overflow-wrap: anywhere; }
.adminrad-navn { font: 600 14px var(--sans); overflow-wrap: anywhere; }
.adminrad-meta { font-size: 13px; color: var(--dempet-mork); overflow-wrap: anywhere; }

.adminmerker { display: flex; flex-wrap: wrap; gap: 6px; }
.adminmerke { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 600 12px var(--sans); border: 1px solid var(--kant); background: var(--kant-svakest); color: var(--dempet-mork); }
.adminmerke.pos { background: var(--aksent-lys); color: var(--aksent); border-color: transparent; }
/* Deaktivert og låst er en tilstand å legge merke til, ikke friksjon i analysen —
   derfor ikke tegl. */
.adminmerke.neg { background: var(--input-bg); color: var(--input-tekst); border-color: var(--input-kant); }

.adminpunkter { list-style: none; margin: 0 0 12px; padding: 0; }
.adminpunkter > li { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--kant-svakest); }
.adminpunkter > li > :first-child { min-width: 0; overflow-wrap: anywhere; }
.adminpunkt-hoved { flex: 1 1 16em; }
/* Hjelpeteksten brekker som én blokk med sin egen linjehøyde, ikke med
   16 px-linjene rundt seg (#593). */
.adminpunkt-hoved .felt-hjelp { display: inline-block; }

.inlineskjema { display: flex; align-items: flex-end; gap: 8px 10px; flex-wrap: wrap; margin-top: 8px; }
.inlineskjema .felt { flex: 1 1 12em; }
.inlineskjema select { max-width: 100%; }
.engangspassord code { font: 600 18px var(--mono); padding: 6px 10px; background: var(--kant-svakest); border-radius: 6px; overflow-wrap: anywhere; }
.meldingskort.feil { border-color: var(--input-kant); background: var(--input-bg); color: var(--input-tekst); }

/* ------------------------------------------------------------- prospekter */

/* Arbeidsrommet (#530): hovedkolonnen er arbeidet — dokumenter, samtale,
   vurdering — og høyre kolonne rommets fakta. Under 64em stables de, med
   slippsona først. `minmax(0, …)` fordi et grid-spor ellers aldri krymper under
   innholdet sitt, og en lang adresse ville dyttet sida ut av en telefon.

   HØYREKOLONNEN STÅR FAST, MELDINGENE RULLER FOR SEG (16/9).
   Vegard: «vi kan fint ha skroll i meldingsvinduet og skroll i høyre-delen også
   så vi kan ha den fast selv om vi skroller i meldingsdelen.» Slippsona og
   faktaarket er det man jobber MOT mens man leser samtalen; forsvinner de opp
   av skjermen, må man rulle fram og tilbake mellom spørsmålet og tallet.
   `position: sticky` virker bare så lenge ingen forelder ruller, så kolonnene
   selv har ingen `overflow`. */
.prospektrom-kolonner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 0 24px; align-items: start; }
.prospektrom-side {
  position: sticky; top: calc(var(--topplinje) + 12px);
  max-height: calc(100vh - var(--topplinje) - 24px); overflow-y: auto;
  /* Rullefeltet ville ellers ligget oppå kortkanten. */
  padding-right: 2px; scrollbar-width: thin;
}
.prospektrom-hoved > .kort:first-child, .prospektrom-opplasting > .kort:first-child { margin-top: 18px; }

/* Stablet på telefon: ingen fast kolonne og ingen rulling inni rulling — da er
   det to felt som slåss om det samme fingerdraget. `display: contents` løser
   opp høyrekolonnen så kortene blir egne celler, og slippsona kan legge seg
   først. */
@media (max-width: 64em) {
  .prospektrom-kolonner { grid-template-columns: minmax(0, 1fr); }
  .prospektrom-side { display: contents; }
  .prospektrom-opplasting { order: -1; }
}

.brodsmule { margin: 0 0 6px; font-size: 13px; }
.brodsmule a { color: var(--dempet-mork); }
.prospekthode { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prospekthode .sidetittel { margin-bottom: 0; }

/* Status er et ord i en rolig flate, ikke et varsel. Kjøpt bærer aksenten;
   forkastet er dempet — det er et utfall, ikke en feil, og tegl er forbeholdt
   friksjon. */
.prospektstatus {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font: 600 12px var(--sans); background: var(--kant-svakest); color: var(--dempet-mork); border: 1px solid var(--kant); max-width: 100%; overflow-wrap: anywhere; white-space: normal;
}
.prospektstatus-bud { background: var(--input-bg); color: var(--input-tekst); border-color: var(--input-kant); }
.prospektstatus-kjopt { background: var(--aksent-lys); color: var(--aksent); border-color: transparent; }

.prospektliste { list-style: none; margin: 0; padding: 0; }
.prospektliste li + li { border-top: 1px solid var(--kant-svak); }
.prospektrad {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 4px; color: inherit; text-decoration: none;
}
.prospektrad:hover .prospektrad-navn { color: var(--aksent); text-decoration: underline; }
.prospektrad-hoved { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prospektrad-navn { font: 600 15px var(--sans); overflow-wrap: anywhere; }
.prospektrad-meta { font-size: 13px; color: var(--dempet-mork); overflow-wrap: anywhere; }
.prospektrad-hoyre { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; min-width: 0; }
.prospektrad-pris { font: 500 13px var(--mono); overflow-wrap: anywhere; }

.dokumentliste { list-style: none; margin: 0 0 14px; padding: 0; }
.dokumentrad { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--kant-svakest); }
.dokumentrad-hoved { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 14em; }
.dokumentrad-hoved > a { font-weight: 600; overflow-wrap: anywhere; }
.dokumentrad-meta { font-size: 13px; color: var(--dempet-mork); overflow-wrap: anywhere; }
.dokumentrad-varsel { font-size: 13px; color: var(--input-tekst); }
/* Slippsona for dokumenter, øverst i sidekolonnen (16/9). Feltet står synlig
   inne i sona: uten JavaScript er filvelgeren den eneste veien inn. */
.opplastingsskjema { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 6px; }
.opplastingsskjema .felt-hjelp { margin: 0; }
.opplastingsskjema input[type="file"] { max-width: 100%; font-size: 13px; }
.opplastingsskjema button[type="submit"] { align-self: flex-start; }
.slippsone {
  position: relative; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  padding: 16px 12px; border: 1px dashed var(--kant); border-radius: 10px; background: var(--felt-bg);
  cursor: pointer; transition: border-color .12s, background-color .12s;
}
/* Med JavaScript dekker filvelgeren hele sona, usynlig — ikke `display: none`,
   for et skjult felt kan ikke bære `required` og skjemaet ville feilet stille. */
.slippsone.velger-skjult input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.slippsone-valgte:empty { display: none; }
.slippsone-valgte { font: 500 13px var(--sans); color: var(--aksent); overflow-wrap: anywhere; }
.slippsone:hover, .slippsone:focus-within { border-color: var(--aksent); }
.slippsone.drar { border-color: var(--aksent); border-style: solid; background: var(--aksent-lys); }
.slippsone-tittel { font: 600 14px var(--sans); }
.slippsone-hjelp { font-size: 13px; color: var(--dempet-mork); }
.opplastingsutfall { margin: 0 0 12px; padding-left: 18px; font-size: 14px; }
.opplastingsutfall li { margin: 4px 0; overflow-wrap: anywhere; }
.opplastingsutfall li.feil { color: var(--dempet-mork); }
.arkivforslag { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--kant-svak); }
.arkivforslag-tittel { margin: 0 0 4px; font: 600 14px var(--sans); }
.deltakerliste, .hendelsesliste { list-style: none; margin: 0 0 12px; padding: 0; }
.deltaker { display: flex; align-items: center; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--kant-svakest); }
.deltaker > span:first-child { overflow-wrap: anywhere; min-width: 0; flex: 1 1 10em; }
.knapp.liten-knapp { padding: 6px 12px; font-size: 13px; }
.delingsskjema { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.delingsskjema .felt { flex: 1 1 12em; }
.hendelsesliste li { display: flex; flex-direction: column; gap: 1px; padding: 7px 0; border-bottom: 1px solid var(--kant-svakest); font-size: 13px; }
.hendelse-tekst { overflow-wrap: anywhere; }

/* Faktaarket (#535). Nøkkeltallene øverst i en rolig flate, feltene som en
   liste der verdien er det man ser og kilden et lite merke ved siden av.
   Kilden er ikke pynt: «Analysen», «Dokument» og et navn er tre ulike grader
   av hvor sikkert tallet er, og de har hver sin tone. */
.faktaadresse { margin: 0 0 6px; font-weight: 600; overflow-wrap: anywhere; }
.faktaadresse .felt-hjelp { display: inline-block; } /* egen linjehøyde når den brekker (#593) */
.faktahandlinger { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.faktahandlinger form { margin: 0; }
.faktatall { background: var(--felt-bg); border: 1px solid var(--kant-svak); border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; }
.faktatall-rad { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; padding: 4px 0; border-bottom: 1px solid var(--kant-svakest); }
.faktatall-rad:last-of-type { border-bottom: 0; }
.faktatall-navn { font-size: 13px; color: var(--dempet-mork); min-width: 0; }
/* Verdien brekker: et intervall eller et langt beløp på 320 px ved 150 % tekst gikk ut over kortet. */
.faktatall-verdi { font: 600 14px var(--sans); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; text-align: right; }
.faktatall-tom .faktatall-verdi { color: var(--dempet); font-weight: 500; }
.faktatall-rad .felt-hjelp { flex: 1 1 100%; font-size: 12px; overflow-wrap: anywhere; }
/* Tomtene samlet (#663): arealet per tomt og summen koden regner. Summen er
   ikke et felt, så den har ingen kildefarge fra rangen — bare «Regnet». */
.faktatomter { margin-bottom: 14px; }
.faktatomter h4 { margin: 0 0 4px; font: 600 12px var(--sans); color: var(--dempet-mork); }
.faktatomter dl { margin: 0; }
.faktatomter dt { overflow-wrap: anywhere; }
:is(.faktatomter, .visningstabell) .tomtmatrikkel { white-space: nowrap; } /* «1119-21/73» er kort og skal ikke brekke ved bindestreken */
.faktatomter dd { font-variant-numeric: tabular-nums; }
.faktatomter > p { margin: 4px 0 6px; font-size: 12px; }
.faktatomter form { margin: 0; }
.faktarad-forkastet dt, .faktarad-forkastet dd { color: var(--dempet); }
.faktarad-sum { border-bottom: 0; }
.faktarad-sum dt { font-weight: 600; color: inherit; }
.faktakilde-regnet { background: var(--felt-bg); color: var(--dempet-mork); border: 1px solid var(--kant-svak); }
.faktagruppe h4 { margin: 12px 0 4px; font: 600 12px var(--sans); color: var(--dempet-mork); }
.faktagruppe dl, .faktatomme dl { margin: 0; }
.faktarad { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 5px 0; border-bottom: 1px solid var(--kant-svakest); }
.faktarad dt { font-size: 13px; color: var(--dempet-mork); min-width: 0; }
.faktarad dd { margin: 0; min-width: 0; text-align: right; flex: 1 1 auto; }
.faktaverdi summary { cursor: pointer; list-style: none; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.faktaverdi summary::-webkit-details-marker { display: none; }
.faktaverdi[open] { text-align: left; }
.faktaverdi p { margin: 4px 0; font-size: 12px; overflow-wrap: anywhere; }
.faktakilde { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 5px; font: 500 11px/1.6 var(--sans); vertical-align: 1px; }
.faktakilde-analyse { background: var(--kant-svakest); color: var(--dempet-mork); }
.faktakilde-finn { background: var(--kant-svakest); color: var(--dempet-mork); }
.faktakilde-finn a { color: inherit; }
.faktakilde-dokument { background: var(--input-bg); color: var(--input-tekst); }
.faktakilde-dokument a { color: inherit; }
.faktakilde-person { background: var(--aksent-lys); color: var(--aksent); }
.faktabekreftet { margin-left: 4px; font: 400 11px/1.6 var(--sans); color: var(--dempet-mork); }
.faktaskjema { display: flex; gap: 6px; margin: 4px 0 2px; }
.faktaskjema input, .faktarad input[form] { flex: 1 1 6em; width: 100%; min-width: 0; padding: 5px 8px; border: 1px solid var(--felt-kant); border-radius: 6px; background: var(--input-bg); font: inherit; font-size: 14px; }
/* Feltet gir etter, knappen holder seg: krympet ble «Lagre» 3 px smalere enn teksten sin på 320 px ved 150 % tekst (#659). */
.faktaskjema button { flex: 0 0 auto; }
.faktatomme, .faktaendringer { margin-top: 10px; font-size: 13px; }
/* Caset (#759): svarene øverst, så årene, følsomheten og aksjekjøpet sammenfoldet. */
.caset-mangler { margin: 0 0 10px; font-size: 13px; }
.caset-mangler p { margin: 0 0 4px; }
.caset-mangler ul { margin: 0; padding-left: 20px; }
.caset-detaljer { margin-top: 10px; font-size: 13px; }
.caset-detaljer > summary { cursor: pointer; font-weight: 600; }
.caset-detaljer .svartabell { margin-top: 8px; }
.caset-selger ol { margin: 8px 0; padding-left: 22px; }
.caset-selger li { margin: 3px 0; }
.caset-selger ul { margin: 2px 0 0; padding-left: 18px; }
.caset-epost { display: block; box-sizing: border-box; width: 100%; margin: 4px 0 8px; padding: 8px; border: 1px solid var(--felt-kant); border-radius: 6px; background: var(--input-bg); font: inherit; font-size: 13px; resize: vertical; }
.caset-utkast ul { margin: 6px 0 0; padding-left: 18px; }
.caset-utkast li { margin: 3px 0; }
.caset-regnestykke { margin: 8px 0; }
.caset-regnestykke > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; padding: 3px 0; border-bottom: 1px solid var(--kant-svakest); }
.caset-regnestykke dt { min-width: 0; color: var(--dempet-mork); }
.caset-regnestykke dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.caset-regnestykke .caset-sum { font-weight: 600; border-bottom: 0; }
.faktatomme summary, .faktaendringer summary { cursor: pointer; color: var(--aksent); }
.faktaendringer ul, .melding-endringer ul { list-style: none; margin: 6px 0 0; padding: 0; }
.faktaendring { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 5px 0; border-bottom: 1px solid var(--kant-svakest); font-size: 13px; overflow-wrap: anywhere; }
.faktaendring form { margin: 0; }
.faktaendring > span { min-width: 0; flex: 1 1 12em; }
.melding-endringer { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--aksent-lys); }
/* #901: det svaret sier mangler, med handlingen i appen. */
.melding-mangler { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.melding-mangler > li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; min-width: 0; }
.melding-mangler > li > .felt-hjelp { flex: 1 1 100%; }
.melding-mangler .tomteier { flex: 1 1 14em; margin-top: 0; }
/* Tall fra dokumentene: et forslag står under feltet det gjelder, med sitatet
   og et ja eller nei. Tonen er dokumentkildens, så det leses som «et dokument
   sier» — ikke som en feil. */
.faktarad.med-forslag dd[data-verdi-tom] { color: var(--dempet); }
.faktarad dd.faktaforslag-liste { flex: 1 1 100%; text-align: left; }
/* #881: et felt et lag ikke svarte for, med grunnen under. */
.faktarad dd.faktaikkehentet { flex: 1 1 100%; text-align: left; }
.faktaikkehentet p { margin: 2px 0; font-size: 12px; overflow-wrap: anywhere; }
.faktaikkehentet summary { cursor: pointer; font-size: 12px; color: var(--dempet-mork); }
.faktaforelopig { margin-left: 4px; font: 400 11px/1.6 var(--sans); color: var(--dempet-mork); }
.faktaforslag { flex: 1 1 100%; margin: 6px 0 2px; padding: 8px 10px; border-left: 3px solid var(--sand); border-radius: 0 8px 8px 0; background: var(--felt-bg); font-size: 13px; }
.faktaforslag-tekst { margin: 0 0 4px; overflow-wrap: anywhere; }
.faktaforslag-knapper { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.faktaforslag-knapper form { margin: 0; }
.faktasitat, .faktasitater { margin: 4px 0; font-size: 12px; color: var(--dempet-mork); overflow-wrap: anywhere; }
.faktasitater { padding-left: 16px; }
.faktasitater li { margin: 2px 0; }
.faktadokumenter { margin: 0 0 10px; font-size: 13px; }
.faktadokumenter > form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 8px; }
.faktalesinger summary, .faktaavvist summary { cursor: pointer; color: var(--aksent); }
.faktalesinger > ul { list-style: none; margin: 6px 0 0; padding: 0; }
.faktalesinger > ul > li { padding: 5px 0; border-bottom: 1px solid var(--kant-svakest); overflow-wrap: anywhere; }
.faktalesinger form { margin: 4px 0 0; }
.faktaavvist { margin-top: 2px; font-size: 12px; }
.faktaavvist ul { margin: 4px 0; padding-left: 16px; color: var(--dempet-mork); }
[data-les-dokumenter][data-leser] button { display: none; }
[data-fakta-oppdatert] { animation: faktablink 1.2s ease-out 1; }
@keyframes faktablink { from { box-shadow: 0 0 0 3px var(--aksent-lys); } to { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { [data-fakta-oppdatert] { animation: none; } }

/* Vurderingen (#534). Verdien øverst i en rolig flate med intervallet stort —
   det er svaret — og metodene under som kan åpnes for forutsetningene. */
.vurdering-handlinger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.vurdering-handlinger form { margin: 0; }
.vurdering-nedlasting { font-size: 13px; color: var(--dempet-mork); }
.vurdering-tittel { margin: 18px 0 6px; font: 600 13px var(--sans); color: var(--dempet-mork); }
.verdi { background: var(--felt-bg); border: 1px solid var(--kant-svak); border-radius: 10px; padding: 10px 14px; }
.verdi-intervall { margin: 0; font: 600 22px var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.verdi-referanser { margin: 4px 0 6px; font-size: 13px; color: var(--dempet-mork); overflow-wrap: anywhere; }
.verdimetoder { list-style: none; margin: 6px 0 0; padding: 0; }
.verdimetode { border-top: 1px solid var(--kant-svakest); padding: 6px 0; }
.verdimetode summary { cursor: pointer; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.verdimetode-navn { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.verdimetode-verdi { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.verdimetode-verdi .felt-hjelp { display: inline-block; } /* egen linjehøyde når den brekker (#593) */
.verdimetode.tom .verdimetode-verdi { color: var(--dempet); font-weight: 500; }
.verdimetode-forutsetninger { margin: 4px 0; padding-left: 18px; font-size: 13px; color: var(--dempet-mork); }
.verdimetode-forutsetninger li, .verdimetode p { overflow-wrap: anywhere; }
.vurdering-notat .svartekst { margin-top: 6px; }
.sjekkliste { list-style: none; margin: 0; padding: 0; }
.sjekkpunkt { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--kant-svakest); font-size: 14px; min-width: 0; }
.sjekkpunkt-merke { flex: 0 0 auto; width: 1.2em; text-align: center; font-weight: 700; }
.sjekkpunkt.finnes .sjekkpunkt-merke { color: var(--aksent); }
.sjekkpunkt.mangler-dok .sjekkpunkt-merke { color: var(--dempet); }
.sjekkpunkt-tekst { min-width: 0; overflow-wrap: anywhere; }
.vurdering-festede { margin-top: 4px; }
.melding-fot form[data-skjema="fest"] { margin: 0; }

/* Sammenlignbare saker (#533). Samme radform som dokumentlista; sitatet står
   dempet under, fordi det er beviset, ikke påstanden. */
.husetssyn-tittel { margin: 16px 0 6px; font: 600 13px var(--sans); color: var(--dempet-mork); }
.husetssyn-tittel:first-of-type { margin-top: 4px; }
.husetssyn-liste { list-style: none; margin: 0; padding: 0; }
.husetssyn-rad { padding: 8px 0; border-bottom: 1px solid var(--kant-svakest); min-width: 0; }
.husetssyn-hode { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; overflow-wrap: anywhere; }
.husetssyn-hode a { font-weight: 600; min-width: 0; }
.husetssyn-tall { font-variant-numeric: tabular-nums; white-space: nowrap; }
.husetssyn-rad .felt-hjelp { overflow-wrap: anywhere; }
.husetssyn-sitat { margin: 4px 0 0; padding-left: 10px; border-left: 2px solid var(--kant); font-size: 13px; color: var(--dempet-mork); overflow-wrap: anywhere; }
.husetssyn-antakelser { margin-top: 14px; font-size: 13px; }
.husetssyn-antakelser summary { cursor: pointer; color: var(--dempet-mork); }
.husetssyn-antakelser ul { margin: 6px 0 0; padding-left: 18px; }
.husetssyn-antakelser li { overflow-wrap: anywhere; }

/* Samtalen i prospektet (#532). Spørsmålet er en rolig flate med navnet til den
   som spurte; svaret er lesetekst uten boble, for det er et notat man skal lese
   og etterprøve, ikke en chatlinje. Kildene står under svaret med markøren som
   nummer, i samme form som markøren i teksten. */
.samtale-ingress { margin: 0 0 12px; font-size: 14px; color: var(--dempet-mork); }
.samtale-meldinger { list-style: none; margin: 0; padding: 0; }
/* Lista ruller for seg selv på brede skjermer, og må da kunne få fokus (WCAG 2.1.1): `tabindex` og et navn i markupen. */
.melding { padding: 14px 0; border-top: 1px solid var(--kant-svakest); min-width: 0; }
.melding:first-child { border-top: 0; padding-top: 4px; }
.melding-hode { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 6px; }
.melding-hvem { font: 600 13px var(--sans); overflow-wrap: anywhere; }
.melding-hode time { font-size: 12px; color: var(--dempet); }
.melding-sporsmal {
  margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--felt-bg); border: 1px solid var(--kant-svak);
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px;
}
.melding-svar .notat-status { color: var(--dempet-mork); margin-top: 4px; }
.melding-steg-live { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--dempet-mork); }
.melding-steg-live li { overflow-wrap: anywhere; }

.svartekst { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
.strommer { margin-top: 10px; }
.svartekst > :first-child { margin-top: 0; }
.svartekst p, .svartekst ul, .svartekst ol { margin: 0 0 10px; }
.svartekst ul, .svartekst ol { padding-left: 22px; }
.svartekst li { margin: 3px 0; }
.svartekst h4 { font: 700 15px var(--sans); margin: 16px 0 6px; }
.svartekst h5 { font: 600 14px var(--sans); margin: 14px 0 4px; }
.svartekst code { font: 500 13px var(--mono); background: var(--kant-svakest); padding: 1px 4px; border-radius: 4px; }
.svartabell { overflow-x: auto; margin: 0 0 12px; }
.svartabell table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
/* Cellene brekker ikke midt i et ord: «1 250 000 kr» delt over tre linjer er
   uleselig. Blir tabellen bredere enn kortet, ruller den for seg selv. */
.svartabell th, .svartabell td {
  text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--kant-svak); vertical-align: top;
  overflow-wrap: normal; word-break: normal; hyphens: manual;
}
.svartabell th { font-weight: 600; background: var(--felt-bg); }
.svartabell td.tall { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.svartabell th.tall { text-align: right; }
.svar-markor {
  display: inline-block; min-width: 1.4em; padding: 0 4px; margin: 0 1px; border-radius: 5px;
  font: 600 11px/1.5 var(--mono); text-align: center; vertical-align: 1px; text-decoration: none;
  background: var(--aksent-lys); color: var(--aksent);
}
a.svar-markor:hover { background: var(--aksent); color: #fff; }
.svar-markor.ukjent { background: var(--input-bg); color: var(--input-tekst); text-decoration: line-through; }

.grunnfesting { margin: 0 0 10px; padding: 7px 11px; border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; }
.grunnfesting p { margin: 0; }
.grunnfesting ul { margin: 4px 0 0; padding-left: 18px; }
.grunnfesting.ok { background: var(--aksent-lys); color: var(--aksent); }
.grunnfesting.advarsel { background: var(--input-bg); color: var(--input-tekst); border: 1px solid var(--input-kant); }
.grunnfesting.feil { background: var(--input-bg); color: var(--input-tekst); border: 1px solid var(--input-kant); font-weight: 600; }

.melding-kilder { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--kant); font-size: 13px; }
.melding-kilder li { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; min-width: 0; }
.melding-kilder li:target { background: var(--felt-bg); border-radius: 6px; }
.melding-kilde-tekst { min-width: 0; overflow-wrap: anywhere; flex: 1 1 auto; }
.melding-utdrag summary { cursor: pointer; color: var(--dempet-mork); font-size: 12px; }
.melding-utdrag p { margin: 4px 0 6px; white-space: pre-wrap; color: var(--dempet-mork); }
.melding-fot { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin-top: 8px; }
.melding-fot .felt-hjelp { overflow-wrap: anywhere; }
.melding-steg summary { cursor: pointer; font-size: 12px; color: var(--dempet-mork); }
.melding-steg ol { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--dempet-mork); }
.melding-steg li { overflow-wrap: anywhere; }

/* Skrivefeltet står ØVERST i kortet (16/9), og meldingene under med nyeste
   runde først — derfor bærer lista skillelinja, ikke skjemaet. */
.samtale-skjema { margin-top: 4px; }
.samtale-meldinger:not(:empty) { margin-top: 18px; padding-top: 2px; border-top: 1px solid var(--kant-svak); }
/* Meldingene ruller i sitt eget felt når det er plass til to kolonner, slik at
   skrivefeltet og høyrekolonnen står i ro mens man leser bakover. På telefon
   IKKE: der ville et rullefelt inni sida vært to flater som slåss om det samme
   fingerdraget, og treffe feil er lettere enn å treffe riktig. */
@media (min-width: 64.01em) {
  .samtale-meldinger { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
}
.samtale-skjema textarea { width: 100%; resize: vertical; }
.samtale-skjema .knapperad { align-items: center; flex-wrap: wrap; gap: 8px 14px; }

/* ----------------------------------------------------------- innstillinger */

/* Statusprikkene flyttet fra sidefoten til Innstillinger. */
.prikk { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.prikk.pa { background: var(--status-pa); box-shadow: 0 0 0 3px rgba(111, 191, 146, 0.18); }
.prikk.av { background: var(--neg); box-shadow: 0 0 0 3px rgba(176, 74, 34, 0.18); }
.prikk.dvale { background: #7e776b; box-shadow: 0 0 0 3px rgba(126, 119, 107, 0.18); }
.statuslinje { display: flex; align-items: center; gap: 8px; }
/* «42 / 44» er et tall, og alle tall står i mono — se skriftbolken øverst.
   Ingen egen størrelse: den ville stått stille når tekstforstørrelsen skalerer
   resten av linja. */
.forholdstall { font-family: var(--mono); font-weight: 500; white-space: nowrap; }

/* ------------------------------------------------------------- topplinja */

/* Topplinja bærer områdene, søket, innboksen og kontoen over hele
   innholdsruta. Den fulgte `.sidebredde` (1080 px) til 13/10, og da brakk
   områdene i to linjer også på en 1728 px skjerm. */
/* Høyden på topplinja, som en verdi andre sticky-elementer kan regne med: den
   ligger selv `sticky` øverst i innholdsruta, så alt annet som skal bli
   stående må starte NEDENFOR den. 56 px min-høyde + 1 px kantlinje. */
:root { --topplinje: 57px; }
.topplinje {
  position: sticky; top: 0; z-index: 25;
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 56px; padding: 8px 32px;
  background: var(--papir); border-bottom: 1px solid var(--kant);
}

/* Navnet på Min bruker: feltet og knappen på én linje, som ett valg. */
.navneskjema { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.navneskjema .felt { flex: 0 1 22em; }

/* ------------------------------------------------------------ brukermeny */

/* Knappen bærer navnet, ikke bare initialene: en rund prikk alene sier ikke at
   det er deg, og ikke at den kan åpnes. Se `Brukermeny` i views/layout.tsx. */
.brukermeny { position: relative; flex: 0 0 auto; margin-left: auto; }
.brukermeny-knapp {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border: 1px solid transparent; border-radius: 999px;
  list-style: none; cursor: pointer; color: var(--ink);
}
.brukermeny-knapp::-webkit-details-marker { display: none; }
.brukermeny-knapp:hover, .brukermeny[open] > .brukermeny-knapp { background: var(--kort); border-color: var(--kant); }
.brukermeny-initialer {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sand); color: var(--torv); font: 700 12px var(--sans); letter-spacing: 0.02em;
}
.brukermeny-knappnavn { font: 500 14px var(--sans); white-space: nowrap; }
/* Områdene skal stå på én linje: navnet står i panelet, og under 100em bærer
   knappen bare initialene. Under 85em tar ikonene ved områdene for mye. */
@media (max-width: 100em) {
  .brukermeny-knappnavn { display: none; }
}
@media (min-width: 56.01em) and (max-width: 85em) {
  .omradeknapp > svg { display: none; }
}
.brukermeny-pil { flex: 0 0 auto; color: var(--dempet); }

.brukermeny-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: 17em; max-width: calc(100vw - 32px);
  background: var(--kort); color: var(--ink); border: 1px solid var(--kant); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(40, 36, 24, 0.16); padding: 6px;
}
.brukermeny-hode { padding: 10px 12px 12px; border-bottom: 1px solid var(--kant-svak); margin-bottom: 6px; }
.brukermeny-navn { font: 600 14px var(--sans); overflow-wrap: anywhere; }
.brukermeny-epost { font-size: 13px; color: var(--dempet-mork); overflow-wrap: anywhere; margin-top: 2px; }
.brukermeny-rolle { font-size: 12px; color: var(--dempet); margin-top: 6px; }
.brukermeny-lenker { display: flex; flex-direction: column; }
.brukermeny-valg {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px;
  font: 500 14px var(--sans); color: var(--ink); text-decoration: none;
  background: none; border: none; cursor: pointer;
}
.brukermeny-valg:hover, .brukermeny-valg:focus-visible { background: var(--aksent-lys); outline: none; }
.brukermeny-valg[aria-current] { color: var(--aksent); font-weight: 600; }
.brukermeny-utlogging { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--kant-svak); }

/* Norsk setter sammen ord. «Dokumentutkast» er ÉTT ord på 30 px × 150 % tekst,
   altså bredere enn en 320 px telefon, og en overskrift som ikke får brekke
   dytter hele innholdsruta sidelengs — se `e2e/utkast.spec.ts`. `hyphens` gjør
   bruddet lesbart (dokument-utkast); `overflow-wrap` er nødutgangen for ord
   ordboka ikke kjenner, og må stå SIST for å bare gjelde da. */
.sidetittel { margin: 0 0 6px; font: 600 30px var(--display); letter-spacing: -0.02em; hyphens: auto; overflow-wrap: anywhere; }
.sideingress { margin: 0 0 22px; color: var(--dempet-mork); font-size: 14px; max-width: 42em; }
/* Sidetittelen med hovedhandlingen til høyre; under tittelen når det er trangt. */
.sidetopp { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 24px; }
.sidetopp-tekst { flex: 1 1 28em; min-width: 0; }
.sidetopp-handling { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
/* Legg til bygg: valget i lista står merket, og eiendommene i et prosjekt står innrykket under det. */
.byggkandidat[aria-current] { background: var(--aksent-lys); box-shadow: inset 3px 0 0 var(--aksent); padding-left: 12px; }
.avtalerad.byggkandidat-under { padding-left: 22px; }
.avtalerad.byggkandidat-under[aria-current] { padding-left: 22px; }
/* Søket, forslagene og porteføljen står under hverandre i venstre spalte (#897). */
.byggvalg { min-width: 0; }
/* Selskapet og prosjektet en eiendom utenfor porteføljen legges inn med, under hverandre. */
.tilportefoljen { display: grid; gap: 12px; }
/* Et felt skjemaet ble avvist for, merket med grunnen under seg. */
.felt input[aria-invalid="true"] { border-color: var(--neg); box-shadow: inset 0 0 0 1px var(--neg); }
.feltfeil { color: var(--neg); }
/* To kort side om side når det er plass, ellers under hverandre: lista og det valgte, eller to måter å starte på. */
.tospalt { display: grid; gap: 16px; align-items: start; }
/* To kort i den ene kolonnen av en tospalt (#904): stablet med samme luft som spaltene. */
.kortstabel { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 64em) { .tospalt { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
/* Feltene i skjemaet for et bygg har hjelpetekst under seg, og står på linje i toppen. */
.prosjektskjema.objektskjema { align-items: start; }
.registerrad-merknad { display: block; }
/* Et valg og en knapp i en tabellcelle (#887): på én linje når kolonnen har plass, ellers to. */
.celleskjema { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.celleskjema .felt { flex: 0 1 auto; min-width: 0; }
.celleskjema .felt select { width: auto; max-width: 100%; padding: 5px 8px; font-size: 13px; }
/* Fanene på en side med mange deler: brekker over flere linjer, ruller aldri sidelengs. */
.faner { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--kant); }
.fane {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; margin-bottom: -1px;
  font: 600 14px var(--sans); color: var(--dempet-mork); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.fane:hover { color: var(--aksent); }
.fane.aktiv { color: var(--aksent); border-bottom-color: var(--aksent); }
.fane-antall { font: 600 11px var(--mono); padding: 1px 6px; border-radius: 999px; background: var(--aksent-lys); color: var(--aksent); }

/* Under ~56em er 248 px sidebar mer enn halve skjermen. Da legger den seg på
   tvers øverst i stedet, og innholdet får hele bredden. */
@media (max-width: 56em) {
  .skall { flex-direction: column; }
  .sidebar { flex: 0 0 auto; padding: 14px 16px; }
  .merke { padding-bottom: 0; }
  /* UNDERMENYEN FALLER BORT PÅ TELEFON, og det er et valg om rekkefølge, ikke
     om plass. Sidefeltet ligger ØVERST her, og topplinja med de fem områdene
     under det — undersidene ville altså stått foran områdene de hører under,
     altså hierarkiet opp-ned. Å gjengi områdene i sidefeltet i tillegg ville
     gitt to navigasjoner med samme lenker i markupen, som en skjermleser leser
     to ganger.
     Her er topplinja menyen, og det andre nivået nås som før 16/9: kortene på
     inngangssida, som sier hva hver underside svarer på. Brødsmula står
     uendret, så veien tilbake fra en detaljside finnes fortsatt. */
  .sidebar .meny { display: none; }
  /* Sidefeltet ligger øverst på sida her. Brukermenyen flyttes opp til høyre
     for logoen, der man leter etter den — samme element, se `Brukermeny`.
     Navnet og pila faller bort: på en telefon er initialene knappen. */
  .skall { position: relative; }
  .brukermeny { position: absolute; top: 10px; right: 12px; z-index: 30; }
  .brukermeny-knapp { padding: 4px; }
  .brukermeny-knapp:hover, .brukermeny[open] > .brukermeny-knapp { background: rgba(255, 255, 255, 0.08); border-color: transparent; }
  .brukermeny-knappnavn, .brukermeny-pil { display: none; }
  .merke { padding-right: 56px; }
  /* Fem lenker legger seg på tvers her i stedet for å spise fem rader av
     høyden over innholdet. `flex-wrap` gjør at de brekker til neste rad når
     teksten forstørres, framfor å presse sidefeltet ut av skjermen. */
  .meny { flex-direction: row; flex-wrap: wrap; }
  .menyknapp { padding: 9px 12px; }
  .sidebredde { padding: 22px 18px 70px; }
  /* Brukermenyen står ved logoen her. Områdene bærer sin egen luft, og
     søkefeltet får sideluften til teksten under. */
  .topplinje { position: static; min-height: 0; padding: 0 8px 8px; border-bottom: 0; }
  /* Uten sidefelt står merket og brukermenyen på første rad i topplinja,
     knappene på raden under, og innboksen og søket under dem. */
  .uten-sidefelt .topplinje { justify-content: flex-start; padding: 8px; border-bottom: 1px solid var(--kant); }
  .uten-sidefelt .topp-merke { order: -2; }
  .uten-sidefelt .topplinje .brukermeny { position: static; order: -1; margin-left: auto; }
}

/* ------------------------------------------------------------- byggeklosser */

.kort {
  background: var(--kort); border: 1px solid var(--kant);
  border-radius: var(--radius); box-shadow: 0 1px 2px rgba(40, 36, 24, 0.04);
  padding: 20px 24px; margin-top: 18px;
}
.kort-topp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
/* #511: «Stiftelsesdokument/vedtekter/protokoll» stakk 425/304 px ved 150 %
   tekst — samme `min-width: auto`-felle som resten av fila. `h3` er et
   flex-barn i `.kort-topp` og krymper aldri under sitt eget innhold uten
   `min-width: 0`; `overflow-wrap` er nødutgangen der ordet ikke har et mellomrom
   å brytes på. */
.kort-topp h3 { margin: 0; font: 700 15px var(--sans); min-width: 0; overflow-wrap: anywhere; }
/* «Fest til hjem» i toppen av notatkortet (#933). */
.kort-topp > form[data-skjema="fest-til-hjem"] { margin: 0; }
.kort-nr { font: 500 12px var(--mono); color: var(--dempet); }
.kort-bi { font-size: 11px; color: var(--dempet); }

/* Rammen for den som ikke er innlogget — ingen meny, intet søk. Luften bæres
   av rammen selv, ikke av en `.sidebredde` inni, så de to ikke legger seg
   oppå hverandre på en telefon. */
.innloggingsramme { max-width: 460px; margin: 0 auto; padding: 48px 16px 80px; }
.innloggingsramme-merke { color: var(--ink); padding: 0 0 24px; justify-content: center; }
.innloggingsramme-merke .merke-under { color: var(--dempet); } /* sidemenyens grønngrå er laget for torv, og er 2,6:1 på papir */
.innloggingsramme .sidetittel { text-align: center; }

/* #119: innloggingsskjemaene er ikke et datatungt kort — de skal ikke strekke
   seg til `.sidebredde` sin fulle 1080px. */
.innloggingskort { max-width: 420px; margin-left: auto; margin-right: auto; }

/* Seksjonsetiketten er fast bredde, versaler og vid sperring — det er den som
   sier «her begynner en ny bolk» uten å ta plassen til en overskrift. */
.kicker {
  font: 500 10px var(--mono); letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--dempet); margin-bottom: 7px;
}
.dempet { color: var(--dempet); }
.liten { font-size: 11.5px; }
.mono { font: 500 12px var(--mono); }
.note { font-size: 11.5px; line-height: 1.5; color: var(--dempet); margin: 10px 0 0; }
.kursiv { font-style: italic; }
.tall-pos { color: var(--aksent); font-weight: 700; }
.tall-neg { color: var(--neg); font-weight: 700; }

.knapp {
  padding: 12px 20px; background: var(--aksent); color: #fff; border: none;
  border-radius: 10px; font: 700 14px var(--sans); cursor: pointer;
}
.knapp:disabled { opacity: 0.5; cursor: not-allowed; }
.knapp.mork { background: var(--mork); }
.knapp.gronn { background: var(--gronn-knapp); }
.knapp.hul { background: #fff; color: var(--aksent); border: 1px solid var(--aksent); }

.knapperad { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }

.lnk {
  text-decoration: none; font: 600 13px var(--sans); color: #5e6359;
  border: 1px solid var(--kant); border-radius: 9px; padding: 9px 13px;
  transition: border-color 0.15s, color 0.15s; overflow-wrap: anywhere;
}
.lnk:hover { border-color: var(--aksent); color: var(--aksent); }
.knapplenke { display: inline-block; margin-top: 12px; }
.lenkeblokk { margin-top: 14px; }
.lenkerad { display: flex; flex-wrap: wrap; gap: 9px; }

/* VEIEN VIDERE INNE I ET OMRÅDE (#230).
   Rutenettet har `min(240px, 100%)` som gulv, ikke 240px: et fast px-gulv står
   stille når teksten forstørres, og da stikker kortene ut av en 320 px telefon
   i stedet for å legge seg under hverandre. `min-width: 0` på kortet er den
   andre halvdelen — standardverdien `auto` betyr «aldri smalere enn
   min-content», og et langt ord ville dyttet sporet ut over viewportet. */
/* Sammendragsrader på inngangssidene (#230) — nærmeste frister, kontrakter
   som mangler utfall, dyreste byggtyper. Flex med `wrap` og ikke et grid:
   radene har ulikt antall felt, og et fast kolonneoppsett ville etterlatt
   tomme spor i den ene for å passe den andre. Datoen holdes samlet med
   `nowrap`; alt annet får brekke. */
.avtalerader { display: flex; flex-direction: column; margin-top: 12px; }
.avtalerad {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 11px 2px; border-top: 1px solid var(--kant-svak);
  text-decoration: none; color: inherit;
}
.avtalerad:first-child { border-top: 0; }
.avtalerad:hover .avtalerad-navn { color: var(--aksent); }
.avtalerad-dato { font: 600 14px var(--mono); color: var(--ink); white-space: nowrap; }
.avtalerad-navn { font: 600 14px var(--sans); overflow-wrap: anywhere; hyphens: auto; }
.avtalerad-naar { font-size: 13px; color: var(--dempet-mork); }
.avtalerad-kilde { font-size: 12px; color: var(--dempet); overflow-wrap: anywhere; flex: 1 1 100%; }

.veivalg { margin-top: 26px; }
.veivalgrutenett {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px; margin-top: 10px;
}
.veivalgkort {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  background: var(--kort); border: 1px solid var(--kant); border-radius: 12px;
  padding: 15px 17px; text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.veivalgkort:hover { border-color: var(--aksent); box-shadow: 0 1px 3px rgba(40, 36, 24, 0.07); }
.veivalg-navn { font: 600 15px var(--sans); color: var(--ink); overflow-wrap: anywhere; hyphens: auto; }

/* Rutene på prosjektets oversikt (#1119): én per funksjon som er slått på, som bokser (#1124). */
.prosjektruter { margin-top: 18px; }
.prosjektruter > .seksjonstittel { margin: 0; }
.rute-linjer { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.rute-linjer li { min-width: 0; overflow-wrap: anywhere; }
.funksjonsvalg { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.funksjonsvalg-rad { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.funksjonsvalg-felt { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.tilprosjekt-med { margin-left: 24px; min-width: 0; font-size: 13.5px; }
.tilprosjekt-med ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.tilprosjekt-med li { min-width: 0; overflow-wrap: anywhere; }
.funksjonsvalg-navn { font-weight: 600; }
.veivalg-hva { font-size: 13px; line-height: 1.5; color: var(--dempet-mork); }

.brikkerad { display: flex; flex-wrap: wrap; gap: 8px; }
.brikke {
  background: #fff; border: 1px solid var(--kant); border-radius: 7px;
  padding: 5px 10px; color: #5e6359; font-size: 12px; overflow-wrap: anywhere;
}

/* Mappekategori-fasetten (#466): brikkerad av lenker, med antall i hvert valg. */
.fasettrad { margin: 10px 0 14px; }
.fasett-brikke { text-decoration: none; color: var(--dempet-mork); }
.fasett-brikke:hover { border-color: var(--aksent); color: var(--aksent); }
.fasett-valgt { background: var(--aksent-lys); color: var(--aksent); border-color: var(--aksent); }
.fasett-antall { font-size: 11px; color: var(--dempet); }
.fasett-valgt .fasett-antall { color: var(--aksent); }

.meldingskort {
  background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radius);
  padding: 24px; margin-top: 18px; color: var(--dempet-mork);
  /* En feil fra en øy (#625) kan bære et variabelnavn eller en sti som ikke
     brekker, og da stakk kortet ut av faktaarket ved 150 % tekst. */
  overflow-wrap: anywhere;
}
.tomtilstand { margin-top: 60px; max-width: 34em; }
.tomtilstand :is(h1, h2) { font: 600 30px var(--display); letter-spacing: -0.02em; margin: 0 0 10px; }
.tomtilstand p { color: var(--dempet-mork); font-size: 14.5px; line-height: 1.6; }

/* -------------------------------------------------------------------- søk */

.sok {
  background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radius);
  padding: 18px 20px; display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
}
/* Prospektene står over adresseoppslaget på Analyse (#530). */
.kort + .sok { margin-top: 18px; }
.sokfelt { flex: 1 1 16em; position: relative; }
.sokfelt input {
  width: 100%; padding: 12px 14px; border: 1px solid #ded9cc; border-radius: 10px;
  background: var(--felt-bg); font: 500 15px var(--sans); color: var(--ink);
}
.forslag {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: #fff; border: 1px solid var(--kant); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(40, 36, 24, 0.12); overflow: hidden;
}
.forslag[hidden] { display: none; }
.forslagrad {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 10px 13px; cursor: pointer; font: 400 13.5px var(--sans);
  border-bottom: 1px solid #f2eee4; overflow-wrap: anywhere;
}
.forslagrad:hover, .forslagrad:focus { background: var(--felt-bg); }
.forslagfeil { margin: 0; padding: 10px 13px; font: 400 13.5px var(--sans); color: var(--input-tekst); overflow-wrap: anywhere; }

/* --------------------------------------------------------------- rapport */

.rapporthode {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin: 34px 2px 22px; flex-wrap: wrap;
}
.rapporthode h1 { margin: 0; font: 600 32px/1.1 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.rapporthode-tekst { flex: 1 1 20em; }
.rapporthode .brikkerad { margin-top: 14px; }
.rapporthode-handling { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
/* «Vurder å kjøpe» har «Hold det privat» under seg (#900): knappene ved siden av
   står på linje med knappen, og forklaringen brekker under den. */
.rapporthode-handling .knapperad { align-items: flex-start; }
.vurderkjop { max-width: 24em; }
.vurderkjop .felt { margin-top: 6px; }

/* ---------------------------------------------------------- konsernkartet */

/* TALLBOKSEN (#607): et hvitt kort med noen store tall og en linje under
   hvert. Den sto i fire kopier (`.konsernsum`, `.drifttall`, `.kontrakttall`,
   `.bankbelaning`) med hvert sitt gulv, sin luft og sin skrift, og én av dem
   manglet `min-width: 0`. Tallet er display-skrift, som `.nokkeltall-verdi`. */
.tallboks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11em, 100%), 1fr)); gap: 14px;
  background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radius);
  padding: 14px 18px; margin-top: 12px;
}
.tallboks-post { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tallboks-post .liten { line-height: 1.5; overflow-wrap: anywhere; }
.tallboks-stort { font: 600 24px var(--display); letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }

.stillekapital {
  background: var(--input-bg); border: 1px solid var(--input-kant); border-radius: var(--radius);
  padding: 18px 20px; margin-top: 16px;
}
.stille-hoved { font-size: 15px; line-height: 1.6; margin: 6px 0 10px; color: var(--input-tekst); }
.stille-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.stille-post {
  background: #fff; border: 1px solid var(--input-kant); border-radius: 7px;
  padding: 5px 10px; font: 500 12.5px var(--sans); color: var(--input-tekst); overflow-wrap: anywhere;
}

.eierskifter {
  background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radius);
  padding: 18px 20px; margin-top: 16px;
}
.eierskifte-hendelse { margin: 10px 0; }
.eierskifte-ar { font: 700 12.5px var(--sans); color: var(--dempet-mork); margin-bottom: 4px; }
.eierskifte-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.eierskifte-post { font-size: 13px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.eierskifte-post[data-type="ny"] { color: #2f6b3f; }
.eierskifte-post[data-type="ute"] { color: #8a3b3b; }

.konsernrad {
  display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 0.8fr));
  gap: 12px; align-items: start; padding: 13px 16px;
}
.konsernrad > * { min-width: 0; }
.konsern-navn { display: flex; flex-direction: column; gap: 2px; }
.konsern-selskap { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font: 600 14px var(--sans); color: var(--ink); }
.konsern-grunn { line-height: 1.4; overflow-wrap: anywhere; }
.konsern-celle { text-align: right; font-size: 13px; }
.frømerke {
  background: #e9eef6; color: #3d5578; border-radius: 6px;
  padding: 2px 7px; font: 600 11px var(--sans);
}
.konsernfot { margin: 14px 2px; line-height: 1.55; max-width: 52em; }

/* Uten kolonneoverskrifter er «76,1 · 0 · 1,3 · 39,7 %» fire tall uten mening.
   Etiketten bor derfor på cella som et data-attributt og skrives ut når hodet
   forsvinner — ikke som en skjult kolonne som må holdes i synk. */
@media (max-width: 52em) {
  .konsernrad { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .konsern-navn { grid-column: 1 / -1; }
  .konsern-celle { text-align: left; }
  .konsern-celle::before {
    content: attr(data-etikett) ": ";
    color: var(--dempet); font-family: var(--sans); font-size: 11.5px;
  }
  .tabellhode.konsernrad { display: none; }
}

/* ------------------------------------------------------- presedensarkivet */

.temaknapp {
  border: 1px solid var(--kant); background: #fff; border-radius: 9px;
  padding: 9px 13px; font: 600 13px var(--sans); color: #5e6359; cursor: pointer;
}
.temaknapp.valgt { background: var(--ink); border-color: var(--ink); color: #fff; }

.utfall {
  display: inline-block; border-radius: 6px; padding: 3px 8px;
  font: 600 11.5px var(--sans); white-space: nowrap;
}
.utfall-avslått { background: var(--neg-lys); color: var(--neg); }
.utfall-innsigelse { background: #fdf0dc; color: #8a5a12; }
.utfall-uttale { background: #f0efe9; color: #5e6359; }

.presedens-tittel { color: var(--ink); font: 600 14px var(--sans); text-decoration: none; overflow-wrap: anywhere; }
.presedens-tittel:hover { text-decoration: underline; }

/* Kvittering etter «hent inn på nytt». Uten den kan man ikke se forskjell på
   en fersk rapport og den som lå i cachen — og da er knappen verdiløs. */
.kvittering {
  background: #f2f6ee; border: 1px solid #cfdcc4; border-radius: var(--radius);
  padding: 12px 16px; margin: 0 0 18px; color: #46543c; font-size: 13.5px; line-height: 1.5;
}

.toppkort { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.toppkort .kort { margin-top: 0; padding: 24px 26px; }
@media (max-width: 56em) { .toppkort { grid-template-columns: 1fr; } }

/* `flex-wrap`, ikke bare `gap`: `.flagg`-merkelappen er målt i `em` og vokser
   med tekstforstørringen, mens selve scoretallet er 70 px. På 320 px ved 150 %
   tekst klemte merkelappen tallet ned til 86 px av de 98 det trenger, og «/100»
   ble klippet. Med ombrekking legger merkelappen seg på egen linje i stedet. */
.score-topp { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.scoretall { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; }
.scoretall-stor { font: 600 70px/0.9 var(--display); letter-spacing: -0.02em; }
.scoretall-av { font: 500 20px var(--display); color: var(--dempet); }
.flagg {
  background: var(--aksent-lys); color: var(--aksent); font: 700 12px var(--sans);
  padding: 6px 12px; border-radius: 999px; max-width: min(14em, 100%); text-align: right;
}

/* HVOR SCOREN KOM FRA (#187). `flex-wrap` av samme grunn som `.score-topp`:
   merkelappen står med `white-space: nowrap`, og på 320 px ved 150 % tekst er
   «Kalibrert score» bredere enn plassen ved siden av regelscoren. Da legger de
   seg under hverandre i stedet for å presse kortet utenfor skjermen. */
.scorekilde { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 12px; }
/* `overflow-wrap: anywhere` fordi grunnen navngir en FIL og en KATALOG, og
   `MODELL_STI` kan være en absolutt sti uten et eneste mellomrom å brekke på.
   Uten den sto forklaringen til 329 px i et 320 px viewport ved 150 % tekst. */
.scorekilde-hvorfor { flex-basis: 100%; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.scorekilde-regeltall { font-size: 12px; color: var(--dempet-mork); }
/* Tre kilder, tre toner: målt mot ekte utfall i myrgrønt, kalibrert i den samme
   sandtonen som «krever input», og regelvektene i nøytralt grått. En regelscore
   som bærer aksentfargen leses som et målt tall. */
.scorekilde-merke.scorekilde-modell { background: var(--aksent-lys); color: var(--aksent); }
.scorekilde-merke.scorekilde-kalibrert { background: var(--input-bg); color: var(--utleie); }
.scorekilde-merke.scorekilde-regel { background: var(--kant-svak); color: var(--dempet-mork); }

/* MODELLENS VURDERING (#167), under komponentene i scorekortet. Samme skillelinje
   som komponentene: det er en annen måte å veie de samme lagene på, ikke et nytt kort. */
.modellvurdering { margin-top: 18px; border-top: 1px solid var(--kant-svak); padding-top: 14px; min-width: 0; }
.modellvurdering-topp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 6px; }
.modellvurdering-tall { font-size: 22px; font-weight: 700; }
.modellvurdering-begrunnelse { margin: 10px 0 0; line-height: 1.45; overflow-wrap: anywhere; }
.modellvurdering-forhold { margin-top: 10px; font-size: 13px; }
.modellvurdering-forhold-tittel { font-weight: 700; }
.modellvurdering-forhold ul { margin: 4px 0 0; padding-left: 18px; }
.modellvurdering-forhold li { overflow-wrap: anywhere; }
.modellvurdering-forhold-navn { font-weight: 600; }

.stolpe-topp { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; gap: 10px; }
.stolpe-topp span:first-child { color: #5e6359; font-weight: 600; }
.stolpe-spor { height: 8px; border-radius: 6px; background: #efebe0; overflow: hidden; }
.stolpe-fyll { height: 100%; border-radius: 6px; }
.fyll-pos { background: var(--aksent); }
.fyll-neg { background: var(--neg); }

.stolpe + .stolpe { margin-top: 10px; }

/* NULLAKSE (#156) — friksjon til venstre, potensial til høyre, akse imellom.
   Halvdelene er nøyaktig 50 % hver, og aksen ligger absolutt oppå skjøten, så
   den ikke stjeler bredde fra noen av sidene. */
.nullakse { margin-top: 22px; }
.nullakse-topp {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; font-size: 13px; margin-bottom: 6px;
}
.nullakse-etikett { color: var(--dempet-mork); font-weight: 600; }
.nullakse-spor {
  position: relative; display: flex; height: 10px;
  background: #efebe0; border-radius: 6px;
}
.nullakse-halv { flex: 1 1 50%; display: flex; }
.nullakse-venstre { justify-content: flex-end; }
.nullakse-fyll { height: 100%; }
.nullakse-venstre .nullakse-fyll { border-radius: 6px 0 0 6px; }
.nullakse-hoyre .nullakse-fyll { border-radius: 0 6px 6px 0; }
/* 1,5 px svart akse, jf. `design/planum-redesign.md` grep 1. Den stikker litt
   opp og ned utenfor sporet, ellers leses den som et skille mellom to fyll og
   ikke som et nullpunkt begge måles fra. */
.nullakse-akse {
  position: absolute; left: 50%; top: -4px; bottom: -4px;
  width: 1.5px; margin-left: -0.75px; background: var(--mork);
}
.nullakse-bunn {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px;
}
.nullakse-hvorfor { margin-top: 6px; font-size: 12px; }

.komponenter {
  margin-top: 22px; border-top: 1px solid #efebe0; padding-top: 16px;
  display: flex; flex-direction: column; gap: 11px;
}
.komponent { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
/* Poengsummen krymper ikke — den er tre tegn og har ingen ombrekkingspunkt, så
   ved 150 % tekst ble «−15» klippet i stedet for at begrunnelsen ved siden av
   brakk over en linje til. Begrunnelsen er den som TÅLER å brekke. */
.komponent .tall-pos, .komponent .tall-neg { flex: 0 0 auto; }
.komponent-navn { font-weight: 600; font-size: 13.5px; color: #2c302a; }
.komponent-tekst { font-size: 12px; }

.timingkort { display: flex; flex-direction: column; }
.timing-vurdering { font: 600 22px/1.25 var(--display); letter-spacing: -0.02em; margin-top: 8px; }
.signaler { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.signal { display: flex; gap: 11px; align-items: flex-start; }
.pil { font-size: 14px; flex: 0 0 auto; color: var(--dempet); }
.pil-for { color: var(--aksent); }
.pil-mot { color: var(--neg); }
.signal-navn { font-weight: 700; font-size: 13.5px; color: #2c302a; }
.signal-tekst { font-size: 12.5px; line-height: 1.45; color: var(--dempet-mork); margin-top: 2px; }
.forbehold { margin-top: auto; border-top: 1px solid #efebe0; padding-top: 14px; }
.forbehold-rad { font-size: 12px; line-height: 1.5; color: var(--dempet); }

.kartboks { height: 420px; border-radius: 12px; overflow: hidden; border: 1px solid var(--kant); }

.grupperutenett {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24em, 100%), 1fr));
  gap: 18px; margin-top: 18px;
}
.gruppekort { margin-top: 0; padding-bottom: 8px; }

/* `flex-wrap` (#662): en lang verdi («Morenemateriale, sammenhengende dekke,
   stedvis med stor mektighet») krympet etiketten «Løsmasse» til 14 px på
   320 px ved 150 % tekst, fordi flex krymper begge kolonnene i forhold til
   bredden de ville hatt. Nå legger verdien seg på en egen linje under
   etiketten når de ikke får plass ved siden av hverandre. */
.krow {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; width: 100%;
  padding: 12px 6px; margin: 0 -6px; border: none; border-top: 1px solid var(--kant-svak);
  background: none; text-align: left; cursor: pointer; border-radius: 8px;
  transition: background 0.12s; font: inherit;
}
.krow:hover, .krow:focus-visible { background: var(--felt-bg); }
.krow:hover .kchev { color: var(--aksent); }
/* `min-width: 0` fordi standardverdien `auto` betyr «aldri smalere enn
   min-content»: på 320 px ved 150 % tekst presset etikettene «Kartverket –
   adresse/matrikkel» og «Reguleringsplan» kildekolonna 11 px ut av kortet, og
   ble klippet bort i stedet for å brytes. `overflow-wrap` er samme grep som
   `.krow-verdi` under, for etiketter som er ett langt ord. */
.krow-venstre { display: flex; flex-direction: column; min-width: 0; }
.krow-label { font: 500 14px var(--sans); color: #5e6359; display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
/* `x.label` var før en bar tekstnode i `.krow-label` — en ANONYM flex-boks,
   der Chromium ikke alltid regner `overflow-wrap` inn i automatisk
   minstestørrelse. Et ekte element her retter det, samme grunn som
   `.krow-venstre` over. Ett enkelt langt ord («barnehage», «kjøpesenter»)
   presset kortet 2–6 px ut på 320 px ved 150 % tekst (#204). */
.krow-labeltekst { min-width: 0; overflow-wrap: anywhere; }
.kchev { color: var(--dempet); font-size: 13px; flex-shrink: 0; }
/* #632: undertittelen er ofte ett langt ord eller en sti, og presset `.krow-venstre` 28 px ut på 320 px. */
.krow-sub { font-size: 12px; line-height: 1.4; color: var(--dempet); margin-top: 3px; overflow-wrap: anywhere; }
.krow-hoyre { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; margin-left: auto; }
.krow-verdi { font: 600 15px var(--sans); overflow-wrap: anywhere; text-align: right; }
.merkelapp {
  font: 700 10px var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; white-space: nowrap;
}
.merkelapp.pos { background: var(--aksent-lys); color: var(--aksent); }
.merkelapp.neg { background: var(--neg-lys); color: var(--neg); }
/* #687: et øyeblikksbilde som bygges på nytt. Samme gule som et felt som skal fylles. */
.merkelapp.oppdateres { background: var(--input-bg); color: var(--input-tekst); }
/* #853: et dokument som ikke gjelder lenger. */
.merkelapp.utdatert { background: #edeae0; color: var(--dempet-mork); }

/* ------------------------------------------------------------- kalkylen */

/* `flex-wrap` og `min-width: 0` er det som holder raden innenfor et 320 px
   viewport ved 150 % tekst (#215). Uten dem arver begge flex-barna
   `min-width: auto` — «aldri smalere enn min-content» — og et langt kildenavn
   presser raden ut over skjermkanten i stedet for å brekke. Symptomet er
   stille: `body` klipper det som stikker ut, så teksten blir borte uten at
   noe ruller. */
.kalrad {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--kant-svak); font-size: 13.5px;
}
.kalrad-navn { min-width: 0; flex: 1 1 12em; overflow-wrap: anywhere; }
.kalrad-navn .fylt { font-weight: 600; }
.kalrad-navn .ufylt { font-weight: 600; color: var(--dempet); }
.kalrad-mangler { font-size: 11.5px; color: var(--dempet); margin-top: 2px; overflow-wrap: anywhere; }
.kalrad-verdi { font: 700 14px var(--sans); color: #2c302a; overflow-wrap: anywhere; text-align: right; min-width: 0; }
/* Forbeholdet gjelder et tall SOM STÅR DER, og må derfor være mer synlig enn
   «mangler» — et tak som leses som et anslag er dyrere enn et tomt felt. */
.kalrad-forbehold { font-size: 11.5px; color: var(--neg); margin-top: 3px; overflow-wrap: anywhere; }

/* Rekkefølgekravene under kalkylen (#121). Sitatene er ordrett og kan være
   lange setninger — `overflow-wrap: anywhere` er det som holder dem innenfor
   et 320 px viewport ved 150 % tekst. */
.rekkefolge { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--kant); }
/* Ett langt ord («Reguleringsbestemmelsene») er bredere enn kortet på 320 px ved 150 % tekst (#662). */
.rekkefolge-tittel { margin: 0 0 4px; font: 700 13px var(--sans); overflow-wrap: anywhere; hyphens: auto; }
.rekkefolge-avvik { margin: 6px 0 0; font-size: 12px; color: var(--neg); overflow-wrap: anywhere; }
.rekkefolge-liste { margin: 10px 0 0; padding-left: 1.4em; display: grid; gap: 10px; }
.rekkefolge-liste li { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.rekkefolge-sitat { font-family: var(--display); display: block; }
.rekkefolge-side { display: block; margin-top: 2px; font-size: 11.5px; color: var(--dempet-mork); }
.rekkefolge-tom { margin-top: 14px; }
/* Byggehøyde og parkeringskrav (#33) står i samme bolk, under hver sin
   undertittel — det er skillet mellom «ingen krav» og «ikke sjekket». */
.rekkefolge-undertittel { margin: 14px 0 0; font: 700 12px var(--sans); color: var(--dempet-mork); }
.rekkefolge-tall { display: block; font-weight: 700; }
.rekkefolge-formaal { display: block; font-size: 11.5px; color: var(--dempet-mork); overflow-wrap: anywhere; }
.rekkefolge-formaal[data-tomtas] { font-weight: 700; color: inherit; }

/* Bolkens tellende merke (#126). Gul «krever input», samme tone som feltene —
   den sier at bolken venter på Planums egne tall, ikke at noe er galt. Tegl er
   forbeholdt friksjon, se `test/palett.test.ts`. */
.kalkyle-merke {
  display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 6px;
  background: var(--input-bg); border: 1px solid var(--input-kant); color: var(--input-tekst);
  font: 700 11px var(--sans); letter-spacing: 0.04em; overflow-wrap: anywhere;
}

/* DE TRE NØKKELTALLENE SKJEMAET ENDER I (#126).
   `minmax(min(11em, 100%), 1fr)` og ikke `minmax(11em, 1fr)`: et fast px-/em-gulv
   er nettopp det som presser rutenettet ut av et 320 px viewport når teksten er
   forstørret 50 %. Se mobilbolken i CLAUDE.md. */
.nokkeltall {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kant);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11em, 100%), 1fr)); gap: 12px;
}
/* Teksten under tallet brekker inni et langt ord som navnet og verdien gjør: «energimerkeregister» er 236 px ved 150 % tekst (#1051). */
.nokkeltall-celle {
  min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere;
  padding: 12px 14px; border-radius: 10px; background: var(--kant-svakest); border: 1px solid var(--kant-svak);
}
.nokkeltall-celle.ufylt { background: transparent; border-style: dashed; border-color: var(--kant-stiplet); }
.nokkeltall-navn {
  font: 700 9.5px var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dempet-mork); overflow-wrap: anywhere;
}
/* Nøkkeltall er display-skrift i spesifikasjonen — tallet er svaret, og skal
   kunne leses på en armlengdes avstand. */
.nokkeltall-verdi {
  font: 600 24px var(--display); letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere;
}
/* `ufylt` står på cella, aldri på verdien (#607): `Nøkkeltall` i `deler.tsx`. */
.nokkeltall-celle.ufylt .nokkeltall-verdi { font: 600 14px var(--sans); letter-spacing: 0; color: var(--dempet); }
.nokkeltall-enhet { font: 600 13px var(--sans); letter-spacing: 0; color: var(--dempet); }
.nokkeltall-mangler { font-size: 11.5px; color: var(--dempet); overflow-wrap: anywhere; }

/* #415: en celle med `detaljer` er et `<details>` — summen er svaret på
   skjermen, lista over hvilke leietakere den bygger på er ETT trykk unna, ikke
   pynt i markupen. Flex-kolonnen flytter inn i `<summary>`. */
details.nokkeltall-celle { display: block; }
details.nokkeltall-celle summary {
  cursor: pointer; display: flex; flex-direction: column; gap: 4px; list-style: none;
}
details.nokkeltall-celle summary::-webkit-details-marker { display: none; }
details.nokkeltall-celle[open] summary { margin-bottom: 10px; }
details.nokkeltall-celle .avtalerader { margin-top: 0; }

/* KILDEN UNDER ET TALL OG «ENDRE» DER DET STÅR (#899): `Kildefelt` i `deler.tsx`.
   Redigeringen er en `<details>`; en celle i nøkkeltallene som åpnes, tar hele
   raden, så skjemaet ikke presses inn i en celle på 120 px. */
.kildefelt { display: block; font: 400 12px/1.4 var(--sans); letter-spacing: 0; color: var(--dempet); text-align: left; }
.kildelinje { overflow-wrap: break-word; }
.kildelinje a { color: inherit; }
details.endre { margin-top: 2px; }
details.endre > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 2px 0;
  list-style: none; font-weight: 600; color: var(--aksent); text-decoration: underline; text-underline-offset: 2px;
}
details.endre > summary::-webkit-details-marker { display: none; }
.endre-innhold {
  margin-top: 8px; padding: 12px; border: 1px solid var(--kant); border-radius: 10px; background: var(--kort);
  display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--ink); font-weight: 400;
}
.endre-hva { margin: 0; color: var(--dempet-mork); overflow-wrap: break-word; }
.endre-deler { margin: 0; padding-left: 18px; }
.endre-deler li { overflow-wrap: break-word; }
/* Et beløp brekker aldri inne i tallet: tusenskillet er et vanlig mellomrom (`Beløp` i deler.tsx, #898). */
.belop { white-space: nowrap; }
/* I en rad i et kort står kilden under verdien, til høyre som den; skjemaet står til venstre. */
.kvrad-verdi .kildefelt { text-align: right; }
.endre-innhold { text-align: left; }
.endre-skjema { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.endre-skjema .felt { flex: 1 1 12em; min-width: 0; }
.endre-skjema .knapper { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.endre-avvik { margin: 0; color: var(--input-tekst); font-weight: 600; }
.endre-skjema > .endre-tittel { flex: 1 1 100%; font-weight: 600; color: var(--ink); }
.nokkeltall-celle:has(details.endre[open]) { flex-basis: 100%; grid-column: 1 / -1; }

/* NØKKELFAKTA (#905): `Nøkkelfaktakort` i `views/nokkelfakta.tsx`. Et tall som
   mangler, har feltet rett i raden: feltet, enheten og «Lagre» på én linje, som
   brekker under hverandre når teksten er stor. Linja under blokka er en
   definisjonsliste der hvert par står for seg og brekker som ord. */
.nokkelfakta .kvrad-verdi { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.nokkel-fyll { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; max-width: 100%; }
.nokkel-fyll input {
  flex: 1 1 9em; min-width: 0; max-width: 16em; padding: 6px 8px; font: 500 13px/1.3 var(--sans); color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--felt-kant); border-radius: 8px;
}
.endre-innhold .nokkel-fyll { justify-content: flex-start; }
.nokkel-enhet { font-size: 12px; color: var(--dempet); font-weight: 400; }
.nokkel-avvik { color: var(--neg); font-weight: 600; }
.nokkellinje { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--kant-svak); font-size: 13px; }
.nokkellinje-del { min-width: 0; max-width: 100%; }
.nokkellinje-del:has(details[open]) { flex-basis: 100%; }
/* Chromium legger ut innholdet i en lukket <details> (::details-content), og et
   skjema i en smal celle ble da 18 px bredt uten å vises. */
.nokkelfakta details:not([open]) > :not(summary) { display: none; }
.nokkellinje-del dt { color: var(--dempet-mork); font-size: 12px; }
.nokkellinje-del dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.nokkellinje-del .kildefelt { font-weight: 400; }
.tegnkart { height: 280px; border-radius: 10px; border: 1px solid var(--kant); }
/* Toppen på en ting-side: en celle er aldri smalere enn det lengste ordet i
   den (`min-width: auto` i en flex-rad, kappet av `max-width`), så
   «Næringsbebyggelse» brekker ikke til «Næringsbebygg / else» på en bred
   skjerm. `break-word` brekker et ord bare når det er bredere enn hele raden.
   Ord står i mindre skrift (`tekst` på `Tallcelle`). */
.tingside-hode .nokkeltall { display: flex; flex-wrap: wrap; }
.tingside-hode .nokkeltall-celle { flex: 1 1 10em; min-width: auto; max-width: 100%; }
.tingside-hode .nokkeltall-verdi { overflow-wrap: break-word; }
.nokkeltall-verdi.nokkeltall-tekst { font: 600 16px/1.3 var(--sans); letter-spacing: 0; }

.skjemagruppe { margin-top: 16px; }
/* Feltbolkene i utkastskjemaet. `fieldset` har `min-width: min-content` i
   nettleserens EGEN standardstil — nullstillingen øverst i fila tar den, og uten
   den ville et langt feltnavn som «Dokumentasjon og due diligence» dyttet hele
   skjemaet utenfor et 320 px viewport ved 150 % tekst. Se `e2e/utkast.spec.ts`. */
.feltgruppe { border: 0; padding: 0; margin: 18px 0 0; }
.feltgruppe-navn {
  display: block; padding: 0; margin-bottom: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dempet-mork); overflow-wrap: anywhere;
}
/* Nedlastinga er en `<a>` med `download` — den skal virke uten JavaScript, men
   se ut som knappen den er. `.knapp` setter `font` som stikkord, så størrelsen
   må settes her og ikke med `.liten`. */
.utkast-last-ned {
  margin-left: auto; display: inline-block; text-decoration: none;
  padding: 8px 14px; font: 700 12px var(--sans);
}
.feltrutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13em, 100%), 1fr)); gap: 11px; }
.felt { display: flex; flex-direction: column; gap: 4px; }
.felt-navn { font-size: 12px; color: #5e6359; overflow-wrap: anywhere; }
.felt-navn .merkelapp { margin-left: 6px; }
.felt input, .felt textarea, .felt select, .rundepunkt-kommentar {
  width: 100%; padding: 9px 11px; border: 1px solid var(--felt-kant); border-radius: 9px;
  background: var(--felt-bg); font: 600 14px var(--sans); color: var(--ink);
}
/* TOMT FELT = STIPLET KANT, UTFYLT = HEL (#126).
   `:placeholder-shown` er sann nøyaktig så lenge feltet er tomt, og den slår om
   MENS man taster — uten et eneste linje JavaScript, og uten at øya og CSS-en
   kan komme i utakt. Alle kalkylefeltene har `placeholder="—"`; uten den ville
   selektoren aldri slå til. Scopet til kalkyleskjemaet med vilje: i
   utkastskjemaet betyr et tomt felt «Må fylles ut» i dokumentet, som er en annen
   opplysning med sin egen visning. Et valg (lånetypen, #619) har ingen
   plassholder; der er det det tomme valget som står valgt. */
.kalkyleskjema .felt input:placeholder-shown,
.kalkyleskjema .felt select:has(option[value=""]:checked) {
  border-style: dashed; border-color: var(--felt-kant); background: transparent;
}
/* Et felt serveren ikke slapp gjennom, som «2026-02-30» som kjøpsdato (#646). */
.kalkyleskjema .felt input[aria-invalid="true"] { border-color: var(--input-kant); background: var(--input-bg); }
.felt textarea { font-weight: 500; line-height: 1.5; min-height: 5em; resize: vertical; }
.felt select { cursor: pointer; }
.felt-hjelp { font-size: 11px; line-height: 1.4; color: var(--dempet); overflow-wrap: anywhere; }
.felt-forslag { font-size: 11px; line-height: 1.4; color: var(--aksent); overflow-wrap: anywhere; }

.anbefaling {
  display: inline-block; font: 700 12px var(--sans); padding: 4px 11px;
  border-radius: 7px; margin-bottom: 14px;
}
.anbefaling.utvikling { background: var(--aksent-lys); color: var(--aksent); }
.anbefaling.utleie { background: var(--input-bg); color: var(--utleie); }
.anbefaling.fleksibel { background: #f0ece1; color: #5e6359; }
.anbefaling.ukjent { background: #f0ece1; color: var(--dempet); }
.begrunnelser { margin: 12px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: #5e6359; }

.stubrutenett { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15em, 100%), 1fr)); gap: 12px; margin-top: 14px; }
.stub { border: 1px dashed #d2cbba; border-radius: 10px; padding: 13px 15px; background: var(--felt-bg); }
.stub-topp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stub-navn { font: 700 13px var(--sans); color: #5e6359; }
.stub-merke {
  font: 700 9.5px var(--sans); letter-spacing: 0.07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; background: #ede9de; color: var(--dempet);
}
.stub-tekst { font-size: 12px; color: var(--dempet); margin-top: 5px; line-height: 1.45; }

/* ------------------------------------------------- tilgangen til en ting (#912) */

.begrensningskort { overflow-wrap: anywhere; }
.begrensning-spor { margin: 8px 0 10px; font-size: 13px; }
.begrensning-spor ul { margin: 6px 0 0; padding-left: 1.1em; }

/* --------------------------------------------------------------- notatet */

.notatkort {
  background: linear-gradient(180deg, #21271f, #1a1f18);
  border-radius: var(--radius); padding: 24px 26px; margin-top: 18px; color: #edefe9;
}
.notatkort-topp { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.notatkort-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sidebar-tekst);
}
.notatkort-tittel { font: 600 19px var(--display); margin-top: 5px; }
/* Notatet er rendret av serveren (#586), ikke rå markdown i en <pre>. */
.notat-tekst {
  color: #d6dacf; min-width: 0;
  background: rgba(0, 0, 0, 0.22); border: 1px solid #2f3a2c; border-radius: 11px;
  padding: 18px 20px; margin: 12px 0 0; overflow-wrap: anywhere;
}
.notat-svar { margin-top: 16px; }

/* MODELLSVARET PÅ MØRK BUNN (#586) — `/minne` og tomtenotatet. `.svartekst`,
   `.melding-kilder` og tabellene er tegnet for papirbakgrunnen; her arver de
   den lyse teksten, og det som har egen bakgrunn må følge med. */
:is(.minne-svarboks, .notatkort) .svartabell th { background: rgba(232, 228, 216, 0.1); }
:is(.minne-svarboks, .notatkort) .svartabell :is(th, td) { border-bottom-color: rgba(232, 228, 216, 0.18); }
:is(.minne-svarboks, .notatkort) .svartekst code { background: rgba(232, 228, 216, 0.12); }
:is(.minne-svarboks, .notatkort) .svar-markor { background: rgba(232, 228, 216, 0.16); color: #cfe3d6; }
:is(.minne-svarboks, .notatkort) a.svar-markor:hover { background: rgba(232, 228, 216, 0.3); color: #e8e4d8; }
:is(.minne-svarboks, .notatkort) .svar-markor.ukjent { background: var(--input-bg); color: var(--input-tekst); }
:is(.minne-svarboks, .notatkort) .melding-kilder { border-top-color: rgba(232, 228, 216, 0.25); }
:is(.minne-svarboks, .notatkort) .melding-kilder li:target { background: rgba(232, 228, 216, 0.1); }
:is(.minne-svarboks, .notatkort) .melding-kilder a { color: #cfe3d6; }
:is(.minne-svarboks, .notatkort) :is(.felt-hjelp, .melding-utdrag summary, .melding-utdrag p) { color: #a8b0a4; }
/* DEMPET TEKST PÅ TORV. `--dempet` er laget for de lyse flatene og er 3,1:1 her;
   sidemenyens grønngrå er 8:1. Samme for grunnfestingen, der aksenten på torv
   var 1,8:1. */
:is(.sidebar, .minne-svarboks, .notatkort) :is(.dempet, .kort-bi, .kicker, .notat-fot) { color: var(--sidebar-tekst); }
:is(.minne-svarboks, .notatkort) .grunnfesting.ok { background: rgba(207, 227, 214, 0.12); color: #cfe3d6; }
.notat-status { display: flex; align-items: center; gap: 12px; color: #a8b0a4; margin-top: 18px; font-size: 14px; }
.snurr {
  width: 18px; height: 18px; border: 2px solid transparent;
  border-top-color: var(--status-pa); border-right-color: var(--status-pa); border-radius: 50%;
  animation: spin 0.8s linear infinite; flex: 0 0 auto;
}
.notat-fot { margin-top: 10px; font-size: 11px; color: var(--dempet); }
/* Fargene her var skrevet for en MØRK flate — lys tekst på en svak tint. På
   papirbakgrunnen sto teksten nesten usynlig (Vegard 16/9). Samme lyse palett
   som `.grunnfesting` og `.meldingskort`, og selve teksten i vanlig blekk:
   boksen sier hva som aldri er gjort, og den setningen skal kunne leses. */
.banner { margin-top: 16px; padding: 12px 15px; border-radius: 10px; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.banner.ok { background: var(--aksent-lys); border: 1px solid var(--aksent); }
.banner.advarsel { background: var(--input-bg); border: 1px solid var(--input-kant); }
.banner.feil { background: var(--neg-lys); border: 1px solid var(--neg); }
.banner-tittel { font-weight: 700; margin-bottom: 7px; }
.banner.ok .banner-tittel { color: var(--aksent); }
.banner.advarsel .banner-tittel { color: var(--input-tekst); }
.banner.feil .banner-tittel { color: var(--neg); }
.banner-rad { padding: 7px 0 0; margin: 7px 0 0; border-top: 1px solid var(--kant); color: var(--dempet-mork); }
.banner .kvrad { border-top-color: var(--kant); }
.banner-tall { font: 700 12.5px var(--mono); }
.banner-handling { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.banner-handling input[type="text"] {
  flex: 1 1 14em; min-width: 0; padding: 6px 9px; border: 1px solid var(--felt-kant);
  border-radius: 6px; background: var(--kort); font: inherit; font-size: 13px;
}

.manglerrad { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding: 0 2px; }
.mangler-tittel { font-size: 12px; font-weight: 700; color: var(--dempet); }
.mangler { font-size: 12px; color: var(--dempet); border: 1px dashed #d2cbba; border-radius: 7px; padding: 4px 9px; }

/* ------------------------------------------------------------ kildevindu */

.kildedialog {
  border: none; border-radius: 18px; padding: 0; max-width: 580px; width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); color: var(--ink); background: #fff;
}
.kildedialog::backdrop { background: rgba(20, 24, 18, 0.45); }
.kildeinnhold { padding: 28px 30px; max-height: 82vh; overflow-y: auto; }
/* Lagnavnet er data, ikke en fast streng: «Bestemmelses-PDF (Sandnes
   planregister)» sprengte dialogboksen på 320 px ved 150 % tekst. Samme
   behandling som `.sidetittel` — hyphens for lesbart brudd, overflow-wrap som
   nødutgang for ord uten et sted å brekke. */
.kildeinnhold h2 { margin: 6px 0 2px; font: 600 24px var(--display); hyphens: auto; overflow-wrap: anywhere; }
.kilde-meta { font-size: 12px; color: var(--dempet); margin-bottom: 18px; }
.kildelukk { position: absolute; top: 14px; right: 14px; }
.kildelukk button {
  background: #f1ede3; border: none; border-radius: 8px; width: 30px; height: 30px;
  cursor: pointer; font-size: 15px; color: var(--dempet-mork);
}

/* Etiketten er variabel tekst, og sto med `flex: 0 0 auto` — altså «aldri
 * smalere enn hele setningen, og bryt aldri». Ved 150 % tekst i et 320 px
 * viewport skjøv «Rader med hjemmelshaver» hele raden 3 px utenfor skjermen
 * (målt 2026-08-10 i `e2e/naboliste.spec.tsx`), og verdien ble klemt smalere
 * enn sitt eget tall. Raden brytes derfor i stedet: verdien faller ned på egen
 * linje når de to ikke får plass ved siden av hverandre. Med plass ser den ut
 * som før — etiketten vokser og skyver verdien til høyre kant, slik
 * `space-between` gjorde. */
.kvrad {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 9px 0;
  border-top: 1px solid #f2eee4; font-size: 13.5px;
}
.kvrad-label { color: var(--dempet-mork); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kvrad-verdi { font-weight: 600; color: #2c302a; text-align: right; overflow-wrap: anywhere; min-width: 0; }
/* Radene i en egen blokk inne i et kort, med luften en <dl> ga dem (#1080). */
.kv { margin: 1em 0; }
.rolleliste { font-size: 13px; line-height: 1.8; }
.rolle { color: #2c302a; text-decoration: none; border-bottom: 1px dotted #c0b9a8; }
.grafblokk { margin-top: 14px; }
.leietaker.skilt { border-top: 1px solid #ede9de; margin-top: 16px; padding-top: 16px; }
.historikk { margin-top: 18px; border-top: 1px solid #ede9de; padding-top: 14px; }
/* Journalpost-rad. Titlene fra eInnsyn er LANGE — «Innvilget - dispensasjon -
   Jærstrendene landskapsvernområde - Klepp 41/3 - avgrensa uttak sand, tang og
   tare …» er én tittel — så rada må tåle tre–fire linjer uten at de legger seg
   oppå hverandre. Uten `line-height` arvet den en verdi satt for én linje. */
.journal { padding: 9px 0; border-top: 1px solid #f2eee4; font-size: 12.5px; line-height: 1.5; }
.journal > div { overflow-wrap: anywhere; }
/* Dokumenttittelen er en LENKE, men ikke en knapp. `.lnk` har ramme og
   padding, og et inline-element med padding lar ikke linjene få plass — de
   legger seg oppå hverandre så snart tittelen brytes over to linjer. Og
   eInnsyn-titler brytes alltid: «Innvilget - dispensasjon - Jærstrendene
   landskapsvernområde - Klepp 41/3 - avgrensa uttak sand, tang og tare …». */
.journal-tittel {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--kant); padding-bottom: 1px;
}
.journal-tittel:hover { color: var(--aksent); border-bottom-color: var(--aksent); }
.journal-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 7px;
  color: var(--dempet); font-size: 11.5px; margin-top: 4px;
}
/* Merkelappen skal ikke dyttes fra hverandre av teksten den står foran. */
.journal-meta .brikke { flex: 0 0 auto; margin: 0; padding: 1px 6px; font-size: 10.5px; }
.brikke + .brikke { margin-left: 5px; }

.graf { width: 100%; height: auto; background: var(--felt-bg); border: 1px solid #ede9de; border-radius: 10px; }
.graf-nullinje { stroke: #e1dccf; stroke-width: 1; }
.graf-linje { fill: none; stroke: var(--aksent); stroke-width: 2.5; stroke-linejoin: round; }
.graf-punkt { fill: #fff; stroke: var(--aksent); stroke-width: 2; }
.graf-etikett { font-size: 10px; fill: var(--dempet); }
.graf-forste { font-size: 10px; fill: var(--dempet); }
.graf-siste { font-size: 11px; font-weight: 700; fill: var(--ink); }
.sole-pos { fill: var(--aksent); }
.sole-neg { fill: var(--neg); }

.regnskap { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.regnskap th {
  color: var(--dempet); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; text-align: right; font-weight: 500; padding-bottom: 4px;
}
.regnskap th:first-child { text-align: left; }
.regnskap td { padding: 6px 0; text-align: right; }
.regnskap td:first-child { text-align: left; color: var(--dempet-mork); }

.churn { margin-top: 10px; padding: 9px 11px; border: 1px solid #ede9de; border-radius: 8px; background: var(--felt-bg); }
.churn-nivaa { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: 0.05em; }
.churn-grunn { font-size: 12.5px; color: #5e6359; margin-top: 3px; }
.churn-kritisk, .churn-høy { border-left: 3px solid var(--neg); }
.churn-kritisk .churn-nivaa, .churn-høy .churn-nivaa { color: var(--neg); }
.churn-middels { border-left: 3px solid var(--utleie); }
.churn-middels .churn-nivaa { color: var(--utleie); }
.churn-lav { border-left: 3px solid var(--aksent); }
.churn-lav .churn-nivaa { color: var(--aksent); }

.stilling-sum { font: 600 15px var(--sans); color: var(--dempet); }
.stilling-sum.aktiv { color: var(--aksent); }
.stilling-rad { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 7px 0; border-top: 1px solid #f2eee4; font-size: 12.5px; }

/* --------------------------------------------------------------- tabeller */

.tabellkort {
  background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radius);
  overflow: hidden; margin-top: 18px;
}
.tabellhode {
  padding: 13px 22px; border-bottom: 1px solid #ede9de;
  font: 700 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dempet);
}
.rad { border-top: 1px solid #f2eee4; text-decoration: none; color: inherit; }
a.rad:hover { background: var(--felt-bg); }
.tomrad { padding: 22px; color: var(--dempet); overflow-wrap: anywhere; }
/* #632: «felleskostnadsbudsjetter» er bredere enn et 320 px-kort ved 150 % tekst. */
p.dempet { overflow-wrap: anywhere; }

/* Eier og heftelser i rapporten (#425) — samme radform som `.minne-dok`, egne
   klassenavn fordi kortet lever i rapportens lyse tema, ikke i `/minne`s
   mørke svarboks. */
.eierrad { margin-top: 14px; padding-left: 12px; border-left: 3px solid var(--kant); }
.eierrad:first-child { margin-top: 0; }
.eierrad-tekst { margin: 0; font: 400 14px/1.6 var(--sans); overflow-wrap: anywhere; }

.porterad {
  display: grid; gap: 14px; align-items: center; padding: 14px 22px; font-size: 13px;
  grid-template-columns: 7em minmax(0, 1fr) 4em 3.5em 3.5em 7em 9em;
}

.lagrad { display: grid; grid-template-columns: 1.5fr 2fr 4em 7em; gap: 16px; align-items: start; padding: 15px 22px; }
.lagrad.planlagt { background: var(--felt-bg); } /* ikke opacity: den tok teksten ned til 2,6:1 (1.4.3); statusen står i raden */
.lagrad .celle-adresse + .liten { display: block; overflow-wrap: anywhere; } /* egen linjehøyde, ikke radens 16 px (#593) */
.lag-spm { font-size: 13px; line-height: 1.45; color: var(--dempet-mork); overflow-wrap: anywhere; }

@media (max-width: 62em) {
  /* #632: `1fr` har `auto` som gulv, og et langt ord i spørsmålet dro sporet ut av kortet. */
  .porterad, .lagrad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tabellhode { display: none; }
  .porterad, .lagrad { padding: 14px 16px; }
}

/* Porteføljen (16/9) — eiendommene gruppert på selskapet som holder dem.
   Fem kolonner: eiendommen, hvor mange dokumenter, siste hendelse, prosjektet,
   og hva kommunen ble lest av. Den siste er ikke pynt: uten den kan ikke en
   rad etterprøves uten å åpne dokumentet. */
.porteeidrad {
  display: grid; gap: 14px; align-items: center; padding: 14px 22px; font-size: 13px;
  grid-template-columns: minmax(0, 1.8fr) 5em 8.5em minmax(0, 1.1fr) minmax(0, 1.1fr);
}
.porteeidrad > * { min-width: 0; overflow-wrap: anywhere; }
/* Raden er en lenke; valgknappen står ved siden av, ikke inni — et skjema inne
   i en <a> er ugyldig HTML. */
.porteeid-linje { display: flex; align-items: center; gap: 8px; }
.porteeid-linje > .porteeidrad { flex: 1 1 auto; }
.porteeid-valg { flex: 0 0 auto; padding-right: 16px; }
.porteeidrad .celle-eiendom { display: flex; flex-direction: column; gap: 2px; }
/* Solgt (#733): raden og knappene i hver sin kolonne, og arkivets
   salgsspor — og et åpent salgsskjema — på en egen linje under. */
.porteeid-linje:has(.porteeid-handlinger) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: center; border-top: 1px solid #f2eee4;
}
.porteeid-linje:has(.porteeid-handlinger) > .rad { border-top: 0; }
.porteeid-handlinger { display: flex; align-items: center; gap: 6px; padding-right: 16px; }
.porteeid-handlinger .porteeid-valg { padding-right: 0; }
.porteeid-handlinger:has(.solgtvalg[open]) { grid-column: 1 / -1; flex-wrap: wrap; padding: 0 22px 12px; }
.solgtvalg > summary { list-style: none; cursor: pointer; display: inline-flex; width: auto; }
.solgtvalg > summary::-webkit-details-marker { display: none; }
.solgtvalg[open] { flex: 1 1 100%; }
.solgtskjema { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
.solgtskjema .felt { flex: 1 1 10em; min-width: 0; }
.salgsspor { grid-column: 1 / -1; padding: 0 22px 12px; color: var(--dempet-mork); overflow-wrap: anywhere; }
.solgtlinje { border-top: 1px solid #f2eee4; }
.solgtlinje:first-child { border-top: 0; }
.porteeid-solgt { flex: 1 1 14em; min-width: 0; padding: 14px 22px; }
.porteeid-solgt .liten { overflow-wrap: anywhere; }
@media (max-width: 40em) {
  .porteeid-linje:has(.porteeid-handlinger) { grid-template-columns: minmax(0, 1fr); }
  .porteeid-handlinger { padding: 0 16px 12px; }
  .salgsspor { padding: 0 16px 12px; }
}

@media (max-width: 62em) {
  .porteeidrad { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .porteeidrad .celle-eiendom { grid-column: 1 / -1; }
  .porteeidrad .celle-tall { text-align: left; }
  .tabellhode.porteeidrad { display: none; }
  .porteeidrad [data-etikett]::before {
    content: attr(data-etikett) ": "; color: var(--dempet); font-family: var(--sans); font-size: 11.5px;
  }
}

/* Prosjektene i porteføljen (#731): prosjektet, typen, eiendommene og selskapet. */
.prosjektrad {
  display: grid; gap: 14px; align-items: center; padding: 14px 22px; font-size: 13px;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
}
.prosjektrad > * { min-width: 0; overflow-wrap: anywhere; }
.ferdige-prosjekter { margin-top: 14px; }
.ferdige-prosjekter > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.prosjektskjema { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fit, minmax(min(14em, 100%), 1fr)); align-items: end; }
.prosjektskjema-bred { grid-column: 1 / -1; }
.prosjektskjema textarea, .prosjektskjema input, .prosjektskjema select { width: 100%; box-sizing: border-box; }
.prosjektskjema textarea { font: inherit; }
.prosjektskjema > .knapp { grid-column: 1 / -1; justify-self: start; }
/* Avkrysningslistene i skjemaet for et forvaltningsobjekt (#740). Et
   `<fieldset>` har `min-width: min-content` i nettleserens egen stil, og
   ville presset skjemaet ut av en telefon ved stor tekst. */
.valgliste { min-width: 0; margin: 0; padding: 8px 0 0; border: 0; border-top: 1px solid var(--kant-svak); }
.valgliste > legend { padding: 0; }
.valgrad { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.valgrad input[type="checkbox"], .valgrad input[type="radio"] { flex: 0 0 auto; width: auto; }
.valgrad > span { flex: 1 1 auto; min-width: 0; }
/* Feltene i protokollskjemaet som bare gjelder en utflytting (#929), skjult når «Innflytting» er valgt. */
[data-skjema="protokoll"]:has(select[name="art"] option[value="inn"]:checked) :is([data-ved-utflytting], [data-utflyttingshjelp]) { display: none; }
/* Byggmappa (#741): dokumentene under punktet, og mangelen med det den koster. */
.byggmappe-dokumenter { list-style: none; margin: 2px 0 0; padding: 0; font-size: 13.5px; }
.byggmappe-dokumenter li { overflow-wrap: anywhere; }
.byggmappe-mangel { display: block; margin-top: 2px; font-size: 13.5px; }
.sjekkpunkt .inlineskjema { margin-top: 4px; }
/* Kontrollkalenderen (#742): fristen og hvor den er regnet fra, under navnet. */
.kontroll-linje { display: block; margin-top: 2px; font-size: 13.5px; overflow-wrap: anywhere; }
.kontroll-mer { margin-top: 4px; }
.kontroll-mer > summary { cursor: pointer; }
/* Oppgavene (#743): kostnaden som en liten oppstilling, og bildet oppgaven kom fra. */
.kostnadsliste { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px 12px; margin: 0 0 8px; }
.kostnadsliste dt { color: var(--dempet-mork); }
.kostnadsliste dd { margin: 0; overflow-wrap: anywhere; }
.oppgavebilde { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.forslagsliste { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--kant-svak); }
.forslagsliste .inlineskjema form { margin: 0; }
/* Runden i egenkontrollen (#746): gås på telefonen, så valgene er store og
   står på egen linje under sjekkpunktet. */
.rundepunkter { list-style: none; margin: 12px 0; padding: 0; }
.rundepunkt { padding: 10px 0; border-bottom: 1px solid var(--kant-svakest); }
.rundepunkt-valg { min-width: 0; margin: 0; padding: 0; border: 0; }
.rundepunkt-valg > legend { padding: 0; font-weight: 600; overflow-wrap: anywhere; }
.rundepunkt-knapper { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.rundevalg { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--kant); border-radius: 7px; cursor: pointer; min-width: 0; }
.rundevalg:has(input:checked) { background: var(--aksent-lys); border-color: var(--aksent); }
.rundevalg-avvik:has(input:checked) { background: var(--sand); border-color: var(--ink); }
.rundepunkt-kommentar { width: 100%; box-sizing: border-box; }
@media print { .brannperm .knapp { display: none; } }
.prosjekteiendommer { list-style: none; margin: 0 0 12px; padding: 0; }
.prosjekteiendom {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid #f2eee4;
}
.prosjekteiendom:first-child { border-top: 0; }
.prosjekteiendom .celle-eiendom { min-width: 0; flex: 1 1 14em; }
.prosjekteiendom .liten { overflow-wrap: anywhere; }

@media (max-width: 62em) {
  .prosjektrad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 14px 16px; }
  .prosjektrad .celle-eiendom { grid-column: 1 / -1; }
  .tabellhode.prosjektrad { display: none; }
  .prosjektrad [data-etikett]::before {
    content: attr(data-etikett) ": "; color: var(--dempet); font-family: var(--sans); font-size: 11.5px;
  }
}

.sortlenke { text-decoration: none; color: inherit; cursor: pointer; }
.sortlenke.aktiv { color: var(--aksent); }
.filterrad { margin-bottom: 4px; }
.filterbrikke {
  border: 1px solid #e1dccf; background: #fff; border-radius: 999px; padding: 7px 14px;
  font: 600 13px var(--sans); color: #5e6359; text-decoration: none;
}
.filterbrikke.valgt { border-color: var(--aksent); background: var(--aksent); color: #fff; }
.filterbrikke.valgt .dempet { color: rgba(255, 255, 255, 0.7); }

.statusmerke { font: 700 10.5px var(--sans); padding: 4px 9px; border-radius: 999px; background: #edeae0; color: var(--dempet-mork); }
.celle-eiendom { display: flex; flex-direction: column; }
.celle-adresse { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; display: block; }
.celle-prospekt { overflow-wrap: anywhere; }
.celle-tall { text-align: right; font: 700 17px var(--display); }
.celle-timing { color: var(--dempet-mork); overflow-wrap: anywhere; }
.score-hoy { color: var(--aksent); }
.score-middels { color: var(--ink); }
.score-lav { color: var(--neg); }
.score-ukjent { color: var(--dempet); }
/**
 * `max-width` + `overflow-wrap` (#250): et enkelt merke som «Offentlig/privat
 * tjenesteyting» er lengre enn en 320 px-teig-rad ved 150 % tekst. `flex-wrap`
 * på `.sveipmerker` sender det ned på egen linje, men uten disse to bryter
 * ikke selve teksten — den stikker rett gjennom kortet i stedet.
 */
.strategimerke { font: 600 11.5px var(--sans); padding: 3px 8px; border-radius: 6px; background: #f2eee4; color: #5e6359; max-width: 100%; overflow-wrap: anywhere; }

.tierprikk { width: 13px; height: 13px; border-radius: 50%; display: inline-block; background: #999; }
.tier-grønn { background: var(--aksent); }
.tier-blå { background: #3b7dd8; }
.tier-gul { background: #c08a2e; }
.tier-rød { background: var(--neg); }

/* --------------------------------------------------------------- utskrift */

.print-only { display: none; }
@media print {
  .sidebar, .no-print, dialog { display: none !important; }
  .skall { display: block; }
  .innhold { overflow: visible; }
  .sidebredde { padding: 0; max-width: none; }
  .print-only { display: block !important; }
  .kort, .toppkort > .kort { break-inside: avoid; }
  /* Notatkortet er mørkt på skjerm. På papir skal det være lesbart, ikke
     blekksvart — samme innhold, motsatt kontrast. */
  .notatkort { background: #fff !important; color: var(--ink); border: 1px solid var(--kant); }
  .notatkort-kicker { color: var(--dempet); }
  .notat-tekst { background: var(--felt-bg); color: var(--ink); border-color: var(--kant); }
  .notat-fot, .banner { color: var(--dempet-mork); }
  .utskriftstopp { border-bottom: 2px solid var(--mork); padding-bottom: 10px; margin-bottom: 18px; }
  /* Forbeholdene er selve grunnen til at vedlegget kan leses uten oss —
     de skal aldri deles av et sideskift. */
  .bankforbehold, .tallboks { break-inside: avoid; }
  /* Kontonavnet brekker til en egen linje heller enn å stikke ut over kanten
     på en smal side med stor tekst (#711). */
  .merkelinje {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font: 700 18px var(--display); letter-spacing: 0.04em; color: var(--mork);
  }
  .merkelinje-ikon { width: 20px; height: 20px; }
  .merkelinje span { font-weight: 600; color: #5e6359; }
  @page { margin: 16mm 14mm; }
}

/* --------------------------------------------------- markedsrapporten (#768) */
.markedsrapport-radius { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 16px; }
.markedsrapport-radius .felt { margin: 0; }
.markedsrapport-radius input { width: 8em; max-width: 100%; }
.markedsrapport-kilde { margin: 8px 0 0; overflow-wrap: anywhere; }
@media print {
  /* Fast plassert i utskriften gjentas den nederst på hver side: kildene og
     datoen står på hvert ark, også når ett blir revet løs fra resten. */
  .markedsrapport-fot {
    position: fixed; bottom: 0; left: 0; right: 0; margin: 0; padding-top: 4px;
    border-top: 1px solid var(--kant); font-size: 9pt; color: var(--dempet-mork); background: #fff;
  }
  .markedsrapport { padding-bottom: 14mm; }
  .markedsrapport-radius { display: none; }
}

/* --------------------------------------------------- naboskap / mulighetsrom */

.kombinasjon {
  border-left: 3px solid var(--kant); padding: 8px 0 8px 12px; margin-bottom: 8px;
}
.kombinasjon.løft { border-left-color: #7a9b6b; }
.kombinasjon-setning { font-size: 14px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }

/* ------------------------------------------------- naboliste (nabovarsel) */

/* Raden stables i stedet for å stå i to kolonner. En adresse er variabel
 * tekst — «Lauritz Bellesens gate 12 B» ved 150 % skrift sprenger et 320 px
 * viewport så snart matrikkelnummeret skal dele linje med den. Stablet er den
 * dessuten nærmere formen lista faktisk brukes i: én mottaker per blokk. */
.varselrad {
  padding: 8px 0 8px 12px;
  border-left: 3px solid var(--kant);
  margin-bottom: 6px;
}
.varselrad.nabo { border-left-color: var(--aksent); }
.varselrad-matrikkel { font: 500 12px var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.varselrad-adresse { font-size: 13px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.varselrad-mal { font-size: 11.5px; color: var(--dempet-mork); margin-top: 2px; }
/* Hjemmelshaveren (#135) er navnet brevet stiles til, og skal leses FØR
 * matrikkelnummeret. Halvfet, ikke egen farge — den skal skille seg fra
 * adressen uten å bli en andre aksent i en liste som allerede har én.
 * `overflow-wrap: anywhere` av samme grunn som adressen over: et firmanavn er
 * variabel tekst, og «Jærentreprenøren Eiendomsutvikling AS» ved 150 % skrift
 * sprenger et 320 px viewport uten den. */
.varselrad-eier { font-weight: 600; font-size: 13px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.varselrad-eier.dempet { font-weight: 400; }

/* ------------------------------------------------------------ mulighetsrom */

.varianter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15em, 100%), 1fr)); gap: 14px; margin-top: 6px; }
.variant { border: 1px solid var(--kant); border-radius: 12px; padding: 14px 16px; background: var(--felt-bg); }
.variant-navn { font: 700 13px var(--sans); color: var(--ink); margin-bottom: 4px; }
.variant-bra { font: 700 22px var(--display); color: var(--aksent); }
.variant-boliger { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.variant-boliger .brikke { font-size: 11.5px; padding: 4px 8px; }
/* Sporene og det som er bygd står i rader (#1114): boligene ved siden av varianten, kilden under tallet. */
.kvrad .variant-boliger { margin-top: 0; justify-content: flex-end; }
.bygd-kilde { display: block; font-weight: 400; }

.dispensasjon {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--kant-svak);
}
.disp-hva { flex: 1 1 14em; font-size: 13.5px; }
.disp-gevinst { font-size: 13.5px; }

.forbehold li { color: var(--dempet-mork); font-size: 12.5px; line-height: 1.55; }
.hindring { font-size: 14.5px; line-height: 1.6; color: var(--dempet-mork); margin: 4px 0 14px; }

/* Maksvolumet i 3D (#207). Fargene står her og leses av `volum3d.js`, så
   tegnforklaringen og lerretet ikke kan komme i utakt. Lerretet følger kortets
   bredde og har fast forhold: det kan aldri bli bredere enn skjermen.
   Det volumet sperrer, er friksjon og males i tegl; regelen nevner merket
   for det, så paletten ser at fargen er valgt. */
.volum3d {
  --volum3d-volum: var(--aksent); --volum3d-nabo: var(--sand); --volum3d-teig: var(--utleie);
  --volum3d-terreng: var(--kant-svak); --volum3d-linje: var(--kant);
}
.volum3d:has(.volum3d-merke-sperret) { --volum3d-sperret: var(--neg); }
.volum3d-figur { margin: 10px 0 0; min-width: 0; }
.volum3d-lerret {
  display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--kant);
  border-radius: 12px; background: var(--felt-bg); touch-action: pan-y; cursor: grab;
}
.volum3d-lerret:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; }
.volum3d-tegnforklaring { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: var(--dempet-mork); }
.volum3d-merke::before {
  content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 6px; border-radius: 3px;
  vertical-align: -0.1em; background: var(--merke);
}
.volum3d-merke-volum { --merke: var(--volum3d-volum); }
.volum3d-merke-nabo { --merke: var(--volum3d-nabo); }
.volum3d-merke-teig { --merke: var(--volum3d-teig); }
.volum3d-merke-sperret { --merke: var(--volum3d-sperret); }
.volum3d-knapper { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.volum3d-knapper .knapp { min-width: 2.75em; }
.volum3d-valg { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: 13px; color: var(--dempet-mork); min-width: 0; }
.volum3d-valg select {
  width: 100%; max-width: 100%; min-width: 0; padding: 8px 10px; font: inherit; color: var(--ink);
  background: var(--felt-bg); border: 1px solid var(--felt-kant); border-radius: 8px;
}
.volum3d-grunnlag { list-style: none; margin: 12px 0 0; padding: 0; }
.volum3d-grunnlag li { padding: 8px 0; border-top: 1px solid var(--kant-svak); font-size: 13.5px; overflow-wrap: anywhere; }
.volum3d-grunnlag-hva { color: var(--dempet-mork); }
.volum3d-kilde { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--dempet); }

/* ------------------------------------------------------ tomtebank-klokka */

.trinnstige { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.trinn {
  display: flex; align-items: center; gap: 7px; flex: 1 1 11em;
  border: 1px solid var(--kant); border-radius: 10px; padding: 9px 12px;
  background: var(--felt-bg); color: var(--dempet-mork); font-size: 12.5px;
}
.trinn.passert { background: #eef3ea; border-color: #cfdcc4; color: #4b6340; }
.trinn.her { background: var(--mork); border-color: var(--mork); color: #fff; font-weight: 700; }
.trinn-nr {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.08); font: 700 11px var(--mono);
}
.trinn.her .trinn-nr { background: rgba(255, 255, 255, 0.2); }
.trinn-navn { overflow-wrap: anywhere; }
.trinn-hva { font-size: 12.5px; line-height: 1.55; margin: 0 0 14px; }

.klokketall { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10em, 100%), 1fr)); gap: 14px; margin-bottom: 12px; }
.klokkesetning { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 6px 0 10px; }
.klokke-mangler { border-left: 3px solid var(--kant); padding-left: 14px; }

/* ------------------------------------------- driftskostnad per byggtype */

/* Seksjoner som stables, ikke faner: en vannrett rad med faneknapper sprenger
   et 320 px viewport ved 150 % tekst lenge før innholdet gjør det, og det var
   nøyaktig der de to foregående forsøkene falt. Ingen mål her har et px-gulv —
   `minmax(min(9em, 100%), 1fr)` gjør at sporet krymper med viewportet i stedet
   for å skyve rutenettet utenfor skjermen når skriften vokser. */

.driftgruppehode {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px;
}
.drifttittel {
  font: 700 19px var(--display); letter-spacing: -0.01em; color: var(--ink);
  margin: 0; min-width: 0; overflow-wrap: anywhere;
}

/* --------------------------------------------- leiekontrakter og utfall */

/* Utfallsvalget står INNE i raden det gjelder, ikke i et skjema lenger nede.
   Det koster en ekstra rad med felter per kontrakt, og det er hele hensikten:
   et utfall registreres den dagen det er kjent bare hvis registreringen ligger
   der øyet allerede er. Ingen mål her har et px-gulv — feltene deler bredden
   med `flex-basis: min(11em, 100%)`, slik at de legger seg under hverandre når
   skriften vokser i stedet for å skyve raden utenfor skjermen. */

/* BUNKENE OG RADENE I FORVALTNINGEN (#607) — ett sett for kontraktene,
   avvikene, felleskostnadene, vedlikeholdet og byggene. Det sto fem ganger,
   og `vedlikehold.tsx` lånte fk-klassene mens `bygg.tsx` lånte avvik-klassene.
   `.postrad` har tre spor; `.postrad.tospors` er modifikatoren for en rad med
   bare tekst og en celle. Kolonnene er `minmax(0, …)`, så et voksende beløp
   eller en lang tittel krymper sporet i stedet for å presse raden ut av et
   320 px viewport. */
.bunke { margin-top: 22px; }
.bunkehode { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.bunketittel {
  font: 700 19px var(--display); letter-spacing: -0.01em; color: var(--ink);
  margin: 0; hyphens: auto; overflow-wrap: anywhere;
}
.bunkeforklaring { margin: 6px 0 0; line-height: 1.5; max-width: 52em; }

.postrad {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 10px 12px; align-items: start; padding: 13px 16px;
}

.postrad .konsern-celle { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
/* «lastet opp av <e-postadressen>» i en liste over filer har ingen mellomrom å brekke på. */
.registerliste .postrad > .dempet { overflow-wrap: anywhere; }

/* Arbeidsbenken over en liste (#895): «Sist du jobbet med» og «Trenger noe».
   Navnet, hva og handlingen brekker til hver sin linje når plassen tar slutt. */
.benkliste { list-style: none; margin: 8px 0 0; padding: 0; }
.benkrad {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 9px 0; border-top: 1px solid var(--kant-svak); min-width: 0;
}
.benkrad:first-child { border-top: 0; }
.benkrad .radnavn { flex: 1 1 14em; min-width: 0; }
.benkrad-hva { flex: 2 1 16em; min-width: 0; overflow-wrap: anywhere; }
.benkrad-handling { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.benkrad-handling .inlineskjema { margin: 0; }

/* Raden i lista over byggene (#895): merkene under navnet er lenker dit saken
   løses, og handlingene står i siste kolonne. Et merke brekker mellom ordene,
   aldri inne i et. */
.punkthandlinger { margin-top: 8px; }
.byggmerker { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
a.merkelapp { text-decoration: none; }
a.merkelapp:hover, a.merkelapp:focus-visible { text-decoration: underline; }
.radhandlinger { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.bare-telefon { display: none; }
@media (max-width: 56em) and (pointer: coarse) {
  .bare-telefon { display: inline-flex; }
}
.kartprikk-bygg-trenger { background: #b5872f; }
.kartprikk-bygg-i-orden { background: var(--aksent); }

/* Leieregisteret (#885): en forskjell er feltet, det appen har og det
   registeret sier, under hverandre, så den holder på en telefon. */
.registerliste, .registerforskjeller { list-style: none; margin: 0; padding: 0; }
.registerforskjell { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--kant-svak); min-width: 0; overflow-wrap: anywhere; }
.registerforskjell:first-child { border-top: 0; }

/* En regnskapsfører leser leieforholdet og leietakeren (#898): skjemaene som
   endrer noe står ikke der. Vakta avviser dem uansett. */
body[data-lesemodus] .innhold form[method="post"] { display: none; }

/* Månedene en betaling dekker (#898): avkryssingen står i et rutenett som
   brekker til én kolonne på en telefon. */
.maanedsvalg { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15em, 100%), 1fr)); gap: 4px 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.radnavn { font: 600 14px var(--sans); color: var(--ink); overflow-wrap: anywhere; }

/* Skjemaet inne i en rad (utfall, tildeling, lukking, faktisk kostnad) får
   sin egen linje under radens spor. */
.radskjema {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  border-top: 1px dashed var(--kant-svak); padding-top: 11px;
}
.radfelt { flex: 1 1 min(11em, 100%); }
.radknapp { flex: 0 0 auto; padding: 9px 15px; font: 700 12.5px var(--sans); }

/* `.merkelapp` står med `white-space: nowrap`, og det er riktig for et
   ettordsmerke som «Forslag». I en rad heter merket «Sagt opp av leietaker»,
   «Kontrakt uten kjent leietaker», «Strandsone (100-metersbeltet)» eller en
   liste med dokumentnavn — på 320 px med 150 % tekst er det bredere enn
   kolonnen, og nowrap klipper det bort i stedet for å brekke det. ÉN regel for
   hver rad et merke kan stå i; den sto åtte steder og manglet i `.visningsrad`. */
:is(.postrad, .kontraktordrad, .visningsrad, .avtalerad, .sjekkpunkt-tekst, .funnrad-topp, .modellvurdering-topp) .merkelapp {
  white-space: normal; overflow-wrap: anywhere;
}

@media (max-width: 52em) {
  .postrad { grid-template-columns: 1fr; }
  .postrad .konsern-celle { align-items: flex-start; }
}

/* Justeringsplikten (#212) — full bredde som `.radskjema`, samme
   skilletanke: en rad som ikke passer i 2–3-kolonnenettet får sin egen linje
   i stedet for å presse inn i en trang kolonne. */
.kontraktrad-justering {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px 14px; align-items: baseline;
  border-top: 1px dashed var(--kant-svak); padding-top: 9px; font-size: 13px;
}

.kontraktordrad {
  display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr);
  gap: 4px 12px; align-items: start; padding: 11px 16px;
}
.kontraktordtekst { line-height: 1.45; overflow-wrap: anywhere; }

@media (max-width: 52em) {
  .kontraktordrad { grid-template-columns: 1fr; }
}

/* ------------------------------------------- tallene i et samtalesvar (#535) */

/* Formen modellen valgte, tegnet under svarteksten. Ingen egen dekor: dette
   er sidas egne komponenter satt inn i en melding, og et svar skal ikke se ut
   som et annet produkt fordi det inneholder tall. */
.svarvisning { margin: 12px 0 0; padding: 0; border: 0; }
.svarvisning-tittel {
  font: 700 13px var(--sans); color: var(--tekst-svak);
  letter-spacing: 0.02em; margin-bottom: 7px;
}
.svarvisning .nokkeltall { margin: 0; }
.svarvisning .tabellkort { margin: 0; }

.visningsrad {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 6px 14px; align-items: baseline; padding: 10px 14px;
}
.visningsrad > * { min-width: 0; }
.visningsrad .konsern-navn { gap: 2px; overflow-wrap: anywhere; }
.visningsrad .konsern-celle { text-align: right; font-size: 14px; color: var(--ink); }

/* Differansen er svaret i en sammenligning — «7,8 mill fra hverandre» er det
   man handler på, ikke de to tallene hver for seg. Derfor får den en linje
   over seg, som en sum. */
.sammenligningsdiff { border-top: 1px solid var(--kant-svak); }

/* Følsomhet og scenario er ekte tabeller — de leses AV, kolonne mot rad, og
   da er en tabell riktig framfor et rutenett av div-er. Egen ruller rundt:
   fire kolonner ved 150 % tekst på 320 px er bredere enn skjermen, og da er
   sidelengs rulling i tabellen riktig framfor å brekke tallene. */
.visningstabell { width: 100%; }
/* Tall leses av kolonnevis, så de står høyrestilt — og de brekkes ikke:
   «6 650 000 kr» delt over to linjer er uleselig. `.svartabell` ruller. */
.visningstabell th, .visningstabell td { padding: 8px 12px; text-align: right; white-space: nowrap; }
.visningstabell thead th { font: 700 11.5px var(--sans); letter-spacing: 0.03em; text-transform: uppercase; color: var(--tekst-svak); }
.visningstabell tbody th[scope="row"], .visningstabell thead th:first-child { text-align: left; }
.visningstabell tbody tr + tr { border-top: 1px solid var(--kant-svak); }
/* Tomtene i en faktatabell (#677): adressen og et tekstfelt som arealformålet
   brekker, tallene gjør det ikke. */
.visningstabell th.tomtnavn, .visningstabell td.visningstekst { white-space: normal; text-align: left; min-width: 9em; }
.scenarioforutsetning { display: block; margin-top: 3px; text-transform: none; letter-spacing: 0; font-weight: 400; white-space: normal; }

/* Regnestykket: tegnet står foran navnet, som i en oppstilling på papir, og
   summen får linja over seg. */
.regnetegn { display: inline-block; width: 1.1em; color: var(--tekst-svak); }
.regnesum { border-top: 1px solid var(--kant); font-weight: 700; }
/* Et ledd uten verdi skal ikke se ut som et tall. `hvor` sier hva som må fylles inn. */
.regnemangel .konsern-celle { color: var(--tekst-svak); font-style: italic; }

/* Sjekklista: det som mangler er svaret, og skal ikke se ut som det som er i orden. */
.sjekkpunkt.mangler .merkelapp { background: var(--input-bg); } /* sand under tegl og dempet tekst var 3:1 */
.leietakerkilde { display: block; margin-top: 2px; font-weight: 400; white-space: normal; }

/* Tidslinja: datoen først, så hva som skjedde. Det som ikke har skjedd ennå
   står dempet — man leser lista for å finne neste holdepunkt, ikke for å
   repetere det som er gjort. */
.tidslinje { list-style: none; margin: 0; padding: 0; }
.tidspunkt {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 2px 12px; padding: 8px 0; align-items: baseline;
}
.tidspunkt + .tidspunkt { border-top: 1px solid var(--kant-svak); }
.tidspunkt time { color: var(--tekst-svak); }
.tidspunkt-hva { overflow-wrap: anywhere; }
.tidspunkt .dempet { grid-column: 2; }
.tidspunkt.kommer .tidspunkt-hva { font-weight: 700; }
.tidspunkt.passert time, .tidspunkt.passert .tidspunkt-hva { color: var(--tekst-svak); }

/* Sitatet er dokumentets egne ord, og skal se ut som det — ikke som brødtekst. */
.svarsitat {
  margin: 0; padding: 10px 0 10px 14px; border-left: 3px solid var(--kant);
}
.svarsitat p { margin: 0 0 5px; line-height: 1.55; overflow-wrap: anywhere; }
.svarsitat cite { font-style: normal; }

/* Bærekosten: setningen styrelederen kan lese høyt står under tallene, og
   forbeholdene under den igjen — de gjelder tallene og hører ikke i en fotnote. */
.baerekost-setning { margin: 10px 0 0; line-height: 1.55; }
.baerekost-forbehold { margin: 6px 0 0; padding-left: 18px; }
.baerekost-forbehold li { margin-top: 3px; }

/* Dine egne forutsetninger (#535). Dempet, fordi de er LÆRT og ikke bestemt:
   de skal være lette å ta i bruk og like lette å overse. */
.faktavaner { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--kant-svak); }
.faktavaner ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.faktavaner li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.faktavaner form { margin: 0; }
.faktavaner button { white-space: normal; text-align: left; }

/* Samme handel sett fra en annen vinkel — dempet, fordi det ikke er en sak til. */
.husetssyn-ogsa { margin-top: 3px; font-style: italic; }

/* Kildene svaret hviler på (#535). Tett liste: dette er noe man skanner for å
   finne én lenke, ikke noe man leser. */
.kildeliste { list-style: none; margin: 4px 0 12px; padding: 0; }
.kildeliste li { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; min-width: 0; }
.kildeliste li + li { border-top: 1px solid var(--kant-svak); }
/* Også lagnavnet: «Fiber-/bredbåndsdekning» er ett ord bredere enn panelet på 320 px ved 150 % tekst (#641). */
.kildeliste li > * { overflow-wrap: anywhere; }
.kilderutensvar summary { cursor: pointer; font: 600 12.5px var(--sans); color: var(--tekst-svak); }

@media (max-width: 52em) {
  .tidspunkt { grid-template-columns: minmax(0, 1fr); }
  .tidspunkt .dempet { grid-column: 1; }
}

@media (max-width: 52em) {
  .visningsrad { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
}

/* ------------------------------------------------- uenigheter i faktaarket */

/* To kilder sier ulike ting om samme tall (#535). Egen radklasse framfor
   `.konsernrad`, fordi raden har fire deler med ulik vekt: feltet med følgen
   (bredest — den bærer svaret), de to verdiene side om side så de kan
   sammenlignes med øyet, og lenka videre.

   FØLGEN SKAL LESES FØRST. Den står som brødtekst i venstrekolonnen og ikke
   som et lite tillegg, fordi «Utbyggbar reserve går fra 1 800 til 1 440 m²» er
   det man handler på — spriket i prosent er bare hvordan man kom dit. */
.uenighetskort .rad.uenighet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto) minmax(0, auto);
  gap: 10px 14px; align-items: start; padding: 13px 16px;
}
/* `min-width: auto` er standard på grid-barn og betyr «aldri smalere enn
   min-content». Uten dette flyter raden 7 px ut av kortet på 320 px. */
.uenighetskort .rad.uenighet > * { min-width: 0; }
.uenighetskort .konsern-navn { gap: 4px; }
.uenighetskort .konsern-celle {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right;
  /* «teigen i matrikkelen» er 116 px ved 150 % tekst i en 93 px kolonne, og
     «matrikkelen» kan ikke brekkes uten dette. Samme grep som `.konsern-grunn`. */
  overflow-wrap: anywhere;
}
.uenighet-folge {
  grid-column: 1 / -1; margin: 0; line-height: 1.5; overflow-wrap: anywhere;
  border-top: 1px dashed var(--kant-svak); padding-top: 9px;
}
.uenighetskort .konsern-celle .mono { font-size: 14px; color: var(--ink); }
/* «Rett i faktaarket» er fire ord i en smal kolonne. Uten dette brekker den
   midt i «faktaarket» ved 150 % tekst på 320 px. */
.uenighet-lenke { white-space: nowrap; }

/* «Står» og «Sier» vises ALLTID, ikke bare på mobil. Kortet ligger i
   prospektrommets venstrekolonne, som er rundt 600 px bred mens viewportet er
   1280 — en mediespørring på viewport-bredden ser en bred skjerm og skjuler
   etikettene nettopp der raden er trangest. To tall uten etikett er to tall
   leseren må gjette rekkefølgen på. */
.uenighetskort .konsern-celle[data-etikett]::before {
  content: attr(data-etikett); display: block;
  font: 700 11px var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tekst-svak);
}

/* Etikettene «Står» og «Sier» er den eneste måten å vite hvilken verdi som er
   hvilken når kolonnene stables under hverandre. */
@media (max-width: 52em) {
  .uenighetskort .rad.uenighet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .uenighetskort .konsern-navn { grid-column: 1 / -1; }
  .uenighetskort .konsern-celle { align-items: flex-start; text-align: left; }
  /* Lenkecella, ikke `:last-child` — følgen står sist i DOM-en. */
  .uenighetskort .uenighet-handling { grid-column: 1 / -1; }
  /* Den globale `.konsern-celle::before` legger på «etikett: » for ALLE celler
     under 52em. Lenkecella har ingen etikett, og da står det igjen et løst
     kolon over knappen. */
  .uenighetskort .konsern-celle:not([data-etikett])::before { content: none; }
  .uenighetskort .uenighet-handling { align-items: flex-start; }
}

/* ------------------------------------------------------------- skjemafeil */

.fkfeil {
  background: var(--neg-lys); border: 1px solid var(--kant); border-radius: var(--radius);
  padding: 18px 20px; margin-top: 18px; color: var(--neg); font-size: 13.5px; line-height: 1.55;
}
.fkfeilliste { margin: 8px 0 0; padding-left: 20px; }
.fkfeilliste li { overflow-wrap: anywhere; }

/* ----------------------------------------------------------- strukturideer */

.strukturide { border-left: 3px solid var(--kant); padding: 12px 0 12px 14px; margin-top: 12px; }
/* En STERK strukturidé er et råd vi står for, ikke et varsel. Kanten sto i
   tegl, som er fargen for friksjon — og en anbefaling malt i alarmfarge leses
   som en advarsel om det motsatte av det den sier. */
.strukturide.styrke-sterk { border-left-color: var(--myrgronn); }
.strukturide.styrke-vurder { border-left-color: var(--input-tekst); }
.struktur-topp { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 6px; }
.struktur-tittel { font: 700 14px var(--sans); }
.struktur-anbefaling { font-size: 14px; line-height: 1.6; margin: 0 0 6px; }
.strukturide p { margin: 0 0 5px; line-height: 1.55; }

/* ------------------------------------------------------- mottakervarianter */

.mottakervalg {
  background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radius);
  padding: 14px 18px; margin-top: 14px;
}
.mottakerknapper { display: flex; flex-wrap: wrap; gap: 8px; }
.mottakerknapper .temaknapp { text-decoration: none; display: inline-block; }
.mottaker-hvorfor { margin: 10px 0 0; line-height: 1.55; max-width: 48em; }
.mottaker-ingress { font: 500 15px var(--display); margin: 8px 0 0; }

/* ------------------------------------------------------- prosjektminnet */

/* Brekkpunktene her er i `em` som i resten av stilarket: en telefon på 150 %
   tekst skal kollapse et hakk tidligere, ikke sveive sidelengs. Alle
   grid-/flex-barn har `min-width: 0` fra stjerneregelen øverst, som er den
   ene tingen som faktisk holder utdrag og filnavn innenfor skjermen. */

.minne-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 18px 0 6px; padding: 12px 16px;
  background: var(--kort); border: 1px solid var(--kant); border-radius: 12px;
}
/* Skriftstørrelsen er den lille: i standards mode får hver linje forelderens
   linjehøyde, og med 16 px sto stien og tellingen med 20 px luft (#593). */
.minne-statustekst { flex: 1 1 20em; overflow-wrap: anywhere; font-size: 12px; }
.minne-statusknapper { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.minne-status [data-arkiv-lesestatus] { flex: 1 1 100%; }
.minne-status [data-arkiv-lesestatus]:empty { display: none; }
.minne-brikke-feil { background: var(--neg-lys); color: var(--neg); }

/* Merkelappen på et treff som ligger i en dokumentmappe. Egen tone fra
   typemerkelappen ved siden av: den sier hvilket FORMAT treffet har, denne
   hvilket BYGG det gjelder, og to like brikker ville blitt lest som én
   opplysning. */

.minne-forslag { margin-bottom: 4px; }
.minne-forslag .brikke { text-decoration: none; color: var(--dempet-mork); }
.minne-forslag .brikke:hover { border-color: var(--aksent); color: var(--aksent); }
.minne-valgt { background: var(--aksent-lys); color: var(--aksent); border-color: var(--aksent); }

.minne-overskrift { margin: 0; font: 600 19px var(--display); }
.minne-treffhode {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  align-items: baseline; justify-content: space-between; margin: 26px 0 12px;
}

.minne-svarboks {
  margin-top: 22px; padding: 18px 20px;
  background: var(--mork); color: #e8e4d8; border-radius: var(--radius);
}
.minne-svarboks .minne-overskrift { color: #e8e4d8; }
/* #518: overskriften her bærer et prosjektnavn eller org.nr — ubegrenset lengde,
   til forskjell fra de faste overskriftene («Svar», «Prosjektminnet») samme
   klasse ellers viser. Uten wrap stikker et langt navn ut av boksen ved 150 %
   tekst på 320 px. */
[data-minne-sammendragstreff] .minne-overskrift { overflow-wrap: anywhere; }
.minne-svartekst { margin-top: 12px; font: 400 14.5px/1.7 var(--sans); overflow-wrap: anywhere; }
.minne-kilder { margin: 14px 0 0; padding-left: 1.6em; font-size: 12px; line-height: 1.75; color: #a8b0a4; }
.minne-kilder li { overflow-wrap: anywhere; }
.minne-kilder li:target { color: #e8e4d8; }

/* Direktesvaret (#426) — samme mørke boks som agentsvaret, samme fargesett. */
.minne-direktesvar-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: #a8b0a4; }
.minne-direktesvar-linje { margin-top: 14px; }
.minne-direktesvar-linje a { color: #cfe3d6; font-size: 12px; }
.minne-direktesvar-note a, .minne-svarboks .lnk { color: #cfe3d6; }

/* Stegene agenten tok (#402) er samme liste som i prospektet (#625); inni den
   mørke svarboksen får de samme tone som `.notat-status` bruker der. */
.minne-svarboks .melding-steg-live { color: #a8b0a4; }

.minne-prosjekt { margin-bottom: 14px; }
.minne-fyll { background: var(--aksent); }

.minne-dok { margin-top: 16px; padding-left: 12px; border-left: 3px solid var(--kant); }
.minne-dok-topp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; }
.minne-type {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 5px;
  background: var(--felt-bg); border: 1px solid var(--kant);
  font: 600 10px var(--sans); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--dempet-mork);
}
.minne-dok-navn { font: 700 14px var(--sans); overflow-wrap: anywhere; }
.minne-opphav { color: var(--dempet); overflow-wrap: anywhere; }
.minne-gruppe { margin-top: 4px; overflow-wrap: anywhere; }

.minne-bit { margin-top: 8px; }
.minne-utdrag {
  margin: 0; padding: 9px 12px; border-radius: 9px; background: var(--felt-bg);
  font: 400 13.5px/1.6 var(--display); color: #3e433c; overflow-wrap: anywhere;
}
.minne-bitfot {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  justify-content: space-between; align-items: baseline; margin-top: 5px;
}
/* Det justerte tallet står INNE i utdraget, rett etter beløpet det gjelder, og
   skal aldri kunne forveksles med noe dokumentet selv har skrevet: egen flate,
   egen skrift, egen farge. `inline` (ikke inline-block) lar den brekke midt i
   ved 150 % tekst på 320 px — en boks som ikke kan brekke, stikker ut. */
.minne-indeks {
  display: inline; background: var(--aksent-lys); border-color: transparent;
  color: var(--aksent); font: 500 11.5px/1.5 var(--sans); padding: 1px 6px;
  overflow-wrap: anywhere;
}

.minne-spor { display: flex; flex-wrap: wrap; gap: 6px; }
.minne-halv { padding: 1px 7px; border-radius: 5px; font: 500 11px var(--mono); white-space: nowrap; }
.minne-halv.pa { background: var(--aksent-lys); color: var(--aksent); }
.minne-halv.av { background: var(--kant-svak); color: var(--dempet); }

@media (max-width: 40em) {
  .minne-dok { padding-left: 9px; }
  /* Merkelappene er korte og kan stå på én linje selv med 150 % tekst, men
     fotraden må få lov til å brekke i to. */
  .minne-bitfot { flex-direction: column; align-items: flex-start; }
}

/* ── Dokumentutkast ────────────────────────────────────────────────────── */

.utkastskjema { margin-bottom: 6px; }
.utkast-typer { margin-bottom: 14px; }

.utkast-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.utkast-mangler { background: var(--input-bg); color: var(--utleie); border-color: var(--input-kant); }
.utkast-fylt { background: var(--aksent-lys); color: var(--aksent); border-color: var(--aksent); }
/* Statuslinja mens grunnlaget hentes (#625) står på papir, ikke på mørk bunn. */
.utkast-status .notat-status { margin-top: 0; color: var(--dempet-mork); }
/* Grunnfestingen fra serveren (#586): linjene over, brikka med feltene under. */
.utkast-grunnfesting { flex: 1 1 100%; min-width: 0; }
.utkast-grunnfesting .brikke { display: inline-block; max-width: 100%; white-space: normal; }

.utkast-kort { margin-top: 14px; }
.utkast-tekst {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 60vh;
  resize: vertical;
  border: 1px solid var(--kant);
  border-radius: 10px;
  background: var(--felt-bg);
  color: var(--ink);
  padding: 14px 15px;
  line-height: 1.65;
  /* Textarea arver ikke skrift fra body i noen nettleser — både familie og
     størrelse må settes her, ellers står utkastet i nettleserens 13 px Courier. */
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

@media (max-width: 40em) {
  .utkast-tekst { min-height: 50vh; padding: 11px 12px; }
}

/* ── Motpartsanalyse ───────────────────────────────────────────────────── */

/* Brekkpunktene er i `em`, som i resten av stilarket: en telefon på 150 %
   tekst skal kollapse et hakk tidligere, ikke sveive sidelengs. */

.motpart-skjema { margin-top: 18px; }

/* `input[type=file]` har en intrinsisk bredde nettleseren finner på selv, og
   filnavnet ved siden av knappen vokser med skriftstørrelsen. Uten `width:100%`
   er dette elementet alene nok til å dytte hele innholdsruta forbi et 320 px
   viewport ved 150 % tekst. Knappen arver skrift, ellers står den i
   nettleserens egen 13 px mens resten av sida er forstørret. */
.motpart-fil {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--kant);
  border-radius: 9px;
  background: var(--felt-bg);
  font: 500 13px var(--sans);
  color: var(--ink);
}
.motpart-fil::file-selector-button {
  margin-right: 10px;
  padding: 7px 12px;
  border: 1px solid var(--aksent);
  border-radius: 8px;
  background: #fff;
  color: var(--aksent);
  font: 700 12px var(--sans);
  cursor: pointer;
}

.motpart-lest {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: 18px 0 0; padding: 12px 16px;
  background: var(--kort); border: 1px solid var(--kant); border-radius: 12px;
}
.motpart-filnavn { font: 700 14px var(--sans); overflow-wrap: anywhere; }

.motpart-usjekket { background: var(--neg-lys); color: var(--neg); border-color: rgba(176, 74, 34, 0.3); }

/* ------------------------------------------------------- dekning og serier */

/* Dekningslinja er tallet som avgjør hvor mye grafene er verdt: hvor mange
   måledager grunnlaget faktisk består av. Er det for tynt til å tegne, sier
   den det — den er ikke pynt over grafene, den er forbeholdet. */
.dekning {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 10px 14px; border-radius: 12px; background: var(--felt-bg);
  border: 1px solid var(--kant); font-size: 13px;
}
.dekning-tynn { background: var(--neg-lys); border-color: rgba(176, 74, 34, 0.25); }
.dekning-advarsel { color: var(--neg); font-weight: 600; flex: 1 1 100%; }

/* Under tre måledager tegnes ingen linje. Da vises målingene som tall, med
   forklaringen over — taushet ville lest som «ingenting har skjedd». */
.tynt { border: 1px dashed var(--kant); border-radius: 12px; padding: 12px 14px; background: var(--felt-bg); }
.tynt-forklaring { margin: 0; color: var(--dempet-mork); font-size: 13px; line-height: 1.5; }
.tynt-punkter { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tynt-punkter li {
  display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline;
  border: 1px solid var(--kant); border-radius: 10px; padding: 6px 10px; background: var(--kort);
}
.tynt-verdi { font: 700 14px var(--sans); color: var(--ink); }

.tidslinje { list-style: none; margin: 4px 0 0; padding: 0; }
.tidslinje-rad {
  display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--kant-svak); font-size: 13.5px;
}
.tidslinje-rad:first-child { border-top: 0; }
.tidslinje-tekst { flex: 1 1 12em; line-height: 1.5; overflow-wrap: anywhere; }

/* -------------------------------------------------------------- frister */

/* Fristkalenderen (#107). Kortet er tekst hele veien — dato, sitat og
   regnestykke — så alt her er flyt med brytepunkter i `em`, ikke spor i px.
   Ved 150 % tekst i et 320 px viewport er det bare sitatet som vokser, og det
   skal brytes, ikke skyve kanten ut av skjermen. */

.frist-bolk { margin-top: 26px; }
/* Fristkalenderen som rader (8/10): datoen, fristen og avtalen; sitatet når raden åpnes. */
.fristrader { display: flex; flex-direction: column; }
.fristrad { border-top: 1px solid var(--kant-svak); border-left: 3px solid var(--kant); padding-left: 10px; }
.fristrad:first-child { border-top: 0; }
.fristrad > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 0; cursor: pointer; list-style: none; }
.fristrad > summary::-webkit-details-marker { display: none; }
.fristrad > summary::before { content: "▸"; color: var(--dempet); transition: transform .15s; }
.fristrad[open] > summary::before { transform: rotate(90deg); }
.fristrad-dato { font: 600 14px var(--mono); color: var(--ink); white-space: nowrap; }
.fristrad-tekst { flex: 1 1 18em; min-width: 0; overflow-wrap: anywhere; }
.fristrad-avtale { font-size: 13px; color: var(--dempet-mork); }
.fristrad-naar { font-size: 13px; color: var(--dempet-mork); white-space: nowrap; }
.fristrad-mer { padding: 0 0 12px 18px; }
.frist-bolk-lukket { margin-top: 18px; }
.frist-bolk-lukket > summary { cursor: pointer; }
.frist-overskrift { margin: 0 0 4px; font: 600 19px var(--display); overflow-wrap: anywhere; }
.frist-bolk-ingress { margin: 0 0 14px; color: var(--dempet-mork); font-size: 13px; max-width: 46em; }
.frist-fotnote { margin: 12px 0 0; color: var(--dempet); font-size: 12px; }

.frist-kort-rad {
  display: grid;
  /* `min()` framfor et fast gulv: ved 320 px ville 340 px-sporet stukket ut. */
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 14px;
}

.frist-kort, .frist-kontrakt { min-width: 0; }
.frist-kort { border-left: 3px solid var(--kant); }
.frist-forfalt { border-left-color: var(--neg); }
.frist-haster { border-left-color: var(--neg); }
.frist-snart { border-left-color: var(--utleie); }
.frist-senere { border-left-color: var(--aksent); }

.frist-topp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.frist-dato { font: 700 19px var(--mono); color: var(--ink); }
.frist-naar { font-size: 13px; color: var(--dempet-mork); }

.frist-merke-forfalt, .frist-merke-haster { background: var(--neg-lys); color: var(--neg); }
.frist-merke-snart { background: var(--input-bg); color: var(--utleie); }
.frist-merke-senere { background: var(--kant-svak); color: var(--dempet-mork); }

.frist-tittel { margin: 0 0 4px; font: 700 15px var(--sans); overflow-wrap: anywhere; hyphens: auto; }
.frist-handling { margin: 0 0 10px; font-size: 13px; color: var(--dempet-mork); }

/* Sitatet er beviset bak datoen, og skal se ut som et sitat — ikke som brødtekst
   noen kan ha skrevet om underveis. */
.frist-sitat {
  margin: 0; padding: 10px 14px; border-left: 3px solid var(--kant-svak);
  background: var(--felt-bg); border-radius: 0 10px 10px 0;
}
.frist-sitat p { margin: 0; font: 400 13.5px var(--display); line-height: 1.55; overflow-wrap: anywhere; }
.frist-sitat cite { display: block; margin-top: 6px; font: 500 11px var(--sans); font-style: normal; color: var(--dempet); overflow-wrap: anywhere; }

.frist-utledning { margin: 10px 0 0; font-size: 12.5px; color: var(--dempet-mork); line-height: 1.5; overflow-wrap: anywhere; }
.frist-lenkerad { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }

.frist-utlop { margin: 0 0 10px; font-size: 13px; color: var(--dempet-mork); overflow-wrap: anywhere; }

.frist-liste { list-style: none; margin: 0 0 12px; padding: 0; }
.frist-liste li {
  display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--kant-svak); font-size: 13px;
}
.frist-liste li:first-child { border-top: 0; }
.frist-liste-dato { font: 600 13px var(--mono); }
.frist-liste-navn { flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; }
.frist-liste-naar { color: var(--dempet-mork); }

/* Det som IKKE ble funnet. Samme vekt som det som ble det — stillhet her er
   den farlige utgangen, ikke den ryddige. */
.frist-mangler { list-style: none; margin: 0; padding: 0; }
.frist-mangel {
  padding: 10px 0; border-top: 1px dashed var(--kant);
  display: flex; flex-direction: column; gap: 5px;
}
.frist-mangel-navn { font: 700 12px var(--sans); color: var(--ink); }
.frist-mangel-merknad { font-size: 12.5px; line-height: 1.5; color: var(--dempet-mork); overflow-wrap: anywhere; }

/* -------------------------------------------- selskap som inngang (#64) */

.seksjonstittel { margin: 30px 2px 8px; font: 600 19px var(--display); overflow-wrap: anywhere; }

/* Samme grunnform som konsernraden, men tre kolonner i stedet for fem. Navn og
   proveniens bærer bredden; rolle og dato er smale. */
.selskapsrad {
  display: grid; grid-template-columns: minmax(0, 3fr) repeat(2, minmax(0, 0.9fr));
  gap: 12px; align-items: start; padding: 13px 16px;
}
.selskapsrad > * { min-width: 0; }

@media (max-width: 52em) {
  .selskapsrad { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .selskapsrad .konsern-navn { grid-column: 1 / -1; }
  .selskapsrad .konsern-celle { text-align: left; }
}

/* Ved 150 % tekst i et 320 px viewport er det NAVNET og ETIKETTEN som sprenger
   raden, ikke rutenettet: et flex-barn har `min-width: auto` og nekter å bli
   smalere enn sitt lengste ord, og «Enhetsregisteret» er langt. Målt 2026-08-10
   sto trefflista til 289 px i et 282 px spor. Blokk + `overflow-wrap: anywhere`
   lar begge brekke; merkene står fortsatt på linje med navnet. */
.selskapsrad .konsern-selskap { display: block; overflow-wrap: anywhere; }
.selskapsrad .konsern-selskap > * { vertical-align: middle; }
.selskapsrad .konsern-celle { overflow-wrap: anywhere; }

/* ------------------------------------------- dokumentgenerator (#138/#139) */

/* `min-width: auto` er standard på et grid-barn, og et tekstområde regner den
   ut av innholdet sitt. Ved 150 % tekst presser det sporet ut over viewportet
   uten at noen har skrevet en eneste regel om bredde. */
.felt textarea { min-width: 0; }

/* Nedlastingen er en lenke, ikke en knapp — den skal likevel SE ut som en. */
a.knapp { display: inline-block; text-decoration: none; }

/* ------------------------------------------ bank- og styrevisning (#225) */

/* Terskelfeltet: ETT felt og en knapp, side om side når det er plass til det.
   `flex-wrap` og et gulv i `min()` framfor et fast em-gulv — det er nettopp et
   hardt gulv som dytter en rad ut av et 320 px viewport ved 150 % tekst. */
.bankterskel {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  margin-top: 16px; padding: 14px 18px;
  background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radius);
}
.bankterskel .felt { flex: 1 1 min(16em, 100%); min-width: 0; }
.bankterskel .knapp { flex: 0 0 auto; }

.bankblokk { margin-top: 22px; }
/* Nøkkeltallsrutenettet arves fra `.nokkeltall`; her trengs bare luften over
   det når blokka begynner med sitt eget hode. */
.bankblokk .nokkeltall { margin-top: 12px; padding-top: 0; border-top: 0; }

.bankgrunnlag { font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

/* Verdiutviklingen på bank-/styresida (#226). Grafene og «for tynt grunnlag»-
   boksen arver formen sin fra `.grafblokk` og `.tynt`. Her trengs bare luften rundt hver gruppe, og at ingenting har et px-gulv som
   presser sida ut i sida når teksten forstørres. */
.bankutvikling { margin-top: 18px; min-width: 0; }
.bankutvikling + .bankutvikling { padding-top: 6px; border-top: 1px solid var(--kant); }
.bankutvikling .drifttittel { overflow-wrap: anywhere; }
[data-utviklingsgrunnlag] { margin: 10px 0 0; line-height: 1.55; max-width: 62em; }
[data-utviklingforbehold] { margin-top: 12px; }

/* Eksporten (#227): vedlegget til styrereferatet.

   Raden er `flex-wrap` med et gulv i `min()` av samme grunn som `.bankterskel`
   over — et hardt em-gulv er nettopp det som dytter en knapperad ut av et
   320 px viewport ved 150 % tekst. Knappene er en lenke OG en knapp side om
   side, så lenka må få knappens boksform uten å arve understrekingen. */
.bankeksport {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 10px 18px; margin-top: 16px; padding: 14px 18px;
  background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radius);
}
.bankeksport > div { flex: 1 1 min(20em, 100%); min-width: 0; }
.bankeksport .knapperad { margin-top: 0; flex: 0 1 auto; }
.bankeksport p { margin: 4px 0 0; line-height: 1.55; overflow-wrap: anywhere; }
a.knapp { display: inline-block; text-decoration: none; }

/* Forbeholdene samlet. `overflow-wrap: anywhere` fordi setningene er lange og
   inneholder ord som «belåningsgrad» — de brekker ikke av seg selv på 320 px. */
.bankforbehold .forbeholdsliste {
  margin: 12px 0 0; padding: 0 0 0 1.4em; min-width: 0;
}
.forbeholdsliste li {
  font-size: 13px; line-height: 1.6; color: var(--dempet-mork);
  margin-bottom: 6px; overflow-wrap: anywhere;
}

/* `.felt input { width: 100% }` er skrevet for tekstfelt — den seks
   avkryssingsboksene i kriterieskjemaet ligger inni `.felt-navn` og ville
   arvet den samme regelen, og en checkbox strukket til hele kolonnebredden
   dytter teksten ETTER den ut over kanten. Målt: 241/234 px på 320 px ved
   150 % tekst, likt for alle seks radene uansett hvor lang etiketten var —
   nettopp fordi det var boksen, ikke teksten, som var for bred. */
.felt-navn input[type="checkbox"] { width: auto; }

/* ------------------------------------------------------- tildelingsgrafen */
/* #300: person → kilde, samme radform som `.avtalerad` — flex med `wrap`,
   ikke et grid, fordi en kilde kan ha null, én eller mange personer tildelt.
   `min-width: 0` på personlista er den halvdelen som ellers stikker en lang
   e-postadresse ut av kortet på 320 px ved 150 % tekst. */
.tildelingrader { display: flex; flex-direction: column; margin-top: 10px; }
.tildelingrad {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 11px 2px; border-top: 1px solid var(--kant-svak); min-width: 0;
}
.tildelingrad:first-child { border-top: 0; }
/* `min-width: 0` på HVER av disse — standardverdien `auto` betyr «aldri
   smalere enn min-content», og en e-postadresse er ett unbrytbart ord. Uten
   det presser den flex-sporet ut over viewportet selv om `overflow-wrap`
   står på, nøyaktig samme felle som CLAUDE.md advarer mot. */
.tildelingrad-kilde { color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.tildelingrad-personer {
  display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0;
  list-style: none; flex: 1 1 auto; min-width: 0;
}
.tildelingrad-person { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.tildelingrad-navn { font: 600 13.5px var(--sans); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }

/* HULL PÅ TVERS (#369) — «17 prosjekter mangler ferdigattest», på /minne.
 *
 * Ingen faste px-gulv og `overflow-wrap: anywhere` på prosjektnavnet, av
 * samme grunn som resten av CLAUDE.md sin mobil-seksjon: et prosjektnavn er
 * et ord vi ikke kontrollerer lengden på, og ved 150 % tekstforstørrelse er
 * det den som skyver sida ut over viewportet uten vakta. */
.minne-hull-boks, .minne-siste-boks { margin: 18px 0; padding: 14px 16px; background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radius); }
.minne-hull-rad { padding: 9px 0; border-top: 1px solid var(--kant-svak); }
.minne-hull-rad:first-of-type { border-top: 0; }
.minne-hull-tittel { margin: 0; font: 600 14.5px var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.minne-hull-kostnad { margin: 2px 0 0; }
.minne-hull-prosjektliste {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; padding: 0; list-style: none;
}
.minne-hull-prosjektliste li { overflow-wrap: anywhere; min-width: 0; font-size: 13px; color: var(--dempet-mork); }
/* «Dine siste spørsmål» (#878): spørsmålet er tekst noen har skrevet, av vilkårlig lengde. */
.minne-siste-liste { margin: 6px 0 0; padding: 0; list-style: none; }
.minne-siste-liste li { padding: 3px 0; overflow-wrap: anywhere; min-width: 0; font-size: 13.5px; }
.minne-prosjektlenke { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--kant); }
.minne-prosjektlenke:hover { border-bottom-color: var(--dempet); }

/* Fasene (#558): en stripe under tittelen, over begge kolonnene — fasen styrer
   hele rommet. Fem steg i rekkefølge; hvert sier hva fasen er til for (#876),
   og de andre har en knapp som sier om den flytter fram eller tilbake. Den
   prospektet står i bærer aksenten og er ingen knapp. Stegene brytes over flere
   linjer heller enn å krympe, og står under hverandre på en telefon. */
.fasestripe {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 16px;
  margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--kant-svak); border-radius: 12px; background: var(--felt-bg);
}
.faseliste {
  list-style: none; margin: 0; padding: 0; grid-column: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10em, 100%), 1fr)); gap: 6px;
}
.fasesteg {
  min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px;
  border: 1px solid var(--kant); border-radius: 10px; background: var(--kort); font-size: 13px;
}
.fasesteg.aktiv { border-color: var(--aksent); background: var(--aksent-lys); box-shadow: inset 3px 0 0 var(--aksent); }
.fasesteg form { margin: auto 0 0; }
.fasetittel { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.fasesteg.aktiv .fasetittel { color: var(--aksent); }
.fasenummer { font: 600 11px var(--mono); color: var(--dempet); }
.fasesteg.aktiv .fasenummer { color: var(--aksent); }
.fasenavn { overflow-wrap: anywhere; min-width: 0; }
.fasehva { margin: 0; color: var(--dempet-mork); line-height: 1.4; overflow-wrap: anywhere; }
.fasevalg { width: 100%; white-space: normal; overflow-wrap: anywhere; }
.fase-her { margin: auto 0 0; font-weight: 600; color: var(--aksent); }
.kvittering-angre { display: inline-block; margin: 0 0 0 10px; vertical-align: middle; }
.avslutning { grid-column: 2; grid-row: 1 / span 2; font-size: 14px; max-width: 22em; }
.avslutning > summary { cursor: pointer; color: var(--dempet-mork); font-size: 13px; padding: 7px 0; white-space: nowrap; }
.avslutning[open] > summary { margin-bottom: 8px; }
.fasestripe.avsluttet { grid-template-columns: minmax(0, 1fr); }
.avsluttet-hode { margin: 0 0 4px; overflow-wrap: anywhere; }
.fasestripe.avsluttet form { margin-top: 8px; }
@media (max-width: 48em) {
  .fasestripe { grid-template-columns: minmax(0, 1fr); }
  .avslutning { grid-column: 1; grid-row: auto; max-width: none; }
}
.prospektstatus-kontrakt, .prospektstatus-dd { background: var(--input-bg); color: var(--input-tekst); border-color: var(--input-kant); }
.prospektstatus-opsjon, .prospektstatus-tomt_funnet { background: var(--aksent-lys); color: var(--aksent); border-color: transparent; }

/* De andres samtaler (#559): én sammenfoldet rad per person, over ens egen. */
.andre-samtaler { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 4px; }
.annen-samtale { border: 1px solid var(--kant-svak); border-radius: 10px; background: var(--felt-bg); }
.annen-samtale > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 9px 12px; cursor: pointer; overflow-wrap: anywhere; }
.annen-samtale > summary strong { min-width: 0; }
.annen-samtale[open] > summary { border-bottom: 1px solid var(--kant-svak); }
.annen-samtale > p, .annen-samtale > ol { margin-left: 12px; margin-right: 12px; }
.annen-samtale > p { margin-top: 8px; margin-bottom: 0; }
.annen-samtale > summary strong { font: 600 14px var(--sans); }
.samtalefase { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--kant-svakest); color: var(--dempet-mork); font: 600 11px var(--sans); }
.annen-samtale[data-egen] { border-color: var(--aksent-lys); }

/* Panelene (#561): et kort som kan foldes sammen. Panelet eier overskriften;
   kortet inni mister sin egen ramme og topp, så det ikke blir kort i kort.
   Lukket står navnet og én linje om hva som står der. */
.panel {
  background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(40, 36, 24, 0.04); margin-top: 18px; min-width: 0;
}
.panel > .panel-topp {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 16px 24px;
  cursor: pointer; list-style: none;
}
.panel > .panel-topp::-webkit-details-marker { display: none; }
.panel > .panel-topp::before { content: "▸"; color: var(--dempet); font-size: 12px; transition: transform .12s; }
.panel[open] > .panel-topp::before { transform: rotate(90deg); }
.panel-navn { font: 600 16px var(--sans); }
.panel-oppsummering { font-size: 13px; color: var(--dempet-mork); overflow-wrap: anywhere; min-width: 0; }
.panel[open] > .panel-topp { padding-bottom: 4px; }
.panel-innhold > .kort { border: 0; box-shadow: none; background: transparent; margin: 0; padding-top: 0; }
.panel-innhold > .kort > .kort-topp { display: none; }
.prospektrom-hoved > .panel:first-child, .prospektrom-side > .panel:first-child { margin-top: 18px; }
@media (max-width: 40em) {
  .panel > .panel-topp { padding: 14px 16px; }
}

/* Analysen, budene og kontrakten (#561). */
.analyse-tekst { white-space: normal; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.analyseflagg { margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.budliste { list-style: none; margin: 12px 0; padding: 0; }
.budrad { padding: 10px 0; border-bottom: 1px solid var(--kant-svakest); }
.budrad-hode { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.budrad-belop { font: 600 15px var(--sans); font-variant-numeric: tabular-nums; }
.budrad-hvem { font-size: 13px; color: var(--dempet-mork); overflow-wrap: anywhere; }
.budrad-vart .budrad-belop { color: var(--aksent); }
.budrad-forbehold { margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.budrad-varsel { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--sand); background: var(--felt-bg); font-size: 13px; }
.budrad form { margin-top: 6px; }
.nytt-bud { margin-top: 12px; }
.nytt-bud summary { cursor: pointer; color: var(--aksent); font-size: 14px; }
.budskjema { margin-top: 10px; }
/* Et bud eller en teig et dokument i prospektet foreslår (#1018). */
.dokumentforslag { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--sand); border-radius: 0 8px 8px 0; background: var(--felt-bg); }
.dokumentforslag-tekst { margin: 0 0 6px; font-size: 14px; overflow-wrap: anywhere; }
.dokumentforslag-sitat { display: block; margin-top: 2px; overflow-wrap: anywhere; }

/* Typen og tomtene (#562). */
.typevalg { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; display: grid; gap: 6px; }
.typevalg legend { margin-bottom: 6px; }
.typevalg-rad { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--kant-svak); border-radius: 10px; cursor: pointer; min-width: 0; }
.typevalg-rad:has(input:checked) { border-color: var(--aksent); background: var(--aksent-lys); }
.typevalg-rad input { margin-top: 3px; flex: none; }
/* Beskrivelsen er den lille skrifta, og tittelen sier sin egen størrelse: i
   standards mode får hver linje forelderens linjehøyde (#593). */
.typevalg-rad > span { min-width: 0; overflow-wrap: anywhere; font-size: 11px; line-height: 1.4; }
.typevalg-rad > span > strong { font-size: 16px; line-height: 1.3; }
.typebytte { margin: -4px 0 6px; font-size: 13px; }
.bruksvalg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.typebytte summary { cursor: pointer; }
.typebytte form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.typebytte select { max-width: 100%; }
.tomtliste { list-style: none; margin: 0 0 12px; padding: 0; }
.tomtrad { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--kant-svak); border-radius: 10px; min-width: 0; }
.tomtrad.aktiv { border-color: var(--aksent); background: var(--aksent-lys); }
.tomtrad-forkastet { background: var(--felt-bg); } /* ikke opacity (1.4.3); «forkastet» står i raden */
.tomtrad-hode { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tomtrad-adresse { overflow-wrap: anywhere; min-width: 0; }
.tomtrad-tall { margin-top: 2px; overflow-wrap: anywhere; }
.tomtrad-begrunnelse { margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.tomtrad-handlinger { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 8px; }
.tomtrad-handlinger form { margin: 0; }
.tomtsum { margin: -4px 0 16px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } /* summen under lista (#685) */
.tomtstatus summary, .tomtkrav summary, .ny-tomt summary { cursor: pointer; font-size: 13px; color: var(--aksent); }
.tomtstatus form { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin-top: 6px; }
.tomtstatus .felt { flex: 1 1 10em; min-width: 0; }
.tomtkrav { margin-top: 6px; }
.tomtkrav ul { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; }
.krav { display: flex; gap: 6px; padding: 3px 0; overflow-wrap: anywhere; }
.krav-merke { flex: none; width: 1.2em; font-weight: 600; }
.krav-oppfylt .krav-merke { color: var(--aksent); }
.krav-ikke .krav-merke { color: var(--tegl, #a4452c); }
.krav-ukjent .krav-merke { color: var(--dempet); }
.prospektstatus-tomt-valgt { background: var(--aksent-lys); color: var(--aksent); border-color: transparent; }
.prospektstatus-tomt-forkastet { color: var(--dempet); }
.onske-aktor { margin: 0 0 10px; overflow-wrap: anywhere; }

/* Analyserte eiendommer (#563): kartet og forklaringen. Fargene er utfallenes,
   de samme som merkene i lista; kartøya leser dem herfra. */
.kartoversikt { height: min(62vh, 560px); border-radius: 10px; overflow: hidden; border: 1px solid var(--kant-svak); }
.kartforklaring { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 4px; padding: 0; font-size: 13px; }
.kartforklaring li { display: inline-flex; align-items: center; gap: 6px; }
.kartprikk { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--kant); }
.kartprikk-kjopt, .kartprikk-tomt_funnet { background: var(--aksent); }
.kartprikk-opsjon { background: #2f7d7a; }
.kartprikk-tapt { background: var(--sand); }
.kartprikk-forkastet { background: #8a8577; }
.kartprikk-oppslag { background: #4b6a8f; }
.uplassert summary { cursor: pointer; font-size: 13px; color: var(--aksent); }
.uplassert ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.uplassert li { overflow-wrap: anywhere; }
.visningsvalg { margin-bottom: 6px; }
.avsluttetrad-begrunnelse { font-size: 13px; color: var(--dempet-mork); overflow-wrap: anywhere; }
.prospektstatus-tapt { background: var(--felt-bg); }

/* Kontraktsarbeid i samtale (#450): lista på /avtaler og feltene i rommet. */
.kontraktliste { list-style: none; margin: 8px 0 12px; padding: 0; }
.kontraktrad { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid #f2eee4; text-decoration: none; color: inherit; min-width: 0; }
.kontraktliste li:first-child .kontraktrad { border-top: 0; }
.kontraktrad .liten { overflow-wrap: anywhere; }
.kontraktfeltgruppe { margin-top: 12px; }
/* Paragrafene i 2025-standardene har ord som «LEIETAKERKOSTNADER», for lange til en telefon ved 150 % tekst (#211). */
.kontraktfeltgruppe-tittel { margin: 0 0 4px; font: 700 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dempet); overflow-wrap: anywhere; hyphens: auto; }
.kontraktfelter { list-style: none; margin: 0; padding: 0; }
.kontraktfelt { border-top: 1px solid #f2eee4; }
.kontraktfelt:first-child { border-top: 0; }
/* Feltene står i sidekolonnen: navnet over verdien. */
.kontraktfelt > details > summary {
  list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 1px; padding: 7px 0; font-size: 13.5px;
}
.kontraktfelt > details > summary::-webkit-details-marker { display: none; }
.kontraktfelt-navn { color: var(--dempet-mork); font-size: 12px; overflow-wrap: anywhere; }
.kontraktfelt-verdi { font-weight: 600; overflow-wrap: anywhere; }
.kontraktfelt-verdi.tom { font-weight: 400; color: var(--dempet); font-style: italic; }
.kontraktfelt-opphav { overflow-wrap: anywhere; }
.kontraktfelt-sitat { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--kant); color: var(--dempet-mork); font-size: 13px; overflow-wrap: anywhere; }
.kontraktfelt-skjema { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 0 0 10px; }
.kontraktfelt-skjema .felt { flex: 1 1 14em; min-width: 0; }
.kontraktdeltakere, .kontraktendringer { list-style: none; margin: 0 0 8px; padding: 0; }
.kontraktdeltakere li, .kontraktendringer li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 0; overflow-wrap: anywhere; min-width: 0; }
form.inline { display: inline; margin: 0; }
.vedleggsskjema { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.vedleggsskjema input[type="file"] { max-width: 100%; min-width: 0; flex: 1 1 12em; }

/* EIENDOMMEN I PORTEFØLJEN (#750). Listene i kortene er lenker med en dempet
   forklaring bak; de bryter heller enn å presse kortet bredere. */
.dokliste { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.dokliste li { min-width: 0; overflow-wrap: anywhere; }
.leietakerlinje, .fristlinje { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
[data-portefoljeeiendom] .felt-navn { margin: 12px 0 2px; }
[data-portefoljeeiendom] .banner { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.dokumentgrupper { display: grid; gap: 8px; margin-top: 8px; }
.dokumentgruppe { background: #fff; border: 1px solid var(--kant); border-radius: 12px; min-width: 0; }
.dokumentgruppe > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.dokumentgruppe > .kort { margin: 0; border: 0; box-shadow: none; }
.dokumentgruppe > .kort > .kort-topp { display: none; }

/* Forsida i porteføljen (#751): eiendommen, prosjektet, forvaltningen og siste hendelse. */
.porteeidrad.eid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.3fr) minmax(0, 0.9fr) 8.5em; }
.kravliste { list-style: none; margin: 0; padding: 0; }
/* `.kravkvittering` står der en linje sto (#884), med samme luft og strek. */
.kravlinje, .kravkvittering { padding: 9px 0; border-top: 1px solid #f2eee4; font-size: 13.5px; }
.kravlinje { display: grid; grid-template-columns: 9em minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; }
.kravlinje:first-child, .kravkvittering:first-child { border-top: 0; }
.kravlinje > * { min-width: 0; overflow-wrap: anywhere; }
.kravlinje-art { font: 700 9.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dempet-mork); }
/* Datoen over dagene som er igjen: på én linje tok «17. sep. 2026 26 dager
   over fristen» så mye av raden at teksten i midten ble fire tegn bred. */
.kravlinje-nar { text-align: right; }
.kravlinje-nar > .dempet { display: block; }
/* Lista måles mot sin egen bredde, ikke skjermens: den står både over hele
   Portefølje og i en kolonne på hjemmesida. */
.kravliste { container-type: inline-size; }
@container (max-width: 34em) {
  .kravlinje { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kravlinje-nar { text-align: left; }
  .kravlinje-nar > .dempet { display: inline; }
}
.kravlinje-eiendommer { display: block; margin-top: 2px; }
/* Kvitteringen der linja sto (#884): i lista, ikke et kort øverst på sida. */
.kravkvittering > .meldingskort { margin: 0; padding: 10px 14px; }
/* Prosjektlista (#1117): navn, sted og type, med eiendommene og byggene under
   hvert prosjekt. Sida er bred nok til at ingenting kuttes på 1280 px. */
.sidebredde.bred { max-width: none; }
.prosjekttabell table { width: 100%; background: var(--kort); }
.prosjekttabell th[scope="row"] { text-align: left; font-weight: 400; background: none; vertical-align: top; }
.prosjekttabell td { vertical-align: top; }
.prosjektliste-prosjekt + .prosjektliste-prosjekt > tr:first-child > * { border-top: 2px solid var(--kant); }
.prosjektnavn { font-weight: 600; overflow-wrap: anywhere; }
.prosjektopphav { display: block; overflow-wrap: anywhere; }
.prosjektliste-eiendom > td:first-child { padding-left: 1.75em; }
.prosjektliste-eiendom .celle-eiendom { gap: 2px; }
.prosjektbygg { display: block; overflow-wrap: anywhere; }
.ferdige-prosjekter > summary { cursor: pointer; margin: 4px 0 12px; }
.selskapsbolker { display: grid; gap: 8px; }
.selskapsbolk { background: #fff; border: 1px solid var(--kant); border-radius: 12px; min-width: 0; }
.selskapsbolk > .tabellkort { margin: 0; border: 0; border-top: 1px solid var(--kant); border-radius: 0 0 12px 12px; box-shadow: none; }
.selskapsbolk-topp {
  cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px;
  padding: 13px 18px; font-size: 14px;
}
.selskapsbolk-navn { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 62em) {
  .porteeidrad.eid { grid-template-columns: 1fr 1fr; }
}
.kjopsanalyse .grupperutenett { margin-top: 8px; }
.kjopsnotat { margin-top: 12px; }
.kjopsnotat > summary { cursor: pointer; font-weight: 600; font-size: 14px; }

/* ── Tvistesakene (#770) ─────────────────────────────────────────────── */
.standpunkt { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.standpunkt-oss-sterkt { background: var(--aksent); color: var(--kort); }
.standpunkt-oss { background: var(--aksent-lys); color: var(--aksent); }
.standpunkt-uavklart { background: var(--input-bg); color: var(--input-tekst); }
.standpunkt-motpart { background: var(--kant-svak); color: var(--ink); }
.standpunkt-motpart-sterkt { background: var(--ink); color: var(--kort); }
.sakkrav { padding-left: 0; list-style: none; margin: 8px 0; }
.sakkrav > li { border-top: 1px solid var(--kant-svak); padding: 6px 0; min-width: 0; }
.sakkrav summary { cursor: pointer; overflow-wrap: anywhere; }
.sakfrister, .saktidslinje, .sakkilder { padding-left: 18px; margin: 4px 0; }
.sakfrister li, .saktidslinje li, .sakkilder li { margin: 4px 0; overflow-wrap: anywhere; }
.saktekst { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; margin-top: 8px; }
.kildemerke { font-size: 11px; vertical-align: super; text-decoration: none; }

/* Begrepene (/begreper): ordet, så hva det betyr. */
.begrepsliste { margin: 0; }
.begrep { padding: 10px 0; border-top: 1px solid var(--kant-svak); min-width: 0; }
.begrep:first-child { border-top: 0; padding-top: 0; }
.begrep dt { font-weight: 600; }
.begrep dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.begrep:target { background: var(--aksent-lys); }

/* Det avtalen krever (#805): én rad per krav, dagen først, skjemaet under. */
.kravliste { list-style: none; margin: 0; padding: 0; }
.kravrad { padding: 10px 0; border-top: 1px solid var(--kant-svak); min-width: 0; }
.kravrad:first-child { border-top: 0; padding-top: 0; }
.kravrad-topp { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.kravrad-dag { font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.kravrad-hva { flex: 1 1 16em; min-width: 0; overflow-wrap: anywhere; }
.kravrad[data-kravstatus="oppfylt"], .kravrad[data-kravstatus="ikke_aktuell"] { background: var(--felt-bg); } /* ikke opacity: dempet tekst ble 2,9:1 (1.4.3) */
.klausul summary { cursor: pointer; padding: 4px 0; }

/* Endringene mellom to versjoner (#808): det som var, og det som står nå. */
.endring-for { margin: 4px 0 0; color: var(--dempet-mork); text-decoration: line-through; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.endring-etter { margin: 4px 0 0; color: var(--aksent); overflow-wrap: anywhere; }

/* Kilden til et felt står på sin egen linje under verdien (#804, også leieforholdet). */
.kvrad-verdi > .felt-hjelp { display: block; font-weight: 400; margin-top: 2px; }
.kravrad-skjema > summary { cursor: pointer; font-size: 13px; color: var(--dempet-mork); padding: 4px 0; }
.kravrad-status { font-size: 13px; color: var(--dempet-mork); margin: 4px 0 0; }
/* Forrige og neste side i en lang liste (8/10). */
.sidevelger { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0; }
.sidevelger-tekst { font-size: 13px; color: var(--dempet-mork); }
/* Planums standpunkt i klausulbiblioteket: teksten, og skjemaet bak en knapp. */
.standpunkt { margin: 0 0 12px; display: grid; gap: 4px; }
.standpunkt dt { font: 600 12px var(--sans); color: var(--dempet-mork); margin-top: 6px; }
.standpunkt dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Innholdslista på en lang rapport (/bank): lenker til hver del, ikke på papir. */
.innholdsliste { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.innholdsliste .brikke { text-decoration: none; }
/* Forklaringen under et søk som ikke er gjort ennå: tekst, ikke en ny overskrift under feltet (8/10). */
.tomtilstand-forklaring { max-width: 42em; margin-top: 4px; }

/* Sida til én ting (#829): toppen med nøkkeltall og kart, fanene, og
   innholdet med «Spør om denne» og tidslinja ved siden av. Under 72em står
   kolonnen under innholdet; brekkpunktet er i em, så stor tekst kollapser
   et trinn tidligere. */
.tingside-topp { display: grid; gap: 18px; align-items: start; }
.tingside-hode { min-width: 0; }
.tingside-kart { min-width: 0; }
.tingside-kart .kartoversikt-kort { margin-top: 0; }
.kartoversikt-liten .kartoversikt { height: 240px; }
.tingside-kropp { display: grid; gap: 18px; align-items: start; }
.tingside-innhold, .tingside-kolonne { min-width: 0; }
.tingside-kolonne > * + * { margin-top: 18px; }
.tidslinje { list-style: none; margin: 0 0 8px; padding: 0; }
.tidslinje-rad { padding: 6px 0; border-top: 1px solid var(--kant-svak); overflow-wrap: anywhere; }
.kartprikk-eid { background: var(--aksent); }
@media (min-width: 72em) {
  .tingside-topp { grid-template-columns: minmax(0, 1fr) minmax(0, 22em); }
  .tingside-kropp { grid-template-columns: minmax(0, 1fr) minmax(0, 24em); }
}

/* Reguleringsløpet som tidslinje (#830): én rad per fase, det som er nådd i
   aksentfargen, og «Sett dato» til høyre. */
.reguleringsfaser { list-style: none; margin: 12px 0 0; padding: 0; }
.regfase {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline;
  padding: 10px 0 10px 18px; border-top: 1px solid var(--kant-svak); position: relative;
}
.regfase::before { content: ""; position: absolute; left: 2px; top: 16px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--kant); background: var(--flate, #fff); }
.regfase.nadd::before { background: var(--aksent); border-color: var(--aksent); }
.regfase-navn { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.regfase-dato { text-align: right; }
.regfase-kilde { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.regfase > a { grid-column: 2; text-align: right; }

/* Innboksen (#834): lenka i toppen med tallet, og handlingene ved en linje. */
.innbokslenke {
  flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; color: var(--torv); text-decoration: none; font-weight: 600;
}
.innbokslenke + .brukermeny { margin-left: 8px; }
.innbokslenke:hover, .innbokslenke.aktiv { background: var(--aksent-lys); color: var(--aksent); }
.innboks-antall { min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: var(--aksent); color: #fff; font-size: 12px; text-align: center; }
.innboks-handlinger { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: end; margin-top: 8px; }
.innboks-handlinger .felt { min-width: 0; }
/* På telefon får områdene hele raden, og innboksen legger seg under dem: ved
   150 % tekst på 320 px presset lenka «Avtaler/kontrakter» ut av raden. */
@media (max-width: 56em) {
  .topplinje { flex-wrap: wrap; }
  .topplinje .omrademeny { flex: 1 1 100%; }
  .innbokslenke { margin: 4px 0 0 auto; }
}

/* #836: prospektene på kartet, farget etter fasen. */
.kartprikk-fase-ide { background: #b9b2a1; }
.kartprikk-fase-vurdering { background: #4b6a8f; }
.kartprikk-fase-bud { background: #b5872f; }
.kartprikk-fase-dd { background: #8a5a9e; }
.kartprikk-fase-kontrakt { background: #2f7d7a; }
.kartprikk-loper { background: var(--aksent); }
.kartprikk-loper-ut { background: #b5872f; }
.kartprikk-avsluttet { background: #8a8577; }

/* #838: prospektene som tavle, én kolonne per fase. Tavla ruller sidelengs i seg selv. */
.tavle { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.tavlekolonne { flex: 0 0 15rem; max-width: 80vw; background: var(--kant-svakest); border-radius: 8px; padding: 10px; min-width: 0; }
.tavlekolonne-tittel { font-size: 0.95rem; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tavlekort-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tavlekort { background: var(--kort); border: 1px solid var(--kant); border-radius: 6px; padding: 8px 10px; display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.tavlekort-navn { font-weight: 600; }
.tavlekort-meta { font-size: 0.85rem; color: var(--dempet); }
.tavlekort-pris { font-variant-numeric: tabular-nums; }
.tavlekort-frist { font-size: 0.85rem; }
.tavlekort .radskjema { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.tavlekort .felt { min-width: 0; }

/* #903: ARBEIDSKARTET. På `/analyse` fyller det innholdsflaten under
   topplinja (skallet får skjermens høyde, og innholdsruta ruller ikke), med
   sidekolonnen til venstre og panelet over kartet til høyre. I prospektet står
   det i et kort. På telefon er kartet hele flaten, sidekolonnen en skuff og
   panelet et ark som skyves opp. Fargene på Planums egne lag står her, og øya
   leser dem (`--kartlag-<id>`). */
.skall:has(.arbeidskart-side) { height: 100vh; height: 100dvh; }
.innhold:has(.arbeidskart-side) { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.arbeidskart {
  --kartlag-portefolje: var(--aksent); --kartlag-prospekter: #4b6a8f; --kartlag-tomter: #4b6a8f;
  --kartlag-solgte: #8a8577; --kartlag-analyserte: var(--utleie); --kartlag-planarbeid: #2f7d7a;
  --kartlag-valgt: #b5872f; --kartlag-vist: var(--aksent); --kartlag-maaling: var(--torv);
  --kartpanel: min(380px, 42%);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  height: min(70vh, 640px); border: 1px solid var(--kant-svak); border-radius: 10px; overflow: hidden;
}
.arbeidskart-side { flex: 1; min-height: 0; height: auto; border: 0; border-radius: 0; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.arbeidskart-side[data-innfelt] { grid-template-columns: minmax(0, 1fr); }
.arbeidskart-side[data-innfelt] .arbeidskart-kolonne { display: none; }
.arbeidskart-kolonne {
  min-width: 0; overflow-y: auto; overflow-wrap: anywhere; padding: 16px;
  background: var(--bg); border-right: 1px solid var(--kant); display: grid; align-content: start; gap: 14px;
}
.kartkolonne-topp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.kartkolonne-topp .sidetittel { margin: 0; }
.kartkolonne-bolk { display: grid; gap: 8px; min-width: 0; }
.arbeidskart-kolonne .veivalgrutenett { grid-template-columns: minmax(0, 1fr); }
.sok-smal { padding: 12px; flex-direction: column; align-items: stretch; }
.sok-smal .sokfelt { flex: 0 0 auto; }
.arbeidskart-flate { position: relative; min-width: 0; min-height: 0; }
.arbeidskart-kart { position: absolute; inset: 0; }
.kartverktoy {
  position: absolute; top: 10px; left: 10px; right: calc(var(--kartpanel) + 20px); z-index: 1000;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; pointer-events: none;
}
.kartverktoy > * { pointer-events: auto; }
.kartsok { display: flex; gap: 6px; flex: 1 1 16rem; max-width: 26rem; min-width: 0; position: relative; }
.kartsok input {
  flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--felt-kant); border-radius: 10px;
  background: var(--kort); font: 500 15px var(--sans); color: var(--ink);
}
.kartsok-treff {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none;
  background: var(--kort); border: 1px solid var(--kant); border-radius: 10px; max-height: 50vh; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(40, 36, 24, 0.12);
}
.kartsok-treff[hidden] { display: none; }
.kartsok-treff button {
  display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px;
  font: 400 14px var(--sans); color: var(--ink); cursor: pointer; overflow-wrap: anywhere;
}
.kartsok-treff button:hover, .kartsok-treff button:focus-visible { background: var(--aksent-lys); }
.kartsok-treff li:not(:has(button)) { padding: 8px 10px; }
.kartknapper { display: flex; flex-wrap: wrap; gap: 6px; }
.kartknapper .knapp.hul { background: var(--kort); }
.kartknapper .knapp[aria-pressed="true"] { background: var(--aksent); color: #fff; }
.kartlagvelger, .kartmaaling {
  flex-basis: 100%; max-width: 24rem; background: var(--kort); border: 1px solid var(--kant); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(40, 36, 24, 0.12);
}
.kartlagvelger { max-height: 60vh; overflow-y: auto; padding: 10px 12px; display: grid; gap: 10px; }
.kartlagvelger[hidden], .kartmaaling[hidden] { display: none; }
.kartlaggruppe { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 4px; }
.kartlaggruppe legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.kartlagvalg { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9rem; min-width: 0; overflow-wrap: anywhere; }
.kartlagvalg input { margin-top: 3px; flex: 0 0 auto; }
.kartlagvalg.mangler { color: var(--dempet); }
.kartlag-mangler { display: block; }
.kartmaaling { margin: 0; padding: 8px 12px; font-variant-numeric: tabular-nums; }
.arbeidskart-panel {
  position: absolute; top: 10px; right: 10px; max-height: calc(100% - 20px); width: var(--kartpanel); z-index: 1000;
  overflow-y: auto; overflow-wrap: anywhere; min-width: 0; padding: 14px;
  background: var(--kort); border: 1px solid var(--kant); border-radius: 12px; display: grid; align-content: start; gap: 10px;
}
.kartpanel-lukk { display: none; justify-self: end; }
.kartpanel-innhold { min-width: 0; display: grid; gap: 8px; }
.teigvalg { display: grid; gap: 8px; border-top: 1px solid var(--kant); padding-top: 10px; }
.teigvalg[hidden] { display: none; }
.teigvalg-liste { margin: 0; padding-left: 18px; }
.teigvalg-leggtil { display: grid; gap: 8px; }
.teigpanel { display: grid; gap: 2px; min-width: 0; }
/* Funnene i panelet er setninger, ikke tall: de leses fra venstre under etiketten. */
.kartpanel-innhold .kvrad { flex-direction: column; }
.kartpanel-innhold .kvrad-verdi { text-align: left; font-weight: 500; }
.teigpanel .knapperad { margin-top: 8px; }
.leaflet-div-icon.kartnal { background: var(--torv); border: 3px solid var(--kort); border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.leaflet-div-icon.kartnal-delt { background: var(--aksent); }
@media (max-width: 56em) {
  .skall:has(.arbeidskart-side) { display: flex; }
  .arbeidskart { --kartpanel: 0px; height: 70vh; }
  .arbeidskart-side, .arbeidskart-side[data-innfelt] { grid-template-columns: minmax(0, 1fr); height: auto; }
  .arbeidskart-side .arbeidskart-kolonne {
    position: absolute; top: 0; bottom: 0; left: 0; width: min(22rem, 90%); z-index: 1100;
    box-shadow: 0 8px 24px rgba(40, 36, 24, 0.25);
  }
  .kartverktoy { right: 10px; }
  .arbeidskart-panel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 72vh; max-height: 72dvh; z-index: 1200;
    border-radius: 14px 14px 0 0; padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    transform: translateY(100%); visibility: hidden; transition: transform 0.2s ease, visibility 0.2s;
    box-shadow: 0 -8px 24px rgba(40, 36, 24, 0.2);
  }
  .arbeidskart-panel[data-apen] { transform: none; visibility: visible; }
  .kartpanel-lukk { display: inline-flex; position: sticky; top: 0; }
}

/* #839: reguleringsløpet for alle prosjektene på én tidsakse. */
.reglinje { min-width: 44rem; }
.reglinje .reglinje-akse { width: 50%; min-width: 18rem; }
.reglinje-spor { position: relative; display: block; height: 1.6rem; border-bottom: 1px solid var(--kant); }
thead .reglinje-spor { border-bottom: 0; }
.reglinje-år { position: absolute; top: 0; font-size: 0.75rem; color: var(--dempet); transform: translateX(-50%); }
.reglinje-idag { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--sand); }
.reglinje-punkt { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--aksent); background: var(--kort); }
.reglinje-passert { background: var(--aksent); }
.reglinje-forsinket { border-color: var(--neg); background: var(--neg-lys); }

/* #841: Prosjektminnet med filtrene til venstre, treffene i midten og forhåndsvisningen til høyre.
   Panelet står bare fast fordi sidene bruker `Side innholdRuller` (#1107): uten den ruller vinduet,
   ikke `.innhold`, og panelet fulgte sida opp over skjermkanten. Det starter under topplinja,
   som står fast øverst i den samme ruta, og er lavt nok til å få plass over `--sidebunn` når
   lista er rullet helt ned; ellers skled toppen med tittelen inn under topplinja. */
.minne-oppsett { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 12px; }
.minne-hoved { min-width: 0; }
.minnefiltre { display: grid; gap: 10px; align-content: start; min-width: 0; }
.minne-forhandsvisning { min-width: 0; overflow-wrap: anywhere; position: relative; }
.forhandsvisning-topp { position: sticky; top: 0; z-index: 1; background: var(--bg); padding-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.forhandsvisning-bit { white-space: pre-wrap; font-size: 0.9rem; margin: 0 0 8px; }
.forhandsvisning-bit.treffet { background: var(--aksent-lys); border-left: 3px solid var(--aksent); padding: 4px 8px; }
/* Stedet et sitat i «Spør om dokumentet» peker på (#906). */
.forhandsvisning-bit[data-sitert] { background: var(--aksent-lys); outline: 2px solid var(--aksent); outline-offset: 2px; }
.dokumentsamtale-valg { margin: 4px 0 8px; }
.dokumentsamtale-valg > summary { cursor: pointer; font-size: 0.9rem; }
.dokumentsamtale-ta-med { border: 0; padding: 0; margin: 6px 0; }
[data-forhandsvis][aria-current] { outline: 2px solid var(--aksent); outline-offset: 2px; }
@media (min-width: 56em) { .minne-oppsett { grid-template-columns: 14rem minmax(0, 1fr); } .minne-forhandsvisning { grid-column: 2; } }
@media (min-width: 84em) {
  .minne-oppsett { grid-template-columns: 14rem minmax(0, 1fr) minmax(0, 1fr); }
  .minne-forhandsvisning { grid-column: 3; position: sticky; top: calc(var(--topplinje) + 12px); max-height: calc(100vh - var(--topplinje) - 12px - var(--sidebunn)); overflow-y: auto; }
}

/* #842: trådene med en part, og forhåndsvisningen ved siden av på en bred skjerm. */
.trådliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trådliste summary { cursor: pointer; overflow-wrap: anywhere; }
.trådbrev { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
@media (min-width: 72em) { .minne-oppsett-to { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .minne-oppsett-to .minne-forhandsvisning { grid-column: 2; position: sticky; top: calc(var(--topplinje) + 12px); max-height: calc(100vh - var(--topplinje) - 12px - var(--sidebunn)); overflow-y: auto; } }
@media (min-width: 56em) and (max-width: 72em) { .minne-oppsett-to { grid-template-columns: minmax(0, 1fr); } .minne-oppsett-to .minne-forhandsvisning { grid-column: 1; } }

/* #843: avvikslista i gjennomgangen av et utkast. */
.avviksliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.avvik { border-left: 3px solid var(--kant); padding-left: 12px; min-width: 0; overflow-wrap: anywhere; }
.avvik-godtas_ikke { border-left-color: var(--neg); }
.avvik-mangler { border-left-color: var(--sand); }
.avvik-kan_godtas, .avvik-foretrukket { border-left-color: var(--aksent); }
.gjennomgang-sitat { margin: 6px 0; padding: 6px 10px; background: var(--felt-bg); border-radius: 6px; }
.gjennomgang-sitat p { margin: 0 0 4px; white-space: pre-wrap; }
.gjennomgang-standpunkt { margin: 6px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.gjennomgang-standpunkt dt { font-weight: 600; font-size: 0.85rem; }
.gjennomgang-standpunkt dd { margin: 0 0 6px; }
.gjennomgang-forslag { white-space: pre-wrap; background: var(--aksent-lys); padding: 6px 10px; border-radius: 6px; }

/* #835: søk og spør i toppen, med treffene under feltet. */
/* Feltet tar bare plassen menyen ikke trenger (grunnlag 0), så områdemenyen
   står på én linje på en vanlig skjerm; treffene har sin egen bredde. */
.finnfelt { position: relative; flex: 1 1 0; min-width: 9rem; max-width: 28rem; margin-left: auto; }
.finnfelt input { width: 100%; padding: 7px 10px; border: 1px solid var(--felt-kant); border-radius: 9px; font: 13px var(--sans); background: var(--kort); }
.finntreff { position: absolute; top: calc(100% + 4px); right: 0; width: min(28rem, calc(100vw - 32px)); z-index: 50; background: var(--kort); border: 1px solid var(--kant); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); max-height: 60vh; overflow-y: auto; }
.finnliste { list-style: none; margin: 0; padding: 4px; }
.finnliste a { display: block; padding: 6px 8px; border-radius: 6px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.finnliste a:hover, .finnliste a[aria-selected="true"] { background: var(--aksent-lys); }
.finnart { display: inline-block; min-width: 6.5rem; font-size: 0.75rem; color: var(--dempet); text-transform: uppercase; letter-spacing: 0.03em; }
.finnfelt + .innbokslenke { margin-left: 8px; }
@media (max-width: 56em) { .finnfelt { flex: 1 1 100%; max-width: none; margin: 4px 0 0; order: 3; } .finntreff { left: 0; width: auto; } }

/* #846: merket er lenka hjem, og ser ut som før. */
.merke-hjem { color: inherit; text-decoration: none; }

/* Endringsloggen (12/10): gruppene i en dag. */
.endringsgruppe { margin: 14px 0 6px; font: 600 13px var(--sans); color: var(--dempet-mork); }
.endringsgruppe:first-child { margin-top: 0; }
.endringsliste { margin: 0; padding-left: 20px; display: grid; gap: 6px; overflow-wrap: anywhere; }
/* Innspill til Grensesnitt (#1115): teksten står med linjeskiftene personen skrev. */
.innspill-visning { margin: 0 0 8px; white-space: pre-line; overflow-wrap: anywhere; }
.innspill-hele > summary { cursor: pointer; margin-bottom: 6px; }
.kort:has(.innspill-hele[open]) .innspill-start { display: none; }
.innspillinje { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }

/* BOKSENE PÅ EN SIDE (#1124, `views/bokser.tsx`): hver boks kan dras i
   håndtaket, flyttes med ↑ og ↓ og lukkes til tittellinja. Knappene står i
   hjørnet av tittellinja, og tittelen gir plass til dem. Bredden er i em på
   begge, så de vokser likt med forstørret tekst. På en telefon står knappene i
   en rad over kortet, så tittelen får hele bredden, og håndtaket er borte:
   der flytter knappene. Kolonnene er én under 72em, venstre først. */
.boksflate { display: grid; gap: 18px; align-items: start; margin-top: 18px; }
@media (min-width: 72em) {
  .boksflate[data-kolonner="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boksflate[data-kolonner="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Mens en boks dras, er hver kolonne et sted å slippe den, også når den er tom. */
  .boksflate[data-drar]:not([data-kolonner="1"]) > .boksflate-kolonne { min-height: 6rem; outline: 1px dashed var(--kant-stiplet); outline-offset: 4px; border-radius: 8px; }
}
.boksflate-kolonne { display: grid; gap: 18px; align-content: start; min-width: 0; }
.boksflate[data-rutenett] > .boksflate-kolonne { grid-template-columns: repeat(auto-fill, minmax(min(18em, 100%), 1fr)); gap: 14px; }
.boks { position: relative; min-width: 0; display: grid; gap: 6px; align-content: start; }
.boks-bred { grid-column: 1 / -1; }
.boks > .kort { margin: 0; }
.boks > .kort > .kort-topp { padding-right: 6.6em; }
.boks-styring { position: absolute; top: 15px; right: 16px; z-index: 1; display: flex; align-items: center; gap: 2px; font-size: 14px; }
.boks-dra { cursor: grab; touch-action: none; user-select: none; color: var(--dempet); padding: 2px 4px; line-height: 1; }
.boks-knapp {
  min-width: 1.9em; min-height: 1.9em; padding: 2px 5px; border: 0; border-radius: 6px;
  background: transparent; color: var(--dempet-mork); font: 600 1em/1 var(--sans); cursor: pointer;
}
/* ▾ og ▸ er små tegn i skrifta; de får samme tyngde som pilene. */
.boks-lukk { font-size: 1.25em; }
.boks-knapp:hover { background: var(--kant-svakest); color: var(--ink); }
.boks-knapp:focus-visible { outline: 2px solid var(--aksent); outline-offset: 1px; }
/* Den første kan ikke opp og den siste ikke ned: knappen står ikke der, men plassen gjør. */
.boks-knapp:disabled { visibility: hidden; }
.boks[data-dras] > .kort { border-style: dashed; border-color: var(--aksent); box-shadow: 0 6px 20px rgba(40, 36, 24, 0.12); }
.boksflate[data-drar], .boksflate[data-drar] * { cursor: grabbing; user-select: none; }
/* Lukket: tittellinja og antallet står, resten er borte til den åpnes. */
.boks[data-lukket] > .kort > :not(.kort-topp) { display: none; }
.boks[data-lukket] > .kort > .kort-topp { margin-bottom: 0; }
.boksflate-tilbakestill { margin: 12px 0 0; display: flex; justify-content: flex-end; }
.boksflate-tilbakestill[hidden] { display: none; }
@media (max-width: 40em) {
  .boks-styring { position: static; justify-self: end; margin-bottom: -4px; }
  .boks > .kort > .kort-topp { padding-right: 0; }
  .boks-dra { display: none; }
}

/* Hjemmesida (#846, #893, #933): boksene personen har valgt, i én eller to
   kolonner etter eget valg, som `.boksflate` over (#1124). Bredere enn de
   andre sidene, fordi den er en oversikt og ikke en tekst. */
.sidebredde.hjem { max-width: 1240px; }
.hjem-kolonnevalg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.hjem-kolonnevalg [aria-pressed="true"] { background: var(--aksent); border-color: var(--aksent); color: #fff; }
/* «Nærmeste eiendom» står bare når øya har noe å vise; ellers tar boksen ingen plass. */
[data-hjem]:not([data-redigerer]) .boks:has(> [data-naermeste][hidden]) { display: none; }
.hjem-boks-kontroller { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hjem-boks-kontroller form { margin: 0; }
.hjem-boks-innstillinger > summary { cursor: pointer; color: var(--dempet-mork); text-decoration: underline; }
.hjem-boks-innstillinger form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 6px; }
.hjem-fasenavn { margin: 8px 0 2px; font: 600 13px var(--sans); color: var(--dempet-mork); }
.hjem-legg-til { margin-top: 18px; }
.hjem-katalog { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hjem-katalogpost { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; }
.hjem-katalogpost > div { flex: 1 1 18rem; min-width: 0; }
.hjem-katalogskjema { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0; }
/* Tallene står rett under kortets tittel; streken over dem er for kalkylen. */
.hjem .nokkeltall { margin-top: 4px; padding-top: 0; border-top: 0; }

/* «Hva sendes hvor?» på /minne (#864): en lenke over søkefeltet, teksten under når den åpnes. */
.hva-sendes > summary { cursor: pointer; text-decoration: underline; width: fit-content; }
.hva-sendes > p { margin-top: 6px; }

/* «Gjelder ikke lenger» på en linje i «Krever noe nå» (#858): stille til den åpnes. */
.kravlinje-fjern, .kravlinje-mer { margin-top: 4px; }
/* Det som mangler for å regne ny leie, åpent på Regulering-fanen (#982). */
.regulering-fyll, .regulering-fyll > form { display: grid; gap: 10px; justify-items: start; }
.regulering-fyll .feltrutenett { justify-self: stretch; }
.regulering-fyll .felt-hjelp { margin: 0; }
.kravlinje-fjern > summary, .kravlinje-mer > summary { cursor: pointer; color: var(--dempet-mork); text-decoration: underline; width: fit-content; }
.kravlinje-fjern[open] > summary, .kravlinje-mer[open] > summary { margin-bottom: 6px; }
.kravlinje-svar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: flex-start; }
/* Valgene på en linje fra et leieforhold (#882): navnet over feltet det trenger. */
.sluttvalg-navn { flex-basis: 100%; font: 600 14px var(--sans); }

/* Eieren av tomta i prospektet (#862). */
.tomteier { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; min-width: 0; }
.tomteier-endre > summary, .tilsalgs-sjekk > summary { cursor: pointer; text-decoration: underline; width: fit-content; color: var(--dempet-mork); }
/* «Til salgs?» (#904): svaret i radens størrelse, som eierlinja ved siden av. */
.tilsalgs { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; min-width: 0; }
.tilsalgs p { margin: 0; }
.tilsalgs-svar { font-size: 13px; overflow-wrap: anywhere; }
.tilsalgs-sjekk { display: flex; flex-direction: column; gap: 6px; }

/* «Vi har kjøpt — gjør det til et prosjekt» i kontraktsfasen (#859). */
.kjopt-skjema { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 10px 0; }
.kjopt-skjema .felt { flex: 1 1 18rem; min-width: 0; }
.kjopt-skjema .funksjonsvalg { flex: 1 1 100%; }
.tilprosjekt-med summary { cursor: pointer; color: var(--aksent); }

/* «Fyll inn» med én «Lagre» (#870): et felt som er skrevet i men ikke lagret, er merket. */
.faktaskjema-flere { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.faktarad[data-endret] dt::after { content: " · ikke lagret"; color: var(--input-tekst); font-weight: 500; }

/* Notatkortet (#889): feltet øverst, notatene under, festet først. */
.notatskjema { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.notatskjema textarea { width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; }
.notatskjema-rad { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.notatfelt-smalt { flex: 1 1 9em; min-width: 0; }
.notatfelt-smalt select, .notatfelt-smalt input { max-width: 100%; }
.tingnotatliste { list-style: none; margin: 12px 0 0; padding: 0; }
.tingnotat { border-top: 1px solid var(--kant-svak); padding: 8px 0; min-width: 0; }
.tingnotat:first-child { border-top: 0; }
.tingnotat-festet { background: var(--kant-svakest); padding-left: 8px; padding-right: 8px; }
.tingnotat-hode { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.tingnotat-tekst { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tingnotat-hvem { margin: 0; overflow-wrap: anywhere; }
.tingnotat-handlinger { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: flex-start; margin-top: 4px; }
.tingnotat-handlinger form { margin: 0; }
.tingnotat-rett { flex: 1 1 100%; }
/* Handlingen notatet foreslår (#930): knappen, eller at den er gjort. */
.tingnotat-forslag { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tingnotat-forslag li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.tingnotat-forslag form { margin: 0; min-width: 0; max-width: 100%; }
.tingnotat-forslag .knapp { white-space: normal; text-align: left; max-width: 100%; }
.notatdetaljer { margin-top: 6px; }
.notatmerke { position: relative; display: inline-block; font-size: 12px; white-space: nowrap; text-decoration: none; }
.notatmerke-siste {
  display: none; position: absolute; z-index: 5; left: 0; top: 100%; width: max-content; max-width: min(22em, 80vw);
  white-space: normal; background: var(--kort); border: 1px solid var(--kant); padding: 6px 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.notatmerke:hover .notatmerke-siste, .notatmerke:focus .notatmerke-siste { display: block; }
.loggfor { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.loggfor-detaljer[open] { flex: 1 1 100%; min-width: min(18em, 100%); }
/* Chromium legger ut innholdet i en lukket <details> (::details-content), så
   et skjema i en smal handlingscelle var 38 px bredt og ruller (#895). */
.loggfor-detaljer:not([open]) > :not(summary) { display: none; }
.tingside-loggfor { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; margin: 8px 0; }
/* «Gjort» på en oppfølging (#891) står på egen linje i raden, så skjemaet har hele bredden. */
.logg-rad > .loggfor-detaljer { flex: 1 1 100%; min-width: 0; }
.logg { list-style: none; margin: 0; padding: 0; }
.logg-rad { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--kant-svak); }
.logg-rad:first-child { border-top: 0; }
.logg-hva { flex: 1 1 14em; min-width: 0; overflow-wrap: anywhere; }

/* ── Vaktmesteren (#891): store trykkflater på telefonen, og lista på papir ── */
.vaktmester { display: flex; flex-direction: column; gap: 12px; }
.ta-bilde { display: flex; flex-direction: column; gap: 10px; }
.stor-knapp {
  display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 16px; box-sizing: border-box; width: 100%;
  border-radius: 10px; border: 2px solid var(--aksent); background: var(--aksent); color: #fff; font-size: 1.15rem; font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer; overflow-wrap: anywhere;
}
.stor-knapp.hul { background: var(--kort); color: var(--ink); }
summary.stor-knapp { list-style: none; }
summary.stor-knapp::-webkit-details-marker { display: none; }
.skjult-fil { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
/* «Ta bilde» ved siden av andre knapper (#892): bare knappen, på samme linje. */
.ta-bilde.innfelt { display: contents; }

/* ── Nærmeste eiendom (#892): bare på en telefon, der man står ved eiendommen ── */
.kort.naermeste { margin-bottom: 20px; }
.naermeste-hvor { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.naermeste-navn { font-weight: 600; }
.naermeste-handlinger { margin-top: 10px; }
.naermeste-handlinger > .knapp, .naermeste-handlinger label.knapp { flex: 1 1 auto; justify-content: center; text-align: center; min-height: 44px; }
.naermeste-neste { margin-top: 10px; }
/* En handling tingen ikke har («Følg opp» på en tomt), skjules av øya; `.knapp` ville ellers vist den. */
.naermeste [hidden] { display: none; }
.finn-naermeste { display: none; }
@media (max-width: 56em) and (pointer: coarse) {
  .finn-naermeste {
    display: inline-flex; align-items: center; margin-left: auto; padding: 6px 10px; border-radius: 8px;
    color: var(--torv); text-decoration: none; font-weight: 600;
  }
  .finn-naermeste ~ .innbokslenke { margin-left: 8px; }
}
.stor-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stor-rad {
  display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 56px; box-sizing: border-box; padding: 10px 14px; text-align: left;
  border: 1px solid var(--felt-kant); border-radius: 10px; background: var(--kort); color: var(--ink); font: inherit; text-decoration: none; overflow-wrap: anywhere; cursor: pointer;
}
.vaktmester-valg { display: flex; flex-direction: column; gap: 8px; }
.vaktmester-valg[open] > summary { margin-bottom: 8px; }
.vaktmester-mappe ul { margin: 6px 0 10px; padding-left: 1.2em; }
.vaktmester-mappe a, .vaktmester-kontakt a { overflow-wrap: anywhere; }
.vaktmester .oppgavebilde { max-width: 100%; height: auto; }
.vaktliste-dag { margin-top: 8px; }
.vaktliste-dato { font-size: 1rem; margin: 6px 0 4px; }
.vaktliste-oppgaver { list-style: none; margin: 0; padding: 0; }
.vaktliste-oppgaver li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 0; border-top: 1px solid var(--kant-svak); overflow-wrap: anywhere; }
.vaktliste-oppgaver li:first-child { border-top: 0; }
.avkrysningsboks { display: inline-block; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--felt-kant); border-radius: 2px; }
@media print {
  .vaktmesterliste .kort { box-shadow: none; border: 1px solid #999; }
  [data-enkel-side] .knapperad { display: none; }
}

/* Arbeidsbenken øverst på Leieforhold (#894): søket, utvalget og det du sist
   jobbet med til venstre, det som trenger noe til høyre. På telefonen står
   «Sist du jobbet med» rett under søket og utvalget etter, så søket og kortet
   står før man ruller. */
.arbeidsbenk { display: grid; gap: 16px; align-items: start; margin-bottom: 20px; }
.arbeidsbenk > * { min-width: 0; margin: 0; }
.arbeidsbenk > .leiesok { order: 1; }
.arbeidsbenk > [data-kort="sist-jobbet"] { order: 2; }
.arbeidsbenk > .leieutvalg { order: 3; }
.arbeidsbenk > [data-kort="trenger-noe"] { order: 4; }
@media (min-width: 64em) {
  .arbeidsbenk { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto 1fr; grid-template-areas: "sok trenger" "utvalg trenger" "sist trenger"; }
  .arbeidsbenk > .leiesok { grid-area: sok; }
  .arbeidsbenk > .leieutvalg { grid-area: utvalg; }
  .arbeidsbenk > [data-kort="sist-jobbet"] { grid-area: sist; }
  .arbeidsbenk > [data-kort="trenger-noe"] { grid-area: trenger; }
}
.leiesok-skjema { display: flex; align-items: flex-end; gap: 8px 10px; }
.leiesok-skjema .felt { flex: 1 1 auto; min-width: 0; }
.leiesok-skjema input[type="search"] { width: 100%; font-size: 17px; padding: 10px 12px; }
.leieutvalg .fasettrad { margin: 0 0 8px; }
.leiesok-treff { list-style: none; margin: 6px 0 0; padding: 4px 0; background: var(--kort); border: 1px solid var(--kant); border-radius: 8px; }
.leiesok-treff a { display: block; padding: 7px 12px; overflow-wrap: anywhere; }
.trengergruppe + .trengergruppe { margin-top: 14px; }
/* Hva du gjorde står til høyre for leieforholdet når lista har plass, ellers under. */
@container (min-width: 34em) { .sistjobbet { grid-template-columns: minmax(0, 1fr) minmax(0, auto); } }

/* #907: samtalen om sida, fra knappen i topplinja og ⌘J. Panelet står til
   høyre på en stor skjerm (og skyver sida til side der den har plass), og er et ark nederst på
   telefonen. Under 100em bærer knappen bare ikonet, som brukermenyen bærer
   initialene, så områdene står på én linje. */
.samtaleknapp {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; color: var(--torv); text-decoration: none; font-weight: 600;
}
.samtaleknapp:hover, .samtaleknapp[aria-expanded="true"] { background: var(--aksent-lys); color: var(--aksent); }
.innbokslenke + .samtaleknapp { margin-left: 4px; }
.samtaleknapp + .brukermeny { margin-left: 8px; }
@media (min-width: 56.01em) and (max-width: 100em) { .samtaleknapp-tekst { display: none; } }
.samtalepanel {
  position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(30rem, 100vw);
  display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  border-left: 1px solid var(--kant); box-shadow: -12px 0 32px rgba(40, 36, 24, 0.16);
}
.samtalepanel[hidden] { display: none; }
.samtalepanel-hode {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--kant); background: var(--kort);
}
.samtalepanel-tittel { margin: 0; min-width: 0; font: 600 16px var(--display); overflow-wrap: anywhere; }
.samtalepanel-kropp { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; }
.samtalepanel-kropp > .kort { margin: 0; }
/* Bare der det er plass ved siden av sida; ellers ligger panelet over den. */
@media (min-width: 100em) { html[data-samtale-apen] .skall { margin-right: min(30rem, 100vw); } }
@media (max-width: 56em) {
  .samtaleknapp { margin: 4px 0 0; }
  .samtalepanel {
    top: auto; left: 0; width: auto; max-height: 85vh; border-left: 0; border-top: 1px solid var(--kant);
    border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -12px 32px rgba(40, 36, 24, 0.16);
  }
  .samtalepanel-hode { border-radius: var(--radius) var(--radius) 0 0; }
  /* Kortet har sin egen ramme og luft; arket dobler den ikke. */
  .samtalepanel-kropp { padding: 0; }
}

/* ── Bildene på eiendommen og bygget (#908): rutenettet, utkastet før «Lagre», og bildet i stort format ── */
.legg-inn-bilde { display: flex; flex-direction: column; gap: 10px; }
.legg-inn-bilde .knapperad { margin-top: 0; }
.legg-inn-bilde .knapperad > label { flex: 1 1 auto; justify-content: center; text-align: center; }
.legg-inn-bilde > .knapp { align-self: flex-start; }
/* Sporet er i px: bildene vokser ikke med teksten, og to står ved siden av hverandre på en telefon ved 150 %. */
.bildegalleri { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
.bildegalleri li { min-width: 0; }
.bildegalleri a { display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.bildegalleri img, .bilde-uten-visning { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--felt-bg); }
.bilde-uten-visning { display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; color: var(--dempet-mork); text-align: center; overflow: hidden; }
.bildegalleri li.valgt img { outline: 3px solid var(--aksent); outline-offset: 2px; }
.bilde-tekst { font-weight: 600; }
.bildeutkast li { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.bilde-stort { display: block; max-width: 100%; max-height: 80vh; height: auto; margin: 0 auto; border-radius: 8px; }
.stort-bilde .bilde-uten-visning { aspect-ratio: auto; min-height: 6em; }
.bilde-fakta { margin: 10px 0; }
.bilde-endre, .komponentskjema { margin-top: 10px; }
.bilde-endre[open] > summary, .komponentskjema[open] > summary { margin-bottom: 8px; }
.bilde-endre form + form { margin-top: 8px; }
.kartprikk-bilde { background: #4b6a8f; }
.vaktmester .legg-inn-bilde > .stor-knapp { align-self: stretch; }

/* ── Utgiftene (#909): delene eierkosten er regnet av ── */
.eierkostdeler { overflow-wrap: anywhere; }
.eierkostdeler ul { padding-left: 1.2em; }

/* ── Kostnadene (#911): valget, stolpene, endringen under et beløp og funnene ── */
.kostnadsvalg { margin: 0 0 14px; }
.kostnadsvalg .felt { min-width: 0; }
.kostnadsgraf { margin: 0 0 12px; }
.kostnadsgraf-flate { position: relative; }
.kostnadsgraf-flate .graf { display: block; aspect-ratio: 460 / 150; }
.kostnadsgraf-topp { position: absolute; top: 2px; left: 6px; font-size: 11px; color: var(--dempet); }
.kostnadsgraf-akse { position: relative; min-height: 1.6em; font-size: 11px; color: var(--dempet); }
.kostnadsgraf-akse span { position: absolute; top: 2px; white-space: nowrap; }
.graf-fyll { fill: var(--aksent); }
.graf-treff { fill: transparent; }
.graf-stolpe:hover .graf-fyll { fill: var(--torv); }
.celleendring { display: block; color: var(--dempet); font-weight: 400; }
.funnliste { list-style: none; margin: 0; padding: 0; }
.funnrad { padding: 14px 0; border-top: 1px solid var(--kant-svak); min-width: 0; }
.funnrad:first-child { border-top: 0; padding-top: 4px; }
.funnrad-topp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.funnrad-hva { margin: 6px 0; overflow-wrap: anywhere; }
.funnrad [data-felt="regnestykke"] { color: var(--dempet-mork); overflow-wrap: anywhere; }
.funnrad .knapperad { margin-top: 8px; }
.funn-avvis[open] { flex-basis: 100%; }
.kort-undertittel { margin: 16px 0 4px; font: 600 12px var(--sans); color: var(--dempet-mork); }

/* Favoritten og «Gi nytt navn» på en prospektrad (#1006): under raden, så navnet beholder bredden. */
.prospektrad-med-valg { padding-bottom: 8px; }
.prospektrad-med-valg .prospektrad { padding-bottom: 4px; }
.prospektvalg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 4px; }
.prospektvalg form { margin: 0; }
.prospektvalg .typebytte { margin: 0; }
.prospektvalg [data-skjema="navn"] input { flex: 1 1 14em; min-width: 0; max-width: 100%; }
.prospektrom > .prospektvalg { margin: 0 0 8px; padding: 0; }
.prospektsok { margin: 4px 0 14px; }
.prospektsok .adminsok { margin-bottom: 8px; }