/* ============================================================
   maskindata.css — Maskindata, og bare den

   PLATTFORMSKALL, IKKE QGIS. Første versjon ble en tett attributt-
   tabell med mono og hårstreker overalt — teknisk GIS. Det dette skal
   ligne er en gårdsplattform: ikonrail med seksjoner, nøkkeltall
   øverst, kart som dominerer, og jordekort i stedet for rader.

   MEN INNENFOR SIDAS EGNE REGLER. CLAUDE.md forbyr avrundede kort med
   skygge, ikoner i pastellfirkanter, hover-løft og pilleknapper —
   nettopp de fire tingene som gir de fleste slike plattformer utseendet
   sitt. Plattformfølelsen kommer derfor fra STRUKTUR og LUFT:
   seksjoner, nøkkeltall, større type, mer kart. Radiene er 2-3 px,
   kortene defineres av hårstreken, og aktiv tilstand er understrek.
   Den ene skyggen som finnes er på paneler som ligger OVER kartet,
   som er unntaket regelen alltid har hatt.

   ALLTID MØRK, uavhengig av temavelgeren. En mørk ramme rundt et
   flyfoto lar bildet være det lyseste på skjermen.

   Fargeverdiene er de samme som er MÅLT i css/jordegrenser.css mot
   prosjektets egne 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
   ============================================================ */
.md-ide, .md-liten {
  --md-flate-0: #0F1210;
  --md-flate-1: #171B14;
  --md-flate-2: #1D221C;
  --md-hairline: #40483C;
  --md-tekst: #F0F2EA;
  --md-tekst-dempet: #A7B199;
  --md-tekst-svak: #666D5E;
  --md-primar: #7DBA73;
  --md-fare: #FF3D71;
  --md-fare-tekst: #FF9DB6;
  --md-advarsel: #E0B45C;
  --md-pek: #7FE3F5;
  --md-panel: rgba(23, 27, 20, 0.97);
  --md-rail: 4.5rem;
  --md-dokk-v: 21rem;
  --md-dokk-h: 22rem;
}

/* ---------- Ramma ---------- */
body.md-aktiv { height: 100dvh; overflow: hidden; margin: 0; }
body.md-aktiv > header,
body.md-aktiv > footer,
body.md-aktiv .md-start { display: none; }
/* `hidden` må slå klassenes egen display, og det er derfor !important
   står her. En klasse som setter display: flex har samme spesifisitet
   som nettleserens [hidden] { display: none } og kommer senere i
   kaskaden, så attributtet blir ren dekorasjon. Målt på startskjermen:
   #md-app (grid), begge dialogene og prosjektmenyen sto SAMTIDIG
   synlige, alle fire med hidden satt. Testene så det ikke — de spør
   etter attributtet, ikke etter hva som tegnes. */
[hidden] { display: none !important; }

/* Den flytende tilbakemeldingsknappen dekket nedre høyre hjørne av
   egenskapspanelet. Flytende UI skal aldri legge seg over verktøyet. */
body.md-aktiv .bvt-fb-fab { display: none; }

.md-ide {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
  background: var(--md-flate-0);
  color: var(--md-tekst);
  font-family: var(--font-ui);
}

.md-flate {
  display: grid;
  grid-template-columns: var(--md-rail) var(--md-dokk-v) minmax(0, 1fr) var(--md-dokk-h);
  min-height: 0;
}
.md-flate.uten-hoyre { grid-template-columns: var(--md-rail) var(--md-dokk-v) minmax(0, 1fr) 0; }

/* ============================================================
   Topplinje
   ============================================================ */
.md-topp {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--md-hairline);
  background: var(--md-flate-1);
}
.md-topp__hjem {
  display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem;
  border: 1px solid var(--md-hairline);
  border-radius: var(--radius-sm);
  color: var(--md-tekst-dempet);
  text-decoration: none;
}
.md-topp__hjem:hover { color: var(--md-tekst); border-color: var(--md-tekst-svak); }
/* Navnet er en merkelapp, ikke en overskrift i en tekst — derfor mono
   med sperring. Se regelen i CLAUDE.md om hva versaler betyr. */
