/* BP client theme tokens: default colours retained; scene artwork untouched. */
/* BlueProprty template V1, adapted to Paving V11. Header and hero stay intact. */
.quiz-paving{--bp-blue:var(--bp-brand,#2563EB);--bp-soft:#E9EFFD;--bp-border:#dce3ec;--bp-muted:#64748B}
.quiz-paving :is(.q-title,.m-title){font-size:clamp(20px,1.65vw,26px);line-height:1.2;letter-spacing:-.035em}
.quiz-paving :is(.q-title,.m-title):focus{outline:none}
.quiz-paving :is(.q-help,.m-help){font-size:13px;line-height:1.4;color:var(--bp-muted);margin:0}
.quiz-paving[data-step] .shell .q-panel{padding:16px 22px 0;gap:8px}
.quiz-paving[data-step] .shell .q-head{margin:0;flex:none}
.quiz-paving[data-step] .shell .q-scroll{padding:2px 4px 8px;margin:0 -4px;gap:10px;container-type:normal;scrollbar-width:thin}
.quiz-paving[data-step] .app .m-qpanel{padding:14px 18px 10px;gap:8px;scrollbar-width:thin;container-type:normal}
.quiz-paving :is(.q-scroll,.m-qpanel,.pv-area-scroll){overscroll-behavior:contain;scroll-padding:12px}
.quiz-paving[data-step] .shell .pv-equal-choices,.quiz-paving[data-step] .app .pv-equal-choices{display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(80px,1fr);gap:10px;min-height:0;max-height:none;flex:1 0 auto;margin:0;padding:0}
.quiz-paving[data-step] .shell .pv-equal-choices[data-count="5"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.quiz-paving[data-step] .shell .pv-equal-choices[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.quiz-paving[data-step] .shell .pv-equal-choices .opt,.quiz-paving[data-step] .app .pv-equal-choices .m-tile{grid-column:auto;grid-row:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:80px;padding:10px;font-family:var(--f);border:1.5px solid var(--bp-border);border-radius:12px;background:white;color:#1E293B;position:relative;transform:none}
.quiz-paving :is(.pv-equal-choices .opt,.pv-equal-choices .m-tile) b{font-size:14px;line-height:1.25;color:#1E293B}
.quiz-paving :is(.pv-equal-choices .opt,.pv-equal-choices .m-tile) .pv-choice-sub{font-size:12px;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--bp-muted)}
.quiz-paving :is(.pv-equal-choices .opt,.pv-equal-choices .m-tile) .gi{color:var(--bp-blue);opacity:1;min-height:32px;height:32px}
.quiz-paving :is(.pv-equal-choices .opt,.pv-equal-choices .m-tile) .gi svg{width:32px;height:32px}
.quiz-paving[data-step] .shell .pv-equal-choices .--sel,.quiz-paving[data-step] .app .pv-equal-choices .--sel{background:var(--bp-soft);border-color:var(--bp-blue)}
.quiz-paving .pv-equal-choices .--sel:after{content:'✓';position:absolute;right:7px;top:4px;color:var(--bp-blue);font-size:12px;font-weight:800}
.quiz-paving .pv-equal-choices :is(.opt,.m-tile):focus-visible{outline:3px solid var(--bp-blue);outline-offset:2px}
.pv-depth-exact{flex:none;border:1px solid #B8CBF8;background:var(--bp-soft);border-radius:12px;padding:10px;display:grid;gap:6px}
.pv-depth-exact label{font-size:13px;font-weight:800}.pv-depth-exact p{font-size:12px;color:var(--bp-muted)}
.pv-depth-exact input{width:100%;min-height:44px;font-size:17px}
/* Exact area remains outside the scrollable choices and measurement help. */
.quiz-paving[data-step="sqft"] .app .m-qpanel{overflow:hidden;container-type:normal;padding-bottom:8px}
.quiz-paving[data-step] .shell .pv-area-editor,.quiz-paving[data-step] .app .pv-area-editor{flex:1;min-height:0;gap:8px;overflow:hidden}
.quiz-paving[data-step] .shell .pv-area-exact,.quiz-paving[data-step] .app .pv-area-exact{flex:none;display:grid;grid-template-columns:1fr minmax(110px,45%);padding:8px 10px;gap:8px;border-radius:12px;background:#f8faff}
.quiz-paving .pv-area-exact label{font-size:13px}
.quiz-paving .pv-area-exact label>span{font-size:12px}
.quiz-paving .pv-area-exact .pv-area-field input{font-size:18px;min-height:44px}
.pv-area-scroll{flex:1;min-height:0;overflow-y:auto;padding:2px 3px 6px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;container-type:size}
.quiz-paving[data-step] .shell .pv-area-grid,.quiz-paving[data-step] .app .pv-area-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:10px;flex:none;width:100%;align-self:center}
.quiz-paving[data-step] .shell .pv-area-grid{max-width:max(540px,calc((100cqh - 75px)*6 + 30px))}
.quiz-paving[data-step] .shell .pv-area-photo,.quiz-paving[data-step] .app .pv-area-photo{height:auto;width:100%;aspect-ratio:3/2;object-fit:contain;background:none;filter:none}
.quiz-paving[data-step] .shell .pv-area-copy,.quiz-paving[data-step] .app .pv-area-copy{display:flex;flex-direction:column;gap:2px;justify-content:center;align-items:center;flex-wrap:nowrap;min-height:34px;padding:3px;text-align:center}
.quiz-paving .pv-area-copy>span[aria-hidden]{display:none}
.quiz-paving[data-step] .shell .pv-area-copy b,.quiz-paving[data-step] .app .pv-area-copy b{font-size:13px;line-height:1.2}
.quiz-paving[data-step] .shell .pv-area-copy>span,.quiz-paving[data-step] .app .pv-area-copy>span{font-size:12px;line-height:1.25;white-space:normal}
.quiz-paving .pv-area-choice{height:100%;border-radius:12px;flex-shrink:0}
.quiz-paving .pv-area-alternative{font-size:12px;flex:none}
.quiz-paving[data-step] .app .pv-area-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:min(440px,max(280px,calc((100cqh - 110px)*1.5 + 10px)))}
.quiz-paving .pv-measurements{margin:0;flex:none}
.quiz-paving .pv-measurements summary{font-size:12px;min-height:44px;padding:10px 0;line-height:24px}
.quiz-paving .pv-measurements p{font-size:13px;line-height:1.5;color:var(--bp-muted);margin:4px 0}
.quiz-paving .pv-measure-grid input{font-size:17px;min-height:44px}
.quiz-paving .pv-area-field input[aria-invalid=true]{border-color:#b91c1c}
/* Borders keep their own linear measures and replacement sub-question. */
.quiz-paving[data-step] .shell .pv-border-list{flex:0 0 auto;grid-auto-rows:88px;grid-template-rows:none}
.quiz-paving .pv-border-item:has(.pv-replace-type:not([hidden])){grid-row:span 2}
.quiz-paving[data-step] .shell .pv-border-item{display:block}
.quiz-paving .pv-border-option{height:88px;min-height:88px;border:1.5px solid var(--bp-border);border-radius:12px}
.quiz-paving .pv-border-option.--sel{background:var(--bp-soft);border-color:var(--bp-blue);color:#1E293B}
.quiz-paving .pv-border-option.--sel .gi{color:var(--bp-blue)}
.quiz-paving .pv-border-option.--sel .pv-border-copy>span{color:var(--bp-muted)}
.quiz-paving .pv-border-option.--sel .pv-border-choice:after{content:'✓';color:var(--bp-blue);font-weight:800;margin-left:auto}
.quiz-paving .pv-border-length{flex-basis:100px;color:var(--bp-brand-hover,#1D4FD7)}
.quiz-paving .pv-border-copy b{font-size:14px}.quiz-paving .pv-border-copy>span{font-size:12px}
.quiz-paving .pv-replace-type{margin-top:8px}.quiz-paving .pv-replace-type label{font-size:12px}
.quiz-paving :is(.m-cont,.cont){min-height:46px}
.quiz-paving input{scroll-margin-block:12px}
.quiz-paving .sf-message-preview{overflow-y:auto;scrollbar-width:thin;align-items:flex-start;padding:42px 0 12px}
.quiz-paving .sf-message-card{flex-shrink:0;margin-top:0}
.quiz-paving .sf-message-details dd{font-size:15px;line-height:1.4}
.quiz-paving .sf-message-details dt{font-size:11px;line-height:1.4}
@container(max-height:245px){.quiz-paving .sf-message-preview{padding-top:10px}}
@media(hover:hover){.quiz-paving .pv-equal-choices :is(.opt,.m-tile):hover{border-color:var(--bp-brand-hover,#1D4FD7);background:#f5f8ff}}
@media(min-width:700px) and (orientation:landscape){.quiz-paving[data-step] .app .pv-equal-choices[data-count="5"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-height:700px) and (orientation:portrait){
  .quiz-paving :is(.q-title,.m-title){font-size:19px}
  .quiz-paving[data-step] .app .m-qpanel{padding-top:10px;gap:6px}
  .quiz-paving[data-step] .app .pv-area-grid{width:100%;gap:8px}
}
@media(max-width:360px){.quiz-paving .pv-border-length{flex-basis:85px;margin-right:8px}.quiz-paving .pv-border-choice{padding:8px;gap:6px}.quiz-paving .pv-border-copy b{font-size:13px}}
@media(orientation:landscape) and (max-height:500px){
  .quiz-paving[data-step] .app{overflow-y:auto;grid-template-rows:58px 8px minmax(360px,1fr) auto}
  .quiz-paving[data-step] .app .m-preview{align-self:start;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.quiz-paving *{animation:none!important;transition:none!important}}

/* ==========================================================================
   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 undo what this template's higher-specificity rules would otherwise block.
   ========================================================================== */
/* help and sub-labels at 4.5:1 or better on the sky (#64748B was 4.1:1) */
html body.bp-engine.quiz-paving{--bp-muted:#4f6b7a}
/* phones: answers size to their content instead of stretching to fill the panel (step 3 was two 230px cards);
   the question panel scrolls when they do not fit. Icon over label, never wrapped into a second column. */
html body.bp-engine.quiz-paving[data-step] .app .pv-equal-choices{flex:0 0 auto;grid-template-rows:none;grid-auto-rows:minmax(80px,auto);align-content:start;min-height:0;max-height:none}
html body.bp-engine.quiz-paving[data-step] .app .pv-equal-choices .m-tile{flex-wrap:nowrap}
html body.bp-engine.quiz-paving[data-step] .app .pv-equal-choices .m-tile .gi{flex-basis:auto}
/* the one press and the one focus ring, on this quiz's own answer controls too */
html body.bp-engine.quiz-paving[data-step] :is(.shell .pv-equal-choices .opt,.app .pv-equal-choices .m-tile,.pv-area-choice,.pv-border-choice,.pv-replace-type label){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),box-shadow var(--qr-t3) var(--qr-e),transform var(--qr-t3) var(--qr-e)}
html body.bp-engine.quiz-paving[data-step] :is(.shell .pv-equal-choices .opt,.app .pv-equal-choices .m-tile,.pv-area-choice,.pv-border-choice,.pv-replace-type label):active{transform:scale(.98);transition-duration:var(--qr-t1)}
/* :root + [data-step] outranks quiz-refine's older 3px paving ring (html body.quiz-paving :is(...)), which loads after this file */
:root body.bp-engine.quiz-paving[data-step] :is(.opt,.m-tile,.pv-area-choice,.pv-border-choice,.sf-map-credit,.pv-measurements summary,.sf-message-preview):focus-visible{outline:2px solid var(--qr-blue);outline-offset:3px}
html body.bp-engine.quiz-paving .pv-border-option:has(.pv-border-choice:focus-visible){outline:2px solid var(--qr-blue);outline-offset:3px}
html body.bp-engine.quiz-paving .pv-border-choice:focus-visible{outline:none}
:root body.bp-engine.quiz-paving[data-step] .pv-replace-type label:has(input:focus-visible){outline:2px solid var(--qr-blue);outline-offset:3px}
/* the illustration's loading state: the sky preview with a soft pulse, then the drawing fades in (was a flat grey card) */
html body.bp-engine.quiz-paving .pv-render-status{background:var(--qr-preview-bg);color:var(--qr-copy);font:400 14px/1.5 var(--qr-font)}
html body.bp-engine.quiz-paving .pv-stage:has(.pv-render-status) .pv-canvas{opacity:0}
html body.bp-engine.quiz-paving .pv-canvas{transition:opacity var(--qr-t3) var(--qr-e-io)}
@media(prefers-reduced-motion:no-preference){html body.bp-engine.quiz-paving .pv-render-status{animation:pv-skeleton var(--qr-t5) var(--qr-e-io) infinite alternate}}
@keyframes pv-skeleton{from{opacity:1}to{opacity:.6}}
@media(prefers-reduced-motion:reduce){html body.bp-engine.quiz-paving[data-step] :is(.shell .pv-equal-choices .opt,.app .pv-equal-choices .m-tile,.pv-area-choice,.pv-border-choice,.pv-replace-type label):active{transform:none}}