/* kloak.css — Kloak Studios eget layout. Tokens, skrifter og fælles komponenter bor i
   studio.css og indlæses først. Hardkod aldrig en hex her. */

[hidden] { display: none !important }

/* ── skal ─────────────────────────────────────────────────────────────────────
   minmax(0,1fr) og min-width:0 er bærende: uden dem sizer midten efter indholdet, og
   canvasset kommer ud af trit med Leaflets container. */
#app {
  --dok-venstre: 290px;
  --dok-hoejre: 320px;
  display: grid;
  grid-template-columns: var(--dok-venstre) minmax(0, 1fr) var(--dok-hoejre);
  grid-template-rows: auto minmax(0, 1fr) 30px;
  height: 100%;
}
body.input-collapsed #app { --dok-venstre: 40px }
body.results-collapsed #app { --dok-hoejre: 40px }
.appbar { grid-column: 1 / -1; grid-row: 1 }
.dock-left { grid-column: 1; grid-row: 2; border-right: 1px solid var(--line) }
.scene { grid-column: 2; grid-row: 2 }
.dock-right { grid-column: 3; grid-row: 2; border-left: 1px solid var(--line) }
.statusbar { grid-column: 1 / -1; grid-row: 3 }

.projektnavn {
  min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 12px; font-weight: 600;
}
.projektnavn.aendret { color: var(--accent-strong) }

/* ── menuer ───────────────────────────────────────────────────────────────── */
/* Menuerne folder ud over 3D-visningen (z-index 1100). */
.appbar { z-index: 1200 }
.menus { display: flex; align-items: center; gap: 1px; margin-left: 10px }
.menu { position: relative }
.menu > summary {
  list-style: none; display: flex; align-items: center; height: 28px; padding: 0 11px;
  border-radius: 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.menu > summary::-webkit-details-marker { display: none }
.menu > summary:hover, .menu[open] > summary { background: var(--accent-tint); color: var(--accent-strong) }
.menu-liste {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 240px;
  display: flex; flex-direction: column; padding: 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
.menu-liste button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  text-align: left; border: 0; background: transparent; padding: 7px 10px;
  border-radius: var(--r-sm); cursor: pointer; font-size: 12.5px;
}
.menu-liste button:hover { background: var(--accent-tint); color: var(--accent-strong) }
.menu-gruppe { display: flex; flex-direction: column; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line) }
kbd { font-family: var(--font-num); font-size: 10.5px; color: var(--muted) }

.segment { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface) }
.segment button {
  border: 0; background: transparent; padding: 0 11px; min-height: 30px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.segment button + button { border-left: 1px solid var(--line) }
.segment button.active { background: var(--accent); color: #fff }
.command.active { background: var(--accent); border-color: var(--accent); color: #fff }

/* ── værktøjslinje (som Bassin Studio) ───────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; border-top: 1px solid var(--line-2) }
.vaerktoej-gruppe { display: contents }
.vaerktoejer { display: flex; gap: 5px }
.mode-toggle {
  display: flex; height: 32px; padding: 3px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-3); box-shadow: inset 0 1px 2px var(--pipe-fill);
}
.mode-toggle button {
  min-width: 52px; border: 0; border-radius: 6px; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 12px; font-weight: 600;
  transition: color var(--t-fast) ease, background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.mode-toggle button:hover { color: var(--ink) }
.mode-toggle button.active { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-1) }

/* ── venstre dok: lag og data ─────────────────────────────────────────────── */
.lm-link { font-size: 11px }
/* «Kom i gang» over kortet, så længe projektet er tomt. */
.velkomst {
  position: absolute; z-index: 800; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 18px 20px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-2);
}
.velkomst h2 { margin: 0 0 10px; font-size: 15px }
.velkomst-luk { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px }
.velkomst-trin { display: grid; gap: 14px; margin: 0; padding-left: 20px }
.velkomst-trin li { display: grid; gap: 6px; font-size: 12.5px }
.velkomst-trin li > span { color: var(--muted); font-size: 12px }
.velkomst-knapper { display: flex; flex-wrap: wrap; gap: 6px }
.velkomst-knapper .command { font-size: 12px }
.velkomst-note { margin: 14px 0 0; color: var(--muted); font-size: 11.5px }
/* Filer trækkes ind på kortet. */
.slip {
  position: absolute; inset: 10px; z-index: 1150; display: grid; place-items: center; pointer-events: none;
  border: 2px dashed var(--accent); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 75%, transparent);
  color: var(--accent-strong); font-size: 14px; font-weight: 700;
}
body.input-collapsed .dock-left .dock-body { display: none }
.data-dok { padding-top: 8px }
.lag-dok { display: flex; flex-direction: column; gap: 6px }
/* Kravene i topbjælken; et klik åbner projektindstillingerne. */
.krav-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; margin-right: 10px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface); cursor: pointer;
  color: var(--ink-2); font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.krav-chip span { color: var(--muted); font-weight: 500; font-family: var(--font-num) }
