/* Universal auth indicator that lives inline inside each page's existing nav.
   Signed-out: small "Sign in" pill in Daymaker style.
   Signed-in : Clerk UserButton mounted into #user-button-mount (avatar circle).
   Body classes are toggled by /scripts/auth.js (the root or the vc/ variant).
   build-tag: git-deploy-probe-9f2e */

.dm-auth-indicator {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  vertical-align: middle;
}

/* Hide until session state is determined. Both auth.js variants set one of
   these two classes once Clerk reports back. */
.dm-auth-indicator { visibility: hidden; }
body.clerk-signed-in  .dm-auth-indicator,
body.clerk-signed-out .dm-auth-indicator { visibility: visible; }

/* Show only the relevant slot depending on session state. */
body.clerk-signed-out .dm-auth-indicator__user { display: none; }
body.clerk-signed-in  .dm-auth-indicator__signin { display: none; }

/* "Sign in" pill — white pill with black text and a black stamped-shadow
   drop. Sits straight (no rotation) so it lines up cleanly with nav text. */
.dm-auth-indicator__signin {
  appearance: none;
  display: inline-block;
  background: #FFFFFF;
  color: #0A0A0A;
  border: 1px solid #0A0A0A;
  border-radius: 999px;
  padding: 7px 16px;
  font: 600 13px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 3px 3px 0 #0A0A0A;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.dm-auth-indicator__signin:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #0A0A0A;
}
.dm-auth-indicator__signin:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #0A0A0A;
}

/* Animated GIF "wave" revealed through the label via background-clip: text.
   The pill itself stays white (background set above); only the text shows
   the GIF, matching the footer "Add your bakery" CTA. */
.dm-auth-indicator__signin .dm-wave-text {
  background-image: url("https://framerusercontent.com/images/byCMylKU6RQ8oaA7tX9IhqyXS4.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* A GIF can't be paused via CSS, so reduced-motion users get plain ink text. */
@media (prefers-reduced-motion: reduce) {
  .dm-auth-indicator__signin .dm-wave-text {
    background-image: none;
    -webkit-text-fill-color: #0A0A0A;
    color: #0A0A0A;
  }
}

/* Mount slot for Clerk's <UserButton/> — Clerk renders a 32px avatar circle. */
.dm-auth-indicator__user {
  display: inline-flex;
  align-items: center;
  min-width: 32px;
  min-height: 32px;
}

@media (max-width: 540px) {
  .dm-auth-indicator { gap: 8px; }
  .dm-auth-indicator__signin { padding: 7px 14px; font-size: 12px; }
}