/* ============================================================
   kart.css — jordkartet, og bare det

   EGEN FIL MED VILJE, av samme grunn som maskindata.css: kartstilene
   lå spredt i seks blokker i style.css med ~200 linjer død kode, og
   `.layer-item` og `#map` var deklarert to og tre ganger med
   motstridende verdier. Med sida i sin egen fil kan ikke en for bred
   søk-og-erstatt her skade kalkulatorene, GPS eller været.

   Legg ALDRI kartstiler i style.css, og legg aldri delte stiler her.

   ------------------------------------------------------------
   Fargeskala — bevisst uavhengig av temavelgeren

   Kartflata er alltid mørk. Det er samme valg som GPS-sida og
   Jordesett: en mørk ramme rundt et flyfoto lar bildet være det lyseste
   på skjermen, og kartlagene leses mot det. Blir ramma lys når resten
   av sida blir lys, forsvinner grensene.

   Verdiene er de samme som i maskindata.css, slik at de to
   kartverktøyene ikke ser ut som de er laget av hver sin person.
   Kontrast målt mot prosjektets krav — strengere enn WCAG AA fordi
   sida leses utendørs på billige skjermer:

                      flate-0   flate-1   flate-2     krav
     tekst             16,69     15,45     14,33      12:1
     tekst-dempet       8,43      7,81      7,24       7:1
     tekst-svak         3,51      3,25      3,02       3:1
     hairline           1,98      1,84      1,70     1,7:1
     aksent            12,75     11,81     10,95       7:1
     advarsel           9,74      9,02      8,36       3:1
     fare               9,65      8,93      8,28       7:1
     ok                 8,56      7,92      7,35       3:1

   Statusprikkene er IKKE tekst. De måles mot 3:1, som er kravet for
   ikke-tekstlig grensesnitt, og hver av dem har alltid et ord ved
   siden av seg — fargen er en gjentakelse, aldri den eneste bæreren.
   ============================================================ */
.kart-side {
  --k-flate-0: #0F1210;        /* Kartets bunn, = sidens --color-bg   */
  --k-flate-1: #171B14;        /* Paneler og skuffer                  */
  --k-flate-2: #1D221C;        /* Rad ved peking                      */
  --k-hairline: #40483C;       /* Rammer OG skillelinjer              */
  --k-tekst: #F0F2EA;
  --k-tekst-dempet: #A7B199;
  --k-tekst-svak: #666D5E;     /* Ikoner i hvile. Ikke tekst.         */
  /* Ugjennomsiktig. På 0,97 skinte kartet gjennom lagpanelet også på PC,
     og det leser som en tegnefeil, ikke som et valg. */
  --k-panel: #171B14;
  --k-aksent: #7FE3F5;         /* Måling, aktiv tilstand              */
  --k-ok: #7FBF63;
  --k-advarsel: #E0B45C;
  --k-fare: #FF9DB6;
  --k-skygge: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   Ramme
   ============================================================ */
.kart-side {
  padding: 0;
  color: var(--k-tekst);
}

/* Kartet fyller skjermen under navigasjonen. Ingen invitasjon nedover:
   hjulet zoomer, og prosaen under er for søkemotorene. */
.kart-app {
  position: relative;
  height: calc(100dvh - var(--k-navhoyde, 64px));
  min-height: 460px;
  background: var(--k-flate-0);
  border-bottom: 1px solid var(--k-hairline);
  overflow: hidden;
  font-family: var(--font-ui);
}

.kart-lerret { position: absolute; inset: 0; background: var(--k-flate-0); }
.kart-lerret.er-maaling { cursor: crosshair; }

/* OpenLayers' egne kontroller trekkes inn i det mørke skjemaet.
   Zoomknappene står nede til høyre, over statuslinja, der tommelen er. */
.kart-app .ol-control button {
  background: var(--k-panel);
  color: var(--k-tekst);
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
  font-size: var(--text-base);
  /* 2,5rem = 40 px. Var 1,9rem = 30 px, altså under både sidas egne
     knapper og WCAG 2.5.8. Dette er zoomknappene på et kart som brukes
     med tommelen ute i felt. */
  width: 2.5rem;
  height: 2.5rem;
}
.kart-app .ol-control button:hover { background: var(--k-flate-2); }
.kart-app .ol-zoom { top: auto; left: auto; right: 0.6rem; bottom: 3.4rem; }
.kart-app .ol-attribution {
  background: var(--k-panel);
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
  bottom: 0.4rem;
  right: 0.6rem;
  max-width: 60vw;
}
.kart-app .ol-attribution ul {
  color: var(--k-tekst-dempet);
  font-size: var(--text-2xs);
  text-shadow: none;
}
.kart-app .ol-attribution a { color: var(--k-tekst-dempet); }
.kart-app .ol-scale-line {
  background: var(--k-panel);
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
  left: 0.6rem;
  bottom: 0.4rem;
  padding: 1px 3px;
}
.kart-app .ol-scale-line-inner {
  color: var(--k-tekst);
  border-color: var(--k-tekst-dempet);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}

/* ============================================================
   Toppstripe
   ============================================================ */
.kart-topp {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.6rem;
  pointer-events: none;
}
.kart-topp > * { pointer-events: auto; }

/* h1-en må stå for søkemotorene, men i serif ved siden av mono-krommet
   leste den som et levning fra den gamle sida. Nå er den en stille
   mono-etikett som hører til instrumentpanelet. Ingen egen flate —
   den konkurrerer ikke med knappene. */
.kart-tittel {
  margin: 0;
  padding: 0.42rem 0.15rem 0.42rem 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k-tekst-dempet);
  white-space: nowrap;
  text-shadow: 0 1px 3px var(--k-flate-0), 0 0 6px var(--k-flate-0);
}

