/* Design system left-menu (sidebar) layout.
   Single source of truth for the design-system pages' shell + side nav.
   The nav links themselves are generated by shared/js/design-system-nav.js,
   which either populates an existing `.ds-nav` or builds the `.ds-shell`
   layout around a `.qa-wrap` page. Link this stylesheet and load that script;
   do not copy these rules into individual pages. */

.ds-shell { width: 100%; max-width: none; margin: 0; padding: 24px 28px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.ds-main { min-width: 0; width: 100%; max-width: 1280px; margin: 0 auto; }
.ds-nav { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 16px; text-align: left; justify-self: start; }
.ds-nav-title { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); padding: 8px 10px 4px; }
.ds-nav a { display: block; text-decoration: none; color: var(--text-secondary); padding: 8px 10px; border-radius: 6px; font-size: 14px; }
.ds-nav a:hover { background: var(--n-10); color: var(--text-h2); }
.ds-nav a.active { background: var(--primary-highlight); color: var(--n-100); font-weight: var(--font-weight-bold); }
.ds-nav-divider { border-top: 1px solid var(--border-primary); margin: 6px 10px; }

/* Pages author their content inside `.qa-wrap`; once the nav script moves it
   into `.ds-main`, reset the wrapper's own page width. Scoped to `.ds-shell`
   so it wins over each page's default `.qa-wrap` rule regardless of load order. */
.ds-shell .qa-wrap { max-width: none; margin: 0; padding: 0; }

@media (max-width: 1024px) {
  .ds-shell { grid-template-columns: 1fr; padding: 16px; }
  .ds-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .ds-nav-title { width: 100%; padding: 0; }
}