/*
 * Application shell: the same skeleton in every mode. Top bar with the mode switcher, object panel on
 * the left, workspace in the centre, inspector on the right, log drawer and status bar at the bottom.
 * Below 1100 px the inspector is a sheet over the workspace, below 760 px the object panel too.
 */
.dm-shell {
  display: grid;
  height: 100vh;
  grid-template-columns: var(--dm-panel-w) minmax(0, 1fr) var(--dm-inspector-w);
  grid-template-rows: var(--dm-topbar-h) minmax(0, 1fr) auto var(--dm-statusbar-h);
  grid-template-areas: "top top top" "left center right" "drawer drawer drawer" "status status status";
  background: var(--dm-bg);
}
.dm-shell[data-left="closed"] { grid-template-columns: 0 minmax(0, 1fr) var(--dm-inspector-w); }
.dm-shell[data-right="closed"] { grid-template-columns: var(--dm-panel-w) minmax(0, 1fr) 0; }
.dm-shell[data-left="closed"][data-right="closed"] { grid-template-columns: 0 minmax(0, 1fr) 0; }
.dm-shell[data-left="closed"] .dm-left, .dm-shell[data-right="closed"] .dm-right { display: none; }

.dm-topbar { grid-area: top; display: flex; align-items: center; gap: var(--dm-s-2); padding: 0 var(--dm-s-3); background: var(--dm-surface); border-bottom: 1px solid var(--dm-border); min-width: 0; }
.dm-brand { display: flex; align-items: center; gap: var(--dm-s-2); font-weight: var(--dm-weight-semibold); padding-right: var(--dm-s-3); margin-right: var(--dm-s-1); border-right: 1px solid var(--dm-border); color: var(--dm-text); white-space: nowrap; }
.dm-brand dm-icon { color: var(--dm-accent); }
.dm-modes { display: flex; gap: 2px; min-width: 0; overflow: hidden; }
.dm-mode-btn {
  display: inline-flex; align-items: center; gap: var(--dm-s-2); height: 32px; padding: 0 var(--dm-s-3); border-radius: var(--dm-radius-sm);
  border: 0; background: none; color: var(--dm-text-muted); font-size: var(--dm-text-sm); font-weight: var(--dm-weight-medium); cursor: pointer; white-space: nowrap;
}
.dm-mode-btn:hover { background: var(--dm-surface-hover); color: var(--dm-text); }
.dm-mode-btn[aria-current="page"] { background: var(--dm-accent-soft); color: var(--dm-accent); }
.dm-topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--dm-s-1); flex: 0 0 auto; }
/* Status bar: save state, storage, the selected dataset, engines, network, panel toggles and the log button */
.dm-statusbar { grid-area: status; display: flex; align-items: center; gap: var(--dm-s-2); padding: 0 var(--dm-s-2) 0 var(--dm-s-3); background: var(--dm-surface); border-top: 1px solid var(--dm-border); font-size: var(--dm-text-xs); color: var(--dm-text-muted); min-width: 0; white-space: nowrap; }
.dm-statusbar .dm-sb { display: inline-flex; align-items: center; gap: var(--dm-s-1); min-width: 0; height: 22px; }
.dm-statusbar .dm-sb[data-state="unsaved"] { color: var(--dm-warn); }
.dm-statusbar .dm-sb[data-state="saving"] dm-icon { animation: dm-spin 0.9s linear infinite; }
.dm-statusbar .dm-sb-btn { padding: 0 var(--dm-s-2); border: 0; border-radius: var(--dm-radius-sm); background: none; color: inherit; font: inherit; cursor: pointer; }
.dm-statusbar .dm-sb-btn:hover { background: var(--dm-surface-hover); color: var(--dm-text); }
.dm-statusbar .dm-sb-sep { width: 1px; height: 14px; background: var(--dm-border); flex: 0 0 auto; }
.dm-statusbar .dm-sb-grow { flex: 1 1 auto; min-width: 0; }
.dm-statusbar .dm-sb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dm-text-faint); flex: 0 0 auto; }
.dm-statusbar .dm-sb[data-engine="ready"] .dm-sb-dot { background: var(--dm-ok); }
.dm-statusbar .dm-sb[data-engine="starting"] .dm-sb-dot, .dm-statusbar .dm-sb[data-engine="busy"] .dm-sb-dot { background: var(--dm-warn); }
.dm-statusbar .dm-sb[data-engine="error"] .dm-sb-dot { background: var(--dm-error); }
.dm-statusbar .dm-sb[data-net="active"] .dm-sb-dot { background: var(--dm-accent); }
.dm-statusbar dm-button button { height: 22px; min-height: 0; padding: 0 var(--dm-s-2); font-size: var(--dm-text-xs); }

.dm-left, .dm-right { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--dm-surface); overflow: hidden; }
/* Splitters sit on the panels' inner edges; the shell persists the widths they set */
dm-splitter { position: absolute; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; touch-action: none; }
dm-splitter[for="left"] { right: 0; }
dm-splitter[for="right"] { left: 0; }
dm-splitter[for="drawer"] { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 6px; cursor: row-resize; }
dm-splitter:hover, dm-splitter[data-active] { background: var(--dm-accent-soft); }
dm-splitter:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--dm-accent); }
.dm-left { grid-area: left; border-right: 1px solid var(--dm-border); }
.dm-right { grid-area: right; border-left: 1px solid var(--dm-border); }
.dm-pane-head { display: flex; align-items: center; justify-content: space-between; gap: var(--dm-s-2); height: 40px; padding: 0 var(--dm-s-4); font-size: var(--dm-text-xs); font-weight: var(--dm-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--dm-text-muted); border-bottom: 1px solid var(--dm-border); flex: 0 0 auto; }
.dm-pane-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--dm-s-3); display: flex; flex-direction: column; gap: var(--dm-s-3); }

.dm-center { grid-area: center; min-width: 0; min-height: 0; overflow: auto; padding: var(--dm-s-5); display: flex; flex-direction: column; gap: var(--dm-s-4); }
.dm-center-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--dm-s-3); }

.dm-drawer { position: relative; grid-area: drawer; display: flex; flex-direction: column; background: var(--dm-surface); border-top: 1px solid var(--dm-border); min-height: 0; }
.dm-drawer .dm-log { height: var(--dm-drawer-h); overflow: auto; padding: var(--dm-s-2) var(--dm-s-4); font-family: var(--dm-font-mono); font-size: var(--dm-text-xs); }
.dm-shell[data-drawer="closed"] .dm-drawer { display: none; }
.dm-log li { display: flex; gap: var(--dm-s-3); padding: 1px 0; }
.dm-log time { color: var(--dm-text-faint); flex: 0 0 auto; }
.dm-log li[data-kind="error"] { color: var(--dm-error); }
.dm-log li[data-kind="warn"] { color: var(--dm-warn); }
.dm-log li[data-kind="ok"] { color: var(--dm-ok); }