/* Søk */
.kart-sokboks {
  position: relative;
  flex: 1 1 190px;
  min-width: 150px;
  max-width: 340px;
}
.kart-sokboks__ikon {
  position: absolute;
  left: 0.5rem; top: 50%;
  transform: translateY(-50%);
  color: var(--k-tekst-svak);
  pointer-events: none;
}
.kart-sokboks input {
  width: 100%;
  padding: 0.42rem 0.5rem 0.42rem 1.9rem;
  background: var(--k-panel);
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
  color: var(--k-tekst);
  font: inherit;
  font-size: var(--text-sm);
}
.kart-sokboks input::placeholder { color: var(--k-tekst-svak); }
.kart-sokboks input:focus-visible {
  outline: 2px solid var(--k-aksent);
  outline-offset: 1px;
}

.kart-treff {
  position: absolute;
  top: calc(100% + 3px); left: 0; right: 0;
  margin: 0; padding: 0;
  list-style: none;
  background: var(--k-panel);
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
  box-shadow: var(--k-skygge);
  max-height: 50vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 40;
}
.kart-treff li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.42rem 0.55rem;
  font-size: var(--text-sm);
  cursor: pointer;
  border-bottom: 1px solid var(--k-hairline);
}
.kart-treff li:last-child { border-bottom: 0; }
.kart-treff li:hover,
.kart-treff li[aria-selected="true"] { background: var(--k-flate-2); }
.kart-treff__type {
  color: var(--k-tekst-dempet);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  white-space: nowrap;
}
.kart-treff__tom { color: var(--k-tekst-dempet); cursor: default; }

/* Verktøyknapper */
.kart-verktoy {
  display: flex;
  gap: 0.3rem;
  margin-left: auto;
}

