/* GENERATED with korridorbygger.js — scoped under .kb-root */
.kb-root { height: 100%; }
.kb-root .kb-status { padding: 2.15rem; color: #667382; }
.kb-root {
      font-size: 1rem;
      --brand: var(--veloio-brand, #063545);  /* declared in app.css :root */
      --ink: #172433;
      --muted: #667382;
      --line: #dce3e9;
      --soft-line: #edf1f4;
      --surface: #fff;
      --canvas: #f4f7f9;
      --od: #7466d8;
      --od-soft: #edeafe;
      --teal: #128e93;
      --teal-soft: #dff4f2;
      --amber: #d48a18;
      --amber-soft: #fff2d8;
      --coral: #d95f4b;
      --coral-soft: #fdeae6;
      --idle: #8fa2ae;
      --rail: 4rem;
      --top: 3.6923rem;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }.kb-root button, .kb-root input, .kb-root select { font: inherit; }.kb-root .app {
      height: 100%;
      display: grid;
      grid-template-columns: 23rem minmax(32rem, 1fr) 28.6rem;
      grid-template-rows: minmax(0, 1fr);
      overflow: hidden;
    }.kb-root /* ---------- chrome ---------- */
    .topbar {
      grid-column: 1 / -1; grid-row: 1;
      display: flex; align-items: center;
      background: var(--surface); border-bottom: 0.0769rem solid var(--line); z-index: 20;
    }.kb-root .brand {
      width: 11.2308rem; height: 100%; display: flex; align-items: center;
      padding: 0 0.9231rem; background: var(--brand); flex: 0 0 auto;
    }.kb-root .brand img { width: 6.6154rem; filter: brightness(0) invert(1); }.kb-root .module-title { font-weight: 720; font-size: 1.1538rem; margin-left: 1.0769rem; color: #2a3650; }.kb-root .top-actions { margin-left: auto; padding: 0 0.9231rem; display: flex; gap: 0.6154rem; align-items: center; }.kb-root .top-chip {
      height: 2.2308rem; display: inline-flex; align-items: center; gap: 0.4615rem; padding: 0 0.7692rem;
      border: 0.0769rem solid var(--line); border-radius: 0.3846rem; color: #536170; background: #f9fafb; white-space: nowrap;
    }.kb-root .top-chip svg { width: 1.0769rem; height: 1.0769rem; }.kb-root .avatar {
      width: 2.1538rem; height: 2.1538rem; display: grid; place-items: center; border: 0;
      border-radius: 50%; color: #fff; background: var(--brand); font-weight: 700;
    }.kb-root .rail {
      grid-column: 1; grid-row: 2;
      display: flex; flex-direction: column; align-items: center; gap: 0.3846rem; padding: 0.5385rem 0.3846rem;
      border-right: 0.0769rem solid var(--line); background: var(--surface); z-index: 12;
    }.kb-root .rail-btn {
      width: 3.0769rem; height: 3.0769rem; display: grid; place-items: center;
      border: 0.0769rem solid transparent; border-radius: 0.6154rem; background: transparent; cursor: pointer;
    }.kb-root .rail-btn img { width: 1.6154rem; height: 1.6154rem; opacity: .67; }.kb-root .rail-btn svg { width: 1.5385rem; height: 1.5385rem; color: #52616f; }.kb-root .rail-btn.active svg { color: #fff; }.kb-root .rail-btn:hover { background: #eef2f5; }.kb-root .rail-btn.active { background: var(--brand); }.kb-root .rail-btn.active img { filter: brightness(0) invert(1); opacity: 1; }.kb-root .rail-spacer { flex: 1; }.kb-root /* ---------- panels ---------- */
    .panel { background: var(--surface); overflow-y: auto; display: flex; flex-direction: column; }.kb-root .panel.left { grid-column: 1; grid-row: 1; border-right: 0.0769rem solid var(--line); }.kb-root .panel.right { grid-column: 3; grid-row: 1; border-left: 0.0769rem solid var(--line); }.kb-root .section { padding: 1rem 1.0769rem; border-bottom: 0.0769rem solid var(--soft-line); }.kb-root .section-title {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 0.8462rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 0.7692rem;
    }.kb-root .section-title .count { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 0.8846rem; }.kb-root /* route list */
    .route-row {
      position: relative;
      display: grid; grid-template-columns: 0.3077rem 1fr; align-items: center; gap: 0.6923rem;
      padding: 0.6154rem 2rem 0.6154rem 0; border: 0.0769rem solid var(--line); border-radius: 0.5385rem;
      margin-bottom: 0.4615rem; cursor: pointer; background: #fff; overflow: hidden;
    }.kb-root .toggle-row:has(#kb-toggle-bike) { display: none; }.kb-root .route-row.has-actions { padding-right: 4rem; }.kb-root .route-x {
      position: absolute; top: 0.3846rem; right: 0.3846rem; width: 1.4615rem; height: 1.4615rem;
      display: grid; place-items: center; border: 0; border-radius: 0.3846rem;
      background: transparent; color: var(--muted); cursor: pointer; opacity: 0;
    }.kb-root .route-row:hover .route-x, .kb-root .route-row.active .route-x { opacity: 1; }.kb-root .route-x:hover { background: var(--coral-soft); color: var(--coral); }.kb-root .route-x svg { width: 1rem; height: 1rem; }.kb-root .route-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3077rem; }.kb-root .route-open {
      display: inline-flex; padding: 0.0769rem 0.4615rem; border-radius: 0.3077rem;
      background: var(--teal); color: #fff; font-size: 0.7308rem; font-weight: 700;
      letter-spacing: .04em; text-transform: uppercase;
    } .kb-root .route-processing { font-size: 0.6923rem; font-weight: 600; letter-spacing: 0.02rem; padding: 0.0769rem 0.3077rem; border-radius: 0.2308rem; background: var(--amber-soft, #fef3c7); color: var(--amber, #b45309); text-transform: lowercase; }.kb-root .route-failed { font-size: 0.6923rem; font-weight: 600; letter-spacing: 0.02rem; padding: 0.0769rem 0.3077rem; border-radius: 0.2308rem; background: #fee2e2; color: #b91c1c; text-transform: lowercase; }.kb-root .route-row.active .route-x, .kb-root .route-row.active .route-send { opacity: 1; }.kb-root .route-row.db .route-swatch { background: #b08bd0; }.kb-root .route-row.db.active .route-swatch { background: var(--teal); }.kb-root .mod-chips { display: flex; gap: 0.3077rem; margin-top: 0.3846rem; }.kb-root .mod-chip {
      padding: 0.0769rem 0.5385rem; border: 0.0769rem solid var(--line); border-radius: 76.8462rem;
      background: #fff; color: var(--muted); font-size: 0.8077rem; font-weight: 650;
    }.kb-root .conflict-row {
      margin-top: 0.4615rem; padding-top: 0.4615rem; border-top: 0.0769rem dashed var(--line);
      color: var(--muted); font-size: 0.8077rem; line-height: 1.9;
    }.kb-root .service-warning {
      margin-top: 0.6154rem; padding: 0.5385rem 0.6154rem; border-radius: 0.4615rem;
      background: var(--amber-soft); color: #7a5209; font-size: 0.8462rem; line-height: 1.4;
    }.kb-root .conflict-row .mod-chip { margin-left: 0.2308rem; }.kb-root .mod-chip.on { border-color: var(--teal); background: var(--teal-soft); color: #0b5f63; }.kb-root .route-send {
      position: absolute; top: 0.3846rem; right: 2rem; width: 1.4615rem; height: 1.4615rem;
      display: grid; place-items: center; border: 0; border-radius: 0.3846rem;
      background: transparent; color: var(--muted); cursor: pointer; opacity: 0;
    }.kb-root .route-row:hover .route-send, .kb-root .route-row.active .route-send { opacity: 1; }.kb-root .route-send:hover { background: var(--teal-soft); color: var(--teal); }.kb-root .route-send svg { width: 1rem; height: 1rem; }.kb-root .db-note { color: var(--muted); font-size: 0.8462rem; line-height: 1.4; margin-top: 0.5385rem; }.kb-root .route-row:hover { border-color: #c3ced7; }.kb-root .route-row.active { border-color: var(--teal); background: var(--teal-soft); }.kb-root .route-swatch { width: 0.3077rem; height: 100%; align-self: stretch; background: var(--idle); }.kb-root .route-row.active .route-swatch { background: var(--teal); }.kb-root .route-name { font-weight: 620; }.kb-root .route-meta { color: var(--muted); font-size: 0.8846rem; margin-top: 0.0769rem; }.kb-root .route-dirs { display: flex; flex-wrap: wrap; gap: 0.2308rem; margin-top: 0.3077rem; }.kb-root .dir-chip {
      padding: 0.0769rem 0.4615rem; border-radius: 0.3077rem; background: #eef2f5; color: #4a5865;
      font-size: 0.8077rem; font-weight: 650;
    }.kb-root .route-length { color: var(--muted); font-weight: 500; }.kb-root .route-row.active .dir-chip { background: #fff; color: var(--teal); }.kb-root .route-row.draft .route-name::after {
      content: "kladde"; margin-left: 0.4615rem; padding: 0.0769rem 0.3846rem; border-radius: 0.3077rem;
      background: var(--amber-soft); color: #8a5a09; font-size: 0.7692rem; font-weight: 700;
      letter-spacing: .04em; text-transform: uppercase; vertical-align: 0.0769rem;
    }.kb-root /* fields */
    .field { margin-bottom: 0.7692rem; }.kb-root .field:last-child { margin-bottom: 0; }.kb-root .field label { display: block; font-size: 0.8846rem; color: var(--muted); margin-bottom: 0.3077rem; font-weight: 600; }.kb-root .field input, .kb-root .field select {
      width: 100%; height: 2.3846rem; padding: 0 0.6154rem;
      border: 0.0769rem solid var(--line); border-radius: 0.4615rem; background: #fff; color: var(--ink);
    }.kb-root .field input:focus, .kb-root .field select:focus { outline: 0.1538rem solid var(--teal-soft); border-color: var(--teal); }.kb-root .field-note { margin-top: 0.3846rem; color: var(--muted); font-size: 0.8462rem; line-height: 1.4; }.kb-root .check-row {
      display: flex; align-items: flex-start; gap: 0.6154rem; padding: 0.5385rem 0.6154rem;
      border: 0.0769rem solid var(--line); border-radius: 0.4615rem; margin-bottom: 0.4615rem; cursor: pointer;
    }.kb-root .check-row:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }.kb-root .check-row input { margin: 0.1538rem 0 0; accent-color: var(--teal); }.kb-root .check-row b { font-weight: 620; display: block; }.kb-root .check-row small { color: var(--muted); font-size: 0.8462rem; }.kb-root /* corridors preview */
    .corridor {
      display: grid; grid-template-columns: 0.3077rem 1fr; gap: 0.6923rem; align-items: center;
      padding: 0.5385rem 0; border: 0.0769rem solid var(--soft-line); border-radius: 0.4615rem;
      margin-bottom: 0.3846rem; background: #fbfcfd; overflow: hidden;
    }.kb-root .corridor i.bar { height: 100%; align-self: stretch; }.kb-root .corridor b { font-weight: 640; font-size: 0.9231rem; }.kb-root .corridor small { display: block; color: var(--muted); font-size: 0.8462rem; }.kb-root /* stats */

    /* element rows */
    .elem {
      display: grid; grid-template-columns: 1.6923rem 1fr auto; align-items: center; gap: 0.6154rem;
      padding: 0.4615rem 0.5385rem; border: 0.0769rem solid transparent; border-radius: 0.4615rem; cursor: pointer;
    }.kb-root .elem:hover { background: #f6f8fa; }.kb-root .elem.active { border-color: var(--teal); background: var(--teal-soft); }.kb-root .elem-badge {
      width: 1.6923rem; height: 1.6923rem; display: grid; place-items: center; border-radius: 50%;
      font-size: 0.8077rem; font-weight: 700; color: #fff; background: var(--teal);
    }.kb-root .elem-badge.free { background: var(--amber); }.kb-root .elem-badge.via { background: #7a8794; }.kb-root .elem-badge.asset { background: var(--coral); border-radius: 0.3077rem; }.kb-root .elem-badge.block { background: #b0392a; }.kb-root .elem-name { font-weight: 600; }.kb-root .asset-line { display: flex; align-items: baseline; gap: 0.3077rem; min-width: 0; }.kb-root
    .asset-line .asset-name { flex: 1 1 auto; width: auto; min-width: 3rem; margin-bottom: 0; }.kb-root
    .asset-line .elem-meta { white-space: nowrap; }.kb-root .asset-name {
      width: 100%; height: 1.9231rem; padding: 0 0.4615rem; margin-bottom: 0.1538rem;
      border: 0.0769rem solid transparent; border-radius: 0.3846rem; background: transparent;
      color: var(--ink); font-weight: 600;
    }.kb-root .asset-name::placeholder { color: #9aa7b2; font-weight: 500; font-style: italic; }.kb-root .asset-name:hover { border-color: var(--line); background: #fff; }.kb-root .asset-name:focus { outline: 0.1538rem solid var(--teal-soft); border-color: var(--teal); background: #fff; }.kb-root .elem-meta { color: var(--muted); font-size: 0.8462rem; }.kb-root .elem-del {
      width: 1.6923rem; height: 1.6923rem; display: grid; place-items: center; border: 0; border-radius: 0.3846rem;
      background: transparent; color: var(--muted); cursor: pointer;
    }.kb-root .elem-del:hover { background: var(--coral-soft); color: var(--coral); }.kb-root .elem-del svg { width: 1rem; height: 1rem; }.kb-root .empty-note { color: var(--muted); font-size: 0.9231rem; line-height: 1.45; padding: 0.1538rem 0; }.kb-root /* buttons */
    .primary-btn, .kb-root .secondary-btn {
      height: 2.5385rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5385rem;
      border-radius: 0.4615rem; cursor: pointer; font-weight: 620;
    }.kb-root .primary-btn { flex: 1; border: 0; background: var(--brand); color: #fff; }.kb-root .primary-btn:hover { background: #0a4c62; }.kb-root .primary-btn:disabled { background: #b9c4cc; cursor: not-allowed; }.kb-root .secondary-btn { padding: 0 0.9231rem; border: 0.0769rem solid var(--line); background: #fff; color: var(--ink); }.kb-root .secondary-btn:hover { border-color: #c3ced7; background: #f6f8fa; }.kb-root .secondary-btn.wide { width: 100%; }.kb-root .primary-btn svg, .kb-root .secondary-btn svg { width: 1.1538rem; height: 1.1538rem; }.kb-root .btn-row { display: flex; gap: 0.5385rem; }.kb-root #kb-editor { display: flex; flex-direction: column; flex: 1 0 auto; }.kb-root .empty-state {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 1.1538rem; padding: 2.4615rem 2.1538rem; text-align: center;
    }.kb-root .empty-glyph {
      width: 3.5385rem; height: 3.5385rem; display: grid; place-items: center;
      border-radius: 50%; background: var(--teal-soft); color: var(--teal);
    }.kb-root .empty-glyph svg { width: 1.6154rem; height: 1.6154rem; }.kb-root .empty-title { font-weight: 660; margin-bottom: 0.3846rem; }.kb-root .empty-text { color: var(--muted); font-size: 0.9615rem; line-height: 1.5; max-width: 19.2308rem; }.kb-root .empty-state .primary-btn { flex: 0 0 auto; padding: 0 1.2308rem; }.kb-root .panel-foot {
      /* Sticky for the same reason as .panel-head: Færdig ends the edit, and
         with many stop lines it sat below the fold. */
      position: sticky; bottom: 0; z-index: 6;
      margin-top: auto; padding: 0.9231rem 1.0769rem;
      border-top: 0.0769rem solid var(--line); background: #fbfcfd;
    }
.kb-root .panel-head {
      /* Stays put while the panel scrolls: with eleven stop lines the way out
         of the editor scrolled off the top, and the × is the only way to close
         a stretch and start another one (owner). */
      position: sticky; top: 0; z-index: 6;
      display: flex; align-items: center; gap: 0.6154rem;
      padding: 0.6923rem 0.6154rem 0.6923rem 1.0769rem;
      border-bottom: 0.0769rem solid var(--line); background: #fbfcfd;
    }
/* Confirmation dialog — the shape of the app's dmc.Modal (see delete-modal in
   frontend/layout.py), because this module used to ask with window.confirm,
   which the browser draws in its own language and cannot be themed. The top
   rule takes the module accent so the question belongs to Modelbygger. */
.kb-root .kb-dialog-back { position: fixed; inset: 0; z-index: 7500; display: flex; align-items: center; justify-content: center; padding: 1.5385rem; background: rgb(15 30 45 / 45%); }
.kb-root .kb-dialog { width: min(29.2308rem, 100%); padding: 1.2308rem 1.3846rem 1.0769rem; background: #fff; border-radius: 0.6154rem; border-top: 0.2308rem solid var(--feature-color, var(--brand)); box-shadow: 0 1.5385rem 3.0769rem rgb(15 30 45 / 25%); }
.kb-root .kb-dialog-title { margin-bottom: 0.4615rem; font-size: 1.0769rem; font-weight: 700; color: var(--ink); }
.kb-root .kb-dialog-body { color: #4a5865; font-size: 0.9231rem; line-height: 1.5; }
.kb-root .kb-dialog-body p { margin: 0 0 0.4615rem; }
.kb-root .kb-dialog-body p:last-child { margin-bottom: 0; }
.kb-root .kb-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5385rem; margin-top: 1.0769rem; }
.kb-root .kb-dialog-actions button { height: 2.3846rem; padding: 0 0.9231rem; border: 0; border-radius: 0.4615rem; font: inherit; font-weight: 650; cursor: pointer; }
.kb-root .kb-dialog-cancel { background: transparent; color: var(--muted); }
.kb-root .kb-dialog-cancel:hover { background: var(--canvas); color: var(--ink); }
.kb-root .kb-dialog-confirm { background: var(--feature-color, var(--brand)); color: #fff; }
.kb-root .kb-dialog-confirm.danger { background: var(--coral); }
.kb-root .kb-dialog-confirm:hover { filter: brightness(0.94); }
.kb-root .panel-head .head-title { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-root .panel-close { flex: 0 0 auto; width: 2.1538rem; height: 2.1538rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0.4615rem; background: transparent; color: var(--muted); cursor: pointer; }
.kb-root .panel-close:hover { background: var(--canvas); color: var(--ink); }
.kb-root .panel-close svg { width: 1.2308rem; height: 1.2308rem; }.kb-root .edit-status { margin-bottom: 0.6154rem; color: var(--muted); font-size: 0.8462rem; line-height: 1.4; }.kb-root .edit-status.changed { color: #0b5f63; }.kb-root /* ---------- map ---------- */
    .map-wrap { grid-column: 2; grid-row: 1; position: relative; overflow: hidden; background: #e8eef2; }.kb-root #kb-map { position: absolute; inset: 0; }.kb-root .map-wrap.basemap-off .leaflet-tile-pane { display: none; }.kb-root .map-toolbar {
      position: absolute; top: 0.7692rem; left: 0.7692rem; right: 0.7692rem; z-index: 500;
      display: flex; gap: 0.4615rem; align-items: center; pointer-events: none; flex-wrap: wrap;
    }.kb-root .tool-group {
      display: flex; gap: 0.1538rem; padding: 0.2308rem; border-radius: 0.6154rem; background: rgb(255 255 255 / 96%);
      box-shadow: 0 0.0769rem 0.2308rem rgb(15 30 45 / 18%); pointer-events: auto;
    }.kb-root .map-tool {
      height: 2.1538rem; display: inline-flex; align-items: center; gap: 0.4615rem; padding: 0 0.6923rem;
      border: 0; border-radius: 0.4615rem; background: transparent; color: #4a5865; cursor: pointer; white-space: nowrap;
    }.kb-root .map-tool svg { width: 1.1538rem; height: 1.1538rem; }.kb-root .map-tool:hover { background: #eef2f5; }.kb-root .map-tool:disabled { opacity: .35; cursor: default; background: transparent; }.kb-root .map-tool.active { background: var(--brand); color: #fff; }.kb-root .map-tool.icon-only { padding: 0 0.5385rem; }.kb-root .tool-sep { width: 0.0769rem; margin: 0.3077rem 0.1538rem; background: var(--line); }.kb-root .map-hint {
      position: absolute; bottom: 0.7692rem; left: 0.7692rem; z-index: 500;
      max-width: 30.7692rem; padding: 0.6154rem 0.8462rem; border-radius: 0.5385rem;
      background: rgb(6 53 69 / 94%); color: #eaf2f5; line-height: 1.4;
      box-shadow: 0 0.1538rem 0.4615rem rgb(15 30 45 / 25%);
    }.kb-root .map-hint b { color: #fff; }.kb-root .map-hint kbd { padding: 0.0769rem 0.3846rem; border-radius: 0.3077rem; background: rgb(255 255 255 / 16%); font-size: 0.8462rem; font-weight: 700; }.kb-root .map-legend {
      position: absolute; bottom: 0.7692rem; right: 4.3077rem; z-index: 500;
      padding: 0.6154rem 0.7692rem; border-radius: 0.5385rem; background: rgb(255 255 255 / 95%);
      box-shadow: 0 0.0769rem 0.2308rem rgb(15 30 45 / 18%); display: grid; gap: 0.3846rem;
    }.kb-root .legend-row { display: flex; align-items: center; gap: 0.5385rem; color: #4a5865; font-size: 0.8846rem; }.kb-root .legend-swatch { width: 1.3846rem; height: 0.2308rem; border-radius: 0.1538rem; background: var(--teal); flex: 0 0 auto; }.kb-root .legend-swatch.reverse { background: var(--od); }.kb-root .legend-swatch.idle { background: var(--idle); }.kb-root .legend-swatch.centre { background: none; height: 0; border-top: 0.1538rem dashed #7a8794; border-radius: 0; }.kb-root .legend-swatch.free { background: none; height: 0; border-top: 0.2308rem dashed var(--amber); border-radius: 0; }.kb-root .legend-swatch.bike { background: #d05245; }.kb-root .legend-swatch.stop { background: var(--coral); width: 0.2308rem; height: 1.0769rem; }.kb-root /* map markers */
    .anchor-pin {
      width: 23px; height: 23px; border-radius: 50%; border: 3px solid #fff;
      background: var(--teal); box-shadow: 0 1px 4px rgb(15 30 45 / 45%);
      display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800;
    }.kb-root .anchor-pin.end { background: var(--brand); }.kb-root .anchor-pin.via { width: 17px; height: 17px; background: #7a8794; border-width: 2.5px; }.kb-root .anchor-pin.free { width: 14px; height: 14px; border-width: 2.5px; background: var(--amber); }.kb-root .anchor-pin.selected { outline: 2.5px solid rgb(18 142 147 / 45%); outline-offset: 1px; }.kb-root .asset-handle {
      width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff;
      background: var(--coral); box-shadow: 0 1px 3px rgb(15 30 45 / 45%); cursor: grab;
      transition: width .12s ease, height .12s ease, box-shadow .12s ease;
    }.kb-root .asset-handle.selected { background: #a8321f; box-shadow: 0 0 0 4px rgb(217 95 75 / 30%); }.kb-root
    /* The paint is 11px; the TARGET is 24px. A stop line is placed by eye at
       high zoom, and a click that misses the dot used to add a second stop
       line — so the handle grows under the cursor to say it can be grabbed,
       and addStopLine treats a near miss as "select this one". */
    .asset-hit {
      width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
      cursor: grab;
    }.kb-root .asset-hit:hover .asset-handle {
      width: 15px; height: 15px; box-shadow: 0 0 0 5px rgb(217 95 75 / 28%);
    }.kb-root .asset-suggest {
      /* The row is a three-column grid; without this the chips land in its
         1.7rem first column and each one wraps onto a line of its own. */
      grid-column: 1 / -1;
      display: flex; flex-wrap: wrap; gap: 0.2308rem; margin: 0.1538rem 0 0 2.3077rem;
    }.kb-root .asset-suggest button {
      white-space: nowrap; padding: 0.1538rem 0.4615rem; border: 0.0769rem solid var(--line); border-radius: 0.6923rem;
      background: #fff; color: var(--muted); font-size: 0.8462rem; cursor: pointer;
    }.kb-root .asset-suggest button:hover { border-color: var(--brand); color: var(--ink); }.kb-root .asset-hit:active { cursor: grabbing; }.kb-root .asset-hit:active .asset-handle {
      width: 15px; height: 15px; box-shadow: 0 0 0 6px rgb(168 50 31 / 35%);
    }.kb-root /* scrollable stretch list — keeps "Ny strækning" reachable with many routes */
    .route-scroll { max-height: 22.4615rem; overflow-y: auto; margin: -0.1538rem -0.1538rem 0.4615rem; padding: 0.1538rem; }.kb-root .route-scroll::-webkit-scrollbar { width: 0.6923rem; }.kb-root .route-scroll::-webkit-scrollbar-thumb { background: #ccd6dd; border-radius: 0.3846rem; }.kb-root .route-scroll::-webkit-scrollbar-thumb:hover { background: #b3c0c9; }.kb-root /* right-click menu — same actions as the Mobility Flow map */
    .ctx-menu {
      position: absolute; z-index: 900; display: none; min-width: 14.3077rem; padding: 0.3077rem;
      border: 0.0769rem solid var(--line); border-radius: 0.5385rem; background: #fff;
      box-shadow: 0 0.3077rem 1.0769rem rgb(15 30 45 / 22%);
    }.kb-root .ctx-menu button {
      width: 100%; display: flex; align-items: center; gap: 0.6154rem; padding: 0.5385rem 0.6923rem;
      border: 0; border-radius: 0.3846rem; background: transparent; color: var(--ink);
      cursor: pointer; text-align: left;
    }.kb-root .ctx-menu button:hover { background: #eef2f5; }.kb-root .ctx-menu button svg { width: 1.0769rem; height: 1.0769rem; color: var(--muted); }.kb-root .ctx-coords {
      padding: 0.4615rem 0.6923rem 0.5385rem; color: var(--muted); font-size: 0.8462rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border-bottom: 0.0769rem solid var(--soft-line);
      margin-bottom: 0.2308rem;
    }.kb-root .vertex-dot {
      width: 9px; height: 9px; border-radius: 50%; border: 2px solid #12627a;
      background: #fff; box-shadow: 0 1px 2px rgb(15 30 45 / 35%); cursor: pointer;
    }.kb-root .vertex-dot:hover { border-color: var(--coral); background: var(--coral-soft); transform: scale(1.25); }.kb-root .vertex-dot.moved { background: var(--amber); border-color: #fff; }.kb-root .vertex-dot.node {
      width: 13px; height: 13px; border-width: 3px; border-color: #0d3f52; background: #fff;
    }.kb-root .vertex-dot.node.moved { background: var(--amber); border-color: #fff; }.kb-root .vertex-dot.dir { border-width: 2px; }.kb-root .vertex-dot.dir.moved { background: var(--amber); }.kb-root .recipe {
      margin: 0; padding: 0.7692rem 0.8462rem; border-radius: 0.5385rem; background: #0f2a35; color: #cfe3ea;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8462rem;
      line-height: 1.5; max-height: 23.0769rem; overflow: auto; white-space: pre;
    }.kb-root .recipe .k { color: #7fc8d8; }.kb-root .recipe .s { color: #b9e4a8; }.kb-root .recipe .n { color: #f0c674; }.kb-root .warn { display: flex; gap: 0.6154rem; padding: 0.6154rem 0.7692rem; border-radius: 0.4615rem; background: var(--amber-soft); color: #7a4f06; line-height: 1.4; }.kb-root .warn svg { width: 1.1538rem; height: 1.1538rem; flex: 0 0 auto; margin-top: 0.0769rem; }.kb-root .warn.info { background: var(--teal-soft); color: #0b5f63; }.kb-root .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 0.7692rem; padding: 0.5385rem 0; }.kb-root .toggle-row span { color: var(--ink); }.kb-root .toggle-row small { display: block; color: var(--muted); font-size: 0.8462rem; }.kb-root .switch { position: relative; width: 2.6154rem; height: 1.4615rem; flex: 0 0 auto; }.kb-root .switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }.kb-root .switch i { position: absolute; inset: 0; border-radius: 76.8462rem; background: #ccd6dd; pointer-events: none; transition: background .15s; }.kb-root .switch i::after {
      content: ""; position: absolute; top: 0.1538rem; left: 0.1538rem; width: 1.1538rem; height: 1.1538rem;
      border-radius: 50%; background: #fff; transition: transform .15s;
    }.kb-root .switch input:checked + i { background: var(--teal); }.kb-root .switch input:checked + i::after { transform: translateX(1.1538rem); }

/* "bruges nu" — which services the stretch is in RIGHT NOW.
   On the card rather than in a sentence: the sentence could not name Grøn bølge
   (it is a flag, not a member of modules_enabled, so a Grøn bølge-only stretch
   read "ingen tjenester"), and a list grows a clause per service. The marker is
   driven by `sourceModules`, NOT by the checkbox, so it keeps telling the truth
   after the planner ticks a service the stretch is not in yet. */
.kb-root .check-row .svc-now { display: none; }
.kb-root .check-row.in-use .svc-now {
    display: inline-block;
    margin-left: 0.4615rem;
    padding: 0.0769rem 0.3846rem;
    border: 0.0769rem solid var(--teal);
    border-radius: 0.6923rem;
    color: var(--teal);
    background: var(--teal-soft);
    font-size: 0.6923rem;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* The route lists fill the panel instead of stopping at a fixed height.
   `.route-scroll` capped every list at 22.46rem whatever the screen, so on a
   tall display the database list stopped a third of the way down and the rest
   of the panel was blank — which is what the owner was looking at. `.panel` is
   already a flex column, so the database section only has to be allowed to
   grow, and its scroll area to follow it.

   The cap stays as a MINIMUM instead: the list still reaches a usable size on a
   short screen, where flex alone would squeeze it to nothing. */
.kb-root .panel.left #kb-db-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.kb-root .panel.left #kb-db-section .route-scroll {
    flex: 1 1 auto;
    max-height: none;
    min-height: 11.5385rem;
}
/* The submission queue keeps a modest ceiling — it holds the few stretches
   waiting to be sent, and should not push the database list off the screen. */
.kb-root .panel.left .section:first-child .route-scroll { max-height: 16.9231rem; }

/* Keep a scrolled-to stop line clear of the two sticky bars.

   `.panel-head` and `.panel-foot` are both `position: sticky` and sit ABOVE the
   scrolling content (z-index 6). `scrollIntoView({block:"nearest"})` aligns the
   row flush with the scroll container's edge, which puts it underneath the
   Færdig bar — visible to the browser, hidden to the planner. That is the "stays
   one below where the scroll stops" the owner reported.

   scroll-margin is the mechanism built for exactly this: it does not affect
   layout, only where scrolling decides the element's edges are.
   The values are the measured bar heights plus a little air, in rem so they
   track the bars themselves — both are sized in rem, and `html` is
   `font-size: clamp(13px, 0.9vw, 26px)`, so a px margin would drift from the
   bar it is clearing on a different screen. Measured in the browser at
   16 px/rem: footer 101 px (6.31rem), header 58 px (3.63rem). */
.kb-root .panel.right .elem {
    scroll-margin-top: 4.25rem;
    scroll-margin-bottom: 7rem;
}