/* ================================================================
   GalSol — Universal Account Dock + Menu  |  account-menu.css

   ONE account control for every page. Before this, five different ones
   existed (.user-row in the dashboard sidebar, .mse-account-dock,
   .gsfb-account-dock, .gal-account, .rail-profile), each with its own
   look and its own behaviour. The mini-site editor's dock is the agreed
   design, so this is that dock — generalised.

   Two rules make it portable:
     1. It never reads a host page's CSS variables. Pages disagree on
        what --text / --cyan / --glass-border mean (some do not define
        them at all), which is exactly why the five copies drifted. All
        colour lives in the --am-* tokens below.
     2. The menu is position:fixed and placed by JS, so it escapes the
        overflow:hidden / transformed sidebars it opens out of.

   Load AFTER the page's own CSS and BEFORE theme-light.css.
================================================================ */

:root {
  --am-text:        #e8eef7;
  --am-text-2:      #9fb0c6;
  --am-text-3:      #6c7f96;
  --am-cyan:        #00d4ff;
  --am-violet:      #a78bfa;
  --am-surface:     #12161f;
  --am-surface-2:   rgba(255, 255, 255, .055);
  --am-border:      rgba(255, 255, 255, .10);
  --am-border-2:    rgba(255, 255, 255, .16);
  --am-hover:       rgba(255, 255, 255, .06);
  --am-danger:      #f87171;
  --am-shadow:      0 18px 54px rgba(0, 0, 0, .55);
}

:root[data-theme="light"] {
  --am-text:        #0f172a;
  --am-text-2:      #475569;
  --am-text-3:      #64748b;
  --am-cyan:        #0284a8;
  --am-violet:      #6d3fd4;
  --am-surface:     #ffffff;
  --am-surface-2:   rgba(15, 23, 42, .045);
  --am-border:      rgba(15, 23, 42, .11);
  --am-border-2:    rgba(15, 23, 42, .18);
  --am-hover:       rgba(15, 23, 42, .055);
  --am-danger:      #dc2626;
  --am-shadow:      0 18px 54px rgba(15, 23, 42, .18);
}


/* ── The dock ─────────────────────────────────────────────────── */

.acct-dock {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  /* Transparent at rest, so the dock reads as part of the panel. A faint
     white wash here drew a visible grey rectangle with hard corners against
     the sidebar — the hover state is the only thing that should have a fill,
     and it has its own rounded one below. */
  background: transparent;
  border-top: 1px solid var(--am-border);
  cursor: pointer;
  transition: background .2s;
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  text-align: left;
  border-left: 0; border-right: 0; border-bottom: 0;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}


/* The hover wash is an inset pseudo-element, not a background on the dock
   itself. The dock is full-bleed with a square top border, so a background
   there gave the highlight hard corners against the sidebar edges. */
.acct-dock::before {
  content: '';
  position: absolute;
  inset: 6px 8px;
  border-radius: 12px;
  background: transparent;
  transition: background .18s ease;
  pointer-events: none;
}

.acct-dock:hover::before,
.acct-dock[aria-expanded="true"]::before { background: var(--am-hover); }

/* Everything sits above the wash. The arrow is already absolute — it only
   needs the z-index, not a position that would undo its placement. */
.acct-avatar, .acct-info { position: relative; z-index: 1; }
.acct-arrow { z-index: 1; }

.acct-dock:focus-visible {
  outline: 2px solid var(--am-cyan);
  outline-offset: -2px;
}

.acct-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0, 212, 255, .1);
  border: 1px solid rgba(0, 212, 255, .2);
  display: flex; align-items: center; justify-content: center;
  color: var(--am-cyan);
  flex-shrink: 0;
  overflow: hidden;
  font-size: 14px; font-weight: 700;
  line-height: 1;
}

.acct-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-avatar svg { width: 18px; height: 18px; }

/* The gutter the arrow lives in. Reserved here rather than by the arrow
   itself so the arrow can be taken out of the flow — see below. */
.acct-info { flex: 1; min-width: 0; padding-right: 16px; }

.acct-name-row { display: flex; align-items: center; gap: 6px; }

