/* ============================================================
   account-chip.css — the account entry in the shell header
   ------------------------------------------------------------
   Sits beside the language button and shares its pill geometry.
   States (data-state, set by js/account/header-chip.js):
     signed-out → person icon + "Sign in"
     guest      → dashed ring (not yet a permanent account)
     member     → initials in the brand disc (catch-light dot)
   Phones (same breakpoint as css/shell/shell-mobile.css): icon only.
   ============================================================ */

.shell-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 3px;
  padding-inline: 3px 12px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent-strong);
  font-family: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
html[dir="rtl"] .shell-account { font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Inter', system-ui, sans-serif; }

.shell-account:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 3px hsl(var(--shadow-color) / 0.08);
}
.shell-account:active { transform: scale(0.97); }
.shell-account:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.shell-account__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  flex: none;
}
.shell-account__icon { width: 15px; height: 15px; }
.shell-account__initials {
  display: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.shell-account__label { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }

/* Member with a name: brand disc + catch-light, like the logo mark */
.shell-account.has-initials .shell-account__avatar {
  background: var(--mark-disc);
  color: var(--on-accent);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--mark-ring);
}
.shell-account.has-initials .shell-account__avatar::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mark-catch);
}
.shell-account.has-initials .shell-account__icon { display: none; }
.shell-account.has-initials .shell-account__initials { display: block; }

/* Guest: dashed ring says "not saved for good yet" */
.shell-account[data-state="guest"] .shell-account__avatar {
  background: transparent;
  outline: 1.5px dashed var(--accent);
  outline-offset: -2px;
}

/* Active route */
body[data-active-route="account"] .shell-account {
  border-color: var(--accent);
  background: var(--accent-tint);
}

@media (max-width: 700px), (max-height: 560px) and (max-width: 1024px) {
  .shell-account { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .shell-account__label { display: none; }
  .shell-account__avatar { width: 26px; height: 26px; }
}