/* FullFlow FENCE estimator: what the fence page adds to the shared estimator styles (estimator.css, catalog-cards.css).
   FENCE ONLY. Built from estimator.css's tokens (--brand, --line, --radius ...), so a contractor's brand color carries.
   The drawing studio imitates the deck studio (sierra-studio-ff.css): a full-screen sheet, white header with a 3px brand
   underline, pill tools, a light grid, the dark brand "SKETCHED" card. */
:root{--fx-canvas:color-mix(in srgb,var(--brand) 3%,#fff)}

/* step 2: the plan preview */
.fx-preview{padding:4px 10px 6px;background:#fafbfc}
.fx-preview svg{display:block;width:100%;height:auto;max-height:520px}
/* step 3: the close-up; steps 4-5: the whole fence */
.fx-closeup{margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(#f7f9f7,#fff);box-shadow:var(--sh-1);overflow:hidden}
.fx-closeup .fx-pic{padding:10px 14px 4px}
.fx-closeup .fx-pic svg{display:block;width:100%;height:auto;max-height:280px}
.fx-closeup p{margin:0;padding:4px 14px 12px;color:var(--muted);font-size:15px}
.fx-render{margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--sh-1);overflow:hidden}
.fx-render:empty{display:none}
.fx-render-h{margin:0;padding:12px 14px 2px;font-size:17px;font-weight:750;color:var(--ink)}
.fx-render-sub{margin:0;padding:0 14px 8px;color:var(--muted);font-size:14px}
.fx-render .fx-pic{padding:0 10px 10px}
.ffc-media.fx-drawn{display:grid;place-items:end center;background:linear-gradient(#eef4f8 0 70%,#e9e2d3 70%)}
.ffc-media.fx-drawn svg{width:100%;height:100%}
.fx-help-after{margin-top:8px}
.fx-gates{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.fx-gates li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.fx-gates li span{color:var(--muted);font-size:14px}

/* the studio */
.fx-studio{position:fixed;inset:0;z-index:60;background:var(--bg);overflow:auto;-webkit-overflow-scrolling:touch}
body.fx-open{overflow:hidden}
.fx-shead{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:#fff;border-bottom:3px solid var(--brand);box-shadow:var(--sh-1)}
.fx-shead span{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--brand)}
.fx-shead h4{margin:0;font-size:24px;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.fx-hbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.fx-cancel{border:1.5px solid var(--line-strong);background:#fff;border-radius:12px;padding:9px 14px;font-weight:650;cursor:pointer;min-height:44px;white-space:nowrap;color:var(--ink)}
.fx-done{white-space:nowrap}
.fx-done{border:0;background:var(--brand);color:var(--brand-ink);border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer;min-height:44px}
.fx-sbody{max-width:1240px;margin:0 auto;padding:12px 16px 40px}
.fx-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:2px 0 10px;font-size:14px;color:var(--ink-2)}
.fx-row strong{font-size:13px;letter-spacing:.1em;color:var(--muted)}
.fx-tools{display:flex;flex-wrap:wrap;gap:8px;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:#fbfcfb;margin-bottom:12px}
.fx-tool{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;font-weight:650;font-size:14px;cursor:pointer;min-height:44px;color:var(--ink)}
.fx-tool:hover:not(:disabled){border-color:var(--brand)}
.fx-tool:disabled{opacity:.45;cursor:not-allowed}
.fx-tool.dark{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.fx-snap{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.fx-snap input{width:18px;height:18px;accent-color:var(--brand)}
/* the whole label is the checkbox's 44 px tap target; the box itself keeps its size, with a visible focus ring */
.fx-snap input:focus-visible,.fx-sel .fx-gchk input:focus-visible{outline:3px solid #1d232b;outline-offset:2px}
.fx-tool:focus-visible,.fx-cancel:focus-visible,.fx-done:focus-visible,.fx-zoom button:focus-visible{outline:3px solid #1d232b;outline-offset:2px}
.fx-work{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
@media (max-width:900px){.fx-work{grid-template-columns:minmax(0,1fr)}}
.fx-canvas{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--fx-canvas);overflow:hidden}
#fx-plan{display:block;width:100%;height:auto;max-height:72vh;touch-action:none;user-select:none;-webkit-user-select:none}
#fx-plan:focus-visible{outline:3px solid #1d232b;outline-offset:-3px}
.fx-pzoom{position:absolute;right:10px;top:10px;display:flex;gap:6px}
.fx-pzoom button{width:44px;height:44px;border:1.5px solid var(--line);border-radius:10px;background:rgba(255,255,255,.95);font-weight:700;cursor:pointer;font-size:18px}
.fx-pzoom button:focus-visible{outline:3px solid #1d232b;outline-offset:2px}
.fx-key{position:absolute;left:10px;top:10px;display:flex;flex-wrap:wrap;gap:4px 12px;padding:5px 10px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:8px;font-size:12px;color:var(--ink-2);pointer-events:none}
.fx-key i{display:inline-block;width:18px;height:0;margin-right:5px;vertical-align:middle;border-top:4px solid var(--fx-fence,#7d4d2b)}
.fx-key i.g{border-top:2px dashed var(--muted)}
.fx-key i.h{border-top:6px solid #c9ced3}
.fx-side{display:grid;gap:12px}
.fx-total{background:var(--brand);color:var(--brand-ink);border-radius:var(--radius);padding:14px 16px}
.fx-total span{font-size:12px;font-weight:800;letter-spacing:.12em;opacity:.85}
.fx-total strong{display:block;font-size:30px;line-height:1.1;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.fx-total small{display:block;opacity:.85;font-size:13px}
.fx-panel{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:12px}
.fx-panel h5{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--accent)}
.fx-sides{display:grid;gap:6px}
.fx-sideitem{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:#fcfdfc;cursor:pointer}
.fx-sideitem.sel{border-color:var(--brand);box-shadow:0 0 0 1.5px var(--brand);background:var(--brand-soft)}
.fx-sidebtn{min-height:44px;min-width:44px;border:0;background:none;padding:4px 6px;margin:-4px 0;text-align:left;cursor:pointer;border-radius:8px;font:inherit;color:var(--ink-2)}
.fx-sidebtn:focus-visible,.fx-sideitem select:focus-visible{outline:3px solid #1d232b;outline-offset:1px}
.fx-sideitem b{font-size:13px;font-variant-numeric:tabular-nums;color:var(--brand);text-decoration:underline dotted}
.fx-sidebtn span{display:block;font-size:12px;color:var(--muted)}
.fx-sideitem select{width:100%;min-height:40px;border:1.5px solid var(--line-strong);border-radius:8px;padding:4px 6px;font-weight:650;font-size:14px;background:#fff}
.fx-sel label{display:block;font-size:13px;font-weight:650;margin:8px 0 4px;color:var(--ink)}
.fx-sel select,.fx-sel input{width:100%;min-height:44px;border:1.5px solid var(--line-strong);border-radius:10px;padding:6px 10px;background:#fff}
.fx-sel .fx-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fx-sel dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:4px 0 0;font-size:14px}
.fx-sel dt{color:var(--muted)}
.fx-sel dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}
.fx-tip{border:2px solid var(--ink);border-radius:var(--radius);background:#fff;padding:12px 14px;font-size:14px;color:var(--ink-2)}
.fx-tip b{display:block;font-size:16px;color:var(--ink);margin-bottom:2px}
.fx-sidev{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.fx-sidev-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px 4px}
.fx-sidev-h h5{margin:0;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.fx-sidev-h p{flex-basis:100%;margin:0 0 6px;color:var(--muted);font-size:14px}
.fx-zoom{display:flex;gap:6px}
.fx-mini{display:none}
@media (max-width:600px){.fx-mini{display:block;flex:0 0 auto;width:96px;height:56px;border:1px solid var(--line);border-radius:8px;background:var(--fx-canvas);pointer-events:none}.fx-sidev-h h5{flex:1 1 100%}.fx-sidev-h .fx-zoom{margin-left:auto}}
.fx-mini line[stroke-opacity=".28"]{stroke-opacity:.7}

.fx-zoom button{width:44px;height:44px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font-weight:700;cursor:pointer;font-size:18px}
.fx-scroll{overflow-x:auto;background:var(--fx-canvas);border-top:1px solid var(--line)}
#fx-sidesvg{display:block;touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none}
.fx-hint{margin:12px 0 0;padding:12px 14px;border-left:4px solid var(--brand);background:#fff;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-weight:600;font-size:15px}
.fx-hint.warn{border-left-color:#b45309;background:#fff7ed;color:#7c2d12}
/* the hint is the drawing frame's foot (fence-estimator.html puts it in .fx-canvas, under #fx-plan): on a phone it stays
   next to the drawing instead of below the side panel. A reserved height, so a short message and a long one keep the
   tray and side view below it in place; the plan above never moves */
.fx-canvas .fx-hint{margin:0;min-height:48px;border-top:1px solid var(--line);border-radius:0}
.fx-warn{border-color:#f59e0b;background:#fffbeb}
.fx-warn h5{color:#92400e}
.fx-warn p{margin:6px 0;font-size:14px;color:#7c2d12}
.fx-warn .fx-tool{margin-top:6px}
.fx-sel .fx-jump{font-size:13px}
.fx-sel h5:focus{outline:none}
.fx-ground-note{margin:8px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:14px;color:var(--ink-2)}
.fx-ground-note .ff-btn{margin-top:8px}
.fx-sample-note{margin:0;padding:6px 14px 2px}
.fx-gates li.bad{border-color:#f59e0b;background:#fffbeb}
.fx-gates li.bad span{color:#7c2d12}
.fx-render .fx-pic svg{max-height:460px}
/* step 5: the plan, then the side view under a hairline */
.fx-render .fx-side-h{margin-top:2px;padding-top:10px;border-top:1px solid var(--line)}
.fx-snote{margin-top:12px}
/* side view parts (fence-render.js sideSvg, editing) */
.sv-grid{stroke:color-mix(in srgb,var(--brand) 9%,#fff);stroke-width:1}
.sv-gl,.sv-sta{font:500 10px var(--font);fill:#6b7480}
.sv-gline{cursor:copy}
.sv-ghit{cursor:copy}
.sv-band{fill:#fff;stroke:var(--line-strong);cursor:pointer}
.sv-band.sel{fill:var(--brand-soft);stroke:var(--brand)}
.sv-bandt{font:650 11px var(--font);fill:var(--ink);pointer-events:none}
.sv-tint{fill:var(--brand);fill-opacity:.06;pointer-events:none}
.sv-corner{stroke:#8a949e;stroke-dasharray:4 3;pointer-events:none}
.sv-tick{stroke:#8a949e}
.sv-wallt{font:800 11px var(--font);letter-spacing:.12em;fill:#6b7480}
.sv-dot{fill:#fff;stroke:#7a6142;stroke-width:2;cursor:ns-resize}
.sv-dot.v{fill:#7a6142}
.sv-dot.sel{fill:var(--brand);stroke:var(--brand)}
.sv-dotl{font:650 10px var(--font);fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3px;pointer-events:none}
.sv-call{font:700 11px var(--font);fill:var(--brand);paint-order:stroke;stroke:#fff;stroke-width:3px;pointer-events:none}
@media (max-width:600px){
  .fx-pzoom{right:6px;top:6px}
  .fx-shead{padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .fx-shead h4{font-size:19px}.fx-shead span{font-size:11px}
  .fx-hbtns{flex-wrap:nowrap;gap:6px}.fx-cancel,.fx-done{padding:8px 11px;font-size:15px}
  /* "Discard changes" and Done stay on one row with the title: the small "DESIGN STUDIO" label above the title goes
     (the dialog is named by its title), and the two buttons are a little tighter */
  .fx-shead span{display:none}
  .fx-cancel,.fx-done{padding:8px;font-size:14px}
}
/* a 320-400 px phone: the title takes two short lines beside the buttons, so the header stays one 44 px row */
@media (max-width:400px){
  .fx-shead h4{font-size:16px}
  .fx-row{margin:0 0 8px}.fx-tools{margin-bottom:8px}
  .fx-sbody{padding:10px 12px 32px}.fx-total strong{font-size:26px}
  /* one row that scrolls sideways, so the drawing keeps the screen instead of three rows of tools above it */
  .fx-tools{gap:6px;padding:8px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .fx-tools::-webkit-scrollbar{display:none}
  .fx-tool{padding:8px 10px;flex:0 0 auto;white-space:nowrap}
  .fx-key{position:static;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:#fff}
}
/* a phone on its side (about 340 px tall): the same one-row toolbar as a narrow phone, a slimmer header, and a plan that
   fits under them, so the drawing is on screen when the studio opens (04-UI-SPEC.md viewport matrix, phone landscape) */
@media (max-height:500px) and (orientation:landscape){
  .fx-shead{padding:4px 16px;padding-top:calc(4px + env(safe-area-inset-top,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .fx-shead h4{font-size:19px}.fx-shead span{font-size:11px}
  .fx-hbtns{flex-wrap:nowrap}
  .fx-sbody{padding:8px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
  .fx-row{margin:0 0 4px}
  .fx-tools{padding:4px 8px;margin-bottom:8px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .fx-tools::-webkit-scrollbar{display:none}
  .fx-tool{flex:0 0 auto;white-space:nowrap}
  /* 343 px of height holds the header, the toolbar, the drawing and the message bar under it, all in view when the
     studio opens. The ONE FENCE summary row is left out here: its length is in the total under the drawing, and its
     28 px go to the drawing, so a two-finger pinch on a small fence does not land on a side's + split handle */
  .fx-shead span{display:none}
  .fx-row{display:none}
  .fx-sbody{padding-top:4px}
  .fx-tools{margin-bottom:4px}
  /* header + toolbar are about 118 px and the 14 px bar is 48 px on one line (about 56 on two), so the plan gets the rest */
  .fx-canvas .fx-hint{padding:8px 12px;font-size:14px;line-height:1.35}
  #fx-plan{max-height:calc(100dvh - 172px)}
}
@media (prefers-reduced-motion:reduce){.fx-studio *{scroll-behavior:auto!important}}
/* the height chips: all across on a wide card, 2 or 3 across on a phone (fence-estimator.js sets --n / --pn) */
#fx-pick-height{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
@media (max-width:520px){#fx-pick-height{grid-template-columns:repeat(var(--pn,3),minmax(0,1fr))}}
/* the studio's bottom tray (the deck studio's "Deck features & add-ons"): a white band at the foot of the sheet with a
   row of cards (picture, name, one button); See all opens it into a grid with category tabs */
.fx-tray{margin:12px 0 0;padding:12px 14px 12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-1)}
.fx-tray-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;max-width:1240px;margin:0 auto 8px}
.fx-tray-head h5{margin:0;font-size:16px;font-weight:800;letter-spacing:.01em;color:var(--brand)}
.fx-tray-head span{color:var(--muted);font-size:13px;font-weight:600}
.fx-tray-all{margin-left:auto;border:0;background:none;color:var(--brand);font-weight:750;font-size:14px;cursor:pointer;min-height:44px;padding:0 4px}
.fx-tray-tabs{display:flex;flex-wrap:wrap;gap:6px;max-width:1240px;margin:0 auto 8px}
.fx-tray-tab{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font-weight:700;font-size:13px;cursor:pointer;min-height:40px;color:var(--ink)}
.fx-tray-tab[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.fx-tray-list{display:flex;gap:10px;overflow-x:auto;max-width:1240px;margin:0 auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.fx-tray.open .fx-tray-list{display:grid;overflow:visible}
.fx-tray-card{flex:0 0 156px;display:grid;grid-template-rows:auto 1fr auto;gap:6px;padding:0 0 8px;border:1px solid var(--line);border-radius:10px;background:#fff;scroll-snap-align:start;overflow:hidden}
.fx-tray-card.on{border-color:var(--brand);box-shadow:0 0 0 1.5px var(--brand);background:var(--brand-soft)}
.fx-tray-pic{display:grid;place-items:end center;width:100%;height:64px;overflow:hidden;background:linear-gradient(#eef4f8 0 70%,#e9e2d3 70%)}
.fx-tray-pic svg,.fx-tray-pic img{width:100%;height:100%;object-fit:cover}
.fx-tray-t{min-width:0;padding:0 8px}
.fx-tray-t b{display:block;font-size:14px;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-tray-t small{display:none;font-size:12px;line-height:1.3;color:var(--muted);margin-top:2px}
.fx-tray.open .fx-tray-t small{display:block}
.fx-tray.open .fx-tray-t b{white-space:normal}
.fx-tray-btn{margin:0 8px;border:0;background:var(--brand);color:var(--brand-ink);border-radius:8px;padding:8px 10px;font-weight:750;font-size:13px;cursor:pointer;min-height:44px;line-height:1.15}
.fx-tray-btn[aria-pressed="true"]{background:#fff;color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand)}
.fx-tray-btn:focus-visible,.fx-tray-tab:focus-visible,.fx-tray-all:focus-visible{outline:3px solid #1d232b;outline-offset:2px}
.fx-tray.open .fx-tray-list{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
@media (max-width:600px){.fx-tray{padding:10px}.fx-tray-card{flex-basis:140px}.fx-tray-pic{height:54px}.fx-tray-head span{display:none}.fx-tray.open .fx-tray-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}}
/* the gate panel's hardware rows */
.fx-sel .fx-sub-h{margin:12px 0 2px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fx-sel .fx-gchk{display:flex;gap:8px;align-items:center;min-height:44px;margin:0;font-size:14px;font-weight:600;cursor:pointer}
.fx-sel .fx-gchk input{flex:0 0 auto;width:20px;min-height:0;height:20px;margin:0;accent-color:var(--brand)}
.fx-sel textarea{width:100%;border:1.5px solid var(--line-strong);border-radius:10px;padding:6px 10px;font:inherit;font-size:14px}
/* Materials: the custom fence (description + photo), the custom height box, the "styles we missed" box */
.fx-custom{display:grid;gap:8px;margin-top:10px;padding:12px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);background:#fff}
.fx-custom textarea{width:100%}
.fx-photo-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fx-photo-row img{width:96px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.fx-hcustom{display:grid;gap:6px;margin-top:10px;max-width:360px}
.fx-hcustom input{min-height:44px;border:1.5px solid var(--line-strong);border-radius:10px;padding:6px 10px;font-size:16px}
.fx-hnote{margin:8px 0 0;padding:10px 12px;border-left:4px solid #b45309;background:#fff7ed;border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:#7c2d12;font-size:14px}
.fx-missed{margin-top:10px}
.fx-missed summary{cursor:pointer;font-weight:700;color:var(--brand);min-height:44px;display:flex;align-items:center}
.fx-missed textarea{width:100%;margin-top:6px}
.fx-extras-grid{display:grid;gap:8px}
.fx-gate-adds{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.fx-four{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:520px){.fx-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the row's first card: "See all add-ons (N)", as on the deck studio's row (tray-see-all.js there) */
.fx-tray-see{flex:0 0 120px;display:grid;place-content:center;justify-items:center;gap:6px;border:1.5px dashed var(--brand);border-radius:10px;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:14px;cursor:pointer;min-height:132px;padding:8px;text-align:center}
.fx-tray-see svg{fill:currentColor}
.fx-tray.open .fx-tray-see{display:none}
.fx-tray-see:focus-visible{outline:3px solid #1d232b;outline-offset:2px}
/* the deck studio's layout on a wide screen: the drawing and its side panel one height (the panel scrolls inside), so
   the hint and the add-on tray sit right under them, in view, as on the deck studio */
@media (min-width:901px){
  #fx-plan{max-height:60vh}
  .fx-side{max-height:60vh;overflow:auto;overscroll-behavior:contain;padding-right:2px;scrollbar-width:thin;scrollbar-gutter:stable}
  /* more below (fence-studio.js sideMore): the foot fades out instead of a button cut in half */
  .fx-side.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 44px),transparent);mask-image:linear-gradient(#000 calc(100% - 44px),transparent)}
}
#fx-plan{-webkit-touch-callout:none}
.fx-see-top{display:inline-flex;align-items:center;gap:6px}
.fx-see-top svg{fill:currentColor;flex:0 0 auto}

/* [FF fence-phone] the studio on a phone (Elijah, 2026-10-27): the page never pinch- or double-tap-zooms (only the plan
   zooms, with two fingers: fence-studio.js), so quick taps on Undo stay taps; the house step; the fence's total on the
   drawing; a big slider over the side view; Undo / Redo pinned to the bottom of the screen */
.fx-studio{touch-action:pan-x pan-y;overscroll-behavior:contain}
.fx-studio button,.fx-studio select,.fx-studio input,.fx-studio label,.fx-studio summary{touch-action:manipulation}
.fx-housebar{display:grid;gap:8px;margin:0 0 16px;padding:16px;border:2px solid var(--brand);border-radius:var(--radius);background:var(--brand-soft)}
.fx-housebar p{margin:0;font-size:14px;color:var(--ink-2)}
.fx-housebar b{display:block;font-size:16px;color:var(--ink);margin-bottom:4px}
.fx-hsize{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.fx-hsize label{display:grid;gap:4px;font-size:13px;font-weight:650;color:var(--ink)}
.fx-hsize input{width:110px;min-height:44px;border:1.5px solid var(--line-strong);border-radius:10px;padding:4px 8px;font-size:16px;background:#fff}
.fx-hsize span{font-weight:800;padding-bottom:16px;color:var(--muted)}
.fx-hacts{display:flex;flex-wrap:wrap;gap:8px}
.fx-ptotal{position:absolute;left:8px;bottom:8px;padding:4px 16px;border-radius:999px;background:var(--brand);color:var(--brand-ink);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;pointer-events:none}
.fx-ptotal:empty{display:none}
@media (max-width:600px){.fx-ptotal{top:8px;bottom:auto}}
.fx-sslide{display:flex;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid var(--line)}
.fx-sslide[hidden]{display:none}
.fx-sslide span{flex:0 0 auto;min-width:96px;font-weight:750;font-size:14px;color:var(--brand);font-variant-numeric:tabular-nums}
#fx-sslide{flex:1;min-width:0;height:44px;margin:0;accent-color:var(--brand);-webkit-appearance:none;appearance:none;background:transparent;touch-action:none}
#fx-sslide::-webkit-slider-runnable-track{height:12px;border-radius:6px;background:var(--line)}
#fx-sslide::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:34px;margin-top:-11px;border-radius:12px;background:var(--brand);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
#fx-sslide::-moz-range-track{height:12px;border-radius:6px;background:var(--line)}
#fx-sslide::-moz-range-thumb{width:40px;height:30px;border-radius:12px;background:var(--brand);border:3px solid #fff}
.fx-bar{position:sticky;bottom:0;z-index:3;display:flex;gap:8px;margin:16px 0 0;padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));border-radius:var(--radius);background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(0,0,0,.08)}
.fx-bar .fx-tool{flex:1;font-size:15px}
.fx-bar .fx-tool.dark{flex:1.4}
.fx-studio{scroll-padding-bottom:64px}
@media (max-width:600px){.fx-bar{padding:4px 8px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px));gap:4px}.fx-bar .fx-tool{font-size:14px;padding:4px 8px}}
/* [FF fence-phone] the sides list: a fold-out with a one-line summary (open on a wide screen, folded on a phone) */
.fx-sidesbox summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;min-height:44px;cursor:pointer;list-style:none}
.fx-sidesbox summary::-webkit-details-marker{display:none}
.fx-sidesbox summary h5{margin:0}
.fx-sidesbox summary span{font-size:14px;font-weight:650;color:var(--ink-2)}
.fx-sidesbox summary span::after{content:" ▾";color:var(--muted)}
.fx-sidesbox[open] summary span::after{content:" ▴"}
.fx-sidesbox[open] summary{margin-bottom:8px}
.fx-sidesbox summary:focus-visible{outline:3px solid #1d232b;outline-offset:2px}
/* a phone (Elijah, 2026-10-27, "too much going on"): one column in this order: the tip (folded to its title once the fence
   is shaped), the tools, the house step, the drawing with its message bar, a picked side / corner / gate, the add-ons, the
   sides (folded), the side view; no "+ Corner" button (the + on each side adds one) and no total card (the total is on the
   drawing and in the row above it) */
@media (max-width:600px){
  .fx-sbody{display:flex;flex-direction:column}
  .fx-work,.fx-side{display:contents}
  .fx-row{order:1}.fx-tip{order:2}.fx-tools{order:3}.fx-housebar{order:4}.fx-canvas{order:5}.fx-warn{order:6}
  .fx-sel{order:7}.fx-tray{order:8}.fx-sidesbox{order:9}.fx-sidev{order:10}.fx-bar{order:11}.fx-snote{order:12}
  .fx-canvas,.fx-warn,.fx-sel,.fx-sidesbox,.fx-tip{margin-bottom:8px}
  .fx-tray{margin:0 0 8px}
  #fx-t-corner,.fx-total{display:none}
  .fx-tip{padding:8px 16px;cursor:pointer}
  .fx-tip b{display:flex;justify-content:space-between;align-items:center;min-height:28px}
  .fx-tip b::after{content:"▴";font-size:14px;color:var(--muted)}
  .fx-tip.fold b{margin:0}.fx-tip.fold b::after{content:"Tips ▾";font-size:13px;font-weight:650}
  .fx-tip.fold span{display:none}
  .fx-sideitem{padding:4px 8px}
  .fx-sidesbox{padding:4px 16px}
  .fx-sidev-h p{display:none}
  .fx-sideitem select{min-height:44px}
}
/* [FF fence-phone] the drawing full screen (a phone, fence-studio.js setFull): the drawing fills the screen; a bar along
   the top has only what the step needs (close, the step, Undo, Redo, one more action, the next step) */
.fx-fbar,.fx-fhint{display:none}
.fx-hsize[hidden]{display:none}
.fx-studio.fx-full .fx-canvas{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;margin:0;border:0;border-radius:0}
.fx-studio.fx-full .fx-fbar{display:flex;align-items:center;gap:4px;padding:8px;padding-top:calc(8px + env(safe-area-inset-top,0px));background:#fff;border-bottom:3px solid var(--brand)}
.fx-studio.fx-full .fx-fbar b{flex:1;min-width:0;font-size:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.fx-fb{flex:0 0 auto;min-width:44px;min-height:44px;padding:0 8px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;touch-action:manipulation}
.fx-fb.dark{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.fx-fb:disabled{opacity:.4}
.fx-fb[hidden]{display:none}
.fx-fb:focus-visible{outline:3px solid #1d232b;outline-offset:2px}
.fx-studio.fx-full #fx-plan{flex:1 1 0;min-height:0;height:auto;max-height:none}
.fx-studio.fx-full .fx-key{display:none}
.fx-studio.fx-full .fx-pzoom{top:calc(72px + env(safe-area-inset-top,0px))}
.fx-studio.fx-full .fx-ptotal{top:calc(72px + env(safe-area-inset-top,0px));bottom:auto}
.fx-studio.fx-full .fx-hint{margin:0;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
@media (max-width:600px){
  .fx-studio:not(.fx-full) .fx-fhint{display:block;position:absolute;left:50%;bottom:48px;transform:translateX(-50%);padding:4px 16px;border-radius:999px;background:rgba(29,35,43,.85);color:#fff;font-weight:700;font-size:13px;white-space:nowrap;pointer-events:none}
}
#fx-sidesvg [data-gv],#fx-sidesvg [data-gr]{touch-action:none}