.kart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0.42rem 0.7rem;
  background: var(--k-panel);
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
  color: var(--k-tekst);
  font: inherit;
  font-size: var(--text-xs);
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
}
.kart-btn:hover { background: var(--k-flate-2); border-color: var(--k-tekst-svak); }
.kart-btn:focus-visible { outline: 2px solid var(--k-aksent); outline-offset: 1px; }
.kart-btn svg { color: var(--k-tekst-dempet); flex: none; }
.kart-btn[aria-expanded="true"],
.kart-btn.er-pa {
  border-color: var(--k-aksent);
  color: var(--k-aksent);
}
.kart-btn[aria-expanded="true"] svg,
.kart-btn.er-pa svg { color: var(--k-aksent); }
.kart-btn--ikon { padding: 0.42rem; min-width: 2.5rem; }

/* «Lag» er hovedhandlingen på sida. Fem knapper med identisk vekt sa
   ingenting om hvor man begynner. */
.kart-btn--primar { border-color: var(--k-tekst-svak); }
.kart-btn__tall {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1;
  padding: 0.15rem 0.3rem;
  border-radius: 2px;
  background: var(--k-aksent);
  color: var(--k-flate-0);
}
.kart-btn__tall:empty { display: none; }

/* ============================================================
   Skuffer
   ============================================================ */
.kart-teppe {
  position: absolute; inset: 0;
  z-index: 35;
  background: rgba(15, 18, 16, 0.5);
}

.kart-skuff {
  position: absolute;
  top: 3rem; right: 0.6rem;
  z-index: 45;
  width: min(340px, calc(100% - 1.2rem));
  max-height: calc(100% - 4.6rem);
  display: flex;
  flex-direction: column;
  background: var(--k-panel);
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
  box-shadow: var(--k-skygge);
}
.kart-skuff[hidden] { display: none; }

/* 150 ms. Uten den snapper panelene på plass og sida føles hakkete. */
@media (prefers-reduced-motion: no-preference) {
  .kart-skuff, .kart-info { animation: kart-inn 0.15s ease-out; }
  .kart-btn, .kart-minibtn, .kart-preset { transition: border-color 0.12s, background 0.12s, color 0.12s; }
}
@keyframes kart-inn { from { opacity: 0; transform: translateY(-4px); } }

.kart-skuff__hode {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--k-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-tekst-dempet);
}
.kart-skuff__kropp {
  overflow-y: auto;
  overscroll-behavior: contain;   /* rullet skal ikke lekke ut i sida */
  padding: 0.35rem 0;
}

.kart-panel__hode {
  padding: 0.55rem 0.6rem 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-tekst-dempet);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.kart-panel__tall { color: var(--k-tekst-svak); }
.kart-panel__note {
  padding: 0.25rem 0.6rem 0.5rem;
  font-size: var(--text-2xs);
  line-height: 1.35;
  color: var(--k-tekst-dempet);
}

/* ============================================================
   Presets — svarer på «hva vil jeg se», før man vet lagnavnene
   ============================================================ */
.kart-presets {
  display: grid;
  gap: 1px;
  padding: 0 0.6rem 0.5rem;
}
.kart-preset {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.5rem;
  background: transparent;
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
  color: var(--k-tekst);
  font: inherit;
  cursor: pointer;
}
.kart-preset:hover { background: var(--k-flate-2); border-color: var(--k-tekst-svak); }
.kart-preset:focus-visible { outline: 2px solid var(--k-aksent); outline-offset: 1px; }
.kart-preset.er-pa { border-color: var(--k-aksent); }
.kart-preset.er-pa .kart-preset__navn { color: var(--k-aksent); }
.kart-preset__navn { display: block; font-size: var(--text-sm); }
.kart-preset__under {
  display: block;
  font-size: var(--text-2xs);
  color: var(--k-tekst-dempet);
  margin-top: 0.05rem;
}

.kart-info__hint {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--k-hairline);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--k-tekst-dempet);
}
.kart-info__hint button { margin-top: 0.35rem; display: block; }

/* ============================================================
   Lagrader — tette. Et GIS-lagpanel er en liste, ikke kort.
   ============================================================ */
