/* Shared page shell based on the main page layout.
   Scope is limited to pages that explicitly use .site-shell-page. */
:root {
  --site-shell-max: 1200px;
  --site-shell-gutter: 1rem;
  --site-shell-radius: 12px;
  --site-shell-surface: rgba(255,255,255,.85);
  --site-shell-shadow: 0 8px 24px rgba(0,0,0,.10);
  --site-shell-text: #1f2937;
  --site-shell-muted: #334155;
}

body.site-shell-page {
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--site-shell-text);
}

body.site-shell-page:not(.security-warnings-page) > header:not(.agents-hero):not(.site-header) {
  padding: clamp(2.25rem, 5vw, 4rem) var(--site-shell-gutter)
           clamp(1.75rem, 4vw, 3rem);
  text-align: center;
  background: rgba(245,245,220,.90);
  border-bottom: 1px solid rgba(0,0,0,.05);
  backdrop-filter: blur(8px);
}

body.site-shell-page:not(.security-warnings-page) > header:not(.agents-hero):not(.site-header) h1 {
  max-width: 24ch;
  margin: 0 auto .75rem;
  font-family: inherit;
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--site-shell-text);
}

body.site-shell-page:not(.security-warnings-page) > header:not(.agents-hero):not(.site-header) p {
  max-width: 78ch;
  margin: 0 auto;
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--site-shell-muted);
}

body.site-shell-page:not(.security-warnings-page) > header:not(.agents-hero):not(.site-header) p + p {
  margin-top: .65rem;
}

body.site-shell-page main.container,
body.site-shell-page main.main,
body.site-shell-page main#main,
body.site-shell-page .wrap,
body.site-shell-page main.lab-container,
body.site-shell-page main.sw-detail-shell {
  width: calc(100% - 2rem);
  max-width: var(--site-shell-max);
  margin: 2rem auto;
  padding: 2.5rem;
  background: var(--site-shell-surface);
  border-radius: var(--site-shell-radius);
  box-shadow: var(--site-shell-shadow);
  overflow-x: clip;
}

/* Lab index previously removed its sheet globally. Restore the same shell here. */
body.site-shell-page.lab-list-page main#main {
  width: calc(100% - 2rem) !important;
  max-width: var(--site-shell-max) !important;
  margin: 2rem auto !important;
  padding: 2.5rem !important;
  background: var(--site-shell-surface) !important;
  border-radius: var(--site-shell-radius) !important;
  box-shadow: var(--site-shell-shadow) !important;
}

/* Embedded tools stay inside the same sheet width. Their internal layout is unchanged. */
body.site-shell-page .ai-frame-wrap,
body.site-shell-page .embed-shell,
body.site-shell-page .app-shell {
  max-width: 100% !important;
}

body.site-shell-page .notes-block {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  font-family: inherit;
}

body.site-shell-page main img,
body.site-shell-page main iframe,
body.site-shell-page .wrap img,
body.site-shell-page .wrap iframe {
  max-width: 100%;
}

@media (max-width: 768px) {
  :root {
    --site-shell-gutter: 1rem;
    --site-shell-radius: 12px;
  }

  body.site-shell-page {
    padding: 1rem;
  }

  body.site-shell-page:not(.security-warnings-page) > header:not(.agents-hero):not(.site-header) {
    padding-top: 2rem;
    padding-bottom: 1.75rem;
  }

  body.site-shell-page:not(.security-warnings-page) > header:not(.agents-hero):not(.site-header) h1 {
    max-width: 100%;
    font-size: clamp(1.8rem, 8.5vw, 2.35rem);
    line-height: 1.18;
    overflow-wrap: anywhere;
  }

  body.site-shell-page:not(.security-warnings-page) > header:not(.agents-hero):not(.site-header) p {
    font-size: 1rem;
    line-height: 1.55;
  }

  body.site-shell-page main.container,
  body.site-shell-page main.main,
  body.site-shell-page main#main,
  body.site-shell-page .wrap,
  body.site-shell-page main.lab-container,
  body.site-shell-page main.sw-detail-shell,
  body.site-shell-page.lab-list-page main#main {
    width: 95% !important;
    max-width: 95% !important;
    margin: 1rem auto !important;
    padding: 1rem !important;
  }
}

@media (max-width: 420px) {
  body.site-shell-page:not(.security-warnings-page) > header:not(.agents-hero):not(.site-header) {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  body.site-shell-page main.container,
  body.site-shell-page main.main,
  body.site-shell-page main#main,
  body.site-shell-page .wrap,
  body.site-shell-page main.lab-container,
  body.site-shell-page main.sw-detail-shell,
  body.site-shell-page.lab-list-page main#main {
    padding: .875rem !important;
  }
}