/* Theo in 3D (Arthur 18/10): plattegrond en 3D-model. Alleen klassen met tw-, niets anders geraakt.
   Kleuren uit het thema (theo-fase2.css: --f2-*), met een terugval. Grote raakvlakken (>= 44 px). */
.tw-card { padding: 12px; position: relative; --tw-ink: var(--text-strong); --tw-cream: var(--bg); --tw-sand: var(--surface-4);
  --tw-linen: var(--surface-3); --tw-olive: var(--text-2); --tw-brass: var(--brand); --tw-brass-deep: var(--brand-deep);
  --tw-brass-ink: var(--brand-ink); --tw-binnen: var(--p-oranje-fel); --tw-binnen-vul: var(--p-amber-tint); --tw-terras: var(--p-groen-terras); --tw-terras-vul: var(--p-blad-tint-2); --tw-rood: var(--p-baksteen); }
.tw-card [hidden], .tw-spook[hidden] { display: none !important; }
.tw-balk, .tw-lagen { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.tw-balk button, .tw-balk select { min-height: 44px; min-width: 44px; }
.tw-balk button[aria-pressed="true"] { background: var(--tw-ink); color: var(--tw-cream); }
.tw-spring { flex: 1 1 auto; }
.tw-spiegel { transform: scaleX(-1); }
.tw-stand { font-size:var(--t-m); color: var(--tw-olive); padding: 4px 10px; border-radius: 999px; transition: background-color .3s; }
.tw-stand.tw-nietbewaard { background: var(--warn-bg); color: var(--brand-ink); font-weight: 600; }
.tw-stand.tw-nietbewaard::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--p-oranje-fel); margin-right: 6px; vertical-align: 1px; }
.tw-stand.tw-bewaard { background: var(--blad-tint-2); color: var(--groen-nacht); font-weight: 600; }
.tw-werk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 8px; }
.tw-met-paneel .tw-werk { grid-template-columns: minmax(0, 1fr) 300px; }
.tw-vlak { position: relative; border: 1px solid var(--tw-sand); border-radius: 12px; overflow: hidden; background: var(--bg); }
.tw-svg { display: block; width: 100%; height: min(70vh, 720px); min-height: 380px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.tw-svg:active { cursor: grabbing; }
.tw-svg.tw-plaatsen, .tw-svg.tw-plaatsen .tw-el { cursor: crosshair; }
.tw-svg:focus-visible { box-shadow: inset 0 0 0 3px var(--tw-brass); }
.tw-bodem { fill: var(--on-chrome); }
.tw-bodem-plan { fill: var(--p-creme-0); }
.tw-gridlijn { stroke: rgba(94, 83, 55, .22); stroke-width: .02px; }
.tw-raster-plan .tw-gridlijn, .tw-raster-geen .tw-gridlijn { stroke: rgba(94, 83, 55, .16); }
.tw-scan { opacity: .92; image-rendering: auto; }
.tw-onderlaag image { pointer-events: none; }
.tw-laagmodus .tw-onderlaag image { pointer-events: auto; cursor: move; }
.tw-laagmodus .tw-els { opacity: .55; pointer-events: none; }
.tw-el { cursor: pointer; }
.tw-el .tw-vorm { fill: rgba(251, 248, 234, .94); stroke: var(--tw-olive); stroke-width: .04px; }
.tw-tafel .tw-vorm { fill: var(--p-creme-0); stroke: var(--p-messing-inkt); stroke-width: .05px; }
.tw-tafel.tw-z-binnen .tw-vorm { fill: var(--tw-binnen-vul); stroke: var(--tw-binnen); }
.tw-tafel.tw-z-terras .tw-vorm { fill: var(--tw-terras-vul); stroke: var(--tw-terras); }
.tw-tafel.tw-z-binnen .tw-zit { fill: var(--p-lijn-3); }
.tw-tafel.tw-z-terras .tw-zit { fill: var(--p-blad-licht); }
.tw-tafel.tw-los .tw-vorm { stroke-dasharray: .1 .07; }
.tw-tafel.tw-voorlopig .tw-vorm { stroke: var(--p-oranje-fel); stroke-dasharray: .14 .08; stroke-width: .06px; }
.tw-tafel.tw-bezet .tw-vorm { fill: var(--brand-2); stroke: var(--tw-brass-ink); stroke-width: .07px; }
.tw-zit { fill: var(--p-grijs); stroke: var(--tw-olive); stroke-width: .015px; }
.tw-bar .tw-vorm { fill: rgba(122, 93, 16, .6); stroke: var(--p-messing-nacht); }
.tw-keuken .tw-vorm { fill: rgba(140, 125, 84, .3); stroke: var(--tw-olive); stroke-dasharray: .15 .08; }
.tw-werkpost .tw-vorm { fill: rgba(43, 108, 176, .22); stroke: var(--p-blauw-donker); }
.tw-deur .tw-vorm { fill: var(--p-plant-donker); stroke: var(--p-plant-donker); }
.tw-muur .tw-vorm { fill: var(--chrome-3); stroke: var(--chrome-3); }
.tw-plant .tw-vorm { fill: var(--p-plant); stroke: var(--p-plant-donker); stroke-width: .03px; }
.tw-plant .tw-blad { fill: var(--p-plant-licht); pointer-events: none; }
.tw-terras .tw-vorm { fill: rgba(47, 122, 70, .08); stroke: var(--tw-terras); stroke-dasharray: .2 .1; }
.tw-label .tw-vorm { fill: transparent; stroke: transparent; }
.tw-label.tw-sel .tw-vorm { stroke: rgba(94, 83, 55, .4); }
.tw-txt { text-anchor: middle; fill: var(--tw-ink); font-weight: 600; pointer-events: none; font-family: system-ui, sans-serif; }
.tw-txt.tw-nr { font-weight: 800; paint-order: stroke; stroke: rgba(255, 255, 255, .75); stroke-width: .05px; }
.tw-bar .tw-txt, .tw-muur .tw-txt, .tw-deur .tw-txt { fill: var(--tw-cream); }
.tw-sel .tw-vorm { stroke: var(--tw-brass-deep) !important; stroke-width: .08px !important; stroke-dasharray: none !important; }
/* het plan: lijnen (muren, buitenlijn, werkbladen) */
.tw-raak { fill: none; stroke: transparent; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; }
.tw-lijn { fill: none; stroke-linecap: square; stroke-linejoin: miter; pointer-events: none; }
.tw-muurlijn .tw-lijn { stroke: var(--tw-ink); }
.tw-achter-scan .tw-muurlijn .tw-lijn { stroke: rgba(21, 18, 14, .55); }
.tw-contour .tw-lijn { stroke: var(--tw-olive); fill: rgba(94, 83, 55, .06); }
.tw-contour.tw-buiten .tw-lijn { stroke: var(--chrome-3); fill: rgba(239, 231, 204, .35); stroke-dasharray: none; }
.tw-achter-scan .tw-contour .tw-lijn { fill: none; stroke: rgba(58, 51, 40, .5); }
.tw-muurlijn.tw-sel .tw-lijn, .tw-contour.tw-sel .tw-lijn { stroke: var(--tw-brass-deep); }
.tw-voorbeeld .tw-el { pointer-events: none; }
.tw-kader { fill: none; stroke: var(--tw-brass-deep); pointer-events: none; }
.tw-steel { stroke: var(--tw-brass-deep); pointer-events: none; }
.tw-greep { fill: var(--wit); stroke: var(--tw-brass-deep); cursor: pointer; }
.tw-greep.tw-tussen { fill: var(--tw-cream); opacity: .9; }
.tw-greep.tw-punt-sel { fill: var(--tw-brass); }
.tw-gids { stroke: var(--p-roze-fel); stroke-dasharray: .1 .06; pointer-events: none; }
.tw-lasso { fill: rgba(212, 175, 55, .12); stroke: var(--tw-brass-deep); stroke-dasharray: .12 .08; }
.tw-bon rect { fill: var(--tw-ink); }
.tw-bon text { fill: var(--brand-2); font-size:var(--t-xs); text-anchor: middle; dominant-baseline: central; font-weight: 700; font-family: system-ui, sans-serif; pointer-events: none; }
.tw-wie text { fill: var(--p-blauw-donker); font-size:var(--t-xs); text-anchor: middle; font-weight: 700; font-family: system-ui, sans-serif; paint-order: stroke; stroke: var(--tw-cream); stroke-width: .06px; pointer-events: none; }
.tw-wie .tw-pauze { fill: var(--p-olijf); }
.tw-wie .tw-niemand { fill: var(--tw-rood); font-weight: 500; }
/* zwevend op de plattegrond */
.tw-achterkeus { position: absolute; left: 8px; top: 8px; display: inline-flex; background: color-mix(in srgb, var(--bg) 96%, transparent); border: 1px solid var(--tw-sand); border-radius: 999px; padding: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.tw-achterkeus button, .tw-seg button { min-height: 38px; padding: 4px 14px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; color: var(--tw-olive); }
.tw-achterkeus button[aria-checked="true"], .tw-seg button[aria-checked="true"] { background: var(--tw-ink); color: var(--tw-cream); }
.tw-seg { display: inline-flex; background: var(--tw-linen); border-radius: 999px; padding: 3px; flex-wrap: wrap; }
.tw-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tw-zoom button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 96%, transparent); border-radius: 10px; }
.tw-schaal { position: absolute; left: 10px; bottom: 8px; display: flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--bg) 90%, transparent); padding: 2px 8px; border-radius: 6px; pointer-events: none; }
.tw-schaal span { display: inline-block; height: 6px; border: 2px solid var(--tw-olive); border-top: 0; }
.tw-banner { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  max-width: calc(100% - 24px); background: var(--tw-ink); color: var(--tw-cream); border-radius: 12px; padding: 8px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.2); font-size:var(--t-m); z-index: 3; }
.tw-banner button { min-height: 40px; }
.tw-banner .quiet { color: var(--tw-cream); }
.tw-toast { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); background: var(--tw-ink); color: var(--tw-cream); padding: 10px 16px; border-radius: 12px;
  font-size:var(--t-m); max-width: calc(100% - 32px); box-shadow: 0 4px 16px rgba(0,0,0,.2); z-index: 4; pointer-events: none; text-align: center; }
