/* ============================================================================
   AVENLEO — PROFILE
   ----------------------------------------------------------------------------
   Identity, personal details, security and the payout wallet.

   The identity block used to be a tinted gradient panel with a 30px name in it,
   which is a lot of emphasis for something the reader already knows. It is now
   an ordinary card: the avatar, the name, the account's tags, and the four
   lifetime figures that are the only new information on it.

   The security rows are the part that matters here, so they get the density and
   the alignment: one icon column, one description column, one control column,
   the same on every row.
   ========================================================================== */

.prof-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.prof-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* ---- identity ----------------------------------------------------------- */
.prof-hero {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--edge-highlight);
}
.prof-hero__top { display: flex; align-items: center; gap: var(--space-4); }
.prof-hero__ava { position: relative; flex: none; }
.prof-hero__cam {
  position: absolute; right: -2px; bottom: -2px;
  width: 24px; height: 24px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.prof-hero__cam:hover { background: var(--color-surface-3); color: var(--color-text); }
.prof-hero__cam .icon { width: 13px; height: 13px; }
.prof-hero__id { min-width: 0; flex: 1; }
.prof-hero__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
}
.prof-hero__handle { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: 2px; }
.prof-hero__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--space-3); }
.prof-hero__stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* ---- lifetime figures --------------------------------------------------- */
.prof-stat { padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-2); }
.prof-stat__v {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.prof-stat__l { font-size: var(--text-2xs); color: var(--color-text-faint); margin-top: 1px; }

/* ---- personal details --------------------------------------------------- */
.prof-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.prof-form__full { grid-column: 1 / -1; }
.prof-actions {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.prof-input-wrap { position: relative; }
.prof-input-wrap .reveal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }

/* ---- security rows ------------------------------------------------------ */
.set-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.set-row:first-child { padding-top: 0; }
.set-row:last-child { padding-bottom: 0; border-bottom: none; }
.set-row__ico {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: grid; place-items: center; flex: none;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-subtle);
}
.set-row__ico .icon { width: 15px; height: 15px; }
.set-row__ico--success { color: var(--color-success); border-color: var(--color-success-border); background: var(--color-success-soft); }
.set-row__ico--accent  { color: var(--color-accent-strong); border-color: var(--color-accent-border); background: var(--color-accent-soft); }
.set-row__id { min-width: 0; flex: 1; }
.set-row__t { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-weight: var(--weight-medium); font-size: var(--text-sm); }
.set-row__d { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; line-height: var(--leading-snug); }
.set-row__act { display: flex; align-items: center; gap: var(--space-2); flex: none; margin-left: auto; }

/* ---- danger zone -------------------------------------------------------- */
.prof-danger { border-color: var(--color-danger-border); }
.prof-danger__t { color: var(--color-danger); }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1024px) {
  .prof-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .prof-card-meta { display: none; }   /* card titles keep one line on phones */
  .prof-hero__top { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .prof-hero__stats { grid-template-columns: minmax(0, 1fr); }
  .prof-form { grid-template-columns: minmax(0, 1fr); }
  .prof-actions .btn { flex: 1; }
  .set-row { flex-wrap: wrap; }
}