/* ─────────────────────────────────────────────────────────────────
   ALPA Mobile Docs — Unified Navigation (generated regions)
   Standalone so self-styled pages (component specs, mockups) can link
   ONLY this file without inheriting docs.css base rules. Everything in
   here is .docs-nav-scoped; it cannot collide with page styles.
   Generator: docs/build-nav.cs
   ───────────────────────────────────────────────────────────────── */

/* ── Unified navigation (generated regions — see docs/build-nav.cs) ── */
.docs-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -40px -24px 28px;
  padding: 10px 24px;
  background: #f6f8fa;
  border-bottom: 1px solid #e0e0e0;
  font-size: 12.5px;
  line-height: 1.4;
}
.docs-nav a { font-size: 12.5px; color: #0066cc; text-decoration: none; white-space: nowrap; }
.docs-nav a:hover { text-decoration: underline; }
.docs-nav-sep { color: #9ba1a8; user-select: none; }
.docs-nav-current { color: #444; font-weight: 600; }
.docs-nav-dim { color: #9ba1a8; }
.docs-nav-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.docs-nav-crumbs .docs-nav-current { white-space: normal; }

/* Hamburger + drawer — native <details>, no JavaScript. */
.docs-nav { position: relative; }
.docs-nav-menu { position: static; }
.docs-nav-burger {
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #444;
  padding: 4px 10px 6px;
  margin-right: 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  user-select: none;
}
.docs-nav-burger::-webkit-details-marker { display: none; }
.docs-nav-burger:hover { background: #eceff2; border-color: #d2d4d6; }
.docs-nav-menu[open] > .docs-nav-burger { background: #eceff2; border-color: #d2d4d6; }
.docs-nav-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 300px;
  max-width: 380px;
  max-height: 72vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d2d4d6;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 10px 0;
}
.docs-nav-drawer a {
  display: block;
  padding: 6px 18px;
  font-size: 13px;
  white-space: normal;
  color: #1a1a1a;
}
.docs-nav-drawer a:hover { background: #f0f4ff; text-decoration: none; color: #0066cc; }
.docs-nav-drawer-home { font-weight: 600; color: #0066cc !important; }
.docs-nav-drawer .docs-nav-drawer-current {
  font-weight: 600;
  color: #053c89;
  background: #eef3fb;
  border-left: 3px solid #053c89;
  padding-left: 15px;
}
.docs-nav-group { border-top: 1px solid #eceff2; margin-top: 8px; padding-top: 6px; }
.docs-nav-group-title {
  padding: 4px 18px;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}
/* Section-level links without children share the subgroup-summary typography so
   they don't read as sub-items when a neighboring group is expanded; the ▸ marker
   stays exclusive to expandable groups. */
.docs-nav-group > a {
  padding: 5px 18px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}
.docs-nav-group > a:hover { color: #0066cc; background: none; }
/* Sub-items inside an expanded group are visibly subordinate: indented past the
   marker, sentence case, slightly smaller. */
.docs-nav-subgroup > a {
  padding: 5px 18px 5px 32px;
  font-size: 12.5px;
  color: #444;
}
.docs-nav-subgroup { margin-top: 4px; }
.docs-nav-subgroup > summary {
  list-style: none;
  cursor: pointer;
  padding: 5px 18px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  user-select: none;
}
.docs-nav-subgroup > summary::-webkit-details-marker { display: none; }
.docs-nav-subgroup > summary::before { content: "▸ "; }
.docs-nav-subgroup[open] > summary::before { content: "▾ "; }
.docs-nav-subgroup > summary:hover { color: #0066cc; }
@media print { .docs-nav { display: none; } }