.krav-chip:hover { border-color: var(--accent-line); color: var(--accent-strong) }
/* Projektindstillingerne: krav og nyt stik. */
.projekt-dialog { width: min(440px, calc(100vw - 32px)) }
.projekt-dialog-hoved { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px }
.projekt-dialog-hoved h3 { margin: 0 }
.projekt-afsnit { padding: 12px 0; border-top: 1px solid var(--line-2) }
.projekt-afsnit h4 { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2) }
.projekt-afsnit h4 small { margin-left: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted) }
.projekt-afsnit .kort-knapper { margin-top: 10px }

/* ── scene: kort + profil ─────────────────────────────────────────────────── */
.scene { display: flex; flex-direction: column; min-width: 0; min-height: 0 }
.kort-ramme { position: relative; flex: 1 1 auto; min-height: 0 }
#map { position: absolute; inset: 0; background: var(--paper) }
#plan-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 450 }
.ler-kort-hoved { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px }
.ler-prik { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50% }
.ler-type { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted) }
.ler-luk { width: 22px; height: 22px; font-size: 11px }
.ler-alle { margin-top: 6px; font-size: 11px }
.ler-alle summary { cursor: pointer; color: var(--muted) }
.leaflet-container { font: inherit }
#map[data-vaerktoej="broend"], #map[data-vaerktoej="ledning"] { cursor: crosshair }

.toast-stack { position: absolute; right: 14px; bottom: 34px; z-index: 1200 }

.three-view { position: absolute; inset: 0; z-index: 1100; background: var(--paper) }
.three-view[hidden] { display: none }
#three-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab }
.three-bar {
  position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 8px;
  pointer-events: none;
}
.three-bar > * { pointer-events: auto }
.three-status { font-size: 12px; color: var(--muted); background: rgba(252, 252, 250, .85); padding: 4px 8px; border-radius: var(--r-sm) }
.three-hjaelp { position: absolute; left: 12px; bottom: 10px; font-size: 11px; color: var(--muted) }
.three-hud { position: absolute; right: 12px; bottom: 10px }

/* Profilpanelet ligger UNDER kortet, ikke over det: det er en manipulator, og et svævende
   panel ville dække de brønde man redigerer. min-height:0 holder kortet levende. */
.profil-panel {
  flex: 0 0 260px; min-height: 0; display: flex; flex-direction: column;
  border-top: 1px solid var(--line); background: var(--surface);
}
.profil-panel[hidden] { display: none }
.profil-hoved { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--line-2) }
.profil-hoved b { font-size: 12px }
.profil-status { flex: 1; font-size: 12px; color: var(--muted) }
.profil-hoved .icon-btn { height: 26px; min-width: 28px }
.profil-flade { position: relative; flex: 1 1 auto; min-height: 0 }
#profil-canvas, #snit-canvas { position: absolute; inset: 0 }
/* Snittet har etiketter over terrænet og skal have plads til en gade i 1:1. Højden trækkes i
   overkanten; en stribe kort bliver altid stående. */
