/* edmontondeckbuilder.com, what this site adds on top of site.css.
   site.css is shared with the original build and is copied in unchanged. Everything below is
   either an identity choice or a component that only exists here: the advanced panel, the
   takeoff tables, the honest lead result block, saved designs, and the print rules. */

/* ---------------------------------------------------------------- identity accents */
.brand .mark { display: inline-block; width: .55em; height: .55em; margin-right: .38em; background: var(--accent); border-radius: 2px; transform: translateY(-.06em); }
.eyebrow.big { font-size: 13px; }

/* a plain, honest fact strip: no invented numbers, just what is true */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s4) var(--s8); padding-block: var(--s8); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts .f { display: flex; gap: var(--s3); align-items: flex-start; }
.facts .f .mk { flex: none; width: 10px; height: 10px; margin-top: 7px; background: var(--accent); border-radius: 2px; }
.facts .f b { display: block; font-family: var(--f-label); font-size: 14px; line-height: 20px; }
.facts .f span { color: var(--ink-muted); font-size: 14px; line-height: 1.45; }

/* ---------------------------------------------------------------- cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s6); }
.card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s6); }
.card h3 { font-family: var(--f-display); font-size: 21px; line-height: 1.2; margin: 0 0 var(--s2); }
.card p { margin: 0; color: var(--ink-muted); font-size: 15.5px; }
.card .n { font-family: var(--f-label); font-size: 11px; letter-spacing: var(--e-ls); text-transform: uppercase; color: var(--accent-ink); display: block; margin-bottom: var(--s2); }
a.card { text-decoration: none; display: block; }
a.card:hover { border-color: var(--line-strong); }

/* ---------------------------------------------------------------- hero */
.hero-plain { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s12); align-items: center; padding-block: var(--s12) var(--s16); }
.hero-plain .art { border-radius: var(--r-card); overflow: hidden; background: var(--surface-raised); border: 1px solid var(--line); padding: 8px; }
.hero-plain .art svg { display: block; width: 100%; height: auto; }
.hero-plain .cap { display: block; margin-top: var(--s2); font-family: var(--f-label); font-size: 12px; color: var(--ink-muted); }
@media (max-width: 880px) { .hero-plain { grid-template-columns: 1fr; gap: var(--s8); padding-block: var(--s8) var(--s12); } }

