/* auth-status.css — HUB-VENDORED AUTH STATUS cluster CHROME. Framework-neutral, shared cross-stack:
   pc / la / go vendor the SAME file from design-templates (templates/components/auth-status/css/auth-status.css).

   SCOPE: the shared cluster CHROME only — the pill/flyout/menu/mobile-FAB structure. It is the CSS twin of
   the shared js/auth-status.js behaviour. The BUILD-STAMP sub-styles are PER-STACK and live OUT of this file
   (see below), exactly as the build-stamp RENDER is per-stack in the JS (la server-renders; pc/go client-render
   a shim). Selector set here is byte-parity across stacks; the build-stamp classes are where they legitimately
   diverge, so they're not centralized.

   CHROME-INVARIANT (page-editor.md): every colour is a fixed --editor-* token, NEVER a --sem-*, brand, or dark token — the
   cluster renders identically regardless of the page's own light/dark theme. Each --editor-* carries a LITERAL
   FALLBACK (var(--editor-x, <lit>)) so the cluster is self-contained on LIVE pages where editor-chrome.css's
   :root isn't loaded, and defers to the shared token inside the editor/section chrome where it is. Never brand.

   PER-STACK, NOT HERE: the build-stamp sub-styles (`.auth-status-build`, `-build-*`). la's markup is
   server-rendered (`-build-label/-line/-prov/-detail`); pc/go client-render a different structure
   (`-build-head/-row/-row--sub/-sha`). Each stack co-locates its own build-stamp CSS with its build render. */

.auth-status-cluster {
  position: fixed;
  left: 16px;
  top: 60%;
  transform: translateY(-50%);
  /* Outermost "who's logged in" chrome — above every other fixed overlay (incl. the
     section-library canvas tooling), never buried under a page-builder layer. */
  z-index: 2147483647;
  /* TOP-LEVEL INTERACTIVITY (page-editor.md AUTH STATUS @ 45d280c): the auth-status cluster is an
     INDEPENDENT top-level admin layer — peer of / above the editor, max z-index — overlaying live +
     /sections + /edit alike, NOT page-editor chrome. So it asserts its OWN interactivity HERE, in its
     own stylesheet, rather than being added to editor-chrome.css's pointer-events:auto list (which
     would couple a top-level layer to the editor's internals). Needed because /edit sets
     body.has-page-editor-bar { pointer-events: none }; without this the cluster inherited none and its
     :hover flyout never opened. No-op on live pages (already interactive). */
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
}

.auth-status-toggle {
  display: none;
}

.auth-status-logout-form {
  margin: 0;
}

/* Icon-only circle at rest; hover/focus grows the label open to the right (no layout shift —
   each row's width is independent). */
.auth-status-item {
  display: inline-flex;
  align-items: center;
  height: var(--editor-control-height, 36px);
  border-radius: 9999px;
  border: 1px solid var(--editor-border, rgba(255, 255, 255, .18));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  cursor: default;
  overflow: hidden;
  font-family: inherit;
  padding: 0;
}

.auth-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--editor-control-height, 36px);
  height: var(--editor-control-height, 36px);
}

.auth-status-label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  transition: max-width 0.25s ease, opacity 0.2s ease, padding-right 0.25s ease;
}

.auth-status-item:hover .auth-status-label,
.auth-status-item:focus-within .auth-status-label,
.auth-status-item:focus .auth-status-label {
  max-width: 200px;
  opacity: 1;
  padding-right: 14px;
}

.auth-status-item--status {
  background: var(--editor-bar-bg, #111827);
  color: var(--editor-ink-muted, rgba(255, 255, 255, .78));
}

.auth-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--editor-success, #10b981);
  box-shadow: 0 0 0 3px rgba(var(--editor-success-rgb, 16, 185, 129), 0.25);
  flex-shrink: 0;
}

/* Logged-out: muted grey, no glow — neutral state, not a warning (never --editor-danger). */
.auth-status-dot--out {
  background: var(--editor-ink-muted, rgba(255, 255, 255, .78));
  box-shadow: none;
}

.auth-status-item--edit {
  background: var(--editor-accent, #2563eb);
  color: var(--editor-ink, #ffffff);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.auth-status-item--edit:hover {
  background: var(--editor-accent-strong, #1d4ed8);
}

.auth-status-item--edit:focus-visible {
  outline: 2px solid var(--editor-accent-soft, #93c5fd);
  outline-offset: 2px;
}

.auth-status-menu-wrapper {
  position: relative;
  display: inline-flex;
  border-radius: 9999px;
  cursor: pointer;
}

/* Flyout — a sibling of the (overflow:hidden) status pill so it escapes the clip. Opens to
   the right, vertically centred, matching the label-grow direction. */
.auth-status-menu {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
  padding: 6px;
  border-radius: 14px;
  background: var(--editor-bar-bg, #111827);
  border: 1px solid var(--editor-border, rgba(255, 255, 255, .18));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.auth-status-menu-wrapper:hover .auth-status-menu,
.auth-status-menu-wrapper:focus-within .auth-status-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* Non-interactive header — the "Logged in as {name}" text lives here only, not on the pill. */
.auth-status-menu-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--editor-control-height, 36px);
  padding: 0 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--editor-border, rgba(255, 255, 255, .18));
  color: var(--editor-ink-muted, rgba(255, 255, 255, .78));
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: default;
}

.auth-status-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--editor-control-height, 36px);
  padding: 0 12px;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--editor-ink-muted, rgba(255, 255, 255, .78));
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.auth-status-menu-item:hover,
.auth-status-menu-item:focus-visible {
  background: var(--editor-accent, #2563eb);
  color: var(--editor-ink, #ffffff);
  outline: none;
}

.auth-status-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Mobile: collapse to the toggle FAB; a tap reveals status + menu + Edit, all shown open
   (no hover on touch). The toggle never navigates — only the Edit link does. */
@media (max-width: 767px) {
  .auth-status-cluster {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column-reverse;
    gap: 8px;
  }

  .auth-status-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--editor-control-height, 36px);
    height: var(--editor-control-height, 36px);
    padding: 0;
    border-radius: 9999px;
    border: none;
    background: var(--editor-accent, #2563eb);
    color: var(--editor-ink, #ffffff);
    font-size: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    cursor: pointer;
  }

  .auth-status-item,
  .auth-status-menu-wrapper {
    display: none;
  }

  .auth-status-cluster--expanded .auth-status-item,
  .auth-status-cluster--expanded .auth-status-menu-wrapper {
    display: inline-flex;
  }

  .auth-status-cluster--expanded .auth-status-label {
    max-width: 200px;
    opacity: 1;
    padding-right: 14px;
  }

  .auth-status-menu-wrapper {
    flex-direction: column;
    gap: 8px;
  }

  .auth-status-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-status-item,
  .auth-status-label,
  .auth-status-menu { transition: none; }
}