/* The owner signed in as a customer: a fixed red bar, always on top. The shell reads --banner-h to sit below it. */
html:has(.impersonation-bar) { --banner-h: 40px; }
html:has(.impersonation-bar) body { padding-top: var(--banner-h); }

.impersonation-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 120; height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 16px;
  background: var(--bad); color: var(--on-bad);
  font-size: var(--fs-s); line-height: 1.2;
}
.impersonation-bar .impersonation-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.impersonation-bar .impersonation-text svg { width: 16px; height: 16px; flex: none; }
.impersonation-bar .impersonation-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impersonation-bar form { margin: 0; flex: none; }
.impersonation-bar .btn {
  background: transparent; color: var(--on-bad); border-color: color-mix(in srgb, var(--on-bad) 60%, transparent);
}
.impersonation-bar .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--on-bad) 16%, transparent); color: var(--on-bad); }

@media (max-width: 700px) {
  .impersonation-bar { gap: 8px; padding: 0 10px; font-size: var(--fs-xs); }
}