/*
 * Shared editor/player chrome — top header, action buttons, icon shells.
 * Used by both editor-brand-modal.html and player-brand-modal.html.
 * Pair with assets/modal.css and the DS tokens.css.
 */

/* ════════════════════════════════
   HEADER (Figma Make — pixel-exact)
════════════════════════════════ */
.header {
  position: relative;
  background: var(--color-bg-chrome);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  flex-shrink: 0;
  /* Sits above page chrome (player stage-blur creates its own z:1 context via
     backdrop-filter) but below the brand modal overlay (z:100). */
  z-index: 10;
}
.header::after {
  content: '';
  position: absolute;
  inset: 0;
  border-bottom: 1px solid var(--surface-overlay-1);
  pointer-events: none;
}

.header-zone {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  min-width: 0;
  height: 28px;
}
.header-zone-center { justify-content: center; }
.header-zone-right  { justify-content: flex-end; gap: 8px; }

.header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: var(--font-weight-button-default);
  font-size: var(--font-size-button-default);
  line-height: var(--line-height-button-default);
  color: #ffffff;
  white-space: nowrap;
  font-variation-settings: 'wdth' 100;
}
.header-btn:hover:not(.header-btn-primary) {
  background: var(--surface-overlay-1);
}
.header-btn-primary {
  background: var(--color-brand);
  color: #000000;
}
.header-btn-primary:hover { background: var(--color-brand-hover); }

.header-title-wrap {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
  padding: 6px 4px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.header-title {
  font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 590;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  white-space: nowrap;
  font-variation-settings: 'wdth' 100;
}

.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.header-icon-btn:hover { background: var(--surface-overlay-1); }

.icon-20 {
  position: relative;
  width: 20px;
  height: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
.icon-20.icon-logo { border-radius: 16px; }

.icon-logo-union {
  position: absolute;
  top: 12.5%;
  bottom: 12.5%;
  left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 1003.189208984375 / 873.5664672851562;
}
.icon-logo-union svg { display: block; width: 100%; height: 100%; }

.icon-more {
  position: absolute;
  top: 43.75%;
  bottom: 43.75%;
  left: 18.75%;
  right: 18.75%;
}
.icon-more svg { display: block; width: 100%; height: 100%; }

.header-avatar {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Wraps the avatar button + dropdown menu so menu-below-right anchors here. */
.header-account-wrap {
  position: relative;
  display: inline-flex;
}

.icon-16 {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  flex-shrink: 0;
}
.icon-16 > .icon-inner { position: absolute; }
.icon-16 > .icon-inner svg { display: block; width: 100%; height: 100%; }

.icon-play { top: 19.03%; bottom: 19.03%; left: 25%; right: 24.44%; }
.icon-download { inset: 15.63%; }
.icon-link {
  inset: 10.45%;
  transform: scaleX(-1);
}
.icon-record { inset: 12.5%; }
.icon-pencil { inset: 0; }