/* Page scaffolding inside the centre area */
.dm-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--dm-s-3); flex-wrap: wrap; }
.dm-page-head h1 { font-size: var(--dm-text-xl); display: flex; align-items: center; gap: var(--dm-s-2); }
.dm-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--dm-s-3) var(--dm-s-4); }
.dm-two-col { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: var(--dm-s-4); min-height: 0; flex: 1 1 auto; }
.dm-table-wrap { min-height: 320px; flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.dm-toolbar { display: flex; align-items: center; gap: var(--dm-s-3); flex-wrap: wrap; }
.dm-toolbar dm-input { min-width: 240px; }
.dm-columns-table { width: 100%; font-size: var(--dm-text-sm); border-collapse: collapse; }
.dm-columns-table th { text-align: left; font-weight: var(--dm-weight-semibold); color: var(--dm-text-muted); font-size: var(--dm-text-xs); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--dm-s-2); border-bottom: 1px solid var(--dm-border); }
.dm-columns-table td { padding: var(--dm-s-1) var(--dm-s-2); border-bottom: 1px solid var(--dm-border); vertical-align: middle; }
.dm-columns-table dm-input, .dm-columns-table dm-select { min-width: 120px; }
.dm-columns-table .dm-num { text-align: right; font-variant-numeric: tabular-nums; }
.dm-success { display: flex; flex-direction: column; gap: var(--dm-s-3); align-items: flex-start; padding: var(--dm-s-5); background: var(--dm-ok-soft); border: 1px solid var(--dm-ok); border-radius: var(--dm-radius-md); }
.dm-stat { display: flex; flex-direction: column; gap: 2px; }
.dm-stat .dm-stat-value { font-size: var(--dm-text-lg); font-weight: var(--dm-weight-semibold); font-variant-numeric: tabular-nums; }
.dm-stat .dm-stat-label { font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
.dm-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--dm-s-3); }
.dm-top-values li { display: flex; justify-content: space-between; gap: var(--dm-s-2); font-size: var(--dm-text-sm); padding: 2px 0; }

/* Tablets and narrow windows: the inspector is a sheet from the right edge (data-right="sheet"), the mode buttons
   show icons only (text on the active one), and touch targets grow. */
@media (max-width: 1099px) {
  .dm-shell, .dm-shell[data-right="closed"], .dm-shell[data-right="sheet"] { grid-template-columns: var(--dm-panel-w) minmax(0, 1fr) 0; }
  .dm-shell[data-left="closed"], .dm-shell[data-left="closed"][data-right="closed"] { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .dm-shell .dm-right { display: flex; position: fixed; top: var(--dm-topbar-h); bottom: var(--dm-statusbar-h); right: 0; width: min(var(--dm-sheet-w), 90vw); transform: translateX(100%); box-shadow: var(--dm-shadow-lg); z-index: var(--dm-z-sheet); transition: transform 0.15s ease; }
  .dm-shell[data-right="sheet"] .dm-right { transform: none; }
  .dm-right dm-splitter { display: none; }
  .dm-mode-btn span { display: none; }
  .dm-mode-btn[aria-current="page"] span { display: inline; }
  .dm-mode-btn, .dm-topbar-right dm-button button { min-height: 44px; }
  .dm-center { padding: var(--dm-s-4); }
}
/* Phones and portrait tablets: the object panel is a sheet too (data-left="sheet") and the status bar keeps only the essentials */
@media (max-width: 759px) {
  .dm-shell, .dm-shell[data-left="closed"], .dm-shell[data-left="sheet"], .dm-shell[data-right="closed"], .dm-shell[data-left="closed"][data-right="closed"] { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .dm-shell .dm-left { display: flex; position: fixed; top: var(--dm-topbar-h); bottom: var(--dm-statusbar-h); left: 0; width: min(var(--dm-sheet-w), 90vw); transform: translateX(-100%); box-shadow: var(--dm-shadow-lg); z-index: var(--dm-z-sheet); transition: transform 0.15s ease; }
  .dm-shell[data-left="sheet"] .dm-left { transform: none; }
  .dm-left dm-splitter { display: none; }
  .dm-drawer dm-splitter { display: none; }
  .dm-center { padding: var(--dm-s-3); }
  .dm-statusbar .dm-sb-optional { display: none; }
}

/* R console (Analysera) */
.dm-editor-wrap { flex: 0 0 auto; }
.dm-console { flex: 1 1 auto; min-height: 200px; overflow: auto; padding: var(--dm-s-3) var(--dm-s-4); background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); font-family: var(--dm-font-mono); font-size: var(--dm-text-sm); display: flex; flex-direction: column; gap: var(--dm-s-2); }
.dm-console pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dm-console-input { color: var(--dm-accent); border-left: 3px solid var(--dm-accent); padding-left: var(--dm-s-3); margin-top: var(--dm-s-2) !important; }
.dm-console-stderr { color: var(--dm-text-muted); }
.dm-console-error { color: var(--dm-error); background: var(--dm-error-soft); padding: var(--dm-s-2) var(--dm-s-3); border-radius: var(--dm-radius-sm); }
.dm-console-meta { color: var(--dm-text-faint); font-size: var(--dm-text-xs); }
.dm-console-figure { margin: var(--dm-s-2) 0; display: flex; flex-direction: column; gap: var(--dm-s-2); align-items: flex-start; }
.dm-console-plot { width: 672px; max-width: 100%; height: auto; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); background: white; }
/* plotly figures (drawn by plotly.js into a div) fill their holder; the holder's height is set per figure. */
.dm-plotly { width: 100%; max-width: 100%; }
.dm-console-plot.dm-plotly { width: 672px; }
.dm-console-dataset { display: flex; align-items: center; gap: var(--dm-s-2); font-family: var(--dm-font-sans); color: var(--dm-ok); }

