/* Larger controls and explicit selection for the first public version. */
#fence-canvas,#fence-canvas .opening{touch-action:pan-x pan-y pinch-zoom}
#fence-canvas .opening[aria-pressed="true"],#fence-canvas .opening[aria-pressed="true"] *{touch-action:none}
.touch-controls #fence-canvas .opening,.touch-controls #fence-canvas .opening:active{cursor:pointer}
.touch-controls #fence-canvas .opening[aria-pressed="true"]{cursor:grab}
.touch-controls #fence-canvas .opening[aria-pressed="true"]:active{cursor:grabbing}
.touch-controls .layout-panel{display:flex;flex-direction:column}
.touch-controls .layout-header{order:0}.touch-controls .editor-instruction{order:1}
.touch-controls .canvas-scroll{order:2}.touch-controls .canvas-footer{order:3}
.touch-controls .selected-element{order:4;margin-bottom:14px}.touch-controls .layout-notes{order:5}
.finish-edit{width:100%;margin-top:14px;min-height:44px;background:#fff}
@media(max-width:720px){
 #configurator{padding-inline:8px}
 #configurator .control-section{padding:16px 12px}
 #configurator .models{grid-template-columns:repeat(2,minmax(0,1fr));max-width:372px}
 #configurator .model,#configurator .model.selected{display:block;min-width:0;padding:10px;border-width:1px;text-align:center}
 #configurator .mini-fence{width:100%;max-width:140px;height:auto;aspect-ratio:2/1;margin:4px auto 8px}
 #configurator .model small{white-space:normal;line-height:1.4}
 #configurator .layout-panel{margin-left:-8px;margin-right:-8px;border-left:0;border-right:0;border-radius:0}
 #configurator .layout-header{padding:16px 12px 12px}
 #configurator .editor-instruction{margin:0 12px;font-size:12px}
 #configurator .selected-element{margin:12px;padding:12px}
 #configurator .selected-element input{font-size:16px;min-height:44px;width:88px}
 #configurator .selection-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
 #configurator .selection-actions label{grid-column:1/4}
 #configurator .selection-actions #position{grid-column:4/6;width:100%}
 #configurator .selection-actions>span{grid-column:6}
 #configurator .selection-actions>button{grid-column:span 3}
 #configurator .selected-element .move-btn,#configurator .selected-element .swap-btn{min-height:44px;font-size:12px}
 #configurator .layout-notes{padding:12px}
 #configurator .zoom button{width:44px;height:44px}
 #configurator .canvas-footer{padding:8px 12px;flex-wrap:wrap}
 #configurator .view-toggle button{min-height:44px}
}
#load-panel[hidden],#configurator[hidden],.quote-bar[hidden],#project-loaded[hidden],#retry-load[hidden]{display:none!important}
.load-panel{max-width:800px;margin:32px auto;padding:32px 24px;min-height:230px;background:#fff;border:1px solid #d9e5ed;border-radius:12px}.load-panel h1{font-size:24px;margin:0 0 16px}.load-panel p{font-size:15px;line-height:1.7;margin-bottom:24px}.load-panel .primary{padding:14px 24px}.project-loaded{padding:14px 18px;margin:0 0 22px;border:1px solid #c2ddcd;border-radius:7px;background:#eff8f3;color:#276442;font-size:13px;line-height:1.6}
.selected-element .remove{white-space:nowrap}
select{height:44px;font-size:12px}.field-label{font-size:12px}.field-help{font-size:11px}.section-heading h2{font-size:15px}.model strong{font-size:13px}.model small{font-size:10px}.check{font-size:12px}.check input{width:18px;height:18px}.check small{font-size:10px}.mini-fence.piano{background:repeating-linear-gradient(#434f59 0,#394650 8px,transparent 8px,transparent 9px)}
.post-section .field-label{display:flex;justify-content:space-between;gap:8px}.post-section .field-label span{font-weight:400;color:#71828c;white-space:nowrap}.post-section select{font-size:11px}.post-section .field-help:first-of-type{margin-top:-6px}.included-note{font-size:12px;line-height:1.6;background:#eff8f3;color:#27784f;padding:12px;margin-top:16px;border-radius:6px}
.selected-element{display:block;border:1px solid #98cbb7;border-radius:8px;background:#f2faf6;padding:13px 14px;margin:16px 23px 0;font-size:12px}.selection-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.selection-top strong{color:#247450;font-size:14px}.selected-element .remove{font-size:12px;border:1px solid #e8bcb2;border-radius:5px;background:#fff;color:#a4422d;margin:0;padding:10px 12px;min-height:42px}.selection-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.selection-actions label{font-size:11px;color:#4b695b}.selected-element input{width:74px;padding:10px 8px;font-size:13px;background:white;color:#2a5f49;border-color:#b6d8c7}.selected-element .move-btn,.selected-element .swap-btn{border:1px solid #c8dfd3;border-radius:5px;background:#fff;min-height:40px;font-size:11px;padding:8px 9px}.selected-element .swap-btn{color:#277851}.element-options{margin-top:12px;border-top:1px solid #d4e7dc;padding-top:10px}.element-options summary{cursor:pointer;font-size:11px;color:#567567}.element-options summary span{margin-left:8px;color:#2b634c}.element-options label{display:block;margin:10px 0 6px;font-size:11px;color:#4e6b5d}.element-options select{width:100%;font-size:12px;height:42px}.element-options p{font-size:11px;line-height:1.5;margin-top:10px}.legend .green{background:#279568}#fence-canvas .opening:focus-visible .outline{stroke:#279568;stroke-width:3}.editor-instruction{font-size:12px;line-height:1.5}.editor-instruction button{font-size:11px;min-height:40px}.layout-notes{font-size:11px}.photo-bottom>span{max-width:240px;font-size:10px}.photo-bottom p{font-size:12px}.materials-strip p{font-size:11px}.warnings{font-size:12px}.reassurance{padding:25px;margin-top:18px;background:#edf3f6;border-radius:9px}.reassurance span{font-size:17px;color:#244760}.reassurance p{font-size:13px;color:#728390;line-height:1.7;margin-top:8px;max-width:550px}.quote-price>span{font-size:12px}.quote-price small{font-size:10px}.quote-meta div>span{font-size:11px}.snapshot-note{font-size:11px}.server-status{font-size:12px;line-height:1.7;padding:12px 0;color:#446655}.share-box{padding:14px;background:#edf7f2;border:1px solid #bfddcc;border-radius:7px}.share-box label{display:block;font-size:12px;margin-bottom:9px}.share-box>div{display:flex;gap:8px}.share-box input{min-width:0;width:100%;border:1px solid #c6ded0;border-radius:4px;padding:10px;font-size:12px}.share-box small{display:block;font-size:10px;line-height:1.6;color:#678576;margin-top:8px}.return-to-project{margin-top:18px;width:100%}.form-preview p{font-size:12px}.not-included{font-size:12px}button:disabled,select:disabled{opacity:.48;cursor:not-allowed}.dialog-actions{align-items:stretch}.dialog-actions .primary{font-size:12px;flex:1}table{font-size:12px}.table-wrap th,td small{font-size:10px}
@media(min-width:1100px){.visual-workspace{position:sticky;top:18px}.workspace{grid-template-columns:320px minmax(0,1fr)}}
@media(max-width:1000px){.selected-element{margin:14px 17px 0}.photo-bottom>span{max-width:165px;font-size:9px}.selection-actions{gap:7px}.selection-actions label{width:100%}}
@media(max-width:720px){.controls{display:block}.control-section{padding:20px}.controls .control-section:nth-child(2){border-right:0;border-bottom:1px solid var(--border)}.add-buttons{flex-direction:row}.add-buttons button{font-size:13px;min-height:44px}.check{font-size:13px}.check small{font-size:11px}.field-help{font-size:12px}.gate-type label{font-size:12px}.gate-type select{font-size:13px;padding-left:9px}.model strong{font-size:14px}.model small{font-size:10px}.field-label{font-size:13px}.post-section select{font-size:12px}.section-heading h2{font-size:16px}.view-toggle button{font-size:10px;min-height:38px}.layout-header{flex-wrap:wrap;align-items:center}.editor-instruction{font-size:11px;align-items:flex-start}.editor-instruction button{font-size:11px}.selected-element{margin:12px 14px 0;padding:12px}.selection-actions label{width:auto}.selected-element .move-btn,.selected-element .swap-btn{flex:1;white-space:nowrap;font-size:11px}.selection-actions .swap-btn{flex-basis:42%}.photo-bottom{display:block}.photo-bottom>span{display:block;max-width:none;font-size:8px;text-align:left;margin-top:10px}.photo-bottom p{font-size:11px}.legend{font-size:9px}.materials-strip p{font-size:10px}.quote-price>span{font-size:11px;max-width:140px}.quote-price small{font-size:9px}.quote-bar>.primary{min-height:42px;font-size:13px}.reassurance{padding:20px}.steps>a,.steps>button{font-size:11px}.dialog-actions{flex-direction:column}.selected-element .remove{min-height:44px;font-size:12px}}