.canvas-top{position:absolute;left:16px;top:16px;right:16px;z-index:12;padding:0;border:0;background:transparent;box-shadow:none;pointer-events:none}
#site-edit{display:flex;align-items:center;gap:8px;min-height:38px;max-width:100%;padding:8px 12px;border:0;border-radius:7px;background:rgba(244,241,233,.94);color:#262720;font-size:13px;white-space:nowrap;box-shadow:0 2px 10px #26272012}
#site-edit[aria-expanded=true]{outline:2px solid #525b3f}
.site-chip-name{overflow:hidden;text-overflow:ellipsis;max-width:230px;font-weight:650}
#site-edit.is-placeholder .site-chip-name{color:#77796c;font-weight:400}
.site-chip-size{font-weight:400;flex-shrink:0}
.site-chip-pencil{margin-left:2px}
.site-swatch{flex:0 0 14px;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(38,39,32,.2)}
[data-surface=grass].site-swatch,[data-surface=grass].surface-thumb{background:#819176 url('/backdrops/tex-grass.jpg') center/40px}
[data-surface=deck].site-swatch,[data-surface=deck].surface-thumb{background:#b5aa90 url('/backdrops/tex-deck.jpg') center/40px}
[data-surface=gravel].site-swatch,[data-surface=gravel].surface-thumb{background:#aaa99e url('/backdrops/tex-gravel.jpg') center/40px}
[data-surface=other].site-swatch,[data-surface=other].surface-thumb{background:#e4dfd3}
.site-popover{position:absolute;z-index:30;width:304px;padding:18px;background:#f4f1e9;border:0;border-radius:10px;box-shadow:0 14px 44px rgba(38,39,32,.2);color:#262720;max-height:calc(100dvh - 160px);overflow-y:auto;pointer-events:auto}
.site-popover[hidden],.surface-hint[hidden]{display:none}
.site-popover h2{font:650 15px/1.4 system-ui,sans-serif;margin:0 0 16px}
.site-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.site-fields label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:13px;color:#65685c;margin:0}
.site-fields input{min-width:0;width:100%;height:36px;font-size:13px;background:#fffef9;border:1px solid #d8d6cc;border-radius:4px;padding:6px 8px;color:#262720;margin-top:0}
.site-popover fieldset{border:0;padding:0;margin:15px 0 0}
.site-popover legend{font-size:13px;margin-bottom:6px;color:#65685c}
.surface-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
button.surface-tile{display:flex;flex-direction:column;align-items:center;gap:5px;background:transparent;color:#4a4b42;border:2px solid transparent;border-radius:7px;padding:5px 3px;font-size:13px;line-height:1.3;min-width:0}
button.surface-tile[aria-pressed=true]{border-color:#525b3f;background:#525b3f12}
.surface-thumb{display:block;width:100%;height:36px;border-radius:4px;box-shadow:inset 0 0 0 1px #26272012}
.surface-caption{font-size:13px;line-height:1.5;color:#65685c;margin:10px 0 16px}
#site-pop-error{font-size:13px;color:#944929;line-height:1.4;margin:10px 0}
.site-pop-actions{display:flex;align-items:center;gap:8px}
.site-pop-actions>span{flex:1}
.site-pop-actions button{border:0;background:transparent;border-radius:5px;padding:8px;font-size:13px;white-space:nowrap}
.site-pop-actions .site-pop-done{background:#525b3f;color:#f4f1e9;padding-inline:14px}
#site-boundary-actions{flex-wrap:wrap;margin-bottom:16px}
#site-boundary-actions button{border:1px solid #d8d6cc;background:#fffef9;padding-inline:12px}
.surface-hint{position:absolute;z-index:29;max-width:calc(100% - 24px);width:max-content;border-radius:5px;background:#262720;color:#f4f1e9;padding:10px 12px;font-size:13px;line-height:1.5;pointer-events:none;box-shadow:0 3px 10px #26272015}
.surface-hint:before{content:'';position:absolute;left:20px;top:-5px;width:10px;height:10px;background:#262720;transform:rotate(45deg)}
#wizard-surface-tiles{margin-top:6px;max-width:340px}
#wizard-dialog:has(#wizard-surface-tiles)::backdrop{background:rgba(38,39,32,.12);backdrop-filter:none}
@media(max-width:700px){
  .canvas-top{left:0;right:0;top:12px;padding-inline:12px}
  #site-edit{gap:5px;padding:7px 8px;min-height:36px}
  .site-chip-name{max-width:135px}
  .site-chip-pencil{display:none}
  .site-popover{position:fixed;max-height:calc(100dvh - 140px);padding:16px}
  .site-fields input{height:44px;font-size:16px}
  .site-pop-actions button{min-height:44px}
  .surface-hint{white-space:normal;width:280px}
}
.canvas-wrap:has(#site-popover:not([hidden])) #canvas-empty{display:none}

/* Mobile sheets stay above the visual keyboard; actions remain reachable. */
@media(max-width:700px){
 #site-popover{position:fixed;inset:auto 0 var(--kbd,0px);margin:0;width:100%;max-width:none;max-height:calc(var(--vvh,100dvh) - 24px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box;border-radius:18px 18px 0 0;padding:24px 20px 0;}
 #site-popover-form > .site-pop-actions{position:sticky;bottom:0;margin:20px -20px 0;padding:12px 20px max(16px,env(safe-area-inset-bottom));background:#f4f1e9;box-shadow:0 -10px 10px -6px #f4f1e9;z-index:1;}
}
.site-pop-lookup{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:10px 0 0;font-size:12px;line-height:1.5;color:#5f6a4c}
.site-pop-lookup.is-busy{color:#848977}
.site-pop-lookup a{color:#535f3f;text-decoration:underline;text-underline-offset:3px}
.site-pop-lookup .lookup-suggest{display:block;width:100%;height:46px;border:0;margin-top:2px;background:transparent}