/* FullFlow "Your deck design" (assets/fullflow/deck-design.js): the design page, the estimator's after-Send screen and
   the dashboard quote. Everything sits under .ffd; --ffd-brand is the contractor's brand color. Mobile first. */
.ffd{--ffd-ink:#16202a;--ffd-muted:#56616d;--ffd-line:#e3e7ec;color:var(--ffd-ink);text-align:left}
.ffd *{box-sizing:border-box}
.ffd-title{font-size:26px;line-height:1.2;margin:0 0 12px;letter-spacing:-.015em}
.ffd-h{font-size:18px;margin:22px 0 8px;color:var(--ffd-brand)}
h4.ffd-h{font-size:16px;margin:16px 0 6px}
.ffd-k{display:block;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ffd-muted)}
.ffd-sub{display:block;font-size:14px;color:var(--ffd-muted)}
.ffd-muted{color:var(--ffd-muted);margin:4px 0}
.ffd-price{background:color-mix(in srgb,var(--ffd-brand) 8%,#fff);border:1px solid color-mix(in srgb,var(--ffd-brand) 22%,#fff);border-radius:14px;padding:12px 16px;margin:0 0 14px}
.ffd-price b{display:block;font-size:26px;line-height:1.25;color:var(--ffd-brand);font-variant-numeric:tabular-nums}
.ffd-price-hold b,.ffd-price-review b{font-size:19px}
.ffd-price .ffd-sub{margin-top:4px}
.ffd-area{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:#fff7e8;border:1px solid #f1d7a6;color:#6b4300;font-size:15px}
.ffd-plan{margin:0;background:#fafbfc;border:1px solid var(--ffd-line);border-radius:14px;padding:8px;overflow:hidden}
.ffd-plan svg{display:block;width:100%;height:auto;max-height:70vh;margin:0 auto}
.ffd-plan figcaption{font-size:14px;color:var(--ffd-muted);padding:6px 4px 2px}
.ffd-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.ffd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:12px;background:var(--ffd-brand);color:#fff;font-weight:700;text-decoration:none;border:2px solid var(--ffd-brand);font-size:16px;cursor:pointer}
.ffd-btn-ghost{background:#fff;color:var(--ffd-brand)}
.ffd-grid{display:grid;grid-template-columns:1fr;gap:0 28px}
.ffd ul{list-style:none;margin:0;padding:0}
.ffd-levels li,.ffd-stairs li{display:flex;flex-wrap:wrap;gap:2px 12px;padding:9px 0;border-bottom:1px solid var(--ffd-line)}
.ffd-levels li b,.ffd-stairs li b{flex:1 0 100%}
.ffd-levels li span,.ffd-stairs li span{font-size:15px;color:#2b3640}
.ffd-levels li span+span::before,.ffd-stairs li span+span::before{content:"·";margin-right:12px;color:var(--ffd-muted)}
.ffd-mat{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--ffd-line)}
.ffd-mat-t{flex:1;min-width:0}
.ffd-mat-t b{display:block;line-height:1.3}
.ffd-chip{flex:0 0 auto;width:40px;height:40px;border-radius:9px;border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.ffd-chip-none{visibility:hidden} /* no color for this item: no tile (a hatched tile read as a missing image, look swarm r2); the row keeps its alignment */
.ffd-thumb{flex:0 0 auto;width:72px;height:56px;object-fit:cover;border-radius:9px;border:1px solid var(--ffd-line);background:#f1f3f5}
.ffd-addons{display:grid;grid-template-columns:1fr;gap:8px}
.ffd-addons li{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--ffd-line);border-radius:12px;background:#fff}
.ffd-addons .ffd-thumb{width:84px;height:64px}
.ffd-thumb-none{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ffd-brand) 10%,#fff);border-color:color-mix(in srgb,var(--ffd-brand) 22%,#fff);color:var(--ffd-brand);font-weight:700;font-size:22px;line-height:1;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.ffd-addons .ffd-thumb-none{width:64px;height:64px}
.ffd-dashboard .ffd-thumb-none{width:46px;height:46px;font-size:18px}
/* "Good to know": the site and how it is built, a plain checklist (every trade) */
.ffd-know li{position:relative;padding:8px 0 8px 26px;border-bottom:1px solid var(--ffd-line);font-size:15px;color:#2b3640}
.ffd-know li::before{content:"";position:absolute;left:4px;top:14px;width:10px;height:6px;border-left:2px solid var(--ffd-brand);border-bottom:2px solid var(--ffd-brand);transform:rotate(-45deg)}
.ffd-notes li{padding:8px 12px;border-left:3px solid var(--ffd-line);margin:0 0 8px;background:#f9fafb}
@media (min-width:640px){.ffd-addons{grid-template-columns:1fr 1fr}}
/* the design page on a wide screen: the sections run full width (no tall empty block under a short Levels / Stairs column)
   and their rows sit two to a line */
@media (min-width:860px){.ffd-page .ffd-levels,.ffd-page .ffd-stairs,.ffd-page .ffd-mats{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}.ffd-addons{grid-template-columns:repeat(3,1fr)}.ffd-confirm .ffd-addons,.ffd-dashboard .ffd-addons{grid-template-columns:1fr 1fr}}
/* compact: the estimator's after-Send screen and the dashboard quote */
.ffd-confirm .ffd-price b{font-size:22px}
.ffd-dashboard .ffd-plan svg{max-height:440px}
.ffd-dashboard .ffd-chip{width:32px;height:32px}
.ffd-dashboard .ffd-thumb{width:60px;height:46px}

/* ---- the design page (/fullflow/d/...): the estimator's header (a white bar with a 3px --ffd-brand rule on top, the
   contractor's logo left, the phone as a pill and the license under it right), the estimator's 880px column */
.ffd-page-body{margin:0;background:#f4f5f2;font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#16202a;-webkit-text-size-adjust:100%}
.ffd-top{background:#fff;border-bottom:1px solid #e3e7ec;box-shadow:inset 0 3px 0 var(--ffd-brand)}
.ffd-top-in,.ffd-main,.ffd-pagefoot{max-width:880px;margin:0 auto;padding:0 16px}
.ffd-top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.ffd-brand{display:flex;align-items:center;gap:10px;color:var(--ffd-brand);font-weight:700;font-size:18px;line-height:1.2;letter-spacing:-.01em;text-decoration:none;min-width:0}
.ffd-brand img{height:46px;width:auto;max-width:180px;object-fit:contain}
.ffd-brand.has-logo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ffd-contact{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:14px;color:#56616d}
.ffd-phone{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ffd-brand);font-weight:700;font-size:16px;text-decoration:none;padding:0 14px 0 12px;border:1px solid #cbd3dc;border-radius:999px;background:#fff;font-variant-numeric:tabular-nums}
.ffd-phone::before{content:"";width:16px;height:16px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover){.ffd-phone:hover{background:color-mix(in srgb,var(--ffd-brand) 7%,#fff);border-color:var(--ffd-brand)}}
.ffd-license{padding-right:4px}
@media (max-width:599px){
  .ffd-top-in{flex-wrap:nowrap;min-height:64px;gap:10px}
  .ffd-brand{flex:0 1 auto}
  .ffd-brand img{height:38px;max-width:128px}
  .ffd-brand span{font-size:16px}
  .ffd-contact{flex:0 0 auto;gap:0}
  .ffd-phone{font-size:15px;padding:0 12px 0 10px;gap:6px}
  .ffd-phone::before{width:14px;height:14px}
  .ffd-license{line-height:1.25;max-width:160px;text-align:right}
}
.ffd-main{padding-top:18px;padding-bottom:24px}
.ffd-card{background:#fff;border:1px solid #e3e7ec;border-radius:18px;padding:18px 16px 22px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px -2px rgba(16,24,40,.07)}
.ffd-meta{color:#56616d;font-size:15px;margin:0 0 14px}
.ffd-bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
@media (max-width:599px){.ffd-bar>*{flex:1 1 0;min-width:0;padding:0 10px}}
.ffd-foot{color:#56616d;font-size:14px;margin:18px 0 0}
/* the footer: "Powered by FullFlow", as on the estimator */
.ffd-pagefoot{padding-bottom:26px;text-align:center}
.ffd-powered{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#5b6570;text-decoration:none;font-size:13px}
.ffd-powered img{opacity:.7;filter:grayscale(1)}
@media (hover:hover){.ffd-powered:hover{color:#16202a}.ffd-powered:hover img{opacity:1;filter:none}}
@media (min-width:860px){.ffd-card{padding:28px 32px 32px}}
@media print{
  .ffd-page-body{background:#fff}
  .ffd-bar,.ffd-actions{display:none!important}
  .ffd-card{border:0;box-shadow:none;padding:0}
  .ffd-top{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ffd-phone{border:0;padding:0;min-height:0}
  .ffd-plan{break-inside:avoid}
  .ffd-plan svg{max-height:none}
  .ffd-addons li,.ffd-mat{break-inside:avoid}
}
/* the drawing: the phone one (laid out at 360 px, fit to the screen's width, its key as a list under it) below 600 px,
   the large one above it and in print */
.ffd-plan-lg{display:none}
@media (min-width:600px){.ffd-plan-sm{display:none}.ffd-plan-lg{display:block}}
@media print{.ffd-plan-sm{display:none!important}.ffd-plan-lg{display:block!important}}
@media (max-width:599px){.ffd-plan{padding:2px;border-radius:10px}.ffd-plan figcaption{padding:6px 8px 4px}}
/* the phone drawing is laid out at 440 px (the whole deck and its labels on the screen; the side lengths may sit past the edge) in a box that swipes sideways, opened centered (deck-design.js
   center()): a shadow shows on each side that has more to see, and the key is a wrapping list under it */
.ffd-pan{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:8px;
  background:linear-gradient(90deg,#fafbfc 30%,rgba(250,251,252,0)) left/28px 100% no-repeat local,linear-gradient(270deg,#fafbfc 30%,rgba(250,251,252,0)) right/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(16,24,40,.28),rgba(16,24,40,0)) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(16,24,40,.28),rgba(16,24,40,0)) right/12px 100% no-repeat scroll,#fafbfc}
.ffd-pan svg{width:440px!important;max-width:none!important;max-height:none;background:transparent!important}
.ffd-pan:focus-visible{outline:3px solid var(--ffd-brand);outline-offset:2px}
.ffd-swipe{font-size:14px;color:var(--ffd-muted);margin:6px 6px 0}
.ffd .ffd-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 6px 2px;padding:0;font-size:14px;line-height:1.35;color:#1d232b}
.ffd-key li{display:inline-flex;gap:5px;align-items:baseline}
.ffd-key b{color:#92400e}
/* the patio side view (concrete-design.js): drawn for the width it is shown at, the phone one below 600 px */
.ffd-sec-lg{display:none}
.ffd-sec-lg svg{max-width:720px;margin:0 auto}
@media (min-width:600px){.ffd-sec-sm{display:none}.ffd-sec-lg{display:block}}
@media print{.ffd-sec-sm{display:none!important}.ffd-sec-lg{display:block!important}}
/* the dashboard quote: the design at the top (app.js) */
.ffd-dash .ffd{margin-top:8px}
.ffd-dashboard .ffd-btn{background:#fff;color:#0f1b2d;border:1.5px solid #0f1b2d;border-radius:10px;font-weight:600;min-height:44px}
.ffd-dashboard .ffd-h{color:#0f1b2d}
.ffd-dashboard .ffd-view-btn[aria-pressed="true"]{background:#0f1b2d}
@media (min-width:860px){.ffd-dashboard .ffd-grid{grid-template-columns:1fr 1fr}}
/* the picture of the deck (deck-render.js): top-down, in their boards, border and railing, above the measured drawing */
.ffd-render{margin:0 0 14px;background:#e9ede4;border:1px solid var(--ffd-line);border-radius:14px;overflow:hidden}
.ffd-render[hidden],.ffd-plan[hidden]{display:none}
.ffd-render svg{display:block;width:100%;height:auto;max-height:72vh;margin:0 auto}
.ffd-render figcaption{font-size:14px;font-weight:700;color:var(--ffd-ink,#1d232b);background:#fff;padding:8px 12px;border-top:1px solid var(--ffd-line)}
.ffd-dashboard .ffd-render svg{max-height:440px}
.ffd-view-toggle{display:inline-flex;gap:0;margin:0 0 8px;border:1px solid var(--ffd-line);border-radius:999px;overflow:hidden}
.ffd-view-btn{font:inherit;font-size:14px;font-weight:700;padding:6px 14px;border:0;background:#fff;color:var(--ffd-ink,#1d232b);cursor:pointer}
.ffd-view-btn[aria-pressed="true"]{background:var(--ffd-brand,#173f32);color:#fff}
.ffd-view-btn:focus-visible{outline:3px solid #1d232b;outline-offset:-3px}
@media print{.ffd-render{break-inside:avoid}.ffd-render svg{max-height:none}}
@media (max-width:599px){.ffd-render{border-radius:10px}}