/* One visual language for boxed actions and persistent choices in both modes. */
.websitePlanner .plannerModes,.websitePlanner .flowModeHint,.websitePlanner #modeNotice,.websitePlanner #wallMode,.websitePlanner label[for=wallMode]{display:none!important}
.websitePlanner .referencePoint{width:44px;height:44px;border:0;border-radius:0;background:transparent;box-shadow:none;padding:0;overflow:visible;cursor:crosshair}
.websitePlanner .referencePoint::after{display:none}
.websitePlanner .referencePoint svg{display:block;width:44px;height:44px;overflow:visible;pointer-events:none;fill:none}
.websitePlanner .referencePoint .targetOutline{stroke:#fff;stroke-width:4}
.websitePlanner .referencePoint .targetLine{stroke:#222;stroke-width:1.5}
.websitePlanner .referencePoint span{position:absolute;left:34px;top:-7px;display:grid;place-items:center;width:22px;height:22px;border:1px solid #fff;border-radius:50%;background:#222;color:#fff;font-size:13px;line-height:1;pointer-events:none}
.websitePlanner .referencePoint:focus-visible{outline:2px solid #fff;outline-offset:4px}
.guidedPlanner :is(.primary,.plainBtn,.uploadBtn,.plannerModes button,.frameChoice,.artworkSlots button,.compareSelect,.adjustTabs button,.flowSteps button){background:#fff;color:#171717;border-color:transparent;box-shadow:inset 0 0 0 1px #aaa;transition:background-color .18s ease,box-shadow .18s ease}
.guidedPlanner :is(.plannerModes button,.frameChoice,.artworkSlots button,.compareSelect)[aria-pressed=true],
.guidedPlanner .adjustTabs button[aria-selected=true],
.guidedPlanner .flowSteps button[aria-current=step],
.guidedPlanner .roomControls .choiceSelected{background:#f5f5f5;color:#171717;border-color:transparent;box-shadow:inset 0 0 0 1px #aaa}
.guidedPlanner .frameChoice[aria-pressed=true]{border-width:1px;padding:8px}
.guidedPlanner .nextStepPulse,.guidedPlanner .photoStepPulse{background:#fff;color:#171717;border-color:transparent;box-shadow:inset 0 0 0 1px #aaa;animation:nextStepSoft 2.4s ease-in-out 2}
@keyframes nextStepSoft{0%,100%{background-color:#fff}45%,55%{background-color:#f5f5f5}}
.guidedPlanner :is(.nextStepPulse,.photoStepPulse):focus-within{animation:none;background:#f5f5f5}
@media(hover:hover){.guidedPlanner :is(.primary,.plainBtn,.uploadBtn,.plannerModes button,.frameChoice,.artworkSlots button,.compareSelect,.adjustTabs button,.flowSteps button):not(:disabled):not([aria-disabled=true]):hover{animation:none;background:#f5f5f5;box-shadow:inset 0 0 0 1px #888}}
.guidedPlanner :is(.primary,.plainBtn,.uploadBtn,.plannerModes button,.frameChoice,.artworkSlots button,.compareSelect,.adjustTabs button,.flowSteps button):not(:disabled):not([aria-disabled=true]):active{animation:none;background:#ebebeb}
.guidedPlanner :is(button,a,input,select,summary,.uploadBtn):focus-visible,.guidedPlanner .uploadBtn:focus-within{outline:2px solid #777;outline-offset:3px}
.guidedPlanner :is(.plannerModes,.roomControls,.frameOptions,.adjustTabs,.flowSteps,.flowActions,.entryIdRow){gap:12px}
@media(prefers-reduced-motion:reduce){.guidedPlanner :is(.nextStepPulse,.photoStepPulse){animation:none;background:#f5f5f5}.guidedPlanner :is(button,a,.uploadBtn){transition:none}}

#referenceHelp.perspectiveHelp,#wallHeightHelp{font-size:14px;line-height:1.5}
#referenceWidthLabel{font-size:16px}
.calibration #gateHint{margin:12px 0;color:#171717;font-size:14px}
.calibration #gateHint.needsAction{border-left:1px solid #aaa;padding:6px 10px;background:#f5f5f5}

/* Keep remaining prompts, steps and new controls in the same light palette. */
.guidedPlanner .measurePrompt,.guidedPlanner .toast{background:#fff;color:#171717;border:1px solid #aaa;box-shadow:0 2px 8px #00000014}
.guidedPlanner .flowSteps button[aria-current=step] span,.guidedPlanner .flowSteps button.complete span{background:#222;color:#fff;border-color:#222}
.guidedPlanner :is(.compactSlots button,.multiPicker>button,.multiSize button){background:#fff;color:#171717;border-color:#aaa;transition:background-color .18s,border-color .18s}
.guidedPlanner :is(.compactSlots button,.multiSize button)[aria-pressed=true]{background:#f5f5f5;color:#171717;border-color:#aaa}
.guidedPlanner .multiSize .deleteArtwork{border-color:transparent;background:transparent}
.guidedPlanner .browseCard{background:#fff;border:1px solid #bbb}
.guidedPlanner .browseCard[aria-pressed=true]{background:#f5f5f5;border-color:#888}
@media(hover:hover){.guidedPlanner :is(.compactSlots button,.multiPicker>button,.multiSize button,.browseCard):not(:disabled):hover{background:#f5f5f5;border-color:#888}}
.guidedPlanner :is(.compactSlots button,.multiPicker>button,.multiSize button,.browseCard):not(:disabled):active{background:#ebebeb}

.browsePairing{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}.browsePairing[hidden]{display:none}.browsePairing .plainBtn{flex:1;white-space:nowrap;padding:7px 10px;font-size:.8125rem}.browsePairing .plainBtn[aria-pressed=true]{background:#e9e9e9;border-color:#aaa;box-shadow:inset 0 0 0 1px #aaa}

/* Keep the photo-entry actions compact and visually consistent. */
.guidedPlanner #flowPhoto:not([hidden]){display:grid;gap:8px}
.guidedPlanner #flowPhoto>.roomControls{gap:8px;margin:0}
.guidedPlanner #flowPhoto :is(.primary,.plainBtn,.uploadBtn){min-height:44px;padding:8px 10px;font-family:inherit;font-size:14px;line-height:20px;font-weight:500;box-sizing:border-box;border-radius:0}
.guidedPlanner #flowPhoto>:is(.primary,#designerGalleryStart){margin:0;width:100%}
.guidedPlanner #flowPhoto>p{margin:0;font-size:14px;line-height:1.45}
.guidedPlanner #flowPhoto>.entryIdForm{margin:0;padding-top:8px}
.guidedPlanner #flowPhoto .entryIdForm label{margin-bottom:6px}
.guidedPlanner #flowPhoto .entryIdRow{gap:8px}
.guidedPlanner #flowPhoto .entryIdRow input{min-height:44px;padding:8px 10px}
.guidedPlanner #flowPhoto #entryIdStatus:empty{display:none}