.snit-panel { position: relative; flex-basis: 340px; max-height: calc(100% - 90px) }
.snit-greb { position: absolute; top: -4px; left: 0; right: 0; height: 8px; z-index: 2; cursor: ns-resize }
.snit-greb:hover { background: var(--line) }
#snit-canvas { cursor: grab }
#map[data-vaerktoej="snit"] { cursor: crosshair }

/* ── højre dok ────────────────────────────────────────────────────────────── */
.dock-body .section h2 { margin-bottom: 8px }
.kort-raekke {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 30px; font-size: 12px; color: var(--muted);
}
.kort-raekke + .kort-raekke { margin-top: 4px }
.kort-raekke > span:last-child, .kort-raekke b { color: var(--ink); font-family: var(--font-num); font-weight: 500 }
.kort-raekke small { margin-left: 6px; color: var(--muted); font-family: var(--font-num) }
.kort-raekke input[type="number"], .kort-raekke input[type="text"], .kort-raekke input[type="password"],
.kort-raekke select { width: 150px }
.kort-raekke input[type="range"] { width: 150px }
.kort-raekke .chip { max-width: 150px }

/* Lagviseren (kort/lagviser.js). Grundstilen deles med Bassin Studio i studio.css. */
.lagviser { display: flex; flex-direction: column; gap: 2px; margin: 0 -7px }
.lm-sektion {
  margin: 10px 7px 2px; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.lm-sektion:first-child { margin-top: 0 }
.lm-eye-plads { flex: 0 0 22px }
.lm-kilde { margin: -3px 7px 3px 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted) }
.lm-kilde.load { color: var(--accent-strong) }
.lm-kilde.err { color: var(--red) }
.lagviser .lm-subgroup .lm-children .lm-child { padding-left: 46px }
.lm-plus {
  flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer;
}
.lm-plus svg { width: 13px; height: 13px; stroke-width: 2 }
.lm-plus:hover { background: var(--accent-tint); color: var(--accent-strong) }
.lm-indstil { opacity: 0.6 }
.lm-indstil.aaben { opacity: 1; color: var(--accent-strong) }
.lm-indstillinger {
  display: grid; gap: 8px; margin: 2px 7px 6px 36px; padding: 10px; border-radius: 6px; background: var(--surface-2);
}
.lm-indstillinger .lm-panel { display: grid; gap: 8px; min-width: 0 }
.lm-indstillinger .data-source-copy, .lm-indstillinger .data-actions { margin: 0 }
.lm-indstillinger .data-actions { grid-template-columns: 1fr 1fr }
.lm-indstillinger .data-details { margin-top: 0; border-top: 0 }
.lm-opacity-felt .lm-popover-label { margin: 0 }
.lagviser .lm-child { color: var(--ink-2) }
.lagviser .lm-children[hidden] { display: none }
.lagviser .swatch { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--pipe-fill) }
.lm-caret { flex: 0 0 auto; width: 16px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer }
.lm-name { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.lm-count { font-family: var(--font-num); font-variant-numeric: tabular-nums }
.lm-status { flex: 0 0 auto; font-size: 10px; font-family: var(--font-num); color: var(--muted) }
.lm-status.load { color: var(--accent-strong) }
.lm-status.warn { color: var(--amber) }
.lm-status.err { color: var(--red) }
.lm-gear {
  flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px;
  border: 0; border-radius: 4px; background: transparent; color: var(--faint); cursor: pointer;
  opacity: 0.4; transition: opacity var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
.lm-gear svg { width: 13px; height: 13px; stroke-width: 1.9 }
.lm-row:hover .lm-gear, .lm-gear:focus-visible { opacity: 0.85 }
.lm-gear:hover { opacity: 1; background: var(--surface-3); color: var(--ink) }
.lm-popover {
  position: fixed; z-index: 4200; min-width: 170px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-2);
}
.lm-popover-label { margin-bottom: 5px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.lm-opacity { display: flex; align-items: center; gap: 6px }
.lm-opacity input[type="range"] { flex: 1 1 auto; margin: 0; accent-color: var(--accent) }
.lm-opacity-val { flex: 0 0 auto; width: 34px; text-align: right; font-size: 10px; font-family: var(--font-num); color: var(--muted) }
#token-felt { margin-top: 6px }
#token-felt.mangler input { border-color: var(--amber) }

.inspektoer .kort-tom { margin: 0; color: var(--muted); font-size: 12px }
.kort-titel { display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
.kort-titel b { font-size: 15px; font-family: var(--font-num) }
.kort-titel .chip { height: 22px; padding: 0 8px; font-size: 11px }
.kort-art { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.kort-under { margin: 12px 0 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.kort-liste { list-style: none; margin: 0; padding: 0 }
.kort-liste li { display: flex; justify-content: space-between; align-items: center; min-height: 24px; font-size: 12px; font-family: var(--font-num) }
.kort-liste li.tom { color: var(--muted); font-family: var(--font-ui) }
.kort-note { margin: 6px 0 0; font-size: 11.5px; color: var(--amber) }
.kort-knapper { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px }
.advarsel { color: var(--red) !important }
button.link { border: 0; background: none; padding: 0; color: var(--accent-strong); cursor: pointer; font: inherit }
button.link:hover { text-decoration: underline }

.statusbar .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* ── dialog ───────────────────────────────────────────────────────────────── */
.dialog {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; width: min(560px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3);
}
.dialog::backdrop { background: rgba(26, 31, 28, .28) }
.dialog-form { padding: 18px 20px 16px }
.dialog-form h3 { margin: 0 0 12px; font-size: 15px }
.dialog-indhold { max-height: 60vh; overflow: auto }
.dialog-felt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; font-size: 12.5px; color: var(--muted) }
.dialog-felt input, .dialog-felt select { width: 240px }
.dialog-note { margin: 6px 0; font-size: 12px; color: var(--muted) }
.dialog-fejl { margin: 6px 0; font-size: 12px; color: var(--red) }
.dialog-liste { margin: 6px 0; padding-left: 18px; font-size: 12px; max-height: 180px; overflow: auto }
.dialog-tabel { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0 }
.dialog-tabel th, .dialog-tabel td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line-2) }
.dialog-knapper { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px }

/* ── brøndvalg i inspektøren ──────────────────────────────────────────────── */
.produkt { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 4px }
.produkt b { font-size: 12.5px; color: var(--ink) }
.produkt small { font-size: 11px; color: var(--muted); line-height: 1.4 }
.produkt.fejl { border-color: var(--amber) }
.kort-liste li small { margin-left: 6px }
/* ── kildernes indstillinger i lagtræet ───────────────────────────────────── */
.data-source-copy { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45 }
.data-actions { display: grid; gap: 6px; margin-top: 10px }
.data-details { margin-top: 8px; border-top: 1px solid var(--line-2) }
.data-details > summary {
  display: flex; align-items: center; gap: 6px; padding: 8px 1px 0; width: max-content;
  color: var(--accent-strong); font-size: 11px; font-weight: 600; cursor: pointer; list-style: none;
}
.data-details > summary::-webkit-details-marker { display: none }
.data-details > summary::before { content: "›"; color: var(--faint); font-size: 15px; line-height: 1; transition: transform var(--t-fast) ease }
.data-details[open] > summary::before { transform: rotate(90deg) }
.data-detail-body { display: grid; gap: 6px; margin-top: 8px; padding: 10px; border-radius: 6px; background: var(--surface-2) }
.data-detail-body label { color: var(--muted); font-size: 10.5px; font-weight: 650 }
.data-detail-body select { width: 100% }
.ler-dybde-raekke { display: grid; grid-template-columns: minmax(0, 1fr) 82px; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--line-2) }
.ler-dybde-brug, .ler-dybde-tal { display: flex; align-items: center; gap: 5px }
.ler-dybde-brug input { flex: 0 0 auto }
.ler-dybde-tal input { width: 64px; min-width: 0 }
.ler-dybde-antal { grid-column: 1 / -1; color: var(--muted); font-size: 10px }
.ler-dybde-raekke select { grid-column: 1 / -1 }
.ler-varme-bredde { display: grid; gap: 8px; min-width: 0; padding: 8px; border: 1px solid var(--line-2); border-radius: 6px }
.ler-varme-bredde legend { font-size: 11px; font-weight: 650 }
.ler-kilder { color: var(--muted); font-size: 10px; overflow-wrap: anywhere }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 }

