/* Goal F, DF-5: the signed-in app shell. On a laptop-or-wider screen the
   navigation is a left sidebar — 11–13 entries no longer wrap onto two rows
   across the top (F0, 2026-10-04). Below 1100px the existing top bar +
   hamburger menu stays. Loaded after styles.css; uses tokens.css spacing. */
@media (min-width: 1100px) {
  .app-container { flex-direction: row; align-items: stretch; }
  .app-container > .navbar {
    position: sticky; top: 0; height: 100vh; width: 232px; flex: none;
    padding: var(--s5) var(--s3); border-bottom: none;
    border-right: 1px solid var(--glass-border);
    overflow-y: auto;
  }
  .app-container > .navbar .nav-container {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    height: 100%; max-width: none; margin: 0;
  }
  .app-container > .navbar .nav-brand { padding: 0 var(--s3) var(--s5); }
  .app-container > .navbar .nav-brand a { font-size: 1.25rem; }
  .app-container > .navbar .nav-menu {
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    justify-content: flex-start; gap: 2px; flex: 1;
  }
  .app-container > .navbar .nav-menu li a {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3); border-radius: var(--radius-sm); font-size: 0.925rem;
  }
  .app-container > .navbar .nav-section {
    margin: var(--s4) var(--s3) var(--s1); font-size: var(--fs-caption);
    text-transform: uppercase; letter-spacing: .08em; opacity: .6; font-weight: 600;
  }
  /* Bell, theme and Logout sit together at the foot of the sidebar. */
  .app-container > .navbar .nav-menu .nav-notifications { margin-top: auto; }
  /* The bell is a full-width row like every other entry (a narrow inline target
     was missed by a click on its row — the notifications e2e, F6 01:08Z). */
  .app-container > .navbar .nav-menu .nav-notifications { display: block; }
  .app-container > .navbar .nav-menu .nav-notifications a { justify-content: flex-start; }
  .app-container > .navbar .nav-menu .nav-theme-toggle { display: inline-flex; padding-left: var(--s3); }
  .app-container > main.main-content {
    flex: 1; min-width: 0; max-width: 1180px; margin: 0; padding: var(--s8) 40px;
  }
}
@media (max-width: 1099px) {
  .nav-section { display: none; }
}

/* Goal F, F2: stat tiles at a calm size. A card holding a stats grid used the
   page-level 250px columns and 2.5rem figures — one figure per row in a half-
   width card, a scroll to see four numbers (F0 audit, provide-1280). */
.card .dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
  margin-bottom: 0;
}
.card .dashboard-grid .stat-card { padding: var(--s4); box-shadow: none; }
.stat-value { font-size: 1.75rem; line-height: 1.15; margin: 0 0 var(--s1); font-variant-numeric: tabular-nums; }
.stat-label { font-size: var(--fs-caption); letter-spacing: .06em; }