/* Brand header: the card header of the member, install, USDT and WeChat donation pages,
   one look for all of them (user decision 2026-09-30; the spec is the member page's).
   The page picks the column with a site-shell class (member: wide; the others: narrow).
   Controls use the header small-control size, the same as the shared browse header.
   Markup comes from renderBrandHeader() in src/brandHeader.ts.

   header.brand-header[.brand-header--fill]
     .brand-header__bar
       a.brand-header__brand > .brand-header__mark + .brand-header__copy (title, sub)
       .brand-header__actions > .brand-header__action ...
       a.brand-header__lang */
.brand-header {
  margin-top: var(--space-scale-px-14);
  border: 1px solid var(--border);
  border-radius: var(--radius-ui-md);
  background: var(--bg-card);
}
.brand-header__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-gap-controls);
  padding: var(--space-scale-px-14);
}
.brand-header__brand {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: var(--size-header-control);
  display: flex;
  align-items: center;
  gap: var(--space-scale-px-10);
  color: var(--text-primary);
  text-decoration: none;
}
.brand-header__mark {
  flex: 0 0 auto;
  width: var(--size-scale-px-36);
  height: var(--size-scale-px-36);
  overflow: hidden;
  border-radius: var(--radius-header-control);
}
.brand-header__mark img {
  display: block;
  width: 100%;
  height: 100%;
}
.brand-header__copy {
  min-width: 0;
  display: grid;
  gap: var(--space-scale-px-3);
}
.brand-header__title {
  color: var(--text-primary);
  font-size: var(--type-section);
  font-weight: var(--weight-section);
  line-height: var(--leading-title);
}
.brand-header__sub {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--type-meta);
  line-height: var(--leading-section);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-header__actions {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-gap-controls);
}
.brand-header__action,
.brand-header__lang {
  position: relative;
  box-sizing: border-box;
  height: var(--size-header-control);
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-header-control);
  background: var(--bg-surface);
  font: inherit;
  font-size: var(--type-control);
  font-weight: var(--weight-control);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
/* A long label (English member page on a narrow screen) wraps between words instead of
   being cut or spilling out; CJK labels never break inside a word. */
.brand-header__action {
  min-width: 0;
  padding: 0 var(--space-scale-px-12);
  color: var(--text-primary);
  line-height: var(--leading-compact);
  text-align: center;
  white-space: normal;
  word-break: keep-all;
}
.brand-header__lang {
  grid-column: 3;
  grid-row: 1;
  width: var(--size-header-control);
  padding: 0;
  color: var(--text-secondary);
  font-size: var(--type-meta);
}
@media (hover: hover) and (pointer: fine) {
  .brand-header__action:hover,
  .brand-header__lang:hover {
    border-color: var(--visual-border-medium);
    background: var(--bg-surface-hover);
    color: var(--text-primary);
  }
}
/* Member page: its actions share the room between the brand and the language button. */
.brand-header--fill .brand-header__bar {
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) auto;
}
.brand-header--fill .brand-header__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

@media (max-width: 767px) {
  /* Brand and language on the first row, the actions share the second row. */
  .brand-header {
    margin-top: var(--space-scale-px-8);
  }
  .brand-header__bar,
  .brand-header--fill .brand-header__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space-scale-px-9);
  }
  .brand-header__brand {
    gap: var(--space-scale-px-7);
  }
  .brand-header__mark {
    width: var(--size-scale-px-28);
    height: var(--size-scale-px-28);
  }
  .brand-header__copy {
    gap: var(--space-scale-px-2);
  }
  .brand-header__title {
    font-size: var(--type-card-copy);
  }
  .brand-header__sub {
    font-size: var(--type-label);
  }
  .brand-header__lang {
    grid-column: 2;
  }
  .brand-header__actions,
  .brand-header--fill .brand-header__actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .brand-header__action {
    padding: 0 var(--space-scale-px-6);
  }
  /* Invisible hit area toward 44px tall: the first row grows upward and the second row
     downward, so the language button and the actions below it never overlap. */
  .brand-header__lang::after,
  .brand-header__action::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
  }
  .brand-header__lang::after {
    top: min(calc(-1 * var(--size-scale-px-2)), calc(var(--size-header-control) - var(--size-tap-target-min)));
    bottom: 0;
  }
  .brand-header__action::after {
    top: 0;
    bottom: min(calc(-1 * var(--size-scale-px-2)), calc(var(--size-header-control) - var(--size-tap-target-min)));
  }
}