/* Destinations — the five crew destinations (Home, Chat, Lineup, Map, Crew),
 * one <nav> in three shapes:
 *   phone   < 48rem : bottom bar
 *   tablet  48–80rem: icon rail, Actions at the foot
 *   desktop ≥ 80rem : labelled sidebar with wordmark, crew switcher, Actions
 *                     and the "me" row
 * Widths come from the shell's insets (shell.css).
 */

@layer components {
  .destinations {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    padding: 0.375rem 0.25rem max(1.375rem, env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-block-start: 1px solid var(--color-border-interactive);
  }

  .destinations__brand,
  .destinations__crew,
  .destinations__foot {
    display: none;
  }

  .destinations__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .destinations__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 3rem;
    padding: 0.25rem;
    border-radius: var(--radius-lg);
    color: var(--color-ink-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 150ms ease, background 150ms ease;

    & svg {
      width: 1.375rem;
      height: 1.375rem;
      flex-shrink: 0;
    }

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

    &[aria-current="page"] {
      color: var(--color-link);
      background: color-mix(in oklch, var(--color-link) 10%, transparent);
    }

    @media (hover: hover) {
      &:not([aria-current="page"]):hover { color: var(--color-ink); }
    }
  }

  .destinations__badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(50% + 0.25rem);
    min-width: 1.125rem;
    padding: 0.0625rem 0.3125rem;
    border-radius: var(--radius-pill);
    background: var(--color-link);
    color: var(--color-canvas);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* ── Tablet: icon rail ── */

  @media (width >= 48rem) {
    .destinations {
      inset: 0 auto 0 0;
      width: var(--side-nav-inset);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 0.75rem 0.5rem;
      border-block-start: none;
      border-inline-end: 1px solid var(--color-border);
      overflow-y: auto;
    }

    .destinations__list {
      grid-template-columns: 1fr;
      gap: 0.25rem;
    }

    .destinations__link {
      min-height: 3.5rem;
    }

    .destinations__foot {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-block-start: auto;
    }

    .destinations .destinations__actions {
      width: 3.25rem;
      height: 3.25rem;
      padding: 0;
      border-radius: var(--radius-lg);

      & svg { width: 1.25rem; height: 1.25rem; }
      & span { display: none; }
    }

    .destinations__me { display: none; }
  }

  /* ── Desktop: labelled sidebar ── */

  @media (width >= 80rem) {
    .destinations {
      gap: 0.25rem;
      padding: 1rem 0.875rem;
    }

    .destinations__brand {
      display: block;
      padding: 0.375rem 0.625rem 0.75rem;
      color: var(--color-ink);
      font-family: "Outfit", system-ui, sans-serif;
      font-size: 1.5rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      text-decoration: none;

      &::after {
        content: ".";
        color: var(--color-link);
      }
    }

    .destinations__crew {
      display: block;
      margin-block-end: 0.75rem;

      & .crew-selector__trigger {
        width: 100%;
        border: 1px solid var(--color-border-interactive);
        background: var(--color-canvas);
        font-size: 0.9375rem;
      }

      & .crew-selector__name { max-width: none; flex: 1; text-align: start; }
    }

    .destinations__link {
      flex-direction: row;
      justify-content: flex-start;
      gap: 0.75rem;
      min-height: var(--touch-min);
      padding: 0.5rem 0.75rem;
      font-size: 0.9375rem;
    }

    .destinations__badge {
      position: static;
      margin-inline-start: auto;
      font-size: 0.6875rem;
    }

    .destinations__foot {
      align-items: stretch;
      gap: 0.75rem;
    }

    .destinations .destinations__actions {
      width: auto;
      height: auto;
      justify-content: flex-start;
      padding-inline: 0.875rem;
      min-height: 2.875rem;

      & span { display: inline; }
    }

    .destinations__me {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      min-height: var(--touch-min);
      padding: 0.75rem 0.5rem 0;
      border-block-start: 1px solid var(--color-border);
      color: var(--color-ink);
      font-weight: 600;
      text-decoration: none;

      @media (hover: hover) {
        &:hover .destinations__me-name { color: var(--color-link); }
      }
    }

    .destinations__me-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}