/* The application shell: sidebar, header, content region. */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas: "sidebar header" "sidebar main";
  min-height: 100vh;
}

.shell__sidebar {
  grid-area: sidebar;
  background: var(--c-surface);
  border-right: var(--border-thin);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.shell__header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--c-surface);
  border-bottom: var(--border-thin);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.shell__main {
  grid-area: main;
  padding: var(--space-5);
  max-width: var(--content-max);
  width: 100%;
}

/* Below 900px the sidebar becomes a slide-over rather than shrinking into
   an unusable strip. */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main";
  }
  .shell__sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    z-index: var(--z-overlay);
    transform: translateX(-100%);
    transition: transform var(--duration) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  .shell__sidebar[data-open="true"] { transform: translateX(0); }
  .shell__main { padding: var(--space-4); }
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-bottom: var(--border-thin);
}
.brand__mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-radius: var(--radius);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.brand__name { font-weight: var(--weight-bold); font-size: var(--text-sm); }
.brand__env { font-size: var(--text-xs); color: var(--c-text-subtle); }

/* --- Navigation, generated from the feature registry ------------------ */

.nav { padding: var(--space-3) var(--space-2); flex: 1; }
.nav__group + .nav__group { margin-top: var(--space-4); }
.nav__heading {
  padding: 0 var(--space-3) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--c-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nav__list { list-style: none; margin: 0; padding: 0; }

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--c-text-muted);
  font-size: var(--text-sm);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.nav__link:hover { background: var(--c-surface-raised); color: var(--c-text); text-decoration: none; }
.nav__link[aria-current="page"] {
  background: var(--c-accent-sunken);
  color: var(--c-accent);
  font-weight: var(--weight-medium);
}
.nav__icon { width: 16px; text-align: center; flex-shrink: 0; opacity: 0.85; }
.nav__badge {
  margin-left: auto;
  padding: 0 var(--space-2);
  min-width: 20px;
  font-size: var(--text-xs);
  text-align: center;
  background: var(--c-surface-sunken);
  border-radius: var(--radius-full);
}
.nav__badge[data-severity="critical"] { background: var(--c-danger); color: var(--c-on-danger); }
.nav__badge[data-severity="warning"]  { background: var(--c-warn); color: var(--c-on-warn); }

/* --- Grid helpers ----------------------------------------------------- */

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row   { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.spacer { flex: 1; }