/* Regex tab (Analysera): values with their matches marked, the syntax summary and code snippets */
.dm-regex-preview { flex: 1 1 auto; min-height: 200px; overflow: auto; background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); }
.dm-regex-preview .dm-columns-table td { font-variant-numeric: tabular-nums; vertical-align: top; }
.dm-regex-preview .dm-columns-table .dm-num { text-align: right; }
.dm-regex-value { font-family: var(--dm-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.dm-regex-hit { background: var(--dm-warn-soft); color: var(--dm-text); box-shadow: inset 0 -2px 0 var(--dm-warn); border-radius: 2px; }
.dm-regex-syntax { display: grid; grid-template-columns: auto 1fr; gap: var(--dm-s-1) var(--dm-s-3); margin: 0; font-size: var(--dm-text-sm); }
.dm-regex-syntax dt { font-family: var(--dm-font-mono); color: var(--dm-accent); }
.dm-regex-syntax dd { margin: 0; color: var(--dm-text-muted); }
.dm-regex-snippet { margin: 0; padding: var(--dm-s-2); font-family: var(--dm-font-mono); font-size: var(--dm-text-xs); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--dm-surface-2); border-radius: var(--dm-radius-sm); }
.dm-console-empty { font-family: var(--dm-font-sans); }

/* Bearbeta: operations palette, previews, cell editing */
.dm-op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--dm-s-2); }
.dm-op-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--dm-s-3); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); background: var(--dm-surface); color: var(--dm-text); text-align: left; cursor: pointer; font: inherit; }
.dm-op-tile:hover { border-color: var(--dm-accent); background: var(--dm-accent-soft); }
.dm-op-tile:disabled { cursor: not-allowed; opacity: 0.6; border-color: var(--dm-border); background: none; }
.dm-op-tile .dm-help { font-size: var(--dm-text-xs); }
.dm-columns-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--dm-s-1) var(--dm-s-3); max-height: 240px; overflow: auto; padding: var(--dm-s-2); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); }
.dm-op-preview { min-height: 1.5em; }
.dm-op-samples { display: flex; flex-direction: column; gap: 2px; margin-top: var(--dm-s-1); font-family: var(--dm-font-mono); font-size: var(--dm-text-xs); }
.dm-recipe-steps { padding-left: var(--dm-s-5); display: flex; flex-direction: column; gap: var(--dm-s-1); font-size: var(--dm-text-sm); }
dm-table .dm-td-active { outline: 2px solid var(--dm-accent); outline-offset: -2px; }
dm-table .dm-cell-editor { width: 100%; height: 28px; margin: 0; padding: 0 var(--dm-s-2); border: 2px solid var(--dm-accent); border-radius: 3px; font: inherit; background: var(--dm-surface); color: var(--dm-text); box-sizing: border-box; }

/* Dataset tree in the object panel: folders, filter and sort, check boxes for several datasets */
.dm-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dm-s-2); border-radius: var(--dm-radius-sm); }
.dm-list-head.dm-drop-target, .dm-tree-folder.dm-drop-target { outline: 2px dashed var(--dm-accent); outline-offset: -2px; }
.dm-list-tools { display: flex; gap: var(--dm-s-2); align-items: center; }
.dm-list-tools dm-input { flex: 1 1 auto; }
.dm-list-tools .dm-field { height: 30px; font-size: var(--dm-text-sm); }
.dm-list-tools dm-select { flex: 0 0 auto; }
.dm-tree .dm-list-item, .dm-tree .dm-tree-row { padding-left: calc(var(--dm-s-2) + var(--dm-depth, 0) * var(--dm-s-5)); }
.dm-tree-row { display: flex; align-items: center; gap: var(--dm-s-1); border-radius: var(--dm-radius-sm); }
.dm-tree-row > input[type="checkbox"] { margin: 0 0 0 var(--dm-s-1); flex: 0 0 auto; accent-color: var(--dm-accent); }
.dm-tree-row > .dm-list-item { flex: 1 1 auto; min-width: 0; padding-left: var(--dm-s-2); }
/* A source with a button beside it (Inhämta: added sources with Ta bort, the catalogue with Lägg till). */
.dm-list-row { display: flex; align-items: center; gap: var(--dm-s-1); }
.dm-list-row > .dm-list-item { flex: 1 1 auto; min-width: 0; }
.dm-tree-folder { font-weight: var(--dm-weight-medium); }
.dm-tree-folder .dm-tree-count { margin-left: auto; color: var(--dm-text-faint); font-size: var(--dm-text-xs); font-variant-numeric: tabular-nums; }
.dm-list-actions { margin-top: auto; padding-top: var(--dm-s-3); display: flex; flex-direction: column; gap: var(--dm-s-2); align-items: flex-start; }
.dm-chip-static { cursor: default; margin-right: var(--dm-s-1); }

/* Dela, Enheter: the QR code on a white field, the verification code and the device code */
.dm-devices-qr { display: flex; justify-content: center; padding: var(--dm-s-3); background: var(--dm-qr-bg); border-radius: var(--dm-radius-md); width: fit-content; }
.dm-devices-qr svg { display: block; width: 240px; height: 240px; }
.dm-devices-code { font-family: var(--dm-font-mono); font-size: var(--dm-text-2xl); letter-spacing: 0.2em; font-weight: 600; }
.dm-devices-identity { font-family: var(--dm-font-mono); font-size: var(--dm-text-sm); word-break: break-all; max-width: 100%; }
.dm-devices-status { font-weight: 500; }
.dm-devices-status[data-state="connected"] { color: var(--dm-ok); }
.dm-devices-status[data-state="failed"] { color: var(--dm-error); }

/* Söka, Fråga: rows of the visual query and the generated SQL */
.dm-fraga-row { align-items: flex-end; }
.dm-fraga-ref { font-family: var(--dm-font-mono); font-size: var(--dm-text-sm); align-self: center; }
.dm-fraga-group { padding: var(--dm-s-2) var(--dm-s-3); border-left: 3px solid var(--dm-border-strong); }
.dm-fraga-join { padding: var(--dm-s-2) var(--dm-s-3); border-radius: var(--dm-radius-sm); background: var(--dm-surface-2); }
.dm-error { color: var(--dm-error); margin: 0; }
.dm-fraga-sql { margin: 0; padding: var(--dm-s-3); border-radius: var(--dm-radius-sm); background: var(--dm-surface-2); font-family: var(--dm-font-mono); font-size: var(--dm-text-sm); white-space: pre-wrap; word-break: break-word; }

/* Söka: results per dataset with facets and a table of hits */
.dm-search-result { display: flex; flex-direction: column; gap: var(--dm-s-3); }
.dm-search-head { display: flex; align-items: center; gap: var(--dm-s-2); flex-wrap: wrap; }
.dm-search-head h3 { margin: 0; }
.dm-search-table { height: 280px; min-height: 0; }
.dm-facet { display: flex; align-items: center; gap: var(--dm-s-2); flex-wrap: wrap; font-size: var(--dm-text-sm); }
.dm-facet-label { color: var(--dm-text-muted); flex: 0 0 auto; }
.dm-facet .dm-chips { margin: 0; }

