/* ═══════════════════════════════════════════════════════
   FREEscience — Profile page styles
   ═══════════════════════════════════════════════════════ */

/* Coauthor chip */
.coauthor-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  font-size: var(--fs-xs);
  color: var(--text);
}
.coauthor-chip .avatar { width: 22px; height: 22px; font-size: 9px; }

/* Attachment row in profile */
.attachment-row {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  background: var(--bg);
  font-size: var(--fs-sm);
}
.attachment-row .icon { color: var(--accent); flex-shrink: 0; }
.attachment-row strong { display: block; }
.attachment-row span  { display: block; color: var(--muted); font-size: var(--fs-xs); }

/* Edit profile form */
.edit-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 600px) { .edit-profile-grid { grid-template-columns: 1fr; } }

/* Avatar upload area */
.avatar-upload-area {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft);
  margin-bottom: var(--space-lg);
}

/* Tab panels */
.tab-panel { padding-top: var(--space-md); }

/* Person Card (followers / following) */
.profile-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: all var(--duration-fast);
}
.profile-person:hover {
  background: var(--soft);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.profile-person-info strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.profile-person-info p {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}