/* ===========================================================================
   Tuinplanner (/tuinplanner).

   Standalone app-pagina: laadt bewust niet style.css van de site mee (zelfde patroon als
   quote-accept.css / pre-intake.css). Dit is een fullscreen tekentool, geen marketingpagina.
   Refresh 2026-09-09 (feedback Sebas "oudbollig"): neutrale tool-chrome op een tokenlaag (--tp-*),
   donker thema via html[data-theme="dark"], SVG-iconen (icons.js), tool-rail links,
   weergavebalk rechtsboven, statusbalk onderaan, inklapbare zijpanelen.
   Breakpoints: 1024 (alleen smallere panelen) / 768 (drawers + onderbalk) / 640 / 480.
   Tikdoelen hangen aan @media (pointer: coarse), niet aan een breedte (iPad landscape = 1024).
   Geen color-mix()/oklch(): html2canvas 1.4.1 (feedback-screenshot) kent alleen rgb/rgba/hsl.
   =========================================================================== */

/* De twee @font-face-regels stonden hier tot 2026-09-25, met een kaal url('/assets/fonts/...').
   De bestanden staan in ftp/platform/assets/fonts/, dus dat pad werkt alleen waar het platform de
   webroot IS; op www.tuindesigner.nl (platform onder /platform) 404'den beide fonts stil. CSS kan geen
   webbasis lezen, dus ze komen nu uit tp_font_style_tag() in inc/host.php, dat tp_platform_asset()
   gebruikt. Die functie hoort in de <head> van elke pagina die dit stylesheet laadt, VOOR de link.
   Handschrift-font Caveat (SIL OFL) is voor de schetsmodus: maten/labels/legenda op het canvas, zie
   tpText in render.js. */

/* ── Tokens: semantische laag (bron) ─────────────────────────────────────────────────────────
   Alle kleuren van de tool-chrome staan hier. Het tekenvlak zelf (papier/gras/kleuren van
   objecten) komt uit render.js en volgt het thema bewust NIET: een tuintekening blijft
   een lichte tekening, ook op een donker bureaublad (zoals CAD-tools dat doen). */
:root {
  --tp-bg: #f2f4f2;
  --tp-surface: #ffffff;
  --tp-surface-2: #f6f8f6;
  --tp-surface-3: #eceeec;
  --tp-glass: rgba(255, 255, 255, 0.86);
  --tp-border: #e2e6e2;
  --tp-border-strong: #c9d0c9;
  --tp-text: #1b1f1c;
  --tp-text-2: #5a615c;
  --tp-text-3: #8b928d;
  --tp-accent: #3E7A4F;
  --tp-accent-hover: #2f6740;
  --tp-accent-soft: #e8f1ea;
  --tp-accent-ink: #ffffff;
  --tp-danger: #b3392b;
  --tp-danger-soft: #fbeeec;
  --tp-warn: #b45309;
  --tp-warn-soft: #fdf1e2;
  --tp-overlay: rgba(18, 24, 20, 0.55);
  /* 3D-weergave (3d.js): eigen, neutrale (niet-groene) achtergrond, hoort niet bij
     --tp-surface-* — voorheen alleen als losse hex/rgba in een "thema-correcties"-blok gepatcht. */
  --tp-3d-bg: #dfe8ef;
  --tp-3d-hint-bg: rgba(255, 255, 255, 0.85);
  --tp-3d-walkpad-btn-bg: rgba(255, 255, 255, 0.9);
  --tp-radius: 12px;
  --tp-radius-sm: 8px;
  --tp-radius-xs: 6px;
  --tp-shadow-1: 0 1px 2px rgba(20, 24, 22, 0.06), 0 1px 3px rgba(20, 24, 22, 0.08);
  --tp-shadow-2: 0 8px 24px rgba(20, 24, 22, 0.14);
  /* Focusring (toegankelijkheid, 2026-10-02): een smalle rand in de vlakkleur en daaromheen een volle
     accentlijn. Haalt 5:1 (licht) en 6:1 (donker) tegen de achtergrond; de oude 35%-waas haalde 1,6:1
     (WCAG 2.1 AA, 1.4.11 vraagt 3:1). De binnenrand houdt de ring zichtbaar op een groene knop. */
  --tp-focus: 0 0 0 2px var(--tp-surface), 0 0 0 4px var(--tp-accent);
  --tp-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --tp-fs: 13.5px;
  --tp-fs-sm: 12px;
  --tp-fs-xs: 11px;
  --tp-ctrl-h: 34px;
  --tp-header-h: 48px;
  --tp-status-h: 26px;
  --tp-panel-left-w: 280px;
  --tp-panel-right-w: 330px;
  --tp-panel-strip-w: 44px;
  --tp-mobilebar-h: 58px;
}
/* Historische aliassen: honderden regels verderop in dit bestand (en in de losse modules)
   gebruiken deze namen. Ze wijzen naar de semantische laag, zodat een themawissel overal
   doorwerkt zonder elke regel te herschrijven. Wijzig de laag hierboven, nooit een alias. */
:root {
  --green: var(--tp-accent);
  --green-dark: var(--tp-accent-hover);
  --green-pale: var(--tp-accent-soft);
  --pine: var(--tp-text);
  --stone-light: var(--tp-bg);
  --terracotta: var(--tp-accent);
  --terracotta-dark: var(--tp-accent-hover);
  --black: var(--tp-text);
  --gray: var(--tp-text-2);
  --gray-light: var(--tp-surface-2);
  --white: var(--tp-surface);
  --border: var(--tp-border);
  --radius: var(--tp-radius);
  --radius-sm: var(--tp-radius-sm);
  --shadow: var(--tp-shadow-2);
  --font-display: var(--tp-font);
  --font-body: var(--tp-font);
}
/* Donker thema (opt-in via de schakelaar in de kop, voorkeur in localStorage 'tuinplanner:theme';
   in de admin-embed volgt de tool het admin-thema 'admin_theme'). Alleen laag 1 wordt herdefinieerd. */
html[data-theme="dark"] {
  color-scheme: dark;
  --tp-bg: #141719;
  --tp-surface: #1d2124;
  --tp-surface-2: #252a2d;
  --tp-surface-3: #2d3336;
  --tp-glass: rgba(29, 33, 36, 0.88);
  --tp-border: #30373b;
  --tp-border-strong: #454e53;
  --tp-text: #e8ebe9;
  --tp-text-2: #a8afab;
  --tp-text-3: #7d8480;
  --tp-accent: #5fae76;
  --tp-accent-hover: #79c08d;
  --tp-accent-soft: rgba(95, 174, 118, 0.16);
  --tp-accent-ink: #0f1a13;
  --tp-danger: #e5766a;
  --tp-danger-soft: rgba(229, 118, 106, 0.15);
  --tp-warn: #e0a55d;
  --tp-warn-soft: rgba(224, 165, 93, 0.14);
  --tp-overlay: rgba(0, 0, 0, 0.62);
  --tp-3d-bg: #1b2126;
  --tp-3d-hint-bg: rgba(29, 33, 36, 0.85);
  --tp-3d-walkpad-btn-bg: rgba(29, 33, 36, 0.9);
  --tp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
  --tp-shadow-2: 0 10px 28px rgba(0, 0, 0, 0.55);
  --tp-focus: 0 0 0 2px var(--tp-surface), 0 0 0 4px var(--tp-accent);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Eigen display-regels (flex op .tp-hint, inline-flex op .tp-btn) overrulen anders de
   UA-regel voor het hidden-attribuut. Daarom hier expliciet en met !important. */
[hidden] { display: none !important; }

.tp-body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--tp-font);
  font-size: var(--tp-fs);
  line-height: 1.4;
  color: var(--tp-text);
  background: var(--tp-bg);
  overflow: hidden; /* de app scrolt zelf per paneel, nooit de pagina */
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
/* Iconen (icons.js): kleur volgt de tekst van de knop, nooit een eigen kleur. */
.tp-ico { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -0.28em; }
[data-icon]:empty { display: inline-block; width: 1.25em; height: 1.25em; }
.tp-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Zichtbare focus voor toetsenbordgebruik, nergens een outline voor muisklikken. */
.tp-body :is(button, input, select, textarea, a, [tabindex]):focus { outline: none; }
.tp-body :is(button, input, select, textarea, a, [tabindex]):focus-visible { box-shadow: var(--tp-focus); }

/* --- Pre-intake-banner (2026-08-24): schets aanleveren bij een lopende pre-intake --- */
.tp-preintake-banner {
  flex: 0 0 auto;
  padding: 7px 14px;
  background: var(--tp-accent-soft);
  color: var(--tp-accent-hover);
  border-bottom: 1px solid var(--tp-border);
  font-size: var(--tp-fs-sm);
  text-align: center;
}

/* ── Kopbalk (48 px): merk, ontwerpnaam + opslagstatus, menu's, primaire actie ──────────── */
.tp-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  min-height: var(--tp-header-h);
  background: var(--tp-surface);
  border-bottom: 1px solid var(--tp-border);
  position: relative;
  z-index: 40; /* menu-panelen hangen eronder, boven rail/viewbar (20-30), onder drawers (60) */
}
.tp-brand { display: flex; align-items: center; gap: 8px; flex: none; }
.tp-logo { height: 24px; width: auto; display: block; }
.tp-header h1 {
  margin: 0;
  font-size: var(--tp-fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tp-text-3);
  white-space: nowrap;
}
.tp-doc { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; margin-left: 6px; }
.tp-name-input {
  flex: 0 1 240px;
  min-width: 90px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--tp-radius-sm);
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--tp-text);
}
.tp-name-input:hover { border-color: var(--tp-border); background: var(--tp-surface-2); }
.tp-name-input:focus { border-color: var(--tp-border-strong); background: var(--tp-surface); }
.tp-save-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--tp-fs-xs);
  color: var(--tp-text-3);
  white-space: nowrap;
}
.tp-save-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tp-border-strong); }
.tp-save-status.is-saved::before { background: var(--tp-accent); }
.tp-save-status.is-dirty::before { background: var(--tp-warn); }
.tp-save-status.is-saving::before { background: var(--tp-text-3); animation: tp-pulse 1s ease-in-out infinite; }
.tp-save-status:empty { display: none; }
@keyframes tp-pulse { 50% { opacity: 0.3; } }
.tp-header-spacer { flex: 1; }
.tp-header-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.tp-header-primary { display: flex; align-items: center; gap: 6px; flex: none; }
.tp-header-primary:empty { display: none; }
.tp-header-group { display: contents; }

/* ── Knoppen ─────────────────────────────────────────────────────────────────────────────── */
.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  min-height: var(--tp-ctrl-h);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-surface);
  color: var(--tp-text);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.tp-btn:hover { background: var(--tp-surface-2); border-color: var(--tp-border-strong); }
.tp-btn:active { background: var(--tp-surface-3); }
.tp-btn:disabled { opacity: 0.45; cursor: default; }
.tp-btn-primary { background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-accent-ink); }
.tp-btn-primary:hover { background: var(--tp-accent-hover); border-color: var(--tp-accent-hover); }
.tp-btn-accent { background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-accent-ink); }
.tp-btn-accent:hover { background: var(--tp-accent-hover); border-color: var(--tp-accent-hover); }
.tp-btn-danger { color: var(--tp-danger); border-color: var(--tp-border); }
.tp-btn-danger:hover { background: var(--tp-danger-soft); border-color: var(--tp-danger); }
.tp-btn-sm { padding: 0 10px; min-height: 30px; font-size: var(--tp-fs-sm); }
.tp-btn-ghost { border-color: transparent; background: transparent; }
.tp-btn-ghost:hover { background: var(--tp-surface-2); border-color: transparent; }
.tp-active { background: var(--tp-accent-soft); border-color: var(--tp-accent); color: var(--tp-accent-hover); }
/* Vierkante icoonknop (kop, rail, viewbar, objectkop) */
.tp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tp-ctrl-h);
  height: var(--tp-ctrl-h);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--tp-radius-sm);
  background: transparent;
  color: var(--tp-text-2);
  font: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.tp-icon-btn:hover { background: var(--tp-surface-2); color: var(--tp-text); }
.tp-icon-btn:disabled { opacity: 0.4; cursor: default; }
.tp-icon-btn.tp-active, .tp-icon-btn[aria-pressed="true"] { background: var(--tp-accent-soft); color: var(--tp-accent-hover); }
.tp-icon-btn .tp-ico { width: 18px; height: 18px; }

/* ── Menu's in de kop (Bestand / Exporteren) ─────────────────────────────────────────────── */
.tp-menu { position: relative; }
.tp-menu-btn { gap: 4px; padding: 0 8px 0 10px; }
.tp-menu-btn .tp-menu-caret { width: 14px; height: 14px; opacity: 0.6; }
.tp-menu-btn[aria-expanded="true"] { background: var(--tp-surface-2); }
.tp-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 45;
  min-width: 240px;
  padding: 6px;
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow-2);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tp-menu-panel.tp-popover--flip { left: auto; right: 0; }
.tp-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: none;
  border-radius: var(--tp-radius-xs);
  background: none;
  color: var(--tp-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tp-menu-item:hover, .tp-menu-item:focus-visible { background: var(--tp-surface-2); }
.tp-menu-item:disabled { opacity: 0.45; cursor: default; }
.tp-menu-item .tp-ico { color: var(--tp-text-2); }
.tp-menu-item .tp-btn-label { flex: 1 1 auto; min-width: 0; }
.tp-menu-item kbd, .tp-kbd {
  font: inherit;
  font-size: var(--tp-fs-xs);
  color: var(--tp-text-3);
  padding: 1px 6px;
  border: 1px solid var(--tp-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--tp-surface-2);
  white-space: nowrap;
}
.tp-menu-divider { height: 1px; margin: 4px 6px; background: var(--tp-border); }
.tp-menu-heading { padding: 6px 10px 2px; font-size: var(--tp-fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tp-text-3); }
/* Groepen met een kopje (vindbaarheid, 2026-09-29): de lijn tussen twee groepen komt hier vandaan, niet
   uit losse .tp-menu-divider-elementen. Een lege groep zet tpSyncMenuVisibility() op hidden. Lange menu's
   scrollen binnen het paneel, zodat ook een liggende telefoon bij het laatste item kan. */
.tp-menu-group { display: flex; flex-direction: column; gap: 1px; }
.tp-menu-group[hidden] { display: none; }
.tp-menu-group + .tp-menu-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--tp-border); }
.tp-menu-panel { max-height: calc(100vh - var(--tp-header-h, 56px) - 16px); overflow-y: auto; overscroll-behavior: contain; }
/* Kort oplichten van een knop die de rondleiding "Nieuw" aanwijst (app/rondleiding.js). Alleen outline en
   schaduw, zodat de knop zelf niet verspringt. */
.tp-nieuw-markeer { outline: 3px solid var(--tp-accent); outline-offset: 2px; box-shadow: 0 0 0 6px var(--tp-accent-soft); animation: tp-nieuw-puls 0.9s ease-in-out 3; }
@keyframes tp-nieuw-puls { 50% { outline-offset: 5px; } }
@media (prefers-reduced-motion: reduce) { .tp-nieuw-markeer { animation: none; } }
/* Rondleiding "Nieuw in de planner" (app/rondleiding.js): klein paneel linksonder boven de statusbalk, geen
   modal, zodat de knoppen die het aanwijst zichtbaar blijven. Op een telefoon een onderblad boven de
   mobiele balk. */
.tp-nieuw {
  position: fixed;
  left: 16px;
  bottom: calc(var(--tp-status-h, 28px) + 16px);
  z-index: 70;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--tp-surface);
  color: var(--tp-text);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow-2);
}
.tp-nieuw[hidden] { display: none; }
.tp-nieuw-kop { display: flex; align-items: flex-start; gap: 8px; padding: 12px 12px 4px 14px; }
.tp-nieuw-kop h2 { flex: 1 1 auto; margin: 0; font-size: 1rem; font-weight: 700; }
.tp-nieuw-sub { margin: 0; padding: 0 14px 6px; font-size: var(--tp-fs-sm); color: var(--tp-text-2); }
.tp-nieuw-lijst { list-style: none; margin: 0; padding: 0 8px; overflow-y: auto; overscroll-behavior: contain; }
.tp-nieuw-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-top: 1px solid var(--tp-border); }
.tp-nieuw-item:first-child { border-top: 0; }
.tp-nieuw-item .tp-ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--tp-accent); }
.tp-nieuw-tekst { flex: 1 1 auto; min-width: 0; font-size: var(--tp-fs-sm); line-height: 1.4; }
.tp-nieuw-tekst strong { display: block; font-weight: 700; }
.tp-nieuw-item .tp-btn { flex: none; align-self: center; }
.tp-nieuw-voet { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 12px 12px; border-top: 1px solid var(--tp-border); }
@media (max-width: 768px) {
  .tp-nieuw { left: 8px; right: 8px; width: auto; max-width: none; bottom: calc(var(--tp-mobilebar-h) + 8px + env(safe-area-inset-bottom, 0px)); max-height: 60vh; }
  .tp-nieuw-item .tp-btn { min-height: 40px; }
}
/* Tekst voor muis of vinger (intro en dergelijke): hangt aan pointer, niet aan breedte (een iPad is breed). */
.tp-alleen-aanraak { display: none; }
@media (pointer: coarse) { .tp-alleen-muis { display: none; } .tp-alleen-aanraak { display: inline; } }
/* Items die alleen op smalle schermen in het menu staan (thema/help hebben op desktop een eigen knop) */
.tp-menu-mobile-only { display: none; }

/* ── Hoofdindeling: paneel | canvas | paneel ─────────────────────────────────────────────── */
.tp-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0; /* verplicht: anders groeit de flex-body voorbij het scherm */
}
.tp-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
  background: var(--tp-surface);
  transition: width 0.18s ease;
}
.tp-panel-left { width: var(--tp-panel-left-w); border-right: 1px solid var(--tp-border); }
.tp-panel-right { width: var(--tp-panel-right-w); border-left: 1px solid var(--tp-border); }
/* Inklappen (2026-10-02): een dicht paneel is geen 0 px meer maar een smalle strook met de inklappijl en de
   tab-iconen, zodat je ziet waar het paneel is en het met een klik op de strook of een icoon terugkomt
   (ui-binding.js). Alleen op desktop; op mobiel zijn de panelen schuiflades (zie de 768px-query).
   contain: paint, want Chrome telde de tabs van een smal paneel anders mee in de scrollbreedte. */
.tp-panel-fold {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; padding: 0; border: none; border-radius: var(--tp-radius-xs);
  background: transparent; color: var(--tp-text-3); cursor: pointer;
}
.tp-panel-fold:hover { background: var(--tp-surface-2); color: var(--tp-text); }
.tp-panel-fold .tp-ico { width: 16px; height: 16px; }
@media (min-width: 769px) {
  body.tp-collapse-left .tp-panel-left, body.tp-collapse-right .tp-panel-right { width: var(--tp-panel-strip-w); overflow: hidden; contain: paint; cursor: pointer; }
  body.tp-collapse-left .tp-panel-left:hover, body.tp-collapse-right .tp-panel-right:hover { background: var(--tp-surface-2); }
  body.tp-collapse-left .tp-panel-left .tp-panel-body, body.tp-collapse-right .tp-panel-right .tp-panel-body { display: none; }
  body.tp-collapse-left .tp-panel-left .tp-panel-head, body.tp-collapse-right .tp-panel-right .tp-panel-head { flex-direction: column; padding: 8px 6px; gap: 8px; }
  body.tp-collapse-left .tp-panel-left .tp-panel-fold, body.tp-collapse-right .tp-panel-right .tp-panel-fold { order: -1; width: 32px; height: 32px; color: var(--tp-text-2); transform: scaleX(-1); }
  body.tp-collapse-left .tp-panel-left .tp-panel-tabs, body.tp-collapse-right .tp-panel-right .tp-panel-tabs { flex: 0 0 auto; flex-direction: column; gap: 4px; padding: 0; background: none; }
  body.tp-collapse-left .tp-panel-left .tp-panel-tab, body.tp-collapse-right .tp-panel-right .tp-panel-tab { flex: 0 0 auto; position: relative; width: 32px; min-height: 32px; padding: 0; }
  body.tp-collapse-left .tp-panel-left .tp-panel-tab:hover, body.tp-collapse-right .tp-panel-right .tp-panel-tab:hover { background: var(--tp-surface); }
  body.tp-collapse-left .tp-panel-left .tp-panel-tab.tp-active, body.tp-collapse-right .tp-panel-right .tp-panel-tab.tp-active { background: none; box-shadow: none; }
  body.tp-collapse-left .tp-panel-left .tp-panel-tab .tp-ico, body.tp-collapse-right .tp-panel-right .tp-panel-tab .tp-ico { width: 18px; height: 18px; }
  body.tp-collapse-left .tp-panel-left .tp-btn-label, body.tp-collapse-right .tp-panel-right .tp-btn-label { display: none; }
  /* Iets geselecteerd terwijl rechts dicht is: een stip op "Object" (body.tp-has-sel uit eigenschappen.js). */
  body.tp-collapse-right.tp-has-sel .tp-panel-right [data-tp-panel-tab="props"]::after {
    content: ''; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--tp-accent); box-shadow: 0 0 0 2px var(--tp-surface);
  }
}
.tp-panel-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px 0; flex: 0 0 auto; }
.tp-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px 16px; }
.tp-panel-tabs { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; padding: 3px; margin: 0; background: var(--tp-surface-2); border-radius: var(--tp-radius-sm); }
.tp-panel-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  border: none;
  border-radius: var(--tp-radius-xs);
  background: transparent;
  color: var(--tp-text-2);
  font: inherit;
  font-size: var(--tp-fs-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  opacity: 1;
}
.tp-panel-tab:hover { color: var(--tp-text); }
.tp-panel-tab.tp-active { background: var(--tp-surface); color: var(--tp-text); box-shadow: var(--tp-shadow-1); }
.tp-panel-tab .tp-ico { width: 15px; height: 15px; }
.tp-panel h2 {
  margin: 0 0 8px;
  font-size: var(--tp-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tp-text-3);
}
.tp-panel section + section { margin-top: 20px; }
.tp-panel-close { display: none; }
.tp-muted { color: var(--tp-text-2); font-size: var(--tp-fs-sm); line-height: 1.45; margin: 6px 0; }
/* Plant-metadata (uitbreiding 2026-08-26) */
.tp-plant-info {
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--tp-accent-soft);
  border-radius: var(--tp-radius-sm);
  font-size: var(--tp-fs-sm);
  color: var(--tp-text-2);
}
.tp-plant-info p { margin: 2px 0; }
/* Plantkeuze uit de Plant Engine (2026-09-29, assets/app/planten.js). */
.tp-plant-kies { margin: 4px 0 8px; }
.tp-plant-naam { margin: 0 0 2px; overflow-wrap: anywhere; }
.tp-plant-naam em { color: var(--tp-text-2); font-size: var(--tp-fs-sm); }
.tp-plant-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 8px; font-size: var(--tp-fs-sm); }
.tp-plant-acties a { color: var(--tp-accent); }
.tp-plant-resultaten { list-style: none; margin: 4px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.tp-plant-resultaten:empty { display: none; }
.tp-plant-optie {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 40px;
  padding: 6px 8px; border: 0; border-radius: var(--tp-radius-xs); background: none; color: var(--tp-text);
  font: inherit; text-align: left; cursor: pointer;
}
.tp-plant-optie:hover, .tp-plant-optie:focus-visible { background: var(--tp-accent-soft); outline: none; }
.tp-plant-optie em { color: var(--tp-text-2); font-size: var(--tp-fs-xs); }

/* Uitkomst van een rekensom onder een veld, bv. het aantal tegels met snijverlies (fase 5,
   2026-09-24). Zelfde tokens als .tp-plant-info hierboven, maar zonder vlak: dit is een gevolg van
   wat je net instelde en geen los blok met achtergrondinformatie. */
.tp-prop-hint {
  margin: 2px 0 8px;
  font-size: var(--tp-fs-sm);
  color: var(--tp-text-2);
  line-height: 1.45;
}
.tp-plant-advice { border-left: 3px solid var(--tp-accent); }

/* Tuinafmetingen */
.tp-garden-size { display: flex; gap: 8px; }
.tp-garden-size label { flex: 1; font-size: 0.8rem; color: var(--gray); }
.tp-garden-size input {
  width: 100%;
  margin-top: 3px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
}
.tp-garden-shape-btn { width: 100%; margin-top: 10px; }
.tp-north-opt { margin-top: 8px; }
.tp-view-toggles { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 0.85rem; color: var(--gray); }
.tp-view-toggles label { display: flex; align-items: center; gap: 7px; cursor: pointer; }

/* Groei-schuif ("Tuin over de jaren") + helling-instelling in het "Mijn tuin"-blok */
.tp-growth-opt { margin-top: 12px; }
.tp-growth-label { font-weight: 700; color: var(--pine); }
.tp-growth-opt input[type="range"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  accent-color: var(--green);
}
.tp-slope-row { display: grid; grid-template-columns: 1fr 88px; gap: 8px; margin-top: 10px; }
.tp-slope-row input[type="number"] {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.85rem;
}

/* Helling per gedeelte (2026-08-28): variabel aantal rijen "afstand + verval", plus het
   berekende percentage per rij. Zelfde invoerstijl als .tp-slope-row hierboven; de rij is een
   grid zodat de ✕-knop en het percentage altijd rechts uitlijnen, ook bij smalle zijbalken. */
.tp-slope-seg { margin-top: 10px; }
.tp-slope-seg-title { display: block; margin-bottom: 4px; font-size: 0.78rem; color: var(--gray); }
/* Voorstel uit de hoogtekaart (2026-09-24): knop plus, zodra er een voorstel staat, de keuze
   Overnemen/Annuleren. De knoppen wikkelen op smalle schermen in plaats van uit te steken. */
.tp-slope-ahn { margin-top: 8px; }
.tp-slope-ahn .tp-props-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tp-slope-ahn .tp-slope-seg-hint { margin-top: 6px; }
.tp-slope-ahn .tp-btn { max-width: 100%; }
.tp-slope-seg-rows { display: flex; flex-direction: column; gap: 6px; }
.tp-slope-seg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 46px 30px;
  align-items: end;
  gap: 6px;
}
.tp-slope-seg-row .tp-price-opt { margin: 0; }
.tp-slope-seg-row input[type="number"] {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 3px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.85rem;
}
.tp-slope-seg-pct { padding-bottom: 8px; font-size: 0.78rem; font-weight: 700; color: var(--pine); text-align: right; }
.tp-slope-seg-row .tp-btn { padding: 6px 8px; }
.tp-slope-seg #tp-slope-seg-add { margin-top: 8px; }
.tp-slope-seg-hint { margin: 6px 0 0; font-size: 0.74rem; line-height: 1.4; color: var(--gray); }
/* Eigen 3D-model (2026-09-16): maten-uitleg onder de modelkeuze in de eigenschappen. */
.tp-props-hint { margin: 6px 0 0; font-size: 0.74rem; line-height: 1.4; color: var(--gray); }
/* Hoogteprofiel-doorsnede (2026-08-29, zie renderSlopeCrossSection() in app.js) */
.tp-slope-xsection { margin-top: 8px; }
.tp-slope-xsection-svg { display: block; width: 100%; height: 64px; }
.tp-slope-xsection-ref { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 2; }
.tp-slope-xsection-area { fill: var(--green); fill-opacity: 0.12; stroke: none; }
.tp-slope-xsection-line { fill: none; stroke: var(--green-dark); stroke-width: 2; stroke-linejoin: round; }
.tp-slope-xsection-dot { fill: var(--pine); }
/* Gemeten maaiveld (AHN) als tweede, gestippelde lijn onder het getekende profiel (2026-09-25). */
.tp-slope-xsection-gemeten { fill: none; stroke: var(--tp-text-2); stroke-width: 1.5; stroke-dasharray: 3 2; stroke-linejoin: round; }
.tp-slope-xsection-legenda { color: var(--tp-text-2); }
.tp-slope-xsection-caption {
  margin-top: 2px; font-size: 0.72rem; color: var(--gray); display: flex; justify-content: space-between;
}
.tp-slope-xsection-drop { font-weight: 700; color: var(--pine); }

/* Achtergrondfoto (uitbreiding 2026-08-26) */
/* .tp-bg-photo (Tuin-tab-blok) is op 2026-09-08 vervangen door het werkbalkpaneel .tp-kaart-panel
   (zie verderop); de veldrijen erin houden dezelfde tussenruimte als toen. */
