/* gik.dk — spec/identitet.md v3.9. Seks farver, ingen flere. */

@font-face {
  font-family: 'Overpass';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Overpass-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Overpass';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Overpass-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Overpass';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Overpass-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Overpass';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Overpass-900.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/PlexSans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('/assets/fonts/PlexSans-400-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/PlexMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/PlexMono-500.woff2') format('woff2');
}

:root {
  /* §Farver — seks tokens, ikke flere */
  --hav: #273043;
  --fjord: #50858B;
  --lyng: #AA4465;
  --dis: #D8D4F2;
  --marehalm: #DCE2AA;
  --klit: #F0EAE0;
  /* Strukturlinjer: hav ved lav opacitet, ikke en syvende farve */
  --streg: rgba(39, 48, 67, .16);

  --disp: 'Overpass', system-ui, sans-serif;
  --broed: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--klit);
  color: var(--hav);
  font-family: var(--broed);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--lyng); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--lyng); }
em { font-style: italic; }

/* ---------- header / wordmark / menu ---------- */
.side-header {
  background: var(--hav);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.wm {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: .14em;
  color: var(--marehalm);
  text-decoration: none;
  line-height: 1;
}
.wm .prik { color: var(--lyng); }
.menu {
  display: flex;
  gap: 20px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.menu a {
  text-decoration: none;
  color: var(--dis);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--klit); }
.menu a.her { color: var(--marehalm); border-bottom-color: var(--lyng); }

main { padding: 40px 32px 64px; max-width: 1000px; margin: 0 auto; }

/* ---------- breadcrumb ---------- */
.bc {
  font-family: var(--disp);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--hav);
  display: inline;
  line-height: 1.08;
}
.bc .sep { color: var(--lyng); margin: 0 .11em; font-weight: 700; }
.bc .pre { font-weight: 600; opacity: .72; }
.bc.stor { font-size: clamp(26px, 3.2vw, 40px); letter-spacing: .03em; line-height: 1.1; }
.bc.mel { font-size: 19px; letter-spacing: .05em; }
.bc.lille { font-size: 13px; letter-spacing: .08em; }
.bc.lys { color: var(--klit); }
.bc.lys .sep { color: var(--marehalm); }
.bc.marehalm { color: var(--marehalm); }
.bc.marehalm .sep { color: var(--lyng); }

.eyebrow {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fjord);
  margin-bottom: 14px;
}

/* ---------- post / spalte ---------- */
.spalte { max-width: 58ch; margin: 0 auto; }
h1 { margin: 0; }
.underrubrik { font-family: var(--broed); font-size: 15px; color: var(--hav); margin: 10px 0 0; }
.regel-lyng { height: 2px; background: var(--lyng); width: 56px; margin: 22px 0 28px; }
.krop p { margin: 0 0 16px; font-size: 17px; line-height: 1.78; hyphens: auto; }
.krop p:last-child { margin-bottom: 0; }
.krop h2 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hav);
  margin: 32px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--streg);
}
.krop table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0; }
.krop th, .krop td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--streg); }
.krop th { font-family: var(--disp); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fjord); }
.krop td { font-family: var(--mono); font-size: 13px; }
/* Liggende: op til 74ch, centreret om den 58ch brede tekstspalte.
   Stående (.hoej): op til 46ch, venstrestillet. §Billeder · Billedet på siden. */
.krop figure {
  margin: 30px 0;
  width: min(100%, 74ch);
  margin-left: calc((58ch - min(100%, 74ch)) / 2);
}
.krop figure.hoej { width: min(100%, 46ch); margin-left: 0; }
.krop .figknap {
  all: unset;
  display: block;
  cursor: zoom-in;
  width: 100%;
}
.krop .figknap .flade {
  display: block;
  border: 1px solid var(--streg);
  background: var(--klit);
  padding: 9px;
  transition: border-color .12s;
}
.krop .figknap:hover .flade,
.krop .figknap:focus-visible .flade { border-color: var(--lyng); }
.krop figcaption {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-top: 9px;
  flex-wrap: wrap;
}
.krop figcaption .kl { font-family: var(--mono); font-size: 12px; color: var(--fjord); white-space: nowrap; }
.krop figcaption .tx {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hav);
}

