/* Search and editing take priority over the mirror on a small screen. */
.wardrobe-editor { display:contents; }
.wardrobe-inspect-tools { display:none; }
@media (max-width:959px) {
  html[data-page="world"]:is([data-world-panel="shop"],[data-world-panel="avatar"]) {
    overflow-anchor:none;
    --wardrobe-mirror-height:clamp(188px,26svh,248px);
    scroll-padding-top:calc(var(--avatar-sticky-top,122px) + var(--wardrobe-mirror-height) + 16px);
  }
  .shop-preview-column .fitting-mirror,.avatar-studio .avatar-portrait-frame {
    height:var(--wardrobe-mirror-height); max-height:none;
  }
  .shop-preview-column .fitting-mirror .fitting-cameras,.avatar-studio .signature-camera {
    gap:4px; padding:7px; align-content:center;
  }
  .fitting-cameras button,.signature-camera button { min-height:40px; padding:6px 9px; font-size:11px; }
  .avatar-studio :is(input,select,summary,fieldset) {
    scroll-margin-top:16px;
  }
  .wardrobe-unpinned .fitting-mirror,.wardrobe-unpinned .avatar-studio .avatar-portrait-frame { position:relative; top:auto; }
  html.wardrobe-unpinned[data-page="world"]:is([data-world-panel="shop"],[data-world-panel="avatar"]) { scroll-padding-top:calc(var(--avatar-sticky-top,122px) + 12px); }
  .wardrobe-unpinned .avatar-studio :is(input,select,summary,fieldset) { scroll-margin-top:16px; }
  .shop-browse-column { display:flex; flex-direction:column; gap:14px; min-width:0; }
  .shop-browse-column .shop-tools { order:-3; grid-template-columns:minmax(0,1fr); padding:14px; gap:12px; }
  .shop-tools label { font-size:13px; gap:8px; }
  .shop-tools input { min-height:48px; font-size:16px; font-weight:500; }
  .shop-tools > div { width:100%; }
  .shop-tools button { min-height:44px; font-size:12px; }
  .shop-browse-column .shop-categories { order:-2; margin:0; padding:0 0 5px; }
  .shop-categories button { min-height:44px; font-size:12px; }
  .shop-browse-column .atelier-collections { order:-1; display:flex; gap:10px; overflow-x:auto; margin:0; padding:0 0 5px; }
  .atelier-collections > button { flex:0 0 168px; min-height:78px; padding:12px; }
  .atelier-collections > button strong { font-size:18px; }
  .atelier-collections > button small { font-size:11px; }
  .atelier-collections > button > span { font-size:24px; }
  .shop-browse-column .shop-results { margin:0 3px; }
  .avatar-control-group > div { gap:16px; }
  .avatar-control-group label { font-size:13px; line-height:1.4; }
  .avatar-control-group select,.avatar-studio input:not([type="range"]):not([type="color"]),.avatar-studio textarea {
    font-size:16px; min-height:48px;
  }
}

