/* Sticky top bar: brand, nav, search, actions. */

@layer components {
  .topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    background: color-mix(in oklch, var(--color-canvas), transparent 5%);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--color-border);
    view-transition-name: topbar;
  }

  ::view-transition-group(topbar) {
    z-index: 1;
  }

  .topbar__inner {
    max-inline-size: var(--measure-wide);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: 0.5rem 1.5ch;
    min-block-size: 3.5rem;
  }

  .topbar__brand {
    display: flex;
    align-items: center;
    gap: 0.4ch;
    font-size: var(--text-medium);
    font-weight: 600;
    color: var(--color-ink);
    transition: opacity 0.15s ease;

    @media (any-hover: hover) {
      &:hover {
        text-decoration: none;
        opacity: 0.75;
      }
    }

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

  .topbar__leaf {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);

    & svg {
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }
  }

  .topbar__nav {
    display: none;
    gap: 0.4ch;
  }

  .topbar__link {
    padding: 0.375rem var(--inline-space);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text-subtle);

    @media (any-hover: hover) {
      &:hover {
        background: var(--tint-ink-5);
        text-decoration: none;
      }
    }

    &.topbar__link--on {
      color: var(--color-ink);
      background: var(--tint-ink-5);
    }
  }

  .topbar__post {
    display: inline-flex;
    align-items: center;
    gap: 0.4ch;

    & svg {
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }
  }

  /* Account dropdown: avatar trigger, Basecamp-style header + links + log out. */
  .account-menu {
    position: relative;
  }

  .account-menu__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--component-sm);
    min-block-size: var(--component-sm);
    border-radius: var(--radius-pill);

    @media (any-hover: hover) {
      &:hover {
        background: var(--tint-ink-10);
      }
    }
  }

  .account-menu__items {
    inset-block-start: calc(100% + 0.25rem);
    min-inline-size: 8.75rem;
  }

  .account-menu__head {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem var(--inline-space);
    margin-block-end: 0.125rem;
    border-block-end: 1px solid var(--color-border-subtle);
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-primary);
  }

  .account-menu__name {
    font-size: var(--text-x-small);
    font-weight: 600;
    color: var(--color-text-subtle);
  }

  .account-menu__form {
    display: contents;
  }

  .account-menu__item {
    inline-size: 100%;
    white-space: nowrap;
    min-block-size: var(--tap);
    padding-block: 0;
    padding-inline: var(--inline-space);
    color: var(--color-text);
    background: none;
    cursor: pointer;

    @media (any-hover: hover) {
      &:hover {
        background: var(--tint-ink-5);
        text-decoration: none;
      }
    }

    &.account-menu__item--logout {
      margin-block-start: 0.125rem;
      border-block-start: 1px solid var(--color-border-subtle);
      border-start-start-radius: 0;
      border-start-end-radius: 0;
    }
  }

  .topbar__search {
    display: none;

    & .input {
      min-block-size: var(--component-sm);
    }
  }

  .topbar__search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--component-sm);
    block-size: var(--component-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-medium);
  }

  .topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75ch;
    margin-inline-start: auto;
  }

  .topbar__bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--component-sm);
    block-size: var(--component-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-medium);
    color: var(--color-text-subtle);

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-surface-sunken);
        color: var(--color-ink);
      }
    }
  }

  .topbar__bell-badge {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    min-inline-size: 1rem;
    block-size: 1rem;
    padding-inline: 0.4ch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-x-small);
    font-weight: 700;
    line-height: 1;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--radius-pill);
  }

  @media (min-width: 720px) {
    .topbar__nav {
      display: flex;
    }

    /* Search joins the right group (with Post/profile); the flexible space
       sits between the left group (brand + nav) and this right group. */
    .topbar__search {
      display: block;
      inline-size: clamp(11.25rem, 26vw, 20rem);
      margin-inline-start: auto;
    }

    .topbar__actions {
      margin-inline-start: 0;
    }

    .topbar__search-icon {
      display: none;
    }
  }
}