/* instagram-profile.css — a quiet identity card, not a banner.
 *
 * It answers one question ("which account is this?") and then gets out of the
 * way, so it reads as part of the settings form rather than an alert: no fill,
 * one hairline, and the label column set in the same muted tone the rest of the
 * form uses for its field labels.
 */

.crm-igp {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--crm-igp-line, #e6e9e2);
  border-radius: 8px;
  background: var(--crm-igp-bg, transparent);
  max-width: 660px;
}

.crm-igp__head {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--crm-igp-muted, #55606c);
}

.crm-igp__row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.crm-igp__label {
  flex: 0 0 168px;
  color: var(--crm-igp-muted, #55606c);
}

.crm-igp__value {
  color: var(--crm-igp-ink, #1d1b1c);
  font-weight: 500;
  word-break: break-all;
}

/* Ids are read digit by digit when someone is checking one against a
   dashboard, so they get a monospaced face and tabular figures. */
.crm-igp__row:last-child .crm-igp__value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

:root.dark,
.dark,
[data-theme="dark"] {
  --crm-igp-line: #32363c;
  --crm-igp-muted: #98a1ad;
  --crm-igp-ink: #e8eaed;
}

@media (max-width: 620px) {
  .crm-igp__row { flex-direction: column; gap: 0; }
  .crm-igp__label { flex: none; }
}