/* SmartPrompt AI v0.6.0 — Shell/Layout hardening
   Global layout guard loaded after public theme CSS. */
:root{
  --sp-header-height:72px;
  --sp-shell-gap:20px;
  --sp-sticky-gap:20px;
}

html{
  min-width:0;
  scroll-padding-top:calc(var(--sp-header-height) + 22px);
  scrollbar-gutter:stable;
  overflow-x:clip;
}
body{
  min-width:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:clip;
}
body>main{width:100%;min-width:0;flex:1 0 auto}
body>footer{flex:0 0 auto}

/* Keep the shell centred without allowing a child to widen the page. */
.shell{
  width:min(var(--max),calc(100% - (var(--sp-shell-gap) * 2)));
  max-width:100%;
  margin-inline:auto;
  min-width:0;
}

/* Global intrinsic-size guards for grid/flex children. */
main,section,article,aside,nav,form,
.appMain,.panel,.surfaceCard,.promptBox,.legalArticle,.orderSummary,
.homeHeroCopy,.homeProductPreview,.homeIntelligenceCopy,.homeIntelConsole,
.studioLayoutPremium,.studioWorkspaceFrame,.studioWorkspace,
.adminMain,.adminShell,.adminPanel{min-width:0}

img,video,canvas{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
pre,code,.promptText,.studioPromptText,.legalArticle,.table td,.adminTable td,.adminDetailList dd{
  overflow-wrap:anywhere;
  word-break:normal;
}
pre{max-width:100%;overflow:auto}

/* Header shell: mobile dropdown is anchored to the header shell, not the viewport. */
.topbar{isolation:isolate}
.topbar .nav{position:relative;min-width:0}
.brand{max-width:100%;min-width:0}
.brandcopy{min-width:0}
.navlinks{min-width:0}
.mobileMenuBtn{flex:0 0 auto}

/* Stable anchors under sticky header. */
[id]{scroll-margin-top:calc(var(--sp-header-height) + 22px)}
.breadcrumbs{min-width:0;overflow-wrap:anywhere}

/* Sticky side panels share one offset and never exceed the viewport. */
.sideNav,.contextAside,.studioRail{
  top:calc(var(--sp-header-height) + var(--sp-sticky-gap));
}
.sideNav{
  max-height:calc(100dvh - var(--sp-header-height) - (var(--sp-sticky-gap) * 2));
}
.sideScroll{
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* Horizontal data stays inside its card instead of widening the page. */
.tableWrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.table,.adminTable{max-width:none}
.pagination,.searchPagination{min-width:0;flex-wrap:wrap;align-items:center}
.pagination>* ,.searchPagination>*{min-width:0}

/* Prevent flex rows from pushing the shell wider with long labels/content. */
.cardHeader,.categoryPromptHeader,.formActions,.copyRow,.inlineForm,
.homeSeasonHead,.homePreviewActions,.homeIntelConsoleHead,.homeFinalBottom,
.footerBottomPremium,.adminPageHead,.adminPanelHead,.adminHeadActions{min-width:0}
.cardHeader>*,.categoryPromptHeader>*,.formActions>*,.copyRow>*,.inlineForm>*,
.homeSeasonHead>*,.homePreviewActions>*,.homeIntelConsoleHead>*,.homeFinalBottom>*,
.adminPageHead>*,.adminPanelHead>*{min-width:0}

@media(max-width:980px){
  .sideNav,.contextAside,.studioRail{
    position:relative;
    top:auto;
    max-height:none;
  }
  .categorySide .sideScroll,.memberSide nav,.studioRail nav{
    max-width:100%;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
}

@media(max-width:720px){
  :root{--sp-header-height:66px;--sp-shell-gap:12px;--sp-sticky-gap:12px}
  html{scroll-padding-top:calc(var(--sp-header-height) + 16px)}
  [id]{scroll-margin-top:calc(var(--sp-header-height) + 16px)}
  .navlinks{
    top:calc(100% + 8px);
    left:0;
    right:0;
    width:auto;
    max-height:calc(100dvh - var(--sp-header-height) - 24px);
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:100;
  }
  .mobileMenuBtn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .mobileMenuBtn.open span:nth-child(2){opacity:0}
  .mobileMenuBtn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .mobileMenuBtn span{transition:transform .16s ease,opacity .16s ease}
  .panel,.promptBox,.legalArticle,.statusCard{max-width:100%}
  .formActions{align-items:stretch}
  .pagination,.searchPagination{gap:8px}
  .pagination .btn,.searchPagination .btn{flex:1 1 auto}
}

@media(max-width:420px){
  .brandcopy strong{font-size:15px}
  .brandmark{width:38px;height:38px;border-radius:11px}
  .mobileMenuBtn{width:40px;height:40px}
  .breadcrumbs{font-size:11px;gap:6px}
}

@supports not (overflow:clip){
  html,body{overflow-x:hidden}
}