.tp-kaart-panel .tp-garden-size { margin-top: 8px; }
/* Locatiebeeld (2026-09-07): PDOK-luchtfoto-formulier onder de achtergrondfoto-knoppen. */
.tp-bg-pdok-form { margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--gray-light, #f4f6f8); }
.tp-bg-pdok-form .tp-garden-size select { width: 100%; padding: 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; }
.tp-bg-pdok-form .tp-price-opt { display: flex; align-items: center; gap: 6px; margin-top: 6px; }

/* ── Bibliotheek: zoeken, categorie-chips, groepen met compacte tegels, favorieten ───────── */
.tp-lib-searchwrap { position: relative; margin-bottom: 8px; }
.tp-lib-searchwrap .tp-ico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--tp-text-3); pointer-events: none; }
.tp-lib-search {
  width: 100%;
  box-sizing: border-box;
  height: var(--tp-ctrl-h);
  padding: 0 10px 0 30px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-surface-2);
  color: var(--tp-text);
  font: inherit;
  font-size: var(--tp-fs-sm);
}
.tp-lib-search:focus { background: var(--tp-surface); border-color: var(--tp-border-strong); }
.tp-lib-search::placeholder { color: var(--tp-text-3); }
.tp-chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0 0 8px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.tp-chips::-webkit-scrollbar { display: none; }
.tp-chip {
  flex: none;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--tp-border);
  border-radius: 999px;
  background: var(--tp-surface);
  color: var(--tp-text-2);
  font: inherit;
  font-size: var(--tp-fs-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.tp-chip:hover { border-color: var(--tp-border-strong); color: var(--tp-text); }
.tp-chip.tp-active { background: var(--tp-text); border-color: var(--tp-text); color: var(--tp-surface); }
.tp-lib-group { margin-top: 6px; }
.tp-lib-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 30px;
  padding: 4px 2px;
  border: none;
  background: none;
  color: var(--tp-text-2);
  font: inherit;
  font-size: var(--tp-fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.tp-lib-group-head .tp-ico { width: 14px; height: 14px; transition: transform 0.15s ease; }
.tp-lib-group-head .tp-lib-group-chev { margin-left: auto; color: var(--tp-text-3); }
.tp-lib-group.is-collapsed .tp-lib-group-chev { transform: rotate(-90deg); }
.tp-lib-group.is-collapsed .tp-lib-grid { display: none; }
.tp-lib-group-count { font-weight: 500; color: var(--tp-text-3); letter-spacing: 0; text-transform: none; }
/* .tp-lib-cat blijft bestaan voor oudere aanroepers (renderRecentTypes hergebruikt de groepskop) */
.tp-lib-cat { margin: 12px 0 6px; font-size: var(--tp-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tp-text-3); }
.tp-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 4px; padding-bottom: 6px; }
/* Tussenkopje per categorie in "Eigen modellen" (2026-09-16), over de hele rij van het raster. Geen eigen
   display, zodat het hidden-attribuut van filterLibrary() blijft werken. */
.tp-lib-model-cat { grid-column: 1 / -1; margin: 6px 0 0; font-size: var(--tp-fs-xs); font-weight: 600; color: var(--tp-text-3); }
.tp-lib-model-cat:first-child { margin-top: 0; }
.tp-lib-tile { position: relative; min-width: 0; }
.tp-lib-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 56px;
  padding: 7px 4px 5px;
  border: 1px solid transparent;
  border-radius: var(--tp-radius-sm);
  background: var(--tp-surface-2);
  font: inherit;
  font-size: var(--tp-fs-xs);
  line-height: 1.15;
  color: var(--tp-text);
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.tp-lib-item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-lib-item:hover { background: var(--tp-accent-soft); border-color: var(--tp-accent); }
.tp-lib-item.is-dragging { opacity: 0.5; }
.tp-lib-ico { display: inline-flex; color: var(--tp-text-2); line-height: 1; }
.tp-lib-ico .tp-ico { width: 22px; height: 22px; }
.tp-lib-item:hover .tp-lib-ico { color: var(--tp-accent-hover); }
.tp-lib-fav {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--tp-text-3);
  cursor: pointer;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tp-lib-fav .tp-ico { width: 13px; height: 13px; }
.tp-lib-tile:hover .tp-lib-fav, .tp-lib-tile:focus-within .tp-lib-fav, .tp-lib-fav[aria-pressed="true"] { opacity: 1; }
.tp-lib-fav[aria-pressed="true"] { color: var(--tp-warn); }
.tp-lib-fav:hover { background: var(--tp-surface); color: var(--tp-warn); }
.tp-lib-recent:not([hidden]) { padding-bottom: 4px; }
.tp-lib-empty { padding: 14px 6px; color: var(--tp-text-3); font-size: var(--tp-fs-sm); text-align: center; }
/* Sleep-spook tijdens drag-naar-canvas (desktop) */
.tp-drag-ghost {
  position: fixed;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--tp-radius-sm);
  background: var(--tp-surface);
  border: 1px solid var(--tp-accent);
  box-shadow: var(--tp-shadow-2);
  font-size: var(--tp-fs-sm);
  font-weight: 600;
  color: var(--tp-text);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Magazijn-sleeppaneel (uitbreiding, admin-only) */
.tp-magazijn-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.tp-mag-filters { display: flex; gap: 6px; margin: 6px 0; }
.tp-mag-filters select {
  flex: 1;
  min-width: 0;
  padding: 6px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.78rem;
}
.tp-mag-no-tier select:last-child { display: none; }
.tp-mag-popular-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--gray);
  margin-bottom: 6px;
  cursor: pointer;
}
.tp-mag-results { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.tp-mag-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 0.78rem;
  color: var(--pine);
  cursor: grab;
}
.tp-mag-item:hover { background: var(--green-pale); border-color: var(--green); }
.tp-mag-item:active { cursor: grabbing; }
.tp-mag-item-icon { flex: none; }
.tp-mag-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-mag-item-price { flex: none; color: var(--gray); font-size: 0.72rem; white-space: nowrap; }
.tp-mag-hint { margin-top: 6px; font-size: 0.72rem; }

/* ── Canvasgebied: rail links, weergavebalk rechtsboven, hint-pil, statusbalk ────────────── */
.tp-canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--tp-bg);
}
/* Het tekenvlak is een tabstop (2026-09-25): zichtbare focus aan de binnenrand, alleen bij toetsenbord. */
#tp-canvas:focus-visible { outline: 3px solid var(--tp-accent); outline-offset: -3px; }
#tp-canvas {
  display: block;
  touch-action: none; /* alle pans/pinches gaan naar de eigen pointer-handlers */
  /* UX-audit (2026-09-12): het eigen long-press-contextmenu (app.js) hoort niet te
     botsen met iOS' eigen keuze-lasso/callout-menu op een lang ingedrukte aanraking. */
  -webkit-touch-callout: none;
}
/* Zwevende kaarten op het canvas delen één look */
.tp-float {
  position: absolute;
  z-index: 20;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--tp-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow-1);
}
/* Tool-rail (verticaal, links) */
.tp-rail { top: 10px; left: 10px; flex-direction: column; }
.tp-rail-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tp-ctrl-h);
  height: var(--tp-ctrl-h);
  padding: 0;
  border: none;
  border-radius: var(--tp-radius-sm);
  background: transparent;
  color: var(--tp-text-2);
  font: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.tp-rail-btn .tp-ico { width: 18px; height: 18px; }
.tp-rail-btn:hover { background: var(--tp-surface-2); color: var(--tp-text); }
.tp-rail-btn:disabled { opacity: 0.35; cursor: default; }
.tp-rail-btn.tp-active, .tp-rail-btn[aria-pressed="true"] { background: var(--tp-accent); color: var(--tp-accent-ink); }
.tp-rail-divider { height: 1px; margin: 3px 4px; background: var(--tp-border); }
/* UX-audit (2026-09-12): alleen op een aanraakscherm zichtbaar, zie de pointer:coarse-media hieronder. */
#tp-tool-touch-addsel { display: none; }
/* Sneltoetsletter rechtsonder in de knop (alleen desktop, pointer:fine) */
.tp-rail-btn .tp-rail-key { position: absolute; right: 3px; bottom: 1px; font-size: 9px; font-weight: 700; line-height: 1; opacity: 0.55; }
/* Weergavebalk (rechtsboven): zoom, raster/snap, legenda/stijl/3D/kaart/voorstellen, paneel */
.tp-viewbar { top: 10px; right: 10px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 70px); align-items: center; }
.tp-viewbar-group { display: flex; align-items: center; gap: 2px; }
.tp-viewbar-group + .tp-viewbar-group { margin-left: 4px; padding-left: 6px; border-left: 1px solid var(--tp-border); }
.tp-viewbar .tp-rail-btn { width: auto; min-width: var(--tp-ctrl-h); padding: 0 6px; gap: 5px; font-size: var(--tp-fs-sm); font-weight: 600; }
.tp-viewbar .tp-btn-label { font-size: var(--tp-fs-sm); }
.tp-zoom-pct { min-width: 52px; font-variant-numeric: tabular-nums; }
/* Badge op de Voorstellen-knop */
.tp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--tp-accent);
  color: var(--tp-accent-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.tp-badge:empty { display: none; }
.tp-rail-btn.tp-active .tp-badge { background: var(--tp-accent-ink); color: var(--tp-accent); }
/* Geankerde popovers onder een viewbar-knop (legenda / stijl / kaart). Rechts uitgelijnd op de
   knop (de balk hangt rechts), --flip zet 'm links uitgelijnd, --dock over de volle breedte
   (tpClampPopover() in app.js meet dit na het tonen, niet op een breakpoint). */
.tp-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 30;
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow-2);
  text-align: left;
  white-space: normal;
  font-weight: 400;
}
.tp-popover--flip { right: auto; left: 0; }
.tp-popover--dock { position: fixed; left: 8px; right: 8px; width: auto; max-width: none; z-index: 75; max-height: calc(100vh - 140px); }
/* Hint-pil tijdens tekenen: boven de statusbalk, met de actieknoppen (Klaar/Vrije vorm/…) */
.tp-hint {
  position: absolute;
  /* Gecentreerd met left/right en margin: auto, niet met left: 50% en translateX(-50%): dan kreeg de balk maar
     de halve breedte van het tekenvlak en stapelde hij op een telefoon alles onder elkaar (362 px hoog, over de
     tekening heen). */
  left: 8px;
  right: 8px;
  width: fit-content;
  margin-inline: auto;
  bottom: calc(var(--tp-status-h) + 12px);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(calc(100% - 16px), 600px);
  padding: 8px 10px 8px 14px;
  background: var(--tp-text);
  color: var(--tp-surface);
  border-radius: 999px;
  box-shadow: var(--tp-shadow-2);
  font-size: var(--tp-fs-sm);
}
html[data-theme="dark"] .tp-hint { background: var(--tp-surface-3); color: var(--tp-text); border: 1px solid var(--tp-border-strong); }
.tp-hint .tp-btn { min-height: 28px; padding: 0 10px; font-size: var(--tp-fs-xs); border-radius: 999px; }
.tp-hint .tp-btn:not(.tp-btn-primary) { background: transparent; color: inherit; border-color: rgba(255, 255, 255, 0.3); }
.tp-hint .tp-btn:not(.tp-btn-primary):hover { background: rgba(255, 255, 255, 0.12); }
/* Aanraakscherm (2026-09-29, app/aanraak.js): knoppen voor wat op de computer een toets is. Alleen bij
   pointer:coarse te zien (onderaan het blok hieronder); op een computer staan ze wel in de DOM, maar
   nooit in beeld, zodat het desktopgedrag gelijk blijft. Hintknoppen Snappen (Alt) en Richting vast
   (Shift), de actiebalk bij een selectie, zijn "Meer"-lijst en het venster "Maat invoeren". */
.tp-hint-aanraak, .tp-aanraakbalk, .tp-aanraakmeer, .tp-aanraakmaat { display: none; }
.tp-hint .tp-hint-aanraak { gap: 6px; }
.tp-hint .tp-hint-aanraak[aria-pressed="true"] { background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-accent-ink); }
.tp-aanraakbalk {
  position: absolute; left: 50%; bottom: calc(var(--tp-status-h) + 12px); transform: translateX(-50%); z-index: 25;
  align-items: stretch; gap: 2px; max-width: calc(100% - 144px); padding: 4px;
  background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow-2);
}
.tp-aanraak-knop {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  flex: 0 1 auto; min-width: 48px; min-height: 48px; padding: 2px 4px;
  border: none; border-radius: var(--tp-radius-sm); background: transparent; color: var(--tp-text-2);
  font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1.1; white-space: nowrap; cursor: pointer;
}
.tp-aanraak-knop[hidden] { display: none; }
.tp-aanraak-knop:active { background: var(--tp-surface-2); color: var(--tp-text); }
.tp-aanraak-knop:disabled { opacity: 0.35; cursor: default; }
.tp-aanraak-knop .tp-ico { width: 20px; height: 20px; }
.tp-aanraak-knop[aria-expanded="true"] { background: var(--tp-surface-3); color: var(--tp-text); }
.tp-aanraak-ico-spiegel { display: inline-flex; transform: scaleX(-1); }
.tp-aanraak-gevaar { color: var(--tp-danger); }
.tp-aanraak-uitgelicht { background: var(--tp-accent-soft); color: var(--tp-accent-hover); }
.tp-aanraakmeer {
  position: absolute; left: 50%; bottom: calc(var(--tp-status-h) + 12px + 66px); transform: translateX(-50%); z-index: 26;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: min(420px, calc(100% - 16px));
  max-height: calc(100% - var(--tp-status-h) - 150px); overflow-y: auto; padding: 6px;
  background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow-2);
}
.tp-aanraakmeer-item {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--tp-radius-sm); background: transparent; color: var(--tp-text);
  font: inherit; font-size: var(--tp-fs-sm); text-align: left; cursor: pointer;
}
.tp-aanraakmeer-item:active { background: var(--tp-surface-2); }
.tp-aanraakmeer-item .tp-ico { flex: none; width: 18px; height: 18px; }
.tp-aanraakmeer-item .tp-aanraak-lbl { min-width: 0; overflow-wrap: anywhere; }
.tp-aanraakmeer-item[aria-pressed="true"] { background: var(--tp-accent-soft); border-color: var(--tp-accent); color: var(--tp-accent-hover); }
.tp-aanraakmaat {
  position: absolute; left: 50%; top: 62px; transform: translateX(-50%); z-index: 27;
  flex-direction: column; gap: 8px; width: min(380px, calc(100% - 16px)); padding: 10px 12px 12px;
  background: var(--tp-surface); color: var(--tp-text); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow-2);
  font-size: var(--tp-fs-sm);
}
.tp-aanraakmaat-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tp-aanraakmaat-x { min-width: 44px; min-height: 44px; border: none; background: none; color: var(--tp-text-2); font: inherit; font-size: 1.1rem; cursor: pointer; }
.tp-aanraakmaat-soorten { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-aanraakmaat-soort[aria-checked="true"] { background: var(--tp-text); border-color: var(--tp-text); color: var(--tp-surface); }
.tp-aanraakmaat-velden { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.tp-aanraakmaat-veld { display: flex; align-items: center; gap: 6px; flex: 1 1 150px; min-width: 0; }
.tp-aanraakmaat-veld span { flex: none; color: var(--tp-text-2); }
.tp-aanraakmaat-veld input {
  flex: 1 1 auto; width: 100%; min-width: 60px; height: 44px; padding: 0 10px;
  border: 1px solid var(--tp-border-strong); border-radius: var(--tp-radius-sm); background: var(--tp-surface); color: var(--tp-text);
  font: inherit; font-size: 16px; font-variant-numeric: tabular-nums;
}
.tp-aanraakmaat-veld input:focus { outline: none; border-color: var(--tp-accent); box-shadow: 0 0 0 3px var(--tp-accent-soft); }
.tp-aanraakmaat-pm { flex: none; min-width: 44px; min-height: 44px; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); background: var(--tp-surface-2); color: var(--tp-text); font: inherit; font-size: 1rem; cursor: pointer; }
/* ± naast een getalveld dat negatief mag (Peil): alleen op een aanraakscherm, met de muis typ je gewoon een min. */
.tp-veld-pm { display: none; }
@media (pointer: coarse) { .tp-veld-pm { display: inline-flex; align-items: center; justify-content: center; } }
.tp-aanraakmaat-uitleg { margin: 0; color: var(--tp-text-2); font-size: var(--tp-fs-xs); }
.tp-aanraakmaat-acties { display: flex; justify-content: flex-end; }
.tp-aanraakmaat-acties .tp-btn { min-height: 44px; }
@media (pointer: coarse) {
  .tp-hint { flex-wrap: wrap; justify-content: center; border-radius: var(--tp-radius); }
  .tp-hint .tp-btn { min-height: 44px; padding: 0 14px; }
  .tp-hint-aanraak:not([hidden]) { display: inline-flex; align-items: center; }
  .tp-aanraakbalk:not([hidden]) { display: flex; }
  .tp-aanraakmeer:not([hidden]) { display: grid; }
  .tp-aanraakmaat:not([hidden]) { display: flex; }
}
@media (min-width: 769px) {
  /* Tablet: rechts onder de zoombalk, want links hangt de rail al tot ver naar beneden. */
  .tp-aanraakmaat { left: auto; right: 10px; transform: none; }
}
@media (max-width: 768px) and (pointer: coarse) {
  /* Telefoon: de maatvelden van de hintbalk op een eigen regel, anders stapelt elk veld apart. */
  .tp-hint-fields { flex: 1 1 100%; justify-content: center; }
  /* De uitleg op een eigen regel, kleiner: de knoppen eronder blijven dan op een of twee rijen. */
  .tp-hint { gap: 6px; padding: 8px; row-gap: 6px; }
  .tp-hint #tp-hint-text { flex: 1 1 100%; text-align: center; font-size: var(--tp-fs-xs); line-height: 1.35; }
  .tp-hint .tp-btn { padding: 0 12px; }
}
@media (max-width: 768px) {
  /* Telefoon: de rail ligt onderaan, dus de balk en zijn lijst erboven, op de plek van de hintbalk. */
  .tp-aanraakbalk { bottom: calc(var(--tp-ctrl-h) + 30px); max-width: calc(100% - 16px); }
  .tp-aanraakmeer { bottom: calc(var(--tp-ctrl-h) + 30px + 66px); max-height: calc(100% - var(--tp-ctrl-h) - 170px); }
  .tp-aanraakmaat { top: 58px; }
}
/* Statusbalk onderaan het canvas: cursorpositie, tuinmaat, aantal, toolhint, zoom */
.tp-statusbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: var(--tp-status-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  background: var(--tp-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--tp-border);
  font-size: var(--tp-fs-xs);
  color: var(--tp-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
.tp-statusbar > span { flex: none; }
.tp-statusbar .tp-status-hint { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--tp-text-3); }
.tp-statusbar .tp-status-cursor { min-width: 150px; }
.tp-statusbar .tp-status-zoom { cursor: pointer; }
.tp-statusbar .tp-status-zoom:hover { color: var(--tp-text); }
.tp-status-sep { width: 1px; height: 12px; background: var(--tp-border); }

/* ── Eigenschappen: velden, objectkop, inklapbare secties, steppers ──────────────────────── */
.tp-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0; font-size: var(--tp-fs-sm); color: var(--tp-text-2); }
.tp-field > span:first-child { flex: 1 1 auto; min-width: 0; }
.tp-field input, .tp-field select, .tp-field textarea {
  color: var(--tp-text);
  background: var(--tp-surface);
}
.tp-field input {
  width: 110px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-xs);
  font: inherit;
  font-size: var(--tp-fs-sm);
}
.tp-field input[type="text"] { width: 150px; }
.tp-field input[type="range"] { height: auto; border: none; padding: 0; accent-color: var(--tp-accent); }
.tp-field select {
  width: 150px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-xs);
  font: inherit;
  font-size: var(--tp-fs-sm);
}
.tp-field input:hover, .tp-field select:hover { border-color: var(--tp-border-strong); }
.tp-check-field { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: var(--tp-fs-sm); color: var(--tp-text-2); cursor: pointer; }
.tp-check-field input { accent-color: var(--tp-accent); width: 16px; height: 16px; }
/* Numeriek veld met eenheid en -/+ (addField() in app.js) */
.tp-num { display: inline-flex; align-items: center; height: 30px; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xs); background: var(--tp-surface); overflow: hidden; flex: none; }
.tp-num:focus-within { border-color: var(--tp-border-strong); box-shadow: var(--tp-focus); }
.tp-num input { width: 62px; height: 28px; border: none !important; border-radius: 0; text-align: right; padding: 0 4px; box-shadow: none !important; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.tp-num input::-webkit-outer-spin-button, .tp-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tp-num-unit { padding: 0 6px 0 2px; font-size: var(--tp-fs-xs); color: var(--tp-text-3); }
.tp-num-btn { width: 24px; height: 28px; border: none; background: var(--tp-surface-2); color: var(--tp-text-2); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.tp-num-btn:hover { background: var(--tp-surface-3); color: var(--tp-text); }
/* Objectkop bovenin het eigenschappenpaneel */
.tp-obj-head { display: flex; align-items: center; gap: 8px; padding: 2px 0 10px; border-bottom: 1px solid var(--tp-border); margin-bottom: 4px; }
.tp-obj-head-ico { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tp-radius-sm); background: var(--tp-accent-soft); color: var(--tp-accent-hover); }
.tp-obj-head-ico .tp-ico { width: 20px; height: 20px; }
.tp-obj-head-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tp-obj-head-name { width: 100%; height: 26px; padding: 0 4px; margin: 0 -4px; border: 1px solid transparent; border-radius: var(--tp-radius-xs); background: transparent; font: inherit; font-weight: 700; color: var(--tp-text); }
.tp-obj-head-name:hover { border-color: var(--tp-border); }
.tp-obj-head-name:focus { border-color: var(--tp-border-strong); background: var(--tp-surface); }
.tp-obj-head-type { font-size: var(--tp-fs-xs); color: var(--tp-text-3); }
.tp-obj-head-actions { display: flex; gap: 2px; flex: none; }
.tp-obj-head-actions .tp-icon-btn { width: 28px; height: 28px; }
.tp-obj-head-actions .tp-icon-btn .tp-ico { width: 16px; height: 16px; }
/* Inklapbare secties (tpGroupPropsSections): kopjes worden <summary> */
.tp-props-section { border-top: 1px solid var(--tp-border); margin-top: 8px; }
.tp-props-section:first-of-type { border-top: none; margin-top: 0; }
.tp-props-section > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 0 2px;
  font-size: var(--tp-fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tp-text-3);
  cursor: pointer;
  user-select: none;
}
.tp-props-section > summary::-webkit-details-marker { display: none; }
.tp-props-section > summary .tp-ico { width: 13px; height: 13px; margin-left: auto; transition: transform 0.15s ease; }
.tp-props-section:not([open]) > summary .tp-ico { transform: rotate(-90deg); }
.tp-props-section > summary:hover { color: var(--tp-text); }
.tp-props-section-body { padding-bottom: 6px; }
/* Meervoudige selectie: uitlijnen/verdelen/volgorde */
.tp-align-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin: 8px 0 4px; }
.tp-align-row .tp-icon-btn { width: 100%; height: 30px; border: 1px solid var(--tp-border); background: var(--tp-surface); }
.tp-align-row .tp-icon-btn:hover { background: var(--tp-surface-2); }
.tp-align-row .tp-icon-btn .tp-ico { width: 16px; height: 16px; }
.tp-align-label { font-size: var(--tp-fs-xs); color: var(--tp-text-3); margin: 8px 0 0; }
/* Lege staat met snelacties */
.tp-empty { display: flex; flex-direction: column; gap: 6px; }
.tp-empty p { margin: 0 0 6px; color: var(--tp-text-2); font-size: var(--tp-fs-sm); line-height: 1.45; }
.tp-empty-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-surface);
  color: var(--tp-text);
  font: inherit;
  font-size: var(--tp-fs-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.tp-empty-action:hover { background: var(--tp-surface-2); border-color: var(--tp-border-strong); }
.tp-empty-action .tp-ico { width: 18px; height: 18px; color: var(--tp-accent-hover); }
.tp-empty-action small { display: block; font-weight: 400; color: var(--tp-text-3); }

/* Inklapbaar inline-blok (UX-audit, Fase 3: Toelichting verhuisde van een eigen modal naar hier)
   — dicht standaard, geen extra klik-diepte t.o.v. de rest van dit paneel wanneer niet nodig. */
.tp-inline-details { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.tp-inline-details summary { cursor: pointer; font-weight: 600; color: var(--pine); font-size: 0.88rem; }
.tp-inline-details textarea {
  width: 100%;
  margin-top: 6px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.85rem;
  resize: vertical;
}
.tp-props-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
/* Acties in het eigenschappenpaneel: kolommen mogen krimpen, lange labels breken af (360 px).
   Op desktop passen de labels, dan blijft het beeld gelijk (twee gelijke kolommen). */
.tp-props-acties-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp-props-acties-wrap > .tp-btn { white-space: normal; max-width: 100%; min-width: 0; text-align: center; overflow-wrap: anywhere; }
/* Sectiekopjes in het eigenschappenpaneel (UX-verbetering: groepeert de lange platte veldenlijst
   zonder de render-volgorde/logica te wijzigen — puur een visuele scheiding). */
.tp-props-heading {
  margin: 16px 0 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray);
  opacity: 0.75;
}
.tp-props-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Materiaal-/bundel-/arbeidskoppeling (uitbreiding: meerdere regels per object, verving de
   single-link-kaart uit fase 1, 2026-08-24) */
.tp-material-link { margin: 8px 0; }
.tp-material-link-heading { margin: 0 0 6px; font-size: 0.85rem; font-weight: 600; color: var(--pine); }
.tp-material-link-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.tp-material-link-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 8px; background: var(--green-pale); border: 1px solid var(--green);
  font-size: 0.82rem; color: var(--pine);
}
.tp-material-link-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-material-link-qty { flex: none; width: 56px; padding: 3px 5px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 0.8rem; }
.tp-material-link-unit { flex: none; color: var(--gray); font-size: 0.75rem; }
.tp-material-link-row .tp-btn-danger { flex: none; padding: 2px 8px; min-height: 26px; }
.tp-material-link-margin { margin: -2px 0 4px 4px; font-size: 0.72rem; }
#tp-props-body h3 { margin: 0 0 8px; font-size: 0.95rem; color: var(--pine); }

/* Kleurkeuze-swatches (TP_COLOR_CHOICES) */
.tp-swatch-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; font-size: 0.85rem; color: var(--gray); }
.tp-swatch {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
}
.tp-swatch-active { border-color: var(--terracotta); box-shadow: 0 0 0 2px rgba(189, 107, 67, 0.35); }

/* Richtprijs */
.tp-price-opt { display: block; margin: 0 0 8px; font-size: 0.78rem; color: var(--gray); }
.tp-price-opt select {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.85rem;
}
.tp-price-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 0.85rem; border-bottom: 1px dashed var(--border); }
.tp-price-sub { padding: 2px 0 2px 14px; font-size: 0.78rem; color: var(--gray); border-bottom: none; }
.tp-price-total { display: block; margin-top: 10px; font-size: 1.05rem; font-weight: 700; color: var(--pine); }
.tp-price-note { font-size: 0.75rem; color: var(--gray); margin-top: 10px; line-height: 1.4; }
.tp-quote-panel-total { font-weight: 600; color: var(--pine); margin-top: 4px; }
.tp-quote-panel-total:empty { display: none; }
/* Revisit-knop op een tp-price-row (slimme-vragen-uitbreiding): klein, geen eigen kader, alleen
   een hover-highlight — moet niet met de qty ernaast concurreren om aandacht. */
.tp-quote-panel-edit { border: none; background: none; cursor: pointer; padding: 0 0 0 6px; font-size: 0.9rem; line-height: 1; opacity: 0.7; }
.tp-quote-panel-edit:hover { opacity: 1; }

/* --- Modals --- */
.tp-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--tp-overlay);
}
.tp-modal[hidden] { display: none; }
.tp-modal-card {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--tp-surface);
  color: var(--tp-text);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  padding: 20px;
  box-shadow: var(--tp-shadow-2);
}
.tp-modal-card h2 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--tp-text); }
.tp-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tp-modal-x { border: none; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--tp-text-2); padding: 4px; border-radius: var(--tp-radius-xs); }
.tp-modal-x:hover { background: var(--tp-surface-2); color: var(--tp-text); }
.tp-qv-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* Sneltoetsen-overzicht (#tp-modal-shortcuts) */
.tp-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin: 12px 0 4px; }
.tp-shortcuts h3 { grid-column: 1 / -1; margin: 10px 0 2px; font-size: var(--tp-fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tp-text-3); }
.tp-shortcuts h3:first-child { margin-top: 0; }
.tp-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--tp-fs-sm); color: var(--tp-text-2); min-height: 26px; }
.tp-shortcut span:first-child { flex: 1 1 auto; }
.tp-shortcut kbd + kbd { margin-left: 3px; }

/* Opslagslots */
.tp-slot { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.tp-slot-thumb { width: 72px; height: 54px; object-fit: cover; background: var(--stone-light); border-radius: 6px; border: 1px solid var(--border); }
.tp-slot-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tp-slot-info strong { font-size: 0.9rem; color: var(--pine); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-slot-info span { font-size: 0.75rem; color: var(--gray); }
.tp-slot-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
/* Versies (2026-09-29, app/versies-venster.js): de rij leent .tp-slot; vier knoppen lopen op een smal
   scherm onder de naam door in plaats van de kaart uit. */
.tp-modal-card--versies { max-width: 640px; }
.tp-versies-teller { font-size: var(--tp-fs-xs); font-weight: 400; margin-left: 6px; }
.tp-versie-nieuw { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.tp-versie-nieuw input, .tp-versie-hernoem {
  height: 32px; padding: 0 8px; min-width: 0; font: inherit; font-size: var(--tp-fs-sm);
  color: var(--tp-text); background: var(--tp-surface);
  border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xs);
}
.tp-versie-nieuw input { flex: 1 1 220px; }
.tp-versie-nieuw .tp-btn { flex: 0 1 auto; }
.tp-versie.is-actief { background: var(--tp-surface-2, transparent); }
.tp-versie-hernoem { width: 100%; }
.tp-versies-leeg { margin: 12px 0; }
@media (max-width: 560px) {
  .tp-versie { flex-wrap: wrap; }
  .tp-versie .tp-slot-actions { flex: 1 1 100%; justify-content: flex-start; }
}

/* Standalone server-opslag (2026-08-26) */
.tp-public-owner-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.tp-public-owner-linkrow { display: flex; gap: 6px; }
.tp-public-owner-linkrow input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: var(--stone-light); color: var(--gray); }

/* Startsjablonen */
/* Zoeken/filteren (uitbreiding 2026-08-25) */
.tp-templates-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.tp-templates-toolbar input[type="search"] { flex: 1 1 200px; }
.tp-templates-toolbar select { flex: 0 1 auto; }
.tp-templates-no-results { text-align: center; padding: 16px 0; }
/* Filterchips soort en maat (2026-10-03, renderTemplateChips() in app/voorbeelden-ontwerpen.js). Ze
   wrappen in plaats van horizontaal te scrollen zoals .tp-chips in de bibliotheek: in een modal van
   hooguit 520 px zijn het er maar zes, en een verborgen chip vindt niemand. Gekozen = aria-pressed,
   dezelfde volle tint als .tp-chip.tp-active; 44 px op een aanraakscherm komt van .tp-chip. */
.tp-templates-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 4px; }
.tp-templates-chipgroep { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-templates-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--tp-fs-sm); }
.tp-templates-chip[aria-pressed="true"] { background: var(--tp-text); border-color: var(--tp-text); color: var(--tp-surface); }
.tp-templates-chip:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
.tp-templates-chip-n { font-weight: 500; opacity: 0.7; font-variant-numeric: tabular-nums; }
.tp-templates-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--stone-light);
  font-size: 0.85rem;
}
.tp-templates-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0; }
.tp-template-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tp-template-card:hover { background: var(--green-pale); border-color: var(--green); }
.tp-template-card img {
  width: 96px;
  height: 76px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--stone-light);
  flex: 0 0 auto;
}
.tp-template-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tp-template-info strong { color: var(--pine); }
.tp-template-info span { font-size: 0.82rem; color: var(--gray); }

