/*
 * Manhali Modern: layout for the design-system pages at the root (index, system, states).
 * The header is injected by js/docs.js.
 */
.app { min-block-size: 100dvh; background: var(--canvas); }
.main { display: flex; flex-direction: column; }
:root { --topbar-h: 60px; }
.docs-top {
  position: sticky; inset-block-start: 0; z-index: 40; display: flex; align-items: center; gap: 16px;
  block-size: var(--topbar-h); padding-inline: 20px;
  background: color-mix(in oklch, var(--canvas), transparent 10%); backdrop-filter: saturate(1.4) blur(12px);
  border-block-end: 1px solid var(--border);
}
.docs-top .brand-mark { flex: none; font-size: var(--text-sm); line-height: 1.25; }
.docs-top .logo-tile { inline-size: 32px; block-size: 32px; border-radius: 10px; font-size: 16px; }
.docs-nav { display: flex; gap: 2px; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }
.docs-nav .nav-item {
  display: inline-flex; align-items: center; gap: 8px; flex: none; block-size: 34px; padding-inline: 10px; border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--muted-foreground); white-space: nowrap;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.docs-nav .nav-item .icon { inline-size: 16px; block-size: 16px; }
.docs-nav .nav-item:hover { background: var(--hover); color: var(--foreground); }
.docs-nav .nav-item[aria-current="page"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }
.docs-nav .nav-item[aria-current="page"] .icon { color: var(--brand); }
.docs-top .end { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; flex: none; }
@media (max-width: 1023px) {
  .docs-top { gap: 10px; padding-inline: 12px; }
  .docs-top .brand-mark .col { display: none; }
  .docs-nav .nav-item span { display: none; }
  .docs-nav .nav-item[aria-current="page"] span { display: inline; }
}