/* Copied from atlas/web by atlas/scripts/bundle.py. Do not edit here. */
/* The Momus look of every atlas app (woonkaart, buurtkaart), in the visual language of momusmedia.nl: paper and ink, a book
   serif for headings over a plain sans, flat blocks of mint and thistle, square
   corners for blocks, round pills for tags and small buttons, 1px ink rules, and
   colour per the Momus Brandbook V.01 (March 2025): Paper, Grey, Ink and Mint are
   primary, Archive, Thistle and Green secondary; text on any colour is Paper or Ink,
   and a choice that is on wears Mint with Ink text. STK Bureau is Momus's licensed
   typeface; it is used when installed, otherwise the free Newsreader and
   Hanken Grotesk stand in. Data colours (heatmap, histograms) are not themed. */
:root {
  color-scheme: light;
  /* Momus palette */
  --m-ink: #141414;
  --m-paper: #FBFBFB;
  --m-grey: #F1F0EF;
  --m-archive: #EEE5E3;
  --m-green: #335E4D;
  --m-mint: #A8DCAB;
  --m-thistle: #E3CFED;

  /* roles (the script reads --grid, --muted, --accent, --accent-wash, --ink-2) */
  --page: var(--m-paper);
  --surface: var(--m-paper);
  --surface-2: var(--m-grey);
  --block: var(--m-mint);
  --block-2: var(--m-thistle);
  --card: var(--m-archive);
  --ink: var(--m-ink);
  --ink-2: #3d3d3b;
  --muted: #6f6e6a;
  --rule: var(--m-ink);
  --rule-soft: #cfcdc8;      /* between the panel's sections; the header's rule and Bronnen's stay ink */
  --grid: #dcdad6;
  --axis: #b9b7b2;
  --accent: var(--m-green);
  --on-accent: var(--m-paper);
  --accent-wash: var(--m-mint);
  --bar: #141414;            /* filter histograms: a light-to-#141414 gradient, not the picked heatmap colour; fixed ramps colour their own bars */
  /* the syntax editor is dark in both themes, highlighted in the Momus colours */
  --code-bg: var(--m-ink); --code-ink: var(--m-paper); --code-edge: var(--m-ink); --code-muted: #8f8d88;
  --code-field: var(--m-mint); --code-setting: #8ac79d; --code-value: #c9a6dd; --code-base: var(--m-archive); --code-bad: #f2a29c;
  --picked: var(--m-mint);   /* a choice that is on: Mint under Ink */
  --on-picked: var(--m-ink);
  --hover: var(--m-grey);
  --err: #b3261e;
  --shadow: rgba(0, 0, 0, 0.4);
  --edge: transparent;
  --serif: "STK Bureau Serif", "Newsreader", Georgia, serif;
  --sans: "STK Bureau Sans", "Hanken Grotesk", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Momus in the dark: warm near-blacks instead of pure black, paper-white ink at
       slightly less than full strength, rules as soft lines, mint as the accent, and
       archive and thistle as deep tints of themselves rather than inverted pastels. */
    --page: #141413; --surface: #1c1c1b; --surface-2: #262625; --card: #2c2725;
    --block: #1f3a2f; --block-2: #2e2633;
    --ink: #f3f2ef; --ink-2: #cfcdc8; --muted: #9a9893;
    --rule: rgba(243, 242, 239, 0.42); --rule-soft: rgba(243, 242, 239, 0.16); --grid: #353533; --axis: #55544f;
    --accent: var(--m-mint); --on-accent: var(--m-ink); --accent-wash: rgba(168, 220, 171, 0.2); --bar: #cfcdc8;
    --picked: var(--m-mint); --on-picked: var(--m-ink); --hover: #2a2a29;
    --err: #f2a29c; --shadow: rgba(0, 0, 0, 0.75); --edge: #333331; --icon-filter: invert(0.95);
    --code-bg: #0c0c0b; --code-edge: rgba(243, 242, 239, 0.42);
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    /* Momus in the dark: warm near-blacks instead of pure black, paper-white ink at
       slightly less than full strength, rules as soft lines, mint as the accent, and
       archive and thistle as deep tints of themselves rather than inverted pastels. */
    --page: #141413; --surface: #1c1c1b; --surface-2: #262625; --card: #2c2725;
    --block: #1f3a2f; --block-2: #2e2633;
    --ink: #f3f2ef; --ink-2: #cfcdc8; --muted: #9a9893;
    --rule: rgba(243, 242, 239, 0.42); --rule-soft: rgba(243, 242, 239, 0.16); --grid: #353533; --axis: #55544f;
    --accent: var(--m-mint); --on-accent: var(--m-ink); --accent-wash: rgba(168, 220, 171, 0.2); --bar: #cfcdc8;
    --picked: var(--m-mint); --on-picked: var(--m-ink); --hover: #2a2a29;
    --err: #f2a29c; --shadow: rgba(0, 0, 0, 0.75); --edge: #333331; --icon-filter: invert(0.95);
    --code-bg: #0c0c0b; --code-edge: rgba(243, 242, 239, 0.42);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--page); color: var(--ink); font: 15px/1.45 var(--sans); }
#map { position: fixed; inset: 0; }
button, input, select { font-family: var(--sans); }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- side panel */
/* The panel works like Momus's dossier panel: full height against the left edge, a soft
   shadow on its right side. Its right edge is a grip (panel.js): drag the panel to the left
   and it folds away to a 14px edge, drag or click it back. The map is not dimmed. */
#panel {
  position: fixed; top: 0; left: 0; bottom: 0; width: 372px; z-index: 3;
  display: flex; flex-direction: column; background: var(--surface);
  /* the edge line is an inset shadow, not a border: a transparent border let the panel's own
     background show as a white line beside the count card */
  box-shadow: inset -1px 0 0 var(--edge), -1px 1px 9px -1px var(--shadow);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#panel.dragging { transition: none; user-select: none; }
#panel.folded { transform: translateX(calc(-100% + 14px)); cursor: pointer; }
#panel.folded > :not(.panel-grip) { visibility: hidden; transition: visibility 0s 0.45s; }
/* the grip: a full-height strip on the panel's edge with a short bar in its middle */
.panel-grip {
  position: absolute; top: 0; bottom: 0; right: -7px; width: 14px; z-index: 2;
  padding: 0; border: 0; background: transparent; cursor: ew-resize; touch-action: none;
}
.panel-grip::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 40px; margin: -20px 0 0 -2px;
  border-radius: 2px; background: var(--axis); opacity: 0; transition: opacity 0.2s, background 0.2s, height 0.2s, margin 0.2s;
}
.panel-grip:hover::after, .panel-grip:focus-visible::after, #panel.dragging .panel-grip::after { opacity: 1; background: var(--ink-2); height: 56px; margin-top: -28px; }
#panel.folded .panel-grip { right: 0; width: 14px; }
#panel.folded .panel-grip::after { opacity: 1; }
.panel-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#panel header { cursor: grab; }
#panel.dragging header { cursor: grabbing; }
/* the map's controls share the top-right corner: zoom, then the theme switch, then the scale */
.theme-ctrl button.theme { width: 29px; height: 29px; font-size: 0; color: var(--ink); border-radius: 0; }
.theme-ctrl button.theme:hover { border-radius: 0; background: var(--hover); }
.theme-ctrl button.theme svg { width: 18px; height: 18px; }