/* Admin-voorbeeldenbeheer (uitbreiding 2026-08-25, embed-only): dezelfde kaart, maar als <div>
   i.p.v. <button> — bevat een aparte klikbare thumbnail, zichtbaarheids-toggle en verwijderknop,
   dus geen geldige button-in-button-nesting. */
.tp-templates-list-admin { grid-template-columns: 1fr; }
.tp-template-card-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.tp-template-thumb {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
  line-height: 0;
}
.tp-template-thumb img {
  width: 96px;
  height: 76px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--stone-light);
}
.tp-template-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--stone-light);
  color: var(--pine) !important;
  font-size: 0.72rem !important;
  font-weight: 600;
}
.tp-template-visibility { flex: 1 1 200px; gap: 6px; }
/* flex-wrap + shrinkbaar (2026-08-29): deze klasse droeg tot dan toe altijd maar 1 knop
   (🗑 Verwijderen), dus een niet-wrappende, niet-krimpende rij viel nooit op. "Opgeslagen
   tuinontwerpen" zet er 3 knoppen in (Openen/Hernoemen/Verwijderen) — met het oude flex:0 0 auto
   weigerde deze rij te krimpen (flex-shrink:0), dus kwam flex-wrap nooit in actie en liep de rij
   op 320px breed buiten de kaart. flex:0 1 auto (shrink toegestaan) laat 'm nu wél smaller worden
   dan zijn ongewrapte breedte, zodat de knoppen daarna netjes naar een 2e regel wrappen. */
.tp-template-actions { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 1 auto; }
.tp-template-reorder { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.tp-template-reorder .tp-btn { padding: 2px 8px; min-height: 26px; line-height: 1; }
.tp-templates-footer { display: flex; flex-wrap: wrap; gap: 8px; }

/* Bron-keuze bij "Bewaar huidig ontwerp als voorbeeld" (2026-08-29) */
.tp-template-source-options { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
/* Startkeuze (2026-09-25): drie gelijkwaardige routes bij een leeg ontwerp, in #tp-modal-start. Eigen
   tuin en voorbeeldtuin zijn de twee echte keuzes, zelf tekenen is de derde; ze staan naast elkaar zodat
   geen van drieen voorgetrokken lijkt. Onder 560 px onder elkaar: drie kolommen worden daar te smal voor
   de uitleg en de tikdoelen. */
.tp-start-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 6px; }
.tp-start-kaart {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 14px; text-align: left; cursor: pointer;
  background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius);
  font: inherit; color: inherit;
}
.tp-start-kaart:hover { background: var(--tp-surface-2); border-color: var(--tp-accent); }
.tp-start-kaart:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
.tp-start-kaart strong { font-size: 0.95rem; color: var(--tp-text); }
.tp-start-kaart > span:last-child { font-size: var(--tp-fs-sm); color: var(--tp-text-2); font-weight: 400; line-height: 1.45; }
.tp-start-ico { display: inline-flex; color: var(--tp-accent); }
.tp-start-ico .tp-ico { width: 26px; height: 26px; }
@media (max-width: 560px) {
  .tp-start-kaarten { grid-template-columns: 1fr; }
  .tp-start-kaart { padding: 13px 12px; }
}

.tp-btn-source-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; text-align: left; }
.tp-btn-source-choice strong { color: var(--pine); }
.tp-btn-source-choice span { font-size: 0.82rem; color: var(--gray); font-weight: 400; }

/* "Opgeslagen tuinontwerpen" (2026-08-29): eigen ontwerpen van Sebas + alle klantontwerpen, twee
   duidelijk gescheiden secties in één bredere modal-kaart. */
.tp-modal-card-wide { max-width: 760px; }
.tp-saved-designs-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.tp-saved-designs-section:first-of-type { margin-top: 12px; border-top: none; padding-top: 0; }
.tp-saved-designs-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Bulk-select + prullenbak voor "Mijn ontwerpen" (2026-09-03) — zelfde functionaliteit als de
   admin-hoofdtab "Tuinontwerp", hier los nagebouwd (deze pagina laadt admin-app.js niet, dus geen
   createBulkTrashController() beschikbaar) en aangepast aan de kaart-lay-out i.p.v. een tabel. */
.tp-owndesigns-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.tp-owndesign-selectall-wrap { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--gray); cursor: pointer; }
.tp-owndesigns-bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-owndesigns-bulkbar span { font-size: 0.82rem; color: var(--gray); }
.tp-owndesign-checkwrap { display: flex; align-items: center; flex: 0 0 auto; align-self: flex-start; }
.tp-owndesigns-trash-banner { font-size: 0.82rem; color: var(--gray); margin: 0 0 8px; }
.tp-saved-designs-section-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-saved-designs-section h3 { margin: 0 0 8px; font-size: 0.95rem; color: var(--pine); }
#tp-klantdesigns-search { width: 100%; margin-bottom: 10px; }

/* Eerste-bezoek-uitleg */
.tp-intro-steps { margin: 12px 0 16px; padding-left: 18px; display: flex; flex-direction: column; gap: 12px; }
.tp-intro-steps li { font-size: 0.9rem; line-height: 1.5; color: var(--gray); }
.tp-intro-steps strong { color: var(--pine); display: block; margin-bottom: 2px; }

/* Offerteformulier */
.tp-form-field { display: block; margin: 10px 0; font-size: 0.85rem; color: var(--gray); }
.tp-form-field input, .tp-form-field textarea {
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
}
.tp-form-field textarea { min-height: 80px; resize: vertical; }
.tp-of-status { color: #b3392b; font-size: 0.85rem; min-height: 1.2em; margin: 8px 0 0; }
.tp-hp-field { position: absolute; left: -9999px; top: -9999px; } /* honeypot buiten beeld */

/* --- Mobiele werkbalk (verborgen op desktop) --- */
.tp-mobilebar { display: none; }
/* De statuschip en zijn menu bestaan alleen op een smal scherm (zie de 768px-mediaquery). */
.tp-status-chip, .tp-status-pop { display: none; }
/* De draaitip alleen op een staande telefoon; in liggende stand of op een groot scherm nooit. */
.tp-draaitip { display: none; }
@media (max-width: 768px) and (orientation: portrait) {
  .tp-draaitip:not([hidden]) {
    display: flex; align-items: center; gap: 10px;
    position: absolute; left: 8px; right: 8px; top: 58px; z-index: 8;
    padding: 10px 12px;
    border: 1px solid var(--tp-border); border-radius: var(--tp-radius);
    background: var(--tp-surface); color: var(--tp-text);
    font-size: var(--tp-fs-xs); box-shadow: var(--tp-shadow-2);
  }
  .tp-draaitip span { flex: 1 1 auto; }
  .tp-draaitip .tp-btn { flex: 0 0 auto; min-height: 36px; }
}

/* ============================== Responsive ============================== */

/* Ultrawide (Sebas werkt op 2600 px): iets bredere panelen, de rest is canvas. */
@media (min-width: 1800px) {
  :root { --tp-panel-left-w: 300px; --tp-panel-right-w: 360px; }
}

/* Bewuste uitzondering op de 768/640/480-conventie (UX-audit): alleen iets smallere zijpanelen
   om tussen 768-1024px extra canvasruimte te geven op een laptop/tablet-landscape. */
@media (max-width: 1024px) {
  :root { --tp-panel-left-w: 236px; --tp-panel-right-w: 272px; }
}

@media (max-width: 768px) {
  .tp-header { gap: 4px; padding: 0 8px; }
  .tp-header h1 { display: none; }
  .tp-logo { height: 22px; }
  .tp-doc { margin-left: 2px; }
  .tp-save-status { display: none; }
  .tp-menu-btn .tp-btn-label, .tp-menu-btn .tp-menu-caret { display: none; }
  .tp-menu-btn { padding: 0 8px; }
  .tp-header-primary .tp-btn .tp-btn-label { display: none; }
  .tp-header-primary .tp-btn { min-width: var(--tp-ctrl-h); padding: 0 8px; }
  #tp-btn-search, #tp-btn-theme, #tp-btn-help { display: none; }
  .tp-menu-mobile-only { display: flex; }
  .tp-main { margin-bottom: calc(var(--tp-mobilebar-h) + env(safe-area-inset-bottom)); }

  /* Panelen worden uitschuifbare lagen over het canvas (boven de kopbalk, eigen sluitknop) */
  .tp-panel {
    position: fixed;
    top: 0;
    bottom: calc(var(--tp-mobilebar-h) + env(safe-area-inset-bottom));
    z-index: 60;
    width: min(86vw, 340px);
    box-shadow: var(--tp-shadow-2);
    transition: transform 0.25s ease;
  }
  body.tp-collapse-left .tp-panel-left, body.tp-collapse-right .tp-panel-right { width: min(86vw, 340px); border-width: 1px; overflow: visible; contain: none; visibility: visible; transition: transform 0.25s ease; }
  .tp-panel-left { left: 0; transform: translateX(-105%); }
  .tp-panel-right { right: 0; transform: translateX(105%); }
  body.tp-show-lib .tp-panel-left { transform: translateX(0); }
  body.tp-show-right .tp-panel-right { transform: translateX(0); }
  .tp-panel-fold { display: none; }
  .tp-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--tp-radius-sm);
    background: none;
    font-size: 1.2rem;
    color: var(--tp-text-2);
    cursor: pointer;
    padding: 0;
  }
  .tp-panel-tab .tp-ico { width: 16px; height: 16px; }

  .tp-mobilebar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    display: flex;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--tp-surface);
    border-top: 1px solid var(--tp-border);
    height: calc(var(--tp-mobilebar-h) + env(safe-area-inset-bottom));
  }
  .tp-mobilebar .tp-btn { flex: 1; min-height: 44px; padding: 0 4px; font-size: var(--tp-fs-xs); gap: 4px; }
  .tp-mobilebar .tp-btn .tp-ico { width: 18px; height: 18px; }

  /* Tool-rail wordt een horizontale strook boven de onderbalk; paneelknop zit in de onderbalk */
  .tp-rail { top: auto; left: 8px; right: 8px; bottom: 10px; flex-direction: row; overflow-x: auto; scrollbar-width: none; max-width: none; overscroll-behavior-x: contain; }
  .tp-rail::-webkit-scrollbar { display: none; }
  /* Knoppen krimpen niet (2026-10-07): anders perste flex 13 knoppen tot 26 px en scrolde de strook nooit.
     Nu 44 px en scrollen; de vervaagde rand (is-meer-voor/-na uit aanraak.js) laat zien dat er meer is. */
  .tp-rail-btn, .tp-rail-divider { flex: none; }
  .tp-rail-divider { width: 1px; height: auto; margin: 4px 3px; }
  /* Ongedaan maken en opnieuw staan in de onderbalk; dubbel in de rail kostte drie plekken. */
  .tp-rail #tp-btn-undo, .tp-rail #tp-btn-redo, .tp-rail .tp-rail-divider:has(+ #tp-btn-undo), .tp-rail .tp-rail-divider:has(+ #tp-btn-panel-left) { display: none; }
  .tp-menu-btn { min-width: var(--tp-ctrl-h); }
  .tp-rail .tp-rail-key { display: none; }
  #tp-btn-panel-left, #tp-btn-panel-right { display: none; }
  .tp-viewbar { top: 8px; right: 8px; max-width: calc(100% - 16px); }
  .tp-viewbar .tp-btn-label { display: none; }
  .tp-viewbar .tp-rail-btn { padding: 0 4px; }
  #tp-btn-grid, #tp-btn-snap, .tp-viewbar .tp-zoom-pct { display: none; }
  .tp-statusbar { display: none; }
  /* In plaats van de statusbalk: een chip linksboven in het tekenvlak (2026-09-25) met maat en aantal,
     die een klein menu met raster/snappen/hele-tuin opent. 44 px hoog: een tikdoel. */
  .tp-status-chip {
    display: inline-flex; align-items: center;
    position: absolute; top: 8px; left: 8px; z-index: 6;
    min-height: 44px; max-width: 52%; padding: 0 12px;
    border: 1px solid var(--tp-border); border-radius: 999px;
    background: var(--tp-surface); color: var(--tp-text);
    font: inherit; font-size: var(--tp-fs-xs); font-weight: 600;
    box-shadow: var(--tp-shadow-2); cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tp-status-chip:empty { display: none; }
  .tp-status-pop {
    display: flex; flex-direction: column; gap: 6px;
    position: absolute; top: 58px; left: 8px; z-index: 7;
    min-width: 200px; padding: 8px;
    border: 1px solid var(--tp-border); border-radius: var(--tp-radius);
    background: var(--tp-surface); box-shadow: var(--tp-shadow-2);
  }
  .tp-status-pop .tp-btn { min-height: 44px; justify-content: flex-start; }
  .tp-hint { bottom: calc(var(--tp-ctrl-h) + 30px); flex-wrap: wrap; justify-content: center; border-radius: var(--tp-radius); }
  .tp-popover--dock { max-height: calc(100vh - 200px); }
}
/* Schermtoetsenbord open (initToetsenbord() in aanraak.js): de hintbalk en het Maat-venster bovenaan het zichtbare
   deel, de onderbladen boven het toetsenbord. --tp-vv-top en --tp-vv-h komen uit visualViewport. */
body.tp-toetsenbord-open .tp-hint { position: fixed; top: calc(var(--tp-vv-top, 0px) + 8px); bottom: auto; z-index: 75; }
body.tp-toetsenbord-open .tp-aanraakmaat { position: fixed; top: calc(var(--tp-vv-top, 0px) + 8px); z-index: 75; }
@media (max-width: 768px) and (orientation: portrait) {
  body.tp-toetsenbord-open .tp-panel.tp-panel-right, body.tp-toetsenbord-open .tp-panel.tp-panel-left {
    bottom: var(--tp-toetsenbord, 0px);
    height: calc(var(--tp-vv-h, 100vh) - 8px);
    transition: none;
  }
}

/* Meer gereedschap (initRailMeer() in aanraak.js): alleen op een staande telefoon; dan verdwijnen de vier knoppen erin. */
#tp-tool-meer, .tp-railmeer { display: none; }
@media (max-width: 768px) and (orientation: portrait) {
  #tp-tool-meer { display: inline-flex; }
  #tp-tool-freehand, #tp-tool-measure, #tp-tool-text, #tp-tool-meetlint { display: none; }
  .tp-rail { gap: 1px; }
  .tp-rail-divider { margin: 4px 2px; }
  /* #tp-tool-meer.tp-active: de selectorlijst in invoer.js kent hem niet, de MutationObserver zet hem. */
  .tp-railmeer:not([hidden]) {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; right: 8px; bottom: calc(var(--tp-ctrl-h) + 30px); z-index: 26;
    min-width: 230px; padding: 6px;
    background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow-2);
  }
  .tp-railmeer-item {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
    border: none; border-radius: var(--tp-radius-sm); background: transparent; color: var(--tp-text);
    font: inherit; font-size: var(--tp-fs-sm); text-align: left; cursor: pointer;
  }
  .tp-railmeer-item:active { background: var(--tp-surface-2); }
  .tp-railmeer-item.tp-active { background: var(--tp-accent-soft); color: var(--tp-accent-hover); }
  .tp-railmeer-item .tp-ico { flex: none; width: 18px; height: 18px; }
}

/* Panelen als onderblad op een staande telefoon (2026-10-07, initOnderblad() in aanraak.js). Als zijlade bedekten ze
   86 % van het scherm: bij Details zag je niet wat een andere maat of kleur deed. Nu schuiven ze van onderen in,
   met de tekening erboven; de greep wisselt naar hoog (.is-vol) en omlaag vegen sluit. Details is half hoog (je
   wilt het object zien), de bibliotheek wat hoger (je kiest, en na een keuze gaat hij dicht). */
.tp-onderblad-greep { display: none; }
@media (max-width: 768px) and (orientation: portrait) {
  .tp-panel, body.tp-collapse-right .tp-panel-right, body.tp-collapse-left .tp-panel-left {
    top: auto; left: 0; right: 0; width: auto;
    border-left: none; border-right: none; border-top: 1px solid var(--tp-border); border-radius: 16px 16px 0 0;
    transform: translateY(calc(100% + var(--tp-mobilebar-h) + 24px));
    transition: transform 0.25s ease, height 0.2s ease;
  }
  .tp-panel-right, body.tp-collapse-right .tp-panel-right { height: min(56vh, 520px); }
  .tp-panel-left, body.tp-collapse-left .tp-panel-left { height: min(72vh, 640px); }
  body.tp-show-right .tp-panel-right, body.tp-show-lib .tp-panel-left { transform: translateY(0); }
  .tp-panel.is-vol { height: calc(100% - var(--tp-header-h) - var(--tp-mobilebar-h) - 12px - env(safe-area-inset-bottom)); }
  .tp-panel .tp-panel-head { padding-top: 0; }
  .tp-onderblad-greep {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 100%; height: 24px; padding: 0; border: none; background: none; cursor: grab; touch-action: none;
  }
  .tp-onderblad-greep::before { content: ''; width: 40px; height: 5px; border-radius: 3px; background: var(--tp-border-strong); }
  .tp-onderblad-greep:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: -2px; }
}

/* Smalle telefoon: de weergavebalk rechtsboven is dan zo breed dat hij over het statuschip valt. Het
   chip en zijn menu schuiven onder de balk (ca. 54 px hoog, top 8 px). */
@media (max-width: 520px) {
  .tp-status-chip { top: 70px; }
  .tp-status-pop { top: 120px; }
}

@media (max-width: 480px) {
  .tp-name-input { flex-basis: 110px; min-width: 70px; }
  .tp-lib-grid { grid-template-columns: repeat(3, 1fr); }
  .tp-modal { padding: 8px; align-items: flex-end; }
  .tp-modal-card { max-height: 92vh; border-radius: var(--tp-radius) var(--tp-radius) 0 0; }
  .tp-shortcuts { grid-template-columns: 1fr; }
}

/* Tikdoelen op aanraakschermen, ongeacht breedte (iPad landscape = 1024 px, zie
   feedback-touch-targets-horen-aan-pointer-coarse): alles wat je met een vinger raakt >= 44 px. */
@media (pointer: coarse) {
  :root { --tp-ctrl-h: 44px; }
  #tp-tool-touch-addsel { display: inline-flex; }
  .tp-btn-sm { min-height: 40px; }
  .tp-menu-item, .tp-lib-group-head, .tp-layers-row, .tp-empty-action, .tp-chip, .tp-style-menu-item, .tp-palette-item { min-height: 44px; }
  .tp-lib-item { min-height: 60px; }
  .tp-lib-fav { opacity: 1; width: 28px; height: 28px; }
  .tp-panel-tab { min-height: 44px; }
  .tp-obj-head-actions .tp-icon-btn { width: 40px; height: 40px; }
  .tp-align-row .tp-icon-btn { height: 40px; }
  .tp-field input, .tp-field select, .tp-num, .tp-lib-search { height: 40px; }
  /* Getallen (2026-10-07): de min en plus zijn de meestgebruikte knoppen in het detailpaneel, dus 44 px. */
  .tp-num { height: 44px; }
  .tp-num input, .tp-num-btn { height: 42px; }
  .tp-num-btn { width: 44px; font-size: 18px; }
  .tp-swatch { width: 44px; height: 44px; }
  /* Objectkop: met vier actieknoppen van 40 px bleef er van de naam "Gaz" over. Past het niet, dan gaan de
     knoppen naar een eigen regel. */
  .tp-obj-head { flex-wrap: wrap; }
  .tp-obj-head-main { min-width: 120px; }
  .tp-rail .tp-rail-key { display: none; }
  .tp-modal-x, .tp-panel-close { min-width: 44px; min-height: 44px; }
  .tp-props-section > summary { min-height: 44px; padding: 0; }
}
/* Ingeklapt paneel op een tablet: de strook is 44 px, dus de knoppen erin ook (waren 32 px). */
@media (pointer: coarse) and (min-width: 769px) {
  body.tp-collapse-left .tp-panel-left .tp-panel-head, body.tp-collapse-right .tp-panel-right .tp-panel-head { padding: 6px 0; gap: 4px; align-items: center; }
  body.tp-collapse-left .tp-panel-left .tp-panel-fold, body.tp-collapse-right .tp-panel-right .tp-panel-fold,
  body.tp-collapse-left .tp-panel-left .tp-panel-tab, body.tp-collapse-right .tp-panel-right .tp-panel-tab { width: 44px; height: 44px; min-height: 44px; }
  .tp-panel-fold { width: 44px; height: 44px; }
}

/* Liggende telefoon (2026-10-07): breder dan 768 px, dus de desktopindeling, maar maar ~390 px hoog. De rail
   liep onder het scherm uit; daarmee waren vrije hand, maatlijn, tekst, meetlint en ongedaan maken onbereikbaar
   (er is in deze stand geen onderbalk). Nu scrolt de rail zelf, en de kopbalk laat de woorden weg die de
   iconen in de kop tot 24 px persten. De draaitip raadt deze stand aan, dus hij moet goed werken. */
