/* FullFlow look for Elijah's Sierra Ridge design studio (sierra-studio.css is his CSS, scoped under .ff-studio).
   His rules read --brand, --brand-deep, --brand-tint, --serif, --sans...; here they map to the tenant theme
   (--brand, --accent from estimator.css), plus the FullFlow additions (.ffb-*). */
.ff-studio{--brand-deep:color-mix(in srgb,var(--brand) 82%,#000);--brand-hover:color-mix(in srgb,var(--brand) 88%,#000);--brand-tint:color-mix(in srgb,var(--brand) 9%,#fff);--brand-sage:color-mix(in srgb,var(--brand) 22%,#fff);--pine:var(--brand);--paper:#fff;--white:#fff;--color-paper:#fff;--color-muted:var(--muted);--color-line:var(--line);--color-line-strong:#c4cbd3;--color-danger:#b42318;--serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--sans:var(--serif);--field-focus-ring:0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent);font:15px/1.45 var(--sans);color:var(--ink)}
/* the inline copy of the builder is never shown: FullFlow's Deck step has its own plan; the studio opens full screen */
.ff-studio>.builder:not(.is-expanded),.ff-studio>.builder-addons,.ff-studio .builder-preview-open{display:none!important}
.ff-studio button{font:inherit;cursor:pointer}
.ff-studio button:disabled{cursor:default;opacity:.45}

/* ---- the full-screen dialog: clean FullFlow header (title left, Cancel + Done right on one line) */
.ff-studio .builder-modal{background:#fff;color:var(--ink);border:0;padding:0}
.ff-studio .builder-modal::backdrop{background:rgba(15,20,25,.55)}
.ff-studio .builder-modal-header{background:#fff!important;color:var(--ink)!important;border-bottom:3px solid var(--brand);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap}
.ff-studio .builder-modal-header span{color:var(--muted)!important;letter-spacing:.06em;font-size:11px}
.ff-studio .builder-modal-header h4{color:var(--brand)!important;font-family:var(--sans)!important;font-weight:700;margin:0}
.ff-studio .ffb-head-actions{display:flex;gap:8px;flex:0 0 auto;align-items:center}
.ff-studio .ffb-head-actions button{min-height:44px;padding:0 16px;border-radius:10px;font-weight:700;white-space:nowrap;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:15px}
.ff-studio #builder-modal-close{background:var(--brand)!important;color:var(--brand-ink,#fff)!important;border-color:var(--brand)!important}
.ff-studio .builder-modal-header #builder-modal-close::after{content:none}

/* ---- buttons and controls: FullFlow pills, 44 px tall */
.ff-studio .builder-add,.ff-studio .builder-toolbar button,.ff-studio .feature-actions button,.ff-studio .builder-guide button{min-height:44px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-family:var(--sans)}
.ff-studio .builder-add:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
/* a pressed (selected) button keeps its light words on hover (senior tester Walt: Level 2, Freestanding and Mark house walls
   went blank, dark brand words on the dark brand fill) */
.ff-studio .builder-add[aria-pressed="true"]:hover:not(:disabled),.ff-studio .builder-add.is-active:hover:not(:disabled){background:var(--brand-deep);border-color:var(--brand-deep);color:var(--brand-ink,#fff)}
.ff-studio .builder-add[aria-pressed="true"],.ff-studio .builder-add.is-active{background:var(--brand);color:var(--brand-ink,#fff);border-color:var(--brand)}
.ff-studio .builder-add.danger{color:#9a2a1c}
.ff-studio .builder-toolbar{background:var(--bg,#f6f7f9);border:1px solid var(--line);border-radius:12px}
.ff-studio .feature-launch{background:var(--brand)!important;color:var(--brand-ink,#fff)!important;border-color:var(--brand)!important}
.ff-studio .feature-launch small,.ff-studio .feature-launch em{color:inherit!important;opacity:.85}
.ff-studio .builder-tour-launch{background:#fff!important;color:var(--brand)!important}
.ff-studio .plan-total{background:var(--brand)!important}
.ff-studio .builder-hint{background:color-mix(in srgb,var(--brand) 8%,#fff)!important;color:var(--ink)!important;border:1px solid color-mix(in srgb,var(--brand) 25%,#fff);border-radius:10px}
.ff-studio .builder-guide{background:#fff!important;color:var(--ink)!important;border:2px solid var(--brand);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.ff-studio .builder-guide h5{color:var(--brand)!important;font-family:var(--sans)!important}
.ff-studio .builder-guide p{color:var(--ink)!important}
.ff-studio .builder-guide #builder-guide-next{background:var(--brand)!important;color:var(--brand-ink,#fff)!important;border-color:var(--brand)!important}
.ff-studio .builder-guide #builder-guide-skip{background:#fff!important;color:var(--ink)!important}
.ff-studio input,.ff-studio select{min-height:40px;border:1px solid var(--line);border-radius:8px;font-size:16px}

/* ---- level row: level tabs, + Add a level, attached / freestanding */
.ff-studio .builder-level-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ff-studio .ffb-levels,.ff-studio .ffb-attach,.ff-studio .ffb-shapes{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ff-studio .ffb-levels .builder-add,.ff-studio .ffb-attach .builder-add{min-height:44px;padding:0 12px;font-size:14px}
.ff-studio .ffb-add-level{border-style:dashed!important;color:var(--brand)!important}
.ff-studio .ffb-shapes .builder-add{display:inline-flex;align-items:center;gap:4px;padding:0 10px;font-size:14px}
.ff-studio .ffb-shapes svg{width:30px;height:auto;display:block}

/* ---- canvas additions: legend, prompt, + handles, stair handles, house hatch, Delete corner */
.ff-studio .deck-canvas{position:relative}
.ff-studio .ffb-legend{position:absolute;left:8px;top:8px;display:flex;flex-wrap:wrap;gap:4px 10px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12px;color:var(--ink);pointer-events:none;max-width:calc(100% - 16px);z-index:2}
.ff-studio .ffb-legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ff-studio .ffb-key{display:inline-block;width:22px;height:8px;border-radius:2px}
.ff-studio .ffb-key-house{background:repeating-linear-gradient(45deg,#4b5563 0 2px,#e5e7eb 2px 5px);border:1px solid #4b5563}
.ff-studio .ffb-key-rail{background:var(--brand);height:4px}
.ff-studio .ffb-key-open{height:0;border-top:3px dashed #8a949e;border-radius:0}
.ff-studio .ffb-pen-on .ffb-legend{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 35%,transparent)}
.ff-studio .ffb-pen-on .deck-plan{cursor:crosshair}
.ff-studio .ffb-prompt{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;pointer-events:none;margin:0;background:var(--brand);color:var(--brand-ink,#fff);font-weight:700;padding:8px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:3;max-width:calc(100% - 24px);text-align:center;font-size:14px}
.ff-studio .ffb-prompt .ffb-fix{pointer-events:auto;margin-left:8px;min-height:36px;border-radius:999px;border:0;background:#fff;color:var(--brand);font-weight:700;padding:0 12px}
.ff-studio .ffb-pen.ffb-pulse{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 70%,transparent);animation:ffb-pulse 1.6s ease-in-out infinite}
@keyframes ffb-pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 20%,transparent)}}
@media (prefers-reduced-motion:reduce){.ff-studio .ffb-pen.ffb-pulse{animation:none}}
.ff-studio .ffb-mid{cursor:copy}
.ff-studio .ffb-mid-hit,.ff-studio .ffb-handle-hit{fill:transparent;stroke:none}
.ff-studio .ffb-mid-dot{fill:#fff;stroke:var(--brand);stroke-width:1.5;vector-effect:non-scaling-stroke}
.ff-studio .ffb-mid-plus{stroke:var(--brand);fill:none;stroke-linecap:round}
.ff-studio .ffb-mid:hover .ffb-mid-dot{fill:var(--brand)}.ff-studio .ffb-mid:hover .ffb-mid-plus{stroke:#fff}
.ff-studio .ffb-stair-handle{cursor:grab}
.ff-studio .ffb-handle-dot{fill:var(--accent);stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.ff-studio .ffb-stair-size{fill:var(--ink);font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.ff-studio .ffb-house-band{fill:url(#ffb-hatch)}
.ff-studio .ffb-hatch-bg{fill:#eceff2}.ff-studio .ffb-hatch-line{stroke:#4b5563}
.ff-studio .ffb-ghost{fill-opacity:.5;stroke:#3f4a55;stroke-width:2.5;vector-effect:non-scaling-stroke}
.ff-studio .ffb-ghost-house{stroke:#374151;stroke-width:6;stroke-opacity:.55;vector-effect:non-scaling-stroke}
.ff-studio .ffb-ghost-name{fill:#1f2933;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px}

/* ---- stair steppers in the selected-feature panel */
.ff-studio .ffb-stair-steppers{display:grid;gap:8px;margin:8px 0}
.ff-studio .ffb-stepper .quantity-stepper{display:flex;align-items:center;gap:6px}
.ff-studio .ffb-stepper button{width:48px;height:48px;min-height:48px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:24px;font-weight:700;color:var(--brand)}
.ff-studio .ffb-stepper output{min-width:70px;text-align:center;font-weight:700;font-size:17px}
.ff-studio .ffb-landing{display:flex;gap:8px;align-items:center;font-size:14px;min-height:44px}
.ff-studio .ffb-landing input{min-height:0;width:22px;height:22px}
/* ---- free stairs: the top end's bar, a label in warning red when it does not fit, the turn handle, the fixes */
.ff-studio .ffb-stair-top{stroke:var(--ink);stroke-linecap:round;opacity:.85}
.ff-studio .ffb-stair-size.ffb-stair-warn{fill:#9a2a1c}
.ff-studio .ffb-rot-glyph{stroke:#fff;stroke-linecap:round;pointer-events:none}
.ff-studio .ffb-stair-info{margin:0;font-size:14px;line-height:1.4;color:var(--ink)}
.ff-studio .ffb-stair-fix{display:flex;flex-wrap:wrap;gap:8px}
.ff-studio .ffb-stair-fix[hidden]{display:none}
.ff-studio .ffb-stair-fix .builder-add,.ff-studio .ffb-flip{min-height:44px}
.ff-studio .ffb-stair-fix .builder-add{border-color:#9a2a1c;color:#9a2a1c}
.ff-studio .plan-selection.ffb-stair-selected .field-row{display:none}


/* ---- his buttons that were brand-filled: plain FullFlow pills */
.ff-studio .builder-add.danger{background:#fff;border-color:var(--line);color:#9a2a1c}
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar .builder-tour-launch,.ff-studio .builder-tour-launch{background:#fff!important;color:var(--brand)!important;border-color:var(--line)!important}

/* ---- the dialog: header, the studio (scrolls on small screens), and the add-on photo row along the bottom */
.ff-studio .builder-modal[open]{display:flex!important;flex-direction:column;background:#fff}
.ff-studio .builder-modal-header{flex:0 0 auto}
.ff-studio .builder-modal-body{flex:1 1 auto;height:auto!important;min-height:0;background:#fff}
.ff-studio .builder-modal .builder-head{display:none}
.ff-studio .builder-modal .builder-level-row{grid-area:1/1/auto/3!important;justify-content:flex-start!important;flex-direction:row!important;gap:8px 12px;margin:0 0 6px!important}
.ff-studio .builder-modal .builder-level-row>span{margin-left:auto;font-weight:700;color:var(--brand)}
.ff-studio .builder-modal .builder-level-row>strong{color:var(--muted);font-size:11px;letter-spacing:.08em}
.ff-studio .builder-modal .builder-toolbar{background:var(--bg,#f6f7f9)!important;border-color:var(--line)!important}
.ff-studio .builder-modal .builder-toolbar .builder-add{min-height:44px!important;font-size:13px!important;line-height:1.2}
.ff-studio .builder-modal .builder-toolbar .ffb-shapes{display:flex;gap:6px;flex-wrap:nowrap}
.ff-studio .builder-modal .builder-toolbar .ffb-shapes .builder-add{min-width:0!important;width:auto!important;flex:0 0 auto!important;padding:0 10px}
/* the photo row (his add-on drawer, open, in "peek" form) */
.ff-studio .builder-modal .builder-addons.ffb-peek[open]{position:static!important;flex:0 0 auto;inset:auto!important;width:auto!important;height:auto!important;max-height:210px!important;margin:0!important;padding:4px 12px 6px!important;overflow:hidden!important;box-shadow:0 -4px 14px rgba(0,0,0,.06)!important;z-index:1!important;background:#fff!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0}
.ff-studio .builder-modal .builder-addons.ffb-peek[open]>summary{position:static!important;margin:0 0 4px!important;padding:2px 0!important;background:none!important;color:var(--brand)!important;font-size:15px!important;display:flex!important;align-items:center;gap:10px;cursor:pointer;min-height:32px}
.ff-studio .builder-modal .builder-addons.ffb-peek[open]>summary span{display:inline!important;margin:0!important;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)!important;font-size:12px!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open]>summary .gallery-title{color:var(--brand)!important;font-size:15px!important;font-weight:700}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-toggle-label{font-size:0!important;white-space:nowrap;position:absolute;right:2px;top:50%;transform:translateY(-50%)!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open]>summary{position:relative!important;top:auto!important;padding-right:140px!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-toggle-label{width:auto!important;height:auto!important;border:0!important;background:none!important;box-shadow:none!important;display:block!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-toggle-label::after{content:"See all add-ons ↗"!important;font-size:13px!important;color:var(--brand);font-weight:700}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .builder-feature-carousel,.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-category-tabs,.ff-studio .builder-modal .builder-addons.ffb-peek[open]>.field-note{display:none!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card-grid{display:flex!important;overflow-x:auto;gap:8px;padding:2px 0 6px;scroll-snap-type:x proximity}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card{display:flex!important;flex-direction:column;flex:0 0 156px;min-height:0!important;grid-template-columns:none!important;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;scroll-snap-align:start}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card>img{height:62px!important;min-height:0!important;width:100%;object-fit:cover;grid-row:auto!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-copy{padding:4px 8px!important;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-copy p{display:none}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card button{margin:0 6px 6px!important;min-height:44px;border-radius:8px;font-size:12px}
.ff-studio .addon-card button{background:var(--brand)!important;color:var(--brand-ink,#fff)!important;border:0;border-radius:8px;font-weight:700}
@media (max-width:1000px){
.ff-studio .builder-modal .builder-level-row>span{margin-left:0}
}
@media (max-width:700px){
.ff-studio .builder-modal-header{height:auto!important;min-height:58px;padding:6px 10px!important}
.ff-studio .builder-modal-header h4{font-size:20px!important}
.ff-studio .builder-modal-header span{display:none}
.ff-studio .ffb-head-actions button{padding:0 12px!important;font-size:15px!important}
.ff-studio .ffb-legend{font-size:11px;gap:2px 8px}
.ff-studio .ffb-prompt{font-size:13px}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card{flex-basis:124px}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card>img{height:46px!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open]>summary span:not(.gallery-title){display:none!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open]{max-height:178px!important;padding:4px 10px 6px!important}
.ff-studio .builder-modal .builder-level-row{gap:6px!important}
.ff-studio .builder-modal .builder-level-row>strong,.ff-studio .builder-modal .builder-level-row>span{display:none}
.ff-studio .ffb-levels .builder-add,.ff-studio .ffb-attach .builder-add{font-size:13px;padding:0 10px}
}
/* short screens (a phone on its side): a slimmer photo row */
@media (max-height:520px){
.ff-studio .builder-modal .builder-addons.ffb-peek[open]{max-height:118px!important;padding:2px 10px 4px!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open]>summary{min-height:26px;font-size:13px!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open]>summary span:not(.gallery-title){display:none!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card{flex-direction:row;flex-basis:200px;align-items:center}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card>img{height:76px!important;width:64px;flex:0 0 64px}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card>.addon-copy{flex:1 1 auto;min-width:0}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card button{margin:0 6px 0 0!important;flex:0 0 auto;padding:0 8px}
.ff-studio .builder-modal-header{min-height:50px}
.ff-studio .builder-modal .builder-workspace .deck-canvas,.ff-studio .builder-modal .builder.is-expanded .deck-canvas{height:calc(100dvh - 200px)!important;min-height:170px!important}
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar{position:relative!important}
}
/* the scale readout over the plan never takes a press meant for a handle under it (a stair's end handle) */
.ff-studio .canvas-scale{pointer-events:none}
/* ---- senior testers: his "1 stair location · 0 outlets placed" line showed through the stair panel's Delete button;
   his STAIRS word sat on the side labels (the FullFlow label says where the stair goes) */
.ff-studio #stair-count{display:none!important}
.ff-studio #deck-plan .plan-item.stairs text{display:none}
/* the level's height, asked in the drawing tool (the steps come from it) */
.ff-studio .ffb-height{display:inline-flex;align-items:center;gap:6px;margin:4px 0;font-size:14px;font-weight:600;color:var(--ink);border-radius:10px;padding:2px 6px}
.ff-studio .ffb-height input{width:72px;min-height:44px;font-size:16px;padding:0 8px;border:1px solid var(--line);border-radius:8px}
.ff-studio .ffb-height.ffb-pulse{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 70%,transparent);animation:ffb-pulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ff-studio .ffb-height.ffb-pulse{animation:none}}
.ff-studio .ffb-fix+.ffb-fix{margin-left:6px}
/* ---- type a size: a side's length box (tap its length label) and the level's Size (width x depth) */
.ff-studio .ffb-len-pop{position:absolute;z-index:6;width:min(280px,calc(100% - 12px));background:#fff;border:2px solid var(--brand);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.2);padding:10px 12px;display:grid;gap:8px;color:var(--ink)}
.ff-studio .ffb-len-pop[hidden]{display:none}
.ff-studio .ffb-len-pop strong{font-size:15px}
.ff-studio .ffb-len-row{display:flex;gap:10px}
.ff-studio .ffb-len-row label{display:flex;align-items:center;gap:6px;font-weight:600}
.ff-studio .ffb-len-row input{width:74px;min-height:44px;font-size:18px;padding:0 8px}
.ff-studio .ffb-len-note{color:var(--muted);font-size:12px;line-height:1.35}
.ff-studio .ffb-len-err{margin:0;color:#9a2a1c;font-size:13px;font-weight:600}
.ff-studio .ffb-len-actions{display:flex;gap:8px;justify-content:flex-end}
.ff-studio .ffb-len-actions .builder-add{padding:0 14px}
.ff-studio .builder-add.ffb-primary{background:var(--brand);color:var(--brand-ink,#fff);border-color:var(--brand)}
.ff-studio .ffb-linkbtn{background:none;border:0;padding:4px 0;min-height:36px;color:var(--brand);font-weight:600;text-decoration:underline;text-align:left}
.ff-studio .ffb-size{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.ff-studio .ffb-size input{width:66px;min-height:44px;font-size:16px;padding:0 6px}
.ff-studio #deck-plan [data-edge-label]{cursor:pointer}
.ff-studio #deck-plan .ffb-label-hit{fill:transparent;stroke:none;pointer-events:all}
/* ---- the house-wall pen's banner (while it is on) and the short message after each change (with Undo) */
.ff-studio .ffb-pen-banner{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;z-index:4;display:flex;align-items:center;gap:10px;max-width:calc(100% - 16px);background:var(--brand);color:var(--brand-ink,#fff);font-weight:700;font-size:15px;padding:6px 6px 6px 16px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.ff-studio .ffb-pen-banner[hidden],.ff-studio .ffb-toast[hidden]{display:none}
.ff-studio .ffb-pen-banner button{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:#fff;color:var(--brand);font-weight:800;font-size:15px;flex:0 0 auto}
.ff-studio .ffb-toast{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;z-index:5;display:flex;align-items:center;gap:10px;max-width:calc(100% - 16px);background:#1d232b;color:#fff;font-size:14px;font-weight:600;padding:6px 6px 6px 14px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.ff-studio .ffb-toast span{padding:6px 0}
.ff-studio .ffb-toast{pointer-events:none}.ff-studio .ffb-toast button{pointer-events:auto;min-height:40px;padding:0 14px;border-radius:9px;border:0;background:#fff;color:#1d232b;font-weight:800;flex:0 0 auto}
.ff-studio .ffb-toast button[hidden]{display:none}
.ff-studio .ffb-pen-on .ffb-toast{bottom:68px}
@media (max-width:700px){.ff-studio .ffb-pen-banner{font-size:13px;padding-left:12px}.ff-studio .ffb-toast{font-size:13px}}
/* ---- the toolbar (senior testers #3): six tools and a More menu, wrapping onto a second row on a phone, never a
   sideways-scrolling strip; the zoom buttons sit on the plan (top right) */
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"]{display:flex!important;flex-wrap:wrap!important;align-items:center;gap:6px!important;min-height:auto!important;max-height:none!important;overflow:visible!important;padding:6px!important;-webkit-mask-image:none!important;mask-image:none!important;position:relative;z-index:6}
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"] .toolbar-scroll-arrow{display:none!important}
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"] .builder-add{flex:0 0 auto!important;width:auto!important;min-width:0!important;min-height:44px!important;height:auto!important;padding:0 14px!important;font-size:14px!important;white-space:nowrap;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"] #open-builder-addons.feature-launch{display:inline-flex!important;grid-template-columns:none!important;height:auto!important;min-height:44px!important;min-width:0!important;padding:0 14px!important;border:1px solid var(--brand)!important;background:var(--brand)!important;color:var(--brand-ink,#fff)!important;border-radius:10px;overflow:visible;animation:none}
.ff-studio .builder-modal .builder-toolbar #open-builder-addons>img,.ff-studio .builder-modal .builder-toolbar #open-builder-addons .feature-launch-copy{display:none!important}
.ff-studio .builder-modal .builder-toolbar #open-builder-addons .ffb-addons-word{display:inline!important;font-size:inherit!important;color:inherit!important;margin:0!important;font-weight:700}
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"] #open-builder-addons.ffb-full{background:#fff!important;color:var(--brand)!important}
.ff-studio .ffb-menu-wrap{position:relative;display:inline-flex}
.ff-studio .ffb-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:8px;display:grid;gap:6px;min-width:270px;max-height:min(70vh,520px);overflow:auto}
.ff-studio .ffb-menu[hidden]{display:none}
.ff-studio .ffb-more-menu{left:auto;right:0}
.ff-studio .ffb-menu-title{margin:0 2px;font-size:12px;color:var(--muted);font-weight:600}
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"] .ffb-menu .builder-add{width:100%!important;justify-content:flex-start;text-align:left}
.ff-studio .builder-modal .builder-toolbar .ffb-menu .ffb-shapes{display:grid!important;grid-template-columns:1fr 1fr;gap:6px}
.ff-studio .builder-modal .builder-toolbar .ffb-menu .board-orient-btn small{margin-left:auto;font-size:12px;opacity:.8}
.ff-studio .builder-modal .deck-canvas #deck-plan{top:0;bottom:auto;height:calc(100% - 50px)}
.ff-studio .builder-modal .deck-canvas::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50px;background:#fff;border-top:1px solid var(--line);z-index:1;pointer-events:none}
.ff-studio .ffb-zoom{position:absolute;left:6px;bottom:4px;z-index:3;display:flex!important;align-items:center;gap:6px}
.ff-studio .builder-modal .ffb-zoom .builder-add{min-height:42px!important;min-width:44px!important;width:auto;padding:0 10px!important;font-size:18px!important;font-weight:700;border-radius:10px;background:#fff}
.ff-studio .builder-modal .ffb-zoom .zoom-fit{font-size:14px!important}
.ff-studio .ffb-zoom output{font-size:12px;font-weight:700;color:var(--muted);min-width:38px;text-align:center}
.ff-studio .builder-modal .deck-canvas .canvas-scale{bottom:13px;z-index:2;background:none}
.ff-studio .builder-modal .deck-canvas .ffb-prompt,.ff-studio .builder-modal .deck-canvas .ffb-pen-banner,.ff-studio .builder-modal .deck-canvas .ffb-toast{bottom:58px}
.ff-studio .builder-modal .deck-canvas.ffb-pen-on .ffb-toast{bottom:116px}
@media (max-width:420px){.ff-studio .builder-modal .deck-canvas .canvas-scale{display:none}}
@media (max-width:700px){
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"]{padding:6px!important;gap:5px!important}
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"] .builder-add{padding:0 10px!important;font-size:13px!important}
.ff-studio .ffb-menu{min-width:220px}
}
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"] .ffb-menu .builder-tour-launch{order:0}
.ff-studio .builder-modal .deck-canvas .ffb-zoom{background:none;border:0;box-shadow:none;padding:0}
/* short screens (a phone on its side, a big zoom): the whole canvas is plan, the zoom buttons float on it (top right) */
@media (max-height:520px){.ff-studio .builder-modal .deck-canvas #deck-plan{height:100%}.ff-studio .builder-modal .deck-canvas::after{display:none}.ff-studio .builder-modal .deck-canvas .ffb-zoom{left:auto;right:6px;top:6px;bottom:auto;flex-direction:column;gap:4px}.ff-studio .builder-modal .ffb-zoom .builder-add{min-height:36px!important;min-width:44px!important;box-shadow:0 2px 6px rgba(0,0,0,.15)}.ff-studio .builder-modal .ffb-zoom output{display:none}.ff-studio .builder-modal .deck-canvas .ffb-prompt,.ff-studio .builder-modal .deck-canvas .ffb-pen-banner,.ff-studio .builder-modal .deck-canvas .ffb-toast{bottom:8px}.ff-studio .builder-modal .deck-canvas.ffb-pen-on .ffb-toast{bottom:60px}.ff-studio .builder-modal .deck-canvas .canvas-scale{display:none}
.ff-studio .builder-modal .builder-workspace .deck-canvas,.ff-studio .builder-modal .builder.is-expanded .deck-canvas{height:calc(100dvh - 200px)!important;min-height:180px!important}}
.ff-studio .ffb-corner-panel[hidden]{display:none!important}
.ff-studio .ffb-corner-panel{display:grid;gap:6px}
.ff-studio .ffb-corner-panel #ffb-del-corner{min-height:48px;width:100%;border-color:#9a2a1c!important;color:#9a2a1c!important;background:#fff!important;font-weight:700}
/* ---- levels: the distance to another level, typed */
.ff-studio .ffb-gap{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.ff-studio .ffb-gap[hidden]{display:none}
.ff-studio .ffb-gap input{width:66px;min-height:44px;font-size:16px;padding:0 6px}
.ff-studio .ffb-gap select{min-height:44px;font-size:15px;padding:0 6px;max-width:100%}
.ff-studio .ffb-gap select[hidden]{display:none}
/* the helper line under the plan never changes height (a longer message grew it and shrank the plan in the middle of a
   drag, so a level dragged by the mouse moved less than the mouse: senior tester Walt) */
@media (min-width:701px){.ff-studio .builder-modal .builder.is-expanded .builder-hint{box-sizing:border-box;height:64px;min-height:64px;max-height:64px;overflow:hidden;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.45;padding-bottom:0!important;border-bottom:11px solid transparent!important}}
@media (min-width:701px) and (max-height:520px){.ff-studio .builder-modal .builder.is-expanded .builder-hint{height:auto;max-height:none;-webkit-line-clamp:unset}}
/* ---- nothing covers the plan, and the stair panel and the add-on photo row never overlap (senior testers #8) */
/* a tablet (701-1000 px wide): the plan fills its row of the studio (it was 55vh tall, taller than the row, so the
   helper line sat on top of it) */
@media (min-width:701px) and (max-width:1000px){
.ff-studio .builder-modal .builder.is-expanded .builder-workspace{min-height:0!important}
}
@media (min-width:701px) and (max-width:1000px) and (min-height:521px){
.ff-studio .builder-modal .builder-workspace .deck-canvas,.ff-studio .builder-modal .builder.is-expanded .deck-canvas{height:100%!important;min-height:260px!important}
}
@media (min-width:701px) and (max-width:1000px){
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"] .builder-add{padding:0 10px!important;font-size:13px!important}
}
/* the stair panel is short: Rotate and Delete under its name, each +/- control on one line, the long how-to last */
.ff-studio .plan-selection.ffb-stair-selected{display:flex!important;flex-direction:column;gap:6px}
.ff-studio .plan-selection.ffb-stair-selected>*{order:2}
.ff-studio .plan-selection.ffb-stair-selected>span:first-child,.ff-studio .plan-selection.ffb-stair-selected>#feature-label{order:0}
.ff-studio .plan-selection.ffb-stair-selected>.feature-actions{order:1}
.ff-studio .plan-selection.ffb-stair-selected>#feature-min-note{order:20}
.ff-studio .ffb-stair-steppers .ffb-stepper{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ff-studio .ffb-stair-steppers .ffb-stepper .field-label{margin:0}
.ff-studio .ffb-stair-steppers{gap:6px!important}
.ff-studio .plan-selection.ffb-stair-selected>.ffb-stair-more{order:15;display:grid;gap:6px}
.ff-studio .ffb-stair-more[hidden]{display:none!important}
/* a stair (or a corner) picked: the panel beside the plan shows just that (the deck's total and its sides list wait) */
.ff-studio .builder-modal .plan-sidebar:has(.ffb-stair-selected:not([hidden])) :is(.plan-total,.plan-edge-list,.plan-decking-legend,.plan-motion-card){display:none!important}
/* ---- a door on a house wall (senior testers #13): an orange opening on the wall, its name above it */
.ff-studio #deck-plan .plan-item.door .plan-item-main{fill:#fff7ed;stroke:#b45309;stroke-width:2;vector-effect:non-scaling-stroke}
.ff-studio #deck-plan .plan-item.door>g>path{display:none}
.ff-studio #deck-plan .plan-item.door text{fill:#92400e;font-weight:800}
.ff-studio .ffb-door-add{display:block;width:100%;margin-top:8px;min-height:44px;border-radius:10px;border:1px dashed #b45309;background:#fff7ed;color:#92400e;font-weight:700}
.ff-studio .ffb-door-add[hidden],.ff-studio .ffb-door-box[hidden]{display:none!important}
.ff-studio .ffb-door-box{display:grid;gap:6px;margin:6px 0}
.ff-studio .ffb-door-kinds{display:flex;flex-wrap:wrap;gap:6px}
.ff-studio .ffb-door-kinds .builder-add{min-height:44px;padding:0 12px}
.ff-studio .plan-selection.ffb-door-selected :is(.field-row,#feature-rotate,#feature-quantity-row,#feature-utility-run-row,#feature-size-row){display:none!important}
.ff-studio .ffb-door-on .floating-stair-rotate,.ff-studio .ffb-door-on #deck-plan .plan-item.door :is(.plan-resize,.ffb-handle-hit){display:none!important}
.ff-studio #deck-plan .ffb-step-light{fill:#f5b301;stroke:#7a4a00}
.ff-studio .ffb-stair-over{display:grid;gap:6px;padding:8px 10px;border:1px solid #e8908a;border-left:4px solid #9a2a1c;background:#fff4f3;border-radius:10px}
.ff-studio .ffb-stair-over[hidden]{display:none}
.ff-studio .ffb-stair-over p{margin:0;font-size:14px;line-height:1.4;color:#7a1f14;font-weight:600}
.ff-studio .ffb-stair-over .builder-add{min-height:44px;justify-content:flex-start;text-align:left;border-color:#9a2a1c;color:#9a2a1c}
.ff-studio .ffb-gap-pick{display:inline-flex;align-items:center;gap:6px}.ff-studio .ffb-gap-pick[hidden]{display:none}
.ff-studio .ffb-levels .ffb-level-tab{min-width:9em;justify-content:center}
/* ---- senior testers #1 (Walt, Dorothy): the plan takes most of the studio; the house-wall banner and the Done check sit in
   the header, the first-run tour card in the side panel (above the plan on a phone), never over the drawing or the
   selected item; the side panel scrolls by itself and a selected item's panel gets all of it */
.ff-studio .ffb-head-slot{flex:1 1 auto;min-width:0;display:flex;justify-content:center;align-items:center;gap:8px}
.ff-studio .ffb-head-slot:not(:has(>:not([hidden]))){display:none}
.ff-studio .ffb-head-slot .ffb-pen-banner,.ff-studio .ffb-head-slot .ffb-prompt{position:static!important;transform:none!important;left:auto!important;bottom:auto!important;max-width:100%;box-shadow:none;margin:0}
.ff-studio .ffb-head-slot .ffb-prompt{pointer-events:auto;border-radius:12px;font-size:14px;padding:6px 12px;text-align:left;line-height:1.35}
.ff-studio .ffb-head-slot .ffb-prompt .ffb-fix{margin:4px 0 0 8px}
/* the header keeps its height (the plan never resizes when the banner comes and goes): one compact row */
.ff-studio .ffb-head-slot .ffb-pen-banner{padding:2px 3px 2px 14px;gap:8px;font-size:14px}
.ff-studio .ffb-head-slot .ffb-pen-banner button{min-height:40px}
.ff-studio .ffb-head-slot .ffb-prompt{max-height:56px;overflow:auto}
/* a phone: the banner / the Done check get their own full-width row under the title (the plan has its own fixed height) */
@media (max-width:700px){
.ff-studio .builder-modal-header{flex-wrap:wrap!important}
.ff-studio .ffb-head-slot{order:3;flex:1 1 100%;justify-content:stretch;padding-bottom:4px}
.ff-studio .ffb-head-slot .ffb-pen-banner{font-size:13px;padding:2px 3px 2px 10px;gap:6px;flex:1 1 auto;justify-content:space-between}
.ff-studio .ffb-head-slot .ffb-pen-banner button{padding:0 12px}
.ff-studio .ffb-head-slot .ffb-prompt{font-size:13px;padding:4px 8px;max-height:none;flex:1 1 auto}
}
.ff-studio .builder .builder-guide.ffb-docked{position:static!important;inset:auto!important;width:auto!important;max-height:none!important;margin:0 0 8px!important;box-shadow:none!important;padding:12px 14px!important;z-index:auto!important;transform:none!important;flex:0 0 auto}
.ff-studio .builder .builder-guide.ffb-docked[hidden]{display:none!important}
.ff-studio .builder .builder-guide.ffb-docked h5{font-size:18px!important;margin:2px 0 4px!important}
.ff-studio .builder .builder-guide.ffb-docked p{font-size:14px!important;line-height:1.4!important;margin:0!important}
.ff-studio .builder .builder-guide.ffb-docked>div{margin-top:8px!important}
.ff-studio .builder-modal .plan-sidebar{overflow-y:auto!important;overscroll-behavior:contain;scrollbar-gutter:stable}
.ff-studio .builder-modal .plan-sidebar:has(#selected-feature-panel:not([hidden]),#ffb-corner-panel:not([hidden])) :is(.plan-total,.plan-edge-list,.plan-decking-legend,.plan-motion-card){display:none!important}
/* his own floating rotate button is not for stairs (they have the round-arrow handle): it sat on a deck corner */
.ff-studio .ffb-stair-on .floating-stair-rotate{display:none!important}
@media (min-width:1001px) and (min-height:621px){
.ff-studio .builder-modal-header{min-height:0!important;height:62px!important;padding:0 16px!important;box-sizing:border-box}
.ff-studio .builder-modal-header h4{font-size:21px!important;line-height:1.15}
.ff-studio .ffb-head-actions button{min-height:42px}
.ff-studio .builder-modal-body{padding:8px 14px!important}
.ff-studio .builder-modal .builder.is-expanded{gap:8px!important}
.ff-studio .builder-modal .builder-level-row{margin:0!important}
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"]{padding:4px 6px!important}
.ff-studio .builder-modal .builder.is-expanded .builder-actions{display:none!important}
/* the photo row: one slim row of cards (photo, name and button side by side) */
.ff-studio .builder-modal .builder-addons.ffb-peek[open]{max-height:118px!important;padding:2px 14px 6px!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open]>summary{min-height:28px;margin:0 0 2px!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card{flex-direction:row;flex-basis:280px;align-items:center}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card>img{height:76px!important;width:76px;flex:0 0 76px}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card>.addon-copy{flex:1 1 auto;min-width:0}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card button{margin:0 6px 0 0!important;flex:0 0 auto;padding:0 10px;max-width:96px;white-space:normal;line-height:1.15}
}
/* ---- senior testers #2: a door's own name on the boards (his label outside the deck is not shown), the doors to mark
   from a house side's choices, a helper line that is never cut off */
.ff-studio #deck-plan .plan-item.door text{display:none}
.ff-studio #deck-plan .ffb-door-name{fill:#92400e;font-weight:800;paint-order:stroke;stroke:#fff;stroke-linejoin:round}
.ff-studio .ffb-door-add{display:flex!important;flex-wrap:wrap;gap:6px;align-items:center;width:100%;margin-top:8px;border:0!important;background:none!important;min-height:0!important}
.ff-studio .ffb-door-add[hidden]{display:none!important}
.ff-studio .ffb-door-add span{flex:1 1 100%;font-size:13px;font-weight:700;color:#92400e}
.ff-studio .ffb-door-add button{min-height:44px;border-radius:10px;border:1px dashed #b45309;background:#fff7ed;color:#92400e;font-weight:700;padding:0 12px}
.ff-studio .ffb-legend{transition:opacity .15s}
@media (min-width:701px){.ff-studio .builder-modal .builder.is-expanded .builder-hint{grid-area:4/1/auto/3!important;box-sizing:border-box;height:62px!important;min-height:62px!important;max-height:62px!important;display:block!important;-webkit-line-clamp:unset!important;overflow-x:hidden;overflow-y:auto!important;text-overflow:clip!important;padding:9px 14px!important;border-bottom:1px solid color-mix(in srgb,var(--brand) 25%,#fff)!important;line-height:1.45}
.ff-studio .builder-modal .builder.is-expanded .builder-actions{display:none!important}}
@media (min-width:701px) and (max-width:1000px){.ff-studio .builder-modal .builder.is-expanded .builder-hint{height:82px!important;min-height:82px!important;max-height:82px!important}}
@media (min-width:701px) and (max-height:520px){.ff-studio .builder-modal .builder.is-expanded .builder-hint{height:auto!important;min-height:0!important;max-height:none!important}}
.ff-studio .plan-sidebar .edge-pop.ffb-docked{position:static!important;left:auto!important;top:auto!important;width:auto!important;box-shadow:none!important;margin:0;flex:0 0 auto}
.ff-studio .plan-sidebar .edge-pop.ffb-docked[hidden]{display:none!important}
.ff-studio .plan-sidebar .edge-pop.ffb-docked .edge-pop-head strong{font-size:15px}
.ff-studio .plan-sidebar .edge-pop.ffb-docked .edge-pop-opts button{min-height:44px;font-size:14px}
.ff-studio .builder-modal .plan-sidebar:has(.edge-pop.ffb-docked:not([hidden])) :is(.plan-total,.plan-edge-list,.plan-decking-legend,.plan-motion-card){display:none!important}
/* the side's length in the list beside the plan opens the length box too (senior tester Dorothy, round 3) */
.ff-studio .plan-edge-list .edge-row > span{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
/* the house-wall banner's words: the banner's own readable ink, its own size, never the header's small grey label style
   (senior testers, round 3: "Tap the sides that touch your house" read grey on blue, dark green on dark green) */
.ff-studio .builder-modal-header .ffb-pen-banner{color:var(--ffb-banner-ink,#fff)!important}
.ff-studio .builder-modal-header #ffb-pen-banner>span{display:inline!important;color:inherit!important;font-size:14px!important;line-height:1.3;font-weight:700!important;letter-spacing:normal!important;text-transform:none!important;opacity:1!important}
/* nothing in the side panel is cut off on the right (senior tester Walt, round 3: the stair's warning and its fix buttons
   ran 47 px past the panel): the panel never scrolls sideways, its boxes and buttons wrap to its width */
.ff-studio .builder-modal .plan-sidebar{overflow-x:hidden!important}
.ff-studio .plan-sidebar :is(.plan-selection,.ffb-stair-steppers,.ffb-stair-over,.ffb-stair-more,.ffb-corner-panel,.edge-pop){min-width:0;max-width:100%;box-sizing:border-box}
.ff-studio .plan-sidebar .ffb-stair-steppers .ffb-stepper{flex-wrap:wrap;row-gap:4px}
.ff-studio .plan-sidebar .ffb-stepper output{min-width:56px}
.ff-studio .plan-sidebar .ffb-stepper button{width:44px;height:44px;min-height:44px}
.ff-studio .plan-sidebar .builder-add{white-space:normal;overflow-wrap:anywhere;height:auto;max-width:100%}
.ff-studio .plan-sidebar .ffb-stair-info,.ff-studio .plan-sidebar .ffb-stair-over p{overflow-wrap:anywhere}
/* the toolbar's menus sit over the plan and its round arrow, never under them; More in two columns when there is room */
.ff-studio .builder-modal .builder-toolbar{position:relative;z-index:60}
.ff-studio .builder-modal .builder-toolbar .ffb-more-menu.ffb-two-col{grid-template-columns:1fr 1fr;width:560px;max-width:calc(100vw - 32px)}
/* another level's stairs, drawn light on this level's tab (senior tester Walt, round 3) */
.ff-studio .ffb-ghost-stair rect{fill:rgba(255,255,255,.6);stroke:var(--brand);stroke-dasharray:5 3;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.8}
.ff-studio .ffb-ghost-stair line{stroke:#9aa4ae;stroke-width:1;vector-effect:non-scaling-stroke}
.ff-studio .ffb-ghost-stair line.ffb-ghost-stair-top{stroke:var(--brand);stroke-width:3;opacity:.7}
.ff-studio .ffb-ghost-stair-name{paint-order:stroke;stroke:#fff;stroke-width:3px}
/* an add-on's size in feet and inches, one unit per box (senior tester Walt, round 3: 90 IN beside 7.5 FT) */
.ff-studio .plan-selection.ffb-ftin-on .field-row{display:none!important}
.ff-studio .ffb-ftin-box{display:grid;gap:8px;margin:6px 0}
.ff-studio .ffb-ftin-box[hidden],.ff-studio .ffb-ftin[hidden]{display:none}
.ff-studio .ffb-ftin .field-label{display:block;margin:0 0 4px!important;font-size:13px!important}
.ff-studio .ffb-ftin-boxes{display:flex;gap:8px}
.ff-studio .ffb-ftin-boxes label{display:flex;align-items:center;gap:6px;flex:1 1 0;min-width:0;font-weight:700;font-size:15px}
.ff-studio .plan-selection .ffb-ftin-boxes input{width:100%;min-width:0;min-height:44px;padding:6px 8px!important;font-size:16px!important;text-align:center}

/* ---- the selection model (Elijah, 2026-10-11): a level panel (a tap on the deck), a side panel (a tap on a side), both
   beside the plan (under it on a phone); his popup by the side is not shown (its choices are in the side panel) */
.ff-studio .edge-pop{display:none!important}
.ff-studio .ffb-panel{display:flex;flex-direction:column;gap:10px}
.ff-studio .ffb-panel[hidden]{display:none!important}
.ff-studio .ffb-panel>strong{font-size:18px;line-height:1.25}
.ff-studio .builder-modal .plan-sidebar:has(.ffb-panel:not([hidden])) :is(.plan-total,.plan-edge-list,.plan-decking-legend,.plan-motion-card){display:none!important}
.ff-studio .ffb-level-panel .ffb-height{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0;padding:0;font-size:15px}
.ff-studio .ffb-height-box{display:flex;align-items:center;gap:8px}
.ff-studio .ffb-level-panel .ffb-height input#ffb-height{width:120px;min-height:56px;font-size:28px;font-weight:700;text-align:center;border:2px solid var(--brand);border-radius:12px;color:var(--ink);background:#fff}
.ff-studio .ffb-height-box span{font-size:18px;font-weight:700;color:var(--ink)}
/* [FF deck-b #1/#4] a typed height or size out of range is marked until it is fixed or clamped */
.ff-studio .ffb-level-panel .ffb-bad input#ffb-height,.ff-studio .ffb-size input[aria-invalid="true"]{border-color:#b42318;box-shadow:0 0 0 2px rgba(180,35,24,.25)}
.ff-studio .ffb-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);min-height:36px}
.ff-studio .ffb-check input{width:20px;height:20px}
.ff-studio .ffb-boards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ff-studio .ffb-board-dir{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:76px!important;padding:6px 4px!important;font-size:13px!important;line-height:1.15;text-align:center}
.ff-studio .ffb-board-dir svg{flex:0 0 auto}
.ff-studio .ffb-board-dir .ffb-bd-deck{fill:#d8c3a2;stroke:#6b5a43;stroke-width:1.2}
.ff-studio .ffb-board-dir .ffb-bd-lines{stroke:#7a6448;stroke-width:1.4;fill:none}
.ff-studio .ffb-board-dir .ffb-bd-house{stroke:#374151;stroke-width:3}
.ff-studio .ffb-board-dir[aria-pressed="true"] .ffb-bd-deck{fill:#fff}
.ff-studio .ffb-lp-attach{margin:0;font-size:13px;line-height:1.4}
.ff-studio .ffb-level-panel .ffb-size,.ff-studio .ffb-level-panel .ffb-gap{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px}
.ff-studio .ffb-del-level{min-height:48px;border-color:#9a2a1c!important;color:#9a2a1c!important;background:#fff!important;font-weight:700}
.ff-studio .ffb-del-level:disabled{opacity:.45}
.ff-studio .ffb-ep-types{display:grid;grid-template-columns:1fr;gap:6px}
.ff-studio .ffb-ep-types .builder-add{display:flex!important;align-items:center;justify-content:flex-start;gap:10px;min-height:46px;font-size:15px;padding:0 12px}
.ff-studio .ffb-ep-len .ffb-len-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ff-studio .ffb-ep-len label{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.ff-studio .ffb-ep-len input{width:64px;min-height:44px;font-size:16px;padding:0 6px;border:1px solid var(--line);border-radius:8px}
.ff-studio .ffb-ep-acts{display:grid;grid-template-columns:1fr;gap:6px}
.ff-studio .ffb-ep-acts .builder-add{min-height:46px;font-size:15px;justify-content:flex-start;text-align:left;padding:0 12px}
.ff-studio .ffb-ep-acts .builder-add:disabled{opacity:.45}
.ff-studio #ffb-ep-note{margin:0;font-size:13px}
.ff-studio #deck-plan .ffb-picked-outline{fill:none;stroke:var(--accent,#e8a33d);stroke-width:4;stroke-dasharray:10 6;vector-effect:non-scaling-stroke}
@media (max-width:700px){.ff-studio .ffb-ep-types,.ff-studio .ffb-ep-acts{grid-template-columns:1fr 1fr}}
/* (on a phone the add-on photo row stays in its peek form while a panel is open: it never disappears) */
/* ---- the stair panel, simple (Elijah, 2026-10-11): width, steps, Flip, the landing button, handrails, Delete last */
.ff-studio .plan-selection.ffb-stair-selected>.feature-actions{order:30}
.ff-studio .plan-selection.ffb-stair-selected #feature-rotate,.ff-studio .plan-selection.ffb-stair-selected #feature-min-note{display:none!important}
.ff-studio .plan-selection.ffb-stair-selected #feature-delete{min-height:48px;flex:1 1 100%}
.ff-studio .ffb-stair-steppers .ffb-stepper[hidden]{display:none!important}
.ff-studio .ffb-stair-steppers .ffb-flip{min-height:46px;font-size:15px}
.ff-studio .ffb-stair-steppers .ffb-landing-btn{min-height:56px;font-size:17px!important;font-weight:800;background:var(--brand)!important;color:var(--brand-ink,#fff)!important;border-color:var(--brand)!important}
.ff-studio .ffb-stair-steppers .ffb-landing-btn[aria-pressed="true"]{background:#fff!important;color:#9a2a1c!important;border-color:#9a2a1c!important}
.ff-studio .ffb-hr-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ff-studio .ffb-hr-opts .builder-add{min-height:46px;font-size:14px;padding:0 4px}
.ff-studio .ffb-hr-code{margin:4px 0 0;font-size:13px;color:#7a3e06}
.ff-studio .ffb-steps-auto{justify-self:start;font-size:13px}
.ff-studio #deck-plan .ffb-landing-block{fill:#fff;fill-opacity:.85;stroke:#1d232b;stroke-width:1.4;vector-effect:non-scaling-stroke}
.ff-studio #deck-plan .ffb-landing-name{fill:#1d232b;font-weight:700}
/* ---- the toolbar (Elijah, 2026-10-11): every tool across the top in four groups, large labeled buttons, wrapping onto a
   second row when the screen is narrower; no More menu */
.ff-studio .ffb-tb-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-right:8px;margin-right:2px;border-right:1px solid var(--line)}
.ff-studio .ffb-tb-group:last-of-type{border-right:0;padding-right:0}
.ff-studio .ffb-hidden-tools,.ff-studio .ffb-hidden-tools[hidden]{display:none!important}
.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"]{row-gap:6px!important;column-gap:8px!important}
@media (min-width:1001px){.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"] .builder-add{min-height:48px!important;font-size:15px!important;padding:0 14px!important}}
@media (max-width:700px){.ff-studio .ffb-tb-group{display:contents}.ff-studio .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"] .builder-add{padding:0 9px!important;font-size:13px!important}}
/* ---- the drawing's note box, always at the foot of the panel beside the plan */
.ff-studio .ffb-note{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding:12px;border:2px solid var(--brand);border-radius:12px;background:#fff;flex:0 0 auto}
.ff-studio .ffb-note>span{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3}
.ff-studio .ffb-note textarea{width:100%;box-sizing:border-box;min-height:84px;font:inherit;font-size:15px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;resize:vertical}
.ff-studio .ffb-note small{font-size:12px;color:var(--muted)}
/* ---- standalone landings (Elijah, 2026-10-12): each its own small platform, drawn like a small level, named, with its height */
.ff-studio #deck-plan .plan-item.landing .plan-item-main{fill:var(--board-color,#e6d5b8);fill-opacity:.85;stroke:var(--brand);stroke-width:2.5;vector-effect:non-scaling-stroke}
.ff-studio #deck-plan .plan-item.landing.selected .plan-item-main{stroke-width:3.5}
.ff-studio #deck-plan .plan-item.landing text,.ff-studio #deck-plan .plan-item.landing>g>path{display:none}
.ff-studio #deck-plan .ffb-landing-extra text{paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.ff-studio #deck-plan .ffb-landing-name{fill:#1d232b;font-weight:800}
.ff-studio #deck-plan .ffb-landing-h{fill:#374151;font-weight:600}
.ff-studio #deck-plan .ffb-ghost-landing{fill-opacity:.45;stroke:var(--brand);stroke-width:1.5;vector-effect:non-scaling-stroke;cursor:pointer}
.ff-studio .plan-selection.ffb-landing-selected .field-row{display:none!important}
.ff-studio .ffb-landing-box{display:grid;gap:6px}
.ff-studio .ffb-landing-box .ffb-lh{display:flex;flex-direction:column;gap:6px;font-size:15px}
.ff-studio .ffb-landing-box input{width:120px;min-height:52px;font-size:24px;font-weight:700;text-align:center;border:2px solid var(--brand);border-radius:12px;color:var(--ink);background:#fff}
/* the level panel: the height is its own section; Boards ↔ shows only the board-direction pictures (no height) */
.ff-studio .ffb-level-panel .ffb-height{border-bottom:1px solid var(--line);padding-bottom:10px!important}
.ff-studio .ffb-level-panel.ffb-boards-only>:not(span:first-child):not(#ffb-lp-name):not(.ffb-boards-pick){display:none!important}
/* the stair panel: width, handrails, Flip, ＋ Add landing, Delete */
.ff-studio .ffb-stair-steppers .ffb-flip{min-height:48px}
/* ---- a pergola picked (sierra-builder.js pergolaPanel): size, material, color and roof as buttons; its drawing in the plan */
.ff-studio .ffb-pergola-box{display:grid;gap:10px;margin:6px 0}
.ff-studio .ffb-pergola-box[hidden]{display:none}
.ff-studio .ffb-pg-row{display:grid;gap:6px}
.ff-studio .ffb-pg-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ff-studio .ffb-pg-row[data-pg="size"] .ffb-pg-opts{grid-template-columns:repeat(3,minmax(0,1fr))}
.ff-studio .ffb-pg-opts .builder-add{min-height:44px;font-size:14px;line-height:1.2;padding:4px 6px;white-space:normal;text-align:center}
.ff-studio .ffb-pg-opts .builder-add[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink,#fff)}
.ff-studio .ffb-pg-row[data-pg="color"] .builder-add{display:flex;align-items:center;justify-content:center;gap:6px}
.ff-studio .ffb-pg-row[data-pg="color"] .builder-add::before{content:"";flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:var(--ffb-pg-chip,#ccc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.ff-studio .plan-selection.ffb-pergola-selected #feature-quantity-row,.ff-studio .plan-selection.ffb-pergola-selected #feature-utility-run-row,.ff-studio .plan-selection.ffb-pergola-selected #feature-size-row{display:none!important}
.ff-studio .plan-item.pergola .plan-item-main{fill:rgba(255,255,255,.05)}
.ff-studio .plan-item.pergola > g:first-child > path{display:none}
.ff-studio .plan-item.pergola text{paint-order:stroke;stroke:#fff;stroke-width:3px}
/* [FF deck-a #2, 2026-10-13] the full add-on catalog on a phone: one card per row, a small photo beside its name, words
   and Add to plan (it was two 148 px columns of 180 px photos, the names and buttons pushed off the card) */
@media (max-width:700px){
.ff-studio .builder-modal .builder-addons[open]:not(.ffb-peek){width:auto!important;right:0}
.ff-studio .builder-modal .builder-addons[open]:not(.ffb-peek) .addon-card-grid{grid-template-columns:minmax(0,1fr)!important}
.ff-studio .builder-modal .builder-addons[open]:not(.ffb-peek) .addon-card{grid-template-columns:96px minmax(0,1fr)!important;min-height:0!important;align-items:start}
.ff-studio .builder-modal .builder-addons[open]:not(.ffb-peek) .addon-card>img{width:96px;height:100%!important;min-height:112px!important;grid-row:span 3}
.ff-studio .builder-modal .builder-addons[open]:not(.ffb-peek) .addon-card>.addon-copy{min-width:0;padding:8px 10px 4px}
.ff-studio .builder-modal .builder-addons[open]:not(.ffb-peek) .addon-card>.addon-copy strong{display:block;font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.ff-studio .builder-modal .builder-addons[open]:not(.ffb-peek) .addon-card>.addon-copy p{font-size:13px;line-height:1.35;margin:4px 0 0}
.ff-studio .builder-modal .builder-addons[open]:not(.ffb-peek) .addon-card button{margin:4px 10px 10px!important;min-height:44px;font-size:14px;justify-self:start}
}
/* [FF deck-a #9 / deck-b #11, 2026-10-13] the photo row's names wrap to two lines instead of "Water-resista…" */
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-copy{white-space:normal;text-overflow:clip}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-copy strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;hyphens:auto}
/* [FF deck-b #11, 2026-10-13] a big zoom (200 %) or a phone on its side: a slimmer header and photo row give the plan more
   room (it was about 250 px of a 450 px screen), and each photo-row card keeps room for its name */
@media (max-height:520px){
.ff-studio .builder-modal-header{height:auto!important;min-height:48px!important;padding:2px 12px!important}
.ff-studio .builder-modal-header span{display:none}
.ff-studio .builder-modal-header h4{font-size:20px!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open]{max-height:100px!important;padding:2px 12px 4px!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open]>summary{min-height:24px!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card{flex-basis:300px!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card>img{height:64px!important;width:64px!important;flex:0 0 64px!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card button{max-width:84px!important;min-height:44px!important;font-size:12px!important}
}
@media (min-width:701px) and (max-height:520px){
.ff-studio .builder-modal .builder-workspace .deck-canvas,.ff-studio .builder-modal .builder.is-expanded .deck-canvas{height:calc(100dvh - 186px)!important}
.ff-studio .builder-modal .builder.is-expanded{grid-template-rows:auto auto calc(100dvh - 178px) auto!important}
}
/* [FF patio-tray 2026-10-13] Elijah: a height off the ground is asked as "Highest point off the ground", with how to
   measure it under the label (the level panel and a landing's panel) */
.ff-studio .ffb-height{flex-wrap:wrap}
.ff-studio .ffb-height-help{flex-basis:100%;margin:0 0 2px;font-size:12px;line-height:1.35;color:var(--muted)}
/* [FF patio-tray 2026-10-13] the add-on photo row (deck and patio studios, tray-see-all.js): a big "See all add-ons (N)"
   card pinned at the start of the row (the row's first item, position: sticky, so it never scrolls away), arrows on a
   desktop and a fade at the edge that has more cards, so the row reads as one that scrolls. The old small "See all
   add-ons ↗" words in the header give way to it. */
.ff-studio .builder-modal .builder-addons.ffb-peek[open]{position:relative!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open]>summary{padding-right:0!important}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-toggle-label::after{content:""!important}
.ff-studio .builder-addons .ffb-see-all,.ff-studio .builder-addons .ffb-tray-arrow{display:none}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .ffb-see-all{position:sticky;left:0;z-index:2;flex:0 0 116px;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;margin:0;padding:6px 8px;border:2px solid var(--brand);border-radius:10px;background:var(--brand-tint,#eef4f8);color:var(--brand);font:800 14px/1.15 var(--sans,system-ui);text-align:center;cursor:pointer;box-shadow:6px 0 10px -4px rgba(0,0,0,.18)}
.ff-studio .builder-addons .ffb-see-all svg{fill:currentColor;flex:0 0 auto}
/* the cards snap in just after the pinned card (never under it) */
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card-grid{scroll-padding-left:124px}
.ff-studio .builder-addons .ffb-see-all-n{font-weight:700;font-size:13px}
.ff-studio .builder-addons .ffb-see-all:hover{background:var(--brand);color:var(--brand-ink,#fff)}
.ff-studio .builder-addons .ffb-see-all:focus-visible{outline:3px solid #1d232b;outline-offset:-3px}
.ff-studio .builder-modal .builder-addons.ffb-peek.ffb-can-right[open] .addon-card-grid{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent)}
@media (hover:hover) and (pointer:fine) and (min-width:701px){
.ff-studio .builder-modal .builder-addons.ffb-peek[open]>.ffb-tray-arrow{position:absolute;top:var(--ffb-arrow-top,60%);transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--brand);font:700 26px/1 var(--sans,system-ui);box-shadow:0 4px 12px rgba(0,0,0,.18);cursor:pointer;align-items:center;justify-content:center;padding:0 0 3px}
.ff-studio .builder-modal .builder-addons.ffb-peek.ffb-can-left[open]>.ffb-tray-prev{display:flex;left:var(--ffb-arrow-left,140px)}
.ff-studio .builder-modal .builder-addons.ffb-peek.ffb-can-right[open]>.ffb-tray-next{display:flex;right:18px}
}
@media (max-width:700px){.ff-studio .builder-modal .builder-addons.ffb-peek[open] .ffb-see-all{flex-basis:92px;font-size:13px;padding:4px 6px}.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card-grid{scroll-padding-left:100px}}
@media (max-height:520px){.ff-studio .builder-modal .builder-addons.ffb-peek[open] .ffb-see-all{flex-basis:96px;font-size:12px;gap:2px}.ff-studio .builder-addons .ffb-see-all svg{width:18px;height:18px}}
/* [FF patio-tray 2026-10-13] the slim desktop photo row (one row of 76 px cards): the pinned card's words beside its icon */
@media (min-width:1001px) and (min-height:621px){
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .ffb-see-all{flex-direction:row;flex-wrap:wrap;flex-basis:168px;gap:2px 8px;padding:4px 10px;font-size:14px}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .ffb-see-all-n{flex-basis:100%;margin-top:-2px}
.ff-studio .builder-modal .builder-addons.ffb-peek[open] .addon-card-grid{scroll-padding-left:176px}
}
/* ---- the deck studio on a phone (Phase 4, .planning/phases/04-estimator-phone-fixes/04-UI-SPEC.md sections 1-2, D-04):
   <= 640 px wide, or a phone on its side (max-height 500 px, landscape); the same two conditions as phoneMQ in
   sierra-builder.js. Every rule is scoped .ff-studio:not(.cs-ffs) (the patio studio loads this file too) and nothing
   here applies from 701 px up on a screen taller than 500 px (the tablet / desktop toolbar keeps wrapping). */
.ff-studio:not(.cs-ffs) .ffb-sum-phone,.ff-studio:not(.cs-ffs) .ffb-sum-chev{display:none}
.ff-studio:not(.cs-ffs) #ffb-cancel{white-space:nowrap;min-height:44px}
/* a checkbox in the deck studio: the whole label is a 44 px target, the box itself stays 20 px (D-13, UI-SPEC section 6) */
.ff-studio:not(.cs-ffs) .builder-modal label:has(>input[type="checkbox"]){display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;box-sizing:border-box;cursor:pointer}
.ff-studio:not(.cs-ffs) .builder-modal label>input[type="checkbox"]{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--brand)}
.ff-studio:not(.cs-ffs) .builder-modal label>input[type="checkbox"]:focus-visible{outline:3px solid #1d232b;outline-offset:2px}
@media (max-width:640px),(max-height:500px) and (orientation:landscape){
/* the toolbar: one row that scrolls sideways (the fence studio's row), with its edge fade until the end is reached */
.ff-studio:not(.cs-ffs) .ffb-tb-group{display:contents}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"]{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:none;scroll-behavior:auto;gap:8px!important;padding:8px!important;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"]::-webkit-scrollbar{display:none}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"]:is(.ffb-tb-end,.ffb-menu-on){-webkit-mask-image:none;mask-image:none}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"] .builder-add{flex:0 0 auto!important;min-width:44px!important;min-height:44px!important;padding:0 8px!important;white-space:nowrap!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-toolbar[role="toolbar"] .ffb-menu .builder-add{flex:0 0 auto!important;white-space:normal!important}
/* the Shapes menu: fixed to the screen under its button (placed by fitPhoneMenu), so the sideways row cannot clip it */
.ff-studio:not(.cs-ffs) .ffb-menu.ffb-menu-fixed{position:fixed!important;right:auto!important;bottom:auto!important;z-index:45!important;box-sizing:border-box;min-width:min(220px,calc(100vw - 16px))!important;overflow-y:auto!important;overscroll-behavior:contain}
/* the add-ons tray: closed, a 44 px "Add-ons (N)" row along the bottom of the studio; open, a bottom sheet over the
   plan (capped, scrolling inside). It is out of the flow either way, so the plan never moves when it opens or closes;
   the dialog keeps the closed row's height free under the studio. */
.ff-studio:not(.cs-ffs) .builder-modal[open]{padding-bottom:calc(44px + env(safe-area-inset-bottom))!important;box-sizing:border-box}
.ff-studio:not(.cs-ffs) .builder-modal #builder-addons{display:block!important;position:absolute!important;inset:auto 0 0 0!important;width:auto!important;height:auto!important;max-height:min(60dvh,360px)!important;margin:0!important;padding:0 max(16px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px,env(safe-area-inset-left))!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;background:#fff!important;border:1px solid var(--line-strong)!important;border-bottom:0!important;border-radius:var(--radius-sm) var(--radius-sm) 0 0!important;box-shadow:0 -8px 24px rgba(16,24,32,.12)!important;z-index:30!important}
.ff-studio:not(.cs-ffs) .builder-modal #builder-addons:not([open]){border-width:1px 0 0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important}
.ff-studio:not(.cs-ffs) .builder-modal #builder-addons>summary{position:sticky!important;top:0!important;z-index:3!important;display:flex!important;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;margin:0 -16px!important;padding:0 16px!important;background:#fff!important;color:var(--ink)!important;font:700 14px/1.2 var(--font)!important;letter-spacing:0!important;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ff-studio:not(.cs-ffs) .builder-modal #builder-addons>summary::-webkit-details-marker{display:none}
.ff-studio:not(.cs-ffs) .builder-modal #builder-addons>summary::marker{content:""}
.ff-studio:not(.cs-ffs) .builder-modal #builder-addons>summary>:is(span,b):not(.ffb-sum-phone){display:none!important}
.ff-studio:not(.cs-ffs) .builder-modal #builder-addons>summary>.ffb-sum-phone{display:block!important;flex:1 1 auto;min-width:0;margin:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)!important;font:700 14px/1.2 var(--font)!important;letter-spacing:0!important}
.ff-studio:not(.cs-ffs) .builder-modal #builder-addons>summary>.ffb-sum-chev{display:block;flex:0 0 auto;color:var(--ink);transition:transform 150ms var(--ease)}
.ff-studio:not(.cs-ffs) .builder-modal #builder-addons[open]>summary>.ffb-sum-chev{transform:rotate(180deg)}
.ff-studio:not(.cs-ffs) .builder-modal #builder-addons>summary:active{background:var(--line)!important}
.ff-studio:not(.cs-ffs) .builder-modal #builder-addons>summary:focus-visible{outline:3px solid #1d232b;outline-offset:-3px}
.ff-studio:not(.cs-ffs) .builder-modal #builder-addons[open] .addon-category-tabs{top:44px}
/* the studio: a slim body; the plan and its hint first, the side panel under them (portrait) or beside them (landscape) */
.ff-studio:not(.cs-ffs) .builder-modal-body{padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded{box-sizing:border-box;height:100%!important;padding:0!important;gap:8px!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-workspace{display:contents!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded :is(.builder-level-row,.builder-toolbar,.deck-canvas,.builder-hint,.plan-sidebar,.builder-actions){margin:0!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-hint{box-sizing:border-box;padding:8px 16px!important;overflow-y:auto!important;display:block!important;-webkit-line-clamp:unset!important}
}
/* a phone held upright: plan, then hint (a fixed 104 px, four lines; a longer hint scrolls inside, so the plan never resizes),
   then the side panel below; the plan takes what the toolbar and the hint leave */
@media (max-width:640px){
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded{display:flex!important;flex-direction:column;overflow-y:auto!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded>*,.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-workspace>*{flex:0 0 auto!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-level-row{order:0}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-toolbar{order:1}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded>.builder-guide{order:2}
/* (100% less the toolbar row, the hint and the three 8 px gaps between level row, toolbar, plan and hint) */
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .deck-canvas{order:3;height:max(180px,calc(100% - 62px - 104px - 24px))!important;min-height:180px!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-hint{order:4;height:104px!important;min-height:104px!important;max-height:104px!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .plan-sidebar{order:5;height:auto!important;max-height:none!important;overflow:visible!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-actions{order:6}
}
/* a phone on its side (343-500 px tall): the toolbar across the top, the plan on the left using all the height under
   it, the hint and then the side panel in a column on the right, so toolbar, plan, hint and Done all fit (EST-05) */
@media (max-height:500px) and (orientation:landscape){
.ff-studio:not(.cs-ffs) .builder-modal[open]{inset:0!important;margin:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;border-radius:0!important}
.ff-studio:not(.cs-ffs) .builder-modal-header{height:auto!important;min-height:0!important;padding:4px max(16px,env(safe-area-inset-right)) 4px max(16px,env(safe-area-inset-left))!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(200px,40%)!important;grid-template-rows:auto auto auto auto minmax(0,1fr)!important;overflow:hidden!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-level-row{grid-area:1/1/2/3!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder-level-row>:is(strong,span){display:none}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-toolbar{grid-area:2/1/3/3!important;position:relative!important;top:auto!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .deck-canvas{grid-area:3/1/6/2!important;height:auto!important;min-height:0!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-hint{grid-area:3/2/4/3!important;height:auto!important;min-height:0!important;max-height:96px!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded>.builder-guide{grid-area:4/2/5/3!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .plan-sidebar{grid-area:5/2/6/3!important;min-height:0;overflow-y:auto!important}
.ff-studio:not(.cs-ffs) .builder-modal .builder.is-expanded .builder-actions{display:none!important}
}
@media (prefers-reduced-motion:reduce){.ff-studio:not(.cs-ffs) .builder-modal #builder-addons>summary>.ffb-sum-chev{transition:none}}
/* a side label that would sit on a more important one is hidden where it is, never moved off its side (sierra-builder.js
   unclutter, 04-CONTEXT.md D-13); visibility keeps the layout, and a hidden label takes no taps */
.ff-studio:not(.cs-ffs) [data-edge-label].ffb-label-hidden{visibility:hidden}
/* the crossing warning (sierra-builder.js crossWarn, 04-UI-SPEC.md section 4): the fence .fx-hint.warn and patio
   .cs-ffs .builder-hint.warn look. Named Craft Floor exception (a colored border-left above 1px), kept so the same warning
   looks the same in all three studios; not used by anything else. Only colors change: the bar keeps its reserved height */
.ff-studio:not(.cs-ffs) .builder-hint.warn{border-left:4px solid #b45309!important;background:#fff7ed!important;color:#7c2d12!important}
/* 11 px text floor (04-10, Impeccable audit): Elijah's generated studio CSS sets 8-10.5 px on labels, buttons, tabs,
   counters and side-panel copy in the deck and patio studios. Same selectors as sierra-studio.css (equal specificity,
   this file loads after it), so only the size changes; drawing labels inside the SVG scale with the plan and are not
   covered here. */
.ff-studio .house-edge,.ff-studio .canvas-scale,.ff-studio .color-choice,.ff-studio .feature-launch-copy em,
.ff-studio .plan-total>span,.ff-studio .plan-selection>span,.ff-studio .plan-total small,
.ff-studio .plan-selection .field-label,.ff-studio .plan-selection .input-unit span,.ff-studio .plan-selection .field-note,
.ff-studio .feature-actions button,.ff-studio .plan-motion-card,.ff-studio .plan-edge-list,.ff-studio .plan-edge-list strong,
.ff-studio .builder-level-row>strong,.ff-studio .builder-addons>summary span,.ff-studio .addon-category-tabs button,
.ff-studio .addon-card button,.ff-studio .addon-card>a,.ff-studio .builder-entry span,
.ff-studio .builder-modal .builder-toolbar .builder-add,.ff-studio .builder-modal .builder-actions,
.ff-studio .builder-modal .builder-addons[open]>summary span,
.ff-studio .edge-pop small,.ff-studio .bp-label,.ff-studio .bp-row b,.ff-studio .board-orient-btn small,
.ff-studio .plan-edge-list .edge-row select,.ff-studio .feature-launch span,
.ff-studio .builder-modal .builder-addons>summary b,.ff-studio .builder-modal .builder-addons[open] .addon-toggle-label::after,
.ff-studio .builder-dimensions label,.ff-studio .builder-feature-copy>span,.ff-studio .builder-feature-copy button,
.ff-studio .builder-feature-nav span{font-size:11px}
.ff-studio .builder-modal .builder.is-expanded .feature-launch-copy small,
.ff-studio .builder-modal .builder.is-expanded .feature-launch-copy em{font-size:11px!important}