/* MAMO room planner and 3D view. Loaded only on the planner page. */
.planhead{display:grid;gap:14px;padding-block:0 28px;max-width:70ch}.planhead p{font-size:17px;margin:0}
.planner{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;gap:24px;align-items:start;padding-bottom:96px}
@media (max-width:1180px){.planner{grid-template-columns:minmax(0,1fr) 320px}.planner>.pside:first-child{grid-column:1/-1;order:2}.pmain{order:1}.planner>.pside:last-child{order:1}}
@media (max-width:820px){.planner{grid-template-columns:1fr}.pmain{order:0}.planner>.pside:last-child{order:1}.planner>.pside:first-child{order:2}}
.pbox{background:var(--paper);border:1px solid var(--rule);padding:20px;display:grid;gap:14px}
.pbox h2{font-size:22px}.pbox .row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.pbox label{display:grid;gap:6px;font-size:13px;color:var(--taupe)}
.pbox input{width:110px;height:44px;border:1px solid var(--sand);background:var(--ivory);padding:0 12px;font:500 16px var(--text);color:var(--cocoa);border-radius:2px;font-variant-numeric:tabular-nums}
.pbox input:focus{outline:2px solid var(--clay);outline-offset:1px;border-color:transparent}
.btn.small{min-height:40px;padding:0 16px;font-size:14px}
.pside{display:grid;gap:16px;position:sticky;top:calc(var(--header) + 16px);max-height:calc(100vh - var(--header) - 32px);overflow:auto}
@media (max-width:1180px){.pside{position:static;max-height:none}}
.pal h3{font:600 13px/1 var(--text);color:var(--taupe);margin-top:6px}
.pal ul,.plist{list-style:none;margin:0;padding:0;display:grid}
.pal li,.plist li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--rule)}
.pal .ph,.plist .ph{width:48px;aspect-ratio:1}
.pal b,.plist b{font:400 16px/1.15 var(--display);display:block}.pal small,.plist small{display:block;font-size:12px;color:var(--taupe)}
.pal li button{border:1px solid var(--sand);background:var(--ivory);padding:8px 12px;font:600 13px var(--text);cursor:pointer;border-radius:2px;color:var(--clay);transition:transform 140ms var(--ease-out)}
.pal li button:active{transform:scale(.96)}.pal li button:disabled{color:var(--taupe);cursor:not-allowed;opacity:.6}
.plist li.sel{background:rgb(235 207 194/.35)}.plist li.bad b{color:var(--clay)}
.plist .acts{display:grid;gap:4px}.plist .acts button{border:0;background:none;padding:4px 0;font-size:12px;cursor:pointer;color:var(--taupe);text-decoration:underline;text-underline-offset:.2em}
.plist .empty{grid-template-columns:1fr}
.pwarn p{font-size:14px;color:var(--clay)}
.pmain{display:grid;gap:10px;min-width:0}
.pcanvas{background:var(--paper);border:1px solid var(--rule);touch-action:none;user-select:none}
.pcanvas svg{width:100%;height:auto;display:block;max-height:74vh}
.pcanvas .pgrid line{stroke:var(--rule);stroke-width:.6}
.pcanvas .room{fill:var(--ivory);stroke:var(--cocoa);stroke-width:5}
.pcanvas .pdim line{stroke:var(--taupe);stroke-width:.8}.pcanvas .pdim text{fill:var(--taupe);font-family:var(--text)}
.pcanvas .pit{cursor:grab;outline:none}.pcanvas .pit:active{cursor:grabbing}
.pcanvas .pit rect{stroke:var(--cocoa);stroke-width:1.2;transition:stroke-width 120ms ease}
.pcanvas .pit text{fill:var(--cocoa);font-family:var(--display);pointer-events:none}.pcanvas .pit text.pd{font-family:var(--text);fill:var(--taupe)}
.pcanvas .pit.sel rect,.pcanvas .pit:focus-visible rect{stroke:var(--clay);stroke-width:3}
.pcanvas .pit rect.fence{stroke:#B98F5E;stroke-width:5}.pcanvas .pit.sel rect.fence{stroke:var(--clay)}
.pcanvas .pit rect.back{fill:var(--cocoa);opacity:.55;stroke:none}
.pcanvas .pit.bad rect{stroke:var(--clay);stroke-width:2.5;stroke-dasharray:6 4}
.pcanvas .open rect{fill:var(--paper);stroke:var(--taupe);stroke-width:1}
.pcanvas .open{cursor:grab;outline:none}.pcanvas .open.sel rect,.pcanvas .open:focus-visible rect{stroke:var(--clay);stroke-width:2}
.pcanvas .open line{stroke:var(--taupe);stroke-width:1.5}
.pcanvas .swing{fill:rgb(217 197 168/.18);stroke:var(--taupe);stroke-width:1;stroke-dasharray:4 3}
.phint{font-size:13px;color:var(--taupe)}
.vizrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
dialog.viz{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:var(--ivory);color:var(--cocoa)}
dialog.viz[open]{display:flex;flex-direction:column;animation:mamo-vizin 300ms var(--ease-out)}
@keyframes mamo-vizin{from{opacity:0;transform:scale(.985)}}
dialog.viz::backdrop{background:var(--ivory)}
.vizhead{display:flex;justify-content:space-between;align-items:center;padding:16px var(--gutter);border-bottom:1px solid var(--rule)}
.vizhead h2{font-size:clamp(24px,2.6vw,34px)}
.vizbody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px}
@media (max-width:860px){.vizbody{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}}
.vizstage{position:relative;min-height:0;touch-action:none;cursor:grab;background:var(--ivory)}
.vizstage:active{cursor:grabbing}.vizstage canvas{width:100%!important;height:100%!important;display:block}
.vizside{border-left:1px solid var(--rule);padding:20px;display:grid;gap:16px;align-content:start;overflow:auto;background:var(--paper)}
@media (max-width:860px){.vizside{border-left:0;border-top:1px solid var(--rule);max-height:38vh}}
.vizctl{display:flex;gap:8px;flex-wrap:wrap}
.vizctl.seg button[aria-pressed="true"]{background:var(--cocoa);color:var(--ivory);box-shadow:none}
.vizlist{list-style:none;margin:0;padding:0;display:grid}
.vizsel{display:grid;gap:8px;padding:14px;background:rgb(235 207 194/.35);border:1px solid var(--blush)}
.vizsel b{font:400 20px/1.15 var(--display)}
.vizlist li.sel{background:rgb(235 207 194/.35)}
.vizlist .vname{background:none;border:0;padding:0;text-align:left;cursor:pointer;font:400 16px/1.2 var(--display);color:var(--cocoa)}
.vizlist .vturn{grid-column:2;display:flex;gap:12px;margin-top:4px}
.vizlist .vturn button{background:none;border:0;padding:4px 0;font:500 12px var(--text);color:var(--clay);cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.vizlist li{display:grid;grid-template-columns:16px 1fr;column-gap:10px;padding:8px 0;border-top:1px solid var(--rule);font:400 16px/1.2 var(--display)}
.vizlist i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgb(0 0 0/.15);margin-top:2px}
.vizlist small{grid-column:2;font:400 12px var(--text);color:var(--taupe)}

.mamo-planner h2{margin:0}.mamo-planner .pbox h2{font-family:var(--display);font-weight:400}
.mamo-planner .row.spread{justify-content:space-between}
.mamo-planner .sum{display:grid;gap:10px;font-size:15px}.mamo-planner .sum>div{display:flex;justify-content:space-between;gap:12px}
.mamo-planner .sum .total{font-size:18px;font-weight:600;padding-top:10px;border-top:1px solid var(--rule)}
.mamo-planner .note{font-size:13px;color:var(--taupe);margin:0}
.mamo-planner .pwarn p,.mamo-planner .phint{margin:0}
.vizhead form{margin:0}
@media (prefers-reduced-motion:reduce){dialog.viz[open]{animation:none}}

/* comfortable tap targets on phones */
.plist .acts button{min-height:32px;padding:6px 4px;font-size:13px}
.pal li button{min-height:40px}