.md-topp__navn {
  color: var(--md-tekst);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.md-topp__handlinger { display: flex; gap: var(--space-1); margin-left: auto; }

/* Menyen henger under knappen sin. Skygge er tillatt: den er et
   overlegg, som er unntaket regelen alltid har hatt. */
.md-meny { position: relative; }
.md-menypanel {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 8;
  display: flex; flex-direction: column; min-width: 15rem;
  border: 1px solid var(--md-hairline);
  border-radius: var(--radius-sm);
  background: var(--md-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1) 0;
}
.md-menypanel button {
  border: 0; background: none; padding: 0.45rem var(--space-3);
  color: var(--md-tekst); font: inherit; font-size: var(--text-sm);
  text-align: left; cursor: pointer;
}
.md-menypanel button:hover { background: var(--md-flate-2); }
.md-menypanel button.er-fare { color: var(--md-fare-tekst); }
.md-menynote {
  padding: var(--space-2) var(--space-3) var(--space-1);
  border-top: 1px solid var(--md-hairline);
  color: var(--md-tekst-svak); font-size: var(--text-2xs);
}

/* ---------- Nøkkeltall ----------
   Ingen bokser. Tallet i mono og stort, merkelappen under i smått,
   skilt av hårstrek. Det er instrumentpanelet CLAUDE.md beskriver, og
   det gir plattformfølelsen uten et eneste kort. */
.md-tall { display: flex; align-items: stretch; gap: 0; margin-left: var(--space-4); }
.md-tall__ett {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0 var(--space-4);
  border-left: 1px solid var(--md-hairline);
}
.md-tall__ett:first-child { border-left: 0; padding-left: 0; }
.md-tall__verdi {
  color: var(--md-tekst);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.md-tall__navn {
  color: var(--md-tekst-svak);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.md-tbtn {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--md-hairline);
  border-radius: var(--radius-sm);
  background: var(--md-flate-2);
  color: var(--md-tekst);
  font: inherit; font-size: var(--text-sm); line-height: 1.4;
  text-decoration: none; cursor: pointer;
}
.md-tbtn:hover { border-color: var(--md-tekst-svak); }
.md-tbtn--primar { background: var(--md-primar); border-color: var(--md-primar); color: #0F1210; font-weight: 600; }
.md-tbtn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ============================================================
   Ikonrail
   ============================================================ */
/* Alle rutenettbarna plasseres EKSPLISITT. Dragehåndtaket ligger i
   kolonne 3 sammen med lerretet, og med automatisk plassering ville
   lerretet blitt dyttet ut i høyre dokks kolonne. */
.md-rail { grid-column: 1; }
.md-dokk { grid-column: 2; }
.md-lerret { grid-column: 3; grid-row: 1; }
/* #md-hoyre bærer også .md-dokk. Id-en slår klassen på spesifisitet, så
   høyre dokk havner i kolonne 4 og ikke i kolonne 2. */
#md-hoyre { grid-column: 4; }

.md-rail {
  display: flex; flex-direction: column;
  padding-top: var(--space-2);
  border-right: 1px solid var(--md-hairline);
  background: var(--md-flate-1);
}
.md-railknapp {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: var(--space-2) 0;
  border: 0; background: none;
  color: var(--md-tekst-svak);
  font: inherit;
  cursor: pointer;
}
.md-railknapp svg { width: 20px; height: 20px; display: block; }
/* --text-2xs, ikke mindre. CLAUDE.md forbyr funksjonell tekst under
   11 px, nettopp fordi sida leses utendors pa billige skjermer, og
   railetikettene er funksjonelle. Railen ble bredere i stedet. */
.md-railknapp__navn { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.02em; }
.md-railknapp:hover { color: var(--md-tekst-dempet); }
/* Aktiv tilstand er en STREK, ikke en fylt pille. Samme språk som
   fanene ellers på sida. */
.md-railknapp.er-aktiv { color: var(--md-tekst); }
.md-railknapp.er-aktiv::before {
  content: ''; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem;
  width: 2px; background: var(--md-primar);
}
.md-railknapp__merke {
  position: absolute; top: 0.25rem; right: 0.35rem;
  min-width: 1rem; padding: 0 0.15rem;
  border-radius: var(--radius-sm);
  background: var(--md-flate-2);
  color: var(--md-tekst-dempet);
  font-family: var(--font-mono); font-size: var(--text-2xs); line-height: 1.2;
  text-align: center;
}

/* ============================================================
   Dokker
   ============================================================ */
.md-dokk {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--md-flate-1);
  border-right: 1px solid var(--md-hairline);
}
.md-dokk--hoyre { border-right: 0; border-left: 1px solid var(--md-hairline); }
.md-flate.uten-hoyre .md-dokk--hoyre { display: none; }

.md-dokkhode {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--md-hairline);
}
.md-dokkhode__tittel {
  margin: 0;
  color: var(--md-tekst);
  font-family: var(--font-main);
  font-size: var(--text-lg);
  font-weight: 600;
}
.md-dokkhode__tall { color: var(--md-tekst-svak); font-family: var(--font-mono); font-size: var(--text-xs); }
.md-dokkhode__lukk {
  border: 0; background: none; padding: 0;
  color: var(--md-tekst-svak); font: inherit; cursor: pointer;
}
.md-dokkhode__lukk:hover { color: var(--md-tekst); }
.md-dokk__kropp { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-2); }