/* ---------------------------------------------------------------- gallery of renders */
.rendergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s8); }
.renderfig { margin: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.renderfig .pic { padding: 8px; }
.renderfig .pic svg { display: block; width: 100%; height: auto; }
.renderfig figcaption { padding: var(--s4) var(--s6) var(--s6); border-top: 1px solid var(--line); }
.renderfig figcaption h3 { font-family: var(--f-display); font-size: 20px; margin: 0 0 var(--s2); }
.renderfig figcaption p { margin: 0 0 var(--s2); font-size: 15px; color: var(--ink-muted); }
.renderfig .fig-num { font-family: var(--f-label); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink); }
.renderfig .fig-do { display: inline-block; margin-top: var(--s2); font-family: var(--f-label); font-size: 13px; font-weight: 600; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- advanced panel */
details.advanced { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; }
details.advanced > summary { cursor: pointer; font-family: var(--f-label); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
details.advanced > summary::marker { color: var(--accent); }
details.advanced[open] > summary { margin-bottom: var(--s4); }
.adv-block { border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s4); }
.adv-block:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.adv-block h5 { margin: 0 0 8px; font-family: var(--f-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; }
.adv-block h5 span { text-transform: none; letter-spacing: 0; font-weight: 400; font-family: var(--f-body); font-size: 12px; text-align: right; flex: 1 1 160px; }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; }
.adv-grid label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.adv-grid input { font: inherit; font-size: 14px; width: 70px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.adv-u { color: var(--ink-muted); font-size: 13px; }
.adv-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); max-width: none; }
.adv-row { margin: 0; }
.adv-row select { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.adv-check { display: flex; gap: 10px; align-items: center; font-size: 15px; cursor: pointer; }
.adv-check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------------------------------------------------------------- takeoff */
.takeoff { margin-top: 14px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; }
.takeoff[hidden] { display: none; }
.tk-head h3 { font-family: var(--f-display); font-size: 22px; margin: 0 0 var(--s2); }
.tk-head p { font-size: 14px; margin: 0 0 var(--s4); max-width: none; }
table.tk { width: 100%; border-collapse: collapse; margin-bottom: var(--s4); font-size: 14px; }
table.tk caption { text-align: left; font-family: var(--f-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; padding-bottom: 4px; }
table.tk th, table.tk td { text-align: left; vertical-align: top; padding: 6px 10px 6px 0; border-top: 1px solid var(--line); font-weight: 400; }
table.tk th { font-family: var(--f-label); font-weight: 600; width: 30%; }
table.tk .tk-q { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; width: 1%; }
table.tk .tk-q span { font-weight: 400; color: var(--ink-muted); }
table.tk .tk-w { color: var(--ink-muted); }
.tk-notes { margin: 0 0 var(--s4); padding-left: 1.1em; font-size: 14px; color: var(--ink-muted); }
.tk-notes li { margin-bottom: 6px; }
.tk-honest { font-size: 14px; line-height: 1.55; margin: 0; padding: var(--s4); background: var(--accent-soft); border-radius: var(--r-card); max-width: none; }
@media (max-width: 640px) {
  table.tk th, table.tk .tk-q, table.tk .tk-w { display: block; width: auto; border-top: 0; padding: 0; }
  table.tk tr { display: block; border-top: 1px solid var(--line); padding: 8px 0; }
}

/* ---------------------------------------------------------------- saved designs */
.saved-list { display: flex; flex-direction: column; gap: 6px; }
.saved-row { display: flex; gap: 8px; align-items: center; }
.saved-open { flex: 1; text-align: left; font: inherit; font-size: 14px; font-weight: 600; padding: 7px 10px; border: 1.5px solid var(--line-strong); border-radius: var(--r-card); background: transparent; color: var(--ink); cursor: pointer; }
.saved-del { font: inherit; font-size: 13px; padding: 6px 8px; border: 0; background: none; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------------------------------------------------------------- forms and lead result */
form.edb { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
form.edb label { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-label); font-size: 14px; font-weight: 600; }
form.edb label.full { grid-column: 1 / -1; }
form.edb input, form.edb select, form.edb textarea { font: inherit; font-size: 16px; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface-raised); color: var(--ink); width: 100%; }
form.edb textarea { min-height: 120px; resize: vertical; }
form.edb .actions { grid-column: 1 / -1; }
form.edb .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 620px) { form.edb { grid-template-columns: 1fr; } }

.lead-out { grid-column: 1 / -1; border-radius: var(--r-card); padding: var(--s6); border: 1.5px solid var(--line-strong); }
.lead-out[hidden] { display: none; }
.lead-out h4 { margin: 0 0 var(--s2); font-family: var(--f-display); font-size: 20px; }
.lead-out p { margin: 0 0 var(--s3); font-size: 15px; max-width: none; }
.lead-out.ok { background: var(--accent-soft); border-color: var(--accent); }
.lead-out.fail { background: var(--surface-raised); border-color: #b1442a; }
.lead-text { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface); color: var(--ink); margin-bottom: var(--s3); }

/* ---------------------------------------------------------------- the designer page */
.tool-note { font-size: 14px; color: var(--ink-muted); margin: 0 0 var(--s4); }
.stage .act .btn + .btn { margin-left: 8px; }
.deck-explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s8); }
.deck-explain .item .pic { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px; margin-bottom: var(--s3); }
.deck-explain .item .pic svg { display: block; width: 100%; height: auto; }
.deck-explain .item h3 { font-family: var(--f-display); font-size: 20px; margin: 0 0 var(--s2); }
.deck-explain .item p { margin: 0; color: var(--ink-muted); font-size: 15px; }