.acct-name {
  font-size: 14px; font-weight: 700;
  color: var(--am-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Pro only. A "FREE" badge is noise — the absence of the pill says it. */
/* Tier chip. Both tiers use the same glass treatment — a tint, a matching
   border, no fill — and are told apart by HUE, matching the pricing page:
   Pro is the cyan (#0ECDFE) that card carries, Pro Max the violet
   (#A689F9). A gradient fill was tried here and read as a solid blob at
   9px; flat glass keeps the chip quiet next to the account name. */
.acct-pro {
  font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: #0ECDFE;
  background: rgba(14, 205, 254, .13);
  border: 1px solid rgba(14, 205, 254, .34);
  padding: 2px 6px; border-radius: 99px; line-height: 1.4;
  flex-shrink: 0;
}

.acct-pro.is-max {
  color: #A689F9;
  background: rgba(166, 137, 249, .14);
  border-color: rgba(166, 137, 249, .36);
}

.acct-tag { font-size: 11px; color: var(--am-text-3); margin-top: 2px; }

/* Absolute, not a flex child. As a flex child it reserved its 16px plus the
   gap even while invisible, and in a 235px sidebar that was enough to clip
   "Alex Simon" down to "Alex Si…". Out of the flow it costs nothing at rest
   and still slides in over its own gutter on hover. */
.acct-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 16px; height: 16px;
  color: var(--am-text-3);
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity .2s, transform .2s, color .2s;
  pointer-events: none;
}

.acct-dock:hover .acct-arrow,
.acct-dock[aria-expanded="true"] .acct-arrow {
  opacity: 1; transform: translateY(-50%); color: var(--am-text);
}

/* Collapsed rail: avatar only, centred. Each host toggles .is-compact
   from whatever collapsed class it already uses. */
.acct-dock.is-compact {
  justify-content: center;
  padding: 14px 0;
  gap: 0;
}
.acct-dock.is-compact .acct-info,
.acct-dock.is-compact .acct-arrow { display: none; }
.acct-dock.is-compact .acct-info { padding-right: 0; }


/* ── The menu ─────────────────────────────────────────────────── */

.acct-menu {
  position: fixed;
  z-index: 100000;
  min-width: 268px;
  max-width: 320px;
  padding: 6px;
  border-radius: 14px;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  box-shadow: var(--am-shadow);
  font-family: inherit;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transform-origin: bottom left;
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}

.acct-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.acct-menu[hidden] { display: none; }

.acct-menu-email {
  padding: 9px 12px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--am-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.acct-sep { height: 1px; background: var(--am-border); margin: 5px 8px; }

.acct-mi {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 9px 12px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--am-text);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  text-align: left; text-decoration: none;
  cursor: pointer;
  transition: background .13s, color .13s;
  box-sizing: border-box;
}

.acct-mi:hover, .acct-mi:focus-visible { background: var(--am-hover); outline: none; }
.acct-mi > svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--am-text-2); }
.acct-mi:hover > svg { color: var(--am-text); }
.acct-mi-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Trailing marks: ⌘ hints, the ↗ on external links, the ▸ on a submenu. */
.acct-mi-hint { font-size: 11.5px; color: var(--am-text-3); flex-shrink: 0; }
.acct-mi-ext, .acct-mi-caret { width: 14px; height: 14px; color: var(--am-text-3); flex-shrink: 0; }

/* Same key-badge look as the Keyboard Shortcuts dialog itself (ksh-kbd in
   keyboard-shortcuts.js), so the "Ctrl /" hint next to that one menu row
   reads as the same kind of thing it opens, not a plain text label. */
.acct-mi-kbd-group { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.acct-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--am-surface-2); border: 1px solid var(--am-border-2); color: var(--am-text-2); font-family: inherit; font-size: 11px; font-weight: 600; }
.acct-kbd-plus { color: var(--am-text-3); font-size: 10px; }

.acct-mi.danger { color: var(--am-danger); }
.acct-mi.danger > svg { color: var(--am-danger); }
.acct-mi.danger:hover { background: rgba(248, 113, 113, .10); }

/* "Send Feedback" has no page yet. Shown so the plan is visible, but it
   cannot be clicked — a menu item that goes nowhere is worse than one
   that says it is not ready. */
.acct-mi[disabled] { opacity: .45; cursor: not-allowed; }
.acct-mi[disabled]:hover { background: transparent; }
.acct-mi[disabled]:hover > svg { color: var(--am-text-2); }

.acct-soon {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--am-text-3);
  background: var(--am-surface-2);
  border: 1px solid var(--am-border);
  padding: 2px 6px; border-radius: 99px; line-height: 1.4;
  flex-shrink: 0;
}

/* ── Submenu ("Learn more") ───────────────────────────────────── */

.acct-sub {
  position: fixed;
  z-index: 100001;
  min-width: 244px;
  padding: 6px;
  border-radius: 14px;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  box-shadow: var(--am-shadow);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}

.acct-sub.open { opacity: 1; transform: none; pointer-events: auto; }
.acct-sub[hidden] { display: none; }

.acct-mi.has-sub[aria-expanded="true"] { background: var(--am-hover); }

@media (prefers-reduced-motion: reduce) {
  .acct-menu, .acct-sub, .acct-arrow, .acct-dock { transition: none; }
}


/* ── Confirm dialog (sign out) ────────────────────────────────── */

.acct-confirm-back {
  position: fixed; inset: 0; z-index: 100002;
  background: rgba(3, 7, 14, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity .18s ease;
}
:root[data-theme="light"] .acct-confirm-back { background: rgba(15, 23, 42, .38); }
.acct-confirm-back.open { opacity: 1; }

.acct-confirm {
  width: 100%; max-width: 400px;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--am-shadow);
  transform: translateY(8px) scale(.98);
  transition: transform .18s ease;
}
.acct-confirm-back.open .acct-confirm { transform: none; }

.acct-confirm-title { font-size: 16.5px; font-weight: 700; color: var(--am-text); margin: 0 0 7px; }
.acct-confirm-msg { font-size: 13.5px; line-height: 1.55; color: var(--am-text-2); margin: 0 0 20px; }
.acct-confirm-row { display: flex; justify-content: flex-end; gap: 9px; }

.acct-btn {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--am-border-2);
  background: transparent; color: var(--am-text);
  transition: background .14s, border-color .14s;
}
.acct-btn:hover { background: var(--am-hover); }
.acct-btn.primary {
  border-color: transparent;
  background: var(--am-danger);
  color: #fff;
}
.acct-btn.primary:hover { filter: brightness(1.08); background: var(--am-danger); }