/* ---------- Søk, filtre, sortering ---------- */
.md-sok { padding: var(--space-2) var(--space-3); }
.md-sok input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--md-hairline);
  border-radius: var(--radius-sm);
  background: var(--md-flate-0);
  color: var(--md-tekst);
  font: inherit; font-size: var(--text-sm);
}
.md-sok input:focus { outline: 2px solid var(--md-primar); outline-offset: -1px; }

.md-filter {
  display: flex; flex-wrap: wrap; gap: 0.1rem 0.45rem;
  padding: 0 var(--space-3) var(--space-2);
}
.md-filterknapp {
  border: 0; background: none; padding: 0.15rem 0;
  color: var(--md-tekst-dempet);
  font: inherit; font-size: var(--text-xs);
  cursor: pointer;
}
.md-filterknapp:hover { color: var(--md-tekst); }
.md-filterknapp.er-aktiv { color: var(--md-tekst); box-shadow: inset 0 -2px 0 var(--md-primar); }
.md-filterknapp span { color: var(--md-tekst-svak); font-family: var(--font-mono); font-size: var(--text-2xs); }

.md-sorter {
  display: flex; gap: var(--space-2);
  padding: 0.3rem var(--space-3);
  border-top: 1px solid var(--md-hairline);
  border-bottom: 1px solid var(--md-hairline);
}
.md-sorter button {
  border: 0; background: none; padding: 0;
  color: var(--md-tekst-svak);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: 600; letter-spacing: 0.09em;
  cursor: pointer;
}
.md-sorter button:first-child { flex: 1; text-align: left; }
.md-sorter__tall { text-align: right; }
.md-sorter button:hover { color: var(--md-tekst-dempet); }
.md-sorter button.er-aktiv { color: var(--md-tekst); }

/* ---------- Varsellinje ---------- */
.md-varsel {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin: var(--space-2) var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(224, 180, 92, 0.45);
  border-radius: var(--radius-sm);
  color: var(--md-advarsel);
  font-size: var(--text-xs);
}
.md-varsel button {
  border: 0; background: none; padding: 0;
  color: var(--md-advarsel); font: inherit; text-decoration: underline; cursor: pointer;
}

/* ============================================================
   Jordekortet
   ============================================================
   Kort, ikke rad. Men definert av HÅRSTREKEN, ikke av fyll eller
   skygge — regelen fra CLAUDE.md gjelder også her. Radius 2 px. */
.md-kort {
  margin-bottom: var(--space-2);
  border: 1px solid var(--md-hairline);
  border-radius: var(--radius-sm);
  background: var(--md-flate-1);
  overflow: hidden;
}
.md-kort:hover, .md-kort.er-peket { border-color: var(--md-tekst-svak); }
.md-kort.er-valgt-rad { border-color: var(--md-pek); }
.md-kort.er-fokus { box-shadow: inset 2px 0 0 var(--md-tekst-dempet); }

