/* Canonical Content-family shell.
 * Content Overview is the visual authority; deep Content routes opt into this
 * final cascade layer so desktop, tablet and mobile share one layout contract. */
.app-shell,
body.sidebar-collapsed .app-shell{
  grid-template-columns:var(--sidebar-w,224px) minmax(0,1fr);
  width:100%;
  max-width:100%;
}
body.sidebar-collapsed .app-shell{
  grid-template-columns:var(--sidebar-collapsed,78px) minmax(0,1fr)!important;
}
.right-column,.page-content{min-width:0;max-width:100%}
.page-content{padding:20px}

.exec-header,.catalog-header{
  margin:0 0 12px;
  padding:24px 28px;
  border:1px solid var(--kairos-border,rgba(255,255,255,.16));
  border-radius:24px;
  background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  box-shadow:var(--kairos-inset,inset 0 1px 0 rgba(255,255,255,.06)),0 10px 28px rgba(0,0,0,.18);
}
.exec-title,.catalog-header h1{
  font-size:clamp(27px,3vw,34px);
  line-height:1.05;
}
.exec-sub,.catalog-header p{max-width:760px}
.exec-actions{justify-content:flex-end}

.content-nav{
  display:flex;
  flex-wrap:nowrap!important;
  gap:8px;
  max-width:100%;
  margin:0 0 18px;
  padding:10px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  border:1px solid var(--kairos-border,rgba(255,255,255,.16));
  border-radius:18px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.content-tab{
  flex:0 0 auto;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding:0 15px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--kairos-border,rgba(255,255,255,.14));
  gap:7px;
  white-space:nowrap;
  text-decoration:none;
}
.content-tab.active{
  background:rgba(167,139,250,.16);
  border-color:rgba(167,139,250,.5);
  color:var(--kairos-sa,#a78bfa);
}
.panel,.lp-hero,.scope-card,.se-diagnostics,.lp-diagnostics{min-width:0}
.table-wrap,.worksheet,.csv-block,.json-section pre{max-width:100%;overflow:auto}

@media (min-width:641px) and (max-width:1100px){
  body.sa-drawer-open{overflow:hidden!important}
  .app-shell{
    grid-template-columns:var(--sidebar-w,224px) minmax(0,1fr)!important;
    height:100vh!important;
  }
  body.sidebar-collapsed .app-shell{
    grid-template-columns:var(--sidebar-collapsed,78px) minmax(0,1fr)!important;
  }
  .sidebar{
    position:relative!important;
    inset:auto!important;
    width:var(--sidebar-w,224px)!important;
    min-width:var(--sidebar-w,224px)!important;
    max-width:var(--sidebar-w,224px)!important;
    height:100vh!important;
    overflow:hidden!important;
    padding-inline:14px!important;
    border-radius:0 18px 18px 0!important;
    transform:none!important;
  }
  .sidebar .nav{min-height:0!important;overflow-y:auto!important;padding-bottom:10px!important}
  .sidebar .brand-copy{display:flex!important;flex-direction:column}
  .sidebar .portal-chip{display:inline-flex!important}
  .sidebar .nav-label,
  .sidebar .sa-nav-group-toggle .sa-nav-group-label,
  .sidebar .sa-nav-group-toggle .sa-nav-group-chevron{display:inline!important}
  .sidebar .brand-wrap,.sidebar .nav a,.sidebar .sa-nav-group-toggle{justify-content:flex-start!important}
  .sidebar .sa-nav-children{display:block}
  .sidebar-footer,.sidebar-footer-row{flex-direction:row!important;justify-content:space-between!important;gap:10px}

  body.sidebar-collapsed .sidebar{
    width:var(--sidebar-collapsed,78px)!important;
    min-width:var(--sidebar-collapsed,78px)!important;
    max-width:var(--sidebar-collapsed,78px)!important;
    padding-inline:10px!important;
  }
  body.sidebar-collapsed .sidebar .brand-copy,
  body.sidebar-collapsed .sidebar .portal-chip,
  body.sidebar-collapsed .sidebar .nav-label,
  body.sidebar-collapsed .sidebar .sa-nav-group-toggle .sa-nav-group-label,
  body.sidebar-collapsed .sidebar .sa-nav-group-toggle .sa-nav-group-chevron,
  body.sidebar-collapsed .sidebar .sa-nav-children{display:none!important}
  body.sidebar-collapsed .sidebar .brand-wrap,
  body.sidebar-collapsed .sidebar .nav a,
  body.sidebar-collapsed .sidebar .sa-nav-group-toggle{justify-content:center!important}
  body.sidebar-collapsed .sidebar-footer,
  body.sidebar-collapsed .sidebar-footer-row{flex-direction:column!important;justify-content:center!important}
  .sa-mobile-nav-toggle,.sa-mobile-drawer-backdrop{display:none!important}
  .right-column{height:100vh!important;grid-template-rows:var(--topbar-h,76px) minmax(0,1fr)!important}
  .page-content{overflow:auto!important;padding:18px!important}
  .exec-header,.catalog-header{padding:22px}
  .exec-actions{width:100%;justify-content:flex-start}
  .scope-grid,.builder-preview-grid{grid-template-columns:minmax(0,1fr)!important}
}

@media (max-width:768px){
  .page-content{padding:14px 12px calc(24px + env(safe-area-inset-bottom))!important}
  .exec-header,.catalog-header{padding:19px 17px;border-radius:20px}
  .exec-header{display:grid!important}
  .exec-actions{width:100%;display:grid;grid-template-columns:minmax(0,1fr)}
  .exec-actions .sa-btn{width:100%;justify-content:center;min-height:44px}
  .content-nav{margin-inline:0;padding:7px}
  .content-tab{min-height:44px;padding-inline:13px}
  .scope-grid,.builder-preview-grid,.node-grid,.ai-grid,.flow-steps,
  .se-diagnostics-grid,.lp-diagnostics-grid{grid-template-columns:minmax(0,1fr)!important}
}