/* =========================================================
   Profile page — profile.html
   ========================================================= */

.profile-header {
  display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: var(--sp-8); margin-bottom: var(--sp-6);
  position: relative; overflow: hidden;
}
.profile-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-text);
  z-index: 1;
}
.profile-header__ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.profile-header__ring .avatar-xl { position: absolute; }
.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-svg circle { fill: none; stroke-width: 5; }
.ring-svg circle:first-child { stroke: var(--bg-subtle); }
.ring-fill {
  stroke: var(--brand-accent);
  stroke-linecap: round;
  stroke-dasharray: 226;
  stroke-dashoffset: calc(226 - (226 * var(--pct)) / 100);
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}

.profile-header__id { flex: 1; min-width: 200px; }
.profile-header__id h1 { font-size: var(--fs-xl); margin-bottom: 2px; }
.profile-header__id p { color: var(--text-secondary); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.profile-header__meta { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-tertiary); }
.profile-header__meta span { display: inline-flex; align-items: center; gap: 5px; }
.profile-header__meta svg { width: 14px; height: 14px; }

.profile-header__completion { text-align: center; }
.profile-header__completion span { display: block; font-size: var(--fs-2xl); font-weight: 700; color: var(--brand-accent); }
.profile-header__completion small { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }

.profile-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); overflow-x: auto; }
.profile-tabs button {
  padding: 10px 18px; border-radius: var(--radius-full);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary);
  background: var(--bg-subtle); white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
.profile-tabs button.is-active { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-glow-primary); }
.profile-tabs button:not(.is-active):hover { background: var(--bg-hover); }

/* Phase 4 (§4.2) — candidate-facing pipeline tracker */
.app-tracker__steps { display: flex; gap: 5px; }
.app-tracker__step {
  flex: 1; height: 6px; border-radius: var(--radius-full);
  background: var(--bg-subtle);
}
.app-tracker__step.is-done { background: var(--brand-accent); }
.app-tracker__step.is-current { background: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-100); }
[data-theme="dark"] .app-tracker__step.is-current { box-shadow: 0 0 0 3px rgba(76,106,224,.25); }

/* Phase 2 — Identity Verification card on the "Identity Verification Required" prompt */
.verify-callout {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5); border-radius: var(--radius-lg);
  background: var(--brand-primary-100); margin-bottom: var(--sp-6);
}
[data-theme="dark"] .verify-callout { background: rgba(76,106,224,.12); }
.verify-callout__icon { flex-shrink: 0; width: 40px; height: 40px; }