/* Guided rail: only navigation scrolls in short windows, preserving footer access. */
@layer components {
  .sidebar { display: none; }

  @media (min-width: 768px) {
    .sidebar {
      display: flex;
      flex-direction: column;
      width: 15.5rem;
      flex-shrink: 0;
      position: sticky;
      top: 0;
      height: 100dvh;
      background-color: var(--page);
      border-right: 1px solid var(--border);
    }
  }
  .sidebar-brand {
    flex-shrink: 0;
    padding: var(--space-5);
  }
  .sidebar-workspace-block {
    margin-top: var(--space-4);
  }
  .sidebar-workspace-caption {
    font: var(--type-small);
    color: var(--text-secondary);
  }
  .sidebar-workspace-name {
    font: var(--type-control);
    color: var(--text);
  }
  .sidebar-nav {
    min-height: 0;
    overflow-y: auto;
    padding-block: var(--space-1);
  }
  .sidebar-cluster + .sidebar-cluster { margin-top: var(--space-5); }
  .sidebar-group-label {
    padding: 0 var(--space-5) var(--space-2);
    font: var(--type-small);
    font-weight: 600;
    color: var(--text-secondary);
  }
  .sidebar-footer {
    margin-top: auto;
    padding-block: var(--space-3);
    flex-shrink: 0;
  }
  .sidebar-account-divider {
    margin-inline: var(--space-3);
    margin-block: var(--space-2);
    border-top: 1px solid var(--border);
  }
}