/* ---------- forstørrelse (lup) — §Billeder · Forstørrelsen ---------- */
.lup {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--hav);
  display: none;
  flex-direction: column;
  padding: 18px 20px 20px;
}
.lup.aaben { display: flex; }
.lup-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: none; }
.lup-tael { font-family: var(--mono); font-size: 12px; color: var(--dis); }
.lup-flade { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px 0; cursor: zoom-out; }
.lup-flade img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; }
.lup-bund {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex: none;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid rgba(240, 234, 224, .22);
}
.lup-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lup-tekst .kl { font-family: var(--mono); font-size: 12px; color: var(--dis); }
.lup-tekst .tx { font-family: var(--disp); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--marehalm); }
.lup-styr { display: flex; gap: 8px; flex: none; }
.lup-knap {
  all: unset;
  cursor: pointer;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 12px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--dis);
  color: var(--dis);
  transition: background .12s, color .12s, border-color .12s;
}
.lup-knap:hover { background: var(--dis); color: var(--hav); }
.lup-knap[disabled] { opacity: .38; cursor: default; }
.lup-knap[disabled]:hover { background: none; color: var(--dis); }
.lup-knap.luk { border-color: var(--marehalm); color: var(--marehalm); }
.lup-knap.luk:hover { background: var(--marehalm); color: var(--hav); }
body.laast { overflow: hidden; }
@media (max-width: 760px) {
  .lup { padding: 12px; }
  .lup-bund { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- feltdata ---------- */
.feltdata { border-top: 2px solid var(--hav); border-bottom: 1px solid var(--streg); padding: 14px 0 4px; margin-top: 36px; }
.feltdata .fd-label {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fjord);
  margin-bottom: 10px;
}
.feltdata dl { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; margin: 0; font-family: var(--mono); font-size: 13px; }
.feltdata dt { color: var(--hav); padding: 5px 0; border-bottom: 1px dotted var(--streg); }
.feltdata dd { margin: 0; padding: 5px 0; text-align: right; border-bottom: 1px dotted var(--streg); font-weight: 500; }

/* ---------- log (forside + verb-lister) ---------- */
.log { display: flex; flex-direction: column; border-top: 1px solid var(--streg); }
.log-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--streg); align-items: baseline; }
.log-row .dato { font-family: var(--mono); font-size: 12px; color: var(--fjord); white-space: nowrap; }
.log-row .sub { grid-column: 1 / -1; font-size: 15px; color: var(--hav); margin: 4px 0 0; }
.log-row a { text-decoration: none; }
.tom { color: var(--hav); font-size: 15px; }

/* ---------- tomme verb-sider / fejlside ---------- */
.tom-verb, .fejlside { padding: 60px 0; text-align: center; }
.fejlside p { margin: 16px 0 0; font-size: 16px; }

