/* v31: one profile entry, kept on the header's existing motion path. */
.topbar {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 20px;
}

.brand-profile-button {
  max-width: 100%;
  min-height: 48px;
  padding: 4px 0;
  gap: 12px;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms cubic-bezier(.2, .7, .25, 1);
}

.brand-profile-button .brand-mark {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
}

.brand-profile-button .brand-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.brand-profile-button .brand-copy strong {
  display: flex;
  align-items: baseline;
  min-width: 0;
  line-height: 1.45;
}

.brand-owner {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-owner[hidden] { display: none; }
#brandTitleSuffix { flex: 0 0 auto; }
.brand-profile-button .brand-copy small { display: block; line-height: 1.4; }

.brand-profile-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.brand-profile-button:active {
  transform: translateY(1px) scale(.985);
  transition-duration: 50ms;
}

@media (hover: hover) and (pointer: fine) {
  .brand-profile-button:hover { background: rgba(255, 255, 255, .36); }
}

@media (max-width: 900px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
}

@media (max-width: 420px) {
  .topbar { column-gap: 8px; }
  .brand-profile-button,
  html[lang="en"] .brand-profile-button { gap: 10px; }
  .brand-profile-button .brand-copy strong { font-size: 14px; }
  .brand-profile-button .brand-copy small { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-profile-button { transition: none; }
  .brand-profile-button:active { transform: none; }
}