@layer app {
  /* ============================================================
     Personal feed
     ============================================================ */

  /* A segmented switcher of three equal parts, the chosen feed raised in
     white. It fills a phone's width and stops growing on anything wider. */
  .feed-switcher {
    background: color-mix(in srgb, white 45%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid color-mix(in srgb, white 70%, transparent);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: var(--space-1);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 auto var(--space-3);
    max-width: 35rem;
    padding: 0.3rem;
  }

  .feed-switcher__link {
    align-items: center;
    border-radius: var(--radius-pill);
    color: color-mix(in srgb, var(--color-dark) 65%, transparent);
    display: flex;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
    white-space: nowrap;

    &:hover {
      background: color-mix(in srgb, white 50%, transparent);
      color: var(--color-dark);
    }

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

    &[aria-current="page"] {
      background: var(--color-body-bg);
      box-shadow: var(--shadow);
      color: var(--color-primary);
    }

    .icon {
      flex-shrink: 0;
    }
  }

  /* Card and media sizing is shared with location feeds in feeds.css. Only
     what a location feed has no use for belongs here. */
  .personal-feed__stream .feed-post__location-context {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
  }
}

/* On a phone the labels shrink with the screen, so every locale fits whole
   from 360px up. Below that the longest, Discussions in English and Russian,
   ends in an ellipsis rather than spilling out of its segment. */
@media (max-width: 575.98px) {
  @layer app {
    .feed-switcher__link {
      font-size: clamp(0.8rem, 3.5vw, 0.9rem);
      gap: 0.3rem;
      padding-inline: 0.25rem;
    }
  }
}