#panel header { padding: 24px 24px 24px; border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: flex-start; justify-content: space-between; }
.brand-tools { display: flex; gap: 2px; margin: -4px -6px 0 0; }
/* the theme button: half-filled for system, a sun outline for light, a moon for dark */
button.theme { display: grid; place-items: center; }
button.theme .sun, button.theme .moon { display: none; }
button.theme[data-theme="light"] .half, button.theme[data-theme="dark"] .half,
button.theme[data-theme="dark"] circle { display: none; }
button.theme[data-theme="dark"] .moon { display: inline; }
.logo-link { display: block; width: 168px; }
svg.logo { display: block; width: 100%; height: auto; overflow: visible; }
h1 { font: 400 34px/1.05 var(--serif); margin: 24px 0 0; letter-spacing: -0.01em; }
.tagline { margin: 10px 0 0; font-size: 14px; line-height: 1.45; }
/* Scrolling the panel folds the header away, as the logo does on momusmedia.nl: the staircase
   of letters flattens into one row, the tagline fades out and the title slides up next to the
   logo; back at the top it unfolds again (panel.js sets .compact). Desktop only: on a phone the
   header is already one line. */
@media (min-width: 721px) {
  #panel header { transition: padding 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .logo-link { height: 66.67px; overflow: hidden; transition: height 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  svg.logo .lt { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  #panel h1 { transform-origin: left center; transition: margin 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), font-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .tagline { max-height: 90px; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s, margin 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  #panel header.compact { padding-top: 24px; padding-bottom: 24px; }
  header.compact .logo-link { height: 33.33px; }
  header.compact svg.logo .lt { transform: translateY(var(--dy)); }
  /* title 24px (line 25.2px), centred on the 33.33px logo row, 14px right of the logo */
  header.compact h1 { font-size: 24px; margin: -29.3px 0 0 182px; }
  header.compact .tagline { max-height: 0; opacity: 0; margin-top: 0; }
}
@media (min-width: 721px) and (prefers-reduced-motion: reduce) {
  #panel header, .logo-link, svg.logo .lt, #panel h1, .tagline { transition: none; }
}
h2, .h2 { font: 400 30px/1.1 var(--serif); margin: 0 0 18px; color: var(--ink); text-transform: none; letter-spacing: 0; }
h2 .hint { display: block; margin: 2px 0 0; font: 13px/1.4 var(--sans); color: var(--muted); }
.scroll { overflow-y: auto; flex: 1; min-width: 0; }
section { padding: 24px 24px 22px; border-bottom: 1px solid var(--rule-soft); }
section:last-child { border-bottom: 0; }
/* the sections share soft rules; Bronnen is set off by an ink rule again, like the header */
section.about { border-top: 1px solid var(--rule); margin-top: -1px; }
.note { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.about p { color: var(--ink-2); font-size: 13px; margin: 0 0 8px; }
button.icon { border: 0; background: transparent; color: var(--ink); font-size: 22px; width: 32px; height: 32px; cursor: pointer; }
button.icon:hover { background: var(--hover); border-radius: 50%; }
#collapse { display: none; }
button.link { border: 0; background: none; color: var(--ink); padding: 4px 0; cursor: pointer; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
button.link:hover { color: var(--accent); }

/* ---------- the syntax editor: in place of the panel's sections when the code icon is on.
   A transparent textarea over a highlighted copy of its text (#fq-hl, one .ln per line). Both
   share font, padding and wrapping, so every character lies on its coloured twin. */
section.textline { padding: 24px 24px 20px; }
.textline .h2row { margin-bottom: 12px; }
.textline .h2row h2 { margin: 0; }
.editor { --gut: 40px; background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--code-edge); }
.editor:focus-within { border-color: var(--m-mint); box-shadow: 0 0 0 1px var(--m-mint); }
.editor .fq-box { position: relative; }
/* the line-number gutter */
.editor .fq-box::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--gut) - 10px); border-right: 1px solid rgba(251, 251, 251, 0.1); }
.editor #fq, .editor #fq-hl { display: block; width: 100%; margin: 0; padding: 12px 14px 12px var(--gut); border: 0; border-radius: 0; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.editor #fq { position: relative; z-index: 1; min-height: calc(7 * 1.7em + 24px); background: transparent; color: transparent; caret-color: var(--m-mint); resize: none; overflow: hidden; outline: none; }
.editor #fq::selection { background: rgba(168, 220, 171, 0.3); color: transparent; }
.editor #fq::placeholder { color: rgba(251, 251, 251, 0.28); }
.editor #fq-hl { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; counter-reset: ln; }
.editor #fq-hl .ln { position: relative; counter-increment: ln; }
.editor #fq-hl .ln::before { content: counter(ln); position: absolute; left: calc(-1 * var(--gut)); width: calc(var(--gut) - 18px); text-align: right; color: rgba(251, 251, 251, 0.3); font-size: 11px; }
.editor #fq-hl .ln.cur { background: rgba(251, 251, 251, 0.05); box-shadow: -14px 0 0 rgba(251, 251, 251, 0.05), 14px 0 0 rgba(251, 251, 251, 0.05); }
.editor #fq-hl .ln.cur::before { color: var(--m-mint); }
#fq-hl .t-field { color: var(--code-field); }
#fq-hl .t-setting { color: var(--code-setting); font-style: italic; }
#fq-hl .t-op { color: var(--code-muted); }
#fq-hl .t-value { color: var(--code-value); }
#fq-hl .t-base { color: var(--code-base); text-decoration: underline dotted; text-underline-offset: 3px; }
#fq-hl .t-filler { color: var(--code-muted); }
#fq-hl .t-bad { color: var(--code-bad); text-decoration: underline wavy; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* what fits at the caret: docked under the code, inside the editor */
.editor #fq-sug { max-height: 216px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; border-top: 1px solid rgba(251, 251, 251, 0.1); }
.editor #fq-sug li[role="option"] { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 4px 14px 4px var(--gut); cursor: pointer; font-size: 13px; line-height: 1.35; }
.editor #fq-sug code { color: var(--code-field); font: 13px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.editor #fq-sug small { grid-column: 2; color: var(--code-muted); font-size: 12px; }
.editor #fq-sug li[aria-selected="true"], .editor #fq-sug li[role="option"]:hover { background: var(--m-mint); color: var(--m-ink); }
.editor #fq-sug li[aria-selected="true"] :is(code, small), .editor #fq-sug li[role="option"]:hover :is(code, small) { color: var(--m-ink); }
.editor #fq-sug .sug-head { padding: 8px 14px 3px var(--gut); font: 400 13px/1.2 var(--serif); color: var(--code-muted); }
/* status bar: the error, or the keys */
.ed-status { display: flex; align-items: center; min-height: 28px; padding: 5px 12px; white-space: nowrap; overflow: hidden; border-top: 1px solid rgba(251, 251, 251, 0.1); font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--code-muted); }
.ed-status p { margin: 0; }
.ed-status #fq-err { color: var(--code-bad); }
.ed-status #fq-err:not([hidden]) + #fq-hint { display: none; }
.ed-status kbd { margin: 0 3px 0 0; padding: 0 4px; border: 1px solid rgba(251, 251, 251, 0.22); font: inherit; color: var(--code-ink); }
.ed-status kbd:not(:first-child) { margin-left: 8px; }
.ed-status #fq-err { white-space: normal; }
/* the syntax editor's switch: a small code icon in the settings' top-right corner, quiet until
   hovered; while the editor is on it wears Mint under Ink */
