/* AccountMenu — avatar trigger + dropdown menu.
 *
 * Every colour, type size, spacing, radius, shadow and motion value comes
 * from the custom properties in tokens.css; no literals here. styles.css
 * already paints [hidden] and the :focus-visible ring. */

.account-menu {
  position: relative;
  display: inline-flex;
}

/* Hidden entirely in local mode (auth mode "none"). */
.account-menu[hidden] { display: none; }

/* Avatar trigger: circular, shows the user's initials. */
.am-trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--panel-border-strong);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.am-trigger:hover { border-color: var(--accent); }
.am-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-tint);
}

/* Dropdown panel. */
.am-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 220px;
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  z-index: 30;
}

.am-menu[hidden] { display: none; }

.am-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-1);
  min-width: 0;
}

.am-name {
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.am-email {
  color: var(--muted);
  font-size: var(--fs-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The §10.1 role tag: "Owner" (admin) or "Viewer". Small caps-style label,
   tokens only, same weight as the email line. */
.am-role {
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.am-role[hidden] { display: none; }

/* Menu items: two links and the Sign out button share one look. */
.am-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
}

.am-menu a.am-item:hover,
.am-menu a.am-item:focus-visible {
  background: var(--panel-2);
  color: var(--ink);
  text-decoration: none;
}

.am-signout:hover,
.am-signout:focus-visible {
  background: var(--panel-2);
  color: var(--neg);
}