/* Takis-risikokart. Én side: venstre felt (valg), kart, høyre felt (resultater og tekst).
   Alt rundt kartet er kjølig og dempet, slik at risikofargene (grønn, gul, oransje,
   rød) er de eneste varme fargene på siden.
   Siden har to visninger, satt i data-visning på <html>: «oversikt» (hele landet, én
   markør per kommune) og «kommune». .kun-oversikt og .kun-kommune vises bare i sin. */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(../fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sno: #f2f5f7;
  --papir: #ffffff;
  --skifer: #17242e;
  --stein: #55656f;
  --rim: #d5dee5;
  --rim-sterk: #b9c6cf;
  --fjord: #1b5e7b;
  --fjord-mork: #134558;
  --is: #dcedf4;

  --k1: #43aa8b;
  --k2: #f9c74f;
  --k3: #f8961e;
  --k4: #f94144;

  --skygge: 0 4px 20px rgba(23, 36, 46, 0.2);
  --radius: 0.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sno);
  color: var(--skifer);
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--fjord); text-underline-offset: 0.18em; }
a:hover { color: var(--fjord-mork); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fjord); outline-offset: 2px; border-radius: 3px; }

/* ---------- Ramme ---------- */

.app { display: grid; grid-template-columns: 19.5rem minmax(0, 1fr) 24rem; grid-template-rows: minmax(0, 1fr); height: 100dvh; overflow: hidden; }
/* Faste plasser i rutenettet, fordi innledningskortet (.velkomst) deler rute med kartet. */
.rail.left { grid-area: 1 / 1; }
.map-wrap { grid-area: 1 / 2; }
.rail.right { grid-area: 1 / 3; }
.rail { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rail.left { background: var(--papir); border-right: 1px solid var(--rim); }
.rail.right { background: var(--sno); border-left: 1px solid var(--rim); }

.brand { display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1.15rem; border-bottom: 1px solid var(--rim); color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand svg { width: 2.1rem; height: 2.1rem; flex: none; }
.brand h1 { font-size: 1.06rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.015em; }
.brand-line { font-size: 0.8rem; color: var(--stein); margin-top: 0.1rem; }

.block { padding: 1rem 1.15rem; border-bottom: 1px solid var(--rim); }
.block-title { font-size: 0.82rem; font-weight: 750; color: var(--skifer); margin-bottom: 0.6rem; }
.lbl { display: block; font-size: 0.78rem; font-weight: 650; color: var(--stein); margin-bottom: 0.3rem; }
.lbl.rad { display: flex; justify-content: space-between; }
.lbl output { color: var(--skifer); }
.control + .lbl, .treff + .lbl { margin-top: 0.8rem; }
.adressefelt { margin-top: 0.8rem; }

:root[data-visning='oversikt'] .kun-kommune, :root[data-visning='kommune'] .kun-oversikt { display: none; }

/* Oversikten: innledningen til kommunene som et kort øverst til venstre i kartet. kart.js legger
   landet til høyre for kortet (oversiktsmarg), så kortet ligger over havet. */
.velkomst { grid-area: 1 / 2; align-self: start; justify-self: start; z-index: 6; width: 21rem; max-width: calc(100% - 1.7rem); margin: 0.85rem; padding: 1rem 1.15rem 1.1rem; background: color-mix(in srgb, var(--papir) 96%, transparent); border-radius: var(--radius); box-shadow: var(--skygge); }
.velkomst h2 { font-size: 1.2rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.015em; color: var(--fjord); margin-bottom: 0.45rem; }
.velkomst p { font-size: 0.95rem; }
.velkomst p + p { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--rim); }
.velkomst cite, .om cite { font-style: normal; font-weight: 650; }
.velkomst a, .om a { overflow-wrap: anywhere; }
/* Kortet opptar hjørnet der statusfeltet ellers står. */
:root[data-visning='oversikt'] .map-status { left: auto; right: 3.6rem; }

.control {
  width: 100%; min-height: 2.6rem; padding: 0 0.75rem; font-size: 0.93rem;
  background: var(--papir); border: 1px solid var(--rim-sterk); border-radius: var(--radius);
}
select.control {
  appearance: none; padding-right: 2.2rem; font-weight: 650;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2355656f' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center;
}
input[type='range'] { width: 100%; accent-color: var(--fjord); margin: 0 0 0.8rem; }

.treff { list-style: none; margin: 0.3rem 0 0; padding: 0; border: 1px solid var(--rim); border-radius: var(--radius); overflow: hidden; }
.treff:empty { display: none; }
.treff button { display: block; width: 100%; text-align: left; padding: 0.45rem 0.7rem; background: var(--papir); border: 0; border-bottom: 1px solid var(--rim); cursor: pointer; font-size: 0.88rem; }
.treff li:last-child button { border-bottom: 0; }
.treff button:hover, .treff button:focus-visible { background: var(--is); }
.treff small { color: var(--stein); }
.sokestatus { font-size: 0.8rem; color: var(--stein); margin-top: 0.3rem; }
.sokestatus:empty { display: none; }

.laggruppe { border: 0; margin: 0 0 0.7rem; padding: 0; }
.laggruppe:last-of-type { margin-bottom: 0; }
.laggruppe legend { padding: 0; font-size: 0.78rem; font-weight: 650; color: var(--stein); margin-bottom: 0.15rem; }
.lagvalg { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.28rem 0.5rem; margin: 0 -0.5rem; border-radius: 0.35rem; cursor: pointer; }
.lagvalg:hover { background: var(--sno); }
.lagvalg:has(input:checked) { background: var(--is); font-weight: 650; }
.lagvalg input { accent-color: var(--fjord); margin: 0; transform: translateY(0.1em); }
.lagvalg small { color: var(--stein); font-weight: 400; }

.rail-foot { margin-top: auto; padding: 1rem 1.15rem 1.2rem; font-size: 0.75rem; line-height: 1.45; color: var(--stein); }
.rail-foot p + p { margin-top: 0.4rem; }

/* ---------- Kart ---------- */

.map-wrap { position: relative; min-width: 0; min-height: 0; background: #e6ecf0; }
#kart { position: absolute; inset: 0; }
.map-status, .map-legend { position: absolute; z-index: 5; background: color-mix(in srgb, var(--papir) 95%, transparent); border-radius: var(--radius); box-shadow: var(--skygge); }
.map-status { top: 0.85rem; left: 0.85rem; padding: 0.5rem 0.8rem; font-size: 0.84rem; font-weight: 650; max-width: 60%; }
.map-status[hidden] { display: none; }
.map-status.feil { background: #8c1c20; color: #fff; }
.map-legend { left: 0.85rem; bottom: 2.4rem; width: 15.5rem; max-height: calc(100% - 5rem); overflow-y: auto; padding: 0.7rem 0.8rem; }
.map-legend h2 { font-size: 0.8rem; font-weight: 750; line-height: 1.25; margin-bottom: 0.45rem; }

.forklaring { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.8rem; line-height: 1.25; }
.forklaring li { display: grid; grid-template-columns: 1rem 1fr auto; gap: 0.5rem; align-items: center; }
.forklaring i { width: 1rem; height: 0.85rem; border-radius: 2px; border: 1px solid rgba(23, 36, 46, 0.18); }
.forklaring .omr { color: var(--stein); font-size: 0.74rem; white-space: nowrap; }

.svevetekst { position: absolute; z-index: 6; pointer-events: none; background: var(--skifer); color: #fff; padding: 0.35rem 0.6rem; border-radius: 0.4rem; font-size: 0.82rem; line-height: 1.3; max-width: 17rem; box-shadow: var(--skygge); transform: translate(14px, 14px); }
.svevetekst[hidden] { display: none; }
.svevetekst small { display: block; color: #b9c9d2; }
/* Valgt sted (klikk eller adressesøk). Merket slipper pekeren gjennom til kartet under. */
.stedsmerke { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--fjord); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(23, 36, 46, 0.45), 0 3px 10px rgba(0, 0, 0, 0.4); pointer-events: none; }
/* Oversikten: én knapp per kommune, navnet over en prikk. */
.kommunemerke { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0; border: 0; background: none; cursor: pointer; font-size: 0.86rem; font-weight: 700; line-height: 1.2; }
.kommunemerke span { padding: 0.18rem 0.55rem; background: var(--papir); border-radius: 0.4rem; box-shadow: 0 1px 6px rgba(23, 36, 46, 0.3); white-space: nowrap; }
.kommunemerke i { width: 1rem; height: 1rem; border-radius: 50%; background: var(--fjord); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(23, 36, 46, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform 0.12s; }
.kommunemerke:hover span, .kommunemerke:focus-visible span { background: var(--fjord); color: #fff; }
.kommunemerke:hover i, .kommunemerke:focus-visible i { transform: scale(1.25); }
.kommunemerke:focus-visible { outline: none; }
.maplibregl-ctrl-attrib { font-family: inherit; font-size: 0.7rem; }

/* ---------- Høyre felt ---------- */

.result-head { padding: 1.1rem 1.15rem 1rem; border-bottom: 1px solid var(--rim); background: var(--papir); }
.result-head h2 { font-size: 1.5rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.result-sub { margin-top: 0.3rem; font-size: 0.86rem; color: var(--stein); }
.result-sub[hidden] { display: none; }
.result-head h2:focus { outline: none; }
.tilbake { display: block; padding: 0; margin: 0 0 0.4rem; background: none; border: 0; color: var(--fjord); font-size: 0.82rem; font-weight: 650; cursor: pointer; }
.tilbake:hover { color: var(--fjord-mork); text-decoration: underline; }

.kommuneliste { list-style: none; margin: 0; padding: 0; background: var(--papir); border: 1px solid var(--rim); border-radius: var(--radius); overflow: hidden; }
.kommuneliste button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0.65rem 0.85rem; background: none; border: 0; border-bottom: 1px solid var(--rim); cursor: pointer; font-size: 0.98rem; font-weight: 650; text-align: left; }
.kommuneliste li:last-child button { border-bottom: 0; }
.kommuneliste button span:last-child { color: var(--fjord); }
.kommuneliste button:hover, .kommuneliste button:focus-visible { background: var(--is); }

.tom { color: var(--stein); font-size: 0.88rem; }
.sone .klasse { display: flex; align-items: center; gap: 0.5rem; font-weight: 750; font-size: 1.05rem; line-height: 1.2; }
.sone .klasse i { width: 0.9rem; height: 0.9rem; border-radius: 50%; flex: none; }
.sone .hovedtall { color: var(--stein); font-size: 0.9rem; margin: 0.3rem 0 0.7rem; }
.sone .hovedtall b { color: var(--skifer); font-weight: 750; }
.sone .areal { color: var(--stein); font-size: 0.84rem; margin-top: 0.6rem; }

.verdier { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.verdier th { text-align: left; font-weight: 400; color: var(--stein); padding: 0.22rem 0; }
.verdier td { text-align: right; font-weight: 650; padding: 0.22rem 0; white-space: nowrap; }
.verdier tr.aktiv th, .verdier tr.aktiv td { color: var(--skifer); font-weight: 750; }
.verdier tr + tr { border-top: 1px solid var(--rim); }
/* Fargen er risikoklassen for tallet på raden, som i kartet. Snøradene har en tom plass, så teksten flukter. */
.verdier .farge { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; margin-right: 0.5rem; vertical-align: -0.05em; }

.metodikk { border-bottom: 0; padding-bottom: 1.5rem; }

/* Nederst i feltet; har feltet plass til overs, står blokken helt i bunnen. */
.om { margin-top: auto; border-top: 1px solid var(--rim); border-bottom: 0; padding-bottom: 1.4rem; background: var(--papir); }
.om p { font-size: 0.9rem; }
.om p + p { margin-top: 0.6rem; }
.exp { border-top: 1px solid var(--rim); }
.exp:last-of-type { border-bottom: 1px solid var(--rim); }
.exp summary { cursor: pointer; padding: 0.6rem 0; font-size: 0.9rem; font-weight: 650; list-style-position: outside; margin-left: 1.05rem; }
.exp summary:hover { color: var(--fjord); }
.exp-body { padding: 0 0 0.9rem; font-size: 0.87rem; line-height: 1.55; color: #2f3f4a; }
.exp-body p, .exp-body ul, .exp-body ol { margin: 0 0 0.7em; }
.exp-body ul, .exp-body ol { padding-left: 1.15rem; }
.exp-body li { margin-bottom: 0.35rem; }
.exp-body .uten-punkt { list-style: none; padding-left: 0; }
.exp-body .merknad { padding: 0.55rem 0.75rem; background: var(--is); border-radius: 0.35rem; font-size: 0.83rem; margin-bottom: 0; }
.exp-body .prikk { display: inline-block; width: 0.75em; height: 0.75em; border-radius: 2px; margin-right: 0.4em; }

/* ---------- Smalere skjermer ---------- */

@media (max-width: 80rem) {
  .app { grid-template-columns: 17.5rem minmax(0, 1fr) 21rem; }
  .velkomst { width: 19rem; }
}

/* Under 60rem ruller siden. I oversikten: innledning, kommunevalg, kart, kommuneliste, tekst.
   I en kommune: kommunevalg, kart, tegnforklaring, valgt sted, kartlag, tekst.
   display: contents løfter blokkene ut av feltene, slik at de kan ordnes rundt kartet. */
@media (max-width: 60rem) {
  html, body { height: auto; }
  .app { display: flex; flex-direction: column; height: auto; overflow: visible; background: var(--papir); }
  .rail { display: contents; }
  .brand { order: 0; }
  .velkomst { order: 0; width: auto; max-width: none; margin: 0; padding: 1rem 1.15rem; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--rim); }
  :root[data-visning='oversikt'] .map-status { left: 0.85rem; right: auto; }
  .sted { order: 1; }
  .map-wrap { order: 2; display: flex; flex-direction: column; background: var(--papir); border-bottom: 1px solid var(--rim); }
  #kart { position: relative; inset: auto; height: 62vh; min-height: 21rem; }
  .map-legend { position: static; width: auto; max-height: none; box-shadow: none; border-radius: 0; padding: 0.9rem 1.15rem; }
  .result-head { order: 3; border-top: 0; }
  .kommuner { order: 4; }
  .sone { order: 4; }
  .lag { order: 5; }
  .metodikk { order: 7; border-bottom: 1px solid var(--rim); }
  .om { order: 8; margin-top: 0; border-top: 0; border-bottom: 1px solid var(--rim); padding-bottom: 1rem; }
  .visning { order: 9; }
  .rail-foot { order: 10; margin-top: 0; }
  .svevetekst { display: none; }
}