@media (pointer: coarse) and (max-height: 500px) and (min-width: 769px) {
  .tp-rail { max-height: calc(100% - var(--tp-status-h) - 18px); overflow-y: auto; scrollbar-width: none; overscroll-behavior-y: contain; }
  .tp-rail::-webkit-scrollbar { display: none; }
  .tp-rail-btn, .tp-rail-divider { flex: none; }
  .tp-header { gap: 6px; padding: 0 8px; }
  .tp-header h1, .tp-save-status { display: none; }
  .tp-menu-btn .tp-btn-label, .tp-menu-btn .tp-menu-caret { display: none; }
  .tp-menu-btn { min-width: var(--tp-ctrl-h); padding: 0 8px; }
  .tp-header-actions > *, .tp-header-primary > * { flex: none; }
  .tp-menu-panel { max-height: calc(100vh - var(--tp-header-h) - 12px); }
  /* Weergavebalk op een regel, ook met een paneel open: iconen zonder woord, zoom staat in de statusbalk. */
  .tp-viewbar .tp-btn-label, .tp-viewbar .tp-zoom-pct { display: none; }
  .tp-viewbar .tp-rail-btn { padding: 0 4px; }
  /* Actiebalk zonder woorden: met labels nam hij een derde van het tekenvlak in. Het label blijft voor
     schermlezers (niet display: none, want niet elke knop heeft een aria-label). */
  .tp-aanraakbalk { bottom: calc(var(--tp-status-h) + 8px); padding: 2px; }
  .tp-aanraak-knop { min-height: 44px; min-width: 44px; }
  .tp-aanraakbalk .tp-aanraak-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tp-aanraakmeer { bottom: calc(var(--tp-status-h) + 8px + 54px); max-height: calc(100% - var(--tp-status-h) - 80px); }
  /* Hintbalk naast de rail, niet eroverheen (de rail loopt hier tot vlak boven de statusbalk). Uitleg kleiner,
     op een eigen regel, zodat velden en knoppen samen op een of twee rijen passen. */
  .tp-hint { left: 72px; bottom: calc(var(--tp-status-h) + 8px); max-width: none; padding: 6px 8px; gap: 6px; row-gap: 4px; }
  .tp-hint #tp-hint-text { flex: 1 1 100%; text-align: center; font-size: var(--tp-fs-xs); }
  .tp-hint .tp-btn { padding: 0 12px; }
  /* Velden en knoppen op een rij: het woord bij het veld alleen voor schermlezers, de eenheid (m, °) staat erin. */
  .tp-hint-fields input { width: 60px; }
  .tp-hint-fields label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Tablet met open paneel (236 px): het tab-icoon kostte "Bibliotheek" zijn laatste letters. */
@media (pointer: coarse) and (min-width: 769px) and (max-width: 1024px) {
  body:not(.tp-collapse-left) .tp-panel-left .tp-panel-tab .tp-ico, body:not(.tp-collapse-right) .tp-panel-right .tp-panel-tab .tp-ico { display: none; }
}
/* Meer in de strook dan er past: de rand aan die kant vervaagt (klassen uit initRailScroll() in aanraak.js). */
.tp-rail.is-meer-na { -webkit-mask-image: linear-gradient(var(--tp-rail-fade-dir, to right), #000 calc(100% - 32px), transparent); mask-image: linear-gradient(var(--tp-rail-fade-dir, to right), #000 calc(100% - 32px), transparent); }
.tp-rail.is-meer-voor { -webkit-mask-image: linear-gradient(var(--tp-rail-fade-dir, to right), transparent, #000 32px); mask-image: linear-gradient(var(--tp-rail-fade-dir, to right), transparent, #000 32px); }
.tp-rail.is-meer-voor.is-meer-na { -webkit-mask-image: linear-gradient(var(--tp-rail-fade-dir, to right), transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(var(--tp-rail-fade-dir, to right), transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.tp-rail.is-kolom { --tp-rail-fade-dir: to bottom; }
/* Tabellen die opzij scrollen (initScrollRanden() in aanraak.js): zelfde vervaagde rand. */
.tp-scrollrand.is-meer-na { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.tp-scrollrand.is-meer-voor { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.tp-scrollrand.is-meer-voor.is-meer-na { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }

/* ── Weergavestijl-kiezer (dropdown, 2026-08-24; sinds 2026-09-09 een .tp-popover) ─────── */
.tp-style-picker { position: relative; }
.tp-style-menu {
  min-width: 240px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: min(70vh, 460px);
  overflow-y: auto;
}
.tp-style-menu[hidden] { display: none; }
.tp-style-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: none;
  background: none;
  border-radius: var(--tp-radius-xs);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 40px;
  color: var(--tp-text);
}
.tp-style-menu-item:hover, .tp-style-menu-item:focus-visible { background: var(--tp-surface-2); }
.tp-style-menu-item.tp-active { background: var(--tp-accent-soft); }
.tp-style-menu-icon { flex: none; display: inline-flex; color: var(--tp-text-2); }
.tp-style-menu-icon .tp-ico { width: 18px; height: 18px; }
.tp-style-menu-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tp-style-menu-name { font-weight: 600; color: var(--tp-text); font-size: var(--tp-fs-sm); }
.tp-style-menu-desc { font-size: var(--tp-fs-xs); color: var(--tp-text-2); }
.tp-style-menu-check { margin-left: auto; flex: none; color: var(--tp-accent); font-weight: 700; }

/* ── Werkbalkpaneel "Legenda" (2026-08-28) ─────────────────────────────────────────────── */
.tp-legend-picker { position: relative; }
.tp-legend-panel {
  width: 270px;
  max-width: calc(100vw - 16px);
  padding: 10px 12px 12px;
  max-height: min(70vh, 460px);
  overflow-y: auto;
}
.tp-legend-panel[hidden] { display: none; }
.tp-legend-panel .tp-field select,
.tp-legend-panel .tp-field input { width: 130px; }

/* ── Werkbalkpaneel "Kaart" (2026-09-08): ondergrond laden + lagen ──────────────────────── */
.tp-kaart-picker { position: relative; }
.tp-kaart-panel {
  width: 330px;
  max-width: calc(100vw - 16px);
  padding: 10px 12px 12px;
  max-height: min(72vh, 600px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tp-kaart-panel[hidden] { display: none; }
/* Oudere klassen blijven werken als alias van de generieke popover-standen */
.tp-kaart-panel--flip { right: auto; left: 0; }
.tp-kaart-panel--dock { position: fixed; left: 8px; right: 8px; width: auto; max-width: none; z-index: 75; max-height: calc(100vh - 140px); }
.tp-kaart-panel .tp-btn { min-width: 0; padding: 0 10px; white-space: normal; }
.tp-kaart-h { font-size: var(--tp-fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tp-text-3); margin-top: 2px; }
.tp-kaart-panel .tp-bg-pdok-form { margin-top: 2px; }
.tp-kaart-fine > summary { cursor: pointer; font-size: var(--tp-fs-sm); color: var(--tp-text-2); padding: 4px 0; min-height: 32px; display: flex; align-items: center; }
.tp-kaart-fine[open] > summary { color: var(--tp-text); }
.tp-kaart-foot { margin-top: 4px; }
.tp-kaart-panel .tp-price-opt { font-size: var(--tp-fs-sm); }
.tp-kaart-panel .tp-price-opt input[type="checkbox"] { accent-color: var(--tp-accent); }

/* Rechtermuisknop-contextmenu (2026-08-26, desktop-only): position:fixed op de cursorpositie,
   JS klemt links/boven tegen de canvas-wrap zodat het nooit buiten de tool valt. Zelfde
   look-and-feel als .tp-style-menu hierboven (wit, rand, schaduw), maar los daarvan gebouwd omdat
   dit menu vrij op het canvas verschijnt i.p.v. anchored aan één vaste knop. */
.tp-context-menu {
  position: fixed;
  z-index: 60;
  width: 260px;
  max-width: calc(100vw - 16px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 10px 12px 12px;
}
.tp-context-menu[hidden] { display: none; }
/* Nooit langer dan het tekenvlak (2026-10-07): liggend op een telefoon liep het menu van 52 tot 645 px op een scherm
   van 390 px, en de helft van de opties was onbereikbaar. Nu scrolt het zelf; openContextMenu() klemt de positie. */
.tp-context-menu { max-height: calc(100vh - var(--tp-header-h) - 16px); max-height: calc(100dvh - var(--tp-header-h) - 16px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 768px) {
  .tp-context-menu { max-height: calc(100vh - var(--tp-header-h) - var(--tp-mobilebar-h) - 16px); max-height: calc(100dvh - var(--tp-header-h) - var(--tp-mobilebar-h) - 16px); }
}
.tp-context-menu-title {
  font-weight: 700;
  color: var(--pine);
  font-size: 0.92rem;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
/* Compacter dan de sidebar: het menu heeft geen ruimte voor de sidebar-breedte van 150px. */
.tp-context-menu .tp-field select,
.tp-context-menu .tp-field input { width: 130px; }
.tp-context-menu .tp-swatch-row { margin: 8px 0 6px; }
.tp-context-menu-divider { border-top: 1px solid var(--border); margin: 8px 0 10px; }
.tp-context-menu-props-btn { width: 100%; justify-content: center; }
/* Read-only samenvatting van gekoppelde producten/bundels/arbeid (renderLinksSummary,
   2026-08-26) — bewust compacter/gedempter dan de bewerkbare lijst in het zijpaneel. */
.tp-context-menu-links {
  margin: 0 0 10px;
  padding: 6px 8px;
  background: var(--stone-light);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
}
.tp-context-menu-links-heading {
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
}
.tp-context-menu-links-row { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; }
.tp-context-menu-links-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-context-menu-links-row span:last-child { flex: none; color: var(--gray); }

/* Hover-tooltip op het gekoppelde-producten-badge (checkLinkBadgeHover, 2026-08-26): volgt de
   cursor, geen eigen interactie (pointer-events:none — een tooltip die zelf hover/klikken
   opvangt zou de canvas-hover-detectie eronder verstoren). Hergebruikt bewust dezelfde
   .tp-context-menu-links*-content-klassen als het contextmenu (identieke inhoud, zie
   buildLinksSummaryEl), alleen de buitenste kaart/positionering is anders. */
.tp-hover-tooltip {
  position: fixed;
  z-index: 65; /* boven het canvas, onder het contextmenu (60 resp. modals) als ze ooit overlappen */
  width: 220px;
  pointer-events: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 8px 10px;
}
.tp-hover-tooltip[hidden] { display: none; }
.tp-hover-tooltip .tp-context-menu-links { margin: 0; padding: 0; background: none; }

/* ── 3D-weergave (3d.js): fullscreen overlay boven alles, incl. de modals ─────── */
.tp3d-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--tp-3d-bg);
  /* Hoogte van de werkbalk onderin: hint, looppad en de panelen rekenen hiermee. Dit is een
     startwaarde; fitRendererToOverlay() meet de balk en zet de echte hoogte (incl. safe-area). */
  --tp3d-bar-h: 60px;
}
.tp3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none; /* orbit/pinch gaan naar de camera van de viewer, niet naar de pagina */
}
/* Laadscherm (2026-09-30, 3d/laadscherm.js): dekt het canvas tot elk zichtbaar oppervlak getekend kan worden
   (openTuinplan3D() in 3d/api.js; de foto-texturen komen daarna binnen via voorlopige kaarten). Een groeiend tuintje, de stap, een balk, een geduldregel en wisselende
   tuintips. Los over de pagina (.tp3d-laad-los) zolang de 3D-module nog binnenkomt, daarna in de overlay,
   onder de werkbalk (z-index 6) zodat de sluitknop bereikbaar blijft. Het inhoudsblok centreert met
   margin: auto, zodat het op een lage telefoon scrollt in plaats van boven en onder weg te vallen. */
.tp3d-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  overflow-y: auto;
  padding: 16px 16px calc(var(--tp3d-bar-h, 60px) + 16px);
  background: var(--tp-3d-bg);
  color: var(--tp-text);
}
.tp3d-loading[hidden] { display: none; }
.tp3d-loading.tp3d-laad-los {
  position: fixed;
  z-index: 121; /* boven .tp3d-overlay (120): die staat bij een herhaalde open nog verborgen klaar */
  padding-bottom: 16px;
}
/* Het eigen ontwerp als achtergrond (zetAchtergrond() in laadscherm.js): vaag, licht en eerst grijs; het
   kleurt in met de balk (--tp3d-laad-voortgang, 0 tot 1). Vult het scherm (object-fit op het canvas). */
.tp3d-laad-achter { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tp3d-laad-los .tp3d-laad-achter { position: fixed; }
.tp3d-laad-achter canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: blur(6px) grayscale(calc(1 - var(--tp3d-laad-voortgang, 0)));
  transform: scale(1.06); /* de vage rand valt buiten beeld */
  transition: filter 0.6s ease;
}
html[data-theme="dark"] .tp3d-laad-achter canvas { opacity: 0.18; }
.tp3d-laad-inhoud {
  position: relative;
  z-index: 1;
  margin: auto;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.tp3d-laad-titel { margin: 4px 0 0; font-size: 17px; font-weight: 700; }
.tp3d-laad-stap { margin: 0; min-height: 1.4em; font-size: var(--tp-fs-sm); color: var(--tp-text-2); }
.tp3d-laad-balk {
  width: min(240px, 80%);
  height: 6px;
  border-radius: 3px;
  background: var(--tp-3d-hint-bg);
  box-shadow: inset 0 0 0 1px var(--tp-border); /* in donker valt de baan anders weg tegen de achtergrond */
  overflow: hidden;
}
.tp3d-laad-balk span {
  display: block;
  width: 2%;
  height: 100%;
  border-radius: 3px;
  background: var(--tp-accent);
  transition: width 0.5s ease;
}
/* Laatste stap (shaders, GPU): geen tellers meer, dus zacht pulseren in plaats van stilstaan. */
.tp3d-laad.is-wachten .tp3d-laad-balk span { animation: tp-pulse 1.4s ease-in-out infinite; }
.tp3d-laad-geduld { margin: 4px 0 0; max-width: 34ch; font-size: var(--tp-fs-sm); line-height: 1.45; color: var(--tp-text-2); }
.tp3d-laad-tip {
  margin-top: 8px;
  width: 100%;
  min-height: 92px; /* tips verschillen in lengte: zonder vaste hoogte springt alles erboven bij elke wissel */
  padding: 12px 14px;
  border-radius: var(--tp-radius);
  background: var(--tp-3d-hint-bg);
  box-shadow: var(--tp-shadow-1);
  text-align: left;
}
.tp3d-laad-tip-kop { font-size: var(--tp-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tp-accent); }
.tp3d-laad-tip-kop { display: block; min-height: 1.5em; transition: opacity 0.3s ease; }
/* Icoon per soort tip (laadscherm.js, kopVan()). */
.tp3d-laad-tip-kop::before { content: '🌱 '; }
.tp3d-laad-tip-kop[data-soort="weetje"]::before { content: '💡 '; }
.tp3d-laad-tip-kop[data-soort="eigen"]::before { content: '🌼 '; }
.tp3d-laad-tip-kop[data-soort="planner"]::before { content: '✨ '; }
.tp3d-laad-tip-kop[data-soort="moes"]::before { content: '🥕 '; }
.tp3d-laad-tip-kop[data-soort="lente"]::before { content: '🌷 '; }
.tp3d-laad-tip-kop[data-soort="zomer"]::before { content: '☀️ '; }
.tp3d-laad-tip-kop[data-soort="herfst"]::before { content: '🍂 '; }
.tp3d-laad-tip-kop[data-soort="winter"]::before { content: '❄️ '; }
.tp3d-laad-tip-tekst { margin: 4px 0 0; font-size: var(--tp-fs); line-height: 1.5; transition: opacity 0.3s ease; }
/* Een nieuwe tip vloeit in (is-nieuw, volgendeTip()). Een animatie en geen uitvloei-overgang: die draait op de
   compositor en houdt dus ook door als JavaScript stilstaat, en de tekst staat er al voordat hij begint. */
.tp3d-laad-tip-kop.is-nieuw, .tp3d-laad-tip-tekst.is-nieuw { animation: tp3d-laad-tip-in 0.45s ease-out; }
@keyframes tp3d-laad-tip-in { from { opacity: 0; transform: translateY(4px); } }
/* Ronde 3 (2026-10-01): pauzeknop naast het kopje (WCAG 2.2.2), "Handig" onder de tip, het merk onderaan en de
   chip "Probeer het" na het laden (laadscherm.js, toonProbeer()). Raakvlakken minstens 32px, de chip 44px. */
.tp3d-laad-tip-balk { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tp3d-laad-pauze, .tp3d-laad-handig {
  min-width: 32px; min-height: 32px; padding: 0 8px; border: 1px solid var(--tp-border); border-radius: var(--tp-radius);
  background: transparent; color: var(--tp-text-2); font: inherit; font-size: var(--tp-fs-sm); cursor: pointer;
}
.tp3d-laad-pauze[aria-pressed="true"], .tp3d-laad-handig[aria-pressed="true"] { color: var(--tp-accent); border-color: var(--tp-accent); }
.tp3d-laad-pauze:focus-visible, .tp3d-laad-handig:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
.tp3d-laad-handig { margin-top: 8px; }
/* "Waarom duurt dit?" (opts.onHulp): een tekstlink onder de geduldregel, raakvlak 44px hoog op touch. */
.tp3d-laad-hulp { min-height: 32px; padding: 0 8px; border: 0; background: none; color: var(--tp-accent); font: inherit;
  font-size: var(--tp-fs-sm); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tp3d-laad-hulp[hidden] { display: none; }
.tp3d-laad-hulp:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; border-radius: 4px; }
@media (pointer: coarse) { .tp3d-laad-hulp { min-height: 44px; } }
.tp3d-laad-handig[hidden], .tp3d-laad-merk[hidden] { display: none; }
.tp3d-laad-merk { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 0; font-size: var(--tp-fs-xs); color: var(--tp-text-2); }
.tp3d-laad-merk img { height: 22px; width: auto; max-width: 140px; object-fit: contain; }
.tp3d-laad-probeer {
  position: absolute; z-index: 7; left: 50%; top: 16px; transform: translateX(-50%);
  display: flex; gap: 6px; align-items: center; max-width: calc(100% - 32px);
  padding: 6px; border-radius: 999px; background: var(--tp-3d-hint-bg); box-shadow: var(--tp-shadow-1);
  animation: tp3d-laad-probeer-in 0.3s ease-out;
}
.tp3d-laad-probeer .tp-btn { min-height: 44px; border-radius: 999px; }
@keyframes tp3d-laad-probeer-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { .tp3d-laad-probeer { animation: none; } }
.tp3d-laad-traag { margin: 0; max-width: 34ch; font-size: var(--tp-fs-sm); line-height: 1.45; color: var(--tp-text-2); }
/* Persoonlijke regel, automatisch lagere kwaliteit, en de knoppen (2026-09-30). */
.tp3d-laad-persoonlijk { margin: 0; max-width: 34ch; font-size: var(--tp-fs); line-height: 1.45; }
.tp3d-laad-kwaliteit { margin: 2px 0 0; max-width: 34ch; font-size: var(--tp-fs-sm); line-height: 1.45; font-weight: 600; color: var(--tp-accent); }
.tp3d-laad-persoonlijk[hidden], .tp3d-laad-kwaliteit[hidden], .tp3d-laad-2d-uitleg[hidden], .tp3d-laad-acties [hidden] { display: none; }
.tp3d-laad-acties { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; width: 100%; }
.tp3d-laad-acties:not(:has(button:not([hidden]))) { display: none; }
.tp3d-laad-acties .tp-btn { min-height: 44px; padding: 0 16px; } /* raakvlak op een telefoon */
.tp3d-laad-2d-uitleg { margin: 0; max-width: 34ch; font-size: var(--tp-fs-xs); line-height: 1.45; color: var(--tp-text-2); }
/* "Ga verder in 2D": laadt door, maar onzichtbaar en klikdoorlatend. Bewust geen display: none (dan meet het
   canvas 0x0). Alles in de overlay erft visibility: hidden, dus ook het laadscherm en de werkbalk. */
.tp3d-overlay.tp3d-achtergrond,
.tp3d-loading.is-achtergrond { visibility: hidden; pointer-events: none; }

/* Het tuintje. De vormen staan in hun eindstand; de keyframes laten ze vanuit niets groeien, dus zonder
   animatie (reduced motion) blijft het volgroeide tuintje staan. */
.tp3d-laad-tuin { width: min(200px, 55vw); height: auto; overflow: visible; }
.tp3d-laad-tuin * { transform-box: fill-box; }
.tp3d-laad-zon circle { fill: #f2b134; }
.tp3d-laad-stralen path { fill: none; stroke: #f2b134; stroke-width: 2.5; stroke-linecap: round; }
.tp3d-laad-wolk { fill: #ffffff; opacity: 0.9; }
.tp3d-laad-grond { fill: var(--tp-accent); opacity: 0.22; }
.tp3d-laad-plant .stengel { fill: none; stroke: var(--tp-accent); stroke-width: 3; stroke-linecap: round; }
.tp3d-laad-plant .blad { fill: var(--tp-accent); }
.tp3d-laad-plant .hart { fill: #fff3c4; }
.tp3d-laad-plant.p1 .bloem circle:first-child { fill: #e8866a; }
.tp3d-laad-plant.p2 .bloem circle:first-child { fill: #c98bd6; }
.tp3d-laad-plant.p3 .bloem circle:first-child { fill: #f2b134; }
html[data-theme="dark"] .tp3d-laad-wolk { opacity: 0.25; }
/* Speels tuintje (2026-10-01). Nacht: maan en sterren in plaats van zon en vlinder. De maansikkel is een
   cirkel met een tweede in de achtergrondkleur eroverheen. */
.tp3d-laad-maan circle { fill: #e9c046; }
.tp3d-laad-maan .uit { fill: var(--tp-3d-bg); }
.tp3d-laad-sterren circle { fill: #f2b134; }
.tp3d-laad-maan, .tp3d-laad-sterren,
.tp3d-laad-tuin.is-nacht .tp3d-laad-zon, .tp3d-laad-tuin.is-nacht .tp3d-laad-vlinder { display: none; }
.tp3d-laad-tuin.is-nacht .tp3d-laad-maan, .tp3d-laad-tuin.is-nacht .tp3d-laad-sterren { display: inline; }
.tp3d-laad-tuin.is-nacht .tp3d-laad-wolk { opacity: 0.35; }
.tp3d-laad-tuin .raak { fill: transparent; }
.tp3d-laad-plant .wiebel, .tp3d-laad-vlinder .schrik { cursor: pointer; }
.tp3d-laad-plant .wiebel { transform-origin: center bottom; }
/* Eigen selector met tp3d-laad-tuin ervoor: de animation-delay van p2/p3 (hieronder) mag de tik niet vertragen. */
.tp3d-laad-tuin .tp3d-laad-plant .wiebel.is-getikt { animation: tp3d-laad-wiebel 0.8s ease-in-out; animation-delay: 0s; }
.tp3d-laad-vlinder .vleugel { fill: #e8866a; }
.tp3d-laad-vlinder .vleugel.r { fill: #f2b134; }
.tp3d-laad-vlinder .lijf { fill: none; stroke: var(--tp-text); stroke-width: 1.4; stroke-linecap: round; }
.tp3d-laad-vlinder .vleugel.l { transform-origin: right center; animation: tp3d-laad-klap 0.22s ease-in-out infinite alternate; }
.tp3d-laad-vlinder .vleugel.r { transform-origin: left center; animation: tp3d-laad-klap 0.22s ease-in-out infinite alternate; }
.tp3d-laad-vlinder { transform: translate(24px, 56px); animation: tp3d-laad-fladder 14s ease-in-out infinite alternate; }
.tp3d-laad-vlinder .schrik.is-getikt { animation: tp3d-laad-schrik 1.4s ease-in-out; }
.tp3d-laad-sterren circle { transform-origin: center; animation: tp3d-laad-twinkel 2.4s ease-in-out infinite alternate; }
.tp3d-laad-sterren .s2 { animation-delay: 0.8s; }
.tp3d-laad-sterren .s3 { animation-delay: 1.6s; }
/* Seizoen (seizoen-* op de SVG): bloesem, blad of sneeuw dwarrelt omlaag. Zomer: niets (de vlinder). Sneeuw
   heeft in licht thema een blauwgrijze tint, anders valt wit weg tegen de lichte achtergrond. */
.tp3d-laad-vallen .v > * { display: none; }
.tp3d-laad-tuin.seizoen-lente .tp3d-laad-vallen .bloesem,
.tp3d-laad-tuin.seizoen-herfst .tp3d-laad-vallen .blaadje,
.tp3d-laad-tuin.seizoen-winter .tp3d-laad-vallen .vlok { display: inline; }
.tp3d-laad-vallen .bloesem { fill: #f4b6c8; }
.tp3d-laad-vallen .blaadje { fill: #d9822b; }
.tp3d-laad-vallen .v2 .blaadje, .tp3d-laad-vallen .v4 .blaadje { fill: #b5562a; }
.tp3d-laad-vallen .vlok { fill: #a9c1d6; }
html[data-theme="dark"] .tp3d-laad-vallen .vlok { fill: #ffffff; }
.tp3d-laad-vallen .v { opacity: 0; transform-origin: center; animation: tp3d-laad-val 7s linear infinite; }
.tp3d-laad-vallen .v2 { animation-duration: 8.5s; animation-delay: 1.8s; }
.tp3d-laad-vallen .v3 { animation-duration: 6.5s; animation-delay: 3.4s; }
.tp3d-laad-vallen .v4 { animation-duration: 9s; animation-delay: 0.9s; }
.tp3d-laad-vallen .v5 { animation-duration: 7.5s; animation-delay: 4.6s; }
/* Klaar-moment (verbergLaadscherm()): alle planten volgroeid, de bloemen springen nog een keer open. */
.tp3d-laad.is-klaar .tp3d-laad-tuin .tp3d-laad-plant,
.tp3d-laad.is-klaar .tp3d-laad-tuin .tp3d-laad-plant * { animation: none; }
.tp3d-laad.is-klaar .tp3d-laad-tuin .tp3d-laad-plant .bloem { animation: tp3d-laad-pop 0.4s ease-out; }

.tp3d-laad-stralen { transform-origin: center; animation: tp3d-laad-draai 14s linear infinite; }
.tp3d-laad-zon { animation: tp3d-laad-dobber 4s ease-in-out infinite; }
.tp3d-laad-wolk { animation: tp3d-laad-drijf 9s ease-in-out infinite alternate; }
.tp3d-laad-plant { animation: tp3d-laad-lus 7s ease-in-out infinite; }
.tp3d-laad-plant .stengel { transform-origin: bottom; animation: tp3d-laad-groei 7s ease-out infinite; }
.tp3d-laad-plant .blad.l { transform-origin: right bottom; animation: tp3d-laad-blad 7s ease-out infinite; }
.tp3d-laad-plant .blad.r { transform-origin: left bottom; animation: tp3d-laad-blad 7s ease-out infinite; }
.tp3d-laad-plant .bloem { transform-origin: center; animation: tp3d-laad-bloem 7s ease-out infinite; }
.tp3d-laad-tuin .tp3d-laad-plant.p2, .tp3d-laad-tuin .tp3d-laad-plant.p2 * { animation-delay: 0.35s; }
.tp3d-laad-tuin .tp3d-laad-plant.p3, .tp3d-laad-tuin .tp3d-laad-plant.p3 * { animation-delay: 0.7s; }
@keyframes tp3d-laad-draai { to { transform: rotate(360deg); } }
@keyframes tp3d-laad-dobber { 50% { transform: translateY(-3px); } }
@keyframes tp3d-laad-drijf { to { transform: translateX(12px); } }
@keyframes tp3d-laad-lus { 0%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tp3d-laad-groei { 0%, 4% { transform: scaleY(0); } 30%, 100% { transform: scaleY(1); } }
@keyframes tp3d-laad-blad { 0%, 18% { transform: scale(0); } 38%, 100% { transform: scale(1); } }
@keyframes tp3d-laad-bloem { 0%, 34% { transform: scale(0); } 48% { transform: scale(1.15); } 55%, 100% { transform: scale(1); } }
@keyframes tp3d-laad-wiebel { 20% { transform: rotate(-9deg); } 45% { transform: rotate(7deg); } 70% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
@keyframes tp3d-laad-klap { to { transform: scaleX(0.25); } }
/* Langs de drie bloemen (46,60), (80,45) en (113,66) en weer terug (alternate). */
@keyframes tp3d-laad-fladder {
  0% { transform: translate(24px, 56px); }
  18% { transform: translate(44px, 48px); }
  32% { transform: translate(60px, 30px); }
  48% { transform: translate(82px, 36px); }
  64% { transform: translate(100px, 48px); }
  80% { transform: translate(115px, 56px); }
  100% { transform: translate(140px, 70px); }
}
@keyframes tp3d-laad-schrik { 35% { transform: translate(14px, -26px); } 100% { transform: translate(0, 0); } }
@keyframes tp3d-laad-twinkel { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes tp3d-laad-val {
  0% { opacity: 0; transform: translate(0, -6px) rotate(0); }
  10% { opacity: 1; }
  50% { transform: translate(8px, 48px) rotate(160deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-4px, 96px) rotate(320deg); }
}
@keyframes tp3d-laad-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .tp3d-laad-tuin, .tp3d-laad-tuin * { animation: none !important; }
  .tp3d-laad.is-wachten .tp3d-laad-balk span { animation: none; }
  .tp3d-laad-balk span, .tp3d-laad-tip-tekst, .tp3d-laad-tip-kop { transition: none; }
  .tp3d-laad-plant .wiebel, .tp3d-laad-vlinder .schrik { cursor: default; }
}
/* Laadscherm vervagen (2026-09-30, verbergLaadscherm() in 3d/laadscherm.js): 400 ms naar doorzichtig, daarna
   pas hidden. Het inhoudsblok zakt licht weg terwijl de tuin eronder al tekent (en de camera invliegt,
   api.js). Klikken gaat tijdens het vervagen al naar de tuin. Bij reduced motion zet de JS meteen hidden. */
.tp3d-loading.tp3d-laad-weg { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.tp3d-loading.tp3d-laad-weg.is-klaar { transition-delay: 0.25s; } /* eerst even "Klaar!" (setTimeout 650 ms in de JS) */
/* Herbouw: de eerste 400 ms onzichtbaar en doorklikbaar (laadscherm.js, is-uitgesteld). */
.tp3d-loading.is-uitgesteld { opacity: 0; pointer-events: none; }
.tp3d-loading.tp3d-laad-weg .tp3d-laad-inhoud { transform: scale(0.97); transition: transform 0.4s ease; }
/* Kleine en lage schermen (2026-10-02). De twee delen (.tp3d-laad-deel, laadscherm.js) tellen normaal niet mee
   (display: contents), zodat alles een kolom blijft. Pauze en Handig houden hun 32px-uiterlijk maar krijgen
   een raakvlak van 44px via ::after (de tip heeft genoeg padding om dat op te vangen). */
.tp3d-laad-deel { display: contents; }
.tp3d-laad-pauze, .tp3d-laad-handig { position: relative; z-index: 1; } /* boven de invloeiende tiptekst */
.tp3d-laad-pauze::after, .tp3d-laad-handig::after { content: ''; position: absolute; inset: -7px; } /* 30 + 2 x 7 = 44px */
@media (max-height: 860px) {
  .tp3d-laad-tuin { width: min(160px, 45vw); }
}
@media (max-height: 700px), (max-width: 480px) {
  .tp3d-loading { padding-top: 12px; }
  .tp3d-laad-inhoud { gap: 6px; }
  .tp3d-laad-tuin { width: min(120px, 40vw); }
  .tp3d-laad-titel { margin-top: 0; }
  .tp3d-laad-geduld, .tp3d-laad-persoonlijk, .tp3d-laad-kwaliteit, .tp3d-laad-traag { line-height: 1.35; }
  .tp3d-laad-geduld { margin-top: 0; }
  .tp3d-laad-acties { margin-top: 2px; }
  .tp3d-laad-2d-lang { display: none; }
  .tp3d-laad-tip { margin-top: 4px; min-height: 76px; padding: 10px 12px; }
  .tp3d-laad-tip-tekst { line-height: 1.4; }
  .tp3d-laad-handig { margin-top: 6px; }
  .tp3d-laad-merk { margin-top: 2px; }
  .tp3d-laad-traag { font-size: var(--tp-fs-xs); }
}
/* Laag: het tuintje nog kleiner. Laag en breed (een liggende telefoon): twee kolommen naast elkaar. */
@media (max-height: 480px) {
  .tp3d-laad-tuin { width: 96px; }
}
@media (max-height: 480px) and (min-width: 560px) {
  .tp3d-laad-inhoud { flex-direction: row; align-items: center; gap: 24px; max-width: 720px; }
  .tp3d-laad-deel { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 6px; }
  .tp3d-laad-acties { margin-top: 0; }
}
/* Werkbalk (2026-09-24): één rij onderin met alle bediening, en per groep een paneel dat daarboven
   openklapt. Vervangt de losse knoppen die op vaste top/bottom-offsets over het beeld verspreid
   stonden en elkaar op een smal scherm verdrongen. */
.tp3d-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow);
}
/* Alleen de knoppenstrip schuift; Sluiten staat ernaast en blijft altijd in beeld. */
.tp3d-bar-scroll {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tp3d-bar-scroll::-webkit-scrollbar { display: none; }
.tp3d-bar-scroll.is-meer-na { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.tp3d-bar-scroll.is-meer-voor { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.tp3d-bar-scroll.is-meer-voor.is-meer-na { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.tp3d-bar .tp-btn { flex: 0 0 auto; min-height: 44px; }
.tp3d-close { margin-left: auto; }
.tp3d-panels {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--tp3d-bar-h);
  z-index: 5;
  display: flex;
  /* De linkermarge wijst het paneel onder zijn eigen tabknop; overlay-ui.js meet die positie. */
  padding: 0 10px 8px var(--tp3d-panel-x, 10px);
  pointer-events: none; /* alleen het paneel zelf vangt klikken, de rest van het beeld blijft vrij */
}
.tp3d-panel {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: min(340px, calc(100% - 20px));
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--pine);
  font-size: 0.85rem;
}
.tp3d-panel[hidden] { display: none; }
.tp3d-panel-open .tp3d-hint { display: none; }
.tp3d-panel .tp-btn { min-height: 44px; }
.tp3d-panel-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tp3d-panel-row .tp-btn { flex: 1 1 auto; }
.tp3d-opt { display: flex; align-items: center; gap: 8px; min-height: 32px; font-weight: 600; cursor: pointer; }
.tp3d-opt[hidden], .tp3d-slider[hidden] { display: none; }
.tp3d-opt input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--green); }
.tp3d-slider { display: block; font-size: 0.8rem; color: var(--gray); }
.tp3d-slider input[type="range"] { display: block; width: 100%; margin-top: 4px; accent-color: var(--green); }
/* AR op de telefoon (3d/ar.js, 2026-09-29): paneel in de werkbalk en de bediening in beeld tijdens de sessie. */
.tp3d-arpanel p { margin: 0; }
.tp3d-arpanel [hidden] { display: none !important; }
.tp3d-ar-anker { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 2px; }
.tp3d-ar-anker legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.tp3d-ar-punt, .tp3d-ar-melding { font-size: 0.8rem; color: var(--gray); }
.tp3d-ar-link { display: flex; gap: 6px; }
.tp3d-ar-url { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.8rem; }
.tp3d-ar-hud { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; justify-content: flex-end; background: transparent; touch-action: none; }
.tp3d-ar-hud-balk { display: flex; flex-direction: column; gap: 8px; margin: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); padding: 12px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--pine); font-size: 0.9rem; }
.tp3d-ar-hud-status { margin: 0; }
.tp3d-ar-hud-draai { display: block; }
.tp3d-ar-hud-draai input { display: block; width: 100%; min-height: 32px; accent-color: var(--green); }
.tp3d-ar-hud-opties { display: flex; flex-wrap: wrap; gap: 0 16px; }
.tp3d-ar-hud-opties label { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.tp3d-ar-hud-opties input { width: 20px; height: 20px; accent-color: var(--green); }
.tp3d-ar-hud-knoppen { display: flex; gap: 8px; }
.tp3d-ar-hud-knoppen .tp-btn { flex: 1 1 0; min-height: 44px; }
.tp3d-close {
  min-height: 44px;
  min-width: 48px;
}
.tp3d-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tp3d-bar-h) + 12px);
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 14px;
  background: var(--tp-3d-hint-bg);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--pine);
  pointer-events: none;
  white-space: nowrap;
}
/* Rijen binnen de panelen: geen eigen positie meer, de werkbalk bepaalt waar ze staan. */
.tp3d-daypart, .tp3d-weather { display: flex; flex-wrap: wrap; gap: 6px; }
.tp3d-daypart .tp-btn { flex: 1 1 auto; min-height: 44px; }
.tp3d-weather .tp-btn { flex: 1 1 auto; min-height: 44px; min-width: 48px; }
.tp3d-growth { display: block; font-size: 0.8rem; font-weight: 600; color: var(--pine); }
.tp3d-growth[hidden] { display: none; }
.tp3d-growth input[type="range"] { display: block; width: 100%; margin-top: 4px; accent-color: var(--green); }
/* Sun-path per datum (uitbreiding 2026-08-26): datum + lokaal uur, verschijnt onder de dagdeelknoppen
   zodra de 5e knop ("Datum") actief is. Sinds de werkbalk hoeft daar niets meer voor te verschuiven. */
.tp3d-sundate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--pine); }
.tp3d-sundate[hidden] { display: none; }
.tp3d-sundate input[type="date"] { padding: 5px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.tp3d-sundate input[type="range"] { flex: 1 1 110px; min-width: 110px; accent-color: var(--green); }
.tp3d-sundate-hour-label { font-weight: 600; min-width: 40px; }
/* [hidden] moet winnen van de display-regels hierboven. */
.tp3d-render[hidden], .tp3d-render-panel[hidden], .tp3d-render-panel [hidden] { display: none; }
.tp3d-materials[hidden], .tp3d-matpanel[hidden] { display: none; }
/* Scènes (2026-09-29, 3d/scenes.js): lijst met bewaarde standpunten plus rondleiding. */
.tp3d-scene-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tp3d-scene-item { display: flex; align-items: center; gap: 4px; }
.tp3d-scene-item .tp3d-scene-go { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.tp3d-scene-item .tp3d-scene-naam { flex: 1 1 auto; min-width: 0; min-height: 44px; font: inherit; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; }
.tp3d-scene-item .tp-btn:not(.tp3d-scene-go) { flex: 0 0 auto; min-width: 40px; padding: 0 6px; }
.tp3d-scene-item.is-active .tp3d-scene-go { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.tp3d-scene-new { display: flex; gap: 6px; }
.tp3d-scene-new input[type="text"] { flex: 1 1 auto; min-width: 0; min-height: 44px; font: inherit; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; }
.tp3d-scene-hint { margin: 0; font-size: 0.8rem; color: var(--gray); line-height: 1.4; }
.tp3d-scene-hint[hidden], .tp3d-scene-new[hidden], .tp3d-scene-opts[hidden], .tp3d-scene-rec[hidden] { display: none; }
.tp3d-matpanel-title { margin: 0; font-weight: 700; }
.tp3d-matpanel-hint { margin: 0; font-size: 0.8rem; color: var(--gray); line-height: 1.4; }
.tp3d-matpanel select { min-height: 36px; font: inherit; }
.tp3d-matpanel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.tp3d-mat {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-height: 44px; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 6px; background: var(--white); font: inherit; font-size: 0.7rem; cursor: pointer;
}
.tp3d-mat img { width: 100%; height: 100%; object-fit: cover; }
.tp3d-mat.is-active { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.tp3d-render-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 7; /* boven de werkbalk en zijn panelen */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(880px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--pine);
}
.tp3d-render-title { margin: 0; font-size: 1rem; font-weight: 700; }
.tp3d-render-status { margin: 0; font-size: 0.86rem; color: var(--gray); line-height: 1.45; }
.tp3d-render-bar { height: 6px; border-radius: 999px; background: var(--tp-surface-3, var(--border)); overflow: hidden; }
.tp3d-render-bar span { display: block; width: 0; height: 100%; background: var(--green); transition: width 0.3s ease; }
.tp3d-render-result {
  display: block;
  max-width: 100%;
  max-height: 62vh;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.tp3d-render-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; line-height: 1.4; cursor: pointer; }
.tp3d-render-opt[hidden] { display: none; }
.tp3d-render-opt input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--green); }
.tp3d-render-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tp3d-render-actions .tp-btn { min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
  .tp3d-render-bar span { transition: none; }
}
/* Loop-knoppen (alleen zichtbaar in wandelmodus): vasthouden = lopen */
.tp3d-walkpad {
  position: absolute;
  left: 10px;
  bottom: calc(var(--tp3d-bar-h) + 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tp3d-walkpad-row { display: flex; gap: 4px; }
.tp3d-walkpad .tp-btn {
  min-width: 48px;
  min-height: 48px;
  background: var(--tp-3d-walkpad-btn-bg);
  box-shadow: var(--shadow);
  touch-action: none; /* vasthouden mag geen scroll/zoom starten */
  user-select: none;
}
/* Bewerken in 3D (bewerken.js, 2026-09-29): strook bovenin met uitleg, status en knoppen. Bovenin, want
   onderin staan de werkbalk en zijn panelen al. De gewone sleep-hint is dan niet waar. */
.tp3d-edit[hidden], .tp3d-editbar[hidden] { display: none; }
.tp3d-editing .tp3d-hint { display: none; }
.tp3d-editbar {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  width: max-content;
  max-width: calc(100% - 20px);
  padding: 8px 12px;
  background: var(--tp-3d-hint-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--pine);
  font-size: 0.82rem;
}
.tp3d-edit-hint { margin: 0; flex: 1 1 100%; text-align: center; color: var(--gray); }
.tp3d-edit-status { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.tp3d-edit-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.tp3d-edit-actions .tp-btn { min-width: 44px; min-height: 44px; justify-content: center; }
.tp3d-edit-actions .tp-btn:disabled { opacity: 0.45; }
/* "1 lid" (Alt+klik voor een vinger, 2026-09-29): alleen op een aanraakscherm; aan = merktint. */
.tp3d-edit-actions .tp3d-edit-lid, .tp3d-edit-actions .tp3d-edit-fijn { display: none; }
@media (pointer: coarse) { .tp3d-edit-actions .tp3d-edit-lid, .tp3d-edit-actions .tp3d-edit-fijn { display: inline-flex; } }
.tp3d-edit-actions .tp3d-edit-lid.tp-active, .tp3d-edit-actions .tp3d-edit-fijn.tp-active { background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-accent-ink); }
/* Hoogte in de strook (-10 cm / waarde / +10 cm) en het label naast de aanwijzer tijdens het trekken aan de greep. */
.tp3d-edit-hoogte { display: flex; align-items: center; gap: 4px; }
.tp3d-edit-hoogte[hidden] { display: none; }
.tp3d-edit-hoogte .tp-btn { min-width: 44px; min-height: 44px; justify-content: center; white-space: nowrap; }
.tp3d-edit-hoogte .tp-btn:disabled { opacity: 0.45; }
.tp3d-edit-hwaarde { min-width: 4.5em; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.tp3d-hoogte-label {
  position: absolute;
  z-index: 7;
  padding: 3px 8px;
  background: var(--tp-3d-hint-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--pine);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
}
.tp3d-hoogte-label[hidden] { display: none; }
/* Over foto (Match Photo, 2026-09-29, 3d/matchfoto.js). De foto ligt als eigen canvas achter het
   doorzichtige 3D-canvas; de camera tekent in hetzelfde stuk (viewport). */
.tp3d-matchfoto[hidden] { display: none; }
.tp3d-mf-foto { position: absolute; z-index: 0; display: block; pointer-events: none; }
.tp3d-mf-foto[hidden] { display: none; }
.tp3d-overlay.tp3d-mf-aan { background: #121614; }
.tp3d-mf-aan .tp3d-canvas { position: relative; z-index: 1; }
/* Wandelen, bewerken en de gewone foto passen niet bij een vaste camera over een foto. */
.tp3d-mf-aan .tp3d-hint,
.tp3d-mf-aan .tp3d-walk,
.tp3d-mf-aan .tp3d-walkpad,
.tp3d-mf-aan .tp3d-edit,
.tp3d-mf-aan .tp3d-editbar,
.tp3d-mf-aan .tp3d-tab-foto { display: none !important; }
.tp3d-mf-strook {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  width: max-content;
  max-width: calc(100% - 20px);
  padding: 8px 12px;
  background: var(--tp-3d-hint-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--pine);
  font-size: 0.82rem;
}
.tp3d-mf-strook[hidden], .tp3d-mf-strook [hidden] { display: none; }
.tp3d-mf-strook .tp3d-slider { min-width: 140px; }
.tp3d-mf-strook-acties { display: flex; flex-wrap: wrap; gap: 6px; }
.tp3d-mf-strook-acties .tp-btn { min-height: 44px; }
.tp3d-mf-venster {
  position: absolute;
  inset: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 8; /* boven de werkbalk, zijn panelen en het fotopaneel */
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 16px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--pine);
}
.tp3d-mf-venster[hidden] { display: none; }
/* Het venster schuift als geheel; zonder dit krimpen de kinderen en valt de status over het paneel. */
.tp3d-mf-venster > * { flex-shrink: 0; }
.tp3d-mf-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp3d-mf-kop .tp-btn { min-width: 44px; min-height: 44px; justify-content: center; }
.tp3d-mf-titel { margin: 0; font-size: 1rem; font-weight: 700; }
.tp3d-mf-stappen { margin: 0; padding-left: 1.3em; font-size: 0.84rem; line-height: 1.45; color: var(--gray); }
.tp3d-mf-status { margin: 0; min-height: 1.45em; font-size: 0.86rem; font-weight: 600; line-height: 1.45; }
.tp3d-mf-model { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.84rem; }
.tp3d-mf-panelen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tp3d-mf-paneel { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tp3d-mf-paneel-kop { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--gray); }
.tp3d-mf-doek {
  display: block;
  width: 100%;
  height: clamp(220px, 46vh, 620px);
  border-radius: var(--radius-sm);
  background: #1f2421;
  cursor: crosshair;
  touch-action: none; /* slepen en knijpen gaan naar het paneel, niet naar de pagina */
}
.tp3d-mf-doek:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.tp3d-mf-lijst { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
.tp3d-mf-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}
.tp3d-mf-rij.is-gekozen { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.tp3d-mf-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.tp3d-mf-rij-tekst { min-width: 9em; color: var(--gray); }
.tp3d-mf-hoogte { display: inline-flex; align-items: center; gap: 4px; }
.tp3d-mf-hoogte input { width: 4.5em; min-height: 32px; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.tp3d-mf-del { min-width: 40px; min-height: 40px; justify-content: center; }
.tp3d-mf-acties { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tp3d-mf-acties .tp-btn { min-height: 44px; }
.tp3d-mf-acties .tp-btn:disabled { opacity: 0.5; }
.tp3d-mf-kies { position: relative; cursor: pointer; }
.tp3d-mf-kies:focus-within { box-shadow: var(--tp-focus); }
.tp3d-mf-bestand { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
@media (max-width: 760px) {
  .tp3d-mf-venster { inset: 0; border-radius: 0; padding: 10px 12px; }
  .tp3d-mf-panelen { grid-template-columns: minmax(0, 1fr); }
  .tp3d-mf-doek { height: clamp(200px, 38vh, 420px); }
  .tp3d-mf-stappen { font-size: 0.8rem; }
  .tp3d-mf-strook { top: calc(6px + env(safe-area-inset-top, 0px)); gap: 4px 10px; padding: 6px 8px; }
}

/* ── Gevel-editor (facade-editor.js, fase 6, 2026-08-24) ────────────────────────
   Los, JS-aangemaakt overlay (zelfde patroon als .tp3d-overlay): standaard display:none, zichtbaar
   via .tp-open i.p.v. het [hidden]-attribuut van de statische .tp-modal's hierboven. */
.tp-facade-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 130; /* boven de gewone modals (100) én de 3D-weergave (120) */
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 36, 26, 0.55);
}
.tp-facade-overlay.tp-open { display: flex; }

/* ── Maten-/materialenoverzicht (measurements.js, 2026-08-24) ──────────────────
   Zelfde los-overlay-patroon als de gevel-editor hierboven: standaard display:none, zichtbaar via
   .tp-open. Eigen (bredere) kaart, want dit venster toont tabellen i.p.v. een formulier. */
.tp-meas-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 130;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 36, 26, 0.55);
}
.tp-meas-overlay.tp-open { display: flex; }
.tp-meas-card {
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.tp-meas-tabs { display: flex; gap: 8px; margin: 14px 0 10px; }
.tp-meas-tab { opacity: 0.6; }
.tp-meas-tab.tp-active { opacity: 1; background: var(--pine); color: var(--white); border-color: var(--pine); }
/* Maten-tab kreeg er 3 kolommen bij (afstand tot ander object/hart-op-hart/tuinrand) — op smalle
   schermen scrollt de tabel binnen deze wrapper i.p.v. de pagina zelf te verbreden. */
.tp-meas-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tp-meas-scroll .tp-meas-table { min-width: 640px; }
.tp-meas-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tp-meas-table td, .tp-meas-table th { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.tp-meas-table th { color: var(--gray); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; }
.tp-meas-table td:last-child, .tp-meas-table th:last-child { text-align: right; white-space: nowrap; }
.tp-meas-group-row td { font-weight: 700; color: var(--pine); background: var(--stone-light); }
.tp-meas-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* Wijzigingswaarschuwing bovenaan de Maten-tab (uitbreiding 2026-08-27): drie varianten, kleuren
   hergebruikt uit het bestaande palet i.p.v. nieuwe kleuren te verzinnen. */
.tp-meas-push-status { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; }
.tp-meas-push-status--none { background: var(--stone-light); color: var(--gray); }
.tp-meas-push-status--ok { background: rgba(31, 61, 43, 0.08); color: var(--pine); }
.tp-meas-push-status--warn { background: rgba(189, 107, 67, 0.12); color: var(--terracotta); }
/* Klik-op-rij → selecteer object op canvas (uitbreiding 2026-08-27). */
.tp-meas-row-click { cursor: pointer; }
.tp-meas-row-click:hover td { background: var(--stone-light); }
@media (max-width: 640px) {
  .tp-meas-overlay { padding: 8px; align-items: flex-end; }
  .tp-meas-card { max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; }
  .tp-meas-table { font-size: 0.82rem; }
}

/* ── Presentatie-PDF compose (presentation.js, 2026-09-07) ─────────────────────
   Fullscreen instelscherm i.p.v. meteen genereren — zelfde "bekijk eerst, dan actie"-idee als
   het offerte/factuur-compose-scherm, maar in de Tuinplanner-iframe (de PDF heeft canvas/3D/
   jsPDF nodig die hier leven). Geen card-modal: foto-grid + opties vragen om een eigen scherm.
   z-index 140: boven .tp-meas-overlay (130) en de 3D-weergave (120). */
.tp-pres-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 140;
  flex-direction: column;
  background: var(--stone-light);
}
.tp-pres-overlay.tp-open { display: flex; }
.tp-pres-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 10px 16px;
  min-height: 56px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.tp-pres-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--pine);
}
.tp-pres-head .tp-modal-x {
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
}
.tp-pres-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tp-pres-inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 24px 24px;
}
.tp-pres-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.tp-pres-section h3 {
  margin: 0 0 12px;
  font-size: 1.02rem;
  color: var(--pine);
}
.tp-pres-field {
  display: block;
  margin-bottom: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray);
}
.tp-pres-field input,
.tp-pres-field select,
.tp-pres-field textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 16px; /* ≥16px: iOS-Safari zoomt anders in bij focus */
  color: var(--black);
  background: var(--white);
}
.tp-pres-field textarea {
  min-height: 6.5em;
  line-height: 1.45;
  resize: vertical;
}
.tp-pres-field input:focus,
.tp-pres-field select:focus,
.tp-pres-field textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.tp-pres-intro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: -4px 0 0;
}
.tp-pres-intro-actions .tp-btn { min-height: 44px; }
.tp-pres-intro-actions .tp-pres-field-hint { margin: 0; flex: 1 1 180px; }
.tp-pres-field-hint {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--gray);
  line-height: 1.4;
  font-weight: 400;
}
.tp-pres-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tp-pres-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--pine);
  background: var(--white);
}
.tp-pres-choice:has(input:checked) {
  border-color: var(--green);
  background: var(--green-pale);
}
.tp-pres-choice input { width: 18px; height: 18px; flex-shrink: 0; }
.tp-pres-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--pine);
}
.tp-pres-check input { width: 18px; height: 18px; flex-shrink: 0; }
.tp-pres-photos-wrap { margin-top: 12px; }
.tp-pres-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.tp-pres-photo {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--stone-light);
}
.tp-pres-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tp-pres-photo-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.68rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.tp-pres-photo.is-selected {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green);
}
.tp-pres-photo-num {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}
.tp-pres-cover-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 14px;
}
.tp-pres-cover-preview-page {
  position: relative;
  width: 140px;
  max-width: 100%;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  background: #152119;
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.tp-pres-cover-preview-mosaic {
  position: absolute;
  inset: 0;
  display: grid;
}
.tp-pres-cover-preview-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tp-pres-cover-preview-label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d2d8d2;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  padding: 8px;
}
.tp-pres-cover-preview-band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 8px 6px;
  background: rgba(21, 33, 25, 0.72);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-pres-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 1px solid var(--border);
}
.tp-pres-status {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--gray);
}
.tp-pres-make,
.tp-pres-preview { min-height: 48px; }
@media (max-width: 640px) {
  .tp-pres-inner { padding: 14px 14px 20px; }
  .tp-pres-photos { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}
@media (max-width: 480px) {
  .tp-pres-head { padding: 8px 12px; }
  .tp-pres-photos { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
  .tp-pres-cancel,
  .tp-pres-preview,
  .tp-pres-make { flex: 1 1 100%; }
}

/* ── "Eigenschappen"-popup (props-popup.js, 2026-08-26) ────────────────────────
   Zelfde los-overlay-patroon als de gevel-editor/maten-overzicht hierboven; de tabs hergebruiken
   bewust .tp-meas-tabs/.tp-meas-tab (zie props-popup.js) voor visuele consistentie.
   Kaart is smaller dan .tp-meas-card: dit toont formuliervelden, geen brede tabellen — dichter bij
   de breedte van het zijpaneel. */
.tp-props-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 130;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 36, 26, 0.55);
}
.tp-props-popup-overlay.tp-open { display: flex; }
.tp-props-popup-card {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.tp-props-popup-title { font-size: 1rem; }
.tp-props-popup-tabs[hidden] { display: none; }
.tp-props-popup-body { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 640px) {
  .tp-props-popup-overlay { padding: 8px; align-items: flex-end; }
  .tp-props-popup-card { max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; }
}

.tp-facade-card {
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.tp-facade-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin: 12px 0; }
.tp-facade-stijl { min-width: 180px; }
.tp-facade-zijde { min-width: 200px; }
.tp-facade-zijde-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* Gebouw kan tot ~40 muren hebben (2026-09-12): dan horizontaal scrollen i.p.v. wrappen naar een
   torenhoge knoppenrij — zelfde scrollbar-width:none-conventie als .tp-chips elders. */
.tp-facade-zijde-btns-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tp-facade-zijde-btns-scroll::-webkit-scrollbar { display: none; }
.tp-facade-zijde-btn { display: inline-flex; align-items: center; }
.tp-facade-zijde-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex: none;
}
.tp-facade-muren-map {
  display: block;
  width: 120px;
  height: 90px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--stone-light);
  margin: 4px 0 6px;
  cursor: pointer;
}
.tp-facade-colors { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 220px; }
.tp-facade-main { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.tp-facade-canvas {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  touch-action: none;
  cursor: pointer;
  background: var(--stone-light);
}
.tp-facade-side { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 10px; }
.tp-facade-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-facade-list { display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow-y: auto; }
.tp-facade-list-item { text-align: left; }
.tp-facade-selected { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tp-facade-hint { margin: 0; }

@media (max-width: 640px) {
  .tp-facade-main { flex-direction: column; }
}

/* ── 3D-fotoschets-preview (tp-pencil-overlay, fase 4, 2026-08-24) — hergebruikt .tp-facade-* chrome */
.tp-pencil-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--stone-light);
  max-width: 100%;
  height: auto;
}
/* Preset-chips (uitbreiding 2026-08-24: cartoon/potlood/marker/aquarel i.p.v. één vast fotofilter) */
.tp-pencil-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.tp-pencil-preset-chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.tp-pencil-preset-chip:hover { background: var(--stone-light); }
.tp-pencil-preset-chip.tp-active { background: var(--green-pale); border-color: var(--green); font-weight: 600; }
.tp-pencil-controls { gap: 10px; }
.tp-pencil-controls input[type="range"] { display: block; width: 100%; accent-color: var(--green); }
.tp-pencil-save { margin-top: 4px; }
.tp-pencil-batch-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-pencil-batch-item { position: relative; display: block; width: 72px; height: 54px; }
.tp-pencil-batch-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.tp-pencil-batch-remove {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; min-height: 0;
  border-radius: 50%; border: 1px solid var(--border); background: var(--white);
  font-size: 0.7rem; line-height: 1; cursor: pointer; padding: 0;
}

/* Mini-bevestiging in de opname-embed (boven de 3D-overlay, z 120) */
.tp-embed-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  width: fit-content;
  margin-inline: auto;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  transform: translateY(8px);
  z-index: 130;
  padding: 10px 18px;
  background: var(--pine);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tp-embed-toast-open { opacity: 1; transform: translateY(0); }
@media (max-width: 480px) {
  .tp3d-hint { font-size: 0.74rem; max-width: calc(100% - 20px); white-space: normal; text-align: center; }
  /* De werkbalk schuift horizontaal als hij niet past; de knoppen blijven op tikformaat. */
  .tp3d-bar { gap: 4px; padding-left: 8px; padding-right: 8px; }
  /* Alleen iconen: zo passen alle knoppen zonder te schuiven. De aria-labels en titles houden
     de namen voor schermlezers en muisgebruikers. */
  .tp3d-close-txt, .tp3d-tab-txt { display: none; }
  .tp3d-bar .tp-btn { min-width: 46px; justify-content: center; }
  .tp3d-bar .tp-btn { padding: 6px 10px; font-size: 0.8rem; }
  .tp3d-panels { padding: 0 8px 6px; }
  .tp3d-panel { width: calc(100% - 16px); max-height: 56vh; }
  .tp3d-daypart .tp-btn, .tp3d-weather .tp-btn { min-height: 40px; padding: 6px 8px; font-size: 0.8rem; }
  /* De hint wrapt op smal scherm naar meerdere regels, dus de loopknoppen iets hoger. */
  .tp3d-walkpad { bottom: calc(var(--tp3d-bar-h) + 42px); }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   Refresh 2026-09-09: nieuwe modules (Lagen-tab, command palette, toasts, kaartobjecten in het
   "Slim starten"-paneel) en de laatste thema-correcties voor hardcoded kleuren hierboven.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Lagen-tab (objectenlijst) ───────────────────────────────────────────────────────────── */
.tp-layers-list { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.tp-layers-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 3px 4px 3px 8px;
  border-radius: var(--tp-radius-xs);
  cursor: pointer;
  color: var(--tp-text);
  font-size: var(--tp-fs-sm);
  user-select: none;
}
.tp-layers-row:hover { background: var(--tp-surface-2); }
.tp-layers-row[aria-selected="true"] { background: var(--tp-accent-soft); }
.tp-layers-row.is-hidden { opacity: 0.5; }
.tp-layers-row .tp-layers-ico { flex: none; display: inline-flex; color: var(--tp-text-2); }
.tp-layers-row .tp-layers-ico .tp-ico { width: 16px; height: 16px; }
.tp-layers-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-layers-qty { flex: none; font-size: var(--tp-fs-xs); color: var(--tp-text-3); font-variant-numeric: tabular-nums; }
.tp-layers-row .tp-icon-btn { width: 26px; height: 26px; opacity: 0.5; }
.tp-layers-row .tp-icon-btn .tp-ico { width: 14px; height: 14px; }
.tp-layers-row:hover .tp-icon-btn, .tp-layers-row .tp-icon-btn[aria-pressed="true"] { opacity: 1; }
.tp-layers-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--tp-border); font-size: var(--tp-fs-xs); color: var(--tp-text-3); }
.tp-layers-empty { padding: 16px 6px; color: var(--tp-text-3); font-size: var(--tp-fs-sm); text-align: center; }
/* ── Lagen met een naam (2026-09-29, #tp-lagen-tags boven de objectenlijst) ──────────────────── */
.tp-tags { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--tp-border); }
.tp-tags-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tp-tags-title { font-weight: 600; font-size: var(--tp-fs-sm); }
.tp-tags-intro { margin: 0 0 8px; color: var(--tp-text-3); font-size: var(--tp-fs-xs); line-height: 1.45; }
.tp-tags-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tp-tags-actions .tp-btn { flex: 0 1 auto; }
.tp-tags-list { display: flex; flex-direction: column; gap: 2px; }
.tp-tag-row { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 4px; border-radius: 6px; }
.tp-tag-row:hover { background: var(--tp-surface-2); }
.tp-tag-row.is-hidden .tp-tag-naam, .tp-tag-row.is-hidden .tp-tag-kleur { opacity: 0.5; }
.tp-tag-radio { flex: none; width: 16px; height: 16px; margin: 0; }
.tp-tag-kleur, .tp-tag-kleur-leeg { flex: none; width: 22px; height: 22px; padding: 0; border: 1px solid var(--tp-border); border-radius: 4px; background: none; cursor: pointer; }
.tp-tag-kleur-leeg { border-style: dashed; cursor: default; }
.tp-tag-naam { flex: 1 1 auto; min-width: 0; width: 100%; padding: 3px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: var(--tp-fs-sm); }
.tp-tag-naam:hover { border-color: var(--tp-border); }
.tp-tag-naam:focus { border-color: var(--tp-accent-hover); background: var(--tp-surface); outline: none; }
.tp-tag-label { flex: 1 1 auto; min-width: 0; padding: 3px 7px; font-size: var(--tp-fs-sm); color: var(--tp-text-2); }
.tp-tag-row .tp-icon-btn { flex: none; width: 26px; height: 26px; }
.tp-tag-row .tp-icon-btn .tp-ico { width: 14px; height: 14px; }
.tp-tag-row .tp-icon-btn[aria-pressed="true"] { color: var(--tp-accent-hover); }
/* Componenten (2026-09-29, app/componenten.js): lijst in de Lagen-tab en de balk tijdens bewerken. */
.tp-comp-qty { flex: none; min-width: 32px; padding: 2px 6px; border: 1px solid transparent; border-radius: 4px; background: none; color: inherit; font: inherit; cursor: pointer; }
.tp-comp-qty:hover:not(:disabled) { border-color: var(--tp-border); }
.tp-comp-qty:disabled { cursor: default; opacity: 0.6; }
.tp-tag-row .tp-icon-btn:disabled { opacity: 0.4; cursor: default; }
.tp-comp-bewerk { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 6px 8px 6px 14px; border: 1px solid var(--tp-accent); border-radius: 8px; background: var(--tp-surface); color: var(--tp-text); box-shadow: var(--tp-shadow-2); font-size: var(--tp-fs-sm); }
.tp-comp-bewerk[hidden] { display: none; }
.tp-comp-bewerk span { min-width: 0; }
@media (max-width: 600px) {
  /* Onderaan, boven de gereedschapsbalk: bovenin staan de zoombalk en de draai-je-telefoon-tip. */
  .tp-comp-bewerk { top: auto; bottom: 72px; left: 8px; right: 8px; transform: none; max-width: none; padding: 6px 6px 6px 10px; font-size: var(--tp-fs-xs); }
}
.tp-layers-ico { position: relative; }
.tp-layers-laagstip { position: absolute; left: -5px; top: -3px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1px var(--tp-surface); }

/* ── Command palette (Ctrl+K, palette.js) ───────────────────────────────────── */
.tp-palette-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 16px;
  background: var(--tp-overlay);
}
.tp-palette-overlay.tp-open { display: flex; }
.tp-palette {
  width: 100%;
  max-width: 560px;
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow-2);
  overflow: hidden;
}
.tp-palette-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: none;
  border-bottom: 1px solid var(--tp-border);
  background: transparent;
  color: var(--tp-text);
  font: inherit;
  font-size: 15px;
}
.tp-palette-input:focus { box-shadow: none; }
.tp-palette-list { max-height: min(50vh, 420px); overflow-y: auto; padding: 6px; }
.tp-palette-group { padding: 8px 10px 2px; font-size: var(--tp-fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tp-text-3); }
.tp-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: none;
  border-radius: var(--tp-radius-xs);
  background: none;
  color: var(--tp-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tp-palette-item .tp-ico { color: var(--tp-text-2); }
.tp-palette-item.is-active, .tp-palette-item:hover { background: var(--tp-accent-soft); }
.tp-palette-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-palette-item-hint { font-size: var(--tp-fs-xs); color: var(--tp-text-3); }
.tp-palette-empty { padding: 18px; text-align: center; color: var(--tp-text-3); font-size: var(--tp-fs-sm); }
.tp-palette-foot { display: flex; gap: 14px; padding: 6px 12px; border-top: 1px solid var(--tp-border); font-size: var(--tp-fs-xs); color: var(--tp-text-3); }

/* ── Toast (publiek en embed; .tp-embed-toast blijft als alias werken) ──────────────────── */
.tp-toast {
  position: fixed;
  /* Gecentreerd met left/right en margin: auto (2026-10-07), niet met left: 50% en translateX(-50%): dan kreeg de
     melding maar de halve schermbreedte en besloeg een zin op een telefoon vier regels. */
  left: 16px;
  right: 16px;
  width: fit-content;
  max-width: min(calc(100vw - 32px), 560px);
  margin-inline: auto;
  bottom: calc(var(--tp-status-h) + 16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(8px);
  z-index: 130;
  padding: 9px 16px;
  background: var(--tp-text);
  color: var(--tp-surface);
  border-radius: 999px;
  font-size: var(--tp-fs-sm);
  box-shadow: var(--tp-shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tp-toast.tp-open, .tp-toast.tp-embed-toast-open { opacity: 1; transform: translateY(0); }
/* Telefoon: boven de gereedschapsbalk en de onderbalk, niet eroverheen. */
@media (max-width: 768px) {
  .tp-toast { bottom: calc(var(--tp-mobilebar-h) + var(--tp-ctrl-h) + 30px + env(safe-area-inset-bottom, 0px)); border-radius: var(--tp-radius); }
}
html[data-theme="dark"] .tp-toast { background: var(--tp-surface-3); color: var(--tp-text); border: 1px solid var(--tp-border-strong); }
/* Foutmelding (tpToastFout in app/melding.js): rood, staat langer. Ook in het donkere thema rood, want
   een fout hoort er in beide thema's als fout uit te zien. */
.tp-toast.tp-toast-fout, html[data-theme="dark"] .tp-toast.tp-toast-fout { background: var(--tp-danger); color: #fff; border-color: var(--tp-danger); }
/* Toast met actieknop (tpToast(..., { actie }) in app/melding.js): klikbaar zolang hij open is. */
.tp-toast.tp-toast-actie { display: flex; align-items: center; gap: 12px; }
.tp-toast.tp-toast-actie.tp-embed-toast-open { pointer-events: auto; }
.tp-toast-tekst { min-width: 0; }
.tp-toast-knop {
  flex: none; font: inherit; font-weight: 700; color: inherit; background: transparent;
  border: 1px solid currentColor; border-radius: 999px; padding: 4px 12px; min-height: 30px; cursor: pointer;
}
.tp-toast-knop:hover { background: rgba(127, 127, 127, 0.18); }
.tp-toast-knop:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (pointer: coarse) { .tp-toast-knop { min-height: 44px; } }

/* De tweede keuze naast de hoofdroute (2026-09-25): zichtbaar, maar duidelijk minder nadrukkelijk
   dan de primaire knop ernaast. Geen tp-btn-accent, want twee accentkleuren naast elkaar maken de
   keuze juist onduidelijker. */
.tp-btn-tweedelijns { background: none; border-color: transparent; color: var(--tp-text-2); font-weight: 500; }
.tp-btn-tweedelijns:hover { background: var(--tp-surface-2); color: var(--tp-text); border-color: var(--tp-border); }

/* ── Hoeveelheden (app/materialen.js): kleine tabel in een modal ───────────────────────────── */
.tp-hoeveelheden { width: 100%; border-collapse: collapse; font-size: var(--tp-fs-sm); margin: 6px 0 4px; }
.tp-hoeveelheden th, .tp-hoeveelheden td { padding: 6px 8px; border-bottom: 1px solid var(--tp-border); text-align: left; }
.tp-hoeveelheden th { font-weight: 600; color: var(--tp-text-2); font-size: var(--tp-fs-xs); text-transform: uppercase; letter-spacing: .03em; }
.tp-hoeveelheden td:nth-child(2), .tp-hoeveelheden th:nth-child(2), .tp-hoeveelheden td:nth-child(3), .tp-hoeveelheden th:nth-child(3) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Grondverzet (2026-09-29, app/grondverzet-venster.js): zelfde tabel als Hoeveelheden, zes kolommen. */
.tp-modal-card--grondverzet { max-width: 640px; }
.tp-grondverzet-scroll { overflow-x: auto; max-width: 100%; }
.tp-grondverzet td:nth-child(n+2), .tp-grondverzet th:nth-child(n+2) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-grondverzet-totaal td { font-weight: 700; border-bottom: none; }
.tp-grondverzet-saldo { margin: 6px 0; font-weight: 600; }
.tp-grondverzet-opties { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin: 8px 0; }
.tp-grondverzet-opties .tp-field { max-width: 180px; }
.tp-grondverzet-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--tp-fs-sm); min-height: var(--tp-ctrl-h); }
/* Lichtplan (2026-09-29, app/lichtplan-venster.js): hergebruikt de grondverzet-opmaak; twee tabellen. */
.tp-lichtplan-kop { margin: 10px 0 2px; font-size: var(--tp-fs-sm); font-weight: 700; }
.tp-lichtplan-tabel td:nth-child(n+2), .tp-lichtplan-tabel th:nth-child(n+2) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-lichtplan-trafo { min-height: 32px; max-width: 12em; font: inherit; color: var(--tp-text); background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 6px; }
.tp-lichtplan-te-zwaar td { color: var(--tp-danger); font-weight: 600; }
.tp-lichtplan-krap td:nth-child(3) { color: var(--tp-danger); }
.tp-lichtplan-let-op { margin: 8px 0; padding-left: 18px; color: var(--tp-danger); font-size: var(--tp-fs-sm); }
.tp-lichtplan-let-op li { margin: 2px 0; }
/* Beregeningsplan (2026-09-29, app/beregening-venster.js): hergebruikt de grondverzet-opmaak. */
.tp-beregening-tabel td:nth-child(n+2), .tp-beregening-tabel th:nth-child(n+2) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-beregening-stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.tp-beregening-teveel td { color: var(--tp-danger); font-weight: 600; }
.tp-beregening-dekking { margin: 6px 0; font-weight: 600; }
.tp-beregening-waarschuwing { margin: 6px 0; color: var(--tp-danger); }
.tp-beregening-debiet { margin: 4px 0 8px; }
.tp-beregening-debiet summary { cursor: pointer; font-size: var(--tp-fs-sm); min-height: var(--tp-ctrl-h); display: flex; align-items: center; }
.tp-beregening-debiet .tp-field { max-width: 180px; }
/* Sproeiers voorstellen (2026-09-29, app/beregening-venster.js): zwevende balk met Toepassen/Annuleren
   terwijl het voorstel als overlay op het tekenvlak staat. Geen modal: de tekening moet zichtbaar blijven. */
.tp-ber-voorstel {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 76;
  width: min(420px, calc(100vw - 16px)); min-width: 0;
  background: var(--tp-surface); color: var(--tp-text);
  border: 1px solid var(--tp-border); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow-2);
  padding: 10px 12px;
}
.tp-ber-voorstel[hidden] { display: none; }
.tp-ber-voorstel h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.tp-ber-voorstel p { margin: 4px 0; font-size: var(--tp-fs-sm, 0.85rem); overflow-wrap: anywhere; }
.tp-ber-voorstel-acties { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.tp-ber-voorstel-acties .tp-btn { max-width: 100%; }
@media (max-width: 768px) {
  .tp-ber-voorstel { left: 4px; right: 4px; width: auto; transform: none; bottom: calc(var(--tp-mobilebar-h) + 4px + env(safe-area-inset-bottom, 0px)); padding: 8px; }
}
/* Lichtplan-keten (2026-09-29): per voeding een kopregel, kabels ingesprongen naar hun niveau. */
.tp-lichtplan-voeding { margin: 10px 0 2px; font-size: var(--tp-fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.tp-lichtplan-voeding--fout { color: var(--tp-danger); }
.tp-lichtplan-kabelnaam { display: inline-block; white-space: nowrap; }
.tp-lichtplan-val-hoog td:nth-child(4) { color: var(--tp-danger); font-weight: 600; }
/* Beplantingsplan (2026-09-29, app/beplantingsplan-venster.js): acht kolommen, scrolt horizontaal in
   zijn eigen vak (op 320 px nooit de pagina). Invoervelden voor dichtheid en opmerking in de cel. */
.tp-modal-card--beplanting { max-width: 900px; }
.tp-beplanting-samenvatting { margin: 6px 0; font-weight: 600; }
.tp-beplanting-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.tp-beplanting { min-width: 760px; }
.tp-beplanting td { vertical-align: middle; }
.tp-beplanting td:nth-child(3), .tp-beplanting th:nth-child(3), .tp-beplanting td:nth-child(4), .tp-beplanting th:nth-child(4) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-beplanting td:nth-child(2), .tp-beplanting th:nth-child(2) { text-align: left; white-space: normal; }
.tp-beplanting-groep td { background: var(--tp-surface-2); font-weight: 700; font-size: var(--tp-fs-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--tp-text-2); }
.tp-beplanting-code { font-weight: 700; white-space: nowrap; }
.tp-beplanting-naam span { display: block; }
.tp-beplanting-naam em { display: block; font-size: var(--tp-fs-xs); color: var(--tp-text-2); }
.tp-beplanting-invoer { width: 5.5em; min-height: 32px; padding: 4px 6px; font: inherit; color: var(--tp-text); background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 6px; }
.tp-beplanting-opm { width: 100%; min-width: 9em; }
/* Bloeikalender (2026-09-29, app/bloei-venster.js): een kolom plantnaam plus twaalf maanden. Per cel een
   bloeibalk (bloeikleur) en daaronder een bladstrook. Scrolt horizontaal in zijn eigen vak, nooit de pagina.
   Kleuren komen uit de Plant Engine als inline background (gevalideerde #rrggbb). */
.tp-modal-card--bloei { max-width: 900px; }
.tp-bloei-melding { margin: 6px 0; font-weight: 600; }
.tp-bloei-melding:empty { display: none; }
.tp-bloei-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.tp-bloei { width: 100%; min-width: 620px; border-collapse: collapse; table-layout: fixed; font-size: var(--tp-fs-sm); }
.tp-bloei th, .tp-bloei td { padding: 3px 2px; text-align: center; border-bottom: 1px solid var(--tp-border); }
.tp-bloei th:first-child, .tp-bloei td:first-child { width: 11.5em; text-align: left; padding-right: 8px; }
.tp-bloei thead th { font-size: var(--tp-fs-xs); font-weight: 700; color: var(--tp-text-2); }
.tp-bloei thead th.tp-bloei-nu { color: var(--tp-text); text-decoration: underline; }
.tp-bloei-naam span { display: block; overflow-wrap: anywhere; }
.tp-bloei-naam em { display: block; font-size: var(--tp-fs-xs); color: var(--tp-text-2); overflow-wrap: anywhere; }
.tp-bloei-b { display: block; height: 16px; border-radius: 3px; background: transparent; border: 1px dashed transparent; }
.tp-bloei-b.is-onbekend { border-color: var(--tp-border); }
.tp-bloei-b.is-bloei { border: 1px solid rgba(0, 0, 0, 0.18); }
.tp-bloei-l { display: block; height: 5px; margin-top: 3px; border-radius: 2px; background: var(--tp-surface-2); }
.tp-bloei-totaal td { font-weight: 700; border-top: 2px solid var(--tp-text-2); vertical-align: top; }
.tp-bloei-tel { display: block; font-variant-numeric: tabular-nums; }
.tp-bloei-tel.is-nul { color: #b3261e; }
.tp-bloei-stippen { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
.tp-bloei-stip { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.25); }
.tp-bloei-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: var(--tp-fs-xs); color: var(--tp-text-2); }
.tp-bloei-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.tp-bloei-legenda i { display: inline-block; width: 16px; height: 5px; border-radius: 2px; }
.tp-bloei-leeg { margin: 10px 0; }
.tp-bloei-pdfopt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-right: auto; }

/* Moestuinplanner (2026-10-01, app/moestuin-venster.js): de sectie Moestuin in het eigenschappenpaneel en de
   kalender in #tp-modal-moestuin (die leunt op de tabel van de bloeikalender hierboven). */
.tp-teelt-rij { margin: 6px 0; padding: 6px 8px; border: 1px solid var(--tp-border); border-radius: 8px; background: var(--tp-surface-2); }
.tp-teelt-rijkop { font-size: var(--tp-fs-xs); font-weight: 700; color: var(--tp-text-2); margin-bottom: 4px; }
.tp-teelt-teelt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; align-items: center; margin-top: 4px; }
.tp-teelt-teelt select { min-width: 0; }
/* Zelfde maat en opmaak als .tp-field select: deze keuzelijsten staan niet in een .tp-field. */
.tp-teelt-rij select {
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-xs);
  font: inherit;
  font-size: var(--tp-fs-sm);
  color: var(--tp-text);
  background: var(--tp-surface);
}
.tp-teelt-rij select:hover { border-color: var(--tp-border-strong); }
.tp-teelt-periode { font-size: var(--tp-fs-xs); margin: 2px 0 0 2px; }
/* Hoe diep en hoe ver uit elkaar (tpTeeltMaten()): label links, waarde rechts; lange waarden breken af. */
.tp-teelt-maten {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 1px 8px;
  margin: 4px 0 0 2px;
  font-size: var(--tp-fs-xs);
  line-height: 1.4;
}
.tp-teelt-maten dt { color: var(--tp-text-2); }
.tp-teelt-maten dd { margin: 0; color: var(--tp-text); overflow-wrap: anywhere; }
/* Ingeklapt tot een regel (UX-ronde 2026-10-07): de samenvatting met diepte en afstand, het lijstje een tik verder. */
.tp-teelt-maten-blok { margin: 4px 0 0 2px; }
.tp-teelt-maten-blok > summary { cursor: pointer; list-style: none; font-size: var(--tp-fs-xs); color: var(--tp-text-2);
  text-decoration: underline dotted; text-underline-offset: 2px; overflow-wrap: anywhere; }
.tp-teelt-maten-blok > summary::-webkit-details-marker { display: none; }
.tp-teelt-maten-blok > .tp-teelt-maten { margin-left: 0; }
@media (pointer: coarse) {
  .tp-teelt-maten-blok > summary { min-height: 44px; display: flex; align-items: center; }
}
/* Rij als <details> (ingeklapt bij meer dan vier rijen): de kop is de samenvatting. */
details.tp-teelt-rij > summary { cursor: pointer; list-style: none; margin-bottom: 0; overflow-wrap: anywhere; }
details.tp-teelt-rij > summary::-webkit-details-marker { display: none; }
details.tp-teelt-rij > summary::before { content: '\25B8'; display: inline-block; width: 1em; transition: transform 0.15s; }
details.tp-teelt-rij[open] > summary::before { transform: rotate(90deg); }
details.tp-teelt-rij[open] > summary { margin-bottom: 4px; }
/* Eigen periode per teelt: de periodetekst klapt twee maandkeuzes open. */
.tp-teelt-eigen > summary { cursor: pointer; list-style: none; text-decoration: underline dotted; text-underline-offset: 2px; }
.tp-teelt-eigen > summary::-webkit-details-marker { display: none; }
.tp-teelt-maanden { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0; }
.tp-teelt-maanden select { flex: 1 1 7em; min-width: 0; }
/* In pollen of in de rij (2026-10-02, teelt.andere): label en keuzelijst op een regel, de lijst rekt mee. */
.tp-teelt-wijze { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0 2px; font-size: var(--tp-fs-xs); }
.tp-teelt-wijze select { flex: 1 1 10em; min-width: 0; }
@media (pointer: coarse) {
  details.tp-teelt-rij > summary, .tp-teelt-eigen > summary { min-height: 44px; display: flex; align-items: center; }
}
.tp-teelt-acties { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tp-teelt-acties select { flex: 1 1 10em; min-width: 0; }
.tp-teelt-vakken { display: grid; gap: 2px; margin: 6px 0; max-width: 100%; }
.tp-teelt-vak { aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid var(--tp-border); border-radius: 3px;
  background: #7a5a3e; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer; overflow: hidden; }
.tp-teelt-vak:focus-visible { outline: 2px solid var(--tp-accent, #2f6f4f); outline-offset: 1px; }
.tp-teelt-vakken { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
/* Schildermodus op touch (schakelaar onder het raster): slepen vult vakken in plaats van het paneel te scrollen. */
.tp-teelt-vakken.is-schilderen { touch-action: none; outline: 2px dashed var(--tp-accent); outline-offset: 2px; }
/* "In oktober 2026": wat er deze maand te doen is, boven de kalender in #tp-modal-moestuin. */
.tp-teelt-doen { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--tp-border); border-radius: 8px; background: var(--tp-surface-2); }
.tp-teelt-doen p { margin: 2px 0; font-size: var(--tp-fs-sm); }
/* Kwast van het vakkenraster: een chip per gewas in het bed plus de gum (aria-pressed = gekozen). */
.tp-teelt-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.tp-teelt-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; max-width: 100%; padding: 0 10px;
  border: 1px solid var(--tp-border); border-radius: 999px; background: var(--tp-surface); color: var(--tp-text);
  font: inherit; font-size: var(--tp-fs-sm); line-height: 1.2; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.tp-teelt-chip:hover { border-color: var(--tp-border-strong); }
.tp-teelt-chip[aria-pressed="true"] { border-color: var(--tp-accent); box-shadow: inset 0 0 0 1px var(--tp-accent); font-weight: 700; }
.tp-teelt-chip:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 1px; }
/* Knoppen van het moestuinpaneel dragen een gewasnaam ("Lege vakken vullen met ..."): afbreken, niet uitsteken. */
.tp-teelt-knop { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.25; padding-top: 4px; padding-bottom: 4px; }
/* Jaarkiezer in de kop van #tp-modal-moestuin. */
.tp-teelt-jaar { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.tp-teelt-jaar strong { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }
.tp-teelt-samen { list-style: none; margin: 8px 0 4px; padding: 0; font-size: var(--tp-fs-sm); }
.tp-teelt-samen li { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.tp-teelt-stip { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.25); }
.tp-teelt-let { margin: 4px 0; font-size: var(--tp-fs-sm); font-weight: 600; color: #8a4b00; }
html[data-theme="dark"] .tp-teelt-let { color: #f0b35a; }
.tp-teelt-kal .tp-bloei-l { height: 8px; }
.tp-teelt-aantal { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: var(--tp-fs-sm); }
.tp-teelt-aantal th, .tp-teelt-aantal td { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--tp-border); }
.tp-teelt-aantal td + td, .tp-teelt-aantal th + th { text-align: right; font-variant-numeric: tabular-nums; }
/* Tabbladen in #tp-modal-moestuin: Kalender, Wisselteelt, Buren, Oogst, Boodschappen. Scrollen i.p.v. afbreken op smal. */
.tp-teelt-tabs { display: flex; gap: 4px; margin: 4px 0 10px; border-bottom: 1px solid var(--tp-border); overflow-x: auto; scrollbar-width: none; }
.tp-teelt-tabs::-webkit-scrollbar { display: none; }
/* Meer tabbladen dan er passen (smal scherm): een vervaagde rand aan de kant waar er nog meer zijn. */
.tp-teelt-tabs.is-meer-rechts { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.tp-teelt-tabs.is-meer-links { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
.tp-teelt-tabs.is-meer-links.is-meer-rechts { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.tp-teelt-tab { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-bottom: 3px solid transparent; background: none;
  font: inherit; font-size: var(--tp-fs-sm); font-weight: 600; color: var(--tp-text-2); cursor: pointer; white-space: nowrap; }
.tp-teelt-tab:hover { color: var(--tp-text); }
.tp-teelt-tab.is-actief { color: var(--tp-text); border-bottom-color: var(--tp-accent); }
.tp-teelt-tab:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: -2px; }
/* Werkbalk boven de tabbladen (2026-10-02): teeltjaar links, PDF en agenda rechts; op smal onder elkaar. */
.tp-teelt-intro { margin: 0 0 8px; }
.tp-teelt-werkbalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 4px; }
.tp-teelt-werkbalk .tp-teelt-jaar { margin: 0; }
.tp-teelt-werkbalk-acties { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-teelt-werkbalk-acties .tp-teelt-knop { white-space: nowrap; }
.tp-teelt-uitleg { margin: 0 0 10px; font-size: var(--tp-fs-sm); }
/* Tabblad Dagboek (2026-10-02, app/moestuin-dagboek-ui.js): invoerkaart en het logboek per bed en per maand.
   De soortkleuren zijn de vaste kalenderkleuren (KLEUR in moestuin-venster.js). */
.tp-dagboek-samen { margin: 0 0 10px; font-size: var(--tp-fs-sm); font-weight: 600; color: var(--tp-text); font-variant-numeric: tabular-nums; }
.tp-dagboek-invoer { margin: 0 0 14px; padding: 12px; border: 1px solid var(--tp-border); border-radius: 10px; background: var(--tp-surface-2); }
.tp-dagboek-kop { margin: 0 0 8px; font-weight: 700; font-size: var(--tp-fs-sm); color: var(--tp-text); }
.tp-dagboek-soorten { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tp-dagboek-soortknop { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--tp-border);
  border-radius: 999px; background: var(--tp-surface); color: var(--tp-text); font: inherit; font-size: var(--tp-fs-sm); cursor: pointer; }
.tp-dagboek-soortknop::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #9a9a8c; }
.tp-dagboek-soortknop.is-zaai::before, .tp-dagboek-regel.is-zaai .tp-dagboek-stip { background: #4f86c6; }
.tp-dagboek-soortknop.is-plant::before, .tp-dagboek-regel.is-plant .tp-dagboek-stip { background: #6aa84f; }
.tp-dagboek-soortknop.is-oogst::before, .tp-dagboek-regel.is-oogst .tp-dagboek-stip { background: #e0a13a; }
.tp-dagboek-soortknop:hover { border-color: var(--tp-border-strong); }
.tp-dagboek-soortknop.is-actief { border-color: var(--tp-accent); box-shadow: inset 0 0 0 1px var(--tp-accent); font-weight: 700; }
.tp-dagboek-soortknop:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 1px; }
.tp-dagboek-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.tp-dagboek-veld { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: var(--tp-fs-xs); font-weight: 600; color: var(--tp-text-2); }
.tp-dagboek-veld[hidden] { display: none; }
.tp-dagboek-veld.is-breed { grid-column: span 2; }
.tp-dagboek-veld.is-vol { grid-column: 1 / -1; }
/* Wanneer wat: per gewas gezaaid, geplant en geoogst, inklapbaar boven het logboek. */
.tp-dagboek-wanneer { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--tp-border); border-radius: 10px; background: var(--tp-surface); }
.tp-dagboek-wanneer > summary { cursor: pointer; font-weight: 700; font-size: var(--tp-fs-sm); color: var(--tp-text); min-height: 28px; display: flex; align-items: center; }
.tp-dagboek-wanneer-tabel { margin-top: 6px; min-width: 420px; }
.tp-teelt-aantal.tp-dagboek-wanneer-tabel td, .tp-teelt-aantal.tp-dagboek-wanneer-tabel th { text-align: left; vertical-align: top; }
.tp-dagboek-veld input, .tp-dagboek-veld select { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-xs); font: inherit; font-size: var(--tp-fs-sm); font-weight: 400; color: var(--tp-text); background: var(--tp-surface); box-sizing: border-box; }
.tp-dagboek-veld input:hover, .tp-dagboek-veld select:hover { border-color: var(--tp-border-strong); }
/* Zonder Aantal (bij een notitie) neemt de notitie de hele regel. */
.tp-dagboek-veld[hidden] + .tp-dagboek-veld.is-breed { grid-column: 1 / -1; }
.tp-dagboek-voet { display: flex; justify-content: flex-end; margin-top: 10px; }
.tp-dagboek-bed { margin: 0 0 12px; padding: 8px 12px 10px; border: 1px solid var(--tp-border); border-radius: 10px; background: var(--tp-surface); }
.tp-dagboek-bedkop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--tp-border); }
.tp-dagboek-bedkop .tp-muted { font-size: var(--tp-fs-xs); }
.tp-dagboek-maand { margin: 8px 0 2px; font-size: var(--tp-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tp-text-2); }
.tp-teelt-samen.tp-dagboek-lijst { margin: 0; }
.tp-teelt-samen .tp-dagboek-regel { display: grid; grid-template-columns: 10px 6.5em minmax(0, 1fr) auto; align-items: start; gap: 2px 10px; margin: 0; padding: 5px 0; border-bottom: 1px dashed var(--tp-border); }
.tp-teelt-samen .tp-dagboek-regel:last-child { border-bottom: 0; }
.tp-dagboek-stip { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #9a9a8c; }
.tp-dagboek-datum { color: var(--tp-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-dagboek-inhoud { min-width: 0; overflow-wrap: anywhere; }
.tp-dagboek-soort { margin-left: 6px; color: var(--tp-text-2); }
.tp-dagboek-notitie { display: block; font-style: italic; color: var(--tp-text-2); }
.tp-dagboek-acties { display: inline-flex; gap: 4px; opacity: 0.55; transition: opacity 0.15s; }
.tp-dagboek-regel:hover .tp-dagboek-acties, .tp-dagboek-acties:focus-within { opacity: 1; }
.tp-dagboek-acties .tp-teelt-knop { min-height: 26px; padding: 0 8px; font-size: var(--tp-fs-xs); }
.tp-teelt-samen .tp-dagboek-regel.is-bewerken { background: var(--tp-surface-2); box-shadow: inset 3px 0 0 var(--tp-accent); padding-left: 6px; }
/* Datum: snel vandaag of gisteren, onder het datumveld. */
.tp-dagboek-snel { display: flex; gap: 4px; margin-top: 2px; }
.tp-dagboek-chip { min-height: 26px; padding: 0 10px; border: 1px solid var(--tp-border); border-radius: 999px; background: var(--tp-surface);
  color: var(--tp-text-2); font: inherit; font-size: var(--tp-fs-xs); font-weight: 600; cursor: pointer; }
.tp-dagboek-chip:hover { border-color: var(--tp-border-strong); color: var(--tp-text); }
.tp-dagboek-chip.is-actief { border-color: var(--tp-accent); color: var(--tp-text); }
.tp-dagboek-chip:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 1px; }
.tp-dagboek-invoer.is-bewerken { border-color: var(--tp-accent); box-shadow: inset 0 0 0 1px var(--tp-accent); }
.tp-dagboek-voet { gap: 6px; }
.tp-dagboek-leeg { padding: 14px; border: 1px dashed var(--tp-border-strong); border-radius: 10px; text-align: center; font-size: var(--tp-fs-sm); color: var(--tp-text-2); }
.tp-dagboek-leeg p { margin: 4px 0 0; }
@media (max-width: 600px) {
  .tp-teelt-werkbalk-acties { width: 100%; }
  .tp-teelt-werkbalk-acties .tp-teelt-knop { flex: 1 1 auto; justify-content: center; }
  .tp-dagboek-velden { grid-template-columns: minmax(0, 1fr); }
  .tp-dagboek-veld.is-breed { grid-column: auto; }
  .tp-dagboek-voet .tp-teelt-knop { width: 100%; justify-content: center; text-align: center; }
  .tp-teelt-samen .tp-dagboek-regel { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .tp-dagboek-datum { grid-column: 2; }
  .tp-dagboek-inhoud { grid-column: 2; }
  .tp-dagboek-acties { grid-column: 2 / -1; grid-row: 3; opacity: 1; }
}
@media (pointer: coarse) {
  .tp-dagboek-soortknop { min-height: 44px; }
  .tp-dagboek-veld input, .tp-dagboek-veld select { height: 44px; }
  .tp-dagboek-acties { opacity: 1; }
  .tp-dagboek-acties .tp-teelt-knop { min-height: 44px; min-width: 44px; }
  .tp-dagboek-chip { min-height: 44px; }
}
/* Oogst in beeld (2026-10-02, oogstInBeeld() in moestuin-venster.js): schatting grijs, echt geoogst oker (de vaste
   oogstkleur van de kalender), elk met zijn getal; daaronder de kilo's per maand. */
.tp-oogst-beeld { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--tp-border); border-radius: 10px; background: var(--tp-surface); }
.tp-oogst-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 6px; font-size: var(--tp-fs-sm); }
.tp-oogst-balken + .tp-oogst-kop { margin-top: 12px; }
.tp-oogst-legenda { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--tp-fs-xs); color: var(--tp-text-2); }
.tp-oogst-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.tp-oogst-legenda i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.tp-oogst-legenda i.is-schatting, .tp-oogst-schatting { background: #d9dcd6; }
.tp-oogst-legenda i.is-echt, .tp-oogst-echt, .tp-oogst-staaf { background: #e0a13a; }
.tp-oogst-balken { list-style: none; margin: 0; padding: 0; }
.tp-oogst-balken li { display: grid; grid-template-columns: minmax(6em, 9em) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 3px 0; font-size: var(--tp-fs-sm); }
.tp-oogst-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-oogst-spoor { position: relative; height: 14px; }
.tp-oogst-schatting { position: absolute; left: 0; top: 0; height: 14px; border-radius: 0 4px 4px 0; }
.tp-oogst-echt { position: absolute; left: 0; top: 3px; height: 8px; border-radius: 0 4px 4px 0; box-shadow: 0 0 0 2px var(--tp-surface); }
.tp-oogst-waarde { font-variant-numeric: tabular-nums; color: var(--tp-text-2); white-space: nowrap; }
.tp-oogst-vorig { position: absolute; top: -2px; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: var(--tp-text); box-shadow: 0 0 0 1.5px var(--tp-surface); }
.tp-oogst-legenda i.is-vorig { width: 3px; height: 12px; border-radius: 2px; background: var(--tp-text); }
.tp-oogst-maanden { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; height: 110px; padding-bottom: 2px; border-bottom: 1px solid var(--tp-border); }
.tp-oogst-maand { display: flex; flex-direction: column; align-items: stretch; min-width: 0; height: 100%; position: relative; padding-bottom: 16px; }
/* Staven per maand: dit jaar gevuld, vorig jaar omlijnd erachter; het getal staat boven de staaf van dit jaar. */
.tp-oogst-staven { position: relative; flex: 1; margin-top: 14px; }
.tp-oogst-staaf, .tp-oogst-staaf-vorig { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 4px 4px 0 0; }
.tp-oogst-staaf { width: min(60%, 20px); }
.tp-oogst-staaf-vorig { width: min(86%, 30px); border: 1.5px solid var(--tp-text-2); border-bottom: 0; box-sizing: border-box; }
.tp-oogst-kg { position: absolute; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 700; color: var(--tp-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-oogst-mnd { position: absolute; bottom: 0; font-size: 10px; color: var(--tp-text-2); }
@media (max-width: 600px) {
  .tp-oogst-balken li { grid-template-columns: minmax(0, 1fr) auto; }
  .tp-oogst-spoor { grid-column: 1 / -1; grid-row: 2; }
  .tp-oogst-kg { font-size: 9px; }
}
/* PDF op maat (2026-10-02, pdfKeuze() in moestuin-venster.js): onder de werkbalk, vinkjes per onderdeel. */
.tp-pdf-keuze { margin: 6px 0 10px; padding: 12px; border: 1px solid var(--tp-accent); border-radius: 10px; background: var(--tp-surface-2); }
.tp-pdf-snel { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tp-pdf-delen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; }
.tp-pdf-deel { display: flex; align-items: flex-start; gap: 8px; min-height: 30px; padding: 4px 0; font-size: var(--tp-fs-sm); color: var(--tp-text); cursor: pointer; }
.tp-pdf-deel input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--tp-accent); }
.tp-pdf-qr, .tp-pdf-zuinig { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--tp-border); }
.tp-pdf-zuinig + .tp-pdf-qr { margin-top: 0; border-top: 0; }
.tp-pdf-qr input:disabled + span { opacity: 0.7; }
.tp-pdf-uitleg { display: block; margin-top: 2px; font-size: var(--tp-fs-xs); color: var(--tp-text-2); }
/* Dagboek: zoeken en filters boven het logboek, inklapbare bedden, vorig jaar bij de gewaskeuze. */
.tp-dagboek-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tp-dagboek-filters input[type="search"] { flex: 2 1 12em; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xs);
  font: inherit; font-size: var(--tp-fs-sm); color: var(--tp-text); background: var(--tp-surface); }
.tp-dagboek-filters select { flex: 1 1 8em; min-width: 0; height: 34px; padding: 0 6px; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xs);
  font: inherit; font-size: var(--tp-fs-sm); color: var(--tp-text); background: var(--tp-surface); }
.tp-dagboek-telling { margin: 0 0 6px; font-size: var(--tp-fs-xs); }
details.tp-dagboek-bed > summary { cursor: pointer; list-style: none; }
details.tp-dagboek-bed > summary::-webkit-details-marker { display: none; }
details.tp-dagboek-bed > summary strong::before { content: '\25B8'; display: inline-block; width: 1.1em; transition: transform 0.15s; color: var(--tp-text-2); }
details.tp-dagboek-bed[open] > summary strong::before { transform: rotate(90deg); }
details.tp-dagboek-bed:not([open]) > summary { border-bottom: 0; padding-bottom: 0; }
.tp-dagboek-hint { display: block; min-height: 1em; font-size: var(--tp-fs-xs); font-weight: 400; color: var(--tp-text-2); font-style: italic; }
.tp-dagboek-hint:empty { display: none; }
@media (max-width: 600px) {
  .tp-pdf-delen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .tp-pdf-deel { min-height: 44px; align-items: center; }
  .tp-pdf-deel input { width: 20px; height: 20px; margin: 0; }
  .tp-dagboek-filters input[type="search"], .tp-dagboek-filters select { height: 44px; }
}
.tp-teelt-wissel { min-width: 480px; }
.tp-teelt-wissel th.is-nu { text-decoration: underline; }
.tp-teelt-aantal.tp-teelt-wissel td, .tp-teelt-aantal.tp-teelt-wissel th { text-align: left; vertical-align: top; }
.tp-teelt-groep { display: inline-block; margin: 1px 2px 1px 0; padding: 1px 6px; border-radius: 999px; font-size: var(--tp-fs-xs);
  font-weight: 700; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); white-space: nowrap; }
.tp-teelt-groep.is-fout { outline: 2px solid #b3261e; outline-offset: 1px; }
.tp-teelt-goed { margin: 4px 0; font-size: var(--tp-fs-sm); color: #2f6740; }
/* Boodschappenlijst: keuzelijst van het zaadproduct en de link naar de leverancier (moestuin-venster.js, fase 5). */
.tp-teelt-bood { min-width: 460px; }
.tp-teelt-aantal.tp-teelt-bood td { vertical-align: top; }
/* Zaad op voorraad (2026-10-03): de keuze onder het aantal zakjes, met een korte regel eronder. */
.tp-teelt-voorraad { margin-top: 4px; }
.tp-teelt-voorraad small { display: block; margin-top: 2px; font-size: var(--tp-fs-xs); }
.tp-teelt-bood select { max-width: 100%; height: 30px; padding: 0 6px; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xs);
  font: inherit; font-size: var(--tp-fs-sm); color: var(--tp-text); background: var(--tp-surface); }
.tp-teelt-link { display: block; margin-top: 2px; font-size: var(--tp-fs-xs); color: var(--tp-accent); overflow-wrap: anywhere; }
/* Op een smal scherm (2026-10-02) een kaart per gewas in plaats van een tabel van 460 px: de naam vet, daaronder
   Nodig, Zaad en Zakjes met het label uit data-label (moestuin-venster.js) links en de waarde over de rest. */
@media (max-width: 600px) {
  .tp-teelt-bood { display: block; min-width: 0; }
  .tp-teelt-bood thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tp-teelt-bood tbody, .tp-teelt-bood tr { display: block; }
  .tp-teelt-bood tr { padding: 8px 0; border-bottom: 1px solid var(--tp-border); }
  .tp-teelt-aantal.tp-teelt-bood td { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; align-items: baseline;
    padding: 2px 0; border: 0; text-align: left; overflow-wrap: anywhere; }
  .tp-teelt-aantal.tp-teelt-bood td:first-child { display: block; font-weight: 700; color: var(--tp-text); }
  .tp-teelt-bood td[data-label]:not(:first-child)::before { content: attr(data-label); grid-row: 1 / span 2; color: var(--tp-text-2); font-size: var(--tp-fs-xs); }
  /* 16 px: iOS-Safari zoomt bij focus in op een select met kleinere tekst (2026-10-03). */
  .tp-teelt-bood select { width: 100%; min-width: 0; font-size: 16px; }
}
html[data-theme="dark"] .tp-teelt-goed { color: #8fd19e; }
@media (pointer: coarse) {
  .tp-teelt-tab { min-height: 44px; }
  .tp-teelt-vak { min-height: 44px; aspect-ratio: auto; }
  .tp-teelt-chip { min-height: 44px; }
  .tp-teelt-rij select { height: 40px; }
  .tp-teelt-bood select { height: 40px; font-size: 16px; } /* touch (ook een tablet breder dan 600 px): geen iOS-zoom */
  .tp-teelt-link { padding: 6px 0; }
}
.tp-maand-opt input { width: 100%; }
/* Doorsnede (2026-09-29, app/doorsnede.js): paneel onderin, geen modal, zodat de snijlijn zichtbaar blijft.
   De tekening scrollt horizontaal binnen het paneel, nooit de pagina. */
.tp-doorsnede {
  position: fixed; left: 8px; right: 8px; z-index: 75;
  bottom: calc(var(--tp-status-h) + 8px + env(safe-area-inset-bottom, 0px));
  max-height: 50vh; overflow-y: auto; min-width: 0;
  background: var(--tp-surface); color: var(--tp-text);
  border: 1px solid var(--tp-border); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow-2);
  padding: 10px 12px;
}
.tp-doorsnede[hidden] { display: none; }
.tp-doorsnede-kop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; padding-right: 36px; }
.tp-doorsnede-kop #tp-doorsnede-sluit { position: absolute; top: 0; right: 0; }
.tp-doorsnede-kop h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.tp-doorsnede-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.tp-doorsnede-ex { display: inline-flex; gap: 2px; }
.tp-doorsnede-ex .tp-btn[aria-pressed="true"] { background: var(--tp-accent); color: var(--tp-accent-ink); border-color: var(--tp-accent); }
.tp-doorsnede-tekening { overflow-x: auto; max-width: 100%; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); background: #ffffff; }
.tp-doorsnede-tekening svg { display: block; }
.tp-doorsnede-bron { margin: 6px 0 0; font-size: var(--tp-fs-xs); }
.tp-doorsnede-uitleg { margin: 0 0 6px; font-size: var(--tp-fs-xs); }
@media (max-width: 768px) {
  .tp-doorsnede { left: 4px; right: 4px; bottom: calc(var(--tp-mobilebar-h) + 4px + env(safe-area-inset-bottom, 0px)); max-height: 55vh; padding: 8px; }
  .tp-doorsnede-acties { margin-left: 0; }
}

/* ── Verschillen met een versie (app/versies-venster.js): zwevend paneel rechtsonder ─────────── */
.tp-versie-diff {
  position: fixed; right: 8px; z-index: 76; width: min(360px, calc(100vw - 16px));
  top: calc(var(--tp-header-h) + 56px);
  max-height: 55vh; overflow-y: auto; min-width: 0;
  background: var(--tp-surface); color: var(--tp-text);
  border: 1px solid var(--tp-border); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow-2);
  padding: 10px 12px;
}
.tp-versie-diff[hidden] { display: none; }
.tp-versie-diff-kop { position: relative; padding-right: 36px; margin-bottom: 6px; }
.tp-versie-diff-kop .tp-modal-x { position: absolute; top: 0; right: 0; }
.tp-versie-diff-kop h2 { margin: 0; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.tp-versie-diff-acties { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tp-versie-diff-acties .tp-btn[aria-pressed="true"] { background: var(--tp-accent); color: var(--tp-accent-ink); border-color: var(--tp-accent); }
.tp-versie-diff p { margin: 4px 0; font-size: var(--tp-fs-sm, 0.85rem); }
.tp-versie-diff-som { font-weight: 600; }
.tp-versie-diff h3 { margin: 10px 0 4px; font-size: var(--tp-fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--tp-text-2); }
.tp-versie-diff-lijst { list-style: none; margin: 0; padding: 0; font-size: var(--tp-fs-sm, 0.85rem); }
.tp-versie-diff-lijst li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-bottom: 1px solid var(--tp-border); }
.tp-versie-diff-lijst li span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
  .tp-versie-diff { left: 4px; right: 4px; width: auto; top: auto; bottom: calc(var(--tp-mobilebar-h) + 4px + env(safe-area-inset-bottom, 0px)); max-height: 40vh; padding: 8px; }
}

/* ── Bevestigingsvraag (tpConfirm in app/melding.js): vervangt window.confirm() ─────────────── */
.tp-modal-confirm { z-index: 140; }
.tp-confirm-tekst { white-space: pre-line; }
.tp-confirm-acties { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.tp-confirm-acties .tp-btn { flex: 0 1 auto; }
@media (max-width: 480px) { .tp-confirm-acties .tp-btn { flex: 1 1 auto; } }

/* ── "Slim starten"-paneel (voorstellen, suggest-popup.js) ───────────────────── */
.tp-suggest-card { max-width: 600px; }
.tp-suggest-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.tp-suggest-step { border: 1px solid var(--tp-border); border-radius: var(--tp-radius); padding: 10px 12px; }
.tp-suggest-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tp-suggest-step-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--tp-text); color: var(--tp-surface); font-size: var(--tp-fs-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tp-suggest-step.is-done .tp-suggest-step-num { background: var(--tp-accent); color: var(--tp-accent-ink); }
.tp-suggest-step-title { font-weight: 700; font-size: var(--tp-fs); flex: 1 1 auto; }
.tp-suggest-step-sub { font-size: var(--tp-fs-xs); color: var(--tp-text-3); }
.tp-suggest-list { display: flex; flex-direction: column; gap: 2px; max-height: 44vh; overflow-y: auto; }
/* Keuzeblok in stap 2 (2026-09-25): hoeveel omgeving mee mag en welke bronnen. Staat vóór het ophalen,
   dus boven de aanvinklijst met de gevonden objecten. Wrapt vanzelf op een smal scherm; de tikdoelen
   hangen aan pointer:coarse verderop in dit bestand, net als bij .tp-suggest-item. */
.tp-suggest-keuze {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; margin-bottom: 6px;
  background: var(--tp-surface-2); border-radius: var(--tp-radius-sm);
}
.tp-suggest-keuze-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.tp-suggest-keuze-kop {
  flex: 0 0 100%; font-size: var(--tp-fs-xs); font-weight: 600;
  color: var(--tp-text-2); text-transform: uppercase; letter-spacing: 0.03em;
}
.tp-suggest-radio, .tp-suggest-bron {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--tp-fs-sm); cursor: pointer;
}
.tp-suggest-radio input, .tp-suggest-bron input { width: 16px; height: 16px; flex: none; accent-color: var(--tp-accent); }
.tp-suggest-bron .tp-suggest-ico { display: inline-flex; color: var(--tp-text-2); }
.tp-suggest-bron .tp-suggest-ico .tp-ico { width: 16px; height: 16px; }
.tp-suggest-keuze-bronnen { gap: 6px 16px; }
@media (max-width: 480px) {
  /* Onder elkaar: naast elkaar worden de labels afgekapt en de tikdoelen te klein. */
  .tp-suggest-keuze-bronnen { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tp-suggest-keuze-rij { gap: 10px 12px; }
}
@media (pointer: coarse) {
  .tp-suggest-radio, .tp-suggest-bron { min-height: 32px; }
  .tp-suggest-radio input, .tp-suggest-bron input { width: 20px; height: 20px; }
}

.tp-suggest-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px; border-radius: var(--tp-radius-sm); cursor: pointer; font-size: var(--tp-fs-sm);
}
.tp-suggest-item:hover { background: var(--tp-surface-2); }
.tp-suggest-item input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--tp-accent); }
.tp-suggest-item .tp-suggest-ico { flex: none; display: inline-flex; color: var(--tp-text-2); }
.tp-suggest-item .tp-suggest-ico .tp-ico { width: 18px; height: 18px; }
.tp-suggest-item-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tp-suggest-item-label { font-weight: 600; color: var(--tp-text); }
.tp-suggest-item-detail { font-size: var(--tp-fs-xs); color: var(--tp-text-3); }
.tp-suggest-item--kaart { background: var(--tp-accent-soft); }
.tp-suggest-item--kaart:hover { background: var(--tp-accent-soft); }
.tp-suggest-item--kaart .tp-suggest-ico { color: var(--tp-accent-hover); }
.tp-suggest-preview { flex: none; width: 96px; height: 66px; border-radius: var(--tp-radius-xs); border: 1px solid var(--tp-border); background: var(--tp-surface-2); }
.tp-suggest-item.is-done { cursor: default; }
.tp-suggest-item.is-done .tp-suggest-item-label { color: var(--tp-accent-hover); }
.tp-suggest-empty { padding: 8px 4px; font-size: var(--tp-fs-sm); color: var(--tp-text-3); }
.tp-suggest-intro { margin: 4px 0 8px; color: var(--tp-text-2); font-size: var(--tp-fs-sm); }
.tp-suggest-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.tp-suggest-dismiss { background: none; border: none; color: var(--tp-text-2); font-size: var(--tp-fs-sm); text-decoration: underline; cursor: pointer; padding: 6px 2px; }
@media (max-width: 480px) {
  .tp-suggest-footer { flex-direction: column-reverse; align-items: stretch; }
  .tp-suggest-dismiss { text-align: center; }
  .tp-suggest-preview { width: 64px; height: 44px; }
}

/* ── Thema-correcties voor oudere secties met vaste kleuren ─────────────────────────────── */
.tp-hover-tooltip, .tp-context-menu { color: var(--tp-text); }
.tp-facade-card, .tp-meas-card, .tp-props-popup-card { border: 1px solid var(--tp-border); color: var(--tp-text); }
.tp-pres-head h2, .tp-modal-card h2, .tp-panel h2 { font-family: var(--tp-font); }
.tp-swatch-active { border-color: var(--tp-accent); box-shadow: 0 0 0 2px var(--tp-accent-soft); }
.tp-pres-field input, .tp-pres-field select, .tp-pres-field textarea { color: var(--tp-text); background: var(--tp-surface); }
.tp-form-field input, .tp-form-field textarea, .tp-inline-details textarea, .tp-garden-size input, .tp-slope-row input, .tp-slope-seg-row input, .tp-price-opt select, .tp-bg-pdok-form select, .tp-mag-filters select, .tp-templates-toolbar input, .tp-templates-toolbar select, #tp-klantdesigns-search, .tp-public-owner-linkrow input, .tp3d-sundate input { color: var(--tp-text); background: var(--tp-surface); }
.tp-form-field input:focus, .tp-form-field textarea:focus, .tp-garden-size input:focus, .tp-slope-row input:focus, .tp-price-opt select:focus { border-color: var(--tp-border-strong); }
.tp-templates-toolbar input, .tp-templates-toolbar select, #tp-klantdesigns-search { padding: 8px 10px; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); font: inherit; font-size: var(--tp-fs-sm); }
.tp-meas-tab { opacity: 1; }
.tp-meas-tab.tp-active { background: var(--tp-text); color: var(--tp-surface); border-color: var(--tp-text); }
.tp-template-badge { background: var(--tp-surface-3); color: var(--tp-text) !important; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   Ronde 2 (2026-09-09): maten typen, presets, vergelijken, prijs per element, annotaties,
   groepen in de Lagen-tab, Mijn elementen, overlay-lagen, titelblok.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Maten typen in de hintbalk ─────────────────────────────────────────────────────────── */
.tp-hint-fields { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-hint-fields label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--tp-fs-sm); color: var(--tp-text-2); }
.tp-hint-fields input {
  width: 72px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--tp-border-strong);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-surface);
  color: var(--tp-text);
  font: inherit;
  font-size: var(--tp-fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tp-hint-fields input:focus { outline: none; border-color: var(--tp-accent); box-shadow: 0 0 0 3px var(--tp-accent-soft); }

/* ── Statusbalk: prijs ──────────────────────────────────────────────────────────────────── */
.tp-statusbar .tp-status-price { flex: none; color: var(--tp-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-statusbar .tp-status-price:empty { display: none; }

/* ── Preset- en vergelijk-menu (viewbar-popovers) ──────────────────────────────────────── */
.tp-preset-picker, .tp-compare-picker { position: relative; }
.tp-preset-menu, .tp-compare-menu { min-width: 260px; padding: 8px; }
.tp-preset-menu .tp-menu-item, .tp-compare-menu .tp-menu-item { width: 100%; flex-wrap: wrap; text-align: left; }
.tp-preset-menu .tp-menu-item small { flex: 1 0 100%; padding-left: 26px; color: var(--tp-text-3); font-size: var(--tp-fs-xs); font-weight: 400; }
.tp-preset-menu .tp-menu-item.tp-active, .tp-compare-menu .tp-menu-item.tp-active { background: var(--tp-accent-soft); color: var(--tp-accent-hover); }
.tp-preset-menu .tp-price-opt, .tp-compare-menu .tp-price-opt { margin: 4px 6px; }
.tp-rail-btn[aria-pressed="true"]#tp-btn-compare, .tp-rail-btn[aria-pressed="true"]#tp-btn-prices { background: var(--tp-accent-soft); color: var(--tp-accent-hover); }

/* ── Vergelijken naast elkaar: tweede canvas rechts van het eigen canvas ────────────────── */
.tp-compare-side {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  border-left: 2px solid var(--tp-text);
  background: var(--tp-surface-2);
  overflow: hidden;
  z-index: 3;
}
.tp-compare-side canvas { display: block; width: 100%; height: 100%; }
.tp-compare-side-tag {
  position: absolute;
  top: 12px; left: 8px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(31, 61, 43, 0.85);
  color: #fff;
  font-size: var(--tp-fs-sm);
  font-weight: 600;
  pointer-events: none;
}
body.tp-compare-side-on #tp-canvas { width: 50% !important; }
body.tp-compare-side-on .tp-viewbar { right: calc(50% + 12px); }
@media (max-width: 768px) {
  .tp-compare-side { top: auto; width: 100%; height: 45%; border-left: 0; border-top: 2px solid var(--tp-text); }
  body.tp-compare-side-on #tp-canvas { width: 100% !important; height: 55% !important; }
  body.tp-compare-side-on .tp-viewbar { right: 12px; }
}

/* ── Klant-annotatie popover ────────────────────────────────────────────────────────────── */
.tp-comment-pop {
  position: absolute;
  z-index: 40;
  width: min(300px, calc(100% - 16px));
  padding: 10px 12px 12px;
}
.tp-comment-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: var(--tp-fs-sm); font-weight: 600; color: var(--tp-text); }
.tp-comment-pop p { margin: 0 0 6px; font-size: var(--tp-fs-sm); color: var(--tp-text); white-space: pre-wrap; word-break: break-word; }
.tp-comment-pop .tp-muted { font-size: var(--tp-fs-xs); }
.tp-comment-pop .tp-modal-actions { margin-top: 8px; }
.tp-badge:empty { display: none; }

/* ── Overlay-lagen in het Kaart-paneel ──────────────────────────────────────────────────── */
.tp-overlay-rows { margin-top: 6px; }
.tp-overlay-row { display: flex; align-items: center; gap: 10px; }
.tp-overlay-row .tp-price-opt { flex: 1 1 auto; margin: 4px 0; }
.tp-overlay-row .tp-price-opt .tp-ico { width: 14px; height: 14px; vertical-align: -2px; color: var(--tp-text-2); }
.tp-overlay-row input[type="range"] { width: 90px; flex: none; }

/* Hoogtekaart-rij (2026-09-24): zelfde ritme als een overlay-rij, maar met een keuzelijst in
   plaats van een dekkingsschuif. De hint eronder mag over meerdere regels lopen op een smal
   scherm, vandaar geen vaste hoogte. */
.tp-relief-row { margin-top: 6px; }
.tp-relief-row .tp-price-opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.tp-relief-row .tp-price-opt .tp-ico { width: 14px; height: 14px; vertical-align: -2px; color: var(--tp-text-2); }
.tp-relief-row select { flex: 0 1 auto; min-width: 7.5em; max-width: 100%; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; }
.tp-relief-row .tp-slope-seg-hint { margin: 2px 0 0; }
/* Zonuren (2026-09-29, app/zonuren.js): popover in de weergavebalk en het blok in het eigenschappenpaneel. */
.tp-zon-picker { position: relative; }
.tp-zon-panel { width: 260px; max-width: calc(100vw - 32px); padding: 8px 10px; }
.tp-zon-panel .tp-price-opt { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.tp-zon-panel .tp-field { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; text-align: left; }
.tp-zon-panel select, .tp-zon-panel input[type="date"] { width: 100%; max-width: 100%; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; }
.tp-zon-legenda { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--tp-fs-sm); }
.tp-zon-legenda li { display: flex; align-items: center; gap: 8px; }
.tp-zon-kleur { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.15); }
.tp-zon-kleur--schaduw { background: #4285c7; }
.tp-zon-kleur--half { background: #6fb456; }
.tp-zon-kleur--zon { background: #f2cd37; }
.tp-zon-panel .tp-slope-seg-hint { margin: 4px 0 0; }
.tp-zon-standplaats { margin: 2px 0 4px; }
.tp-zon-waarschuwing { margin: 4px 0; padding: 6px 8px; border: 1px solid var(--tp-warn); border-radius: var(--tp-radius-sm); background: var(--tp-warn-soft); color: var(--tp-warn); font-size: var(--tp-fs-sm); }
.tp-zon-hint { margin: 2px 0 6px; font-size: var(--tp-fs-xs); }

/* ── Lagen-tab: groepsrijen ─────────────────────────────────────────────────────────────── */
.tp-layers-row.tp-layers-group { background: var(--tp-surface-2); font-weight: 600; padding-left: 2px; }
.tp-layers-row.tp-layers-group:hover { background: var(--tp-surface-3); }
.tp-layers-row.tp-layers-group .tp-layers-ico { color: var(--tp-accent-hover); }
.tp-layers-row.is-member { padding-left: 26px; }
.tp-layers-row.is-member::before { content: ""; flex: none; width: 1px; height: 100%; margin-left: -12px; margin-right: 6px; background: var(--tp-border-strong); }
.tp-layers-rename {
  flex: 1 1 auto; min-width: 0;
  height: 26px; padding: 0 6px;
  border: 1px solid var(--tp-accent);
  border-radius: var(--tp-radius-xs);
  background: var(--tp-surface);
  color: var(--tp-text);
  font: inherit; font-size: var(--tp-fs-sm);
}

/* ── Mijn elementen (bibliotheek) ───────────────────────────────────────────────────────── */
.tp-lib-tile-element { position: relative; }
.tp-lib-item.tp-lib-element { padding: 4px 4px 6px; }
.tp-lib-item.tp-lib-element img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--tp-radius-xs); background: var(--tp-surface-2); }
/* Gewas (2026-10-01): eigen illustratie uit assets/gewassen/, met wat lucht eromheen. */
.tp-lib-item.tp-lib-element img.tp-lib-gewas { padding: 6px; box-sizing: border-box; }
.tp-teelt-chip img { flex: none; width: 20px; height: 20px; }
.tp-lib-item.tp-lib-element .tp-lib-label { display: block; margin-top: 4px; }
.tp-lib-element-del { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; opacity: 0; background: var(--tp-surface); }
.tp-lib-element-del .tp-ico { width: 13px; height: 13px; }
.tp-lib-tile-element:hover .tp-lib-element-del, .tp-lib-tile-element:focus-within .tp-lib-element-del { opacity: 1; }
@media (pointer: coarse) { .tp-lib-element-del { opacity: 1; } }

/* ── Kleine modal (element bewaren) ─────────────────────────────────────────────────────── */
.tp-modal-card.tp-modal-card-sm { max-width: 420px; }
.tp-modal-card .tp-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tp-modal-card .tp-field input[type="text"] { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1px solid var(--tp-border-strong); border-radius: var(--tp-radius-sm); background: var(--tp-surface); color: var(--tp-text); font: inherit; }

/* ── Reeks maken (#tp-modal-reeks, app/reeks.js) ─────────────────────────────────────────────
   Doorzichtige achtergrond en de kaart opzij: het voorbeeld staat op het tekenvlak eronder. */
.tp-modal.tp-modal-reeks { background: transparent; justify-content: flex-end; align-items: flex-start; padding: 64px 16px 16px; }
.tp-modal-reeks .tp-modal-card { max-width: 360px; max-height: calc(100vh - 80px); }
.tp-reeks-tabs { display: flex; gap: 2px; margin: 8px 0 6px; border-bottom: 1px solid var(--tp-border); }
.tp-reeks-tab { flex: 1 1 0; min-width: 0; min-height: 36px; padding: 6px 4px; border: none; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--tp-fs-sm); color: var(--tp-text-2); cursor: pointer; }
.tp-reeks-tab:hover { color: var(--tp-text); }
.tp-reeks-tab.tp-active { color: var(--tp-text); font-weight: 600; border-bottom-color: var(--tp-accent); }
.tp-reeks-tab:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: -2px; }
.tp-modal-reeks .tp-modal-card .tp-field input[type="text"] { flex: 0 0 auto; width: 96px; }
.tp-modal-reeks .tp-field select { min-width: 0; max-width: 190px; }
.tp-reeks-vink input[type="checkbox"] { width: auto; height: auto; }
.tp-reeks-uitleg { margin: 4px 0; font-size: var(--tp-fs-sm); }
#tp-btn-reeks-kies-punt { margin: 4px 0; }
.tp-reeks-melding { min-height: 1.4em; margin: 10px 0 0; font-size: var(--tp-fs-sm); color: var(--tp-text-2); }
.tp-reeks-melding.tp-reeks-fout { color: var(--tp-danger); }
body.tp-reeks-kiespunt #tp-canvas { cursor: crosshair; }
@media (max-width: 480px) {
  .tp-modal.tp-modal-reeks { padding: 0; align-items: flex-end; }
  .tp-modal-reeks .tp-modal-card { max-width: none; max-height: 60vh; }
}
@media (pointer: coarse) { .tp-reeks-tab { min-height: 44px; } }

/* ── CAD-uitwisseling (#tp-modal-cad, #tp-modal-kalibreer, app/cad-uitwisseling.js) ─────────── */
.tp-cad-naam { font-size: var(--tp-fs-sm); overflow-wrap: anywhere; }
.tp-cad-voorbeeld { display: block; width: 100%; height: auto; max-height: 240px; margin: 8px 0 4px; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); background: #ffffff; }
.tp-cad-info { min-height: 1.4em; margin: 4px 0; font-size: var(--tp-fs-sm); }
.tp-cad-fout { min-height: 1.4em; margin: 6px 0 0; font-size: var(--tp-fs-sm); color: var(--tp-danger); }
#tp-modal-kalibreer .tp-field input[type="text"] { flex: 0 0 auto; width: 110px; }
/* Twee aangeklikte punten en hun lijn, boven het tekenvlak; klikken gaat erdoorheen. */
.tp-kal-laag { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.tp-kal-laag line { stroke: #BD6B43; stroke-width: 2; stroke-dasharray: 6 4; }
.tp-kal-laag circle { fill: #ffffff; stroke: #BD6B43; stroke-width: 2.5; }
body.tp-kalibreren #tp-canvas { cursor: crosshair; }

/* ── Titelblok-velden in de Tuin-tab ────────────────────────────────────────────────────── */
#tp-titleblock-details .tp-garden-size { margin-top: 6px; }
#tp-titleblock-details > label { display: block; margin-top: 6px; font-size: var(--tp-fs-sm); color: var(--tp-text-2); }
#tp-titleblock-details > label input { display: block; width: 100%; margin-top: 3px; padding: 7px 9px; border: 1px solid var(--tp-border-strong); border-radius: var(--tp-radius-sm); background: var(--tp-surface); color: var(--tp-text); font: inherit; }

@media (max-width: 640px) {
  .tp-hint-fields input { width: 60px; }
  .tp-preset-menu, .tp-compare-menu { min-width: 220px; }
}

/* ── Ronde 2: herontwerp van de losse modules in dezelfde taal als de tool ──────────────────
   Maten & materialen (.tp-meas-*), presentatie-PDF-compose (.tp-pres-*) en gevel-editor
   (.tp-facade-*): segment-tabs (patroon .tp-panel-tabs), tabellen met tabular-nums en rustige
   koppen, kaarten met --tp-radius en --tp-shadow, focus-ringen en donker thema. Geen functionele
   wijziging; alleen overrides ná de oorspronkelijke regels (cascade). */
.tp-meas-overlay, .tp-facade-overlay { background: var(--tp-overlay); backdrop-filter: blur(2px); }
.tp-meas-card, .tp-facade-card {
  background: var(--tp-surface);
  color: var(--tp-text);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-lg, var(--tp-radius));
  box-shadow: var(--tp-shadow-2);
  padding: 20px 22px 22px;
}
.tp-meas-card h2, .tp-facade-card h2, .tp-pres-head h2 { font-family: var(--tp-font); font-weight: 700; letter-spacing: -0.01em; color: var(--tp-text); font-size: 1.15rem; }
.tp-meas-card .tp-muted, .tp-pres-section .tp-muted, .tp-facade-card .tp-muted { color: var(--tp-text-3); }

/* Segment-tabs */
.tp-meas-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 14px 0 12px;
  background: var(--tp-surface-2);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
}
.tp-meas-tab, .tp-meas-tab.tp-btn {
  opacity: 1;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: calc(var(--tp-radius) - 3px);
  background: transparent;
  color: var(--tp-text-2);
  font-weight: 600;
  font-size: var(--tp-fs-sm);
  box-shadow: none;
}
.tp-meas-tab:hover { background: var(--tp-surface-3); color: var(--tp-text); }
.tp-meas-tab.tp-active, .tp-meas-tab.tp-btn.tp-active { background: var(--tp-surface); color: var(--tp-text); border-color: transparent; box-shadow: var(--tp-shadow-1); }
.tp-meas-tab:focus-visible { outline: none; box-shadow: var(--tp-focus); }

/* Tabellen */
.tp-meas-scroll { border: 1px solid var(--tp-border); border-radius: var(--tp-radius); background: var(--tp-surface); }
.tp-meas-scroll .tp-meas-table { min-width: 640px; }
.tp-meas-table { font-size: var(--tp-fs-sm); font-variant-numeric: tabular-nums; }
.tp-meas-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--tp-surface-2);
  color: var(--tp-text-3);
  font-size: var(--tp-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tp-border-strong);
}
.tp-meas-table td { padding: 8px 10px; border-bottom: 1px solid var(--tp-border); color: var(--tp-text); vertical-align: top; }
.tp-meas-table tr:last-child td { border-bottom: 0; }
.tp-meas-group-row td { background: var(--tp-surface-2); color: var(--tp-text); font-weight: 700; font-size: var(--tp-fs-xs); text-transform: uppercase; letter-spacing: 0.03em; padding: 6px 10px; }
.tp-meas-group-row td:first-child { text-align: left; }
.tp-meas-row-click:hover td { background: var(--tp-accent-soft); }
.tp-meas-row-click:focus-visible { outline: none; }
.tp-meas-row-click:focus-visible td { background: var(--tp-accent-soft); box-shadow: inset 0 0 0 2px var(--tp-accent); }
.tp-meas-actions { border-top: 1px solid var(--tp-border); gap: 8px; }
.tp-meas-push-status { border-radius: var(--tp-radius-sm); font-size: var(--tp-fs-sm); border: 1px solid transparent; }
.tp-meas-push-status--none { background: var(--tp-surface-2); color: var(--tp-text-3); border-color: var(--tp-border); }
.tp-meas-push-status--ok { background: var(--tp-accent-soft); color: var(--tp-accent-hover); }
.tp-meas-push-status--warn { background: rgba(189, 107, 67, 0.12); color: #9a512f; }
html[data-theme="dark"] .tp-meas-push-status--warn { color: #e8a37f; }

/* Presentatie-PDF-compose */
.tp-pres-overlay { background: var(--tp-bg); color: var(--tp-text); }
.tp-pres-head { background: var(--tp-surface); border-bottom: 1px solid var(--tp-border); box-shadow: var(--tp-shadow-1); }
.tp-pres-section { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg, var(--tp-radius)); box-shadow: var(--tp-shadow-1); }
.tp-pres-section h3 { color: var(--tp-text); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; }
.tp-pres-field { color: var(--tp-text-2); font-weight: 600; font-size: var(--tp-fs-sm); }
.tp-pres-field input, .tp-pres-field select, .tp-pres-field textarea { border: 1px solid var(--tp-border-strong); border-radius: var(--tp-radius-sm); }
.tp-pres-field input:focus, .tp-pres-field select:focus, .tp-pres-field textarea:focus { outline: none; border-color: var(--tp-accent); box-shadow: 0 0 0 3px var(--tp-accent-soft); }
.tp-pres-check { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: var(--tp-fs-sm); color: var(--tp-text); }
.tp-pres-check input[type="checkbox"], .tp-pres-check input[type="radio"] { width: 18px; height: 18px; accent-color: var(--tp-accent); }

/* Gevel-editor */
.tp-facade-side { background: var(--tp-surface-2); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); }
.tp-facade-card canvas { border-radius: var(--tp-radius-sm); border: 1px solid var(--tp-border); background: var(--tp-surface); }
.tp-form-field { color: var(--tp-text-2); font-size: var(--tp-fs-sm); font-weight: 600; }
.tp-form-field input:focus, .tp-form-field select:focus, .tp-form-field textarea:focus { outline: none; border-color: var(--tp-accent); box-shadow: 0 0 0 3px var(--tp-accent-soft); }

/* Lege staten in de modules */
.tp-meas-empty, .tp-pres-empty, .tp-facade-empty { padding: 28px 12px; text-align: center; color: var(--tp-text-3); font-size: var(--tp-fs-sm); background: var(--tp-surface-2); border: 1px dashed var(--tp-border-strong); border-radius: var(--tp-radius); }

@media (max-width: 640px) {
  .tp-meas-card, .tp-facade-card { padding: 14px 14px 18px; border-radius: var(--tp-radius-lg, var(--tp-radius)) var(--tp-radius-lg, var(--tp-radius)) 0 0; }
  .tp-meas-tabs { display: flex; width: 100%; }
  .tp-meas-tab, .tp-meas-tab.tp-btn { flex: 1 1 0; padding: 0 8px; min-height: 44px; }
}
@media (pointer: coarse) {
  .tp-meas-tab, .tp-meas-tab.tp-btn { min-height: 44px; }
}

/* Ronde 2: SVG-iconen in de maten-module (inline, kleine maat) */
.tp-meas-card h2 [data-icon], .tp-meas-tab [data-icon], .tp-meas-actions .tp-btn [data-icon], .tp-meas-push-status [data-icon] { display: inline-flex; vertical-align: -3px; margin-right: 4px; }
.tp-meas-card h2 .tp-ico { width: 20px; height: 20px; }
.tp-meas-tab .tp-ico, .tp-meas-actions .tp-btn .tp-ico, .tp-meas-push-status .tp-ico { width: 15px; height: 15px; }

/* ── 3D-modellen beheren vanuit de tuinplanner (2026-09-16, alleen admin) ───────────────────
   Bibliotheekbalk "Model toevoegen / Alle modellen", bewerkknop op een modeltegel (zelfde plek en
   gedrag als de verwijderknop van een element), sleep-feedback voor een .glb op de tekening en de
   modal "3D-modellen". */
.tp-lib-model-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; }
.tp-lib-model-bar .tp-btn { flex: 1 1 auto; justify-content: center; }
.tp-lib-model-bar .tp-ico { width: 14px; height: 14px; }
.tp-lib-model-empty { grid-column: 1 / -1; padding: 8px 4px; }
.tp-lib-tile-model.is-new .tp-lib-item { box-shadow: 0 0 0 2px var(--tp-accent); animation: tpModelNew 1.2s ease-in-out 2; }
@keyframes tpModelNew { 50% { box-shadow: 0 0 0 5px var(--tp-accent-soft); } }
@media (prefers-reduced-motion: reduce) { .tp-lib-tile-model.is-new .tp-lib-item { animation: none; } }
/* Varianten (2026-09-16): één tegel voor een groep modellen, met een telling linksboven. */
.tp-lib-tile-variants .tp-lib-item { position: relative; }
.tp-lib-variant-badge { position: absolute; top: 4px; left: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700; line-height: 16px; color: var(--tp-accent-ink); background: var(--tp-accent); border-radius: 999px; pointer-events: none; }
.tp-canvas-wrap.tp-drop-model::after {
  content: 'Laat los om dit 3D-model toe te voegen';
  position: absolute; inset: 12px; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--tp-accent); border-radius: var(--tp-radius);
  background: rgba(62, 122, 79, 0.08);
  color: var(--tp-text); font-weight: 600; pointer-events: none;
}
.tp-models-card .tp-modal-head h2 { margin-bottom: 0; }
.tp-models-card .tp-modal-head .tp-muted { margin: 2px 0 0; }
.tp-models-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.tp-models-toolbar input[type="search"] {
  flex: 1 1 200px; min-width: 0; min-height: 34px; padding: 6px 10px;
  border: 1px solid var(--tp-border-strong); border-radius: var(--tp-radius-sm);
  background: var(--tp-surface); color: var(--tp-text); font: inherit;
}
.tp-models-toolbar .tp-ico { width: 15px; height: 15px; }
.tp-models-list { display: flex; flex-direction: column; gap: 6px; }
.tp-models-group { margin: 10px 0 2px; font-size: var(--tp-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tp-text-3); }
.tp-models-group:first-child { margin-top: 0; }
.tp-models-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 6px; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); background: var(--tp-surface);
}
.tp-models-thumb { display: flex; align-items: center; justify-content: center; width: 56px; height: 42px; border-radius: var(--tp-radius-xs); background: var(--tp-surface-2); overflow: hidden; }
.tp-models-thumb img { width: 100%; height: 100%; object-fit: contain; }
.tp-models-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-models-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-models-text span { font-size: var(--tp-fs-sm); color: var(--tp-text-2); }
.tp-models-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tp-models-empty { margin: 16px 0; text-align: center; color: var(--tp-text-3); }
.tp-models-foot { margin: 12px 0 0; font-size: var(--tp-fs-sm); }
@media (max-width: 640px) {
  .tp-models-row { grid-template-columns: 48px minmax(0, 1fr); }
  .tp-models-thumb { width: 48px; height: 36px; }
  .tp-models-acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── Foto-texturen voor vlakken (2026-09-16, alleen admin) ──────────────────────────────────
   Eigenschappenpaneel (.tp-tex-section: huidige textuur, maat, snelkeuze) en de browser-modal. */
.tp-tex-section { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tp-tex-current { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; }
.tp-tex-current img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--tp-radius-xs); border: 1px solid var(--tp-border); }
.tp-tex-current strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tp-fs-sm); }
.tp-tex-tile { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: var(--tp-fs-sm); color: var(--tp-text-2); }
.tp-tex-tile input { width: 56px; min-height: 26px; padding: 2px 6px; border: 1px solid var(--tp-border-strong); border-radius: var(--tp-radius-xs); background: var(--tp-surface); color: var(--tp-text); font: inherit; text-align: right; }
.tp-tex-quick { display: flex; flex-wrap: wrap; gap: 4px; }
/* Tint, draaiing en schaal per object (2026-09-16). */
.tp-tex-tints { display: flex; flex-wrap: wrap; gap: 4px; }
.tp-tex-tint { width: 24px; height: 24px; padding: 0; border: 1px solid var(--tp-border-strong); border-radius: 50%; cursor: pointer; }
.tp-tex-tint.is-natural { background: linear-gradient(135deg, #ffffff 0 45%, #b9b2a6 45% 55%, #ffffff 55%); }
.tp-tex-tint.is-active { box-shadow: 0 0 0 2px var(--tp-surface), 0 0 0 4px var(--tp-accent); }
.tp-tex-tint:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tp-surface), 0 0 0 4px var(--tp-accent); }
@media (pointer: coarse) { .tp-tex-tint { width: 34px; height: 34px; } }
.tp-tex-fit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tp-tex-rots { display: inline-flex; gap: 2px; }
.tp-tex-rot { min-width: 40px; }
.tp-tex-rot.tp-active { background: var(--tp-accent-soft); border-color: var(--tp-accent); color: var(--tp-text); }
.tp-tex-swatch[draggable="true"] { cursor: grab; }
/* Keuze voor de klant (props.textureOptions, 2026-09-17). */
.tp-tex-options { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--tp-border); }
.tp-tex-sub { margin: 0; font-size: var(--tp-fs-xs); font-weight: 700; color: var(--tp-text-2); text-transform: uppercase; letter-spacing: .04em; }
.tp-tex-option-row { display: flex; flex-direction: column; gap: 4px; }
.tp-tex-option {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 3px 4px 3px 3px;
  border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); background: var(--tp-surface); font-size: var(--tp-fs-sm);
}
.tp-tex-option.is-current { border-color: var(--tp-accent); }
.tp-tex-option img { width: 28px; height: 28px; object-fit: cover; border-radius: var(--tp-radius-xs); }
.tp-tex-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-tex-option-x { min-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: var(--tp-radius-xs); background: transparent; color: var(--tp-text-3); cursor: pointer; font: inherit; }
.tp-tex-option-x:hover, .tp-tex-option-x:focus-visible { background: var(--tp-surface-2); color: var(--tp-text); outline: none; }
/* Stijlsets in de Tuin-tab (2026-09-17). */
.tp-stylesets { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tp-styleset { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); background: var(--tp-surface); }
.tp-styleset-txt { display: flex; flex-direction: column; min-width: 0; }
.tp-styleset-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-styleset-txt small { color: var(--tp-text-3); }
.tp-styleset-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.tp-styleset-new { display: flex; flex-direction: column; gap: 6px; }
.tp-styleset-public { display: flex; align-items: center; gap: 6px; font-size: var(--tp-fs-sm); color: var(--tp-text-2); }
/* Klantkeuze overnemen, modelkeuze, maatcontrole en controle voor de offerte (2026-09-17). */
.tp-client-choice { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--tp-accent); border-radius: var(--tp-radius-sm); background: var(--tp-accent-soft); }
.tp-client-choice p { margin: 0; font-size: var(--tp-fs-sm); color: var(--tp-text); }
.tp-tex-option-add { min-height: 34px; padding: 4px 8px; border: 1px solid var(--tp-border-strong); border-radius: var(--tp-radius-sm); background: var(--tp-surface); color: var(--tp-text); font: inherit; }
.tp-tex-sizecheck { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--tp-warn-soft); color: var(--tp-warn); font-size: var(--tp-fs-xs); font-weight: 600; }
.tp-tex-sizecheck-ok { margin-left: 4px; min-height: 26px; padding: 0 8px; border: 1px solid var(--tp-border-strong); border-radius: var(--tp-radius-xs); background: var(--tp-surface); color: var(--tp-text); font: inherit; font-size: var(--tp-fs-xs); cursor: pointer; }
.tp-tex-tile { flex-wrap: wrap; }
.tp-quote-check { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--tp-warn); border-radius: var(--tp-radius-sm); background: var(--tp-warn-soft); }
.tp-quote-check-title { margin: 0; font-weight: 700; font-size: var(--tp-fs-sm); color: var(--tp-warn); }
.tp-quote-check-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; font-size: var(--tp-fs-sm); color: var(--tp-text); }
.tp-quote-check-acts { display: inline-flex; gap: 4px; }
.tp-styleset-new input { min-height: 34px; padding: 6px 10px; border: 1px solid var(--tp-border-strong); border-radius: var(--tp-radius-sm); background: var(--tp-surface); color: var(--tp-text); font: inherit; box-sizing: border-box; width: 100%; }
/* Aanbevolen modellen in het eigenschappenpaneel (2026-09-16). */
.tp-model-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; margin: 4px 0 8px; }
.tp-model-rec {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 4px 4px 5px;
  border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); background: var(--tp-surface);
  color: var(--tp-text); font: inherit; font-size: var(--tp-fs-xs); cursor: pointer;
}
.tp-model-rec img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--tp-radius-xs); background: var(--tp-surface-2); }
.tp-model-rec .tp-ico { width: 100%; height: 42px; color: var(--tp-text-3); }
.tp-model-rec span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.tp-model-rec:hover { border-color: var(--tp-border-strong); }
.tp-model-rec.is-active { border-color: var(--tp-accent); box-shadow: 0 0 0 2px var(--tp-accent-soft); }
.tp-model-rec:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tp-accent); }
.tp-tex-swatch { width: 36px; height: 36px; padding: 0; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xs); background: var(--tp-surface-2); overflow: hidden; cursor: pointer; }
.tp-tex-swatch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tp-tex-swatch:hover, .tp-tex-swatch:focus-visible { border-color: var(--tp-accent); box-shadow: 0 0 0 2px var(--tp-accent-soft); }
@media (pointer: coarse) { .tp-tex-swatch { width: 44px; height: 44px; } }
.tp-tex-card-modal .tp-modal-head .tp-muted { margin: 2px 0 0; }
.tp-tex-tabs { display: flex; gap: 6px; margin: 12px 0 8px; }
.tp-tex-search { width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid var(--tp-border-strong); border-radius: var(--tp-radius-sm); background: var(--tp-surface); color: var(--tp-text); font: inherit; box-sizing: border-box; }
.tp-tex-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; }
.tp-tex-status { margin: 4px 0 8px; }
.tp-tex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.tp-tex-card { position: relative; min-width: 0; }
.tp-tex-pick {
  display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 4px 4px 6px;
  border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); background: var(--tp-surface);
  color: var(--tp-text); font: inherit; text-align: left; cursor: pointer;
}
.tp-tex-pick:hover:not(:disabled), .tp-tex-pick:focus-visible { border-color: var(--tp-accent); }
.tp-tex-pick:disabled { cursor: wait; opacity: 0.6; }
.tp-tex-pick img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--tp-radius-xs); background: var(--tp-surface-2); }
.tp-tex-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tp-fs-sm); font-weight: 600; }
.tp-tex-meta { font-size: var(--tp-fs-xs); color: var(--tp-text-3); }
.tp-tex-card.is-loading .tp-tex-pick { opacity: 1; border-color: var(--tp-accent); box-shadow: 0 0 0 2px var(--tp-accent-soft); }
.tp-tex-card.is-loading .tp-tex-meta::before { content: 'Ophalen… '; color: var(--tp-accent); font-weight: 600; }
.tp-tex-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; opacity: 0; background: var(--tp-surface); }
.tp-tex-del .tp-ico { width: 13px; height: 13px; }
.tp-tex-card:hover .tp-tex-del, .tp-tex-card:focus-within .tp-tex-del { opacity: 1; }
@media (pointer: coarse) { .tp-tex-del { opacity: 1; } }
.tp-tex-more { margin-top: 10px; }
.tp-tex-foot { margin: 12px 0 0; font-size: var(--tp-fs-sm); }