/* SQL console (Analysera) */
.dm-sql-result { display: flex; flex-direction: column; gap: var(--dm-s-2); min-height: 240px; }
.dm-sql-result .dm-table-wrap { min-height: 240px; }

/* API sources (Inhämta) */
.dm-api-view .dm-api-fields { align-items: start; }
.dm-api-save { align-items: flex-end; }
.dm-api-save dm-input, .dm-api-save dm-select { min-width: 220px; flex: 1 1 220px; }
/* Plans: designation labels on the plan map, the legend and the provision lists in the inspector. */
.dm-plan-label-wrap { background: transparent; border: 0; }
.dm-plan-label { display: inline-block; transform: translate(-50%, -50%); font: 600 var(--dm-text-xs) var(--dm-font-sans); color: var(--dm-text); background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); padding: 0 var(--dm-s-1); white-space: nowrap; pointer-events: none; opacity: 0.92; }
.dm-plan-label-use { font-size: var(--dm-text-sm); background: transparent; border-color: transparent; text-shadow: 0 0 3px var(--dm-surface), 0 0 3px var(--dm-surface); }
.dm-plan-legend .dm-plan-legend-text { display: flex; gap: var(--dm-s-1); min-width: 0; align-items: baseline; }
.dm-plan-provisions { margin: 0; padding-left: var(--dm-s-4); font-size: var(--dm-text-sm); display: flex; flex-direction: column; gap: var(--dm-s-1); }
.dm-plan-provisions li { cursor: pointer; }
.dm-plan-provisions li:hover { color: var(--dm-accent); }
.dm-plan-layers dm-switch { display: block; }
/* The ready-made geodata services in the dialog Lägg till geodatakälla. */
.dm-geodata-ready-list { max-height: 300px; overflow: auto; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); padding: var(--dm-s-1); }
.dm-geodata-ready-item { align-items: center; }
.dm-geodata-ready-item .dm-list-main { white-space: normal; }
.dm-geodata-ready-item .dm-list-sub { white-space: normal; }
/* Geodata sources: the layer list, the map preview of an answer and the catalogue cards. */
.dm-geo-head { align-items: flex-end; }
.dm-geo-head dm-input { flex: 1 1 240px; min-width: 200px; }
.dm-geo-layers { max-height: 360px; overflow: auto; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); padding: var(--dm-s-1); }
.dm-api-map { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); overflow: hidden; max-width: 640px; }
.dm-api-map svg { display: block; width: 100%; height: auto; }
.dm-sense-head { display: flex; align-items: center; gap: var(--dm-s-2); }
.dm-bundle-files { display: flex; align-items: center; gap: var(--dm-s-2); padding-inline-start: var(--dm-s-6); }
.dm-suggest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--dm-s-12) * 4), 1fr)); gap: var(--dm-s-3); }
.dm-suggest { display: flex; flex-direction: column; gap: var(--dm-s-1); padding: var(--dm-s-2); text-align: left; cursor: pointer; background: var(--dm-surface); color: inherit; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); }
.dm-suggest:hover { background: var(--dm-surface-hover); }
.dm-suggest:focus-visible { outline: 2px solid var(--dm-focus); outline-offset: 2px; }
.dm-suggest-picture { display: flex; align-items: center; justify-content: center; min-height: calc(var(--dm-s-12) * 3); overflow: hidden; }
.dm-suggest-picture .dm-sketch { max-height: calc(var(--dm-s-12) * 3); object-fit: contain; }
.dm-cross-filter { display: inline-flex; align-items: center; gap: var(--dm-s-2); }
.dm-sort-row { display: flex; align-items: center; gap: var(--dm-s-3); }
.dm-import-photos { margin-bottom: var(--dm-s-3); }
.dm-import-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--dm-radius-sm); }
.dm-ds-picture { display: flex; justify-content: center; align-items: center; padding: var(--dm-s-3); margin-bottom: var(--dm-s-3); background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); }
.dm-ds-figure { margin: 0; width: 100%; max-width: calc(var(--dm-s-12) * 12); }
.dm-sketch { display: block; width: 100%; max-width: calc(var(--dm-s-12) * 12); height: auto; }
.dm-sketch-edge { stroke: var(--dm-border); stroke-width: 1; }
.dm-sketch-node { fill: var(--dm-accent); }
.dm-sketch-line { fill: none; stroke: var(--dm-accent); stroke-width: 2; }
.dm-sketch-bars { display: flex; flex-direction: column; gap: var(--dm-s-1); width: 100%; max-width: calc(var(--dm-s-12) * 12); }
.dm-sketch-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; align-items: center; gap: var(--dm-s-2); }
.dm-sketch-track { display: block; height: var(--dm-s-2); background: var(--dm-surface-2); border-radius: var(--dm-radius-sm); overflow: hidden; }
.dm-sketch-fill { display: block; height: 100%; background: var(--dm-accent); }
.dm-ds-page { display: block; max-width: calc(var(--dm-s-12) * 5); box-shadow: var(--dm-shadow); background: var(--dm-surface); }
.dm-ds-page-text { padding: var(--dm-s-4); font-size: var(--dm-text-xs); overflow: hidden; max-height: calc(var(--dm-s-12) * 6); }
.dm-geoportal-search { align-items: flex-end; }
.dm-geoportal-search dm-input { flex: 1 1 320px; min-width: 200px; }
.dm-geoportal-list { max-height: 60vh; overflow: auto; }
.dm-geoportal-links { margin: 0; padding-left: var(--dm-s-4); font-size: var(--dm-text-xs); display: flex; flex-direction: column; gap: var(--dm-s-1); }
.dm-api-list { max-height: 440px; overflow: auto; }
.dm-api-requests { display: flex; flex-direction: column; gap: var(--dm-s-2); font-size: var(--dm-text-xs); }
.dm-api-requests li { display: flex; flex-direction: column; gap: 2px; }
.dm-break { overflow-wrap: anywhere; word-break: break-all; }
.dm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dm-s-1); font-size: var(--dm-text-sm); }
.dm-crumb { border: 0; background: none; color: var(--dm-accent); cursor: pointer; font: inherit; padding: 2px var(--dm-s-1); border-radius: var(--dm-radius-sm); }
.dm-crumb:hover { background: var(--dm-accent-soft); }
.dm-crumb[aria-current="page"] { color: var(--dm-text); font-weight: var(--dm-weight-medium); }
.dm-crumb-sep { color: var(--dm-text-faint); }
.dm-picker-card { display: flex; flex-direction: column; gap: var(--dm-s-2); }
.dm-picker-head { display: flex; justify-content: space-between; gap: var(--dm-s-2); align-items: center; flex-wrap: wrap; }
.dm-check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px var(--dm-s-3); max-height: 260px; overflow: auto; padding: var(--dm-s-2); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); background: var(--dm-bg); }
.dm-check { display: flex; align-items: center; gap: var(--dm-s-2); font-size: var(--dm-text-sm); padding: 2px 0; cursor: pointer; min-width: 0; }
.dm-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-check input { accent-color: var(--dm-accent); margin: 0; flex: 0 0 auto; }
.dm-more > summary { cursor: pointer; font-size: var(--dm-text-sm); color: var(--dm-accent); list-style: none; }
.dm-more > summary::before { content: "\25B8  "; }
.dm-more[open] > summary::before { content: "\25BE  "; }
.dm-more > div { margin-top: var(--dm-s-2); }
.dm-auth-panel { border-left: 3px solid var(--dm-warn); }

