/* ==========================================================================
   OgbonMath — Account Menu (Top-right dropdown)
   --------------------------------------------------------------------------
   The account surface: Settings, Theme, Data, Sign in/out. Lives in the
   top-right corner of the topbar where users reflexively look.
   ========================================================================== */

/* ==========================================================================
   Trigger — avatar / initials button in the topbar
   ==========================================================================
*/
.account-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--bdr);
  border-radius: var(--radius-full);
  background: var(--bg2);
  color: var(--tx1);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: var(--sp-2);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  position: relative;
}

.account-trigger:hover {
  border-color: var(--ac);
  background: var(--ac-soft);
}

.account-trigger:active { transform: scale(var(--active-scale)); }

.account-trigger[aria-expanded="true"] {
  border-color: var(--ac);
  background: var(--ac-soft);
}

/* Signed-in variant — terracotta fill, white initial */
.account-trigger.signed-in {
  background: var(--ac);
  border-color: var(--ac);
  color: var(--ac-tx);
}

.account-trigger.signed-in:hover {
  background: var(--ac2);
  border-color: var(--ac2);
}

/* Not-signed-in: neutral silhouette glyph */
.account-trigger-glyph {
  font-size: 18px;
  line-height: 1;
}

/* ==========================================================================
   Menu backdrop + panel
   ==========================================================================
*/
.account-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-dropdown);
  background: transparent; /* click-catcher, no visual */
}

.account-menu {
  position: fixed;
  top: 60px;  /* placed dynamically by JS */
  right: 16px;
  z-index: calc(var(--z-dropdown) + 1);
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 260px;
  max-width: 320px;
  padding: var(--sp-1);
  font-family: var(--font-sans);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  animation: account-menu-in var(--dur-fast) var(--ease-calm) forwards;
  overflow: hidden;
}

.account-menu.closing {
  animation: account-menu-out var(--dur-fast) var(--ease-calm) forwards;
}

@keyframes account-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes account-menu-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-2px) scale(0.99); }
}

/* ==========================================================================
   Header — signed-in identity or "Not signed in"
   ==========================================================================
*/
.account-menu-header {
  padding: var(--sp-3) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--bdr);
  margin-bottom: 4px;
}

.account-menu-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--tx);
  line-height: 1.3;
  word-break: break-word;
}

.account-menu-sub {
  font-size: var(--fs-xs);
  color: var(--tx2);
  line-height: 1.3;
  margin-top: 2px;
  word-break: break-all;
}

.account-menu-signin-btn {
  display: block;
  width: 100%;
  margin-top: var(--sp-2);
  padding: 8px 12px;
  background: var(--ac);
  color: var(--ac-tx);
  border: 1px solid var(--ac);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.account-menu-signin-btn:hover { background: var(--ac2); }

/* ==========================================================================
   Menu items
   ==========================================================================
*/
.account-menu-section {
  padding: 2px 0;
}

.account-menu-section + .account-menu-section {
  border-top: 1px solid var(--bdr);
  padding-top: 4px;
  margin-top: 4px;
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--tx);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: var(--hover-bg);
  outline: none;
}

.account-menu-item-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tx2);
  font-size: 14px;
  flex-shrink: 0;
}

.account-menu-item:hover .account-menu-item-icon {
  color: var(--ac);
}

.account-menu-item-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-item-hint {
  color: var(--tx3);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

/* Destructive variant (e.g. Sign out) */
.account-menu-item-danger:hover {
  background: var(--rd-bg);
  color: var(--rd);
}

.account-menu-item-danger:hover .account-menu-item-icon {
  color: var(--rd);
}

/* ==========================================================================
   Responsive — mobile widens to full-width drawer from top
   ==========================================================================
*/
@media (max-width: 480px) {
  .account-menu {
    top: 54px !important;
    right: 8px !important;
    left: 8px !important;
    min-width: 0;
    max-width: none;
  }
}