/* The photo is the working surface. Inspiration follows the first useful result. */
.experience{flex:none;margin:0 0 12px}
.experience-steps{display:flex;gap:24px;margin:0 0 14px;flex-wrap:wrap}
.experience-steps button{display:flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:#766c63;font:inherit;font-size:14px;min-height:32px;cursor:pointer}
.experience-steps button span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#eae4df;font-size:12px}
.experience-steps [aria-current]{color:#853014;font-weight:600}
.experience-steps [aria-current] span{background:#853014;color:white}
.intent-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.intent-row button{display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-height:68px;padding:12px 16px;border:1px solid #d8cec5;border-radius:12px;background:white;color:#392e24;text-align:left;font:inherit;cursor:pointer}
.intent-row button strong{font-size:16px;font-weight:600}.intent-row button span{font-size:13px;color:#766c63}
.intent-row [aria-pressed=true]{background:#faf3ee;border-color:#853014;box-shadow:inset 3px 0 #853014}
.photo-help{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;line-height:1.5;margin:0 0 14px;font-size:14px}
.photo-help details{font-size:13px}.photo-help summary{cursor:pointer;color:#853014}.photo-help details p{max-width:650px;margin:8px 0}
.workspace{height:clamp(560px,72dvh,760px);min-height:560px}
.next-step{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 4px;margin-bottom:10px;flex:none;font-size:14px;line-height:1.5}
.next-step p{margin:0}.next-step button{flex:none;font-size:14px;min-height:44px}
.journey{background:#fff;margin:0 0 14px}.journey>summary{display:flex;justify-content:space-between;gap:15px;font-size:16px;font-weight:600;min-height:30px;align-items:center;cursor:pointer;list-style:none}
.journey>summary::after{content:'＋';font-size:23px;color:#853014}.journey[open]>summary::after{content:'−'}.journey>summary small{font-size:13px;font-weight:400;color:#766c63;margin-left:auto}.journey[open]>summary{margin-bottom:20px}
.quick-shades{margin-bottom:20px;padding:14px;background:#faf4ef;border-radius:12px;border:1px solid #ebddd1}
.quick-shades>strong{font-size:14px}.quick-shades .rec-chip{min-height:44px;font-size:14px;background:#fff}.quick-shades .rec-explanation{font-size:13px;line-height:1.5}.quick-shades .hint{margin:6px 0 0;font-size:13px}
.tools-scroll .muted{font-size:14px}.field-label,.range-heading,.custom-color-label,.selected-shade strong,.advanced summary{font-size:14px}.swatch{font-size:12px}.category-tabs button{font-size:13px;min-height:48px}.status-pill{font-size:12px}.photo-consent{font-size:13px;line-height:1.55}.hint{font-size:13px;line-height:1.55}
.save-area{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.save-area .button{font-size:14px;min-height:44px}.save-area #save-button,.save-area #download-button{grid-area:auto}.save-area #current-master-card{grid-column:1/-1;background:#faf7f4;order:1!important}.save-area .local-note{display:block;grid-column:1/-1;font-size:12px;order:3;margin:0;line-height:1.4}.save-area .export-options{font-size:13px;grid-area:auto / 1 / auto / -1;order:2!important}.save-area .export-options:not([open]) summary{font-size:13px;width:auto;list-style:disclosure-closed}.save-area .export-options:not([open]) summary::after{content:none}
.saved-comparison figure[data-chosen=true]{outline:2px solid #853014;outline-offset:4px;border-radius:8px}.saved-comparison .button{width:100%;font-size:14px;min-height:44px}.comparison-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px}.comparison-help{font-size:14px;line-height:1.5;color:#766c63}.comparison-toolbar{grid-column:1/-1;position:sticky;top:0;z-index:2;background:#f5f2f3;padding:10px 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.comparison-toolbar p{margin:0;font-size:14px}.empty-state .button{margin-top:16px}
.master-dialog{width:min(1000px,calc(100vw - 32px));max-width:1000px}.saved-comparison img{height:43dvh;width:100%;object-fit:contain}.saved-comparison .button{margin-top:8px;text-decoration:none}.quick-shades:has(.rec-explanation)>.hint{display:none}
.page-heading h1{font-size:26px}.heading-note{font-size:14px}.photo-footer .text-button{font-size:12px;min-height:36px}.photo-toolbar>span{font-size:13px}button:focus-visible,summary:focus-visible{outline:3px solid #bc7964;outline-offset:3px}
@media(max-width:760px){
  .topbar{position:static}#ideas-button{display:none}.page-heading{padding:4px 0 12px}.page-heading h1{font-size:21px}.page-heading h1 span{display:none}.page-heading .button{min-height:44px;font-size:14px}.heading-note{display:none}
  .experience-steps{gap:16px;margin-bottom:10px}.experience-steps button{font-size:12px;gap:5px}.intent-row{gap:6px}.intent-row button{padding:10px 8px;min-height:76px;border-radius:9px}.intent-row button strong{font-size:14px;line-height:1.3}.intent-row button span{font-size:12px;line-height:1.35}
  .photo-help{font-size:12px;gap:4px 12px;margin-bottom:10px}.photo-help details{font-size:12px}.photo-help .text-button{font-size:12px;min-height:32px}
  .workspace{height:auto;min-height:0;display:flex;flex-direction:column;gap:12px;overflow:visible}.photo-column{height:clamp(310px,52dvh,470px);flex:none;position:sticky;top:0;z-index:5}.photo-panel{border-radius:14px;box-shadow:0 4px 14px #392e2412}.photo-toolbar{min-height:44px}.photo-stage{padding:10px 12px 46px;min-height:100px}.photo-footer{padding:3px 10px;min-height:38px}.photo-footer .text-button{font-size:12px}.photo-footer #image-size{display:none}
  .settings-panel{min-height:0;overflow:visible;border-radius:14px}.tools-scroll{overflow:visible;flex:none;padding:18px}.category-tabs{padding:0 8px;min-height:48px;position:static}.category-tabs button{font-size:13px;padding:12px 7px;flex:1}.palette{grid-template-columns:repeat(4,minmax(0,1fr))}.swatch{font-size:12px}.swatch-circle{width:42px;height:42px}
  .save-area{position:static;padding:12px;gap:8px;border-radius:0 0 14px 14px}.save-area .button{min-height:44px;font-size:14px}.save-area .export-options[open]{position:static;box-shadow:none;padding:12px;grid-column:1/-1;border-radius:8px}.save-area .local-note{font-size:12px}
  .next-step{align-items:flex-start;flex-direction:column;gap:4px;padding:10px 4px}.next-step button{align-self:flex-end}.journey>summary{font-size:15px}.journey>summary small{display:none}.journey-card p{display:block;font-size:12px}.journey-card strong{font-size:13px}.journey-actions .button{font-size:14px}.saved-comparison figure{min-width:180px}.comparison-toolbar{top:0}
  .tools-scroll :is(button,input,textarea,select,summary){scroll-margin-top:calc(clamp(310px,52dvh,470px) + 14px)}.master-dialog{padding:18px}.saved-comparison img{height:34dvh}
}
@media(max-width:380px){.experience-steps{gap:9px}.experience-steps button{font-size:11px}.category-tabs button{font-size:12px;padding-inline:4px}.credit-pill{display:none}.photo-toolbar>span{max-width:43%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Keep controls usable with touch, display cutouts and an open phone keyboard. */
body:not(.admin-body){padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
button,a,summary{touch-action:manipulation}
dialog{overscroll-behavior:contain;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@media(max-width:760px){
  #studio-view,#saved-view{padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .topbar{padding-top:env(safe-area-inset-top);height:auto;min-height:58px}
  .topbar button,.photo-footer .text-button,.view-switch button,.dialog-x,.experience-steps button,.photo-help .text-button,.brush-actions button,.prompt-chips button,.ai-presets button{min-height:44px}
  .dialog-x{width:44px;height:44px;right:6px;top:6px}
  .tools-scroll :is(input:not([type=range]):not([type=checkbox]):not([type=color]),select,textarea){font-size:16px}
  input[type=range]{min-height:44px;touch-action:pan-y}
  .check-label{min-height:44px;align-items:center}
  .check-label input{width:22px;height:22px;margin:0}
  .intent-row button{min-width:0}.intent-row button strong{overflow-wrap:anywhere}
  .photo-toolbar>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .photo-column{scroll-margin-top:env(safe-area-inset-top)}
  .mask-tools{max-height:200px;bottom:48px}
  .saved-actions{flex-wrap:wrap}.saved-actions button{min-height:44px}
  .save-area{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(max-width:1000px) and (max-height:540px){
  .photo-column{position:static;height:280px;max-height:none}
  .tools-scroll :is(button,input,textarea,select,summary){scroll-margin-top:12px}
}
@media(pointer:coarse),(max-width:760px){
  :is(#studio-view,#saved-view,.topbar,dialog) :is(button,summary,select,input[type=color]),.topbar .account-nav .button{min-height:44px}
  :is(#studio-view,#saved-view,dialog) :is(input[type=email],input[type=password],input[type=text],input[type=number],textarea,select){font-size:16px}
}
@media(max-width:760px){
  .saved-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;align-items:start}
  .saved-comparison figure{min-width:0}
  .saved-comparison img{height:auto;aspect-ratio:3/4;object-fit:contain}
  .saved-comparison .button{white-space:normal;padding:9px 6px;font-size:13px;min-height:48px}
  .saved-comparison .check-label{font-size:12px}
  .saved-comparison:has(figure:nth-child(3)){grid-template-columns:repeat(3,minmax(160px,1fr));overflow-x:auto;scroll-snap-type:x proximity}
  .saved-comparison figure{scroll-snap-align:start}
}