/* Visualisera: builder layout, previews, gallery */
.dm-viz-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--dm-s-4); align-items: start; }
.dm-viz-side { display: flex; flex-direction: column; gap: var(--dm-s-3); max-height: calc(100vh - 220px); overflow: auto; padding-right: var(--dm-s-1); }
.dm-viz-main { display: flex; flex-direction: column; gap: var(--dm-s-2); min-width: 0; position: sticky; top: 0; }
.dm-chart-preview { min-height: 240px; padding: var(--dm-s-3); background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: auto; }
.dm-chart-preview.dm-rendering { opacity: 0.6; }
.dm-chart-preview canvas, .dm-chart-preview svg { max-width: 100%; }
.dm-chart-preview .vega-embed { width: 100%; }
.dm-chart-preview .vega-embed details { display: none; }
.dm-viz-types { display: flex; flex-wrap: wrap; gap: var(--dm-s-1); }
.dm-viz-type { display: inline-flex; align-items: center; gap: var(--dm-s-1); padding: var(--dm-s-1) var(--dm-s-2); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); background: var(--dm-surface); color: var(--dm-text-muted); font: inherit; font-size: var(--dm-text-sm); cursor: pointer; }
.dm-viz-type:hover { border-color: var(--dm-accent); color: var(--dm-text); }
.dm-viz-type[aria-checked="true"] { background: var(--dm-accent-soft); border-color: var(--dm-accent); color: var(--dm-accent); font-weight: var(--dm-weight-medium); }
.dm-viz-channel-opts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.dm-viz-filter dm-select, .dm-viz-filter dm-input { flex: 1 1 120px; min-width: 0; }
.dm-viz-spec { max-height: 360px; overflow: auto; font-size: var(--dm-text-xs); background: var(--dm-bg); padding: var(--dm-s-2); border-radius: var(--dm-radius-sm); white-space: pre-wrap; }
.dm-viz-r-output { max-height: 200px; overflow: auto; font-size: var(--dm-text-xs); background: var(--dm-bg); padding: var(--dm-s-2); border-radius: var(--dm-radius-sm); }
.dm-r-preview { display: flex; justify-content: center; }
.dm-gallery { display: grid; gap: var(--dm-s-4); }
.dm-gallery-card { display: flex; flex-direction: column; gap: var(--dm-s-2); min-width: 0; }
.dm-gallery-head { display: flex; justify-content: space-between; gap: var(--dm-s-2); align-items: flex-start; min-width: 0; }
.dm-gallery-head .dm-stack-sm { min-width: 0; }
.dm-gallery-body { min-height: 120px; }
.dm-gallery-thumb { display: block; width: 100%; height: auto; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); background: var(--dm-surface); }
.dm-gallery-placeholder { display: flex; align-items: center; justify-content: center; height: 160px; color: var(--dm-text-faint); }
.dm-page-head h1 dm-input { min-width: 260px; font-size: var(--dm-text-md); font-weight: var(--dm-weight-regular); }
@media (max-width: 1100px) { .dm-viz-layout { grid-template-columns: 1fr; } .dm-viz-side { max-height: none; } .dm-viz-main { position: static; } }

/* Documents (Exportera) */
.dm-doc-layout { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr); gap: var(--dm-s-4); align-items: start; }
.dm-doc-editor textarea { min-height: 420px; font-size: var(--dm-text-sm); line-height: 1.45; }
.dm-doc-preview { max-height: 70vh; overflow: auto; padding: var(--dm-s-4); background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); }
.dm-doc-preview.dm-rendering { opacity: 0.6; }
.dm-doc { font-size: var(--dm-text-sm); line-height: 1.55; color: var(--dm-text); }
.dm-doc h1 { font-size: var(--dm-text-xl); margin: 0 0 var(--dm-s-3); } .dm-doc h2 { font-size: var(--dm-text-lg); margin: var(--dm-s-5) 0 var(--dm-s-2); } .dm-doc h3 { font-size: var(--dm-text-base); margin: var(--dm-s-4) 0 var(--dm-s-1); } .dm-doc h4 { font-size: var(--dm-text-sm); margin: var(--dm-s-3) 0 var(--dm-s-1); }
.dm-doc p { margin: 0 0 var(--dm-s-3); } .dm-doc ul, .dm-doc ol { margin: 0 0 var(--dm-s-3); padding-left: var(--dm-s-5); }
.dm-doc table { border-collapse: collapse; width: 100%; margin: var(--dm-s-2) 0 var(--dm-s-4); font-size: var(--dm-text-xs); }
.dm-doc th, .dm-doc td { border: 1px solid var(--dm-border); padding: var(--dm-s-1) var(--dm-s-2); text-align: left; vertical-align: top; }
.dm-doc th { background: var(--dm-surface-2); font-weight: var(--dm-weight-semibold); } .dm-doc td.num, .dm-doc th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dm-doc caption, .dm-doc figcaption { caption-side: bottom; text-align: left; color: var(--dm-text-muted); font-size: var(--dm-text-xs); padding: var(--dm-s-1) 0; }
.dm-doc figure { margin: var(--dm-s-3) 0 var(--dm-s-4); } .dm-doc img { max-width: 100%; height: auto; display: block; }
.dm-doc hr { border: 0; border-top: 1px solid var(--dm-border); margin: var(--dm-s-4) 0; }
.dm-doc .pagebreak { border-top: 1px dashed var(--dm-border); margin: var(--dm-s-4) 0; }
.dm-doc code { font-family: var(--dm-font-mono); font-size: 0.92em; background: var(--dm-surface-2); padding: 1px 4px; border-radius: 3px; }
.dm-doc-actions { align-items: flex-end; }
.dm-doc-actions dm-select { min-width: 260px; }
.dm-doc-help li { font-size: var(--dm-text-xs); }
.dm-doc-help-pre { font-family: var(--dm-font-mono); font-size: var(--dm-text-xs); background: var(--dm-bg); padding: var(--dm-s-2); border-radius: var(--dm-radius-sm); white-space: pre-wrap; margin: 0 0 var(--dm-s-2); }
@media (max-width: 1100px) { .dm-doc-layout { grid-template-columns: 1fr; } }