.tw-leeg { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; padding: 12px; }
.tw-leeg-kaart { pointer-events: auto; position: relative; max-width: 480px; background: color-mix(in srgb, var(--bg) 97%, transparent); border: 1px solid var(--tw-sand); border-radius: 14px; padding: 16px 18px; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.tw-leeg-kaart p { margin: 6px 0 12px; }
.tw-leeg-knoppen { display: flex; flex-direction: column; gap: 8px; }
.tw-leeg-knoppen button { min-height: 44px; }
.tw-leeg-weg { position: absolute; right: 6px; top: 6px; min-width: 40px; min-height: 40px; }
/* popovers: palet, lagen, meer */
.tw-pop { position: absolute; z-index: 20; top: 64px; left: 12px; background: var(--tw-cream); border: 1px solid var(--tw-sand); border-radius: 14px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); max-width: min(560px, calc(100% - 24px)); }
.tw-lagenpaneel { left: auto; right: 12px; width: 360px; }
.tw-meerpaneel { left: auto; right: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 300px; }
.tw-meerpaneel[hidden], .tw-pop[hidden] { display: none; }
.tw-meerpaneel button { text-align: left; min-height: 44px; justify-content: flex-start; }
.tw-pop-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tw-pop-uitleg { margin: 0 0 10px; }
.tw-pop-kop .tw-sluit, .tw-pop-kop .tw-histweg { margin-left: auto; min-width: 44px; min-height: 44px; }
.tw-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tw-tegel { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 84px; padding: 8px 4px; border: 1px solid var(--tw-sand); border-radius: 12px; background: var(--raised); touch-action: none; cursor: grab; font-size:var(--t-s); }
.tw-tegel:hover, .tw-tegel:focus-visible { border-color: var(--tw-brass-deep); background: var(--surface); }
.tw-tegel svg, .tw-spook svg { width: 40px; height: 40px; fill: var(--p-amber-tint); stroke: var(--tw-olive); stroke-width: 1.5; }
.tw-tegel svg .z, .tw-spook svg .z { fill: var(--p-lijn-3); stroke-width: 1; }
.tw-tegel svg .d, .tw-spook svg .d { fill: var(--p-messing-inkt); stroke: var(--p-messing-nacht); }
.tw-tegel svg .g, .tw-spook svg .g { fill: var(--p-plant); stroke: var(--p-plant-donker); }
.tw-tegel svg .b, .tw-spook svg .b { fill: rgba(43, 108, 176, .2); stroke: var(--p-blauw-donker); }
.tw-tegel svg .bd { fill: none; stroke: var(--p-blauw-donker); }
.tw-tegel svg .t { fill: rgba(47, 122, 70, .1); stroke: var(--p-groen-terras); }
.tw-tegel svg .m, .tw-spook svg .m { fill: none; stroke: var(--tw-ink, var(--chrome)); stroke-width: 4; }
.tw-tegel svg text { fill: var(--tw-ink); stroke: none; }
.tw-palet-weg { opacity: .25; pointer-events: none; }
.tw-spook { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; width: 44px; height: 44px; background: color-mix(in srgb, var(--bg) 90%, transparent); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.25); display: grid; place-items: center; }
.tw-groep { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.tw-vink { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; }
.tw-vink input { width: 20px; height: 20px; }
.tw-laagrij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--tw-sand); }
.tw-laagrij input[type="range"] { flex: 1 1 100px; }
.tw-laagrij button, .tw-laagnieuw { min-height: 40px; }
/* het paneel: naast de plattegrond (pc), onderaan (gsm) */
.tw-paneel { border: 1px solid var(--tw-sand); border-radius: 12px; background: var(--tw-cream); padding: 12px; align-self: start; max-height: min(70vh, 720px); overflow: auto; }
.tw-paneel[hidden] { display: none; }
.tw-paneel-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size:var(--t-l); }
.tw-paneel-kop .tw-desel { margin-left: auto; min-width: 44px; min-height: 44px; }
.tw-velden { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; }
.tw-veld { display: flex; flex-direction: column; gap: 3px; font-size:var(--t-s); color: var(--tw-olive); }
.tw-veld input, .tw-veld select { min-height: 44px; font-size:var(--t-base); }
.tw-veld.tw-breed, .tw-paneel .tw-veld { flex: 1 1 100%; }
.tw-veld input[type="number"] { width: 100%; }
.tw-nummer { font-size:var(--t-2xl) !important; font-weight: 800; width: 100%; }
.tw-stap { display: inline-flex; gap: 4px; align-items: stretch; }
.tw-stap button { min-width: 44px; min-height: 44px; font-size:var(--t-xl); }
.tw-stap input { width: 70px !important; text-align: center; }
.tw-ls { display: flex; gap: 6px; flex-wrap: wrap; }
.tw-ls select[data-lsfilter] { flex: 0 0 auto; }
.tw-ls select[data-v] { flex: 1 1 160px; min-width: 0; }
.tw-acties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tw-acties button { min-height: 44px; }
.tw-uitlijn button { min-width: 44px; padding: 0 8px; }
.tw-gevaar { color: var(--tw-rood); }
.tw-uitleg { margin: 6px 0 0; }
.tw-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 8px; font-size:var(--t-s); }
.tw-lg { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 5px; vertical-align: -2px; border: 2px solid; }
.tw-lg-binnen { background: var(--tw-binnen-vul); border-color: var(--tw-binnen); }
.tw-lg-terras { background: var(--tw-terras-vul); border-color: var(--tw-terras); }
.tw-lg-los { background: var(--surface); border-color: var(--p-messing-inkt); border-style: dashed; }
.tw-lg-voorlopig { background: var(--surface); border-color: var(--p-oranje-fel); border-style: dashed; }
.tw-lg-bezet { background: var(--messing-licht); border-color: var(--p-messing-inkt); }
.tw-livestand { color: var(--blauw-donker); }
.tw-voet { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.tw-histlijst { margin-top: 10px; overflow-x: auto; border: 1px solid var(--tw-sand); border-radius: 12px; padding: 10px; }
.tw-histlijst[hidden] { display: none; }
.tw-hist { width: 100%; border-collapse: collapse; font-size:var(--t-m); }
.tw-hist th, .tw-hist td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--tw-sand); }
.tw-hist button { min-height: 40px; }
/* 3D */
.tw-3d { position: relative; width: 100%; height: min(72vh, 720px); min-height: 380px; border-radius: 12px; overflow: hidden; background: var(--surface-3); touch-action: none; }
.tw-3d canvas { display: block; touch-action: none; }
.tw-voortgang { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 6px; background: rgba(255,255,255,.4); border-radius: 3px; overflow: hidden; }
.tw-voortgang span { display: block; height: 100%; background: var(--tw-brass); width: 0; transition: width .2s; }
.tw-voortgang[hidden] { display: none; }
.tw-pad { position: absolute; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 52px); gap: 6px; }
.tw-pad[hidden] { display: none; }
.tw-pad button { font-size:var(--t-xl); background: color-mix(in srgb, var(--bg) 90%, transparent); border-radius: 12px; touch-action: none; user-select: none; -webkit-user-select: none; }
.tw-pad [data-loop="vooruit"] { grid-column: 2; grid-row: 1; }
.tw-pad [data-loop="links"] { grid-column: 1; grid-row: 2; }
.tw-pad [data-loop="achteruit"] { grid-column: 2; grid-row: 2; }
.tw-pad [data-loop="rechts"] { grid-column: 3; grid-row: 2; }
.tw-weergave button { min-height: 40px; }
@media (max-width: 700px) {
  .tw-card { padding: 8px; }
  .tw-balk-plan { gap: 4px; }
  .tw-balk-plan button { padding: 0; width: 44px; min-width: 44px; justify-content: center; flex: 0 0 auto; }
  .tw-balk-plan .tw-spring { display: none; }
  .tw-balk-plan .tw-bewaar { margin-left: auto; }
  .tw-balk button { padding: 4px 10px; }
  .tw-balk-plan .tw-stand { order: 10; flex: 1 1 100%; font-size:var(--t-xs); padding: 2px 8px; text-align: right; background: none; }
  .tw-balk-plan .tw-stand.tw-nietbewaard { background: none; }
  .tw-add span, .tw-bewaar span { display: none; }
  .tw-tk { display: none; }
  .tw-stand { font-size:var(--t-xs); padding: 3px 8px; }
  .tw-met-paneel .tw-werk { grid-template-columns: minmax(0, 1fr); }
  .tw-svg { height: 64vh; min-height: 340px; }
  .tw-3d { height: 62vh; }
  /* het paneel als bottom sheet */
  .tw-paneel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-height: 40vh; border-radius: 16px 16px 0 0; border-bottom: 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,.2); padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); }
  .tw-paneel::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--tw-sand); margin: 0 auto 6px; }
  .tw-pop { z-index: 40; position: fixed; left: 8px !important; right: 8px !important; top: auto; bottom: 8px; width: auto; max-width: none; max-height: 70vh; overflow: auto; }
  .tw-tegels { grid-template-columns: repeat(3, 1fr); }
  .tw-achterkeus button { padding: 4px 10px; }
  .tw-banner { top: 52px; font-size:var(--t-s); }
}
@media (prefers-reduced-motion: reduce) {
  .tw-stand, .tw-voortgang span { transition: none; }
}