/* Shared WorkStyle profile card — rendered identically by the /ws share page and the quiz result. */
.ws-profile-card {
  background: linear-gradient(135deg, #3a3f86, #222a6e);
  color: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(20, 30, 80, .22);
  padding: clamp(20px, 3vw, 30px) clamp(22px, 4vw, 34px) clamp(24px, 3.4vw, 30px);
}
.ws-header-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; align-items: center; }

/* Prominent identity: name (large) + color-coded role/type pills */
.ws-id-block { margin-bottom: 18px; }
.ws-id-name { font-size: clamp(23px, 3.8vw, 31px); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: #fff; }
.ws-id-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.ws-id-tag { font-size: 12.5px; font-weight: 800; padding: 6px 13px; border-radius: 999px; letter-spacing: .01em; }
.ws-id-tag--role { background: rgba(31, 169, 140, .22); color: #7dffd9; border: 1px solid rgba(95, 227, 196, .42); }
.ws-id-tag--type { background: rgba(143, 160, 243, .2); color: #c7d0ff; border: 1px solid rgba(143, 160, 243, .45); }

/* Icon + archetype */
.ws-identity-row { display: flex; align-items: center; gap: 16px; }
.ws-icon-wrap { width: 60px; height: 60px; border-radius: 15px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); flex: none; overflow: hidden; }
.ws-icon-wrap svg { width: 100%; height: 100%; display: block; }
.ws-type-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .13em; color: rgba(255, 255, 255, .5); text-transform: uppercase; }
.ws-archetype-name { font-size: clamp(22px, 3.6vw, 32px); font-weight: 800; letter-spacing: -.015em; line-height: 1.05; margin-top: 2px; }
.ws-named .ws-archetype-name { font-size: clamp(19px, 3vw, 25px); } /* smaller when the person's name leads */

.ws-tagline { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .82); font-style: italic; margin-top: 16px; max-width: 420px; }
.ws-trait-badges-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ws-trait-badge-nav { border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; color: #fff; }

/* Radar + legend */
.ws-radar-col { display: flex; flex-direction: column; align-items: center; }
.ws-radar-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; font-size: 11.5px; margin-top: 12px; }
.ws-legend-item { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .78); }
.ws-legend-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* Best with + Vibe */
.ws-bestvibe { margin-top: 18px; }
.ws-best-row, .ws-vibe-row { display: flex; align-items: baseline; gap: 9px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 11px; padding: 12px 15px; margin-top: 10px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.ws-best-label, .ws-vibe-label { color: #7dffd9; font-weight: 800; flex: none; }