/* Command palette (Ctrl+K) */
dialog.dm-palette { width: min(640px, calc(100vw - 32px)); margin-top: 10vh; padding: 0; }
.dm-palette-head { display: flex; align-items: center; gap: var(--dm-s-2); padding: var(--dm-s-3) var(--dm-s-4); border-bottom: 1px solid var(--dm-border); color: var(--dm-text-muted); }
.dm-palette-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--dm-text); font: inherit; }
.dm-palette-list { list-style: none; margin: 0; padding: var(--dm-s-2); max-height: 50vh; overflow: auto; }
.dm-palette-item { display: flex; align-items: center; gap: var(--dm-s-3); padding: var(--dm-s-2) var(--dm-s-3); border-radius: var(--dm-radius-sm); cursor: pointer; color: var(--dm-text); }
.dm-palette-item[aria-selected="true"] { background: var(--dm-accent-soft); color: var(--dm-accent); }
.dm-palette-item .dm-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dm-palette-group { font-size: var(--dm-text-xs); color: var(--dm-text-faint); white-space: nowrap; }
.dm-palette-empty { padding: var(--dm-s-3); color: var(--dm-text-muted); }
.dm-palette-hint { margin: 0; padding: var(--dm-s-2) var(--dm-s-4) var(--dm-s-3); font-size: var(--dm-text-xs); color: var(--dm-text-faint); border-top: 1px solid var(--dm-border); }

/* Dashboards */
.dm-dashboard-filters { align-items: flex-end; padding: var(--dm-s-2) var(--dm-s-3); background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); }
.dm-dashboard-filters[hidden] { display: none; }
.dm-dashboard-grid .dm-chart-preview { min-height: 200px; }

/* Notebooks */
.dm-nb-cells { display: flex; flex-direction: column; gap: var(--dm-s-3); }
.dm-nb-cell { display: flex; flex-direction: column; gap: var(--dm-s-2); padding: var(--dm-s-3); }
.dm-nb-cell-head { display: flex; align-items: center; gap: var(--dm-s-2); flex-wrap: wrap; }
.dm-nb-cell-head .dm-grow { flex: 1; }
.dm-nb-cell[data-running="true"] { opacity: 0.7; }
.dm-nb-cell dm-code .CodeMirror { min-height: 72px; }
.dm-nb-output { display: flex; flex-direction: column; gap: var(--dm-s-2); font-family: var(--dm-font-mono); font-size: var(--dm-text-sm); }
.dm-nb-output pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dm-nb-output:empty { display: none; }
.dm-nb-table { width: 100%; border-collapse: collapse; font-size: var(--dm-text-sm); font-family: var(--dm-font-sans); }
.dm-nb-table th, .dm-nb-table td { border: 1px solid var(--dm-border); padding: var(--dm-s-1) var(--dm-s-2); text-align: left; }
.dm-nb-table th { background: var(--dm-bg); font-weight: var(--dm-weight-medium); }
.dm-nb-table td.num, .dm-nb-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dm-nb-plot { max-width: 100%; width: 560px; height: auto; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); background: white; }
.dm-nb-md { padding: var(--dm-s-2) var(--dm-s-3); background: var(--dm-bg); border-radius: var(--dm-radius-sm); }
.dm-nb-md > *:first-child { margin-top: 0; }
.dm-nb-md > *:last-child { margin-bottom: 0; }

