/*
 * Brand-assets prototype header — "← Back to Brand Setup Prototypes" link
 * shown on every prototype page so users can return to the gallery.
 *
 * Position fixed at top with high z-index so it sits above:
 *   - Iframe-backed prototypes (camera-y2, camera-b-current-ui) — covers
 *     the iframe's own back-to-patterns link visually
 *   - Brand-modal overlay (z-index 100 in modal.css) — gallery escape stays
 *     reachable even when the modal is open
 *
 * Pages with an in-app simulated header (player, editor) should set
 * body { padding-top: 40px } so their existing layout drops below.
 */
.back-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--color-background-primary);
  border-bottom: var(--border-width-thin) solid var(--color-highlight-primary);
  font-family: var(--font-family-primary);
  box-sizing: border-box;
}
.back-header .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-content-primary);
  text-decoration: none;
  font-size: var(--font-size-button-default);
  line-height: var(--line-height-button-default);
  font-weight: var(--font-weight-button-default);
  padding: 6px 8px;
  border-radius: var(--radius-15);
  transition: background var(--duration-fast) var(--easing-default);
}
.back-header .back-link:hover {
  background: var(--color-highlight-primary);
}
.back-header .back-link svg {
  flex-shrink: 0;
  display: block;
}