/* ═══ INVITER IDENTITY ══════════════════════════════════════════════════════
   Who sent an invitation: the person leading, their brokerage supporting.
   Replaces .auth-icon-circle at the top of the acceptance cards, and rides the
   invited seller's stepper in its --compact form.

   Lives here rather than per-view because it renders on the seller acceptance
   card, the practice-claim card and every stepper screen; three copies of the
   look would drift.

   🚨 ITS OWN PROPSHAFT SHEET, not a block in marketing/pages/auth.css, because
   the three screens do not share a layout: the acceptance card is `auth`, and
   the practice-claim card and the stepper are `onboarding`, which never loads
   auth.css. Both layouts link this file, the way both link
   shared/estimate_disclaimer. It is NOT @imported into the Tailwind bundle: the
   tokens below (--brand-50, --hairline, --sp-*, --text-*) are marketing-bundle
   tokens and would resolve to nothing there.

   No coloured edge accent and no warm-grey fill: a hairline on all four sides
   over the page surface, per the house rules.
   ═════════════════════════════════════════════════════════════════════════ */
.invite-identity {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  margin: 0 auto var(--sp-5);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-input);
  text-align: left;
}

/* 🚨 The trailing margin is for separating this block from what FOLLOWS it, so
   it comes off when nothing does. On the acceptance card the heading follows and
   the 20px is right; on the practice-claim card the block is the last child of
   `.onb-head`, whose own padding-bottom (8px) plus `.onb-body`'s padding-top
   (16px) already separate it from the read-back. Keeping the margin there
   stacked all three into a 44px trench between the two boxes. */
.invite-identity:last-child { margin-bottom: 0; }

.invite-identity__face,
.invite-identity__firm {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}

/* The face is circular and cropped, and carries the brand tint: it is the lead. */
.invite-identity__face {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--brand-50);
}

/* The logo is a square mark, never a circle: a wordmark cropped round stops
   being the brokerage's logo. Neutral, so the face stays the lead. */
.invite-identity__firm {
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: var(--radius-input);
  background: var(--gray-50);
  border: 1px solid var(--hairline);
}
.invite-identity__face .invite-identity__img { width: 100%; height: 100%; object-fit: cover; }
.invite-identity__firm .invite-identity__img { width: 100%; height: 100%; object-fit: contain; }

.invite-identity__mono {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--brand-700);
  letter-spacing: 0.01em;
}
.invite-identity__text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.invite-identity__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.invite-identity__name {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
  text-decoration: none;
}
a.invite-identity__name:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }

/* 🚨 WRAPS, it does not truncate. This line was `white-space: nowrap` with an
   ellipsis, on the theory that a tall text block would knock the logo out of
   alignment. It does not: the row is `align-items: center`, so the logo stays
   centred whatever height the text takes. What the ellipsis DID do was clip
   "Managing Broker at Acme Dental Brokerage" to "Managing Broker at Acme
   Dental...", hiding the brokerage name in the one block whose entire job is to
   show it. Two real-world lines is cheaper than that. */
.invite-identity__role {
  font-size: var(--text-md);
  line-height: 1.35;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* The stepper strip: one line, no card, sized to sit inside existing chrome. */
.invite-identity--compact {
  gap: var(--sp-2);
  margin-bottom: 0;
  padding: 0;
  background: none;
  border: 0;
}
.invite-identity--compact .invite-identity__face { width: 28px; height: 28px; }
.invite-identity--compact .invite-identity__firm { display: none; }
.invite-identity--compact .invite-identity__mono { font-size: var(--text-sm); }
.invite-identity--compact .invite-identity__text { flex-direction: row; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.invite-identity--compact .invite-identity__name { font-size: var(--text-md); }
.invite-identity--compact .invite-identity__role { font-size: var(--text-md); color: var(--text-tertiary); }
.invite-identity--compact .invite-identity__role::before { content: "· "; }

@media (max-width: 480px) {
  .invite-identity { gap: var(--sp-2); padding: var(--sp-2); }
  .invite-identity__face { width: 40px; height: 40px; }
  .invite-identity__firm { width: 32px; height: 32px; }
}