/* ─────────────────────────────────────────────────────────────
   Hello Radio — account menu
   One job: skin the person at the right of the app-bar and the
   mega-menu it opens. Tokens only; no decorative borders (surface
   fills + shadow do the work). AnimatePresence in vanilla classes,
   same family as .toolpop / .admenu-pop.
   ───────────────────────────────────────────────────────────── */

.acct { margin-left: auto; position: relative; }

/* ── trigger: avatar + name + caret, pill-shaped hover ── */
.acct-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: none; border-radius: var(--radius-full);
  padding: 3px 10px 3px 3px; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-lg); color: var(--text);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.acct-trigger:hover { background: var(--control-bg); }
.acct-trigger:active { transform: scale(0.97); }
.acct-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--avatar-bg); color: var(--prim-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.acct-name { font-weight: 500; white-space: nowrap; }

/* ── the mega-menu ── */
.acct-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 150;
  width: min(620px, calc(100vw - 32px)); padding: 20px;
  background: var(--surface); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.1);
  transform-origin: top right;
  opacity: 0; transform: translateY(-6px) scale(0.96); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
}
.acct-menu.show { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .acct-menu { transition: none !important; }
}

/* ── header ── */
.acct-head { display: flex; align-items: center; gap: 12px; }
.acct-head-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--avatar-bg); color: var(--prim-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
.acct-head-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acct-head-name { font-size: 15px; font-weight: 600; }
.acct-head-email {
  font-size: 13px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-plan {
  flex-shrink: 0; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
}
.acct-plan.is-pro { background: var(--focus-ring-soft); color: var(--accent); }
.acct-plan.is-free { background: var(--control-bg); color: var(--text-secondary); }

.acct-div { height: 1px; background: var(--divider); margin: 16px 0; }

/* ── the grid of places to go ── */
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.acct-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border-radius: 10px; border: none; background: transparent;
  text-align: left; text-decoration: none; cursor: pointer;
  font-family: var(--font-body); color: var(--text);
  transition: background var(--dur-fast) var(--ease-out);
}
.acct-item:hover { background: var(--control-bg); }
.acct-item.current { background: var(--focus-ring-soft); }
.acct-item-ic {
  flex-shrink: 0; margin-top: 1px; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.acct-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-item-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; line-height: 1.2;
}
.acct-item-pro {
  padding: 1px 7px; border-radius: 999px;
  background: var(--focus-ring-soft); color: var(--accent);
  font-size: 10px; font-weight: 600; line-height: 1.5;
}
.acct-item-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }

/* ── full-width rows (dark mode, footer) ── */
.acct-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 10px;
}
.acct-row-left { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }
.acct-dark-glyph { display: inline-flex; color: var(--text-secondary); }
.acct-row-label { color: var(--text); }

.acct-foot-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: 10px; border: none; background: transparent;
  text-align: left; text-decoration: none; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text);
  transition: background var(--dur-fast) var(--ease-out);
}
.acct-foot-row:hover { background: var(--control-bg); }
.acct-foot-ic { flex-shrink: 0; display: inline-flex; color: var(--text-secondary); }

/* ── shared switch (reused by the settings pane; kept generic) ──
   State keys off aria-checked, the ARIA truth every consumer sets;
   the knob is the switch's single child span whatever its class. ── */
.hr-switch {
  position: relative; flex-shrink: 0;
  width: 36px; height: 20px; padding: 0; border: none; border-radius: 999px;
  background: var(--control-bg); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.hr-switch.on,
.hr-switch[aria-checked="true"] { background: var(--accent); }
.hr-switch > span {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--prim-white); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform var(--dur-base) var(--ease-spring);
}
.hr-switch.on > span,
.hr-switch[aria-checked="true"] > span { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) {
  .hr-switch, .hr-switch > span { transition: none !important; }
}

/* ── narrow: single column, full-bleed menu ── */
@media (max-width: 560px) {
  .acct-grid { grid-template-columns: 1fr; }
  .acct-name { display: none; }
}