/* nx-account.css: styles of the one account control (kits/account/nx-account.js). Square kit button (5px, hairline, no pill
   and no circle), elevated menu card (5px) with 4px items and the hover background of the Nexus Foundry kit. Colours come
   from whichever token set the host has: the estate header's --h-* tokens, the theme's --nx-* tokens, or system colours.
   No colour literal; corners come from --h-r / --h-r-chip with the kit's 5px and 4px as fallback. Both themes, LTR and RTL. */
.nxa { --nxa-text: var(--h-text, var(--nx-text-primary, CanvasText)); --nxa-text-2: var(--h-text-2, var(--nx-text-secondary, CanvasText)); --nxa-muted: var(--h-muted, var(--nx-text-muted, GrayText)); --nxa-line: var(--h-line, var(--nx-border-hairline, GrayText)); --nxa-line-strong: var(--h-line-strong, var(--nx-border-hairline-strong, GrayText)); --nxa-bg: var(--h-canvas, var(--nx-bg-elevated, Canvas)); --nxa-hover: var(--h-hover, var(--nx-bg-hover, Canvas)); --nxa-accent: var(--h-accent, var(--nx-accent, Highlight)); --nxa-shadow: var(--h-shadow, var(--nx-shadow, 0 12px 32px -12px color-mix(in srgb, CanvasText 45%, transparent))); --nxa-r: var(--h-r, 5px); --nxa-ri: var(--h-r-chip, 4px); --nxa-font: var(--h-sans, var(--nx-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif)); position: relative; display: inline-flex; flex: none; font-family: var(--nxa-font); font-size: 13px; line-height: 1.2; text-align: start; }
nx-account { display: inline-flex; flex: none; min-inline-size: 36px; min-block-size: 36px; align-items: center; }
nx-account > a { color: inherit; font-size: 13px; text-decoration: none; padding: 0 10px; }
.nxa *, .nxa *::before, .nxa *::after { box-sizing: border-box; }
.nxa .nxa__btn { display: inline-flex; align-items: center; gap: 8px; block-size: 36px; min-inline-size: 36px; max-inline-size: 220px; margin: 0; padding-block: 0; padding-inline: 10px; border: 1px solid var(--nxa-line-strong); border-radius: var(--nxa-r); background: transparent; color: var(--nxa-text-2); font: 500 13px/1 var(--nxa-font); letter-spacing: normal; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.nxa .nxa__btn:hover, .nxa[data-open] .nxa__btn { background: var(--nxa-hover); color: var(--nxa-text); border-color: var(--nxa-line-strong); }
.nxa .nxa__btn:focus-visible { outline: 2px solid var(--nxa-accent); outline-offset: 2px; }
.nxa .nxa__i { inline-size: 16px; block-size: 16px; flex: none; }
.nxa .nxa__chev { inline-size: 14px; block-size: 14px; color: var(--nxa-muted); transition: transform 0.15s ease; }
.nxa[data-open] .nxa__chev { transform: rotate(180deg); }
.nxa .nxa__lbl { overflow: hidden; text-overflow: ellipsis; }
.nxa .nxa__av { inline-size: 24px; block-size: 24px; flex: none; border-radius: 4px; object-fit: cover; background: var(--nxa-hover); }
.nxa .nxa__av--i { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--nxa-line-strong); color: var(--nxa-text); font: 600 12px/1 var(--nxa-font); }
.nxa .nxa__av--l { inline-size: 36px; block-size: 36px; font-size: 15px; }
.nxa .nxa__menu { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); z-index: 1400; inline-size: min(18rem, calc(100vw - 16px)); margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--nxa-line-strong); border-radius: var(--nxa-r); background: var(--nxa-bg); color: var(--nxa-text); box-shadow: var(--nxa-shadow); }
.nxa .nxa__menu[hidden] { display: none; }
.nxa .nxa__head, .nxa .nxa__who { display: flex; padding: 10px 12px; border-block-end: 1px solid var(--nxa-line); }
.nxa .nxa__head { flex-direction: column; gap: 4px; }
.nxa .nxa__who { align-items: center; gap: 10px; }
.nxa .nxa__eye { color: var(--nxa-muted); font: 500 10.5px/1 var(--h-mono, var(--nx-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)); letter-spacing: 0.08em; text-transform: uppercase; }
.nxa .nxa__ttl, .nxa .nxa__nm { color: var(--nxa-text); font: 500 13.5px/1.3 var(--nxa-font); overflow: hidden; text-overflow: ellipsis; }
.nxa .nxa__sep { block-size: 1px; margin: 4px 0; background: var(--nxa-line); }
.nxa .nxa__menu > .nxa__item:first-of-type { margin-block-start: 6px; }
.nxa .nxa__item { display: flex; align-items: center; gap: 10px; min-block-size: 36px; margin: 2px 6px; padding: 8px 10px; border-radius: var(--nxa-ri); color: var(--nxa-text-2); font: 500 13px/1.2 var(--nxa-font); text-decoration: none; cursor: pointer; }
.nxa .nxa__menu > .nxa__item:last-child { margin-block-end: 6px; }
.nxa .nxa__item .nxa__i { color: var(--nxa-muted); }
.nxa .nxa__item:hover, .nxa .nxa__item:focus-visible { background: var(--nxa-hover); color: var(--nxa-text); outline: none; }
.nxa .nxa__item:focus-visible { box-shadow: inset 0 0 0 2px var(--nxa-accent); }
.nxa .nxa__item:hover .nxa__i, .nxa .nxa__item:focus-visible .nxa__i { color: var(--nxa-text); }
.nxa .nxa__i--flip:dir(rtl) { transform: scaleX(-1); }
@media (max-width: 719px) {
  .nxa .nxa__btn { padding-inline: 9px; gap: 6px; }
  .nxa .nxa__btn .nxa__lbl { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nxa .nxa__chev { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nxa .nxa__btn, .nxa .nxa__chev { transition: none; } }