/* Adapted from Figma 692:784 for the site's header; no authentication logic. */
.account-entry { box-sizing: border-box; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 15.3px; width: 160px; min-width: 0; min-height: 44px; padding: 8px 13px; border: 1.7px solid rgb(255 255 255 / 10%); border-radius: 15px; background-image: url("./assets/account-ellipses.svg"), url("./assets/account-radial-fill.svg"); background-position: right 11.6215px center, center; background-size: 94.7785px 41px, 100% 100%; background-repeat: no-repeat; background-origin: border-box; background-clip: padding-box, border-box; color: #fff; font-family: Onest, sans-serif; font-size: 17px; font-weight: 500; line-height: 1.235294118; transition: border-color 160ms var(--ease-out); }
/* 1.7px stroke + 13px padding + 22px icon + 15.3px gap = 52px text origin. */
/* Original 94.7785 × 41 decoration: 307 - 200.6 - 94.7785 = 11.6215px right inset.
   Center it vertically in the compact 44px control; clip the artwork inside the stroke. */
.account-icon { display: block; flex: 0 0 22px; width: 22px; height: 24px; }
.account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-entry:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) { .account-entry:hover { border-color: rgb(255 255 255 / 16%); } }
.account-entry:active { border-color: rgb(255 255 255 / 20%); }
@media (width < 960px) { .site-header .account-entry { width: clamp(112px, 22vw, 160px); } }
@media (width < 380px) { .site-header:has(.account-entry) .brand > span { display: none; } }
@media (prefers-reduced-motion: reduce) { .account-entry { transition: none; } }
@media (forced-colors: active) { .account-entry { border-color: ButtonText; background: none; color: LinkText; } .account-icon path { fill: LinkText; } }