.settings { position: relative; }
button.code-switch { position: absolute; top: 8px; right: 7px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; color: var(--muted); border-radius: 50%; }
button.code-switch:hover { color: var(--ink); }
button.code-switch[aria-pressed="true"] { background: var(--picked); color: var(--on-picked); }
button.pill { padding: 3px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--page); color: var(--ink); font-size: 13px; cursor: pointer; }
button.pill:hover { background: var(--hover); }
button.pill[aria-expanded="true"] { background: var(--picked); color: var(--on-picked); border-color: var(--picked); }
/* While the syntax editor is on, the whole settings block goes dark in both themes, a tad
   lighter than the editor, and everything in it takes the dark tokens. */
.settings.syntax {
  --page: #1f1f1e; --surface: #1f1f1e; --surface-2: #2a2a28;
  --ink: var(--m-paper); --ink-2: #cfcdc8; --muted: #9a9893;
  --rule: rgba(243, 242, 239, 0.34); --rule-soft: rgba(243, 242, 239, 0.12); --grid: #3a3a37;
  --accent: var(--m-mint); --hover: #30302e; --picked: var(--m-mint); --on-picked: var(--m-ink); --err: var(--code-bad);
  --code-edge: rgba(243, 242, 239, 0.16);
  color-scheme: dark; background: var(--page); color: var(--ink);
}
.settings.syntax section.textline { border-bottom-color: var(--rule-soft); }
.settings.syntax .sheet code { color: var(--code-field); }
.settings.syntax .sheet-chips button { background: transparent; border-color: rgba(243, 242, 239, 0.22); }
.settings.syntax .sheet-chips button:hover { background: var(--picked); border-color: var(--picked); }
.settings.syntax .sheet-chips button code { color: inherit; }
.settings.syntax button.code-switch:hover { background: var(--hover); }
:root[data-theme="dark"] .settings.syntax { --page: #181817; --surface: #181817; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .settings.syntax { --page: #181817; --surface: #181817; } }
/* every word at once: chips that put themselves in the line */
.sheet { margin-top: 20px; }
.sheet-part + .sheet-part { margin-top: 12px; }
.sheet h3 { margin: 0; font: 400 17px/1.2 var(--serif); }
.sheet .note { margin: 2px 0 6px; font-size: 12px; }
.sheet code { font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sheet-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sheet-chips button { display: inline-flex; gap: 6px; align-items: baseline; border: 1px solid var(--rule); border-radius: 999px; background: var(--page); color: var(--ink); padding: 2px 10px; cursor: pointer; font-size: 12px; }
.sheet-chips button:hover { background: var(--picked); color: var(--on-picked); border-color: var(--picked); }
.sheet-chips button span { color: var(--muted); }
.sheet-chips button:hover span { color: var(--on-picked); }
#fq-wrap { margin-bottom: 12px; }
.note.err { color: var(--err); }

/* Kaartlagen, Filters and Combineer fold away under their heading. The body animates
   its grid row between 1fr and 0fr, so it slides to its own height without measuring;
   the caret right after the title turns a quarter to point at the folded body. */
.sec .h2row h2 { margin: 0; }
.sec-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.sec-toggle .caret { flex: 0 0 auto; margin-top: 4px; opacity: 0.7; transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s; }
.sec-toggle:hover .caret, .sec-toggle:focus-visible .caret { opacity: 1; }
.sec.closed .sec-toggle .caret { transform: rotate(-90deg); }
/* minmax(0, 1fr) and min-width: 0 keep long content (the X/Y selects' option names) from
   widening the section past the panel, which made the sidebar scroll sideways */
.sec-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; transition: grid-template-rows 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sec.closed .sec-body { grid-template-rows: 0fr; }
.sec-inner { min-height: 0; min-width: 0; overflow: hidden; transition: opacity 0.24s; }
.sec.closed .sec-inner { opacity: 0; }
/* once open and settled, focus rings and the gear panels may reach past the edge */
.sec:not(.closed):not(.moving) .sec-inner { overflow: visible; }
.sec-pad { padding-top: 6px; }
.sec[data-sec="lagen"] .sec-pad { padding-top: 10px; }
@media (prefers-reduced-motion: reduce) { .sec-body, .sec-inner, .sec-toggle .caret { transition: none; } }

/* section heads with actions on the right; resets are plain links */
.h2row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.h2row h2 { margin-bottom: 6px; }
.h2row .actions { display: flex; gap: 14px; }
.hint.sub { display: block; margin: 0 0 18px; }
.h2row .actions button.link { padding: 3px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--page); font-size: 13px; text-decoration: none; }
.h2row .actions button.link:hover { background: var(--hover); color: var(--ink); }
.h2row .actions button.link[aria-expanded="true"] { background: var(--picked); color: var(--on-picked); border-color: var(--picked); }
.h2row .actions button.link.with-icon { display: inline-flex; align-items: center; gap: 6px; }
button.link.reset { font-size: 13px; color: var(--muted); padding: 0; }
button.link.reset:hover { color: var(--accent); }

/* the "i" next to a term; its text shows in #tip */
.i { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 5px; border: 1px solid currentColor; border-radius: 50%; font: italic 600 10px/1 var(--serif); vertical-align: 2px; cursor: help; opacity: 0.75; }
.i:hover, .i:focus-visible { opacity: 1; }

/* ---------- Kaartlagen: one row per layer - isometric icon, name over a hint, gear (if the layer
   has settings), on/off switch. The icon is a plate over a second plate, so it reads as a layer;
   the top plate turns Mint while the layer is on. */
.layer { cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px 34px; align-items: center; column-gap: 10px; padding: 7px 0; }
.layer-name { font-size: 15px; line-height: 1.25; color: var(--ink); cursor: pointer; }
.layer-name .hint { display: block; margin: 1px 0 0; font-size: 12px; }
.layer-icon { display: block; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; transition: color 0.2s; }
.layer-icon .plate { fill: transparent; transition: fill 0.2s; }
.layer-icon .fill { fill: currentColor; stroke: none; }
.layer-icon .soft { opacity: 0.35; }
.layer:has(.switch:checked) .layer-icon { color: var(--ink); }
.layer:has(.switch:checked) .layer-icon .plate { fill: var(--block); }
.gear-space { width: 30px; }
/* on/off: a pill with a knob, Mint under Ink when on */
input.switch { appearance: none; -webkit-appearance: none; position: relative; width: 34px; height: 20px; margin: 0; border: 1px solid var(--axis); border-radius: 999px; background: var(--surface-2); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
input.switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s; }
input.switch:checked { background: var(--picked); border-color: var(--ink); }
input.switch:checked::before { transform: translateX(14px); background: var(--m-ink); }
input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { input.switch, input.switch::before, .layer-icon, .layer-icon .plate { transition: none; } }
button.gear { display: grid; place-items: center; width: 30px; height: 30px; }
button.gear[aria-expanded="true"] { background: var(--picked); color: var(--on-picked); border-radius: 50%; }
.subpanel { margin: 4px 0 8px; padding: 12px; background: var(--surface-2); border: 1px solid var(--grid); }
.subpanel .range-row { margin-top: 12px; }
/* stacked sliders share one label column, so both tracks start at the same x */
.range-pair { display: grid; grid-template-columns: max-content 1fr; column-gap: 10px; row-gap: 12px; align-items: center; margin-top: 12px; color: var(--ink-2); font-size: 14px; }
.range-pair .range-row { display: contents; }
.range-pair .range-row input { min-width: 0; }
/* heatmap legend in the map's bottom-right corner */
.map-legend { position: fixed; right: 16px; bottom: 24px; z-index: 2; width: 300px; padding: 10px 12px 8px; background: var(--surface); border: 1px solid var(--rule); }
.legend-title { font: 400 17px/1.2 var(--serif); margin-bottom: 8px; }
.map-legend .note { font-size: 12px; margin-top: 6px; }
.maplibregl-ctrl-top-right { top: 48px !important; }

/* ---------- the count: a Thistle block pinned to the bottom of the panel */
/* the count card at the foot of the panel: Archive, the stats side by side and set alike */
.summary { flex: 0 0 auto; padding: 14px 24px 16px; background: var(--card); border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.5; }
.summary b { font: 400 26px/1.1 var(--serif); font-variant-numeric: lining-nums; }
.summary .stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.summary .stat { display: flex; flex-direction: column; min-width: 0; }
.summary .stat + .stat { padding-left: 20px; border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.summary .stat .k { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.summary .stat .v { margin-top: 2px; font: 400 24px/1.15 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.summary .stat .u { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.summary .muted, .muted { color: var(--muted); }
.summary .warn { margin-top: 8px; padding: 8px 10px; background: var(--page); border: 1px solid var(--rule); color: var(--ink); font-size: 13px; }

/* ---------- square segmented buttons: the picked one is Mint under Ink */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.seg button { padding: 8px 4px; margin: 0 -1px -1px 0; border: 1px solid var(--rule); border-radius: 0; background: var(--page); color: var(--ink); cursor: pointer; font-size: 14px; }
.seg button:hover { background: var(--hover); }
.seg button[aria-checked="true"] { background: var(--picked); color: var(--on-picked); position: relative; }
.seg2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 12px; }
.seg button .i { margin-left: 3px; vertical-align: 1px; }
/* setting icons (icons.js): a heatmap mode stacks its picture over its name; a slider's label leads with one */
.setting-icon { flex: 0 0 auto; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.setting-icon .dot { fill: currentColor; stroke: none; }
.setting-icon .tint { fill: currentColor; fill-opacity: 0.16; }
.setting-icon .mean { stroke-dasharray: 2.4 2.2; stroke-width: 1.6; }
.seg button:has(.setting-icon) { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; }
.seg button .setting-icon { color: var(--muted); }
.seg button[aria-checked="true"] .setting-icon { color: currentColor; }
.range-row > span:has(.setting-icon) { display: inline-flex; align-items: center; gap: 7px; }
.range-row .setting-icon { color: var(--muted); }
.lbl-row { margin: 6px 0 8px; }
#palet-wrap .lbl-row { margin-top: 12px; }

/* heatmap colour: one native colour picker, shown as a pill with its swatch and hex */
.picker { display: flex; align-items: center; gap: 12px; }
.color-pick { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; border: 1px solid var(--rule); border-radius: 999px; background: var(--page); cursor: pointer; font-size: 13px; font-variant-numeric: tabular-nums; }
.color-pick:hover { background: var(--hover); }
.color-pick input { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.color-pick input::-webkit-color-swatch-wrapper { padding: 0; }
.color-pick input::-webkit-color-swatch { border: 1px solid var(--rule); border-radius: 50%; }
.color-pick input::-moz-color-swatch { border: 1px solid var(--rule); border-radius: 50%; }
.color-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }

.legend { display: flex; flex-wrap: wrap; gap: 0; }
.legend .sw { flex: 1; min-width: 24px; }
.legend .sw i { display: block; height: 12px; }
.legend .sw span { display: block; font-size: 11px; color: var(--muted); margin: 4px 0 0 -2px; white-space: nowrap; text-align: left; font-variant-numeric: tabular-nums; }
.legend .sw:first-child span { margin-left: 0; }

/* ---------- filter rows: histogram + dual range */
.frow { padding: 10px 0 12px; border-top: 1px solid var(--grid); }
.frow:first-child { border-top: 0; padding-top: 0; }
.frow .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* long names (the buurt fields) wrap instead of pushing the min/max fields out of the panel */
.frow .name { min-width: 0; overflow-wrap: anywhere; }
.frow .foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 18px; }
.frow .name { font-size: 15px; }
.frow.on .name { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.frow .minmax { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.frow .minmax input, .frow .minmax select { width: 78px; flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--axis); border-radius: 0; background: var(--page); color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.frow.on .minmax input, .frow.on .minmax select { border-color: var(--rule); }
.frow .minmax select { width: 70px; }
.frow canvas { width: 100%; height: 34px; display: block; margin-top: 6px; cursor: pointer; }
.dual { position: relative; height: 20px; }
.dual input { position: absolute; left: 0; right: 0; width: 100%; top: 0; margin: 0; pointer-events: none; appearance: none; -webkit-appearance: none; background: none; height: 20px; }
.dual input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 14px; height: 14px; border-radius: 0; background: var(--page); border: 1.5px solid var(--ink); cursor: grab; }
.dual input::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 0; background: var(--page); border: 1.5px solid var(--ink); cursor: grab; }
.dual input:focus-visible::-webkit-slider-thumb { background: var(--accent-wash); }
.dual .track { position: absolute; left: 7px; right: 7px; top: 9px; height: 1px; background: var(--axis); }
.dual .fill { position: absolute; top: 8px; height: 3px; background: var(--accent); }
.frow .missing { font-size: 12px; color: var(--muted); }
/* filter cards (woonkaart): closed they show icon, name and, when set, the range; the head is
   one button that opens and closes the card, with a return icon beside it that clears the filter.
   Light grey border, green while the filter is set. The body slides like the sections (UI-11). */
.fcard { margin: 0 0 8px; padding: 0; border: 1px solid var(--grid); background: var(--page); transition: border-color 0.2s; }
/* .frow:first-child drops the rule above the first row of a plain list; a card keeps its border */
.frow.fcard:first-child { padding-top: 0; border-top: 1px solid var(--grid); }
.frow.fcard.on:first-child { border-top-color: var(--accent); }
.fcard.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.fhead { display: flex; align-items: center; gap: 2px; padding-right: 6px; }
.fhead:hover { background: var(--hover); }
.fopen { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 8px 4px 8px 10px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.fopen:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ftext { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fname { font-size: 15px; line-height: 1.25; text-decoration: none; overflow-wrap: break-word; hyphens: auto; }
.fval:empty { display: none; }
.fval { margin-top: 1px; font-size: 12px; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }
.fcard.on .fval { color: var(--accent); }
.fcaret { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 28px; color: var(--muted); }
.fcaret:hover { background: none; }
.fcaret .caret { transform: rotate(-90deg); transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fcard.open .fcaret .caret { transform: none; }
.freset { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; color: var(--accent); }
.freset:hover { color: var(--ink); }
.filter-icon { flex: 0 0 auto; display: block; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: color 0.2s; }
.filter-icon .track { opacity: 0.45; }
.filter-icon .span { stroke-width: 2.6; }
.fcard.on .filter-icon, .fcard.open .filter-icon { color: var(--ink); }
.fcard.on .filter-icon .span { stroke: var(--accent); }
.fbody { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fcard.open .fbody { grid-template-rows: 1fr; }
.finner { min-height: 0; min-width: 0; overflow: hidden; padding: 0 12px; transition: padding 0.32s; }
.fcard.open .finner { padding: 14px 12px 10px; }
.fcard.open .fhead { border-bottom: 1px solid var(--grid); }
.fcard .top { min-height: 26px; }
.fcard.on .name { text-decoration: none; }
.fhint { display: block; margin: 0 0 4px; font-size: 12px; }
.fcard .chips { margin: 4px 0 2px; }
@media (prefers-reduced-motion: reduce) { .fbody, .finner, .fcaret .caret, .fcard { transition: none; } }
.frow.empty canvas, .frow.empty .missing { display: none; }
/* Loading: grey stand-in bars pulse until the first counts arrive (.wait); later counts on their
   way dim the charts a little, after a short delay so a quick answer does not flicker. */
.frow.wait canvas, #scatter.wait { animation: wait 1.1s ease-in-out infinite alternate; cursor: progress; }
.chips button small:empty::before { content: ""; display: inline-block; width: 2.6em; height: 0.7em; vertical-align: -1px; background: var(--grid); animation: wait 1.1s ease-in-out infinite alternate; }
.stats-pending .frow canvas, .stats-pending #scatter { opacity: 0.5; transition: opacity 0.2s 0.4s; }
@keyframes wait { from { opacity: 1; } to { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .frow.wait canvas, #scatter.wait, .chips button small:empty::before { animation: none; opacity: 0.6; } }

/* gebruiksdoel tags */
.row { display: flex; gap: 8px; align-items: baseline; margin: 14px 0 4px; }
.row .lbl { font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.chips button { border: 1px solid var(--rule); border-radius: 999px; background: var(--page); color: var(--ink); padding: 4px 11px; cursor: pointer; font-size: 13px; }
.chips button:hover { background: var(--hover); }
.chips button[aria-pressed="true"] { background: var(--picked); color: var(--on-picked); border-color: var(--picked); }
.chips button[aria-pressed="true"] small { color: var(--on-picked); opacity: 0.7; }
.chips button small { color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.hint { color: var(--muted); font-size: 13px; font-weight: 400; margin-left: 6px; }

.xy { margin-top: 0; }
.xy label { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; color: var(--ink-2); font-size: 14px; }
select { flex: 1; min-width: 0; padding: 5px 6px; border: 1px solid var(--rule); border-radius: 0; background: var(--page); color: var(--ink); font-size: 14px; }
#scatter { width: 100%; height: 220px; display: block; margin-top: 10px; cursor: crosshair; touch-action: none; border-top: 1px solid var(--rule); }
.toggle { display: flex; align-items: center; gap: 10px; margin: 8px 0; cursor: pointer; font-size: 14px; }
.toggle input { accent-color: var(--accent); width: 15px; height: 15px; }
.range-row { display: flex; align-items: center; gap: 10px; color: var(--ink-2); margin-top: 10px; font-size: 14px; }
/* a labelled dropdown in a gear panel (Gemiddelde van, Kleur op) */
.sel-row { display: flex; align-items: center; gap: 10px; color: var(--ink-2); margin-top: 10px; font-size: 14px; }
.sel-row > span { flex: 0 0 auto; }
.subpanel .sel-row:first-child { margin-top: 0; }
.range-row input { flex: 1; accent-color: var(--accent); }

/* the busy pill (top right, never in the way) echoes Momus's floating "Draag bij" button */
#busy { position: fixed; top: 12px; right: 12px; z-index: 4; pointer-events: none; background: var(--picked); color: var(--on-picked); padding: 7px 16px; border: 1px solid var(--rule); border-radius: 999px; display: flex; gap: 10px; align-items: center; font-size: 14px; }
.spin { width: 12px; height: 12px; border: 1.5px solid color-mix(in srgb, var(--on-picked) 25%, transparent); border-top-color: var(--on-picked); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }

#tip { position: fixed; z-index: 6; line-height: 1.4; pointer-events: none; background: var(--card); color: var(--ink); padding: 8px 10px; border: 1px solid var(--rule); font-size: 13px; max-width: 300px; }
#tip b { display: block; margin-bottom: 2px; font: 400 16px/1.25 var(--serif); }
#tip .kv { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- detail card: the archive-coloured box of Momus's sign-up popup */
#detail { position: fixed; top: 16px; right: 16px; width: 360px; max-height: calc(100% - 32px); overflow-y: auto; z-index: 3; background: var(--card); border: 1px solid var(--rule); padding: 18px 20px; }
#detail-close { position: absolute; top: 10px; right: 10px; }
#detail h3 { margin: 0 34px 2px 0; font: 400 26px/1.15 var(--serif); }
#detail .sub { color: var(--muted); margin-bottom: 12px; font-size: 14px; }
#detail dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 6px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 14px; }
#detail dt { color: var(--muted); }
#detail dd { margin: 0; font-variant-numeric: tabular-nums; }
#detail h4 { margin: 18px 0 6px; font: 400 19px/1.2 var(--serif); }
#detail .big { font: 400 30px/1.1 var(--serif); font-variant-numeric: lining-nums; }
#detail .links { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule); }
#detail .links a { margin-right: 14px; font-size: 14px; }
.verdict { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 3px; font-size: 14px; }
.verdict li span:first-child { display: inline-block; width: 18px; }
.verdict .ok span:first-child { color: var(--accent); }
.verdict .no span:first-child { color: var(--err); }
.verdict .unk span:first-child { color: var(--muted); }
.badge { display: inline-block; padding: 2px 8px; color: #fff; font-weight: 600; }
.bar { position: relative; height: 10px; background: var(--grid); margin: 8px 0 4px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.bar b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
svg.spark text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---------- map controls: square, ink-bordered */
.maplibregl-ctrl-group { background: var(--surface) !important; border: 1px solid var(--rule) !important; border-radius: 0 !important; box-shadow: none !important; }
.maplibregl-ctrl-group button { border-radius: 0 !important; }
.maplibregl-ctrl-group button + button { border-top-color: var(--grid) !important; }
.maplibregl-ctrl button .maplibregl-ctrl-icon { filter: var(--icon-filter, none); }
.maplibregl-ctrl-scale { border-color: var(--ink) !important; background: color-mix(in srgb, var(--surface) 85%, transparent) !important; color: var(--ink) !important; font-family: var(--sans); }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib-inner { background: color-mix(in srgb, var(--surface) 85%, transparent) !important; color: var(--ink-2) !important; font-family: var(--sans); }
.maplibregl-ctrl-attrib-button { filter: var(--icon-filter, none); background-color: transparent !important; }
.maplibregl-ctrl-attrib a { color: var(--ink-2) !important; }

/* ---------- Voorbeeldkaarten (widgets.js): a strip of small tiles on the map, beside the legend.
   Each tile is a thumbnail over its title; the picked one wears Mint under Ink. */
.widgets { --wg-room: 16px; position: fixed; z-index: 2; bottom: 24px; left: calc(var(--panel-edge, 372px) + 24px); width: max-content; min-width: 168px; max-width: calc(100vw - var(--panel-edge, 372px) - 40px - var(--wg-room)); padding: 8px 12px 12px; background: var(--surface); border: 1px solid var(--rule); transition: left 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), max-width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s, transform 0.25s, padding 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
body:has(#legend-wrap:not([hidden])) .widgets { --wg-room: 332px; }
/* grown, the card fits all its tiles: it may run over the legend while pointed at */
.widgets.open, body:has(#legend-wrap:not([hidden])) .widgets.open { --wg-room: 16px; z-index: 3; }
.panel-dragging .widgets { transition: none; }
.wg-selecting .widgets { opacity: 0; transform: translateY(12px); pointer-events: none; }
/* the head never widens the card: the card hugs the tiles as they grow and shrink */
.wg-head { display: flex; align-items: baseline; gap: 12px; contain: inline-size; white-space: nowrap; overflow: hidden; }
.wg-fold { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: none; color: var(--ink); font: 400 17px/1.2 var(--serif); cursor: pointer; }
.wg-fold .caret { transition: transform 0.3s; }
.widgets.folded .wg-fold .caret { transform: rotate(-90deg); }
.wg-editing { margin-left: auto; font-size: 12px; color: var(--muted); }
.wg-editing .link { font-size: 12px; margin-left: 4px; }
.wg-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.widgets.folded .wg-body { grid-template-rows: 0fr; }
.wg-inner { position: relative; min-height: 0; overflow: hidden; }
.wg-strip { display: flex; gap: 10px; margin: 0; padding: 8px 0 2px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 2px; scrollbar-width: none; }
.wg-strip::-webkit-scrollbar { display: none; }
/* an explicit width, not only a flex-basis: engines that size the card from the tiles' content
   (a one-line title) made it far wider than its tiles */
.wg-tile { position: relative; flex: 0 0 auto; width: 150px; min-width: 0; scroll-snap-align: start; transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wg-open { display: flex; flex-direction: column; width: 100%; min-width: 0; overflow: hidden; padding: 0; border: 1px solid var(--grid); background: var(--page); color: var(--ink); text-align: left; cursor: pointer; transition: border-color 0.2s, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wg-img { display: grid; place-items: center; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); color: var(--muted); }
.wg-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wg-title { display: block; height: calc(2 * 1.3em + 12px); padding: 6px 8px; overflow: hidden; font-size: 13px; line-height: 1.3; border-top: 1px solid var(--grid); transition: background 0.2s, color 0.2s, height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), padding 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s, border-width 0.4s; }
.wg-title > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wg-open:hover, .wg-open:focus-visible { border-color: var(--ink); transform: translateY(-2px); }
.wg-open:hover img { transform: scale(1.05); }
.wg-tile.active .wg-open { border-color: var(--ink); }
.wg-tile.active .wg-title { background: var(--picked); color: var(--on-picked); border-top-color: var(--ink); }
.wg-add .wg-open { border-style: dashed; border-color: var(--rule); }
.wg-add .wg-img { background: transparent; }
.wg-add .wg-title { color: var(--ink-2); border-top-style: dashed; }
/* edit mode: small tools over the thumbnail */
.wg-tools { position: absolute; top: 5px; right: 5px; display: flex; gap: 2px; opacity: 0; transition: opacity 0.2s; }
.wg-tile:hover .wg-tools, .wg-tile:focus-within .wg-tools { opacity: 1; }
.wg-tools button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.wg-tools button:hover { background: var(--picked); color: var(--on-picked); }
.wg-tools button:disabled { opacity: 0.35; pointer-events: none; }
/* arrows at the ends of the strip, only while it scrolls */
.wg-arrow { position: absolute; top: calc(8px + 50px - 16px); transition: top 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.wg-arrow:hover { background: var(--picked); color: var(--on-picked); }
.wg-prev { left: -4px; }
/* small: tiles without titles, back to full while pointed at (.open, set with a short delay out) */
.widgets.compact:not(.open) { padding-top: 6px; padding-bottom: 8px; }
.wg-fold { transition: font-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.widgets.compact:not(.open) .wg-fold { font-size: 14px; }
.widgets.compact:not(.open) .wg-tile { width: 76px; }
.widgets.compact:not(.open) .wg-title { height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; opacity: 0; }
.widgets.compact:not(.open) .wg-strip { padding-top: 6px; }
.widgets.compact:not(.open) .wg-arrow { top: calc(6px + 25px - 16px); }
.widgets.compact:not(.open) .wg-tools { display: none; }
.widgets.compact:not(.open) .wg-tile.active .wg-open { box-shadow: inset 0 -3px 0 var(--picked); }
.wg-next { right: -4px; }
/* motion: tiles rise in one after another, a new one pops, a removed one folds away */
.wg-tile.enter { animation: wg-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i) * 60ms + 150ms); }
.wg-tile.born { animation: wg-pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.wg-tile.leaving { animation: wg-leave 0.28s ease-in both; }
@keyframes wg-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes wg-pop { 0% { opacity: 0; transform: scale(0.85); } 60% { transform: scale(1.03); } }
@keyframes wg-leave { to { opacity: 0; transform: scale(0.9); width: 0; margin-right: -10px; } }
/* choosing an area: the map dims around the box */
.wg-select { position: fixed; inset: 0; left: var(--panel-edge, 372px); z-index: 3; cursor: crosshair; opacity: 0; transition: opacity 0.25s; touch-action: none; }
.wg-select.on { opacity: 1; }
.wg-select:not(:has(.wg-box:not([hidden]))) { background: rgba(20, 20, 20, 0.18); }
.wg-hint { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); margin: 0; padding: 7px 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--picked); color: var(--on-picked); font-size: 14px; white-space: nowrap; cursor: default; }
.wg-hint kbd { padding: 0 4px; border: 1px solid currentColor; font: 12px ui-monospace, Menlo, monospace; }
.wg-box { position: fixed; border: 2px solid var(--m-mint); box-shadow: 0 0 0 100vmax rgba(20, 20, 20, 0.42); }
/* the form beside the box */
.wg-form { position: fixed; z-index: 4; width: 320px; padding: 14px 16px 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wg-form.on { opacity: 1; transform: none; }
.wg-form h3 { margin: 0 0 10px; font: 400 20px/1.2 var(--serif); }
.wg-preview { position: relative; aspect-ratio: 3 / 2; margin-bottom: 10px; border: 1px solid var(--grid); background: var(--surface-2); overflow: hidden; }
.wg-preview img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s; }
.wg-preview.loading img, .wg-preview.failed img { opacity: 0; }
.wg-preview.loading { animation: wait 1.1s ease-in-out infinite alternate; }
.wg-preview.loading::after { content: "Voorbeeld tekenen…"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--muted); }
.wg-preview.failed::after { content: "Geen voorbeeld; opslaan kan wel"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--muted); }
.wg-form label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.wg-form input { padding: 7px 9px; border: 1px solid var(--rule); border-radius: 0; background: var(--page); color: var(--ink); font: 15px var(--sans); }
.wg-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wg-what { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.wg-err { margin: 8px 0 0; font-size: 13px; color: var(--err); }
.wg-btns { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
button.wg-save { padding: 5px 16px; background: var(--picked); color: var(--on-picked); border-color: var(--rule); }
button.wg-save:disabled { opacity: 0.6; }
.wg-note { position: fixed; z-index: 5; left: 50%; bottom: 24px; transform: translate(-50%, 8px); margin: 0; padding: 8px 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; opacity: 0; transition: opacity 0.25s, transform 0.25s; }
.wg-note.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .widgets, .wg-body, .wg-open, .wg-img img, .wg-fold .caret, .wg-select, .wg-form, .wg-tile, .wg-title, .wg-arrow, .wg-fold { transition: none; }
  .wg-tile.enter, .wg-tile.born, .wg-tile.leaving, .wg-preview.loading { animation: none; }
}

/* ---------- phone: panel becomes a bottom sheet */
@media (max-width: 720px) {
  #panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 64vh; border-top: 1px solid var(--rule); box-shadow: none; }
  .panel-grip { display: none; }
  #panel header { cursor: auto; }
  #panel header { padding: 12px 16px 10px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--rule); }
  .brand { order: 2; margin-left: auto; }
  .logo-link { display: none; }
  h1 { font-size: 26px; margin: 0; padding: 0; border: 0; }
  .tagline { display: none; }
  section { padding: 18px 16px 16px; }
  section.textline { padding: 18px 16px 16px; }
  button.code-switch { top: 12px; right: 8px; }
  h2, .h2 { font-size: 26px; margin-bottom: 14px; }
  #panel.collapsed .scroll { display: none; }
  #collapse { display: inline-block; }
  #panel.collapsed #collapse { transform: rotate(180deg); }
  #detail { left: 16px; right: 16px; width: auto; top: 16px; max-height: 45vh; }
  .maplibregl-ctrl-top-right { top: 0 !important; }
  .maplibregl-ctrl-top-right .maplibregl-ctrl-zoom-in, .maplibregl-ctrl-top-right .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in) { display: none; }
  .map-legend { top: 12px; left: 12px; right: auto; bottom: auto; width: 220px; }
  .map-legend .note { display: none; }
  .widgets { left: 8px; right: 8px; width: auto; min-width: 0; max-width: none; bottom: calc(var(--sheet-h, 64vh) + 8px); padding: 6px 10px 10px; }
  body:has(#legend-wrap:not([hidden])) .widgets { --wg-room: 0px; }
  .wg-tile { width: 116px; }
  .wg-fold { font-size: 15px; }
  .wg-arrow { display: none; }
  .wg-select { left: 0; }
  .wg-form { left: 8px !important; right: 8px; width: auto; top: 12px !important; }
  #busy { top: auto; bottom: calc(64vh + 12px); }
}
/* heading where the filters switch from the address to its buurt (atlas roll-down fields) */
.fgroup { font: 500 1.05rem/1.2 var(--serif); margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--grid); }
.fgroup:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.fgroup .sub { display: block; font: 400 0.78rem/1.35 var(--sans); color: var(--muted); margin-top: 3px; }