/* ── Klantinstellingen (2026-09-16) ──────────────────────────────────────────────────────────
   Instellingen → Tuinplanner kan onderdelen voor klanten uitzetten. tuinplanner.php laat zulke
   elementen staan (de JS bindt op id) en geeft ze tp-feat-off; !important omdat veel van deze
   elementen eigen display-regels hebben. De 3D-overlay krijgt klassen van app.js
   (apply3dFeatureClasses), zodat 3d.js zelf niets van de instellingen hoeft te weten. */
.tp-feat-off { display: none !important; }
/* In de werkbalk moet ook de tab weg die het paneel opent, anders blijft er een knop over die een
   leeg paneel opent. De inhoud blijft er voor de zekerheid ook uit. */
.tp3d-off-env .tp3d-tab-zon,
.tp3d-off-env .tp3d-tab-weer,
.tp3d-off-env .tp3d-daypart,
.tp3d-off-env .tp3d-sundate,
.tp3d-off-env .tp3d-weather,
.tp3d-off-env .tp3d-env,
.tp3d-off-edit .tp3d-edit,
.tp3d-off-edit .tp3d-editbar,
.tp3d-off-ar .tp3d-tab-ar,
.tp3d-off-ar .tp3d-arpanel,
.tp3d-off-scenes .tp3d-tab-scenes,
.tp3d-off-scenes .tp3d-scenepanel,
.tp3d-off-walk .tp3d-walk,
.tp3d-off-walk .tp3d-walkpad,
.tp3d-off-walk .tp3d-anim,
.tp3d-off-quality .tp3d-quality,
.tp3d-off-growth .tp3d-growth,
.tp3d-off-growth .tp3d-maand,
.tp3d-off-photo .tp3d-render,
.tp3d-off-photo .tp3d-render-panel { display: none !important; }
/* Staat fotorealistisch uit en levert de aanroeper geen momentopname of schets (de losse planner),
   dan is het Foto-paneel leeg en hoort ook zijn tabknop weg. api.js zet tp3d-has-snapshot. */
