/* lib-js-shell — shell layout (webapp/03 §2): sidebar nav + topbar + view.
 * Phone: nav collapses to bottom tabs; topbar condenses. Mobile-first. */

.shell {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'topbar'
    'main'
    'nav';
}

.shell__topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-raised);
  border-block-end: var(--border-w) solid var(--border);
}

.shell__app-name {
  font: var(--type-subtitle);
}

.shell__spacer {
  flex: 1;
}

.shell__user {
  color: var(--text-muted);
  font: var(--type-caption);
}

.shell__inbox {
  position: relative;
  padding: var(--space-1);
}

.shell__inbox-count {
  position: absolute;
  inset-block-start: -0.25em;
  inset-inline-end: -0.5em;
  background: var(--danger);
  color: var(--accent-contrast);
  font: var(--type-caption);
  border-radius: 999px;
  padding: 0 var(--space-1);
}

.shell__nav {
  grid-area: nav;
  display: flex;
  justify-content: space-around;
  background: var(--bg-raised);
  border-block-start: var(--border-w) solid var(--border);
}

.shell__nav-item {
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);

  &[aria-current='page'] {
    color: var(--accent);
    font-weight: 600;
  }
}

.shell__main {
  grid-area: main;
  padding: var(--space-4);
  min-width: 0;
}

/* Tablet and up: sidebar nav (breakpoint constant from tokens.css). */
@media (min-width: 640px) {
  .shell {
    grid-template-columns: 14rem 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'nav topbar'
      'nav main';
  }

  .shell__nav {
    flex-direction: column;
    justify-content: flex-start;
    border-block-start: none;
    border-inline-end: var(--border-w) solid var(--border);
    padding-block: var(--space-3);
  }

  .shell__nav-item[aria-current='page'] {
    border-inline-start: 3px solid var(--accent);
  }
}