@layer app {
  /* ============================================================
     Location-specific styles
     ============================================================ */

  .location-card {
    transition: all 0.2s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }
  }

  .location-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .location-members-tag {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
  }

  /* Sits tight against the location name. */
  .location-membership {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
  }

  /* A member's tag, just the check: pressing it is how they leave. */
  .location-membership__joined {
    align-items: center;
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
    border: 0;
    border-radius: 50%;
    color: var(--color-success);
    display: inline-flex;
    font-size: 1.1rem;
    justify-content: center;
    line-height: 1;
    padding: 0.35rem;

    &:hover {
      background: color-mix(in srgb, var(--color-success) 20%, transparent);
    }
  }

  /* Pressing the tag swaps it for the confirm/cancel pair, sized to match it. */
  .location-membership__confirm {
    display: none;
    gap: 0.35rem;

    .btn {
      font-size: 0.75rem;
      line-height: 1;
      padding: 0.35em 0.65em;
    }
  }

  .location-membership--leaving {
    .location-membership__joined {
      display: none;
    }

    .location-membership__confirm {
      display: inline-flex;
    }
  }

  /* ============================================================
     Location page header: who the place is, with the one thing to
     do about it in the top corner, what it is for, and its views
     as tabs along the card's bottom edge. The feed's topics run
     under the views while the feed is the one on show.
     ============================================================ */

  .location-header {
    --location-header-gutter: 1.5rem;

    column-gap: 1rem;
    display: grid;
    grid-template-areas:
      "identity cta"
      "about about"
      "actions actions"
      "views views";
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1.25rem var(--location-header-gutter);

    > .alert {
      grid-area: actions;
    }
  }

  .location-header__identity {
    align-items: center;
    column-gap: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    grid-area: identity;
    min-width: 0;
  }

  .location-header__breadcrumb {
    color: color-mix(in srgb, var(--color-dark) 55%, transparent);
    flex-basis: 100%;
    font-size: 0.85rem;
    margin: 0 0 0.15rem;

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

      &:hover {
        text-decoration: underline;
      }
    }
  }

  /* A long name gives way, so the membership tag stays beside it. */
  .location-header__heading {
    align-items: center;
    display: flex;
    flex-basis: 100%;
    gap: 0.6rem;
    min-width: 0;
  }

  .location-header__name {
    font-size: clamp(1.6rem, 5vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    min-width: 0;
  }

  /* Privacy and member count, under the name. */
  .location-header__badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
  }

  /* Share, Join or Sign in, all the same size, in the top corner. */
  .location-header__cta {
    align-self: start;
    grid-area: cta;

    .invite-badge__share {
      font-size: 0.875rem;
      padding: 0.4rem 1rem;
    }
  }

  .location-header__about {
    color: color-mix(in srgb, var(--color-dark) 70%, transparent);
    font-size: 0.95rem;
    grid-area: about;
    margin: 0.85rem 0 0;
  }

  /* Edge to edge along the bottom of the card. A visitor to a private place
     has a lone Feed view and no topics, so nothing to show here. */
  .location-header__views {
    grid-area: views;
    margin: 1rem calc(-1 * var(--location-header-gutter)) -1.25rem;

    &:not(:has(.location-views > :nth-child(2), .feed-topics)) {
      display: none;
    }
  }

  .location-views {
    border-top: 1px solid color-mix(in srgb, var(--color-dark) 8%, transparent);
    flex-wrap: nowrap;
    gap: clamp(1.25rem, 4vw, 2rem);
    overflow-x: auto;
    padding-inline: var(--location-header-gutter);
    scrollbar-width: none;

    /* A lone Feed view has nothing to switch to. */
    &:not(:has(> :nth-child(2))) {
      display: none;
    }

    .nav-link {
      border-bottom: 3px solid transparent;
      color: color-mix(in srgb, var(--color-dark) 65%, transparent);
      font-size: 1rem;
      font-weight: 600;
      padding: 0.85rem 0 0.7rem;
      white-space: nowrap;

      &:hover {
        color: var(--color-primary);
      }

      &.active {
        border-bottom-color: var(--color-primary);
        color: var(--color-primary);
      }
    }
  }

  /* Topics narrow the feed, so they leave with it when another view is picked. */
  .feed-topics {
    align-items: center;
    border-top: 1px solid color-mix(in srgb, var(--color-dark) 8%, transparent);
    display: flex;
    min-width: 0;
    padding: 0.5rem var(--location-header-gutter);

    .location-header:has(.location-views .nav-link.active:not(#feed-tab)) & {
      display: none;
    }
  }

  /* Every topic on one line that scrolls sideways when they outgrow it,
     fading at its end. All leads, and the chosen topic follows it, so both
     are in sight before anyone scrolls. The padding leaves room for a focus
     ring the scroller would clip, and the scroll padding keeps a chip reached
     with Tab clear of both that edge and the fade. Reaching either end does
     not hand the swipe on to the page, where it would go back a page. */
  .feed-topics__list {
    display: flex;
    flex: 0 1 auto;
    gap: 0.35rem;
    margin-inline-start: -0.25rem;
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0.25rem 1.5rem 0.25rem 0.25rem;
    scroll-padding-inline: 0.25rem 1.5rem;
    scrollbar-width: none;
  }

  /* Outline chips, the chosen one in ink. */
  .feed-topic {
    align-items: center;
    background: var(--color-body-bg);
    border: 1px solid color-mix(in srgb, var(--color-dark) 14%, transparent);
    border-radius: var(--radius-pill);
    color: color-mix(in srgb, var(--color-dark) 72%, transparent);
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.38rem 0.75rem;
    text-decoration: none;
    transition: border-color var(--transition), color var(--transition);
    white-space: nowrap;

    &:hover {
      border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
      color: var(--color-primary);
    }

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

  .feed-topic--active,
  .feed-topic--active:hover {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: #fff;
    font-weight: 600;
  }

  /* ============================================================
     Location feed: the composer (post-composer.css) over its posts
     ============================================================ */

  .location-feed {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

@media (max-width: 767.98px) {
  @layer app {
    .location-header {
      --location-header-gutter: 1rem;

      padding-block: 1rem;
    }

    .location-header__views {
      margin-bottom: -1rem;
    }
  }
}