/* Shared styling for `_header_auth_menu.html` — the gateka-core connexion
 * button + signed-in avatar pill + dropdown.
 *
 * Sites include this once (e.g. via the shared assets URL) and theme it
 * with `--gk-*` custom properties on any ancestor (`:root` usually):
 *
 *   :root {
 *     --gk-accent: #4c78ff;          -- primary button background
 *     --gk-accent-hover: #3e66e0;    -- :hover tone
 *     --gk-accent-glow: rgba(76,120,255,.35);
 *     --gk-text: #0f172a;
 *     --gk-text-muted: #64748b;
 *     --gk-bg: #ffffff;
 *     --gk-bg-surface: #f1f5f9;
 *     --gk-border: #e2e8f0;
 *   }
 *
 * Any var left unset falls back to the defaults below so the button
 * still renders on a site that hasn't themed it yet. Identical DOM to
 * elen / stealth / artsiderz — single source of truth from now on.
 */

/* The signed-in trigger uses .gk-nav-btn (see _gk_nav.html for the
   shared right-cluster baseline rules). The avatar matches the 16px
   FontAwesome icon Y-baseline; the firstname rides on .gk-lang-hint
   so it sits at the same absolute-bottom position as lang's "EN".
   Pre-2026-05-04 this file shipped a filled-pill .header-auth--in
   block; folded into the gk-nav-btn baseline per ADR 0018 addendum #4.
*/
/* 22px avatar — big enough to read a face / pair of initials. Still sits
   inside the .gk-nav-btn pseudo-pill (36px tall) with the firstname hint
   below; the 6px gap between avatar and label keeps it breathing. The
   pre-2026-05-05 16px avatar matched the 16px FontAwesome icons of the
   sibling lang/theme buttons but rendered as an unreadable speck. */
.header-auth-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent, #3b82f6); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .2px;
  overflow: hidden; flex: none;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);  /* hairline so light avatars don't dissolve into the header */
}
.header-auth-avatar--img { background: transparent; }
.header-auth-avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The signed-in trigger needs a touch more vertical room than the
   16px-icon siblings — keep it visually balanced without enlarging
   every nav button. */
.header-auth-trigger { padding-top: 5px; padding-bottom: 5px; }
/* Firstname uses .gk-lang-hint baseline (absolute, bottom:1px, 8.5px)
   so it lands exactly where lang's "EN" lands. Width override caps
   long firstnames without breaking the icon-only Y-baseline of
   adjacent buttons. */
.header-auth-name {
  max-width: 72px; overflow: hidden; text-overflow: ellipsis;
  font-size: 9.5px; letter-spacing: .15px;
}

.header-auth-wrap { position: relative; }

/* Dropdown menu — themed via the PAGE's design tokens (--surface-solid,
   --border, --text, --accent…) so it inherits the host product's
   palette + dark/light theme. Falls back to the older --gk-* tokens
   for back-compat on products that haven't migrated to the page-token
   chain. */
.header-auth-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 240px; padding: 8px;
  background: var(--surface-solid, var(--bg2, var(--gk-bg, #ffffff)));
  color: var(--text, var(--gk-text, #0f172a));
  border: 1px solid var(--border, var(--gk-border, rgba(0,0,0,.08)));
  border-radius: var(--radius, 14px);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s, visibility .15s, transform .15s; z-index: 1050;
}
.header-auth-wrap.is-open .header-auth-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.header-auth-menu-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border, var(--gk-border, rgba(0,0,0,.08)));
  margin-bottom: 4px;
}
/* Text comes first (left), avatar trails on the right via the order
   override; keeps the source-order accessible (read-direction = name
   first) while putting the avatar in its visual home. */
.header-auth-menu-head-text { min-width: 0; flex: 1; order: 0; }
/* Avatar — 28px circle on the RIGHT, with an accent-tinted ring and
   a soft glow that intensifies on hover. Same circular shape as the
   16px trigger avatar; just sized for the dropdown's identity moment.
   The ::before overlay is what carries the gradient ring + glow so
   the inner image stays crisp. */
.header-auth-menu-avatar {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent, var(--gk-accent, #3b82f6)); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .2px;
  overflow: visible; flex: none; line-height: 1;
  order: 1;  /* push avatar to the right of the flex row */
  box-shadow:
    0 0 0 2px var(--surface-solid, var(--bg2, #fff)),
    0 0 0 3px color-mix(in srgb, var(--accent, #3b82f6) 55%, transparent),
    0 4px 12px color-mix(in srgb, var(--accent, #3b82f6) 28%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.header-auth-menu-avatar:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 0 2px var(--surface-solid, var(--bg2, #fff)),
    0 0 0 3px var(--accent, #3b82f6),
    0 6px 18px color-mix(in srgb, var(--accent, #3b82f6) 45%, transparent);
}
.header-auth-menu-avatar--img { background: transparent; }
/* The image needs its own overflow:hidden + radius so the photo
   crops cleanly inside the ring (parent has overflow:visible to let
   the glow escape). */
.header-auth-menu-avatar--img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 50%;
}
.header-auth-menu-name {
  font-size: 1rem; font-weight: 600;
  color: var(--text, var(--gk-text, #0f172a));
  line-height: 1.2;
}
.header-auth-menu-email {
  font-size: 0.875rem; margin-top: 2px;
  /* anywhere is smarter than break-all: prefers natural break points
     (the @ in an email) and only falls back to mid-word breaks when
     the string genuinely can't fit. break-all was splitting
     "guydegnol@gmail.com" as "...co" / "m". */
  overflow-wrap: anywhere;
  color: var(--text2, var(--gk-text-muted, #64748b));
  line-height: 1.3;
}
.header-auth-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px; border-radius: var(--radius-sm, 8px);
  /* font-weight 500 (medium) matches body running text rather than
     the heavier 600 used for nav buttons (Guillaume 2026-05-04 — the
     menu rows looked too bold against page paragraphs). */
  font-size: 1rem; font-weight: 500;
  color: var(--text, var(--gk-text, #0f172a));
  text-decoration: none; transition: background .15s, color .15s;
}
.header-auth-menu-item:hover {
  background: var(--surface-hover, var(--bg3, var(--gk-bg-surface, rgba(0,0,0,.05))));
  color: var(--accent, var(--gk-accent, #3b82f6));
}
.header-auth-menu-item--danger { color: var(--text2, #64748b); }
.header-auth-menu-item--danger:hover {
  background: rgba(239,68,68,.08);
  color: #dc2626;
}

@media (max-width: 768px) {
  .header-auth-name { display: none; }
}