.kart-lagrad {
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--k-hairline);
}
.kart-lagrad:last-child { border-bottom: 0; }
.kart-lagrad--pa { background: var(--k-flate-2); }
.kart-lagrad.er-utenfor .kart-lagrad__navn { color: var(--k-tekst-dempet); }

.kart-lagrad__topp {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.kart-lagrad__navn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  cursor: pointer;
}
.kart-lagrad__navn input { flex: none; accent-color: var(--k-aksent); }
.kart-lagrad__stell { display: flex; gap: 0.15rem; flex: none; }

.kart-lagrad__hjelp {
  padding-left: 1.4rem;
  font-size: var(--text-2xs);
  line-height: 1.35;
  color: var(--k-tekst-dempet);
}
.kart-lagrad__status {
  padding-left: 1.4rem;
  font-size: var(--text-2xs);
  color: var(--k-advarsel);
}
.kart-lagrad__status:empty { display: none; }

.kart-lagrad__bunn { padding-left: 1.4rem; }
.kart-opasitet {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--k-tekst-dempet);
}
.kart-opasitet input[type="range"] {
  flex: 1;
  min-width: 60px;
  accent-color: var(--k-aksent);
  height: 1rem;
}
.kart-opasitet output {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--k-tekst);
  min-width: 2.6rem;
  text-align: right;
  text-transform: none;
}

/* Statusprikk. Alltid ledsaget av ord — fargen gjentar, den bærer ikke. */
.kart-prikk {
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--k-tekst-svak);
}
.kart-prikk--laster { background: var(--k-advarsel); }
.kart-prikk--ok     { background: var(--k-ok); }
.kart-prikk--feil   { background: var(--k-fare); }
.kart-prikk--av     { background: transparent; box-shadow: inset 0 0 0 1px var(--k-tekst-svak); }

.kart-minibtn {
  padding: 0.1rem 0.32rem;
  background: transparent;
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
  color: var(--k-tekst-dempet);
  font: inherit;
  font-size: var(--text-2xs);
  line-height: 1.3;
  cursor: pointer;
}
.kart-minibtn:hover:not(:disabled) { color: var(--k-tekst); border-color: var(--k-tekst-svak); }
.kart-minibtn:disabled { opacity: 0.35; cursor: default; }
.kart-minibtn:focus-visible { outline: 2px solid var(--k-aksent); outline-offset: 1px; }

.kart-radio {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem;
  font-size: var(--text-sm);
  cursor: pointer;
}
.kart-radio:hover { background: var(--k-flate-2); }
.kart-radio input { accent-color: var(--k-aksent); }

/* ============================================================
   Måling
   ============================================================ */
.kart-maalknapper { display: flex; gap: 0.4rem; padding: 0.5rem 0.6rem; }
.kart-maalstatus {
  padding: 0 0.6rem 0.4rem;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--k-tekst-dempet);
}
.kart-maalstatus .tall { color: var(--k-tekst); }

/* ============================================================
   Punktinfo
   ============================================================ */
.kart-info {
  position: absolute;
  top: 3rem; left: 0.6rem;
  z-index: 40;
  width: min(300px, calc(100% - 1.2rem));
  max-height: calc(55% - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--k-panel);
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
  box-shadow: var(--k-skygge);
  font-size: var(--text-sm);
}
.kart-info[hidden] { display: none; }

.kart-info__hode,
.kart-forklaring__hode {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--k-panel);
  border-bottom: 1px solid var(--k-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-tekst-dempet);
}

.kart-info__koord {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--k-hairline);
}
.kart-info__koord .tall {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--k-tekst);
}

.kart-info__venter { padding: 0.6rem; color: var(--k-tekst-dempet); }

.kart-info__lag {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--k-hairline);
}
.kart-info__navn {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k-tekst-dempet);
  margin-bottom: 0.2rem;
}
.kart-info__tom { color: var(--k-tekst-dempet); font-size: var(--text-xs); }
.kart-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.5rem; }
.kart-info dt { color: var(--k-tekst-dempet); font-size: var(--text-xs); }
.kart-info dd { margin: 0; color: var(--k-tekst); font-size: var(--text-xs); }