/* Fjern-knap (×) på et DXF-underlag eller et af dets lag; diskret, rødlig ved hover. */
.lm-remove {
  flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 4px;
  background: transparent; color: var(--faint); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0;
  transition: opacity var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
.lm-row:hover .lm-remove, .lm-remove:focus-visible { opacity: 1 }
.lm-remove:hover { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red) }

/* ── kort og felter i egenskabsboksen (som Bassin Studio) ────────────────── */
.inspektoer .subgroup { background: var(--surface); box-shadow: var(--shadow-1); border-radius: var(--r-md) }
.inspektoer .subgroup + .subgroup { margin-top: 0 }
.inspektoer { display: flex; flex-direction: column; gap: 12px }
.subgroup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.subgroup-head h2 {
  position: relative; margin: 0; padding-left: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
}
.subgroup-head h2::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 11px; border-radius: 99px; background: var(--accent);
}
.subgroup-head .chip { height: 20px; padding: 0 8px; font-size: 10.5px }
.subgroup-body > * + * { margin-top: 10px }
.subgroup-body > .kort-raekke + .kort-raekke { margin-top: 2px }
.subgroup.ny { border-color: var(--accent-line) }

.felter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.felt { display: grid; gap: 4px; min-width: 0 }
.felt.fuld { grid-column: 1 / -1 }
.felt > span:first-child { color: var(--muted); font-size: 11px; font-weight: 600 }
.felt input, .felt select { width: 100%; min-width: 0 }
.felt input:disabled, .felt select:disabled { color: var(--ink-2); background: var(--surface-2) }
.input-wrap { position: relative; display: block }
.input-wrap input { padding-right: 30px }
.suffix { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 11px; pointer-events: none }
input::placeholder { color: var(--faint) }

