/* CASE//LAB 11.6 — cross-page layout containment and responsive overlap repairs.
   Loaded last so all page-specific styles can retain their visual identity. */
:root{--ui-safe-bottom:env(safe-area-inset-bottom,0px)}
html{min-width:0;scroll-padding-top:20px}body{min-width:0;overflow-x:clip}
.shell,.main,.content,.view,.view.active,.intro,.toolbar,.topbar,.topright,.sectionhead,.opening-top,.case-heading,.account-panel,.collector-workspace{min-width:0;max-width:100%}
.main,.content,.view,.account-panel,.collector-workspace{overflow-wrap:anywhere}
:is(.casegrid,.itemgrid,.featuregrid,.account-admin-grid,.account-directory,.admin-inventory-grid,.cloud-gallery,.profile-summary,.profile-highlight-strip,.statgrid)>*{min-width:0;max-width:100%}
:is(.case-body,.case-action,.casecard,.itemcard,.cloud-item-card,.collector-hero,.collector-hero-details,.collector-hero-art,.inspect-stage,.inspect-details,.reveal-scene){min-width:0;max-width:100%}
img,svg,video,canvas,iframe{max-width:100%}
button,.btn,select,input,textarea{max-width:100%}
button,.btn{white-space:normal;overflow-wrap:anywhere;text-align:center}
input,textarea,select{min-width:0}
:is(.intro-split,.sectionhead,.opening-top,.case-heading,.cloud-panel-head,.cloud-viewer-head,.account-admin-shortcut,.collector-topline){flex-wrap:wrap}
:is(.toolbar,.reveal-actions,.inspect-actions,.sound-pack-actions,.cloud-search){flex-wrap:wrap;min-width:0}
:is(.case-body h3,.collector-hero-details h2,.inspect-head h2,.reveal-scene h2,.sectionhead h2){overflow-wrap:anywhere}
:is(.toast,.modal,.inspect-overlay,.account-modal){max-width:100vw}
.toast{bottom:calc(18px + var(--ui-safe-bottom));overflow-wrap:anywhere}
/* Avoid fixed-width columns forcing the entire desktop workspace wider. */
@media(max-width:1350px){.casegrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}.featuregrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}}
@media(max-width:1100px){.inspect-main{grid-template-columns:minmax(0,1fr) minmax(245px,32%)}.collector-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.topbar{gap:10px}.topright{gap:9px}}
@media(max-width:850px){.content{padding-inline:clamp(12px,2.5vw,25px)}.topbar{padding-inline:14px}.intro-split{align-items:flex-start}.number-stat strong{font-size:clamp(28px,5vw,48px)}.collector-hero{grid-template-columns:1fr}.collector-hero-art{min-height:220px}.collector-hero-details{min-width:0}.account-admin-grid{grid-template-columns:1fr}.cloud-controls{grid-template-columns:1fr}.case-body{grid-template-columns:minmax(0,1fr) auto}}
@media(max-width:700px){
 .shell{padding-bottom:calc(92px + var(--ui-safe-bottom))}
 .sidebar{height:calc(76px + var(--ui-safe-bottom));padding-bottom:calc(5px + var(--ui-safe-bottom));max-width:100vw}
 .sidebar nav{max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
 .topbar{min-height:64px;height:auto;padding:10px 12px;flex-wrap:wrap;align-content:center}
 .topright{margin-left:auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
 .topright .btn{min-width:0;min-height:32px}
 .crumb{white-space:normal;overflow-wrap:anywhere;letter-spacing:1px}
 .balance{min-width:0}.balance strong{font-size:clamp(13px,4vw,18px)}
 .content{padding:24px 12px calc(110px + var(--ui-safe-bottom))}
 h1{font-size:clamp(30px,9vw,44px);line-height:1.04}
 .casegrid,.itemgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .case-body{grid-template-columns:1fr;align-items:start}.case-action{text-align:left;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px}
 .case-action strong{font-size:clamp(14px,4vw,18px)}
 .case-art{height:clamp(108px,29vw,147px)}.case-art img{max-height:90%;max-width:90%}
 .toolbar{align-items:stretch}.toolbar select,.toolbar .btn{flex:1 1 135px;max-width:none}
 .collector-workspace{padding:14px;margin:16px 0}.collector-topline{gap:8px}.collector-count{white-space:normal}
 .collector-hero{grid-template-columns:1fr}.collector-hero-art{min-height:190px}
 .collector-categories{max-width:100%;overscroll-behavior-x:contain}
 .collector-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .inspect-overlay{inset:0;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
 .inspect-main{display:block}.inspect-stage{min-height:0;height:auto}.inspect-details{padding-bottom:calc(105px + var(--ui-safe-bottom))}
 .inspect-actions{bottom:calc(76px + var(--ui-safe-bottom));z-index:2;max-width:100%}
 .reveal-actions>*{flex:1 1 130px}.reveal-scene{padding-inline:12px}
 .toast{bottom:calc(90px + var(--ui-safe-bottom));right:12px;left:12px;max-width:none}
 .account-directory,.admin-inventory-grid,.cloud-gallery{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
}
@media(max-width:390px){
 .casegrid,.itemgrid{gap:7px}.case-body{padding:9px}.case-body h3{font-size:clamp(14px,4.4vw,17px)}
 .case-art{height:115px}.topbar{gap:5px}.topright{gap:5px}.topright .btn{padding:7px 6px;font-size:9px}
 .collector-specs{grid-template-columns:1fr 1fr}.collector-hero-details{padding:14px}
 .reveal-actions>*{flex-basis:100%}
}
@media(max-height:600px) and (min-width:701px){.sidebar{overflow-y:auto}.inspect-overlay{overflow-y:auto}.inspect-stage{min-height:420px}}
@media(prefers-reduced-motion:reduce){.view{animation:none!important}}