.kart-info__ut {
  display: block;
  padding: 0.5rem 0.6rem;
  color: var(--k-aksent);
  text-decoration: none;
  font-size: var(--text-xs);
}
.kart-info__ut:hover { text-decoration: underline; }

/* ============================================================
   Startkort — bare ved første besøk
   ============================================================ */
.kart-start {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 42;
  width: min(330px, calc(100% - 2rem));
  padding: 0.9rem 1rem 1rem;
  background: var(--k-panel);
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
  box-shadow: var(--k-skygge);
}
.kart-start[hidden] { display: none; }
.kart-start__lukk { position: absolute; top: 0.4rem; right: 0.4rem; }
.kart-start__tittel {
  margin: 0 0 0.4rem;
  font-family: var(--font-main);
  font-size: var(--text-base);
  color: var(--k-tekst);
}
.kart-start__tekst {
  margin: 0 0 0.4rem;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--k-tekst-dempet);
}
.kart-start__tekst strong { color: var(--k-tekst); font-weight: 500; }
.kart-start__svak { margin-bottom: 0; font-size: var(--text-xs); color: var(--k-tekst-svak); }

/* «?» på lagradene */
.kart-hjelpbtn { flex: none; }
.kart-lagrad__hjelp[hidden] { display: none; }

/* ============================================================
   Tegnforklaring — kildens egne farger, hentet fra GetLegendGraphic
   ============================================================ */
.kart-forklaring {
  position: absolute;
  left: 0.6rem; bottom: 4.4rem;   /* over statuslinja og målestokken */
  z-index: 38;
  width: min(230px, calc(100% - 1.2rem));
  max-height: calc(38% - 2rem);
  display: flex;
  flex-direction: column;
  background: var(--k-panel);
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
  box-shadow: var(--k-skygge);
}
.kart-forklaring[hidden] { display: none; }
.kart-forklaring__kropp { overflow-y: auto; overscroll-behavior: contain; padding: 0.3rem 0; }
.kart-forklaring__lag { padding: 0.25rem 0.5rem 0.4rem; }
.kart-forklaring__navn {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k-tekst-dempet);
  margin-bottom: 0.2rem;
}
/* Klassene tegnes nå av oss, fra SLD-data. Prøven bærer kildens egen
   farge; teksten er sidas egen. */
.kart-tf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.09rem 0;
}
.kart-tf__prove {
  flex: none;
  width: 13px; height: 13px;
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
}
.kart-tf__navn {
  font-size: var(--text-xs);
  line-height: 1.25;
  color: var(--k-tekst);
}

/* Reserveveien når GetStyles ikke svarer: kildens eget bilde. Det er
   tegnet for hvit bakgrunn, så det får en hvit flate å stå på. */
.kart-tf__bilde {
  max-width: 100%;
  background: #FFFFFF;
  padding: 2px;
  border-radius: 2px;
  display: block;
}

/* ============================================================
   Statuslinje — koordinat, målestokk, zoom

   Nede til VENSTRE, rett over målestokklinja, slik det står i QGIS og
   ArcGIS. Den lå nede til høyre først og la seg oppå attribusjonen, så
   «Data: © Kartverket» ble kuttet på midten. En kildeangivelse kan ikke
   dekkes av vår egen statustekst.
   ============================================================ */
.kart-statuslinje {
  position: absolute;
  left: 0.6rem; bottom: 2.3rem;
  z-index: 32;
  display: flex;
  gap: 0.7rem;
  padding: 0.2rem 0.45rem;
  background: var(--k-panel);
  border: 1px solid var(--k-hairline);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--k-tekst-dempet);
  pointer-events: none;
}
.kart-statuslinje span:empty { display: none; }

