/* Alerts, journey stepper, section nav, sparkline cards ------------------- */

/* ---- Alert banner ------------------------------------------------- */
.pw-alert {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: 14px;
  background: var(--surface-2); color: var(--ink);
}
.pw-alert__body { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.pw-alert__title { font-size: var(--text-base); font-weight: 700; }
.pw-alert__text { color: var(--ink); }
.pw-alert--crit { background: var(--crit-soft); }
.pw-alert--crit > .icon, .pw-alert--crit .pw-alert__title { color: var(--crit); }
.pw-alert--warn { background: var(--warn-soft); }
.pw-alert--warn > .icon, .pw-alert--warn .pw-alert__title { color: var(--warn); }
.pw-alert--ok { background: var(--ok-soft); }
.pw-alert--info { background: var(--info-soft); }
.pw-alert--info > .icon, .pw-alert--info .pw-alert__title { color: var(--info); }
.pw-alert--ok > .icon, .pw-alert--ok .pw-alert__title { color: var(--ok); }

/* ---- Journey stepper ---------------------------------------------- */
.pw-journey {
  list-style: none; margin: 0;
  padding: var(--space-4) var(--space-6);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.pw-journey__step { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pw-journey__marker {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink-3);
  border: 1px solid var(--line-2);
}
.pw-journey__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pw-journey__label { font-weight: 600; }
.pw-journey__when { font-size: var(--text-xs); color: var(--ink-3); }
.pw-journey__line { flex-grow: 1; height: 2px; border-radius: 2px; background: var(--line-2); min-width: 8px; }
.pw-journey__step:last-child .pw-journey__line { display: none; }
.pw-journey__step.is-done .pw-journey__marker { background: var(--brand-soft); color: var(--brand-text); border-color: transparent; }
.pw-journey__step.is-done .pw-journey__line { background: var(--brand); opacity: .35; }
.pw-journey__step.is-current .pw-journey__marker { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
@media (max-width: 900px) { .pw-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pw-journey__line { display: none; } }

/* ---- Section nav (profile record sections) ------------------------ */
.pw-secnav { padding: 10px; gap: 2px; }
.pw-secnav__title { padding: var(--space-2) 10px; }
.pw-secnav__btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 40px; padding: 8px 10px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-2);
  font: 500 var(--text-md)/1.25 var(--font-body);
  text-align: left;
}
.pw-secnav__btn:hover { background: var(--surface-2); color: var(--ink); }
.pw-secnav__btn[aria-current="true"] { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.pw-secnav__count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.pw-secnav__count.is-gap { color: var(--warn); font-weight: 600; }

/* ---- Measure card with sparkline ---------------------------------- */
.pw-measure__name { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.pw-measure__value-row { display: flex; align-items: baseline; gap: 10px; }
.pw-measure__value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; line-height: 1; }
.pw-measure__unit { font-size: var(--text-sm); color: var(--ink-3); }
.pw-measure__delta { margin-left: auto; }

.pw-spark { width: 100%; height: 56px; color: var(--brand); }
.pw-spark--crit { color: var(--crit); }
.pw-spark--warn { color: var(--warn); }
.pw-spark__area { fill: currentColor; opacity: .12; }
.pw-spark__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pw-spark__dot { fill: currentColor; }