.tp3d-off-photo:not(.tp3d-has-snapshot) .tp3d-tab-foto { display: none !important; }
/* Over foto (FEAT matchfoto): knop, strook, venster en de foto zelf. */
.tp3d-off-matchfoto .tp3d-matchfoto,
.tp3d-off-matchfoto .tp3d-mf-strook,
.tp3d-off-matchfoto .tp3d-mf-venster,
.tp3d-off-matchfoto .tp3d-mf-foto { display: none !important; }

/* Postcode + huisnummer in het offerteformulier (2026-09-16, assets/postcode-adres.js). */
.tp-form-pca-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tp-form-pca-row .tp-form-field { margin-bottom: 4px; }
.tp-form-pca .pca-card { color: var(--tp-text); }
/* Postcode-stap in "Slim starten" (2026-09-16). */
.tp-suggest-adres { padding: 4px 2px 6px; }
.tp-suggest-adres-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tp-suggest-adres-row .tp-form-field { margin: 4px 0; }
.tp-suggest-adres .pca-card { color: var(--tp-text); }
.tp-suggest-adres-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 6px; }
.tp-suggest-link {
  border: 0; background: none; padding: 4px 0; font: inherit; font-size: var(--tp-fs-sm);
  color: var(--tp-accent, #3E7A4F); text-decoration: underline; cursor: pointer;
}
.tp-kaart-picker[hidden] { display: none !important; }
@media (pointer: coarse) { .tp-suggest-link { min-height: 44px; } }
/* Adresquotum en inloggen voor meer adressen (2026-09-30, mkKlantStand/mkLoginBlok in suggest-popup.js). */
.tp-suggest-eerder { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 2px 0 8px; }
.tp-suggest-chip {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid var(--tp-border); background: var(--tp-surface-2); color: var(--tp-text);
  border-radius: 999px; padding: 4px 12px; font: inherit; font-size: var(--tp-fs-sm); cursor: pointer;
}
.tp-suggest-chip:hover, .tp-suggest-chip:focus-visible { border-color: var(--tp-accent); background: var(--tp-accent-soft); }
.tp-suggest-klant { margin: 8px 0 0; font-size: var(--tp-fs-sm); color: var(--tp-text-3); }
.tp-suggest-login { padding: 4px 2px 6px; }
.tp-suggest-login p { margin: 0 0 6px; }
.tp-suggest-login-sub { font-size: var(--tp-fs-sm); color: var(--tp-text-3); }
.tp-suggest-login .tp-form-field { margin: 6px 0; }
.tp-suggest-login-melding { margin-top: 6px; font-size: var(--tp-fs-sm); color: var(--tp-text); }
.tp-suggest-login-melding:empty { display: none; }
.tp-suggest-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (pointer: coarse) { .tp-suggest-chip { min-height: 44px; } }
/* Mijn ontwerpen (2026-09-30): voegMijnOntwerpenToe() in app/opslaan.js, in Bestand > Ontwerpen op dit
   apparaat, onder de terugkeer-link. Een ingelogde klant ziet zijn ontwerpen van elk apparaat; anders een
   e-mailveld voor een inloglink. De honeypot leent .tp-suggest-hp, de uitlogknop .tp-suggest-link. */
.tp-mijn-ontwerpen { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--tp-border); margin-bottom: 4px; min-width: 0; }
.tp-mijn-ontwerpen-kop { margin: 0; font-size: 0.95rem; color: var(--tp-text); }
.tp-mijn-ontwerpen p { margin: 0; }
.tp-mijn-ontwerpen-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.tp-mijn-ontwerp {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-width: 0;
  padding: 8px 12px; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm);
  background: var(--tp-surface-2); color: var(--tp-text); font: inherit; text-align: left; cursor: pointer;
}
.tp-mijn-ontwerp strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tp-fs-sm); }
.tp-mijn-ontwerp span { font-size: var(--tp-fs-xs); color: var(--tp-text-3); }
.tp-mijn-ontwerp:hover, .tp-mijn-ontwerp:focus-visible { border-color: var(--tp-accent); background: var(--tp-accent-soft); }
.tp-mijn-ontwerp.is-huidig { border-color: var(--tp-accent); cursor: default; }
.tp-mijn-ontwerp:disabled { opacity: 0.6; cursor: progress; }
.tp-mijn-ontwerpen > .tp-suggest-link { align-self: flex-start; }
.tp-mijn-ontwerpen-login .tp-form-field { margin: 6px 0; }
.tp-mijn-ontwerpen-login .tp-form-field input { width: 100%; max-width: 100%; box-sizing: border-box; }
.tp-mijn-ontwerpen-melding { margin-top: 6px; font-size: var(--tp-fs-sm); color: var(--tp-text); }
.tp-mijn-ontwerpen-melding:empty { display: none; }
@media (pointer: coarse) {
  .tp-mijn-ontwerp { min-height: 44px; justify-content: center; }
  .tp-mijn-ontwerpen-login .tp-btn { min-height: 44px; }
}

