/* ============================================================================
   03 · LAYOUT, the application shell only.
   Sidebar + topbar + content region, and how they behave responsively.
   Contains no colours of its own beyond token references.
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- sidebar ---------- */
.sidebar {
  grid-row: 1 / -1;
  display: flex; flex-direction: column;
  background: var(--bg-sidebar);
  border-right: var(--border-width) solid var(--border);
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  z-index: var(--z-sidebar);
}
.sidebar__brand {
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--topbar-h); padding: 0 var(--sp-5); flex: none;
  border-bottom: var(--border-width) solid var(--border);
}
.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-3); }
.sidebar__group + .sidebar__group { margin-top: var(--sp-6); }
.sidebar__label { padding: 0 var(--sp-3) var(--sp-2); }
.sidebar__foot {
  flex: none; padding: var(--sp-3);
  border-top: var(--border-width) solid var(--border);
}

.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; padding: 0 var(--sp-3);
  height: var(--density-control); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: var(--text-md); text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-item + .nav-item { margin-top: 2px; }
.nav-item:hover { background: var(--bg-raised); color: var(--text); }
.nav-item[aria-current="page"] {
  background: var(--brand-soft); color: var(--brand); font-weight: var(--weight-medium);
}
.nav-item__icon { flex: none; width: 16px; height: 16px; opacity: .9; }
.nav-item__count {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--text-subtle);
}
.nav-item[aria-current="page"] .nav-item__count { color: var(--brand); }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: var(--sp-4);
  height: var(--topbar-h); padding: 0 var(--sp-6);
  background: var(--bg-surface);
  border-bottom: var(--border-width) solid var(--border);
}
.topbar__title { min-width: 0; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

/* ---------- content ---------- */
.content { padding: var(--sp-6); max-width: 1360px; }
.page-head { margin-bottom: var(--sp-6); }

/* One rhythm between the top-level blocks of a screen. This used to apply only
   between two .section elements, so a stats row followed by a filter bar sat flush
   against it. Blocks carrying their own bottom margin are zeroed first so the two
   never add up; nested blocks are untouched, because inside a section that margin
   is what separates a filter bar from its table. Scoped to .content because the
   mobile apps reuse .screen inside .ios__body on a much tighter scale. */
.section + .section { margin-top: var(--sp-8); }
.content > .screen > * + * { margin-top: var(--sp-8); }
.content > .screen > *[style*="margin-bottom"] { margin-bottom: 0 !important; }
.content > .screen > .page-head + * { margin-top: 0; }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap;
}

/* ---------- responsive: sidebar becomes an off-canvas drawer ---------- */
/* scoped to out-specify `.btn` in components.css, which loads later */
.sidebar .sidebar__close, .topbar .topbar__menu { display: none; }
.scrim {
  position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1);
  background: var(--bg-overlay); opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base);
}
.scrim[data-open="true"] { opacity: 1; visibility: visible; }

@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, var(--sidebar-w));
    z-index: var(--z-drawer); transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .sidebar[data-open="true"] { transform: none; }
  .sidebar .sidebar__close { display: inline-flex; }
  .topbar .topbar__menu { display: inline-flex; }
  .content { padding: var(--sp-4); }
  .topbar { padding: 0 var(--sp-4); }
}
@media (min-width: 1024px) { .scrim { display: none; } }
body[data-locked="true"] { overflow: hidden; }