/* Actions stay outside the scrolling content; only one panel scrolls. */
html.modal-open{overflow:hidden;overscroll-behavior:none}
dialog:not([open]){display:none!important}
.modal-actions{grid-column:2;padding:0 36px 24px;background:var(--panel)}
dialog[open]{grid-template-rows:minmax(0,1fr) auto;overflow:hidden;overflow:clip}
.detail-visual{grid-row:1 / 3}
.detail-copy{position:relative;overflow-y:auto;overscroll-behavior:contain;min-height:0}
#color-announcement{top:0;left:0}
.image-area{height:100%;min-height:0}
.image-area img{max-height:100%;object-fit:contain}
.detail-visual{background:var(--bg)}
.image-area{background:var(--bg)}
.image-area img{mix-blend-mode:multiply}
.view-tabs button,.viewer-tools button{min-height:44px;min-width:44px}
.viewer-tools{bottom:35px}
.view-note{font-size:12px;bottom:8px}
.close{width:44px;height:44px}
#part-tabs button{min-height:44px}
@media(max-width:600px){
  dialog,dialog:is([data-mode="custom"],[data-mode="summary"]){width:calc(100% - 16px);height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin:auto;padding:0;border-radius:20px;}
  dialog[open],dialog[open]:is([data-mode="custom"],[data-mode="summary"]){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(230px,38dvh,350px) minmax(0,1fr) auto;overflow:hidden;overflow:clip;}
  dialog .detail-visual,dialog:is([data-mode="custom"],[data-mode="summary"]) .detail-visual{grid-row:1;flex:none;min-height:0;height:100%;border-radius:20px 20px 0 0;display:block;}
  .image-area{position:absolute;inset:56px 8px 22px;width:auto;height:auto;padding:0;display:grid;place-items:center;}
  .image-area img{width:100%;height:100%;min-height:0;max-height:100%;max-width:100%;object-fit:contain;}
  .view-tabs{top:8px;left:12px;padding:2px;max-width:calc(100% - 72px);}
  .view-tabs button{padding:4px 10px;font-size:12px;}
  .close{top:10px;right:10px;width:44px;height:44px;background:var(--panel);}
  #viewer-host{inset:57px 5px 78px;min-height:0;}
  .viewer-tools{bottom:27px;padding:2px;gap:0;max-width:calc(100% - 16px);}
  .viewer-tools button{padding:3px 7px;font-size:12px;}
  .viewer-tools span{margin:0 1px;}
  .view-note{font-size:12px;line-height:1.2;bottom:4px;left:8px;right:8px;max-height:24px;}
  dialog .detail-copy,dialog:is([data-mode="custom"],[data-mode="summary"]) .detail-copy{grid-row:2;min-height:0;padding:16px 18px 10px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .detail-copy h2,dialog:is([data-mode="custom"],[data-mode="summary"]) .detail-copy h2{font-size:25px;line-height:1.16;letter-spacing:-.5px;margin:0 0 7px;}
  .detail-copy .eyebrow{font-size:12px;margin:0 0 7px;}
  .detail-subtitle{font-size:14px;}
  .detail-rule{margin:14px 0;}
  #dialog-description{font-size:15px;line-height:1.5;}
  .personalize-intro{font-size:24px;line-height:1.2;margin:14px 0 4px;}
  .back{margin:6px 0 0;min-height:44px;}
  .modal-actions{grid-column:1;grid-row:3;padding:10px 16px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);z-index:2;}
  .modal-actions .primary{min-height:48px;padding:12px 14px;}
  dialog:not([data-mode="info"]) .detail-copy>.eyebrow,dialog:not([data-mode="info"]) .detail-subtitle{display:none;}
  dialog:not([data-mode="info"]) .detail-copy h2{font-size:22px;margin-bottom:4px;}
  dialog:is([data-mode="custom"],[data-mode="summary"]) .custom-heading{margin:0 0 8px;padding:0;border:0;min-height:34px;}
  .custom-heading h3{font-size:24px;}
  .custom-heading button{min-height:44px;padding:6px;}
  .step-label{font-size:13px;margin-bottom:6px;}
  #part-tabs{gap:6px;}
  #part-tabs button{font-size:12px;padding:7px 9px;}
  .palette-heading{margin:12px 0 0;}
  .palette-heading span{font-size:12px;margin-bottom:6px;}
  #palette{gap:4px;grid-template-columns:repeat(5,minmax(0,1fr));}
  .swatch{font-size:12px;line-height:1.2;min-height:66px;padding:5px 1px;gap:4px;}
  .swatch i{width:30px;height:30px;}
  .part-hint{margin-top:8px;line-height:1.4;}
  .fixed-note{padding:8px;font-size:12px;margin-top:8px;}
  .custom-actions{margin:4px 0;}
  .custom-actions button,#copy-combination{min-height:44px;}
  #combination-list{margin-bottom:10px;}
  #combination-list li{padding:10px 0;}
  .viewer-message{top:60px;left:12px;right:12px;font-size:13px;}
}