/* You: the round face, your row at the foot of the side nav and the Profile
   page (profile.js), after YourCA's Avatar and Settings, Profile. Tokens only.
   YourFire's own file, not shared with YourHyd. */

.face {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-pill);
  display: grid; place-items: center; object-fit: cover;
  background: var(--accent-2); color: var(--accent-ink);
  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: var(--track-open); line-height: var(--lh-solid);
}
.face.sm { width: 28px; height: 28px; font-size: var(--t-2xs); }
.face.lg { width: 64px; height: 64px; font-size: var(--t-lg); }
.face.blank { background: var(--ground-3); color: var(--ink-3); }
.face.blank svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* Your row at the foot of the nav: a pill like the nav's own links. */
.nav-foot.account { padding: var(--space-2) 0 0; }
.nav-account {
  display: flex; align-items: center; gap: var(--space-2h); width: 100%; min-width: 0;
  padding: var(--space-1h) var(--space-2); border-radius: var(--r-pill);
  color: var(--ink-2); font-weight: var(--w-regular);
}
.nav-account:hover { background: var(--ground-2); text-decoration: none; }
.nav-account.on { background: var(--ground-3); }
.nav-account .account-who { min-width: 0; }
.nav-account .account-who strong, .nav-account .account-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The Profile page: one card, your face beside its controls, the fields under. */
.profile { display: grid; gap: var(--space-4); max-width: 720px; }
.profile-photo { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.profile-photo-text { display: grid; gap: var(--space-1); min-width: 0; }
.profile-photo-text .name { font-size: var(--t-md); font-weight: var(--w-bold); }
.profile-photo-text .meta { margin: 0; }
.profile-out { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.profile-out .meta { margin: var(--space-1) 0 0; }
.profile-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.firm-tabs { margin: 0 0 var(--space-4); }
/* The tab names the section, so a card's own heading is kept for screen readers only. */
.firm .card[data-tab] > .card-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.firm .card[data-tab] > .card-head:not(:has(.meta)) { display: none; }
.firm .card[data-tab] > .card-head + .firm-grid { margin-top: 0; }
.firm .card[data-tab] > .firm-grid:first-child { margin-top: 0; }