// Logo zone widths kept in lock-step with `sidebar.scss` (16rem
// expanded / 4rem collapsed). When the sidebar toggles, the rail
// below this zone reaches exactly the same boundary, so the brand
// stays flush with the navigation column. If those widths ever
// change, update both files together — extracting a shared SCSS
// variable would be the right move only if a third surface needs the
// same coupling.
//
// No vertical divider between the logo zone and the rest of the
// header on purpose — the alignment carries the visual relationship
// to the sidebar rail below; a second hairline would only add noise.
.header__logo-zone {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 16rem;
  height: 100%;
  padding: 0 0.75rem;
  transition: width 0.18s ease-out;

  &--collapsed {
    width: 4rem;
    padding: 0 0.5rem;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header__logo-zone {
    transition: none;
  }
}
