@layer layout {
/* ============================================================
   ARCSAFE LAYOUT ENGINE
   Layer 2 — layout.css
   Reset, grid, containers, app shell structure.
   NO component styles here.
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* Mobile: reserve bottom for tab bar */
@media (max-width: 767px) {
  body { padding-bottom: var(--tab-bar-h); }
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--content-px);
}
.container--docs    { max-width: var(--max-w-docs); }
.container--narrow  { max-width: var(--max-w-narrow); }

/* --- App Shell --- */
/*
  Shell structure:
  ┌─────────────────────────────┐
  │         .shell-nav          │  sticky top
  ├─────────────────────────────┤
  │  .shell-sidebar │ .shell-main│  flex row
  │   (desktop only)│           │
  ├─────────────────────────────┤
  │       .shell-tab-bar        │  fixed bottom (mobile)
  └─────────────────────────────┘
*/

.shell-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Nav */
.shell-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  background: var(--navy);
  border-bottom: 1px solid var(--navy-mid);
  flex-shrink: 0;
}

.shell-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Content area — sidebar + main */
.shell-content {
  display: flex;
  flex: 1;
  min-width: 0;
}

/* Sidebar — hidden on mobile, visible on desktop */
.shell-sidebar {
  display: none;
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  border-right: 1px solid var(--border-light);
  background: var(--off-white);
  overscroll-behavior: contain;
}

@media (min-width: 1024px) {
  .shell-sidebar { display: block; }
}

/* Sidebar open state (mobile overlay) */
.shell-sidebar--open {
  display: block;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  width: min(var(--sidebar-w), 85vw);
  box-shadow: var(--shadow-xl);
}

.shell-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--nav-h);
  z-index: calc(var(--z-overlay) - 1);
  background: rgba(17,28,54,0.5);
}

.shell-sidebar-overlay--visible { display: block; }

/* Main */
.shell-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Tab bar */
.shell-tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--tab-bar-h);
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(26,39,68,0.08);
}

@media (min-width: 768px) {
  .shell-tab-bar { display: none; }
}

/* --- Page Sections --- */
.page-hero {
  background: var(--navy);
  padding: var(--s10) 0 var(--s8);
  position: relative;
  overflow: hidden;
}

/* Subtle engineering grid overlay */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(108,180,228,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,180,228,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.page-section {
  padding: var(--s12) 0;
}

.page-section--alt {
  background: var(--off-white);
}

.page-section--dark {
  background: var(--navy);
  color: var(--text-on-dark);
}

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) 0 var(--s2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--s6);
}

.breadcrumb-item { display: flex; align-items: center; gap: var(--s2); }
.breadcrumb-item a { color: var(--text-secondary); transition: color var(--t-base); }
.breadcrumb-item a:hover { color: var(--navy); }
.breadcrumb-sep { color: var(--border); user-select: none; }
.breadcrumb-current { color: var(--text-primary); font-weight: 500; }

/* --- Responsive Grid Helpers --- */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: var(--s4); }

@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Docs Layout (sidebar + body + toc) --- */
.docs-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s8) var(--content-px);
}

@media (min-width: 1024px) {
  .docs-layout {
    grid-template-columns: 1fr 200px;
    gap: var(--s10);
    padding: var(--s8);
  }
}

.docs-body { min-width: 0; }

.docs-toc {
  display: none;
  position: sticky;
  top: calc(var(--nav-h) + var(--s6));
  height: fit-content;
  max-height: calc(100vh - var(--nav-h) - var(--s12));
  overflow-y: auto;
}

@media (min-width: 1024px) {
  .docs-toc { display: block; }
}

}