/* Vraagteken in de kop van een venster (helpcentrum, 2026-10-01, bindVensterHulp() in app/ui-binding.js):
   rechts naast het kruisje; margin-left:auto houdt het bij het kruisje ondanks justify-content:space-between. */
.tp-hulp-vraag { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--tp-radius-xs); background: none; color: var(--tp-accent); cursor: pointer; }
.tp-hulp-vraag:hover { background: var(--tp-accent-soft); }
.tp-hulp-vraag + .tp-modal-x { margin-left: 0; }
/* Focusring van de ?-knopjes en het seintje (toegankelijkheid, 2026-10-01): een volle accentlijn, want de
   gedeelde --tp-focus (accent op 35%) haalt maar 1,6:1 tegen de achtergrond. Met .tp-body ervoor, anders wint
   `.tp-body :is(button, ...):focus { outline: none }` bovenin. */
.tp-body :is(.tp-hulp-vraag, .tp3d-help, .tp-seintje button):focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; box-shadow: none; }
@media (pointer: coarse) { .tp-hulp-vraag { width: 44px; height: 44px; } }
/* Help in de 3D-werkbalk: rechts, vóór Sluiten (dat dan zijn eigen margin-left:auto afstaat). */
.tp3d-help { margin-left: auto; min-height: 44px; }
.tp3d-help:not([hidden]) + .tp3d-close { margin-left: 0; }
/* Uitleg bij een veld (helpcentrum, bindVeldUitleg() in app/ui-binding.js): klein rond knopje naast de naam. */
.tp-uitleg-knop { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin: 0 4px; padding: 0; vertical-align: 1px; border: 1px solid var(--tp-border-strong); border-radius: 50%; background: var(--tp-surface); color: var(--tp-accent); font: 700 10.5px/1 var(--tp-font); cursor: pointer; flex: 0 0 auto; }
.tp-uitleg-knop:hover, .tp-uitleg-knop:focus-visible { background: var(--tp-accent); color: var(--tp-accent-ink); border-color: var(--tp-accent); outline: none; }
.tp-body .tp-uitleg-knop:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 1px; }
/* Klein getekend (17 px, past in een label), maar het raakvlak is 27 px (WCAG 2.5.8: minstens 24), op een aanraakscherm 36 px. */
.tp-uitleg-knop { position: relative; }
.tp-uitleg-knop::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
@media (pointer: coarse) { .tp-uitleg-knop { width: 24px; height: 24px; font-size: 12px; } .tp-uitleg-knop::after { inset: -6px; } }
/* "Hulp nodig?"-seintje (app/hulp-seintje.js): onderaan in beeld, boven de statusbalk of de mobiele balk. */
.tp-seintje { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 65; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 14px; border: 1px solid var(--tp-border); border-radius: 999px; background: var(--tp-surface); color: var(--tp-text); box-shadow: var(--tp-shadow-2); font: 500 13.5px/1.3 var(--tp-font); animation: tp-seintje-in 0.3s ease-out; }
.tp-seintje[hidden] { display: none; }
.tp-seintje .tp-btn { flex: 0 0 auto; }
.tp-seintje-x { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; border: 0; background: none; color: var(--tp-text-2); cursor: pointer; font-size: 15px; padding: 4px 8px; border-radius: 50%; }
.tp-seintje-x:hover { background: var(--tp-surface-2); color: var(--tp-text); }
@media (pointer: coarse) { .tp-seintje-x { min-width: 44px; min-height: 44px; } }
@keyframes tp-seintje-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (max-width: 768px) { .tp-seintje { bottom: calc(var(--tp-mobilebar-h) + 12px); border-radius: var(--tp-radius); } }
@media (prefers-reduced-motion: reduce) { .tp-seintje { animation: none; } }
/* Moestuin, tabblad Te doen (app/moestuin-tedoen.js): per bed aanvinkbare regels, op de telefoon 44 px hoog. */
.tp-tedoen-bed { margin: 0 0 10px; padding: 6px 10px; border: 1px solid var(--tp-border); border-radius: 8px; background: var(--tp-surface-2); }
.tp-tedoen-kop { margin: 2px 0 4px; font-size: var(--tp-fs-sm); font-weight: 700; overflow-wrap: anywhere; }
.tp-tedoen-lijst { list-style: none; margin: 0; padding: 0; }
.tp-tedoen-taak label { display: flex; align-items: flex-start; gap: 10px; min-height: 36px; padding: 6px 0; cursor: pointer; font-size: var(--tp-fs-sm); overflow-wrap: anywhere; }
.tp-tedoen-taak input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--tp-accent); }
.tp-tedoen-taak + .tp-tedoen-taak { border-top: 1px solid var(--tp-border); }
/* Afgevinkt: doorgestreept is het teken, de kleur blijft leesbaar (text-3 haalde 3,1:1 licht en 3,7:1 donker,
   text-2 ruim 5:1 in beide; 2026-10-02, screenshots donker thema). */
