/* styles.css — Bassin Studios UI-stylesheet.
   Designsprog: «præcisionsinstrument til vand» — roligt papir, skarp tusch, petroleums-
   blågrøn aktion (vand + dybde) og sage som terræn/positiv-semantik. Tal sættes i mono
   (Geist Mono), så aflæsninger føles som et instrument; UI i Hanken Grotesk (nordisk).
   Skrifter er vendored lokalt (/vendor/fonts) — ingen CDN, så app'en virker offline/luftgab
   og CSP'en kan holde font-src på 'self'. Udtrukket fra index.html så den caches separat. */

  /* ── Skrifter (vendored, woff2) ─────────────────────────────────────────── */
  @font-face {
    font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("vendor/fonts/hanken-grotesk-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("vendor/fonts/hanken-grotesk-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("vendor/fonts/hanken-grotesk-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("vendor/fonts/hanken-grotesk-latin-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Hanken Grotesk"; font-style: normal; font-weight: 800; font-display: swap;
    src: url("vendor/fonts/hanken-grotesk-latin-800.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext (æfå-ud-over-Latin1 i importerede DXF-/GEUS-navne) */
  @font-face {
    font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("vendor/fonts/hanken-grotesk-latinext-400.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("vendor/fonts/hanken-grotesk-latinext-600.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("vendor/fonts/hanken-grotesk-latinext-700.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("vendor/fonts/geist-mono-latin-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("vendor/fonts/geist-mono-latin-500.woff2") format("woff2");
  }
  @font-face {
    font-family: "Geist Mono"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("vendor/fonts/geist-mono-latin-600.woff2") format("woff2");
  }

  :root {
    /* Flader — køligt-varmt papir, skarpere end før */
    --bg: #e7e9e2;
    --surface: #fcfcfa;
    --surface-2: #f1f1ea;
    --surface-3: #e9e9e0;
    --panel: var(--surface);    /* bagudkompatible aliaser */
    --panel-2: var(--surface-2);
    /* Tusch */
    --ink: #1a1f1c;
    --ink-2: #3b413c;
    --text: var(--ink);
    --muted: #6e7269;
    --faint: #9a9d92;
    /* Streger */
    --line: #d5d5cb;
    --line-2: #e5e4da;
    /* Accent — petroleums-blågrøn (vand + dybde); forener brandets blå→grøn-gradient */
    --accent: #1d6f77;
    --accent-strong: #155a61;
    --accent-deep: #0e4449;
    --accent-soft: rgba(29, 111, 119, 0.10);
    --accent-tint: rgba(29, 111, 119, 0.06);
    --accent-line: rgba(29, 111, 119, 0.30);
    --green: var(--accent);     /* legacy-alias → accenten cascader app-bredt */
    /* Semantik */
    --positive: #5b8466;        /* sage — terræn / succes */
    --blue: #3f86b4;
    --blue-soft: rgba(80, 150, 190, 0.22);
    --amber: #a9752a;
    --red: #b1564a;
    --cad: #7d5aa6;
    /* Skrift */
    --font-ui: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-num: "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", monospace;
    /* Elevation — tonet mod papiret, lagdelt */
    --shadow-1: 0 1px 2px rgba(26, 31, 28, 0.06), 0 1px 1px rgba(26, 31, 28, 0.04);
    --shadow-2: 0 6px 18px rgba(26, 31, 28, 0.10), 0 1px 2px rgba(26, 31, 28, 0.05);
    --shadow-3: 0 18px 44px rgba(20, 24, 20, 0.20), 0 4px 12px rgba(20, 24, 20, 0.10);
    --shadow: var(--shadow-2);  /* bagudkompatibelt alias */
    /* Radier */
    --r-sm: 5px;
    --r-md: 7px;
    --r-lg: 10px;
  }

  * { box-sizing: border-box; }

  /* `hidden` er en tilstand, ikke blot et styling-hint. Komponentregler som
     display:grid/inline-flex må ikke gøre skjulte handlinger synlige igen. */
  [hidden] { display: none !important; }

  html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    display: grid;
    grid-template-columns: 1fr 540px;
    grid-template-rows: 48px 1fr;
  }

  button, input, select {
    font: inherit;
    color: inherit;
  }

  /* Tal-aflæsninger i mono med ægte tabular-figurer (instrument-følelse). */
  .stat .value, .hud, .legend-row, .brand-version, .lm-count, .three-status,
  .curve-plot-meta, .curve-tooltip, .draw-hint, .shortcuts-list dt, .profile-meta,
  .geology-popup .gp-row, input[type="number"], input[type="text"][readonly], .sideslope-popup .sideslope-input {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "ss01" 1;
  }

  ::selection { background: var(--accent-soft); }

  /* Tynde, tonede scrollbars i de scrollende paneler. */
  .panel, .inspector-body, .lm-body, .three-layers, .layer-list, .panel * {
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .inspector-body::-webkit-scrollbar, .panel::-webkit-scrollbar,
  .lm-body::-webkit-scrollbar, .three-layers::-webkit-scrollbar { width: 10px; height: 10px; }
  .inspector-body::-webkit-scrollbar-thumb, .panel::-webkit-scrollbar-thumb,
  .lm-body::-webkit-scrollbar-thumb, .three-layers::-webkit-scrollbar-thumb {
    background: var(--line); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box;
  }
  .inspector-body::-webkit-scrollbar-thumb:hover, .panel::-webkit-scrollbar-thumb:hover {
    background: var(--faint); background-clip: padding-box;
  }
  .inspector-body::-webkit-scrollbar-track, .panel::-webkit-scrollbar-track { background: transparent; }

  /* Reservér scrollbar-sporet permanent i de scrollende dok-paneler, så indholdet ikke
     hopper et hak indad når et scrollbar dukker op (fx når et projekt åbnes og fylder doken). */
  .inspector-body, .dock-body, .lm-body, .panel {
    scrollbar-gutter: stable;
  }

  .topbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(252, 252, 250, 0.86);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 1px 0 rgba(26, 31, 28, 0.02);
    z-index: 5;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 156px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -0.02em;
  }

  .brand-version {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 7px;
    letter-spacing: 0;
  }

  /* Topografisk brand-mærke: koncentriske højdekurver om et bassin set ovenfra. */
  .brand-mark {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 56%, var(--accent-strong), var(--accent-deep));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--shadow-1);
  }
  .brand-mark::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: repeating-radial-gradient(circle at 50% 56%,
      transparent 0 2.4px, rgba(233, 244, 240, 0.26) 2.4px 3px);
  }
  .brand-mark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 56%;
    width: 4px;
    height: 4px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(240, 247, 244, 0.95);
  }

  .toolbar {
    display: flex;
    gap: 5px;
    padding-left: 4px;
    border-left: 1px solid var(--line-2);
  }

  /* Segmenterede kontroller: nedsænket bane + løftet «tap» (hvid flade, accent-tekst).
     Roligere og mere præcist end massive farveflader. */
  .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 rgba(26, 31, 28, 0.05);
  }

  .mode-btn {
    min-width: 66px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }

  .mode-btn:hover { color: var(--ink); }

  .mode-btn.active {
    background: var(--surface);
    color: var(--accent-strong);
    box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(26, 31, 28, 0.04);
  }

  .segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-3);
    box-shadow: inset 0 1px 2px rgba(26, 31, 28, 0.05);
  }

  .segmented button {
    min-height: 30px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }

  .segmented button:hover { color: var(--ink); }

  .segmented button.active {
    background: var(--surface);
    color: var(--accent-strong);
    box-shadow: var(--shadow-1);
  }

  .icon-btn {
    height: 32px;
    min-width: 34px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease,
                box-shadow 0.15s ease, transform 0.05s ease;
  }

  .icon-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.85;
  }

  .icon-btn:hover {
    border-color: var(--accent-line);
    background: var(--accent-tint);
    color: var(--accent-strong);
  }
  .icon-btn:active { transform: translateY(0.5px); }
  .icon-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-1);
  }

  .status {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
  }

  .chip {
    max-width: 240px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
  }

  .chip strong {
    color: var(--ink-2);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .map-wrap {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #dfe5e2;
  }

  #map {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
  }

  #map[hidden] { display: none; }

  /* Hover-affordances: håndtag kan trækkes (move), kanter kan klikkes (pointer). */
  #map.hover-handle:not(.drag):not(.draw) { cursor: move; }
  #map.hover-edge:not(.drag):not(.draw):not(.hover-handle) { cursor: pointer; }
  #map.draw { cursor: crosshair; }
  #map.drag { cursor: grabbing; }

  .three-view {
    position: absolute;
    inset: 0;
    background: #e7ebe7;
  }

  .three-view[hidden] { display: none; }

  #threeCanvas {
    width: 100%;
    height: 100%;
    display: block;
  }

  .three-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(231, 235, 231, 0.76);
    backdrop-filter: blur(2px);
  }

  .three-loading[hidden] { display: none; }

  .three-loading-card {
    width: min(360px, calc(100% - 24px));
    padding: 18px 20px 20px;
    border: 1px solid var(--line-2);
    border-radius: 9px;
    background: rgba(251, 251, 248, 0.97);
    box-shadow: var(--shadow);
  }

  .three-loading-title {
    color: var(--ink);
    font-size: 14px;
    font-weight: 750;
  }

  .three-loading-text {
    min-height: 18px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  .three-loading-track {
    height: 6px;
    margin-top: 13px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--line-2);
  }

  .three-loading-bar {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transform: scaleX(var(--three-progress, 0));
    transform-origin: left center;
    transition: transform 120ms ease-out;
  }

  .three-loading-track.indeterminate .three-loading-bar {
    width: 42%;
    transform: translateX(-110%);
    animation: three-loading-sweep 1.05s ease-in-out infinite;
  }

  @keyframes three-loading-sweep {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(340%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .three-loading-track.indeterminate .three-loading-bar {
      width: 100%;
      transform: scaleX(0.45);
      transform-origin: left center;
      animation: none;
    }
  }

  .three-toolbar,
  .three-layers,
  .three-status {
    position: absolute;
    z-index: 3;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    background: rgba(251, 251, 248, 0.94);
    box-shadow: var(--shadow);
  }

  .three-toolbar {
    left: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px;
  }

  .three-toolbar .segmented {
    height: 30px;
    grid-template-columns: repeat(4, 1fr);
    min-width: 178px;
  }

  .three-toolbar .segmented button {
    min-width: 38px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
  }

  .three-toolbar .segmented button.active {
    background: var(--surface);
    color: var(--accent-strong);
    box-shadow: var(--shadow-1);
  }

  .three-layers {
    right: 12px;
    top: 12px;
    width: min(320px, calc(100vw - 84px));
    max-height: min(520px, calc(100vh - 126px));
    overflow: auto;
    padding: 8px;
  }

  .three-layer {
    height: 28px;
    display: grid;
    grid-template-columns: 18px 14px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 3px 4px;
    border-radius: 4px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 650;
  }

  .three-layer:hover { background: rgba(88, 127, 100, 0.08); }

  .three-layer input {
    width: 14px;
    height: 14px;
    margin: 0;
  }

  .three-layer span:nth-child(3) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .three-layer b {
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
  }

  .three-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(36, 40, 38, 0.22);
  }

  .three-status {
    left: 12px;
    bottom: 12px;
    padding: 8px 10px;
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }

  .map-wrap.three-mode .hud,
  .map-wrap.three-mode .legend,
  .map-wrap.three-mode .osm-attribution,
  .map-wrap.three-mode .bottom-drawer,
  .map-wrap.three-mode .profile-dock,
  .map-wrap.three-mode .draw-hint,
  .map-wrap.three-mode .map-empty {
    display: none;
  }

  .hud {
    position: absolute;
    left: 12px;
    bottom: 70px;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    background: rgba(251, 251, 248, 0.92);
    box-shadow: var(--shadow);
    color: var(--muted);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
  }

  .hud b { color: var(--ink); font-weight: 600; }

  .legend {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 176px;
    padding: 9px 10px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    background: rgba(251, 251, 248, 0.92);
    box-shadow: var(--shadow);
    color: var(--muted);
    pointer-events: none;
    font-size: 11px;
  }

  .legend-bar {
    height: 10px;
    margin: 5px 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #4c82aa, #79aeb7, #97b56f, #d0b15f, #b77a54);
  }

  .legend-row {
    display: flex;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
  }

  .osm-attribution {
    position: absolute;
    right: 12px;
    bottom: 70px;
    padding: 4px 7px;
    border-radius: 4px;
    background: rgba(251, 251, 248, 0.88);
    color: var(--muted);
    font-size: 10px;
    display: none;
    pointer-events: none;
  }

  .osm-attribution.visible {
    display: block;
  }

  /* Matrikel-attribution forskydes op, så den ikke overlapper OSM's hvis begge er tændt. */
  .osm-attribution.matrikel-attr {
    bottom: 92px;
  }

  .geology-popup {
    position: absolute;
    z-index: 6;
    min-width: 220px;
    max-width: 285px;
    padding: 9px 11px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(251, 251, 248, 0.98);
    box-shadow: var(--shadow);
    font-size: 11.5px;
    color: var(--ink, #242826);
  }

  .geology-popup .gp-title {
    font-weight: 750;
    font-size: 12.5px;
    margin: 0 18px 5px 0;
  }

  .geology-popup .gp-row {
    color: var(--muted);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
  }

  .geology-popup .gp-gw {
    color: #2b7fb8;
    font-weight: 650;
  }

  .geology-popup .gp-muted {
    font-style: italic;
    opacity: 0.8;
  }

  .geology-popup .gp-link {
    display: inline-block;
    margin-top: 7px;
    color: var(--green);
    font-weight: 700;
    text-decoration: none;
  }

  .geology-popup .gp-link:hover {
    text-decoration: underline;
  }

  .geology-popup .gp-profile {
    margin-top: 9px;
    padding-top: 7px;
    border-top: 1px solid var(--line);
  }

  .geology-popup .gp-profile-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    color: var(--ink, #242826);
    font-size: 10.5px;
    font-weight: 750;
  }

  .geology-popup .gp-profile-depth {
    color: var(--muted);
    font-weight: 550;
    font-variant-numeric: tabular-nums;
  }

  .geology-popup .gp-profile-body {
    position: relative;
    display: grid;
    grid-template-columns: 34px 28px;
    justify-content: center;
    gap: 7px;
    height: 112px;
  }

  .geology-popup .gp-profile-scale {
    position: relative;
    color: var(--faint);
    font-size: 9px;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .geology-popup .gp-profile-scale span {
    position: absolute;
    right: 0;
  }

  .geology-popup .gp-profile-scale span:first-child { top: -1px; }
  .geology-popup .gp-profile-scale span:last-child { bottom: -1px; }

  .geology-popup .gp-profile-column {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid #77756f;
    background: #ece8df;
  }

  .geology-popup .gp-profile-layer {
    position: absolute;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    min-height: 2px;
    border-bottom: 1px solid rgba(251, 251, 248, 0.9);
    cursor: help;
  }

  .geology-popup .gp-profile-layer:hover,
  .geology-popup .gp-profile-layer:focus-visible {
    z-index: 1;
    outline: 2px solid #2b7fb8;
    outline-offset: -2px;
    filter: brightness(1.08);
  }

  .geology-popup .gp-profile-gw {
    position: absolute;
    z-index: 2;
    left: -6px;
    box-sizing: border-box;
    width: 40px;
    height: 9px;
    border-top: 2px solid #2b7fb8;
    transform: translateY(-1px);
    cursor: help;
  }

  .geology-popup .gp-profile-gw::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -1px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #2b7fb8;
  }

  .geology-popup .gp-profile-gw::after {
    content: "GVS";
    position: absolute;
    top: -7px;
    left: 42px;
    color: #2b7fb8;
    font-size: 8px;
    font-weight: 750;
    line-height: 1;
  }

  .geology-popup .gp-profile-gw:hover,
  .geology-popup .gp-profile-gw:focus-visible {
    border-top-width: 3px;
    outline: none;
    filter: brightness(0.9);
  }

  .geology-popup .gp-layer-tooltip {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    width: 132px;
    padding: 7px 8px;
    border: 1px solid #dedbd3;
    border-radius: 5px;
    background: #fff;
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.35;
    box-shadow: 0 2px 7px rgba(36, 40, 38, 0.07);
    pointer-events: none;
  }

  .geology-popup .gp-layer-tooltip strong,
  .geology-popup .gp-layer-tooltip span {
    display: block;
    overflow-wrap: anywhere;
  }

  .geology-popup .gp-layer-tooltip strong {
    margin-bottom: 3px;
    color: var(--ink, #242826);
    font-size: 10.5px;
  }

  .geology-popup .gp-layer-tooltip span:empty { display: none; }

  .geology-popup-close {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }

  .geology-popup-close:hover {
    background: rgba(0, 0, 0, 0.06);
  }

  .sideslope-popup .sideslope-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink, #242826);
    font-weight: 650;
    margin: 2px 0 5px;
  }

  .sideslope-popup .sideslope-input {
    width: 64px;
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 5px;
    font: inherit;
    font-variant-numeric: tabular-nums;
  }

  .sideslope-popup .sideslope-reset {
    margin-top: 7px;
    padding: 4px 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.03);
    color: var(--ink, #242826);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
  }

  .sideslope-popup .sideslope-reset:disabled {
    opacity: 0.45;
    cursor: default;
  }

  .sideslope-popup .sideslope-reset:not(:disabled):hover {
    background: rgba(0, 0, 0, 0.07);
  }

  .profile-dock {
    position: absolute;
    left: 172px;
    right: 196px;
    bottom: 12px;
    min-width: 420px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(251, 251, 248, 0.96);
    box-shadow: var(--shadow);
    overflow: hidden;
    z-index: 3;
  }

  .profile-dock-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
  }

  .profile-dock-body {
    display: block;
  }

  /* Profilets header (titel + handlingsknapper + fold-knap) bor i bottom-drawer-headeren.
     Når skuffen er foldet ind vises kun titel + fold-pilen; knapperne dukker op ved fold ud. */
  .bottom-drawer-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .bottom-drawer-actions .command {
    width: auto;
    min-height: 28px;
    padding: 0 10px;
  }

  .bottom-drawer-actions .icon-btn {
    height: 28px;
    min-width: 30px;
  }

  .panel {
    min-height: 0;
    overflow: auto;
    border-left: 1px solid var(--line);
    background: var(--panel);
  }

  .panel-inner {
    padding: 16px;
  }

  .section {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-2);
  }

  .section:first-child { padding-top: 0; }
  .section:last-child { border-bottom: 0; }

  h2 {
    margin: 0 0 10px;
    color: var(--ink-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.085em;
    text-transform: uppercase;
  }

  /* Foldbar resultat-sektion (klik på overskriften). */
  .section-head {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
  }
  .section-head h2 {
    flex: 1;
    margin-bottom: 10px;
  }
  .section-head .section-toggle {
    flex: none;
  }
  .section-head .section-toggle svg {
    transition: transform 0.15s ease;
  }
  .section.collapsed .section-head h2 {
    margin-bottom: 0;
  }
  .section.collapsed .section-head .section-toggle svg {
    transform: rotate(-90deg);
  }
  .section.collapsed .stats {
    display: none;
  }

  .file-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
  }

  /* Lange eksporthandlinger får deres egen række i det smalle inspektørpanel. */
  .file-grid > .command.full {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 6px 10px;
    white-space: normal;
  }

  .command {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease,
                box-shadow 0.15s ease, transform 0.05s ease;
  }

  .command:hover {
    border-color: var(--accent-line);
    background: var(--accent-tint);
    color: var(--accent-strong);
  }
  .command:active { transform: translateY(0.5px); }
  .command:disabled {
    opacity: 0.5;
    cursor: default;
  }

  .command:disabled:hover {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
    transform: none;
  }

  .command.primary {
    border-color: var(--accent);
    background: linear-gradient(180deg, #2b818a, var(--accent) 60%, var(--accent-strong));
    color: #fff;
    font-weight: 650;
    text-shadow: 0 1px 0 rgba(8, 40, 44, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--shadow-1);
  }

  .command.primary:hover {
    border-color: var(--accent-strong);
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
    color: #fff;
    box-shadow: 0 2px 12px rgba(21, 90, 97, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .command.primary:disabled:hover {
    background: linear-gradient(180deg, #2b818a, var(--accent) 60%, var(--accent-strong));
    border-color: var(--accent);
  }

  .command.danger:hover {
    border-color: rgba(177, 86, 74, 0.5);
    background: rgba(177, 86, 74, 0.08);
    color: var(--red);
  }

  .command svg {
    width: 16px;
    height: 16px;
  }

  .top-calc {
    width: auto;
    min-height: 32px;
    padding: 0 14px;
    font-weight: 700;
  }

  .field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .field {
    display: grid;
    gap: 4px;
  }

  .field.full { grid-column: 1 / -1; }
  .field.is-disabled { opacity: 0.45; }

  .input-wrap {
    position: relative;
  }

  .input-wrap input {
    padding-right: 42px;
  }

  .suffix {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 11px;
    pointer-events: none;
  }

  .suffix.long {
    right: 8px;
  }

  label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.005em;
  }

  input[type="number"], input[type="text"], select {
    width: 100%;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    padding: 0 9px;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
  }

  input[type="number"]:hover, input[type="text"]:hover, select:hover { border-color: var(--faint); }

  input[type="number"]:focus, input[type="text"]:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  /* Egne select-pile (rolig muted chevron) i stedet for OS-standarden. */
  select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7269' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 14px;
    cursor: pointer;
  }

  .template-wrap {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #101513;
    overflow: hidden;
  }

  #templateSvg {
    width: 100%;
    height: 220px;
    display: block;
  }

  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .check-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    margin: 10px 0;
  }

  .check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
  }

  .check-row input {
    width: 15px;
    height: 15px;
    accent-color: var(--green);
  }

  .calc-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
  }

  /* Tooltip (ui_guidance.js): ét delegeret system for [data-tip] — hover + tastatur-fokus. */
  .tooltip {
    position: fixed;
    z-index: 4000;
    max-width: 300px;
    padding: 6px 9px;
    border-radius: var(--r-sm);
    background: #202622;
    color: #f2f3ee;
    font-size: 11.5px;
    line-height: 1.45;
    font-weight: 500;
    box-shadow: var(--shadow-2);
    pointer-events: none;
  }

  .tooltip kbd {
    margin-left: 2px;
    padding: 1px 5px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    font-family: var(--font-num);
    font-size: 10.5px;
  }

  /* Auto-beregnings-toggle under Beregn-rækken: diskret, sekundær præference. */
  .auto-calc-row {
    margin: -4px 0 10px;
    color: var(--muted);
    font-weight: 500;
  }

  .calc-status {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
  }

  /* Tilstands-prik: neutral = intet aktuelt resultat, orange puls = arbejder, grøn = færdig. */
  .calc-status::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--muted);
    box-shadow: 0 0 0 3px rgba(95, 108, 116, 0.12);
  }
  .calc-status.dirty::before {
    background: var(--muted);
    box-shadow: 0 0 0 3px rgba(95, 108, 116, 0.12);
  }
  .calc-status.complete::before {
    background: var(--positive);
    box-shadow: 0 0 0 3px rgba(91, 132, 102, 0.14);
  }
  .calc-status.busy::before {
    background: var(--amber);
    box-shadow: 0 0 0 3px rgba(190, 132, 38, 0.22);
    animation: statuspulse 1.1s ease-in-out infinite;
  }
  @keyframes statuspulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  .calc-status.dirty {
    border-color: rgba(190, 132, 38, 0.34);
    background: #fff8e9;
    color: #66502a;
  }

  .calc-status.busy {
    border-color: rgba(63, 134, 180, 0.28);
    background: #eef7fb;
    color: #245d7b;
  }

  .stat {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--line-2);
    border-radius: 7px;
    background: var(--surface);
    box-shadow: var(--shadow-1);
  }

  .stat.wide { grid-column: 1 / -1; }
  .stat .name {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stat .value {
    margin-top: 5px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
  }

  .stat .unit {
    color: var(--faint);
    font-size: 11px;
    font-weight: 500;
  }

  .warnings {
    display: grid;
    gap: 6px;
    margin-top: 10px;
  }

  .result-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin: 10px 0;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-3);
    box-shadow: inset 0 1px 2px rgba(26, 31, 28, 0.05);
  }

  .result-tabs button {
    min-height: 30px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }

  .result-tabs button:hover { color: var(--ink); }

  .result-tabs button.active {
    background: var(--surface);
    color: var(--accent-strong);
    box-shadow: var(--shadow-1);
  }

  .result-panel { display: none; }
  .result-panel.active { display: block; }

  .result-curves {
    display: grid;
    gap: 10px;
  }

  .curve-plot {
    padding: 9px 10px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    background: var(--panel-2);
  }

  .curve-plot-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
  }

  .curve-plot-title {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .curve-plot-meta {
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  .result-curve-svg {
    width: 100%;
    height: 210px;
    display: block;
    background: #fbfbf8;
    cursor: crosshair;
  }

  .curve-tooltip {
    position: fixed;
    z-index: 30;
    pointer-events: none;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(251, 251, 248, 0.97);
    box-shadow: var(--shadow);
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .curve-tooltip .ct-kote {
    font-weight: 750;
    color: var(--ink, #242826);
    margin-bottom: 2px;
  }

  .curve-tooltip .ct-row.strong {
    color: var(--ink, #242826);
    font-weight: 650;
  }

  .curve-empty {
    padding: 22px 10px;
    border: 1px dashed var(--line-2);
    border-radius: 6px;
    color: var(--muted);
    background: var(--panel-2);
    font-size: 12px;
    text-align: center;
  }

  .profile-wrap {
    border: 0;
    border-radius: 0;
    background: var(--panel-2);
    overflow: hidden;
  }

  .profile-mode-toggle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 4px;
    border-bottom: 1px solid var(--line-2);
    background: var(--surface-2);
  }

  .profile-mode-toggle button {
    min-height: 28px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }

  .profile-mode-toggle button:hover { color: var(--ink); }

  .profile-mode-toggle button.active {
    background: var(--surface);
    color: var(--accent-strong);
    box-shadow: var(--shadow-1);
  }

  #profileSvg {
    width: 100%;
    height: 190px;
    display: block;
    background: #fbfbf8;
  }

  .profile-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    border-top: 1px solid var(--line-2);
    color: var(--muted);
    font-size: 11px;
  }

  .profile-meta strong {
    color: var(--ink);
    font-weight: 650;
  }

  .warning {
    padding: 8px 9px;
    border-left: 3px solid var(--amber);
    background: #fff8e9;
    color: #66502a;
    border-radius: 4px;
    font-size: 12px;
  }

  .layer-list {
    display: grid;
    gap: 6px;
    max-height: 130px;
    overflow: auto;
  }

  .layer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 5px;
    background: var(--panel-2);
    color: var(--muted);
    font-size: 12px;
  }

  .swatch {
    width: 10px;
    height: 10px;
    border-radius: 99px;
    background: var(--cad);
    flex: 0 0 auto;
  }

  /* Lagviser — kort docket nederst i Data-fanen (Bentley References / SCALGO-stil). */
  .layer-manager {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
  }

  .lm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px 9px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
  }

  .lm-body {
    padding: 6px;
    max-height: 44vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .lm-group { display: flex; flex-direction: column; }

  .lm-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 5px;
    font-size: 12px;
    color: var(--ink);
  }
  .lm-row:hover { background: var(--panel-2); }
  .lm-child { padding-left: 26px; color: #50534d; }

  .lm-grouphead { font-weight: 600; }
  .lm-groupname { cursor: pointer; }

  .lm-eye {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--ink);
    border-radius: 5px;
    cursor: pointer;
  }
  .lm-eye svg { width: 15px; height: 15px; }
  .lm-eye.off { color: var(--muted); opacity: 0.5; }
  .lm-eye:hover { background: rgba(0, 0, 0, 0.05); }

  .lm-caret {
    width: 16px;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    cursor: pointer;
    padding: 0;
  }

  .lm-name {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .lm-count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  /* Fjern-knap (×) på en lag-/fil-række i lagviseren — diskret, rødlig ved hover. */
  .lm-remove {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--faint);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
  }
  .lm-row:hover .lm-remove { opacity: 1; }
  .lm-remove:hover { background: rgba(177, 86, 74, 0.14); color: var(--red); }
  .lm-remove:focus-visible { opacity: 1; }

  /* Tandhjul (⚙) pr. lag — åbner opacitet i en popover. Subtilt: træder frem ved hover/fokus. */
  .lm-gear {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    opacity: 0.4; /* svagt synligt i hvile (SCALGO-stil) — fuldt ved hover/fokus */
    transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
  }
  .lm-gear svg { width: 13px; height: 13px; stroke-width: 1.9; }
  .lm-row:hover .lm-gear,
  .lm-grouphead:hover .lm-gear { opacity: 0.85; }
  .lm-gear:hover { opacity: 1; background: var(--panel-2); color: var(--ink); }
  .lm-gear:focus-visible { opacity: 1; }

  /* Opacitet-popover (SCALGO-stil): lille svævende kort med slideren. */
  .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;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
  }
  .lm-popover .lm-opacity { padding: 0; opacity: 1; }
  .lm-popover .lm-opacity input[type="range"] { flex: 1 1 auto; }
  .lm-popover .lm-opacity-val { opacity: 1; }

  .lm-empty {
    padding: 10px 8px;
    font-size: 12px;
    color: var(--muted);
  }

  /* Opacitet-slider — bevidst diskret: tonet ned, tynd og muted; lyser op og
     viser %-værdien først ved hover/fokus. Vises kun for tændte lag. */
  .lm-opacity {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px 5px 30px;
    opacity: 0.5;
    transition: opacity 0.12s ease;
  }
  .lm-opacity:hover, .lm-opacity:focus-within { opacity: 1; }
  .lm-opacity-child { padding-left: 34px; }

  .lm-opacity input[type="range"] {
    flex: 0 1 118px;
    height: 2px;
    margin: 0;
    accent-color: #9aa79c;
    cursor: pointer;
  }

  .lm-opacity-val {
    flex: 0 0 auto;
    width: 26px;
    text-align: right;
    font-size: 10px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity 0.12s ease;
  }
  .lm-opacity:hover .lm-opacity-val, .lm-opacity:focus-within .lm-opacity-val { opacity: 1; }

  .hidden { display: none; }

  @media (max-width: 920px) {
    body {
      grid-template-columns: 1fr;
      grid-template-rows: 48px minmax(360px, 1fr) 390px;
    }

    .profile-dock {
      left: 12px;
      right: 12px;
      bottom: 58px;
      min-width: 0;
    }

    .profile-dock.collapsed {
      left: 12px;
      right: 12px;
      width: auto;
    }

    .panel {
      border-left: 0;
      border-top: 1px solid var(--line);
    }

    .status .chip:nth-child(2) { display: none; }
  }

  /* 2026 UI shell: compact workbench layout */
  body {
    grid-template-columns: 48px minmax(0, 1fr) 370px;
    grid-template-rows: 48px minmax(0, 1fr);
  }

  .topbar {
    grid-column: 1 / -1;
    padding-left: 12px;
  }

  .topbar .toolbar {
    position: fixed;
    left: 0;
    top: 48px;
    bottom: 0;
    width: 48px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 6px;
    border-left: 0;
    border-right: 1px solid var(--line);
    background: rgba(251, 251, 248, 0.96);
    backdrop-filter: blur(12px);
  }

  .topbar .toolbar .icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex: 0 0 36px;
    padding: 0;
    border-radius: 5px;
  }

  .map-wrap {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .panel {
    grid-column: 3;
    grid-row: 2;
    overflow: hidden;
  }

  .panel-inner {
    height: 100%;
    min-height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .inspector-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Flex med wrap: skalerer med antallet af faner — passer de på én række bliver de
       fordelt; ellers ombrydes de pænt i stedet for at sprænge layoutet (jf. 6+ faner). */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1px 2px;
    padding: 6px 6px 0;
    border-bottom: 1px solid var(--line);
    background: rgba(252, 252, 250, 0.92);
    backdrop-filter: blur(10px);
  }

  .inspector-tabs button {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    height: 36px;
    border: 0;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.012em;
    padding: 0 6px;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
  }

  /* Kompakt «beta»-mærke på en fane (fx Beregn) — fylder mindre end « (beta)». */
  .inspector-tabs .tab-tag {
    margin-left: 4px;
    padding: 1px 4px;
    border-radius: 999px;
    background: var(--amber, #e0a23a);
    color: #fff;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: 1px;
  }

  /* Samme mærke uden for fanerne — sættes af applyFeatureGating() på de indgange
     features.js udpeger som beta (fx «Klargør til M365 Copilot», der er et POC). */
  .beta-tag {
    margin-left: 6px;
    padding: 1px 4px;
    border-radius: 999px;
    background: var(--amber, #e0a23a);
    color: #fff;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: 1px;
  }

  .inspector-tabs button:hover { color: var(--ink); background: var(--accent-tint); }

  .inspector-tabs button.active {
    color: var(--accent-strong);
    font-weight: 700;
  }

  .inspector-tabs button.active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--accent);
  }

  .inspector-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .inspector-body .section {
    display: none;
    padding: 14px 16px;
    border-bottom: 0;
  }

  .inspector-body .section.active {
    display: block;
  }

  .inspector-body .section h2,
  .bottom-drawer .section h2 {
    margin-bottom: 12px;
  }

  /* Lille accent-tap foran sektionsoverskrifter — rolig strukturmarkør. */
  .inspector-body .section h2 {
    position: relative;
    padding-left: 11px;
  }
  .inspector-body .section h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 11px;
    border-radius: 99px;
    background: var(--accent);
  }

  /* ── Boksede kategori-kort (.subgroup) — bygget af groupifySection() i app.js ──
     Hver underkategori (h2/.section-head + felter) får sit eget indrammede kort med en
     tonet header-bjælke, så det tydeligt ses hvor én kategori slutter og den næste begynder.
     Genbruger den eksisterende accent-tap (…section h2::before) og felt-/stat-styles. */
  .subgroup {
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
  }
  .subgroup + .subgroup { margin-top: 12px; }

  .subgroup-head {
    display: flex;
    align-items: center;
    padding: 8px 11px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-2);
  }
  .subgroup-head h2 { margin: 0; }
  /* Areal: hele .section-head (titel + fold-knap) udfylder header-bjælken. */
  .subgroup-head > .section-head { flex: 1 1 auto; width: 100%; margin: 0; }

  .subgroup-body { padding: 11px; }

  /* Foldet kategori (i dag kun Areal): skjul kroppen, så kun header-bjælken står. */
  .section.collapsed .subgroup-body { display: none; }

  .sidebar-results {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    padding: 9px 12px 11px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
  }

  .sidebar-results-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--ink-2);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  .sidebar-results-title::before {
    content: "";
    width: 3px;
    height: 11px;
    border-radius: 99px;
    background: var(--accent);
  }

  .sidebar-results .section {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .sidebar-results .section + .section {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid var(--line-2);
  }

  .sidebar-results .section h2 {
    margin-bottom: 5px;
  }

  .sidebar-results .calc-row {
    grid-template-columns: 1fr auto;
    gap: 6px;
    margin-bottom: 6px;
  }

  .sidebar-results .calc-status {
    padding: 6px 8px;
  }

  .sidebar-results .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .sidebar-results .stat {
    padding: 6px 7px;
  }

  .sidebar-results .stat .name {
    font-size: 10px;
  }

  .sidebar-results .stat .value {
    margin-top: 2px;
    font-size: 14px;
  }

  .sidebar-results .warnings {
    margin-top: 6px;
  }

  .bottom-drawer {
    position: absolute;
    left: 60px;
    right: 196px;
    bottom: 12px;
    min-width: 520px;
    max-height: min(370px, 58vh);
    z-index: 4;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(251, 251, 248, 0.97);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .bottom-drawer-head {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--line-2);
  }

  .bottom-drawer-head .icon-btn {
    margin-left: auto;
    height: 28px;
    min-width: 30px;
  }

  /* Fold-pilen: peger OP (^) når skuffen er foldet ind («fold ud»), NED (v) når den er
     åben («fold ind»). Chevron-SVG'en peger op som standard; roteres 180° når åben. */
  #toggleBottomDrawer svg { transition: transform 0.15s ease; }
  .bottom-drawer:not(.collapsed) #toggleBottomDrawer svg { transform: rotate(180deg); }

  .bottom-drawer-body {
    min-height: 0;
    overflow: hidden;
  }

  .bottom-panel {
    display: none;
  }

  .bottom-panel.active {
    display: block;
  }

  .bottom-drawer.collapsed {
    min-width: 0;
    left: auto;
    width: auto;
  }

  /* Foldet ind: kun titel + fold-pilen vises — handlingsknapperne (Tegn profil,
     Profil DXF, Ryd) dukker op når man folder viewet ud med pil op. */
  .bottom-drawer.collapsed .bottom-drawer-actions > :not(#toggleBottomDrawer) {
    display: none;
  }

  .bottom-drawer.collapsed .bottom-drawer-head {
    border-bottom: 0;
  }

  .bottom-drawer.collapsed .bottom-drawer-body {
    display: none;
  }

  .bottom-drawer .profile-dock {
    position: static;
    min-width: 0;
    width: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .bottom-drawer .profile-dock-body {
    display: block;
  }

  .bottom-drawer #profileSvg {
    height: 190px;
  }

  /* Visuelt skjult, men i DOM/AT-træet (labels for kompakte felter — a11y bevares). */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .data-flow {
    display: grid;
    gap: 10px;
    min-width: 0;
  }

  /* Kompakt import-række: CRS-vælger og Indlæs-knap side om side. */
  .data-import-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
  }

  .data-import-row .command {
    width: auto;
    min-height: 32px;
    padding: 0 11px;
  }

  .data-card {
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px;
    box-shadow: var(--shadow-1);
  }

  .data-card.primary-step {
    border-color: var(--accent-line);
    background: linear-gradient(180deg, var(--accent-tint), transparent 64%), var(--surface);
    box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-1);
  }

  .data-card.disabled {
    opacity: 0.58;
  }

  .data-card.disabled .command,
  .data-card.disabled select {
    pointer-events: none;
  }

  .data-card.compact {
    background: var(--surface-2);
    box-shadow: none;
  }

  .data-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin-bottom: 8px;
  }

  .data-card-head > :first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .data-card-head .icon-btn {
    margin-left: auto;
    height: 28px;
    min-width: 30px;
  }

  /* Skift/ryd-knapper i terræn-kortets header: grupperet til højre (kun første får auto). */
  .data-card-head .data-head-btn { margin-left: 6px; }
  .data-card-head .data-head-btn:first-of-type { margin-left: auto; }
  .data-card-head .data-head-btn[hidden] { display: none; }

  /* Underlag-liste (DXF) i Data-fanen: én række pr. fil med farve, meta og fjern-×. */
  .cad-file-list { display: grid; gap: 6px; margin-top: 8px; }

  .cad-file-empty {
    padding: 6px 8px;
    border: 1px solid var(--line-2);
    border-radius: 5px;
    background: var(--panel-2);
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
  }

  .cad-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    background: var(--surface);
  }

  .cad-file-swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
  }

  .cad-file-meta { flex: 1 1 auto; min-width: 0; }

  .cad-file-name {
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .cad-file-sub {
    color: var(--muted);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
  }

  .cad-file-remove {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--faint);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .cad-file-remove:hover { background: rgba(177, 86, 74, 0.14); color: var(--red); }

  .step-badge {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 28%, #2b818a, var(--accent-strong));
    color: #fff;
    font-family: var(--font-num);
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  }

  .data-kicker {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .data-title {
    margin-top: 2px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .data-actions {
    display: grid;
    gap: 7px;
  }

  .data-actions.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .data-card .field {
    margin-bottom: 9px;
  }

  .data-primary-action {
    min-height: 38px;
  }

  .data-status {
    display: grid;
    gap: 2px;
    margin-top: 7px;
    padding: 6px 8px;
    border: 1px solid var(--line-2);
    border-radius: 5px;
    background: var(--panel-2);
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
  }

  .data-status strong {
    color: var(--ink);
    font-weight: 700;
  }

  .data-status.muted {
    background: #f7f5ef;
  }

  .map-empty {
    position: absolute;
    left: 50%;
    top: 48%;
    width: min(440px, calc(100% - 96px));
    transform: translate(-50%, -50%);
    z-index: 2;
    display: none;
    text-align: center;
    color: var(--ink);
    padding: 34px 30px 26px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-3);
    isolation: isolate;
    overflow: hidden;
  }

  /* Topografisk markør: svage højdekurver der toner ud bag overskriften. */
  .map-empty::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -34px;
    z-index: -1;
    width: 300px;
    height: 240px;
    transform: translateX(-50%);
    background: repeating-radial-gradient(circle at 50% 50%,
      transparent 0 13px, var(--accent-line) 13px 14px);
    -webkit-mask-image: radial-gradient(circle at 50% 46%, #000, transparent 68%);
    mask-image: radial-gradient(circle at 50% 46%, #000, transparent 68%);
    opacity: 0.4;
    pointer-events: none;
  }

  .map-empty.visible {
    display: block;
    animation: emptyrise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  @keyframes emptyrise {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }

  .map-empty-title {
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -0.02em;
  }

  .map-empty-copy {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
  }

  .map-empty-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
  }

  .hud {
    left: 60px;
  }

  .legend {
    bottom: 12px;
  }

  @media (max-width: 1100px) {
    body {
      grid-template-columns: 48px minmax(0, 1fr);
      grid-template-rows: 48px minmax(360px, 1fr) 360px;
    }

    .panel {
      grid-column: 1 / -1;
      grid-row: 3;
      border-left: 0;
      border-top: 1px solid var(--line);
    }

    .map-wrap {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .bottom-drawer {
      left: 60px;
      right: 12px;
      min-width: 0;
    }
  }

  /* Toasts, modal, busy-overlay og genvejshjælp */
  .toast-stack {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;
  }

  .toast {
    pointer-events: auto;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: 6px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow);
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .toast.show { opacity: 1; transform: translateY(0); }
  .toast-error { border-left-color: var(--red); }
  .toast-success { border-left-color: var(--positive); }
  .toast-info { border-left-color: var(--blue); }

  .modal-overlay,
  .shortcuts {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(22, 27, 24, 0.36);
    backdrop-filter: blur(3px);
  }

  .modal-overlay[hidden],
  .shortcuts[hidden] { display: none; }

  .modal,
  .shortcuts-card {
    width: min(440px, 100%);
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-3);
    animation: modalpop 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  @keyframes modalpop {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: none; }
  }

  .modal-message { font-size: 13px; line-height: 1.4; }

  .modal-input {
    width: 100%;
    height: 34px;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: white;
    padding: 0 9px;
  }

  .modal-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .modal-input[hidden] { display: none; }

  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
  }

  .modal-actions .command { width: auto; padding: 0 16px; }

  .busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(36, 40, 38, 0.22);
  }

  .busy-overlay[hidden] { display: none; }

  .busy-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
    font-size: 13px;
  }

  .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--line);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }

  @keyframes spin { to { transform: rotate(360deg); } }

  /* Mængder til udbud — dialogen genbruger .shortcuts-skallen, men er bredere og
     scroller, fordi den rummer alle udbudsparametrene i grupper. */
  .udbud-card {
    width: min(880px, 100%);
    max-height: min(88vh, 960px);
    display: flex;
    flex-direction: column;
  }

  /* Dialogen skal have plads i et smalt vindue — skær yderrammen ned, så kortet
     beholder to kolonner i stedet for at falde sammen til én lang søjle. */
  .udbud-dialog { padding: 12px; }

  .udbud-lead {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
  }

  .udbud-warnings {
    margin: 0 0 12px;
    padding: 9px 12px 9px 26px;
    border: 1px solid var(--warn, #d08b2c);
    border-radius: 8px;
    background: rgba(208, 139, 44, 0.09);
    font-size: 12px;
    line-height: 1.45;
  }

  .udbud-warnings[hidden] { display: none; }
  .udbud-warnings li + li { margin-top: 5px; }

  .udbud-body {
    overflow-y: auto;
    padding-right: 6px;
    flex: 1 1 auto;
  }

  .udbud-group + .udbud-group {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }

  .udbud-group h3 {
    margin: 0 0 4px;
    font-size: 13px;
  }

  .udbud-intro {
    margin: 0 0 10px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted);
  }

  /* Præcis TO kolonner. auto-fit gav tre spalter i et bredt vindue (for korte linjer og
     rodet læserækkefølge), og den gamle 620 px-grænse gav én meget lang søjle allerede ved
     560 px. Grænsen ligger derfor lavt og skifter først til én kolonne på rigtig smalle skærme. */
  .udbud-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    align-items: start;
  }

  @media (max-width: 460px) {
    .udbud-grid { grid-template-columns: 1fr; }
  }

  .udbud-field {
    display: grid;
    gap: 3px;
    align-content: start;
  }

  .udbud-field.is-full { grid-column: 1 / -1; }

  .udbud-field-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
  }

  .udbud-field label {
    font-size: 12px;
    font-weight: 600;
  }

  .udbud-field input[type="number"],
  .udbud-field select {
    width: 100%;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: white;
    padding: 0 8px;
    font: inherit;
    font-size: 12px;
  }

  /* Nedtoning skal kunne SES: ren opacity var for svag. Feltet får grå bund, stiplet
     ramme og dæmpet tekst, så det tydeligt læses som «gælder ikke for dette valg». */
  .udbud-field.is-disabled { opacity: 0.7; }
  .udbud-field.is-disabled label,
  .udbud-field.is-disabled .udbud-note { color: var(--muted); }

  .udbud-field input[type="number"]:disabled,
  .udbud-field select:disabled {
    border-style: dashed;
    background: rgba(0, 0, 0, 0.045);
    color: var(--muted);
    cursor: not-allowed;
  }

  .udbud-engine-badge {
    padding: 1px 6px;
    border: 1px solid rgba(208, 139, 44, 0.5);
    border-radius: 999px;
    background: rgba(208, 139, 44, 0.12);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
  }

  .linklike {
    border: 0;
    padding: 0;
    background: none;
    color: var(--green);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
  }

  /* Skrivebeskyttet aflæsning (fx membranarealet) — samme højde som et felt, men
     tydeligt ikke-redigerbar. */
  .udbud-readonly {
    min-height: 30px;
    display: flex;
    align-items: center;
    padding: 5px 9px;
    border: 1px dashed var(--line);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.02);
    color: var(--text, #2f3a33);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  .udbud-note {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted);
  }

  /* Diskret markør for at feltet har en forklaring — teksten selv ligger i tooltippen. */
  .udbud-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: help;
  }

  .udbud-field:hover .udbud-info { border-color: var(--green); color: var(--green); }

  /* Kotetabel: hvad tallene giver af koter, opdateret mens der rettes. */
  .udbud-level-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 2px 0 4px;
  }

  .udbud-level-table th,
  .udbud-level-table td {
    padding: 3px 8px 3px 0;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-weight: 400;
    white-space: nowrap;
  }

  .udbud-level-table thead th {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .udbud-level-table tbody th { color: var(--text, #2f3a33); }
  /* Kote og dybde er tal der sammenlignes lodret — hold dem på samme cifferbredde. */
  .udbud-level-table td:nth-child(2),
  .udbud-level-table td:nth-child(3) { font-variant-numeric: tabular-nums; text-align: right; }
  .udbud-level-table td:nth-child(3) { color: var(--muted); }
  .udbud-level-table .ult-note {
    white-space: normal;
    color: var(--muted);
    font-size: 11px;
    width: 40%;
  }

  .udbud-level-table .is-fixed th { font-weight: 700; }
  .udbud-level-table .is-fixed td,
  .udbud-level-table .is-fixed th { border-bottom: 1.5px solid var(--ink, #2f3a33); }
  .udbud-level-table .is-key th,
  .udbud-level-table .is-key td:nth-child(2) { font-weight: 700; }
  .udbud-level-table .is-clamped th,
  .udbud-level-table .is-clamped td { background: #fdf3e3; color: #8a5a12; }
  .udbud-level-table .is-clamped .ult-note { color: #8a5a12; }

  /* Principskitse af membranen. */
  .sd {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfaf6;
  }

  /* Hvid kontur bag glyfferne (paint-order: stroke fill) — etiketterne står oven på
     lagbånd og linjer, og uden halo bliver de svære at læse ved smalle bredder. */
  .sd text {
    font-family: inherit;
    fill: var(--muted);
    paint-order: stroke fill;
    stroke: #fbfaf6;
    stroke-width: 2.6px;
    stroke-linejoin: round;
  }
  .sd .sd-note { font-size: 9px; }
  .sd .sd-note.strong { font-size: 9.5px; font-weight: 700; fill: var(--ink, #2f3a33); }
  /* Klemt membranoverkant: advarselsfarve, så skitsen og advarslen siger det samme. */
  .sd .sd-water-label.on.is-clamped { fill: #8a5a12; }
  .sd .sd-legend { font-size: 10px; fill: var(--text, #2f3a33); }
  .sd .sd-surface { fill: none; stroke: #2f3a33; stroke-width: 1.6; }
  .sd .sd-terrain { fill: none; stroke: #9aa39c; stroke-width: 1.2; stroke-dasharray: 4 3; }
  .sd .sd-water { stroke: #7fb0d8; stroke-width: 1.1; stroke-dasharray: 3 3; }
  .sd .sd-water.on { stroke: #2f7bbf; stroke-width: 1.8; stroke-dasharray: none; }
  .sd .sd-water-label { font-size: 9px; fill: #7fb0d8; font-weight: 700; }
  .sd .sd-water-label.on { fill: #2f7bbf; }

  .udbud-actions {
    margin-top: 12px;
    flex: 0 0 auto;
  }

  .shortcuts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .shortcuts-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 12px;
  }

  .shortcuts-list dt {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
  }

  .shortcuts-list dd { margin: 0; color: var(--muted); }

  :focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 1px;
  }

  .draw-hint {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    z-index: 4;
    padding: 6px 11px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: rgba(251, 251, 248, 0.94);
    box-shadow: var(--shadow);
    color: var(--ink);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    display: none;
  }

  .draw-hint.visible { display: block; }

  /* ── Bevægelse: rolig opstarts-afsløring + bløde fane-skift ───────────────── */
  @media (prefers-reduced-motion: no-preference) {
    .menubar { animation: shellfade 0.45s ease both; }
    .dock-left { animation: shellfade 0.5s ease 0.04s both; }
    .map-wrap { animation: shellfade 0.6s ease 0.06s both; }
    .dock-right { animation: shellslide 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s both; }
    .inspector-body .section.active { animation: tabfade 0.24s ease both; }
  }

  @keyframes shellfade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes shellslide {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes tabfade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }

  /* Respektér brugerens ønske om mindre bevægelse: slå animationer/overgange fra. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     GAMMELDAGS DESKTOP-SHELL — bygges af setupUiShell() (app.js). Menulinje øverst, to
     dokke om kortet (input til venstre, resultater til højre) og en statuslinje i bunden.
     Vertikale dokke giver template-skitsen og magasinkurverne fuld panelbredde igen.
     Reglerne står sidst og vinder (samme specificitet) over den tidligere shell-blok; døde
     .topbar/.panel-regler matcher ingen DOM. Venstre dok GENBRUGER .inspector-tabs/
     .inspector-body (defineret ovenfor), så de input-styles allerede findes.
     ═══════════════════════════════════════════════════════════════════════════ */

  body {
    /* Venstre dok lidt bredere (336 px) — giver plads til 5 faner på én række og luft
       til «Beregn»-fanens felter/noter. */
    grid-template-columns: var(--ld-w, 336px) minmax(0, 1fr) var(--rd-w, 328px);
    grid-template-rows: auto minmax(0, 1fr) 30px;
  }
  body.input-collapsed { --ld-w: 34px; }
  body.results-collapsed { --rd-w: 34px; }

  /* ── App-linje: menulinje + værktøjslinje-række ──────────────────────────────── */
  .appbar {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border-bottom: 1px solid var(--line);
    z-index: 20;
  }
  .menubar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line-2);
    /* Egen stabling-kontekst OVER værktøjslinje-rækken, så åbne dropdowns aldrig
       havner bag toolbar-knapper der danner en stabling-kontekst (fx den
       deaktiverede «Beregn»-knap har opacity < 1 ⇒ egen kontekst). */
    position: relative;
    z-index: 1;
  }
  .menubar .brand { margin-right: 6px; }

  /* Værktøjslinje-rækken: vandret ikon-strip med grupperede skillelinjer. */
  .appbar .toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    height: 40px;
    padding: 0 10px;
  }
  .appbar .toolbar .icon-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-color: transparent;
    background: transparent;
  }
  .appbar .toolbar .icon-btn:hover {
    border-color: var(--accent-line);
    background: var(--accent-tint);
  }
  .appbar .toolbar .icon-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .toolbar-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 20px;
    margin: 0 7px;
    background: var(--line-2);
  }
  .menubar-spacer { flex: 1 1 auto; min-width: 8px; }
  .menus { display: flex; align-items: center; gap: 1px; }
  .menu { position: relative; }
  .menu-btn {
    height: 28px;
    padding: 0 11px;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .menu-btn:hover, .menu.open .menu-btn { background: var(--accent-tint); color: var(--accent-strong); }
  .menu-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 5px);
    min-width: 208px;
    display: none;
    flex-direction: column;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: var(--shadow-3);
    z-index: 30;
  }
  .menu.open .menu-panel { display: flex; animation: modalpop 0.14s ease both; }
  .menu-item {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 11px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
  }
  .menu-item:hover { background: var(--accent); color: #fff; }
  .menu-sep { height: 1px; margin: 5px 8px; background: var(--line-2); }
  /* Kortvisning (Model/3D) + Beregn forrest i værktøjslinje-rækken. */
  .appbar .toolbar .mode-toggle {
    flex: 0 0 auto;
    height: 30px;
    padding: 2px;
  }
  .appbar .toolbar .mode-btn { min-width: 54px; font-size: 11.5px; }
  .appbar .toolbar .top-calc {
    flex: 0 0 auto;
    width: auto;
    min-height: 30px;
    padding: 0 12px;
    margin-left: 5px;
  }

  /* ── Dokke (venstre = input · højre = resultater) ───────────────────────────── */
  .dock {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface);
    overflow: hidden;
  }
  .dock-left { grid-column: 1; border-right: 1px solid var(--line); }
  .dock-right { grid-column: 3; border-left: 1px solid var(--line); }
  .map-wrap { grid-column: 2; grid-row: 2; }
  .statusbar { grid-column: 1 / -1; grid-row: 3; }

  .dock-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 6px 0 13px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
  }
  .dock-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
  }
  .dock-title::before { content: ""; width: 3px; height: 11px; border-radius: 99px; background: var(--accent); }
  .dock-collapse { height: 28px; min-width: 30px; }
  .dock-collapse svg { transition: transform 0.2s ease; }

  /* Venstre dok genbruger .inspector-tabs + .inspector-body (defineret ovenfor). */
  .dock-left .inspector-tabs { position: static; flex-wrap: nowrap; }
  .dock-left .inspector-body { flex: 1 1 auto; min-height: 0; }

  /* Højre dok: faste hovedfaner over hver sin rullende visning. */
  .right-dock-tabs {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 6px 8px 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }

/* ── Projektstartskort (Leaflet, vendored) ─────────────────────────────────── */
.project-start-map {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  background: #dfe5e2;
  font-family: var(--font-ui);
}

.map-wrap.no-terrain .project-start-map,
.map-wrap.area-editing .project-start-map { display: block; }

.project-start-leaflet { position: absolute; inset: 0; }
.project-start-leaflet.drawing-area,
.project-start-leaflet.drawing-area .leaflet-interactive { cursor: crosshair; }

.project-map-search {
  position: absolute;
  z-index: 1100;
  top: 14px;
  left: 50%;
  width: min(480px, calc(100% - 190px));
  transform: translateX(-50%);
}

.project-map-search input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: rgba(252, 252, 250, 0.97);
  box-shadow: var(--shadow-2);
  outline: none;
}

.project-map-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-2); }

.project-address-results {
  margin-top: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-3);
}

.project-address-option {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 12px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.project-address-option:last-child { border-bottom: 0; }
.project-address-option:hover,
.project-address-option.active { background: var(--accent-soft); color: var(--accent-strong); }

.project-map-card {
  position: absolute;
  z-index: 1050;
  left: 16px;
  bottom: 16px;
  width: min(400px, calc(100% - 32px));
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(252, 252, 250, 0.97);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(12px);
}

.project-map-title { margin-top: 2px; font-size: 17px; font-weight: 750; }
.project-map-card p { margin: 6px 0 12px; color: var(--muted); font-size: 12px; }
.project-map-actions,
.project-map-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.project-map-secondary { margin-top: 8px; }
.project-area-meta {
  margin-top: 9px;
  padding: 7px 9px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--muted);
  font: 11px/1.4 var(--font-num);
}
.project-area-meta.invalid { color: var(--red); background: rgba(177, 86, 74, 0.09); }
.project-map-token-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}
.project-map-token-row button {
  flex: 0 0 auto;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.project-map-privacy { margin-top: 7px; color: var(--faint); font-size: 10.5px; line-height: 1.35; }

.terrain-source-actions { display: grid; gap: 6px; margin-top: 7px; }
.terrain-crs-row { grid-template-columns: 1fr; }
.terrain-pending-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 7px; }
.terrain-pending-actions .command { min-width: 0; padding-inline: 5px; font-size: 11px; }

.map-empty.terrain-waiting {
  z-index: 1200;
  left: auto;
  right: 16px;
  top: 74px;
  width: min(350px, calc(100% - 32px));
  transform: none;
  padding: 18px;
  text-align: left;
  animation: none;
}
.map-empty.terrain-waiting::before { display: none; }
.map-wrap.area-editing .hud,
.map-wrap.area-editing .legend,
.map-wrap.area-editing .osm-attribution,
.map-wrap.area-editing .bottom-drawer,
.map-wrap.no-terrain .hud,
.map-wrap.no-terrain .legend,
.map-wrap.no-terrain .osm-attribution,
.map-wrap.no-terrain .bottom-drawer { display: none; }

@media (max-width: 760px) {
  .project-map-search { top: 62px; width: calc(100% - 28px); }
  .project-map-card { left: 10px; bottom: 10px; width: calc(100% - 20px); }
  .project-map-card p { display: none; }
}
  .right-dock-tabs button {
    position: relative;
    height: 36px;
    border: 0;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
  }
  .right-dock-tabs button:hover { color: var(--ink); background: var(--accent-tint); }
  .right-dock-tabs button.active { color: var(--accent-strong); font-weight: 700; }
  .right-dock-tabs button.active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--accent);
  }
  .dock-right .dock-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 14px;
    display: none;
    flex-direction: column;
    gap: 16px;
  }
  .dock-right .dock-body.active { display: flex; }
  .dock-right .dock-body .section { padding: 0; border: 0; }
  .dock-right .dock-body .section h2 { position: relative; padding-left: 11px; }
  .dock-right .dock-body .section h2::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 11px; border-radius: 99px; background: var(--accent);
  }

  /* Sammenfoldede dokke: smal stribe med lodret titel + udfold-knap. */
  body.input-collapsed .dock-left .inspector-tabs,
  body.input-collapsed .dock-left .inspector-body,
  body.results-collapsed .dock-right .right-dock-tabs,
  body.results-collapsed .dock-right .dock-body { display: none; }
  body.input-collapsed .dock-left .dock-head,
  body.results-collapsed .dock-right .dock-head {
    flex-direction: column;
    height: 100%;
    padding: 12px 3px;
    gap: 12px;
    justify-content: flex-start;
    border-bottom: 0;
  }
  body.input-collapsed .dock-left .dock-title,
  body.results-collapsed .dock-right .dock-title { writing-mode: vertical-rl; transform: rotate(180deg); }
  body.input-collapsed .dock-left .dock-title::before,
  body.results-collapsed .dock-right .dock-title::before { display: none; }
  body.input-collapsed .dock-left .dock-collapse svg,
  body.results-collapsed .dock-right .dock-collapse svg { transform: rotate(180deg); }

  /* ── Statuslinje (bund) ───────────────────────────────────────────────────── */
  .statusbar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 30px;
    padding: 0 12px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11.5px;
    z-index: 4;
  }
  .statusbar .status { margin: 0; display: flex; gap: 8px; align-items: center; min-width: 0; }
  .statusbar .chip { height: 22px; padding: 0 10px; }
  .statusbar-hint { color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Trin-indikator i statuslinjen (ui_guidance.js): 1 Terræn → … → 5 Eksport + hint. */
  .workflow-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    white-space: nowrap;
  }

  .wf-step {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 600;
  }

  .wf-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-num);
    font-size: 9.5px;
    line-height: 1;
  }

  .wf-step.done { color: var(--muted); }

  .wf-step.done .wf-num {
    border-color: var(--positive);
    color: var(--positive);
  }

  .wf-step.active { color: var(--accent-strong); }

  .wf-step.active .wf-num {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
  }

  .wf-hint {
    margin-left: 6px;
    padding-left: 12px;
    border-left: 1px solid var(--line);
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Kontekst-værktøjslinje ved valgt bundpunkt: slet/indsæt/anlæg (render_2d.js). */
  .context-toolbar {
    position: absolute;
    z-index: 9;
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(125, 200, 212, 0.5);
    border-radius: 8px;
    background: rgba(26, 31, 28, 0.94);
    box-shadow: var(--shadow-2);
  }

  .ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #e8eae4;
    cursor: pointer;
  }

  .ct-btn svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.9;
  }

  .ct-btn:hover { background: rgba(255, 255, 255, 0.12); }

  .ct-btn.ct-danger:hover { background: rgba(177, 86, 74, 0.55); color: #fff; }

  /* Onboarding (første besøg): lille IKKE-modalt velkomstkort øverst til højre på kortet. */
  .onboarding-card {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 8;
    width: 318px;
    max-width: calc(100% - 28px);
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-3);
    font-size: 12px;
    color: var(--ink-2);
  }

  .onboarding-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
  }

  .onboarding-close {
    border: 0;
    background: none;
    padding: 0 2px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
  }

  .onboarding-close:hover { color: var(--ink); }

  .onboarding-steps {
    margin: 0 0 11px;
    padding-left: 19px;
    display: grid;
    gap: 5px;
    line-height: 1.45;
  }

  .onboarding-steps li::marker {
    color: var(--accent-strong);
    font-family: var(--font-num);
    font-weight: 600;
  }

  .onboarding-actions { display: flex; justify-content: flex-end; }

  .onboarding-actions .command { width: auto; padding: 0 14px; }

  /* Næste-skridt-hint på kortet: lille ikke-blokerende kort øverst-centreret. */
  .map-next-step {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(620px, calc(100% - 48px));
    padding: 9px 10px 9px 14px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-md);
    background: rgba(252, 252, 250, 0.95);
    box-shadow: var(--shadow-2);
    color: var(--ink-2);
    font-size: 12px;
  }

  /* Profil-banner: samme placering som næste-skridt-hintet, men i advarselsfarve.
     Vises når et åbnet projekt bruger funktioner denne udgave ikke tilbyder. */
  .map-notice {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(680px, calc(100% - 48px));
    padding: 9px 10px 9px 14px;
    border: 1px solid var(--amber, #e0a23a);
    border-radius: var(--r-md);
    background: rgba(252, 250, 244, 0.97);
    box-shadow: var(--shadow-2);
    color: var(--ink-2);
    font-size: 12px;
  }

  .map-notice .command { width: auto; flex: 0 0 auto; padding: 0 12px; }

  /* Står begge kort fremme, skubbes næste-skridt-hintet ned under banneret. */
  .map-notice:not([hidden]) ~ .map-next-step { top: 64px; }

  .map-next-step .command {
    width: auto;
    flex: 0 0 auto;
    padding: 0 12px;
  }

  /* display:flex/inline-flex overstyrer ellers [hidden]-attributtens display:none. */
  .map-next-step[hidden] { display: none; }

  /* ── Flydende kort-elementer (intet venstre-rail mere — nulstillede offsets) ── */
  .map-wrap .hud { left: 12px; bottom: 12px; }
  /* Hævet over den sammenfoldede profil-skuffe (bottom:12px, ~40px høj) i samme
     hjørne, så Terræn-forklaringen ikke stikker op bagved og ligner et skjult panel. */
  .map-wrap .legend { right: 12px; bottom: 60px; }
  .map-wrap .osm-attribution { left: 12px; right: auto; bottom: 64px; }
  .map-wrap .osm-attribution.matrikel-attr { bottom: 86px; }
  .bottom-drawer { left: 16px; right: 16px; }
  .bottom-drawer.collapsed { left: auto; right: 16px; width: auto; }

  /* ── Smal skærm: dokke stables under kortet ───────────────────────────────── */
  @media (max-width: 1080px) {
    body {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto minmax(0, 1fr) auto 30px;
    }
    body.input-collapsed, body.results-collapsed { --ld-w: auto; --rd-w: auto; }
    .appbar { grid-column: 1; grid-row: 1; }
    .dock-left { grid-column: 1; grid-row: 2; border-right: 0; border-bottom: 1px solid var(--line); }
    .dock-left .inspector-body { max-height: 200px; }
    .map-wrap { grid-column: 1; grid-row: 3; }
    .dock-right { grid-column: 1; grid-row: 4; border-left: 0; border-top: 1px solid var(--line); max-height: 280px; }
    .statusbar { grid-column: 1; grid-row: 5; }
    .bottom-drawer { right: 16px; }
  }

/* ── Beregn-fanen: grøn/rød markering af volumen-resultater vs. Skrift 32-krav ── */
.stat.vol-ok .value { color: #1a7f37; }
.stat.vol-under .value { color: #c0392b; }
.stat-req {
  margin-top: 2px;
  font-size: 11px;
  color: #73766f;
}
.stat.vol-ok .stat-req { color: #1a7f37; }
.stat.vol-under .stat-req { color: #c0392b; }
.stat-req:empty { display: none; }

/* Volumenfordeling forbassin/hovedbassin (vises kun når en forbassinsvold deler bassinet). */
.split-details { padding: 0; }
.split-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 11px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.split-details > summary::-webkit-details-marker { display: none; }
.split-details > summary::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.split-details[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.split-details > summary:hover { background: var(--surface-2, rgba(0, 0, 0, 0.03)); }
.split-details > summary:focus-visible { outline: 2px solid var(--accent, #3f86b4); outline-offset: -2px; }
.split-summary-title { color: var(--ink); font-size: 12px; }
.split-summary-note { font-weight: 500; }
.split-body { padding: 0 11px 10px; }
.split-note {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
}
.split-table .split-sub th[scope="row"],
.split-table .split-sub td {
  padding-top: 1px;
  font-weight: 500;
  font-size: 12px;
  opacity: 0.85;
}
.split-table .split-sub th[scope="row"] { padding-left: 10px; }

/* Lille (i) ved et nøgletal der har en uddybende note (tooltip via data-tip). */
.info-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 3px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: var(--muted);
  cursor: help;
  vertical-align: middle;
}
.info-mark:hover, .info-mark:focus-visible { color: var(--ink); border-color: var(--muted); }
.info-mark[hidden] { display: none; }
.split-table {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.split-table th, .split-table td {
  padding: 3px 0;
  text-align: right;
  vertical-align: baseline;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.split-table thead th + th, .split-table tbody td { padding-left: 8px; }
.split-table thead th {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 4px;
}
.split-table tbody th[scope="row"] {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding-right: 8px;
  /* Panelet er smalt — lad de lange rækkenavne ombryde i stedet for at skubbe talkolonnerne ud. */
  white-space: normal;
}
.split-table .unit { font-size: 10px; font-weight: 500; color: var(--muted); }
.split-table tr[hidden] { display: none; }

/* «Beregn»-fanens advarsler (beta-note + gyldighedsadvarsel) får lidt luft når de stables. */
#beregnBeta, #beregnProvisional { margin-bottom: 8px; }
#beregnProvisional[hidden] { display: none; }