/* ---------------------------------------------------------------- long-form pages */
.qa { margin: 0; }
.qa dt { font-family: var(--f-label); font-weight: 600; font-size: 17px; margin-top: var(--s6); }
.qa dd { margin: var(--s2) 0 0; color: var(--ink-muted); max-width: 70ch; }
.stepnums { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s6); }
.stepnums .step { border-top: 2px solid var(--accent); padding-top: var(--s3); }
.stepnums .step .num { font-family: var(--f-label); font-size: 12px; letter-spacing: var(--e-ls); color: var(--accent-ink); }
.stepnums .step h3 { font-family: var(--f-display); font-size: 21px; margin: var(--s2) 0; }
.stepnums .step p { margin: 0; color: var(--ink-muted); font-size: 15px; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: 15.5px; }
.src { font-size: 13px; color: var(--ink-muted); max-width: none; }

/* ---------------------------------------------------------------- footer */
footer.site .legal { font-size: 13px; color: var(--ink-muted); }

/* ---------------------------------------------------------------- print
   What a homeowner or a yard prints: the drawing, the description, the takeoff. Not the controls. */
@media print {
  header.top, footer.site, .controls, .viewbar, .send, .no-print, nav.main, .btn { display: none !important; }
  .bench { display: block; }
  .stage { position: static; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .canvas, .spec, .takeoff { border: 1px solid #999; break-inside: avoid; }
  a[href]::after { content: ""; }
}

/* ---------------------------------------------------------------- part drawings (assets/js/parts.js)
   Side views and sections: the part being taught in the accent colour, everything else quiet. */
.pd { display: block; width: 100%; height: auto; font-family: var(--f-label); overflow: visible; }
.pd text { font-size: 15px; fill: var(--ink); }
.pd .pd-lab { font-weight: 600; }
.pd .pd-small { font-size: 13px; fill: var(--ink-muted); }
.pd .pd-cap { font-size: 14px; fill: var(--ink); }
.pd .pd-acc { fill: var(--accent-ink); }
.pd .pd-dimt { font-size: 14px; font-weight: 700; fill: var(--ink); }
.pd .pd-dim { stroke: var(--ink-muted); stroke-width: 1.2; }
.pd .pd-soilbg { fill: var(--surface); }
.pd .pd-hatch { stroke: var(--line-strong); stroke-width: 1; }
.pd .pd-grade { stroke: var(--ink-muted); stroke-width: 1.5; }
.pd .pd-wall { fill: var(--line); stroke: var(--ink-muted); stroke-width: 1; }
.pd .pd-door { fill: var(--surface-inverse); }
.pd .pd-board { fill: #b98a5a; stroke: #7a5534; stroke-width: .8; }
.pd .pd-frame, .pd .pd-post, .pd .pd-deckside, .pd .pd-step { fill: #d8c3a5; stroke: #8a6a45; stroke-width: .8; }
.pd .pd-deckplan { fill: #d8c3a5; stroke: #8a6a45; stroke-width: 1; }
.pd .pd-ramp { fill: #cdbb9f; stroke: #8a6a45; stroke-width: .8; }
.pd .pd-hi { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.5; }
.pd .pd-landing { stroke-dasharray: 5 3; }
.pd .pd-ghost { fill: none; stroke: var(--ink-muted); stroke-width: 1.2; stroke-dasharray: 4 3; }
.pd .pd-flow { stroke: #3d7bbf; stroke-width: 2.2; fill: none; }
.pd .pd-rain { stroke: #5b8fc7; stroke-width: 1.6; stroke-dasharray: 3 4; }
.pd .pd-heat { stroke: #c0572b; stroke-width: 2; stroke-dasharray: 5 4; }
.pd .pd-arrowhead { fill: var(--ink-muted); }
.pd .pd-splash { fill: #9fbcd8; }
.pd .pd-sun { fill: #f2c94c; opacity: .55; }
.pd .pd-sunball { fill: #f2b01e; }
.pd .pd-tub { fill: #e8e4dc; stroke: var(--ink); stroke-width: 1.5; }
.pd .pd-water { fill: #9fc4e4; }
.pd .pd-rim { stroke: var(--accent); stroke-width: 4; }
.pd .pd-pad { stroke: var(--ink-muted); stroke-width: 1; }
.pd .pd-concbg { fill: #d9d6cf; }
.pd .pd-dot { fill: #7d776c; }
.pd .pd-stone { fill: #a8a296; stroke: #7d776c; stroke-width: .5; }
.pd .pd-plank { fill: #cfa877; stroke: #8a6a45; stroke-width: .8; }
.pd .pd-access, .pd .pd-keyside { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.pd .pd-accessdoor { fill: var(--accent); }
.pd .pd-housekey { stroke: var(--ink); stroke-width: 3; }
.pd .pd-tubkey { fill: #e8e4dc; stroke: var(--ink-muted); stroke-width: 1; }
.pd .pd-power { stroke: #c0572b; stroke-width: 2.5; }
.pd .pd-gas { stroke: #d4a017; stroke-width: 2.5; }
.pd .pd-waterline { stroke: #3d7bbf; stroke-width: 2.5; }
.pd .pd-old { stroke-dasharray: 3 4; opacity: .7; }
.pd .pd-hose { fill: none; stroke: #3a8a4d; stroke-width: 2.5; }
.pd .pd-slat { stroke: #8a6a45; stroke-width: 3; }
.pd .pd-postl { stroke: #8a6a45; stroke-width: 4; }
.pd .pd-roof { fill: var(--surface-inverse); }
.pd .pd-glass { fill: #bcd7ea; opacity: .45; stroke: #7aa6c8; stroke-width: 1; }
.pd .pd-leader { stroke: var(--accent); stroke-width: 1; }
.pd .pd-t-power { fill: #b04a1f; font-weight: 600; }
.pd .pd-t-gas { fill: #9a7408; font-weight: 600; }
.pd .pd-t-water { fill: #2f68a8; font-weight: 600; }

/* ---------------------------------------------------------------- the designer, rebuilt (design.html) */
/* The drawing first and pinned: on a laptop it sits in the right column, sticky, holding only the drawing, the view bar and the price; on a phone it is a band about 40 per cent of the screen tall that stays at the top while the controls scroll under it. Everything else (words, quantities, the send form) sits below the bench. */
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tiny { font-size: 13px; line-height: 1.45; margin: 6px 0 0; }
.btn.small { padding: 8px 14px; font-size: 13px; }
.wrap.wide { max-width: 1640px; }
.dtitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-block: 14px 2px; }
.dtitle .dh { font-family: var(--f-display); font-weight: var(--d-weight); font-size: 30px; line-height: 1.1; margin: 0; }
.dtitle .dsub { margin: 0; font-size: 14px; color: var(--ink-muted); }
.designer .bench { display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-areas: "controls stage"; gap: var(--s6); align-items: start; padding-block: 8px var(--s8); }
.designer .stage { grid-area: stage; position: sticky; top: calc(72px + env(safe-area-inset-top, 0px) + 8px); z-index: 5; }
.designer .controls { grid-area: controls; gap: 10px; }
.canvasrow { display: flex; gap: 6px; align-items: stretch; justify-content: center; }
.canvasbox { position: relative; width: min(100%, calc((100vh - 72px - 200px) * 800 / 520)); flex: 0 1 auto; }
.designer .canvas { width: 100%; }
.camcol { flex: 0 0 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; }
/* the camera height: a plain slider, thin beside the view angle slider, and three fifths of its length (edb-camera.js) */
.camh { writing-mode: vertical-lr; direction: rtl; flex: 0 1 auto; width: 22px; height: 45%; min-height: 48px; margin: 0; accent-color: var(--accent); cursor: ns-resize; }
.camlab { font-family: var(--f-label); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); writing-mode: vertical-rl; transform: rotate(180deg); }
.pricebar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 6px; padding: 8px 12px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-card); }
.pricebar b { display: block; font-family: var(--f-display); font-weight: var(--d-weight); font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pricebar small { display: block; font-family: var(--f-label); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-top: 2px; }
.pricebar .tag { display: inline-block; font-family: var(--f-label); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #a56a1c; border: 1px solid #a56a1c; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
.after-bench { padding-block: 0 var(--s12); }
.after-bench .spec { margin-top: 0; }
.ctl-head { font-family: var(--f-label); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin: 8px 2px -2px; }
.permit-line { font-size: 13.5px; line-height: 1.45; margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 6px 6px 0; max-width: none; }
.chg-note { font-size: 13px; line-height: 1.45; color: var(--ink); background: var(--accent-soft); border-radius: 6px; padding: 6px 9px; margin: 8px 0 0; max-width: none; }
.checks.row { flex-direction: row; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; }
/* a chooser: the setting, the choice made and how many there are, on one button; its list opens under it */
.pick { border-top: 1px solid var(--line); }
.group > h4 + .pick { border-top: 0; }
.pick-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 2px; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.pick-name { flex: 0 0 auto; min-width: 92px; font-family: var(--f-label); font-size: 12px; letter-spacing: .04em; color: var(--ink-muted); }
.pick-val { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-n { flex: 0 0 auto; font-family: var(--f-label); font-size: 11px; color: var(--ink-muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 7px; }
.pick-btn::after, .fold-btn::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg); margin: -4px 4px 0 2px; transition: transform .15s; }
.pick-btn[aria-expanded="true"]::after, .fold-btn[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 4px; }
.pick-panel { padding: 2px 0 12px; }
.pick-panel.seg button, .pick-panel.presets button { min-height: 40px; }
.seg button:disabled { opacity: .42; cursor: not-allowed; }
.fold-btn { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; min-height: 40px; font: inherit; font-family: var(--f-label); font-size: 13px; font-weight: 600; color: var(--accent-ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-btn); cursor: pointer; }
.fold { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--line); }
.fold .slider { margin: 6px 0; }
.tub-inset { margin: 10px 0 2px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: var(--surface-raised); }
details.advanced .group { border: 0; padding: 12px 0 0; background: none; border-top: 1px solid var(--line); border-radius: 0; margin-top: 12px; }
/* the mark on the drawing where a small part just changed */
.mark-layer { position: absolute; inset: 0; pointer-events: none; }
.chg-mark { position: absolute; pointer-events: none; animation: chgfade 2.6s ease-out forwards; }
.chg-mark.box, .chg-mark.ring { border: 2.5px solid var(--accent); border-radius: 10px; background: rgba(214, 140, 60, .14); box-shadow: 0 0 0 3px var(--surface-raised); }
.chg-mark.ring { border-radius: 50%; }
.chg-mark.tag { background: var(--accent); color: var(--on-accent); font-family: var(--f-label); font-size: 13px; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
@keyframes chgfade { 0% { opacity: 0; transform: scale(1.18); } 12% { opacity: 1; transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes chgfade-still { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chg-mark { animation: chgfade-still 2.6s linear forwards; } }
.mini-slider { margin: 4px 0 8px; }
@media (min-width: 901px) { .designer .controls .group { scroll-margin-top: 90px; } }
@media (max-width: 900px) {
  body:has(main.designer) header.top { position: static; }
  .designer .bench { display: block; padding-top: 0; }
  .designer .stage { position: sticky; top: 0; z-index: 15; margin: 0 -16px; padding: 6px 16px 6px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .25); }
  .canvasbox { width: min(100%, calc((40vh - 92px) * 800 / 520)); }
  .designer .canvas { padding: 4px; }
  .camcol { flex-basis: 30px; padding: 4px 0; }
  .camh { min-height: 48px; }
  .designer .viewbar { margin-top: 4px; gap: 6px; flex-wrap: nowrap; }
  .designer .viewbar button { padding: 4px 8px; font-size: 12px; }
  .designer .viewbar .vlab { position: absolute; left: 22px; top: 12px; min-width: 0; flex: none; font-size: 11px; background: var(--surface-raised); padding: 1px 6px; border-radius: 4px; }
  .pricebar { margin-top: 4px; padding: 4px 10px; }
  .pricebar b { font-size: 19px; }
  .pricebar small { font-size: 10px; }
  .designer .controls { margin-top: 12px; }
  .designer .controls .group, .designer .controls .ctl-head { scroll-margin-top: 44vh; }
  .dtitle { padding-block: 10px 6px; }
  .dtitle .dh { font-size: 24px; }
}

/* ---------------------------------------------------------------- home: the drawing first, a few words, one button */
.hero-tool { padding-block: var(--s8) var(--s12); }
.hero-tool .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); grid-template-areas: "head art" "copy art"; gap: var(--s4) var(--s12); align-items: end; max-width: 1480px; }
.ht-head { grid-area: head; }
.ht-art { grid-area: art; align-self: center; }
.ht-copy { grid-area: copy; align-self: start; }
.ht-head .display { font-size: clamp(34px, 4.2vw, 58px); margin: 0; }
.ht-price { margin: 0; }
.ht-price b { display: block; font-family: var(--f-display); font-weight: var(--d-weight); font-size: 30px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ht-price span { font-size: 14px; color: var(--ink-muted); }
.ht-go { margin: var(--s4) 0 var(--s2); }
.ht-small { font-size: 14px; margin: 0; }
.home .canvasbox { width: 100%; }
.hero-link { display: block; border-radius: var(--r-card); }
.hero-link .art { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px; }
.hero-link .art svg { display: block; width: 100%; height: auto; }
.hero-link:hover .art { border-color: var(--line-strong); }
.more-band { padding-block: var(--s8) var(--s12); }
details.more > summary { cursor: pointer; font-family: var(--f-label); font-weight: 600; font-size: 16px; color: var(--accent-ink); padding: var(--s3) 0; }
details.more[open] > summary { margin-bottom: var(--s6); }
details.more h2.h { margin-top: var(--s12); }
@media (max-width: 880px) {
  .hero-tool { padding-block: var(--s4) var(--s8); }
  .hero-tool .wrap { grid-template-columns: 1fr; grid-template-areas: "head" "art" "copy"; gap: var(--s4); }
  .ht-head .display { font-size: 32px; }
  .ht-price b { font-size: 24px; }
}
/* ---------------------------------------------------------------- gallery: the drawings first */
.gal-top { padding-top: var(--s8); }
.gal-h { font-family: var(--f-display); font-weight: var(--d-weight); font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin: 0 0 6px; }
.gal-label { color: var(--ink-muted); margin: 0 0 var(--s6); font-size: 15px; }
.renderfig .pic { display: block; }
.renderfig .fig-facts { font-family: var(--f-label); font-size: 13.5px; color: var(--ink); }
.seg .off-note { flex-basis: 100%; margin: 4px 0 0; }
.designer .controls { padding-bottom: 42vh; }   /* the last group can reach the middle of the window with the drawing still pinned */
.designer .canvas { touch-action: pan-y; cursor: grab; }
.viewbar .tog[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
@media print { .camcol, .mark-layer, .pricebar .btn { display: none !important; } .designer .bench { display: block; } }
/* the stage in reading order: the drawing, the view angle controls, then the camera height beside the drawing */
.designer .stage, .ht-art { display: grid; grid-template-columns: minmax(0, 1fr) 34px; grid-template-areas: "canvas cam" "view view" "price price"; column-gap: 6px; }
.designer .stage > .canvasbox, .ht-art > .canvasbox { grid-area: canvas; justify-self: center; }
.designer .stage > .camcol, .ht-art > .camcol { grid-area: cam; }
.designer .stage > .viewbar, .ht-art > .viewbar { grid-area: view; }
.designer .stage > .pricebar { grid-area: price; }
@media (max-width: 900px) { .designer .stage { grid-template-columns: minmax(0, 1fr) 30px; } }
/* the view angle slider is the first camera control and the heaviest (DI-E-D1, DI-X14): a thicker track and a bigger thumb than the plain camera height slider beside the drawing */
.viewbar input[type="range"] { -webkit-appearance: none; appearance: none; height: 30px; margin: 0; background: transparent; cursor: ew-resize; }
.viewbar input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
.viewbar input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface-raised); box-shadow: 0 1px 5px rgba(0, 0, 0, .35); }
.viewbar input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
.viewbar input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface-raised); box-shadow: 0 1px 5px rgba(0, 0, 0, .35); }
/* the height card's second bar: the ramp the engine lays from the deck up to the door */
.pd .pd-hi2 { fill: var(--accent); fill-opacity: .55; }