.kort-hjaelp { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted) }
.tom-fane { display: grid; gap: 10px }
.tom-fane h2 { margin-bottom: 0 }
.tom-fane .kort-tom { margin: 0 }

.opbygning > summary { cursor: pointer; font-size: 11px; font-weight: 600; color: var(--muted) }
.opbygning[open] > summary { margin-bottom: 6px }

.foldbar > summary { cursor: pointer; list-style: none }
.foldbar > summary::-webkit-details-marker { display: none }
.foldbar > summary small { margin-left: auto; font-size: 11px; color: var(--muted) }
.foldbar > summary::after { content: '▸'; color: var(--muted) }
.foldbar[open] > summary::after { content: '▾' }
.foldbar:not([open]) > summary { border-bottom: 0 }
.opbygning summary { cursor: pointer; list-style: none }
.opbygning summary::-webkit-details-marker { display: none }
.opbygning summary::before { content: '▸ ' }
.opbygning[open] summary::before { content: '▾ ' }
.opbygning .kort-liste li span:first-child { font-family: var(--font-ui); color: var(--muted) }

/* ── dokkene: egenskaber til venstre, data og kontrol til højre ───────────── */
.egenskaber-dok { gap: 14px }
.egenskaber-dok > .inspektoer { flex: 0 0 auto }
.oversigt .kort-liste li > span:first-child { font-family: var(--font-ui); color: var(--muted) }
.ler-egenskaber .kort-liste li > span:first-child { color: var(--muted); font-family: var(--font-ui); margin-right: 8px }
.ler-egenskaber .kort-liste li > span:last-child { text-align: right; overflow-wrap: anywhere }
.ler-egenskaber .kort-tom { margin: 6px 0 0; color: var(--muted); font-size: 11px }
body.results-collapsed .dock-right .inspector-tabs { display: none }
.venstre-faner, .hoejre-faner { justify-content: flex-start; padding-left: 10px }

