.profile { padding: 0; overflow: hidden; }

.avatar-preview-frame { display: contents; }

.profile__identity {
  position: relative;
  padding: 0 var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.profile__wash {
  width: 100%;
  height: 96px;
  margin: 0 calc(-1 * var(--space-6));
  padding: 0 var(--space-6);
  box-sizing: content-box;
  background:
    radial-gradient(140% 130% at 50% -50%, var(--brand-100) 0%, transparent 62%),
    linear-gradient(180deg, var(--brand-50) 0%, transparent 92%);
}

.profile--brand-owner .profile__wash {
  background:
    radial-gradient(140% 130% at 50% -50%, var(--brand-200) 0%, transparent 62%),
    linear-gradient(180deg, var(--brand-100) 0%, transparent 92%);
}

.profile__crest {
  width: 80px;
  height: 80px;
  font-size: var(--text-xl);
  margin-top: -40px;
  box-shadow: 0 0 0 4px var(--surface-base), var(--shadow-md);
  position: relative;
  background-color: var(--surface-sunken);
}

.profile__crest--product { background-color: var(--text-primary); color: var(--text-inverse); }
.profile__crest--brand {
  background-color: var(--brand-600);
  color: var(--text-on-accent);
  box-shadow: 0 0 0 4px var(--surface-base), 0 0 0 5px var(--brand-300), var(--shadow-md);
}

.profile__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: var(--space-5) 0 var(--space-2);
}
.profile__eyebrow em { font-style: normal; color: var(--brand-600); font-weight: 700; }

.profile__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
}

.profile__role {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}

.profile__badges {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.profile__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.profile__brand-stones { display: inline-flex; align-items: center; }
.profile__brand-stone {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--surface-base);
}
.profile__brand-stone + .profile__brand-stone { margin-left: -4px; }
.profile__brand-stone--light { background: var(--brand-400); }
.profile__brand-stone--mid { background: var(--brand-600); }
.profile__brand-stone--dark { background: var(--brand-800); }
.profile__brand-name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.profile__facts {
  width: 100%;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);
  text-align: left;
}
.profile__fact-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 2px;
}
.profile__fact-value {
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin: 0;
  overflow-wrap: anywhere;
}

.profile__standing {
  width: 100%;
  margin-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.profile__content { padding: var(--space-6); min-width: 0; }
.profile__section + .profile__section { margin-top: var(--space-8); }
.profile__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.profile__row + .profile__row { border-top: 1px solid var(--border-subtle); }
.profile__row-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}
.profile__row-icon .material-symbols-rounded {
  font-size: var(--text-lg);
  font-variation-settings: 'FILL' 0, 'wght' 300;
}
.profile__row-body { flex: 1; min-width: 0; }
.profile__row-title { font-size: var(--text-sm); color: var(--text-primary); margin: 0; }
.profile__row-meta { font-size: var(--text-xs); color: var(--text-tertiary); margin: 1px 0 0; }
.profile__row-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.profile__row--link {
  border-radius: var(--radius-md);
  margin-left: calc(-1 * var(--space-3));
  margin-right: calc(-1 * var(--space-3));
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  transition: background-color var(--duration-fast) var(--ease-out);
  cursor: pointer;
}
.profile__row--link:hover { background-color: var(--surface-hover); }

.member-profile,
.profile--members { width: 100%; max-width: calc(var(--space-32) * 5); margin-inline: auto; }
.member-profile__about {
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.member-profile__chevron { color: var(--text-tertiary); }
.member-profile__crowd { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.member-profile__crowd-text { font-size: var(--text-sm); color: var(--text-secondary); }
.member-profile__line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-profile .profile__row-title,
.member-profile .profile__row-meta,
.profile--members .profile__row-title,
.profile--members .profile__row-meta { display: block; }
.member-profile .profile__row--link,
.profile--members .profile__row--link { color: inherit; text-decoration: none; min-height: var(--tap-target); }
.member-profile .profile__row--link:focus-visible,
.profile--members .profile__row--link:focus-visible {
  outline: var(--space-0-5) solid var(--border-focus);
  outline-offset: calc(-1 * var(--space-0-5));
}
.profile__reach { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); }
.profile__reach strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.profile__reach-note { display: block; font-size: var(--text-xs); color: var(--text-tertiary); }
.profile__finder { margin-bottom: var(--space-6); }
.profile__finder .account-search { margin: 0; }
.profile__picked { margin: calc(-1 * var(--space-3)) 0 var(--space-4); }

.member-link { color: inherit; text-decoration: none; }
.member-link:hover { text-decoration: underline; }
.member-link--avatar { display: inline-flex; flex-shrink: 0; border-radius: var(--radius-full); }
.member-link--avatar:hover { text-decoration: none; }
.board-entry .member-link { position: relative; }

.profile__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6) var(--space-5);
}
