/* =============================================================================
   My Profile — the signed-in user's own record
   -----------------------------------------------------------------------------
   Ported from html/admin/profile.html + css/pages/profile.css, re-dressed in the
   portal's own system: the admin's `.profile-card` is a plain `.card`, its hero
   is that card's header (where the record's identity is shown, so Edit Profile
   lives there — memory.md rule 15), and its `.info-row` key-value list follows
   the portal's own fact rhythm — label, then value immediately after it, with a
   trailing spacer track taking the leftover width instead of a gap (rules 6/16).
   Nothing here is shared with the admin surface.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Identity band — the card header
   -------------------------------------------------------------------------- */
.profile-hero { padding: 16px; gap: 12px; flex-wrap: wrap; }
.profile-hero__id { display: flex; align-items: center; gap: 14px; min-width: 0; }

.profile-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;              /* a true circle — the one radius exception */
  font-size: 18px;
}

.profile-hero__text { min-width: 0; }
.profile-hero__name { margin: 0; font-size: 18px; }
.profile-hero__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 6px; font-size: 12px; color: var(--color-text-muted);
}
.profile-hero__sep { color: var(--color-text-subtle); }

/* -----------------------------------------------------------------------------
   The two sections, side by side inside the one card
   Two across rather than one per row: six facts and two security lines do not
   need a screen of scrolling (rule 16).
   -------------------------------------------------------------------------- */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; }
.profile-grid > .profile-section + .profile-section { border-left: 1px solid var(--color-border); }

.profile-section { padding: 16px; min-width: 0; }
.profile-section__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.profile-section__title { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-text); }

/* -----------------------------------------------------------------------------
   Fact rows — label, value, then a spacer track
   -------------------------------------------------------------------------- */
.profile-facts { display: flex; flex-direction: column; }
.profile-fact {
  display: grid; grid-template-columns: max-content max-content 1fr;
  align-items: baseline; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--color-border);
}
.profile-fact:last-child { border-bottom: none; }
.profile-fact__l { font-size: 12px; color: var(--color-text-muted); }
.profile-fact__v {
  font-size: 12px; font-weight: 600; color: var(--color-text);
  font-variant-numeric: tabular-nums; min-width: 0;
}
.profile-fact__v--mask { letter-spacing: 2px; }

/* The policy line under the password fields in the Change Password dialog. */
.profile-pw-note { margin: 0; font-size: 12px; color: var(--color-text-muted); max-width: 70ch; }

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-grid > .profile-section + .profile-section {
    border-left: 0; border-top: 1px solid var(--color-border);
  }
  .profile-hero { align-items: flex-start; }
  .profile-hero .btn, .profile-section__head .btn { min-height: 44px; }
}

@media (max-width: 480px) {
  .profile-avatar { width: 48px; height: 48px; font-size: 16px; }
  .profile-hero__name { font-size: 16px; }
  .profile-hero .btn { width: 100%; justify-content: center; }
}