.maengder { gap: 12px }
.maengder > * { flex: 0 0 auto }
.maengder .subgroup { background: var(--surface); box-shadow: var(--shadow-1); border-radius: var(--r-md) }
.maengder .subgroup + .subgroup { margin-top: 0 }
.maengder .kort-under:first-child { margin-top: 0 }
.maengder .kort-liste li { gap: 10px; padding: 3px 0; line-height: 1.35 }
.maengder .kort-liste li > span:first-child { min-width: 0; text-align: left; font-family: var(--font-ui); color: var(--ink-2) }
.maengder .kort-liste li > span:last-child { flex: 0 0 auto; white-space: nowrap; color: var(--ink) }
/* Kontrollen: navnet som link og bemærkningen under, så lange tekster kan bryde. */
.maengder .kontrol li { display: grid; gap: 1px; justify-content: stretch }
.maengder .kontrol li > button.link { justify-self: start; text-align: left; font-family: var(--font-ui); font-weight: 600 }
.maengder .kontrol li > span:last-child { white-space: normal; text-align: left; font-family: var(--font-ui); font-size: 11.5px; color: var(--muted) }
.maengder .kort-tom { margin: 0; color: var(--muted); font-size: 12px }
.maengder .kort-knapper { margin-top: 0 }
.stat.advarsel-stat .value { color: var(--amber) }
.subgroup-head .advarsel-chip { background: color-mix(in srgb, var(--amber) 16%, transparent); border-color: transparent; color: var(--amber) }

.inspektoer .tilbage { display: block; margin-bottom: 8px; font-size: 11.5px }
.liste-note { margin: 8px 0 0; font-size: 11.5px; color: var(--muted) }
.kort-liste li > span { text-align: right }

