/* =============================================================================
   COMPONENT: side-nav — DESKTOP primary navigation (FEA-0000). Hidden below the
   48rem posture breakpoint, where bottom-nav takes over.
   ========================================================================== */
@layer components {
  .side-nav { display: none; }

  @media (min-width: 48rem) {
    .side-nav {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
      padding: var(--space-md);
      background: var(--surface-sunken);
      border-inline-end: var(--border-width) solid var(--color-border);
    }
    .side-nav__item {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      min-block-size: var(--touch-target); /* >= 44px tap target (experience gate) */
      padding: var(--space-xs) var(--space-sm);
      border-radius: var(--radius-md);
      color: var(--color-text);
      text-decoration: none;
    }
    .side-nav__item:hover { background: var(--surface-raised); }
    /* Active = quiet accent tint, not a status color (selection ≠ status). */
    .side-nav__item[aria-current="page"] { background: var(--accent-tint); color: var(--accent); font-weight: var(--weight-medium); }

    .side-nav__item:active { background: color-mix(in oklab, var(--accent) 12%, var(--surface)); }
  }
}