/* BP client theme tokens: default colours retained; scene artwork untouched. */
/* Photo-only extension. The shared option and navigation styles are retained. */
.quiz-spray-foam .sf-preview-card {align-items:stretch!important;justify-content:stretch!important}
.quiz-spray-foam .sf-preview {
  position:relative;display:flex;overflow:hidden;width:100%!important;height:100%!important;
  max-width:100%;min-height:0;flex:1 1 auto!important;aspect-ratio:auto!important;background:#fff;
}
.sf-preview > .pv,.sf-preview > iframe,.sf-preview > .phonevis,
.sf-preview > .livepill,.sf-preview > .m-hero-tip {display:none!important}
.sf-stage {position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;isolation:isolate}
.sf-ambience {display:none}
.sf-scene,.sf-flat {position:absolute;inset:0}
.sf-scene[hidden],.sf-flat[hidden],.sf-segment[hidden] {display:none!important}
.sf-frame {position:absolute;overflow:hidden}
.sf-segment {position:absolute;left:0;width:100%;overflow:hidden}
.sf-scene[data-area="walls"] .sf-segment,.sf-clearance[data-area="walls"] .sf-segment{transition:transform var(--qr-t3,.4s) var(--qr-e,cubic-bezier(.16,1,.3,1))}
.sf-scene[data-area="walls"] .sf-source{transition:transform var(--qr-t3,.4s) var(--qr-e,cubic-bezier(.16,1,.3,1))}
.sf-clearance[data-area="walls"] .sf-segment>img{transition:transform var(--qr-t3,.4s) var(--qr-e,cubic-bezier(.16,1,.3,1))}
.sf-wall-floor{position:absolute;left:0;width:100%;overflow:hidden;z-index:3;pointer-events:none;mask-image:linear-gradient(to bottom,transparent,#000 9px);transition:transform var(--qr-t3,.4s) var(--qr-e,cubic-bezier(.16,1,.3,1))}
.sf-wall-floor img{position:absolute;max-width:none;object-fit:fill;transition:transform var(--qr-t3,.4s) var(--qr-e,cubic-bezier(.16,1,.3,1))}
.sf-wall-floor[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.sf-segment,.sf-source,.sf-clearance .sf-segment>img,.sf-wall-floor,.sf-wall-floor img{transition:none!important}}
.sf-source {position:absolute;left:0;transform-origin:top left}
.sf-target,.sf-inspection {position:absolute;inset:0}
.sf-source img {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none}
.sf-source .sf-after {clip-path:inset(0 100% 0 0);transition:clip-path var(--qr-t5) var(--qr-e)}
.sf-source .sf-after.sf-snap {transition:none}
.sf-inspection {opacity:0;transition:opacity var(--qr-t4,.6s) var(--qr-e-io,cubic-bezier(.65,0,.35,1));pointer-events:none}
.sf-inspection-open {opacity:1}
.sf-flat img {display:block;width:100%;height:100%;object-fit:contain;object-position:center;user-select:none}
.sf-flat img[hidden]{display:none}
.sf-closeup-mold{transition:opacity var(--qr-t4,.6s) var(--qr-e-io,cubic-bezier(.65,0,.35,1))}

/* Warning replaces help inside a fixed slot, never moving answers or Continue. */
.sf-moisture-message {position:relative;height:64px;flex:0 0 64px;margin-top:5px;font:500 .85rem/1.35 var(--f);color:var(--ink-soft)}
.sf-moisture-message > div {position:absolute;inset:0;display:flex;align-content:center;flex-wrap:wrap;padding:7px 0;overflow-y:auto}
.sf-moisture-message.sf-has-warning > div {display:block;padding:8px 10px;background:#fef2f2;border:1px solid #fca5a5;border-radius:10px;color:#7f1d1d}
.sf-moisture-message b {font-weight:800;color:#c62828}
.quiz-spray-foam[data-step="moisture"] .q-head {align-items:flex-start}
.quiz-spray-foam[data-step="moisture"] .q-head .tip {max-width:34%;margin-top:3px}
.quiz-spray-foam .q-help {white-space:normal}
.quiz-spray-foam .q-title {font-size:clamp(1.25rem,1.55vw,1.6rem)}
.quiz-spray-foam .shell {grid-template-columns:clamp(180px,13vw,236px) minmax(0,1fr) clamp(210px,17vw,300px)}
.quiz-spray-foam .q-card {height:clamp(300px,31dvh,400px)}
@media (min-width:901px) and (max-width:1150px) {
  .quiz-spray-foam .shell {padding:18px;grid-template-columns:minmax(0,1fr) 220px;gap:14px}
  .quiz-spray-foam .left {display:none}
}

/* Same fixed preview slot as Roofing/HVAC. Its dimensions never read answers. */
.quiz-spray-foam .m-preview.sf-preview {
  width:calc(100% - 32px)!important;height:min(calc((100vw - 32px) * 2 / 3), max(140px, calc(100svh - 405px)))!important;aspect-ratio:auto!important;
  margin:12px 16px 0;min-height:0;max-height:none!important;flex:0 0 auto!important;
}
.quiz-spray-foam .m-qpanel {overflow-y:auto;overscroll-behavior:contain}
.quiz-spray-foam .m-pgrid {min-height:146px;grid-auto-rows:minmax(0,1fr);flex:1 1 0}
.quiz-spray-foam .m-pcard img {position:absolute;inset:0}
.quiz-spray-foam .m-tiles {min-height:132px;grid-auto-rows:minmax(0,1fr);flex:1 1 0}
.quiz-spray-foam .m-pcard .cap{padding:18px 9px 7px;background:linear-gradient(180deg,transparent,rgba(8,6,4,.88))}
.quiz-spray-foam[data-step="currentInsul"] .m-pgrid{grid-template-rows:minmax(52px,1fr) minmax(52px,1fr) 44px;min-height:164px}
.quiz-spray-foam .m-pcard.nsure{flex-direction:row;gap:10px}
.quiz-spray-foam .m-pcard.nsure .fb-q svg{width:26px;height:26px}
.quiz-spray-foam[data-step="currentInsul"] .m-pcard.fb{grid-column:1 / -1;flex-direction:row;gap:10px}
.quiz-spray-foam[data-step="currentInsul"] .m-pcard.fb .fb-q svg{width:26px;height:26px}
.quiz-spray-foam .m-title {flex-shrink:0}
.quiz-spray-foam .m-help {flex-shrink:0}
.quiz-spray-foam[data-step="work"] .m-tiles {grid-template-columns:1fr 1fr}
.quiz-spray-foam[data-step="concerns"] .m-tiles{min-height:168px}
.quiz-spray-foam[data-step="concerns"] .m-tile{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px;padding:6px 8px;text-align:left}
.quiz-spray-foam[data-step="concerns"] .m-tile .gi svg{width:20px;height:20px}
.quiz-spray-foam[data-step="concerns"] .m-tile b{font-size:.84rem;line-height:1.12}
.quiz-spray-foam:is([data-step="sqft"],[data-step="floorSqft"],[data-step="wallLinearFt"],[data-step="wallHeight"],[data-step="rimLinearFt"],[data-step="rimHeight"]) .m-tile{display:grid;grid-template-columns:20px minmax(0,1fr);align-content:center;text-align:left;gap:3px 7px;padding:7px 9px}
.quiz-spray-foam:is([data-step="sqft"],[data-step="floorSqft"],[data-step="wallLinearFt"],[data-step="wallHeight"],[data-step="rimLinearFt"],[data-step="rimHeight"]) .m-tile .gi{grid-row:1 / 3}
.quiz-spray-foam:is([data-step="sqft"],[data-step="floorSqft"],[data-step="wallLinearFt"],[data-step="wallHeight"],[data-step="rimLinearFt"],[data-step="rimHeight"]) .m-tile b{grid-column:2;font-size:.92rem;line-height:1.1}
.quiz-spray-foam:is([data-step="sqft"],[data-step="floorSqft"],[data-step="wallLinearFt"],[data-step="wallHeight"],[data-step="rimLinearFt"],[data-step="rimHeight"]) .m-tile span{grid-column:2}
.quiz-spray-foam:is([data-step="sqft"],[data-step="floorSqft"],[data-step="wallLinearFt"],[data-step="wallHeight"],[data-step="rimLinearFt"],[data-step="rimHeight"]) .opt-reco{top:2px;left:auto;right:4px;font-size:.38rem}
.sf-mobile-tip {margin:2px 0 0;padding:7px 10px;background:#E9EFFD;border:1px solid #D2DEFB;border-radius:10px;color:#43557B;font:500 .75rem/1.4 var(--f);flex-shrink:0}
.sf-mobile-tip summary {cursor:pointer;font-weight:700}
.sf-mobile-tip p {margin-top:6px}
.sf-mobile-tip[open] {max-height:110px;overflow-y:auto}
@media (max-height:650px) and (max-width:900px) {
  .quiz-spray-foam .m-tile {padding:8px 10px;gap:4px}
}
@media (max-height:740px) {.quiz-spray-foam .sf-mobile-tip {display:none}}
@media (orientation:landscape) and (max-width:1366px) {
  .quiz-spray-foam .app {display:grid;grid-template-columns:58% 42%;grid-template-rows:38px 8px minmax(0,1fr) auto}
  .quiz-spray-foam .m-top,.quiz-spray-foam .m-segs {grid-column:1 / -1}
  .quiz-spray-foam .m-preview.sf-preview {grid-column:1;grid-row:3 / 5;align-self:center;justify-self:stretch;width:calc(100% - 24px)!important;height:auto!important;aspect-ratio:3 / 2!important;margin:8px 12px;max-height:calc(100dvh - 74px)!important}
  .quiz-spray-foam .m-body {grid-column:2;grid-row:3;min-height:0}
  .quiz-spray-foam .m-foot {grid-column:2;grid-row:4;padding-bottom:10px}
  .quiz-spray-foam .m-qpanel {justify-content:flex-start}
  .quiz-spray-foam .m-pgrid,.quiz-spray-foam .m-tiles {flex:0 0 auto;grid-auto-rows:minmax(74px,auto)}
}

/* Local review keeps the configured photo and all answers scrollable. */
@media (orientation:landscape) and (min-height:650px) and (max-width:1366px) {
  .quiz-spray-foam .m-qpanel{justify-content:center}
  .quiz-spray-foam .m-pgrid,.quiz-spray-foam .m-tiles{flex:0 0 320px;grid-auto-rows:1fr}
  .quiz-spray-foam .m-title{font-size:1.2rem}
  .quiz-spray-foam .m-help{font-size:.95rem}
}
.quiz-spray-foam .results {overflow-y:auto;align-items:flex-start}
.quiz-spray-foam .results-card,.quiz-spray-foam .r-card {height:auto;min-height:100dvh;max-height:none;justify-content:flex-start;padding-top:20px;padding-bottom:30px}
.quiz-spray-foam .r-atticbox {height:auto;max-height:none;aspect-ratio:auto;background:#e4dacd}
.sf-final-preview {position:relative;width:100%;overflow:hidden}
.sf-result-window {position:relative;overflow:hidden;transform-origin:top left}
.sf-final-preview .sf-after {clip-path:inset(0)!important}
.quiz-spray-foam .r-contractor[hidden] {display:none!important}
.quiz-spray-foam #resPhoto[hidden] {display:none!important}
.sf-result-summary {text-align:left;margin:16px auto;max-width:600px;width:100%;padding:0 12px}
.sf-result-summary > div {display:grid;grid-template-columns:1fr 1.2fr;gap:14px;padding:10px 0;border-bottom:1px solid #e8dfd4;font:500 .85rem/1.5 var(--f)}
.sf-result-summary dt {color:#82776b}
.sf-result-summary dd {margin:0;font-weight:700;color:#372e24;overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce) {.sf-source .sf-after,.sf-inspection {transition:none!important}}

/* Photographic top and front faces share one physical depth; no ruler overlay. */
.sf-depth-detail{position:absolute;left:0;top:0;width:1536px;height:1024px;transform-origin:0 0;overflow:hidden}
.sf-depth-detail[hidden]{display:none}
.sf-depth-detail img{position:absolute;left:0;top:0;width:1536px;height:1024px;max-width:none;transform-origin:0 0;display:block;user-select:none}
.sf-depth-aperture,.sf-depth-plane,.sf-depth-measure{position:absolute;inset:0;width:1536px;height:1024px;overflow:hidden;pointer-events:none}
.sf-depth-aperture{background:#876340}
.sf-depth-plane img{will-change:transform}
.sf-depth-front{filter:brightness(.94) drop-shadow(0 5px 5px #392a2030)}
.sf-depth-value {position:absolute;left:16px;top:16px;z-index:2;display:flex;align-items:baseline;gap:5px;padding:9px 13px;border-radius:12px;background:rgba(255,255,255,.94);color:var(--slate);box-shadow:0 2px 10px #0001;pointer-events:none;font:800 22px/1.1 var(--f)}
.sf-depth-value small {font-size:13px;font-weight:700}
.sf-depth-value[hidden] {display:none}
.sf-thickness-note{margin:0;min-height:22px;flex-shrink:0;font:600 .875rem/1.4 var(--f);color:var(--ink-soft)}
.quiz-spray-foam[data-step="thickness"] .opts,.quiz-spray-foam[data-step="thickness"] .opts.sqft-active{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(70px,1fr) auto;grid-auto-flow:row}
.quiz-spray-foam[data-step="thickness"] .opts .opt.dtile{grid-row:1;grid-column:auto;min-height:70px;padding:8px 12px;gap:5px}
.quiz-spray-foam[data-step="thickness"] .opts .opt.dtile .gi{height:22px;min-height:22px}
.quiz-spray-foam[data-step="thickness"] .opts .opt.dtile .gi svg{height:22px;width:22px}
.quiz-spray-foam[data-step="thickness"] .opts .opt.dtile span{font-size:.75rem;letter-spacing:0;text-transform:none}
.quiz-spray-foam[data-step="thickness"] .opts .sqft-input{grid-column:1 / -1;grid-row:2;min-height:44px}
.quiz-spray-foam[data-step="thickness"] .m-tiles{grid-template-columns:1fr;grid-auto-rows:minmax(56px,1fr);min-height:124px;flex:1 1 0}
.quiz-spray-foam[data-step="thickness"] .m-tile{display:grid;grid-template-columns:26px minmax(0,1fr);align-content:center;text-align:left;gap:3px 10px;padding:8px 12px}
.quiz-spray-foam[data-step="thickness"] .m-tile .gi{grid-row:1 / 3}
.quiz-spray-foam[data-step="thickness"] .m-tile .gi svg{width:28px;height:28px}
.quiz-spray-foam[data-step="thickness"] .m-tile b{grid-column:2;font-size:.94rem}
.quiz-spray-foam[data-step="thickness"] .m-tile span{grid-column:2;font-size:.72rem;letter-spacing:0}
.quiz-spray-foam[data-step="thickness"] .m-field.sqft-input{font-size:1.1rem;min-height:56px;padding:12px}
.quiz-spray-foam[data-step="thickness"] .sf-thickness-note{font-size:.78rem;min-height:18px}
.quiz-spray-foam[data-step="thickness"] .sqft-input[aria-invalid="true"]{border-color:#b45309}
@media (orientation:landscape) and (max-width:1366px) {
  .quiz-spray-foam[data-step="thickness"] .m-tiles {flex:0 0 auto;grid-auto-rows:minmax(90px,auto)}
}