.tp-tedoen-taak.is-klaar span { color: var(--tp-text-2); text-decoration: line-through; }
.tp-tedoen-maand .tp-btn { min-width: 36px; }
/* Komt het al op? (app/moestuin-kiemen.js): een gewone regel zonder vinkje; voorbij het kiemvenster met een
   streep in de waarschuwingskleur ervoor, de tekst blijft in de tekstkleur (contrast). */
.tp-tedoen-kiemen .tp-tedoen-taak { padding: 6px 0; font-size: var(--tp-fs-sm); overflow-wrap: anywhere; }
.tp-tedoen-kiemen .tp-tedoen-taak.is-laat { padding-left: 8px; border-left: 3px solid var(--tp-danger); }
.tp-teelt-bescherming { margin: 4px 0; font-size: var(--tp-fs-sm); }
@media (max-width: 600px), (pointer: coarse) {
  .tp-tedoen-taak label { min-height: 44px; align-items: center; }
  .tp-tedoen-maand .tp-btn { min-width: 44px; min-height: 44px; }
}
/* Te doen per week en afvinken via het dagboek (2026-10-02, app/moestuin-tedoen.js). */
.tp-tedoen-modus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.tp-tedoen-modus .tp-btn[aria-pressed="true"] { background: var(--tp-accent); color: var(--tp-accent-ink); border-color: var(--tp-accent); }
.tp-tedoen-nu { margin-left: auto; }
.tp-tedoen-week .tp-btn { flex: none; min-width: 36px; }
.tp-tedoen-week strong { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tp-tedoen-wanneer { color: var(--tp-text-2); font-size: var(--tp-fs-xs); }
/* Diepte en afstanden bij een zaai- of planttaak: eigen regel onder de taak. */
.tp-tedoen-maten { display: block; color: var(--tp-text-2); font-size: var(--tp-fs-xs); overflow-wrap: anywhere; }
.tp-tedoen-dagboek { flex: none; margin-left: auto; align-self: center; font-size: var(--tp-fs-xs); font-style: normal; color: var(--tp-accent); white-space: nowrap; }
@media (max-width: 600px), (pointer: coarse) {
  .tp-tedoen-modus .tp-btn, .tp-tedoen-week .tp-btn { min-width: 44px; min-height: 44px; }
}
/* Kalender: extra stappen als vaste vorm en kleur onder de balken (TP_STAP_KLEUR in app/moestuin-kalender.js). */
.tp-teelt-stappen { display: flex; justify-content: space-around; align-items: center; height: 9px; margin-top: 3px; }
.tp-teelt-stap { display: inline-block; width: 7px; height: 7px; }
.tp-teelt-stap.is-rond { border-radius: 50%; }
.tp-teelt-stap.is-vierkant { border-radius: 1px; }
.tp-teelt-stap.is-ruit { transform: rotate(45deg) scale(0.9); }
.tp-teelt-stap.is-driehoek { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tp-teelt-stap.is-leeg { visibility: hidden; }
.tp-bloei-legenda i.tp-teelt-stap { width: 8px; height: 8px; }
html[data-theme="dark"] .tp-teelt-stap { filter: brightness(1.45); }


/* Voedselbos (2026-10-02): venster #tp-modal-voedselbos en de sectie in het eigenschappenpaneel
   (app/voedselbos-venster.js). De kalender leunt op de tabel van de bloeikalender (.tp-bloei). */
.tp-vb-blok { margin: 14px 0 0; }
.tp-vb-blok h3 { margin: 0 0 6px; font-size: 14px; }
.tp-vb-lagen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tp-vb-lagen li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 4px 0; border-bottom: 1px solid var(--tp-border); }
.tp-vb-lagen li.is-leeg { opacity: 0.7; }
.tp-vb-stip { width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); }
.tp-vb-laagtekst { min-width: 0; }
.tp-vb-laagtekst strong { display: block; }
.tp-vb-laagtekst .tp-muted { display: block; font-size: var(--tp-fs-xs); overflow-wrap: anywhere; }
.tp-vb-tel { font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-vb-waarschuwing { margin: 6px 0; padding: 6px 10px; border-radius: 6px; background: var(--tp-warn-soft); color: var(--tp-text); border-left: 3px solid var(--tp-warn); }
.tp-vb-tips { margin: 4px 0 0; padding-left: 18px; font-size: var(--tp-fs-sm); color: var(--tp-text-2); }
.tp-vb-kal td { vertical-align: middle; }
.tp-vb-oogst, .tp-vb-snoei { display: inline-block; vertical-align: middle; border-radius: 3px; }
.tp-vb-kal .tp-vb-oogst { display: block; height: 12px; background: #d9822b; border: 1px solid rgba(0, 0, 0, 0.18); }
.tp-vb-kal .tp-vb-snoei { display: block; height: 5px; margin-top: 3px; background: var(--tp-text-2); }
.tp-vb-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 0 0; font-size: var(--tp-fs-xs); color: var(--tp-text-2); }
.tp-vb-legenda .tp-vb-oogst { width: 18px; height: 10px; background: #d9822b; }
.tp-vb-legenda .tp-vb-snoei { width: 18px; height: 5px; background: var(--tp-text-2); }
.tp-vb-feiten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.tp-vb-feiten dt { color: var(--tp-text-2); }
.tp-vb-feiten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.tp-vb-paneel p { margin: 2px 0; font-size: var(--tp-fs-sm); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .tp-vb-feiten { grid-template-columns: minmax(0, 1fr); }
  .tp-vb-feiten dd { margin-bottom: 4px; }
}