@layer layout {
  .container { max-width: 64rem; margin-inline: auto; padding: var(--space-4); }

  /* Mobile: the sidebar sits on top and its links scroll sideways. */
  .sidebar {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); background: var(--color-surface); border-block-end: 1px solid var(--color-line);
  }
  .sidebar__brand { font-weight: 800; font-size: 1.15rem; color: var(--color-ink); text-decoration: none; }
  .sidebar__nav, .sidebar__account { display: flex; align-items: center; gap: var(--space-3); }
  .sidebar__nav { overflow-x: auto; white-space: nowrap; }
  .sidebar__nav a { color: var(--color-ink); text-decoration: none; }

  .page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
  .page-header h1 { margin: 0; }

  .impersonation-banner {
    display: flex; justify-content: center; align-items: center; gap: var(--space-3);
    padding: var(--space-2); background: var(--color-warning-bg); color: var(--color-warning); font-weight: 600;
  }

  @media (min-width: 48rem) {
    .container { padding: var(--space-8) var(--space-6); }

    .app-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
    /* Pinned so anything Turbo slips into the shell (e.g. a permanent element) can't push the page under the sidebar. */
    .app-shell > .sidebar { grid-column: 1; grid-row: 1 / span 100; }
    .app-shell > :not(.sidebar) { grid-column: 2; }
    .sidebar {
      position: sticky; inset-block-start: 0; block-size: 100dvh; overflow-y: auto;
      padding: var(--space-6) var(--space-4); border-block-end: 0; border-inline-end: 1px solid var(--color-line);
    }
    .sidebar__nav, .sidebar__account { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .sidebar__nav { flex: 1; overflow-x: visible; white-space: normal; }
    .sidebar__account { margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-line); }
  }
}