.md-kort__hode {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
.md-kort__kryss { margin: 0; accent-color: var(--md-primar); flex: none; }
.md-kort__midt { flex: 1; min-width: 2rem; }
.md-kort__navn {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--text-base);
}
.md-kort--av .md-kort__navn { color: var(--md-tekst-dempet); }
/* Metalinja under navnet: versjoner, kjørelinjer, arbeid. Det er den
   som gjør raden til et kort i stedet for en tabellrad. */
.md-kort__meta {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--md-tekst-svak);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}
.md-kort__daa {
  flex: none;
  color: var(--md-tekst-dempet);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.md-kort__fold {
  flex: none; width: 1.3rem;
  border: 0; background: none; padding: 0;
  color: var(--md-tekst-svak); font-size: var(--text-xs); cursor: pointer;
}
.md-kort__fold:hover { color: var(--md-tekst); }

.md-prikker { display: flex; gap: 2px; flex: none; }
.md-prikk { width: 7px; height: 7px; border-radius: 50%; }

/* Et jorde der MER ENN ÉN versjon er krysset av. Terminalen vil spørre
   Overwrite, Rename eller Merge. */
.md-kort.er-uavklart .md-kort__navn::after {
  content: '';
  display: inline-block; width: 6px; height: 6px; margin-left: 0.4rem;
  border-radius: 50%; background: var(--md-fare);
}

.md-versjon {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.35rem var(--space-3) 0.35rem 2.4rem;
  border-top: 1px solid rgba(64, 72, 60, 0.6);
  background: var(--md-flate-0);
  font-size: var(--text-xs);
}
.md-versjon__navn { flex: 1; color: var(--md-tekst-dempet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* En versjon lest fra en TASKDATA-eksport kan ikke deles ut: det finnes
   ingen originalfil per jorde, bare vår lesing av en samlefil. Raden
   dempes og merkes — den SKJULES IKKE. At jordet finnes hos denne
   maskinen er en opplysning, og den forsvinner om raden gjør det. */
.md-versjon.er-ulesbar { opacity: 0.72; flex-wrap: wrap; }
/* Notisen tar EGEN LINJE. På samme linje som navnet spiste den
   traktornavnet ned til 57 px — «Traktor T» ble «T..» — og raden mistet
   nettopp det den skulle fortelle: hvilken maskin versjonen kom fra. */
.md-versjon__note {
  flex: 0 0 100%;
  padding-left: 1.55rem;
  color: var(--md-tekst-svak);
  font-family: var(--font-mono); font-size: var(--text-2xs);
}
.md-merkelapp {
  display: inline-block;
  padding: 0 0.25rem;
  border: 1px solid var(--md-hairline);
  border-radius: 2px;
  color: var(--md-tekst-svak);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  vertical-align: baseline;
}
.md-versjon__daa { font-family: var(--font-mono); color: var(--md-tekst-dempet); font-variant-numeric: tabular-nums; }
.md-versjon input { margin: 0; accent-color: var(--md-primar); }
.md-bare {
  border: 1px solid var(--md-hairline); border-radius: var(--radius-sm);
  background: none; color: var(--md-tekst-dempet);
  font: inherit; font-size: var(--text-2xs); padding: 0.1rem 0.4rem; cursor: pointer;
}
.md-bare:hover { color: var(--md-tekst); border-color: var(--md-tekst-svak); }
.md-ned {
  flex: none; border: 0; background: none; padding: 0 0.2rem;
  color: var(--md-tekst-svak); font: inherit; font-size: var(--text-xs); cursor: pointer;
}
.md-ned:hover { color: var(--md-tekst); }

/* ============================================================
   Kilder — egen seksjon i railen
   ============================================================ */
.md-kilderad {
  position: relative;
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--md-hairline);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.md-kilderad__navn { flex: 1; min-width: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-kilderad__tall { color: var(--md-tekst-svak); font-family: var(--font-mono); font-size: var(--text-2xs); }
.md-kilderad__meny {
  flex: none; width: 1.2rem;
  border: 0; background: none; padding: 0;
  color: var(--md-tekst-svak); font: inherit; cursor: pointer;
}
.md-kilderad__meny:hover { color: var(--md-tekst); }
.md-kildemeny {
  position: absolute; top: 100%; right: var(--space-2); z-index: 6;
  display: flex; flex-direction: column; min-width: 12rem;
  border: 1px solid var(--md-hairline);
  background: var(--md-panel);
  box-shadow: var(--shadow-lg);
}
.md-kildemeny button {
  border: 0; background: none; padding: 0.4rem var(--space-3);
  color: var(--md-tekst); font: inherit; font-size: var(--text-sm);
  text-align: left; cursor: pointer;
}
.md-kildemeny button:hover { background: var(--md-flate-2); }
.md-kildemeny button.er-fare { color: var(--md-fare-tekst); }

/* ============================================================
   Kart og kartkontroller
   ============================================================ */
.md-lerret { position: relative; min-width: 0; }
.md-kart { position: absolute; inset: 0; background: var(--md-flate-0); }
.md-kart .ol-control button { background: rgba(23,27,20,0.9); }
.md-kart .ol-control button:hover { background: rgba(23,27,20,1); }
.md-kart .ol-scale-line { background: rgba(15,18,16,0.7); }

/* Kontrollene ligger PÅ kartet. Skyggen er tillatt her: regelen har
   alltid hatt unntak for overlegg, og et panel over et flyfoto må
   løftes for å kunne leses. */
.md-kartkontroll {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 4;
  display: flex; gap: var(--space-1);
}
.md-kartknapp {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--md-hairline);
  border-radius: var(--radius-sm);
  background: var(--md-panel);
  box-shadow: var(--shadow-lg);
  color: var(--md-tekst);
  font: inherit; font-size: var(--text-xs);
  cursor: pointer;
}
.md-kartknapp:hover { border-color: var(--md-tekst-svak); }
.md-lagmeny { position: relative; }
.md-lag {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 5;
  min-width: 13rem;
  border: 1px solid var(--md-hairline);
  border-radius: var(--radius-sm);
  background: var(--md-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
}
.md-lagrad {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.3rem var(--space-3);
  cursor: pointer;
}
.md-lagrad:hover { background: var(--md-flate-2); }
.md-lagrad input { accent-color: var(--md-primar); margin: 0; }
.md-lagrad__navn { flex: 1; color: var(--md-tekst); font-size: var(--text-sm); }
.md-lagrad__tall { color: var(--md-tekst-svak); font-family: var(--font-mono); font-size: var(--text-2xs); }

/* ============================================================
   Egenskapspanelet
   ============================================================ */
.md-egen { padding: var(--space-2); }
.md-egen h3 { margin: 0 0 var(--space-1); font-size: var(--text-xl); }
.md-egen__sum { margin: 0 0 var(--space-4); color: var(--md-tekst-dempet); font-family: var(--font-mono); font-size: var(--text-xs); }
.md-egen__bolk { margin: var(--space-4) 0 0; }
.md-egen__bolk h4 {
  margin: 0 0 var(--space-2);
  color: var(--md-tekst-dempet);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.md-egen table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.md-egen th, .md-egen td { padding: 0.3rem 0; border-bottom: 1px solid rgba(64,72,60,0.5); text-align: left; vertical-align: baseline; }
.md-egen th { font-weight: 400; color: var(--md-tekst-dempet); width: 45%; }
.md-egen td { font-family: var(--font-mono); }
.md-egen__tom { color: var(--md-tekst-svak); font-size: var(--text-sm); }
.md-egen__note {
  margin: var(--space-2) 0 0;
  color: var(--md-tekst-dempet);
  font-size: var(--text-xs); line-height: 1.5;
}
.md-egen__kilde { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ---------- Tomtilstand i en seksjon ---------- */
.md-tomt { padding: var(--space-4) var(--space-3); color: var(--md-tekst-dempet); font-size: var(--text-sm); }
.md-tomt h3 { margin: 0 0 var(--space-2); color: var(--md-tekst); font-size: var(--text-lg); }
.md-tomt p { margin: 0 0 var(--space-3); }

/* ============================================================
   Advarsel og forhåndsvisning
   ============================================================ */
.md-advarsel {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: rgba(15, 18, 16, 0.75);
}
.md-advarsel__boks {
  max-width: 34rem; max-height: 85vh; overflow-y: auto;
  padding: var(--space-5);
  border: 1px solid var(--md-hairline);
  border-radius: var(--radius);
  background: var(--md-flate-1);
  box-shadow: var(--shadow-lg);
  color: var(--md-tekst);
}
.md-advarsel__boks h2 { margin: 0 0 var(--space-4); font-size: var(--text-xl); }
.md-advarsel__liste { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.md-advarsel__liste li {
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-top: 1px solid var(--md-hairline);
  border-left: 2px solid var(--md-advarsel);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.md-advarsel__liste li:first-child { border-top: 0; }
/* Første punkt er en forsikring, ikke en advarsel. */
.md-advarsel__liste li.er-ok { border-left-color: var(--md-primar); }
.md-advarsel__knapper { display: flex; gap: var(--space-2); justify-content: flex-end; }

.md-forhands__tall { display: flex; gap: var(--space-5); margin: 0 0 var(--space-4); }
.md-forhands__tall div { display: flex; flex-direction: column; }
.md-forhands__tall b { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 400; }
.md-forhands__tall span { color: var(--md-tekst-svak); font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; }
.md-forhands__varsel {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid rgba(224, 180, 92, 0.45);
  border-radius: var(--radius-sm);
  color: var(--md-advarsel);
  font-size: var(--text-sm);
}
.md-forhands__note { margin: 0 0 var(--space-4); color: var(--md-tekst-dempet); font-size: var(--text-sm); }

/* ---------- Statuslinje ---------- */
.md-statuslinje {
  padding: 0.3rem var(--space-3);
  border-top: 1px solid var(--md-hairline);
  background: var(--md-flate-1);
  color: var(--md-tekst-dempet);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Bakgrunnskartene er ETT valg, ikke tre avkryssinger. Aktiv tilstand
   er en understrek, ikke en pille — sidas egen regel. */
.md-lagvalg {
  display: flex; gap: 0;
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--md-hairline);
}
.md-lagvalg__knapp {
  flex: 1;
  padding: 0.25rem 0.3rem;
  border: 0; border-bottom: 2px solid transparent;
  background: none;
  color: var(--md-tekst-dempet);
  font: inherit; font-size: var(--text-2xs); font-family: var(--font-mono);
  cursor: pointer;
}
.md-lagvalg__knapp:hover { color: var(--md-tekst); }
.md-lagvalg__knapp.er-paa { color: var(--md-tekst); border-bottom-color: var(--md-primar); }

/* Tegnforklaring. GRENSESYMBOLET ER NØYTRALT: grensene har kildens
   farge, og en cyan strek merket «Jordegrense» påsto at cyan BETYR
   jordegrense — der cyan betyr Traktor N. Streken forklares, ikke
   fargen. */
.md-lagtegn {
  display: flex; flex-direction: column; gap: 0.2rem;
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--md-hairline);
  color: var(--md-tekst-dempet);
  font-family: var(--font-mono); font-size: var(--text-2xs);
}
.md-lagtegn span { display: flex; align-items: center; gap: var(--space-2); }
.md-tegn { flex: none; width: 1.1rem; height: 0; border-top: 2px solid currentColor; }
.md-tegn--grense { border-top-width: 2px; }
.md-tegn--vend { border-top: 1px dashed rgba(255, 255, 255, 0.55); }
.md-tegn--spor { border-top: 1px solid rgba(255, 255, 255, 0.4); }
.md-tegn--hind {
  width: 8px; height: 8px; border: 0; border-radius: 50%;
  background: rgba(224, 108, 92, 0.85);
}

/* Søkeknappen. Den vises bare når det ER treff å krysse av — en knapp
   som garantert ikke gjør noe er verre enn ingen knapp. */
.md-sok { position: relative; }
#md-sok-alle {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--md-hairline); border-radius: var(--radius-sm);
  background: var(--md-flate-2);
  color: var(--md-tekst-dempet);
  font: inherit; font-family: var(--font-mono); font-size: var(--text-2xs);
  cursor: pointer;
}
#md-sok-alle:hover { color: var(--md-tekst); border-color: var(--md-primar); }

/* Dragehåndtaket. 5 px bredt, men hele feltet er treffbart — en
   hårstrek man må sikte på er ikke et håndtak. */
.md-drag {
  grid-column: 3; grid-row: 1;
  justify-self: start;
  width: 5px; margin-left: -3px;
  cursor: col-resize;
  background: transparent;
  z-index: 3;
}
.md-drag:hover, .md-drag.er-dratt { background: var(--md-primar); }
.md-drag:focus-visible { outline: 2px solid var(--md-primar); outline-offset: 0; }
body.md-drar { cursor: col-resize; user-select: none; }

/* ============================================================
   Arbeid — operasjonene
   ============================================================
   Samme kortform som jorderaden, men med datoen som første kolonne:
   lista svarer på «hva gjorde jeg i mai», og da er tiden inngangen. */
.md-aar h3 {
  display: flex; align-items: baseline; justify-content: space-between;
  position: sticky; top: 0; z-index: 1;
  margin: 0; padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--md-hairline);
  background: var(--md-flate-1);
  color: var(--md-tekst-dempet);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em;
}
.md-aar h3 span { color: var(--md-tekst-svak); }
.md-oppg {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--md-hairline);
  cursor: pointer;
}
.md-oppg:hover { background: var(--md-flate-2); }
.md-oppg__dato {
  flex: none; width: 3.6rem;
  color: var(--md-tekst-dempet);
  font-family: var(--font-mono); font-size: var(--text-xs);
}
.md-oppg__midt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-oppg__navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-oppg__meta {
  color: var(--md-tekst-svak); font-family: var(--font-mono); font-size: var(--text-2xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.md-oppg__status {
  flex: none; color: var(--md-tekst-svak);
  font-family: var(--font-mono); font-size: var(--text-2xs);
}

/* Historikken i egenskapspanelet. Én blokk per operasjon, med
   maskinens egne totaler under. */
.md-hist { padding: var(--space-2) 0; border-top: 1px solid var(--md-hairline); }
.md-hist:first-child { border-top: 0; }
.md-hist__hode { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.md-hist__hode span { flex: none; color: var(--md-tekst-svak); font-family: var(--font-mono); font-size: var(--text-2xs); }
.md-hist__meta { color: var(--md-tekst-dempet); font-family: var(--font-mono); font-size: var(--text-2xs); }
.md-hist table { width: 100%; margin-top: var(--space-1); border-collapse: collapse; }
.md-hist th {
  padding: 0.1rem 0; color: var(--md-tekst-dempet);
  font-size: var(--text-xs); font-weight: 400; text-align: left;
}
.md-hist td {
  padding: 0.1rem 0; color: var(--md-tekst);
  font-family: var(--font-mono); font-size: var(--text-xs); text-align: right;
  white-space: nowrap;
}

/* ============================================================
   Jordelista som dokument
   ============================================================
   Ett dokument brukes to steder: utskriftsarket (Ctrl+P) og HTML-fila
   som kan legges ved utdelinga. Derfor er stilene skrevet mot .ul-* og
   ikke mot sidas egne klasser — fila skal kunne åpnes alene fra en
   USB-penn, uten nett og uten resten av sida, så den bærer stilene
   sine selv. Hentet ordrett fra jordesett.
   ============================================================ */
.md-utskrift { display: none; }

.ul-ark {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  color: #111111;
  background: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ul-topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #111111;
}
.ul-topp h1 {
  margin: 0;
  color: #111111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.ul-dato { font-size: 0.8rem; color: #555555; }

/* Sammendraget: tre tall man ser med det samme, uten å bla. */
.ul-sum {
  display: flex;
  gap: 2.5rem;
  margin: 1.1rem 0 1.6rem;
}
.ul-sum b {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ul-sum span {
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #666666;
}

.ul-oversikt {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  font-size: 0.85rem;
}
.ul-oversikt th {
  text-align: left;
  font-weight: 600;
  padding: 0.3rem 0;
  border-bottom: 1px solid #DDDDDD;
}
.ul-oversikt td {
  padding: 0.3rem 0;
  color: #444444;
  border-bottom: 1px solid #DDDDDD;
}

/* To spalter side om side. Ikke CSS-kolonner: de ville brutt <thead>, og
   den gjentatte kolonneoverskriften er hele grunnen til at dette er en
   tabell. */
.ul-bolk { margin-bottom: 1.8rem; }
.ul-kilde {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #444444;
}
.ul-spalter {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
}
.ul-tabell {
  flex: 1;
  min-width: 0;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.ul-tabell thead th {
  text-align: left;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666666;
  padding: 0.25rem 0.4rem 0.25rem 0;
  border-bottom: 1.5px solid #111111;
}
.ul-tabell td {
  padding: 0.22rem 0.4rem 0.22rem 0;
  border-bottom: 1px solid #EEEEEE;
  vertical-align: baseline;
  /* Brekk, ikke kutt. Et avkortet navn på papir kan ikke slås opp. */
  overflow-wrap: anywhere;
}
.ul-nr { width: 1.8rem; color: #999999; font-variant-numeric: tabular-nums; }
.ul-tall {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ul-bolksum {
  margin-top: 0.5rem;
  padding-top: 0.35rem;
  border-top: 1.5px solid #111111;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
}
.ul-merke {
  font-size: 0.6rem;
  color: #A03050;
  border: 1px solid #E0B8C4;
  border-radius: 2px;
  padding: 0 0.2rem;
  white-space: nowrap;
}
.ul-bunn {
  margin-top: 2.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid #DDDDDD;
  font-size: 0.7rem;
  line-height: 1.5;
  color: #777777;
}

@media print {
  /* Alt som er skjerm forsvinner; arket står igjen alene.
     Navnene måtte skrives om i flyttingen fra jordesett: en ordrett
     kopi skjulte .jg-* — klasser som ikke finnes her — så Ctrl+P
     skrev ut hele det mørke verktøyet og ingen liste. */
  #bvt-nav, #bvt-footer, .bvt-feedback-btn, #md-start,
  .md-topp, .md-flate, .md-statuslinje, .md-liten,
  .md-advarsel { display: none !important; }

  html, body, #main, .md-ide {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    background: #FFFFFF !important;
  }
  .md-utskrift { display: block !important; }
  .ul-ark { max-width: none; padding: 0; }

  .ul-tabell { page-break-inside: auto; }
  .ul-tabell thead { display: table-header-group; }
  .ul-tabell tr { page-break-inside: avoid; }
  .ul-bolk { page-break-inside: auto; }
  .ul-kilde { page-break-after: avoid; }

  @page { margin: 16mm 14mm; }
}

/* ---------- Startskjerm ---------- */
.md-dropp {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: var(--space-6) var(--space-4);
  margin-bottom: var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  text-align: center; cursor: pointer;
}
.md-dropp:hover, .md-dropp:focus-visible, .md-dropp.is-over {
  border-color: var(--color-primary); background: var(--color-surface-alt);
}

/* ---------- Småskjerm ---------- */
/* Vises bare på småskjerm, på STARTSKJERMEN. Beskjeden inne i
   verktøyet (.md-liten) kommer for sent: da har man alt lett fram
   filene. */
.md-bare-liten { display: none; }
@media (max-width: 720px) {
  .md-bare-liten {
    display: block;
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border-left: 2px solid var(--color-warning);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
}

.md-liten { display: none; }
@media (max-width: 720px) {
  body.md-aktiv:not(.md-tross) .md-flate,
  body.md-aktiv:not(.md-tross) .md-topp,
  body.md-aktiv:not(.md-tross) .md-statuslinje { display: none; }
  body.md-aktiv:not(.md-tross) .md-liten { display: block; padding: var(--space-5); color: var(--md-tekst); }
}
/* Under ~1200 px legger egenskapspanelet seg OVER kartet i stedet for
   å skyve det. Et kart på 300 px er ikke et kart. */
@media (max-width: 1200px) {
  .md-flate { grid-template-columns: var(--md-rail) var(--md-dokk-v) minmax(0, 1fr) 0; }
  .md-dokk--hoyre {
    position: absolute; right: 0; top: 0; bottom: 0; width: var(--md-dokk-h);
    z-index: 7; background: var(--md-panel); box-shadow: var(--shadow-lg);
  }
  .md-flate.uten-hoyre .md-dokk--hoyre { display: none; }
}
@media (max-width: 1000px) {
  .md-tall__ett:nth-child(n+3) { display: none; }
}