/* style — the profile picture and the way into Settings.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---- Profile picture, and the way into Settings -----------------------
   The round chip on the far right of the header. It answers "who is this
   panel signed in as" at a glance, and it is also the settings button —
   there is no cog. Everything in that drawer is yours (your sign-in, your
   keys, your picture, how the panel updates), so it belongs under your face.

   Signed in with no picture set falls back to the person's initials rather
   than a silhouette, so a signed-in user always looks signed in. Signed out
   it is a silhouette, and still here: the sign-in form is behind this chip,
   so hiding it would lock the person out of the panel entirely. */
#hdr-avatar {
  width: 22px; height: 22px; flex: none; margin-left: 2px; padding: 0;
  border-radius: 50%; overflow: hidden; cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text-dim); font-family: inherit; font-size: 8.5px; font-weight: 800;
  letter-spacing: .3px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
#hdr-avatar:hover { border-color: var(--accent); color: var(--text); }
#hdr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Signed out: a dashed edge and a dimmer silhouette, so it reads as an empty
   slot waiting for you rather than as somebody's picture failing to load. */
#hdr-avatar.out { border-style: dashed; border-color: var(--border-dash); color: var(--text-faint); }
#hdr-avatar.out:hover { border-style: solid; border-color: var(--accent); color: var(--text); }
#hdr-avatar .av-out { display: block; }

/* SIGNED OUT, IT SAYS SO IN WORDS.

   A 22px silhouette in a dashed circle is an icon you have to already know
   the meaning of. Signed out, the one thing the corner has to communicate is
   "sign in here", so it stops being a circle and becomes a pill with the
   words in it. Signed in it goes back to being a picture — there is nothing
   to say then, and a labelled button would just be noise in the header.

   The width is not animated. This changes at most twice a session, and a
   header that reflows on a network reply reads as a glitch. */
#hdr-avatar.out {
  width: auto; height: 22px; border-radius: 3px; padding: 0 8px 0 6px; gap: 5px;
  overflow: visible;
}
#hdr-avatar .av-label { display: none; }
#hdr-avatar.out .av-label {
  display: inline; font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; white-space: nowrap;
}
/* Signed out is the one state where this button is the point of the screen,
   so it carries the accent rather than waiting to be hovered. */
#hdr-avatar.out { border-style: solid; border-color: var(--accent); color: var(--accent); }
#hdr-avatar.out:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* The matching control in Settings, where a user replaces their own. */
#avatar-box {
  display: flex; gap: 11px; align-items: flex-start;
  margin-top: 12px; padding: 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
#avatar-prev {
  width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 14px; font-weight: 800; letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center;
}
#avatar-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
#avatar-box.busy { opacity: .5; pointer-events: none; }
.avatar-text { min-width: 0; flex: 1; }
.avatar-name { font-size: 11.5px; font-weight: 700; color: var(--text); }