/* Phone workspace: direct camera gestures on the left, page browsing on the right. */
@media (max-width:719px) {
  html.wardrobe-split[data-page="world"]:is([data-world-panel="shop"],[data-world-panel="avatar"]) { scroll-padding-top:calc(var(--avatar-sticky-top,122px) + 16px); }
  .wardrobe-split .shop-explainer { padding:16px; gap:10px; }
  .wardrobe-split .shop-explainer h2 { font-size:24px; }
  .wardrobe-split .shop-explainer p:not(.eyebrow) { display:none; }
  .wardrobe-split .shop-dressing-room { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:12px; align-items:start; }
  .wardrobe-split .shop-preview-column { display:block; position:sticky; top:var(--avatar-sticky-top,122px); min-width:0; padding:0; }
  .wardrobe-split .shop-preview-column > header,.wardrobe-split .shop-preview-column > .fitting-note { display:none; }
  .wardrobe-split .shop-preview-column .fitting-mirror { position:relative; top:auto; }
  .wardrobe-split .shop-browse-column { grid-column:2; grid-row:1; gap:12px; }
  .wardrobe-split .fitting-mirror,.wardrobe-split .avatar-studio .avatar-portrait-frame { height:clamp(250px,49svh,420px); border-radius:20px; min-width:0; }
  .wardrobe-split :is(#shop-stage,#avatar-preview) { min-height:0; touch-action:none; }
  .wardrobe-split :is(#shop-stage,#avatar-preview) canvas { pointer-events:auto; touch-action:none; cursor:grab; }
  .wardrobe-split :is(#shop-stage,#avatar-preview) canvas:active { cursor:grabbing; }
  .wardrobe-split :is(.fitting-mirror,.avatar-portrait-frame) { touch-action:pan-y; }
  .wardrobe-split .shop-preview-column .fitting-mirror .fitting-cameras,.wardrobe-split .avatar-studio .signature-camera { display:flex; min-height:0; padding:6px; }
  .wardrobe-split :is(.fitting-cameras,.signature-camera) button { display:none; }
  .wardrobe-split :is(.shop-stage-label,.signature-stage-label) { white-space:normal; overflow:visible; font-size:9px; line-height:1.4; }
  .wardrobe-split .wardrobe-inspect-tools { display:flex; flex-direction:column; gap:8px; padding:10px 8px; background:#f6f7ef; flex:none; }
  .wardrobe-inspect-tools button { min-height:44px; width:100%; border:1px solid #c1cfc5; border-radius:14px; padding:9px 6px; background:#fffdf7; color:#195b50; font-size:13px; line-height:1.3; font-weight:700; overflow-wrap:anywhere; }
  .wardrobe-inspect-tools small { font-size:11px; line-height:1.45; color:#52695e; }
  .wardrobe-split .shop-tools { padding:10px; gap:10px; }
  .wardrobe-split .shop-tools > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(58px,1fr)); gap:3px; }
  .wardrobe-split .shop-tools button { padding:8px 2px; font-size:11px; overflow-wrap:anywhere; }
  .wardrobe-split .shop-tools input { min-width:0; width:100%; padding:10px 8px; }
  .wardrobe-split .shop-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .wardrobe-split .shop-card { padding:8px; min-width:0; border-radius:20px; }
  .wardrobe-split .shop-card h3 { font-size:16px; line-height:1.3; overflow-wrap:anywhere; }
  .wardrobe-split .shop-card p { font-size:12px; line-height:1.5; }
  .wardrobe-split .shop-card button { min-height:44px; white-space:normal; font-size:12px; padding:10px 8px; }
  .wardrobe-split .fitting-actions { order:-2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin:0; padding:10px; }
  .wardrobe-split .fitting-actions:has([data-fitting-action="reset"]:disabled):has([data-fitting-action="wear"]:disabled) { display:none; }
  .wardrobe-split .fitting-actions button { min-width:0; min-height:44px; font-size:11px; white-space:normal; padding:8px 4px; }
  .wardrobe-split .fitting-actions [data-fitting-action="wear"] { grid-column:1/-1; }
  .wardrobe-split .avatar-studio { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:12px; padding:10px; align-items:start; }
  .wardrobe-split .signature-studio-heading { grid-column:1/-1; }
  .wardrobe-split .signature-studio-heading h2 { font-size:24px; }
  .wardrobe-split .signature-studio-heading > p:last-child { display:none; }
  .wardrobe-split .avatar-studio .avatar-portrait-frame { grid-column:1; grid-row:2; position:sticky; top:var(--avatar-sticky-top,122px); }
  .wardrobe-split .wardrobe-editor { display:block; grid-column:2; grid-row:2; min-width:0; }
  .wardrobe-split .avatar-controls { display:block; }
  .wardrobe-split .avatar-control-group > div,.wardrobe-split .avatar-face-fields { grid-template-columns:minmax(0,1fr); }
  .wardrobe-split .avatar-control-group,.wardrobe-split .signature-shape { padding:10px; min-width:0; margin-bottom:12px; }
  .wardrobe-split .avatar-control-group fieldset { min-width:0; padding:0; }
  .wardrobe-split .avatar-studio :is(select,input,button) { min-width:0; max-width:100%; }
  .wardrobe-split .avatar-studio select { width:100%; }
  .wardrobe-split .avatar-studio :is(summary,button) { font-size:13px; white-space:normal; overflow-wrap:anywhere; }
  .wardrobe-split .avatar-studio summary { min-height:44px; align-content:center; }
  .wardrobe-split .avatar-studio :is(.avatar-emote-studio,.outfit-preset-studio) { padding:10px; }
  .wardrobe-split .avatar-studio :is(.avatar-emote-studio,.outfit-preset-studio) header { flex-wrap:wrap; }
  .wardrobe-split .avatar-studio h3 { font-size:17px; overflow-wrap:anywhere; }
  .wardrobe-split .view-avatar-preview { display:none; }
  .wardrobe-split.wardrobe-typing .shop-dressing-room { display:block; }
  .wardrobe-split.wardrobe-typing .shop-preview-column,.wardrobe-split.wardrobe-typing .fitting-actions { display:none; }
  .wardrobe-split.wardrobe-typing .shop-tools > div { display:none; }
  .wardrobe-split.wardrobe-typing .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:719px) and (max-height:600px) {
  .wardrobe-split .fitting-mirror,.wardrobe-split .avatar-studio .avatar-portrait-frame { height:max(150px,calc(100svh - var(--avatar-sticky-top,122px) - var(--bottom-nav,80px) - 20px)); }
  .wardrobe-split .wardrobe-inspect-tools small,.wardrobe-split :is(.shop-stage-label,.signature-stage-label) { display:none; }
}

/* Native modal focus/inert behavior; the existing canvas is moved, never rebuilt. */
html.wardrobe-inspecting { overflow:hidden; }
dialog.wardrobe-inspection { width:min(94vw,700px); max-width:none; height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height:none; margin:auto; padding:12px; border:1px solid #b6c9bd; border-radius:24px; background:#f6f7ef; color:#244b3c; overflow:hidden; }
dialog.wardrobe-inspection[open] { display:flex; flex-direction:column; gap:10px; }
dialog.wardrobe-inspection::backdrop { background:rgba(16,38,31,.7); }
dialog.wardrobe-inspection > .wardrobe-inspection-close { align-self:flex-end; min-height:44px; min-width:80px; padding:10px 18px; border:1px solid #93b0a0; border-radius:20px; color:#195b50; background:white; font-weight:700; }
dialog.wardrobe-inspection > :is(.fitting-mirror,.avatar-portrait-frame) { position:relative!important; top:auto!important; height:auto!important; flex:1; min-height:0; width:100%; margin:0; grid-area:auto; }
dialog.wardrobe-inspection :is(.fitting-cameras,.signature-camera) { display:flex; flex-wrap:wrap; }
dialog.wardrobe-inspection :is(.fitting-cameras,.signature-camera) button { display:block; }
dialog.wardrobe-inspection .wardrobe-inspect-tools { display:none; }
dialog.wardrobe-inspection :is(#shop-stage,#avatar-preview) canvas { pointer-events:auto; }
dialog.wardrobe-inspection > p { margin:0; font-size:13px; line-height:1.4; }

/* Give tablets the desktop's distinct preview and working columns. */
@media (min-width:720px) and (max-width:959px) {
  html[data-page="world"]:is([data-world-panel="shop"],[data-world-panel="avatar"]) .app-shell { max-width:1220px; }
  .shop-dressing-room { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr); gap:20px; align-items:start; }
  .shop-preview-column { display:block; position:sticky; top:var(--avatar-sticky-top,122px); }
  .shop-preview-column .fitting-mirror { position:relative; top:auto; height:clamp(210px,48svh,430px); }
  .shop-preview-column .fitting-actions { margin-top:12px; }
  .shop-preview-column .fitting-note { margin-top:10px; }
  .shop-browse-column { grid-column:2; grid-row:auto; }
  .avatar-studio { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr); gap:0 20px; align-items:start; }
  .avatar-studio .signature-studio-heading { grid-column:1/-1; }
  .avatar-studio .avatar-portrait-frame { grid-column:1; grid-row:2/9; height:clamp(210px,48svh,430px); }
  .avatar-studio > :not(.signature-studio-heading):not(.avatar-portrait-frame) { grid-column:2; }
  html[data-page="world"]:is([data-world-panel="shop"],[data-world-panel="avatar"]) { scroll-padding-top:calc(var(--avatar-sticky-top,122px) + 12px); }
  .avatar-studio :is(input,select,summary,fieldset) { scroll-margin-top:16px; }
}

/* Text focus works for both overlay keyboards and keyboards that resize layout.
   Keep the World tabs available as a clear way out of editing. */
@media (max-width:959px) {
  html.wardrobe-typing { scroll-padding-top:calc(var(--wardrobe-tabs-height,48px) + 12px); scroll-padding-bottom:16px; }
  .wardrobe-typing .topbar,.wardrobe-typing .bottom-nav,.wardrobe-typing .view-avatar-preview,
  .wardrobe-typing .fitting-mirror,.wardrobe-typing .avatar-studio .avatar-portrait-frame,
  .wardrobe-typing .shop-explainer,.wardrobe-typing .shop-preview-column > header,
  .wardrobe-typing .shop-preview-column .fitting-actions,.wardrobe-typing .fitting-note,
  .wardrobe-typing .atelier-collections,.wardrobe-typing .signature-studio-heading { display:none; }
  .wardrobe-typing .world-tabs { top:0; }
  .wardrobe-typing main { padding-bottom:20px; }
  .wardrobe-typing .shop-dressing-room,.wardrobe-typing .avatar-studio { display:block; }
  .wardrobe-typing .shop-preview-column { display:contents; }
  .wardrobe-typing .shop-tools { position:sticky; top:calc(var(--wardrobe-tabs-height,48px) + 8px); z-index:23; }
  .wardrobe-typing .shop-tools > div { display:none; }
  .wardrobe-typing .avatar-studio :is(input,textarea,select,summary,fieldset) { scroll-margin-top:16px; }
}