@layer components {
  /* The fixed glass bar at the top of the app — and of the marketing pages,
     whose header carries the class too. */
  .topbar {
    backdrop-filter: blur(12px);
    background: var(--color-glass);
    border-block-end: 1px solid var(--color-glass-edge);
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-inline-start: 0;
    position: fixed;
    z-index: var(--z-nav);
  }

  .nav-container {
    align-items: center;
    block-size: var(--nav-height);
    display: flex;
    gap: 1.5rem;
    inline-size: 100%;
    margin: 0 auto;
    max-inline-size: var(--content-max-inline-size);
    padding: 0 var(--gutter);
    position: relative;
  }

  /* Logo */
  .nav-logo {
    align-items: center;
    color: var(--color-ink);
    display: flex;
    flex-shrink: 0;
    font-size: 1.125rem;
    font-weight: 700;
    gap: 0.5rem;
    text-decoration: none;
  }

  /* The wordmark is a background, not an <img>, so the theme can pick the
     file (`--image-wordmark`); the ratio is the file's, the height the
     place's. */
  .nav-logo__img {
    aspect-ratio: 204 / 53;
    background: var(--image-wordmark) no-repeat center / contain;
    block-size: 36px;
    display: block;
    inline-size: auto;
  }

  /* Nav links */
  /* Full links only from 1024px — below that the hamburger carries them.
     Between 768 and 1024 the links and the hamburger together overflow the
     bar ("Received documents" is one link too many). Same breakpoint as
     `.nav-hamburger`, `.nav-actions` and `.nav-search-wrap`, so the whole
     navigation switches at once. */
  .nav-links {
    align-items: center;
    display: none;
    gap: 0.25rem;

    @media (width >= 1024px) {
      display: flex;
    }
  }

  .nav-link {
    align-items: center;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-ink-secondary);
    display: flex;
    font-size: 0.875rem;
    font-weight: 400;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    text-decoration: none;
    white-space: nowrap;
  }

  .nav-link:hover {
    background: var(--color-brand-tint);
    border-color: var(--color-brand-tint);
    color: var(--color-brand);
  }

  .nav-link--active {
    background: var(--color-brand-tint);
    border-color: var(--color-brand-tint);
    color: var(--color-brand);
  }

  .nav-link__icon {
    block-size: 20px;
    display: block;
    flex-shrink: 0;
    inline-size: 20px;
  }


  /* ─── Office menu ───────────────────────── */

  /* A firm's staff's own documents, folded into one menu so the bar keeps
     room for the accounting beside it. */
  .nav-office {
    position: relative;
  }

  .nav-office__button {
    cursor: pointer;
    font-family: inherit;
  }

  .nav-office__chev {
    block-size: 14px;
    inline-size: 14px;
  }

  .nav-office__panel {
    inline-size: max-content;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    min-inline-size: 14rem;
    padding: 0.5rem;
  }

  .nav-office__link {
    font-size: 0.875rem;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
  }

  .nav-office__link:hover,
  .nav-office__link--active {
    background: var(--color-brand-tint);
    color: var(--color-brand);
  }

  .nav-office__icon {
    block-size: 20px;
    flex-shrink: 0;
    inline-size: 20px;
  }


  /* Nav actions */
  .nav-actions {
    align-items: center;
    display: none;
    gap: 0.5rem;
    margin-inline-start: auto;
    min-inline-size: 0;

    @media (width >= 1024px) {
      display: flex;
    }
  }

  .nav-bell {
    align-items: center;
    background: var(--color-canvas);
    block-size: 40px;
    border: 1.5px solid oklch(from var(--color-brand) l c h / 20%);
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    inline-size: 40px;
    justify-content: center;
  }

  /* The bell stands on its own rather than inside a link, so it carries the
     colour its glyph draws with. */
  .nav-bell__icon {
    color: var(--color-ink-secondary);
  }

  .nav-bell:hover .nav-bell__icon {
    color: var(--color-brand);
  }

  /* Notifications (the bell) — hidden across the whole top bar until the
     feature exists. `.nav-bell` comes after its own `display: flex` on
     purpose; the hamburger uses a two-class selector to beat the later
     `.nav-hamburger__link`. Removing this block brings the bell back
     (desktop and hamburger alike). */
  .nav-bell,
  .nav-hamburger__link.nav-hamburger__bell {
    display: none;
  }

  .nav-user-chip {
    align-items: center;
    background: var(--color-canvas);
    border: 1.5px solid oklch(from var(--color-brand) l c h / 20%);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    display: flex;
    font-size: 0.875rem;
    font-weight: 500;
    flex-shrink: 0;
    gap: 0.5rem;
    min-inline-size: 0;
    padding: 0.25rem;
    text-decoration: none;
    white-space: nowrap;

    /* A circle while only the avatar is inside, holding its size — squeezed,
       the avatar spilt out of its ring. With the name it needs room on the
       right too, and gives way to the rest of the bar: the name shortens. */
    @media (width >= 1280px) {
      flex-shrink: 1;
      padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    }
  }

  .nav-user-chip:not(:has(.nav-user-chip__name)) {
    padding: 0.25rem;
  }

  /* Up to 1280px the avatar alone carries the identity — between 1024 and
     1248 the name squeezes `.nav-actions` and the sign-out icon gets clipped.
     It is hidden only visually: it stays in the DOM for screen readers, so
     the settings link keeps its accessible name (the full name is in the
     hamburger panel too).

     From 1280px there is room enough. `min-inline-size: 0` plus the ellipsis
     are the safety net for an unreasonably long name — it gives way, not the
     rest of the bar. */
  .nav-user-chip__name {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;

    @media (width >= 1280px) {
      block-size: auto;
      clip-path: none;
      inline-size: auto;
      max-inline-size: 20ch;
      min-inline-size: 0;
      position: static;
      text-overflow: ellipsis;
    }
  }

  .nav-user-chip__avatar {
    align-items: center;
    background: var(--color-brand-fill);
    block-size: 30px;
    border-radius: 50%;
    color: var(--color-ink-inverted);
    display: flex;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    inline-size: 30px;
    justify-content: center;
    line-height: 1;
    text-transform: uppercase;
  }

  .nav-user-chip__avatar--photo img {
    block-size: 30px;
    border-radius: 50%;
    inline-size: 30px;
    object-fit: cover;
  }

  .nav-logout {
    align-items: center;
    color: var(--color-ink-secondary);
    display: flex;
    flex-shrink: 0;
  }

  .nav-logout:hover {
    color: var(--color-brand);
  }

  /* Hamburger */
  .nav-hamburger {
    display: block;
    margin-inline-start: auto;

    @media (width >= 1024px) {
      display: none;
    }
  }

  .nav-hamburger__btn {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    color: var(--color-brand);
    cursor: pointer;
    display: flex;
    list-style: none;
    padding: 0.5rem;
  }

  .nav-hamburger__btn::-webkit-details-marker {
    display: none;
  }

  .nav-hamburger__panel {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    inset-block-start: calc(var(--nav-height) + 4px);
    inset-inline-end: 1rem;
    min-inline-size: 220px;
    padding: 0.75rem;
  }

  /* The panel slides in each time the menu opens: a closed <details> doesn't
     render its content, so opening it starts the animation afresh. */
  details[open] .nav-hamburger__panel {
    animation: nav-panel-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes nav-panel-in {
    from {
      opacity: 0;
      transform: translateY(-8px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* The panel's links live exactly until the bar takes them over (1024px). */
  .nav-hamburger__nav-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    @media (width >= 1024px) {
      display: none;
    }
  }

  .nav-hamburger__action-section {
    border-block-start: 1.5px dashed var(--color-border-strong);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-block-start: 0.25rem;
    padding-block-start: 0.25rem;

    .nav-hamburger__nav-section:empty + &,
    .nav-hamburger__nav-section[style*="none"] + & {
      border-block-start: none;
      margin-block-start: 0;
      padding-block-start: 0;
    }

    /* The divider only makes sense while the links section is really above it. */
    @media (width >= 1024px) {
      border-block-start: none;
      margin-block-start: 0;
      padding-block-start: 0;
    }
  }

  .nav-hamburger__link {
    font-size: 0.875rem;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
  }

  .nav-hamburger__link:hover {
    background: oklch(from var(--color-brand) l c h / 5%);
    color: var(--color-brand);
  }

  .nav-hamburger__link--active {
    background: var(--color-brand-tint);
    color: var(--color-brand);
  }

  .nav-hamburger__link--signout {
    color: var(--color-ink-muted);
  }

  .nav-hamburger__icon {
    block-size: 20px;
    flex-shrink: 0;
    inline-size: 20px;
  }


  .nav-hamburger__user {
    align-items: center;
    color: var(--color-ink-secondary);
    display: flex;
    font-size: 0.875rem;
    font-weight: 500;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    text-decoration: none;
  }

  .nav-hamburger__avatar {
    align-items: center;
    background: var(--color-brand-fill);
    block-size: 28px;
    border-radius: 50%;
    color: var(--color-ink-inverted);
    display: flex;
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    inline-size: 28px;
    justify-content: center;
    line-height: 1;
    text-transform: uppercase;
  }

  .nav-hamburger__avatar--photo img {
    block-size: 28px;
    border-radius: 50%;
    inline-size: 28px;
    object-fit: cover;
  }

  /* Nav search — a wrapper around the nav and the panel (display: contents,
     so it stays out of the body grid); the panel is thus a sibling of the
     nav, not a descendant → the same glass effect without a doubled
     backdrop-filter from the nav */
  .nav-search-root {
    display: contents;
  }

  /* Wrapper for the search icon — pushes it to the right (beside the
     hamburger). On desktop (≥1024) the magnifier sits among .nav-actions,
     so this wrap is hidden entirely, else its margin-left:auto would steal
     space. */
  .nav-search-wrap {
    margin-inline-start: auto;

    @media (width >= 1024px) {
      display: none;
    }
  }

  /* Below 1024 the search-wrap (margin-left:auto) pushes the search+burger
     pair to the right, so the burger needs no auto-margin of its own. At
     ≥1024 the search-wrap is hidden (and so is the burger), so the margin is
     moot. */
  .nav-search-wrap + .nav-hamburger {
    margin-inline-start: 0;

    @media (width >= 1024px) {
      margin-inline-start: auto;
    }
  }

  /* The magnifier icon — looks only; the containers decide visibility:
     .nav-search-wrap (<1024) on mobile/tablet, .nav-actions (≥1024) on
     desktop. */
  .nav-search-btn {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    background: none;
    border: none;
    color: var(--color-brand);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    padding: 0.5rem;
  }

  /* Panel with the search input — pops out under the navbar */
  .nav-search-panel {
    backdrop-filter: blur(12px);
    background: var(--color-glass);
    border-block-end: 1px solid var(--color-glass-edge);
    inset-block-start: var(--nav-height);
    inset-inline-end: 0;
    inset-inline-start: 0;
    margin: 0 auto;
    max-inline-size: var(--content-max-inline-size);
    padding: 0.625rem var(--gutter);
    position: fixed;
    /* Under the bar: the bar's shadow and blur read over the strip. */
    z-index: calc(var(--z-nav) - 1);

    /* From 768px it is no longer a full-width strip but a dropdown aligned
       right with the content (where the magnifier is) — it "unrolls" from
       under it. The panel is only the track; the field itself is its own
       card, and the track keeps the content column's edges. */
    @media (width >= 768px) {
      backdrop-filter: none;
      background: none;
      border-block-end: none;
      display: flex;
      justify-content: flex-end;
      padding: 0.5rem var(--gutter) 0;
      pointer-events: none;
    }
  }

  .nav-search-panel:not([hidden]) {
    animation: nav-search-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes nav-search-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* The card with the search input, quick actions and results. On mobile it
     fills the strip under the navbar; from 768px it is a right-aligned
     dropdown. */
  .nav-search-panel__card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-popover);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    inline-size: 100%;
    padding: 0.75rem;

    @media (width >= 768px) {
      inline-size: 480px;
      pointer-events: auto;
    }
  }

  .nav-search-panel__field {
    align-items: center;
    background: var(--color-surface-tint);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-ink-faint);
    cursor: text;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
  }

  .nav-search-panel__field:focus-within {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
  }

  .nav-search-panel__input {
    background: transparent;
    border: none;
    color: var(--color-ink-secondary);
    font-size: 0.875rem;
    inline-size: 100%;
    min-inline-size: 0;
    outline: none;
  }

  .nav-search-panel__input::placeholder {
    color: var(--color-ink-faint);
  }

  /* ─── User chip menu ─────────────────────── */
  .nav-user-menu {
    position: relative;
  }

  .nav-user-chip:where(button) {
    cursor: pointer;
  }

  /* The wrapper the profile form's stream updates: `display: contents` hands
     the avatar and name straight to the button's flex row, so they sit side
     by side as they do in the plain link. */
  .nav-user-chip__identity {
    display: contents;
  }

  .nav-user-chip__chev {
    color: var(--color-brand);
    flex-shrink: 0;
    margin-inline-end: 0.25rem;
  }

  .nav-user-menu__panel {
    inline-size: max-content;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    max-inline-size: 22rem;
    min-inline-size: 16rem;
    padding: 0.5rem;
  }

  .nav-user-menu__section + .nav-user-menu__section {
    border-block-start: 1.5px dashed var(--color-border-strong);
    margin-block-start: 0.25rem;
    padding-block-start: 0.25rem;
  }

  .nav-user-menu__company,
  .nav-user-menu__link {
    font-size: 0.875rem;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
  }

  .nav-user-menu__company:hover,
  .nav-user-menu__link:hover {
    background: oklch(from var(--color-brand) l c h / 5%);
    color: var(--color-brand);
  }

  .nav-user-menu__company--current {
    color: var(--color-brand);
  }

  .nav-user-menu__mark {
    color: var(--color-brand);
    display: inline-block;
    font-size: 0.625rem;
    inline-size: 0.75rem;
    text-align: center;
  }

  .nav-user-menu__name {
    flex: 1;
    min-inline-size: 0;
  }

  .nav-user-menu__role {
    color: var(--color-ink-muted);
    font-size: 0.75rem;
    margin-inline-start: auto;
    white-space: nowrap;
  }
}