/* ---------- footer ---------- */
.side-footer {
  background: var(--hav);
  color: var(--dis);
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
}
.side-footer .venstre, .side-footer .hoejre { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.side-footer .wm { font-size: 20px; }
.side-footer .adr, .side-footer .dato { font-family: var(--mono); font-size: 12px; color: var(--dis); }
.side-footer a { text-decoration: none; transition: color .12s; }
.side-footer a.post { color: var(--marehalm); }
.side-footer a.post:hover { color: var(--klit); }
.side-footer a.stille { color: var(--dis); }
.side-footer a.stille:hover { color: var(--marehalm); }

@media (max-width: 760px) {
  main { padding: 28px 20px 48px; }
  .side-header, .side-footer { padding: 18px 20px; }
  .side-footer { flex-direction: column; align-items: flex-start; }
  .side-footer .venstre { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- friluft-app (SKABTE // FRILUFT widget) ----------
   Port af t29.dk/friluft — samme markup/JS-struktur, seks tokens.
   Alt scopes under #friluft-app for at undgå kollision med .card/.tab/
   .panel-navne, som ellers er for generiske til sitets øvrige CSS. */
#friluft-app, #friluft-app * { -webkit-tap-highlight-color: transparent; }
#friluft-app {
  font-family: var(--broed);
  font-size: 15px;
  line-height: 1.4;
  color: var(--hav);
  max-width: 560px;
  margin: 40px auto 0;
  padding: 0 0 120px;
}

/* ——— Søgning + faner ——— */
#friluft-app .styr {
  border-bottom: 1px solid var(--streg);
  padding: 0 0 10px;
}
#friluft-app .search { position: relative; }
#friluft-app .search .icon {
  display: block;
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  opacity: .55;
}
#friluft-app .search input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 10px 36px 10px 34px;
  border: 1px solid var(--fjord);
  background: var(--klit);
  color: var(--hav);
  outline: none;
  -webkit-appearance: none;
}
#friluft-app .search input:focus-visible { border-color: var(--lyng); }
#friluft-app .search input::-webkit-search-decoration,
#friluft-app .search input::-webkit-search-cancel-button,
#friluft-app .search input::-webkit-search-results-button,
#friluft-app .search input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}
#friluft-app .search .clear {
  all: unset;
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--fjord);
  padding: 4px 8px;
  display: none;
}
#friluft-app .search.has-value .clear { display: block; }

#friluft-app .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 10px;
}
#friluft-app .tab {
  all: unset;
  flex: 0 0 auto;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fjord);
  padding: 12px 12px 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
#friluft-app .tab .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--hav); }
#friluft-app .tab[data-tab="positive"] .dot { background: var(--marehalm); }
#friluft-app .tab[data-tab="warning"] .dot { background: var(--lyng); }
#friluft-app .tab[data-tab="note"] .dot { background: var(--dis); }
#friluft-app .tab[data-tab="substitutes"] .dot { background: var(--fjord); }
#friluft-app .tab.active { color: var(--hav); border-bottom-color: var(--lyng); }
#friluft-app .tab .count { font-family: var(--mono); font-size: 12px; color: var(--fjord); }

/* ——— Paneler ——— */
#friluft-app .panel { display: none; }
#friluft-app .panel.active { display: block; }
#friluft-app .panel-intro { padding: 16px 0 6px; border-bottom: 1px dashed var(--streg); }
#friluft-app .panel-intro h2 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fjord);
  line-height: 1.2;
  margin: 0 0 4px;
}
#friluft-app .panel-intro p { font-size: 12.5px; color: var(--hav); margin: 0; }
#friluft-app .retailers-intro { margin-top: 20px; border-top: 1px solid var(--streg); border-bottom: 1px dashed var(--streg); padding-top: 20px; }

#friluft-app .group-heading {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fjord);
  padding: 18px 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#friluft-app .group-heading::after { content: ""; flex: 1; height: 1px; background: var(--streg); }

/* ——— Kort ——— */
#friluft-app .card { position: relative; border-bottom: 1px solid var(--streg); }
#friluft-app .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
#friluft-app .card[data-status="positive"]::before { background: var(--marehalm); }
#friluft-app .card[data-status="warning"]::before { background: var(--lyng); }
#friluft-app .card[data-status="note"]::before { background: var(--dis); }

#friluft-app .card-head {
  all: unset;
  width: 100%;
  box-sizing: border-box;
  display: block;
  cursor: pointer;
  padding: 14px 44px 14px 18px;
  position: relative;
}
#friluft-app .card-head:active { background: var(--streg); }
#friluft-app .row1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#friluft-app .brand { font-family: var(--disp); font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--hav); }
#friluft-app .flag { line-height: 1; }
#friluft-app .flag-svg {
  display: inline-block;
  width: 18px;
  height: 13px;
  vertical-align: -2px;
  border: 1px solid var(--streg);
}
#friluft-app .symbol {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 6px;
  width: 30px;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
}
#friluft-app .card[data-status="positive"] .symbol,
#friluft-app .symbol.positive { background: var(--marehalm); color: var(--hav); }
#friluft-app .card[data-status="warning"] .symbol,
#friluft-app .symbol.warning { background: var(--lyng); color: var(--klit); }
#friluft-app .card[data-status="note"] .symbol,
#friluft-app .symbol.note { background: var(--dis); color: var(--hav); }
#friluft-app .verdict { font-size: 13px; color: var(--hav); margin-top: 4px; line-height: 1.5; }
#friluft-app .chev {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .18s ease;
  color: var(--fjord);
  font-size: 12px;
  font-family: var(--mono);
}
#friluft-app .card.open .chev { transform: translateY(-50%) rotate(90deg); }
#friluft-app .card-body { display: none; padding: 0 18px 16px; }
#friluft-app .card.open .card-body { display: block; }