/* Tallene sto på rad uten skiller og leste som debugutskrift. Hver
   verdi har nå navnet sitt, slik det står i et instrumentpanel. */
.kart-statuslinje > * { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.kart-statuslinje > * + * {
  border-left: 1px solid var(--k-hairline);
  padding-left: 0.7rem;
}
.kart-statuslinje b {
  font-weight: 500;
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  color: var(--k-tekst-svak);
}
.kart-statuslinje i { font-style: normal; color: var(--k-tekst); }

/* ============================================================
   Mobil — skuffene blir bunnark

   Målt på 390 px: en sidestilt skuff tar 340 px av 390 og legger seg
   oppå kartet den skal forklare. Nedenfra dekker den halve skjermen og
   lar deg fortsatt se hva du jobber med.
   ============================================================ */
@media (max-width: 720px) {
  .kart-app { height: calc(100dvh - var(--k-navhoyde, 56px)); min-height: 380px; }

  .kart-topp { gap: 0.4rem; padding: 0.4rem 0.45rem; }

  /* Tittelen deler rad med søket. Hver på sin rad kostet 48 px av et
     kart som allerede har mistet 95 px til navigasjonen. */
  .kart-tittel { font-size: var(--text-sm); padding-inline: 0.45rem; }
  .kart-sokboks { flex: 1 1 auto; max-width: none; }
  .kart-verktoy {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .kart-verktoy::-webkit-scrollbar { display: none; }

  .kart-skuff,
  .kart-info {
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%;
    max-height: 62%;
    border-radius: 3px 3px 0 0;
    border-bottom: 0;
    /* Helt ugjennomsiktig som bunnark. På 97 % skinte tegnforklaringen
       under gjennom panelet og leste som en tegnefeil. */
    background: var(--k-flate-1);
  }
  .kart-info { z-index: 46; }

  /* Tegnforklaringen og bunnarket kjemper om samme halvdel av skjermen.
     Arket vant uansett; da skal forklaringen vike helt, ikke ligge bak. */
  .kart-app.er-apen .kart-forklaring { display: none; }

  .kart-forklaring { bottom: 4rem; max-height: 28%; width: min(200px, 55%); }
  .kart-statuslinje { gap: 0.45rem; bottom: 2.1rem; }
  /* Målestokken ut på smal skjerm. Alle tre feltene tok ~400 px av de
     380 som er å få på 390 px, så linja brøt til to rader og vokste opp
     i tegnforklaringen over. Og målestokken er den ene av de tre som
     allerede står rett under, som grafisk målestokkstrek. */
  .kart-statuslinje__skala { display: none; }
  .kart-app .ol-zoom { display: none; }
}

/* Trykkmål. 44 px er minstemålet med hansker på. */
@media (pointer: coarse) {
  .kart-btn { min-height: 44px; padding-inline: 0.7rem; }
  .kart-btn--ikon { min-width: 44px; justify-content: center; }
  .kart-minibtn { min-height: 32px; min-width: 32px; }
  .kart-treff li { padding-block: 0.6rem; }
  .kart-radio { padding-block: 0.6rem; }
  .kart-lagrad { padding-block: 0.45rem; }
}

/* ============================================================
   Prosaen under kartet

   Den skal ikke være i veien, men den skal være der: /kart henter
   fortsatt søketrafikk, og en side som bare er en app rangerer ikke.
   ============================================================ */
.kart-prosa { padding-top: 2.5rem; padding-bottom: 3rem; }
.kart-prosa h3 { margin-top: 1.6rem; }

.kart-nudge { margin-top: 1rem; font-size: var(--text-sm); color: var(--color-text-muted); }

/* .kart-lenker er slettet — jordkartet bruker .tool-card, samme kort som
   forsida. To kortkomponenter for «lenke til et verktøy» betydde to
   hover-tilstander, to skriftstørrelser og to sett navn på de samme
   verktøyene. */