@layer layout {
/* App shell: mobile gets the bottom nav; ≥900px gets this sidebar instead.
   Both navs render from ApplicationHelper#shell_nav_items — new sections
   appear in both automatically. */

#app_sidebar {
  display: none;
}

@media (min-width: 900px) {
  /* Desktop app-shell: pin the shell to the viewport so the sidebar nav is
     always visible, and let ONLY the main column scroll. */
  body {
    height: 100dvh;
    overflow: hidden;
  }

  #app-main {
    height: 100dvh;
    overflow-y: auto;
  }

  #app_sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    flex-shrink: 0;
    width: 220px;
    box-sizing: border-box;
    padding: var(--spacing-6) var(--spacing-3);
    border-inline-end: var(--border-width) solid var(--border-strong);
    height: 100dvh;
    overflow-y: auto;
  }

  /* Mobile chrome disappears on desktop: the sidebar carries nav + account */
  #bottom_nav {
    display: none;
  }

  #app-main > header {
    display: none;
  }
}

#app_sidebar .sidebar-brand {
  padding: 0 var(--spacing-3) var(--spacing-6);

  & a {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    text-decoration: none;
    text-transform: uppercase;
  }

  & .brand-bar {
    display: block;
    width: 40px;
    height: 4px;
    margin-top: var(--spacing-1);
    background: var(--accent);
    border: var(--border-width) solid var(--border-strong);
  }
}

#app_sidebar .sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-1);
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;

  & li {
    width: 100%;
  }

  & a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    min-height: var(--tap-min);
    box-sizing: border-box;
    color: var(--text);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: var(--border-width) solid transparent;

    &:hover {
      background: var(--surface-sunken);
    }

    &:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: -2px;
    }

    &.active {
      background: var(--accent);
      color: var(--on-accent);
      border-color: var(--border-strong);
    }
  }
}

#app_sidebar .sidebar-footer {
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  border-block-start: var(--border-width) solid var(--border);

  & .sidebar-user {
    color: var(--text);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
  }

  & .sidebar-logout {
    color: var(--text-subtle);
    font-size: var(--font-size-sm);
  }
}
}