/* ── TV-inspektion (analysepanelet, kortet i egenskabsboksen og tippet i planen) ── */
.tv-analyse {
  position: absolute; z-index: 850; top: 12px; right: 12px; bottom: 12px; width: min(760px, calc(100% - 72px));
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); box-shadow: var(--shadow-2);
}
.tv-analyse-hoved {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 6px 0 14px;
  border-bottom: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-md) var(--r-md) 0 0;
}
.tv-analyse-hoved b { font-size: 13px }
.tv-analyse-hoved .profil-status { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tv-analyse-hoved .icon-btn { height: 26px; min-width: 28px }
.tv-oversigt { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 12px; padding: 12px; align-items: start }
.tv-kol { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.tv-kol .subgroup { margin: 0; background: var(--surface); box-shadow: var(--shadow-1); border-radius: var(--r-md) }
.tv-oversigt .kort-liste li { gap: 10px; padding: 2px 0 }
.tv-oversigt .kort-liste li > span:first-child { font-family: var(--font-ui); color: var(--muted) }
@media (max-width: 1100px) { .tv-oversigt { grid-template-columns: minmax(0, 1fr) } }
.tv-kort .tv-stribe { margin-bottom: 6px }
.tv-kort .kort-liste li > span:first-child { font-family: var(--font-ui); color: var(--muted) }
.tv-broend li { gap: 8px }
.tv-broend li > span { display: inline-flex; align-items: center; gap: 6px }
.subgroup-head .tv-pille { margin-left: auto }
.tv-hoved { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12px }
.tv-hoved b { font-size: 13px; min-width: 0; overflow-wrap: anywhere }
.tv-hoved span { flex: 1 1 100%; color: var(--muted); font-family: var(--font-num); font-size: 11px }
.tv-hoved .link { margin-left: auto; font-size: 11.5px }
.tv-segment { display: flex; margin-bottom: 10px }
.tv-segment button { flex: 1 1 0; padding: 0 6px }
.tv-bar { display: flex; height: 10px; margin-bottom: 8px; border-radius: 3px; overflow: hidden; background: var(--surface-3) }
.tv-bar span.off { opacity: .2 }
.tv-klasser { display: grid; gap: 1px }
.tv-klasse {
  display: grid; grid-template-columns: 12px 1fr auto 28px; align-items: center; gap: 8px; min-height: 26px;
  padding: 0 6px; border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ink-2); text-align: left;
}
.tv-klasse:hover { background: var(--surface-2) }
.tv-klasse > span:nth-child(n+3) { font-family: var(--font-num); text-align: right; color: var(--muted) }
.tv-klasse.off { color: var(--faint); text-decoration: line-through }
.tv-klasse.off .swatch { opacity: .3 }
.tv-oversigt .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px }
.tv-oversigt .kort-hjaelp { margin-top: 8px }
.tv-koder { display: flex; flex-wrap: wrap; align-items: center; gap: 5px }
.tv-kode { height: 24px; padding: 0 9px; cursor: pointer; font-family: var(--font-num); font-weight: 600; color: var(--faint) }
.tv-kode small { color: inherit; opacity: .75; font-weight: 500 }
.tv-kode.paa { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong) }
.tv-straekninger { display: grid; gap: 2px; margin-top: 8px }
.tv-straekning {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 8px; padding: 5px 6px;
  border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer; font: inherit; text-align: left;
}
.tv-straekning:hover { background: var(--surface-2) }
.tv-straekning.valgt { background: var(--plan-valgt-soft) }
.tv-navn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-num); font-size: 11.5px; color: var(--ink) }
.tv-pille { min-width: 34px; padding: 1px 6px; border-radius: 999px; font-family: var(--font-num); font-size: 11px; font-weight: 700; text-align: center; color: var(--surface) }
.tv-stribe { grid-column: 1 / -1; display: block; width: 100%; height: 8px }
.tv-stribe.stor { height: 16px; margin-bottom: 8px }
.tv-obsliste { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto }
.tv-obs {
  display: grid; grid-template-columns: 10px 64px 34px 1fr; align-items: center; gap: 6px; min-height: 24px;
  padding: 0 4px; border-radius: var(--r-sm); cursor: pointer; font-size: 11.5px;
}
.tv-obs:hover { background: var(--surface-2) }
.tv-obs.valgt { background: var(--plan-valgt-soft) }
.tv-obs.dempet { opacity: .45 }
.tv-obs-st, .tv-obs-kode { font-family: var(--font-num) }
.tv-obs-kode { font-weight: 700 }
.tv-obs-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted) }
.tv-ukoblede .kort-liste { max-height: 220px; overflow-y: auto }
.tv-tip {
  position: absolute; z-index: 650; max-width: 280px; padding: 6px 8px; pointer-events: none;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-2);
  font-size: 11.5px; line-height: 1.4; color: var(--ink-2);
}
.tv-tip b { color: var(--ink) }
.tv-tip span { color: var(--muted) }

/* ── under et andet arbejdsrum ────────────────────────────────────────────── */
/* Når Bassin eller Flood er aktivt, står Kloaks plan nedtonet og grå under det. */
#plan-canvas { transition: opacity var(--t-fast) ease, filter var(--t-fast) ease }
body[data-aktivt-arbejdsrum]:not([data-aktivt-arbejdsrum="kloak"]) #plan-canvas { opacity: .35; filter: grayscale(1) }