/* BP client theme tokens: default colours retained; scene artwork untouched. */
/* BlueProprty template V1, adapted around the approved Spray Foam V14 renderer.
   Measurement controls and photographic layers keep their own styles. */
.quiz-spray-foam .app .m-top{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:6px}
.quiz-spray-foam .app .m-hback{width:44px;height:44px;background:#E9EFFD;border:1px solid #B8CBF8;color:var(--bp-brand-hover,#1D4FD7);touch-action:manipulation}
.quiz-spray-foam .app .m-hback svg{width:20px;height:20px;color:inherit}
.quiz-spray-foam .shell .rail-logo{transform:translateY(8px)}
.quiz-spray-foam .shell #backBtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:9px 16px;border:1px solid #B8CBF8;border-radius:11px;background:#E9EFFD;color:var(--bp-brand-hover,#1D4FD7);font-weight:750}
.quiz-spray-foam :is(.m-hback,#backBtn):focus-visible{outline:3px solid var(--bp-brand,#2563EB);outline-offset:2px}
@media(hover:hover){.quiz-spray-foam :is(.m-hback,#backBtn):hover{background:#dce6fc;border-color:var(--bp-brand,#2563EB)}}
.quiz-spray-foam .m-cont{min-height:46px;touch-action:manipulation}

/* Only the viewport determines this slot, including on short phones. */
.quiz-spray-foam .app .m-preview.sf-preview{height:min(calc((100vw - 32px) * 2 / 3),max(150px,calc(100svh - 425px)))!important}
.quiz-spray-foam .shell .q-card{height:clamp(338px,38svh,400px);transition:none}
.quiz-spray-foam .shell .q-panel:not(.sf-dimension-panel){padding-top:14px}
.quiz-spray-foam .shell .q-panel:not(.sf-dimension-panel) .q-scroll{padding-top:8px}
.quiz-spray-foam .shell .btn-next{min-height:48px}

/* Ordinary answers: two columns; an odd last answer spans both, the same card inside (one rule on every quiz).
   Thickness is a separate, existing form; measurements have their own module. */
.quiz-spray-foam:not([data-step="thickness"]) .m-tiles,
.quiz-spray-foam .m-pgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(76px,1fr)}
.quiz-spray-foam:not([data-step="thickness"]) .m-tile,
.quiz-spray-foam .m-pgrid .m-pcard{grid-column:auto;grid-row:auto;min-width:0}
.quiz-spray-foam:not([data-step="thickness"]) .m-tile.full,.quiz-spray-foam .m-pgrid .m-pcard.full{grid-column:1 / -1}
.quiz-spray-foam[data-step="currentInsul"] .m-pgrid{grid-template-rows:repeat(3,minmax(80px,1fr));min-height:256px}
.quiz-spray-foam[data-step="currentInsul"] .m-pcard.fb{flex-direction:column;gap:5px}
.quiz-spray-foam[data-step="concerns"] .m-tiles{grid-auto-rows:minmax(58px,1fr);min-height:186px}
.quiz-spray-foam .m-pcard .cap b{line-height:1.15}
.quiz-spray-foam .m-pcard .cap small{line-height:1.2}
.quiz-spray-foam :is(.m-tile,.m-pcard,.opt):focus-visible{outline:3px solid var(--bp-brand,#2563EB);outline-offset:-3px}
.quiz-spray-foam .q-help{overflow:visible;text-overflow:clip}
/* Selection stays blue through its border and check; keep a neutral caption
   instead of the legacy orange overlay on natural material thumbnails. */
.quiz-spray-foam .shell .opt.photo.--sel .opt-body{background:linear-gradient(180deg,transparent 0,rgba(12,18,28,.5) 45%,rgba(12,18,28,.82))}

/* Five photos and six priorities use regular rows on desktop. */
.quiz-spray-foam:is([data-step="currentInsul"],[data-step="concerns"]) .shell .opts{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(80px,1fr));grid-auto-columns:auto;margin-top:0}
.quiz-spray-foam:is([data-step="currentInsul"],[data-step="concerns"]) .shell .opt{grid-column:auto;grid-row:auto;min-width:0}
.quiz-spray-foam[data-step="concerns"] .shell .opt.dtile{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;text-align:left;padding:8px 10px}
.quiz-spray-foam[data-step="concerns"] .shell .opt.dtile .gi svg{width:26px;height:26px}
.quiz-spray-foam[data-step="concerns"] .shell .opt.dtile b{font-size:.9rem;line-height:1.2}

/* Tablets use the single-column envelope and equal three-column answer grids
   in landscape. Short landscape phones retain the approved split scene. */
@media(orientation:landscape) and (max-width:1366px){
  .quiz-spray-foam .app{grid-template-rows:58px 8px minmax(0,1fr) auto}
  .quiz-spray-foam .app .m-preview.sf-preview{height:auto!important;max-height:calc(100svh - 94px)!important}
  .quiz-spray-foam .m-pgrid,.quiz-spray-foam:not([data-step="thickness"]) .m-tiles{grid-auto-rows:minmax(76px,1fr)}
}
@media(orientation:landscape) and (min-width:700px) and (min-height:650px) and (max-width:1366px){
  .quiz-spray-foam .app{display:flex}
  .quiz-spray-foam .app .m-preview.sf-preview{width:calc(100% - 32px)!important;height:min(calc((100vw - 32px) * 2 / 3),max(150px,calc(100svh - 425px)))!important;aspect-ratio:auto!important;margin:12px 16px 0;max-height:none!important}
  .quiz-spray-foam .m-qpanel{justify-content:flex-start}
  .quiz-spray-foam .m-pgrid,.quiz-spray-foam:not([data-step="thickness"]) .m-tiles{flex:1 1 0}
  .quiz-spray-foam:is([data-step="moisture"],[data-step="access"],[data-step="currentInsul"],[data-step="concerns"]) :is(.m-pgrid,.m-tiles){grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(76px,1fr);min-height:76px}
  .quiz-spray-foam:is([data-step="currentInsul"],[data-step="concerns"]) :is(.m-pgrid,.m-tiles){min-height:164px}
}

/* ==========================================================================
   Shared-engine standard (body.bp-engine, as roofing/insulation/HVAC): the block at the end of
   /shared/quiz-refine.css gives the tiles, Continue, Back and steppers their press, hover and focus.
   The rules below only bring this quiz's own controls into it and undo rules that would block it.
   ========================================================================== */
/* phones: answers size to their content instead of stretching to fill the panel (step 1 was two 190px cards);
   the question panel scrolls when they do not fit */
html body.bp-engine.quiz-spray-foam .app .m-tiles{flex:0 0 auto;grid-template-rows:none;grid-auto-rows:minmax(64px,auto);align-content:start;min-height:0}
/* nothing under 12px but the uppercase eyebrows: photo captions' second line (10.9px desktop, 9.9px phone) and thickness sub-labels (11.5px) */
html body.bp-engine.quiz-spray-foam .opt.photo .opt-body span,html body.bp-engine.quiz-spray-foam .m-pcard .cap small,html body.bp-engine.quiz-spray-foam[data-step] .m-tile span{font-size:12px}
/* phones: a tile's sub-label is a phrase, not a unit, so it always sits on its own line under the title ("Possibly / smell or stains") */
html body.bp-engine.quiz-spray-foam .app .m-tile>span{flex-basis:100%}
/* the one focus ring (was 3px, inset on tiles) */
html body.bp-engine.quiz-spray-foam :is(.m-tile,.m-pcard,.opt,.m-hback,#backBtn,.sf-size-preset,.sf-measure-help summary,.sf-mobile-tip summary,.sf-map-credit):focus-visible{outline:2px solid var(--qr-blue);outline-offset:3px}
/* the one press on this quiz's measurement presets and disclosure rows; 44px tap height for the disclosures */
html body.bp-engine.quiz-spray-foam :is(.sf-size-preset,.sf-measure-help summary,.sf-mobile-tip summary){touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io),color var(--qr-t2) var(--qr-e-io),transform var(--qr-t3) var(--qr-e)}
html body.bp-engine.quiz-spray-foam :is(.sf-size-preset,.sf-measure-help summary,.sf-mobile-tip summary):active{transform:scale(.98);transition-duration:var(--qr-t1)}
html body.bp-engine.quiz-spray-foam .app .sf-measure-help summary{min-height:44px}
html body.bp-engine.quiz-spray-foam .app .sf-mobile-tip summary{display:flex;align-items:center;min-height:44px;margin:-7px -10px;padding:0 10px}
@media(prefers-reduced-motion:reduce){html body.bp-engine.quiz-spray-foam :is(.sf-size-preset,.sf-measure-help summary,.sf-mobile-tip summary){transition:none}html body.bp-engine.quiz-spray-foam :is(.sf-size-preset,.sf-measure-help summary,.sf-mobile-tip summary):active{transform:none}}