/* Accessibility: skip link and reduced motion */
.dm-skip { position: absolute; left: -9999px; top: var(--dm-s-2); z-index: 100; padding: var(--dm-s-2) var(--dm-s-3); background: var(--dm-surface); color: var(--dm-accent); border: 1px solid var(--dm-accent); border-radius: var(--dm-radius-sm); text-decoration: none; }
.dm-skip:focus { left: var(--dm-s-2); outline: none; }
@media (prefers-reduced-motion: reduce) { .dm-shell *, .dm-shell *::before, .dm-shell *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* Handbook (ui/help): search above, table of contents left, document right, version and links below. */
.dm-help-panel { display: flex; flex-direction: column; gap: var(--dm-s-3); min-height: 0; }
.dm-help-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--dm-s-4); height: min(56vh, 640px); min-height: 0; }
.dm-help-nav { overflow: auto; border-right: 1px solid var(--dm-border); padding-right: var(--dm-s-2); }
.dm-help-content { overflow: auto; max-width: none; padding-right: var(--dm-s-2); }
.dm-help-content.dm-prose { gap: var(--dm-s-3); }
.dm-help-content .dm-help-heading { margin: var(--dm-s-2) 0 0; scroll-margin-top: var(--dm-s-2); }
.dm-help-content h2.dm-help-heading { font-size: var(--dm-text-xl); margin-top: 0; }
.dm-help-content h3.dm-help-heading { font-size: var(--dm-text-lg); }
.dm-help-content h4.dm-help-heading, .dm-help-content h5.dm-help-heading { font-size: var(--dm-text-md); }
.dm-help-content ul, .dm-help-content ol { margin: 0; padding-left: var(--dm-s-5); display: flex; flex-direction: column; gap: var(--dm-s-1); }
.dm-help-content img { max-width: 100%; height: auto; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); }
.dm-help-figure { margin: 0; display: flex; flex-direction: column; gap: var(--dm-s-1); }
.dm-help-figure figcaption { font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
.dm-help-code { padding: var(--dm-s-2) var(--dm-s-3); background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); font-family: var(--dm-font-mono); font-size: var(--dm-text-xs); white-space: pre; overflow-x: auto; }
.dm-help-table { overflow-x: auto; }
.dm-help-table table { border-collapse: collapse; font-size: var(--dm-text-sm); }
.dm-help-table th, .dm-help-table td { text-align: left; padding: var(--dm-s-1) var(--dm-s-2); border-bottom: 1px solid var(--dm-border); vertical-align: top; }
.dm-help-table th { color: var(--dm-text-muted); font-weight: 600; }
.dm-help-table .dm-num { text-align: right; font-variant-numeric: tabular-nums; }
.dm-help-hits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--dm-s-1); }
.dm-help-hit { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: var(--dm-s-2); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); background: var(--dm-surface); color: inherit; font: inherit; cursor: pointer; }
.dm-help-hit:hover { background: var(--dm-surface-hover); }
.dm-help-hit span { font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
.dm-help-foot { font-size: var(--dm-text-xs); }
@media (max-width: 759px) {
  .dm-help-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .dm-help-nav { max-height: 120px; border-right: 0; border-bottom: 1px solid var(--dm-border); padding-right: 0; }
}

/* Presentation mode (ui/viz/present): the dashboard fills the window; a thin bar on top, the charts below. */
body.dm-presenting { overflow: hidden; }
.dm-present { position: fixed; inset: 0; z-index: var(--dm-z-dialog); display: flex; flex-direction: column; background: var(--dm-bg); outline: none; }
.dm-present-bar { display: flex; align-items: center; gap: var(--dm-s-3); padding: var(--dm-s-2) var(--dm-s-4); border-bottom: 1px solid var(--dm-border); background: var(--dm-surface); min-height: 48px; }
.dm-present-titles { display: flex; flex-direction: column; min-width: 0; flex: 0 1 auto; }
.dm-present-step { font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
.dm-present-filters { flex: 1 1 auto; justify-content: center; }
.dm-present-filters[hidden] { display: none; }
.dm-present-fs:empty { display: none; }
.dm-present-stage { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--dm-s-4); padding: var(--dm-s-4); overflow: auto; align-content: stretch; }
.dm-present-card { display: flex; flex-direction: column; gap: var(--dm-s-2); min-width: 0; min-height: 0; background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: var(--dm-s-3); }
.dm-present-card h2 { margin: 0; font-size: var(--dm-text-lg); }
.dm-present-chart.dm-chart-preview { flex: 1 1 auto; min-height: 0; border: 0; padding: 0; background: transparent; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.dm-present:fullscreen { background: var(--dm-bg); }
@media (max-width: 759px) {
  .dm-present-bar { flex-wrap: wrap; }
  .dm-present-filters { order: 3; flex-basis: 100%; justify-content: flex-start; }
}

/* Document view (Bearbeta): one page of a document as text, or the rendered PDF page */
.dm-document { overflow: auto; padding: var(--dm-s-4); background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); }
.dm-document-nav { align-items: center; gap: var(--dm-s-2); }
.dm-document-reading { align-items: center; gap: var(--dm-s-2); flex-wrap: wrap; }
.dm-document-reading:empty { display: none; }
.dm-provenance-graph { height: 360px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); background: var(--dm-bg); overflow: hidden; }
.dm-document-page-input { width: 5em; }
.dm-document-text { max-width: 72ch; margin: 0 auto; font-size: var(--dm-text-md); line-height: 1.6; }
.dm-document-text h3 { margin: var(--dm-s-5) 0 var(--dm-s-2); font-size: var(--dm-text-lg); }
.dm-document-text p { margin: 0 0 var(--dm-s-3); }
.dm-document-text [tabindex] { border-radius: var(--dm-radius-sm); padding: 0 var(--dm-s-1); margin-left: calc(-1 * var(--dm-s-1)); margin-right: calc(-1 * var(--dm-s-1)); cursor: default; }
.dm-document-text [tabindex]:hover { background: var(--dm-surface-hover); }
.dm-document-text [tabindex]:focus-visible { outline: 2px solid var(--dm-focus); outline-offset: 1px; }
.dm-document-text [aria-current="true"] { background: var(--dm-accent-soft); box-shadow: inset 3px 0 0 var(--dm-accent); }
.dm-document-table { font-family: var(--dm-font-mono); font-size: var(--dm-text-sm); white-space: pre-wrap; }
.dm-document-canvas { display: block; margin: 0 auto; max-width: 100%; box-shadow: var(--dm-shadow); background: white; }
.dm-document-kwic { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-document-kwic mark { background: var(--dm-warn-soft); color: var(--dm-text); border-radius: 2px; }
.dm-document-page-marker { display: flex; align-items: center; gap: var(--dm-s-2); margin: var(--dm-s-5) 0 var(--dm-s-3); color: var(--dm-text-faint); font-size: var(--dm-text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.dm-document-page-marker::before, .dm-document-page-marker::after { content: ''; flex: 1 1 auto; border-top: 1px solid var(--dm-border); }
.dm-document-whole { padding-bottom: var(--dm-s-8); }

/* Gallery view (Bearbeta): thumbnails in a grid, a larger preview in the inspector and in a dialog */
.dm-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--dm-s-3); align-content: start; overflow: auto; padding: var(--dm-s-2); }
.dm-photos-item { display: flex; flex-direction: column; gap: var(--dm-s-1); padding: var(--dm-s-2); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); background: var(--dm-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dm-photos-item:hover { background: var(--dm-surface-hover); }
.dm-photos-item:focus-visible { outline: 2px solid var(--dm-focus); outline-offset: 2px; }
.dm-photos-item[aria-current="true"] { border-color: var(--dm-accent); box-shadow: 0 0 0 1px var(--dm-accent); }
.dm-photos-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--dm-radius-sm); background: var(--dm-surface-2); }
.dm-photos-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dm-photos-missing { color: var(--dm-text-faint); }
.dm-photos-caption { display: flex; flex-direction: column; min-width: 0; font-size: var(--dm-text-sm); }
.dm-photos-more { grid-column: 1 / -1; display: flex; justify-content: center; padding: var(--dm-s-3); }
/* Hantera's overview: the first pictures of a collection, smaller and without scrolling */
.dm-photos-preview-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); overflow: visible; padding: 0; }
.dm-photos-preview img { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; }
.dm-photos-inspector-preview { display: block; width: 100%; padding: 0; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); background: var(--dm-surface-2); cursor: zoom-in; overflow: hidden; }
.dm-photos-inspector-preview img { display: block; width: 100%; height: auto; }