#friluft-app dl.kv { margin: 0 0 10px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 6px; }
#friluft-app dl.kv dt {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fjord);
  padding-top: 2px;
}
#friluft-app dl.kv dd { margin: 0; font-size: 13px; color: var(--hav); line-height: 1.5; }
#friluft-app .notes { font-size: 13px; color: var(--hav); margin: 0 0 10px; line-height: 1.6; }

#friluft-app .dk-line {
  font-size: 12.5px;
  color: var(--hav);
  padding: 8px 10px;
  background: var(--klit);
  border-left: 2px solid var(--fjord);
  margin: 0 0 10px;
}
#friluft-app .dk-line strong {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fjord);
  display: block;
  margin-bottom: 2px;
}

#friluft-app .subs { margin: 10px 0 0; padding: 10px 12px; background: var(--marehalm); border-left: 3px solid var(--hav); }
#friluft-app .subs strong {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hav);
  display: block;
  margin-bottom: 4px;
}
#friluft-app .subs ul { margin: 0; padding: 0; list-style: none; }
#friluft-app .subs li { font-size: 13px; padding: 2px 0; color: var(--hav); }
#friluft-app .subs li .sub-flag { margin-right: 4px; }

#friluft-app .decision { margin: 10px 0 0; padding: 10px 12px; background: var(--dis); font-size: 13px; color: var(--hav); }
#friluft-app .decision strong {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hav);
  display: block;
  margin-bottom: 4px;
}

/* ——— Substitutter ——— */
#friluft-app .sub-item { padding: 14px 0; border-bottom: 1px solid var(--streg); }
#friluft-app .sub-item .from { font-size: 14px; color: var(--hav); }
#friluft-app .sub-item .from .brand-name { font-weight: 700; color: var(--lyng); }
#friluft-app .sub-item .arrow { font-family: var(--mono); color: var(--fjord); font-size: 12px; margin: 4px 0; }
#friluft-app .sub-item .to { font-size: 14.5px; font-weight: 600; color: var(--hav); line-height: 1.5; }

/* ——— Butikker ——— */
#friluft-app .retailer { padding: 14px 0; border-bottom: 1px solid var(--streg); }
#friluft-app .retailer .name { font-family: var(--disp); font-weight: 700; font-size: 15px; color: var(--hav); }
#friluft-app .retailer .note { font-size: 12.5px; color: var(--hav); margin-top: 3px; }

/* ——— Tomt resultat ——— */
#friluft-app .empty { padding: 40px 0; text-align: center; color: var(--hav); font-size: 13px; }
#friluft-app .empty .big {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fjord);
  margin-bottom: 6px;
  display: block;
}

#friluft-app mark { background: var(--marehalm); color: var(--hav); padding: 0 1px; }

/* ——— "Alle"-fanen: tre sammenklappelige status-sektioner ——— */
#friluft-app .alle-section { border-bottom: 1px solid var(--streg); }
#friluft-app .alle-section:last-child { border-bottom: none; }
#friluft-app .alle-section-head {
  all: unset;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 44px 16px 0;
  cursor: pointer;
  position: relative;
}
#friluft-app .alle-section-head:active { background: var(--streg); }
#friluft-app .alle-section-title { flex: 1; font-family: var(--disp); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--hav); }
#friluft-app .alle-section-count { font-family: var(--mono); font-size: 12px; color: var(--fjord); }
#friluft-app .alle-section-chev {
  position: absolute;
  right: 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fjord);
  transition: transform .18s ease;
}
#friluft-app .alle-section.open .alle-section-chev { transform: rotate(90deg); }
#friluft-app .alle-section-body { display: none; }
#friluft-app .alle-section.open .alle-section-body { display: block; }

