/* Fluid page shells: all available width, stable gutters, no CSS zoom. */
:root{--page-gutter:clamp(16px,2vw,48px)}
body .page,body .page:has(.source-tutorial-shell),body .page:has(.model-explorer,.rankings-page),
body .topbar,body .admin-main,body .customer-main,body .customer-main:has(.model-explorer){
  width:100%;max-width:none;min-width:0;margin-inline:0
}
body .page{padding-inline:var(--page-gutter)}
body .topbar{padding-inline:var(--page-gutter)}
body .admin-shell{grid-template-columns:clamp(210px,14vw,248px) minmax(0,1fr)}
.admin-shell>div,.admin-shell>main,.admin-content,.customer-layout>main,.grid>*,.form-grid>*{min-width:0}
body .admin-main,body .customer-main{padding-inline:var(--page-gutter)}
.prose{width:100%;max-width:none;min-width:0}
.prose>p,.prose>ul,.prose>ol{max-width:100ch}
.hero{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(24px,4vw,80px)}
.hero>*{min-width:0}.hero p{max-width:65ch}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grid.two,.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.metrics{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.home-shortcuts,.customer-shortcuts{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
body .mx-cards,body .customer-main .mx-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.table-wrap,.panel,.panel-body,.code-window,.usage-cost-detail,.billing-facts,.field{min-width:0;max-width:100%}
.table-wrap{overflow-x:auto;overscroll-behavior-inline:contain}
pre{max-width:100%}input,select,textarea{min-width:0;max-width:100%}
.preview b,.preview code,.card h2,.card h3,.admin-head h1,.customer-page-heading h1{overflow-wrap:anywhere}
.source-tutorial-shell{width:100%;min-width:0}
body .source-tutorial-shell iframe,body .customer-main .source-tutorial-shell iframe,
body #native-workspace,body .customer-main #native-workspace{
  width:100%;max-width:100%;min-height:320px;height:calc(100dvh - 210px)
}
.tutorial-preview-frame{width:100%;height:65dvh;min-height:320px;border:1px solid var(--border);border-radius:10px}
dialog:has(.tutorial-preview-frame){width:calc(100vw - 32px);max-width:none}
.tutorial-text-editor{padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--surface2)}
.tutorial-text-editor .field{margin-bottom:14px}
.tutorial-source-editor{margin-top:18px}
.tutorial-source-editor summary{cursor:pointer;min-height:44px;padding:10px 0}
.tutorial-source-editor textarea{width:100%;min-height:420px;font:13px/1.65 Consolas,monospace}
.tutorial-source-editor .actions{margin:12px 0}
.tutorial-segment-hint{display:block;font-size:13px;margin-bottom:4px;color:var(--muted)}
/* Shared settings dialogs scroll their body, never their title or actions. */
dialog[open]:has(>.dialog-head){display:flex;flex-direction:column;max-height:90dvh;overflow:hidden}
dialog>.dialog-head,dialog>.dialog-foot{flex:none;background:var(--surface)}
dialog>.dialog-body{min-height:0;overflow:auto;overscroll-behavior:contain}
dialog .dialog-body fieldset{min-width:0;grid-column:1/-1;border:1px solid var(--border);border-radius:10px;padding:16px}
dialog .dialog-body fieldset legend{padding-inline:6px}
/* Native portals remain within the stable embedded viewport. */
@media(min-width:1101px){.login-layout{max-width:none;width:100%;padding-inline:clamp(24px,8vw,180px);gap:clamp(40px,8vw,180px)}}
@media(max-width:1100px){.admin-top{gap:12px}.admin-top .actions{gap:8px}}
@media(max-width:760px){
 body .admin-shell{grid-template-columns:minmax(0,1fr)}
 .grid.two,.form-grid.two,.hero{grid-template-columns:minmax(0,1fr)}
 .admin-top{height:auto;min-height:60px;flex-wrap:wrap;padding:10px 16px}
 .admin-top .crumb{overflow-wrap:anywhere}
 .admin-top .actions{flex-wrap:wrap;min-width:0;max-width:100%}
 .customer-layout{display:block}
 .customer-page-heading,.customer-welcome{flex-wrap:wrap}
 .customer-account{max-width:100%;text-align:left}
 .billing-facts{grid-template-columns:minmax(0,1fr)}
 .billing-facts dd{margin-bottom:8px}
 .source-tutorial-shell{border-radius:8px}
 .tutorial-text-editor{padding:12px}
 .tutorial-source-editor textarea{font-size:16px;min-height:300px}
 .dialog-head h2{overflow-wrap:anywhere}
}
@media(max-width:420px){
 .customer-metrics,.grid.three,body .mx-cards,body .customer-main .mx-cards{grid-template-columns:minmax(0,1fr)}
 .topbar .nav{flex-wrap:wrap;justify-content:flex-end}
 .admin-head .actions,.checkout-user{width:100%}
}