/* Maps (viz/leaflet): the Leaflet container in Bearbeta, Visualisera, dashboards and the presentation */
.dm-map { width: 100%; min-height: 240px; border-radius: var(--dm-radius-md); background: var(--dm-surface-2); font-family: var(--dm-font-sans); }
.dm-map .leaflet-container { font-family: var(--dm-font-sans); font-size: var(--dm-text-sm); background: var(--dm-surface-2); }
.dm-map .leaflet-control-attribution { font-size: var(--dm-text-xs); color: var(--dm-text-muted); background: var(--dm-surface); }
.dm-map .leaflet-control-scale-line { font-size: var(--dm-text-xs); color: var(--dm-text); background: var(--dm-surface); border-color: var(--dm-text-muted); }
.dm-map .leaflet-tooltip { font-family: var(--dm-font-sans); border-color: var(--dm-border); color: var(--dm-text); background: var(--dm-surface); }
/* base.css caps every canvas at the width of its parent, and Leaflet's panes have no width: the vector layer would be 0 px wide. */
.leaflet-pane > canvas { max-width: none; }
.dm-map-view { flex: 1 1 auto; min-height: 320px; }
.dm-map-preview { padding: 0; min-height: 420px; height: 520px; overflow: hidden; }
.dm-map-preview .dm-map { height: 100%; border-radius: 0; }
.dm-map-layer summary { display: flex; align-items: center; gap: var(--dm-s-2); cursor: pointer; }
.dm-map-layer-swatch, .dm-map-legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--dm-border); flex: 0 0 auto; }
.dm-map-legend-block { margin: 0 0 var(--dm-s-3); }
.dm-map-legend-list { list-style: none; margin: var(--dm-s-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--dm-text-sm); }
.dm-map-legend-list li { display: flex; align-items: center; gap: var(--dm-s-2); min-width: 0; }

/* Import wizard: the files of a collection */
.dm-import-files { max-height: 240px; overflow: auto; }

/* Text and image tools (Analysera): settings above, the result below; duplicate groups as rows of thumbnails */
.dm-tool-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--dm-s-3); }
.dm-tool-result { flex: 1 1 auto; min-height: 240px; display: flex; flex-direction: column; gap: var(--dm-s-2); }
.dm-tool-result .dm-table-wrap { flex: 1 1 auto; min-height: 200px; }
.dm-dup-group { display: flex; flex-wrap: wrap; gap: var(--dm-s-2); padding: var(--dm-s-2); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); }
.dm-dup-item { display: flex; flex-direction: column; align-items: center; gap: var(--dm-s-1); width: 120px; font-size: var(--dm-text-xs); text-align: center; }
.dm-dup-item img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--dm-radius-sm); background: var(--dm-surface-2); }

/* Graph view (Bearbeta) and graph tools: the drawing fills the centre; groups and legend in the inspector. */
.dm-graph-view { position: relative; flex: 1 1 auto; min-height: 320px; background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius); overflow: hidden; }
.dm-graph-canvas { position: absolute; inset: 0; }
.dm-graph-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dm-text-muted); padding: var(--dm-s-4); text-align: center; }
.dm-graph-legend li { display: flex; align-items: center; gap: var(--dm-s-2); }
.dm-graph-swatch { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--dm-border); }
.dm-graph-sql { font: var(--dm-text-xs) var(--dm-font-mono); white-space: pre-wrap; word-break: break-word; background: var(--dm-surface-2); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); padding: var(--dm-s-2); max-height: 200px; overflow: auto; margin: 0; }
.dm-graph-path { display: flex; flex-wrap: wrap; gap: var(--dm-s-1); align-items: center; }

.dm-graph-preview { min-height: 420px; }
/* A server's graph in Inhämta, in a card that scrolls with the page. */
.dm-graph-live { flex: none; height: min(560px, 75vh); }
.dm-graph-edit dm-button { flex: 0 0 auto; }

/* Building models and drawings (ui/bearbeta/model-view): the drawing above a table of its elements */
.dm-model-issues-list { max-height: 40vh; overflow: auto; }
.dm-model-issue-snapshot { max-width: 100%; border-radius: var(--dm-radius-sm); }
.dm-opencde-file { align-items: center; gap: var(--dm-s-2); }
.dm-model-layout { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--dm-s-2); }
.dm-model-host { position: relative; flex: 2 1 0; min-height: 280px; overflow: hidden; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); background: var(--dm-surface); }
.dm-model-canvas { position: absolute; inset: 0; display: block; max-width: none; touch-action: none; }
.dm-model-canvas:focus-visible { outline: 2px solid var(--dm-focus); outline-offset: -2px; }
.dm-model-loading { padding: var(--dm-s-4); }
.dm-model-table-wrap { flex: 1 1 0; min-height: 180px; }
.dm-model-preview { min-height: 420px; height: 520px; flex: none; }
.dm-model-picture { display: block; width: 100%; height: auto; }
.dm-dxf-host { cursor: grab; touch-action: none; color: var(--dm-text); }
.dm-dxf-svg { display: block; width: 100%; height: 100%; max-width: none; }
.dm-dxf-selected, .dm-dxf-selected * { stroke: var(--dm-accent) !important; }
.dm-dxf-selected text { fill: var(--dm-accent) !important; stroke: none !important; }

/* Flows and watches (ui/flows/flows-view) and their place in the status bar */
.dm-flow-add { align-items: flex-end; }
.dm-flow-add-in { align-items: flex-end; }
.dm-flow-branch { border-inline-start: 1px solid var(--dm-border-strong); padding-inline-start: var(--dm-s-3); margin-inline-start: var(--dm-s-1); }
.dm-flow-branch-title { font-weight: var(--dm-weight-semibold); color: var(--dm-text-muted); margin: 0; }
.dm-flow-log { list-style: none; padding: 0; margin: 0; font-size: var(--dm-text-sm); }
.dm-sb-flow, .dm-sb-watch, .dm-sb-comments, .dm-sb-selection, .dm-sb-remote { color: var(--dm-accent); }
.dm-sb-remote-off { color: var(--dm-text-muted); }

/* The Statistik tab (ui/analysis/stats-panel) */
.dm-stats-code { height: 180px; }
.dm-stats-table { min-height: 160px; max-height: 320px; }
.dm-stats-say { font-weight: var(--dm-weight-semibold); }

/* Issue colours in the model view: a legend of swatches (the colours are the status tokens, set from the panel). */
.dm-model-issues-legend { list-style: none; margin: 0; padding: 0; gap: var(--dm-space-3); }
.dm-model-issues-legend li { display: inline-flex; align-items: center; gap: var(--dm-space-1); }
.dm-legend-swatch { display: inline-block; width: 0.8em; height: 0.8em; border-radius: var(--dm-radius-sm); border: 1px solid var(--dm-border); }

/* The CDE log card: narrow columns, wrapped bodies with a ceiling. */
.dm-cde-log-table td.dm-num { text-align: right; font-variant-numeric: tabular-nums; }
.dm-cde-log-table tr[data-cde-log-row] { cursor: pointer; }
.dm-cde-log-table tr.dm-selected td { background: var(--dm-accent-soft); }
.dm-cde-log-pre { white-space: pre-wrap; word-break: break-all; max-height: 16em; overflow: auto; margin: 0; }

/* Big assets loading: a short indeterminate bar beside the engines in the status bar. */
.dm-sb-loading { display: inline-flex; align-items: center; gap: var(--dm-space-2); }
.dm-sb-loading dm-progress { width: 4rem; }