/* ——— Forklaring ——— */
#friluft-app .legend { padding: 20px 0 0; border-top: 1px solid var(--streg); margin-top: 24px; font-size: 12px; color: var(--hav); }
#friluft-app .legend h3 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fjord);
  margin: 0 0 8px;
}
#friluft-app .legend-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
#friluft-app .legend-row .symbol { flex: 0 0 auto; }

@media (min-width: 600px) {
  #friluft-app { font-size: 15.5px; max-width: 620px; }
}

/* ---------- modstroem-app (SKABTE // MODSTRØM widget) ----------
   Port af t29.dk/modstroem — samme markup/JS-struktur, seks tokens.
   Alt scopes under #modstroem-app, af samme grund som #friluft-app:
   .card/.field/.btn/.toggle/.summary er for generiske til at efterlade
   uscopet. Kortet er indlejret SVG i stedet for Leaflet — se docs/decisions.md
   for hvorfor — så #modstroem-app rummer også .mo-seg/.mo-stop, tegnet af
   js/modstroem.js og farvet udelukkende via klasser her (ikke inline style=,
   ellers ser valider_css_farver() dem aldrig). */
#modstroem-app, #modstroem-app * { -webkit-tap-highlight-color: transparent; }
#modstroem-app {
  font-family: var(--broed);
  font-size: 15px;
  line-height: 1.5;
  color: var(--hav);
  margin: 40px 0 0;
  padding: 0 0 48px;
}
#modstroem-app input[type="range"] { accent-color: var(--lyng); }

/* ——— Planlægning ——— */
#modstroem-app .mo-layout { display: flex; flex-direction: column; gap: 20px; }
#modstroem-app .mo-layout__left { display: flex; flex-direction: column; gap: 20px; }
/* Stopoversigten sidder under hele .mo-layout, ikke i venstrekolonnen — så
   den kan bruge widgettens fulde bredde i stedet for kun de 320–420px
   venstrekolonnen har ved 900px+, som var det der tvang tabellen til at
   sidescrolle. .mo-layout's egen gap dækker kun dens direkte børn. */
#modstroem-app > .mo-card { margin-top: 20px; }

#modstroem-app .mo-card { border: 1px solid var(--streg); padding: 18px; }
#modstroem-app .mo-card h2 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hav);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--streg);
}

#modstroem-app .mo-field { margin-bottom: 20px; }
#modstroem-app .mo-field:last-child { margin-bottom: 0; }
#modstroem-app .mo-field label,
#modstroem-app .mo-field-label {
  display: block;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fjord);
  margin-bottom: 8px;
}

#modstroem-app select,
#modstroem-app input[type="time"] {
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--fjord);
  background: var(--klit);
  color: var(--hav);
  min-height: 44px;
  appearance: none;
  -webkit-appearance: none;
}
#modstroem-app select { width: 100%; padding-right: 34px; }
/* Selects mister deres native pil ved appearance:none ovenfor — egen
   pil herunder, så det stadig er tydeligt at Startsted er en dropdown. */
#modstroem-app .mo-select-wrap { position: relative; }
#modstroem-app .mo-select-chevron {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fjord);
  pointer-events: none;
}

#modstroem-app .mo-time-row,
#modstroem-app .mo-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}
#modstroem-app .mo-time-row input[type="time"] { flex: 1; }
#modstroem-app .mo-stepper input[type="range"] { flex: 1; min-height: 44px; }

#modstroem-app .mo-step-btn {
  all: unset;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fjord);
  color: var(--hav);
  font-family: var(--disp);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
