/* Preserve the original page grids, card sizes and compact information density. */
.opc-person-card {
  box-sizing: border-box;
  min-width: 0;
  min-height: 222px;
  padding: 15px 17px 12px;
  display: grid;
  grid-template-rows: minmax(80px,auto) minmax(0,1fr) 31px;
  gap: 10px;
  border: 1px solid #e8e7e3;
  border-radius: 14px;
  background: #fff;
  color: #111;
  box-shadow: 0 8px 23px rgb(0 0 0 / 3.5%);
  transition: border-color .18s, box-shadow .18s;
}
.opc-person-card:hover, .opc-person-card:focus-within {
  border-color: #165cff;
  box-shadow: 0 12px 27px rgb(22 92 255 / 8%);
}
.opc-card-header { display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: start; gap: 8px; min-width: 0; }
.opc-card-avatar { position: relative; width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #ffdf30; color: #252525; font-size: 20px; font-weight: 800; }
.opc-card-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opc-card-identity { min-width: 0; padding-top: 2px; }
.opc-card-name-row { display: block; min-width: 0; margin-bottom: 6px; }
.opc-card-name-row h3 { min-width: 0; margin: 0; font-size: 16px; font-weight: 850; line-height: 1.4; }
.opc-card-name { display: block; width: 100%; padding: 0; border: 0; border-radius: 3px; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.opc-card-name:hover { color: #165cff; }
.opc-card-city { display: block; margin-top: 2px; color: #777; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.opc-card-role-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.opc-card-role { display: block; min-width: 0; max-width: 100%; padding: 3px 7px; overflow: hidden; border-radius: 4px; color: #252000; background: #ffd500; font-size: 11px; font-weight: 800; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.opc-card-role--empty { color: #666; background: #f0f2f5; font-weight: 500; }
.opc-card-contact { flex: 0 0 auto; color: #39724e; font-size: 10px; line-height: 1.4; white-space: nowrap; }
.opc-card-project { margin: 7px 0 0; padding: 0; overflow: hidden; color: #6c727c; font-size: 12px; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; }
.opc-card-project strong { color: #174a9c; font-weight: 750; }

.opc-card-exchange { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 0; align-content: start; min-width: 0; }
.opc-card-exchange > div { min-width: 0; }
.opc-card-exchange dt { margin-bottom: 6px; color: #333; font-size: 12px; font-weight: 750; line-height: 1.4; }
.opc-card-exchange dd { display: flex; gap: 4px; min-width: 0; margin: 0; align-items: center; }
.opc-card-tag { min-width: 0; max-width: 100%; padding: 4px 7px; overflow: hidden; border-radius: 7px; color: #2351a0; background: #edf3ff; font-size: 11px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.opc-card-seek .opc-card-tag { color: #ad4523; background: #fff0e9; }
.opc-card-unfilled { color: #777; font-size: 11px; line-height: 1.4; }
.opc-card-more { flex: 0 0 auto; padding: 4px 2px; border: 0; border-radius: 4px; background: transparent; color: #456393; font: inherit; font-size: 11px; font-weight: 700; line-height: 1.4; text-decoration: none; cursor: pointer; }
.opc-card-more:hover { color: #165cff; text-decoration: underline; }
.opc-card-footer { min-width: 0; }
.opc-card-action { box-sizing: border-box; width: 100%; height: 31px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; border: 1px solid #111; border-radius: 999px; background: #fff; color: #111; font: inherit; font-size: 11px; font-weight: 850; text-decoration: none; cursor: pointer; }
.opc-card-action:hover:not(:disabled) { color: #165cff; border-color: #165cff; }
.opc-card-action:disabled { color: #888; border-color: #ddd; background: #f4f4f4; cursor: default; }
.opc-card-action:focus-visible, .opc-card-name:focus-visible, .opc-card-more:focus-visible { outline: 2px solid #165cff; outline-offset: 2px; }

.opc-person-card--compact { min-height: 198px; padding: 17px 14px 13px; grid-template-rows: minmax(78px,auto) minmax(0,1fr) 31px; gap: 6px; border-radius: 15px; }
.opc-person-card--compact .opc-card-header { grid-template-columns: 52px minmax(0,1fr); gap: 8px; }
.opc-person-card--compact .opc-card-avatar { width: 52px; height: 52px; }
.opc-person-card--compact .opc-card-project { font-size: 11px; }
.opc-person-card--compact .opc-card-exchange { gap: 8px; }
.opc-person-card--compact .opc-card-exchange dt { margin-bottom: 4px; font-size: 11px; }
.opc-person-card--compact .opc-card-tag { padding: 3px 6px; font-size: 10px; }
.opc-person-card--compact .opc-card-unfilled, .opc-person-card--compact .opc-card-more { font-size: 10px; }

@media (max-width: 760px) { .opc-person-card--compact { min-height: 185px; padding-top: 12px; padding-bottom: 10px; grid-template-rows: minmax(72px,auto) minmax(0,1fr) 31px; } }
@media (max-width: 650px) { .opc-person-card:not(.opc-person-card--compact) { min-height: 214px; } }
@media (prefers-reduced-motion: reduce) { .opc-person-card { transition: none; } }