:root {
  --bg: #f7f7f7;
  --ink: #1d1d1f;
  --muted: #8b8b90;
  --panel: rgba(253, 253, 253, 0.94);
  --tile: #f2f2f3;
  --hover: #f5f5f6;
  --sel: #ececee;
  --accent: #58a944;
  --plan: #7fb2e5;
  --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 18px 48px rgba(10, 10, 20, 0.07), 0 2px 6px rgba(10, 10, 20, 0.04);
  --raised: linear-gradient(#fafafa, #ececee);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }   /* geen tekst selecteren of kopiëren: voelt als een app */
img { -webkit-user-drag: none; user-drag: none; }
[hidden] { display: none !important; }
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden;
  font: 14px/1.4 Inter, -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
canvas#c { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
canvas#c:active { cursor: grabbing; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; text-align: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* gedeelde bouwstenen: panelen, pillen, verhoogde knoppen */
.panel, .pill, .bar { position: fixed; z-index: 2; background: var(--panel); border-radius: 28px; box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.btn-flat { background: #ececee; border-radius: 14px; padding: 10px 18px; font-weight: 600; white-space: nowrap; transition: background .12s; }
.btn-flat:hover { background: #e2e2e5; }
.btn-flat.small { padding: 7px 13px; font-size: 12.5px; border-radius: 12px; }
.icon-btn { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #6c6c72; transition: background .12s; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }

/* hover-uitleg */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 2px); background: rgba(29, 29, 31, 0.94); color: #fff; font: 500 12px/1.3 Inter, -apple-system, system-ui, sans-serif; padding: 6px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s, transform .12s; z-index: 30; }
[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .3s; }
#toolbar [data-tip]::after { top: auto; bottom: calc(100% + 10px); }
#right [data-tip]::after { left: auto; right: 0; transform: translate(0, 2px); }
#right [data-tip]:hover::after { transform: none; }
#left [data-tip]::after { left: 0; transform: translate(0, 2px); }
#left [data-tip]:hover::after { transform: none; }
button:focus-visible, #slider:focus-visible { outline: 2px solid #8fb7ec; outline-offset: 2px; }

/* paneel-opbouw */
.p-head { display: flex; align-items: center; justify-content: space-between; }
.p-label { font-weight: 600; font-size: 15px; margin-left: 6px; }
.p-body { overflow: auto; min-height: 0; }
h3 { margin: 18px 6px 10px; font-size: 14px; font-weight: 600; }

#left { top: 18px; left: 18px; width: 300px; max-height: calc(100vh - 36px); padding: 14px; display: flex; flex-direction: column; }
.logo { width: 44px; height: 44px; border-radius: 14px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.logo svg { width: 24px; height: 24px; stroke-width: 1.6; }
.p-title { margin: 14px 6px 14px; }
.p-title h1 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.015em; }
.p-title p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
#left .p-body { margin-top: 12px; padding-right: 2px; }
#left.collapsed { width: auto; }
#left.collapsed .p-title, #left.collapsed .tabs, #left.collapsed .p-body { display: none; }
#left.collapsed .p-head { gap: 10px; }

/* tabs: grijs spoor met witte actieve pil */
.tabs { display: flex; gap: 2px; padding: 4px; background: #f0f0f2; border-radius: 17px; }
.tabs button { flex: 1; padding: 9px 8px; border-radius: 13px; text-align: center; font-weight: 500; color: #7c7c82; transition: background .12s, color .12s; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { background: #fff; color: var(--ink); font-weight: 600; }
.tabs em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 2px; }

/* rijen met icoontegel (zoals de scene-lijst) */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rows > li, .rows > .row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 16px; cursor: pointer; width: 100%; transition: background .12s; }
.rows > li:hover, .rows > .row:hover { background: var(--hover); }
.rows > li.active { background: var(--sel); }
.tile-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--tile); display: grid; place-items: center; color: #55555a; }
.tile-ic svg { width: 19px; height: 19px; }
.name { display: block; font-weight: 500; line-height: 1.25; }
.when { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.ic-done, .ring, .ic-todo { display: none; }
li.done .tile-ic { background: #e3f2de; color: var(--accent); }
li.done .ic-done { display: block; }
li.active .tile-ic { background: #fff; }
li.active .ring { display: block; width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), #d9d9dd 0); -webkit-mask: radial-gradient(circle at center, transparent 6px, #000 6.6px); mask: radial-gradient(circle at center, transparent 6px, #000 6.6px); }
li.future .ic-todo, li:not(.done):not(.active) .ic-todo { display: block; color: #a6a6ac; }

/* schakelaars */
.switch .sw { width: 40px; height: 24px; border-radius: 12px; background: #d9d9dd; position: relative; transition: background .15s; }
.switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch.on .sw { background: var(--accent); }
.switch.on .sw::after { transform: translateX(16px); }

/* foto's */
.gallery h4 { margin: 14px 6px 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.gallery section:first-child h4 { margin-top: 2px; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-grid figure { margin: 0; cursor: zoom-in; transition: transform .12s; }
.photo-grid figure:hover { transform: translateY(-2px); }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; display: block; background: var(--tile); transition: box-shadow .12s; }
.photo-grid figure:hover img { box-shadow: 0 8px 20px rgba(20, 20, 30, 0.16); }
.photo-grid figcaption { font-size: 11px; color: var(--muted); margin: 5px 4px 0; line-height: 1.3; }
.empty { color: var(--muted); font-size: 12.5px; padding: 10px 8px; }

/* bovenste werkbalk */
#toolbar { bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 7px 7px 7px 7px; border-radius: 22px; }
#toolbar .div { width: 1px; height: 24px; background: #e6e6e9; margin: 0 6px; }
.tool { position: relative; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #5e5e64; transition: background .12s, color .12s; }
.tool svg { width: 21px; height: 21px; }
.tool:hover { background: var(--hover); color: var(--ink); }
.tool.on { background: #e9e9ec; color: var(--ink); }
#toolbar .btn-flat { padding: 11px 18px; }

/* rechterpaneel */
#right { top: 18px; right: 18px; width: 264px; padding: 14px; max-height: calc(100vh - 36px); display: flex; flex-direction: column; }
#right.collapsed { width: auto; }
#right.collapsed .p-body { display: none; }
#right.collapsed .p-label { display: none; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { aspect-ratio: 1 / 0.95; border-radius: 18px; background: var(--tile); display: grid; place-content: center; justify-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: #5e5e64; transition: background .12s, box-shadow .12s, color .12s; }
.tile svg { width: 22px; height: 22px; }
.tile:hover { background: #eaeaec; color: var(--ink); }
.tile.on { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* onderste tijdlijn, zoals de invoerbalk in het voorbeeld */
#timeline { left: 50%; top: 18px; transform: translateX(-50%); width: min(780px, calc(100vw - 680px)); min-width: 560px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 10px 12px 10px 12px; border-radius: 28px; }
.pct { background: var(--tile); border-radius: 18px; padding: 8px 14px; font: 650 22px/1 Inter, -apple-system, system-ui, sans-serif; letter-spacing: -0.03em; min-width: 76px; text-align: center; }
.pct small { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 1px; }
.mid { min-width: 0; }
.meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; white-space: nowrap; overflow: hidden; }
.meta strong { font-weight: 600; font-size: 13px; }
.meta span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.slider { position: relative; height: 20px; }
#ticks { position: absolute; inset: 0; pointer-events: none; }
#ticks b { position: absolute; top: 7px; width: 1px; height: 6px; background: #d3d3d8; }
#ticks b.today { background: var(--ink); height: 12px; top: 4px; width: 1.5px; }
#slider { position: absolute; inset: 0; width: 100%; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
#slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; margin-top: 7px; background: linear-gradient(to right, var(--accent) var(--fill, 50%), #e6e6ea var(--fill, 50%)); }
#slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); transition: transform .12s; }
#slider:hover::-webkit-slider-thumb { transform: scale(1.15); }
#slider::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--fill, 50%), #e6e6ea var(--fill, 50%)); }
#slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.date { display: flex; align-items: center; gap: 10px; }
.date-pill { background: var(--tile); border-radius: 16px; padding: 0 14px; height: 38px; display: flex; align-items: center; gap: 9px; width: 148px; }
.date-pill strong { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); }
.dot.now { background: #e5384a; animation: live 1.4s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(229, 56, 74, 0.5); }
@keyframes live { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229, 56, 74, 0.45); } 50% { opacity: 0.35; box-shadow: 0 0 0 5px rgba(229, 56, 74, 0); } }
.dot.planned { background: #4f8fd1; }
.date .btn-flat.small { height: 38px; padding: 0 14px; display: grid; place-items: center; }

/* meldingen, richtpunt, lightbox */
#lightbox { position: fixed; inset: 0; background: rgba(247, 247, 247, 0.98); display: flex; align-items: center; justify-content: center; z-index: 10; cursor: zoom-out; padding: 12px; }
#lightbox[hidden] { display: none; }
#lightbox figure { margin: 0; display: grid; justify-items: center; gap: 10px; max-width: calc(100vw - 24px); }
#lightbox img { width: auto; height: auto; max-width: calc(100vw - 24px); max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); object-fit: contain; border-radius: 16px; box-shadow: 0 12px 50px rgba(0, 0, 0, 0.14); background: #fff; }
#lightbox figcaption { display: flex; gap: 14px; align-items: baseline; color: var(--muted); }
#lightbox p { margin: 0; }
#lb-count { font: 500 12px var(--mono); }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 11; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: grid; place-items: center; color: var(--ink); cursor: pointer; transition: background .12s, transform .12s; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14); }
#lb-prev { left: 14px; } #lb-next { right: 14px; }
.lb-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.lb-nav svg { width: 24px; height: 24px; }

/* maatvoering & kamerlabels (CSS2D): zelfde taal als de rest van de interface (witte pillen, inkt-tekst, zachte schaduw) */
.dim { font: 600 10px/1 Inter, -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #26292d; background: none; border: 0; padding: 0; margin-top: -11px; white-space: nowrap; pointer-events: none; text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 6px #fff, 0 0 6px #fff; }   /* maat: tekst op de maatlijn, zonder bubbel */
.dim.room { margin-top: 0; text-shadow: none; color: #3a3d42; background: rgba(253, 253, 253, 0.82); border-radius: 14px; font: 500 11px/1.25 Inter, -apple-system, system-ui, sans-serif; text-align: center; padding: 4px 10px; box-shadow: 0 1px 6px rgba(20, 24, 30, 0.08); }
.dim.room small { display: block; font: 500 9.5px Inter, -apple-system, system-ui, sans-serif; color: #8b8b90; margin-top: 1px; }

@media (max-width: 1180px) and (min-width: 761px) {
  #timeline { width: calc(100vw - 36px); min-width: 0; }
  #right, #left { top: 96px; }
  #right { width: 230px; }
}
.mobile-only { display: none; }
@media (max-width: 760px) {
  .mobile-only { display: grid; }
  /* panelen: onderaan, over de volle breedte, ~70% van de hoogte (boven de werkbalk) */
  /* positie wordt door main.js berekend (--sheet-top = onder de tijdlijn, --sheet-bottom = boven de werkbalk) zodat niets overlapt */
  #left, #right { display: none; position: fixed; left: 12px; right: 12px; top: auto; bottom: var(--sheet-bottom, 148px); width: auto; max-height: none; height: min(70vh, calc(100vh - var(--sheet-top, 124px) - var(--sheet-bottom, 148px))); height: min(70dvh, calc(100dvh - var(--sheet-top, 124px) - var(--sheet-bottom, 148px))); }
  #left.open, #right.open { display: flex; }
  #left .p-head .icon-btn, #right .p-head .icon-btn { display: none; }
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
  /* werkbalk: grote duimdoelen. Rij 1: paneel, maten, kleur, zon, paneel. Rij 2: plattegrond (BG / 1e / Zolder) */
  #toolbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 8px; left: 12px; right: 12px; transform: none; max-width: none; border-radius: 26px; overflow: visible; }
  #toolbar .div { display: none; }
  .tool { width: auto; height: 48px; border-radius: 16px; }
  .tool svg { width: 23px; height: 23px; }
  #plan-seg { grid-column: 1 / -1; order: 99; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  #plan-seg .tool { height: 48px; background: var(--tile); display: flex; gap: 8px; align-items: center; justify-content: center; }
  #plan-seg .tool.on { background: #e1e1e5; }
  #plan-seg .tool .lvl { position: static; font: 600 13px Inter, -apple-system, system-ui, sans-serif; }
  /* tijdlijn: percentage + fase + slider, daaronder datum en de Eindbeeld/Vandaag-knop */
  #timeline { grid-template-columns: auto 1fr; top: 12px; width: calc(100vw - 24px); min-width: 0; gap: 8px 10px; padding: 8px 12px 10px 8px; }
  .pct { min-width: 52px; font-size: 18px; padding: 6px 8px; }
  .date { display: flex; grid-column: 1 / -1; justify-content: space-between; align-items: center; gap: 8px; }
  .date-pill { width: auto; flex: 1; min-width: 0; height: 34px; }
  #jump { padding: 8px 14px; height: 34px; }
  .popover { bottom: var(--sheet-bottom, 148px); left: 12px; right: 12px; width: auto; transform: none; }
}

/* segmentknoppen (plattegrond) */
.seg { display: flex; gap: 2px; padding: 4px; background: #f0f0f2; border-radius: 16px; }
.seg button { flex: 1; padding: 8px 4px; border-radius: 12px; text-align: center; font-size: 13px; font-weight: 500; color: #7c7c82; transition: background .12s, color .12s; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: #fff; color: var(--ink); font-weight: 600; }

/* zonstand */
#sun-time { width: 100%; margin: 6px 0 0; accent-color: var(--ink); cursor: pointer; }
.field { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.field select { appearance: none; border: 0; background: var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; border-radius: 12px; padding: 10px 14px; font: 500 13px Inter, -apple-system, system-ui, sans-serif; color: var(--ink); cursor: pointer; }
.field select:hover { background-color: #eaeaec; }

/* tijdlijn-knoppen (Vandaag | Eindbeeld) en plattegrond-icoongroep */
.seg2 { display: flex; gap: 2px; padding: 3px; background: #f0f0f2; border-radius: 15px; }
.seg2 button { padding: 8px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 600; color: #55555a; transition: background .12s, color .12s; white-space: nowrap; }
.seg2 button:hover { background: #fff; color: var(--ink); }
.tool-group { display: flex; gap: 2px; }
#toolbar .tool-group .tool.on { background: #e9e9ec; }

/* zonstand-popover boven de werkbalk */
.popover { position: fixed; z-index: 3; left: 50%; bottom: 92px; transform: translateX(-50%); width: 300px; padding: 14px 16px 16px; background: var(--panel); border-radius: 22px; box-shadow: var(--shadow); backdrop-filter: blur(16px); display: grid; gap: 10px; }
.popover[hidden] { display: none; }
.pop-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.pop-head strong { font: 500 12px var(--mono); color: var(--muted); }

.tool .lvl { position: absolute; right: 3px; bottom: 3px; font: 700 9px/1 var(--mono); font-style: normal; color: var(--ink); }
#jump { padding: 10px 16px; }

/* markering van jullie woning: zwart label met pijltje */
.ours { background: var(--ink); color: #fff; border-radius: 12px; padding: 5px 11px; text-align: center; line-height: 1.15; pointer-events: none; position: relative; margin-bottom: 12px; }
.ours b { display: block; font: 650 12px Inter, -apple-system, system-ui, sans-serif; }
.ours small { display: block; font: 500 9.5px Inter, -apple-system, system-ui, sans-serif; opacity: 0.7; }
.ours::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--ink); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.row.na { opacity: 0.45; }

/* aanraakschermen: geen blijvende hover-uitleg na een tik */
@media (hover: none) { [data-tip]::after { display: none !important; } }

/* mobiel: de zon-popover staat vlak boven de werkbalk (moet na de basisregel komen) */
@media (max-width: 760px) {
  .popover { left: 12px; right: 12px; width: auto; transform: none; bottom: var(--sheet-bottom, 148px); }
}

/* mobiel: compacte panelen; Bouwfases mag over de tijdlijn heen; Weergave en zon zo klein mogelijk */
@media (max-width: 760px) {
  #left, #right { z-index: 6; }
  #left { top: 12px; height: auto; }
  #left .p-head, .logo { display: none; }
  #left .p-title { margin-top: 4px; }
  #right { height: auto; max-height: calc(100vh - var(--sheet-bottom, 148px) - 12px); max-height: calc(100dvh - var(--sheet-bottom, 148px) - 12px); padding: 10px; border-radius: 22px; }
  #right .p-head { margin-bottom: 0; }
  #right h3 { margin: 10px 4px 6px; font-size: 12px; }
  #right .tiles { gap: 6px; }
  #right .tile { aspect-ratio: auto; height: 52px; border-radius: 14px; font-size: 11px; gap: 3px; }
  #right .tile svg { width: 19px; height: 19px; }
  #right .rows > .row { padding: 3px 6px; }
  #right .tile-ic { width: 30px; height: 30px; border-radius: 10px; }
  #right .tile-ic svg { width: 17px; height: 17px; }
  .popover { left: 50%; right: auto; transform: translateX(-50%); width: min(270px, calc(100vw - 24px)); padding: 10px 12px 12px; gap: 6px; border-radius: 18px; }
  .popover .pop-head { font-size: 13px; }
  .popover .field { font-size: 11px; gap: 3px; }
  .popover .field select { padding: 8px 12px; font-size: 12.5px; }
}

/* Eindbeeld/Vandaag-knop: label altijd exact in het midden */
#jump { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1; }
@media (max-width: 760px) { #jump { height: 34px; min-width: 104px; padding: 0 14px; } }

/* sluitknoppen */
.lb-close { position: fixed; top: 14px; right: 14px; z-index: 12; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: grid; place-items: center; color: var(--ink); cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14); transition: background .12s; }
.lb-close:hover { background: #fff; }
.lb-close svg, .sheet-close svg { width: 22px; height: 22px; }
.sheet-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--tile); place-items: center; color: var(--ink); }
.sheet-close:active { background: #e1e1e5; }
@media (max-width: 760px) {
  #left .p-title { padding-right: 44px; }
  #right .p-head { padding-right: 44px; min-height: 36px; align-items: center; }
}
/* geen dubbeltik-zoom van de pagina (op de kaart zelf blijft touch-action: none) */
body * { touch-action: manipulation; }
canvas#c { touch-action: none; }

/* mobiel: verticale streepjes in rij 1 van de werkbalk (links van Maten en tussen Zon en Weergave) */
@media (max-width: 760px) {
  #toggle-dims::before, #open-right::before { content: ""; position: absolute; left: -4px; top: 13px; bottom: 13px; width: 1px; background: #dcdce1; }
}




/* tekenpaneel: zelfde stijl als de zonstand-popover en de werkbalk */
#world-ui.popover { width: min(392px, calc(100vw - 24px)); gap: 12px; z-index: 4; }
#world-ui .pop-head { align-items: center; }
#world-ui .pop-head strong { margin-left: auto; margin-right: 8px; }
#world-ui .pop-head .tool { width: 32px; height: 32px; border-radius: 11px; }
#world-ui .pop-head .tool svg { width: 17px; height: 17px; }
#world-ui .wu-group { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
#world-ui .wu-group .div { width: 1px; height: 22px; background: rgba(0,0,0,.08); margin: 0 4px; }
#world-ui .tool:disabled { opacity: .35; cursor: default; background: none; }
#world-ui .wu-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
#world-ui .wu-seg { display: flex; gap: 3px; padding: 3px; background: var(--tile); border-radius: 13px; }
#world-ui .wu-seg button { border: 0; background: none; padding: 7px 11px; border-radius: 10px; font: 500 12.5px Inter, -apple-system, system-ui, sans-serif; color: #5e5e64; cursor: pointer; transition: background .12s, color .12s; }
#world-ui .wu-seg button:hover { color: var(--ink); }
#world-ui .wu-seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(10,10,20,.12); }
#world-ui .wu-ref { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; padding-top: 4px; border-top: 1px solid rgba(0,0,0,.06); }
#world-ui .wu-ref[hidden] { display: none; }
#world-ui .wu-ref input[type=range] { width: 100%; accent-color: var(--ink); }
#world-ui .wu-ref input[type=file] { font: 500 11.5px Inter, -apple-system, system-ui, sans-serif; color: var(--muted); width: 100%; }
#world-ui .wu-hint { font-size: 11px; line-height: 1.4; color: var(--muted); }

/* lopen: kleine balk boven de werkbalk (geen overlap) en een richtpuntje in het midden */
#walk-ui { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 4; display: flex; gap: 12px; align-items: center; padding: 8px 8px 8px 16px; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); backdrop-filter: blur(16px); font-size: 12px; color: var(--muted); max-width: calc(100vw - 24px); }
#walk-ui[hidden] { display: none; }
#walk-ui button { border: 0; padding: 8px 14px; border-radius: 12px; background: var(--ink); color: #fff; font: 600 12.5px Inter, -apple-system, system-ui, sans-serif; cursor: pointer; }
#walk-ui .stick { display: none; position: fixed; left: 22px; bottom: 150px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.45); border: 2px solid rgba(0,0,0,.15); }
#walk-ui .stick i { position: absolute; left: 35px; top: 35px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.35); }
#walk-cross { position: fixed; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; z-index: 3; }
#walk-cross[hidden] { display: none; }