#modstroem-app .mo-step-btn:hover { border-color: var(--lyng); }
#modstroem-app .mo-step-btn:active { background: var(--streg); }
#modstroem-app .mo-step-btn:focus-visible,
#modstroem-app .mo-btn:focus-visible {
  outline: 2px solid var(--lyng);
  outline-offset: 2px;
}

#modstroem-app .mo-readout {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  min-width: 96px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}

#modstroem-app .mo-toggle {
  position: relative;
  display: flex;
  border: 1px solid var(--fjord);
  margin-bottom: 16px;
}
#modstroem-app .mo-toggle input { position: absolute; opacity: 0; pointer-events: none; }
#modstroem-app .mo-toggle label {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 8px;
  cursor: pointer;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--fjord);
}
/* Fast skillelinje mellem de to celler — ellers har kun den valgte
   halvdel en synlig kant (sin egen hav-baggrund), og den anden halvdel
   flyder uden nogen markering af hvor dens klikflade holder op. */
#modstroem-app .mo-toggle label:first-of-type { border-right: 1px solid var(--fjord); }
#modstroem-app .mo-toggle input:checked + label { background: var(--hav); color: var(--klit); }
#modstroem-app .mo-toggle input:not(:checked) + label:hover { background: var(--streg); }
#modstroem-app .mo-toggle input:focus-visible + label { outline: 2px solid var(--lyng); outline-offset: -2px; }

/* ——— Resultat ——— */
#modstroem-app .mo-summary { padding: 14px 16px; border: 1px solid var(--streg); font-size: 15px; }
#modstroem-app .mo-summary strong { font-family: var(--disp); font-weight: 700; }
#modstroem-app .mo-summary--ok { background: var(--marehalm); color: var(--hav); border-color: var(--marehalm); }
#modstroem-app .mo-summary--bad { background: var(--klit); color: var(--lyng); border-color: var(--lyng); }
#modstroem-app .mo-summary--warn { background: var(--dis); color: var(--hav); border-color: var(--dis); }

#modstroem-app .mo-table-wrap { display: none; overflow-x: auto; }
#modstroem-app .mo-table { width: 100%; border-collapse: collapse; font-size: 14px; }
#modstroem-app .mo-table th,
#modstroem-app .mo-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--streg); white-space: nowrap; }
#modstroem-app .mo-table th {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fjord);
}
#modstroem-app .mo-table td { font-family: var(--mono); font-size: 13px; }
/* Rækkerne er klikbare, men uden luft mellem dem ville en venstre-kant pr.
   celle (som .mo-resultcard) bare fremstå som én sammenhængende streg langs
   hele kortet — det ligner en statusstribe (som FRILUFTs .card::before),
   ikke en klikbarheds-markør. cursor + hover er signalet her i stedet;
   mobilvisningen (.mo-resultcard) har rigtig luft mellem kortene og
   beholder den fulde kant. */
#modstroem-app .mo-table tr { cursor: pointer; }
#modstroem-app .mo-table tr:hover { background: var(--streg); }
#modstroem-app .mo-table tr.er-fjernest { font-weight: 700; }
#modstroem-app .mo-status { font-size: 1.05rem; text-align: center; font-family: var(--broed); }
#modstroem-app .mo-table tr.ok .mo-status { color: var(--fjord); }
#modstroem-app .mo-table tr.bad .mo-status { color: var(--lyng); }

#modstroem-app .mo-resultcards { display: flex; flex-direction: column; gap: 10px; }
#modstroem-app .mo-resultcard { border: 1px solid var(--fjord); padding: 10px 12px; cursor: pointer; }
#modstroem-app .mo-resultcard:hover { border-color: var(--lyng); }
#modstroem-app .mo-resultcard.ok { border-left: 4px solid var(--marehalm); }
#modstroem-app .mo-resultcard.bad { border-left: 4px solid var(--lyng); }
#modstroem-app .mo-resultcard.er-fjernest { background: var(--marehalm); }
#modstroem-app .mo-resultcard.er-fjernest .mo-resultcard__row,
#modstroem-app .mo-resultcard.er-fjernest .mo-margin { color: var(--hav); }
#modstroem-app .mo-resultcard__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}
#modstroem-app .mo-resultcard__row {
  display: flex;
  justify-content: space-between;
  color: var(--fjord);
  font-family: var(--mono);
  font-size: 13px;
  padding: 2px 0;
}
#modstroem-app .mo-margin { font-variant-numeric: tabular-nums; }

