@layer components {
  /* Navigation
   * Horizontal nav bar with active state, responsive collapse via :has().
   * Works with Turbo Drive (active class via :has() or server-rendered).
   *
   * Basic usage:
   *   <nav class="nav">
   *     <a class="nav__brand" href="/">App</a>
   *     <ul class="nav__links">
   *       <li><a class="nav__link" href="/boards" aria-current="page">Boards</a></li>
   *     </ul>
   *   </nav>
   *
   * With responsive collapse (add toggle checkbox):
   *   <nav class="nav">
   *     <a class="nav__brand" href="/">App</a>
   *     <input type="checkbox" id="nav-toggle" class="nav__toggle">
   *     <label for="nav-toggle" class="nav__toggle-label" aria-label="Menu">☰</label>
   *     <ul class="nav__links">...</ul>
   *   </nav>
   */

  .nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-6);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-canvas);
  }

  .nav__brand {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    margin-inline-end: var(--space-4);
  }

  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.375em 0.75em;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius);
    transition: color var(--transition-fast), background var(--transition-fast);

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

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

    /* Active state — set via server or Turbo */
    &[aria-current="page"],
    &.active {
      color: var(--color-primary);
      background: color-mix(in oklch, var(--color-primary) 8%, transparent);
      font-weight: 500;
    }
  }

  /* Push right section to end */
  .nav__spacer {
    flex: 1;
  }

  /* Right-side actions area (user menu, etc.) */
  .nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
  }

  /* --- Responsive collapse (opt-in: add .nav__toggle checkbox + label) --- */

  .nav__toggle {
    display: none;
  }

  .nav__toggle-label {
    display: none;
  }

  @media (max-width: 48rem) {
    .nav:has(.nav__toggle) {
      flex-wrap: wrap;
    }

    .nav:has(.nav__toggle) .nav__toggle-label {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-inline-start: auto;
      min-width: 2.75rem;
      min-height: 2.75rem;
      padding: 0.375em 0.5em;
      font-size: 1.5rem;
      color: var(--color-text-muted);
      border-radius: var(--radius);
      cursor: pointer;

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

    .nav:has(.nav__toggle) .nav__links {
      display: none;
      flex-basis: 100%;
      flex-direction: column;
      padding-block: var(--space-2);
      border-block-start: 1px solid var(--color-border);
    }

    .nav:has(.nav__toggle:checked) .nav__links {
      display: flex;
    }

    .nav:has(.nav__toggle) .nav__actions {
      margin-inline-start: 0;
    }
  }

  /* --- Breadcrumbs --- */

  .breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    list-style: none;
    padding: 0;
    margin: 0;

    & li + li::before {
      content: "/";
      margin-inline-end: var(--space-1);
      color: var(--color-border);
    }

    & a {
      color: var(--color-text-muted);
      text-decoration: none;

      &:hover {
        color: var(--color-text);
        text-decoration: underline;
      }
    }

    & [aria-current="page"] {
      color: var(--color-text);
    }
  }
}