/* Workspace composition: one set of controls, preview and accepted task state. */
.myopal-designer { background:var(--myopal-color-background); padding:1rem var(--myopal-container-gutter) 3rem; }
.myopal-designer-workspace { max-width:var(--myopal-content-wide); margin:auto; display:grid; gap:1rem; }
.myopal-designer-preview,.myopal-designer-configuration { min-width:0; }
.myopal-designer-stage { position:relative; aspect-ratio:1; border-radius:1.25rem; background:#eee9df; overflow:hidden; }
.myopal-designer-stage .myopal-detail-media { width:100%; max-width:none; margin:0; }.myopal-designer-stage .myopal-media-slide { aspect-ratio:1; }
.myopal-designer-stage .myopal-media-slide img { object-fit:contain; }
.myopal-designer-empty { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:2rem; background:#f2ede3; color:var(--myopal-color-muted);  }
.myopal-designer-empty[hidden] { display:none; }
.myopal-designer-stage .myopal-media-count { display:none; }
.myopal-designer-configuration { padding:1.1rem; border:1px solid var(--myopal-color-border); background:var(--myopal-color-surface); border-radius:1.25rem; display:flex; flex-direction:column; gap:1rem; }
.myopal-designer-source,.myopal-designer-disclaimer { font-size:.75rem; line-height:1.6; color:var(--myopal-color-muted); }

:where(.myopal-designer button:not(.myopal-image-preview button):not(.myopal-action)) { border:1px solid var(--myopal-color-border); border-radius:var(--myopal-radius-pill); padding:.65rem .9rem; font-size:.8125rem; background:#fffdf8; color:var(--myopal-color-ink); cursor:pointer; }
.myopal-designer button:disabled { opacity:.5; cursor:default; }
.myopal-designer button[hidden],.myopal-designer a[hidden],.myopal-designer [data-refine-section][hidden],.myopal-designer [data-save-section][hidden] { display:none; }
.myopal-designer .myopal-designer-primary { background:var(--myopal-action-background);min-height:var(--myopal-action-height);padding:var(--myopal-action-padding); color:var(--myopal-action-foreground); font-weight:600; width:100%; }
.myopal-designer form[data-designer-form] { display:grid; grid-template-columns:1fr; gap:.875rem; }
.myopal-designer form[data-designer-form] label { display:flex; flex-direction:column; gap:.4rem; font-size:.8125rem; min-width:0; }:where(.myopal-designer) select,:where(.myopal-designer) textarea:not(.myopal-action-input) { width:100%; min-width:0; background:#fff; border:1px solid var(--myopal-color-border); border-radius:.6rem; padding:.7rem; font:inherit; }
.myopal-designer form[data-designer-form] > :is(p,button) { grid-column:1 / -1; }
/* Keep touch inputs above Safari's focus-zoom threshold without limiting pinch zoom. */
@media (pointer:coarse) {
 .myopal-designer :is(input,textarea,select) { font-size:max(16px,1rem); }
}

.myopal-designer output { font-size:.8125rem; color:var(--myopal-color-gold-ink); line-height:1.6; }

@media(min-width:48rem) { .myopal-designer-workspace { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; gap:2rem; }.myopal-designer-preview { grid-column:2; grid-row:1; position:sticky; top:1rem; }.myopal-designer-configuration { grid-column:1; grid-row:1; } }

.myopal-designer [hidden] { display:none; }
.myopal-designer-empty button { display:grid; justify-items:center; gap:.75rem; background:transparent; border:0; }
.myopal-designer-empty button > span:first-child { font-size:2.5rem; font-weight:300; color:var(--myopal-color-gold-ink); }
.myopal-designer-change { position:absolute; right:.75rem; bottom:.75rem; box-shadow:var(--myopal-shadow-card); }
.myopal-designer-preferences-row { display:flex; flex-wrap:wrap; align-items:start; gap:1rem; }
.myopal-designer-preferences-row > label { flex:1 1 100%; }
.myopal-designer-metals { flex:1 1 11.5rem; margin:0; padding:0; border:0; min-width:0; }
.myopal-designer-metals legend { margin-bottom:.4rem; font-size:.8125rem; }
.myopal-designer-metals > div { display:flex; gap:.5rem; flex-wrap:wrap; }
.myopal-designer-metals label { position:relative; display:grid; place-items:center; width:2.5rem; height:2.75rem; }
.myopal-designer-metals input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.myopal-metal-swatch { width:2rem; height:2rem; border:2px solid #94866a; border-radius:50%; display:grid; place-items:center; pointer-events:none; }
.myopal-metal-swatch--yellow { background:linear-gradient(135deg,#f4e3a4,#b89340); }
.myopal-metal-swatch--white { background:linear-gradient(135deg,#fff,#aeb2b7); }
.myopal-metal-swatch--rose { background:linear-gradient(135deg,#f2d3ca,#c18c7e); }
.myopal-designer-metals input:checked + span::after { content:'✓'; font-size:1rem; font-weight:700; color:#251d10; }
.myopal-designer-metals input:focus-visible + span { outline:2px solid var(--myopal-color-gold-ink); outline-offset:3px; }
.myopal-designer-disclaimer { margin-block:var(--myopal-space-4); }
@media(max-width:22rem) { .myopal-designer-configuration { padding:.85rem; } }

/* Material selection shares the mini-program's sidebar/grid and stepped bottom-sheet behavior. */
.myopal-stone-picker { width:min(48rem,100%); max-width:100%; max-height:92dvh; margin:auto auto 0; padding:0; border:1px solid var(--myopal-color-border); border-bottom:0; border-radius:1.25rem 1.25rem 0 0; background:var(--myopal-color-background); color:var(--myopal-color-ink); overflow:hidden; overscroll-behavior:contain; }
.myopal-stone-picker[open] { display:flex; flex-direction:column; height:var(--myopal-stone-height,60dvh); }
.myopal-stone-picker[data-sheet-size=expanded] { height:var(--myopal-stone-height,90dvh); }
.myopal-stone-picker::backdrop { background:#0002; }
.myopal-designer .myopal-sheet-handle { flex:none; display:grid; place-items:center; width:100%; min-height:1.75rem; padding:.6rem; background:transparent; border:0; border-radius:0; touch-action:none; cursor:ns-resize; }
.myopal-sheet-handle > span { width:2.5rem; height:.25rem; border-radius:1rem; background:#b7ae9f; }
.myopal-stone-picker > header { display:flex; align-items:center; gap:.5rem; padding:.25rem .85rem .85rem; flex:none; }
.myopal-stone-picker h2 { margin:0; font-size:1rem; line-height:1.4; flex:1; min-width:0; }
.myopal-designer .myopal-stone-filter-trigger { display:flex; align-items:center; gap:.4rem; border:0; background:transparent; color:var(--myopal-color-gold-ink); }
.myopal-stone-filter-trigger .myopal-icon { width:1rem; height:1rem; }
.myopal-stone-filter-trigger.is-active::after { content:''; width:.375rem; height:.375rem; border-radius:50%; background:var(--myopal-color-gold-ink); }
.myopal-stone-browser { display:grid; grid-template-columns:minmax(5.5rem,27%) minmax(0,1fr); flex:1; min-height:0; }
.myopal-stone-browser > nav { overflow-y:auto; overscroll-behavior:contain; background:#eae4d9; padding-bottom:env(safe-area-inset-bottom,0px); }
.myopal-designer [data-stone-categories] button { display:block; width:100%; padding:1rem .6rem; border:0; border-radius:0; background:transparent; text-align:left; font-size:.75rem; line-height:1.5; overflow-wrap:anywhere; }
.myopal-designer [data-stone-categories] button[aria-pressed=true] { background:var(--myopal-color-surface); color:var(--myopal-color-gold-ink); box-shadow:inset 3px 0 var(--myopal-color-gold-ink); font-weight:600; }
.myopal-stone-category-group { display:block; padding:.8rem .6rem .35rem; font-size:.625rem; color:var(--myopal-color-muted); }
.myopal-stone-results { min-width:0; overflow:auto; overscroll-behavior:contain; padding:.75rem .65rem max(.75rem,env(safe-area-inset-bottom,0px)); }
.myopal-stone-results > p { font-size:.75rem; line-height:1.5; margin:0 0 .6rem; }
.myopal-stone-results > p:empty { display:none; }
.myopal-stone-picker [data-stones] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.myopal-designer .myopal-stone-tile { display:flex; flex-direction:column; padding:.25rem; min-width:0; border-radius:.6rem; background:var(--myopal-color-surface); }
.myopal-stone-tile img { display:block; width:100%; aspect-ratio:1; object-fit:contain; border-radius:.45rem; }
.myopal-stone-tile .myopal-stone-price { display:block; padding:.45rem .1rem; color:var(--myopal-color-gold-ink); font-size:.7rem; overflow-wrap:anywhere; }
.myopal-stone-tile small { font-size:.65rem; }
.myopal-stone-results > button { margin-top:1rem; width:100%; }
@media(min-width:48rem) { .myopal-designer-workspace { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; gap:2rem; }.myopal-designer-preview { grid-column:2; grid-row:1; position:sticky; top:1rem; }.myopal-designer-configuration { grid-column:1; grid-row:1; } }

.myopal-designer [hidden] { display:none; }
.myopal-designer-empty button { display:grid; justify-items:center; gap:.75rem; background:transparent; border:0; }
.myopal-designer-empty button > span:first-child { font-size:2.5rem; font-weight:300; color:var(--myopal-color-gold-ink); }
.myopal-designer-change { position:absolute; right:.75rem; bottom:.75rem; box-shadow:var(--myopal-shadow-card); }
.myopal-designer-preferences-row { display:flex; flex-wrap:wrap; align-items:start; gap:1rem; }
.myopal-designer-preferences-row > label { flex:1 1 100%; }
.myopal-designer-metals { flex:1 1 11.5rem; margin:0; padding:0; border:0; min-width:0; }
.myopal-designer-metals legend { margin-bottom:.4rem; font-size:.8125rem; }
.myopal-designer-metals > div { display:flex; gap:.5rem; flex-wrap:wrap; }
.myopal-designer-metals label { position:relative; display:grid; place-items:center; width:2.5rem; height:2.75rem; }
.myopal-designer-metals input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.myopal-metal-swatch { width:2rem; height:2rem; border:2px solid #94866a; border-radius:50%; display:grid; place-items:center; pointer-events:none; }
.myopal-metal-swatch--yellow { background:linear-gradient(135deg,#f4e3a4,#b89340); }
.myopal-metal-swatch--white { background:linear-gradient(135deg,#fff,#aeb2b7); }
.myopal-metal-swatch--rose { background:linear-gradient(135deg,#f2d3ca,#c18c7e); }
.myopal-designer-metals input:checked + span::after { content:'✓'; font-size:1rem; font-weight:700; color:#251d10; }
.myopal-designer-metals input:focus-visible + span { outline:2px solid var(--myopal-color-gold-ink); outline-offset:3px; }
.myopal-designer-disclaimer { margin-block:var(--myopal-space-4); }
@media(max-width:22rem) { .myopal-designer-configuration { padding:.85rem; } }

/* Material selection shares the mini-program's sidebar/grid and stepped bottom-sheet behavior. */
.myopal-stone-picker { width:min(48rem,100%); max-width:100%; max-height:92dvh; margin:auto auto 0; padding:0; border:1px solid var(--myopal-color-border); border-bottom:0; border-radius:1.25rem 1.25rem 0 0; background:var(--myopal-color-background); color:var(--myopal-color-ink); overflow:hidden; overscroll-behavior:contain; }
.myopal-stone-picker[open] { display:flex; flex-direction:column; height:var(--myopal-stone-height,60dvh); }
.myopal-stone-picker[data-sheet-size=expanded] { height:var(--myopal-stone-height,90dvh); }
.myopal-stone-picker::backdrop { background:#0002; }
.myopal-designer .myopal-sheet-handle { flex:none; display:grid; place-items:center; width:100%; min-height:1.75rem; padding:.6rem; background:transparent; border:0; border-radius:0; touch-action:none; cursor:ns-resize; }
.myopal-sheet-handle > span { width:2.5rem; height:.25rem; border-radius:1rem; background:#b7ae9f; }
.myopal-stone-picker > header { display:flex; align-items:center; gap:.5rem; padding:.25rem .85rem .85rem; flex:none; }
.myopal-stone-picker h2 { margin:0; font-size:1rem; line-height:1.4; flex:1; min-width:0; }
.myopal-designer .myopal-stone-filter-trigger { display:flex; align-items:center; gap:.4rem; border:0; background:transparent; color:var(--myopal-color-gold-ink); }
.myopal-stone-filter-trigger .myopal-icon { width:1rem; height:1rem; }
.myopal-stone-filter-trigger.is-active::after { content:''; width:.375rem; height:.375rem; border-radius:50%; background:var(--myopal-color-gold-ink); }
.myopal-stone-browser { display:grid; grid-template-columns:minmax(5.5rem,27%) minmax(0,1fr); flex:1; min-height:0; }
.myopal-stone-browser > nav { overflow-y:auto; overscroll-behavior:contain; background:#eae4d9; padding-bottom:env(safe-area-inset-bottom,0px); }
.myopal-designer [data-stone-categories] button { display:block; width:100%; padding:1rem .6rem; border:0; border-radius:0; background:transparent; text-align:left; font-size:.75rem; line-height:1.5; overflow-wrap:anywhere; }
.myopal-designer [data-stone-categories] button[aria-pressed=true] { background:var(--myopal-color-surface); color:var(--myopal-color-gold-ink); box-shadow:inset 3px 0 var(--myopal-color-gold-ink); font-weight:600; }
.myopal-stone-category-group { display:block; padding:.8rem .6rem .35rem; font-size:.625rem; color:var(--myopal-color-muted); }
.myopal-stone-results { min-width:0; overflow:auto; overscroll-behavior:contain; padding:.75rem .65rem max(.75rem,env(safe-area-inset-bottom,0px)); }
.myopal-stone-results > p { font-size:.75rem; line-height:1.5; margin:0 0 .6rem; }
.myopal-stone-results > p:empty { display:none; }
.myopal-stone-picker [data-stones] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.myopal-designer .myopal-stone-tile { display:flex; flex-direction:column; padding:.25rem; min-width:0; border-radius:.6rem; background:var(--myopal-color-surface); }
.myopal-stone-tile img { display:block; width:100%; aspect-ratio:1; object-fit:contain; border-radius:.45rem; }
.myopal-stone-tile .myopal-stone-price { display:block; padding:.45rem .1rem; color:var(--myopal-color-gold-ink); font-size:.7rem; overflow-wrap:anywhere; }
.myopal-stone-tile small { font-size:.65rem; }
.myopal-stone-results > button { margin-top:1rem; width:100%; }
.myopal-stone-filters[open] { display:flex; flex-direction:column; height:min(80dvh,44rem); }
.myopal-stone-filters form { display:flex; flex-direction:column; min-height:0; flex:1; }
.myopal-stone-filter-body { display:grid; grid-template-columns:minmax(5.5rem,27%) minmax(0,1fr); min-height:0; flex:1; }
.myopal-stone-filter-body > nav { overflow:auto; background:#eae4d9; }
.myopal-designer [data-filter-navigation] button { position:relative; display:block; width:100%; padding:1rem .55rem; text-align:left; font-size:.75rem; line-height:1.4; background:transparent; border:0; border-radius:0; }
.myopal-designer [data-filter-navigation] button[aria-current] { background:var(--myopal-color-surface); color:var(--myopal-color-gold-ink); }
.myopal-designer [data-filter-navigation] button.is-selected::after { content:'•'; padding-left:.25rem; color:var(--myopal-color-gold-ink); }
.myopal-stone-filter-body > [data-filter-fields] { overflow:auto; overscroll-behavior:contain; padding:1rem .75rem; }
.myopal-stone-filter-body fieldset { min-width:0; padding:0 0 1.5rem; border:0; margin:0; scroll-margin-top:.75rem; }
.myopal-stone-filter-body legend { margin-bottom:.8rem; font-size:.85rem; font-weight:600; }
.myopal-stone-filter-body fieldset > label { margin-bottom:.75rem; }
.myopal-stone-filter-body input[type=number] { width:100%; min-width:0; }
.myopal-stone-filter-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,5.5rem),1fr)); gap:.5rem; }
.myopal-stone-filter-options label { position:relative; }
.myopal-stone-filter-options input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.myopal-stone-filter-options span { display:grid; place-items:center; height:100%; min-height:2.5rem; padding:.6rem .4rem; background:var(--myopal-color-surface); border:1px solid var(--myopal-color-border); border-radius:.5rem; text-align:center; font-size:.7rem; }
.myopal-stone-filter-options input:checked + span { background:#f3e4c5; border-color:var(--myopal-color-gold-ink); color:var(--myopal-color-gold-ink); }
.myopal-stone-filter-options input:focus-visible + span { outline:2px solid var(--myopal-color-gold-ink); outline-offset:2px; }
.myopal-stone-filters footer { padding:.75rem .85rem max(.75rem,env(safe-area-inset-bottom,0px)); border-top:1px solid var(--myopal-color-border); }
.myopal-stone-filters footer button { width:100%; }
.myopal-stone-filters [data-filter-error] { margin:0; padding-inline:.85rem; color:var(--myopal-color-error); font-size:.75rem; }
@media(min-width:48rem) { .myopal-stone-picker { margin:auto; border-bottom:1px solid var(--myopal-color-border); border-radius:1.25rem; }.myopal-stone-picker [data-stones] { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.myopal-metal-swatch--any { background:var(--myopal-color-surface); }
.myopal-designer-metals input:not(:checked) + .myopal-metal-swatch--any::after { content:'∞'; font-size:1.1rem; }
.myopal-designer-help { margin:0; font-size:.75rem; line-height:1.6; color:var(--myopal-color-muted); overflow-wrap:anywhere; }
.myopal-designer-help:empty { display:none; }

.myopal-designer-quota { margin: 0; font-size: .75rem; line-height: 1.6; color: var(--myopal-color-muted); overflow-wrap: anywhere; }
.myopal-designer-quota:empty { display: none; }
.myopal-designer [data-designer-status]:not(:empty) { display: block; padding: .8rem 1rem; border: 1px solid var(--myopal-color-border); border-radius: var(--myopal-radius-md); background: var(--myopal-color-surface); }

/* Indeterminate creation canvas: motion follows real task state, never an invented percentage. */
.myopal-designer-progress { position:absolute; inset:0; z-index:1; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:1.5rem; text-align:center; overflow:hidden; background:radial-gradient(circle,#fffdf8 0%,#f6efe2 60%,#e1d3b8 100%); }
.myopal-designer-progress::before { content:''; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(#9a733412 1px,transparent 1px),linear-gradient(90deg,#9a733412 1px,transparent 1px); background-size:2.5rem 2.5rem; }
.myopal-designer-ring { flex:none; width:3.25rem; height:3.25rem; border:2px solid #9a733426; border-top-color:var(--myopal-color-gold-ink); border-right-color:var(--myopal-color-gold-light); border-radius:50%; animation:myopal-design-spin 1.4s linear infinite; }
.myopal-designer-progress-copy { max-width:25rem; }
.myopal-designer-progress-copy strong { display:block; font-size:clamp(1rem,2.5vw,1.25rem); line-height:1.4; color:var(--myopal-color-ink); }
.myopal-designer-progress-copy p { margin:.75rem 0 0; font-size:.8125rem; line-height:1.6; }
.myopal-designer-progress-dots { display:flex; gap:.4rem; }
.myopal-designer-progress-dots span { width:.35rem; height:.35rem; background:var(--myopal-color-gold-ink); border-radius:50%; animation:myopal-design-breathe 1.8s ease-in-out infinite; }
.myopal-designer-progress-dots span:nth-child(2) { animation-delay:.3s; }
.myopal-designer-progress-dots span:nth-child(3) { animation-delay:.6s; }
.myopal-designer-progress-away { margin:0; max-width:25rem; font-size:.6875rem; line-height:1.5; color:var(--myopal-color-muted); }
.myopal-designer-stage .myopal-designer-change { z-index:2; }
@keyframes myopal-design-spin { to { transform:rotate(360deg); } }
@keyframes myopal-design-breathe { 0%,100% { opacity:.4; transform:scale(.96); } 50% { opacity:1; transform:scale(1.04); } }
@media(prefers-reduced-motion:reduce) { .myopal-designer-ring,.myopal-designer-progress-dots span { animation:none; } }

/* Single workspace; accepted-task state controls the existing shared preview. */
.myopal-designer [data-workspace-content]{padding-bottom:1.5rem}
.myopal-designer [data-browse-items]{display:flex;gap:var(--myopal-space-3);padding:0 0 var(--myopal-space-3);list-style:none;overflow-x:auto;overscroll-behavior-x:contain}.myopal-designer [data-browse-items] img{max-width:100%}.myopal-designer [data-browse-items] .myopal-product-card{min-width:0}
.myopal-result-confirm form.myopal-action-row{display:grid}.myopal-designer[data-task=true] .myopal-designer-workspace{display:block}.myopal-designer[data-task=true] .myopal-designer-preview{width:100%}.myopal-designer[data-task=true] .myopal-detail-media img{object-fit:contain}

.myopal-designer [data-workspace-content]{padding-inline:0}

.myopal-designer-clear{position:absolute;top:var(--myopal-space-3);right:var(--myopal-space-3);z-index:2;min-width:44px;min-height:44px;display:grid;place-items:center}.myopal-designer-clear .myopal-icon{width:1rem;height:1rem}
.myopal-designer [data-browse-items] > li{flex:0 0 43%;min-width:0}.myopal-designer-quota{margin-block:var(--myopal-space-4)}.myopal-designer-quota[data-warning=true]{color:var(--myopal-color-warning)}

/* Only the rotating sentence fades; its reserved block never shifts the artwork. */
.myopal-designer-progress-copy{width:100%}.myopal-designer-progress-copy p{height:4.8em;display:flex;align-items:center;justify-content:center;}
.myopal-waiting-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:var(--myopal-space-3)}
.myopal-designer [data-waiting-products]{padding:var(--myopal-space-3);min-width:0}.myopal-designer [data-browse-items]{margin:0;gap:var(--myopal-space-2)}
.myopal-designer-actions .myopal-status{margin:.4rem 0;max-height:5em;overflow:auto}
@media(prefers-reduced-motion:reduce){.myopal-designer-progress-copy p{transition:none}}