@media (min-width: 520px) {
  #modstroem-app .mo-table-wrap { display: block; }
  #modstroem-app .mo-resultcards { display: none; }
}

/* ——— Kort ——— */
/* .mo-map-bg (statisk, beskåret én gang ved kortlægning af rutens
   koordinater — se docs/decisions.md) og .mo-map-svg (JS-indsat SVG,
   samme projektion) deler præcis samme viewBox-geometri, så de to lag
   flugter uden runtime-justering. */
#modstroem-app .mo-map { position: relative; border: 1px solid var(--streg); background: var(--klit); overflow: hidden; }
#modstroem-app .mo-map-bg { display: block; width: 100%; height: auto; }
#modstroem-app .mo-map-svg { position: absolute; inset: 0; }
#modstroem-app .mo-map svg { display: block; width: 100%; height: auto; }

#modstroem-app .mo-seg {
  fill: none;
  stroke: var(--hav);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .35;
  stroke-dasharray: 6 6;
  vector-effect: non-scaling-stroke;
}
#modstroem-app .mo-seg.gaaet {
  stroke: var(--fjord);
  stroke-width: 4;
  opacity: .9;
  stroke-dasharray: none;
}

#modstroem-app .mo-stop { cursor: pointer; }
#modstroem-app .mo-stop:focus-visible { outline: none; }
#modstroem-app .mo-stop-maal { fill: transparent; }
#modstroem-app .mo-stop-prik {
  fill: var(--klit);
  stroke: var(--fjord);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
#modstroem-app .mo-stop.start .mo-stop-prik { fill: var(--hav); stroke: var(--hav); }
#modstroem-app .mo-stop.naaet .mo-stop-prik { fill: var(--marehalm); stroke: var(--hav); }
#modstroem-app .mo-stop.forpasset .mo-stop-prik { fill: var(--lyng); stroke: var(--lyng); }
#modstroem-app .mo-stop.fremhaevet .mo-stop-prik,
#modstroem-app .mo-stop:focus-visible .mo-stop-prik {
  stroke: var(--lyng);
  stroke-width: 3;
}

/* ODbL/CARTOs vilkår kræver synlig kildeangivelse hvor kortdata vises —
   ikke valgfrit. Eneste tekst under kortet: resultatet af beregningen
   står allerede i .mo-summary, lige ovenfor planlægningskortet. */
#modstroem-app .mo-map-attribution { font-family: var(--mono); font-size: 12px; color: var(--fjord); margin: 10px 0 0; }
#modstroem-app .mo-map-attribution a { color: var(--fjord); }

#modstroem-app .mo-map-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
#modstroem-app .mo-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--fjord);
  color: var(--hav);
  font-family: var(--disp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
#modstroem-app .mo-btn:hover { border-color: var(--lyng); }
#modstroem-app .mo-btn--primary { background: var(--lyng); border-color: var(--lyng); color: var(--klit); }
#modstroem-app .mo-btn--primary:hover { background: var(--hav); border-color: var(--hav); }

/* ——— layout: bred / landskab ————
   900px, ikke kildens 1100px maks-bredde: widgeten begrænses ikke yderligere
   ud over sitets egen main { max-width: 1000px } — §Grid: "Aldrig fuld
   bredde", en regel main allerede opfylder uden en ekstra, snævrere widget-
   kappe (til forskel fra #friluft-app, som er en enkelt-kolonne liste og
   derfor har sin egen 560/620px). To kolonner kræver plads til en
   min. 320px kortside ved siden af planlægningskortet. */
@media (min-width: 900px) {
  #modstroem-app .mo-layout {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 24px;
    align-items: start;
  }
  #modstroem-app .mo-layout__right { position: sticky; top: 16px; }
}