/* src/ui/account-menu.css: PR-09g-2 account menu (replaces #584's flat .app-menu rules; avatar rules kept verbatim).
   Mockup: mockups/account-menu.html. Tokens: live theme.css (--bg --card --bd --mut --fg --err) with PR-09i names first. */
.app-name.app-avatar-btn { width: 44px; height: 44px; min-width: 44px; padding: 0; border: 0; background: transparent; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.acct-av { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--card); border: 1px solid var(--bd); color: var(--fg); font-weight: 700; flex: none; }
.acct-av-sm { width: 36px; height: 36px; font-size: 15px; }
.acct-av-md { width: 40px; height: 40px; font-size: 16px; }
.app-avatar-btn .acct-av-sm { border: 2px solid var(--accent, #1d9bf0); } /* mockup .avbtn: accent ring on the nav avatar */
.acct-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.am { --am-s1: var(--surface-1, var(--card)); --am-s2: var(--surface-2, color-mix(in srgb, var(--card) 92%, var(--fg)));
  --am-hover: color-mix(in srgb, var(--am-s2) 85%, var(--fg)); --am-danger: var(--danger-text, var(--err));
  color: var(--fg); font: inherit; border: 0; padding: 0; margin: 0; }
.am[hidden] { display: none; }
.am-list { display: flex; flex-direction: column; }
.am-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; margin: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--fg); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer; position: relative; justify-content: flex-start; }
.am-row:hover, .am-row:active { background: var(--am-hover); }
.am-row:focus-visible { outline: 2px solid var(--accent, #1d9bf0); outline-offset: -2px; }
.am-row[disabled] { opacity: .5; cursor: default; }
.am-ic { width: 18px; height: 18px; color: var(--mut); flex: none; }
.am-chev, .am-ext { width: 16px; height: 16px; color: var(--mut); flex: none; }
.am-lbl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.am-lbl > *, .menu-who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-val { color: var(--mut); font-size: 14px; font-weight: 400; white-space: nowrap; flex: none; }
.am-val.mono, .am-sub.mono, .menu-who .mono { font-family: ui-monospace, "Geist Mono", Menlo, Consolas, monospace; }
.am-danger, .am-danger .am-ic { color: var(--am-danger); }
.am-sub { color: var(--mut); font-size: 12px; font-weight: 400; }
.am-idcard { min-height: 56px; gap: 10px; }
.menu-who b { font-weight: 600; }
.menu-who .mono { color: var(--mut); font-size: 12px; }
.seg-swatch { display: block; width: 36px; height: 20px; border-radius: 4px; border: 1px solid var(--bd); flex: none; }
.seg-swatch-system { background: linear-gradient(90deg, #fff 50%, #000 50%); }
.seg-swatch-light { background: #fff; }
.seg-swatch-dark { background: #000; }
.seg-swatch-geocities { background: #000033; box-shadow: inset 0 0 0 3px #000080, inset 0 8px 0 #ffff00; }
.seg-hint { font-size: 12px; font-weight: 500; color: var(--mut); }
.am-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--mut); font-size: 12px; }
.am-mark { width: 28px; height: 28px; background: transparent url(/src/ui/brand/geocities-g-white.svg) center / 100% no-repeat; }
:root.light .am-mark { background-image: url(/src/ui/brand/geocities-g-black.svg); }
@media (prefers-color-scheme: light) { :root:not(.dark) .am-mark { background-image: url(/src/ui/brand/geocities-g-black.svg); } }
.am-foot b { color: var(--fg); font-size: 14px; }
.am-toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100; margin: 0; padding: 10px 16px;
  border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 600; }
.am-toast[hidden] { display: none; }

/* Desktop popover (>860px): 320px, anchored 8px under the avatar, right-aligned. No group cards; hairlines between groups. */
.am:not(.is-sheet) { position: absolute; inset: auto; right: 0; top: calc(100% + 8px); left: auto; z-index: 50; width: 320px; max-width: calc(100vw - 24px);
  padding: 8px; border-radius: 16px; background: var(--am-s1); border: 1px solid var(--bd); box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
.am:not(.is-sheet) .am-grab, .am:not(.is-sheet) .am-top, .am:not(.is-sheet) .am-m, .am:not(.is-sheet) .am-sub { display: none; }
.am:not(.is-sheet) .am-idcard { background: var(--am-s2); border-radius: 12px; margin-bottom: 4px; }
.am:not(.is-sheet) .am-group { display: flex; flex-direction: column; }
.am:not(.is-sheet) .am-sep { border: 0; height: 1px; background: var(--bd); margin: 4px 8px; }
.am:not(.is-sheet) .am-id + .am-group { margin-top: 0; }
.am:not(.is-sheet) .am-foot { align-items: flex-start; padding: 8px 12px 4px; }
.app-top > .am:not(.is-sheet) { right: max(12px, env(safe-area-inset-right)); top: calc(100% + 2px); }

/* Sheet (<=860px): modal <dialog> pinned to the bottom, grouped inset cards, 48px rows. */
.am.is-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 92dvh; overflow: auto; overscroll-behavior: contain;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: var(--am-s1); box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
.am.is-sheet::backdrop { background: rgba(0, 0, 0, .55); }
.am.is-sheet .am-d, .am.is-sheet .am-sep, .am.is-sheet .am-val.mono, .am.is-sheet .am-danger .am-ic { display: none; }
.am-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--bd-strong, #666c72); margin: 0 auto 8px; }
.am-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.am-title { margin: 0; font-size: 16px; font-weight: 700; }
.am-close { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--am-s2); color: var(--fg); display: grid; place-items: center; cursor: pointer; }
.am-x { width: 18px; height: 18px; }
.am.is-sheet .am-group { background: var(--am-s2); border-radius: 12px; overflow: hidden; }
.am.is-sheet .am-list { gap: 12px; } /* groups are separated by hidden <hr>s, so gap, not a sibling margin */
.am.is-sheet .am-row { min-height: 48px; padding: 0 16px; font-size: 16px; border-radius: 0; }
.am.is-sheet .am-row + .am-row::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--bd); }
.am.is-sheet .am-ic { width: 24px; height: 24px; padding: 3px; }
.am.is-sheet .am-chev, .am.is-sheet .am-ext { width: 18px; height: 18px; }
.am.is-sheet .am-idcard { min-height: 68px; gap: 12px; }
.am.is-sheet .am-idcard .acct-av-md { width: 44px; height: 44px; }
.am.is-sheet .menu-who b { font-size: 16px; }
.am.is-sheet .am-foot { margin-top: 12px; }
html.am-lock, html.am-lock body { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .am.is-sheet[open] { animation: am-up 320ms cubic-bezier(.2, .8, .2, 1); }
  .am:not(.is-sheet)[open] { animation: am-pop 120ms cubic-bezier(.2, .8, .2, 1); transform-origin: top right; }
}
@keyframes am-up { from { transform: translateY(24px); opacity: .6; } }
@keyframes am-pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }