/* Shared layout for all editorial pages; tools reuse tokens and components.
   One source of truth for page shell, header, navigation and footer. */
:root {
  --site-width: var(--kb-content-width);
  --site-gutter: var(--kb-gutter);
  --site-rule: var(--kb-rule);
  --site-rule-soft: var(--kb-rule-soft);
  --site-purple: var(--kb-purple);
  --site-muted: var(--kb-muted);
  --site-top-gap: var(--kb-top-gap);
  --site-hero-gap: var(--kb-hero-gap);
  --site-rule-gap: var(--kb-rule-gap);
}
body:has(.site-layout) { padding-inline:var(--site-gutter); }
main.site-layout.site-layout {
  box-sizing:border-box;
  width:100%;
  max-width:var(--site-width);
  min-height:100dvh;
  margin-inline:auto;
  padding:var(--site-top-gap) 0 28px;
  display:flex;
  flex-direction:column;
  text-align:left;
}
main.site-layout.site-layout > .site-top {
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex:0 0 auto;
  width:100%;
  min-height:40px;
  margin:0;
  padding:0 0 var(--site-rule-gap);
  border:0;
  border-bottom:1px solid var(--site-rule);
  color:var(--site-purple);
  font:600 11px/1.4 var(--kb-font);
  letter-spacing:.08em;
  text-align:left;
}
.site-top .site-back {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:24px;
  padding:0;
  color:var(--site-purple);
  text-decoration:none;
  font:inherit;
  letter-spacing:inherit;
  white-space:nowrap;
}
.site-top .site-back:hover { color:#f4f5fa; }
.site-top .site-back svg { flex:none;display:block;width:18px;height:18px; }
main.site-layout.site-layout > .site-footer {
  box-sizing:border-box;
  position:static;
  inset:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:0 0 auto;
  gap:12px;
  width:100%;
  min-height:40px;
  margin-top:auto!important;
  padding:var(--site-rule-gap) 0 0;
  border:0;
  border-top:1px solid var(--site-rule-soft);
  color:var(--site-muted);
  font:400 11px/1.4 var(--kb-font);
  letter-spacing:0;
  text-align:left;
}
.site-footer span{white-space:nowrap;}
main.site-layout.site-layout > .profile-hero {
  margin-top:var(--site-hero-gap);
}
@media (min-width:700px) {
  body:has(.site-layout) { --site-gutter:24px; }
  main.site-layout.site-layout { padding-bottom:56px; }
}
@media (max-height:640px) {
  :root { --site-top-gap:12px; --site-rule-gap:10px; --site-hero-gap:24px; }
  main.site-layout.site-layout > .site-top,
  main.site-layout.site-layout > .site-footer { min-height:32px; }
}

/* Tools share footer styling while retaining their own workspace geometry. */
body.tool-page .site-footer.tool-footer {
  box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;width:100%;min-height:40px;
  margin-top:var(--kb-space-3);padding:var(--site-rule-gap) 0 0;
  border:0;border-top:1px solid var(--site-rule-soft);
  color:var(--kb-muted);font:400 11px/1.4 var(--kb-font);text-align:left;
}
.shader-lab-page .inspector-panel > .tool-footer {
  width:auto;margin-inline:var(--site-gutter);padding-bottom:var(--site-rule-gap);
}
@media(min-width:700px) { body.tool-page { --site-gutter:24px; } }

/* One background implementation for Home, Contact, Playground and legacy pages. */
body:has(.site-layout) { background:var(--kb-page-background); }
main.site-layout.site-layout { isolation:isolate; }
main.site-layout.site-layout::before {
  content:"";position:fixed;inset:0;z-index:-1;
  display:block;pointer-events:none;background:var(--kb-page-ambient);
}